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"

javascript函数冲突或css选择冲突

2 个答案: