2020-06-04 10:48:10 版本 : APP 开发规范(培训)
作者: 何书亮 于 2020年06月04日 发布在分类 / FM组 / FM_App 下,并于 2020年06月04日 编辑
 历史版本

修改日期 修改人 备注
2020-06-04 10:49:01[当前版本] 何书亮 格式调整
2020-06-04 10:48:10 何书亮 创建版本

目标:前端工程师(web+js)
html + css + js
1、命名规范:
(页面命名规范)

文件命名主要英文,数字,下划线,主要以英文单词为主(尽量使用常用单词),采用驼峰式命名,避免使用拼音,提高可读性,其他同事便于理解,方便其他同事快速介入项目,如果单词不明确,可以使用百度翻译,谷歌翻译查询

2、大量操作DOM

后期公司项目,使用vue.js避免这种操作,如果要操作class,可以用变量动态控制。
console.log大量存在,导致控制台会出现大量的数据输出,严重影响前端页面的性能。

3、项目存在大量无用代码


这种大量的注解代码,定期清理掉,影响页面的加载速度
4、iconfont管理混乱

Iconfont没有做统一管理,导致每一个加入这个项目的前端,自己都要去新建一个iconfont项目,目前存在八九个iconfont,严重影响前端项目的代码质量,同时后期接入的前端开发,无法去对之前的iconfont进行维护,导致前端开发存在很多风险点
5、css命名不规范,可读性很差。

6、格式化代码
prettier:格式化,增强页面代码规范化,提高阅读性,支持js.css.html的所有规范要求,减少出错率
《未格式化的代码》

《格式化后的代码》

7、减少全局变量的使用,改用Object方式替换,降低全局变量污染的风险


8、要根据框架的规范去开发

9、设计稿规范管理
后期让UI设计使用蓝湖管理设计稿,图标让设计维护

10、第三方包的引用
减少下载js引入使用方式,使用规范的node-module包,目前vue.js,小程序都支持node-module 
目标:前端工程师(web+js)
html + css + js
1、命名规范:
(页面命名规范)
文件命名主要英文,数字,下划线,主要以英文单词为主(尽量使用常用单词),采用驼峰式命名,避免使用拼音,提高可读性,其他同事便于理解,方便其他同事快速介入项目,如果单词不明确,可以使用百度翻译,谷歌翻译查询

2、大量操作DOM
后期公司项目,使用vue.js避免这种操作,如果要操作class,可以用变量动态控制。
console.log大量存在,导致控制台会出现大量的数据输出,严重影响前端页面的性能。

3、项目存在大量无用代码
这种大量的注解代码,定期清理掉,影响页面的加载速度
4、iconfont管理混乱

Iconfont没有做统一管理,导致每一个加入这个项目的前端,自己都要去新建一个iconfont项目,目前存在八九个iconfont,严重影响前端项目的代码质量,同时后期接入的前端开发,无法去对之前的iconfont进行维护,导致前端开发存在很多风险点
5、css命名不规范,可读性很差。

6、格式化代码
prettier:格式化,增强页面代码规范化,提高阅读性,支持js.css.html的所有规范要求,减少出错率
《未格式化的代码》

《格式化后的代码》

7、减少全局变量的使用,改用Object方式替换,降低全局变量污染的风险

大小限制(图片已删)

8、要根据框架的规范去开发

9、设计稿规范管理
后期让UI设计使用蓝湖管理设计稿,图标让设计维护

10、第三方包的引用
减少下载js引入使用方式,使用规范的node-module包,目前vue.js,小程序都支持node-module
历史版本-目录  [回到顶端]
    知识分享平台 -V 4.8.7 -wcp