构建你第一个JavaScript框架

开发 前端 开发工具
我们几乎每天都在使用各种各样的JavaScript框架。当你刚入门的时候,方便的DOM(文档对象模型)操作让你觉得JQuery这样的东西非常棒。

觉得Mootools不可思议?想知道Dojo是如何实现的?对JQuery的技巧感到好奇?在这篇教程里,我们将探寻框架背后的秘密,然后试着自己动手建立一个你所喜爱的框架的简易版本。

我们几乎每天都在使用各种各样的JavaScript框架。当你刚入门的时候,方便的DOM(文档对象模型)操作让你觉得JQuery这样的东西非常棒。这是因为:首先,对于新手来说DOM太难理解了;当然,对于一个API来说难以理解可不是什么好事。其次,浏览器间的兼容性问题非常令人困扰。

我们将元素包装成对象是因为我们想要能够为对象添加方法。

在这个教程里,我们将试着从头实现这些框架之一。是的,这会很有趣,不过在你太过兴奋前我要澄清几点:

这不会是一个功能很完善的框架。的确,我们要写很多东西,但它还算不上JQuery。可是我们将要做的事情会让你体验到在真正编写框架的感觉。

我们不打算保证全方位的兼容性。我们将要编写的框架能够在 Internet Explorer 8+、Firefox 5+、Opera 10+、Chrome和Safari上工作。

我们的框架不会覆盖到所有可能的功能。比如说,我们的append和preappend方法只有在你传给它一个我们框架的实例时才能工作;我们不会用原生的DOM节点和节点列表。

另外:尽管在教程中我们不会为我们的框架编写测试用例,但是我已经在第一次开发它的时候做好了。你可以从 Github上获取框架和测试用例的代码。

第一步: 创建框架模板

我们将从一些包装代码开始,它将容纳我们的整个框架。这是典型的立即函数(IIFE).

  1. window.dome = (function () {  
  2.     function Dome (els) {  
  3.     }  
  4.     var dome = {  
  5.         get: function (selector) {  
  6.         }  
  7.     };  
  8.     return dome;  
  9. }()); 

你可以看到,我们的框架叫做dome,因为它是一个基本的DOM框架。没错,基本(lame有“瘸子”、“不完整”的意思,dom加lame等于dome)的。

我们已经有了一些东西。 首先,我们有了一个函数;它将成为构造框架的对象实例的构造函数;那些对象将会包含我们选择和创建的元素。

然后,我们有了一个dome对象,它就是我们的框架对象;你可以看到它最终作为函数的返回值返回给了函数调用者(译注:赋值给了window.dome)。这里还有一个空的get函数,我们将用它从页面里选取元素。那么,我们来填充代码吧。

第二步: 获取元素

