javascript函数冲突或css选择冲突

我有一个团队在一个网页上工作，其中包含很多JavaScript库和许多类。很可能这些库中的一个或两个或我们的开发人员代码具有相似名称的功能，或者与CSS具有相同的选择器和类。像这样：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函数并将名称调用为一个唯一的名称？

来源

2015-06-16 Navid Veradi

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

一个包装类可以容易地与sass或更少。你不需要改变你现有的代码，你可以包装它。但缺点是，由于您需要包装类，因此当时您将无法使用两个.content类。

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

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

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

var yourFirstNamespace = { 

    foo: func1() { 
    }, 

    bar: func2() { 
    } 
}; 

var yourSecondNamespace = { 

    foo: func1() { 
    }, 

    bar: func2() { 
    } 
}; 

... 

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

来源

2015-06-16 10:42:22 m4lt3

您可以命名空间您的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"

来源

2015-06-16 10:48:53 Sid

javascript函数冲突或css选择冲突

回答

相关问题