当前端js代码越来越多越来越复杂时，按逻辑分层就会变得势在必行，否则代码会逐渐变乱，维护成本就会越来越高。之前曾做个一个复杂的模块，大部分逻辑都是在前端实现的，其中有一个两千多行的js文件，ajax数据访问、业务逻辑、html生成全都搅在一起…..每次改动都是一场噩梦…..往事不堪回首呀
扯远了，当对代码分层后，各层之间的互相调用也会是一个问题，本文介绍的方法，仿照cakephp的方式，提供了一种为controller层自动添加component组件的思路
首先，是Controller的抽象类，供所有的Controller继承，它的主要功能是为controller的实现类添加它们所需要的component等组件
controller = {}; controller.AbstractController = function(){ function AbstractController(){ if(this.components.length > 0){ for(var i = 0; i < this.components.length; i++){ var compName = this.components[i]; if(component[compName]){ this[compName] = new component[compName](); } } } } return AbstractController; }(); |
下面视一个controller的一个实现，通过this.components定义自己需要加载的component,然后通过call方式继承AbstractController,让AbstractController完成component的加载。然后在下面的方法中，通过this.xxxComponent的方式调用该component
controller.ListController = function(){ function ListController(){ this.components = ['newsComponent']; controller.AbstractController.call(this); } ListController.prototype = { listNews : function(){ var news = this.newsComponent.getNewsList(); //TODO:... } } return ListController; }(); |
newsComponent
component = {}; component.newsComponent = function(){ function NewsComponent(){ } NewsComponent.prototype = { getNewsList : function(){ alert('call function : newsComponent.getNewsList()'); } } return NewsComponent; }(); |
测试
var listCont = new controller.ListController(); listCont.listNews();//alert |
另外，对于比较大的前端应用，可以构造一个组件池，在实例化一个component后，将其放到组件池内，下次其它controller再要使用这个component时，直接从组件池中拿出来用就行了，可以省去很多资源
关于本站
One comment
完全看不懂的人漂过~