单个页面的网站,修改文章wordpress,wordpress蜘蛛记录,陕西恒发建设网站转自#xff1a;http://www.see-source.com/blog/300000038/444 双向数据绑定指的就是#xff0c;绑定对象属性的改变到用户界面的变化的能力#xff0c;反之亦然。换种说法#xff0c;如果我们有一个user对象和一个name属性#xff0c;一旦我们赋了一个新值给user.name,在…转自http://www.see-source.com/blog/300000038/444 双向数据绑定指的就是绑定对象属性的改变到用户界面的变化的能力反之亦然。换种说法如果我们有一个user对象和一个name属性一旦我们赋了一个新值给user.name,在UI上就会显示新的姓名了。同样地如果UI包含了一个输入用户姓名的输入框输入一个新值就应该会使user对象的name属性做出相应的改变。 很多热门的JS框架客户端如Ember.jsAngular.js 或者KnockoutJS 都在最新特性上刊登了双向数据绑定。这并不意味着从零实现它很难也不是说需要这些功能的时候采用这些框架是唯一的选择。下面的想法实际上很基础可以被认为是3步走计划 我们需要一个UI元素和属性相互绑定的方法我们需要监视属性和UI元素的变化我们需要让所有绑定的对象和元素都能感知到变化还是有很多方法能够实现上面的想法有一个简单有效的方法就是使用PubSub模式。 这个思路很简单我们使用数据特性来为HTML代码进行绑定所有被绑定在一起的JavaScript对象和DOM元素都会订阅一个PubSub对象。只要JavaScript对象或者一个HTML输入元素监听到数据的变化时就会触发绑定到PubSub对象上的事件从而其他绑定的对象和元素都会做出相应的变化。 用jQuery做一个简单的实现 对于DOM事件的订阅和发布用jQuery实现起来是非常简单的接下来我们就是用Jquery比如下面 1 function DataBinder( object_id ) {2 // Use a jQuery object as simple PubSub3 var pubSub jQuery({});4 5 // We expect a data element specifying the binding6 // in the form: data-bind-object_idproperty_name7 var data_attr bind- object_id,8 message object_id :change;9
10 // Listen to change events on elements with the data-binding attribute and proxy
11 // them to the PubSub, so that the change is broadcasted to all connected objects
12 jQuery( document ).on( change, [data- data_attr ], function( evt ) {
13 var $input jQuery( this );
14
15 pubSub.trigger( message, [ $input.data( data_attr ), $input.val() ] );
16 });
17
18 // PubSub propagates changes to all bound elements, setting value of
19 // input tags or HTML content of other tags
20 pubSub.on( message, function( evt, prop_name, new_val ) {
21 jQuery( [data- data_attr prop_name ] ).each( function() {
22 var $bound jQuery( this );
23
24 if ( $bound.is(input, textarea, select) ) {
25 $bound.val( new_val );
26 } else {
27 $bound.html( new_val );
28 }
29 });
30 });
31
32 return pubSub;
33 } 对于上面这个实现来说下面是一个User模型的最简单的实现方法 1 function User( uid ) {2 var binder new DataBinder( uid ),3 4 user {5 attributes: {},6 7 // The attribute setter publish changes using the DataBinder PubSub8 set: function( attr_name, val ) {9 this.attributes[ attr_name ] val;
10 binder.trigger( uid :change, [ attr_name, val, this ] );
11 },
12
13 get: function( attr_name ) {
14 return this.attributes[ attr_name ];
15 },
16
17 _binder: binder
18 };
19
20 // Subscribe to the PubSub
21 binder.on( uid :change, function( evt, attr_name, new_val, initiator ) {
22 if ( initiator ! user ) {
23 user.set( attr_name, new_val );
24 }
25 });
26
27 return user;
28 } 现在我们如果想要将User模型属性绑定到UI上我们只需要将适合的数据特性绑定到对应的HTML元素上。 JS代码: 1 var user new User( 123 );
2 user.set( name, Wolfgang ); HTML代码: 1 input typenumber data-bind-123name / 不需要jQuery的实现 在如今的大多数项目里可能已经使用了jQuery因此上面的例子完全可以接受。不过如果我们需要试着向另一个极端做并且还删除对jQuery的依赖那么怎么做呢好证实一下这么做并不难尤其是在我们限制只支持IE 8及以上版本的情况下。最终我们必须使用一般的javascript实现一个定制的PubSub并且保留了DOM事件: 1 function DataBinder( object_id ) {2 // Create a simple PubSub object3 var pubSub {4 callbacks: {},5 6 on: function( msg, callback ) {7 this.callbacks[ msg ] this.callbacks[ msg ] || [];8 this.callbacks[ msg ].push( callback );9 },
10
11 publish: function( msg ) {
12 this.callbacks[ msg ] this.callbacks[ msg ] || []
13 for ( var i 0, len this.callbacks[ msg ].length; i len; i ) {
14 this.callbacks[ msg ][ i ].apply( this, arguments );
15 }
16 }
17 },
18
19 data_attr data-bind- object_id,
20 message object_id :change,
21
22 changeHandler function( evt ) {
23 var target evt.target || evt.srcElement, // IE8 compatibility
24 prop_name target.getAttribute( data_attr );
25
26 if ( prop_name prop_name ! ) {
27 pubSub.publish( message, prop_name, target.value );
28 }
29 };
30
31 // Listen to change events and proxy to PubSub
32 if ( document.addEventListener ) {
33 document.addEventListener( change, changeHandler, false );
34 } else {
35 // IE8 uses attachEvent instead of addEventListener
36 document.attachEvent( onchange, changeHandler );
37 }
38
39 // PubSub propagates changes to all bound elements
40 pubSub.on( message, function( evt, prop_name, new_val ) {
41 var elements document.querySelectorAll([ data_attr prop_name ]),
42 tag_name;
43
44 for ( var i 0, len elements.length; i len; i ) {
45 tag_name elements[ i ].tagName.toLowerCase();
46
47 if ( tag_name input || tag_name textarea || tag_name select ) {
48 elements[ i ].value new_val;
49 } else {
50 elements[ i ].innerHTML new_val;
51 }
52 }
53 });
54
55 return pubSub;
56 } 除了设置器里调用 jQuery的trigger方法外模型可以保持一样。调用trigger方法将替代为调用我们定制的具有不同特征的PubSub的publish方法 1 // In the models setter:2 function User( uid ) {3 // ...4 5 user {6 // ...7 set: function( attr_name, val ) {8 this.attributes[ attr_name ] val;9 // Use the publish method
10 binder.publish( uid :change, attr_name, val, this );
11 }
12 }
13
14 // ...
15 } 再次说明一下我们用一般的纯javascript的少于100行的维护代码获得了同样的结果。转载于:https://www.cnblogs.com/zhixianyuanyangbuxianxian/p/4128018.html
