zepto等源码学习

时光怂恿深爱的人放手 提交于 2019-11-29 08:39:30

underscore代码学习

underscore是一个函数式的js工具库,如果用不上template等地方,可以用lodash.js替代

template

看应用

    var compiled = _.template("hello: <%= name %>");
    compiled({name: 'moe'});
    => "hello: moe"

    var compiled = _.template("<% print('Hello ' + epithet); %>");
    compiled({epithet: "stooge"});
    => "Hello stooge"
  _.template = function(text, settings, oldSettings) {
    if (!settings && oldSettings) settings = oldSettings;
    settings = _.defaults({}, settings, _.templateSettings);

    // Combine delimiters into one regular expression via alternation.
    var matcher = RegExp([
      (settings.escape || noMatch).source,
      (settings.interpolate || noMatch).source,
      (settings.evaluate || noMatch).source
    ].join('|') + '|$', 'g');

    // Compile the template source, escaping string literals appropriately.
    var index = 0;
    var source = "__p+='";
    text.replace(matcher, function(match, escape, interpolate, evaluate, offset) {
      source += text.slice(index, offset).replace(escapeRegExp, escapeChar);
      index = offset + match.length;

      if (escape) {
        source += "'+\n((__t=(" + escape + "))==null?'':_.escape(__t))+\n'";
      } else if (interpolate) {
        source += "'+\n((__t=(" + interpolate + "))==null?'':__t)+\n'";
      } else if (evaluate) {
        source += "';\n" + evaluate + "\n__p+='";
      }

      // Adobe VMs need the match returned to produce the correct offset.
      return match;
    });
    source += "';\n";

    // If a variable is not specified, place data values in local scope.
    if (!settings.variable) source = 'with(obj||{}){\n' + source + '}\n';

    source = "var __t,__p='',__j=Array.prototype.join," +
      "print=function(){__p+=__j.call(arguments,'');};\n" +
      source + 'return __p;\n';

    var render;
    try {
      render = new Function(settings.variable || 'obj', '_', source);
    } catch (e) {
      e.source = source;
      throw e;
    }

    var template = function(data) {
      return render.call(this, data, _);
    };

    // Provide the compiled source as a convenience for precompilation.
    var argument = settings.variable || 'obj';
    template.source = 'function(' + argument + '){\n' + source + '}';

    return template;
  };

思路:柯里化、可配置的正则、template --> render

zepto学习

触屏事件

  • swipe
  • swipeLeft
  • swipeRight
  • swipeUp
  • swipeDown
  • singleTap
  • doubleTap
  • tap
  • longTap 750ms

代码结构

一上来就fix了trim和reduce函数
核心代码区:Zepto collections相关,DOM相关,
;(function($){
//事件
});
;(function($){
//ua检测
});
;(function($){
//动画
});
;(function($){
//ajax+jsonp
});
;(function($){
//表单序列化
});
;(function($){
//手势事件
});

转载于:https://my.oschina.net/u/1792175/blog/598019

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!