javascript 函数冲突或 css 选择冲突答案

【问题标题】：javascript function conflict or css select conflictjavascript 函数冲突或 css 选择冲突
【发布时间】：2015-09-01 02:55:37
【问题描述】：

我有一个团队在一个网页上工作，其中包含很多 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 函数并将名称调用为唯一名称？

【问题讨论】：

标签： javascript php css web conflict

【解决方案1】：

对于 css，包装类（在更高的 dom 级别上）或前缀类名（例如 .my-content 和 .your-content）可以完成这项工作。

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

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

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

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

var yourFirstNamespace = {

    foo: func1() {
    },

    bar: func2() {
    }
};

var yourSecondNamespace = {

    foo: func1() {
    },

    bar: func2() {
    }
};

...

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

【讨论】：

【解决方案2】：

您可以命名您的 javascript 文件。

假设您有两个名为 file1.js 和 file2.js 的 javascript 文件。

在 file1.js 中：

var file1 = {
   func1: function func1(){},//and other methods 
};

在 file2.js 中：

var file2 = {
   func1: function func1(){},
};

现在您可以使用 file1.func1() 和 file2.func1() 调用这些方法。

一个具有相同类的多个 css 文件。那是行不通的。只需更改类名或为其添加另一个名称，如 file1.css

class="file1 abc"

在文件 2 中可以添加

class="file2 abc"

【讨论】：