tenshi Apr 15 2010 at 01:15

Притча об автоматическом менеджменте виджетов

8 min

681

— Здравствуй…
— А-а-а! Памагите! Убивают! \(0_0)/
— Дружок, спокойно, я свой :-\
— Свои незаметно сзади не подкрадываются! \(@_@)/
— А я динамически добавился В-]
— Э-э-э \(~_~)/
— Ясно, не знаешь, как реагировать на такие ситуации? XD
— Ну… как бы… есть мысли… \(=_=)/
— Покажи-ка свой исходник %-)
— Я… эта… стесняюсь… \(._.)/
— Давай, не боись, я же свой ;-)
— Лаааадно \(-_-)/

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

— Лаконичненько :^D
— Доооо \(*^*)/
— А что ты скажешь на это? }:-]

<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) при удалении элемента из дома B^]
— Ухты, здорово! \($_$)/
— Да… ладно, кури библиотеку :-]

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 } } } ) }

Tags:

Hubs:

JavaScript