关于前端的一点思考

Author：tkorays

最近写前端代码，写着写着就突然开始惆怅、忧伤、愤怒、发狂，我TMD到底在干什么啊！

很多东西写了n遍了，但是还是在不停地写着。自己写过的代码也不想再修改完善、重新利用，只是觉得，可能重新写一遍可能要好点。面对这很多库以及框架，虽然喜爱，但是也是有所顾忌，我只要使用其中的一个功能，根本不需要引入这么大的整个库。

事实上，我们可能在动手写任何代码之前，先要思考下，我们到底要的是什么！

0x00 界面真的需要这么炫酷么

在使用某个界面库之前，我们可能先需要了解下，使用这个界面库是否值得，你真的非需要它不可吗？

如果你写一个简单的页面，可能自己可以实现一些效果；如果你写一个博客，可能你会考虑使用bootstrap；如果你要做一个比较大的网站，那么你可能要考虑得要多了。

• 某些效果自己能否实现
• 其他库是否提供了现成的实现方案
• 使用其他库是否值得，它是否很大，是否难以集成，学习成本是否高
• 你的页面真的需要这么炫酷吗

其实，很多时候我们需要取舍一下。你自己慢慢敲，实现了炫酷的功能却不能在期限内完成任务，这是一件多么忧伤的事情！最后你才发现，功能以及界面的友好才是重要的哦，太炫酷而没有实现功能或者交互十分蛋疼，用户也是会吐槽的。

0x01 前端自动化

最近前端里面比较火的工具可能要算上Grunt、gulp等了。

它对我的帮助的确不少！

• 把less写好的样式表编译成css
• javascript、css文件的合并和压缩
• 修改了文件保存后，页面自动刷新
• 更改文件后，自动完成编译less、合并压缩文件等任务

所以我们可以放心地使用less、coffescript来编写，不用自己去完成编译、合并、压缩这样繁琐的过程。

同时我们可以自己配置grunt、编写grunt插件，完成更多功能。

不过，我觉得一个小的页面就不要使用grunt这样的大东西去找虐了。

0x02 javascript代码模块化

随着业务的复杂，页面增多，我们需要的不再是几个javascript文件。我们需要引入许多的第三方库，自己还编写了很多的模块，如果使用传统的方式：

<script src="lib/a.js"></script><script src="lib/b.js"></script><！-- blabla --><script src="c.js"></script><script src="d.js"></script>

要是需要的js文件多，这样写一大堆，实在不是明智的选择。

因此我们需要将javascript代码模块化，动态加载javascript，必要的时候按需加载。AMD（异步模块定义）、CMD（通用模块定义），都能实现。他们稍微有些区别，这里不去深究。

如果想尝试下这种模块化的方法，可以考虑使用AMD规范的requirejs，也可以考虑使用CMD规范的seajs。很多开源库如jquery，都支持这两种方式的加载。因此，不要犹豫，考虑下使用它们来将你的代码模块化，构建一个结构清晰的应用把。

0x03 前端框架

最近前端的一些框架比较火，比如backbone.js、angular.js、react.js、ember.js。这些框架不同于jquery，确切地说jquery应该被称为库。

框架提供的是一套解决方案或者说模式，而jquery等库提供了dom的操作函数、或是一些页面组件。

这些框架有的是采用了MVC（Model-View-Controller），有的采用MVP（Model-View-Presenter），有的是MVVM（Model-view-View Model）。后两种都是由MVC演变而来。像其他地方的MVC一样，这里也是使用这样的思想对待页面和数据的。

我们知道，在后台我们可能会使用MVC的方式，View代表了要显示的页面。而这样的方式满足不了web2.0的需求，我们使用服务器端脚本生成页面发送到浏览器，浏览器还要通过ajax请求数据，更新页面内容，这样做似乎让逻辑复杂。现在对于前端页面来说，数据处理似乎也是需要一套方式。

这些框架有的（不太了解所有框架，不知道是否全部都支持双向绑定）有数据双向绑定的功能（如angular.js），数据流通的方向可以是页面到json对象（页面更新数据也更新），也可以是由json对象到页面（数据更新页面也更新）。在angular.js里面，数据是自动更新的，这样做实在太方便了，构造了数据与页面的映射关系，编写太多代码更新页面或者获取数据。

在使用之前，得考虑，是否真的需要它。如果你的网页有很多的ajax，接收到很多的json数据，并且需要更新到页面上，那么，或许你应该试试他们。

0x04 后记

做前端是有趣的，但是也是要清楚你到底需要什么！只选最合适的，不选最牛逼的。