자바스크립트 동적 로딩 2_javascript 기술

이전 자바스크립트 동적 로딩 글에서는

코드 복사 코드는 다음과 같습니다. Using("jquery") Using("User")

$("#ID").click(function (){ var user = new User(); user.name = "xx"; user.show() })

JS는 단일 스레드이므로 동기화 전략은 후속 코드 실행을 방지하고 브라우저를 정지시키는 등 많은 단점을 가져옵니다. 비동기 전략을 사용하면 나중에 선두 패키지를 사용하는 효과를 얻기가 어렵습니다. 이는 콜백 형태로만 수행될 수 있으며 이는 UsingJS가 달성하려는 것이 아닙니다. 결국 jQuery의 getScript 함수는 이 방법을 달성할 수 있습니다.

고민 끝에 마침내 비동기 방식으로 패킷을 부팅하는 문제를 해결하는 방법에 대한 해결책을 생각해냈습니다. 먼저 이 솔루션을 채택한 후 프로그래밍 방법을 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

Using("jq"); Using("jq"); Using("Http");

Using.asyn(function(){ $ ("#panel").click(function(){ alert("jquery 객체 사용"); }) Using.fetch("Http",function(){ var http = new Using.Modules.Http(); http.show() });

위 코드에서 볼 수 있듯이 전체적으로 동기화 전략은 크게 수정되지 않았습니다. 패키지를 한 번만 가져오려면 분명히 처리해야 합니다. , Using.asyn 함수를 추가합니다. 이 함수의 구체적인 목적은 나중에 분석됩니다. 우리 모두 알고 있듯이 비동기 전략은 현재 작업에 영향을 미치지 않습니다. 따라서 가져온 패키지가 로드되고 후속 코드도 실행 중이며 둘 사이에 종속성이 발생하면 예외입니다. 둘 사이의 관계를 해결하는 방법은 현재 콜백 함수뿐입니다. 사용 아이디어에 따르면 반드시 파일럿 패키지 이후에 사용해야 합니다. 비동기식 솔루션은 모듈을 사용하기 전에 실제로 파일을 가져오는 것이 아니라 필요한 JS 파일을 Array와 같은 객체에 배치한 다음 실제로 필요할 때 하나씩 로드하는 것입니다. 살펴보겠습니다

코드 복사 코드는 다음과 같습니다. ("jq "); Using("jq"); Using("Http");

작동 방식. 이전 코드

코드 복사 코드는 다음과 같습니다. var moduleList = [] Using.fn = Using.prototype; Using.fn.initialize= function(module){ !this.exist(moduleList,module) ? moduleList.push(module) : null }

이 코드는 Using 프로토타입의 초기화 방법으로, 컨텍스트를 생략하고 가로채는 것입니다. 코드에서 우리는 이 코드의 주요 역할이 필요한 모듈을 배치하는 것임을 알고 있습니다. moduleList에 로드하고 판단합니다. moduleList에 현재 로드해야 하는 모듈이 포함되어 있으면 아무 작업도 수행되지 않습니다.

그럼 언제 로딩되나요? 앞에서 언급한 Using.asyn 메서드를 사용하는데, 이는 Using에 파일을 비동기적으로 로드해야 함을 알리고, 로딩이 완료된 후 Using.asyn 함수의 콜백 함수가 호출됩니다. 이전 코드와 동일

코드 복사 코드는 다음과 같습니다. .asyn 사용 = function(callback) { Using.fn.script(callback); }

Using.asyn 함수가 Using를 호출하는 코드에서만 간략하게 볼 수 있습니다. fn.script 함수 및 콜백 함수가 전달됩니다. 당연히 그것이 어떻게 작동하는지 확인해야합니다.

코드 복사 코드는 다음과 같습니다. Using.fn.script = function(callback){ var _this = this, complete = 0, count = moduleList.length, len = 0; >if(count return; }

먼저 이전 글에서 언급한 모듈 구성 파일인 Using.Config를 살펴보면 모듈 이름을 통해 해당 모듈 파일을 Load하라고 Using에 알린다. 둘째, 모듈 파일은 내부 함수 loadScript를 통해 로드됩니다. 모든 모듈이 로드되면 카운터 완료를 사용하여 콜백 함수가 호출됩니다.

위 코드를 통합하면 전체 아이디어는 Using 개체를 사용하여 패키지를 가져오고 기록하고, Using에 알리고 Using.asyn을 통해 비동기 로딩을 수행하고, 마지막으로 Using.fn.script를 사용하여 비동기를 구현하는 것입니다. 콜백 함수를 로드하고 실행합니다.

또한 Using.fetch 함수에 주목하세요. 전체 함수는 주로 코드가 어느 정도 실행되거나 특정 요구 사항을 충족할 때 로드해야 하는 파일의 문제를 해결하기 위한 것입니다. 파일이 로드되기 전에 판단하여 현재 필요한 모듈이 로드되었는지 확인하고, 그렇다면 콜백 함수를 직접 실행합니다.

이번 UsingJS 변경은 주로 동기화 전략을 비동기 전략으로 변경하는 것이지만 문서가 로드될 때만 실행되는 $(document).ready 등 여전히 많은 문제가 남아 있습니다. 그 자체로는 이런 효과를 얻는 것이 어렵지 않지만, 코드를 작성할 때 마음이 복잡해지고, Using.asyn을 여러 번 호출할 때 비동기 호출로 인해 동일한 모듈을 여러 번 로드하는 문제를 해결할 수 없습니다. , 또는 각각 설명할 수 없는 문제이고, 한동안 실마리가 없어서 이 문제는 미루고 차근차근 해결해 나가겠습니다.

가져오는 패키지의 순서도 있는데 순서가 정해져 있지는 않습니다. 이때 종속성을 추가하면 로드 순서를 코드별로 해결할 수도 있었는데요. 이 접근 방식에는 아무런 문제가 없다고 생각했습니다. 코더는 파일 간의 종속성을 알아야 합니다. 코더가 , 오류는 계속 발생합니다. 종속 관계를 생성하면 사용량이 증가할 뿐만 아니라 더 중요한 것은 반복적인 작업을 수행한다는 것입니다. 이것이 올바른 이해인지는 모르겠습니다.