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

General Ideas

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

2, each project if the use of Universal JS, can (BI) to (Xu) using the JS service to implement the load.

3, JS service only provide universal JS, such as jquery, my97, Easyui and so on (according to the actual situation can be set specific JS file).

4, other characteristics required to write the JS file, you need to write code to load. The JS service can provide load functions. (considering if you want to use Sea.js)

5, JS service load JS file, do not need to make any changes. Of course, it is not responsible for conflicting function names in each file.

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

The JS files needed in a project can be divided into three kinds: third-party universal JS (such as jquery, my97, etc.), the general JS written by your company (such as my Natureui), and the specific JS that I wrote for my specific needs.

I think for the general purpose JS, do not need every time to write a line of code to load, too much trouble. For example, jquery, after loading (automatic processing) I can use the direct $, there is no need to write a line to load the code. Because the JS service will be a variety of universal JS files loaded into the top page, and then use the "reuse" way, so that other pages can be used directly. That is, in the sub-page, do not have to consider jquery has no loading, loading completed no, no longer write a line to load JS, directly with the good.

Just as we write C # code, when we create a new project, VS will refer to the usual DLL, and when I create a new page, VS will use the usual namespaces, I don't have to worry about it anymore. I think this way is relatively simple, as to whether it is natural, it is the benevolent see of the beholder.

Loading Process

Look at the picture

1. Use <script > Reference boot.js on the page. This is mainly a boot program, use him to load the other JS.

2. Then see if there is any cache information.

3, if there is cache information, then this is a sub-page. Call the adaptation function so that the child page can access the JS file contained in the top page. Then look at the sub-page there is no jsready function, if there is a call.

4, if there is no cache information, this is the top page, need to load another JS (bootload.js). This is the real work of the paper. Here is the function of configuring information and loading CSS, loading JS. Then start the various loads.

The basic process is this, if you read the first preview, you will feel that the flowchart seems to be different. Really different, I changed it again. The process of feeling modified is more concise and the thinking is clearer. The following is the way to explain the FAQ. It is estimated that there will be a lot of questions after reading.

FAQ

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

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

2. Top What is the page?

The top page is the outermost page, and the top page uses an iframe to load other pages, called sub-pages.

3. What is a sub-page?

Pages loaded with IFRAME in the top page. You can access the information and functions in the top page in the form of top.

4. What do you mean by fitting?

In the sub-page, you can access functions in the top page, such as top.$. But you have to add top when you visit. This is a bit of a hassle. The so-called adaptation, is to let the programmer do not worry about their own writing JS is running in the top page or sub-page, all $ can be.

For a third-party plug-in need to do some adaptation, has been done now jquery and My97,easyui has not been done.

Because you probably didn't think about using the top page function in the sub-page, so I didn't even think about it when I wrote the plugin. such as my97, in the top page pop-up date selection of Div, because the sub-page and top has a position deviation, so the date selection also biased out, did not think of what good way, had to change the source of my97.

5. not just load JS , why are you so complicated?

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

If you want to develop a set of UI plug-ins, then in the development debugging phase, to load the non-merged JS, so that debugging and modification. Developed almost, in the conversion to reference the merged JS file. So how to deal with the part that references JS? Especially when developing the UI while developing the project.

6. Why is there CSS? the thing?

CSS is also to be loaded, generally a project of the various pages of the CSS are the same. Here also by the way loaded.

7. What's in the configuration information?

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

8. why Cache?

Do not want each page to load fixed things, such as configuration information and general functions. Although the browser enables caching when it is loaded, it is not very well controlled. Clients can also force the use of caching. Maybe I am more control, I want to better control.

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

9. How do I implement an update?

With the version number, set a version number, there is an update, change this version number on it.

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

is to let the sub-page with the top page in the loaded JS.

11. How to avoid the function name conflict in each file?

I use the way of namespaces, C # write more, feel the namespace is very useful, and transplanted over. Read the introduction of Sea.js, the inside also mentioned the way of namespaces, is used by Yahoo. Sea.js is not recommended because you should remember a long namespace when you use it. But I don't think that's a good thing. No, it's just a little bit. After installing ReSharper (r#), point. can also be prompted. You can also use "aliases", 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 + path + filename as value. Follow the order of dependencies, and then follow the dictionary to load each one.

13. Why didn't you do a lazy load?

I put the common JS file loaded into the top page, the sub-page want to use, the direct use of, completely did not load the process. Although the first need to load more JS, but generally can endure. In addition to log in to OA, the first thing is to enter the user name and password, then you can fully use this "free" time to achieve other JS loading.

Now just think of these, and what questions, welcome to ask questions.

PS: Next preview, is to see the running effect, may have written so much, we may not have a specific concept, exactly what it looks like. The next post will post some running.