非常简洁的动态加载js和css的jquery plugin

非常简洁的动态加载js和css的jquery plugin2011-11-10 博客园发仔

1// plugin author :  chenjinfa@gmail.com
2// plugin name : $.include
3//     $.include（"file/ajaxa.js"）;$.include（"file/ajaxa.css"）;
4//  or $.includePath  = "file/";$.include（["ajaxa.js","ajaxa.css"]）;
5
6$.extend（{
7    includePath: "",
8    include: function（file） {
9        var files = typeof file == "string" ？ [file]:file;
10        for （var i = 0; i < files.length; i++） {
11            var name = files[i].replace（/^s|s$/g, ""）;
12            var att = name.split（"."）;
13            var ext = att[att.length - 1].toLowerCase（）;
14            var isCSS = ext == "css";
15            var tag = isCSS ？ "link" : "script";
16            var attr = isCSS ？ " type="text/css" rel="stylesheet" " : " language="javascript" type="text/javascript" ";
17            var link = （isCSS ？ "href" : "src"） + "="" + $.includePath + name + """;
18            if （$（tag + "[" + link + "]"）.length == 0） document.write（"<" + tag + attr + link + "></" + tag + ">"）;
19        }
20    }
21}）;

放在javascript文件头部，就像C#（using...）或Java（import ...）

示例：部门管理页 Department.aspx

注：因编辑器的问题，内容（http://www.cnblogs.com）原文是“. . / . . /”

.
<head>
<link rel="stylesheet" href="http://www.cnblogs.com/css/common.css" type="text/css"/>
<script src="http://www.cnblogs.com/javascript/jquery.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/javascript/common.js" type="text/javascript"></script>
<script src="DepartmentInfo.js" type="text/javascript"></script>
</head>

include plugin 代码放在公共common.js。

DepartmentInfo.js 文件代码

$.includePath = "http://www.cnblogs.com/javascript/";
$.include（["json2.js", "jquery.tree.js", "jquery.tree.css"]）;

$（function（） {
  $（"#depTree"）.tree（{
    url: "http://www.cnblogs.com/service/ES_SYSTEM.svc/DEP_INFO_Tree"
  }）;
  .
}）;
.

这样写法挺好看的。

以后有空再我发表我写的整个项目及体会。基于asp.net Data Service 和 jquery的一套框架系统，名称定为：“E-Frame“，实现了基于角色权限系统等功能。