JavaScript 모듈러 프로그래밍에 대한 자세한 설명-JS 튜토리얼-php.cn

JavaScript 모듈러 프로그래밍에 대한 자세한 설명

高洛峰

풀어 주다： 2017-03-12 13:21:27

원래의

1401명이 탐색했습니다.

본 글에서는 자바스크립트 모듈러 프로그래밍을 자세히 설명합니다

1장 자바스크립트 모듈러 프로그래밍

(1): 모듈 작성 방법

원래 작성 방법
/ / A 모듈은 특정 기능을 구현하는 방법의 집합입니다. 다양한 함수(및 상태를 기록하는 변수 )를 간단히 모아서 모듈로 간주합니다. function m1(){
}
}
function m2(){
}
// 위의 함수 m1() 및 m2( )는 다음과 같은 경우에 직접 호출하면 됩니다. using;
// 단점: 전역 변수의 "오염"; 변수 이름이 다른 모듈과 충돌하지 않는다는 보장이 없으며 모듈 구성원 간에 직접적인 관계가 없습니다.

둘

Object

쓰기

// 把模块写成一个对象,所有的模块成员都放到这个对象里面;
  var module = new Object({
    _count:0,
    m1:function(){
      // ...
    },
    m2:function(){
      // ...
    }
  });
// 上面的函数m1()和m2(),都封装在module对象里;使用时直接调用这个对象的属性;
  module.m1();
// 但是,这样的写法会暴露所有模块成员,内部状态可以被外部改写;
  module._count = 4;

로그인 후 복사

세 즉시 실행되는 함수 쓰기

  var module = (function(){
    var _count = 0;
    var m1 = function(){
      // ...
    };
    var m2 = function(){

    };
    return {
      m1:m1,
      m2:m2
    };
  })();
// 使用上面的写法,外部代码无法读取内部的_count变量;
  console.info(module._count); // undefined;
// 上面的写法就是JavaScript模块的基本写法;

로그인 후 복사

4와이드 줌 모드

안녕

5와이드 줌 모드

// 如果模块很大,必须分成几个部分,或者一个模块需要继承另一个模块,这时就有必要采用"放大模式";
  var module = (function(mod){
    mod.m3 = function(){
      // ...
    };
    return mod;
  })(module);
// 上面的代码为module模块添加了一个新方法m3(),然后返回新的module模块;

로그인 후 복사

6개의 입력 전역 변수

// 在浏览器环境中,模块的各个部分通常都是从网上获取的,有时无法知道哪个部分会先加载;
// 如果采用上一节的写法,第一个执行的部分有可能加载一个不存在的空对象,这时就要采用"宽放大模式";
  var module = (function(mod){
    // ...
    return mod;
  })(window.module || {});
// 与"放大模式"相比,"宽放大模式"就是"立即执行函数"的参数可以是空对象;

로그인 후 복사

장 2 JavaScript 모듈형 프로그래밍(2): AMD 사양

하나의 모듈 사양

// 현재 두 가지 인기 있는 JavaScript 모듈 사양이 있습니다: CommonJS 및 AMD;

2 CommonJS

/ /

node.js
는 서버측 프로그래밍에 JavaScript 언어를 사용하며, 이는 "JavaScript 모듈식 프로그래밍"의 공식적인 탄생을 의미합니다. // CommonJS 사양을 참조하여 구현된 node.js 모듈 시스템; CommonJS에는 모듈을 로드하는 데 사용되는 전역 메서드
require
()가 있습니다. var math = require('math') // Load module; math .add(2,3); 큰 문제가 발생합니다.
var math = require('math');
math.add(2,3);

// 문제: 기다려야 합니다. require('math')의 math. Math.add(2,3)은 js가 로드된 후에만 실행됩니다.

// 따라서 브라우저 모듈은 "동기 로딩"을 사용할 수 없으며 "비동기 로딩"만 사용할 수 있습니다. ; ==>AMD;

quadAMD
AMD(Asyn
chr
onous Module Definition) 비동기 모듈 정의;

// 모듈의 비동기 로딩을 사용하여 모듈은 뒤에 있는 명령문의 실행에 영향을 주지 않으며 모든 종속성 이 모듈의 명령문은 모두

콜백 함수
에 정의됩니다. // 이 콜백 함수는 로드가 완료될 때까지 실행되지 않습니다. Completed; // AMD는 또한 require() 문을 사용하여 모듈을 로드하지만 두 개의 매개변수가 필요합니다:
require([module],callback);// 모듈: 배열입니다.
, 그리고 그 안의 멤버는 로드할 모듈입니다.
/ / callback: 로드 성공 후의 콜백 함수입니다.
require(['math'],function(math){
math .add(2,3); });// Math.add() 및 수학 모듈 로딩이 동기화되지 않아 브라우저가 멈추지 않으므로 AMD가 브라우저 환경에 더 적합합니다.

3장 JavaScript 모듈형 프로그래밍(3): require.js 사용법
1 require.js를 사용하는 이유
// 여러 js 파일을 순서대로 로드해야 합니다.
// 단점: // 따라서 require.js는 다음 두 가지 문제를 해결합니다.

// 1. 비동기 로딩을 구현합니다. 웹페이지 응답 손실을 방지하기 위한 js 파일
// 2. 모듈 간 관리 종속성으로 코드 작성 및 유지 관리가 용이함

require.js 로드
1. require.js 로드

