HTML5技术

【组件化开发】前端进阶篇之如何编写可维护可升级的代码 - 叶小钗(10)

字号+ 作者:H5之家 来源:H5之家 2015-10-16 10:32 我要评论( )

1 define([], function () { 一些原则: 4 init方法时,不可引起其它字段update Entity = _.inherit({ 7 initialize: function (opts) { 8 this .propertys(); 9 this .setOption(opts); 10 }, 11 12 propertys: fu

1 define([], function () { 一些原则: 4 init方法时,不可引起其它字段update Entity = _.inherit({ 7 initialize: function (opts) { 8 this.propertys(); 9 this.setOption(opts); 10 }, 11 12 propertys: function () { .data = {}; .controllers = {}; .scope = null; 21 22 }, 23 24 subscribe: function (namespace, callback, scope) { 25 if (typeof namespace === 'function') { 26 scope = callback; 27 callback = namespace; 28 namespace = 'update'; 29 } 30 if (!namespace || !callback) return; 31 if (scope) callback = $.proxy(callback, scope); 32 if (!this.controllers[namespace]) this.controllers[namespace] = []; 33 this.controllers[namespace].push(callback); 34 }, 35 36 unsubscribe: function (namespace) { 37 if (!namespace) this.controllers = {}; 38 if (this.controllers[namespace]) this.controllers[namespace] = []; 39 }, 40 41 publish: function (namespace, data) { 42 if (!namespace) return; 43 if (!this.controllers[namespace]) return; 44 var arr = this.controllers[namespace]; 45 var i, len = arr.length; 46 for (i = 0; i < len; i++) { 47 arr[i](data); 48 } 49 }, 50 51 setOption: function (opts) { 52 for (var k in opts) { 53 this[k] = opts[k]; 54 } 55 }, handleData: function () { }, initData: function (data) { 63 var k; 64 if (!data) return; (k in this.data) { 68 if (data[k]) this.data[k] = data[k]; 69 } .handleData(); 72 this.publish('init', this.get()); 73 }, validateData: function () { ; 79 }, formatData: function (data) { 84 return data; 85 }, get: function () { 89 if (!this.validateData()) { {}; 92 } .formatData(this.data); 94 }, update: function (key) { 99 key = key || 'update'; 100 var data = this.get(); 101 this.publish(key, data); 102 } 103 104 }); Entity; 107 });

abstract.entity

这里的数据实体会以实例的方式注入给模块类实例,他的工作是起一个中枢左右,完成模块之间的通信,反正非常重要就是了

其它

数据请求统一使用abstract.model,数据前端缓存使用abstract.store,这里因为目标是做页面拆分,请求模块不是关键,各位可以把这段代码看层一个简单的ajax即可:

1 this.model.setParam({}); 2 this.model.execute(function (data) { 3 });

业务入口

最后简单说下业务入口文件:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Omi树组件omi-tree编写指南 - 【当耐特】

    Omi树组件omi-tree编写指南 - 【当耐特】

    2017-05-02 15:04

  • 前端工具的安装 - 韩子卢

    前端工具的安装 - 韩子卢

    2017-05-02 08:00

  • 【Vue 入门】使用 Vue2 开发一个展示项目列表的应用 - zhangjk

    【Vue 入门】使用 Vue2 开发一个展示项目列表的应用 - zhangjk

    2017-04-30 16:00

  • 在Delphi下使用迅雷APlayer组件进行免注册开发 - Delphi力量

    在Delphi下使用迅雷APlayer组件进行免注册开发 - Delphi力量

    2017-04-28 15:00

网友点评
<