dome的get函数只有一个参数,但是它可以是很多东西。如果它一个string(字符串),我们将假定它是一个CSS(层叠样式表)选择器;不过我们也可能得到一个DOM节点或者DOM节点列表。

  1. get: function (selector) {  
  2.     var els;  
  3.     if (typeof selector === "string") {  
  4.         els = document.querySelectorAll(selector);  
  5.     } else if (selector.length) {  
  6.         els = selector;  
  7.     } else {  
  8.         els = [selector];  
  9.     }  
  10.     return new Dome(els);  

我们用document.querySelectorAll来简单的选择元素:当然,这将限制我们的浏览器兼容性,不过对于这种情况还是可以接受的。如果 selector不是string类型,我们将检查它的length属性。如果存在,我们就知道我们得到的是一个节点列表;否则,就是一个单独的元素,我们将它放到一个数组里。这是因为我们要在下面向Dome传递一个数组。你可以看到,我们返回了一个新的Dome对象。让我们回到Dome函数并且为它填充代码。

第三步: 创建Dome实例

这是Dome函数:

  1. function Dome (els) {  
  2.     for(var i = 0; i < els.length; i++ ) {  
  3.         this[i] = els[i];  
  4.     }  
  5.     this.length = els.length;  

我强烈建议你去深入研究一些你喜欢的框架

这非常简单:我们只是遍历了els的所有元素,并且把它们存储在一个以数字为索引的新对象里。然后我们添加了一个length属性。

但是这有什么意义呢?为什么不直接返回元素?因为:我们将元素包装成对象是因为我们想要能够为对象添加方法;这些方法能够让我们遍历这些元素。实际上这正是JQuery的解决方案的浓缩版。

我们的Dome对象已经返回了,现在让我们来为它的原型(prototype)添加一些方法。我会直接把那些方法写在Dome函数下面。

第四步:添加几个实用工具

要添加的第一批功能是些简单的工具函数。由于Dome对象可能包含至少一个DOM元素,那么我们需要在几乎每一个方法里面都遍历所有元素;这样,这些工具才会给力。

我们从一个map函数开始:   

  1. Dome.prototype.map = function (callback) {  
  2.     var results = [], i = 0;  
  3.     for ( ; i < this.length; i++) {  
  4.         results.push(callback.call(thisthis[i], i));  
  5.     }  
  6.     return results;  
  7. }; 

当然,这个map函数有一个入参,一个回调函数。我们遍历Dome对象所有元素,收集回调函数的返回值到结果集中。注意我们是怎样调用回调函数的:

  1. callback.call(thisthis[i], i)); 

通过这种方式,函数将在Dome实例的上下文中被调用,并且函数接收到两个参数:当前元素和元素序号。

我们也想要一个foreach函数。事实上这很简单:

  1. Dome.prototype.forEach(callback) {  
  2.     this.map(callback);  
  3.     return this;  
  4. }; 

由于map函数和foreach函数之间的不同仅仅是map需要返回些东西,我们可以仅仅将回调传给this.map然后忽略返回的数组;代替返回的是,我们将返回this,来使我们的库呈链式。foreach会被频繁的调用,所以,注意当一个函数的回调被返回,事实上,返回的是Dome实例。例如,下面的方法事实上就返回了Dome实例:

  1. Dome.prototype.someMethod1 = function (callback) {  
  2.     this.forEach(callback);  
  3.     return this;  
  4. };  
  5. Dome.prototype.someMethod2 = function (callback) {  
  6.     return this.forEach(callback);  
  7. }; 

还有一个:mapOne。很容易就知道这个函数是做什么的,但是真正的问题是,为什么需要它?这就需要一些我们称之为"库哲学"的东西了。

一个简短的"哲学"阐释

首先,对于一个初学者来说,DOM很让人纠结;它的API不完善。

如果构建一个库仅仅是写代码,那就不是什么难事。但是当我开发这个库时,我发现那些不完善的部分决定了一定数量的方法的实现方式。

很快,我们要去构建一个返回被选择元素的文本的text方法。如果Dome对象包含多个DOM节点(比如dome.get("li")),返回什么?如果你就像jQuery那样($("li").text())很简单的编写,你将得到一个字符串,这个字符串是所有元素的文本的直接拼接。有用吗?我认为没用,但是我不认为没有更好的办法。

对于这个项目,我将以数组方式返回多个元素的文本,除非数组里只有一个元素,那么我仅仅返回一个文本字符串,而不是一个包含了一个元素的数组。我想你会经常去获取单个元素的文本,所以我们优化了那种情况。但是,如果你想去获取多个元素的文本,我们的返回你也会用着很爽。

回到代码

那么,mapOne方法仅仅是简单的运行map函数,然后返回数组,或者一个数组里的元素。如果你仍然不确定这是如何有用,坚持一下,你就会看到!

  1. Dome.prototype.mapOne = function (callback) {  
  2.     var m = this.map(callback);  
  3.     return m.length > 1 ? m : m[0];  
  4. }; 

第5步: 处理Text和HTML

接着,让我们来添加文本方法。就像jQuery,我们可以传递一个string值,设置节点元素的text值,或者通过无参方法得到返回的text值。

  1. Dome.prototype.text = function (text) {  
  2.     if (typeof text !== "undefined") {  
  3.         return this.forEach(function (el) {  
  4.             el.innerText = text;  
  5.         });  
  6.     } else {  
  7.         return this.mapOne(function (el) {  
  8.             return el.innerText;  
  9.         });  
  10.     }  
  11. }; 

如你所料,当我们设置(setting)或者得到(getting)value值时,需要检查text的值。要注意的是如果justif(文本)方法不起作用,是因为text为空字符串是一个错误的值。

如果我们设置(setting)时,可是使用一个forEach 遍历元素,设置它们的innerText属性。如果我们得到(getting)时,返回元素的innerText属性。在使用mapOne方法是要注意:如果我们正在处理多个元素,将返回一个数组;其他的则还是一个字符串。

如果html方法使用innerHTML属性而不是innerText,它将会更优雅的处理涉及text文本的事情。

  1. Dome.prototype.html = function (html) {  
  2.     if (typeof html !== "undefined") {  
  3.         this.forEach(function (el) {  
  4.             el.innerHTML = html;  
  5.         });  
  6.         return this;  
  7.     } else {  
  8.         return this.mapOne(function (el) {  
  9.             return el.innerHTML;  
  10.         });  
  11.     }  
  12. }; 

就像我说过的:几乎相同的。

第六步: 修改类

下一步,我们想对class进行操作,所以添加能addClass()和removeClass()。addClass()的参数是一个class名称或者名称的数组。为了实现动态参数,我们需要对参数的类型进行判断。如果参数是一个数组,那么遍历这个数组,将元素添加上这些class名称,如果参数是一个字符串,则直接加上这个class名称。函数需要确保不将原来的class名称弄乱。

  1. Dome.prototype.addClass = function (classes) {  
  2.     var className = "";  
  3.     if (typeof classes !== "string") {  
  4.         for (var i = 0; i < classes.length; i++) {  
  5.             className += " " + classes[i];  
  6.         }  
  7.     } else {  
  8.         className = " " + classes;  
  9.     }  
  10.     return this.forEach(function (el) {  
  11.         el.className += className;  
  12.     });  
  13. }; 

很直观吧?嘿嘿

现在,写下removeClass(),同样简单。不过每次只允许删除一个class名称。

  1. Dome.prototype.removeClass = function (clazz) {  
  2.     return this.forEach(function (el) {  
  3.         var cs = el.className.split(" "), i;  
  4.         while ( (i = cs.indexOf(clazz)) > -1) {  
  5.             cs = cs.slice(0, i).concat(cs.slice(++i));  
  6.         }  
  7.         el.className = cs.join(" ");  
  8.     });  
  9. };  

对于每一个元素,我们都将el.className 分割成一个字符串数组。那么我们使用一个while循环连接,直到cs.indexOf(clazz)返回值大于-1。我们将得到的结果join成el.className。

第七步: 修复一个IE引起的BUG

我们处理的最糟浏览器是IE8.在这个小小的库中,只有一个IE引起的BUG需要去修复; 并且谢天谢地,修复它非常简单.IE8不支持Array的方法indexOf;我们需要在removeClass方法中使用到它, 下面让我们来完成它:

  1. if (typeof Array.prototype.indexOf !== "function") {  
  2.     Array.prototype.indexOf = function (item) {  
  3.         for(var i = 0; i < this.length; i++) {  
  4.             if (this[i] === item) {  
  5.                 return i;  
  6.             }  
  7.         }  
  8.         return -1;  
  9.     };  

它看上去非常简单,并且它不是完整实现(不支持使用第二个参数),但是它能实现我们的目标.

第8步: 调整属性

现在,我们想要一个attr函数。这将很容易,因为它几乎和text方法或者html方法是一样的。像这些方法,我们都能够设置和得到属性:我们将设置一个属性的名称和值,同时只通过参数名来得到值。

  1. Dome.prototype.attr = function (attr, val) {  
  2.     if (typeof val !== "undefined") {  
  3.         return this.forEach(function(el) {  
  4.             el.setAttribute(attr, val);  
  5.         });  
  6.     } else {  
  7.         return this.mapOne(function (el) {  
  8.             return el.getAttribute(attr);  
  9.         });  
  10.     }  
  11. }; 

如果形参有一个值,我们将遍历元素并通过元素的setAttribute方法设置属性值。另外,我们将使用mapOne返回通过getAttribute方法得到参数。

第9步: 创建元素

像任何一个优秀的框架一样,我们也应该能够创建元素。当然,在Demo实例中没有一个好的方法,所以让我们来把方法加入到demo工程中。

  1. var dome = {  
  2.     // get method here  
  3.     create: function (tagName, attrs) {  
  4.     }  
  5. }; 

正如你所看到的:我们需要两个形参:元素名,和一个参数对象。大多数的属性通过我们的arrt方法被使用,但是tagName和attrs却有特殊待遇。我们为className属性使用addClass方法,为text属性使用text方法。当然,我们首先要创建元素,和Demo对象。下面就是所有的作用:

  1. create: function (tagName, attrs) {  
  2.     var el = new Dome([document.createElement(tagName)]);  
  3.         if (attrs) {  
  4.             if (attrs.className) {  
  5.                 el.addClass(attrs.className);  
  6.                 delete attrs.className;  
  7.             }  
  8.         if (attrs.text) {  
  9.             el.text(attrs.text);  
  10.             delete attrs.text;  
  11.         }  
  12.         for (var key in attrs) {  
  13.             if (attrs.hasOwnProperty(key)) {  
  14.                 el.attr(key, attrs[key]);  
  15.             }  
  16.         }  
  17.     }  
  18.     return el;  

如上,我们创建了元素,将他发送到新的Dmoe对象中。接着,我们处理所有属性。注意:当使用完className和text属性后,我们不得不删除他们。这将保证当我们遍历其他的键时,它们还能被使用。当然,我们最终通过返回这个新的Demo对象。

我们创建了新的元素,我们想要将这些元素插入到DOM,对吧?

第10步:尾部添加(Appending)与头部添加(Prepending)元素

下一步,我们来实现尾部添加与头部添加方法。考虑到多种场景,实现这些方法可能有些棘手。下面是我们的想要达到的效果:

  1. dome1.append(dome2);  
  2. dome1.prepend(dome2); 

IE8对我们来说就是一奇葩。

尾部添加或头部添加,包括以下几种场景:

单个新元素添加至单个或多个已存在元素中

多个新元素添加至单个或多个已存在元素中

单个已存在元素添加至单个或多个已存在元素中

多个已存在元素添加至单个或多个已存在元素中

注意:这里的”新元素“表示还未加入DOM中节点元素,”已存在元素“指已存在于DOM中的节点元素。
现在让我们一步步来实现之:

  1. Dome.prototype.append = function (els) {  
  2.     this.forEach(function (parEl, i) {  
  3.         els.forEach(function (childEl) {  
  4.         });  
  5.     });  
  6. }; 

假设参数els是一个DOM对象。一个功能完备的DOM库应该能处理节点(node)或节点序列(nodelist),但现在我们不作要求。首先遍历需要被添加进的元素 (父元素),再在这个循环中遍历将被添加的元素 (子元素)。 

如果将一个子元素添加至多个父元素,需要克隆子元素(避免最后一次操作会移除上一次添加操作)。可是,没必要在初次添加的时候就克隆,只需要在其它循环中克隆就可以了。因此处理如下:

  1. if (i > 0) {  
  2.     childEl = childEl.cloneNode(true);  

变量i来自外层forEach循环:它表示父级元素的序列号。第一个父元素添加的是子元素本身,而其他父元素添加的都是目标子元素的克隆。因为作为参数传入的子元素是未被克隆的,所以,当将单个子元素添加至单个父元素时,所有的节点都是可响应的。
最后,真正的添加元素操作:

  1. parEl.appendChild(childEl); 

因此,组合起来,我们得到以下实现:

  1. Dome.prototype.append = function (els) {  
  2.     return this.forEach(function (parEl, i) {  
  3.         els.forEach(function (childEl) {  
  4.             if (i > 0) {  
  5.                 childEl = childEl.cloneNode(true);  
  6.             }  
  7.             parEl.appendChild(childEl);  
  8.         });  
  9.     });  
  10. }; 

prepend方法

我们按照相同的逻辑实现prepend方法,其实也相当简单。

  1. Dome.prototype.prepend = function (els) {  
  2.     return this.forEach(function (parEl, i) {  
  3.         for (var j = els.length -1; j > -1; j--) {  
  4.             childEl = (i > 0) ? els[j].cloneNode(true) : els[j];  
  5.             parEl.insertBefore(childEl, parEl.firstChild);  
  6.         }  
  7.     });  
  8. }; 

不同点在于添加多个元素时,添加后的顺序会被反转。所以不能采用forEach循环,而是用倒序的for循环代替。同样的,在添加至非第一个父元素时需克隆目标子元素。

第十一步: 删除节点

对于我们最后一个节点的操作方法,从dom中删除这些节点,很简单,只需要:

  1. Dome.prototype.remove = function () {  
  2.     return this.forEach(function (el) {  
  3.         return el.parentNode.removeChild(el);  
  4.     });  
  5. }; 

只需要通过节点的迭代和在他们的父节点调用删除子节点方法。比较好的是这个dom对象依然正常工作(感谢文档对象模型吧)。我们可以在它上面使用我们想使用的方法,包括插入,预插回DOM,很漂亮,不是吗?

第12步:事件处理

最后,却是最重要的一环,我们要写几个事件处理函数。

如你所知,IE8依然使用旧的IE事件,因此我们需要为此作检测。同时,我们也要做好使用DOM 0 级事件的准备。

查看下面的方法,我们稍后会讨论:

  1. Dome.prototype.on = (function () {  
  2.     if (document.addEventListener) {  
  3.         return function (evt, fn) {  
  4.             return this.forEach(function (el) {  
  5.                 el.addEventListener(evt, fn, false);  
  6.             });  
  7.         };  
  8.     } else if (document.attachEvent)  {  
  9.         return function (evt, fn) {  
  10.             return this.forEach(function (el) {  
  11.                 el.attachEvent("on" + evt, fn);  
  12.             });  
  13.         };  
  14.     } else {  
  15.         return function (evt, fn) {  
  16.             return this.forEach(function (el) {  
  17.                 el["on" + evt] = fn;  
  18.             });  
  19.         };  
  20.     }  
  21. }()); 

在这里,我们用到了立即执行函数(IIFE),在函数内我们做了特性检测。如果document.addEventListener方法存在,我们就使用它;另外我们也检测 document.attachEvent,如果没有就使用DOM 0级方法。请注意我们如何从立即执行函数中返回最终函数:其最后会被分配到Dome.prototype.on。在做特性检测时,与每次运行函数时检测相比,这样的方式分配适合的方法更加方便。

事件解绑方法off与on方法类似:.

  1. Dome.prototype.off = (function () {  
  2.     if (document.removeEventListener) {  
  3.         return function (evt, fn) {  
  4.             return this.forEach(function (el) {  
  5.                 el.removeEventListener(evt, fn, false);  
  6.             });  
  7.         };  
  8.     } else if (document.detachEvent)  {  
  9.         return function (evt, fn) {  
  10.             return this.forEach(function (el) {  
  11.                 el.detachEvent("on" + evt, fn);  
  12.             });  
  13.         };  
  14.     } else {  
  15.         return function (evt, fn) {  
  16.             return this.forEach(function (el) {  
  17.                 el["on" + evt] = null;  
  18.             });  
  19.         };  
  20.     }  
  21. }()); 

就这样!

我真心的希望你能够试验一下我们的小框架,或者仅仅是继承一点点,就想前面我提到的,我已经把这个框架放到github,带着着我们已经写的Jasmine 测试用例。可以自用的来fork代码,发送pull请求。

我要重申:本文的观点并是不推荐你一定要写你自己的框架

这里有乐于奉献的人一起工作来使这个框架变大,尽可能的完善。这里只是简单讲了一下框架的原理,我非常高兴你能从中得到一些提示。

我真心的建议你能够自己的研究你喜欢的框架,你会发现它们并没有你想象的那么难懂,而且你很可能会从中学到很多东西,这里是一些很好的开始文章,

10 Things I Learned from the jQuery Source (我从jquery源码学到的10件事)( 作者 Paul Irish )

11 More Things I Learned from the jQuery Source  (我从jquery源码学到的11件事)(作者 Paul Irish)

Under jQuery’s Bonnet (作者 James Padolsey)

Backbone.js: Hacker’s Guide, part 1, part 2, part 3, part 4

了解其他的更好的框架? 请留言?

原文链接:http://www.oschina.net/translate/build-your-first-javascript-library

责任编辑:张伟 来源: oschina
相关推荐

2018-01-31 15:45:07

前端Vue.js组件

2018-08-22 17:32:45

2014-12-24 11:34:23

CoreOSWordPress集群部署

2022-10-17 10:28:05

Web 组件代码

2017-11-21 09:20:06

深度学习TensorFlow游戏AI

2010-12-07 16:53:43

商业智能

2018-10-15 10:10:41

Linux内核补丁

2013-12-19 09:46:04

垃圾收集器

2018-11-08 13:53:15

Flink程序环境

2015-04-01 14:40:26

Java构建工具build.xml

2023-10-09 14:32:48

2014-07-24 14:35:26

Linux内核模块

2019-12-31 08:00:00

DebianLinuxApple Swift

2016-08-05 12:58:44

GitLinux开源

2016-08-24 15:12:41

LXDLinux容器

2023-09-21 22:43:17

Django框架

2021-04-07 13:38:27

Django项目视图

2012-02-08 11:15:38

HibernateJava

2011-03-21 14:24:13

Debian 6

2011-03-03 21:04:08

bug程序员
点赞
收藏

51CTO技术栈公众号