XMLドキュメントをナビゲートするための私の便利な自転車(Javascriptインターフェース)

私はそのような楽しみを持っています-「自転車」。 いいえ、これは環境に優しい輸送形態に関するものではありません。 私は新しいものを思いつくのが好きです。 しかし、トピックがすでにハックされており、あらゆる種類のバリエーションで問題がすでに何度も解決されている場合、新しい、しかしさらに別の解決策の検索は「自転車」です。 さて、あなたは理解しています。 別の自転車...実際、私にとって、これは学習の主な方法の1つです。



私はJavaScriptを徹底的に扱うことにしました(それ以前は、JQueryと呼ばれる料理の形で、生体添加物とビタミンを使用して、頻繁に使用しましたが、必要に応じてのみ使用しました)。 結果は私にとっては面白そうに見えましたが、 ElementTraversalについて読むことに関連して、他の誰かにとっても面白そうだと思いました...



from = new Target;



//

node = from.next().inner().previous().previous().get();








私がこれまでどのように生きてきたかについて...





私はそのような楽しみを持っています-「自転車」。 いいえ、これは環境に優しい輸送形態に関するものではありません。 私は新しいものを思いつくのが好きです。 しかし、トピックがすでにハックされており、あらゆる種類のバリエーションで問題がすでに何度も解決されている場合、新しい、しかしさらに別の解決策の検索は「自転車」です。 さて、あなたは理解しています。 別の自転車...実際、私にとって、これは学習の主な方法の1つです。



最初に言いたいのは、私はプログラマーではないということです(ただし、コンピューター技術の学位を取得しています)。 私はデザイナーです(現在は正式にアートディレクターと呼ばれていますが、その本質は同じです)。最も広い意味で(この国でこの職業を連想するのはグラフィックデザイナーではありませんが、ここでも中等教育を受け、さまざまな工芸品で約20の証明書を取得し、彼は学年でそれを学びました)。 簡単に言えば、私の主な専門スキルは、問題に対するオリジナルの、理想的には最適なソリューションを見つける能力です。 そして、「自転車」はプロセスの不可欠な部分です。 そして、この叙情的な余談の目的は、添付されたコードの特性ではなく、提案されたアプローチの特性に注意を向けようとすることです。



もちろん、最初は、宝くじと体育館の学生が必要であるため(クロスブラウザを使用し、必要に応じて最小限の変更を行った後でも他の言語で使用できるように)、これらの目的にDOMを使用することにしました(他にも選択肢があると思うかもしれません)。 対応する古紙を廃棄した後、トピック「How Others Live」で、DOMを純粋な形式で使用する以外に多くのアプローチがないことに気付きました。これはかなり退屈です。JohnResignの本「ProJavaScript」の5つの対応する機能、同じ5つの関数と、子の数を取得するためのもう1つの関数)、またはPHPでXML Simpleを表示しようとします。 私に関しては、それが可能でより明確であるか、またはそれほど怪しくはありません。



それから(創造プロセスの不可欠な部分として)創造的な苦痛があり、感嘆符によって定期的に中断されました:「Ssssss ...ああ! なぜ機能しないのか!」 等々、これはあなたにはほとんど興味がありません。 だから、最後に、結果。



要素へのリンクとその要素を操作するために必要な関数を保存するクラス(ドキュメントのルート要素はデフォルトで設定されます):



// Target

Target = function ( element ) {

var _element = element || document.documentElement;

this.get = function () { return _element }

this.set = function ( element ) { _element = element || document.documentElement }

}








現在の要素の前にある要素(またはパラメーターとしてメソッドに渡された要素)を見つけるための方法。セットが循環的であると見なされる、つまりセットの最後の要素が最初の要素と見なされるという修正



// previous

Target.prototype.previous = function ( element ) {

var element = element || this.get();

if( element != document.documentElement.parentNode ) {

element = element.previousSibling || element.parentNode.lastChild;

while( element && element.nodeType != 1 ) { element = element.previousSibling }

}

this.set( element );

return this;

}








現在の要素(またはパラメーターとして渡されたメソッド)に続く要素をそのアクションによって見つける方法は、前述の方法とは逆です。



// next

Target.prototype.next = function ( element ) {

var element = element || this.get();

if( element != document.documentElement.parentNode ) {

element = element.nextSibling || element.parentNode.firstChild;

while( element && element.nodeType != 1 ) { element = element.nextSibling }

}

this.set( element );

return this;

}








現在の(またはパラメーターとして渡されたメソッド)に関連して、親(外部)要素を見つけるためのメソッド:



// outer

Target.prototype.outer = function ( element ) {

var element = element || this.get();

if( element.parentNode != document.documentElement.parentNode ) { element = element.parentNode }

this.set( element );

return this;

}








現在の(またはパラメーターとして渡されたメソッド)に関連する最初の子(内部)要素を見つけるためのメソッド:



// inner

Target.prototype.inner = function ( element ) {

var element = element || this.get();

if( element.childNodes.length != 0 ) {

for( var i = 0; i < element.childNodes.length; i++ ) {

if( element.childNodes.item( i ).nodeType == 1 ) {

element = element.childNodes.item( i );

break;

}

}

}

this.set( element );

return this;

}








メソッドは、クラスインスタンス内のリンクを変更します。その値は、get()メソッドを使用してコードから確認でき、set()メソッドを使用して設定できます。 彼らはオブジェクトそのものを仕事として返します(ああ、そうです、JQueryは私の精神だけでなく、私のものだけを傷つけたと思います)。



結果:



from.next().inner().previous().previous().get();







次に、実際にそれを使用した後(JavaScriptでのその後の実験で、後でこのメカニズムをRubyおよびPHPに転送して、XMLドキュメントの解析に使用しました)、別のメソッドが表示されました(または、テンプレート形式がパラメータとして)およびあなたに興味があるかもしれないものです(したがって、この記事をHabréで書く理由です)。 テンプレートに従ってアクションのシーケンスを実行する方法(「中央から左、左、ポスト、右に1つあります」と同様)。親要素への遷移は、シンボル「<」に対応し、「-」の前の最初の子「-」 "、The next" + "(例:チェーン.outer()。Next()。Inner()。Previous()。Previous()はテンプレートに対応します" <+>-"):



// select

Target.prototype.select = function ( path ) {

var steps = path.split( "" );

for( var i = 0; i < steps.length; i++ ) {

if( steps[ i ] == "-" ) { this.previous() }

if( steps[ i ] == "+" ) { this.next() }

if( steps[ i ] == "<" ) { this.outer() }

if( steps[ i ] == ">" ) { this.inner() }

}

return this;

}








前の例を次のように書き換えることができます。



from = new Target;



// a, , (, ),

node = from.select( “+>--” ).get();








あとがき:テンプレートに反復回数を指定する機能を追加するというアイデアがあります(「>>> ++++++」の代わりに「> 3 + 6」を記述できるように)、まだ実装していません。



あとがき:一般的に、似たような叙事詩に興味のある人は、これからこのような文章を書く価値がありますか、それともこの似たような歌詞はHabréに存在しませんか?



All Articles