위챗 애플릿 학습의 길-모듈화

모듈식 소개
최초 프런트엔드 JavaScript 코드는 크기가 크지 않으므로 다음 코드와 같이 하나의 폴더에 균일하게 배치됩니다.

var name ='weixin',
    age=12;
function getName(){
  //    
}
function getAge(){
  //    
}

 
이후에 전단 코드가 갈수록 많아졌기 때문에 관리와 업무 분해를 편리하게 하기 위해 우리는 코드를 여러 파일로 분해해야 했다. 이때 상술한 코드를user에 봉인해야 한다.js 파일에서 필요할 때 페이지를 가져오거나 파일로 포장하면 됩니다.초기에 팀 구성원이 적고 모든 것이 정상적으로 운행되었다. 팀이 점점 커질 때까지 어떤 사람들은 불평하기 시작했다. 나는name 변수를 정의하고 싶지만user.js에 이미 존재합니다. myName으로 정의할 수 없습니다.왜 내가 내 코드에 getage 방법을 정했기 때문에 다른 사람의 코드에 문제가 생겼을까?이러한 파일 분할 작업을 통해 우리는 코드에 대해 물리적 분리를 했을 뿐 여러 사람이 개발하고 간단한 코드 관리를 초보적으로 실현할 수 있었지만 역할 영역의 격리를 제대로 하지 못했다. 다른 파일에 이미 존재하는 변수 이름을 모르기 때문에 전역 충돌 문제를 더욱 쉽고 심각하게 만들었다.그리고 이런 전역 충돌을 피하기 위해 자바의 방식을 참고하여 명명 공간과 클립을 도입하여 변수 충돌 문제를 해결하기로 결정했다.그래서 사용자.js의 코드는 다음과 같이 변했다.

Page({
  function(){
    myProject = myProject || {};//        
    myProject.user ={};
    myProject.user.name='weixin';
    var age=12;//     ，      
    myProject.user.getName = function(){
      //    
    }
    myProject.user.getAge = function(){
      //    
    }
  }
});

 
이렇게 하면 다른 동료들은 my Project를 통해name을 가져오고 getName과 getage 방법을 호출합니다. 이름 공간을 통해 대부분의 충돌을 완화시킬 수 있지만, 이를 위해 우리는 긴 이름 공간을 기억해야 합니다. 또한 사용자라는 공간을 사용하면 다른 사람이 사용할 수 없고, 문제를 완벽하게 해결할 수 없습니다.그리고 더 무서운 건 만약에user.js는 다른utils에 의존합니다.js, 다른 동료는user를 읽어야 합니다.js 원본 코드는 이 의존 관계를 이해하고 순서대로utils를 도입합니다.js、user.js,user를 직접 도입합니다.js는 그의 코드에 오류를 일으킬 것입니다. 만약 utils가 다른 자원에 의존한다면, 그는 모든 의존을 알아야 합니다. 그는 단지 나의 getName 방법을 호출하려고 했을 뿐입니다. 이것은 호출된 동료에게 악몽입니다.이때 우리는 새로운 조직 방식이 필요하다. 그래서 모듈화가 탄생했다.

모듈은 JavaScript 코드로 통일된 기본 쓰기 형식을 갖추고 있다.

모듈 간에 기본적인 상호작용 규칙을 통해 서로 인용하고 협동하여 일을 할 수 있다.

현재 모듈화된 규범은 통일되지 않고 대체적으로 CommonJS와 ES6 두 가지 규범으로 나눌 수 있다. 모두가 관심이 있으면 인터넷 관련 자료를 참고할 수 있다. 애플릿 모듈화 메커니즘은 비교적 CommonJS규범에 가깝고 어떤 규범이든 학습하기 매우 간단하다.
파일 역할 영역
애플릿의 JavaScript 파일은 모듈로 중국 파일에서 선언된 변수와 함수는 해당 파일에서만 유효하며 서로 다른 파일의 동일한 변수 이름과 함수 이름은 서로 영향을 주지 않습니다.다음 예제에서는 getApp()을 호출하여 애플릿 인스턴스를 가져오는 전역 방법을 모듈에서 호출할 수 있습니다.

