이 기사는 주로 참조 가치가 있는 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 는 패키지된 출력 파일입니다)

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

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

설명:

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

기본 구문:

노출된 모듈 정의: ​​

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

사용 모듈 소개:

require(['module1','module2'],function(m1,m2){
　　　　使用m1/m2
　　})

구현(브라우저 측):

Require.js

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

기본 구문:

노출된 모듈 정의: ​​

　//定义没有依赖的模块：
　　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('./module1')
　　　　var m4 = require('./module4')
　　　　m1.show()
　　　　m4.show()
　　})

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

구문: ​​

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

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

페이지 소개

구현(브라우저 측 ) :

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

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

관련 추천:

자바스크립트 로딩 분석에 대하여

자바스크립트 즉시 실행 기능 분석에 대하여

위 내용은 JS 모듈화 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!