zoukankan      html  css  js  c++  java
  • 【转】jQuery插件的几种写法

    这是看到的一篇jQ插件的总结。比较到位。详尽且简单易懂。如果之前看过jquery的源码,应该特别好理解了。

     

    一、jQuery插件开发方式

    1、通过$.extend()来扩展jQuery

    2、通过$.fn 向jQuery添加新的方法

    3、通过$.widget()应用jQuery UI的部件工厂方式创建

    二、三种jQuery插件开发方式说明

    1、$.extend()相对简单,一般很少能够独立开发复杂插件,仅仅是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法而以。

    2、我们调用通过$.extend()添加的函数时直接通过$符号调用($.myfunction()),而不需要选中DOM元素($('#example').myfunction())。

    4、$.fn则是一般插件开发用到的方式,可以利用jQuery强大的选择器带来的便利,以及将插件更好地运用于所选择的元素身上,使用的插件也大多是通过此种方式开发。

     

    三、$.extend()扩展jQuery的实例

     

    $.extend({
    sayHello: function(name) {
    console.log('Hello,' + (name ? name : 'aaa') + '!');
    }
    })
    $.sayHello(); //Hello,aaa
    $.sayHello('bbb'); //Hello,bbb

    说明:上面代码中,通过$.extend()向jQuery添加了一个sayHello函数,然后通过$直接调用。

    四、$.fn方式插件开发

    1、定义


    $.fn.pluginName = function() {
    //your code here

    }

     

    2、定义说明

     基本上就是往$.fn上面添加一个方法,名字是我们的插件名称。然后我们的插件代码在这个方法里面展开。

    3、简单实例

    将页面上所有链接颜色转成红色,则可以这样写这个插件



    $.fn.myPlugin = function() {
    //在这里面,this指的是用jQuery选中的元素
    //example :$('a'),则this=$('a')

    this.css('color', 'red');
    }

     

    4、实例说明

    (1)、在插件名字定义的这个函数内部,this指代的是我们在调用该插件时,用jQuery选择器选中的元素,一般是一个jQuery类型的集合。在插件名字定义的这个函数内部,this指代的是我们在调用该插件时,用jQuery选择器选中的元素,一般是一个jQuery类型的集合。

    (2)、如果通过调用jQuery的.each()方法处理集合中的每个元素时要注意的是,在each方法内部,this指带的是普通的DOM元素了,如果需要调用jQuery的方法那就需要用$来重新包装一下。


    $.fn.myPlugin = function() {
    //在这里面,this指的是用jQuery选中的元素
    this.css('color', 'red');
    this.each(function() {
    //对每个元素进行操作
    $(this).append(' ' + $(this).attr('href'));
    }))
    }

     

    5、实例插件的使用

     


    <ul> <li>
    <a href="#">aaa</a>
    </li>
    <li>
    <a href="#">bbb</a>
    </li>
    <li>
    <a href="#">ccc</a>

       </li> </ul>
    <p>这是p标签不是a标签,我不会受影响</p>
    <script src="jquery-1.11.0.min.js"></script>
    <script src="jquery.myplugin.js"></script>
    <script type="text/javascript">
    $(function(){
    $('a').myPlugin();
    })
    </script>

    6、让插件支持链式调用

     jQuery一个时常优雅的特性是支持链式调用,选择好DOM元素后可以不断地调用其他方法。要让插件不打破这种链式调用,只需return一下即可。

    
    

    $.fn.myPlugin = function() {
    //在这里面,this指的是用jQuery选中的元素
    this.css('color', 'red');
    return this.each(function() {
    //对每个元素进行操作
    $(this).append(' ' + $(this).attr('href'));
    }))
    }

    7、让插件接收参数

    (1)、一个强劲的插件是可以让使用者随意定制的,这要求我们提供在编写插件时就要考虑得全面些,尽量提供合适的参数。

    (2)、比如现在我们不想让链接只变成红色,我们让插件的使用者自己定义显示什么颜色,要做到这一点很方便,只需要使用者在调用的时候传入一个参数即可。同时我们在插件的代码里面接收。

    (3)、为了灵活,使用者可以不传递参数,插件里面会给出参数的默认值。

    (4)、在处理插件参数的接收上,通常使用jQuery的extend方法,当给extend方法传递一个以上的参数时,它会将所有参数对象合并到第一个里。同时,如果对象中有同名属性时,合并的时候后面的会覆盖前面的。

    (5)、可以在插件里定义一个保存插件参数默认值的对象,同时将接收来的参数对象合并到默认对象上,最后就实现了用户指定了值的参数使用指定的值,未指定的参数使用插件默认值。

    (6)、保护好默认参数:做法是将一个新的空对象做为$.extend的第一个参数,defaults和用户传递的参数对象紧随其后,这样做的好处是所有值被合并到这个空对象上,保护了插件里面的默认值。

    (7)、实例


    $.fn.myPlugin = function(options) {
    var defaults = {
    'color': 'red',
    'fontSize': '12px'
    };
    var settings = $.extend({}, defaults, options);
    return this.css({
    'color': settings.color,
    'fontSize': settings.fontSize
    });
    }


    8、插件开发中的命名空间

    (1)、不仅仅是jQuery插件的开发,我们在写任何JS代码时都应该注意的一点是不要污染全局命名空间。因为随着你代码的增多,如果有意无意在全局范围内定义一些变量的话,最后很难维护,也容易跟别人写的代码有冲突。

    (2)、比如你在代码中向全局window对象添加了一个变量status用于存放状态,同时页面中引用了另一个别人写的库,也向全局添加了这样一个同名变量,最后的结果肯定不是你想要的。所以不到万不得已,一般我们不会将变量定义成全局的。

    (3)、可以使用自调用匿名函数包裹插件代码


    (function() {
    $.fn.myPlugin = function(options) {
    var defaults = {
    'color': 'red',
    'fontSize': '12px'
    };
    var settings = $.extend({},defaults, options);//将一个空对象做为第一个参数
    return this.css({
    'color': settings.color,
    'fontSize': settings.fontSize
    });
    }
    })();

     

    9、尽量在插件的最前面加上分号

     这样可以避免我们将这段代码放到页面后,前面别人写的代码没有用分号结尾,这样,这个插件代码就会报错。

    10、可以将系统变量以变量形式传递到插件内部


    ;(function($,window,document,undefined){
    //我们的代码。

    //...
    })(jQuery,window,document);

    五、将插件代码混淆与压缩的方法

    1、我们下载的插件里面,一般都会提供一个压缩的版本一般在文件名里带个'min'字样。也就是minified的意思,压缩浓缩后的版本。例如,并且平时我们使用的jQuery也是官网提供的压缩版本,jquery.min.js。

    2、这里的压缩不是指代码进行功能上的压缩,而是通过将代码里面的变量名,方法函数名等等用更短的名称来替换,并且删除注释(如果有的话)删除代码间的空白及换行所得到的浓缩版本。同时由于代码里面的各种名称都已经被替代,别人无法阅读和分清其逻辑,也起到了混淆代码的作用。

     

  • 相关阅读:
    HTML DOM 12 表格排序
    HTML DOM 10 常用场景
    HTML DOM 10 插入节点
    HTML DOM 09 替换节点
    HTML DOM 08 删除节点
    HTML DOM 07 创建节点
    022 注释
    024 数字类型
    005 基于面向对象设计一个简单的游戏
    021 花式赋值
  • 原文地址:https://www.cnblogs.com/cupidity/p/8574049.html
Copyright © 2011-2022 走看看