requirejs実戦経験共有

本文は以下の概念を話さない:1.AMD/CMD;2.F 2 Eモジュール化開発.はい、本文は心を指して、requirejsを使って中小規模のwebアプリケーションを構築する必要がある親たちに参考を提供します.
 
私たちはプロジェクトを作成する際に、一般的に以下のいくつかの問題を考慮する必要があります.では、問題から始めて、述べます.
チームワーク
 
プロジェクトメンバーが一緒にプロジェクトモジュールになり、機能が強化されると、最も直接的な手段は機能モジュールを分けて並列開発し、公共モジュールは開発効率を高めることができる.ここの動作は腕を広げるようなもので、開放的な動作で、後ろの構築ラインです.
一つの合の動作で、このような完璧な抱擁が完成したと言える.では、ここのモジュールは、具体的にはJSコンポーネントです.私たちはすべてrequirejsのスタイルで定義し、コードを見てみましょう.
 

// 1.     JS   

(function() {

  function Validation(args) {

    this.init(args);

  }

  Validation.prototype = {

    constructor: Validation,

    init: function(args) {

    }

  }



  Validation.defaults = {

  };



  if (typeof define === "function" && define.amd) {

    define(["bin/parsley"], function() {

      return Validation;

    });

  } else {

    window.Validation = Validation;

  }



})(window);





// 2.    OOP      

(function(window, document) {

  var Dropdown = Class.extend({



    className: 'dropdown'



    /**

    *     

    * @param {Object} args       

    */

    init: function(args) {

    }



  });



  if (typeof define === 'function' && define.amd) {

    define(function() {

      return Dropdown;

    });

  } else {

    window.Dropdown = Dropdown;

  }



})(window, document);

 
あなたはValidationを書いて、私はDropdownを書いて、あなたはまたSliderを書いて、私は更にAutocompleteを書いて、それから私达は大きい手で小さい手を引いて、二度と乱れません...
 
ローカルデバッグ
 
リソースリファレンスディレクトリを変更するだけで開発とデバッグ(圧縮されていない)バージョンを切り替えることができます.以下はディレクトリ構造です.
jssrc
　　bin
　　lib
　　widget
　　effect
js
jssrcと一致
jsのディレクトリはjssrcと一致しgruntのrequirejsタスクによって生成されます.これらを行うには、プログラムのlayoutファイルがリソースを参照するときに、スクリプトリソースのディレクトリを変更することで、開発とデバッグの切り替えを実現します.
 
オンラインの構築
 
gruntを使用js、package.jsonに「grunt-contrib-requirejs」依存を加え、Gruntfile.jsにはnameが「requirejs」のtaskが追加され、コードは以下の通りです.

requirejs: {

      compile: {

        options: {

          appDir: 'jssrc/',

          dir: 'js/',

          baseUrl: '.',

          optimize: 'uglify2',

          // optimize: 'none', // for development

          mainConfigFile: 'jssrc/main.js',

          modules: [

            {

              name: 'common'

            },

            {

              name: 'index'

            },

            {

              name: 'house-base'

            },

            {

              name: 'effect/house-detail'

            },

            {

              name: 'collection'

            },

            {

              name: 'effect/house-photo-play'

            },

            {

              name: 'activity-base'

            },

            {

              name: 'esf-base'

            },

            {

              name: 'mfb-base'

            }

          ],

          // generateSourceMaps: true,

          // preserveLicenseComments: false,

          logLevel: 0,

          findNestedDependencies: true,

          fileExclusionRegExp: /^\./,

          inlineText: true

        }

      }

    }

キーは「modules」のノードの構成で、例えば「common」という、jssrcにcommonが存在する.jsというファイルは、定義コードを見てモジュールです.

define([

  'ga',

  'widget/tooltip',

  'widget/autocomplete',

  'widget/slider',

  'effect/global',

  'bin/jquery.placeholder'

], function(

  GA,

  Tooltip,

  Autocomplete,

  Slider,

  EffectGlobal

) {}

gruntを通過するとjsディレクトリに同名のcommonが生成される.jsファイル.このファイルは、依存するすべてのモジュールを統合して圧縮した結果です.では、デバッグの実装を振り返ってみましょう.本番ページではjs/commonを参照しています.js,爽死のすべての依存は正しく1つのファイルに統合され圧縮された.デバッグに切り替えるには、スクリプトディレクトリをjssrcに統一的に変更するには、jssrc/commonを参照します.js、そうですか.jsではjssrcに依存するすべてのモジュールを引っ張って、圧縮されていない独立したファイルで、どこが間違っているのか、直接位置を特定して、二度と間違いが見つからない心配はありません!~~