javascript 函数冲突或 css 选择冲突

Question

我有一个团队在网页上工作，其中包含很多 javascript 库和很多类。这些库中的一两个或我们开发人员的代码很可能具有名称相似的函数或具有相同选择器和类的 css。像这样:

Javascript:

<script src="/src1"> ....  function func1() {} ......</script>
              .
              .
              .
<script src="/src2"> ........ function func1() {} ...</script>

或CSS:

.content {... background-color:#fff; ...}

和另一个 .content{... background-color:red; ...

我实际上已经找到了一些 css 解决方案，但我想知道是否有任何方法或 javascript 或 php 库可以用来解析 javascript 文件以更改 javascript 函数并将名称调用为唯一名称？

Answer 1

对于 css，包装类(在更高的 dom 级别)或前缀类名(例如 .my-content 和 .your-content)会做这份工作。

可以使用 sass 或 less 轻松实现包装类。您无需更改现有代码，只需将其包装即可。但不利的一面是，此时您将无法使用两个 .content 类，因为您需要包装类。

对于js有很多解决方案。根据您的元素，它们或多或少有用。您可以将一些 js 包装为 jQuery 插件或 npm 模块，仅举几例。

但我想需要一个更简单的解决方案。

为您的 js 代码命名空间是最简单的方法。

var yourFirstNamespace = {

    foo: func1() {
    },

    bar: func2() {
    }
};

var yourSecondNamespace = {

    foo: func1() {
    },

    bar: func2() {
    }
};

...

yourFirstNamespace.func1();
yourSecondNamespace.func1();