前端代码重构和解耦

前端代码重构主要有下面几点

一、删除无用代码，精简代码

1、删除无用的css和javascript,删除javascript中已经无用的方法

二、前端代码规范

1、把页面中内联样式及头部样式提取到单独的css文件中
2、调整代码的缩进
3、更改标注已经不支持的标签如:
4、在javascript中减少全局变量的使用，缩小变量的作用域
5、整理基础类库,减少因为版本的问题造成多个文件

三、前端代码模块化

1、按模块归类css代码与js代码，放到模块对应的文件夹中
2、按模块分离js代码，定义不同的命名空间

四、提高页面加载性能

1、将不影响首页展现的javascript文件延迟到页面加载后加载
2、删除页面中初始隐藏的区域
3、javascript改为按需加载
4、图片的懒加载
5、调整css和js的引用顺序
6、给静态文件设置缓存
7、加载CDN上的文件
8、图片合并

前端代码如何解耦？
高内聚，低耦合是我们在软件开发中所追求的。编写前端代码(HTML、CSS和JavaScript)也跟后端Java开发一样，需要注重代码的解耦，保持更好的可维护性，可扩展性，以及可读性。

前端代码重构和解耦

一、JavaScript代码解耦可以从以下3个方面着手：

1、划分清晰的JS模块层次

2、组织高内聚的JS模块

3、设计透明的JS模块依赖和通信

二、关于前端与后端的解耦

这块谈到解耦的场景是前端调用后端进行前台渲染。
前端和后端的关联的地方主要在数据这一块，主要把这块理清楚了，那么后续就好办了。在开发前期需要做如下类型：

1）接口的类型：AJAX还是JSONP
2）入参要求
3）返回的数据编码以及格式（如果有多种状态，需要提前约定好）以上这些都需文档化。那么在接下去的开发，前端自己模拟数据进行开发，后端同学只要能够提供正确的数据即可

三、JavaScript与HTML解耦

1.HTML和Javascript的分离结构、表现和行为分离一直是我们提倡的。不需要把JS代码写入到HTML标签上。

2.Javascript尽量依赖DOM元素的class，而不要依赖tag 在改变HTML结构的情况下，如果保持class不变，还是可以保持JavaScript不变。

3.为重复使用的dom创建变量在你的代码里面，尽量在模块顶部声明依赖的DOM元素，后期改动方便，而且也提升代码执行效率。

4.划分模块按功能划分为每个模块定义不一样的class以及ID，后续所有操作都维围绕着这个模块展开。