javascript框架设计之种子模块

种子模块初探：司徒正美JavaScript框架的核心理念

种子模块，作为框架的先锋，是框架设计中最为核心的部分。它的方法和功能不仅要求具备扩展性和稳定性，更要常用且设计优良。在司徒正美的JavaScript框架中，种子模块扮演着至关重要的角色。

种子模块的功能对象包括扩展、数组化、类型判定、绑定与卸载、无冲突处理以及模块的加载与domReady等。这一切功能的实现，都是为了确保框架的稳健性和扩展性。

在框架的起始阶段，种子模块作为一个全局的基础设施存在，它负责建立命名空间，防止变量污染。借鉴各大类库的实现方式，种子模块通常采用对象嵌套对象的方式构建命名空间。例如，jQuery就是一个很好的例子，它使用函数作为命名空间，方便用户将css表达器的字符串传进来，然后通过选择器进行查找，返回一个jQuery对象实例。

命名空间是现代JavaScript框架的主要基础设施，它像细胞一样包裹自身，防止变量污染。像prototype.js和mootools这样的库，它们对JavaScript的原生对象进行扩展，而YUI和Ext等框架则采用对象嵌套对象的方式构建。

在司徒正美的框架中，种子模块的命名空间实现也有其独特之处。一开始会定义一个全局变量作为命名空间，然后对它进行扩展。这个全局变量如同一个容器，装载着框架的各种功能和模块。

为了避免全局变量的污染问题，许多框架和库都致力于实现多库共存机制。例如，jQuery最初使用$作为它的命名空间，它实现了多库共存机制，允许用户在不同的库之间自由切换。这种机制的实现原理很简单，通过将命名空间保存到一个临时变量中，然后在使用完之后再将其放回原位。

第一章：jQuery的noConflict与对象扩展

在JavaScript的世界中，我们常常需要转换和处理各种数据类型和集合。对于HTMLCollection和NodeList这样的集合对象，处理起来尤为复杂。尤其在旧版本中，这些并不是Object的子类，这就给我们的操作带来了不小的挑战。对于这种情况，我们不得不提到 [].slice.call 方法。虽然它在大多数情况下都能帮助我们完成转换，但在某些特定情境下，它的功能就显得有些捉襟见肘了。特别是在Internet Explorer这样的老版本浏览器中，直接使用 [].slice.call 可能会导致执行异常。这时，我们需要寻找其他的解决方案。

这时候，jQuery的makeArray函数就派上了用场。这个函数能够很好地处理各种类型的数据，将其转化为数组。makeArray的实现非常细致，它首先对输入进行判断，如果是字符串或者函数，或者是具有setInterval属性的对象，它会直接将这个对象作为数组的第一个元素；否则，它会遍历整个对象，将每个元素依次添加到数组中。这种处理方式既保证了效率，又保证了兼容性。

在处理集合的时候，我们还需要注意到IE浏览器的特殊之处。针对IE浏览器，我们可以自定义一个slice方法来实现对集合的切片操作。这个方法首先检查浏览器是否支持dispatchEvent，如果支持，就直接使用原生的slice方法；如果不支持，就手动实现一个切片逻辑。这样，无论在哪种浏览器环境下，我们都能实现对集合的切片操作。

当我们谈及JavaScript中的数据类型时，一系列有趣的测试与现象便会浮现在我们眼前。比如，当你尝试使用 `typeof` 操作符去检测某些对象或值时，得到的结果可能会让你惊讶。

让我们看看 `null` 的类型。在JavaScript中，输入 `typeof null` ，你将会得到一个意料之外的结果 —— "object"。这不是一个编码错误，而是JavaScript语言设计中的一个特殊之处。

再来说说 `document.childNodes`。在Safari浏览器中，它的类型竟然是 "function"。同样地，创建元素的方法如 `document.createElement('embed')` 和 `document.createElement('object')` 在某些版本（如ff3-10）的Firefox中也被识别为 "function"。这些看似矛盾的现象其实是浏览器实现上的差异所导致的。

