Authored by biao

Merge branch 'develop' into feature/outlet

  1 +# css代码规范
  2 +
  3 +## 选择器
  4 +* 使用class进行样式匹配,而不是id和标签
  5 +* 尽量避免使用属性选择器
  6 +* 尽可能精确的元素定位
  7 +
  8 +## 规则细节
  9 +
  10 + .ele-header, /*规则1:每个选择器声明总是使用新的一行*/
  11 + .ele-body,
  12 + .ele-footer { /*规则2:'{' 前需要添加1个空格*/
  13 + line-height: 1.2; /*规则3:样式声明以;结束,每个样式声明独占一行*/
  14 + font-weight: normal; /*规则4:属性声明的:后添加1个空格*/
  15 + margin: 0; /*规则5:属性值为0时不添加单位*/
  16 + background-color: #f3d; /*规则6:十六进制小写和缩写*/
  17 + }
  18 + /*规则7:没组选择器声明之间适用一空行间隔*/
  19 + .ele2 {
  20 + font-family: "open sans", arial, sans-serif; /*规则8:使用" ",而不是' '*/
  21 + padding: 0 1em 2em; /*规则9:适当缩写但不滥用*/
  22 + border-top: 1px;
  23 + background-color: rgba(0,0,0,.5); /*规则10:颜色值rgba等中不需要增加空格,并且去除浮点数前面不必要的0*/
  24 + }
  25 +
  26 +## 声明顺序(不做强制要求,尽量实现)
  27 +这是一个选择器内书写CSS属性顺序的大致轮廓,作为最佳实践,我们应该遵循以下顺序:
  28 +
  29 +* Position属性 (position,top,right,z-index...)
  30 +* Box Model属性 (display,float,width...)
  31 +* Typographic属性 (font,line-height,color,text-align...)
  32 +* Visual属性 (background,border,border-radius...)
  33 +
  34 +因为Position属性可以是一个元素脱离正常的文本流并可以覆盖盒模型相关样式,所以Position排第一位。盒模型决定一个元素位置和大小紧跟其后。后面属性属于元素内部或不会对前两者产生影响的,排在后面。
  35 +
  36 +完整属性顺序参考[Recsss](http://twitter.github.com/recess)
  37 +
  38 +## Sass风格
  39 +* 控制嵌套层级,禁止超过5层,尽量控制在3层以内
  1 +# JavaScript代码规范
  2 +
  3 +## 行的长度
  4 +每行长度不应该超过**120**个字符,如果一行多余120个字符,应该在一个运算符后换行,下一行增加**2**级缩进,即8个空格)
  5 +```
  6 +doSomething(argument1, argument2, argument3, argument4,
  7 + argument5);
  8 +```
  9 +## 运算符间距
  10 +二元运算符前后必须使用一个空格保持表达式的整洁,操作符包括赋值运算符和逻辑运算符
  11 +```
  12 +var name = 'xuqi'; // GOOD
  13 +var name='xuqi'; // BAD
  14 +```
  15 +## 括号间距
  16 +当使用括号时,紧接左括号之后和紧接右括号之前不应该有空格。
  17 +```
  18 +doSomething(arg); // GODD
  19 +doSomething( arg ); // BAD
  20 +```
  21 +## 变量声明
  22 +* 所有变量在使用前应该先定义
  23 +* 变量定义应该放在函数开头
  24 +* 使用var,const,let表达式定义变量,每行定义一个
  25 +* 除了首行,所有行都应该多一层缩进使变量声明对齐
  26 +* 初始化的变量放在未初始化的变量之前
  27 +* 所有的变量命名必须使用英文单词
  28 +* 浮点变量必须指明实部(即便以0.开头)和小数点后一位
  29 +
  30 +```
  31 +var name = 'xuqi',
  32 + age,
  33 + sex,
  34 + ...;
  35 +
  36 +const $ = require('yoho.jquery');
  37 +
  38 +let i;
  39 +```
  40 +
  41 +另外,晦涩的变量名最好给出注释,否则别人很难读懂接下来代码的意思。
  42 +
  43 +## 函数声明
  44 +* 函数在使用前应该先定义
  45 +* 函数名和开始圆括号之间无空格(包括匿名函数的function关键字与圆括号之间)
  46 +* 开始圆括号和结束圆括号之间无空格
  47 +* 参数名之间应该在逗号之后保留一个空格
  48 +* 开始花括号应该同function关键字保持同一行,结束圆括号和开始花括号之间应该保留一个空格
  49 +* 函数体保持一级缩进
  50 +
  51 +```
  52 +function doSomething(arg1, arg2) {
  53 + doThing1();
  54 + doThing2();
  55 +}
  56 +
  57 +const method = function() {
  58 + doSomething();
  59 +};
  60 +```
  61 +另外,IIFE的标准格式也在这里指出:
  62 +```
  63 +(function(args) {
  64 + //
  65 +}(args)); //(args)位于外层括号内
  66 +```
  67 +
  68 +## 对象直接量
  69 +* 起始左括号应该与表达式保持一行
  70 +* 每个属性的键名前保持一个缩进,第一个属性应该在左括号后另一起行
  71 +* 每个属性的键名不包含引号,其后跟一个冒号(前无空格,后有空格),然后是值
  72 +* 如果属性值为函数,函数体应该在属性名之下另起一行,并且其前后均应保留一个空行
  73 +* 一组相关属性的前后插入空行以提高代码的可读性
  74 +* 结束的右括号独占一行
  75 +
  76 +```
  77 +var person = {
  78 + name: 'xuqi',
  79 + age: 25,
  80 +
  81 + groupAttr1: xx1,
  82 + groupAttr2: xx2,
  83 +
  84 + walk: function() {
  85 + //your walk fn
  86 + }
  87 +};
  88 +```
  89 +
  90 +* 当对象字面量作为函数参数时,起始括号应该与函数名同行
  91 +
  92 +```
  93 +doSomething({
  94 + //do something
  95 +});
  96 +```
  97 +
  98 +## 命名
  99 +### 变量:
  100 +* 采用小驼峰命名格式
  101 +* 变量命名为名词(区别函数)
  102 +* 变量中不使用_
  103 +
  104 +### 函数:
  105 +* 采用小驼峰命名格式
  106 +* 函数命名为动词(区别变量)
  107 +* 函数名中不使用_
  108 +
  109 +### 构造函数:
  110 +* 采用大驼峰命名格式
  111 +* 命名应该是名词
  112 +
  113 +### 私有成员:
  114 +* 一个对象中不希望外部访问的以下划线开头(约定)
  115 +
  116 +## 等号运算符
  117 +使用`===`和`!==`,禁止使用`==`和`!=`
  118 +
  119 +## undefined
  120 +禁止使用`name === undefined`判断一个变量是否定义。应该使用`typeof(name) === 'undefined'`;
  121 +
  122 +## 常用语句规范
  123 +### if语句
  124 +```
  125 +if (condition) {
  126 + doSomething();
  127 +} else if (condition1) {
  128 + doSomething2();
  129 +} else {
  130 + soOtherThing();
  131 +}
  132 +```
  133 +### for语句
  134 +```
  135 +// GOOD
  136 +var i;
  137 +for (i = 0; i < len; i++) {
  138 + doSomething();
  139 +}
  140 +for (i in collection) {
  141 + if (collection.hasOwnProperty(i)) {
  142 + doSomething();
  143 + }
  144 +}
  145 +
  146 +// BAD
  147 +for (var i = 0; i < len; i++) {
  148 + doSomething();
  149 +}
  150 +for (i in collection) {
  151 + doSomething();
  152 +}
  153 +```
  154 +### while,do语句
  155 +```
  156 +while (condition) {
  157 + doSomething();
  158 +}
  159 +
  160 +do {
  161 + doSomething();
  162 +} while (condition)
  163 +```
  164 +
  165 +### switch语句
  166 +* 每一个case保持一个缩进
  167 +* 每一组语句都应该以break,return等结尾,或者用一行注释表示跳过(falling through)
  168 +* 无default的情况也要注释特别说明
  169 +
  170 +```
  171 +switch (val) {
  172 + case 1:
  173 + //nothing
  174 + case 2:
  175 + doSomething();
  176 + break;
  177 + default:
  178 + doDefault();
  179 +}
  180 +```
  181 +
  182 +### try语句
  183 +```
  184 +try {
  185 + doSomething();
  186 +} catch (err) {
  187 + doSomething2();
  188 +} finally {
  189 + doSomething3();
  190 +}
  191 +```
  192 +
  193 +## 模块化规范
  194 +* 模块开头require加载所有依赖模块
  195 +
  196 +```
  197 +var $ = require('yoho.jquery'),
  198 + flip = require('../plugin/flip'); //普通文件
  199 +
  200 +require('../plguin/login');
  201 +```
  202 +
  203 +* 模块抛出接口应该给予注释说明功能和使用方法
