jQueryのことは少なくとも一度は聞いたことがある。 しばらくの間、私は文字通りこの作成とJavaScript自体に恋をしました。 私の背後には多くのコード行があります。 動作するアマチュアのシンプルなランタンコード。 最近、私は最愛のjQueryの構造を研究し始め、これは傑作に過ぎないという結論に達しました。
この記事はなぜここにあるのですか？
私のアカウントには、プログラミングプロセスを簡素化しようとする多くの開発があり、それらの多くはjQueryに似ていました。 しかし、残念ながら、開発とサポートは停止し、私の忙しさのために放棄され、彼らは私のハードドライブを超えることはありませんでした。
少し前、jQuery構造にすでに精通していたときに、思いついたのは、コンストラクターを作成し、必要なデータを選択してjQueryオブジェクトに収集する関数を自分で指定する場合です。 いいえ、Webページのセレクター解析、アニメーション、ajax、その他のjQueryの長所と長所についての話はありません。 私は、このコードが実行されているプラットフォームに関係なく、ライブラリがプログラマーの要件に適応するとしたらどうでしょうか？
そこで、この小さなフレームワークをまとめるアイデアが生まれました。
何が何なのか見てみましょう。
jQuery Builderは、さまざまなデータを操作するためのjQueryのようなライブラリを作成するために設計されたマイクロフレームワークです。 現時点では、ネイティブのjs配列からjQueryクラスを継承することを決定しましたが、将来はこれが除外され、標準メソッドの類似物が作成されます。
以下にいくつかの簡単な例を示します。
例1 必要なメソッドを使用してjQueryオブジェクトを形成する必要があるデータの配列があるとします。 それを平凡な数にしてみましょう。
コード
// var numbers = [4, 8, 15, 16, 23, 42, 108]; // var builder = new JQueryBuilder(function (selector) { // for(var i = 0; i < numbers.length; i++) { // switch (selector) { // case 'even' : // ... if (numbers[i] % 2 === 0) { // this.push(numbers[i]); } break; // case 'odd' : // ... if (numbers[i] % 2 !== 0) { // this.push(numbers[i]); } break; } } });
jQueryフィールドには、必要なオブジェクト（より正確には、これは関数です）が含まれています。ここには、選択と必要なメソッド（jQuery.fnから）が含まれます。
それで、最初のメインタスクを完了しました-コンストラクタを作成しました。 これは、配列を反復処理するループが実行される関数です。 番号が要件を満たしている場合、その番号が選択に追加されます。
次に、新しいメソッドを作成します。 すべては、実際のjQueryとまったく同じように-fnオブジェクトを介して行われます。
コード
var $ = builder.jQuery; $.fn.add = function (value) { var self = this; return this.each(function (i) { self[i] += value; }); }; var result = $('even').add(5); console.log(result); // [9, 13, 21, 47, 113]
私はコメントにこの写真を期待していますが、ここではすべてがはるかに優れています。 私の意見では、このライブラリは、配列に関する一般的な（だけでなく）問題の解決策をすばやく見つけるのに役立つかもしれません。
例2 次に、ラインで同様のことを行います。
コード
var $ = jQueryBuilder.fromArray().jQuery; $.fn.extend({ reverse: function () { var self = this; return this.each(function (i) { var result = ''; for(var x = self[i].length - 1; x >= 0 ; x--) { result += self[i][x]; } self[i] = result; }); }, upper: function () { var self = this; return this.each(function (i) { self[i] = this.toUpperCase(); }); }, lower: function () { var self = this; return this.each(function (i) { self[i] = this.toLowerCase(); }); } }); var result = $('abcde', 'xyZ', 'HAAR') .reverse() .lower() ; console.log(result); // ["edcba", "zyx", "raah"]
私の意見では、すべてが非常にシンプルで明確です。 次の記事では、このライブラリをAdobe After Effectsにどのように適用したかを説明します。AdobeAfter Effectsは、JavaScriptでスクリプトを作成する機能を備えています。 その結果、コンポジション内のレイヤーを列挙および管理するための一種のjQueryができました。 近い将来、Photoshopスクリプトを研究し、その類似物を開発する予定です。
リポジトリはこちらです。 私は徐々に例を補足することを約束します。
ご清聴ありがとうございました。
UPD。
今、私はCoffeescriptを綿密に研究しています。 Builderを書き換える予定です。