JS原生數(shù)據(jù)雙向綁定實(shí)現(xiàn)代碼
代碼如下:
<span style="font-family:Times New Roman;font-size:14px;" deep="7"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> <script> 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 = "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; } </script> </head> <body> <input type="text" bind-1="name" /> <span bind-1="name"></span> <script> var DBind = new DBind( 1 ); DBind.set( "name", "" ); </script> </body> </html> </span>
效果示例:
總結(jié)
以上所述是小編給大家介紹的JS原生數(shù)據(jù)雙向綁定實(shí)現(xiàn)代碼,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- javascript實(shí)現(xiàn)數(shù)據(jù)雙向綁定的三種方式小結(jié)
- Vue.js每天必學(xué)之?dāng)?shù)據(jù)雙向綁定
- 輕松實(shí)現(xiàn)javascript數(shù)據(jù)雙向綁定
- 深入學(xué)習(xí)AngularJS中數(shù)據(jù)的雙向綁定機(jī)制
- 淺談AngularJs 雙向綁定原理(數(shù)據(jù)綁定機(jī)制)
- Vue.js第一天學(xué)習(xí)筆記(數(shù)據(jù)的雙向綁定、常用指令)
- 深入理解Angularjs向指令傳遞數(shù)據(jù)雙向綁定機(jī)制
- AngularJS學(xué)習(xí)筆記(三)數(shù)據(jù)雙向綁定的簡(jiǎn)單實(shí)例
- 實(shí)例剖析AngularJS框架中數(shù)據(jù)的雙向綁定運(yùn)用
- js實(shí)現(xiàn)數(shù)據(jù)雙向綁定(訪問器監(jiān)聽)
相關(guān)文章
webpack的tree shaking的實(shí)現(xiàn)方法
這篇文章主要介紹了webpack的tree shaking的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09JavaScript語(yǔ)法約定和程序調(diào)試原理解析
這篇文章主要介紹了JavaScript語(yǔ)法約定和程序調(diào)試原理解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11談?wù)凱HP中相對(duì)路徑的問題與絕對(duì)路徑的使用
經(jīng)??吹接腥瞬仍诹薖HP路徑的坑上面了,感覺有必要來(lái)說(shuō)說(shuō)PHP中相對(duì)路徑的一些坑,以及PHP中絕對(duì)路徑的使用,下面一起來(lái)看看。2016-08-08javascript動(dòng)態(tài)添加樣式(行內(nèi)式/嵌入式/外鏈?zhǔn)降纫?guī)則)
添加CSS的方式有行內(nèi)式、嵌入式、外鏈?zhǔn)?、?dǎo)入式,下面為大家詳細(xì)介紹下javascript動(dòng)態(tài)添加以上樣式規(guī)則的方法,感興趣的朋友可以參考下哈2013-06-06微信小程序?qū)崿F(xiàn)拖動(dòng)懸浮圖標(biāo)效果
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)拖動(dòng)懸浮圖標(biāo)效果,小程序上是實(shí)現(xiàn)拖動(dòng)圖標(biāo),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-04-04javascript中&&運(yùn)算符與||運(yùn)算符的使用方法實(shí)例
&&和||總是傻傻分不清,在這里詳細(xì)記錄一下吧,也給你們分享一下,所以這篇文章主要給大家介紹了關(guān)于javascript中&&運(yùn)算符與||運(yùn)算符的使用方法,需要的朋友可以參考下2021-11-11javascript實(shí)現(xiàn)簡(jiǎn)易計(jì)算器的代碼
下面小編就為大家?guī)?lái)一篇javascript實(shí)現(xiàn)簡(jiǎn)易計(jì)算器的代碼小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-05-05js中setTimeout()與clearTimeout()用法實(shí)例淺析
這篇文章主要介紹了js中setTimeout()與clearTimeout()用法,以實(shí)例形式分析了setTimeout()與clearTimeout()的功能與使用技巧,需要的朋友可以參考下2015-05-05JavaScript中的普通函數(shù)和箭頭函數(shù)的區(qū)別和用法詳解
這篇文章主要介紹了JavaScript中的普通函數(shù)和箭頭函數(shù)的區(qū)別和用法詳解,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03