IT圈子，ITBBB.COM

编码规范

常量命名：（大写名字_大写功能）

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圈子，ITBBB.COM » 前端规范