当我们谈论正则表达式 `/d/i` 时，在实现了ecma262v4的浏览器中，它的类型也是 "function"。这是因为正则表达式的构造函数被视为函数类型。

而对于 `window.alert`，在不同版本的IE浏览器（如IE6、7、8）中，它的类型竟然是 "object"。这也展示了浏览器对于JavaScript内置对象的处理方式存在差异。

接着我们尝试创建一个iframe元素并将其添加到页面中。通过这种方式，我们可以访问到创建的iframe中的Array构造函数，并创建一个新的数组实例。这个实例虽然看起来像是一个普通的数组，但其实它并非真正的Array实例，所以使用 `instanceof Array` 检测时返回 `false`。

当我们尝试使用 `isNaN` 函数检测一个非数字字符串（如 "aaa"）时，它会返回 `true`，表明该字符串无法被转换为数字。

以前，开发者们常常使用 `document.all` 来判断是否为IE浏览器，但这其实是一个危险的做法。因为现代浏览器也开始采用类似的实现方式，导致这种判断方法失去了准确性。实际上，使用 `document.all` 可以获取到页面中所有的元素，但它的类型在大多数浏览器中都是 `undefined`。而在IE浏览器中，它会返回一个HTMLAllCollection对象，其中包含页面中的所有元素。

关于数组的判断

最简单的方法是基于实例的判断：

```javascript

function isArrayLike(arr) {

return arr instanceof Array;

}

```

为了更加稳健，我们可以检查其构造器以及它是否具有某些方法：

```javascript

function isArrayByPrototype(arr) {

return arr != null && typeof arr === "object" && 'splice' in arr && 'join' in arr;

}

```

另一种方法是基于数组排序功能的检查：

```javascript

function isArrayByCrockford(arr) {

return typeof arr.sort == "function";

}

```

还有一位开发者使用了一种尝试构造新数组的方式来判断：

