JQ插件制作

日期:2015-6-29 21:38 | 标签: JQ插件 | 阅读:458

JQ插件制作方法有很多种,本次主要对现有的2种方法进行探讨,插件的功能是实现自我介绍 :)。

方法

  1. $.fn.方法名,其实相当于$.prototype.方法名,既然是通过原型加载,那就得通过实例化成对象后才能调用了。

    ;(function($){
     $.fn.extend({
         speak:function(option){
              //默认参数
              var defaults = { name: 'pengyi', age: 23}; 
              //合并默认参数与自定义参数
              var data = $.extend({}, defaults, options);
    
              alert('hello,I am '+data.name+','+data.age+' years old now!')
         }
     });
    })(jQuery);
    
  2. jQuery.方法名,这种方法是在jQuery类上进行拓展,所以可以直接通过类名进行调用,比如$.ajax其实就是通过该方法实现的。

    jQuery.extend({
       speak:function(option){
           //默认参数
           var defaults = { name: 'pengyi', age: 23}; 
           //合并默认参数与自定义参数
           var data = $.extend({}, defaults, options);
    
           alert('hello,I am '+data.name+','+data.age+' years old now!')
       }
    });
    

其它

以上两种是构建JQ插件的流行方法,掌握构建插件方法外,还得考虑一些概念。如支持模块化构建,下面贴的代码参考自gridster(可拖拽的网格插件),很遗憾,这里不支持@玉伯的cmd规范。

;(function(root, factory) {
    if (typeof define === 'function' && define.amd) { //是否支持amd规范
        define(['jquery', 'gridster-draggable', 'gridster-collision'], factory);
    } else {
        root.Gridster = factory(root.$ || root.jQuery, root.GridsterDraggable,
            root.GridsterCollision);
    }

 }(this, function($, Draggable, Collision) {});

版权声明: 署名-非商业性使用-禁止演绎 4.0 国际(CC BY-NC-ND 4.0
Copyright ©2013-2017 | 粤ICP备14081691号 | yipeng手工打造 | 联系方式