jQuery技术

第二章 jQuery技术解密 (二)(2)

字号+ 作者:H5之家 来源:H5之家 2016-01-14 16:31 我要评论( )

extend() 函数能够方便用户快速扩展 jQuery 框架的功能,但是不会破坏 jQuery 框架的原型结构,从而避免后期人工手动添加工具函数或者方法破坏 jQuery 框架的单纯性,同时也方便管理。如果不需要某个插件,只需要简

extend() 函数能够方便用户快速扩展 jQuery 框架的功能,但是不会破坏 jQuery 框架的原型结构,从而避免后期人工手动添加工具函数或者方法破坏 jQuery 框架的单纯性,同时也方便管理。如果不需要某个插件,只需要简单地删除即可,而不需要在 jQuery 框架源代码中去筛选和删除。

extend() 函数的功能实现起来也很简单,它只是把指定对象的方法复制给 jQuery 对象或者 jQuery.prototype 对象。例如,在下面的示例中,我们为 jQuery 类和原型定义了一个扩展功能的函数 extend() ,该函数的功能很简单,它能够把指定参数对象包含的所有属性复制给 jQuery 或者 jQuery.prototype 对象,这样就可以在应用中随时调用它,并动态扩展 jQuery 对象的方法。

[html]view
plain

  • returnnewjQuery.fn.init(selector,context);//返回选择器的实例
  • };
  • init:function(selector,context){//定义选择器构造器
  • if(selector.nodeType){//如果选择符为节点对象
  • this[0]=selector;//把参数节点传递给实例对象的数组
  • returnthis;//返回当前实例
  • }
  • if(typeofselector==="string"){//如果选择符是字符串
  • this[i]=e[i];
  • }
  • returnthis;//返回当前实例
  • }else{
  • returnthis;//返回当前实例
  • }
  • },
  • jquery:"1.3.2",//原型属性
  • size:function(){//原型方法
  • returnthis.length;
  • }
  • };
  • //jQuery功能扩展函数
  • for(varpropinobj){
  • this[prop]=obj[prop];
  • }
  • returnthis;
  • };
  • //扩展jQuery对象方法
  • jQuery.fn.extend({
  • test:function(){
  • alert("测试扩展功能");
  • }
  • });
  • //测试代码
  • $("div").test();
  • 在上面的示例中,先定义了一个功能扩展函数 extend(),然后为 jQuery.fn 原型对象调用 extend() 函数,为其添加一个测试方法 test()。这样就可以在实践中应用,如 $("div").test() 。

    jQuery 框架定义的 extend() 函数的功能要强大很多,它不仅能够完成基本的功能扩展,还可以实现对象合并等功能。

    2.2.8 延续 -- 参数处理

    在很多时候,你会发现 jQuery 的方法都要求传递的参数为对象结构,例如:

    $.ajax({

    type: "GET",

    url: "test.js",

    dataType: "script"

    });

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

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

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

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

    [html]view
    plain

  • returnnewjQuery.fn.init(selector,context);//返回选择器的实例
  • };
  • init:function(selector,context){//定义选择器构造器
  • if(selector.nodeType){//如果选择符为节点对象
  • this[0]=selector;//把参数节点传递给实例对象的数组
  • returnthis;//返回当前实例
  • }
  • if(typeofselector==="string"){//如果选择符是字符串
  • this[i]=e[i];
  • }
  • returnthis;//返回当前实例
  • }else{
  • returnthis;//返回当前实例
  • }
  • },
  • setOptions:function(options){
  • this.options={//方法的默认值,可以扩展
  • StartColor:"#000",
  • EndColor:"#DDC",
  • Step:20,
  • Speed:10
  • };
  • jQuery.extend(this.options,options||{});//如果传递参数,则覆盖原默认参数
  • },
  • jquery:"1.3.2",//原型属性
  • size:function(){//原型方法
  • returnthis.length;
  • }
  • };
  • for(varpropertyinsource){
  • destination[property]=source[property];
  • }
  • returndestination;
  • };
  • 在上面的示例中,定义了一个原型方法 setOptions(),该方法能够对传递的参数对象进行处理,并覆盖默认值。这种用法在本书插件部分还将进行讲解。

    在 jQuery 框架中, extend() 函数包含了所有功能,它既能够为当前对象扩展方法,也能够处理参数对象,并覆盖默认值。

    2.2.9 涅槃 -- 名字空间

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 7个有用的jQuery小技巧

      7个有用的jQuery小技巧

      2016-02-26 13:02

    • jQuery制作select双向选择列表

      jQuery制作select双向选择列表

      2016-02-26 11:00

    • 全面详细的jQuery常见开发技巧手册

      全面详细的jQuery常见开发技巧手册

      2016-02-26 10:02

    • 强大的jQuery移动插件Top 10

      强大的jQuery移动插件Top 10

      2016-02-25 09:05

    网友点评
    u