当前位置:编程学习 > JS >>

seajs+backbone实例

最近看到网上有许多人在讨论前端的框架,抽时间看看前端框架,写点东西算是对自己一个对前端的交代。

看到评论比较多的前端框架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>


运行:

 

 

\
补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,