不能用vue，還用jquery?XLMVC瞭解下

項目地址

github.com/VikiLee/XLM…

如何使用

只要引入xl-mvc sdk就能夠開始使用啦

<script src="xxxx/xl-mvc.js"></script>
複製代碼

主要特性

• 簡易前端MVC框架，省去繁瑣的DOM操做；
• 支持dom事件和自定義事件，且model和view之間的事件保持一致，即model監聽的事件，預製相對於的view能夠觸發；
• model支持後臺獲取數據，省去麻煩的ajax請求操做和繁瑣的賦值操做
• 經過函數節流的方式防止dom過於頻繁修改；
• 經過md5指紋判斷數據是否改變，沒有改變則不修改dom；

目錄 (Table of Contents)

model

初始化

經過XM.create方法初始化

var model = XM.create({
    url: 'your url',
    params: {
      type: 'carton'
    },
    data: {
      title: 'xxx'
    }
  })
複製代碼

初始化後，若是有url值，則會自動到url對應的後臺拉取數據賦值給該model，記住後臺返回的接口數據必須放在data屬性下，eg:

{
    code: 0,
    data: {
  	title: 'xxx'
    },
    msg: 'msg'
}
複製代碼

屬性

data：Object

data屬性是該model對應的數據，建議先定義好，並設置好默認值，如上面的代碼的title

url: String

若是你想要讓你的mode的data來源於後臺，則須要配置url，配置好url後，會自動拉取該url對應的數據並將response的data屬性對應的值添加到data屬性當中

type: String

默認值是GET，若是你的url和當前的域名不一致，請求數據會有跨域問題，此時須要將type的值設置爲jsonp。

params: Object

object類型，若是url當中須要帶參數，則能夠設置該值，框架會將其轉爲字符串並添加到url的查詢參數當中

methods: Object

object類型，自定義model方法。雖然model有自帶的幾個方法，但也支持自定義方法，而且自動將自定義方法裏面的上下文綁定爲該model。eg:

methods: {
	customeMethod1: function() {
		// your code, this is bind to  model itself
	},
	customeMethod2: function() {
		// your code
	}
}
複製代碼

listeners

object類型，無論是model仍是view，都支持事件，listeners設置自定義事件，key-function對，key爲事件名，function爲事件處理函數。eg:

listeners: {
	eventName1: function() {
		// your event handle code
	}
}
複製代碼

watch

object類型，監聽屬性的變化，key-function對，key爲屬性名，function爲當屬性變化時執行的回調函數。回調的第一個參數是新值，第二個參數是舊值。eg:

watch: {
	title: function(newVal, oldVal) {
		// your code
	}
}
複製代碼

方法

get(attribute)

經過get方法能夠獲取到model的data對應的屬性，固然也可使用.操做符獲取，但建議經過get方式來獲取，eg:

model.get('title') // xxx 等同於model.title
複製代碼

set(attribute, [value|ifRender], [ifRender])

經過set方法能夠設置model的data值。attribute能夠是簡單的值，也能夠是object，當attribute是簡單的值的時候value是屬性對應的值。當attribute是object的時候，value是ifRender。 ifRender表示設置爲true的話，model對應的view會從新渲染，因此建議若是有頻繁修改多個attribute且ifRender爲true的時候，請使用下面第二種方式設置。eg:

// 設置data的某個attribute的值
model1.set('title', 'xxx')
// 設置多個attribute的值
model2.set({
	title: 'xxx',
	name: 'yyy'
})
複製代碼

on(event, callback)

model監聽事件，在 mode 上綁定一個callback回調函數。 只要event觸發，該回調函數就會調用，而且回調函數的this綁定爲該model。 該函數和listeners設置的事件能夠達到相同的效果，二者皆能夠監聽事件。 只有該model或者該model(view的$model屬性指定的model)對應的view才能夠觸發on或者listeners直接的事件。若是想要跨model/view觸發/監聽事件，請使用XEvent對象。

trigger(event, [*args])

model觸發事件，觸發model/view對應監聽的事件。若是想要給事件處理函數callback傳參數，請設置args值。

reset()

清空model的數據。

resetParams(params)

重置model的params屬性，而且會從新拉取數據（params都改了，數據能不從新拉取嗎），適用於刷選條件

fetchData([ifRender])

拉取後臺數據，ifRender爲true的時候，拉取完對應的view會自動渲染數據。

getMoreData([succ])

拉取更多數據，數據分頁的時候經常使用。在succ回調函數裏面會傳入response的data值，通常succ函數就用來將新拉取的數據append到原來的數據上面，或者重寫原來的數據

refresh([initData])

更新model數據，該方法會到後臺從新拉取數據，在輪詢的時候經常使用到。initData有值的時候，會將initData做爲model的初始值添加到後臺拉取的數據上

鉤子函數

afterReady()

