fe / yohobuywap-node · Commits

Go to a project

Authored by weiqingting
Commit 75d3dc12ee3a07df7e7eaf4eb5dd7f93708caba2 1 parent 60fbfc2f

maidian

Inline Side-by-side
Showing 12 changed files with 424 additions and 64 deletions
  1 +# 代码规范说明文档
  2 +
  3 +开发前请务必仔细阅读，遵守规范，保持团队代码风格统一
  4 +
  5 +## 文件命名
  6 +* 中划线分隔小写单词
  7 +* Ex: `your-file`
  8 +
  9 +## 缩进
  10 +* 统一4个Space
  11 +* 建议将编辑器Tab映射成4个Space
  12 +
  13 +## 注释
  14 +* 为每个你创建的JS文件添加注释
  15 +
  16 +```
  17 +/**
  18 + * 对文件实现功能的描述
  19 + * @date: 2016-11-11
  20 + * @author: name<emial@yoho.cn>
  21 + */
  22 +```
  23 +
  24 +* 为重要的函数添加注释
  25 +
  26 +```
  27 +/**
  28 + * 对函数功能的说明
  29 + * @params name paramType 参数描述
  30 + * @return name returnType 返回值描述
  31 + */
  32 +```
  33 +
  34 +* 为重要的代码、逻辑复杂的代码或者有特殊处理的代码添加注释
  35 +
  36 +```
  37 +// Your comments for the code
  38 +```
  39 +* 减少不必要的注释
  40 + 类似于：**进入循环**、**循环结束**等垃圾话的注释请谨慎添加，大家都是程序员，不用你注释也能知道的
  41 +
  42 +
  43 +## html
  44 +* 见名知意，不要有1,2,3这种名字出现
  45 +* class、id等属性命名为中划线分隔小写单词
  46 +* html中请不要出现不必要的嵌套以及不要将标签滥用，比如使用`a`标签作为不跳转的按钮的标签
  47 +* 属性按顺序出现：`id -> class -> name -> data-* -> src,for,type,href -> title,alt -> aria-*,role`
  48 +
  49 +## js
  50 +[Link](doc/code-norm/js.md)
  51 +
  52 +## css
  53 +[Link](doc/code-norm/css.md)
  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 +##公共头部模拟数据
  2 +
  3 +```javascript
  4 +var pageHeader = {
  5 + navBack: true,
  6 + navTitle: '逛',
  7 + navBtn: {
  8 + indexUrl: '#',
  9 + categoryUrl: '#',
  10 + shoppingCartUrl: '#',
  11 + mineUrl: '#'
  12 + }
  13 + };
  14 +```
  15 +##公共底部模拟数据
  16 +
  17 +```javascript
  18 +var pageFooter = true;
  19 +```
