require.js使用詳細説明
12675 ワード
JavaScriptモジュール化
現在のウェブページはだんだん「インターネットアプリケーション」になり始めました.ウェブページに挿入されたJavaScriptコードはますます膨大になり、ますます複雑になりました.ウェブページはますますデスクトッププログラムのようになりました.チームの分担、進捗管理、ユニットテストなどが必要です.
JavaScriptはモジュール化されたプログラミングが切実な需要となりました.理想的には、開発者は核心的な業務ロジックを実現するだけで、他の人が書いたモジュールをロードすることができます.
しかし、JavaScriptはモジュール化されたプログラミング言語ではありません.「クラス」はサポートされていません.
JavaScriptコミュニティは多くの努力をして、既存の運行環境の下で、「モジュール」の効果を実現します.ここでは現在のJavaScriptモジュール化プログラミングの最適な実践をまとめました.
オリジナルの書き方
モジュールは特定の機能の一つの方法です.異なる関数を簡単に一緒に置くだけで、モジュールでもあります.
しかし、このようなやり方には明らかな欠点があります.「汚染」はグローバル変数であり、他のモジュールと変数名の衝突が発生しないことを保証できません.
対象の書き方
上記の問題を解決するために、モジュールを一つの対象として作成することができます.すべてのモジュールのメンバーはこの対象に入れます.
上記の問題を解決するために、すぐに関数の書き方を実行して、プライベートメンバを暴露しない目的を解決することができます.
拡大モード
モジュールが大きい場合、複数の部分に分けなければなりません.またはモジュールは別のモジュールを引き継ぐ必要があります.この場合は「拡大モード」を採用する必要があります.
幅拡大モード
ブラウザ環境では、モジュールの各部分は通常ネットワークから取得されています.この部分のリソースをいつおよびどのファイルが先に読み込まれているかを確認できないかもしれません.上記の表記を採用すると、最初に実行された部分は存在しない空のペアをロードする可能性があります.
グローバル変数を入力
独立性はモジュールの重要な特徴であり、モジュール内部はプログラムの他の部分と直接対話しないほうがいいです.モジュール内部でグローバル変数を呼び出すためには、他の変数を明示的に入力する必要があります.
モジュール仕様
なぜモジュールが重要ですか?
モジュールがあるので、他の人のコードをより便利に使えます.どんな機能が欲しいなら、どのモジュールをロードしますか?
しかし、このようにする前提条件があります.みんな同じ方法でモジュールを編纂しなければならないです.
現在、通行するJavaScriptモジュールの規格は全部で二種類あります.CommunJSとAMD(CMDとAMDは似ています.紹介しないで、必要なものがあります.sea.jsを調べてください.)
Common JS
2009年、米国のプログラマーRyan DahlはNode.jsプロジェクトを創造しました.JavaScript言語をサーバー側のプログラミングに使います.このマークは「JavaScriptモジュール化プログラミング」が正式に誕生しました.閲覧環境の下で、モジュールがなくても特に大きな問題ではありません.結局、ウェブページのプログラムの複雑さは限られています.しかし、サーバー側では、モジュールが必要です.オペレーティングシステムと他のアプリケーションとの対話が必要です.
Node.jsのモジュールシステムは、CommunJS仕様を参照して実装されます.Common JSでは、全体的な方法でrequire()をロードします.モジュールをロードするために使用されます.偽は数学モジュールmatch.jsがあるまで、以下のようにロードできます.
ここでみんなが知っている限り、モジュールをロードするためにrequireを使えばいいです.
ブラウザ環境
サーバーモジュールがあれば、クライアントにもモジュールがあるようにしたいかもしれません.
しかし、重大な制限のため、CommunJS規格はブラウザ環境に適用されないか、それとも前のコードか、ブラウザで実行すると大きな問題になります.
これはサーバーにとっては問題ではありません.すべてのモジュールはローカルハードディスクに保存されていますので、同時にロードが完了します.待ち時間はハードディスクの読み込み時間です.しかし、ブラウザにとっては、これは大きな問題です.モジュールはサービス端末に置いています.待ち時間はネットの速度によって遅くなります.長い時間待つかもしれません.ブラウザはブラウザがあります.「仮死」の状態です.したがって、ブラウザ側は必ず「同期ローディング」ではなく、「非同期ローディング」しか採用できません.つまり、AMD仕様が誕生した背景です.
AMD
AMDは「Aynchronous Module Definition」の略語です.すなわち「非同期モジュール定義」です.これは非同期方式でモジュールをロードします.モジュールのロードは後の文の実行に影響しません.このモジュールに依存するステートメントはすべて1つのコールバック関数で定義されています.ロードが完了したら、このコールバック関数は実行されます.
AMDはrequire()の語句を用いてモジュールをロードしますが、Common JSとは異なり、二つのパラメータが必要です.
現在、主に2つのJavaScriptライブラリがAMD仕様を実現しました.require.jsとcurl.js.
require.jsについて詳しく紹介します.もしcurl.jsに興味があれば、皆さんは自分で度娘さんに聞いてみてもいいです.
require.jsロードモジュール
なぜrequire.jsを使いますか?
最初にすべてのJavaScriptコードは一つのファイルに書いてあります.一つのファイルを読み込めば十分です.しかし、コードがだんだん多くなりました.一つのファイルは明らかに駄目です.分割して順次読み込まなければなりません.次のページコードはきっとよく分かりません. jsファイルを み むと、ブラウザはウェブページのレンダリングを し、ファイルを み むほど、ウェブページの がなくなる が くなります. .jsファイル に があるので、ロード を に しなければなりません. が きいモジュールは にロードしなければなりません. が な 、コードの と は しくなります. require.jsはこれらの を するために したのです..jsファイルの ロードを し、Webページの を うことを ける. モジュール の は、コードの と に である.
ロードrequire.js
サイトで のrequire.jsをダウンロードして、 をダウンロードします.http://www.requirejs.org.
ダウンロード 、js/libsディレクトリの に くと して、 のコードでロードします.
メインモジュールをカスタマイズ
require.jsをロードしたら、 のコードをロードします.main.jsがあなたの な「モジュール」であると して、js/libsディレクトリの に いても、 のように くだけです.
現在のウェブページはだんだん「インターネットアプリケーション」になり始めました.ウェブページに挿入されたJavaScriptコードはますます膨大になり、ますます複雑になりました.ウェブページはますますデスクトッププログラムのようになりました.チームの分担、進捗管理、ユニットテストなどが必要です.
JavaScriptはモジュール化されたプログラミングが切実な需要となりました.理想的には、開発者は核心的な業務ロジックを実現するだけで、他の人が書いたモジュールをロードすることができます.
しかし、JavaScriptはモジュール化されたプログラミング言語ではありません.「クラス」はサポートされていません.
JavaScriptコミュニティは多くの努力をして、既存の運行環境の下で、「モジュール」の効果を実現します.ここでは現在のJavaScriptモジュール化プログラミングの最適な実践をまとめました.
オリジナルの書き方
モジュールは特定の機能の一つの方法です.異なる関数を簡単に一緒に置くだけで、モジュールでもあります.
function a1(){
// code here
}
function a2(){
// code here
}
しかし、このようなやり方には明らかな欠点があります.「汚染」はグローバル変数であり、他のモジュールと変数名の衝突が発生しないことを保証できません.
対象の書き方
上記の問題を解決するために、モジュールを一つの対象として作成することができます.すべてのモジュールのメンバーはこの対象に入れます.
var module = new Object({
_count: 0,
a1: function(){},
a2: function(){},
});
module.a1();
module._count = 13;
上記の問題を解決するために、すぐに関数の書き方を実行して、プライベートメンバを暴露しない目的を解決することができます.
var module = (function(){
var _count = 0;
var a1 = function(){};
var a2 = function(){};
return {
a1: a1,
a2: a2
}
})();
拡大モード
モジュールが大きい場合、複数の部分に分けなければなりません.またはモジュールは別のモジュールを引き継ぐ必要があります.この場合は「拡大モード」を採用する必要があります.
var module = (function(m)(){
m.a3 = function(){};
return m;
})(module);
幅拡大モード
ブラウザ環境では、モジュールの各部分は通常ネットワークから取得されています.この部分のリソースをいつおよびどのファイルが先に読み込まれているかを確認できないかもしれません.上記の表記を採用すると、最初に実行された部分は存在しない空のペアをロードする可能性があります.
var module = (function(m)(){
m.a3 = function(){};
return m;
})(window.module || {});
グローバル変数を入力
独立性はモジュールの重要な特徴であり、モジュール内部はプログラムの他の部分と直接対話しないほうがいいです.モジュール内部でグローバル変数を呼び出すためには、他の変数を明示的に入力する必要があります.
var module = (function($, backbone){
// code here
})(jQuery, Backbone);
モジュール仕様
なぜモジュールが重要ですか?
モジュールがあるので、他の人のコードをより便利に使えます.どんな機能が欲しいなら、どのモジュールをロードしますか?
しかし、このようにする前提条件があります.みんな同じ方法でモジュールを編纂しなければならないです.
現在、通行するJavaScriptモジュールの規格は全部で二種類あります.CommunJSとAMD(CMDとAMDは似ています.紹介しないで、必要なものがあります.sea.jsを調べてください.)
Common JS
2009年、米国のプログラマーRyan DahlはNode.jsプロジェクトを創造しました.JavaScript言語をサーバー側のプログラミングに使います.このマークは「JavaScriptモジュール化プログラミング」が正式に誕生しました.閲覧環境の下で、モジュールがなくても特に大きな問題ではありません.結局、ウェブページのプログラムの複雑さは限られています.しかし、サーバー側では、モジュールが必要です.オペレーティングシステムと他のアプリケーションとの対話が必要です.
Node.jsのモジュールシステムは、CommunJS仕様を参照して実装されます.Common JSでは、全体的な方法でrequire()をロードします.モジュールをロードするために使用されます.偽は数学モジュールmatch.jsがあるまで、以下のようにロードできます.
var math = require('math');
var math = require('math');
math.sub(3,2);
ここでみんなが知っている限り、モジュールをロードするためにrequireを使えばいいです.
ブラウザ環境
サーバーモジュールがあれば、クライアントにもモジュールがあるようにしたいかもしれません.
しかし、重大な制限のため、CommunJS規格はブラウザ環境に適用されないか、それとも前のコードか、ブラウザで実行すると大きな問題になります.
var math = require('math');
math.sub(3,2);
これはサーバーにとっては問題ではありません.すべてのモジュールはローカルハードディスクに保存されていますので、同時にロードが完了します.待ち時間はハードディスクの読み込み時間です.しかし、ブラウザにとっては、これは大きな問題です.モジュールはサービス端末に置いています.待ち時間はネットの速度によって遅くなります.長い時間待つかもしれません.ブラウザはブラウザがあります.「仮死」の状態です.したがって、ブラウザ側は必ず「同期ローディング」ではなく、「非同期ローディング」しか採用できません.つまり、AMD仕様が誕生した背景です.
AMD
AMDは「Aynchronous Module Definition」の略語です.すなわち「非同期モジュール定義」です.これは非同期方式でモジュールをロードします.モジュールのロードは後の文の実行に影響しません.このモジュールに依存するステートメントはすべて1つのコールバック関数で定義されています.ロードが完了したら、このコールバック関数は実行されます.
AMDはrequire()の語句を用いてモジュールをロードしますが、Common JSとは異なり、二つのパラメータが必要です.
require([module], callback);
require(['math'], function(math){
math.sub(3, 2);
});
現在、主に2つのJavaScriptライブラリがAMD仕様を実現しました.require.jsとcurl.js.
require.jsについて詳しく紹介します.もしcurl.jsに興味があれば、皆さんは自分で度娘さんに聞いてみてもいいです.
require.jsロードモジュール
なぜrequire.jsを使いますか?
最初にすべてのJavaScriptコードは一つのファイルに書いてあります.一つのファイルを読み込めば十分です.しかし、コードがだんだん多くなりました.一つのファイルは明らかに駄目です.分割して順次読み込まなければなりません.次のページコードはきっとよく分かりません.
ロードrequire.js
サイトで のrequire.jsをダウンロードして、 をダウンロードします.http://www.requirejs.org.
ダウンロード 、js/libsディレクトリの に くと して、 のコードでロードします.
メインモジュールをカスタマイズ
require.jsをロードしたら、 のコードをロードします.main.jsがあなたの な「モジュール」であると して、js/libsディレクトリの に いても、 のように くだけです.
<p> , JavaScript .<br> , require.js. , , AMD require .</p>
<pre><code>//main.js
require(['ModuleA', MmoduleB', 'ModuleC'], function(modulea, moduleb, modulec){
// some code here;
});
</code></pre>
<p>require , :</p>
<ul>
<li> , , . "ModuleA", "ModuleB, "ModuleC".</li>
<li> , , , . , .</li>
</ul>
<p> , require ModuleA, ModuleB, ModuleC, ; , , js .</p>
<p> , jquery, underscore backbone , main.js :</p>
<pre><code>require(['jquery', 'underscore', 'backbone'], function($, _underscore, Backbone){
// some code here;
});
</code></pre>
<h2> </h2>
<p> , require.js main.js , jquery.js, underscore.js backbone.js, .</p>
<p> require.config , . require.config (main.js) . paths , , :</p>
<pre><code>require.config({
baseUrl: 'static/js',
debug: true,
paths: {
jquery: 'jquery-1.8.3.min',
underscore: 'underscore.min',
backbone: 'backbone.min'
}
});
</code></pre>
<p> main.js js , <strong> , js/lib , , baseUrl. data-main baseUrl , baseUrl data-main , data-main baseUrl require.js html , baseUrl .</strong></p>
<pre><code>require.config({
baseUrl: 'static/js',
paths: {
jquery: 'lib/jquery-1.8.3.min',
underscore: 'lib/underscore.min',
backbone: 'lib/backbone.min'
}
});
</code></pre>
<p> </p>
<pre><code>require.config({
baseUrl: 'static/js/lib',
paths: {
jquery: 'jquery-1.8.3.min',
underscore: 'underscore.min',
backbone: 'backbone.min'
}
});
</code></pre>
<p> , , :</p>
<pre><code>require.config({
paths: {
jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min',
}
});
</code></pre>
<p>require.js , js , , HTTP , . , require.js , , , HTTP .</p>
<h2> AMD </h2>
<p>require.js AMD , , define .</p>
<p><strong>- </strong><br> , name/value, define().</p>
<pre><code>// inside file demo.js
define({
color: "black",
size: "32"
});
</code></pre>
<p><strong>- </strong></p>
<pre><code>// inside file demo.js
define(function(){
return {
color: "black",
size: "32"
}
});
</code></pre>
<p><strong>- </strong><br> , , . , . . , .</p>
<pre><code>//demo.js
define(['./cart', '.inventory'], function(cart, inventory){
return {
color: 'blue',
size: 'large',
addToCart: function(){
inventory.decrement(this);
cart.add(this);
}
}
});
</code></pre>
<p> , demo , cart inventory . , cart inventory, cart inventory , cart inventory , cart inventory .</p>
<p><strong>- </strong><br> . . :</p>
<pre><code>define(['my/cart', 'my/inventory'], function(cart, inventory){
return function(title){
return title ? (window.title = title) : inventory.storeName + "" + cart.name;
}
});
</code></pre>
<p><strong>- AMD </strong><br> , require.js AMD , define . , ( jQuery) AMD , . require.js ? , , require.config , .</p>
<p> , : jquery.js, underscore.js backbone.js, , jQuery.js , underscore backbone . , :</p>
<pre><code>require.config({
shim: {
'underscore': {
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone',
}
}
});
</code></pre>
<p>require.config shim, . , :</p>
<ul>
<li>exports ( ), .</li>
<li>deps , </li>
</ul>
<p> , jQuery :</p>
<pre><code>require.config({
shim: {
'underscore': {
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone',
},
'jquery.scroll': {
deps: ['jquery'],
exports: 'jQuery.fn.scroll'
}
}
});
</code></pre>
<p> require.js , require.js , github .</p>
</article>
</div>
</div>
</div>
<!--PC WAP -->
<div id="SOHUCS" sid="1227547511946842112"></div>
<script type="text/javascript" src="/views/front/js/chanyan.js">