模块化JavaScript开发

前端开发的节奏真是日新月异。。。短短几年竟然发展如此迅速,JavaScript 的各种框架库可以说比其他语言的总和还多。Google 家的 AngularJS,和 Facebook 的 React 各领风骚。自己写的前端项目也越来越复杂,单纯的面向过程开发和单文件已经不能满足现有的需求。虽然 ES6 早就引入模块化特性,但是目前的浏览器还没有实现。还需要借助其它前端工具进行编译。。。下面我就顺便介绍下 Web 开发的历史。。。

# Server Rendered

以前开发 Web 项目,全部是服务器来渲染页面,从数据库读入数据,浏览器只负责解释页面,这种情况下不考虑交互性,其实完全不用写任何 JS 代码。但是缺点也很大,处理全部交给服务器,服务器压力大。而且每次都是刷新加载,所以用户体验也不是很好。

# Server-Rendered + AJAX

后来使用 AJAX 无刷新技术,对于简单的登录交互我们没有必要刷新页面,而是直接使用 JS 发送认证数据进行交互和登录。一定程度上减少了服务器的压力。

# Single Page App

后来出现了谷歌的 AngularJS 这样的富客户端 JS 框架,做到了真正的页面和数据分离。全部使用 JavaScript 进行页面的渲染和交互,只向服务器请求必要的数据,并使用 JSON 的数据格式来传输。这样不仅有利于减少服务器压力,而且还可以复用到各种平台。但是 JavaScript 代码变得越来越多和复杂,必须考虑合适的架构和模块化开发才有利于之后的维护。

# Webpack 模块化工具

webpack 模块化工具可以把你写的符合模块化规范的代码进行打包和整合到一个单子文件,这样就可以模块化自己的项目。但是官方文档实在是很难学习,自己琢磨了一段时间才算稍微能上手。并且还遇到点小问题,在此记录下,我们可以使用命令$ npm install webpack -g 安装 webpack.但是我们使用的时候经常还是遇到找不到 webpack 的问题,是因为缺少环境变量NODE_PATH 可以通过设置export NODE_PATH="/usr/lib/node_modules来解决。

# 相关学习资料

webpack 指南 (opens new window)

webpack-howto (opens new window)