- https://github.com/xufei/blog/issues/18
- 看上这个就够了！！
Angular 1.x 视图和分层
- 视图 view
- 模型 model
- 视图模型 viewModel
1、根作用域
- 如果想要在代码中显式使用根作用域，可以注入$rootScope。
2、作用域的继承关系
- 这个东西需要详细考虑
- 放在这篇文章探讨
- https://github.com/xufei/blog/issues/18
Angular 1.x 分层
1、controller： 初始化 scope 对象，在 scope 上添加方法
- controller 只是纯粹的把 service、依赖关系和其他对象连接起来
- 业务逻辑应该放在 service 而不是控制器
- 不应该操作 DOM ，这个事情应该是 service 去做
2、service： 所有与视图逻辑（交互逻辑）无关的部分都应该写到 service 中
- 请求支援与数据缓存的东西放进 service
- 集中管理所有数据，然后通过某种方式来请求和修改它
- 需要仔细考虑和使用，储存数据
3、directive： 全部使用 directive，也就是组件化开发（component），不是只有公用组件需要 directive
- 需要用到 controller 的地方都封装成自己的 directive
- DOM 操作都写在指令中写
- 数据需要格式化的写在 filter 中
@@ 遵循单一职责原则 （SRP）
- 服务和指令等应该拥有尽可能的少的依赖关系
- 控制器只是视图和模型的协调组
- 逻辑就应该尽量少，有利于更好的测试
? 思考下 angular 层次
- 远程请求，数据缓存等等一律放进service
- 不得以而产生的DOM操作，一律放进directive（在Angular应用里，需要你手动去操作DOM的场景其实很少了）
- 数据的格式化，一律做成filter
- 剩下的东西才是controller应该做的事情，在这里，又有一些事情要考虑：
- 视图是需要分块、分层的，如果你控制能力不足，最好把controller和视图块按照一对一的关系维护，每块单独都能跑，然后拼起来
- 嵌套的视图，作用域的关系需要好好考虑，这部分的相关机制可以参考我写的这篇：AngularJS实例教程（二）——作用域与事件 · Issue #18 · xufei/blog · GitHub
- 有一些东西并不应当在视图分块（姑且称为组件）的树状结构里，而是独立在外，跟这部分东西的交互，应当视情况使用service来通信，不要尝试在$scope体系上过多纠缠。
作者：徐飞 链接：https://www.zhihu.com/question/36315832/answer/66927460 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
? 思考下 angular 数据和监控
- 大量的 DOM 的操作，在 JavaScript 中是避免不了的，angular JS 的发明就是为了摆脱繁琐的 DOM 操作。
- 父级和子级关系
- $parent
? angular 事件总线
- 类似于公司的负责通讯的机构
- 订阅式发布模式
- 代码写起来也很简单，把它做成一个公共模块，就可以被各种业务方调用了：
- 1、形成事件
app.factory("EventBus", function() {
var eventMap = {};
var EventBus = {
on : function(eventType, handler) {
//multiple event listener
if (!eventMap[eventType]) {
eventMap[eventType] = [];
}
eventMap[eventType].push(handler);
},
off : function(eventType, handler) {
for (var i = 0; i < eventMap[eventType].length; i ) {
if (eventMap[eventType][i] === handler) {
eventMap[eventType].splice(i, 1);
break;
}
}
},
fire : function(event) {
var eventType = event.type;
if (eventMap && eventMap[eventType]) {
for (var i = 0; i < eventMap[eventType].length; i ) {
eventMap[eventType][i](event);
}
}
}
};
return EventBus;
});
复制代码- 2、事件订阅
EventBus.on("someEvent", function(event) {
// 这里处理事件
var c = event.data.a event.data.b;
});
- 3、事件发布
EventBus.fire({
type: "someEvent",
data: {
aaa: 1,
bbb: 2
}
});
