JS插件demo
2018-04-21 本文已影响5人
凌风x
这个demo是模仿bootstrap的fileinput模式创造的，源码精神Github:https://github.com/EditFly/JS-DIY-plugin
页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>DIY PLUGIN-TEST</title>
<link href="" media="all" rel="stylesheet" type="text/css">
</head>
<body>
测试
<input id="pt" type="" /><button onclick="$('#pt').pluginTest('clear');">清空</button>
</body>
<script src="jquery-3.2.1.min.js"></script>
<script src="pluginTest.js"></script>
<script>
var pt=$("#pt").pluginTest({
name:"wz",
extraParams:(param)=>{
console.log(param);
return {age:23,love:"zcy",ppip:'223'}
}
}).on('PTclick',function(event,param){
console.log("PTclick>>callback:");
console.log(event);
console.log(param);
});
$("#pt").pluginTest("upload");
$(document).ready(()=>{
console.log("document ready");
});
/*
*/
</script>
</html>
JS
(function(){
console.log("##################PLUGIN-TEST########################");
var PluginTest;
PluginTest=function(event,param){//构造器
var self=this;
self.$event=$(event);
self.init(param);
}
PluginTest.prototype={//方法栈
init:function(param){
console.log("PluginTest init<");
var self=this;
$.each(param,function(key,value){//遍历并设置属性
switch(key){
default: self[key]=value;break;
case "xxx":break;//
}
});
self.selfAction();
},
raise:function(option,param){
var self=this,e;
e=$.Event(option);
self.$event.trigger(e,param);
},
getExtraParams:function(){
console.log("getExtraParams<");
var self=this,data= self.extraParams;
return data({retval:{type:'zzz',id:001},id:'123321'});
},
clear:function(){
var self=this;
console.log(self);
self.$event.val('');
},
upload:function(){
console.log("begin upload<");
var self=this,data;
data=self.getExtraParams();
console.log("before upload plugin get extraParams:");
console.log(data);
},
selfAction:function(){//自身方法 注意作用域
var self=this;
self.$event.click(function(){
console.log("点击了");
self.raise("select",true);
self.raise("PTclick",self.$event.val());
})
}
}
//still useless
PluginTest.default={
extraParams:{}
//...
}
$.fn.pluginTest=function(option){//调度中心
var self=$(this)//jquery化
,data,retvals=[];
var options = typeof option === 'object' && option;//
if(option){
data=self.data('PluginTestObj');
if(!data){
var opt=$.extend(true,{},$.fn.pluginTest.default,options,data);
data=new PluginTest(self,opt);
self.data('PluginTestObj',data);
}else{
if(typeof option==='string'){
retvals.push(data[option].apply(data));//注意作用域,作用域:默认window 参数:
}
}
switch(retvals.length){
default: return retvals;break;
case 0 :return self;break;
case 1 :return retvals[0];break;
}
}
}
$.fn.pluginTest.default={
extraParams:{}
//...
}
$.fn.pluginTest.Constructor = PluginTest;
})();
