Javascript原生插件开发

js原生插件开发基本雏形：

function(window,document){
    var MaskShare = function(){

    };
    MaskShare.prototype = {};

    window.MaskShare = MaskShare;
}(window,document));

举例：

点击某个元素，弹出一个遮罩层，点击遮罩层将遮罩层去掉。

因此可以分析出，至少需要一个参数，也就是我们需要知道点击谁弹出弹出层，另外我们还需要配置一些默认参数。

(function(window,document){
    var MaskShare = function(targetDom,options){
        // 判断是用函数创建的还是用new创建的。这样我们就可以通过MaskShare("dom") 或 new MaskShare("dom")来使用这个插件了
        if(!(this instanceof MaskShare))return new MaskShare(targetDom,options);

        // 参数合并
        this.options = this.extend({
                        // 这个参数以后可能会更改所以暴露出去
            imgSrc:"../static/img/coupon-mask_1.png"
        },options);

        // 判断传进来的是DOM还是字符串
        if((typeof targetDom)==="string"){
            this.targetDom = document.querySelector(targetDom);
        }else{
            this.targetDom = targetDom;
        }

        var boxDom = document.createElement("div");
        var imgDom = document.createElement("img");

        // 设置默认样式 注意将z-index值设置大一些，防止其他元素层级比遮罩层高
        boxDom.style.cssText = "display: none;position: absolute;left: 0;top: 0;width: 100%;height:100%;background-color: rgba(0,0,0,0.8);z-index:9999;";
        imgDom.style.cssText = "margin-top:20px;width: 100%;";

        // 追加或重设其样式
        if(this.options.boxDomStyle){
            this.setStyle(boxDom,this.options.boxDomStyle);
        }
        if(this.options.imgDomStyle){
            this.setStyle(imgDom,this.options.imgDomStyle);
        }

        imgDom.src = this.options.imgSrc;
        boxDom.appendChild(imgDom);
        this.boxDom = boxDom;

        // 初始化
        this.init();
    };
    MaskShare.prototype = {
        init:function(){
            this.event();
        },
        extend:function(obj,obj2){
            for(var k in obj2){
                obj[k] = obj2[k];
            }
            return obj;
        },
        setStyle:function(dom,objStyle){
            for(var k in objStyle){
                dom.style[k] = objStyle[k];
            }
        },
        event:function(){
            var _this = this;

            this.targetDom.addEventListener("click",function(){
                document.body.appendChild(_this.boxDom);
                _this.boxDom.style.display = "block";
                                // 打开遮罩层的回调
                _this.options.open&&_this.options.open();
            },false);

            this.boxDom.addEventListener("click",function(){
                this.style.display = "none";
                                // 关闭遮罩层的回调
                _this.options.close&&_this.options.close();
            },false);
        }
    };
    // 暴露方法
    window.MaskShare = MaskShare;
}(window,document));

调用：

MaskShare(".immediately",{
    imgSrc:"../static/img/loading_icon.gif",
    boxDomStyle:{
        opacity:".9"
    },
    imgDomStyle:{
        opacity:".8"
    },
    open:function(){
        console.log("show");
    },
    close:function(){
        console.log("close");
    }
});

js原生插件开发几种写法：

1.面向对象方式：调用的时候使用new创建对象

