开发者学堂课程【阿里云城市数据大脑开发规范：前端开发规范】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/534/detail/7161
前端开发规范
内容介绍：
一、技术选型
二、规范格式
三、目录结构
四、单元测试
五、开发构建
六、代码管理
七、国际化
八、屏幕适配
一、技术选型
所需环境
（1）Bash(Mac，Linux)，Git-Bash(windows)
（2）Nodejs>8.0.0(node版本管理可用nvm或者n)
（3）技术栈:React Redux(或Mobx)ES2015
（4）打包 Webpack
Nodejs的版本也有一定要求，因为大于8.0的版本相对来说出现的问题会少一点，但是建议也不要使用太新的版本，截至本课录制最新的版本应该是9.6，所以大家避免太老的版本，像3.0或者4.0版本，也尽量避免太新的版本，因为我们还没有在最新版本上进行测试，尽量在环境上保持同步，避免出现一些环境上的异常。
2.脚手架
（1）基于honeycomb
（2）代码位置http://gitlab.alibaba-inc.com/bigdata-node/honeycomb- seed/tree/brain
如何快速的建立起一个项目框架，可以直接去进行业务上的开发而不至于再去做一些从零开始的工作，就需要利用脚手架。
脚手架是基于Honecomb来开发的，Honecomb是前端一套完整的系统，包括基于node层关于API的一些内容，也包含前端brother一套的内容，这些会在目录结构进行讲解。
基于node层就是最外层的内容，基于brother是在Except文件夹下。
Honecomb的相关内容比较多，所以之后会有专门的老师给大家进行相关问题的讲解，现在大家只需要知道Honecomb是一个应用开发的框架就可以了，这个框架包含了node层即前端层已经brother层。如果没有意外的话，基本上90%以上都是brother层的开发，所以重点关注Except文件夹就可以了，对于一些API上的一些拼装，或者进行一些API的代理转发，可以在controller内层完成。
同时之所以使用Honecomb，因为它是一条完整的生态，包括脚手架的建立，前端node层的开发，以及整个的打包部署，Honecomb都有完整的体系，所以我们要基于Honecomb进行开发。
(3)安装并配置honeycomb
l 安装
tnpm install honeycomb-cli -g
l 配置
honeycomb
honeycomb config registry http://registry.npm.alibaba-inc.com
(4)初始化项目
honeycomb init -t brain -s @ali
Version<0.2.12 升级指南
我们有两个脚手架，一个是honeycomb这套体系有一个自己的脚手架，它的作用是让大家熟悉honeycomb，因此建议大家不要使用那个脚手架；另一个基于城市大脑的一个脚手架-t-brain，这是关于城市大脑智能应用开发的一个框架，基本上包含了一个地图，一个公共的投入，一个左侧列表以及右侧的详细信息，大家在这个基础上开发可能会更贴近我们的业务。
脚手架最开始引用了很多阿里的这个私库，我们现在需要去除对私库的依赖，只有完全去除对于私库的依赖，我们才能把它开源放在github上，目前如果在外网运行不起来，还是需要VPN来进入到阿里的内网。
二、规范格式
编码规范主要是为了方便大家，包括团队内或者团队之间沟通的时候有一个公共的编码规范，最好的效果是达到不同人写出来的代码，看起来是由一个人编写的。
1、前端模块化
(1) 关于模块化简要说一下基于2015的Module管理模块，不要使用commonjs/cmd/amd的模块管理。
(2) CSS模块化
CSS模块虽然理论上不强烈要求，但还是建议大家都加上这个模块，因为很难避免我们开发团队的人数以及分工的颗粒度，有可能很多人都在做组件的开发，如果不做CSS模块的话，可能会存在冲突性，所以建议在VPN上加上CSS模块，保证大家不会发生冲突。
l 为了保证各模块间的CSS命名冲突，使用cssmodules的方式进行开发。配置上Webpack设置为"css-1oader?modules-1'
l 样式上采用className=[styles.your_class_name}引用关联。
l 如特殊原因不能采用cssmodule方式，采用BEM方式进行CSS管理。
2、命名规范
（1）命名大写驼峰，变量名小写驼峰
（2）编写有意义的变量名，不能起无意义或有其他含义的名字。
3、编码规范
（1）所有 React 组件必须使用propTypes约束传入属性值
因为我们的组件要求必须写propTypes，约束组件的输入，虽然不写也可以工作，但是有可能会有潜在的问题发生，所以建议大家在所有组件上都强制加上propTypes。
（2）若使用Mobx，根据需要只传入依赖的局部Store，不能在根元素传入全局Store
（3）React 路由统一使用browserHistory,不建议使用hashHistory
（4）字体串处理统一使用TemplateString
（5）除特殊情况使用Promise外，统一使用AsvncAwait来处理异步调用
（6）组件样式写在样式文件中，无特殊情况不能使用内联样式
（7）建议使用classnames来处理样式组合逻辑
（8）按需加载，不管是前端模块加载，还是后端API数据加载
（9）组件函数this绑定，统一使用箭头函数处理，不推荐在constructor 中手动bind.
（10）代码如有两次以上重复。请考虑提出公共因数。
4、风格检查
https://github.com/standard/standard
三、目录结构
Makefile
README.md -
abc.json
app.js
Assets(前端源文件)
App.jsx
build -build.js
Components(公共组件)
favicon.ico
Fonts(自定义字体)
index.jsx
Lang(国际化)
package.json
Pages(页面级私有组件)
Public(静态文件目录)
Router(前端路由)
Store(状态管理)
Styles
utils
webpack.config.js
auto_router.js
bin
exec.sh
Common
log.js
contig
configdefault.js
config_production.js
index.js
controller
testctrl.js
Middleware
spa js
out
event-perceiving_10.26_1
event-perceiving1.0.26_1.tgz
Packagejson
router.js
runtime_configjson
test
env.js
testctrl.test.js
view
index.html
welcome.html
目录结构和上面所讲的基于Honecomb，脚手架之后就会有一个类似于这样的脚手架，包括最外层的Makefile，这是应用最多的，里面有很多的命令。
另外还有一些常用的配置，比如controller指的就是node层的一些请求，像API的转发等功能。
view相当于一个模板。大家工作最多的是在brother这一层，放置在了assets中，最常用的包括Components(公共组件)、Pages(页面级私有组件)、Public(静态文件目录)、Router(前端路由)、Store(状态管理)等等，还有一个fonts自定义字体，因为有点时候我们的设计师
会设计比较好看的字体，需要利用该功能。
四、单元测试
1、功能测试
https://github.com/avajs/ava
2、UI单测
https://github.com/airbnblenzyme
五、开发构建
开发过程中，在命令行运行以下命令，就可以完成各类构建工作。
（1）make install-安装依赖
（2）honeycombstart-项目启动
（3）honeycombpackage-项目打包
（4）honeycombpublish-项目发布到日常环境
六、代码管理
1、分支管理
统一采用git-flow工作流
（1）feature-xxx-171212-日常特性开发
（2）bugfIx-xxx-171201-日常bug修复
（3）develop-公共分支，定期mergefeature,bugfix分支
（4）master-稳定已发布版本.
（5）release-最新版本待发布
2.git-flow工作流
https://www.atlassian.com/git/workflows
3.提交信息规范
（1）feat:新功能(feature) fix:修补bug
（2）docs:文档(documentation)
（3）style:格式(不影响代码运行的变动)
（4）refactor:重构(即不是新增功能，也不是修改bug的代码变动)
（5）test:增加测试
（6）chore:构建过程或辅助工具的变动
七、国际化
使用React-intl来处理需要国际化的内容，不允许直接在编码中硬编码方案。使用美杜莎统一纹理国际化编辑，导出数据文件的方式配合react-intl来实现国际化。
1.使用到的组件react-intl，为了兼容Safari各个版本，需要同时安装intl
react-intl:https://github.com/vahoo/react-intl
react-intl应用方法参考:https://segmentfault.com/a/1190000005824920
2.需要更改的文件的位置:
（1）assest/lang/index.js
（2）middleware/spajs(针对html文件的title)
3.当前语言设置:currentLang
（1）默认读取cookiecookie里面有字段“etlang"表示语言(zh-cn，en-us)
（2）没有cookie时，取浏览器语言第一个
（3）navigator.languages II navigator.language//兼容safari浏览器
4.语言兼容性
（1）对于取到的语言做判断，null，undefined...默认设置语言为中文。
（2）有确定语言时：
a.会在语言包(messages=i18n)精确查找配置到的语言文案
b.没有找到时，会兼容查找(例如en，zh,兼容找到en-us，zh-cn) c.兼容也找不到时，会默认中文。
5、组件在项目中的应用
（1）用<IntlProvider>标签包裹项目根DOM，配置locale,messages
<intiProviderlocale={currentLang}messages={messages[currentLang]}>
<App />
</IntlProvider>
(2)直接提取文案:
a.字符串格式化，配置id，defaultMessage，id 不可重复
b.数字分割
c.日期时间
d.各种标签
八、屏幕适配
项目应考虑在多种设备下的显示效果，除非只在PC中显示，否则不允许采用静态布局。多考虑流式、弹性、响应式布局。
