Method 1 of javascript Dynamic Loading

There are also many JS dynamic loading frameworks, such as In. js. But this is not the way I want to write it. Let me talk about it.

Let's start with a piece of java code.Copy codeThe Code is as follows: import Biz. User;
User u = new User ();
U. show ();

The process is to export, instantiate, and call the package.

JS cannot do the package import, or code-based package import, but generally only introduces the script tag on the page.
Assume that you need to writeCopy codeThe Code is as follows: Using ("User ");
Var u = new User ();
U. show ();

Can it be implemented in JS?

To parse a sentence, of course, the premise is that the page does not load user. js with the script tag, otherwise it will be meaningless.

First sentence

Using ("User ");

The reason for Using is, of course, just one of my naming ideas. You can think of C # And use using instead.

Of course, the User object I need is written into Using. As the name suggests, I certainly write it as Using ("User. Let's not talk about how internal is implemented. At least the idea is like this.
Because we cannot simulate the keyword writing as Using User; at least I can't do this.
The second and third sentencesCopy codeThe Code is as follows: var u = new User ();
U. show ();

Normally, it is a common instantiation and function call. The only thing that is puzzled is where the User object comes from? Of course it was imported when the first package was imported.

The process is such a process. The key to achieving it is the first sentence. That is to say, whether or not the package can be imported successfully and how to export the package.

Draw inspiration from the script tag, and load the required js files asynchronously.
That is to sayCopy codeThe Code is as follows: Using ("User ");

It is equivalent to writing a sentenceCopy codeThe Code is as follows: <script type = "text/javascript" src = "user. js"> </script>

Now, does this make sense? Just to write the script tag as JS dynamic introduction? Or, only a few characters are allowed?

Of course not. This is meaningless! What should we do?
First, efficiency.
If a page needs to load N multiple js filesCopy codeThe Code is as follows: <script type = "text/javascript" src = "jquery. min. js"> </script>
<Script type = "text/javascript" src = "view. js"> </script>
<Script type = "text/javascript" src = "register. js"> </script>
<Script type = "text/javascript" src = "validate. js"> </script>
<Script type = "text/javascript" src = "user. js"> </script>
<Script type = "text/javascript" src = "order. js"> </script>
<Script type = "text/javascript" src = "type. js"> </script>

And so on.

Is it really scary? It is quite scary, and it requires a high cost for later maintenance. You may need to modify several pages if you have many pages. So when only a few key js files are introduced to the page, other files are dynamically loaded?
For example, we only need to load the jquery file and then callCopy codeThe Code is as follows: $. getScript ("user. js", function (){});

In this way, we only need to introduceCopy codeThe Code is as follows: <script type = "text/javascript" src = "jquery. min. js"> </script>

You can.
So what is the downside of this writing? Read a piece of codeCopy codeThe Code is as follows: $. getScript ("user. js", function (){
$. GetScript ("order. js", function (){
$. GetScript ("type. js", function (){
$. GetScript ("validate. js", function (){
// And so on ..
});
});
});
});

PS: using the watch function of In. js can avoid this situation. This is beyond the scope of this blog.

? Are you willing to align the code? Even if you have a formatting tool, do you want to match the closed brackets with $. getScript? Of course not.
Then, the java-like package form should sound.Copy codeThe Code is as follows: Using ("User ");
Using ("Order ");
Using ("Type ");
Using ("Validate ");
// And so on ..

Or you want to, you canCopy codeThe Code is as follows: Using ("User", "Type", "Order", "Validate ",...);

It doesn't matter how it is written. Of course, I recommend the first method, which is clear.

After the package is imported, no Nesting is required for all usage.Copy codeThe Code is as follows: var u = new User ();
Var o = new Order ();
// And so on ..

However, a question is raised. If asynchronous loading is performed at Using ("XXX "),Copy codeThe Code is as follows: Using ("User ");
Using ("Order ");
Using ("Type ");
Using ("Validate ");
// And so on ..

In this section, I Need To asynchronously load four files. Although it is asynchronous, it is not a problem? In addition, four links must be created. If you are willing to merge JavaScript, you can also. What's more, I don't need to use objects when Using. Is it too waste of resources?

As for this problem, my solution is to learn about hibernate, delayed loading, and load as needed.
How can this problem be solved?Copy codeThe Code is as follows: Using ("User ");

At this time, it is definitely not loaded. What does it do? Of course, a mock is returned, that is, a simulated object. First, you can load the required js only when you really need to use this object. That is to sayCopy codeThe Code is as follows: Using ("User"); // after this statement is executed, a User object will be created.
Var u = new User (); // In this case, the actual User object instance is used. At this time, the JS file is dynamically loaded and the instantiated User object is returned.

As we all know, asynchronous loading does not conflict with the current running status, that isCopy codeThe Code is as follows: var u = new User ();

After this statement is executed, u is a variable with no practical significance. So, the method I have come up with for the moment is to adopt a synchronization policy. It is a pity that the js statement is executed after the js load is completed. The browser may be suspended due to synchronization, which is also a serious problem, I hope there will be a better solution in the future.

The problem arises. What are the advantages of synchronization?
I don't know what advantages I have. At least compared with asynchronous loading, there should be no disadvantages. For example, normal asynchronous loading isCopy codeThe Code is as follows: $. getScript ("user. js", function (){
Var u = new User ();
});

To execute this statement only, you need to execute the function. In essence, it is executed only after the user. js is loaded.Copy codeThe Code is as follows: var u = new User ();

In theory, the time should be equivalent, because it is executed only after the user. js load is complete.

At least the second type of code looks more like a java code, so you don't have to worry about other non-business-related code.

So how can we know where the desired object is and how to load it in? All I can think of is simulating a configuration file. Why do I use a configuration file instead of a configuration file like In. js uses the add function or other framework functions similar to the register function. I just want to use a configuration file, more like java, and it will be more decoupled later.Copy codeThe Code is as follows: Using. Config = {
"User": "/js/user" // You can hide. js because it is definitely loading JS files.
}

The overall idea is probably like this. I have made some constraints on it, such as adding a namespace.Copy codeThe Code is as follows: var u = new Using. Modules. User ();

In this way, we can reduce some global variables and insert some common objects if necessary to reduce the repeated encoding during class creation.

Of course, namespaces are still not supported.

To solve the effect of this constraint, the Class. create Function is added to create a constraint for the Class.Copy codeThe Code is as follows: Using. Class. create ("User", function (){
}). Property ({
}). Static ({
}). Namespace (Using. Modules );

The general meaning here is

Create (Class Name, constructor)
Property)
Static (static attributes of the Class)
Namespace)

So far, why not add the MVC form?
Later, I found that for MVC, the dynamic maintenance between several classes, or the Using class was automatically maintained at the time of creation, and I did not think of a good solution yet, so I did not add it to it, you can only create and maintain classes by yourself.

Through the above text, finally get a Using. js
Then, you only need to introduce oneCopy codeThe Code is as follows: <script type = "text/javascript" src = "using. js"> </script>

In this way, you can writeCopy codeThe Code is as follows: Using ("jquery ");
Using ("User ");

$ ("# ID"). click (function (){
Var user = new User ();
User. name = "xx ";
User. show ();
});