服务购

（3）整理基础类库。

网站初期为了加快开发的进度而引入了多个框架，其中包括Extjs、JQuery以及多个JQuery插件。Extjs和JQuery中重复的功能较多，项目中很多相同的实现使用的是不同类库中的功能，如：DOM选择、Ajax请求等。部分jQuery的UI插件的功能也和Extjs中的功能重复。鉴于项目的状况，只能保守选择同时保留Extjs和jQuery。重构的内容是统一UI插件的使用、统一基础方法的使用。

（4）前端代码模块化。

按照模块归类CSS代码，放到模块对应的单独CSS文件中；按照模块分离JavaScript代码，按照模块定义不同的命名空间；将JavaScript代码中的公共方法归类到独立的的共通文件中，同时引入面向对象的思想重构JavaScript代码，进一步明确公有接口和私有接口。

（5）提高页面加载性能。

将部分不影响首页展示的JavaScript文件延迟到页面加载后加载；删除页面中初始隐藏的区域，改为通过JavaScript按需动态生成；页面中的部分图片延迟加载；调整CSS和JavaScript文件的引用顺序，即CSS在前JavaScript在后；给静态文件设置缓存；使用CSS Sprite，合并首页背景图；合并和压缩发布后的CSS和JavaScript代码文件。

从如上的重构内容可以看到，这次重构的目的是明确的，即提高前端代码的可维护性和性能。从中也暴露了一些重构过程中的问题：最主要的问题还是低估了重构的风险，导致后续发现了不少新bug；没有足够的自动化测试，而贸然去修改代码，很难保证最终修改代码的正确性；其次是对于性能优化，事先没有量化，没有做任何性能方面的监控，没有抓住性能主要的瓶颈，所以性能部分的重构就显得盲目。

前端重构最佳实践经验

重构前一定要预估风险，如果没有足够的自动化测试，最好是先完善自动化测试代码。

重构的目的和范围要明确，切忌盲目修改。前端代码的重构目的主要是提高代码的可维护性、可读性和性能。最好是先易后难，循序渐进。先修改诸如命名、格式等不涉及具体逻辑的内容，然后再考虑模块化和性能提升等与具体逻辑相关的内容。

重构过程中要持续测试，在多个浏览器中测试，确保重构的部分功能正确。切忌在大量重构后再进行测试，因为大量重构后基本很难记得重构的逻辑，也就有可能遗漏部分测试用例。

如果是性能提升，要事先检测网站的整体性能并量化，找出性能瓶颈。重构过程中要持续监控性能，并对比性能提升的效果。

好啦，上面就是小编为大家整理的web前端项目开发最佳实践——代码重构，如果大家有其它问题，可以登录猪八戒网哦！