Angular1.x + ES6 开发风格指南 about kuitos.github.io HOT 21 OPEN

关于DI的问题，我文中这样描述的

1. 随着系统代码量的增长，出现服务重名的几率会越来越大。
2. 查找一个服务的定义代码比较困难，尤其是一个多人开发的集成系统(当然你也可以把原因归咎于 编辑器/IDE 不够强大)。

假设这样一段代码

DI(使用自制的Inject decorator)：

@Inject('ServiceA', 'ServiceB')
class Controller{
    getName(){
        return this._ServiceA + this._ServiceB;
    }
}

module import

import ServiceA from './ServiceA';
import ServiceB from './ServiceB';

class Controller{
    getName(){
        return this._ServiceA + this._ServiceB;
    }
}

哪种维护起来成本更高显而易见吧，DI的方式你几乎不可能知道ServiceA跟ServiceB在哪里定义的。

你说到的迁移，我一开始确实也是从这一点出发的，给他设计了一个可能迁移上层框架的‘伪需求’。但是后来**有所转变，就是不论框架是否可能迁移，M／VM层做成框架无关都是架构上确实存在的需求。

古者有云，衡量一个完美的MV*架构的标准就是，在V随意变化的情况下，你的M＊是可以不改一行代码的情况下就完成迁移的。

各层解耦独立是核心诉求，便于架构迁移只是这件事带来的‘副作用’。
成本的话主要还是在要理解MVVM架构的思路以及需要造一些用于抹平ng特性的基础上层组件(如Inject decorator)，但这些都是一次性的。相反的它带来的收益却都是持续的。

另外，这年头还不用ES6写代码，就真的太土了啊！😂

from kuitos.github.io.

@xiaoyu2er 团队切换代价这个事情没有那么大，总的来说，就是把es5的controller, service之类换成了es6的class形势，其他地方都是一些配置性的变更

from kuitos.github.io.

import includingTpl from './include.html';

class Controller {
    includingTpl = includingTpl
}

<ng-include src="$ctrl.includingTpl"></ng-include>

@seven4x 是这个意思么？

from kuitos.github.io.

非常棒的思路呢，我们在使用中只是使用了部分ES6的功能来简化代码，连import之类的都没用上。

另外，我们当前也处在比较纠结的一个阶段，暂定目标是先搞一个基于ng2的东西出来，之前做的东西再慢慢迁移。

请问，你们针对angular2怎么看，有打算升级么？

from kuitos.github.io.

@hstarorg 我们暂时是没打算升级的，主要考虑的还是一个成本问题，毕竟ng2的新的语法跟typescript不是每个人都能快速掌握的。
原本的初衷确实是为了后面可能的框架迁移方便，但是现在我觉得，把业务模型从框架中抽离出来是任何一种模式下都应该首先考虑的，我们需要确保架构的层次清晰，只是它顺便让上层迁移变的容易了而已。

ng2带来的一些东西还是很值得研究的，比如rx跟zone，不过对于我们公司这样一个团队(angular上普遍比较熟)直接切ng2成本还是有点高，相反我可能更倾向于vue2。

from kuitos.github.io.

@kuitos 我们也需要升级成本（学习成本，修改成本）的问题，但是又没啥好的办法。现在连使用ng1都还是老旧的语法，这个团队多了也很难处理。

我仅仅了解vue1，比较有特色的双向绑定，暂时对vue2不了解。看样子得抽时间看看了。

抛开基础框架不说，ng2比ng1简单，但是搭框架反而更复杂了。

from kuitos.github.io.

很赞!

个人也是觉得民工叔在定义 directive 的时候采用 class 的方式不如博主所用的对象字面量的方式来的直观

请教一个问题 @kuitos , 虽然我也同意博主所说的尽可能把 model 做的框架无关, 利于迁移.

但是如果很长一段时间框架基本不会迁移, 是不是还是直接采用 DI 的形式好一些.

毕竟博主所呈现出来的代码书写风格已经很不像 angular 了. 不知道这个转变对于团队来说成本有多大?