該方法會在數據拉取完後調用，若是須要在數據拉取完之後進行一些列的操做的話，請定義該函數，好比後臺返回的數據不能直接拿來用，須要進一步進行計算才能使用的狀況下

view

初始化

var view = XV.create({
    $model: model,
    $el: "#view",
    template: $("#viewTpl").html(),
    autoRender: true
  })
複製代碼

屬性

$el: String|DOM 必填

view須要渲染的dom元素的選擇器/Dom對象，會將該view渲染到該dom下

template: String 必填

設置view對應的模板，是underscore語法的模板

$model: model 必填

view對應的model，view渲染的數據來源於該model

autoRender: boolean

該屬性定義了在model拉取完接口數據後要不要自動渲染到Dom當中，默認是false

events: Object

該屬性以鍵值對的方式指定dom事件以及事件處理函數，事件處理函數須要在methods屬性定義，參考下面的methods方法。 eg:

events: {
	"click #id": "handleClick"
}
複製代碼

其中key必須用字符串包起來，以domEventselector的格式定義，value是methods屬性指定的一個方法。 對於input propertychange這類須要空格隔開的事件，須要將空格改成「:」，這樣定義key

events: {
	"input:propertychange #id": "inputChange"
}
複製代碼

methods: Object

同model的的methods，不一樣的地方在於methods的回調函數是經過events裏面指定的回調函數時，回調函數的第一個參數會是HTMLDOM的event對象。eg:

methods: {
  handleClick: function(event) {
    // your handle code goes here
  }
}
複製代碼

listeners: Object

同model的listeners

方法

on(event, callback)

view監聽事件，在 view 上綁定一個callback回調函數。 只要event觸發，該回調函數就會調用，而且回調函數的this綁定爲該view。 該函數和listeners設置的事件能夠達到相同的效果，二者皆能夠監聽事件。 只有該view或者該view對應的model(view的$model屬性指定的model)才能夠觸發on或者listeners直接的事件。若是想要跨model/view觸發/監聽事件，請使用XEvent對象。

trigger(event, [*args])

view觸發事件，觸發model/view對應監聽的事件。若是想要給事件處理函數callback傳參數，請設置args值。

render()

該方法進行dom的渲染，在model確切告訴view要渲染的時候會自動調用，或者用戶也能夠手動調用，若是view的autoRender設置爲false的話，則須要手動調用來實現視圖的渲染

鉤子函數

beforeCreate()

view初始化前調用

created()

當view初始化後調用

beforeRender()

view調用render前調用

rendered()

當view渲染完視圖時調用

XEvent

XEvent可用於監聽以及觸發全局事件，可以跨view和model實現事件的監聽和觸發

監聽全局事件 XEvent.on(event, [handler([*args])])

這樣就能夠監聽event事件了，eg：

XEvent.on('eventName', function(){
  // your code goes here
})
複製代碼

觸發全局事件 XEvent.emit(event, [*args])

這樣就能夠監聽event事件了，eg：

XEvent.emit('eventName', arg1, arg2, ....);
複製代碼

Modal模態框

模態框在開發中常常使用到，能夠經過XL.Modal來輕鬆地實現一個模態框的顯示和關閉，以及關閉後或者點擊肯定後執行的回調。
若是但願模態框裏面的內容是動態的，初始化的時候設置$model屬性，且須要按照下面約定設置模態框DOM結構。

DOM結構約定

模態框的最外層的元素id屬性必須有設置，模態框容器必須含有類名pop-container，若是你但願你的模態框內容是動態的，須要在pop-container下包含類型爲pop-template的元素，pop-template元素下爲underscore的模板語法。eg:

<!--最外層，id設置爲pop-->
<div style="display: none" class="pop-wrapper" id="pop">
    <!--罩層-->
    <div class="cover"></div>
    <!--模態框容器，必須有類名pop-contaner-->
    <div class="pop-container">
      <!--動態內容模態框，須要有類名pop-template，裏面有underscore模板語法-->
      <div class="pop-template">
        <span class="pop-close">×</span>
        <h3><%=title%></h3>
        <div class="pop-content">
          <%=content%>
        </div>
      </div>
    </div>
  </div>
複製代碼

初始化

經過new XL.Modal(option)的方式進行初始化，option包含如下屬性：

id: String 必填

模態框元素的id，等於模態框DOM結構最外層設置的id屬性

closeBtn: String

選擇器，指定選擇器對應的元素被點擊的時候模態框關閉

okBtn: String

選擇器，指定用戶點擊「肯定」按鈕的元素

handleOk: function

用戶點擊ok按鈕後的回調，若是想要模態框在點擊「肯定」後關閉，請在該回調中返回值false

cancelBtn: String

選擇器，指定用戶點擊「取消」按鈕的元素

handleCancel: function

用戶點擊取消後的回調。

afterClose: function

模態框關閉後執行的回調。

$model: Model對象

若是想要讓模態框支持動態內容顯示，設置該屬性。在DOM結構中的pop-tempate裏面設置相應的模板。

後續更新