不能用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里面设置相应的模板。

后续更新