집 > 기사 > 웹 프론트엔드 > JS 모듈화 분석

JS 모듈화 분석

不言원래의: 2018-07-11 11:04:271343검색

이 기사는 주로 참조 가치가 있는 JS 모듈화에 대한 분석을 소개합니다. 이제 모든 사람과 공유합니다. 도움이 필요한 친구들이 참조할 수 있습니다.

1. 모듈화와 모듈화란 무엇입니까?

복잡한 프로그램을 특정 사양에 따라 여러 파일로 패키징하고 결합합니다

2. 왜 모듈화하나요?

복잡성 감소, 분리 개선 및 배포 촉진

3. 모듈화의 이점

이름 충돌 방지(네임스페이스 오염 감소)
더 나은 분리, 온디맨드 로드

higher high high mashertability
4.
서버 측: 모듈은 런타임 중에 동기적으로 로드됩니다.

브라우저 측: 모듈을 미리 컴파일하고 패키지해야 합니다

기본 구문 :

모듈 소개: require(xxx)

타사 모듈: xxx는 모듈 이름

사용자 정의 모듈: xxx는 모듈 파일 경로

노출된 모듈: imports.xxx = 값 그리고 module.exports = value

노출된 모듈의 본질은 내보내기 개체입니다.

내보내기 자체는 빈 개체입니다. .exports = value는 원래의 빈 객체를 새 값 object

구현:

서버 측 구현: Node.js

브라우저 측 구현: Browserify(CommonJS 브라우저 측 패키징 도구)

browserify 다운로드 및 설치

글로벌: npm install browserify -g

로컬: npm install browserify --save-dev

모듈 코드 정의(js 파일 코드 및 해당 콘텐츠 노출)

소개 모듈 app.js에서 require를 사용하여 모듈을 소개하는데 브라우저가 require 메소드를 인식하지 못합니다. js

　 browserify js/src/app.js -o js/dist를 입력하세요. 루트 디렉터리의 터미널에 있는 /bundle.js( js/src/app.js 소스 파일 js/dist/bundle.js 는 패키지된 출력 파일입니다)

페이지를 사용하여 소개됨:

1a471bc30ff07b77350dbb32ce7510122cacc6d41bbb37262a98f745aa00fbf0 (브라우저가 실제로 실행하는 것은 패키지되고 생성된 파일입니다.)

2. AMD

설명:

브라우저 측 모듈화 사양 및 모듈 로딩에 특별히 사용됨 비동기식입니다.

기본 구문:

노출된 모듈 정의:

　//定义没有依赖的模块：
　　define(function(){
　　　　return 模块
　　})
　　//定义有依赖的模块：
　　define([&#39;module1&#39;,&#39;module2&#39;],function(m1,m2){
　　　　return 模块
　　})

사용 모듈 소개:

require([&#39;module1&#39;,&#39;module2&#39;],function(m1,m2){
　　　　使用m1/m2
　　})

구현(브라우저 측):

Require.js

3 , CMD(이해)

설명: 특히 브라우저 측에서 사용되며, 모듈 로딩은 비동기식이며, 모듈이 사용될 때 모듈이 로드되고 실행됩니다

기본 구문:

노출된 모듈 정의:

　//定义没有依赖的模块：
　　define(function(require,exports,module){
　　　　exports.xxx = value
　　　　module.exports = value
　　})
　　//定义有依赖的模块：
　　define(function(require,exports,module){
　　　　//引入依赖模块(同步)
　　　　var module2 = require("./module2")
　　　　//引入依赖模块（异步）
　　　　require.async("./module3",function(m3){
　　　　})
　　　　//暴露模块
　　　　exports.xxx = value
　　})

모듈 소개 및 사용:

require(function(require){
　　　　var m1 = require(&#39;./module1&#39;)
　　　　var m4 = require(&#39;./module4&#39;)
　　　　m1.show()
　　　　m4.show()
　　})

구현(브라우저 측): Sea.js

4, ES6

참고: 종속됨 모듈을 컴파일하고 패키지해야 합니다

구문:

내보내기 모듈: 내보내기 xxx

　소개 모듈: "url"에서 xxx 가져오기

페이지 소개

구현(브라우저 측 ) :

Babel을 사용하여 ES6를 ES5 코드로 컴파일

B rowserify를 사용하여 js 컴파일 및 패키징

위 내용은 모든 사람의 학습에 도움이 되기를 바랍니다. 내용이 있으니 PHP 중국어 홈페이지를 주목해주세요!