欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

javascript MVC框架学习笔记

程序员文章站 2022-04-28 23:07:37
...

一、开篇

源于单页web app应用的开发效率低下,最近了解了一下javascript MVC开发相关资料

之前对javascript的了解仅仅是停留在能较熟练的使用jquery上。《基于MVC的javascript web富应用开发》这本书入门还是比较不错的,不过书有点老了。

一大堆开源框架,backbone\canjs\agularjs\requirejs\seajs\zepto

一大堆概念,model\view\control\jsonp\route\ejs\依赖管理\异步加载\Commonjs\AMD

 

二、一切的一切其实都源于node.js的流行

一切的一切其实都源于html5标准和node.js流行。Web服务性能测试:Node完胜Java

node.js到底是啥?如果开发过j2ee的同学都知道servlet,看看这段代码:

 

var http = require('http');
http.createServer(function handler(req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello World\n');
}).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');
 handler(req, res),这不就是doGet(HttpServletRequest req, HttpServletResponse res)吗。

那node.js和javascript MVC有啥关系呢?相信大家不会拿纯粹的servelt来开发大型的web应用,都会用到struts、springmvc等MVC框架。于是有了nodejs的web开发框架expressjs。expressjs有点类似于j2ee开发中的spring。

spring的核心是DI(依赖注入),那nodejs怎么加载模块的呢,于是有了CommonJS规范。

nodejs也少不了MVC,expressjs中都已经实现,有兴趣的同学可以详细看看。

nodejs也少不了ORM,框架也很多,大家自己google。

nodejs也少不了模板(类似velocity、freemarker),于是有了ejs标准,和各种开源实现。

 

 

三、前端开发中的MVC应用

nodejs的MVC和javascript前端的MVC,到底是前者影响了后者还是后者影响了前者,不得而知,我更倾向于是nodejs影响了javascript的开发模式。于是javascript的前端开发也开始使用MVC模式和模块化开发。

 

  • MVC框架的选型

 backbone\agularjs\canjs是我个人目前比较推荐的三个MVC开源框架,前面两种较流行,特别是agulajs势头很猛:

JavaScript MVC 框架技术选型

backbone更适合入门和概念学习,应用在PC端的web应用开发也和比较合适。

agularjs的概念很新,也很好。学习成本稍微高点,不像backbone那样包容。

canjs是更适用手机端的web应用开发也比较包容。

 

  • js依赖和异步加载的选型

 上面说道了commonjs。前端开发也有依赖的问题。而且js文件越来越多,不便于管理,于是AMD标准出现了。AMD是在commonjs标准上发展起来的,主要应用在客户端。requirejs是AMD的一个实现。也有commonjs的实现应用在前端的,那就是淘宝的seajs。

选requirejs还是seajs争论很大。我的建议是:

PC端用requirejs;

手机端最好目前都别使用(自己实现一个简单的异步加载就可以了,不需要模块化开发),如果应用庞大到非要模块化开发,那使用seajs更合适。

 

总结:

PC端javascript MVC开发框架:requirejs+backbone/agularjs+jquery

MOBILE端javascript MVC开发框架:seajs/自己实现异步加载+canjs/agularjs+zepto

 

四、不得不提的打包

模块化开发带来的好处不言而喻,但是对于前端还是如果不代码那是一场灾难,每个模块一个js文件,如此多的js文件加载是多耗时的一件事。requirejs和seajs都提供了打包方法:

requirejs优化工具

seajs构建工具

grunt,javascript构建工具,类似java的ant