javascript函数冲突或css选择冲突

Question

I have a team of people working on a webpage which has lots of javascript libraries included in it and lots of classes . It's quite possible that one or two of these libraries or our developer's codes have functions with similar names or with the css to have the same selectors and classes. like this :

Javascript :

<script src="/src1"> ....  function func1() {} ......</script>
              .
              .
              .
<script src="/src2"> ........ function func1() {} ...</script>

Or css :

.content {... background-color:#fff; ...}

and another .content{... background-color:red; ...}

I have actually found some solutions for css but I was wondering is there any way or javascript or php library that I could use to parse javascript files to change javascript functions and calls names to a unique name?

Answer 1

For css a wrapper class (on a higher dom level) or a prefixed-class-name (eg. .my-content and .your-content) would do the job.

A wrapper class can be easily achived with sass or less. you do not need to change your existing code, you can just wrap it. But on the downside, you will not be able to use two .content classes at the time, since you need the wrapper class.

For js there are many solutions. Depending on your project they are more or less usefull. You could wrap some of your js as a jQuery Plugins or npm modules, to name only a few.

But I guess would need a simpler solution.

Namespacing your js code is the easiest way.

var yourFirstNamespace = {

    foo: func1() {
    },

    bar: func2() {
    }
};

var yourSecondNamespace = {

    foo: func1() {
    },

    bar: func2() {
    }
};

...

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