JavaScript 동적 로딩 구현 방법 1_javascript 기술-JS 튜토리얼-php.cn

In.js와 같은 JS 동적 로딩 프레임워크도 많이 있습니다. 하지만 이것은 내가 쓰고 싶은 방식이 아니므로 내 생각을 말씀 드리겠습니다.

먼저 자바 코드 한 장을 옵니다

 
import Biz.User; 
User u = new User(); 
u.show(); 

프로세스는 패키지 가져오기, 인스턴스화 및 호출입니다.

JS는 패키지를 가져오는 데 사용할 수 없거나 코드 측면에서 일반적으로 페이지에 스크립트 태그를 도입하는 것뿐입니다.
그럼 이렇게 작성해야 한다고 가정해보세요

코드를 복사하세요 코드는 다음과 같습니다.

 
Using(" User"); 
var u = new User(); 
u.show(); 

그럼 JS에서도 구현이 가능한가요?

물론 페이지가 스크립트 태그와 함께 user.js를 로드하지 않는다는 전제가 있습니다. 그렇지 않으면 의미가 없습니다.

첫 번째 문장

Using("User");

Using을 사용하는 이유는 물론 C#을 생각해서 사용하면 됩니다. 방금 빌린거야.

Using에 적힌 것은 당연히 나에게 필요한 객체인 User입니다. 이름에서 알 수 있듯이 당연히 Using("User")라고 썼습니다. 내부에서 어떻게 구현되는지는 이야기하지 않겠습니다. 적어도 이것이 아이디어입니다.
적어도 사용자 사용을 작성하여 키워드를 시뮬레이션할 수는 없기 때문에 그렇게 할 수 없습니다.
두 번째, 세 번째 문장

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

 
var u = new User(); 
u.show(); 

일반적인 인스턴스화 및 함수 호출일 뿐인데, 사용자 개체가 어디서 오는지 궁금합니다. 물론 첫 번째 문장에서 패키지를 가져올 때 가져옵니다.

과정도 그런 과정일 뿐, 실현 여부는 첫 문장에 달려 있다. 즉, 패키지를 성공적으로 안내할 수 있는지, 패키지를 어떻게 안내할 것인지에 대한 것입니다.

스크립트 태그에서 영감을 얻으세요. 예, 필요한 js 파일을 비동기적으로 로드하세요.
즉

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

사용( "User") ;

는 문장을 쓰는 것과 같습니다

코드를 복사하세요

지금 보면 이렇게 되나요? 이걸 할 생각이 있어? 그냥 스크립트 태그를 JS로 작성하고 동적으로 도입하려면? 아니면 단지 몇 글자를 저장하기 위해?

당연하지, 무의미한 일이니까 어떡하지?
효율성부터 시작해 보세요.
페이지가 N개의 여러 js 파일을 로드해야 하는 경우 다음과 같이

코드를 복사하세요 코드는 다음과 같습니다.

 
 🎜> 
블라블라블라.

무섭지 않나요? 상당히 무섭고, 사후 관리 비용도 많이 들기 때문에 몇 페이지를 수정해야 할 수도 있습니다. 그렇다면 페이지에 몇 가지 핵심 js 파일만 소개되고 다른 모든 파일이 동적으로 로드된다면 어떻게 될까요?
예를 들어 jquery 파일을 로드한 다음

코드 복사를 호출하기만 하면 됩니다. 코드는 다음과 같습니다.

$.getScript("user.js",function(){})

이런 식으로

만 소개하면 됩니다.

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

