クライアント側のJavaScriptテンプレートを作成する

私はJavaScriptでたくさん書いています。スクリーンエンドなどのテンプレートで作業するのにうんざりしている場合、各ビルドの前にテンプレート名を追跡してそれらを収集するのがあなたのためのソリューションです、 jsttojsはJavaScriptでクライアントテンプレートをコンパイルするためのユーティリティです。



最初に考えたのは「グーグル」でした。短い検索の後、適切なものがないことが明らかになりました。 handlebars.jsがありますが、それが生成するコードの量は望まれることを多く残しており、勝利は疑わしいようです。 もちろん、すばらしいGoogle Closure Toolsがありますが、これはClosure Toolsインフラストラクチャに基づいた完全なソリューションであり、私たちには適していません。 独自のユーティリティを作成することが決定され、一貫性のための言語としてJavaScriptが選択されました。



一番下の行は非常に単純です。テンプレートを含むフォルダーがあり、テンプレートには無限のネストを持つ階層があります。スクリプトはすべてのテンプレートを検索し、それを縮小してグローバルオブジェクトに配置します。テンプレートキーは特定のテンプレートへのパスです。

応用分野

このツールは特定のテンプレートエンジンに関連付けられているわけではなく、お気に入りのソリューション（口ひげ、underscore.js、または独自の最適なフレームワークなど）を使用できます。



スクリプトはコンソールから起動されるため、必要に応じて任意のプロジェクトビルドシステムに統合でき、 gruntを使用する場合はgrunt-jsttojsプラグインを使用できます 。

使用する

インストールは、標準のnpmパッケージマネージャーを使用して行われます。

$ npm install -g jsttojs
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次のオプションが利用可能です。

 -h, --help    -V, --version  -e, --ext <n>    ,   jst -n, --name <n>      ,   JSTmpl -w, --watch          -r, --removebreak  ,    -a, --amd    AMD   requirejs
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 $ jsttojs templates compiled/templates/index.js --ext mustache --watch
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

私の意見で最も「おいしい」は--watchオプションです。テンプレートを変更したり、ファイルを追加または削除したりするだけで、スクリプトを実行してそれを忘れることができます。



テンプレートを使用した便利な作業用のラッパーを簡単に作成できます。たとえば、hogan.jsの場合、次のようになります。

 var Template = { render: function(name, data) { var template = Hogan.compile(MyGlobalVariable[name]); return template.render(data); }, compile: function(name) { return Hogan.compile(MyGlobalVariable[name]); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして使用する

 var html = Template.render('video/index', { username: 'World' });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

例

テンプレート：

 // tamplates/index.jst Hello world {{ username }} second line
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 // tamplates/video/index.jst Hello {{ username }} on index video page
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コマンドを実行します。

 $ jsttojs templates compiled/templates/index.js --name MyGlobalVariable
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、テンプレートを使用する準備を整えます：

 // compiled/templates/index.js window.MyGlobalVariable = { "index" : "Hello world {{ username }}\nsecond line", "video/index" : "Hello {{ username }} on index video page" }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

おわりに

その結果、サーバーアプリケーションで行うのと同じくらい簡単にテンプレートを作成できるようになりました。 これがあなたのプロジェクトに良い線を追加することを願っています。 考え、提案、プールのリクエストは大歓迎です。



コードはgithubで入手できます

参照資料

目をそらすこともできます

• ハンドルバー
• 閉鎖ツール
• jquery-tmpl-jst

更新

サーバーで「正直な」コンパイルが必要な場合は、ハンドルバーに目を向けますが、テンプレートのサイズが大幅に増加することを覚えておいてください（ コメントで詳しく説明します ）。 しかし、まず第一に、jsttojsは組み込みのサーバー再コンパイルを持たないテンプレートエンジンを対象としていますが、テンプレートエンジンでの使用を除外するものではありません。