前端规范 | IT-北北报

前端规范

2016/07 01 12:07

编码规范

常量命名:(大写名字_大写功能)

const HELLOWORLD_ICON = "";
const HELLOWORLD_CONFIG = "";

变量命名:(驼峰)

let helloWorld = "";
var hello = "";

Dom对象命名:(驼峰_功能)

ref = "helloWorld_form";
ref = "hello_btn";
ref = "helloWorld_txt";
ref = "hello_select";
ref = "helloWorld_radio";
ref = "hello_check";
ref = "helloWorld_div";
...

Class、函数命名:(类首字母大写驼峰、函数驼峰、注释规范参见YUIDoc)

公共组件与方法必须写注释,业务组件与方法依照实际情况书写注释
/**
@class HelloWorld
@extends React.Component
 */
class HelloWorld extends React.Component{
  /**
  @method methodName
  @param template {String} 模版
  @param data {Object} 对象
  @return {String} 返回值是模版加data.name
  */
  methodName(template, data){
   return template+data.name;
  }
  ...
}

Scss变量、函数命名规范

颜色变量必须提取,有利于后续做皮肤扩展
$header-bg: #3a3a3a;
/*文字溢出省略*/
@mixin text-over{
...
}

html还有html的class、id命名、及未尽事宜都遵循驼峰命名规则;

编码原则:

1.公共方法要提取成function,公共样式提取成@mixin

2.变量命名

错误实例
let a=1;
let b="abc";
let c=[];
正确实例
let a=1,b="abc",c=[];

3.对于多次使用的对象要用局部变量

错误实例
$(".abc").addClass("active");
$(".efj").addClass("active");
$(".abc").html($(".efj").html());
正确实例
const ACTIVE="active";
let _abc=$(".abc"),_efg=$(".efj");
_efg.addClass(ACTIVE);
_abc.addClass(ACTIVE).html(_efh.html());

4.每个页面引用css不得超过2个(公共样式、业务样式),js不得超过3个(框架js、插件js、业务js),如果超出考虑是否要进行压缩合并,除了必须要引用的框架文件外,单个文件体积尽量不要超过200k

5.图片保存要使用photoshop的control+shift+alt+s(Mac:cmd+option+shift+s)进行优化保存
相信漂亮的代码是优雅的舞者~~~



--转载请注明: IT-北北报 » 前端规范



无觅相关文章插件,快速提升流量