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

引自: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”。

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

Js（Css）动态引用方法–Js(css)的统一管理相关推荐

html动态加载js方法,原生JS实现动态加载js文件并在加载成功后执行回调函数的方法...
本文实例讲述了原生JS实现动态加载js文件并在加载成功后执行回调函数的方法.分享给大家供大家参考,具体如下: 有的时候需要动态加载一个javascript文件,并且在加载成功后执行回调函数(例如文件中 ...
html 外部调用css文件路径,CSS编程的外部CSS文件引用方法是什么
CSS编程的外部CSS文件引用方法是什么 CSS外部引用使用了外接的CSS文件,一般的浏览器都带有缓存功能,所以用户不用每次都下载此CSS文件. 外部引用相对于内部引用和内联引用来说是高效的`是节省宽 ...
HTML CSS 外部样式引用方法
HTML CSS 外部样式引用方法 1.在Visual Studio Code创建一个后缀名为 .html 的文件并输入骨架标签 . 2.在Visual Studio Code创建一个后缀名为 .cs ...
JS练习 -- 动态加载JS
文章目录导读通过CDN网站获取js的url url.script.src XHR加载.script.text 参考资料导读日期:2022-1-18 分析网页时,经常遇到一些库未加载的情况,比如 ...
js插件动态加载js、css解决方案
最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的 ...
微信js sdk动态引用
一般情况下,微信的js-sdk只需要直接引用script即可 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js&qu ...
js在html中拆分字符串,js中的split方法 js用split()取字符串
本来想通过静态HTML传递参数,动态读取url0和url字段,试了一下没成功.定义和用法 split() 方法用于把一个字符串分割成字符串数组. 语法 stringObject.split(separ ...
html调用外部js文件乱码,引用的js文件有中文时乱码
Javascript 代码比较多时,通常把代码保存到一个独立的 js 文件中,这样不但利于减少 html 文件长度好布局修改,而且利于搜索引擎蜘蛛抓取.把 Javascript 代码放到 js 文件后 ...
js jq 动态加载js文件
1.jquery方法 $.getScript("./test.js"); //加载js文件 $.getScript("./test.js",function() ...

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

Js（Css）动态引用方法–Js(css)的统一管理相关推荐

最新文章

热门文章