There are also many frameworks for dynamic loading of JS, such as. But this is not the way I want to write it, let me tell you what I think.
Let's first get a piece of java code
import ;
User u = new User();
();
According to the process, it is to guide packages, instantiate, and call.
JS cannot make a package lead, or in the code sense, it usually only introduces script tags on the page.
So first assume that it needs to be written like this
Using("User");
var u = new User();
();
So, can it be implemented in JS?
Let’s analyze it one by one. Of course, the premise is that the page is not loaded with script tags, otherwise it will be meaningless.
The first sentence
Using("User");
Why use Using? Of course, it is just my naming idea. You can think about C#, which is using using and borrowed.
What I write in Using is of course the object User I need. As the name suggests, of course I write it as Using("User"). Let’s not talk about how the inside is implemented, at least this is the idea.
Because I can't simulate keywords and write them as Using User; at least I can't do this.
Second and third sentences
var u = new User();
();
It's very normal, it's very common instantiation and function calls. The only thing I don't understand is where the User object comes from? Then of course it was imported when the first sentence was introduced.
The process is like this, so whether it can be implemented lies in the first sentence. In other words, whether the packet can be successfully transmitted and how to transmit the packet.
Attract inspiration from script tags, load the required js files asynchronously.
That is to say
Using("User");
It's equivalent to writing a sentence
Now that I see this, is it meaningful to do this? Just to write script tags as dynamically introduced in JS? Or, just to write a few characters less?
Of course not, it is meaningless to do this! How to do it?
Let’s talk about efficiency first.
If a page needs to load N multiple js files, the following
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
Wait and wait.
Is it scary? It is quite scary, and the post-maintenance requires a high cost. How many pages are there, you may need to modify several pages. So, when the page only introduces a few key js files, other files are loaded dynamically?
For example, we just need to load the jquery file and then call it
$.getScript("",function(){});
In this way, we only need to introduce it into the page file.
<script type="text/javascript" src=""></script>
Just do it.
So what are the disadvantages of this writing style? Look at a piece of code
$.getScript("",function(){
$.getScript("",function(){
$.getScript("",function(){
$.getScript("",function(){
// and so on..
});
});
});
});
PS: The watch function used can avoid this situation. This is not considered in this blog post.
Is it dazzling? Are you still willing to align the code? Even with formatting tools, would you still be willing to correspond to closed brackets with which $.getScript? Of course not willing.
Then, the package guide form that imitates Java comes out.
Using("User");
Using("Order");
Using("Type");
Using("Validate");
// and so on..
Or you can
Using("User","Type","Order","Validate",...);
The writing problem doesn't matter. Of course I recommend the first method, it is clear.
After the package is exported, all usages do not require any nesting and are used normally.
var u = new User();
var o = new Order();
// and so on..
But there will be a question. If the asynchronous loading is executed when using("XXX"), then
Using("User");
Using("Order");
Using("Type");
Using("Validate");
// and so on..
I need to load 4 files asynchronously in this section. Although it is asynchronous, it is a bit troublesome? And 4 links are needed. If you are willing to merge JS, it is OK. Moreover, when using it, I don’t need to use objects, which is a waste of resources at this time?
As for this problem, my solution is to learn hibernate, delay loading, and loading on demand.
So how to do it?
Using("User");
At this time, it must not be loaded. What should I do if I don’t load? Of course, it returns a mock, that is, the mock object. It is used first for the user, and only when the user really needs to use this object, then load the required js. That is to say
Using("User"); // After this sentence is executed, a User object will be created, which was just a mock at that time.
var u = new User(); // At this time, the real User object instance is needed, and the JS file is loaded dynamically at this time and the user object that has been instantiated is returned.
As we all know, asynchronous loading does not conflict with the current running state, that is,
var u = new User();
After this sentence is executed, u is a variable with no actual value, and that's it. So, how to solve this problem, the only way I can think of is to adopt a synchronization strategy. Only when js is loaded and then executes the subsequent js statements is a bit regrettable, and the possible browser fake death caused by synchronization is also a relatively serious problem. Ignore these problems for the time being, and I hope there will be a better solution in the future.
Then the problem arises. Are there any advantages to synchronizing this way?
I don't know what advantages there are, at least there should be no disadvantages compared to asynchronous loading. For example, normal asynchronous loading is
$.getScript("",function(){
var u = new User();
});
Just executing this statement requires function to be executed, which is essentially only after loading. So compare
var u = new User();
In theory, the time should be equivalent, because it will only be executed after loading.
At least the second type of code that looks more like Java, and ignores other non-business-related codes.
So, how can you know where the required object is and how to load it? What I can think of is to simulate a configuration file, why use configuration files, instead of register-like functions like add functions or other frameworks. Maybe I just want to use configuration files, which are more like Java, and will be more decoupled after later modifications.
= {
"User" : "/js/user" // You can hide .js because it must be loading JS files
}
This is probably what the whole idea looks like. I have implemented some constraints on it, such as adding namespaces
var u = new ();
This can reduce some global variables, and if necessary, insert some commonalities that all objects may have, reducing duplicate encoding when creating classes.
Of course, it still supports not using namespaces.
In order to solve the effectiveness of this constraint, functions are added to class-create constraints.
("User",function(){
}).property({
}).static({
}).namespace();
The rough meaning here is
create(class name, constructor)
property(properties of class)
static (static property of class)
namespace (namespace)
To extend this, why not add the MVC form?
Later I found that if I wanted MVC, then the dynamic maintenance between several classes, or the use class was automatically maintained when it was created. I haven't thought of a good solution yet, so I didn't add it to it, so I could only create the class and maintain it myself.
Through the above text, I finally get a
Then you only need to introduce one
<script type="text/javascript" src=""></script>
This way you can write next
Using("jquery");
Using("User");
$("#ID").click(function(){
var user = new User();
= "xx";
();
});
Let's first get a piece of java code
Copy the codeThe code is as follows:
import ;
User u = new User();
();
According to the process, it is to guide packages, instantiate, and call.
JS cannot make a package lead, or in the code sense, it usually only introduces script tags on the page.
So first assume that it needs to be written like this
Copy the codeThe code is as follows:
Using("User");
var u = new User();
();
So, can it be implemented in JS?
Let’s analyze it one by one. Of course, the premise is that the page is not loaded with script tags, otherwise it will be meaningless.
The first sentence
Using("User");
Why use Using? Of course, it is just my naming idea. You can think about C#, which is using using and borrowed.
What I write in Using is of course the object User I need. As the name suggests, of course I write it as Using("User"). Let’s not talk about how the inside is implemented, at least this is the idea.
Because I can't simulate keywords and write them as Using User; at least I can't do this.
Second and third sentences
Copy the codeThe code is as follows:
var u = new User();
();
It's very normal, it's very common instantiation and function calls. The only thing I don't understand is where the User object comes from? Then of course it was imported when the first sentence was introduced.
The process is like this, so whether it can be implemented lies in the first sentence. In other words, whether the packet can be successfully transmitted and how to transmit the packet.
Attract inspiration from script tags, load the required js files asynchronously.
That is to say
Copy the codeThe code is as follows:
Using("User");
It's equivalent to writing a sentence
Copy the codeThe code is as follows:
<script type="text/javascript" src=""></script>
Now that I see this, is it meaningful to do this? Just to write script tags as dynamically introduced in JS? Or, just to write a few characters less?
Of course not, it is meaningless to do this! How to do it?
Let’s talk about efficiency first.
If a page needs to load N multiple js files, the following
Copy the codeThe code is as follows:
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
Wait and wait.
Is it scary? It is quite scary, and the post-maintenance requires a high cost. How many pages are there, you may need to modify several pages. So, when the page only introduces a few key js files, other files are loaded dynamically?
For example, we just need to load the jquery file and then call it
Copy the codeThe code is as follows:
$.getScript("",function(){});
In this way, we only need to introduce it into the page file.
Copy the codeThe code is as follows:
<script type="text/javascript" src=""></script>
Just do it.
So what are the disadvantages of this writing style? Look at a piece of code
Copy the codeThe code is as follows:
$.getScript("",function(){
$.getScript("",function(){
$.getScript("",function(){
$.getScript("",function(){
// and so on..
});
});
});
});
PS: The watch function used can avoid this situation. This is not considered in this blog post.
Is it dazzling? Are you still willing to align the code? Even with formatting tools, would you still be willing to correspond to closed brackets with which $.getScript? Of course not willing.
Then, the package guide form that imitates Java comes out.
Copy the codeThe code is as follows:
Using("User");
Using("Order");
Using("Type");
Using("Validate");
// and so on..
Or you can
Copy the codeThe code is as follows:
Using("User","Type","Order","Validate",...);
The writing problem doesn't matter. Of course I recommend the first method, it is clear.
After the package is exported, all usages do not require any nesting and are used normally.
Copy the codeThe code is as follows:
var u = new User();
var o = new Order();
// and so on..
But there will be a question. If the asynchronous loading is executed when using("XXX"), then
Copy the codeThe code is as follows:
Using("User");
Using("Order");
Using("Type");
Using("Validate");
// and so on..
I need to load 4 files asynchronously in this section. Although it is asynchronous, it is a bit troublesome? And 4 links are needed. If you are willing to merge JS, it is OK. Moreover, when using it, I don’t need to use objects, which is a waste of resources at this time?
As for this problem, my solution is to learn hibernate, delay loading, and loading on demand.
So how to do it?
Copy the codeThe code is as follows:
Using("User");
At this time, it must not be loaded. What should I do if I don’t load? Of course, it returns a mock, that is, the mock object. It is used first for the user, and only when the user really needs to use this object, then load the required js. That is to say
Copy the codeThe code is as follows:
Using("User"); // After this sentence is executed, a User object will be created, which was just a mock at that time.
var u = new User(); // At this time, the real User object instance is needed, and the JS file is loaded dynamically at this time and the user object that has been instantiated is returned.
As we all know, asynchronous loading does not conflict with the current running state, that is,
Copy the codeThe code is as follows:
var u = new User();
After this sentence is executed, u is a variable with no actual value, and that's it. So, how to solve this problem, the only way I can think of is to adopt a synchronization strategy. Only when js is loaded and then executes the subsequent js statements is a bit regrettable, and the possible browser fake death caused by synchronization is also a relatively serious problem. Ignore these problems for the time being, and I hope there will be a better solution in the future.
Then the problem arises. Are there any advantages to synchronizing this way?
I don't know what advantages there are, at least there should be no disadvantages compared to asynchronous loading. For example, normal asynchronous loading is
Copy the codeThe code is as follows:
$.getScript("",function(){
var u = new User();
});
Just executing this statement requires function to be executed, which is essentially only after loading. So compare
Copy the codeThe code is as follows:
var u = new User();
In theory, the time should be equivalent, because it will only be executed after loading.
At least the second type of code that looks more like Java, and ignores other non-business-related codes.
So, how can you know where the required object is and how to load it? What I can think of is to simulate a configuration file, why use configuration files, instead of register-like functions like add functions or other frameworks. Maybe I just want to use configuration files, which are more like Java, and will be more decoupled after later modifications.
Copy the codeThe code is as follows:
= {
"User" : "/js/user" // You can hide .js because it must be loading JS files
}
This is probably what the whole idea looks like. I have implemented some constraints on it, such as adding namespaces
Copy the codeThe code is as follows:
var u = new ();
This can reduce some global variables, and if necessary, insert some commonalities that all objects may have, reducing duplicate encoding when creating classes.
Of course, it still supports not using namespaces.
In order to solve the effectiveness of this constraint, functions are added to class-create constraints.
Copy the codeThe code is as follows:
("User",function(){
}).property({
}).static({
}).namespace();
The rough meaning here is
create(class name, constructor)
property(properties of class)
static (static property of class)
namespace (namespace)
To extend this, why not add the MVC form?
Later I found that if I wanted MVC, then the dynamic maintenance between several classes, or the use class was automatically maintained when it was created. I haven't thought of a good solution yet, so I didn't add it to it, so I could only create the class and maintain it myself.
Through the above text, I finally get a
Then you only need to introduce one
Copy the codeThe code is as follows:
<script type="text/javascript" src=""></script>
This way you can write next
Copy the codeThe code is as follows:
Using("jquery");
Using("User");
$("#ID").click(function(){
var user = new User();
= "xx";
();
});