AngularJs与EasyUI的结合使用（二）————Js冲突使用及解决办法

本文链接：https://blog.youkuaiyun.com/zhangxu1994ye/article/details/80974419

上一篇讲了关于本项目的环境搭建，这一篇，我会将项目的一些需要注意的地方给大家分享一下。尤其是这个 JavaScript 加载冲突问题。

上一篇有说到，我是为了在 AngularJs 的项目中导入 EasyUI，从而使用 EasyUI 中非常方便好用的 numberspinner

我们还是老套路，先上代码

<input id="box1" required="required" style="width:80px;">

$(function () {
    $('#box1').numberspinner({
        value: 10,
        increment: 1,
        min: 10,
        max: 200
    });
});

这两段代码就是我们的数字微调器了，Js 部分怎么引用都可以，导到哪里都可以使用。在本项目中，我用到了 AngularJs 中的 ng-view 模块。也就是模板控件，这一用，就掉坑里了。

如果大家也是直接调用后发现，怎么回事，为啥不好使。那么这里我就解决你的疑问。

在 HTML 文件发送到浏览器解析时，浏览器会在第一时间将 JavaScript 部分编译一遍，也就是我们所说的“预编译”。这里曾经深度接触过 JDBC 的小伙伴们可能会哦的一声。所谓“预编译”，顾名思义，就是在加载之前，先进行一次编译。而我们的两位小主角 AngularJs 和 EasyUI 从基层理念和历史上来讲，都是 JavaScript 的一种延伸、拓展或者说是广义上的封装。既然都会预编译，那么难免会有冲突，先导入的，会先编译一遍，第二个导入的，又会编译一遍，此时，如果后导入的部分，有可以覆盖前一个部分的方法、参数、常量等等。就会导致前一个导入的 Js 框架失效，甚至报错。

不过还好，AngularJs 和 EasyUI 并没有这种报错的情况。但是，如果你将 EasyUI 的代码插入到 HTML 中一起编译的时候，一定要注意，写在 window.onload 中。否则，就会失效，具体原因，可以解读一下关于页面加载 JavaScript 代码的时候解析过程。

我之所以说 ng-view 是坑，就是因为这个模块，你写在 window.onload 中也没有用。因为作用域的问题，具体作用域是什么，请看我的另外一篇文章关于AngularJs中 ng-repeat 的作用域问题。所以，我们直接将 Script 代码写在 ng-view 跳转的子 HTML 文件上就可以了，引用模式也可以。

以上就是我对 AngularJs 与 EasyUI的结合使用中 Js冲突使用的问题的一些想法和见解。可能写的有点乱，希望大家谅解，紫色的字为自己对冲突问题产生的理解。如果本文中，哪里说得有缺陷和错误的地方，希望大家可以帮我指出来，谢谢。

stay hungry! stay foolish!