backbone學習

時間 2019-12-01

標籤 backbone 學習简体版

原文原文鏈接

backbone裏不少思想都與後臺有關，若是有後臺語言基礎的學習起來比較簡單。php

它是一個MVVM模型，由於我以爲前端MVVM，比MVC好理解，雖然它也是MVC，但html

C的概念很模糊，由於前端mvc的c很很差理解，但mvvm就很簡單。前端

backbone不少方法都要本身new，就像你作了個模子，而後不斷的印出你要的樣子。java

backbone-Modeljquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery.js"></script>
    <script src="./backbone/underscore.js"></script>
    <script src="./backbone/backbone.js"></script>
</head>
<body>
    
    <script>

    /* Backbone.Model.extend() 繼承了Backbone.Model()
    Backbone.Model.extend()  至關於建立一個類   而後new 實例化
    傳入的對象屬性會存放在attributes裏
    */
    var Note=Backbone.Model.extend({
        defaults:{title:"默認值"},
        initialize:function(){
            console.log("建立一個記錄:"+this.get("title"));
            this.on("change:title",function(m,opt){
                console.log("m:");
                console.log(m);
                console.log("opt:");
                console.log(opt);
                console.log("change");
            });
            this.on("invalid",function(m,err){
                console.log(err);
            });
        },
        validate:function(attrs,options){
            /*console.log(attrs);
            console.log(options);*/
            if(attrs.title.length<3){
                return "哈哈";
            }
        }
    });
    var note1=new Note({"title":"zhang"});
    /*都是對於屬性操做的*/
    /*
    增刪查改
    set(),unset(),has(),set()
    獲取
    get()
    默認值
    defaults
    Backbone.Model.extend({defaults:{...}})
    初始化
    initialize
    監聽事件 on()
    有change  this.on("change",function(model,option){})
                this.on("change:title",function(){})
    驗證:
    validate
    在屬性改變時加上{validate:true} 開啓驗證
    返回錯誤信息

    監聽錯誤信息
    invalid
     */
    

    </script>
</body>
</html>

backbone-viewajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery.js"></script>
    <script src="./backbone/underscore.js"></script>
    <script src="./backbone/backbone.js"></script>
</head>
<body>
    
        <!-- 
            underScore 庫的html模板 
            _.template(html)
            傳入對象{...}
            變量爲key
            變量獲取使用 <% = 變量 %>
            相似jsp
        -->

         
    <script type="text/template" id="list1">
    <ul>
        <p><%= txt %></p>
        <small><%= name %></small>
    </ul>
    </script>

    <script>
    var Model=Backbone.Model.extend();
        /*
        視圖 BackBone.view.extend()
         html模板
         tagName
         className
         attributes
         */
        var viewNode=Backbone.View.extend({
            "tagName":"p",
            "className":"txt",
            attributes:{
                "data-id":"txt"
            },
            template:_.template($("#list1").html()),
            render:function(){
                this.$el.html(this.template(this.model.attributes));
                $("body").append(this.el);
            }
        });
        var m=new Model({name:"張志成",txt:"一二三四五"});
        var view1=new viewNode({model:m});
        view1.render();
        /*
        el 屬性
        $el jq對象
        render() 渲染html,即調用對象中的render函數
         */
        
        
    </script>
</body>
</html>

backbone-collectionchrome

這個要說說，若是有java基礎的很好理解，就是集合，方便操做數據的集合。api

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery.js"></script>
    <script src="./backbone/underscore.js"></script>
    <script src="./backbone/backbone.js"></script>
