Vue代码的编写方便是因为数据响应式—— Vue API 已经替程序员完成将数据通过DOM操作渲染页面上的步骤。JQuery 没有实现“数据响应式”，只是将Dom操作的API从原生做了简化。所以使用JQuery编写前端代码时只能手动实现。然而Vue的Model和View分离的思想值得我们借鉴。
State、Template、Method、Hook 示例
示例代码如下：
const state = {
domTemp : null,
}
// dom state 存储
const setDomTemp = function () {
state.domTemp = $('domTemp selector');
}
// 渲染目标Dom模板
const renderDomTemp = function (data) {
const domTempEle = state.domTemp.clone();
domTempEle.remove();
// 对domTempEle进行赋值;
// 绑定事件操作
domTempEle.find(...).text(...)
$(目标位置).append(domTempEle)。
$(目标位置).html(domTempEle)。
}
// ajax请求数据
const fetchData = function () {
$.ajax(url,param,function(res){
const data = res.data;
renderDomTemp(data);
})
}
// 相当于vue中Mounted
$(function(){
setDomTemp()
fetchData()
})
上面state.domTemp，setDomTemp，renderDomTemp 共同组成响应式的实现。数据返回后调用renderDomTemp(data)即实现数据的渲染。
- $(function(){})相当于Vue中Mounted。
- v-if, v-show 通过JQuery中hide(),show()方法实现。
组件封装
为了更好的实现复用，将同一组件相关的state.domTemp，setDomTemp，renderDomTemp封装成一个class。
class CustomCompnent {
domTemp = `<div>.....</div>`
constructor(option) {
...
}
// dom state 存储
setDomTemp () {
state.domTemp = $('domTemp selector');
}
// 渲染目标Dom模板
renderDomTemp (data) {
const domTempEle = state.domTemp.clone();
domTempEle.remove();
// 对domTempEle进行赋值;
// 绑定事件操作
domTempEle.find(...).text(...)
$(目标位置).append(domTempEle)
$(目标位置).html(domTempEle)
}
// 将组件有关的样式渲染style或者引入组件相关的样式文件
renderStyle(){
}
}
接下来，引入组件，按照所需渲染即可。
