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或更少的代码轻松实现。您不需要更改现有代码，只需包装它即可。但缺点是，您不能同时使用两个.content类，因为您需要包装器类。

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

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

对js代码进行命名空间是最简单的方法。

var yourFirstNamespace = {

    foo: func1() {
    },

    bar: func2() {
    }
};

var yourSecondNamespace = {

    foo: func1() {
    },

    bar: func2() {
    }
};

...

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

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