web前端的开发比较重要的知识点

　web前端的开发比较重要的知识点

　　本文主要从以下几个方面来概述前端的开发规范

　　1. 目录构建规范

　　2. 前端命名规范

　　3. 前端工作规范

　　4. 开发文档的书写规范

　　1. 前端目录构建规范

　　我们从命名原则、根目录、业务逻辑等方面进行目录构建

　　1.1 命名原则：

       

　　1.2 根目录(root)结构按职能划分(如下：)

　　

　　1.3 根据业务逻辑进行文件夹的划分(如下：)

　　

       

　　1.4 总结：

　　以上目录开发规范有两种使用途径

　　1. 使用前端工程化工具如webpack、gulp等进行手动打造

　　2. 利用框架提供的脚手架工具进行修改

　　2. 前端命名规范

　　这部分内容我从以下两个方面来进行讲解

　　· CSS命名规范

　　o BEM规范

　　o OOCSS规范

　　· javaScript编写规范

　　o jslint

　　o eslint

　　2.1 css命名规范

　　2.1.1 BEM规范

　　2.1.2 OOCSS规范

　　2.2 js编写代码规范

　　· jslint

　　· eslint

　　3. 前端工作规范

　　我们从 日报 、 周报以及邮件格式三个方面来了解

　　3.1 日报内容如下

　　- 上午你做什么

　　- 下午你做了什么

　　- 遇到什么问题?是否有解决?

　　- 明天的计划?(明天准备做什么)

　　- 最后在内容最后面跟上日期

　　3.2 周报内容如下：

　　· 2016.07.25-2016.07.29周报：

　　i. 本周工作主要内容：

　　§ 完成了宏视云h5播放器升级及大数据上报;

　　§ 修复xk-h5播放器bug：在三星手机自带浏览器无法进行滑动seek;

　　§ admin-console后台管理系统初步完成终端访问页面和数据统计概览页面的制作;

　　ii. 工作中存在的主要问题：

　　iii. - webserver大数据展示页面移植到admin-console后台管理系统存在bootstrap与jquery.easyui冲突等几个兼容性问题;

　　iv. - 解决这个问题的思路可能不是最有效的方法，可能使用iframe会快些;使用iframe存在如何在easyui页面控制iframe页面及如何在浏览器窗口改变时，iframe也跟着改变等问题;

　　v. 下周工作计划：

　　§ 完成上周未完成的admin-console大数据展示页面的制作;

　　§ 完成工作以后，如果有时间的话尝试下用iframe解决;

　　§ 询问师兄有没有可以帮忙做的工作;

　　3.3 常用邮件格式如下：

　　1. 明确邮件发送谁?

　　o 参与者： 一定要想清楚， 如果不清楚， 记得问一下你直接上司(同事)

　　2. 邮件的主题：

　　o 主题必须有且仅有一个

　　o 必要时， 可以添加： 【请批阅】 、 等字眼

　　3. 邮件正文

　　o 称呼要明确：

　　o 条理分明 举例：

　　o 各位领导好：

　　o 以下内容是xxx 请熟知/请批阅

　　4. 署名：

　　o 什么部分 什么职位 什么姓名 什么时间

　　5. 附件

　　o 需要说明附件是做什么的?

　　6. 转发;

　　o 需要对原邮件进行说明。，然后写清楚自己的意图

　　4. 开发文档的书写规范

　　这部分内容从以下几个部分进行说明

　　· html规范

　　· css规范

　　· js规范

　　4.1 html规范

　　1. 标签上属性的顺序建议如下： class ( class 是为高可复用组件设计的,所以应处在第一位) id name (id 更加具体且应该尽量少使用,所以将它放在第二位) data-* src for type href value placeholder title alt aria-* role required readonly disabled

　　2. id/class 命名规则: BEM OOCSS SMACSS(扩展)

　　3. 注释规范(最好用英文)

　　4.2 css规范

　　4. 属性顺序

　　o 位置属性 ( position top right z-index display float etc.)

　　o 大小 ( width height padding margin etc.)

　　o 文字系列 ( font line-height letter-spacing color text-align ect.)

　　o 背景 ( background border etc.)

　　o 其他 ( animation transition etc.)

　　o 以及注释的写法

　　5. 尽量不使用选择器 (css3选择器)

　　.content.first-child

　　6. 属性使用缩写：

　　7. 去掉小数点前面的 0

　　4.3 Js规范

　　8. 语言规范

　　o 声明变量必须加上 let 关键字.不要再使用 var

　　o 优先使用箭头函数

　　o 使用模板字符串取代连接字符串

　　9. 使用分号

　　o 如果仅依靠语句间的隐式分隔,有时会很麻烦,使用分号更能清楚哪里是语句的起止,而且有些情况下,漏掉分号会出 BUG

　　10. 块内函数声明

　　o 不要在块内声明一个函数,e.g.

　　o 如果确实需要,使用函数表达式来初始化变量

　　11. 循环注意

　　o forEach

　　o map

　　o filter

　　o every

　　o some

　　o for..in

　　o for...of

　　o for循环 while

　　o do...while

　　12. 命名规范：

　　o camel 表示驼峰命名法 pascal表示 首字母大写

　　o 变量名: 必须使用 camel 命名法

　　o 参数名: 必须使用 camel 命名法

　　o 函数名: 必须使用 camel 命名法

　　o 方法/属性: 必须使用 camel 命名法

　　o 私有 ( 保护 ) 成员: 必须以下划线开头

　　o 常量名: 必须使用全部大写的下划线命名法,e.g. XTEP_HOST_API

　　o 类名: 必须使用 pascal 命名法

　　o 枚举名: 必须使用 pascal 命名法

　　o 枚举的属性: 必须使用全部大写的下划线命名法,e.g. XTEP_HOST_API

　　o 命名空间: 必须使用 camel 命名法

　　o 语义: 命名同时还需要关注语义

　　13. 声明：

　　o var let const 应该放在function 已进入函数的时候

　　o 注释变量的功能及代表的含义,且应以字母顺序排序.每个变量单独占一行以便添加注释

　　14. 回调函数规范：

　　回调函数统一使用 Promise 函数,回调成功的参数统一为 res,错误参数为 err

　　15. 标点规范

　　js中统一使用反引号()或是单引号('')， 不使用双引号("")

　　16. 函数默认值

　　函数默认值写在其他参数后面

　　 web前端的开发比较重要的知识点更多免费资源领取微信扫一扫