Parable about patterns

- Hello * with a smile wide fluttering across the face * boyfriend.
- Wah! * with bright glitter in wide open eyes * Aunt Asya arrived!
- Yes, and I have a new fairy tale for you * sat down and took the baby by the hands * do you want to listen?
- Of course! * was a little embarrassed and looked away * Uncle told me such terrible stories here ...
- Well, I hope my story will not scare you * patted his hair * She should teach you to think stereotypically.
- Uh? * face twisted from misunderstanding * What is it like?
- M ... now you will find out * winked and took on the handles * That's when you need to insert variables into the string - what will you do?
- Well ... * took a pencil and chircanul on a piece of paper lying next to * something like this:

var query= 'xxx'
var resultCount= 512
var message= ' <kbd>' + query + '</kbd> : ' + resultCount

 —   ? *  *
 —   … *   ,     *
 — ,   … *    *

<iframe src="javascript:alert('ahtung')"></iframe>

 — ,   *  *

var message= ' <kbd>' + query.escapeHTML() + '</kbd> : ' + resultCount

 — … * *    —    ,   ..,        ?
 — … *      *    :

var texts= [ ' <kbd>', '</kbd> : ' ]
var message= texts[0] + query.escapeHTML() + texts[1] + resultCount

 —     texts[n],    ? *  ,   ,  * ,    :

var template= TT.template( ' <kbd>{0}</kbd> : {1}' )
var message= template([ query.escapeHTML(), resultCount ])

 —  * * …
 —      —  *   *  :

var template= TT.template( ' <kbd>{query}</kbd> : {count}' )
var message= template({ query: query.escapeHTML(), count: resultCount })

 — ! * *  !
 — ! *  *  :

var template= TT.html( ' <kbd>{query}</kbd> : {count}' )
var message= template({ query: query, count: resultCount })

 —   … *   *        ?!7
 — ! *   * , ,     :

var message= template({ query: TT.value( highLightedQuery ), count: resultCount })

 —     *  * TT.value?
 —    * ,    *    :

TT.value= function( data ){
        return function( ){
                return data
        }
}

 —  ,    , ,   ,      ? * ,   * ?
 — ! * * , ,   :

TT.pipe= function( list ){
        if( !list ) list= []
        var len= list.length
        return function( data ){
                for( var i= 0; i < len; ++i ) data= list[ i ]( data )
                return data
        }
}

 —   ? *    *
 —          *,      * , ,  :

var text= decodeURIComponent( encodeURIComponent( text ) )
var text= TT.pipe([ encodeURIComponent, decodeURIComponent ])( text )

 — * *  -!
 —   ! **  :

TT.template= new function( ){
        var searcher= /((?:[^\{\}]|\{\{|\}\})*)(?:\{|$)|([^\{\}]*)(?:\})/g
        return function( str, filter ){
                if( !filter ) filter= TT.pipe()
                var parts= []
                String( str ).replace
                (       searcher
                ,       function( str, val, sel ){
                                if( sel !== void 0 ){
                                        parts.push( function( data ){
                                                data= data[ sel ]
                                                switch( typeof data ){
                                                        case 'undefined': return '{' + sel + '}'
                                                        case 'function': return data()
                                                        default: return filter( data )
                                                }
                                        })
                                } else if( val ){
                                        val= val.split( '{{' ).join( '{' ).split( '}}' ).join( '}' )
                                        parts.push( TT.value( val ) )
                                }
                        }
                )
                return TT.concater( parts )
        }
}

 — *   *     !
 —   ! *  *       :

TT.uri= function( tpl ){
        return TT.template( tpl, TT.uri.encoder() )
}
TT.uri.encoder= TT.value( encodeURIComponent )
TT.uri.decoder= TT.value( decodeURIComponent )

 —  ? *,  *
 —    URI *    * :

var searchURI= TT.uri( '/search/?q={query}&count={count}' )
location.href= searchURI({ query: '&&&', count: 10 })

 — … * *    html?
 —    :

TT.html= function( tpl ){
        return TT.template( tpl, TT.html.encoder() )
}
TT.html.encoder= new function( ){
        var parent= document.createElement('div')
        var child= parent.appendChild( document.createTextNode( '' ) )
        return TT.value( function( data ){
                child.nodeValue= data
                return parent.innerHTML.split( '"' ).join( '"' ).split( "'" ).join( ''' )
        })
}
TT.html.decoder= new function( ){
        var parent= document.createElement('div')
        return TT.value( function( data ){
                parent.innerHTML= data
                return parent.firstChild.nodeValue
        })
}

 — !
 —      ! * *  html     ,    HTMLNode   :

TT.dom= function( tpl ){
        return TT.pipe([ TT.html( tpl ), TT.dom.parser() ])
}
TT.dom.parser= new function(){
        var parent= document.createElement( 'div' )
        return TT.value( function( html ){
                parent.innerHTML= html
                var childs= parent.childNodes
                if( childs.length === 1 ) return childs[0]
                var fragment= document.createDocumentFragment()
                while( childs[0] ) fragment.appendChild( childs[0] )
                return fragment
        })
}
TT.dom.serializer= new function(){
        var parent= document.createElement( 'div' )
        var child= parent.appendChild( document.createTextNode( '' ) )
        return TT.value( function( node ){
                parent.replaceChild( node.cloneNode( true ), parent.firstChild )
                return parent.innerHTML
        })
}

 —   ? *   *
 —    *   *

var link= TT.dom( '<a href="{uri}">{title}</a>' )({ uri: '/', title: ' ' }) // HTMLAnchorElement
var userName= TT.dom( '<b>{head}</b>{tail}' )({ head: 'T', tail: 'enshi' }) // HTMLFragment

 — … *  *   …

______________________

© SoftCoder.ru