作为一位前端菜鸟，近来看react例子，依据明白本身也简朴完成了一下组件的继续和事宜机制。
代码在这里
原始的组件写法
(function($) {
$.pluginName = function(element, options) {
var defaults = {
title: '',
content: '',
showOKBtn: 1, // 显现肯定按钮
showCCBtn: 1, // 显现作废按钮
onFoo: function() {} // callback
}
var plugin = this;
plugin.settings = {}
var $element = $(element);
plugin.init = function(options) {
this.settings = $.extend({}, defaults, options);
this.initNode(options);
}
// public method.
plugin.show = function() {
// ...
}
plugin.hide = function() {
// ...
}
plugin.initNode = function(options) {
var $okBtn = $element.find(''),
$content = $element.find('');
// ....
// 部份逻辑
$content.text(plugin.settings.content);
$okBtn.on('click', $.proxy(this.onOk, this));
}
plugin.onOk = function(){
this.hide();
plugin.settings.onFoo();
}
plugin.init();
}
$.fn.pluginName = function(options) {
return this.each(function() {
if (undefined == $(this).data('pluginName')) {
var plugin = new $.pluginName(this, options);
$(this).data('pluginName', plugin);
}
});
}
})(jQuery);
// 运用
var template = '<div>...弹框html...</div>';
$(template).pluginName({
content: '肯定删除该地点'
}).show();
平常我们写得入门级jquery组件，基本就是如许一个模板。
这里我们完成了一个基本的弹窗组件，也完成了需求方的请求，oh ye！
某天需求mm说我们要加一个confirm信息的弹框，只需一个肯定按钮！！还好还好。组件中本来就加了options.showCCBtn的设置，实例化的时刻传一个参数就可以了。分分钟处置惩罚了mm的题目，还获得mm的赞同，想一想都有点小冲动呢。
处置惩罚一套作风类似的组件的时刻，经由过程通报差别的参数来掌握差别的ui显现和逻辑代码实行，确切可以处置惩罚题目，跟着功用的一步步增添，这个组件就变得愈来愈痴肥，代码耦合成度变高，到末了本身都搞不清楚每一个参数差别值代表的意义。何况在团队中都是多个人保护同一个组件，这简直就是一场悲剧。今后mm的立场也变得不好，你还坑害了保护组件的好基友。
继续
这时候刻面向对象的头脑就进场了
我们发明设置titile， 封闭窗体是人人共有的功用。这里可以笼统成一个基本组件，新的组件继续这个组件即可。
(function() {
var BaseWindon = Kclass.extend({
init: function(options){
//大众功用
$titleElm.text(options.title);
$closeElm.on('click', $.proxy(this.close, this));
},
// 烧毁
destroy: function(){
}
close: function(){
}
};
return BaseWindon;
})()
在子类中 require('BaseWindon');
(function() {
var AddAddressWindon = BaseWindon.extend({
init: function(options){
// 挪用parent的init
this.supr();
},
validate: function(){
},
// 组件本身的功用
submit: function(){
}
};
return AddAddressWindon;
})()
javascript oo的完成有很多种，我用了ded/klass，supr的完成比较奇妙。重要道理为：猎取要领的代码字符串，经由过程正则检测字符串中是不是包括 supr，若包括， 则改写该要领，在改写的要领中动态的转变this.supr，使其指向父类同名要领，以完成挪用父类要领的目标。详细的道理可看参考野生小技能–继续中的super()完成。
这时候需求mm又来了，需求mm说当用户点击肯定以后要加一个其他功用，实在第一个例子中，我们也可以完成如许的功用。我们可以通报一个callback onFoo。
我们须要引入一种越发文雅的体式格局，参考node的事宜机制。人人晓得，Node.js可以在浩瀚的后端JavaScript手艺当中脱颖而出，恰是因其基于事宜的特性而遭到迎接。
事宜机制
事宜机制对应着一种设想形式-观察者形式。
(function() {
var win = new BaseWindow();
win.on('ok', function(){
console.log('on ok!');
});
win.emit('ok');
// log --- on ok!
})()
完成在这里
明显事宜驱动的体式格局越发文雅，相比之下第一种手动触发callback的体式格局显得有点out。事宜机制的体式格局，在监听on和触发emit的时机上也显得越发天真，关于只须要触发一次的callback，你只须要用once函数来监听。写代码彷佛倏忽变得好爽好惬意。
末了记得供应一个烧毁组件的要领，一个简朴的组件就完成了。
完全的代码在这里
固然要更好的组件还须要供应
模板机制
双向绑定
