[SmartScript]js类库管理不再发愁
来源:互联网 发布:标准体重 知乎 编辑:程序博客网 时间:2024/06/05 08:41
********************************************************************
* 版权声明
*
* 本文以Creative Commons的发布,请严格遵循该授权协议。
* 本文首发于博客园, 此声明为本文章中不可或缺的一部分。
* 作者网名: 浪子
* 作者EMAIL:dayichen (at)163.com
* 作者BLOG: Http://Www.Cnblogs.Com/Walkingboy
*
********************************************************************
[SmartScript]js类库管理不再发愁
-Written by 浪子@cnblogs.com (07-02-07)
摘要:
js文件路径?版本更新,客户端缓存更新?这些问题是否一直困扰你?
为什么我不能像c#一样,using一下所需要的js类库,就可以引用类库的功能,而不必要去管src,管当前的客户端缓存是否最新?
正所谓,只有想不到的没有做不到的,依据最近所得思路制作了SmartScript,轻松搞定这些问题。
一、脚本路径:
当你的项目中js文件越来越多,你的页面层次越来越深,每次都要仔细的处理js对应的url,保证不会引用到错的地址。
当Asp.net 2.0开始使用资源文件代替以往的script文件的时候,我们对js的引用开始越来越方便,大部分的控件厂商已经都使用了内嵌的脚本资源,我们的项目、类库、自定义控件,都无一例外的模仿使用了这个方法。
毫无疑问,这是个绝妙的方法,我们不必要再担心,我们的控件不知道会用在那个结构底下,它跟js的相对路径是什么,页面里再也看不到"../../"如此复杂的地址了。
但是内嵌的脚本也给了我们麻烦,每次修改js都需要rebuild整个项目!
二、版本更新:
rebuild的项目我忍了,但是不能容忍的是js文件的版本更新了,但是客户端的缓存却一直没有更新,这下子晕了,然后我要去客户端一个个清除缓存嘛?显然这是不可能了。
或者我修改所有的js链接地址?Oh,My god。开发人员准会每天骂你一百遍,想象下当你的js更新频繁的时候......
三、我的解决方案SmartScript:
首先,对于脚本的路径,我们肯定还是要保留HttpHandler的处理方式,因为它确实非常的便利。但是我们可以不使用内嵌资源,我直接读文件流,不是一样嘛:)
对于版本更新,只要为每次的js连接增加版本信息就好了,这样子版本一变,文件名也就改变,自然没有存在更新缓存的意义了,因为它对IE来说本身就是一个新的js。
要处理这些问题,首要规避的问题就是hardcode的js引入
1.<script type="text/javascript" src="boot.js"></script>取而代之是,我希望可以像c#一样,使用一个特定的指令来引入,比如
1.$using("boot");
思路慢慢的清晰了,看下我的完整的boot.js启动代码var __SS = {};
__SS.Loads = new Array();
function $using(){
for(var i=0;i<arguments.length;i++){
__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。看到了,我们是用SmartScripts.axd来绑定js的HttpHandler
<httpHandlers> <add path="SmartScripts.axd" type="SmartScript.ScriptHandler,SmartScript" verb="*" validate="false"/></httpHandlers>然后使用$Load统一载入js,为什么要多这一步呢?主要是为了以后扩展的方便,特别是多线程下载(请参考Jeffrey Zhao的性能优化(7)相关文章),还有一点就是把零零碎碎的小文件合并成一个大文件下载。
可能有人已经发现上面的一个bug,__SS.Version,没有定义?:),缓存的问题就是在这里解决的,首先这个版本信息是被我配置在config文件里面的,每次都会动态读取,这样子如果更新js文件,只要同时更新config的版本信息,这段js自动就会使用新的版本进行替换。看下配置文件的样子吧
<?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>是否缓存js(对boot程序作了特别处理,不作缓存,这样子保证版本更新的时候,boot一直都是最新的),是否压缩js(语法),是否采用gzip,还有版本信息。
然后才会js作了个别名处理。
四、扩展&Demo
东西虽小,但是却是个无侵入,开放的第三方脚本管理方案,它让我可以任意的引用第三类库,也可以灵活的替换。而本身又是无框架依赖的:)
其实我原来的设想还有一个更重要的一步,就是自动依赖:在配置文件里面设置好每次js的互相依赖情况,然后自动监测,自动会按所需顺序逐个帮你加载所需的js文件,不过一直没有想到好的实现方法,所以暂时放弃了,留待后面有机会的时候再扩展吧。
SmartScripts的使用,因为太简单了,简单得我都不知道怎么写,帖小段代码吧:
<%@ 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="Button1_Click" Text="Button" /></div> </form></body></html>页面里面引入2个文件,别名分别为KINN和KINN.UI.
两个button分别调用了KINN和KINN.UI里面的方法
demo代码下载:http://www.cnblogs.com/Files/walkingboy/SmartScript.WebTest.rar
http://www.cnblogs.com/walkingboy/archive/2007/02/07/smartscript.html
- [SmartScript]js类库管理不再发愁
- 不再为指针发愁(强力推荐)
- 发愁
- java操作文件,不再为编码格式发愁
- 一贴看懂UML,不再发愁看不懂设计模式
- 第二章 字符串处理与编码不再发愁
- 免费图片外链网站收集整理,不再为贴图而发愁!!
- 产品经理不再纸上谈兵——产品经理不在为文案发愁
- 别再为了this发愁了:JS中的this机制
- 别再为了 this 发愁了:JS 中的 this 机制
- 发愁中~
- 管理新理念:顾客不再是上帝
- 分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
- 不再
- 试用 Entity Framework Power Tools CTP1 [ 不用再为生成实体类发愁了 ]
- 还在为画“类Word文档报表”而发愁吗?
- 还在为画“类Word文档报表”而发愁吗?
- 发愁 谁要gmail
- TIPTOPGP 公用程序(二)
- PSP开发环境的搭建
- zwload隐藏服务加载驱动
- java数据库设计中的14个技巧
- row_number, dense_rank,rank method compare
- [SmartScript]js类库管理不再发愁
- How to recognise a good programmer
- java MD5使用
- Asp.net直接保存文件到客户端
- Java UUID的使用
- 一行代码加速IE的JavaScript的方法!
- @Java反射--侯捷
- [JavaScript]自定义MessageBox
- JMS(Jboss Messaging)的一点使用心得(十五)Spring扩展应用—延迟发送Message