插件源码

源码面前没秘密，这个文章记录牛逼的插件的实现原理

除此之外

• wx.sdk改动查看【微信公众号sdk】笔记
• vue源码查看前面笔记

zepto.weui.js

• 这个有许多好用便捷的插件
• 要实现设置考勤时间业务，但没找到日期选择器只选择时分的api代码，需要使用picker实现，不能用datetimePicker，但是picker没有提供切除初始化冒号【:】的功能，也没有提供修改时间后重写到输入框上带上冒号【:】
• 看了下源码，需要自己改进一下

// 1996 行
var inputValue = $this.val();
if(params.value === undefined && inputValue !== "") {
   + if(params.parse){
   +     params.value = params.parse(inputValue)
   + }else{
        params.value = (params.cols && params.cols.length > 1) ? inputValue.split(" ") : [inputValue];
   + }
}

// 1424（不需要改动，但可以看出自己可以传一个formatValue函数）
if (p.input && p.input.length > 0) {
    $(p.input).val(p.params.formatValue ? p.params.formatValue(p, p.value, p.displayValue) : p.value.join(' '));
    $(p.input).trigger('change');
}
// formatValue函数应该怎么写，找一下官方怎么写
// 3278 ，往下找format
formatValue: function (p, values, displayValues) {
    return self.params.format(p, values, displayValues);
}
// 3383，把这个复制了就行
format: function (p, values) { // 数组转换成字符串
    return p.cols.map(function (col) {
        return col.value || col.content;
    }).join('');
}

• 就加了上面4行代码

<input class="weui-input" id="name" value="1997-06-06" type="text" readonly="">

$("#name").picker({
    title: "选择年月",
    cols: [
        {
            textAlign: 'center',
            values: carr(00,23)
        },
        {
            divider: true,  // 这是一个分隔符
            content: ":"
        },
        {
            textAlign: 'center',
            values: carr(00,59)
        }
    ],
    // 改为就支持了这个功能
    parse:function(str){
        return str.split(":")
    },
    // 跟3383写一样就行
    formatValue: function(p){
        return p.cols.map(function (col) {
            return col.value || col.content;
        }).join('');
    },
    onChange: function (picker, values, displayValues) {
        console.log(values);
    }
});

操作指引

• 第一次进入某app或者某页面时的操作指引怎么实现的
• 弄一个黑色的蒙版，把需要用户操作的dom设置css

position: relative;
z-index: 10;

• 比黑色蒙版高，就能显示到蒙版上，并且不会破坏原dom结构，事件也没有消失
• 然后判断dom的大小和位置后再空白的位置提示操作就行

best-scroll.js

• 著名仿系统原生滚动事件插件
• 最长用于禁用页面的滚动事件的地图上的弹窗

// 原理是使用js模拟原生的滚动时间，甚至模拟了惯性的滚动效果
// BScroll.prototype._end是正常的移动结束执行，然后在函数内计算惯性方向和惯性时间，执行 this.scrollTo(newX, newY, time, easing);
// 在 BScroll.prototype.scrollTo 里判断了是不是有time参数，如果有执行 this._animate(x, y, time, easing.fn);
// 在 BScroll.prototype._animate 里用 requestAnimationFrame 循环的执行step()
// step 通过判断惯性时间结束，内部是执行 me._translate(newX, newY, newScale); 这个方法才是真正的修改dom的tramform的值

var oScroll = new BScroll(".wrap", {
  probeType: 2,
  //下拉刷新：可以配置顶部下拉的距离（threshold） 来决定刷新时机以及回弹停留的距离（stop）
  //这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载
  pullUpLoad: {
    threshold: 10
  },
  mouseWheel: {    // pc端同样能滑动
    speed: 20,
    invert: false
  },
  useTransition:false  // 防止iphone微信滑动卡顿
});
oScroll.on("scroll",function(top){
  console.log(top)
});
oScroll.on("pullingUp",function(){
  //alert('已到最底部');
  console.log('加载ajax数据');
  oScroll.finishPullUp();//可以多次执行上拉刷新
});
// 新数据加载后需要执行这个 
// oScroll.refresh();

后续会继续补充