封装自己的框架kylinGo——dom操作篇

丛这一章开始,我会指引你一步步封装出自己的框架,独立完成一些框架所应具备的主要功能。

为什么要封装框架

  1. 原生的javascript代码非常长,既浪耗费写代码的时间又降低了可读性。请看如下代码:
//原生
document.getElementById("id");
document.querySelector("#id");
//jquery
$("#id");

如上,jquery可以用很短的代码来代替javascript很长的代码。这种代替的累加效果会让开发人员在开发一款产品的过程中少写大量的代码。

  1. 有时你不想为了一个简单的页面去加载庞大的jquery(jquery-3.1.0.min.js)的大小是90kb,而你又想避免重复document.querySelector这样冗长的代码,这时,一个精简熟悉的框架再适合你不过了。
  2. 创造一个自己的框架,就像随身带着一把武器,让你迅速搞定大量功能,而且还能随心所欲的为武器升级。

项目需求

搭建kylinGo并实现用下列代码选择dom节点

//引入框架kylinGo
<script src="kylinGo.js"></script>
//选择id为moon的节点
var node = kylin.dom("#moon");
//选择class为star的节点
var nodeList = kylin.domAll(".star");

需求分析

分析上述代码,我们可知:

  1. 在引入kylinGo.js文件后,页面中出现了一个叫做kylin的对象,此对象含有dom和domAll两个功能。
  2. dom和domAll功能非常像document.querySelector和document.querySelectorAll功能。

封装kylinGO

通过刚刚的分析,我们得出两个结论,如果要对第一个结论着手实现的话,我们可以在kylinGo.js中这样编码

var kylin = {
    dom:function(){},
    domAll:function(){}
}

也可以这样:

var kylin = (function(){
    return {
        dom:function(){},
        domAll:function(){}    
    }
}())

由于第二种方法更具操作感,也因为其是执行函数并返回对象更具灵活性(比如根据设备环境对kylin对象进行配置后在返回),因此我选择的是第二种方法

接下来就是封装dom和domAll函数,我们可以从caniuse.com查到,document.querySelector函数和document.querySelectorAll函数的兼容性已经很好,而封装dom和domAll函数的用处无非是避免在每次选择元素的时候都写很长的代码,因此,dom和domAll的函数封装非常简单:

dom:function(dom){
    return document.querySelector(dom)
},
domAll:function(dom){
    return document.querySelectorAll(dom);
}

全部代码如下

var kylin = (function(){
        dom:function(dom){
            return document.querySelector(dom)
        },
        domAll:function(dom){
            return document.querySelectorAll(dom);
        }
    }
}())

至此我们完成了打造自己的框架的第一步,接下来让我们为其添加更多功能。