Use the overlay feature of JS and CSS to resolve file conflicts_html/css_WEB-ITnose

As the scale of projects increases, collaborative development becomes more and more common. After a long time of collaborative development, you will encounter a disgusting file conflict problem.

Suppose an HTML file references two external JS files, and you do not have permission to modify these two external JS files. You only have permission to modify the HTML file.

Two external JS files The window.onload event is defined. The code assumptions are as follows:

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

File content of a.js:

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

File content of b.js:

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

In this case, the window.onload event defined in a.js will be overwritten by the window.onload event defined in b.js.

What should we do if we want window.onload in a.js and b.js to execute normally? ? ?

We know that JS has such a feature: a variable with the same name defined later will overwrite the value of a variable with the same name defined earlier without reporting an error. You can also customize variables whose values ​​are references to system functions.

The obtained variables have the same functions as the system functions.

Okay, let’s take advantage of this feature of JS. Some people think this is a bug in JS design. At least at this time, this feature is still somewhat useful.

Our newly modified code is as follows:

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

This successfully solves the conflict problem of code files. Do you find it novel?

CSS file style conflicts can also be resolved using this method.

Suppose your HTML loads a.css b.css. A certain style rule in b.css overrides the style in a.css. And you only have the permission to modify a.css, but not b.css

And the loading order of css files must be a.css first and then b.css. What should I do at this time? ?

Don’t panic! At this time, you can solve this problem according to the above JS file conflict ideas.

Because CSS also has this feature: rules defined later override previously defined rules with the same name.

At this time, you only need to create a new style behind b.css, write the CSS rules you want to override, and write new style rules inside.

Excited, aren’t you?

Let’s stop here today.