javascript dynamic loading 2_javascript skills-JS Tutorial-php.cn

In the previous article on javascript dynamic loading, it was mentioned that the use of synchronous loading strategy is used to implement such as

Copy code The code is as follows: Using("jquery"); Using("User");

$("#ID").click(function(){ var user = new User(); user.name = "xx"; user.show(); }); Since JS is single-threaded, so The synchronization strategy brings many disadvantages, such as preventing subsequent code from running and causing the browser to freeze. It is difficult to achieve the effect of using the leading package later using the asynchronous strategy. It can only be done in the form of callback, which is not what UsingJS wants to achieve. After all, jQuery's getScript function can achieve this method.

After some thinking, I finally came up with a solution on how to solve the problem of booting packets in an asynchronous manner. Let’s first look at the programming method after adopting this solution. Copy code The code is as follows:

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

Using.asyn(function(){ $ ("#panel").click(function(){ alert("Using jquery object"); }); Using.fetch("Http",function(){ var http = new Using.Modules.Http(); http.set("xxx"); http.show(); }); }); As shown in the above code, overall there is not much modification to the synchronization strategy. It only imports jquery twice. It obviously needs to be processed to only import the package once, and it adds A Using.asyn function. The specific purpose of this function will be analyzed later. As we all know, the asynchronous strategy does not affect the current operation. So, if the package I imported is loading and the subsequent code is also running, and there happens to be a dependency between the two, then there will be Exception, how to solve the relationship between the two? The only solution at present is the callback function.

According to the idea of using, it must be used after the pilot package. The asynchronous solution is not to actually pull the files before using the module, but to place the required JS files into an object, such as Array, and then load them one by one when there is a real need. Let’s take a look Copy the code The code is as follows: Using("jq"); Using("jq"); Using("Http"); How works. Previous code Copy code The code is as follows: var moduleList = [];

Using.fn = Using.prototype; Using.fn.initialize= function(module){ !this.exist(moduleList,module) ? moduleList.push(module) : null; } This code is an initialization method in the prototype of Using, omitting the context and intercepting it. From the code, we know that its main responsibility is to place the modules that need to be loaded into the moduleList, and Make a judgment. If the moduleList contains the module that currently needs to be loaded, then no operation will be performed.

So, when will it be loaded? This uses the Using.asyn method mentioned before, which is to notify Using that the file needs to be loaded asynchronously, and the callback function of the Using.asyn function is called after the loading is completed. Same as the previous code Copy the code The code is as follows: Using.asyn = function(callback) { Using.fn.script(callback); } It can only be seen briefly from the code that the Using.asyn function calls the Using.fn.script function and will The callback function is passed to it. Naturally, you need to see how it works. Copy code The code is as follows: 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을 여러 번 호출할 때 비동기 호출로 인해 동일한 모듈을 여러 번 로드하는 문제를 해결할 수 없습니다. , 또는 각각 설명할 수 없는 문제이고, 한동안 실마리가 없어서 이 문제는 미루고 차근차근 해결해 나가겠습니다.

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