关于前端的一点思考关于前端的一点思考

74 阅读 0 评论 49 点赞

我是靠谱客的博主甜蜜饼干，最近开发中收集的这篇文章主要介绍关于前端的一点思考关于前端的一点思考，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

关于前端的一点思考

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数据，并且需要更新到页面上，那么，或许你应该试试他们。