```javascript

function isArrayByKrizyp(array) {

var result = false;

try {

new array.constructor(Math.pow(2, 32)); // 这里假设数组构造器可以接受数字作为参数来创建数组。这可能在某些情况下不准确。因此这个方法有一定的风险性。实际的数组构造可能不同，因此需要对此进行检查或验证。请小心使用这种方法。这将产生一个具有大量元素的数组并抛出异常来检测其消息字符串中是否包含数组的字样来判断是否为数组。这种方式有些技巧性。结果可能会因为环境或实现的不同而有所差异。因此在实际应用中需要谨慎使用。如果出现问题，请尝试其他方法。这种方法的优点是可以在某些情况下检测到数组的特殊性。它并不是一种通用的解决方案，并且可能不适用于所有情况。在某些情况下，它可能会产生误报或不准确的结果。在使用此方法时，请务必谨慎考虑其潜在的风险和局限性。这种方法基于一种假设，即数组的构造器可以接受数字作为参数来创建数组，但实际情况可能并非如此。如果这个方法在你的环境中无法正常工作，可能需要寻找其他方法来解决这个问题。这个方法可能会在某些情况下产生不准确的检测结果。请务必确保在实际应用中对其进行充分的测试以确保其准确性。最终返回结果是否成功创建了一个新数组来判断是否为数组类型。这种方法有一定的局限性，因为它依赖于特定的实现细节和环境因素。在使用这种方法时应该小心谨慎地评估其适用性。”]} //省略了代码部分...此处为描述和解释方法优劣之处。此函数用于检测对象是否为数组类型，通过尝试构造一个新的数组并检查其构造函数的行为来判断对象的类型。这种方法具有一定的技巧性并且可能会因环境和实现的不同而有所差异。"测试"_test"表明函数被成功地应用了逻辑处理逻辑正常。但是需要注意的是，这种方法并不总是准确的，因为它依赖于特定的实现细节和环境因素。"测试"_test"是内部逻辑处理的一部分，用于验证函数是否正确地执行了预期的操作。"测试"_test"是为了验证对象是否为数组类型而存在的一部分代码。同时强调了函数的局限性。"}对于这样的高级技术而言，"对于实际项目的需求进行实际测试是至关重要的。"如果我们能成功地检测到数组的创建行为是否正常即可判断出该对象是否为数组。"另一种检测方法使用了toString函数以及对于不同的浏览器或环境的结果的敏感性进行了分析描述并提出了识别窗口对象的技巧方法和思路并提出了在实际应用过程中需要进行测试的重要性同时提到了各种方法有其独特的优势和局限性需要进行审慎的选择和应用"。总的来说在进行编程的过程中深入理解这些方法背后的逻辑是非常重要的这样才能在实际项目中根据具体的需求和环境做出最佳的选择和使用这些函数帮助开发者提高代码质量和效率避免不必要的错误和问题从而创造出更优秀的产品。"最后我们需要理解这些方法背后的逻辑和原理以便在实际应用中做出正确的决策。"接下来我们来一下如何判断其他类型的对象如窗口对象以及nullundefined等类型。"关于Null、Undefined和NaN的判断Null是一个特殊的值表示指针指向了一个不存在的对象或者没有指向任何对象Undefined表示一个变量未被赋值NaN表示一个非数字值我们可以通过简单的比较运算符来判断这些值的存在与否。"关于Null的判断如果一个变量等于null那么这个变量就是null类型可以使用简单的等号比较运算符来进行判断。"关于Undefined的判断如果一个变量的值等于void 0那么这个变量就是Undefined类型也可以使用等号比较运算符来进行判断。"至于NaN的判断可以使用isNaN函数来判断一个值是否为NaN如果isNaN函数返回true那么这个值就是NaN。"接下来我们来一下如何判断一个对象是否是窗口对象由于ECMA规范并没有明确规定Host对象包括窗口对象的处理方式因此直接使用Object的toString方法可能无法准确判断窗口对象需要根据不同浏览器的行为特性来进行判断。"关于窗口对象的判断由于不同浏览器对于窗口对象的处理方式存在差异因此无法简单地通过一种方法来判断一个对象是否为窗口对象需要使用特定的技巧或组合多种方法来提高准确性这就需要我们根据实际项目的需求和目标浏览器进行相应的调整和优化确保结果的准确性。"同时我们也需要注意在编程过程中深入理解这些方法背后的逻辑和原理避免在实际应用中出现问题保证程序的稳定性和可靠性。"总的来说在进行编程的过程中我们需要对各种方法和技巧进行深入的理解和掌握以便在实际项目中根据具体的需求和环境做出最佳的选择和使用这些函数和方法帮助我们提高编程效率和代码质量创造出更优秀的产品。"最后让我们继续编程的世界对于不同的JavaScript框架和库，它们对于数据类型的判断各有特色。从给定的信息来看，这些框架都有关于数据类型的判断方法，这些方法是JavaScript编程中的重要部分，它们帮助开发者更准确地处理各种数据类型。

让我们了解一下这些框架中的类型判断方法。

Mootools有一套类型判断机制，包括typeOf用于判断基本类型，而instanceOf则用于判断自定义的类。RightJS提供了诸如isFunction、isHash等丰富的类型判断方法。Ext提供了全面的类型判断函数集，如isEmpty、isArray、isDate等，同时也有typeOf用于判断基本类型。Underscore.js也有一系列的类型判断函数，包括isElement、isEmpty等。jQuery则有其独特的判断方式，特别是isPlainObject方法，它用于判断一个对象是否是纯净的JavaScript对象，既不是DOM或BOM对象，也不是自定义类的实例对象。这个方法主要用于深拷贝时避免引用自身的对象如window。还有isArrayLike这样的方法，虽然它没有被广泛暴露出来，但它对于识别类数组对象非常重要。

接下来，我们看avalon.mobile的版本。这是一个更精简的版本，支持的浏览器并使用ecma262v5新API。其isPlainObject方法的实现相对简洁，主要检查对象是否存在、是否是对象类型以及它的原型是否等于Object.prototype。

至于类数组对象的识别，确实是一个挑战。类数组对象有一个重要的特征就是它们的length属性大于或等于0。并非所有满足这个条件的都是类数组对象。例如，window和函数元素虽然满足这个条件，但它们不被视为类数组对象。至今，像jQuery这样的库并没有专门暴露出一个方法来识别这种类数组对象。

在编程的世界里，我们常常需要判断一个对象是否具备某种特性，比如是否是数组或类似数组的对象。在jQuery 2.0版本中，有一个名为isArrayLike的函数，专门用于判断一个对象是否具有数组的特性。

这个函数首先检查对象的length属性和类型。如果对象是窗口对象，那么直接返回false。如果对象是DOM节点且拥有length属性，那么返回true。否则，如果对象的类型是数组，或者类型不是函数且length属性是非负整数，则进一步判断该对象是否具备数组的特性。在avalonjs中，也有类似的函数，它更深入地检测了对象的属性。

而在较早的jQuery版本中，判断一个变量是否为函数是一项复杂的任务。但在jQuery 1.43版本中，引入了一个名为isWindow的函数来处理makeArray中对window的判定，还引入了isNaN函数确保样式赋值的安全。引入了type函数代替typeof关键字来获取基本数据的基本类型。还定义了一个class2type对象来存储各种对象类型的名称。这个对象通过遍历一系列字符串并分割成数组来填充。jQuery的type函数使用这个对象来确定传入对象的类型。在jQuery 1.7版本中，添加了一个isNumeric函数代替isNaN函数，使得判断数字更加灵活。但这个版本也做出了一些改变，去掉了jQuery.isNaN函数，导致一些基于旧版jQuery的插件失效。

这些改变反映了编程世界中对代码优化和性能提升的不断追求。这也提醒我们在使用编程库时，要注意版本之间的差异和变化，以确保代码的兼容性和稳定性。在编程的道路上，我们不断学习和适应新的技术和变化，以更好地满足不断变化的需求和挑战。这些改变和创新是推动我们前进的力量，让我们在编程的世界中不断和成长。jQuery的数字验证之旅

在较早版本的jQuery库中，对于数字类型的判断主要依赖于`isNaN`和简单的正则表达式匹配。从jQuery 1.43至1.64的版本中，`jQuery.isNaN`函数开始逐渐成型，用以判断一个对象是否为非数字（NaN）。随着版本的迭代，代码不断优化和完善。而在更高版本的jQuery中，我们看到了对数字验证的进一步改进和优化。随着代码库的发展，代码冗余和复杂性逐渐显现。于是，在massFarmeWork的思路中，开始寻求减少isXXX系列代码的方法，以简化代码并提高效率。

在早期的jQuery版本中，我们可能会看到这样的代码片段：

```javascript