var Auto=Auto||{};
(function(){
	var plugin=function(options){
	this.options=this.extend({xxxxx},options);
	//暴露一些api
	plugin.prototype={
		init:function(){
			
		},
		extend:function(){
			
		}
	}
	Auto.Plu=Plugin;
})();
var p=new Auto.Plu(xxxx);

或

var Auto;
(function(Auto){
	var plugin=(function(){
		function plugin(options){
			this.name='xiaosan';
			this.age=11;
		};
		//暴露一些api
		plugin.prototype.show=function(str){
			alert(str);
		};
		plugin.prototype.set=function(name){
			this.name=name;
			alert(this.name);
		}
		rturn plugin;
	})();
	Auto.Plu=plugin;
})(Auto||(Auto={}));
var plugin=new Auto.Plu(xxx);
plugin.show('111');

如：

var RongIMLib;
(function (RongIMLib) {
    var UserDataProvider = (function () {
        function UserDataProvider(options) {
            this.opersistName = 'RongIMLib';
            this.keyManager = 'RongUserDataKeyManager';
            this._host = "";
            this.prefix = "rong_";
            this.oPersist = document.createElement("div");
            this.oPersist.style.display = "none";
            this.oPersist.style.behavior = "url('#default#userData')";
            document.body.appendChild(this.oPersist);
            this.oPersist.load(this.opersistName);
        }
        UserDataProvider.prototype.setItem = function (key, value) {
            key && key.indexOf(this.prefix) == -1 && (key = this.prefix + key);
            this.oPersist.setAttribute(key, value);
            var keyNames = this.getItem(this.keyManager);
            keyNames ? keyNames.indexOf(key) == -1 && (keyNames += ',' + key) : (keyNames = key);
            this.oPersist.setAttribute(this.prefix + this.keyManager, keyNames);
            this.oPersist.save(this.opersistName);
        };
        UserDataProvider.prototype.getItem = function (key) {
            key && key.indexOf(this.prefix) == -1 && (key = this.prefix + key);
            return key ? this.oPersist.getAttribute(key) : key;
        };
        UserDataProvider.prototype.removeItem = function (key) {
            key && key.indexOf(this.prefix) == -1 && (key = this.prefix + key);
            this.oPersist.removeAttribute(key);
            this.oPersist.save(this.opersistName);
            var keyNames = this.getItem(this.keyManager), keyNameArray = keyNames && keyNames.split(',') || [];
            for (var i = 0, len = keyNameArray.length; i < len; i++) {
                if (keyNameArray[i] == key) {
                    keyNameArray.splice(i, 1);
                }
            }
            this.oPersist.setAttribute(this.prefix + this.keyManager, keyNameArray.join(','));
            this.oPersist.save(this.opersistName);
        };
        UserDataProvider.prototype.getItemKey = function (composedStr) {
            var item = null, keyNames = this.getItem(this.keyManager), keyNameArray = keyNames && keyNames.split(',') || [], me = this;
            if (keyNameArray.length) {
                for (var i = 0, len = keyNameArray.length; i < len; i++) {
                    if (keyNameArray[i] && keyNameArray[i].indexOf(composedStr) > -1) {
                        item = keyNameArray[i];
                        break;
                    }
                }
            }
            return item;
        };
        UserDataProvider.prototype.clearItem = function () {
            var keyNames = this.getItem(this.keyManager), keyNameArray = [], me = this;
            keyNames && (keyNameArray = keyNames.split(','));
            if (keyNameArray.length) {
                for (var i = 0, len = keyNameArray.length; i < len; i++) {
                    keyNameArray[i] && me.removeItem(keyNameArray[i]);
                }
                me.removeItem(me.keyManager);
            }
        };
        UserDataProvider.prototype.onOutOfQuota = function () {
            return 10 * 1024 * 1024;
        };
        return UserDataProvider;
    }());
    RongIMLib.UserDataProvider = UserDataProvider;
})(RongIMLib || (RongIMLib = {}));
var provider = new RongIMLib.UserDataProvider(optionsxxx);

2.闭包方式：调用是不用使用new

var Auto=Auto||{};
(function(){
	var plugin=(function(){
		var _options={
			default_word:'ddd'
		};
		function _firstFunc(str){
			alert(str);
		};
		function _secondFunc(str){
			alert(str);
		};
		return {//暴露的一些api
			firstFunc:_firstFunc,
			secondFunc:_secondFunc
		};
	})();
	Auto.Plu=plugin;
})();
Auto.Plu.firstFunc('xx');

变种：

var Auto=Auto||{};
(function(){
	var _options={
		default_word:'ddd'
	};
	function test(){
		alert(11)
	};
	//暴露一些api
	var _plugin={
		firstFunc:function(str=_options.default_word){
			alert(str);
			return this;
		},
		secondFunc:function(){
			alert('second');
			return this;
		}
	}
	Auto.Plu=_plugin;
})();
Auto.Plu.firstFunc('11').secondFunc();

Demo:

http://www.cnblogs.com/cboyce/p/6056562.html