1 -// use for app name  
2 -const commonConfig = require('./config/common');  
3 -  
4 /** 1 /**
5 - * OneAPM agent configuration.  
6 - *  
7 - * See lib/config.defaults.js in the agent distribution for a more complete  
8 - * description of configuration variables and their potential values. 2 + * OneAPM agent configuration
9 */ 3 */
  4 +
  5 +const commonConfig = require('./config/common');
  6 +
10 exports.config = { 7 exports.config = {
11 - /**  
12 - * Array of application names.  
13 - */  
14 - app_name : [commonConfig.appName], // eslint-disable-line  
15 - /**  
16 - * Your OneAPM license key.  
17 - */  
18 - license_key : 'BwEGA1dRDlQ6357HHQ1AD1xJVkbc9fNfWRtQUwhQG41c5QFWGFIDSQoHc0e8AgMaUlcUVw0=',// eslint-disable-line  
19 - logging : { // eslint-disable-line  
20 - /**  
21 - * Level at which to log. 'trace' is most useful to OneAPM when diagnosing  
22 - * issues with the agent, 'info' and higher will impose the least overhead on  
23 - * production applications.  
24 - */  
25 - level : 'info'// eslint-disable-line  
26 - },  
27 - transaction_events: {// eslint-disable-line  
28 - enabled: true// eslint-disable-line  
29 - } 8 + app_name: [commonConfig.appName],
  9 + license_key: 'BwEGA1dRDlQ6357HHQ1AD1xJVkbc9fNfWRtQUwhQG41c5QFWGFIDSQoHc0e8AgMaUlcUVw0=',
  10 + logging: {
  11 + level: 'info'
  12 + },
  13 + transaction_events: {
  14 + enabled: true
  15 + }
30 }; 16 };
@@ -25,7 +25,7 @@ const env = { @@ -25,7 +25,7 @@ const env = {
25 25
26 const config = require('../package.json'); 26 const config = require('../package.json');
27 const ftpConfig = { 27 const ftpConfig = {
28 - host: '218.94.75.50', 28 + host: '218.94.75.58',
29 user: 'php', 29 user: 'php',
30 pass: 'yoho9646' 30 pass: 'yoho9646'
31 }; 31 };
@@ -125,7 +125,7 @@ const postcssPlugin = (et) => { @@ -125,7 +125,7 @@ const postcssPlugin = (et) => {
125 }; 125 };
126 126
127 // default 127 // default
128 -gulp.task('default', ['postcss-dev', 'postcss-dev-h5', 'postcss-watch', 'webpack-dev-server']); 128 +gulp.task('default', ['postcss-dev', 'postcss-watch', 'webpack-dev-server']);
129 129
130 // ge 130 // ge
131 gulp.task('ge', ['postcss', 'webpack']); 131 gulp.task('ge', ['postcss', 'webpack']);
@@ -148,19 +148,9 @@ gulp.task('postcss-dev', () => { @@ -148,19 +148,9 @@ gulp.task('postcss-dev', () => {
148 .pipe(gulp.dest('css/')); 148 .pipe(gulp.dest('css/'));
149 }); 149 });
150 150
151 -// postcss compile in dev-h5  
152 -gulp.task('postcss-dev-h5', () => {  
153 - return gulp.src('m-scss/m-index.css')  
154 - .pipe(sourcemaps.init())  
155 - .pipe(postcss(postcssPlugin(env.dev)))  
156 - .pipe(sourcemaps.write('.'))  
157 - .pipe(gulp.dest('css/'));  
158 -});  
159 -  
160 // postcss file watch 151 // postcss file watch
161 gulp.task('postcss-watch', () => { 152 gulp.task('postcss-watch', () => {
162 gulp.watch('scss/**/*.css', ['postcss-dev']); 153 gulp.watch('scss/**/*.css', ['postcss-dev']);
163 - gulp.watch('m-scss/**/*.css', ['postcss-dev-h5']);  
164 }); 154 });
165 155
166 // copy assets 156 // copy assets