在大型的 Angularjs 项目中,如何组织您的代码

分享一下在大型的 Angularjs 项目中组织代码几种常见的方式。随着项目代码量巨增,如何组织 angularjs 项目的代码就变得事关重要了。

常规的 javascript 组织代码方式

1. 继承

2. 通过混入(Mixins)方式来实现组合

3. 使用 javascript 对象来实现组合

在 angularjs 中特有的方式

4. 使用 Service 来实现组合

5. 使用 helper 控制器来实现组合

1. 代码组织方式:继承

定义

可以共享父级的一些基本特性,例如列表的排序和分页

问题

容易形成多层继承,增加了代码的复杂度

无法现实不同分支间的代码共享。

创建 angularjs 模块 myApp 和一个控制器 EmployeeListCtrl

定义 Employee 类,构造函数接受 name 和 dept 两个参数

定义 EmployeeListCtrl 控制器

定义 BaseListCtrl 父控制器

2. 代码组织方式:混入(Mixins)

将一个对象的方法添加(混入)到另一个对象中以使用。

可以使用 angular.extend 来将一个对象的方法复制到另一个对象上

应用场景

如果想要直接将共享方法添加到控制器或作用域上时

如果想要复写控制器中的特定的方法时

问题

在大文件中,代码的可追溯性不好,无法判断代码出处。

耦合度强,一旦方法被覆盖,无法访问到原有方法。

3. 代码组织方式:Javascript 对象

使用 javascript 对象封装函数的方式来实现组合

应用场景

1. 使用于较为简单对象间的代码引用

2.如果需要考虑性能,这种方式性能要优于其他方式

问题

无法发挥 angular 依赖注入的威力

4 代码组织方式:Angular Services 实现组合

应用场景

不包括保存控制器状态的所有有共性的方法(例如 打日志,解析数据)

需要在控制间分享的单例

好处

实现依赖注入,解耦度高,易测试

5 代码组织方式:Helper 控制器实现组合

类似于普通对象方式,不同的是这个对象是由 $controller 实例化的对象,然后依赖注入

应用场景

当需要访问由 angular 所提供的对象。例如 services constants filters

与上面说到 service 不同,我们可以在同一个控制器实例化多个这样的对象,还

可以保持控制器的状态

优点

实现依赖注入,解耦度,对 service 是一种补偿,可以应用到 service 无法满足的场景

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容