작은 프로그램의 모듈화에 대한 자세한 설명

파일 범위

JavaScript 파일에 선언된 변수와 함수는 해당 파일에서만 유효합니다. 동일한 이름을 가진 변수와 함수는 다른 파일에 선언될 수 있으며 상호 작용하지 않습니다. 서로 영향을 미칩니다.

글로벌 애플리케이션 인스턴스는 전역 함수 getApp()를 통해 얻을 수 있습니다. 전역 데이터가 필요한 경우 다음과 같이 App()에서 설정할 수 있습니다.

// app.jsApp({
  globalData: 1})

// a.js
// The localValue can only be used in file a.js.var localValue = 'a'
// Get the app instance.
var app = getApp()
// Get the global data and change it.
app.globalData++

// b.js
// You can redefine localValue in file b.js, without interference with the localValue in a.js.
var localValue = 'b'
// If a.js it run before b.js, now the globalData shoule be 2.
console.log(getApp().globalData)

모듈화

몇 가지 공통 코드를 별도의 js 파일에 모듈로 추출할 수 있습니다. 모듈은 module.exports를 통해서만 인터페이스를 외부 세계에 노출할 수 있습니다.

주의해야 할 점:

exports 는 module.exports의 참조이므로 변경할 수 있습니다. 모듈에서 exports 포인터를 사용하면 알 수 없는 오류가 발생합니다. 따라서 둘 사이의 관계를 이미 명확하게 알고 있지 않은 한 개발자는 module.exports를 사용하여 모듈 인터페이스를 노출하는 것이 좋습니다.

현재 미니 프로그램은 node_modules의 직접 도입을 지원하지 않습니다. 개발자가 node_modules를 사용해야 하는 경우 해당 코드를 해당 디렉토리에 복사하는 것이 좋습니다. 미니 프로그램.

// common.js
function sayHello(name) {
  console.log('Hello ${name} !')
}
function sayGoodbye(name) {
  console.log('Goodbye ${name} !')
}
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

이러한 모듈을 사용해야 하는 파일에서 require(경로)를 사용하여 공개 코드를 도입하세요.

var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  }  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }})

ES6 구문 및 API 지원

세 가지 터미널(iOS, Android 및 디버깅을 위한 개발자 도구

iOS에서는 미니 프로그램의 자바스크립트 코드가 JavaScriptCore에서 실행됩니다.

Android에서는 미니 프로그램의 자바스크립트 코드가 X5 커널을 통해 실행되어 분석됩니다.

개발 도구에서는 애플릿의 javascript 코드가 nwjs(chrome 커널)에서 실행되고 있습니다.

세 터미널의 환경은 매우 유사하지만 적어도 현재는 여전히 몇 가지 다른 점이 있습니다. , 이는 많은 개발자에게 큰 문제를 안겨줍니다.

0.10.101000 이상 버전의 개발 도구에서는 기본적으로 바벨을 사용하여 개발자 코드 ES6 구문을 세 가지 모두에서 잘 지원되는 ES5 코드로 변환하여 개발자가 다양한 환경으로 인해 발생하는 문제를 해결하도록 돕습니다. .개발 문제. 개발자는 프로젝트 설정에서 이 기능을 끌 수 있습니다.

주의해야 할 점:

이 변환은 개발자가 문법 문제를 처리하는 데에만 도움이 됩니다. Promise와 같은 새로운 ES6 API에서는 개발자가 Polyfill 또는 기타

라이브러리를 직접 도입해야 합니다. 🎜>. 코드 품질 향상을 위해 ES6 변환 기능을 켜면 기본적으로 javasctipt strict 모드가 활성화됩니다

[관련 권장 사항]

1. >WeChat 애플릿 소스 코드 다운로드 완료

2. 간단한 왼쪽 스와이프 조작 및 폭포식 흐름 레이아웃

ChaiGe WeChat 미니 프로그램 애플리케이션 스토어 소스코드

위 내용은 작은 프로그램의 모듈화에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!