思洋互动网站建设学前班

涅槃--名字空间

现在，我们终于模拟出了jQuery框架的雏形，虽然它还比较稚嫩，经不起风雨，但至少能够保证读者理解jQuery框架构成的初期状态。不过对于一个成熟的框架来说，需要设计者考虑的问题还是很多的，其中最核心的问题就是名字空间冲突问题。

当一个页面中存在多个框架，或者自己写了很多JavaScript代码，我们是很难确保这些代码不发生冲突的，因为任何人都无法确保自己非常熟悉jQuery框架中的每一行代码，所以难免会出现名字冲突，或者功能覆盖现象。为了解决这个问题，我们必须把jQuery封装在一个孤立的环境中，避免其他代码的干扰。

在详细讲解名字空间之前，我们先来温习两个JavaScript概念。首先，请看下面的代码。

1. var jQuery = function(){};  
   • jQuery = function(){}; 

上面所示的代码是两种不同的写法，且都是合法的，但是它们的语义完全不同。第一行代码声明了一个变量，而第二行代码定义了Window对象的一个属性，也就是说它等同于下面的语句。

1. window.jQuery = function(){}; 

在全局作用域中，变量和Window对象的属性可以是相等的，也可以是互通的，但是当在其他环境中(如局部作用域中)，则它们是不相等的，也是无法互通的。

因此如果希望jQuery具有类似$.method();调用方式的能力，就需要将jQuery设置为Window对象的一个属性, 所以你就会看到jQuery框架中是这样定义的。

1. var jQuery = window.jQuery = window.$ =  function( selector, context ) {  
   •     return new jQuery.fn.init( selector, context );  
     • } 

你可能看到过下面的函数用法。

1. (function(){  
   •    alert("观察我什么时候出现");  
     • })(); 

这是一个典型的匿名函数基本形式。为什么要用到匿名函数呢？

这时就要进入正题了，如果希望自己的jQuery框架与其他任何代码完全隔离开来，也就是说如果你想把jQuery装在一个封闭空间中，不希望暴露内部信息，也不希望别的代码随意访问，匿名函数就是一种最好的封闭方式。此时我们只需要提供接口，就可以方便地与外界进行联系。例如，在下面的示例中分别把f1函数放在一个匿名函数中，而把f2函数放在全局作用域中。可以发现，全局作用域中的f2函数可以允许访问，而匿名函数中的f1函数是禁止外界访问的。

广州网站建设,网站建设,广州网页设计,广州网站设计

1. <script language="javascript" type="text/javascript"> 
   • (function(){  
     •     function f1(){  
       •         return "f1()";  
         •     };  
           • })();  
             • function f2(){  
               •     return "f2()";  
                 • };  
                   • alert( f2() );   //返回"f2()";  
                     • alert( f1() );  //抛出异常，禁止访问  
                       • </script> 

实际上，上面的匿名函数就是所谓的闭包，闭包是JavaScript函数中一个最核心的概念。

当然，$和jQuery名字并非是jQuery框架的专利，其他一些经典框架中也会用到$名字，也许读者也会定义自己的变量jQuery。

在这之前我们需要让它与其他框架协同工作，这就带来一个问题，如果我们都使用$作为简写形式就会发生冲突，为此jQuery提供了一个noConfilit()方法，该方法能够实现禁止jQuery框架使用这两个名字。为了实现这样的目的，jQuery在框架的最前面，先使用_$和_jQuery临时变量寄存$和jQuery这两个变量的内容，当需要禁用jQuery框架的名字时，可以使用一个临时变量_$和_jQuery恢复$和jQuery这两个变量的实际内容。实现代码如下。

1. (function(){  
   • var  
     •     window = this,  
       •     undefined,  
         •     _jQuery = window.jQuery,     //暂存jQuery变量内容  
           •     _$ = window.$,     //暂存$变量内容  
             •     jQuery = window.jQuery = window.$ =  function( selector, context ) {  
               •         return new jQuery.fn.init( selector, context );  
                 •     },  
                   •     quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/,  
                     •     isSimple = /^.[^:#\[\.,]*$/;  
                       • jQueryjQuery.fn = jQuery.prototype = {  
                         •     init: function( selector, context ) {}  
                           • }  
                             • })() 

至此，jQuery框架的设计模式就初见端倪了，后面的工作就是根据应用需要或者功能需要，使用extend()函数不断扩展jQuery框架的工具函数和jQuery对象的方法。

广州网站建设,网站建设,广州网页设计,广州网站设计