JavaScriptモジュール化開発例詳細解【seajs、requirejsライブラリ使用】

11763 ワード
JavaScript モジュール開発 seajs requirejs
本論文の実例はJavaScriptモジュール開発を述べている。皆さんに参考にしてあげます。具体的には以下の通りです。
JS開発の問題

  • 衝突

  • 依存

  • JSが導入したファイルに依存が生じます。
    • 名前空間を使って解決します。

  • 名前空間の弊害

  • 呼び出しの時は名前が長いです。

  • 衝突を低減するしかなく、完全に避けられない。
    • SeaJs使用

  • sea.jsのライブラリを導入する

  • モジュールはどうなりますか？define

  • モジュールはどうやって呼び出しますか？exportsとseajs.use

  • モジュールに依存する方法は？require
    • 
//html：
<script src="js/sea.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

//      console.log( seajs );

seajs.use('./js/main.js',function ( main ) {
  
  
  main.show();
  
});      
  
</script>

    
//main.js
define(function ( require,exports,module ) {
  
  var header = require('./header.js');
  
  function show () {
    
    alert(123);
    
  }
  
  
  exports.show = show;
  
});
    seajs.use()
    一つ以上のモジュールをロード
    
//       
seajs.use('./main.js');

//       ，      ，    
seajs.use('./main.js', function ( main ) {
 
});

//       ，      ，    
seajs.use(['./main.js', './b'], function(a, b) {
 a.doSomething();
 b.doSomething();
});
    seajs.useとDOM readyイベントは何の関係もありません。いくつかの操作がDOM ready後に実行されることを保証するためには、jqueryなどのクラスライブラリを使用して保証する必要があります。
    
seajs.use(['jquery','./main'],function ( $,main ) {
  
  $(function () {

    main.init();

  })

});
    アメリカの方法の最初のパラメータは必ずありますが、nullでもいいし、変数でもいいです。
    
var app = ['app.js', 'header.css', 'header.js'];

seajs.use(app, function( app ) {
  //do something
});
    seajs.use()はロード起動にのみ使用され、defineのモジュールコードに表示されるべきではない。モジュールコードに他のモジュールをロードする必要がある場合は、require()を使用し、非同期の他の非同期モジュールをロードする必要がある場合は、require.async()を使用する。
    seajs.useはモジュール搭載器に必須のインターフェースです。
    define関数
    パラメータを渡すと、このパラメータはモジュールであり、パラメータは任意のタイプであってもよい。
    文字列を渡すと、このモジュールは文字列モジュールです。
    オブジェクトを渡す時、このモジュールは対象モジュールです。
    関数を渡す(最も一般的な方法)
    この関数には三つのパラメータがついています。
    Require：他のモジュールの工場方法を引用する
    Exports：戻るインターフェースオブジェクト
    Module：モジュールmodule属性
    パラメータが渡されたとき（2つまたは3つ）
    二つのパラメータを渡す場合、最初のモジュールに依存するモジュールのセットは、最後のパラメータがfunctionです。
    3つのパラメータを渡す場合、最初はモジュールの名前を表し、2番目のパラメータはモジュールに依存するモジュールのセット、3番目のパラメータを表します。
    
//     ，     ID，          
//     ，          

define('./main.js',['./drag.js'],function( require,exports,moduels ){
  
  
});
    三つのパラメータ解釈
    require

  • requireは簡単には書けません

  • requireは再定義されません。
    与えられない:var req=require
    関数を定義できませんでした。
    布団関数をパラメータとして使用することはできません。
    サブ関数のスコープ内での再定義はできません。
    //エラー-リネーム「require」！
    var req=require、mod=req（「./mod」）；
    //エラー-再定義「require」！
    require=function(){}
    //エラー-再定義「require」は関数パラメータです。
    function F(require){}
    //エラー-インラインスコープ内で「require」を再定義しました。
    function F(){
    
 var require = function() {};
    )

  • requireのパラメータは完全な文字列requireだけです。
    • exports

  • モジュールのインターフェース

  • まず、直接にexportsに属性を追加します。例えば、exports.co lor='red'

  • 第二に、moduleによって定義され、module.exports.co lor='red'

  • 第三種類は、moduleによって定義され、module.export={color=orange}

  • 第四の種類は、returnによって定義され、return｛green｝

  • 一つのモジュールの中でインターフェースを定義する時は一つの方法を使って、混ぜてはいけません。

  • なお、直接にexportsに新しいオブジェクトを割り当てることはできません。
    • module

  • モジュールのプロパティ

  • id：モジュールのidを表します。

  • uri：当該モジュールファイルに対応するurlを表します。

  • exports：モジュールの戻りを示すインターフェースの集合

  • dependencies：依存モジュール集合（配列表示形式）を表します。

  • deps：依存モジュール集合（オブジェクト表示形式）を表します。
    • CMDモジュール定義仕様
    モジュールは一つのファイルです。
    defineはモジュールを定義するための大域関数です。
    define(facotry)
    facotryは関数でもいいし、オブジェクトや文字列でもいいです。
    
