別のJavaScriptプリプロセッサ

JavaScriptでそのようなことを書く機能に興味がありますか？

$ ('.btn-toogle').onclick (lambda $ (this).toggleClass ('active'));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 var chars = Array.prototype.forEach.call ('0123456789abcdef', lambda arg.charCodeAt (0));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 function fn (arg1 = 100, arg2 = 'test'){ ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 var html = h` <div> <a href="...">link</a> </div>`;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 for (var key, value in object) console.log (key + ' = ' + value);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その後、おそらくこの記事に興味があります。



私は物語のような退屈や、私がこのことをした理由を描きません。 それがどのように機能し、何ができるかを簡単に言ってみてください。



プリプロセッサーはNode.JSで作成され、 PEG.jsパーサージェネレーターはJavaScriptの解析に使用されます。 ところで、プリプロセッサの長所の1つは（個人的には）、通常のJavaScriptコードが完全に解析されることです。 もちろん、もちろん、コードにラムダ、モジュール、インポート、エクスポートなどのキーワードが含まれている場合を除きます。



もちろん、JavaScriptパーサーはパフォーマンスに違いはありませんが、幸いなことに、キャッシュはこれを完全に補正します。



ほとんどの機能については既に上記で説明しましたが、ここでそれらについて詳しく説明します。

1.関数の略記。

 var way0 = lambda arg.charCodeAt (0), way1 = lambda (arg) arg.charCodeAt (0), way2 = lambda { return arg.charCodeAt (0) }, way3 = lambda (arg){ arg.charCodeAt (0) }, result = function (arg){ return arg.charCodeAt (0) };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

4つの記録方法はすべて同じ結果になります。 arg引数は、通常の引数を持たない関数に追加されます。 関数の全体が1つの操作（ステートメント。正直なところ、ロシア語で正しく言う方法がわからない）で構成されている場合、関数はこの操作の結果を返します。



さらにいくつかの例を示します。

 var //     example0 = lambda (a, b, c, d) a + b + c + d, //   forEach example1 = lambda (a, fn) for (var i = 0; i < a.length; i ++) fn (a [i]), //     a  b. example2 = lambda { a: arg * 2, b: arg };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2.デフォルトでの関数引数。

特別なことは何もありません。タイトルはすでにそれ自体を物語っています。

 function fn (arg1 = 100, arg2 = 'test'){ ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

引数は（型キャストなしで）未定義と比較されます。 突然等しい場合は、デフォルト値に設定されます。

3.複数行の文字列（このようない表現をおaびします）。

まず第一に、これは引用符として '' '文字を使用して文字列を記述する方法にすぎません。 最終的に行末に "\"を配置するのをやめることができます（ただし、複数行の行が必要になるように誰も書いていないことは認めますが）。 しかし、それだけではありません。 開始引用符の前の文字に応じて、プリプロセッサは何らかの方法で内部のテキストを処理できます。 「h」を書き込むと、プリプロセッサは文字列をhtml-codeとして圧縮し、「c」はcss-codeとして、「s」は行のスペースを削除し、「l」は文字列内のLESSをCSSに変換します（圧縮も行います） lp "-私のお気に入り:)-LESSをCSSに変換するだけでなく、将来JavaScriptを介してプロパティを定義する可能性も残します。 かなり快適です。

4.モジュール。

要するに、それはある意味で同じJavaのクラスの類似物です。 しかし、決して普通のクラスではありません。 JavaScriptにはすでにプロトタイプがありますか？



モジュールは、他の言語では通常静的クラスと呼ばれるものに取って代わります（この用語が存在することを願っています）。

単純なモジュールの例：

 module Example { function init (){ // ... } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

init関数は、スクリプトの開始時に呼び出されます（これについては後で詳しく説明します）。

そして、これは、一方が他方によって使用される場合に2つのモジュールがどのように見えるかです。

 module First { export function test (){ console.log ('    .'); } function init (){ console.log (' — .'); } } module Second { import First; function init (){ console.log ('   — ,       ,   .'); First.test (); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

インポートしたクラスの名前を「@」にすると、インポートしたクラスはインポートしたクラスよりも後で初期化できます。 もちろん、2つのクラスのそれぞれが突然他のクラスをインポートする必要がある場合に役立ちますが、もちろん、この構造は反発的に見えます。



まあ、読み取り専用のエクスポートされた変数もあります：

 module First { import @Second; export function test (){ console.log ('    «1024»: ' + Second.value); } } module Second { import First; export var value = 1024; function init (){ First.test (); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ところで、モジュールを他のモジュールで使用する必要はありません。 望ましいが。 :)

5.プリプロセッサーのパラメーター。

コードアセンブリをカスタマイズするには、ファイルの先頭で注意を要するコメントを使用できます。

 // ==Jsx== // @target web:onload // @build-to build/ // @define __VERSION__ 1.00 // @import utils/string.format // @include jquery.min.js // ==/Jsx==
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

（UserScriptsのコメントはほぼ同じスタイルで記述されています。）

• target-スクリプトが実行される場所を示します。 モジュールを初期化するコードは、この引数に依存します。 有効な値は、「web」（ウィンドウ変数が使用されます）、「web：onload」（ページのロード時にモジュールの初期化が開始されます）、「node」（Node.JSの場合はGLOBALが使用されます）、「local」です。
• build- to-結果を保存する場所を示します。 デフォルトでは、スクリプトは同じフォルダーに保存し、拡張子「jsx」を「js」に置き換えます（または元のファイルの拡張子が「jsx」と異なる場合は拡張子「js」を追加します。
• define-最初の引数のすべての出現を結果ファイルの2番目の引数に置き換えます。 時には重宝します。
• インポート -拡張子が「jsxi」のファイル（パラメータに書き込む必要はありません）が含まれます。これは以前に解析されていました。 ファイルが近くのフォルダーで見つからない場合、接続されたプリプロセッサーファイルを含むフォルダーで検索が続行されます。 （まあ、かなりトリッキーなアルゴリズムがあります。おそらく、このような小さなものをここにペイントしないでください。）
• include-分析またはステップ実行せずに、結果にファイルを含めます。

これらはすべてのパラメーターではなく、すべての機能ではありませんが、私の意見では、この記事は簡単な説明には大きすぎることが判明しました。



ここから現在のバージョンをダウンロードしてください 。 考えられるすべてのエラーについて事前に謝罪し、ご清聴ありがとうございました。 :)