鸿 网 互 联 www.68idc.cn

JS 组件化开发 系列(一)

来源:互联网 作者:佚名 时间:2017-09-09 08:42
JS 组件化开发 系列 作为前端开发,组件化开发是你成长的必经之路。时间的积累逐渐摸索出自己比较好的开发方式。 --- zenking (1)实现最简单的组件化; var jdb ={alert: function(str) { alert(str);},console:function (str) { console.log(str)}} 这样就

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;
  }
  };
这样就实现了简单的组件化开发,并实现了链式调用。

组件就这么简单愉快的实现了。接下来是更高级的写法。。。。。敬请期待!

网友评论
<