requirejs+backbone+jquery+underscore+jasmine等技术整合集成
现在JS脚本也讲究MVC结构，所以在闲暇的时候查阅了相关资料。使用backbone实现MVC。很多地方都会提到requirejs，一个异步模块加载器。感觉这个东西很高大上，然后就与backbone结合使用。在查询requirejs配置的时候，发现可以与node.js结合使用来做脚本整合。
build文件是在做node整合JS脚本的时候的配置文件，config文件是requirejs的配置文件。optimize是个批处理，执行node的文件整合。关于node整合的说明可以参考这篇文章http://www.oschina.net/translate/optimize-requirejs-projects
scripts文件
我也做了简单的分层app放的是入口文件，libs放的是一些库文件例如backbone、jquery等，util我放了一些工具文件例如const存放一些常量等，另外三个就是MVC文件了。config文件如下：
// Author: Pwstrick // Filename: config.js // Require.js allows us to configure shortcut alias // Their usage will become more apparent futher along in the tutorial. var require = { paths: { jquery: '../libs/jquery/jquery', mustache: '../libs/mustache/mustache', underscore: '../libs/underscore/underscore', backbone: '../libs/backbone/backbone', dialog: '../libs/artDialog/dialog', dialogPlugins: '../libs/artDialog/plugins/iframeTools.source', extend: '../util/extend', constUtil: '../util/const', templates: '../../view', articleModel: '../models/articleModel', articleView: '../views/articleView' }, shim: { 'backbone': { //These script dependencies should be loaded before loading //backbone.js deps: ['underscore', 'jquery'], //Once loaded, use the global 'Backbone' as the //module value. exports: 'Backbone' }, 'underscore': { exports: '_' }, 'dialog': { deps: ['jquery'], exports: "artDialog" }, 'dialogPlugins': { deps: ['dialog'] }, 'extend': { deps: ['jquery', 'dialog'] }, 'articleModel': { deps: ['extend'] } } };
单元测试框架jasmine
将这个也结合到了自己的结构中。有了这个东西，就能调试出许多潜在的BUG。
jasmine的配置文件
require.config({ baseUrl: "../../scripts/", urlArgs: 'cb=' + Math.random(), paths: { jquery: 'libs/jquery/jquery', underscore: 'libs/underscore/underscore', backbone: 'libs/backbone/backbone', 'backbone.localStorage': 'libs/backbone/backbone.localStorage', extend: 'util/extend', constUtil: 'util/const', jasmine: 'libs/jasmine/jasmine', 'jasmine-html': 'libs/jasmine/jasmine-html', 'jasmine-jquery': 'libs/jasmine/jasmine-jquery', 'jasmine-ajax': 'libs/jasmine/jasmine-ajax', mustache: 'libs/mustache/mustache', spec: '../test/jasmine/spec/' }, shim: { underscore: { exports: "_" }, backbone: { deps: ['underscore', 'jquery'], exports: 'Backbone' }, 'backbone.localStorage': { deps: ['backbone'], exports: 'Backbone' }, jasmine: { exports: 'jasmine' }, 'jasmine-html': { deps: ['jasmine'], exports: 'jasmine' }, 'jasmine-jquery': { deps: ['jasmine'], exports: 'jasmine_jquery' }, 'jasmine-ajax': { deps: ['jasmine'], exports: 'jasmine_ajax' }, 'extend': { deps: ['jquery'] } } }); window.store = "TestStore"; // override local storage store name - for testing //遍历对象中的各种key alertKeys = function(object) { var keys = []; for(var key in object) keys.push(key); alert(keys.join(",")); }; require(['underscore', 'jquery', 'jasmine-html', 'jasmine-jquery', 'jasmine-ajax', 'constUtil', 'extend'], function(_, $, jasmine){ var jasmineEnv = jasmine.getEnv(); jasmineEnv.updateInterval = 1000; var htmlReporter = new jasmine.HtmlReporter(); jasmineEnv.addReporter(htmlReporter); jasmineEnv.specFilter = function(spec) { return htmlReporter.specFilter(spec); }; //设置模板路径 jasmine.getFixtures().fixturesPath = 'spec/fixtures'; var specs = []; specs.push('spec/models/ArticleSpec'); specs.push('spec/views/ArticleSpec'); specs.push('spec/utils/underscore'); $(function(){ require(specs, function(){ jasmineEnv.execute(); }); }); });
使用HTML5标签
加入了一个modernizr库，帮助那些不支持HTML5标签的浏览器可以识别出。在这里我用到了响应式的技术、HTML5技术、模版技术、自定义字体等
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" /> <title>假期闲做</title> <script type="text/javascript">document.cookie='resolution='+Math.max(screen.width,screen.height)+';path=/';</script> <link rel="stylesheet" href="styles/style.css" type="text/css"/> <script src="optimize/libs/modernizr/modernizr.js" type="text/javascript"></script> <script src="optimize/config.js" type="text/javascript"></script> </head> <body> <!--网站页眉开始--> <header class="shortcut" role="banner" aria-label="平文主页"> <div class="wrap nav_wrap"> <nav class="nav" id="shortcut_nav" role="navigation"> <dl> <dd class="cur"> <a href="#">个人主页</a> <div class="corner">◆</div> <ul> <li><a href="#">历史书籍</a></li> <li><a href="#">技术书籍</a></li> <li><a href="#">文化书籍</a></li> </ul> </dd> <dd> <a href="#">已阅书籍</a> <div class="corner">◆</div> <ul> <li><a href="#">历史书籍</a></li> <li><a href="#">技术书籍</a></li> <li><a href="#">文化书籍</a></li> </ul> </dd> <dd><a href="#">技术交流</a></dd> <dd><a href="#">外出旅行</a></dd> <dd><a href="#">个人爱好</a></dd> </dl> </nav> <div class="logo" role="banner">Pwstrick</div> </div> <div class="sawtooth"></div> </header> <!--网站页眉结束--> <div id="slider" class="img_slide wrap" role="main"> <img src="images/img1.jpg" alt="广告" height="400"/> </div> <div class="wrap" id="main"> <ul class="article_list"> <li><a href="#">无障碍网页应用 WAI-ARIA</a></li> <li><a href="#">利用状态模式处理多个模态弹出层的显示隐藏</a></li> <li><a href="#">优秀博客推荐：各种数据结构与算法知识入门经典</a></li> <li><a href="#">迷你MVVM框架</a></li> </ul> <script type="text/template" id="tpl_article_list"> <a href="javascript:void(0)" id="btnArt">删除添加</a> <ul class="article_list" id="article_list"> {{#article}} <li><a href="#">{{title}}</a></li> {{/article}} </ul> </script> <a href="javascript:void(0)" id="operate">操作</a> <ul class="pages"> <li><a href="#"><</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">></a></li> </li> </div> <script src="optimize/libs/require/require.js" type="text/javascript" data-main="scripts/app/main"></script> </body> </html>
我的表达水平不是很给力，大家有兴趣的话也可以自己去搞个结构，方便自己以后快速开发与积累技术知识，以及验证各种技术。源码下载如下
也可以通过这个链接下载http://download.csdn.net/detail/loneleaf1/7466503
