JS front-end framework's failure experience sharing on refactoring

Okay, let’s get started Refactoring is actually not a big move. The main function to be achieved 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's Package. Then I only need to load a use js file and call the use function of this file. By setting certain parameters, I can dynamically load the required modules. This was the most perfect idea (I was stupid and naive at the time). OK, the nightmare begins. Premise, I underestimated myself 3 months ago. //Okay, uncivilized terms may appear below~~

First of all, on the first day of the plan, my intention is to separate the most decoupled part of this program, the self-made control part. Speaking of which, people have also tried to write some form controls such as Panel.js, Button.js and other controls. There are a lot of js files in them. Although I have divided the folders, but when I see the index page That series of tags is so annoying. So the nightmare entered the second stage, I wanted to load a JS file, and this JS file can dynamically load all control JS. If you want to know more about "Dynamic Loading JS", please go to Du Niang G Niang and ask for clarification. I think you should be able to find a lot of 3 asynchronous 1 Ajax implementations. Okay, this is all nonsense. I referred to the book "High Performance JavaScript" and generated the following code:

Copy the 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); } Good tragedy begins slowly, First of all, my controls are all based on JQuery, so I must loadScript(jqueryURL, function(){//Load my controls s}). OK, I will interrupt here and continue below. Then I suddenly wanted to implement the namespace function. I did a lot of research on object-oriented, prototype chains and other miscellaneous things. Then I found that this function of managing references is very abstract, so I gave it to the book "Javascript Design Patterns". "The book is so deceptive. In the end, after understanding the prototype mode, it was still a mystery. Okay, I think I need to rethink this issue. I actually just want to create a control. Then I just need to bind my control to a global object as a property of an object. So I used my English name Gssl as an object and got the following structure: Copy code The code is as follows: var Gssl = {} Okay, back to where I interrupted above, my idea is to construct my global object and bind it to the space when dynamically loading JS Named Gssl, the specific implementation is as follows: Copy code The code is as follows: loadScript(jqueryURL , function(){ //Load my controls loadScript(controlURL, function(){ //Bind control Gssl.control = control; }); }); As I write this, the test has been adjusted. I was a little happy last night, but I know from the programmer’s intuition that the nightmare is not over yet. I went back this morning and referenced this dynamically loaded JS JS file to my page. As a result, due to the asynchronous nature, the following code started executing before the Gssl object was generated (I go, this is unreasonable) ). Then I thought about it and wanted to make a ready flag on the last loaded control to mark whether Gssl has been loaded. But you find that each component has its own callback function, and you don't know which one is loaded last. Although the code execution is in order, the parallelism of this transmission makes you not sure which one is last. one. Okay, I was completely crushed, so I thought of a very 2B method. I simply wrote a function to jam the program for 2 seconds. Two seconds will definitely be enough~. Then he discovered that setTimeout TM cannot block codes, and his good friend setIXXXXX cannot block codes either. Okay, I got angry and wrote an infinite loop to determine the ready bit. OK, the browser quits.

Back to the starting point, I began to consider trying recursive loading, that is, loading the next control only during the Callback, so that I can know when the control has been loaded. But when I think about it carefully, I guess, if I want to load it like this, then I have to dynamically load it. Doesn’t this not improve the efficiency at all? Then I looked at the implementation of the ready method of various frameworks. Well, the one with single file is IMBA. Then there is only one way in front of me, which is to write all controls on a JS. This is simply avoiding the important and choosing the light.

Then I spent a nightmare day proposing solutions and then complaining about myself. It's almost time to get off work, and I'm still thinking about whether there is a solution to this problem. Then the third voice in my head started, Zhiwei~ (haha, this is my name~), is it really necessary? Okay, I have to admit that every time I escape from nightmares, I have to rely on him. Then I opened the folder of the entire project at each location and then returned it, and then I thought, okay, this is not writing a novel, so I won’t describe these little actions when thinking (I will tell you that when I think about a problem, it will be like Are mentally ill people just as stupid?) In the end, I found that even if I separated all these modules, I would still have to make certain modifications to other projects. Although there are interfaces, the interfaces are connected to the backend, and the interfaces between my modules have not been done yet. This kind of separation will be accompanied by a lot of additional payments (estimated, but based on experience these are inevitable~), and the new JS framework is not compatible with the overall framework (when I was off work, I found that some resources were not accessible. problem), although I didn’t give up, I still gave up (the progress of all evil, Ciao). This version of the code has not been saved, and SVN has not been updated~. There was no backup on my USB hard drive, but all the source codes were deleted in anger. I only keep this diary as a souvenir.

The lesson is that if I had a front-end modular idea from the beginning, I would not be where I am today. I can definitely do it with my ability, but now it’s hard to come back~ It’s still those evil milk powder advertisements, let the baby have a good start, then my goal is to give the code a good start~ Forgive me for being a failed daddy ~~ (T_T)

Also, I know that the Blog Forum is a magical place. If anyone has encountered the same problem and solved it, can you share it? There will always be a reply!

JS front-end framework's failure experience sharing on refactoring_javascript skills