I will share with you some experiences on restructuring the JS front-end framework. If you are interested, don't miss it. After all, it's an experience. Let's get started.
Refactoring is actually not a major action. The main function to be implemented is to re-divide the existing JS Code and decouple the existing modules. Then I plan to divide the existing program into modules and repackage it into a namespace to implement use or something similar to java Package. So I only need to load a js file of use to call the use function of this file. By setting some parameters, I can dynamically load the required modules. This is the perfect idea (I was silly and naive at that time ). Okay. The nightmare begins.
Premise: I underestimated myself three months ago. // Well, there may be un civilized terms below ~~
First of all, on the first day of the plan, I planned to separate the most decoupled part of the program, the self-made control part. People try to write some form controls, such as Panel. js, Button. controls such as js have a lot of js files. Although I have already divided the folders, I can see the series of script labels on the index page, all of which are tough. So the nightmare entered the second stage. I wanted to load a JS file, which can dynamically load all the controls. JS. If you want to learn more about "Dynamic Loading JS", please go to du Niang G Niang and ask. I think I should find a lot of 3 asynchronous + 1Ajax implementations. Well, these are all nonsense. Refer to the book "high-performance JavaScript" and generate the following code:
The Code is as follows:
Function loadScript (url, callback ){
Var script = document. createElement ("script ");
Script. type = "text/javascript ";
If (script. readyState) {// IE
Script. onreadystatechange = function (){
If (script. readyState = "loaded" | script. readState = "complete "){
Script. onreadystatechange = null;
Callback ();
}
}
} Else {
Script. onload = function (){
Callback ();
}
}
Script. src = url;
Document. getElementsByTagName ("head") [0]. appendChild (script );
}
A good tragedy starts slowly. First, all my controls are based on JQuery, so loadScript (jqueryURL, function () {// load my control s}) is required }), let's just interrupt it here and connect it later.
Then I suddenly wanted to implement the namespace function. I had a good research on object-oriented, prototype chain, and other things. Then I found that the hitting and referencing functions were abstract, the book "javascript Design Patterns" is a breeze. Finally, after understanding the prototype model, it is still a fog. Okay, I think I have to rethink this problem. I just want to create some widgets, so I just need to bind my control as an object property to a global object. So I used my English name Gssl as an object to get the following structure:
The Code is as follows:
Var Gssl = {}
Back to the above interrupt, my idea is to construct my global object and bind it to the Space named Gssl when loading JS dynamically. The specific implementation is as follows:
The Code is as follows:
LoadScript (jqueryURL, function (){
// Load my control s
LoadScript (controlURL, function (){
// Bind controls
Gssl. control = control;
});
});
I wrote it here, and the test was completed. Last night, I was so happy, but I knew the nightmare was not over yet.
This morning, I went back and referenced this JS file that was dynamically loaded to my page. The result was asynchronous, the subsequent code is not executed until the Gssl object is generated completely (I am going, this is unreasonable ). Then I thought about it. I want to make a ready flag for the last loaded control to indicate whether or not Gssl has been loaded. However, if you find that each component has its own callback function, you do not know which one is the last load. Although code execution is sequential, however, the concurrency of this transmission makes it hard for you to determine which one is the last one. Okay, I totally collapsed, so I thought of a very 2B method. I 'd just write a function to hold the program for 2 seconds. It would take 2 seconds ~. Then we found that setTimeout TM could not card the code, and his good friend setIXXXXX could not card the code. Okay, sorry. I wrote an endless loop to judge the ready bit. Okay, the browser does not.
Back to the origin, I began to consider trying to load the next control recursively at the time of Callback, so that I can know when the control will be loaded. But if I try to load it like this, I still need to dynamically load a fart. Isn't that even more efficient. Then I read The Implementation of The ready method of various frameworks. Well, the TM file is IMBA. There is only one path in front of me, and all the controls are written on one JS. In this way, it is easy to avoid heavy lifting.
Then I continued to propose a solution like this, and then spent a nightmare day. It's almost time for me to get off work. I am still wondering whether this problem has been solved. Then the third voice in the brain started, Zhiwei ~ (This is my name ~), Is it really necessary? Okay, you have to admit that you have to rely on him every time you get out of a nightmare. Then I open the folder of the entire project and open the folder at each layer and return it back. Then I think, okay, it's not a novel, these inactions will not be described (I will tell you that it will be as silly as a mental patient when I think about a problem ). Finally, I found that even if I leave all these modules, I still need to make some changes to other projects. Although there are interfaces, the interfaces are connected to the backend, the interface between modules has not been implemented yet. Such a withdrawal will be accompanied by a lot of extra payments (estimated, but based on experience, these are inevitable ~), In addition, the new JS framework is not compatible with the overall framework (some resource access problems were found when I got off work). Although I did not give up on it, I gave up (the progress of the second Olympics ). The code of this version is not saved, and the SVN is not updated ~. I have not backed up my USB flash drive, but all the source code has left me angry and put it to Delete. This log is used only as a souvenir.
The lesson is that if I had a front-end modular idea at the beginning, I would not have taken this step. I can do it with my ability, but now it's hard to get back ~ Let's make the baby have a good start with all the evil milk powder ads, so what I do is let the Code have a good start ~ Forgive me for failing this course ~~ (T_T)
In addition, I know that the blog Park is a magical place. If some people encounter the same problems and solve them, can you share them? A reply is required!
