教你创建一个自己的JavaScript库.docx

1、教你创建一个自己的JavaScript库是否曾对Mootools的魔力感到惊奇？是否有想知道Dojo如何做到那样的？是否对jQuery感到好奇？在这个教程中，我们将了解它们背后的东西并且动手创建一个超级简单的你最喜欢的库。我们其乎每天都在使用JavaScript库。当你刚入门时，利用jQuery是一件非常奇妙的事，主要是因为它的DOM操作。首先，DOM对于入门者来说可能是相对困难的事情；其次用它我们几乎可以不用考虑跨浏览器兼容的问题。在这个教程中，我们将试着从头开始实现一个很简单的库。是的，它非常有意思，但是在你高兴之前让我申明几点： 这不会是全功能的库。我们有很多方法要写，但是它不是jQue

2、ry。我们将会做足工作来让你感受到在你创建一个库时会遇到的各种问题。 我们不会完全解决所有浏览器的兼容性问题。我们写的代码能支持IE8+，Firefox 5+，Opera 10+，Chrome和Safari。 我们不会覆盖使用我们库的所有可能性。比如我们的append和prepend方法只在你传入一个我们库的实例时才有效，它们不支持原生的DOM节点或节点集合。步骤1: 创建库样板文件Creating the Library Boilerplate我们以一些封装代码开始，它将会包含我们整个库。它就是你经常用到的立即执行函数表达式。?123456789window.dome = (function

3、 () function Dome (els) var dome = get: function (selector) ; return dome; ();如你所见，我们把我们的库叫Dome，因为它主要就是一个针对DOM的库，是的，它很不完整。到此我们做了两件事。首先，我们定义了一个函数，它最终会是实例化我们库的构造函数，这些对象将会封装我们选择或创建的元素。接下来我们创建了dome对象，它是我们实际的库对象；你能看到，它在最后被返回。它有一个空的get函数，我们将用它来从页面中选择元素。所以，让我们现在来填充它的代码。步骤2: 获取元素dome.get函数传入一个参数，但是它可以有好几种情况

4、。如果它是一个字符串，我们假定它是一个CSS选择器；但是我们也可以传入单个DOM节点或是一个NodeList。?1234567891011get: function (selector) var els; if (typeof selector = string) els = document.querySelectorAll(selector); else if (selector.length) els = selector; else els = selector; return new Dome(els); 我们使用document.querySelectorAll来简化元素的查找：当

5、然这有浏览器兼容性问题，但是对于我们的例子来说它是ok的。如果selector不是字符串，我们将检查它的length属性。如果它存在，我们就知道它是一个NodeList；否则它是单个元素然后我们将它放到一个数组中。这就是我们下面需要将调用Dome的结果传给一个数组的原因；你可以看到我们返回一个新的Dome对象。所以让我们回头看看Dome函数并填充它。步骤3: 创建Dome实例下面是Dome函数：?123456function Dome (els) for(var i = 0; i els.length; i+ ) thisi = elsi; this.length = els.length;

6、它确实很简单：我们只是遍历我们选择的元素并把它们附到带有数字索引的新对象中。然后我们添加一个length属性。但是这的关键是什么呢？为什么不直接返回元素？我们将元素封装到一个对象因为我们想为这个对象创建方法；这些方法可以让我们与这些元素交互。这实际上就是jQuery采用的方法的简化版本。所以，我们返回了Dome对象，让我们在它的原型上添加一些方法。我把这些方法直接写在Dome函数中。步骤4: 添加一些常用工具函数我们要写的第一个方法是一个简单的工具函数。因为我们的Dome对象可以封装多个DOM元素，几乎每个方法都需要遍历每个元素；所以，这些工具函数会非常便利。让我们以一个map函数开始：?12

7、34567Dome.prototype.map = function (callback) var results = , i = 0; for ( ; i 1 ? m : m0; ;步骤5: 处理文本和HTML接下来，让我们添加text方法。就像jQuery一样，我们可以给它传入一个字符串并设置元素的文本，或不传参数来获取元素的文本。?1234567891011Dome.prototype.text = function (text) if (typeof text != undefined) return this.forEach(function (el) el.innerText =

8、text; ); else return this.mapOne(function (el) return el.innerText; ); ;?1234567891011Dome.prototype.text = function (text) if (typeof text != undefined) return this.forEach(function (el) el.innerText = text; ); else return this.mapOne(function (el) return el.innerText; ); ;你可能也想到了，我们需要检查text的值来看它是要

9、设置还是要获取。注意如果只是用if(text)会有问题，因为空字符串会被判断为false。如果我们在设置值，我们将对元素调用forEach并且设置它们的innerText属性为text。如果我们要获取，我们将返回元素的 innerText属性。注意我们使用mapOne方法：如果我们在处理多个元素，它将返回一个数组，否则它将就是一个字符串。html方法几乎与text一样，除了它使用innerHTML属性而不是innerText。?123456789101112Dome.prototype.html = function (html) if (typeof html != undefined) t

10、his.forEach(function (el) el.innerHTML = html; ); return this; else return this.mapOne(function (el) return el.innerHTML; ); ;就像我说的：几乎完全一样。步骤6: 调整样式再接下来，我们希望能添加和删除样式，因此让我们来写一个addClass和removeClass方法。我们的addClass方法将接收一个字符串或是样式名称的数组。为了做到这点，我们需要检查参数的类型。如果是数组，我们将遍历它并创建一个样式名的字符串。否则，我们就简单的在样式名前加一个空格，这样它就不会和

11、元素已有的样式混在一些。然后我们遍历元素并且将新的样式附加到className属性后面。 ?12345678910111213Dome.prototype.addClass = function (classes) var className = ; if (typeof classes != string) for (var i = 0; i -1) cs = cs.slice(0, i).concat(cs.slice(+i); el.className = cs.join( ); ); ;对每个元素，我们将el.className分隔成一个数组。然后，我们使用一个while循环来剔除我们

12、传入的样式，直到cs.indexOf(clazz)返回-1。我们这样做是为了处理同样的样式在一个元素中出现的不止一次的特殊情况：我们必须保证它真的被删除了。一旦我们确保删除每个样式的实例，我们用空格连接数组的每一项并把它设置到el.className。步骤7: 修正一个IE的Bug我们正在处理的最糟糕的浏览器是IE8。在我们的小小的库中，只有一个IE bug需要我们处理，很幸运它很简单。IE8不支持Array的indexOf方法；我们在removeClass中使用到它，所以让我们修复它：?12345678910if (typeof Array.prototype.indexOf != func

13、tion) Array.prototype.indexOf = function (item) for(var i = 0; i this.length; i+) if (thisi = item) return i; return -1; ; 它非常简单，并且这不是一个完全的实现（不支持第二个参数），但是能达到我们的目的。步骤8: 调节属性现在，我们想要一个attr函数。这很容易，因为它与我们的text或html方法非常类似。像那些方法一样，我们能够获取或设置属性值：我们可以传入元素名和值来设置，也可以只传入属性名来获取。?1234567891011Dome.prototype.attr =

14、 function (attr, val) if (typeof val != undefined) return this.forEach(function(el) el.setAttribute(attr, val); ); else return this.mapOne(function (el) return el.getAttribute(attr); ); ;如果val有一个值，我们将遍历这些元素并且将选择的属性设置为这个值，使用元素的setAttribute方法。否则，我们使用mapOne通过getAttribute方法来返回属性值。步骤9: 创建元素像很多好的库一样，我们应该能

15、够创建新的元素。当然它作为一个Dome实例的一个方法不是很好，所以让我们直接把它挂到dome对象上去。 ?12345var dome = / get method here create: function (tagName, attrs) ;你已经看到，我们使用两个参数：元素的名字，和属性值对象。大部分属性能过attr方法赋值，但是两种方法可以做特殊处理。我们使用addClass方法操作className属性，以及text方法操作text属性。当然，我们首先需要创建元素和Dome对象。下面是整个操作的代码：?12345678910111213141516171819create: funct

16、ion (tagName, attrs) var el = new Dome(document.createElement(tagName); if (attrs) if (attrs.className) el.addClass(attrs.className); delete attrs.className; if (attrs.text) el.text(attrs.text); delete attrs.text; for (var key in attrs) if (attrs.hasOwnProperty(key) el.attr(key, attrskey); return el

17、; 我们创建元素并将它传给一个新的Dome对象。然后中我们处理属性。注意在操作完它们后我们必须删除className和text属性。这样可以避免当我们在attrs中遍历剩下的key值时被应用为属性。当然我们最后要返回这个新建的Dome对象。但是现在只是创建了新的元素，我们希望把它插入到DOM中对吗？步骤10: 附加元素下一步，我们将写append和prepend方法。这些确实是有点难搞的函数，主要是因为有很多种使用情况。以下是我们希望能做到的： ?12dome1.append(dome2); dome1.prepend(dome2);使用情况如下：我们可能想要append或prepend 一个

18、新的元素到一个或多个已存在的元素 多个新元素到一个或多个已存在的元素 一个已存在的元素到一个或多个已存在的元素 多个已存在的元素到一个或多个已存在的元素注意：我使用“新”来表示元素还没有在DOM中；已存在的元素是已经在DOM中有的。让我们一步一步来：?123456Dome.prototype.append = function (els) this.forEach(function (parEl, i) els.forEach(function (childEl) ); ); ;我们期望els参数是一个Dome对象。一个完整的DOM库可以接受一个节点或nodelist作为参数，但是我们暂时不这样做。我们必须遍历我们每一个元素，并且在它