Web技术应⽤规范（草案）
第⼀章总则
第⼀条⽬的
前端开发是⼀系列⼯具和流程的集合，本规范旨在提升前端代码的质量，对前端开发进⾏全⽅位指导，统⼀编码规范、提⾼可读性、降低维护成本，以实现⾼效、可持续的⼯作流。
第⼆条范围
本标准适⽤于所有的Web应⽤及App开发。
第⼆章开发规范
第三条⼀般规范
应⽤在HTML、CSS、JavaScript等的通⽤规则。
3.1 通⽤规范
3.1.1 技术选型
前端是⼀门发展中的技术，标准、框架等更新速度快、调整幅度⼤，技术选型时应考虑到开源技术中适⽤于当前项⽬的多种可能，多⾓度考察⽐较，并从中选取框架运⾏稳定的版本，在技术储备充⾜时，应兼顾考虑相对前沿技术。
3.1.2 ⽬录结构
规范的⽂件⽬录结构有助于提⾼项⽬的逻辑结构合理性，对应⽤扩展和合作，及团队开发均有益处。
应⽤的核⼼框架、静态资源、脚本模块、上传⽂件等应分置不同⽂件，严格遵循模块化开发的要求，尽量做到规范化。不需要直接暴露给⽤户的⽂件，应该放在web服务器访问不到的⽬录，避免泄露设置信息。
3.1.3 ⽂件资源命名
1).项⽬命名全部采⽤⼩写，以下划线分隔；
2).使⽤驼峰⽅式命名⽂件名与⽂件所在的⽂件夹，便于统⼀配置；
3).确保⽂件命名总以字母开头⽽不是数字；
3.1.4 编码格式
通过声明⼀个明确的字符编码，让浏览器快速确定适合的渲染⽅式，通常指定为’UTF-8’。
3.1.5 ⽂本缩进
采⽤四个空格或者Tab缩进，不要混⽤。
3.1.6 代码注释
注释是对⽆法⾃我说明的代码进⾏解释，注释可提⾼代码的可维护性、可读性，开发⼈员应在必要时添加符合规范的注释。注释应⾄少包含⽅法、函数的作者/维护⼈，描述，出⼊参，⽰例及维护⽇期等信息。如下场景必须添加注释：
1). 核⼼代码及较晦涩部分。
2). 易存在错误的代码段。
3). 浏览器特殊的HACK代码。
4). 业务逻辑强相关的代码。
3.1.7 代码检查
对于JavaScript这种弱类型的编程语⾔，严格遵循编码规范和格式化风格⾮常重要。前端开发⼈员需严格遵循开发规范，并使⽤⾃动代码检查⼯具(如ESLint)降低语法错误，确保代码正确执⾏。
ESLint是⼀款检查JS代码是否规范的⼯具，⽤来检查JS代码的规范性。它提供了配置的⽅法，来检查不符合开发规范的错误，并⽀持ES6语法。
3.2 HTML规范
3.2.1 ⽂档类型
使⽤HTML5的⽂档类型声明：<!DOCTYPE html>。
3.2.2 脚本加载
出于性能考虑，脚本应该异步加载。脚本引⽤写在body结束标签之前，并带上async属性，避免阻塞CSSOM执⾏。
3.2.3 语义化
使⽤合适的HTML元素，可提⾼代码的渲染效率，有利于提升SEO，对于可访问性、代码重⽤、代码效率有重要意义。
3.2.4 关注点分离
结构、表现、⾏为分离是前端开发⼯程化的最佳实践，为保持代码⼲净整洁可维护，降低代码耦合度，并进⾏⼯程化，应严格遵循三者分离的规范要求。
3.3 CSS规范
3.3.1 选择器
1). 构建选择器时应使⽤清晰、准确、有语义的类名。
2). 选择器的设计应尽可能精准，避免使⽤标签选择器，使⽤类名⽽不是元素，这样更容易维护。
3). 减少选择器的长度，每个组合选择器的长度应控制在3个以内。
3.3.2 属性
css提供了各种缩写属性，如font字体、transiton变换、animation动画等，使⽤缩写属性对于代码效率和可读性亦有裨益。
3.3.3 重绘重排
为了保证更好的可读性和渲染效率，样式声明应该遵循以下顺序：
1). 结构性属性：
a). display, float，visibility，overflow, clear等
b). position, left, top, right, z-index 等.
c). border ，width，height 等.
d). margin, padding
2). 表现性属性：
a). font, text，word，opacity 等
b). color，background等
c). transition，animation，content等
3.3.4 代码组织
1). 以组件为单位组织代码。
2). 制定⼀个⼀致的注释层级结构。
3). 当使⽤多个 CSS ⽂件时，通过组件⽽不是页⾯来区分他们。
3.3.5 效率⼯具
预处理⼯具和后处理⼯具能提⾼css开发效率，推荐使⽤less、sass、stylus及postcss等⼯具使⽤模块化开发以提⾼效率，CSS reset⽂件宜采⽤开源标准，如normalize.css等。
3.4 图像规范
3.4.1 图像压缩
所有的图⽚必须经过压缩和优化才能发布。
3.4.2 图⽚格式
背景图建议使⽤PNG格式，在需要兼容古⽼浏览器(IE8及以前)的项⽬中，尽可能选择PNG-8⽽不是PNG-24。
内容图⽚建议使⽤JPG。
装饰性图使⽤PNG。
3.4.3 CSS Sprite
CSS Sprite可以减少HTTP请求数，是推荐使⽤的图⽚处理技术。
3.4.4 图标字体
图标字体可⼤幅减少零碎⼩图标的使⽤，可使⽤图标字体的场景应减少图⽚的使⽤。
3.4.5 其他
图⽚是web应⽤中最耗费资源的内容，应尽量减少图⽚的使⽤，可使⽤CSS、Canvas、SVG等技术实现的简单样式应避免使⽤图⽚。
3.5 JavaScript规范
3.5.1 严格模式
严格模式 ‘Use strict’ 对不同的JS语境会做严格地错误检查，使⽤严格模式也可确保代码更加健壮、运⾏更加快捷，并禁⽌使⽤未来可能被引⼊的预留关键字。
3.5.2 代码风格
本规范⽆意于规定是否需要空格、分号等代码风格问题，关于这等规范，建议采⽤统⼀的ESLint配置以解决代码风格问题(参考standardjs 风格)。
3.5.3 标准特性
优先考虑使⽤标准特性，为最⼤限度的保证扩展性与兼容性，⾸选标准特性，⽽不是⾮标准特性，如：⾸选string.charAt(3)⽽⾮
string[3]。
3.5.4 函数式编程
函数式编程可以简化代码并缩减维护成本，易复⽤、利于降低耦合度。
例外：在“重代码性能，轻代码维护”的情况之下，要选择最优性能的解决⽅案⽽⾮可维护性更好的⽅案（⽐如⽤简单的循环语句代替forEach）。
3.5.4 组件化开发
1). 页⾯上的每个独⽴的可视/可交互区域视为⼀个组件；
2). 每个组件对应⼀个⼯程⽬录，组件所需的各种资源都在该⽬录下就近维护；
3). 由于组件具有独⽴性，因此组件与组件之间可⾃由组合；
4). 页⾯是组件的容器，负责组合各组件形成功能完整的界⾯；
5). 当不需要或替换组件时，可以整个⽬录删除/替换。
3.5.7 技术框架/库svg canvas
前端技术发展⽇新⽉异，主流框架各具特⾊。如何对当前项⽬进⾏技术选型是⼀项复杂且没有定论的⼯作，但选型时的⼀些基本遵循是有共识的。参考点有：
1). 框架是否成熟
2). 架构和模式
3). ⽣态系统
4). 与项⽬契合度
5). 团队技术储备
⽬前⼀些代表性框架/库有：React、Angular、Vue、jQuery、Bootstrap等，如：
React：采⽤Virtual Dom，并衍⽣有React Native⽀持原⽣应⽤，采⽤单向数据流，但底层采⽤的JSX有技术门槛；
Angular： 依赖注⼊，双向数据绑定，⽀持TypeScript，⾯向对象等，但脏检查在watcher增多时效率会有明显下降；
Vue：轻量级，双向数据绑定，平缓的学习曲线，在中⼩型简单应⽤中有更⼤优势。
以上对当前主流框架的说明仅做技术选型时的⼀般参考，要经达权变，不可荆⼈涉澭。
第三章⼯程规范
第四条性能优化
开发⼀款完整的web应⽤时，前端将⾯临诸多的⼯程问题，如：多功能、多系统、多⼈合作，⾼性能
的CDN部署、缓存控制、按需加载、⾸屏渲染、服务端推送等，这些问题的基本要求就是组件化开发和资源管理。
依照不同的优化⽬标，应该采⽤的⽅案⾄少有：
优化⽬标优化⽅案
请求数量合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域
请求带宽开启GZip，精简JavaScript，移除重复脚本，图像优化
缓存使⽤使⽤CDN，使⽤外部JavaScript和CSS，添加Expires头，减少DNS查，配置ETag，使Ajax可缓存
页⾯结构将样式表放在顶部，将脚本放在底部，尽早刷新⽂档的输出
代码校验避免CSS表达式，避免重定向
在前端开发的⼯程管理领域有很多细节值得挖掘和探索，性能优化的分析和研究对前端团队技术的积累发展也⼤有裨益，项⽬开发中应对此有充分考量。
第五条 web安全
本章节的⽬的是让开发者对各种web安全威胁的常见攻击⼿段有基本的了解，以便我们能够快速定位漏洞代码、解除安全隐患。
XSS：攻击者利⽤应⽤程序的动态数据展⽰功能，在html页⾯⾥嵌⼊恶意代码。当⽤户浏览该页⾯时嵌⼊的html恶意代码即被执⾏。危害主要有：盗取⽤户cookie伪造⾝份、下载病毒⽊马、钓鱼、蠕⾍攻击等。
FLASH：利⽤flash在安全配置和⽂件编码上的问题，绕过浏览器同源策略发起跨域请求，如CSRF攻击、钓鱼。
注⼊攻击：包括SQL注⼊、代码注⼊、XML注⼊等，如SQL注⼊，当程序将⽤户输⼊的内容拼接到SQL中⼀起提交给数据库执⾏时，就会产⽣SQL注⼊威胁。解决⽅案是对⽤户输⼊进⾏转义。
⽂件操作： 应⽤在处理⽤户上传的⽂件时，没有判断⽂件的扩展名是否在⽩名单内，导致攻击者可以上传任意⽂件甚⾄脚本⽊马到服务器上直接控制服务器。解决⽅案是在⽤户上传⽂件请求的代码中过滤⽂件扩展名，并保证上传⽂件的⽬录必须是http请求⽆法直接访问到的。访问控制： 由于应⽤没有做权限控制或者权限控制过于简单，攻击者可以通过猜测管理员页⾯URL进⾏访问，实现权限提升攻击，建议使⽤成熟的权限框架解决该问题。
Session管理：为防⽌XSS漏洞导致⽤户cookie被盗，应设置cookie为httponly、Secure，并设置超时时间。
密码算法安全： 项⽬中涉及到的敏感信息不可采⽤简单算法加密、否则当攻击者获取有⾜够样本时，将可以反推出解密算法，从⽽泄露重要信息。其他⼀些如base64、escape、urlencode等只是编码格式，不可⽤作密码算法。必须采⽤符合业内安全强度标准的密码算法，如SHA-256等。
第四章附则
第六条
本规范作为web开发⼈员的⼀般参考，⾃发布之⽇起执⾏。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。