그렇습니다.
그렇다면 이런 글쓰기 방식의 단점은 무엇인가요? 코드 보기

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

 
$. getScript("user.js" ,function(){ 
$.getScript("order.js",function(){ 
$.getScript("type.js",function(){ 
$ .getScript("validate.js ",function(){ 
// 등.. 
}) 
}); 
 
PS : In.js의 감시 기능을 사용하면 이러한 상황을 피할 수 있습니다. 이는 이 블로그 게시물의 범위를 벗어납니다. 

눈에 거슬리나요? 아직도 코드를 정렬하시겠습니까? 서식 지정 도구를 사용하더라도 $.getScript에 해당하는 닫는 괄호를 일치시키시겠습니까? 물론 그렇지 않습니다.
그러면 자바같은 가이드 패키지 형태가 나옵니다.

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

Using("Type");

Using("Validate") 
// 등..

코드 복사

코드는 다음과 같습니다. Using("User" ,"Type","Order","Validate",...)

쓰기 문제는 중요하지 않습니다. 물론 첫 번째 방법인 Clear를 사용하는 것이 좋습니다. 

패키지를 가져온 후에는 모든 용도에 중첩이 필요하지 않으며 정상적으로 사용 가능합니다. 

코드 복사

코드는 다음과 같습니다. var u = new User() var o = new Order();

// 등등..

 
그런데 질문이 제기됩니다. Using("XXX") 중에 비동기 로딩이 실행되면 

코드 복사

코드는 다음과 같습니다 Using("User"); Using("Order")

Using("Validate")// 등 ..

 
이 부분에서는 4개의 파일을 비동기적으로 로드해야 하는데, 비동기이긴 하지만 좀 번거롭죠? 그리고 4개의 링크를 생성해야 합니다. JS를 병합할 의향이 있다면 그렇게 할 수 있습니다. 게다가, 사용할 때 객체를 사용할 필요가 없습니다. 이것이 자원 낭비입니까? 

이 문제에 대한 해결책은 최대 절전 모드, 지연 로딩 및 주문형 로딩을 배우는 것입니다. 
그럼 어떻게 해야 할까요? 

코드 복사

코드는 다음과 같습니다. Using("User"); > 이번에는 로딩이 안되고 있는데 어떻게 해야 하나요? 물론 시뮬레이션 객체인 모의 객체를 반환합니다. 사용자가 먼저 사용하도록 하고, 사용자가 이 객체를 실제로 사용해야 하는 경우에만 필요한 js를 로드하세요. 즉

코드 복사

코드는 다음과 같습니다.

Using("User" ); // 이 문장이 실행되면 User 객체가 생성되는데, 이는 당시에는 단지 mock일 뿐입니다. var u = new User() // 이때 필요한 것은 실제 User 객체입니다. 이때 JS 파일을 동적으로 로드하고 인스턴스화된 User 객체를 반환합니다. 우리 모두 알고 있듯이 비동기 로딩은 현재 실행 상태와 충돌하지 않습니다.

코드 복사

코드는 다음과 같습니다.

var u = new User()
이 문장이 실행된 후에는 u는 실제 의미도 없고 그 이상도 없는 변수입니다. 그래서 이 문제를 해결하는 방법은, 당분간 제가 생각할 수 있는 유일한 방법은 동기화 전략을 사용하는 것 뿐입니다. js가 로드될 때만 후속 js 문이 실행되는 점은 다소 아쉽고, 동기화로 인해 발생할 수 있는 브라우저 정지 문제도 당분간은 무시하도록 하겠습니다. 앞으로 더 나은 솔루션.

그렇다면 이렇게 동기화하면 어떤 이점이 있을까요?라는 질문이 생깁니다.
적어도 비동기 로딩에 비하면 단점은 없을 것 같아요. 예를 들어 일반적인 비동기 로딩은

코드 복사 코드는

 
$입니다. getScript("user .js",function(){ 
var u = new User(); 
}) 

이 명령문을 실행하면 함수가 실행됩니다. js는 로드될 때까지 실행되지 않습니다. 그런 다음

복사 코드 를 비교하면 다음과 같습니다. :

var u = new User();

이론적으로 user.js가 로드된 후에 모두 실행되므로 시간은 동일해야 합니다.

적어도 두 번째 코드는 Java 스타일 코드와 더 유사하므로 비즈니스와 관련되지 않은 다른 코드는 신경쓰지 마세요.

그럼 필요한 객체가 어디에 있는지, 어떻게 로드하는지 어떻게 알 수 있나요? 내가 생각할 수 있는 것은 구성 파일을 시뮬레이션하는 것뿐입니다. In.js와 같은 추가 기능이나 다른 프레임워크의 등록 기능을 사용하는 대신 구성 파일을 사용하는 이유는 무엇일까요? Java이며 나중에 수정될 수도 있습니다.

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

 
Using.Config = { 
" User" : "/js/user" // JS 파일을 로드해야 하기 때문에 .js를 숨길 수 있습니다 
} 

전체 아이디어는 대략 이렇고 몇 가지 제약을 두었습니다. 예를 들어

코드를 추가한 후 코드는 다음과 같습니다.

var u = new Using.Modules .User();

이를 통해 일부 전역 변수를 줄일 수 있으며, 필요한 경우 모든 개체가 가질 수 있는 일부 공통성을 삽입하여 생성 시 반복되는 코딩을 줄일 수 있습니다. 수업.

물론 네임스페이스를 사용하지 않는 것도 여전히 지원됩니다.

이 제약의 실효성을 해결하기 위해 Class.create 함수를 추가하여 클래스 제약을 생성합니다.

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

 
Using.Class.create("User" ,function( ){ 
}).property({ 
}).static({ 
}).namespace(Using.Modules); 

여기서 일반적인 의미는 다음과 같습니다.

create(클래스 이름, 생성자)
property(클래스의 속성)
static(클래스의 정적 속성)
namespace(네임스페이스)

이에 대한 확장 , MVC 양식을 추가하면 어떨까요?
나중에 MVC를 원하면 여러 클래스 간의 동적 유지 관리가 필요하거나 생성 시 Using 클래스에 의한 자동 유지 관리가 필요하다는 것을 알았습니다. 아직 좋은 해결책을 생각하지 못했습니다. , 그래서 저는 가입하지 않았습니다.

위의 텍스트를 통해 마침내 Using.js를 얻고
만 하면 됩니다. 페이지에

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

저자별 최신 기사