require 단순 실현

2619 단어
requ(path){
        //     ,       
        // let code = load(path)
        let code = 'function add(a, b) {return a+b}; module.exports = add'
        code = `(function(module){${code}})(context)`

        //   context     module
        let context = {}
        const run = new Function('context',code)
        run(context)

        return context.exports
    }

브라우저 환경에서 모든 Js 모듈은 원격 읽기를 필요로 한다. 어색한 것은 브라우저가 제공하는 능력에 제한을 받고 aax를 통해 파일 흐름의 형식으로 원격 js 파일을 문자열 코드로 직접 읽을 수 없다는 것이다.전제 조건이 달성되지 않으면, 상술한 운행 전략은 통하지 않고, 다른 방도를 찾을 수밖에 없다. CommonJs , AMD/CMD
그럼 브라우저는 어떻게 하는 거예요?브라우저에서 Js 제어를 통해 원격 Js 모듈 파일을 불러옵니다. 노드를 동적으로 삽입해야 합니다: & lt;/p>
<pre><code>//리퀘어에서 발췌하다.js의 코드
var node = config.xhtml ?
document.createElementNS('http://www.w3.org/1999/xhtml', 'html:script') :
document.createElement('script');
node.type = config.scriptType || 'text/javascript';
node.charset = 'utf-8';
node.async = true;
node.setAttribute('data-requirecontext', context.contextName);
node.setAttribute('data-requiremodule', moduleName);
node.addEventListener('load', context.onScriptLoad, false);
node.addEventListener('error', context.onScriptError, false);
</code></pre>
<p><를 설정한 것을 알아야 한다.script> 라벨의 src 이후 코드는 다운로드가 완료되면 바로 실행됩니다. 패키지로 봉인할 수 없기 때문에 파일 모듈은 정의 초기에 글을 써야 합니다. 이것이 바로 우리가 숙지한 AMD/CMD 규범 중의 define, 개편의dd입니다.js는 다시 고쳐야 합니다 </p>
<pre><code>//add.js 파일
define ('add',function () {
function add (a, b) {
return a + b;
}
return add;
})
</code></pre>
<p>define의 실현에 있어서 가장 중요한 것은 콜백의 실행 결과를 context의 모듈 그룹에 등록하는 것이다: </p>
<pre><code>context.modules = {}
function define(name, callback) {
context.modules[name] = callback && callback()
}
</code></pre>
<p>AMD와 CMD의 차이는 주로 전자는 정의 초기에 모든 의존을 성명해야 하고 후자는 임의의 시기에 모듈을 동태적으로 도입할 수 있다는 것이다.CMD는 CommonJS<에 더 가깝습니다./p>
<p><code>두 가지 규범은 모두 원격 네트워크에서 모듈을 불러와야 하는데 서로 다른 점은 전자는 예비 불러오기이고 후자는 지연 불러오기 <이다.code></p>
<p>Js에서 모듈화가 어떻게 이루어졌는지 참고 & lt;/p>
</article>
</div>
</div>
</div>
<!--PC와 WAP 어댑터 - >
<div id="SOHUCS"sid="1211450124769792000"></div>
<script type="text/javascript"src="/views/front/js/chanyan.js">

좋은 웹페이지 즐겨찾기