我的前端之路 ---- 高效开发

前言

好的开发方式在项目中会起到事半功倍的效果，并且可以保证开发过程中代码的结构清晰，可维护性好。良好的命名规范和规整的格式会让代码看起来很清爽，同时也可以体现出开发者良好的开发习惯和职业素养。

代码文件的组织结构

下面贴一张我一般会使用的一个简单的代码组织结构

其实现在有很多的框架的脚手架里面都会有一种固定的文件组织结构，但是你无论看什么框架的脚手架，大体上的东西都是这样的。多的都是一些扩展，是一些框架本身的东西，这种文件组织结构已经形成了一种约定。这样有利于我们开发者之间的沟通。

代码重构

代码重构是业内经常讨论的一个热门话题。代码重构是为了使我们的代码性能和可维护性变得更好。主要分为精简代码、代码规范化、整理基础类库、代码模块化、加载性能优化几个步骤。

• 精简代码主要是css和javascript文件中，其中包括一些不起作用的代码。这是一个非常麻烦的过程需要非常谨慎的处理上下文的关系。主要是写法的优化和实现方式上的优化，尽可能的使我们代码的运行性能高效。

• 代码规范化主要就是结构和样式相分离以及javascript中变量的定义以及作用域的区分。HTML更改标准已不推荐的标签，使用语义化标签。CSS从HTML中分离出来，统一命名规则。Javascript中集中定义局部变量，并把部分全局变量转为局部变量。

• 整理基础类库 是查看由于前期为了开发进度而引入的多个框架中存在很多重复的功能，以及项目中很多相同的功能使用不同的类库实现。重构的内容就是同意ui组建库的使用，同意基础方法的使用。

• 代码模块化主要是根据功能来存放文件。比如实现一个列表页面，我们可以创建list.html、list.css、list.js 这样的文件结构。同时将javascript的公共方法归类到独立的文件中，使用面向对象的思想来进行代码重构，进一步明确共有接口和私有接口。

• 加载性能主要就是说页面的响应速度，即页面内容的呈现时间。我们可以将不影响首页展示的一个javascript代码延迟加载，删除页面中初始隐藏的部分，改为通过javascript 按需动态插入。图片延迟加载；css和javascript的引入顺序；给静态文件设置缓存；使用雪碧图（sprite）；合并并压缩css和javascript代码文件

框架的使用

我们在开发过程中免不了是需要使用一些前端的框架的，因为框架可以大大提高我们的开发效率。

如何选取合适的框架

• 项目需求。项目需求是选择框架的最主要因素之一。我们要了解项目的基本需求，比如模块化、数据格式、浏览器支持、移动端还是PC端等。

• 项目特点。比如开发团队的技术能力、开发的周期、是否需要长期维护。作为开发人员我们不可能每个框架都会，学习一个新的框架是需要成本和时间的。所以我们要根据项目的特点来选取一些合适的框架

• 框架特点。当我们把项目的需求和特点弄清楚之后就要开始选择框架了。但是框架并不是为某一个项目单独定制的。所以我们要考虑一些框架本身的东西，比如是否满足需求、性能如何、文档和demo、技术支持、版权问题、社区环境等多方面因素。

测试

我们任何人都不能保证自己写的代码是百分之百没有问题的。这就需要我们来对对我们的代码进行测试了。

• 浏览器的兼容问题是首要的，但也是很头疼的。虽然现在IE6基本已经退出了舞台，但是IE7、8的市场占有率还是很高的。其表现和标准还是有一定的差距的。一定要多多测试。

• HTML5的兼容性。虽然HTML5的标准已经提出一段时间了。虽然各大主流浏览器也加快了对新标准支持的脚步，但步调并不一致。所以在开发过程中一定要注意使用HTML5新特性时的浏览器兼容问题，做好平稳降级。

集成开发环境

工欲善其事必先利其器。高效的开发怎么能缺少强大的集成开发环境（IDE）呢。推荐一些强大的IDE给你们。

• webstorm 前端开发老大哥级别的IDE 。不解释！

• vsCode 轻量、高效。虽然没有webstorm功能那么强大，不过毕竟人家的免费的，并且插件也很丰富，能很好的满足我们的开发需求。

• sublime 在我的印象中，一般都是大佬或者是前后端都撸的人使用的一款编辑器。插件库非常多。个人感觉还好。(可能是我没有完全研究出使用方法)

• Hbuilder 这个编辑器可以很方便的生成一个项目的类型，比如app或者web 等，也是免费的，并且是国产的哟。喜欢的小伙伴可以去研究下。（听说也是很强大的，暖色调布局）

  我有用过的就这些，当然还有很多。大家可以去网上看一下，根据个人喜好来选择吧。

写在最后

一不小心又到凌晨了1：27 。发现当你真正做一件事的时候，时间往往会过的非常快。个人比较随性，博客不定时更新，希望写的东西能帮助大家在前端路上走的更轻松一些。