(function (global, factory) {
if (typeof module === "object" && typeof module.exports === "object") {
module.exports = factory();
} else if (typeof define === "function" && define.amd) {
define("MyAutoComponent", [], function () {
return factory();
});
} else {
if (!global.$$) {
global.MyAutoComponent = global.$$ = factory();
} else {
global.MyAutoComponent = factory();
}
}
})( this, function() {
function MyAutoComponent() {
return MyAutoComponent.fn.init;
};
MyAutoComponent.fn = MyAutoComponent.prototype = {
el: document.querySelector('body'),
init: function() {
var args = arguments;
if (args.length === 0) {
return MyAutoComponent.fn;
}
else if (typeof args[0] === 'string' && args.length === 1 ) {
var elements = document.querySelectorAll(args[0]);
var i =0;
l = elements.length;
for (; i<l; i++) {
this.el = elements[i];
return MyAutoComponent.fn;
}
} else if ( typeof args[1] === "boolean" && args.length === 2 ) {
var elements = document.querySelectorAll(args[0]);
var i = 0;
l = elements.length;
for (; i < l; i++) {
this.el = elements[i];
if (args[1]) {
return this.el;
} else {
return MyAutoComponent.fn;
}
}
} else {
return MyAutoComponent.fn;
}
},
rename: function(name){
if(window) {
window[name] = new MyAutoComponent;
}
},
on: function(){
var args = arguments;
if (!args.length) {
return MyAutoComponent.fn;;
}
var name = args[0];
var callback = function () { };
var childrenName = '';
var isBuhuo = 'false';
if (args[1] && typeof args[1] === "function") {
callback = args[1] ;
}
if (args[1] && typeof args[1] === 'string') {
childrenName = args[1];
}
if (args[2] && args[2] === "function") {
callback = args[2];
}
if (childrenName) {
this.el.addEventListener(name, function(e){
var target = e.target;
callback.call( target, e );
}, isBuhuo);
} else {
this.el.addEventListener(name, function(e){
callback.call(this.el, e);
}, isBuhuo);
}
},
render: function(list) {
var list = list || [];
var i = 0;
var l = list.length;
var html = '';
for (; i < l; i++) {
html += '<li>'+ list[i] +'</li>';
}
return html;
},
Component: function(options) {
var list = options.list; ///////////////渲染的数据;
var allList = options.allList; /// 总数据;
var el = options.el; /// 插入的地方;
var value = options.value || ''; /// 更改是的数据;
list = this.searchData(allList, value); //返回匹配的数据;
var html = this.render( list ); // 渲染, 返回虚拟dom;
var dom = document.querySelector(el); // 获取插入的dom;
dom.innerHTML = html; // 插入;
return list;
},
// 找到模糊匹配的数据;
searchData: function(data, srarchdata) {
var i=0;
var l = data.length;
var arr = [];
if (!srarchdata) {
return data;
}
for (i; i<l; i++) {
var patten = new RegExp(srarchdata, 'i');
var isTrue = data[i].toString().search(patten);
if (isTrue !== -1) {
arr.push(data[i]);
}
}
return arr;
}
}
return new MyAutoComponent();
} )
仿jq写插件
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 找到fullcalendar.js, 找到代码为 isRTL:false,这句话 输入以下几句 monthName...
- 源站:http://fengyuanchen.github.io/viewer/ 应用: html: 源码上是正常...