definde( { color: 'tan' } );
    パラメータが関数の場合。デフォルトでは三つのパラメータがあります。require、exports、module。
    
definde( function ( require,exports,module ) {
  
} );
    define([id，deps]，factory)
    defineは2つ以上のパラメータをも受け入れることができ、文字列idはモジュール識別を表します。depsはモジュール依存です。
    
define('main',['mina.js'],function ( require,exports,module ) {
  //    
});
    id，depsパラメータは省略して、構築ツールにより自動的に生成することができます。
    IDとdepsパラメータはCMD仕様ではありません。
    require function
    requireは、他のモジュールが提供するインターフェースを取得するために、一意のパラメータとしてモジュール識別する方法である。
    
deifne(function ( requrie,exports ) {
  
  //     main    
  var main = require('./main');

  //      main       
  main.init();

});
    require.async(id，[cb])
    モジュール内部に非同期的にモジュールをロードし、ロード完了後に指定されたコールバック関数を実行します。
    
require.async('./a',function(){});
//        
require.async(['./a','./b'],function(){});  
    
//           
define(function ( require,expotrs,module ) {
  
  var loadSync = false;

  if ( loadSync ) {

    var skin = require.async('./skin');

  } else {

    var header = require.async('./header');

  }

});
    exports
    exportsは、モジュールインターフェースを外部に提供するために使用されます。
    
define(function ( require, exports,module ) {

 //      foo   
 exports.color = 'pink';

 //      doSomething   
 exports.doSomething = function() {};

});
    return経由でインターフェースを提供します。
    
define(function () {
  
  //   return       
  return {
    color: 'deeppink',
    sayName: function () {}
  }

});
    CMDモジュールには、よく使われるAPIがあります。define、require、require.async、exports、module.expotrs。
    seajs配置
    seajs.com fig()
    alias
    モジュールエイリアスの定義
    いくつかのベースライブラリを参照すると、ベースライブラリのアップグレードに関連し、このモジュールを定義するaliasでは、変更はこのエイリアスの設定を変更するだけです。
    
seajs.config({
  alias: {
    jquery: 'lib/jquery.1.10.1'
  }
});
    モジュールで使用
    
