网站优化

重构，这个词在前端这块让人想到的更多的是页面制作（HTML/CSS）这块的作业。然后在前端中还有一块更首要的当地 —— 那即是代码的重构；学软件工程的同学应该会比较清楚。

代码重构，简略来讲即是把本来的代码从头构建和编写，让代码愈加明晰，进步代码的复用性和功用等。

下面开端抛砖，期望能为在做代码重构和对代码重构有兴趣的同学能带来一些启示和协助。

实例：Web弹层（Dialog/LayerBox/LogicBox）

这儿创立一个对话框（多例）的根本代码，这儿首要做了以下几件事

1、 假如页面上找不到为当时ID的对话框，则创立一个新的；

2、 设置对话框标题；

3、 设置右上角封闭指令菜单的事情；

4、 设置对话框内容；

5、 设置对话框操作按钮。

思考：

1、 是不是真的需要多例办法的组件；

2、 是不是真的需要在右上角加一个封闭指令菜单；

3、 ……

通过之前的实习，将多例改成单例，这儿也去除掉了右上角的封闭按钮，为了添加其拓展和灵敏性，这儿选用了事情写入（钩子）的办法进行回调处理。

关于这次重构后，得到以下改善：

1、 将多例改成单例，降低了对实例的保护，而且更方便的对实例进行办理；

2、 事情机制的改成，削减事情绑定和保护；

3、 将HTML构造解耦，JS代码不需要关怀页面构造的保护；可是会带来页面上的保护作业；

思考：

还有没有其它更灵敏和简练一点的办法呢？

代码三：

上面是近来的一个演进版别，这个是一个公共的逻辑弹层（表单操作等），这儿较上一次去调了事情钩子，直接选用callback传递的办法，并选用链式的办法进行处理，页面上调用愈加简略。

较之前比较：

1、不需要先去set对应的事情钩子；

2、办法别离，各司其职。如：show/hide 只担任其可见性，其它的由对应的办法处理，使接口办法的责任更明晰；

3、页面构造回归到了JS代码，思考多商品的运用场景，削减页面构造的保护

OK，抛砖完毕。

最后一句话，代码优化无止境，只要更多的思考、重构。让自个的代码更具可用性、灵敏性。也为团队降低学习本钱。