</head>
<body>
    
    <script>
    var Note=Backbone.Model.extend({
        initialize:function(){
            console.log("建立Model:"+this.get("id"));
        }
    });
    var note1=new Note({txt:"一天",id:"a"});
    var note2=new Note({txt:"二天",id:"b"});
    var note3=new Note({txt:"三天",id:"c"});
    /*集合  與java相似*/
    /*增刪改查
    add 在沒有設置{"merge":true}時，雖然添加過但不會真正添加到裏面去
    但能夠監聽到
    {at:index}
    {at:1}
    就是手動設置索引號，這樣能夠設置添加的位置
    remove
    remove(note1)
    reset
    從新定義集合
    pop
    刪除最後一個
    shift
    刪除第一個
    push
    unshift

    */
    var Collection=Backbone.Collection.extend({model:Note,
        initialize:function(){
            this.on({
                add:function(model,c,opts){
                    console.log("add");
                },
                remove:function(model,c,opts){
                    console.log("remove");
                },
                change:function(model,opts){
                    console.log("change");                    
                }
            });
        }});
    var c=new Collection([note1,note2,note3]);
        c.add({id:"a",ccc:"sasa"},{"merge":true});
        //c.remove(note3);
        /*set
            能夠把存在的模型就會合並，
            不存在就添加
            若是不想刪除set沒有傳進來的，能夠設置{remove:false}
        */
    /*
        獲取集合
        從ID get(index)
        從索引 at(index)
     */
    </script>
</body>
</html>

backbone-view-model-collection-routephp框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery.js"></script>
    <script src="./backbone/underscore.js"></script>
    <script src="./backbone/backbone.js"></script>
</head>
<body>
    <div id="container"></div>
    <script type="text/template" id="temp">
        
            <span><%= id %></span>
            <span><%= name %></span>
            <p><%= txt %></p>
        
    </script>
    <script>
    /*增刪能夠對collection進行操控
        改能夠對model進行操控
        on監聽的第三個參數是指向，就是上下文環境
    */
    var Model=Backbone.Model.extend({
        initialize:function(){
            this.on("change",function(model,opts){});
        }
    });
    var Collection=Backbone.Collection.extend({model:Model});
    var UlView=Backbone.View.extend({
        tagName:"ul",
        className:"ul",
        attributes:{},
        initialize:function(){
            //$("#container").append(this.el);
            this.collection.on("add",this.addOne,this);
            this.render();
        },
        addOne:function(m){
            //console.log(m);
            var vView=new LiView({model:m});
            this.$el.append(vView.render().el);
        },
        render:function(){
            this.collection.each(this.addOne,this);
            return this;
        }
    });
    var LiView=Backbone.View.extend({
        tagName:"li",
        className:"li",
        template:_.template($("#temp").html()),
        initialize:function(){
            this.model.on("change",this.change,this);
        },
        change:function(m){
            this.render();
        },
        render:function(){
            this.$el.html(this.template(this.model.attributes));
            return this;
        }
    });
    var note1=new Model({"id":"a","txt":"哈哈","name":"張志成"});
    var note2=new Model({"id":"b","txt":"哈哈aaa","name":"張志成"});
    var note3=new Model({"id":"c","txt":"哈哈vvv","name":"張志成"});
    var c=new Collection([note1,note2]);
    var view=new UlView({collection:c});
    /*路由*/
    /*:變量，會返回給指定函數
        可選性輸入(...)
        *是隨意長度路徑，會把*的路徑返回出來
        navigate是跳轉，但不在歷史記錄裏，設置trigger就是能夠有了

    */
    var Route=Backbone.Router.extend({
        routes:{
            "a(/page/:id)":"index",
            "a/:id":"show",
            "login(/form/*form)":"login"},
            login:function(form){
                console.log(form);
                console.log("請先登陸。。。");
            },
        index:function(id){
            console.log("index"+id);
            if(id){
                this.show(id);
                return ;
            }
            $("#container").append(view.el);
        },
        show:function(id){
            this.navigate("/login/form/a/"+id,{trigger:true});
            var m=c.get(id);
            console.log(m);
            var v=new LiView({model:m});
            $("#container").html(v.render().el);
        }
    });
    var r=new Route();
    /*監聽hashchange,就是操做歷史管理*/
    Backbone.history.start();

    /*fetch  須要後臺php框架配合實現直接返回集合，collection.fetch()會發送ajax，返回集合*/
    /*使用一整套backbone框架能夠實現從前端到後臺的結合*/
    /*使用chrome 插件postman 能夠很方便看到數據的返回*/
    </script>
</body>
</html>