// async 속성은 웹 페이지의 응답 손실을 방지하기 위해 이 파일을 비동기식으로 로드해야 함을 나타냅니다. ; IE는 이 속성을 지원하지 않으므로 defer
2 .Load
main

.js

// data-main 속성의 기능은 웹 프로그램의 기본 모듈을 지정하는 것입니다. =>main.js 이 파일은 require에 의해 로드됩니다. js first
// require.js의 기본 파일 접미사는 js이므로 main.js를 main으로 축약할 수 있습니다.

3가지 주요 모듈 main.js 작성 방법
1. main.js가 다른 모듈에 의존하지 않는 경우 JavaScript 코드를 직접 작성할 수 있습니다.
// main.js
'로드 성공!');
2. main.js가 모듈에 의존하는 경우 AMD 사양에 정의된 require() 함수를 사용해야 합니다.
// main.js
require( ['moduleA','moduleB','moduleC'],function(moduleA,moduleB,moduleC){
하나: 배열, 종속 모듈, 즉 기본 모듈이 의존하는 세 개의 모듈을 나타냅니다.
// 매개변수 2: 콜백 함수, 이전에 지정한 모든 모듈이 성공적으로 로드되면 호출됩니다. 로드된 모듈은 함수를 매개변수로 전달하므로 이러한 모듈은 콜백 함수 내에서 사용할 수 있습니다. // require()는 모듈을 비동기적으로 로드하며 브라우저는 지정된 콜백 함수에 대한 응답을 잃지 않으며 이전 모듈만 성공적으로 로드됩니다. 종속성 문제를 해결한 후에만 실행됩니다.
> require(['jquery','underscore','backbone'], function($,_,Backbone){
/ / ...
});

4개 모듈 로딩
//require.config() 메소드를 사용하여 모듈의 로딩 동작을 사용자 정의합니다.
// require.config()는 기본 모듈(main.js)의 헤드에 작성됩니다. // 매개변수는 객체이며, 이 객체의 paths 속성은 각 모듈의 로딩 경로를 지정합니다.
// 다음 세 가지 모듈을 설정합니다. 파일은 기본적으로 main.js와 동일한 디렉터리에 있습니다. ",

"backbone":"backbone.min"

}
});

// 로드된 모듈과 기본 모듈이 동일한 디렉터리에 없으면 경로를 1로 지정해야 합니다.
require.config({
경로:{
"jquery":"lib/jquery.min",
"underscore":"lib/underscore.min",
"backbone" ;
경로:{
"jquery":"jquery.min",
"underscore":"underscore.min",

"backbone":"backbone.min"

}
});

// 모듈이 다른 호스트에 있는 경우 해당 URL을 직접 지정할 수도 있습니다.
require.config({
paths:{
"jquery ":" https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
}
});
// require.js 요구사항, 각 모듈은 별도의 js 파일. 이 경우 여러 모듈이 로드되면 여러 HTTP 요청이 발행되어 웹 페이지의 로딩 속도에 영향을 미칩니다.
// 따라서 require.js는 이후에 최적화 도구를 제공합니다. 모듈이 배포되면 이 도구를 사용하여 여러 모듈을 하나의 파일로 병합하여 HTTP 요청 수를 줄일 수 있습니다.

다섯 개의 AMD 모듈을 작성하는 방법

// require.js에 의해 로드된 모듈은 AMD 사양을 채택합니다. 즉, 모듈은 AMD 규정에 따라 작성되어야 합니다.
// 특히 모듈은 특정 정의() 함수를 사용하여 정의되어야 합니다. 모듈은 다른 모듈에 의존하지 않으며, 정의() 함수에서 직접 정의할 수 있습니다.
// math.js에서 수학 모듈을 정의합니다
// math.js
정의(function() {
var add = function(x,y){
return x+y;
};
return {
};
});
// 로드 main.js의 수학 모듈
require(['math'],function(math){
Alert(math.add(1,1));
});
// 이 경우 모듈도 다른 모듈에 의존하는 경우, 정의() 함수의 첫 번째 매개변수는 모듈의 종속성을 나타내는 배열이어야 합니다.
// math.js
정의(['myLib '],function( myLib){
function foo(){
myLib.doSomething();
}
return {
foo:foo
} ;
}) ;
/ / require() 함수가 위 모듈을 로드할 때 myLib.js 파일이 먼저 로드됩니다;

6개의 비표준 모듈 로드

// 비표준 모듈 로드 모듈 로드 전 require()를 사용하려면 먼저 require.config() 메서드를 사용하여 일부 특성을 정의해야 합니다. 🎜> 내보내기:'_'

내보내기:'백본'
}
});
// require.config()는 앞서 언급한 paths 속성 외에도 특히 호환되지 않는 모듈을 구성하는 데 사용되는 shim 속성을 받습니다.
// (1) 모듈의 종속성을 나타내는 deps 배열;
// (2) 외부에서 호출될 때 이 모듈의 이름을 나타내는 내보내기 값(출력 변수 이름)을 정의합니다.
예: jQuery 플러그인
shim:{
'jquery.scroll':{
deps:['jquery'],
내보내기:'jQuery.fn.scroll'
}
};

7가지 require.js 플러그인

1.domready: 페이지 DOM 구조가 로드된 후 콜백 함수를 실행할 수 있습니다.
require(['domready!'], function(doc) {
// DOM이 준비되면 호출됨;
})
2.text 및 이미지: require.js가 텍스트 및 이미지 파일을 로드하도록 허용;
정의(['text! review.txt ','image!cat.jpg'],function(review,cat){