from kuitos.github.io.

好的! 让我先消化消化..... 过段时间我再来向您请教!

from kuitos.github.io.

兄弟劝你一句,别升级瞎整了.angular2 和 an1是断层发展的, angular1 谷歌是不是维护都难说. 你还整合 es6 . 给自己找事. 想用 es6 试着切到 react 或者 vue. react 最佳.

from kuitos.github.io.

@hcforbaidu 不是每个项目都可以从零开始的 国内外用 ng1 的公司还是很多的
用 ES6 webpack 等只不过是希望提高开发和维护效率

from kuitos.github.io.

@xufei !! 恩 自己还在摸索一套规范 好让同事可以比较不那么纠结的过渡过来, 大体上是 参考了博主和民工叔的风格. 谢谢!

from kuitos.github.io.

@xiaoyu2er 我的个人看法. 因为之前确实搭建了一套基于 angular1的二次开发方案,用于快速开发. an1确实有他方便的地方. 但是后来遇到太多太多坑. an1的**和做法目前来看值得商榷的地方太多太多. 谷歌也明白这个问题,所以an2和1断层发展. 所以对 ng1的项目而言. 我们的思路是维护可用就好.对 an1的项目空费心思划不来.仅是个人看法.

from kuitos.github.io.

@xiaoyu2er 前阵子看到了一个post：https://github.com/toddmotto/angular-styleguide 基本想法是一样的，不过这个作者写的要细节多了😂 虽然有些地方我不是很同意(DI/Service/Filter等几块)，不过还是推荐你看看

from kuitos.github.io.

@kuitos 好的! 稍微看了一下 看完交流!

from kuitos.github.io.

@kuitos 先问个问题, template 你是放在 bundle 里还是?

from kuitos.github.io.

@xiaoyu2er 组件模板 import 过来变成字符串模板一起打包，业务模板(通常是路由，可以理解成container) import 过来是文件路径，跟 templateUrl 关联。基于 webpack loader

from kuitos.github.io.

在使用压缩配置如下：
mangle: {
except: ['$super', '$', 'exports', 'require', 'angular'],
keep_fnames: true//it works
}
仍旧出现一段错误：
angular.js:13920 Error: [$injector:unpr] Unknown provider: eProvider <- e
http://errors.angularjs.org/1.5.8/$injector/unpr?p0=eProvider%20%3C-%20e
at http://localhost:9797/assets/scripts/angular/angular.js:68:12
at http://localhost:9797/assets/scripts/angular/angular.js:4511:19
at Object.getService [as get] (http://localhost:9797/assets/scripts/angular/angular.js:4664:39)
at http://localhost:9797/assets/scripts/angular/angular.js:4516:45
at getService (http://localhost:9797/assets/scripts/angular/angular.js:4664:39)
at injectionArgs (http://localhost:9797/assets/scripts/angular/angular.js:4688:58)
at Object.instantiate (http://localhost:9797/assets/scripts/angular/angular.js:4730:18)
at $controller (http://localhost:9797/assets/scripts/angular/angular.js:10369:28)
at Object. (http://localhost:9797/assets/scripts/ui-router/angular-ui-router.js:4250:30)
at http://localhost:9797/assets/scripts/angular/angular.js:1247:18

from kuitos.github.io.

大神，ng-include 用ES6 该如何实现呢？

from kuitos.github.io.

@kuitos 可以，可以 这操作 666 不愧是大神
这样会把 $ctrl.includingTpl 当做URL的一部分发个请求 src的值不能是HTML代码 得换个思路了

from kuitos.github.io.

还有一个疑惑请教大神，在使用ui-router的时候，如何不通过$scope访问父节点的数据呢？
现在访问父节点数据是这样写的
$scope.$parent.data

from kuitos.github.io.

不赞同部分**，选择了框架就要用好框架，而不是在框架的基础上再大量的去框架，如DI部分。

赞同部分**，如组件中 index.js 作为框架语法包装器；业务逻辑采用原生ES；数据层、业务模型能脱离 View 独立测试。

from kuitos.github.io.