12-angular 思考和分析 视图和分层咋写-1

• 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 事件总线

• 类似于公司的负责通讯的机构
• 订阅式发布模式

image

• 代码写起来也很简单，把它做成一个公共模块，就可以被各种业务方调用了：
• 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
    }
});