mmb小结

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

---

（一）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()