Merge branch 'develop' into feature/outlet
Showing
4 changed files
with
256 additions
and
38 deletions
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 |
-
Please register or login to post a comment