require('jquery');
    パス
    モジュールパスを定義
    いくつかのモジュールはディレクトリ構造が深い場合、この階層を簡単なパスとして定義できます。このモジュールを参照する時、直接にパスします。
    seajs.co nfig({
    
paths: {
  hd: './modules/header'
}
    ｝
    モジュールで使用
    
require('hd/header.js');
    vars
    いくつかの場合、モジュールパスは実行時に決定され、vars変数を使用して構成されてもよい。
    
seajs.config({
  vars: {
    skin: 'header/skin'
  }
});
    モジュールで使用
    
require('{skin}/skin.js'); //     {}
    map
    マッピングの設定、ファイルにマッチし、マッピング処理を行います。
    いくつかのモジュールを開発した場合、パッケージまたは圧縮処理が必要です。ファイル名は異なるかもしれません。mapマップでこのファイルを見つけて、対応するファイル名に変更します。
    
seajs.config({
  map: [
    ['main.js','main-min.js']
  ]
});

seajs.use(['main'],function ( main ) {
  // do ...
});
    ベース
    モジュールのルートディレクトリを設定します。
    開発用seajsが必ずしも現在のページディレクトリの下にあるとは限らない場合があります。このモジュールを引用するのは面倒です。Baseを通じてこのページモジュールのファイルのルートディレクトリを再定義することができます。
    charset
    モジュールのコードフォーマットを設定します。
    
seajs.config({
  charset: 'utf-8'
});

    
seajs.config({
 charset: function(url) {

  // xxx         gbk     
  if (url.indexOf('http://example.com/js/xxx') === 0) {
   return 'gbk';
  }

  //       utf-8   
  return 'utf-8';

 }
});
    よく使う配置項目：alias、paths、base
    seajsプラグイン
    seajs-preload.js
    ＜script type=「text/javascript」src=「js/lib/seajs-preload.js」
    jsファイルを読み込みます
    
seajs.config({
  //   jquery  
  preload: ['jquery.js']
});
    モジュール内のファイル使用
    
definde(function ( require,exports,module ) {
  $(document).css('background','tan');
});
    seajs-cs.js
    cssファイルを読み込みます
    ＜script type=「text/javascript」src=「js/seajs-cs.js」>
    
definde(function ( require,expotrs,module ) {
  require('../css/css.css');
});
    requireJs
    モジュールファイルを導入する際、requirejsはrequireファイルを引用したscriptタグの中のdata-main属性に対応するファイルがあるディレクトリです。
    define定義モジュール
    オブジェクトを渡すことができます。
    一つの関数を伝達する（commonjs仕様の実現）
    違いはmoduleにあります
    idはモジュールのidを表していますが、idはサフィックス名がありません。
    モジュールのセットに依存していません。
    configプロファイル
    モジュールインターフェース
    AMD仕様で定義されているモジュールには、exportsパラメータがなく、returnを通じてのみインターフェースを露出することができます。

  • このようにして、モジュール内部の複数の属性を複数の方法で暴露することができる。

  • return方法は、この方法を返す方法であり、このモジュールを参照することは、このインターフェース方法を参照することであり、その親モジュール（そのモジュールを参照）で直接にこの方法を呼び出すことができる。自分のモジュールのスコープの中です。
    • requirejs配置
    baseUrl
    ルートディレクトリの設定
    用途：起動ファイルが予期した位置にない場合があります。ルートディレクトリはbaseUrlで設定できます。
    
require.config({
  baseUrl: 'lib'
});
    パス
    パスを簡単に書きます
    
require.config({
  paths: {
    hd: 'module/header'
  }
});
    map
    複数のページが存在する場合、各ページの参照コードライブラリは異なるかもしれませんが、mapによって構成され、各ファイルに異なるコードライブラリファイルが配置されます。
    
require.config({
  map: {
    //modules     dom      lib/dom
    'modules': {
      'dom': 'lib/dom'
    },
    //modules-new     dom      lib/dom.2.0
    'modules-new': {
      'dom': 'lib/dom.2.0'
    }
  }

});
    cssプラグインを使う
    requireJsアドイン
    
//  
require.config({
  map: {
    '*': {
      'css': 'lib/css'
    }
  }
}); 

    
//   

define(['css!css/index.css'],function () {
});
    シム
    設定モジュール依存関係を表します。
    グローバルスコープで定義されているコードライブラリのいくつかについては、これらのライブラリのモジュールがしばしば取得されない場合があります。このとき、shimの不開依存性を定義することにより、モジュール内でこのようなコードライブラリを取得することができます。
    
require.config({
  shim: {
    'lib/jquery': {
      //       
      deps: [],
      expotrs: '$'  
    }
  }
});
    興味のある友達はオンラインHTML/CSS/JavaScriptコードを使ってツールを実行できます。http://tools.jb51.net/code/HtmlJsRun上記コードの運行効果をテストします。
    もっと多くのJavaScriptに関する内容に興味がある読者は、当駅のテーマを見ることができます。「javascript対象向け入門教程」、「JavaScriptエラーとデバッグテクニックのまとめ」、「JavaScriptデータ構造とアルゴリズム技術のまとめ」、「JavaScriptはアルゴリズムと技術の総括を遍歴します。」および「JavaScript数学演算の使い方のまとめ」
    本論文で述べたように、JavaScriptプログラムの設計に役に立ちます。
    javaデータ構造におけるスタック構造アプリケーションの2つの例
    Java簡単な統計文字列の中で漢字、英字と数字の数量の方法