Total Pageviews

Thursday, 7 July 2016

模块化的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来解决。

相关学习资料