Sausage.js-任意のコードを一連の呼び出しに変換するためのライブラリ

少なくとも一度は自分のやり方でCanvasに出会った人は皆、それほど不快ではないものに出会ったと思います。 Canvasを操作してコンテキストパラメータを変更したり、メソッドを呼び出したりする場合、最初にコンテキストにアクセスし、次にメソッド/プロパティにアクセスする必要があります-これは非常に面倒です。



私はいつもこのコードが欲しい：

var ctx = document.querySelectorAll('canvas')[0].getContext('2d'); ctx.fillStyle = '#eee'; ctx.strokeStyle = 'blue'; ctx.beginPath(); ctx.moveTo(10, 10) ctx.lineTo(100, 10) ctx.lineTo(100, 100) ctx.lineTo(10, 100) ctx.lineTo(10, 10) ctx.closePath() ctx.stroke() ctx.fill();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

チェーンになります：

 ctx .fillStyle('#eee') .strokeStyle('blue') .beginPath() .moveTo(10, 10) .lineTo(100, 10) .lineTo(100, 100) .lineTo(10, 100) .lineTo(10, 10) .closePath() .stroke() .fill();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Sausage.js-1268バイト（すぐに1キロバイト未満になります）、問題を解決します。

「ルーク、__ noSuchMethod__を使用してください」-そして、あなたは言うすべてのもの。 しかし、先史時代のブラウザのサポートはどうでしょうか？

Canvas、呼び出しのチェーン、Lispに無関心ではないすべての人は、katの下で尋ねます

なぜソーセージとLispはそれと何の関係があるのですか？

Sausage.jsを適用することで、このコード（クロスブラウザー、最初のブロックと同じことを行います）を使用できます。

 //     (function(getContext, querySelectorAll, fillStyle, strokeStyle, beginPath, moveTo, lineTo, closePath, stroke, fill){ var canvasContext = $$(document)(querySelectorAll, 'canvas')(0)(getContext, '2d')(); $$(canvasContext, {fixedContext: true}) (fillStyle, '#eee') (strokeStyle, 'blue') (beginPath) (moveTo, 10, 10) (lineTo, 100, 10) (lineTo, 100, 100) (lineTo, 10, 100) (lineTo, 10, 10) (closePath) (stroke) (fill) (); }('getContext', 'querySelectorAll', 'fillStyle', 'strokeStyle', 'beginPath', 'moveTo', 'lineTo', 'closePath', 'stroke', 'fill'));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そのようなチェーンはソーセージのようなものです-それがSausage.jsが呼び出される理由です

__noSuchMethod__をエミュレートしないのはなぜですか？

コンテキストを変更するたびに、コンテキストのすべてのメソッドとプロパティを調べて、すべての人のために関数を作成する必要があります-高価で長いため、拒否しました（後で行います）が、関数チェーンを使用して同様のビューに至りました。



最初は、__ noSuchMethod__を追加する予定はまったくありませんでしたが、それが正しいと判断しました。 そして、ソーセージライブラリの名前は、その意味を部分的に失いました。



__noSuchMethod__をサポートするブラウザーは、任意の便利な形式でソーセージを使用できます。

 $$(canvasContext, {fixedContext: true}) (fillStyle, '#eee') (strokeStyle, 'blue') .beginPath() (moveTo, 10, 10) (lineTo, 100, 10) .lineTo(100, 100) (lineTo, 10, 100) (lineTo, 10, 10) (closePath) .stroke() .fill() ();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Sausage.jsの例

例1.コンテキストの切り替え

 context = {'foo': {'bar': '100500'}, 'bar': '888', 'zoo': /./}; //     {'foo': {'bar': '100500'}, 'bar': '888', 'zoo': /./} result = $$(context) ('foo') //     {'bar': '100500'} ('bar', -1) //   ('zoo') //    zoo (); //    - undefined ..   foo  / zoo
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

例2.固定コンテキスト

 context = {'foo': {'bar': '100500'}, 'bar': '888', 'zoo': /./}; //     {'foo': {'bar': '100500'}, 'bar': '888', 'zoo': /./} result = $$(context, {fixedContext: true}) ('foo') //     {'bar': '100500'} ('bar', -1) //   ('zoo') //    zoo (); //    - /./
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

例3.関数の呼び出し-コンテキスト値の変更

 context = {'foo': 1}; //     {'foo': 1} result = $$(context) ('foo', 1000) //     (function (context) { //      return '' + context.foo / 2; //    -  '500' }) ('length') //      (function (context) { return typeof context; //    -  'number' }) (); //    number
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

例4. DOMラッパー

 result = $$(document) ('getElementById', 'div1') ('style') ('width', '100px') //   ({ //     /    height: '100px', color: 'red', border: 'solid 1px blue' }) (); // CSSStyleDeclaration Object
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

例5. jQueryラッパー

 result = $$(jQuery) (['#div2']) //       - ,        ('css', {width: '100px', height:'100px', color: 'red', border: 'solid 1px blue'}) ('animate', {width: '200px', height:'200px'}) (); // jQuery
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プロファイリング

プロファイリングを開始するには、プロファイラーをオンにしてバージョンを接続し、プロファイリングを開始する必要があります。

 $$.profile(); //    console && console.dir($$.profileEnd());
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

結果として、

 [anonymous function] Object { calls=2, time=0} [context call] Object { calls=1, time=0} [switching context] Object { calls=7, time=0} animate Object { calls=1, time=5} bar Object { calls=2, time=0} width Object { calls=1, time=0}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

短所

-便宜上、メソッド/プロパティの辞書をコンパイルする必要があります（ソーセージ表記を使用する場合）

-さようならオートコンプリート（ソーセージ表記を使用する場合）

-少し遅いチャレンジ

-ポイント表記法では、関数が持つmeotds /プロパティを呼び出すことはできません（長さ、呼び出し、適用、...）- $$([1,2,3]).length()();



、それは可能です- $$([1,2,3])('length')();

長所

-辞書、ポイントの欠如、およびチェーンの使用-圧縮後のコード量の大幅な削減

-コールのプロファイリングをクロスプロファイルし、コール数をカウントする機能

-「バンドル」の処理

参照資料

ライブサンプルjsfiddle.net/azproduction/LUXwY

コメント付きパッケージ化されていないバージョン（ 9168バイト） sausage-js.googlecode.com/svn/trunk/Sausage.js

パッケージバージョン（1268バイト） sausage-js.googlecode.com/svn/trunk/Sausage.min.js

sausage-js.googlecode.com/svn/trunk/Sausage-profile.jsプロファイラーのバージョン



批判、提案、提案を歓迎します。



UPDプロファイリングの説明を追加