JavaScript dynamic loading implementation method 1_javascript skills
There are also many JS dynamic loading frameworks, such as In.js. But this is not the way I want to write it, so let me tell you what I think.
First come a piece of java code
import Biz.User;
User u = new User();
u.show();
The process is package import, instantiation, and calling.
JS cannot be used to import packages, or in the code sense, it is generally just the introduction of script tags on the page.
Then suppose you need to write it like this
Using(" User");
var u = new User();
u.show();
So, can it be implemented in JS?
Let’s analyze it sentence by sentence. Of course, the premise is that the page does not load user.js with the script tag, otherwise it will be meaningless.
The first sentence
Using("User");
Why use Using? Of course it is just my naming idea. You can think of C# and use using , just borrowed.
What is written in Using is of course the object I need, User. As the name suggests, of course I wrote Using("User"). Let’s not talk about how it is implemented inside, at least this is the idea.
Because I can’t simulate the keyword by writing Using User; at least I can’t do this.
The second and third sentences
var u = new User();
u.show();
It’s normal, just ordinary instantiation and function calling. The only thing that puzzles me is where does the User object come from? Then of course it is imported when importing the package in the first sentence.
The process is just such a process, so the key to whether it can be realized lies in the first sentence. In other words, whether the package can be successfully guided, and how to guide the package.
Draw inspiration from script tags, yes, asynchronously load the required js files.
That is to say
Using("User") ;
is equivalent to writing a sentence
Looking at it now, does it make sense to do this? Just to write the script tag as JS and dynamically introduce it? Or, just to save a few characters?
Of course not, it’s pointless! So what should we do?
Let’s start with efficiency.
If a page needs to load N multiple js files, as follows
Blah blah blah.
Isn’t it scary? It is quite scary, and the cost of post-maintenance is very high. How many pages there are, you may need to modify a few pages. So, what if the page only introduces a few key js files and all other files are dynamically loaded?
For example, we only need to load the jquery file, and then call
$.getScript("user.js",function(){});
In this way, we only need to introduce
That’s it.
So what are the disadvantages of this way of writing? Look at a piece of code
$.getScript("user.js" ,function(){
$.getScript("order.js",function(){
$.getScript("type.js",function(){
$.getScript("validate.js ",function(){
// and so on..
});
});
});
});
PS : This situation can be avoided by using the watch function of In.js. This is beyond the scope of this blog post.
Is it an eyesore? Are you still willing to align your code? Even with formatting tools, would you still want to match the closing bracket to which $.getScript it corresponds to? Of course not.
Then, the java-like guide package form comes out.
Using("User");
Using( "Order");
Using("Type");
Using("Validate");
// and so on..
Or if you want, you can
Using("User","Type","Order ","Validate",...);
The writing problem doesn't matter. Of course I recommend using the first method, clear.
After importing the package, all usages do not require any nesting and can be used normally.
var u = new User();
var o = new Order();
// and so on..
But a question will be raised. If asynchronous loading is executed during Using("XXX"), then
Using("User");
Using("Order");
Using("Type");
Using("Validate");
// and so on ..
In this section, I need to load 4 files asynchronously. Although it is asynchronous, it is a bit troublesome? And 4 links need to be created. If you are willing to merge JS, you can. Moreover, I don’t need to use objects when using. Is this a waste of resources?
As for this problem, my solution is to learn hibernate, lazy loading, and on-demand loading.
So how to do it?
Using("User");
It is definitely not loading at this time. What should I do if it is not loading? Of course, it returns a mock, which is a simulation object. Let the user use it first, and only when the user really needs to use this object, load the required js. That is to say
Using("User"); // After this sentence is executed, a User object will be created, which is just a mock at that time
var u = new User(); // At this time, what is needed is the real User object instance, and it is at this time to dynamically load the JS file , and returns the instantiated User object
As we all know, asynchronous loading does not conflict with the current running state, that is to say
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를 얻고
만 하면 됩니다. 페이지에
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Python implements dynamic page loading and asynchronous request processing function analysis for headless browser collection applications
Aug 08, 2023 am 10:16 AM
Python implements the dynamic loading and asynchronous request processing functions of headless browser collection applications. In web crawlers, sometimes it is necessary to collect page content that uses dynamic loading or asynchronous requests. Traditional crawler tools have certain limitations in processing such pages, and cannot accurately obtain the content generated by JavaScript on the page. Using a headless browser can solve this problem. This article will introduce how to use Python to implement a headless browser to collect page content using dynamic loading and asynchronous requests.
How to handle dynamic loading and switching of components in Vue
Oct 15, 2023 pm 04:34 PM
Handling dynamic loading and switching of components in Vue Vue is a popular JavaScript framework that provides a variety of flexible functions to handle the dynamic loading and switching of components. In this article, we will discuss some methods of handling dynamic loading and switching of components in Vue, and provide specific code examples. Dynamically loading components means dynamically loading components at runtime as needed. This improves the performance and loading speed of your application because relevant components are loaded only when needed. Vue provides async and awa
Revealing the principle of hot update in Golang: insider explanation of dynamic loading and reloading
Jan 20, 2024 am 10:09 AM
Exploring the Principle of Golang Hot Update: The Mystery of Dynamic Loading and Reloading Introduction: In the field of software development, programmers often hope to be able to modify and update code without restarting the application. Such requirements are of great significance to both development efficiency and system operation reliability. As a modern programming language, Golang provides developers with many convenient mechanisms to implement hot updates. This article will delve into the principles of Golang hot update, especially the mysteries of dynamic loading and reloading, and will combine it with specific code examples.
How to create a table that dynamically loads data using Vue and Element-UI
Jul 21, 2023 pm 11:49 PM
How to use Vue and Element-UI to create a table that dynamically loads data. In modern web development, data tables are one of the common interface components. Vue.js is a very popular front-end framework nowadays, and Element-UI is a set of component libraries developed based on Vue.js, which provides a rich set of UI components for us to use. This article will introduce how to use Vue and Element-UI to create a table that can dynamically load data, and give corresponding code examples. First, we need to install
Solve Vue error: Unable to correctly use Vue Router to dynamically load components based on routing parameters
Aug 20, 2023 am 08:09 AM
Solve Vue error: Unable to correctly use VueRouter to dynamically load components based on routing parameters. In the process of using VueRouter for routing jumps, sometimes we need to dynamically load components based on routing parameters. However, in some cases, we may encounter a common error: unable to correctly use VueRouter to dynamically load components based on routing parameters. This article will describe how to resolve this error and provide code examples. First, we need to make it clear: VueRouter can pass
phpSpider practical tips: How to deal with dynamic loading of web content?
Jul 22, 2023 am 08:33 AM
phpSpider practical tips: How to deal with dynamic loading of web content? When crawling web page data, we often encounter the problem that dynamically loaded content cannot be obtained directly through the crawler. These dynamically loaded contents can be data obtained through AJAX requests, DOM elements rendered through JavaScript, etc. In order to solve this problem, this article will introduce some practical tips for dealing with dynamic loading problems of web pages when using phpSpider. 1. Use network debugging tools to find dynamically loaded URLs
How to use reflection and dynamically load assemblies in C#
Oct 08, 2023 pm 12:12 PM
How to use reflection and dynamically load assemblies in C# Introduction: In C#, reflection (Reflection) is a powerful mechanism that allows us to obtain and operate the metadata of the program at runtime, including type information, member information, etc. Dynamically loading assemblies is a common application implemented through reflection, and is very useful in some specific scenarios. This article will introduce in detail how to use reflection and dynamically load assemblies in C#, and provide specific code examples. The basic concept of reflection Reflection is an important function in the C# language
Use PHP and WebDriver extensions to dynamically load web content
Jul 08, 2023 am 08:47 AM
Introduction to dynamic loading of web content using PHP and WebDriver extensions: With the continuous development of web technology, more and more web pages use dynamic loading to display content. Dynamic loading can provide a better user experience, but it brings certain difficulties for crawlers and automated testing. This article will introduce how to use PHP and WebDriver extensions to dynamically load web content. 1. What is WebDriver? WebDriver is a web automation tool,
