本文介绍如何利用jQuery扩展方法动态加载JavaScript和CSS文件。通过定义[[wp:a0]]中的include函数，可批量或单独加载资源，自动识别文件类型并生成对应的script或link标签，避免重复加载，适用于需要按需加载样式的场景。
jQuery动态加载资源方案概述
当项目中存在大量关联的CSS文件，或需要根据特定条件动态加载不同样式表时，以下提供的解决方案能够有效简化这一过程。
基于jQuery的JS与CSS动态加载扩展实现
核心扩展代码实现
$.extend({
includePath: '',
include: function(file) {
var files = typeof file == "string" ? [file]:file;
for (var i = 0; i < files.length; i++) {
var name = files[i].replace(/^\s|\s$/g, "");
var att = name.split('.');
var ext = att[att.length - 1].toLowerCase();
var isCSS = ext == "css";
var tag = isCSS ? "link" : "script";
var attr = isCSS ? " type='text/css' rel='stylesheet' " : " language='javascript' type='text/javascript' ";
var link = (isCSS ? "href" : "src") + "='" + $.includePath + name + "'";
if ($(tag + "[" + link + "]").length == 0) document.write("<" + tag + attr + link + "></" + tag + ">");
}
}
});
具体调用方式如下：
标准调用示例
$.include('//www.jb51.net/include/dedeajax.js');
$.include('//www.jb51.net/templets/skins/style/android.css');
另一种调用示例：
自定义路径调用示例
$.includePath='www.jb51.net/html/';
$.include([dedeajax.js','android.css']); 上述内容涵盖了本文的核心知识点，期望能为读者的技术学习提供实际帮助。