最近看到網上有許多人在討論前端的框架,抽時間看看前端框架,寫點東西算是對自己一個對前端的交代。
看到評論比較多的前端框架backbone,據說很多大公司都在用,所以去官網找到了todos的例子看了一下,的確如大家評論的那樣,我比較熟悉java方面的開發,對於前端框架不是很感冒,但是看完了以後發現學習起來很嗨啊
今天把backbone的官方例子todos給改了一下,讓它能夠與seajs結合起來用,沒啥技術含量,只是爲了瞭解一下backbone與seajs結合的方法
seajs的config配置:
//Change version (xxxxx.v\d+) after modified to clear cache!
var alias={
// modules.seajs.com
'jquery':'js/libs/jquery/1.8.3/jquery',
'$':'js/libs/jquery/1.8.3/jquery',
'underscore':'js/libs/underscore/1.3.2/underscore',
'backbone':'js/libs/backbone/1.0.0/backbone',
'mustache':'js/libs/mustache/0.7.2/mustache',
'json': 'js/libs/json/2/json2',
'jqueryUI':'js/libs/jqueryui/1.8.21/jquery-ui',
'artdialog':'js/libs/artdialog/4.1.2/artDialog',
'iframetools':'js/libs/artdialog/4.1.2/iframeTools',
'localstorage':'js/libs/backbone/1.0.0/backbone.localStorage',
//---css
'todos.css':'./css/todos.css'
};
for (var a in alias) {
alias[a] = base + alias[a];
}
seajs.config({
alias: alias,
map: [
[ /^(.*\.(?:css|js))(.*)$/i, '$1?'+www_version ] // timestamp here, clean the cache
],
preload: [
this.JSON ? '' : 'json'
]
});
todos.js 文件裏需要改一下定義方式,用seajs提供的方式:
define(function(require, exports){
//引相應的依賴lib
require('todos.css'); //引樣式
require('jquery');
require('$');
require('underscore');
require('backbone');
require('json');
require('localstorage');
// Todo Model
// ----------
// Our basic **Todo** model has `title`, `order`, and `done` attributes.
var Todo = Backbone.Model.extend({
。。。。。
todos的html頁:
去掉頁面上所有引用的lib和樣式,因爲在todos.js裏已經按照seajs的方式全部引用了,在todos的html頁加上如下代碼:
</script>
<script src="js/libs/seajs/2.0.0/sea.js"
data-config="./js/config.js"
data-main="./js/model/todos.js">
</script>
運行:
沒改動什麼東西,seajs還是滿好用的,按需加載,不錯!!