App({
  myGlobalData:{
    /**       */
    name:'weixin'
  }
});
var myPrivateData ="value1";/**myPrivateData   a.js    */
var appData = getApp();
appData.myGlobalData.name+='app';
var myPrivateData= "value2";/**myPrivateData   a.js        */
var appData = getApp();
/** a.js b.js    ，     "weixin app value2" */
cnsole.log(appData.myGlobalData.name+" "+myPrivateData);

모듈 사용
모듈 인터페이스의 노출 및 도입은 간단합니다.

exports 노출 인터페이스를 통해

require(path)를 통해 의존을 도입하고 path는 도입해야 하는 모듈 파일의 상대적인 경로

인스턴스 코드는 다음과 같습니다.

var privateData = 'weixin';
function run(who){
  console.log(who+'run');
}
function walk(who){
  console.log(who+'walk');
}
module.exports.run=run;
exports.walk = walk;
/**
 *        ：
 * module.exports={
 * run:run,
 * walk:walk
 * };
 */
var otherMod = require('mod.js');
Page({
  onShow:function(){
    /**      sombody run */
    otherMod.run('somebody');
    /**      sombody walk */
    otherMod.walk('somebody');
  }
});

주의해야 할 점:

exports는module입니다.exports의 인용입니다. 따라서 모듈에서 exports를 마음대로 변경하면 알 수 없는 오류가 발생할 수 있습니다.그래서 우리는 개발자가 모듈을 사용하는 것을 더욱 추천한다.exports는 모듈 인터페이스를 노출시켜 이 두 사람의 관계를 분명히 알고 있음을 촉발한다

애플릿은 현재 node 직접 도입을 지원하지 않습니다.modules, 개발자는 node 를 사용해야 합니다modules 시 관련 코드를 애플릿 디렉터리에 복사하는 것을 권장합니다

모듈화를 통해 우리는 코드의 진정한 격리를 실현할 수 있고 여러 사람이 병행 개발하여 큰 프로젝트 관리의 난이도를 낮출 수 있으며 전방 공정화에 큰 추진 역할을 한다.
기타
1. JavaScript 운영 환경
위챗 애플릿 논리 코드는 iOS, Android, 디버깅을 위한 개발자 도구 세 가지로 각각 다른 세 가지 해석 엔진을 실행한다.

iOS에서 애플릿의 자바스크립트 코드는 자바스크립트 코어에서 실행됩니다.

안드로이드에서 애플릿의 자바스크립트 코드는 X5 커널을 통해 해석된다.

개발 도구에서 애플릿의 자바스크립트 코드는 nwjs(chrome 커널)에서 실행됩니다.

비록 삼단의 환경이 매우 비슷하지만 적어도 현재 일부 문법, 특성에 대한 지원은 약간의 차이가 있기 때문에 개발 과정에서 가능한 한 삼단에서 테스트를 해야 한다.
2. ES6 문법과 API는 애플릿에서 개발자가 ES6 문법으로 인코딩할 수 있도록 지원한다. 0.10.101000 및 이후 버전의 개발 도구에서는 기본적으로 바벨을 사용하여 개발자의 ES6 코드를 3단 모두 잘 지원하는 ES5 코드로 변환하여 개발자가 환경에 따라 발생하는 개발 문제를 해결하도록 돕는다.ES6 구문을 사용하지 않는 경우 개발자는 프로젝트 설정에서 이 기능을 해제할 수 있습니다.전환 시 주의해야 할 사항:

이런 전환은 개발자가 문법적인 문제를 처리하는 데 도움을 줄 뿐이다. 새로운 ES6의 API, 예를 들어 Promise 등은 개발자가 스스로 Polyfill이나 다른 라이브러리를 도입해야 한다.

코드의 질을 높이기 위해 ES6 변환 기능을 켠 상태에서 기본적으로 자바스크립트 엄격 모드를 사용하려면 "use strict"를 참고하십시오.