JS front-end framework on refactoring failure experience sharing _javascript skills

Source: Internet
Author: User
All right, let's go.
Refactoring this is not really a big move, mainly to achieve the function, that is, the existing JS code to a new division, decoupling existing modules. Then I'm going to divide the existing programs into modules and repackage them for a namespace implementation use or something like Java package. So I just load a use of JS file call this file use function, by setting some parameters, I can dynamically load the required modules. This is the perfect idea (I was silly and naïve then). Well, the nightmare has begun.
Premise, I underestimated myself 3 months ago. Well, the following may appear UN civilized language ~ ~

First of all, the first day of the plan, my intention is to detach the part of the program that most needs decoupling, and make the control part. In other words, they tried to write some form controls or something like panel.js,button.js. There is a lot of JS file, although I have divided the folder, but see the index page above the chain of <script> tags, All kinds of eggs hurt to say. So nightmare into the second stage, I want to load a JS file, and this JS file can dynamically load all the control JS. If you want to know "dynamic loading JS" related knowledge, please go to the Niang G Niang there to ask a clear. I think it's going to be a lot of 3 asynchronous +1ajax implementations. Well, these are nonsense, reference to the "High-performance JavaScript" book, produce the following code:
Copy Code code 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);
}

The good tragedy begins slowly, first of all, my control is based on jquery so it is necessary to loadscript (Jqueryurl, function () {//Load my control S}), OK here to interrupt here, and then next.
Then I have a whim to do the function of the namespace, a good study of object-oriented Ah, prototype chain, and so assorted things and then found that the function of this kind of reference is a good abstraction, to the "JavaScript design pattern" of the book pieces. Finally, after understanding the prototype model, it is still a cloud of fog. OK, I think I'm going to rethink this, I just want to get the controls out, so I just have to bind my controls to a global object as a property of an object. So I used my own English name Gssl as an object to draw the following structure:
Copy Code code as follows:

var Gssl = {}

All right, back to the interrupted place above, my idea is to dynamically load JS when the way to construct my global object and binding to the space named Gssl, specifically implemented as follows:
Copy Code code as follows:

Loadscript (Jqueryurl, function () {
Load my control s
Loadscript (Controlurl, function () {
Bound controls
Gssl.control = control;
});
});

Writing here, the test is a tune, last night, a little happy, but the programmer's intuition I know that the nightmare is not over.
This morning to go back to this dynamic load JS js file to my page there, the result because of the characteristics of asynchronous, the following code did not wait until the completion of the Gssl object generation has been implemented (I go, this is unreasonable AH). Then think about it and want to do a ready flag bit at the last control to flag Gssl whether the load is complete or not. But find that each component has its own callback function, you do not know which is the last load, although the code execution is in order, but the parallelism of the transmission so that you can not be sure which is the last one. Good I completely collapsed, so think of a very 2B method, simply write a function to get stuck in the program 2 seconds, two seconds certainly can ~. Then found SetTimeout TM can not card code, his good base friend Setixxxxx also can not card code. Well, I was angry, wrote a dead loop to judge the ready bit. OK, the browser is out of work.

Back to the origin, I started thinking about trying a recursive load to load the next control at callback, so I could tell when the control was loaded. But think carefully, I rub, if you want to load so I also dynamic load fart Ah, this is not a little to improve efficiency. Then we see the realization of the ready method of various frames. Well, the TM single file is Imba. Then there is only one way in front of me, all the controls are written in a JS above. This is simply a cop-out.

Then I went through a nightmare day in this kind of solution, and then I constantly spit in my own groove. It's almost time to get off work, and I'm still thinking about whether there is any solution to this problem. Then the third voice inside the brain began, Zhi Wei ah ~ (ha my name is this ~), really necessary? Well, you have to admit, every time you break out of a nightmare you have to rely on him. Then I open the entire project folder on each floor and go back, and then think, well, not to write a novel, and these little moments of thinking don't describe it (I'll tell you I think it's like a mental patient as stupid as I want to be). Finally, I found that even if I pull out these modules, go to other projects or make some changes, although there are interfaces, but the interface is the backend, I have not done the interface between modules. This kind of pumping is accompanied by a whole bunch of extra payments (estimated, but according to experience these are inevitable ~), and the new JS framework in the overall framework is not compatible (after work to find some resources access problems), although not give up, but still gave up (the Devil's Progress, Zeo). This version of the code is not done to save, uh, SVN also did not update up ~. My u disk is hard to move and there is no backup, but all the source code for me rage put to delete. This diary is reserved for remembrance only.

The lesson is that if I had a front-end modular idea at first, I wouldn't have come this far. To my ability can be done, but now has been too much to the ~ or those evils of milk powder ads, so that the baby has a good start, then I am to let the code has a good start ~ Forgive me this failed Baba ~ ~ (T_T)

In addition, I know that the blog Park is a magical place, if there are colleagues encounter the same problems and effectively resolved, can you share it? There will be a reply!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.