JS 组件化开发 系列(一)
JS 组件化开发 系列
作为前端开发,组件化开发是你成长的必经之路。时间的积累逐渐摸索出自己比较好的开发方式。 --- zenking
(1)实现最简单的组件化;
var jdb ={
alert: function(str) {
alert(str);
},
console:function (str) {
console.log(str)
}
}
这样就是简单的实现 jdb.alert、jdb.console 两个方法。
但是呢?
现在需求改了, 需要实现链式调用. 就是像jquery 一样使用。
这也是很好理解的。怎么实现链式调用呢 。就像调用 alert 或者console 这两个方法是jdb的属性和方法。
要想调用, 需要 jdb.alert 。函数一旦执行完了就销毁了什么也没有了。要想在接着调用console 需要一个jdb对象。
怎么产生呢?
很简单!return this; look !
var jdb ={
alert: function(str) {
alert(str);
return this;
},
console:function (str) {
console.log(str)
}
};
这样就实现了jdb.alert('先alert').console('后console');
是不是很easy!
接着问题又有了?
如果要是现'先console'--'后alert'呢?
也很简单,还是老方法 return this;
至于this 的用法自己补,这里不做赘述。或者有需要专门讲一下this。
#var jdb ={
alert: function(str) {
alert(str);
return this;
},
console:function (str) {
console.log(str);
return this;
}
};
这样就实现了简单的组件化开发,并实现了链式调用。
组件就这么简单愉快的实现了。接下来是更高级的写法。。。。。敬请期待!