일부 관련 모듈 기본 사항

이 글에서는 모듈화의 기본과 이 분야의 관련 지식을 이해하는 방법을 자세히 설명합니다.

왜 모듈화를 사용하나요?

이름 충돌 해결 및 글로벌 오염 방지

종속성 관리 해결

코드 가독성 향상

코드 분리 및 재사용성 향상

CMD, AMD 및 CommonJS 사양은 무엇을 참조합니까? CMD는 공통 모듈 정의입니다. 이는 주로 sea.js의 프로모션 프로세스에서 모듈 정의의 표준화된 출력이며, 파일 이름을 모듈 ID로 사용하는 경우가 많습니다. 근처 종속성을 권장합니다. 기본 애플리케이션은 sea.js입니다. 예:

define(function(require,exports,module){
    var $ = require('jquery.js')
    $('div').addClass('active');

});//cmd는 근처 종속성을 권장하므로 종속성은 함수로 작성되고 require는 메서드, 내보내기는 객체, 외부 인터페이스 제공, 모듈 현재 모듈과 관련된 속성과 메서드를 저장하는 개체입니다.

AMD는 주로 require.js의 승격 프로세스 중 모듈 정의의 표준화된 출력입니다. 이는 여러 js 파일의 종속성 문제와 많은 js 파일을 로드할 때의 페이지 대기 문제를 해결합니다. 사전 위치 지정, 기본 애플리케이션은 require.js입니다. 예:

define('modal',['jQuery'],function($){
    $('modal').show();

})//define은 정의 키워드이고, modal은 정의된 모듈 이름이며 일반적으로 생략할 수 있으며, []에는 로드할 종속 모듈이 포함되어 있습니다. 콜백 함수가 이어집니다.

CommonJS는 주로 브라우저 측에서 실행되는 모듈 사양을 말하며, 주요 애플리케이션은 node.js입니다.

파일은 모듈에 해당하며, 각 모듈은 별도의 범위를 가지며, 로드된 모듈은 동기적으로 로드됩니다.

모듈에는 moudle.exports 객체 하나만 내보내기됩니다. 모듈이 출력하려는 ​​객체를 모듈에 넣으세요.

require 메소드를 사용하여 모듈을 로드하세요. 예:

//模块定义  myMode.jsvar name = 'jiuyi';function printName(){    console.log(name);
}
functionprintFullName(firstName){
    consoele.log(firstName+name);
}module.erports = {    printName: printName,    printFullName: printFullName
}//加载模块var nameModule = require('./myMode.js')
nameModule.printName();

다음 requirejs 구성에서 baseUrl의 역할은 무엇입니까? paths의 역할과 사용법은 무엇인가요?

requirejs.config({  baseUrl: "src/js",  
  paths: {    'jquery': 'lib/bower_components/jquery/dist/jquery.min'
  }
});

baseUrl의 역할은 html이 있는 경로를 기준으로 JS 파일을 로드하기 위한 기본 경로를 설정하는 것입니다. baseUrl 기본 경로 외에 일부 기본 경로 baseUrl 경로를 기반으로 하는 특정 파일에 대한 경로입니다.

다음 r.js 패키징 구성에서 baseUrl은 무엇인가요? name은 무엇인가요

({
    baseUrl: "./src/js",
    paths: {        'jquery': 'lib/bower_components/jquery/dist/jquery.min'
    },
    name: "main",
    out: "dist/js/merge.js"})

여기서 baseUrl은 자체 파일 경로를 기준으로 require.js 구성 파일의 baseUrl을 나타냅니다.

name은 입구의 이름을 나타냅니다. 메인 모듈

out은 패키지된 출력 경로를 의미합니다

이 글에서는 모듈화와 관련된 기본 지식을 설명하고 있습니다. 더 많은 관련 지식을 원하시면 PHP 중국어 홈페이지를 참고해주세요.

관련 추천:

dom 객체의 innerText와 innerHTML의 차이점은 무엇인가요?

JS에 대한 몇 가지 기본 질문

프론트 엔드 js로 require.js를 모듈화하는 방법

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