mmb小结

来源：互联网发布：库里生涯场均数据编辑：程序博客网时间：2024/05/16 19:05

我喜欢记录自己学习工作过程中遇到的方法，码段。自己本身是记忆力极差的人，像极了七秒记忆的鱼，很多知识都是看了忘，忘了查。本身工作就是极具记忆和逻辑，而且前端发展极快，时刻感觉自己疲惫不堪，在不恰当的时间抱怨一番。希望通过积累，丰富自己，做得更好。

（一）template模板引擎
artTemplate的库分为两种，一个是template.js，一个是template-native.js
第一种是简洁语法，第二种是原生语法。我自己用的是第一种：

基本语法：

html:

<script type="text/html" id="nav">    {{ each result as value i}}    <a href="{{  value.titlehref }}" class="col-xs-3 nav-more-hide">        <div>            {{ #value.img }}        </div>        <p>{{ value.name }}</p>    </a>    {{ /each }}</script>

js:
data的结构：

{result: [{img:"<img src="images/ic_search.png" alt="比价搜索">"indexmenuId:0}]}

渲染模板：

var html = template('nav', data);$('.m-nav .row').html(html);

上边是放在html中的用法，还有放在js文件中的用法，需要提供变量来保存模板：

var apply_list = '{{each list as his}}'+            '<li data-apply-id="{{his.id}}">'+                '<ul class="shop-attr-lst group">'+                    '<li>店铺名:<a href="javascript:;">{{his.shop_name}}</a></li>'+                    '<li>账户余额：{{his.shop_balance}}元</li>'+                '</ul>'+            '</li>'+         '{{/each}}';var data = {     list:[        {"id":1,"shop_name":"123","shop_balance":5000},        {"id":2,"shop_name":"12344","shop_balance":500}    ]}var render = template.compile(apply_list);var html = render(data);$("#content").html(html);

（二）巧用css3选择器技巧：

.m-nav a:nth-last-child(-n+4){    display: none;}

上述代码的作用：隐藏最后的4项
与js代码共同作用，控制点击显示隐藏效果：

$('.nav-more-hide:nth-last-child(-n+4)').toggle()

（三）：优化加载列表：点击，没有就加载，已经加载过就不再请求，直接渲染

    if($(that).find('li').attr('class')=='two'){            return;        }

注意点：这里有一个小坑，可能我对find的理解不够，当时直接这样使用，结果发现它打印了自身，导致判断条件的失效。

// console.log($(that).find('li'));  不能这样写，会打印本身

（四）：选择列表切换，请求优化
有很多方法，我在此项目分类页面用的是在内存中定义对象进行保存数据来优化。
定义：

var olddata = {},        key,        data = null;

存储：

key = param + '-' + $('.page select').val();olddata[key] = data;

判断：

if (olddata[key]) {                    // console.log(olddata[key]);                    // 更新内容                    data = olddata[key];                    // $('.list-main').empty();                    var html = template('product', data);                    $('.list-main').html(html);                    document.body.scrollTop = 0;                    return;                } else {                    ajax({                        url: 'http://192.168.15.128:3000/api/getproductlist',                        data: {"categoryid": param, pageid: $('.pageselect').val()},                        success: function (data) {                            key = param + '-' + $('.page select').val();                            olddata[key] = data;                            // console.log(olddata);                            // console.log(data);                            $('.list-main').empty();                            var html = template('product', data);                            $('.list-main').html(html);                            document.body.scrollTop = 0;                        }                    })

用这种方法，也不会请求ajax：window.history.go(-1);

(五)：懒加载
通过scrollTop，判断触底距离，进而判断是否请求
由于项目要求数据一次请求，减轻服务器压力，所以我做了一个假的懒加载。

            var top,                lHgt,                height;            $(window).scroll(function () {                top = document.documentElement.scrollTop || document.body.scrollTop;                // 判断共加载的距离                if (top > 4800) {                    return;                }                lHgt = $('.m-main li')[0].offsetHeight;                height = $('.m-main .list').height();                console.log(height);                // 判断是否快要触底                var pd = true;                if( pd == false)return;                if ((height - top) <= (lHgt * 3)) {                    ajax({                        url: 'http://192.168.15.76:3000/api/getinlanddiscount',                        success: function (data) {                            pd = false;                            var html = template('con', data);                            $('.m-main .list').append(html);                            //延时500，加载内容                            setTimeout(function () {                                pd = true;                            },500)                        }                    })                }            })

（六：导航栏滑动）
需求：touch滑动，点击请求数据并定位

function Swipe(){    /*通过封装的swipe插件来实现*/    iScroll({        swipeDom:document.querySelector('父对象'),/*父容器对象*/        swipeType:'y',/*滑动的方向*/        swipeDistance:100/*缓冲的距离*/    });}

手写代码实现，无缓冲滑动功能：// 滑动效果实现            var oldX = 0;            var newX = 0;            var touchMoveWidth = 0;            var currX = 0;            $('.tabs ul')[0].addEventListener('touchstart', function (e) {                oldX = e.touches[0].clientX;            });            $('.tabs ul')[0].addEventListener('touchmove', function (e) {                var offsetLeft = $('.tabs ul').offset().left;                newX = e.touches[0].clientX;                touchMoveWidth = newX - oldX;                // console.log(offsetLeft);                // 限定边界值                if(offsetLeft + currX + touchMoveWidth >= 0){                    currX = -offsetLeft-touchMoveWidth;                }                if(offsetLeft + currX + touchMoveWidth <= -width){                     currX =  -width - touchMoveWidth -offsetLeft;                }                // 定位                // currX = currX + touchMoveWidth; 不能在这里改变它，因为是实时的                if ((offsetLeft + currX + touchMoveWidth <= 0) && (offsetLeft + currX + touchMoveWidth >= -width)) {                    $('.tabs ul').css('transform', "translateX(" + (currX + touchMoveWidth) + "px)");                    $('.tabs ul').css('webkitTransform', "translateX(" + (currX + touchMoveWidth) + "px)");                }            });            $('.tabs ul')[0].addEventListener('touchend', function (e) {                // 判断当前点击的对象  定位ul                // 在点击事件中进行定位                // 当前移动的位置                // $('.tabs ul').css('transform', "translateX(" + (currX) + "px)");                // 重置  不重置currX                currX = currX + touchMoveWidth;                oldX = 0;                newX = 0;                touchMoveWidth = 0;            });            // 要绑定在这里            // 点击切换内容            $('.tabs a').click(function () {                var param = $(this).attr('title')-0;                // 定位                var index = $(this).parent().index();                // console.log(index);                var distance = 0;                for(var i =0;i<index;i++){                    distance += $('.tabs li')[i].offsetWidth;                }                // 限定范围                // 屏幕宽度                var screenW = window.screen.width;                console.log(width);                if(distance>=(width-screenW)){                    distance=(width-screenW)                }                // 添加位移                $('.tabs ul').css('transform', "translateX(" + (-distance) + "px)");                // 请求对应数据 调用封装的ajax                ajax()

0 0