前端标准规范

更新日期: 2019-08-19阅读: 2.3k标签: 规范

总体原则:极简、极快、解耦,主要适用范围:vue 单页项目+


文件组织规范

文件结构

原则:文件少、层级浅、资源集中、相对独立互不影响
基本结构:

.
|_ node_modules
|_ dist
|_ src
    |_ assets // 公共资源
        |_ img // 全局图片
            |- favicon.png
        |- common.js // 全局公用 js
        |- common.less // 重置样式表 + 自定义全局样式
        |- mixin.less // 全局 less 变量
        |- template.html // 模板
    |_ components // 组件
        |_toast 
            |- index.vue 
            |- index.less
        |- index.js // 所有组件的集合
    |_ pages // 具体页面
        |_ index // 首页
            |- index.vue
            |- index.less
            |- good.png // 少量本页面下独自使用的图片
        |- img // 两个以上页面都用到的图片单独抽离防止
            |- copy.jpg
        |_ temp // 模板
            |- index.vue
            |- index.less
    |_ router // 路由
        |- index.js
    |_ vuex // vuex 插件
        |- index.js
    |- App.vue 
    |- main.js

说明:

关于图片:少量直接放到本页面文件下(资源集中,互不影响),有两个页面以上公用则抽离放到 img 文件夹下(降低层级),assets 下的 img 主要放 favicon.png、pwa等全局图片(低频资源远离,不分散注意力)

assets 目录:放全局资源,此类资源辐射全局,改动频率低,集中在一起,为更好地聚焦核心

temp 文件:不用新建页面,直接复制然后改个文件名即可

文件命名

文件命名统一使用小写字母,必要的时候可以加中划线 - 
页面文件名不宜过长,里面的文件统一以 index 为前缀,index.vue、index.less

父子组件命名:

    |_ button-group // 组件组合
    |_ button // 组件
    |_ cell // 父组件
    |_ cell-item // 子组件


JS 规范

JS 书写格式

借助 Eslint 以及编辑器的代码格式化功能确保代码格式统一 
Eslint 使用 JavaScript standard 代码规范

JS 命名

  1. 全部用单引号
  2. 统一用驼峰命名法,尽量保持语义化
  3. 类名开头大写
  4. 合理使用复数、简称、缩写
  5. 多写注释,同时保持精炼


css 规范

规则:全部用双引号,小写。每个页面的 css 命名以文件外层文件夹名字加 _index 作为开头(所以说一开始文件夹名字不宜过长),统一使用下划线辅助 _
比如:

    .about_index{
        .tit{
            font-size: 18px; 
        }
        .nav{
            margin-bottom: 20PX;
        }
    }

原因:下划线易选中复制,js 中不允许有中划线,js 操作类名夹带中划线互相混在一起,加重记忆负担,容易混淆;文件名称都是不重复的,以文件名作为此页面类名的开头可以确保不会有重复,然后此类名下的命名可与其他页面重复,依靠层级限制类名可重复使用,极大减轻样式命名的工作量


HTML 规范

  1. 增强语义化:尽量使用 h5 新标签
  2. 标签嵌套规则,防止诡异错误:ul、ol 下嵌套 li,dl 下嵌套dt、dd,p、dt、h标签里面不嵌套块元素,a 标签不能嵌套 a,行内元素不能嵌套块元素
  3. 注意 seo 优化:img、a、strong、em、h1-h3
  4. 格式化标签:span、em、strong 格式化成无语义标签,i 统一给图标使用
  5. 全部用双引号,小写


性能优化

提交代码前检查

  1. 图片 
    必须加 favicon; 
    有下载需求的图片采用 img 标签实现,无下载需求的图片采用 CSS 背景图实现; 
    ps 中的切图 jpg 品质取非常高(80),然后用 PPDuck 压图工具做无损压缩; 
    尽量使用 jpg 的图,移动端大张图片不大于 50kb;
    移动端使用 2x 图; 
    避免空的 src 和 href;
  2. a 标签 href 如果为空,统一使用 "javascript:;" 而非 "void(0)"
  3. border-radius: 2px 值不能为单数,最小为 2px
  4. 定位元素垂直居中 top 值一般写 45%,50% 看起来会偏下
  5. 合理的鼠标光标
  6. 节流防抖
  7. 类型转换、非空判断
  8. 异步请求空白处理机制,比如加载 loading
  9. 统一的错误返回处理机制
  10. 微信分享标题敏感字,红包、钱...
  11. app回退、跳转是否正确 iOS、android
  12. 适配需要考虑 320~750 320 480 640 iphoneX 等
  13. 扩大点击区域

优化速度

  1. 页面首次打开请求接口不可超过3个,过多请求需要整合
  2. 控制域名数量,每个页面请求域名一般有3个,一个主域名,一个静态资源域名,一个埋点分析域名(存在资源并行下载数限制的问题)
  3. 综合衡量 css、js 的请求数量和包大小,超过 150kb 考虑做拆分
  4. 后端接口做缓存
  5. 静态资源统一部署到 CDN
  6. 开启 zip 压缩


链接: https://www.fly63.com/article/detial/6508

web开发,前后分离接口规范

目前我们现在用的前后端分离模式属于第一阶段,下一阶段可以在前端工程化方面,对技术框架的选择、前端模块化重用方面,可多做考量。也就是要迎来“==前端为主的 MV* 时代==”。

js中箭头函数的编码规范,如何更好的使用箭头函数

当您必须使用匿名函数,请使用箭头函数表示法,它创建了一个在 this 上下文中执行的函数的版本,这通常是你想要的,而且这样的写法更为简洁。如果你有一个相当复杂的函数,你或许可以把逻辑部分转移到一个声明函数上。

用standard来管理JavaScript 代码规范

standard是一个开源的JS代码规范库,制定了所谓standard(标准)的JS代码规范,配合编辑器插件可以实时检查代码规范以及语法错误,通过执行命令检查代码规范以及语法错误,自动修复(可以直接修复的)不合规范的代码,使其符合规范

Web 前端开发代码规范(基础)

对于一个多人团队来说,制定一个统一的规范是必要的,因为个性化的东西无法产生良好的聚合效果,规范化可以提高编码工作效率,使代码保持统一的风格,以便于代码整合和后期维护。

Node.js的模块加载机制(CommonJS规范)

为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很多编程语言都采用这种组织代码的方式。在Node环境中,一个.js文件就称之为一个模块(module)

web前端js中ES6的规范写法

引号的使用,单引号优先(如果不是引号嵌套,不要使用双引号)、空格的使用问题:(关键字后 符号后 排版 函数 赋值符号= )等、不写没有使用过的变量,如果定义了一个变量,后来一直没有参与过运算,那么不应该定义这个变量...

编码规范_html代码规范化编写

嵌套的节点应该缩进;在属性上,使用双引号,不要使用单引号;属性名全小写,用中划线做分隔符;不要在自动闭合标签结尾处使用斜线(HTML5 规范 指出他们是可选的);不要忽略可选的关闭标签;

CommonJS 规范中的 module、module.exports 区别

CommonJS规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。加载某个模块,其实是加载该模块的module.exports属性。module.exports属性表示当前模块对外输出的接口

W3C 代码标准规范

W3C通过设立领域(Domains)和标准计划(Activities)来组织W3C的标准活动,围绕每个标准计划,会设立相关的W3C工作组织(包括工作组、社区组、商务组等)。W3C会根据产业界的标准需求调整Domains和Activity的设置及相关的工作组设置。

css3代码书写规范

不要使用 @import 与 <link> 标签相比,@import 指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!