[Smartscript] JS class library management is no longer worrying

 

**************************************** ****************************
*Copyright Notice
*
* This document uses the Creative Commons release. Please strictly abide by this authorization protocol.
* This article was first published onBlog, This statement isArticleIs an indispensable part.
* Author's network name: prodigal son
* Author email: Dayichen (AT) 163.com
* Author's blog: Http: // www. cnblogs. com/walkingboy
*
**************************************** ****************************

[Smartscript] JS class library management is no longer worrying

-Written by prodigal son @ cnblogs.com (07-02-07)

Abstract:

JS file path? Version update, Client Cache update? Have these problems always plagued you?

Why can't I reference the function of the class library by using the JS class library I need like C # without having to worry about SRC and check whether the current client cache is up to date?

As it is said, there is nothing unexpected to do. Based on the recent ideas, smartscript is created to easily solve these problems.

 

I. Script path:

When more and more JS files are in your project, and your page layers are getting deeper and deeper, you must carefully process the URL corresponding to JS every time to ensure that no wrong address is referenced.

When Asp.net 2.0 began to use resource files instead of previous script files, we began to make reference to JS more and more convenient. Most control vendors have already used embedded script resources, our projects, class libraries, and custom controls all use this method without exception.

There is no doubt that this is a wonderful method. We don't have to worry about it any more. Our control doesn't know what the relative path between it and JS will be used under that structure, "http://www.cnblogs.com/" is no longer seen on the page.

But the embedded script also gives us trouble. Every time we modify JS, we need to rebuild the entire project!

Ii. Version update:

I have endured rebuild projects, but I cannot tolerate JS file version updates, but the client cache has not been updated, then I will go to the client to clear the cache one by one? Obviously, this is impossible.

Or can I modify all JS link addresses? Oh, my God. Developers will scold you one hundred times a day. Imagine that when your JS updates are frequent ......

Iii. My solution smartscript:

First, we must retain the httphandler processing method for the script path, because it is indeed very convenient. However, we can directly Read File streams without using embedded resources :)

For version updates, you only need to add version information for each JS connection. In this way, when the version changes, the file name changes and there is no significance for updating the cache, because it is a new Js for IE.

To deal with these problems, the primary avoidance problem is the introduction of hardcode Js.

1.	<SCRIPT type ="Text/JavaScript"Src ="Boot. js"> </SCRIPT>

Instead, I want to use a specific command like C #, such

 

1.	$ Using ("Boot");

The idea is gradually clearer. Let's take a look at my complete boot. js startup.Code 

VaR _ SS =   {} ;
_ Ss. Loads =   New Array ();

Function $ Using () {< br> for ( var I = 0 ; I arguments. length; I + ) {< br> _ ss. loads. push (arguments [I]);
}
} ;

Function $ Load () {
If (_ Ss. Loads. Length > 0 ) {
Document. Write (' < Script Type = " Text/JavaScript " SRC = " Smartscripts. axd? Res = '+ _ ss. Loads. Join ( " $ " ) + '& Ver =' + _ ss. Version +' " > < ' + ' / Script > ');
}
} ;

 

OK. We can see that we use smartscripts. axd to bind the httphandler of Js.

<Httphandlers>

<Add Path ="Smartscripts. axd"Type ="Smartscript. scripthandler, smartscript"Verb ="*"Validate ="False"/>

</Httphandlers>

And then use $ load to load Js in a unified manner. Why do we need to take this step more? It is mainly for the convenience of future expansion, especially for multi-thread download (please refer to Jeffrey Zhao's performance optimization (7) Related Articles). Another point is to merge small files into a large file for download.

Someone may have discovered the above bug __ss. version, which is not defined? :), The cache problem is solved here. First, the version information is configured in the config file and will be dynamically read every time, so if the JS file is updated, as long as you update the config version information at the same time, this section of JS will be automatically replaced with the new version. Let's take a look at the configuration file.

<? XML version ="1.0"Encoding ="UTF-8"?>

<Smartscript cache ="True"Compress ="False"Gzip ="True"Ver ="0.11.2">

<Scripts>

<Script name ="Boot"Url ="Boot. js"/>

<Script name ="Kinn"Url ="Kinn/kinn. js"/>

<Script name ="Kinn. UI"Url ="Kinn/UI. js"/>

</Scripts>

</Smartscript>

Cache JS (for bootProgramThis ensures that boot is always up-to-date when the version is updated), whether to compress JS (syntax), whether to use gzip, and version information.

Then JavaScript will be processed as an alias.

Iv. Extension & demo

Although things are small, they are non-intrusive and open third-party script management solutions. It allows me to reference the third class library at will and can be flexibly replaced. And there is no framework dependency in itself :)

In fact, there is another more important step in my original idea: Automatic dependency: Set the mutual dependency of each Js in the configuration file, and then automatically monitor it, it will automatically help you load the required JS files one by one in the desired order, but I have never thought of a good implementation method, so I gave up for the moment and will continue to extend it later.

The use of smartscripts is too simple, so I don't know how to write it simply. Post a short piece of code:

<% @ Page Language = "C #" autoeventwireup = "true" codefile = "default. aspx. cs" inherits = "_ default" %>

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<Html Xmlns=Http://www.w3.org/1999/xhtml">

<Head Runat="Server">

<Title>Untitled page</Title>

<Script Type="Text/JavaScript" SRC="Smartscripts. axd? Res = Boot"></Script>

<Script Type="Text/JavaScript">

$ Using ("kinn ");

$ Using ("kinn. UI ");

$ Load ();

</Script>

</Head>

<Body>

<Form ID="Form1" Runat="Server">

<Div>

<Input Type="Button" Onclick="Kinn ();" Value="Kinn" />

input type = " button " onclick = " UI (); " value = " kinn. ui " />

<ASP:Button ID="Button1" Runat="Server" Onclick="Button#click" Text="Button" /></Div>

</Form>

</Body>

</Html>

Two files are introduced in the page. The aliases are kinn and kinn. UI.

The two buttons respectively call the methods in kinn and kinn. UI.

DEMO code download: http://files.cnblogs.com/walkingboy/SmartScript.WebTest.rar