1 'use strict'; 1 'use strict';
2 2
3 const fs = require('fs'); 3 const fs = require('fs');
4 -let devHost = 'localhost'; 4 +let devHost = '172.16.6.159';
5 5
6 fs.readFile('.devhost', (err, buf)=> { 6 fs.readFile('.devhost', (err, buf)=> {
7 if (!err) { 7 if (!err) {

7.36 KB | W: | H:

7.42 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

47.4 KB | W: | H:

48 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

2.52 KB | W: | H:

2.55 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
@@ -2,9 +2,6 @@ var $ = require('yoho-jquery'); @@ -2,9 +2,6 @@ var $ = require('yoho-jquery');
2 var tip = require('../plugin/tip'); 2 var tip = require('../plugin/tip');
3 var AsideSlider = require('./aslider'); 3 var AsideSlider = require('./aslider');
4 4
5 -// var yas = window._yas || {  
6 -// sendCustomInfo: function() {}  
7 -// };  
8 5
9 var STUDENTCOOKIES = 'STUDENTCOOKIES'; 6 var STUDENTCOOKIES = 'STUDENTCOOKIES';
10 7
@@ -407,10 +404,12 @@ $(document).on('click', '.s-submit', function() { @@ -407,10 +404,12 @@ $(document).on('click', '.s-submit', function() {
407 if (+data.code === 200) { 404 if (+data.code === 200) {
408 if (window._yas && window._yas.sendCustomInfo) { 405 if (window._yas && window._yas.sendCustomInfo) {
409 window._yas.sendCustomInfo({ 406 window._yas.sendCustomInfo({
410 - EVENT: 'YB_STUDENT_ATTCT_SUBMIT',  
411 - C_ID: C_ID,  
412 - SRC_ID: 5,  
413 - SUBMIT_RES: 1 407 + op: 'YB_STUDENT_ATTCT_SUBMIT',
  408 + param: {
  409 + C_ID: C_ID,
  410 + SRC_ID: 5,
  411 + SUBMIT_RES: 1
  412 + }
414 }, true); 413 }, true);
415 } 414 }
416 415
@@ -431,11 +430,13 @@ $(document).on('click', '.s-submit', function() { @@ -431,11 +430,13 @@ $(document).on('click', '.s-submit', function() {
431 } 430 }
432 if (window._yas && window._yas.sendCustomInfo) { 431 if (window._yas && window._yas.sendCustomInfo) {
433 window._yas.sendCustomInfo({ 432 window._yas.sendCustomInfo({
434 - EVENT: 'YB_STUDENT_ATTCT_SUBMIT',  
435 - C_ID: C_ID,  
436 - SRC_ID: 5,  
437 - SUBMIT_RES: 2,  
438 - FAILURE_CAUSE: FAILURE_CAUSE 433 + op: 'YB_STUDENT_ATTCT_SUBMIT',
  434 + param: {
  435 + C_ID: C_ID,
  436 + SRC_ID: 5,
  437 + SUBMIT_RES: 2,
  438 + FAILURE_CAUSE: FAILURE_CAUSE
  439 + }
439 }, true); 440 }, true);
440 } 441 }
441 442
@@ -447,25 +448,7 @@ $('#tb-is-read').change(function() { @@ -447,25 +448,7 @@ $('#tb-is-read').change(function() {
447 changeSuccess(); 448 changeSuccess();
448 }); 449 });
449 450
450 -// $('.s-input-search').focusin(function() {  
451 -// $('.s-seach-tip').hide();  
452 -// }).focusout(function() {  
453 -// if (!$.trim($(this).val())) {  
454 -// $('.s-seach-tip').show();  
455 -// }  
456 -// });  
457 -  
458 451
459 452
460 -// 埋点 学生认证-信息填写页面  
461 -setTimeout(function() {  
462 - if (window._yas && window._yas.sendCustomInfo) {  
463 - window._yas.sendCustomInfo({  
464 - EVENT: 'YB_STUDENT_ATTCT_INFO',  
465 - C_ID: C_ID,  
466 - SRC_ID: 5  
467 - }, true);  
468 - }  
469 -}, 2000);  
470 453
471 454
@@ -205,30 +205,68 @@ if (typeof wx !== 'undefined') { @@ -205,30 +205,68 @@ if (typeof wx !== 'undefined') {
205 } 205 }
206 206
207 setTimeout(function() { 207 setTimeout(function() {
  208 + var len = $('.good-info', '.goods-list').length;
  209 + var ids = [];
  210 +
  211 + $('.good-info', '.goods-list').each(function() {
  212 + var goodids = $(this).find('.good-thumb').attr('href').match(/"product_skn":([^}]+)/, 'g');
  213 + var goodid = goodids && goodids.length === 2 ? goodids[1] : '';
  214 + ids.push(goodid);
  215 + });
  216 +
  217 + if (window._yas && window._yas.sendCustomInfo) {
  218 + window._yas.sendCustomInfo({
  219 + op: 'YB_STUDENT_VIP_GDS_LIST',
  220 + param: {
  221 + C_ID: C_ID,
  222 + PRD_NUM: len,
  223 + PRD_ID: ids.join(','),
  224 + ACTION_ID: 0,
  225 + SORT_TYPE: 4,
  226 + REC_ID: uuid(40) + '0000'
  227 + }
  228 + }, true);
  229 + }
208 if ($('.s-verify-fail').size()) { 230 if ($('.s-verify-fail').size()) {
209 if (window._yas && window._yas.sendCustomInfo) { 231 if (window._yas && window._yas.sendCustomInfo) {
210 window._yas.sendCustomInfo({ 232 window._yas.sendCustomInfo({
211 - EVENT: 'YB_STUDENT_ATTCT_RESULT',  
212 - C_ID: C_ID,  
213 - SRC_ID: 5,  
214 - ATTCT_RES: 1,  
215 - FAILURE_CAUSE: '' 233 + op: 'YB_STUDENT_ATTCT_RESULT',
  234 + param: {
  235 + C_ID: C_ID,
  236 + SRC_ID: 5,
  237 + ATTCT_RES: 1,
  238 + FAILURE_CAUSE: ''
  239 + }
216 }, true); 240 }, true);
217 } 241 }
218 } else { 242 } else {
219 // 埋点 学生营销宣传首页 243 // 埋点 学生营销宣传首页
220 if (window._yas && window._yas.sendCustomInfo) { 244 if (window._yas && window._yas.sendCustomInfo) {
221 window._yas.sendCustomInfo({ 245 window._yas.sendCustomInfo({
222 - EVENT: 'YB_STUDENT_HOME',  
223 - C_ID: C_ID,  
224 - SRC_ID: 1 246 + op: 'YB_STUDENT_HOME',
  247 + param: {
  248 + C_ID: C_ID
  249 + }
225 }, true); 250 }, true);
226 } 251 }
227 } 252 }
  253 +
228 }, 3000); 254 }, 3000);
229 255
230 256
  257 +function uuid() {
  258 + var s = [];
  259 + var hexDigits = '0123456789abcdef';
  260 + for (var i = 0; i < 36; i++) {
  261 + s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
  262 + }
  263 + s[14] = '4'; // bits 12-15 of the time_hi_and_version field to 0010
  264 + s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
  265 + s[8] = s[13] = s[18] = s[23] = '-';
231 266
  267 + var uuid = s.join('');
  268 + return uuid;
  269 +}
232 270
233 271
234 $('.swiper-slide', '.banner-top').click(function() { 272 $('.swiper-slide', '.banner-top').click(function() {
@@ -238,13 +276,15 @@ $('.swiper-slide', '.banner-top').click(function() { @@ -238,13 +276,15 @@ $('.swiper-slide', '.banner-top').click(function() {
238 var tid = $(this).parents('.s-section').data('template-id'); 276 var tid = $(this).parents('.s-section').data('template-id');
239 277
240 options = { 278 options = {
241 - EVENT: 'YB_STUDENT_VIP_FLR',  
242 - C_ID: C_ID,  
243 - F_ID: tid || 1,  
244 - F_NAME: '焦点图',  
245 - F_URL: url,  
246 - F_INDEX: 1,  
247 - I_INDEX: index 279 + op: 'YB_STUDENT_VIP_FLR',
  280 + param: {
  281 + C_ID: C_ID,
  282 + F_ID: tid || 1,
  283 + F_NAME: '焦点图',
  284 + F_URL: url,
  285 + F_INDEX: 1,
  286 + I_INDEX: index
  287 + }
248 }; 288 };
249 if (window._yas && window._yas.sendCustomInfo) { 289 if (window._yas && window._yas.sendCustomInfo) {
250 window._yas.sendCustomInfo(options, true); 290 window._yas.sendCustomInfo(options, true);
@@ -259,13 +299,15 @@ $('.s-activity', '.s-section').click(function() { @@ -259,13 +299,15 @@ $('.s-activity', '.s-section').click(function() {
259 var tid = $(this).parents('.s-section').data('template-id'); 299 var tid = $(this).parents('.s-section').data('template-id');
260 300
261 options = { 301 options = {
262 - EVENT: 'YB_STUDENT_VIP_FLR',  
263 - C_ID: C_ID,  
264 - F_ID: tid,  
265 - F_NAME: '学生专属活动',  
266 - F_URL: url,  
267 - F_INDEX: 3,  
268 - I_INDEX: index 302 + op: 'YB_STUDENT_VIP_FLR',
  303 + param: {
  304 + C_ID: C_ID,
  305 + F_ID: tid,
  306 + F_NAME: '学生专属活动',
  307 + F_URL: url,
  308 + F_INDEX: 3,
  309 + I_INDEX: index
  310 + }
269 }; 311 };
270 if (window._yas && window._yas.sendCustomInfo) { 312 if (window._yas && window._yas.sendCustomInfo) {
271 window._yas.sendCustomInfo(options, true); 313 window._yas.sendCustomInfo(options, true);
@@ -274,20 +316,32 @@ $('.s-activity', '.s-section').click(function() { @@ -274,20 +316,32 @@ $('.s-activity', '.s-section').click(function() {
274 $('.good-info', '.goods-list').click(function() { 316 $('.good-info', '.goods-list').click(function() {
275 var options; 317 var options;
276 318
277 - // var url = $(this).find('.good-detail-img').find('.good-thumb').attr('href');  
278 - // var index = $(this).index();  
279 - // var tid = $(this).parents('.s-section').data('template-id');  
280 - var index = $(this).index; 319 + var index = $(this).index();
281 var goodids = $(this).find('.good-thumb').attr('href').match(/"product_skn":([^}]+)/, 'g'); 320 var goodids = $(this).find('.good-thumb').attr('href').match(/"product_skn":([^}]+)/, 'g');
282 var goodid = goodids && goodids.length === 2 ? goodids[1] : ''; 321 var goodid = goodids && goodids.length === 2 ? goodids[1] : '';
283 322
284 options = { 323 options = {
285 - EVENT: 'YB_STUDENT_VIP_GDS_LIST',  
286 - PRD_NUM: index,  
287 - PRD_ID: goodid,  
288 - ACTION_ID: 0,  
289 - SORT_TYPE: 4,  
290 - REC_ID: Date.now() 324 + op: 'YB_STUDENT_VIP_GDS_LIST',
  325 + param: {
  326 + C_ID: C_ID,
  327 + PRD_NUM: index,
  328 + PRD_ID: goodid,
  329 + ACTION_ID: 1,
  330 + SORT_TYPE: 4,
  331 + REC_ID: uuid(40) + '0000'
  332 + }
  333 + };
  334 + if (window._yas && window._yas.sendCustomInfo) {
  335 + window._yas.sendCustomInfo(options, true);
  336 + }
  337 +});
  338 +$('.s-renzhen').click(function() {
  339 + var options = {
  340 + op: 'YB_STUDENT_ATTCT_SUBMIT',
  341 + param: {
  342 + C_ID: C_ID,
  343 + SRC_ID: 1
  344 + }
291 }; 345 };
292 if (window._yas && window._yas.sendCustomInfo) { 346 if (window._yas && window._yas.sendCustomInfo) {
293 window._yas.sendCustomInfo(options, true); 347 window._yas.sendCustomInfo(options, true);
@@ -210,6 +210,8 @@ @@ -210,6 +210,8 @@
210 } 210 }
211 } 211 }
212 212
  213 +
  214 +
213 .student { 215 .student {
214 background-color: #fff; 216 background-color: #fff;
215 217
@@ -276,7 +278,14 @@ @@ -276,7 +278,14 @@
276 278
277 .goods-list { 279 .goods-list {
278 background-color: #fff; 280 background-color: #fff;
279 - padding-left: 15px; 281 + /*padding-left: 15px;*/
  282 +
  283 + .good-info{
  284 + /*border: 1px solid #cccccc;*/
  285 + margin: 10px 0 40px;
  286 + width: 50%;
  287 + padding: 0 15px;
  288 + }
280 } 289 }
281 290
282 .s-more { 291 .s-more {