phpstudy集成环境

 首页 > 关于jQuery插件扩展

关于jQuery插件扩展

问题一：扩展jQuery对象时，这四种方式那个适用性更强一些

//方式一
;jQuery.fn.myPluginName = function () {
      //code here
      return this;
};

//方式二
$.fn.extend({     
    myPluginName:function() {     
          //code here
          return this;      
    }  
});

//方式三
(function($){
    jQuery.fn.myPlugin = function () {
        //code here
        return this;  
    };
})(jQuery);

//方式四
(function($){
    $.fn.extend({     
        myPluginName:function() {     
              //code here
              return this;      
        }  
    });
})(jQuery);

问题二：下面的代码段②是什么意思，做什么用，跟注册全局方法$.extend有什么关联

$.fn.myPluginName = function(opts) {//用opts表示多个入参
    var defaults = {//①
        'color': 'red',
        'fontSize': '12px'
    };
    var settings = $.extend(defaults, opts);//②
    //设置字体样式
    this.css({//③
        'color': settings.color,
        'fontSize': settings.fontSize
    });
    //返回对象，方便链式调用
    return this;
}

问题三：现在在写一个表格插件，包括数据渲染和若干方法，现在还没有写监听事件，感觉一团糟，有什么好的思路，或者简单的开源实现（github项目）可以参考（尽量简单），希望大家给个思路也好，谢谢！！！

问题一：
我倾向于第四种写法 用匿名函数把插件包起来
好处是：1.避免其它插件也用了 $ 做关键字；2.避免插件内部方法污染全局

方式一我不知道好坏
方式二 $ 可能会被其他同名变量污染
方式三和方式一类似 包了一层自执行函数 但既然包了一层并把jQuery作为参数传递了 内部就可以直接写 $ 了
$.fn.methodName = function() {} 和 $.fn.extend({ methodName: function() {} }) 的好坏我不是很清楚

问题二：
$.extend 方法是合并对象 用于将传入的参数覆盖默认配置

var a = { name: 'a' };
var b = { name: 'b', age: 2 };
var c = $.extend(a, b); // 把 b 对象合并到 a 对象
console.log(a); // { name: 'b', age: 2 };
console.log(b); // { name: 'b', age: 2 };
console.log(c); // 最终配置 { name: 'b', age: 2 };
// 不推荐这么写 这么写会把 a 也修改了 有时候还需要使用到原始配置

// 推荐这种写法
var a = { name: 'a' };
var b = { name: 'b', age: 2 };
var c = $.extend({}, a, b); // 把 b 和 a 对象合并到 {} 对象 保留 a 对象
console.log(a); // { name: 'a' };
console.log(b); // { name: 'b', age: 2 };
console.log(c); // 最终配置 { name: 'b', age: 2 };

第一个问题

方式二慎用，$ 也不是 jQuery 一个库在定义
方式三和方式四差不多，都是创造一个小环境来扩展，会相对比较干净。但一般情况下，现在使用了某框架的脚本都是模块极别的，本来就是小环境，这种情况下就不推荐用方法三、四了。如果是自己写库，没使用其它模块组织框架，就用三四比较好。

第二个问题

$.extend(obj, a)，的作用是用 a 中的属性去覆盖 obj 中的同名属性。这样如果 obj 是默认属性集的话，a 可以只包含需要修改的属性，通过 $.extend 来修改 obj。

不过，如果由于 obj 本身会被修改，所以当把默认属性定义成一个常量（或当作常量）的时候，不适用这种方法，通常我会这样写，

var opt = $.extend({}, defaultOptions, options);

第三个问题

这个问题可以开个专题来讨论。SegmentFault 上问问题好像不需要积分吧。这跟开发定义函数一样，不要想在一个函数里解决所有的事情。

这个问题……我只能说推荐你去找找现成的表格组件，找找度娘。

你这算是两组方法，方法一和方法二算是一组，方法三和方法四算是一组。组内的两种方法是一样的。
$.fn.name和$.fn.extend是一样的，你可以查看jQuery的源码。
使用方法3、4中的以闭包的形式可能会更好一些，你上面的方法每调用一次defaults,settings这些东西都会重新生成一次。

没注意你写的jQuery和$。。，$也可能被其他库使用，使用闭包的方式可以给jQuery别的别名，方便一些。

一个插件的框架就像方法3、4一样，具体实现根据你的需求而不同的。

【热门文章】
【热门文章】