【普益标准】 it 部前端新员工必备知识技能

工作文档

以下相关技术，需要在入职半个月内，基本掌握必备的内容，并考核合格。在时间允许的情况下对比学习扩展的内容：

css 预处理

【必备】 sass

【资料】 中文教程

js 模块化方案

【必备】 AMD 规范

【资料】 阮老师博客一， 二， 三， avalon 和 requirejs 的混用， 中文文档

【扩展】 其它模块规范: CommonJs, ES6

自动化构建工具

【必备】 gulp 及配套插件

【资料】 中文文档， 插件列表，常用插件介绍

【扩展】 模块打包工具: r.js, browserify, webpack 。

前端框架

【必备】 avalon1.46

【资料】 1.x官方文档，司徒正美的博客，慕课网的视频教程一，二

【扩展】 我们的另一套技术栈: react, ant design

编码规范

【必备】 html 和 css编码规范，javascript 编码规范(ES5)

编码规范，可导入我们 webstorm 的 setting.jar 文件，对 Code Style 进行学习

html 和 css 编码补充说明：

• html 中 class 属性顺序：通用类，具体类，状态类，类名应该和语义层次有关，而不是和样式有关。比如 <a class="link news-link news-link-visited"></a>。通用类，具体类都应该是0-1个，状态类给 javascript 使用的，而不是 <a class="link block width100 fr cls"></a>。使用 sass 的 mixin 和 extend 来进行样式复用。避免 html 臃肿导致的结构语义不清晰，同时可以做到只更换 css 文件就可以颠覆整个样式设计。
• 使用 sass 预处理时，尽量做到不嵌套，或者只有 1 层嵌套。
• 无论一条属性还是多条属性，都不把属性和选择器放在一行
• border 和 border-radius 放在 margin 和 padding 之间

javascript 规范补充说明：

• 使用制表符作为缩进。
• 可以保存 this 的引用： var that = this。
• 单个函数尽量简短：只做一件输入输出明确的事情最好。方便梳理函数调用逻辑，以及找到发生错误的函数。
• 文件模块化，且每个模块尽可能简单，明确。比如一个暴露出去的功能，或者一个配置对象。每个小板块由多个模块拼凑而成。
• 公共方法库，组件库，用 jsDoc 进行注释。
• 函数用声明而不是 var a = function a() {} 的形式