前端开发规范

前端开发规范

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

一.普通规范

二.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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值