愛前端-2016年8月26日-backbone第1天課堂筆記

復(fù) 獲取 安裝 Model模 實例化對 Defaults默認(rèn)屬 Initialize類的構(gòu)造函 下午復(fù) 事件 View視 實例化對 se 綁定事 復(fù)Requirejs配置，為了使用requirebaseUrl定義跟路徑的方式有三種，默認(rèn)以html所在 ，data-main指向文件所在 配置大于data-main，data-main大于html所在baseUrl是從html所在 對象的屬性值表示則Css插件，模塊化加載css第一步在map配置中定義哪 第二步在模塊內(nèi)部在依賴集合中，通過css!css加載模塊，注意css文件要加上.csstext來設(shè)置標(biāo)題的內(nèi)容x，ySeries：表示數(shù)據(jù)列，是一個數(shù)組，數(shù)組中的每個成員表示一條數(shù)據(jù)列，每個數(shù)據(jù)列是一個對象Data表示數(shù)據(jù)列的數(shù)據(jù)，三種定義方式y(tǒng)坐標(biāo)，成員的索引值表示x坐標(biāo)x坐標(biāo)，y坐標(biāo)XYColor屬性表示坐標(biāo)點的顏色column表示樹狀圖Line表示折線（默認(rèn)）Spline表示平滑曲線Pie表示圓餅圖Style屬性定義提示框的樣式（css中樣式，以駝峰式命名）this表示該點的信息，這里定義內(nèi)容是以一種拼接字符串的形式EnabledStyleTitle定義橫坐標(biāo)標(biāo)題（默認(rèn)情況橫坐標(biāo)是不顯示的）text，x，y，styleLabelsEnabledtext，x，y，styleCredits：定義著名（信息的）HrefStylebackgroundColorPadding當(dāng)數(shù)據(jù)列的個數(shù)大于colors數(shù)組長度，此時數(shù)據(jù)列的色彩是根據(jù)該數(shù)據(jù)列的順序?qū)olorsEvents定義事件，在事件回調(diào)函數(shù)中，我們可以通過this圖表dataLabels定義某一點的樣式Format定義渲染模板Enabled定義是否顯示addPointseries原型上的一個方法第三個參數(shù)表示是否刪除最前面的點，默認(rèn)是V通常指我們用戶能看得到的頁面信息C通常指對模型以及視圖處理業(yè)務(wù)邏輯V通常指的是通過數(shù)據(jù)構(gòu)造的視圖，例如輸出給前端頁面V指的是人眼可讀性強(qiáng)的數(shù)據(jù)，例如頁面視圖，彈層，下拉框，人可以控制controllerMVCbackboneMVCbackbone中backboneModelapi操作，并且可以定義一些自定義事件，集合api來操作這些模型，也可定義事件 中文網(wǎng) Backboneunderscorebackbonemodel，collectionapi操作backbone就要首先引入這兩個庫<script<scripttype="text/javascript"<scripttype="text/javascript"<scripttype="text/javascript"Model模第式是構(gòu)造函數(shù)中式new第二種方式繼承類式，varProductBackbone.Model.extend({})，這種方式是常用的方式newProduct實例Attributes表示模型具有的屬性1varproduct=new2price:3456varProduct=//varproduct1=newprice:12//Defaults varProduct=2defaults:3width:4height:5} 7 varproduct1=new9price:width:11Initialize varProduct=23initialize:function(obj) 56if(obj.price!==undefined)78this.attributes.onSale=9}}11 varproduct1=new2price:3width: 下午復(fù)模型通常指機(jī)器可是別的數(shù)據(jù)的，例如對象，json對象，數(shù)組MVC模式的流程是一個單向的BackboneMVCMVC進(jìn)行拓展，強(qiáng)化了模型和視圖，弱化了控制器new調(diào)用。Extend方法：拓展類的方法，該方法接受一個對象，這個對象就是我們拓展的一些方法和屬性，注意有一些內(nèi)CididGetjquery，attr，css方法使用方式相似， p1.set('width', 367price:address p2.set('price',384,{silent:jqueryon方法很像，on方法中我們可以傳遞兩個參數(shù) varProduct=23initialize:function(obj)4//this.on('change',function(model)5////priceonsale6//if(model.attributes.price!==undefined)7model.attributes.onSale=8//9//////////this.on('change:price',function(model)console.log(111,}17hasChanged方法來判斷 p1.unset('width',p1.unset('width',{validate:p1.unset('price',{validate:View視ViewBackbone視圖模塊，我們看到頁面都是在個類中的實例化對象上渲染的。Backbone.Viewnew關(guān)鍵字Backbone.View.extend創(chuàng)建一個拓展類，通過拓展類實例化視圖對象attributes中了實例$eljqueryEldomCidid，它是唯一的， varview=new2tagName:3id:4className: 7varTitle=vartitle=newtagName:id:className:1415varTitle=tagName:className:id:23vartitle=new varTitle=2el: vartitle=new6//el:7// 視圖 varTitle=2el:3initialize:function()45//6// 78background:9}11<%=key%key varProduct=2defaults:3price:4text包郵5} varprouct=new varTitle=9//model:el://tpl:tpl:initialize:function()vardata=vartpl=varhtml=}2829vartitle=newmodel:31定義在render方法務(wù)邏輯需要我們手動渲染，不會自動渲 varContainer=2initialize:function()3render:function()45varitem=new66model:789//}15綁定事events屬性中，events屬性值是一個對象， varProductView=23events:4567//'click.pricespan.right'