如何写高质量的JS，Html5前端代码

如何写高质量的JS，Html5前端代码

何编写高质量的HTML代码，西安HTML5培训开发小编告诉你，web
前端开发是从网页制作演变而来的，在名称上有很明显的时代特征。

网页制作是
Web1.0时代的产物，网站内容主要是静态的，用户使用网站的行为也以浏览为主。

2005年进入
Web2.0时代，网页不再只承载单一的文字和图片，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。

以前会 PS 和 Dreamweaver
就可以进行开发，而现在的网页制作更接近传统的网站后台开发，所以现在叫做 Web
前端开发。

Web 前端开发人员
主要职责：把网站的界面更好的呈现给用户

之前包括新浪，搜狐，BAT
等各种规模公司都对自己的网站进行了重构,因为如下两点原因。

1.根据 W3C
标准结构重构之后，可以让前端代码组织更有序，显著改善网站的性能，还可以提高可维护性，对搜索引擎也更友好；
2.重构后的网站能带来更好的用户体验，重构之后的网站，文件更小，下载速度更快

而我们的 DHTML 让用户操作更炫，Ajax
可以实现无刷新的数据交换，操作更流畅，这也给我们现在的前端开发带来了新的体验。

第一章：从网站重构说起
Web 标准 ---------
结构，样式和行为的分离

而我们现在前端开发的现状

而我们在混乱的浏览器环境下，我们依旧要去打造高品质前端代码，提高代码的可维护性，想要做到提高品质我们可以从以下三点出发。

而具体如何去做到 HTML
代码的精简，提高重用，做到有序，我们会在之后的代码中一一给大家解释。
第二章：团队合作

首先我们先来揭秘一下，什么是前端开发工程师？

2.1 CSS 布局是前端开发工程师的基本功

2.2 对 JS 使用有要求
不仅仅会原生 JS,还要会使用 JS 类库和
Ajax2016-11-21

首先，本人在前端开发方面有点心得，有什么不对的地方希望给出建议让我更好的进步

1.命名
在开发前必须有个命名规范来对代码统一规范团队代码结构，使代码可读性提高
2.注释
我相信每个人看别人代码时看到密密麻麻的代码结构，相信每个人都会很头疼，即使想看也会看不下去，而且很耗时间，所以注释就变得尤其得重要，注释越清楚越详细我相信代码可维护性越高，而且更容易修改维护
3.变量
在js中变量无处不在，所以这么声明变量就变得尤其得重要，首先少使用全局变量，这样会增加加载速度，从而导致项目用户体验不好
4.声明变量如果不用 var 会导致变量成为全局变量。
5.函数
函数的参数数量
函数的参数不应该超过 3 个。如果函数的参数超过 3 个，应该将一些参数进行封装。
6.函数参数传递
只传函数需要的参数。如
// 不推荐
function greet(data){
console.log('Hello, I am ' + data.name);
}
// 推荐
function greet(name){
console.log('Hello, I am ' + name);
}
7.函数的功能
一个函数只做一件事。这有助于测试和代码复用。
函数尽可能无副作用。无副作用指不修改传入的参数和全局变量。
8.减少重复代码
. 记得在某个文章中看到说，如果重复的代码出现 3 次，就应该重构重复的代码。
. 松耦合
. 一个函数只做一件事
. 缓存一些计算结果
9.避免全局变量
. 从分配置和离逻辑代码
. 不要修改不属于你的对象
. 不属于你的对象包括
. 浏览器原生对象，如 Object，Array等
DOM，如 document
BOM，如 window
类库对象
如果想拓展浏览器原生对象的功能，可以创建函数，函数中把浏览器原生对象传入。如 Underscore.js 做 的那样。
10.代码风格的统一
11.尽可能的避免代码重复
. 如何减少重复的代码呢？
. 在JS中，可以将重复的代码写成一个方法，如果是可通用的，可以写在独立的JS文件中。
. 在CSS中，则需要借助Sass，Less之类的预处理语言的Mixins的功能。将重复的部分写成一个Mixins。
12.配置和逻辑分开
. JS中，对于整个站的通用配置，写在config.js里。如果是某个js的配置，在文件的开头，用defaultParam 对象来存放可变的配置，用const来定义不可变的配置
. CSS中，依旧要借助预处理语言。对于整站的配置，定 义在_variables.scss里。对于某个具体CSS文件里，在文件开头用变量来定义
13.减少代码的副作用
1>JS中，方法中的沟通尽量不要用全局变量；不要在Array之类的全局对象的原型链上添加方法；尽量不要定义全局的方法和变量：如果确实有很多变量，方法放在全局上，可以学习jQuery,将很多变量，方法放在一个全局对象上；自定义事件，事件的名称也要有命名空间。
2>CSS中，要做到无副作用，难度很大。对于简单页面，一个方法是，把页面上的元素都分成一个个组件，写样式时，选择器要用组件选择器 当前元素选择器。当组件变的复杂时，组件也会包含很多子组件。然后，选择器就会越来越长。。。我的解决方案是用的BEM。
14.提高代码的可读性
. 变量，方法等的合理命名，通过名称可以知道这个大概做什么的。
. 如果则要加注释来说明一下。对于不容理解的代码加注释
. 尽可能不用魔法数字
. 对于HTML，选择合适标签
15.一个方法只做一件事
一来提高代码的复用性，二来让调试也变的更容易，三来让测试变的更容易2017-08-24