zepto源码阅读

zepto考虑的都是现代浏览器，代码相对jquery简洁些 这是早期的代码，很好理解 发现zepto的作者喜欢省略括号，vue的作者喜欢省略分号 把选择的元素放到一个数组里面，位置相关的操作，就相当于超过数组

//在这里把所有选择的东西当数组处理
var $ = function (selector) {
    $.dom = [].slice.apply(document.querySelectorAll(selector));
    return $;
}
//html 方法的具体实现
$.html = function (html) {
    $.dom.forEach(function (el) {
        el.innerHTML = html
    });
    return $;
}
//这里用到了insertAdjacentHTML，可以查一下MDN 还有其他用法
//append 方法的具体实现
$.append = function (html) {
    $.dom.forEach(function (el) {
        el.insertAdjacentHTML('beforeEnd', html)
    });
    return $;
}
//prepend 方法的具体实现
$.prepend = function (html) {
    $.dom.forEach(function (el) {
        el.insertAdjacentHTML('afterBegin', html)
    });
    return $;
}
//这里写了一个对象，把dom操作都对应起来
 ADJ_OPS = {append: 'beforeEnd', prepend: 'afterBegin', before: 'beforeBegin', after: 'afterEnd'};
   for(k in ADJ_OPS){
    $.fn[k] = (function(op){ 
      return function(html){ return $(function(el){ console.log(op); el.insertAdjacentHTML(op,html) }) };
    })(ADJ_OPS[k]);
    }
//css 方法的具体实现
$.css = function (style) {
    $.dom.forEach(function (el) {
        el.style.cssText += ';' + style
    });
    return $;
}
//获取位置的要说一下getBoundingClientRect
 offset: function(){
      var obj = this.dom[0].getBoundingClientRect();
      return {
        left: obj.left + document.body.scrollLeft,
        top: obj.top + document.body.scrollTop,
        width: obj.width,
        height: obj.height
      };
    },
 ['width','height'].forEach(function(m){ $.fn[m] = function(){ return this.offset()[m] }});
 show: function(){ return this.css('display:block') },
    hide: function(){ return this.css('display:none') },
    prev: function(){ return $(this.dom.map(function(el){ return el.previousElementSibling })) },
    next: function(){ return $(this.dom.map(function(el){ return el.nextElementSibling })) },
   ready: function(callback){ 
      document.addEventListener('DOMContentLoaded', callback, false); return this;
    },
//这个是早期ajax实现，并没有data的传入
(function(){
  function ajax(method, url, success){
    var r = new XMLHttpRequest();
    r.onreadystatechange = function(){
      if(r.readyState==4 && r.status==200) 
        success(r.responseText);
    };
    r.open(method,url,true);
    r.setRequestHeader('X-Requested-With','XMLHttpRequest');//注明这个请求是通过XMLHttpRequest
    r.send(null);
      }
  $.get = function(url, success){ ajax('GET', url, success); };
  $.post = function(url, success){ ajax('POST', url, success); };
  $.getJSON = function(url, success){ 
    $.get(url, function(json){ success(JSON.parse(json)) });
  };
})();

//发布2个月后，这个终于修复了
//可以看出data需要的是个字符串，有的库没有帮你处理，就需要自己 JSON.stringify一下
(function($){
  function ajax(method, url, success, data){
    data = data || null;
    if (data instanceof Object) data = JSON.stringify(data);
    var r = new XMLHttpRequest();
    r.onreadystatechange = function(){
      if(r.readyState==4 && (r.status==200 || r.status==0))
        success(r.responseText);
        ///变更
         if(xhr.readyState==4 && (xhr.status==200 || xhr.status==0)) {
          if (mime == 'application/json') cb(JSON.parse(xhr.responseText));
          else cb(xhr.responseText);
        }
        //==
    };
    r.open(method,url,true);
    r.setRequestHeader('X-Requested-With','XMLHttpRequest');
    r.send(data);
  }

  $.get = function(url, success){ ajax('GET', url, success); };
  $.post = function(url, success, data){ ajax('POST', url, success, data); };
  $.getJSON = function(url, success){
    $.get(url, function(json){ success(JSON.parse(json)) });
  };
  
  $.fn.load = function(url, success){
    var self = this, parts = url.split(/\s/), selector;
    if(!this.dom.length) return this;
    if(parts.length>1) url = parts[0], selector = parts[1];
    $.get(url, function(response){
      self.html(selector ?
        $(document.createElement('div')).html(response).find(selector).html()
        : response);
      success && success();
    });
    return this;
  };
})(Zepto);

未完