ExtJS 노트 Ext.Loader
10595 단어 loader
Ext.Loader는 Ext JS4 동적 의존 로드의 핵심입니다.가장 흔히 볼 수 있는 상황은 Ext.require를 통해 그것을 사용하는 것이다.Ext.Loader는 동기식 및 비동기식 로드 방식을 모두 지원합니다.여기에서 우리는 이 두 가지 로드 방식의 장단점을 토론할 것이다.
Asynchronous Loading 비동기식 로드
file://path/to/your/index .html
웹 서버가 필요 없습니다. 파일 시스템 프로토콜을 통해 프로그램을 실행할 수 있습니다.예컨대file://path/to/your/index.html Method 1: Explicitly include what you need: 방법 1: 원하는 것을 명확하게 포함합니다.
// Syntax
Ext.require({String/Array} expressions);
// Example: Single alias
Ext.require('widget.window');
// Example: Single class name
Ext.require('Ext.window.Window');
// Example: Multiple aliases / class names mix
Ext.require(['widget.window', 'layout.border', 'Ext.data.Connection']);
// Wildcards
Ext.require(['widget.*', 'layout.*', 'Ext.data.*']);
Method 2: Explicitly exclude what you don't need: 방법 2, 원하지 않는 것을 명확히 배제합니다
// Syntax: Note that it must be in this chaining format.
Ext.exclude({String/Array} expressions)
.require({String/Array} expressions);
// Include everything except Ext.data.*
Ext.exclude('Ext.data.*').require('*');
// Include all widgets except widget.checkbox*,
// which will match widget.checkbox, widget.checkboxfield, widget.checkboxgroup, etc.
Ext.exclude('widget.checkbox*').require('widget.*');
Synchronous Loading on Demand 동시 로드
There's one simple rule to follow: Instantiate everything with Ext.create instead of the
new
keyword new 키워드 대신 Ext.create로 대상을 실례화할 수 있는 간단한 법칙을 준수할 수 있습니다.
Ext.create('widget.window', { ... }); // Instead of new Ext.window.Window({...});
Ext.create('Ext.window.Window', {}); // Same as above, using full class name instead of alias
Ext.widget('window', {}); // Same as above, all you need is the traditional `xtype`
Behind the scene, Ext.ClassManager will automatically check whether the given class name/alias has already existed on the page. If it's not, Ext.Loader will immediately switch itself to synchronous mode and automatic load the given class and all its dependencies.
백그라운드에서 Ext.ClassManager는 지정된 클래스 이름이나 별칭이 페이지에 있는지 자동으로 확인합니다.만약 없다면, Ext.Loader는 즉시 그것을 동기화 모드로 조정하고, 주어진 클래스와 모든 의존을 자동으로 불러옵니다.
Hybrid Loading - The Best of Both Worlds 하이브리드 로드
It has all the advantages combined from asynchronous and synchronous loading. The development flow is simple:
혼합 로드 방식은 동기화와 비동기 로드의 장점을 결합시킬 수 있다.개발 프로세스는 매우 간단합니다.
Step 1: Start writing your application using synchronous approach.
첫 번째 단계: 동기화 방식으로 프로그램을 작성하고,
Ext.Loader will automatically fetch all dependencies on demand as they're needed during run-time. For example:
Ext.Loader는 실행할 때 필요하기 때문에 모든 의존도를 자동으로 가져옵니다.예:Ext.onReady(function(){
var window = Ext.widget('window', {
width: 500,
height: 300,
layout: {
type: 'border',
padding: 5
},
title: 'Hello Dialog',
items: [{
title: 'Navigation',
collapsible: true,
region: 'west',
width: 200,
html: 'Hello',
split: true
}, {
title: 'TabPanel',
region: 'center'
}]
});
window.show();
})
Step 2: Along the way, when you need better debugging ability, watch the console for warnings like these:
2단계: 콘솔에서 다음과 같은 경고를 볼 수 있습니다.[Ext.Loader] Synchronously loading 'Ext.window.Window'; consider adding Ext.require('Ext.window.Window') before your application's code
ClassManager.js:432
[Ext.Loader] Synchronously loading 'Ext.layout.container.Border'; consider adding Ext.require('Ext.layout.container.Border') before your application's code
Simply copy and paste the suggested code above Ext.onReady
, i.e:
Ext.onReady 에 로드에 의존하는 코드를 추가합니다.Ext.require('Ext.window.Window');
Ext.require('Ext.layout.container.Border');
Ext.onReady(...);
Everything should now load via asynchronous mode.
이렇게 하면, 모든 물건은 비동기적인 모드를 통해 불러올 것이다
배포 배포
It's important to note that dynamic loading should only be used during development on your local machines. During production, all dependencies should be combined into one single JavaScript file. Ext.Loader makes the whole process of transitioning from/to between development/maintenance and production as easy as possible. Internally Ext.Loader.history maintains the list of all dependencies your application needs in the exact loading sequence. It's as simple as concatenating all files in this array into one, then include it on top of your application.
하나는 매우 중요합니다. 동적 로드는 개발할 때만 본 컴퓨터에서 사용할 수 있습니다.제품이 출시될 때 모든 의존도는 하나의 JavaScript 파일로 조합하는 것이 가장 좋다.Ext.Loader는 프로젝트를 개발 유지 보수 발표 사이에서 쉽게 전환합니다.내부, Ext.Loader.history는 프로젝트에 의존하는 모든 불러오는 순서의 목록을 제어합니다.이 목록의 모든 의존도를 하나로 압축해서 프로젝트의 맨 위에 포함시키세요.
This process will be automated with Sencha Command, to be released and documented towards Ext JS 4 Final.
이 프로세스는 SenchCommand를 사용하여 자동으로 수행됩니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
ExtJS 노트 Ext.Loader
is the heart of the new dynamic dependency loading capability in Ext JS 4+.
supports both asynchronous and synchronous l...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
Ext.onReady(function(){
var window = Ext.widget('window', {
width: 500,
height: 300,
layout: {
type: 'border',
padding: 5
},
title: 'Hello Dialog',
items: [{
title: 'Navigation',
collapsible: true,
region: 'west',
width: 200,
html: 'Hello',
split: true
}, {
title: 'TabPanel',
region: 'center'
}]
});
window.show();
})
[Ext.Loader] Synchronously loading 'Ext.window.Window'; consider adding Ext.require('Ext.window.Window') before your application's code
ClassManager.js:432
[Ext.Loader] Synchronously loading 'Ext.layout.container.Border'; consider adding Ext.require('Ext.layout.container.Border') before your application's code
Ext.require('Ext.window.Window');
Ext.require('Ext.layout.container.Border');
Ext.onReady(...);
It's important to note that dynamic loading should only be used during development on your local machines. During production, all dependencies should be combined into one single JavaScript file. Ext.Loader makes the whole process of transitioning from/to between development/maintenance and production as easy as possible. Internally Ext.Loader.history maintains the list of all dependencies your application needs in the exact loading sequence. It's as simple as concatenating all files in this array into one, then include it on top of your application.
하나는 매우 중요합니다. 동적 로드는 개발할 때만 본 컴퓨터에서 사용할 수 있습니다.제품이 출시될 때 모든 의존도는 하나의 JavaScript 파일로 조합하는 것이 가장 좋다.Ext.Loader는 프로젝트를 개발 유지 보수 발표 사이에서 쉽게 전환합니다.내부, Ext.Loader.history는 프로젝트에 의존하는 모든 불러오는 순서의 목록을 제어합니다.이 목록의 모든 의존도를 하나로 압축해서 프로젝트의 맨 위에 포함시키세요.
This process will be automated with Sencha Command, to be released and documented towards Ext JS 4 Final.
이 프로세스는 SenchCommand를 사용하여 자동으로 수행됩니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
ExtJS 노트 Ext.Loaderis the heart of the new dynamic dependency loading capability in Ext JS 4+. supports both asynchronous and synchronous l...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.