❎ ☝🏼 🛌🏻 ウィジェットの自動管理に関するたとえ 🌐 👩🏼‍🚀 👨‍👨‍👧‍👦

-こんにちは...

-ああ！助けて！彼らは殺している！ \（0_0）/

-友人、落ち着いて、私は私です：-\

-背後から気づかないうちに忍び寄る！ \（@ _ @）/

-そして、私は動的にB-を追加しました]

-ええと\（〜_〜）/

「明らかに、そのような状況にどのように反応するかわかりませんか？」 Xd

-まあ...あたかも...考えがある... \（= _ =）/

-ソース％を表示してください-）

-私...これ...恥ずかしがり屋... \（._。）/

-さあ、怖がらないで、私は私です;-)

-Laaaadno \（-_-）/

< body > < script > $( function (){ $( '.c-example' ).wrapInner( '' ) }) </ script > < div class ="c-example" > epic </ div > </ body >

-ラコニック：^ D

-Doohoo \（* ^ *）/

「それに対して何と言いますか？」 }：-]

< body > < script > $( function (){ $( '.c-example' ).wrapInner( '' ) }) $( function (){ $( 'body' ).html( '<div class="c-example">fail</div>' ) }) </ script > < div class ="c-example" > epic </ div > </ body >

-何もありません\（％_％）/すべてがどのように変わったのか気づかなかった

-それだけです...そして今見てください:-P

< body xmlns:c ="urn:component" > < script > CComponent({ tag: 'c:example' , factory: function ( el ){ $(el).wrapInner( '' ) }}) $( function (){ $( 'body' ).html( '<c:example>win</c:example>' ) }) </ script > < c:example > epic </ c:example > </ body >

-どうやって？どのように機能しますか？ \（* o *）/

-特定の要素の外観をリアルタイムで監視し、ファクトリを使用して作成されたウィジェットを、要素が家から削除されると自動的に破棄される（destroyメソッド）ウィジェットにバインドします^]

-すごい！ \（$ _ $）/

-はい...はい、ライブラリを吸う：-]

var CComponent= new function (){ Version: 2 Description: 'attach widget constructor to DOM as live component' License: 'public domain' Implementation: var latencyDefault= 50 var CComponent= function ( arg ){ if (!( this instanceof CComponent )) return new CComponent( arg ) var elements= [], widgets= [] var timerTracking, timerCleaning var latencyTracking= arg.latencyTracking || latencyDefault var latencyCleaning= arg.latencyCleaning || latencyDefault var field= 'CComponent:' + new Date + Math.random() var tag= arg.tag var factory= arg.factory var attach= function ( el ){ var widget= new factory( el ) || null el[ field ]= widget if ( !widget ) return elements.push( el ) widgets.push( widget ) } var attachIfLoaded= function ( el ){ var cur= el do { if ( !cur.nextSibling ) continue attach( el ) break } while ( cur= cur.parentNode ) } var tracking= function ( ){ var nodes= CComponent.tags( tag ) for ( var i= 0, len= nodes.length; i < len; ++i ){ var el= nodes[ i ] var widget= el[ field ] if ( typeof widget === 'object' ) continue attachIfLoaded( el ) } timerTracking= setTimeout( tracking, latencyTracking ) } var cleaning= function ( ){ var doc= document .documentElement checking: for ( var i= elements.length; i--; ){ var el= elements[ i ] var cur= el do { if ( cur === doc ) continue checking } while ( cur= cur.parentNode ) var widget= el[ field ] if ( widget.destroy ) widget.destroy() el[ field ]= void 0 elements.splice( i, 1 ) widgets.splice( i, 1 ) } timerCleaning= setTimeout( cleaning, latencyCleaning ) } var revive= function ( ){ tracking() cleaning() } var freeze= function ( ){ timerTracking= clearTimeout( timerTracking ) timerCleaning= clearTimeout( timerCleaning ) } var destroy= function ( ){ freeze() for ( var i= elements.length; i--; ){ var widget= widgets[ i ] if ( widget.destroy ) widget.destroy() } elements= [] widgets= [] } var onload= function ( ){ attachIfLoaded= attach } // replace with DOMContentLoaded from your framework window.addEventListener ? window.addEventListener( 'load' , onload, false ) : window.attachEvent( 'onload' , onload ) this .tag= function ( ){ return tag } this .field= function ( ){ return field } this .factory= function ( ){ return factory } this .latencyTracking= function ( ){ return latencyTracking } this .latencyCleaning= function ( ){ return latencyCleaning } this .elements= function ( ){ return elements.slice( 0 ) } this .widgets= function ( ){ return widgets.slice( 0 ) } this .revive= revive this .freeze= freeze this .destroy= destroy revive() } var cacheTags= {} CComponent.tags= function ( name ){ var nodes= cacheTags[ name ] if ( !nodes ){ var isIE= /*@cc_on!@*/ false var chunks= /(?:(\w+):)?([-\w]+)/.exec( name ) var scope= isIE && chunks[1] || '' var tag= isIE && chunks[2]|| name nodes= cacheTags[ name ]= document .getElementsByTagName( tag ) nodes.scopeName= scope } var res= [], scope= nodes.scopeName if ( scope ){ for ( var i= 0, len= nodes.length; i < len; ++i ){ var node= nodes[ i ] if ( node.scopeName !== scope ) continue res.push( node ) } } else { for ( var i= 0, len= nodes.length; i < len; ++i ) res.push( nodes[ i ] ) }; return res } Export: return CComponent Usage: CComponent( { tag: 'c:example' , factory: function ( el ){ this .el= el alert( 'FOUND ' + this .el.innerHTML ) this .destroy= function (){ alert( 'LOST ' + this .el.innerHTML ) delete this .el } } } ) }

ウィジェットの自動管理に関するたとえ

More articles: