Dynamic load, cache, update and reuse of JS (c)

General Ideas

1, the establishment of a JS service, the service to achieve universal JS file loading, dependency, caching, updating and reuse.

2, each project if the use of general-purpose JS, can (BI) to (XU) use JS service to load.

3, JS service only to provide general-purpose JS, such as jquery, my97, Easyui, etc. (can be set according to the actual situation of the JS file).

4, other for the characteristics of the need to write the JS file, need to write their own code to load. The JS service can provide load-using functions. (considering if you want to use Sea.js)

5, JS service loaded JS file, do not need to make any changes. And, of course, it's not responsible for conflicting function names in each file.

Sea.js pursuit of natural programming, code to write naturally. It's a coincidence. I also advocate natural programming, and the framework I write is called the "natural framework". Just loading JS this piece and sea.js thinking a little different.

A project needs a JS file can be divided into three kinds: third-party general-purpose JS (such as jquery, my97, etc.), their own company to write the general JS (such as I write the Natureui), their own specific needs to write a specific JS.

I think for the general JS, you do not need every time to write a line of code to load, too troublesome. such as jquery, after loading (automatic processing) I can use directly $, no need to write a line to load the code. Because the JS service will be a variety of general-purpose JS files loaded into the top page one-time, and then use the "reuse" way, so that other pages can be used directly. In other words, in the page, do not have to consider the jquery has not loaded, loading completed, no longer to write a row to load the JS, direct use is good.

Just as we write C # code, when we create a new project, VS will refer to the commonly used DLL, VS will put the common namespaces using on the new page, and I don't have to worry about it. I think this way is relatively simple, as to whether it is natural, it is the view of the beholder.

Loading process

Look at the picture

1. Use <script > Reference boot.js in the page. This is primarily a boot program that uses him to load other JS.

2, and then see if there is cached information.

3, if there is caching information, then this is a child page. Call the adapter function so that the child page can access the JS file that is contained in the top page. Then check to see if there are any Jsready functions in the sub page, if so, call.

4, if there is no caching information, this is the top page, you need to load another JS (bootload.js). This is the real work of the document. Here are the functions for configuring information and loading CSS and loading JS. Then start various loads.

The basic process is this, if you read the first trailer, it will feel that the flow chart is not the same. Really different, I changed it again. The sense of change after the process is more concise, thinking more clearly. Here's how to do this with the FAQ. It is estimated that there will be many questions after reading.

FAQ

1, Why is there a boot.js and then there's a bootload.js?

Originally only one, divided into two to let boot.js as far as possible without the need to modify. Because I can't guarantee boot.js is up to date.

2, Top What is the page?

The top page is the outermost page with an IFRAME loading other pages, called subpages.

3, What is a child page?

A page loaded with an IFRAME in the top page. You can access the information and functions in the top page by using top.

4, What does fitness mean?

You can access the functions in the top page, such as top.$, in the sub page. But when you visit, add top. That's a bit of a hassle. The so-called adaptation, that is, so that programmers do not have to worry about their own writing JS is running in the top page or the child page, all $ on it.

For Third-party Plug-ins need to do some fitness, now has been done jquery and My97,easyui has not been done.

Because you may not have thought about using the top page function in the page, you don't have to think about it when you write the plugin. For example, my97, in the top page pop-up date selected Div, because the child page and top have position deviation, so the date choice also biased out, did not think of any good method, had to change the source code of the my97.

5, not just loading JS , why are you so complicated?

If only one or two JS files to load, it does not need to be so complex. But if there are more than 10 or even dozens of JS files to load it?

If you want to develop a set of UI Plug-ins, then in the development debugging phase, to load the unincorporated JS, so easy to debug and modify. Developed almost, in the conversion to reference the merged JS file. Then how to refer to the JS part of how to deal with it? Especially while developing the UI while developing the project.

6, how can I get CSS? of things?

CSS is also to be loaded, a general project of the various pages with CSS are the same. Also here by the way loaded.

7, What's in the configuration information?

Because JS service in a separate site inside, then this site's URL is what? 192.168.0.55 or Resource.naturefw.com? This address needs to be explained in the configuration information for easy reference. There is also a single sign-on URL, as well as some other information.

8, Why should I cache it?

Do not want each page to load fixed things, such as configuration information and common functions. Although the browser enables caching when it is loaded, it is not very well controlled. The client can also force no caching. Maybe I have more control, I want better control.

In addition, with caching, the speed will be faster, compared with the browser to do a variety of judgments. Although the time of judgement is generally very fast.

9, How do I implement updates?

With the version number, set a version number, there are updates, change this version number on it.

10, look how many times you've written it, what is it?

is to let the child page with the top page Riga loaded JS.

11, How do I avoid conflicting function names in individual files?

I use the namespace of the way, C # write more, feel the namespace pretty good, transplanted over. Read the introduction of Sea.js, which also mentioned the way the namespace, is Yahoo used. Sea.js is not recommended because you have to remember a long namespace when you use it. But I don't think that's a problem. is not a long point, after the installation of ReSharper (r#), point. It can also be a hint. In addition, you can use "alias", such as var form = Nature.Controls.Form; That's good.

12, Other JS how are they downloaded?

Do a JS file path dictionary, JSON format, get a nickname most key, domain name + path + filename as value. Follow the order of the dependencies, and then load the dictionary one after the other.

13, Why not do delay loading?

I put the common JS files are loaded into the top page, the child page want to use, directly with the good, there is no reload process. Although the first need to load more JS, but generally can endure. Another login to Oa, the first thing is to enter the user name and password, you can fully use this "spare" time to achieve other JS load.

At present only think of these, there are some questions, welcome to ask questions.

PS: The next announcement, is to see the effect of the operation, may have written so much, we may not have a specific concept, in the end what it looks like.