JS と CSS のオーバーレイ機能を使用してファイルの競合を解決する_html/css_WEB-ITnose

プロジェクトの規模が大きくなるにつれて、共同開発がますます一般的になります。共同開発を長期間続けると、ファイルの競合の問題が発生するようになります。

HTML ファイルが 2 つの外部 JS ファイルを参照しており、これら 2 つの外部 JS ファイルを変更する権限がない場合、HTML ファイルを変更する権限しかありません。

両方の外部 JS ファイルが window.onload イベントを定義しているとします。 。コードの前提条件は次のとおりです:

如如

<script type="text/javascript" src="a.js"></script><script type="text/javascript" src="b.js"></script>

A.js ファイルの内容:

B.JS ファイルの内容:

b.jsで定義されているwindow.onloadイベントは上書きされました。

a.js と b.js の両方で window.onload を正常に実行したい場合はどうすればよいでしょうか? ? ?

JS にはそのような機能があることがわかっています。後で定義された同じ名前の変数は、エラーを報告せずに、以前に定義された同じ名前の変数の値を上書きします。また、値がシステムへの参照である変数をカスタマイズすることもできます。機能。

取得された変数はシステム関数と同じ機能を持ちます。

それでは、JS のこの機能を活用しましょう。これは JS 設計のバグだと考える人もいますが、少なくとも現時点では、この機能はまだ多少は役に立ちます。

新しく変更されたコードは次のとおりです:

window.onload=function(){alert("这是a.js的");}

window.onload=function(){alert("这是b.js的");} 

<pre name="code" class="html"><script type="text/javascript" src="a.js"></script><script type="text/javascript" >

<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;"></script></span>

<script type="text/javascript" src="b.js"></script><script type="text/javascript" >

<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>

これにより、コード ファイルの競合問題が正常に解決されます。斬新だと思いますか？

CSS ファイル スタイルの競合も、この方法を使用して解決できます。

HTML が a.css b.css をロードするとします。 b.css の特定のスタイル ルールは、a.css のスタイルをオーバーライドします。そして、a.css を変更する権限だけがあり、b.css は変更できません

そして、css ファイルの読み込み順序は、最初に a.css、次に b.css である必要があります。このとき、どうすればよいでしょうか。 ?

パニックにならないでください！現時点では、上記の JS ファイル競合の考え方に従ってこの問題を解決できます。

CSS にも次の機能があるため、後で定義されたルールは、同じ名前で以前に定義されたルールをオーバーライドします。

現時点では、b.css の背後に新しいスタイルを作成し、オーバーライドする CSS ルールを記述し、その中に新しいスタイル ルールを記述するだけです。

興奮していますね?

今日はここまでにしましょう。

🎜🎜🎜