前端开发规范

前端开发规范

备注：实际开发请以本公司的规范为标准。

一.普通规范

二.HTML\CSS规范

三.Javascript规范

四.UI框架及css预处理器规范

五.脚手架、插件选择规范

---

普通规范

• 基本原则：

  • 结构、样式、行为分离
  • 缩进（建议IDEA格式化）
  • 文件编码（统一 UTF-8 ) <meta charset="utf-8">
  • 一律使用小写字母

  	<!-- one -->
  	<!-- Recommended -->
  	<img src="google.png" alt="Google">
  
  	<!-- Not recommended -->
  	<A HREF="/">Home</A>
  	
  	/* two */
  	/* Recommended */
  	color: #e5e5e5;
  
  	/* Not recommended */
  	color: #E5E5E5;
  

  • 省略外链资源 URL 协议部分：
    省略外链资源（图片及其它媒体资源）URL 中的 http / https 协议，使 URL 成为相对地址，减小文件字节数。

  <!-- Recommended -->
  <script src="//www.w3cschool.cn/statics/js/autotrack.js"></script>
  
  <!-- Not recommended -->
  <script src="http://www.w3cschool.cn/statics/js/autotrack.js"></script>
  

  /* Recommended */
  .example {
    background: url(//www.google.com/images/example);
  }
  
  /* Not recommended */
  .example {
    background: url(http://www.google.com/images/example);
  }
  

  • 统一注释
    • 模块注释
    • 区块注释
  • CSS 注释：
    组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔；
  • JavaScript 注释：
    • 模块注释
    • 区块注释
  • 媒体查询：
    • 媒体查询（Media query）的位置
      将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部
  • 不要使用 @import
    与 相比，@import 要慢很多，不光增加额外的请求数，还会导致不可预料的问题。
    替代办法：
    * 使用多个 元素；
    * 通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件；
    * 其他 CSS 文件合并工具；

---

JavaScript规范

• JavaScript命名规范：
  • 变量, 使用 Camel 命名法。

    	let loadingModules = {};
    

  • 私有属性、变量和方法, 以下划线 _ 开头。

    	let _privateMethod = {};
    

  • 常量, 使用全部字母大写，单词间下划线分隔的命名方式。

    	let HTML_ENTITY = {};
    

  • 其它
    • 函数, 使用 Camel 命名法。
    • 函数的参数, 使用 Camel 命名法。

      	function stringFormat(source) {}
      
      	function hear(theBells) {}
      

    • 类, 使用 Pascal 命名法
    • 类的 方法 / 属性, 使用 Camel 命名法

      	function TextNode(value, engine) {
      		this.value = value;
      		this.engine = engine;
      	}
      
      	TextNode.prototype.clone = function () {
      		return this;
      	};
      

    • 枚举变量 使用 Pascal 命名法。
    • 枚举的属性， 使用全部字母大写，单词间下划线分隔的命名方式。

      	var TargetState = {
      		READING: 1,
      		READED: 2,
      		APPLIED: 3,
      		READY: 4
      	};
      

• JavaScript命名语法
  • 类名，使用名词。

    	function Engine(options) {}
    

  • 函数名，使用动宾短语。

    	function getStyle(element) {}
    

  • boolean， 类型的变量使用 is 或 has 开头。

    	let isReady = false;
    	let hasMoreCommands = false;
    

  • Promise 对象用动宾短语的进行时表达。

    	let loadingData = ajax.get('url');
    	loadingData.then(callback);
    

---

UI框架及css预处理器规范

• PC端Vue项目UI框架：ElementUI（优先）、iView
• 移动端Vue项目UI框架：mint-ui（优先）、vant
• sass/scss、less、stylus ???
  推荐less：less相对比sass更简洁，而stylus的语法灵活性开放性过大，不利于团队协作开发。

---

脚手架、插件选择规范

• 脚手架vue-cli2.0 OR vue-cli3.0
  推荐vue-cli2.0：团队中熟悉2.0版本脚手架的人居多，脚手架是一个工具类的存在。
  有条件选择vue-cli3.0
• 网络请求：axios
• 时间格式化插件：momentjs
• 富文本编辑器：ueditor
• 图片剪裁插件：cropperjs
• 图表：echarts