javascript function conflict или css select conflict

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) выполнили бы эту работу.

Класс обертки можно легко получить с помощью сассы или меньше. вам не нужно менять существующий код, вы можете просто обернуть его. Но с другой стороны, вы не сможете использовать два класса .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.

Предположим, у вас есть два файла javascript с именами file1.js и file2.js.

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