教你创建一个自己JavaScript库.docVIP

　是否曾对Mootools的魔力感到惊奇？是否有想知道Dojo如何做到那样的？是否对jQuery感到好奇？在这个教程中，我们将了解它们背后的东西并且动手创建一个超级简单的你最喜欢的库。　　我们其乎每天都在使用JavaScript库。当你刚入门时，利用jQuery是一件非常奇妙的事，主要是因为它的DOM操作。首先，DOM对于入门者来说可能是相对困难的事情；其次用它我们几乎可以不用考虑跨浏览器兼容的问题。　　在这个教程中，我们将试着从头开始实现一个很简单的库。是的，它非常有意思，但是在你高兴之前让我申明几点：这不会是全功能的库。我们有很多方法要写，但是它不是jQuery。我们将会做足工作来让你感受到在你创建一个库时会遇到的各种问题。我们不会完全解决所有浏览器的兼容性问题。我们写的代码能支持IE8+，Firefox 5+，Opera 10+，Chrome和Safari。我们不会覆盖使用我们库的所有可能性。比如我们的append和prepend方法只在你传入一个我们库的实例时才有效，它们不支持原生的DOM节点或节点集合。　步骤1: 创建库样板文件Creating the Library Boilerplate　　我们以一些封装代码开始，它将会包含我们整个库。它就是你经常用到的 HYPERLINK /news/2010/11/immediately-invoked-function-expression/ \t _blank 立即执行函数表达式。 HYPERLINK /document/1069.html \l # ?123456789window.dome = (function () { ????????function Dome (els) { ????????} ????????var dome = { ????????????????get: function (selector) { ????????????????} ????????}; ????????return dome; }());　　如你所见，我们把我们的库叫Dome，因为它主要就是一个针对DOM的库，是的，它很不完整。　　到此我们做了两件事。首先，我们定义了一个函数，它最终会是实例化我们库的构造函数，这些对象将会封装我们选择或创建的元素。　　接下来我们创建了dome对象，它是我们实际的库对象；你能看到，它在最后被返回。它有一个空的get函数，我们将用它来从页面中选择元素。所以，让我们现在来填充它的代码。　步骤2: 获取元素　　dome.get函数传入一个参数，但是它可以有好几种情况。如果它是一个字符串，我们假定它是一个CSS选择器；但是我们也可以传入单个DOM节点或是一个NodeList。 HYPERLINK /document/1069.html \l # ?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来简化元素的查找：当然这有浏览器兼容性问题，但是对于我们的例子来说它是ok的。如果selector不是字符串，我们将检查它的length属性。如果它存在，我们就知道它是一个NodeList；否则它是单个元素然后我们将它放到一个数组中。这就是我们下面需要将调用Dome的结果传给一个数组的原因；你可以看到我们返回一个新的Dome对象。所以让我们回头看看Dome函数并填充它。　步骤3: 创建Dome实例　　下面是Dome函数： HYPERLINK /document/1069.html \l # ?123456function Dome (els) { ????????for(var i = 0; i els.length; i++ ) { ????????????????this[i] = els[i]; ????????} ????????this.length = els.length; }　　它确实很简单：我们只是遍历我们选择的元素并把它们附到带有数字索引的新对象中。然后我们添加一个length属性。　　但是这的关键是什么呢？