RequireJS入門ガイド
4602 ワード
JavaScript RequireJS。 ， RequireJS， RequireJS。 ， RequireJS ， 。
(AMD)
RequireJS， JavaScript ， AMD 。
JavaScript SRP(Single Responsibility Principle ) ， API。 JavaScript ， ， ， 。 JavaScript ， ， ， 。
JavaScript ， script 。 ， ， 。 script ， ， 。 async defer ， 。 ， 。
AMD ， ， 。
CommonJS, JavaScript ， AMD ， 。 ECMAScript 6 JavaScript ， ， ， JavaScript ， 。 RequireJS 。
RequireJS?
RequireJS Javascript ， http://requirejs.org/ ， Visual Studio Nuget 。 node.js 。 RequireJS, 。
RequireJS ， script ， head.appendChild() 。 ，RequireJS ， 。 “ ” ， RequireJS 。 ， RequireJS API， 。
RequireJS API RequireJS requirejs 。 API :
define– 。 ID， RequireJS ，define ， requirejs .
require– 。 ， requirejs .
config– RequireJS.
， ， RequireJS 。
data-main
RequireJS ， RequireJS 。 RequireJS ， data-main （ src RequireJS ）。data-main 。 ，RequireJS 。 data-main ：
1 <script src="scripts/require.js" data-main="scripts/app.js"></script>
， 。requireJs ， .js 。
RequireJS ， require.configh 。config ， 。 ：
baseUrl—— 。
paths—— 。
shims—— / RequireJS 。 underscore RequireJS ， RequireJS ， shim。
deps——
：
01 require.config({
02 //By default load any module IDs from scripts/app
03 baseUrl: 'scripts/app',
04 //except, if the module ID starts with "lib"
05 paths: {
06 lib: '../lib'
07 },
08 // load backbone as a shim
09 shim: {
10 'backbone': {
11 //The underscore script dependency should be loaded before loading backbone.js
12 deps: ['underscore'],
13 // use the global 'Backbone' as the module name.
14 exports: 'Backbone'
15 }
16 }
17 });
scripts/app， lib scripts/lib ，backbone shim 。
Defining Modules Using RequireJS
Modules are just well-scoped objects that expose an API and encapsulate their internals. In order to define a module, RequireJS exposes thedefinefunction. There should be only one call fordefinein each JavaScript file by convention. Thedefinefunction receives an array of dependencies and a function which is going to hold all the module definitions. By convention the module definition function receives as parameters all the previous dependencies and in the order they were supplied in the array. For example, here is a simple module definition:
01 define(["logger"], function(logger) {
02 return {
03 firstName: “John",
04 lastName: “Black“,
05 sayHello: function () {
06 logger.log(‘hello’);
07 }
08 }
09 }
10 );
As you can see, an array is passed to thedefinefunction with a logger dependency which is later used in the module. Also, you can see that in the module definition function there is a parameter calledloggerwhich will be set to the loaded logger module. Every module should return its API which in this case is two properties (firstNameandlastName) and a function (sayHello). Later on, if you will load this module as another module dependency with a module ID, you will be able to use the exposed API.
require
RequireJS require 。require 。 ： require jQuery 。
1 require(['jquery'], function ($) {
2 //jQuery was loaded and can be used now
3 });
RequireJS , Javascript 。 ，RequireJS JavaScript ， 。