パターンのたとえ

-こんにちは*顔*友人に手を振って笑顔で。
-ワウ！ *大きく開いた目で明るい輝きで*アシャおばさんが到着しました！
-はい、私はあなたのために新しいおとぎ話を持っています*座って、腕で赤ちゃんを連れて行きました*聞きたいですか？
-もちろん！ *少し恥ずかしくて目をそらした*叔父は私にそのような恐ろしい話を言った...
-まあ、私の話があなたを怖がらないことを願っています*彼の髪を軽くたたきました*彼女はあなたにパターン化された方法で考える方法を教えるべきです。
-え？ *誤解からねじれた顔*どう？
-M ...今、あなたは知っています*ウィンクしてそれを拾いました*ここで変数を文字列に挿入する必要があるとき-あなたは何をしますか？
-さて... *近くに横たわっている紙に鉛筆とチルカヌルを取りました*このようなもの：

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