Js（Css）动态引用方法–Js(css)的统一管理-CSDN博客

本文链接：https://blog.csdn.net/javaRwx/article/details/83458654

引自:http://pm.htjs.net/cbb

Javascript（Css）组件在Web中的访问地址基本上要求基于Url的相对地址或绝对地址，如果地址出现错误那么Web访问时将出现异常，组件也就无法使用。因此，以前对于此种处理多为两种方法：

1、绝对地址写法：

如上，在程序中进行引用。此种引用方式的好处在于所有引用点配置方法一致，屏蔽了目录层的变换而带来的引用差异，对编程、维护来说都较为统一、规范；但这种方法对部署时存在调整，即“localhost”必须根据部署域名而更换，例如，要将程序部署到www.htjs.net网站上，那么所有程序引用都将改为<script type=”text/javascript” src=”http://www.htjs.net/yfjz/yfjz_scripts.js”></script>，如果发布目录也不是yfjz，而是shyl，那么程序引用将改为<script type=”text/javascript” src=”http://www.htjs.net/shyl/yfjz_scripts.js”></script>，这样就存在了所有引用程序必须改动的问题。

2、相对地址写法：

比如，项目用有目录A，A目录存有子目录a1、a2，那么A目录又是YFJZ目录的子目录，那么，目录结构如下：

yfjz

|—-A

|—-a1

|—-a2

如果，yfjz_scripts.js文件在yfjz目录下，那么在A目录下文件引用写法如下：

而a1目录下文件引用写法如下：

如上，在js文件与目录间形成层次关系，相对路径应用，系统部署发布时不用担心域名及其发布目录的变化而带来的调整。同样，这样的编程方法带来的困惑是“目录层次不同而造成的引用编码差异”的问题。这种情况是，在单个js引用时就很明显，而在项目中出现多js引用、多人员分组开发时就会造成编码过程中的困惑。

3、动态引用js（css）方法：

由于基于浏览器（b/s）编程中受到安全规范协议的限定，js动态程序一般是不允许直接引用的，比如，在html页面中写入如下语句：

<script type="text/javascript">
       document.write('alert("aaaa");');
</script>

那么，浏览该页面是不会执行alert的提示功能的，只会在页面中打印出“alert("aaaa");”的字样。这就是所谓的安全限定，该alert语句是不允许执行的。
另外，在js文件中，也是不允许有包含其它js文件的做法。怎么说呢，就是说，js不能像php或jsp那样用“include”方法来引用其它js文件内编码。
由以上两点限制，对于js文件的管理就成了棘手问题，目前的一般做法就是需要了就引用，或者是不管是否需要“全部都引用”。

好了，现在开始说说动态引用的优势：
可实现js的统一管理，显现编码优雅；
可实现根据功能需要动态引用js，减少资源下载时间；
可以结合1、2方法的优点、同时能屏蔽彼此单独存在时的缺点；
可实现动态定制js函数，形成类似与php、jsp的动态开发方式，建立自己的js开发架构；

实现原理：绕过浏览器（Firefox、Ie等）安全协议

实现方法：
比如，一个js文件名为ademo.js，编辑内容如下：

(function () {
	var basePath  = "";
	for (var i = 0, scripts = document.getElementsByTagName("script"); i < scripts.length; i++)
        if (scripts[i].src.match("ademo.js")) {
            basePath = scripts[i].src.replace("ademo.js", "");
            break;
        }
    document.write('<'+'script type="text/javascript" src="'+basePath+'../../commons/js/util.js"></'+'script>');
    document.write('<'+'link href="'+basePath+'/Style.css" rel="stylesheet" type="text/css" />');

}) ();

比如，ademo.js文件放于yfjz目录下，发布服务器域名为localhost，那么，basePath变量的内容会为“http://localhost/yfjz”。

大家知道剩下该怎么做了吧，仅举一个例子，大家举一反三即可。