您当前的位置： 首页 >  jquery

第二章 jQuery技术解密 (二)

发布时间：2013-12-28 16:14:45 ，浏览量：0

2.2.6 延续 -- 迭代器

在 jQuery 框架中，jQuery 对象是一个很奇怪的概念，具有多重身份，所以很多初学者一听说 jQuery 对象就感觉很是不解，误以为它是 John Resig 制造的新概念。我们可以对jQuery 对象进行如下分解。

第一，jQuery 对象是一个数据集合，它不是一个个体对象。因此，你无法直接使用 JavaScript 的方法来操作它。

第二，jQuery 对象实际上就是一个普通的对象，因为它是通过 new 运算符创建的一个新的实例对象。它可以继承原型方法或属性，同时也拥有 Object 类型的方法和属性。

第三，jQuery 对象包含数组特性，因为它赋值了数组元素，以数组结构存储返回的数据。我们可以以 JavaScript 的概念理解 jQuery 对象，例如下面的示例。

[html]  view plain copy
  1. <script type="text/javascript">  
  2.     var jquery = {          // 定义对象直接量  
  3.         name: "jQuery",     // 以属性方式存储信息  
  4.         value: "1.3.2"  
  5.     };  
  6.     jquery[0] = "jQuery";   // 以数组方式存储信息  
  7.     jquery[1] = "1.3.2";      
  8.     alert(jquery.name);     // 返回 "jQuery"  
  9.     alert(jquery[0]);       // 返回 "jQuery"  

  10. type: "GET",

    url: "test.js",

    dataType: "script"

    });

    使用对象直接量作为参数进行传递，方便参数管理。当方法或者函数的参数长度不固定时，使用对象直接量作为参数存在很多优势。例如，对于下面的用法，ajax()函数就需要进行更加复杂的参数排查和过滤。

    $.ajax("GET", "test.js", "script");

    如果 ajax() 函数的参数长度是固定的，且是必须的，那么通过这种方式进行传递也就无所谓了，但是如果参数的个数和排序是动态的，那么使用 $.ajax("GET", "test.js", "script"); 这种方法是无法处理的。而 jQuery 框架的很多方法都包含大量的参数，且都是可选的，位置也没有固定要求，所以使用对象直接量是惟一的解决方法。

    使用对象直接量作为参数传递的载体，这里就涉及参数处理问题。如何解析并提出参数？如何处理参数和默认值？我们可以通过下面的方法来实现。

    [html]  view plain copy
    1. <script type="text/javascript">  
    2. var $ = jQuery = function(selector, context){           // 定义类        
    3.     return new jQuery.fn.init(selector, context);       // 返回选择器的实例  
    4. };  
    5.   
    6. jQuery.fn = jQuery.prototype = {                // jQuery 类的原型对象  
    7.     init: function(selector, context){          // 定义选择器构造器  
    8.         selector = selector || document;        // 设置默认值为 document  
    9.         context = context || document;          // 设置默认值为 document  
    10.           
    11.         if(selector.nodeType){                  // 如果选择符为节点对象  
    12.             this[0] = selector;                 // 把参数节点传递给实例对象的数组  
    13.             this.length = 1;                    // 并设置实例对象的 length 属性，定义包含的元素个数  
    14.             this.context = selector;            // 设置实例的属性，返回选择范围  
    15.             return this;                        // 返回当前实例  
    16.         }  
    17.         if(typeof selector === "string"){       // 如果选择符是字符串  
    18.             var e = context.getElementsByTagName(selector); // 获取指定名称的元素  
    19.             for(var i = 0; i<e.length; i++){ // 遍历元素集合，并把所有元素填入到当前实例数组中  
    20.                 this[i] = e[i];  
    21.             }  
    22.             this.length = e.length;             // 设置实例的 length 属性，即定义包含的元素个数  
    23.             this.context = context;             // 设置实例的属性，返回选择范围  
    24.             return this;                        // 返回当前实例  
    25.         } else {  
    26.             this.length = 0;                    // 否则，设置实例的 length 属性值为 0  
    27.             this.context = context;             // 设置实例的属性，返回选择范围  
    28.             return this;                        // 返回当前实例  
    29.         }  
    30.     },  
    31.     setOptions: function(options){  
    32.         this.options = {    // 方法的默认值，可以扩展  
    33.             StartColor: "#000",  
    34.             EndColor: "#DDC",  
    35.             Step: 20,  
    36.             Speed: 10     
    37.         };  
    38.         jQuery.extend(this.options, options || {}); // 如果传递参数，则覆盖原默认参数    
    39.     },  
    40.     jquery: "1.3.2",                // 原型属性  
    41.     size: function(){               // 原型方法  
    42.         return this.length;  
    43.     }  
    44. };  
    45.   
    46. jQuery.fn.init.prototype = jQuery.fn; // 使用 jQuery 的原型对象覆盖 init 的原型对象  
    47.   
    48. jQuery.extend = jQuery.fn.extend = function(destination, source){   // 重新定义 extend() 函数  
    49.     for (var property in source){  
    50.         destination[property] = source[property];  
    51.     }  
    52.     return destination;  
    53. };  

    54. alert("观察我什么时候出现");

      })();

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

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

      [html]  view plain copy
      1. <script type="text/javascript">  
      2.     (function(){  
      3.         function f1(){  
      4.             return "f1()";  
      5.         }  
      6.     })();  
      7.       
      8.     function f2(){  
      9.         return "f2()";  
      10.     }  
      11.       
      12.     alert(f2());    // 返回 "f2()"  
      13.     alert(f1());    // 抛出异常，禁止访问  
关注
打赏
1688896170
查看更多评论

暂无认证

  • 0浏览

    0关注

    108697博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

[ 申请 ]友情链接：

快连vpn 快连 快连vpn 搜外友链 笔趣阁 爱思助手 ClashX教程 绘画宝宝 配音宝宝
立即登录/注册

微信扫码登录

0.0577s