勉強する.js(回転)
4229 ワード
前言
requireに言及する.jsの多くはモジュール化開発、AMDなどと言いますが、実はrequire.jsにはそんなに複雑な概念はありません.ここではこれらの概念を排除し、実用的な観点からrequireを簡単に話したいと思っています.jsは何をしていますか.私たちはそれをどのように使いますか.
どうしてrequireを使うの?js
ほとんどのフロントエンド開発者はjqueryを使用したことがあります.では、jqueryを使用する前に、まずjqueryをページにロードし、その後のjsで$を使用することができます.これには、すべてのjsコードを1つのファイルに置くことができません.jqueryなどのモジュールになることができます.もう1つの理屈では、一部のjsは、$がjqueryファイルのロードに依存するなど、他のjsに依存する.実はrequire.jsが主にしていることはこの2点です.jsプロジェクトが十分に大きく、十分に複雑で、依存するライブラリが十分に多い場合、これらのjsの管理を行うには、このようなツールが必要です.そうしないと、プロジェクトの拡張性が悪く、構造が悪く、修正したい場所を見つけるのは難しいです.実は他の多くのプログラミング言語はすでにコードの中で類似の機能を実現しています.例えば、このpythonです.
よく理解して、私たちはwebオブジェクトをインポートして、それから次のコードでwebを使用することができます.database
どうやってrequireを使うの?js?
まずページをrequireにロードします.js、これは自分で頼ることはできません
requireというモードを する は、ファイルを な さなブロックに することである 、jsファイルもモジュールと ばれる に され、 apiインスタンスのディレクトリ は のようになります.
www/index.html js/app/sub.js lib/jquery.js canvas.js app.js
ここではappアプリケーションですが、 なページ でも になるのは、jsを と に じて し、ライブラリファイルを に、サブモジュールを に、 jsを にロードすることです.ここで、モジュール の は の と の を にすることであり、 が に でないと っている は にする はなく、どんな や を うために コストを やしたことはしないことに してください.
モジュールの
jqueryのようなライブラリファイルはともかく、モジュールをどのように するかはsub.jsファイルです.
もし たちが したものの に があれば、 えばjqueryを って、 たちはこのようにすることができます.
えてみると、ここの はこのようにして、 のパラメータ、 の のものは が に するモジュールで、 ろのコールバック のパラメータ、 に の の のオブジェクトの です.
び しモジュール
のディレクトリの を えていますか? たちは として サイトの を って、app.jsはプロジェクトの り で、 は の りです.
require.configプロファイル、ここではbaseUrlなどを します
にrequire び しです.ここでは び しです.defineを していますが、コード は と ています. じように のパラメータは オブジェクトの で、コールバックで されます.パラメータは していたオブジェクトです.
くりを つあげる
は を する の であり、 の を るだけでは に たない. で も を して10 の を むよりましだ. は で な を いて、 が があれば で くこともできます.
は モジュールを っていて、 は をsthと んで、このモジュールはsth.jsの に いて、 のようにします
この にrequireは の2つのサブモジュール、part 1とpart 2を ってきて、 らの を して ブロックの に いて、そして たちに ってpart 1を て、part 2はどんな をして、まず らはpart 1です.jsとpart 2.jsファイル、require.jsにはjsスクリプトファイルが み まれていると いますので、 に します.js
そして たちはindexのようなメインファイルにいます.html,main.js...sthを び す
ここにもう つのcheckオブジェクトがあると し、checkが であればsth.f 1を し、そうでなければsth.f 2を して えてみましょう.f 1,f 2は は2つのファイルの にあります.
ここではただ が の を にして、 の の で の の に づいて のプロジェクトを して して、 び して、 うために わないでください.
に
よし、 たち、require.jsは がありますか?じゃ、ここに ってクレイジーに ましょう.
http://requirejs.org/
ここから
requireに言及する.jsの多くはモジュール化開発、AMDなどと言いますが、実はrequire.jsにはそんなに複雑な概念はありません.ここではこれらの概念を排除し、実用的な観点からrequireを簡単に話したいと思っています.jsは何をしていますか.私たちはそれをどのように使いますか.
どうしてrequireを使うの?js
ほとんどのフロントエンド開発者はjqueryを使用したことがあります.では、jqueryを使用する前に、まずjqueryをページにロードし、その後のjsで$を使用することができます.これには、すべてのjsコードを1つのファイルに置くことができません.jqueryなどのモジュールになることができます.もう1つの理屈では、一部のjsは、$がjqueryファイルのロードに依存するなど、他のjsに依存する.実はrequire.jsが主にしていることはこの2点です.jsプロジェクトが十分に大きく、十分に複雑で、依存するライブラリが十分に多い場合、これらのjsの管理を行うには、このようなツールが必要です.そうしないと、プロジェクトの拡張性が悪く、構造が悪く、修正したい場所を見つけるのは難しいです.実は他の多くのプログラミング言語はすでにコードの中で類似の機能を実現しています.例えば、このpythonです.
import web
db = web.database(dbn='sqlite', db="todos.db")
よく理解して、私たちはwebオブジェクトをインポートして、それから次のコードでwebを使用することができます.database
どうやってrequireを使うの?js?
まずページをrequireにロードします.js、これは自分で頼ることはできません
requireというモードを する は、ファイルを な さなブロックに することである 、jsファイルもモジュールと ばれる に され、 apiインスタンスのディレクトリ は のようになります.
www/index.html js/app/sub.js lib/jquery.js canvas.js app.js
ここではappアプリケーションですが、 なページ でも になるのは、jsを と に じて し、ライブラリファイルを に、サブモジュールを に、 jsを にロードすることです.ここで、モジュール の は の と の を にすることであり、 が に でないと っている は にする はなく、どんな や を うために コストを やしたことはしないことに してください.
モジュールの
jqueryのようなライブラリファイルはともかく、モジュールをどのように するかはsub.jsファイルです.
//
define({
color: "black",
size: "unisize"
});
//
define(function () {
//Do setup work here
return {
color: "black",
size: "unisize"
}
});
もし たちが したものの に があれば、 えばjqueryを って、 たちはこのようにすることができます.
define(["../lib/jquery"], function($) {
return {
color: "blue",
size: "large",
addToCart: function() {
$('.cart-color').append(color)
}
}
}
);
えてみると、ここの はこのようにして、 のパラメータ、 の のものは が に するモジュールで、 ろのコールバック のパラメータ、 に の の のオブジェクトの です.
び しモジュール
のディレクトリの を えていますか? たちは として サイトの を って、app.jsはプロジェクトの り で、 は の りです.
require.config({
//By default load any module IDs from js/lib
baseUrl: 'js/lib',
//except, if the module ID starts with "app",
//load it from the js/app directory. paths
//config is relative to the baseUrl, and
//never includes a ".js" extension since
//the paths config could be for a directory.
paths: {
app: '../app'
}
});
// Start the main app logic.
require(['jquery', 'canvas', 'app/sub'],
function ($, canvas, sub) {
//jQuery, canvas and the app/sub module are all
//loaded and can be used here now.
});
require.configプロファイル、ここではbaseUrlなどを します
にrequire び しです.ここでは び しです.defineを していますが、コード は と ています. じように のパラメータは オブジェクトの で、コールバックで されます.パラメータは していたオブジェクトです.
くりを つあげる
は を する の であり、 の を るだけでは に たない. で も を して10 の を むよりましだ. は で な を いて、 が があれば で くこともできます.
は モジュールを っていて、 は をsthと んで、このモジュールはsth.jsの に いて、 のようにします
define(function(require){
var p1 = require('part/part1');
var p2 = require('part/part2');
return {
f1: p1.doSome,
f2: p2.doOther
}
})
この にrequireは の2つのサブモジュール、part 1とpart 2を ってきて、 らの を して ブロックの に いて、そして たちに ってpart 1を て、part 2はどんな をして、まず らはpart 1です.jsとpart 2.jsファイル、require.jsにはjsスクリプトファイルが み まれていると いますので、 に します.js
//part1.js
define(function(){
return {
doSome: function(){
console.log('doSome')
}
}
})
//part2.js
define(function(){
return {
doOther: function(){
console.log('doOther')
}
}
})
そして たちはindexのようなメインファイルにいます.html,main.js...sthを び す
require(['sth','check'],function(sth,check){
if(check.ok){
sth.f1()
}else{
sth.f2()
}
})
ここにもう つのcheckオブジェクトがあると し、checkが であればsth.f 1を し、そうでなければsth.f 2を して えてみましょう.f 1,f 2は は2つのファイルの にあります.
ここではただ が の を にして、 の の で の の に づいて のプロジェクトを して して、 び して、 うために わないでください.
に
よし、 たち、require.jsは がありますか?じゃ、ここに ってクレイジーに ましょう.
http://requirejs.org/
ここから