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

最新推荐文章于 2022-10-27 16:50:43 发布

原创最新推荐文章于 2022-10-27 16:50:43 发布 · 217 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #jQuery #JavaScript #EXT #Java #ViewUI

jquery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用JavaScript插件简化前端资源加载的方法。通过自定义的$.include函数，可以更简洁地加载CSS和JS文件，提高了页面加载效率。示例展示了如何在Department.aspx页面中应用该插件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


// plugin author :  chenjinfa@gmail.com
// plugin name : $.include
// $.include('file/ajaxa.js');$.include('file/ajaxa.css');
//  or $.includePath  = 'file/';$.include(['ajaxa.js','ajaxa.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 + ">");
        }
   }
});

放在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"
  });
  .
});

.
这样写法挺好看的。