初識輕量級前端開發框架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));

 

網上的文檔其實很多，但是每個人的理解方式能力各不相同，不同的人可能需要不同的文章才能理解下去，樓主於是把自己的理解方式留下來