jQuery.isNaN = function (obj) {

return obj == null || !rdigit.test(obj) || isNaN(obj);

}

```

以及类似的函数来判断数字类型。而随着版本的迭代，这些函数逐渐变得更加精确和高效。但在某些版本中，你可能会发现不同的实现方式用以处理细微的边缘情况。到了jQuery 2.1时代，我们看到了一个更为简洁的实现方式：

```javascript

jQuery.isMumeric = function(obj) {

return obj - parseFloat(obj) >= 0;

}

```

在编程世界中，识别对象的类型至关重要。为此，我们有一个映射表class2type，它几乎涵盖了所有常用的对象类型。这个映射表帮助我们轻松确定对象的类型。

我们来看class2type是如何构建的。它包含了一些常见对象类型的映射，比如HTML文档、HTML集合、静态节点列表、IXMLDOM节点列表、窗口和全局对象等。我们还为Boolean、Number、String、Function、Array、Date、RegExp、Window、Document、Arguments和NodeList等类型添加了映射。

接下来，我们有一个名为mass.type的函数，它利用class2type映射来确定对象的类型。它检查对象是否为null或NaN，然后使用toString.call(obj)来获取对象的字符串表示形式，并从class2type映射中查找相应的类型名称。如果找不到对应的类型名称，它会检查对象的nodeName属性，如果仍然无法确定类型，则返回""。

对于旧版浏览器的一些特殊情况，如window和document对象，我们需要进行额外的处理。如果对象等于其document属性并且document不等于对象本身，那么我们可以确定对象是window。如果对象的nodeType属性等于9，那么我们可以确定对象是Document。如果对象有callee属性，那么我们可以确定对象是Arguments。如果对象的长度是有限的并且具有item属性，那么我们可以确定对象是NodeList。对于其他情况，我们使用toString.call(obj)的结果来猜测对象的类型。

然后，我们有了baidu.isDate和baidu.isNumber这两个函数，它们分别用于判断一个对象是否是日期和数字类型。这些函数首先使用mass.type函数确定对象的类型，然后进行额外的检查以确保对象符合日期或数字的要求。

至于domReady机制，它是主流框架中的一种引入机制。它实际上是一种名为"DOMContentLoaded"事件的别称。框架需要尽早介入dom操作，因此它与真正的DOMContentLoaded事件有所不同。很多新手和旧的书中的做法是将domReady写在window.onload回调中，以防止在dom树还未完全构建完毕就开始对节点进行操作。但对于框架来说，越早介入dom就越好，以便进行特征侦测等操作。

当页面充斥着大量图片或其他资源时，window.onload事件可能会因为持续加载而无法及时触发，这对于依赖特定DOM元素加载完成才能执行的用户操作来说，无疑是一种困扰。幸运的是，主流的框架已经引入了domReady机制，并通过种种策略兼容了所有浏览器。其中，对于支持DOMContentLoaded事件的浏览器，直接使用DOMcontentLoaded事件；而对于那些旧版本的IE浏览器，则采用由Diego Perini发现的著名hack方案。

（一）文档加载与完美遗憾

当我们回顾FF3.6之前的时代，会发现一个不小的遗憾——那时的浏览器尚未拥有`readyState`这一属性。这使得我们不得不寻求其他策略来确保文档完全加载完毕。针对这种情况，我们采取了如下策略：

```javascript

//初始化一个待执行的函数列表，等待文档准备就绪

var readyList = [];

mess.ready = function(fn) {

if (readyList) { //如果列表存在，将函数推入列表

readyList.push(fn);

} else { //否则直接执行函数

fn();

}

};

当你引入 jQuery 之后，默认情况下，你可以使用 `$` 作为别名来调用 jQuery 方法。如果你的页面还引入了其他库，并且这些库也使用了 `$` 作为标识符，那么冲突就产生了。为了避免这种冲突，你可以使用 `$.noConflict()` 方法将 `$` 的控制权交还给其他库。

具体操作是这样的：当你调用 `$.noConflict()` 后，jQuery 会将 `$` 的控制权交给其他库。你可以通过 `window.$` 或 `window.jQuery` 来访问 jQuery 对象。这是一种优雅的方式来确保 jQuery 与其他库和平共处。如果你不希望改变默认的 `$` 标识符，你还可以使用 `jQuery` 作为别名来调用 jQuery 方法。这是一个灵活而强大的机制，使得开发者可以根据项目需求灵活地管理命名冲突。

除了解决命名冲突外，还有一个有趣的库叫做 mass，它提供了一种新颖的方式来管理命名空间。你可以在 ``然后在另一个 `