Node.js 네이티브 코드는 양방향 데이터 바인딩을 구현합니다(직접 사용할 수 있으며 이미 캡슐화되어 있음).

다음은 양방향 데이터 바인딩을 구현하기 위해 제가 컴파일한 js 네이티브 코드입니다. 관심 있는 학생들은 살펴보세요.

jquery 플러그인으로 패키징되어 있습니다. 코드를 복사하여 Jquery 뒤에 도입하세요.
플러그인 라인을 제거하고 직접 사용할 수도 있습니다.

<!--使用方法-->
<div data-bind-1="name"></div>
<input type="text" data-bind-1="name" />
<script>
    $.DBind(1).set("name", "123");
</script>

(function() {
//封装成jqery插件
jQuery.DBind = function(id) {
return new DBind(id);
};    //下面是具体的实现
function DataBinder(object_id) {
// Create a simple PubSub object
var pubSub = {
callbacks: {},
on: function(msg, callback) {
this.callbacks[msg] = this.callbacks[msg] || [];                    
this.callbacks[msg].push(callback);
},
publish: function(msg) {
this.callbacks[msg] = this.callbacks[msg] || [];                    
for(var i = 0, len = this.callbacks[msg].length; i < len; i++) 
{                        
   this.callbacks[msg][i].apply(this, arguments);
}
}
},
data_attr = "data-bind-" + object_id,
message = object_id + ":input",
timeIn;
changeHandler = function(evt) {
var target = evt.target || evt.srcElement, // IE8 compatibility
prop_name = target.getAttribute(data_attr);            if(prop_name && prop_name !== "") {
clearTimeout(timeIn);
timeIn = setTimeout(function() {
pubSub.publish(message, prop_name, target.value);
}, 50);
}
};        // Listen to change events and proxy to PubSub
if(document.addEventListener) {
document.addEventListener("input", changeHandler, false);
} else {            // IE8 uses attachEvent instead of addEventListener
document.attachEvent("oninput", changeHandler);
}        // PubSub propagates changes to all bound elements
pubSub.on(message, function(evt, prop_name, new_val) {
var elements = document.querySelectorAll("[" + data_attr + "=" + prop_name + "]"),
tag_name;            for(var i = 0, len = elements.length; i < len; i++) {
tag_name = elements[i].tagName.toLowerCase();                
if(tag_name === "input" || tag_name === "textarea" || tag_name === "select") {
elements[i].value = new_val;
} else {
elements[i].innerHTML = new_val;
}
}
});        return pubSub;
}    function DBind(uid) {
var binder = new DataBinder(uid),
user = {                // ...
attributes: {},
set: function(attr_name, val) {
this.attributes[attr_name] = val;                    // Use the `publish` method
binder.publish(uid + ":input", attr_name, val, this);
},
get: function(attr_name) {
return this.attributes[attr_name];
},
_binder: binder
};        // Subscribe to the PubSub
binder.on(uid + ":input", function(evt, attr_name, new_val, initiator) {
if(initiator !== user) {
user.set(attr_name, new_val);
}
});        return user;
}
})();

위는 양방향 데이터 바인딩을 구현하기 위해 제가 컴파일한 js 네이티브 코드입니다. 앞으로 도움이 되길 바랍니다.

관련글 :

코드를 통해 js에서 div,span,label을 생성하는 방법을 자세히 설명

JS 다운로드 파일 스트림의 간단한 조작(코드 첨부)

초보급 영상 .js 사용 참고 사항(코드 첨부)

위 내용은 Node.js 네이티브 코드는 양방향 데이터 바인딩을 구현합니다(직접 사용할 수 있으며 이미 캡슐화되어 있음).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!