Front
10 Nov 2017

自定义js插件

自定义jquery插件

$.extend()

扩展jQuery类本身.为类添加新的方法,类级别的插件开发，封装全局函数的插件,相当于添加静态方法

;(function($){  
    $.extend({  //类的扩展
        ltrim:function(text){  
            return (text||"").replace(/^\s+g,"");  
        } 
    });  
    $.rtrim=function(text){  
        return (text||"").replace(/\s+$/g,"");  
    }   
})(jQuery);  
<!-- 调用函数： --> 
jQuery.ltrim(" test ")+"\n"+jQuery.rtrim(" test ")

使用命名空间

;(function($){
    $.myPlugin = {
        foo:function(){
            alert("This is a test.");
        }  ,
        bar:function("bar"){
            alert("This is another test.");
         }  
}
})(jQuery);
<!-- 调用函数： -->
$.myPlugin.foo();
$.myPlugin.bar("bar");

$.fn

jQuery.fn = jQuery.prototype

    (function($){
        $.fn.extend({
            myPlugName:function(){
                $(this).click(function(){
                    alert($(this).val());    
                });    
            }
        });    
    })(jQuery);
<!-- 调用函数： -->
$("#btn").myPlugName();

$.fn.extend()

对象级别的插件开发

;(function($){  
    $.fn.extend({ // 向jQuery注册组件,实例的扩展 
        "color":function(value){  
            return this.css("color",value);  
        },  
        "border":function(value){  
            //这里写插件代码  
        }  
    });  
})(jQuery); //匿名函数封装组件 
<!-- 调用： -->
$("div").color("red");

示例1

 (function ( $, window, document) {//用匿名函数封装组件
    var pluginName = "myPlug",
    //默认配置参数
    defaults = {
        speed:300   
    };
    //构造函数
    function Plugin ( element, images,options ) {
            this.settings = $.extend( {}, defaults, options );           
    };
    Plugin.prototype = {//定义插件的行为
            init: function () {   //初始化
                var e = this;               
            },
            setImages:function(images){  //设置图片数组，可以用于修改当前播放的图片数组               
            }
        };
    $.fn[ pluginName ] = function ( images,options) {   //向jQuery注册插件
        var e = this;
        e.each(function() {
        //向元素中添加“plugin_myPlug”属性，并执行了：$(element).plugin_myPlug = new Plugin( element,images, options );
            $.data( e, "plugin_" + pluginName, new Plugin( this,images, options ) );
        });
        return e;
    };
})(jQuery, window, document)
<!-- 调用： -->
$(element).myPlug(images,options);
$(element).myPlug.setImages();

示例2

(function ($) {
var methods = {
    init: function (options) {},
    update: function (content) {}
};
$.fn.myPlug = function (method) {
// 方法调用
    if (methods[method]) {
        return methods[method].apply(this,Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || !method) {
        return methods.init.apply(this, arguments);
    } else {
        $.error('Method' + method + 'does not exist on jQuery.tooltip');
    }
  };
})(jQuery);
//调用init方法
$('div').myPlug();
$('div').myPlug({foo: 'bar'});
//调用Update方法 
$('div').myPlug('update', 'This is the new tooltip content!');

自定义js 插件

;(function (global, factory) {
    if (typeof exports == "object" && typeof module == "object") // commonjs2
        module.exports = factory();
    else if (typeof define == "function" && define.amd) // AMD
        return define([], factory);
    else if (typeof exports === 'object') // commonjs
        exports["CA"] = factory();//； 。
    else{
         global.CA = factory()
    }
}(this, function () {
    function CA(){
        this.test1 = "red";
        this.test2 = new Array("Tom", "Jerry");
        if (typeof CA._initialized == "undefined") { 
            CA.prototype.test3 = function() { 
                console.log("test3",this.test1)
            } 
        } 
        CA._initialized = true;  
    }
    var test4=function(){
        console.log(1212);
    }
    CA.prototype.test4 = test4;
    return new CA();
}));
<!-- 使用 -->
console.log(CA.test1,CA.test2,CA.test3,CA.test4);
Tags: