目錄
利用JS和CSS的覆盖特性来解决文件冲突问题_html/css_WEB-ITnose
随着项目规模的增大,协作开发也越来越长见,协作开发时间久了就会遇到一个恶心的文件冲突问题。
假设一个HTML文件引用了两个外部JS文件,而这两个外部JS文件你没有修改的权限,你只有HTML文件的修改权限,
两个外部JS文件都定义了window.onload事件。代码假设如下:
<script type="text/javascript" src="a.js"></script><script type="text/javascript" src="b.js"></script>
登入後複製
a.js的文件内容:
window.onload=function(){alert("这是a.js的");}
登入後複製
b.js的文件内容:
window.onload=function(){alert("这是b.js的");}
登入後複製
这样的话,在a.js定义的window.onload事件会被b.js定义的window.onload事件覆盖掉。
如果我们想a.js和b.js中的window.onload都能正常执行,该怎么办呢???
我们知道JS有这样的特性:后面定义的同名变量会覆盖掉前面定义的同名变量的值而不报错,还有可以自定义变量 其值为系统函数的引用。
得到的变量跟系统函数的功能一样。
好了,我们就利用JS的这个特性,有的人认为这是JS设计的Bug,至少在这个时候这个特性还是有点用处的。
我们新改的代码如下:
<pre name="code" class="html"><script type="text/javascript" src="a.js"></script><script type="text/javascript"></script>
登入後複製
<span style="font-family: Arial, Helvetica, sans-serif;">var aa=window.onload;//得到已经定义的</span><span style="font-family: Arial, Helvetica, sans-serif;">window.onload事件处理程序的句柄或者说引用 这里面保存了a.js定义的</span><span style="font-family: Arial, Helvetica, sans-serif;">window.onload事件的逻辑操作。</span>
登入後複製
<span style="font-family: Arial, Helvetica, sans-serif;">window.onload=null;//把</span><span style="font-family: Arial, Helvetica, sans-serif;">window.onload的事件处理程序注销,这样系统就不会再执行</span><span style="font-family: Arial, Helvetica, sans-serif;">window.onload函数了。</span>
登入後複製
登入後複製
<span style="font-family: Arial, Helvetica, sans-serif;"></span>
登入後複製
<script type="text/javascript" src="b.js"></script><script type="text/javascript"></script>
登入後複製
登入後複製
登入後複製
<pre name="code" class="html"><span style="font-family: Arial, Helvetica, sans-serif;">var bb=window.onload;//得到已经定义的</span><span style="font-family: Arial, Helvetica, sans-serif;">window.onload事件处理程序的句柄或者说引用 这里面保存了b.js定义的</span><span style="font-family: Arial, Helvetica, sans-serif;">window.onload事件的逻辑操作。</span>
登入後複製
<span style="font-family: Arial, Helvetica, sans-serif;">window.onload=null;//把</span><span style="font-family: Arial, Helvetica, sans-serif;">window.onload的事件处理程序注销,这样系统就不会再执行</span><span style="font-family: Arial, Helvetica, sans-serif;">window.onload函数了。</span>
登入後複製
登入後複製
登入後複製
登入後複製
window.onload=function(){aa();bb();//重新注册<span style="font-family: Arial, Helvetica, sans-serif;">window.onload事件,执行的代码逻辑为a.js和b.js中定义的代码操作。</span>}
登入後複製
这样就顺利解决了代码文件的冲突问题。是不是觉得很新奇呢?
CSS文件样式冲突也可以使用这种方法解决。
假设你的HTML加载了a.css b.css。 b.css中的某一个样式规则覆盖了a.css中的样式。而你只有修改a.css的权限,没有修改b.css的权限
而且css文件加载顺序必须是先a.css然后才b.css .这时候该怎么办呢??
不要慌!这时候你可以按照上面JS文件冲突的思路解决这个问题。
因为CSS也有这样的特性:后面定义的规则覆盖前面定义的同名规则。
这时候你只需要在b.css后面新建一个style 里面写上你想要覆盖的CSS规则 里面写新的样式规则即可。
很激动有木有?
今天就先到这里吧。
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前
By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
R.E.P.O.保存文件位置:在哪里以及如何保護它?
3 週前
By DDD

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

我如何使用html5&lt; time&gt; 元素以語義表示日期和時間?
