JQuery 类似Vue.js的双向数据绑定器

Html

Css

Js

;(function($) { BindSysnc.pt = BindSysnc.prototype; BindSysnc.pt.init = function(selector) { var $allBinds = $(selector).find("[data-bind]"); var $container = $("<div class='data-bind-contanier'></div>"); var data = {}; var share = new ShareSync(selector); for(var bindIndex = 0; bindIndex < $allBinds.length; bindIndex++) { var oldElement = $($allBinds[bindIndex]); var bindElement = oldElement.clone(true); var convertElement = $container.clone(true); convertElement.css("display", oldElement.css("display")); convertElement.append(bindElement); var dsi = $("<div data-bind-value></div>"); bindElement.attr("data-share-excute", "false"); bindElement.on("propertychange input focus blur DOMNodeInserted", function(e) { if($(e.target).attr("data-share") !== undefined) { $(e.target).unbind("propertychange"); } var value = $(e.target).attr("data-bind") === "value" ? $(e.target).val() : $(e.target).html(); data[$(e.target).attr("vname")] = value; $(e.target).parent().children("[data-bind-value]").html(value); share.share(data); }); convertElement.insertAfter(oldElement); oldElement.remove(); } this.data = data; this.isAutoShare = false; var that = this; var timer = new TimerSimulator(function(count){ share.share(that.data); },500,"test"); this.startAutoShare = function(){ timer.start(); } this.stopAutoShare = function(){ timer.stop(); } if(this.isAutoShare){ this.startAutoShare(); } }; BindSysnc.pt.init.prototype = BindSysnc.pt; /** * 绑定事件 * @param {Object} selector */ function BindSysnc(selector) { return new BindSysnc.pt.init(selector); } window.BindSysnc = BindSysnc; window.$B = BindSysnc; function ShareSync(selector) { this.share = function(data) { var $allShares = $(selector).find("[data-share]"); for(var shareIndex = 0; shareIndex < $allShares.length; shareIndex++) { var oldElement = $($allShares[shareIndex]); var keyName = oldElement.attr("vname"); if(oldElement.attr("data-share") === "value") { oldElement.val(data[keyName]) } else { oldElement.html(data[keyName]); } } } } /** * 定时模拟器 * * @version 2017-03-01 * * @returns */ function TimerSimulator(task, times, name) { /** 类名 */ this.imClassName = "TimerSimulator"; /** * 计数器 */ this.counter = 0; /** * taskId */ this.taskId = null; /** * 时间 */ this.times = times; /** * 任务 */ this.task = task; /**定时器名称*/ this.name = name; /** * 启动定时任务（模拟） */ this.start = function start() { var that = this; // 保存当前对象this that.counter++; that.taskId = setTimeout(function() { that.start(); }, that.times); if(that.task != null && typeof that.task === "function") { that.task(that.counter); } }; /** * 终止定时任务（模拟） */ this.stop = function() { if(this.taskId != null && this.taskId != undefined) { this.counter = 0; clearTimeout(this.taskId); } }; /** * 暂停定时任务（模拟） */ this.suspend = function() { if(this.taskId != null && this.taskId != undefined) { clearTimeout(this.taskId); } }; }; }(jQuery)); //===================================== $(function() { var b = $B("body"); b.data.sex = 111; b.startAutoShare(); setTimeout(function(){ b.data.sex = 123124124; },22000); }) //=====================================

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

HTML DOM属性介绍：

vname:属性名称 data-share ：表示数据共享，也就是凡是vname值定义相同的都将拥有相同的值。 data-bind：表示绑定数据，当HTML中的数据变化时，JS对象值也随之变化。

其中 data-share,data-bind的取值为：value,html。value表示绑定该区域的值域，html表示绑定该元素的html内容。

构造方法分为两种：

一种

$B("body");
$BindSysnc("body");

二种

new $B("body");//简写
new $BindSysnc("body");

取JS对象中的值

$(function()){
    //body 区域的内容都是一个对象
    var b = $B("body");
 
    b.data;//包含body里对象的值域。
});

从例子中取属性vname定义为性别属性sex. 所以要取最新的sex值可以向下面做

$(function()){
    //body 区域的内容都是一个对象
    var b = $B("body");
 
    var sex = b.data.sex;//取Sex最新的值
});

//你可以通过打开自动共享
  b.startAutoShare();     
//关闭共享
b.stopAutoShare();