看api.js源码学习笔记！

框架的主体结构

//自执行函数，将window作为参数传入
(function(window){
 var u={}//定义一个空对象，在对象上挂载静态方法
  ...
  window.$api = u; //将对象赋值给window对象上的一个全局属性
}(window))

判断是否是元素节点，利用节点类型

  obj && obj.nodeType == 1

注册只触发一次事件监听

内部利用函数封装，绑定只调用一次的函数，然后移除事件。

u.one = function(el, name, fn, useCapture){
        if(!u.isElement(el)){
            console.warn('$api.one Function need el param, el param must be DOM Element');
            return;
        }
        useCapture = useCapture || false;
        var that = this;
        var cb = function(){
            fn && fn();
            that.rmEvt(el, name, cb, useCapture);
        };
        that.addEvt(el, name, cb, useCapture);
    };

移除元素

利用父节点移除子元素

  u.remove = function(el){
        if(el && el.parentNode){
            el.parentNode.removeChild(el);
        }
    };

修改class

使用了classList的add，remove，toggle方法

   if('classList' in el){
         el.classList.add(cls);
     }else{
         var preCls = el.className;
         var newCls = preCls +' '+ cls;
         el.className = newCls;
     }
    return el;

获取表单元素的value

selectedIndex 属性可设置或返回下拉列表中被选选项的索引号.
下拉菜单SELECT使用了

el.options[el.selectedIndex].value;

插入html

使用了insertAdjacentHTML（）；

u.prepend = function(el, html){
        if(!u.isElement(el)){
            console.warn('$api.prepend Function need el param, el param must be DOM Element');
            return;
        }
        el.insertAdjacentHTML('afterbegin', html);
        return el;
    };

设置css

使用了cssText，兼容性

el.style && (el.style.cssText += ';' + css);//此处的分号是因为ie会去掉末尾的；

一些小技巧

兼容处理：

var sl = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
var st = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
//使用&&和||短路特性
el.style && (el.style.cssText += ';' + css);
time = time || 500;