初識輕量級前端開發框架backbone

這款前端開發javascript框架在業內已是大名鼎鼎了，可是樓主尚未接觸過，看風評這年頭不懂backbone怎敢出去裝

這幾天的工做還算是不緊張，速度充電

 

基於underscore、非強制性依賴jquery/zepto的前端javascript框架

backbone.js是一款web前端開發的javascript輕量級MVC框架；依託此框架，咱們能夠像高級語言同樣定義類、類屬性及方法，更好的組織代碼並按框架提供的數據邏輯分離方法減小代碼混亂

 

本文須要的文件

須要下載這3個js文件：zepto（jquery的替代品，你能夠把它理解爲jquery的mini版）、underscore、backbone

<script src="js/zepto.min.js"></script>
<script src="js/underscore.min.js"></script>
<script src="js/backbone.min.js"></script>

 

backbone的4大模塊

模型：Backbone.Model，一個數據模型

集合：Backbone.Collection，數據模型的一個集合

視圖：Backbone.View，數據處理，注意它並不是咱們傳統認知中的頁面模版

路由：Backbone.Router，路由配置

 

模型

這是一個標準的對象模型（數據假定爲網站最多見的用戶），initialize爲初始化方法，默認執行定義的函數或監聽必要的事件；defaults爲初始化參數，定義的參數將做爲對象模型的默認參數

var User = Backbone.Model.extend({
    initialize : function(){
    },
    defaults : {
        name : '大白兔'
        lang : '漢語'
    }
});

實例化對象模型User，並得到對象屬性attributes，輸出的數據結構爲：Object {name: "大白兔", lang: "漢語"}

var user = new User;
console.log(user.attributes);

調用set方法設置對象模型指定屬性、get方法能夠得到對象模型指定屬性值

var user = new User;
user.set({name : '小白兔'});
console.log(user.get('name'));

初始化方法initialize中監聽屬性變化事件change並在回調中自定義屬性變化的信息提示

var User = Backbone.Model.extend({
    initialize : function(){
        this.bind('change:name', function(){
            console.log(this.attributes);
        });
    },
    defaults : {
        name : '大白兔',
        lang : '漢語'
    },
});

var user = new User;
user.set({name : ''});

調用save方法提交對象模型數據、設置數據提交地址url

var User = Backbone.Model.extend({
    url : '/'
});

var user = new User;
user.save();

既然準備提交對象模型數據了，數據驗證方法validate中自定義數據校檢方法、初始化方法initialize中監聽提交失敗事件error並在回調中自定義返回錯誤的信息提示；一個關於模型的完整demo

var User = Backbone.Model.extend({
    url : '/',
    initialize : function(){
        this.bind('change:name', function(){
            console.log(this.attributes);
        });
        this.bind('error', function(){
            console.log('數據提交失敗');
        });
    },
    defaults : {
        name : '大白兔',
        lang : '漢語'
    },
    validate : function(obj){
        if(obj.name.length < 2) console.log('暱稱太短');
    }
});

var user = new User;
user.set({name : ''});
user.save();

 

集合

如今咱們要把實例化對象模型的數據存放在實例化對象集合中，就需用到集合了，這裏有點繞，樓主在這裏繞了好久；能夠理解爲經過改變集合Users的屬性model的值爲模型User，從而指定了與集合Users相關聯的模型，這裏的模型是User

var User = Backbone.Model.extend({
    initialize : function(){
    },
    defaults : {
        name : '',
        lang : ''
    }
});

var Users = Backbone.Collection.extend({
    model : User
});

實例化對象集合，併爲對象集合添加add一組需按模型模式實例化的指定數據，而後打印對象集合內全部模型數據

var users = new Users;

var arr = [['大白兔', '漢語'], ['貝克漢姆', '英語'], ['齊達內', '法語']];
for(var i = 0; i < arr.length; i ++){
    var user = new User({
        name : arr[i][0],
        lang : arr[i][1]
    });
    users.add(user);
};

users.each(function(obj){
    console.log(obj.attributes);
});

初始化方法initialize中監聽數據添加事件add並在回調中自定義數據添加後的信息提示

var Users = Backbone.Collection.extend({
    initialize : function(){
        this.bind('add', function(obj){
            console.log('add', obj.attributes);
        });
    },
    model : User
});

既然是數據，就有添刪改；有了添加事件，對應的對象數據刪除事件remove、對象數據改變事件change；一個關於集合的完整demo

var User = Backbone.Model.extend({
    initialize : function(){
    },
    defaults : {
        name : '',
        lang : ''
    }
});

var Users = Backbone.Collection.extend({
    initialize : function(){
        this.bind('add', function(obj){
            console.log('add', obj.attributes);
        });
        this.bind('remove', function(obj){
            console.log('remove', obj.attributes);
        });
        this.bind('change', function(obj){
            console.log('change', obj.attributes);
        });
    },
    model : User
});

var users = new Users;

var arr = [['大白兔', '漢語'], ['貝克漢姆', '英語'], ['齊達內', '法語']];
for(var i = 0; i < arr.length; i ++){
    var user = new User({
        name : arr[i][0],
        lang : arr[i][1]
    });
    users.add(user);
};

user.set({
    name : '卡恩',
    lang : '德語'
});

users.remove(user);

 

視圖

本想把視圖也一塊兒寫完，可是發現視圖必須有相對應模型，因而視圖模型的合做纔是重點，雖然樓主也作好了例子但還不甚了了，待成熟後再專門說省得誤人誤己，只留一個demo

underscore爲咱們提供了模板引擎，書寫格式以下所示，相似於jquery tmpl

<ul class="user"></ul>

<script id="user_tmpl" type="text/template">
<li><p><%=name %></p><div><%=lang %></div></li>
</script>

而後是javascript部分，這部分還沒思索透具體理解暫不寫

var User = Backbone.Model.extend({
    defaults : {
        name : '',
        lang : ''
    }
});

var Users = Backbone.Collection.extend({
    model : User
});
var users = new Users;

var Userv = Backbone.View.extend({
    initialize : function(){
        _.bindAll(this, 'render');
        users.bind('add', this.render);
    },
    el : '.user',
    template : _.template($('#user_tmpl').html()),
    render : function(){
        $(this.el).append(this.template(this.model.toJSON()));
        return this;
    }
});

var arr = [['大白兔', '漢語'], ['貝克漢姆', '英語'], ['齊達內', '法語']];
for(var i = 0; i < arr.length; i ++){
    var user = new User({
        name : arr[i][0],
        lang : arr[i][1]
    });
    users.add(user);
    new Userv({
        model : user
    });
};

 

同php交互方式

$data = json_decode(file_get_contents('php://input'));
die(json_encode($data));

 

網上的文檔其實不少，可是每一個人的理解方式能力各不相同，不一樣的人可能須要不一樣的文章才能理解下去，樓主因而把本身的理解方式留下來