看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;

推荐阅读更多精彩内容

  • pdf下载地址:Java面试宝典 第一章内容介绍 20 第二章JavaSE基础 21 一、Java面向对象 21 ...
    王震阳阅读 73,320评论 25 504
  • 个人博客:https://yeaseonzhang.github.io 花了半个多月的时间,终于又把“JS红宝书”...
    Yeaseon阅读 5,511评论 8 44
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 1,730评论 0 37
  • 【原作微信公众号:木偶诡异漫画(muouguiyi2015)】 素材提供者:庄忠友 事情发生在1999年贵州省贵阳...
    鬼狐写文阅读 281评论 0 0
  • 面对随时都可能出现的敌人,我们没有胆怯,从小楼到垃圾场有一段开阔地,迅速通过极易暴露目标,我们现在先贴近3点钟方向...
    我是曹楠阅读 220评论 1 4