使用对象构造函数管理 cssClasses 时出错答案

【问题标题】：Error using object constructor to manage cssClasses使用对象构造函数管理 cssClasses 时出错
【发布时间】：2012-06-22 22:10:01
【问题描述】：

我写了一个对象来使用 javascript 管理 css 类选择器。

使用文字对象正在工作，但没有使用另一种 OOP 方式。

对象字面量

var className = {
    getList : function(element,cssClass){
        return element.className.split(' ');
    },
    has : function(element,cssClass){
        var classList=element.className.toLowerCase().split(' ');
        return classList.has(cssClass.toLowerCase());
    },
    add : function(element,cssClass){
        if(className.has(element,cssClass)==false){
            element.className+=' '+cssClass;
        }
    },
    remove : function(element,cssClass){

        var index = element.className.toLowerCase().split(' ').indexOf(cssClass.toLowerCase());

        if( index > -1 ){ //found
            var classList=element.className.split(' ');

            classList.splice(index,1);
            element.className=classList.join(' ');
        }
    }
}

构造对象。（不工作）

var cssClass = new function(element){
    var that=this;

    this.getList = function(){
        return element.className.split(' ');
    }

    this.has = function(className){
        var classList=element.className.toLowerCase().split(' ');
        return (classList.indexOf(className.toLowerCase())>-1);
    }

    this.add = function(className){
        if(that.has(className)==false){
            element.className = className+' '+element.className;
        }
    }

    this.remove = function(className){

        var index = element.className.toLowerCase().split(' ').indexOf(className.toLowerCase());

        if( index > -1 ){ //found
            var classList=element.className.split(' ');

            classList.splice(index,1);
            element.className=classList.join(' ');
        }
    }
}

我收到此错误：

cssClass(d1).add('class1');

行：2 消息：“'[object Object]' 不是函数（评估 'cssClass(d1)'）” sourceId: 4600193304

额外问题：这是使用 javascript 管理 css 类的最佳方式吗？有标准的api吗？我应该使用分离的普通函数来写这个吗？

【问题讨论】：

标签： javascript oop constructor object-literal

【解决方案1】：

您需要在开始附近从new function 中删除new，因为您正在做的是创建一个构造函数，然后立即调用它。相反，您需要在将要使用的元素传递给构造函数时调用它。例如

var cssClass = function(element) {
...
}

然后：

new cssClass(d1).add('class1');

这是一个 JSFiddle：http://jsfiddle.net/55jkr/1/

要回答额外的问题，处理 CSS 类的最佳方法是使用标准库，例如 jQuery，因为这些库将在初始实施期间为您节省时间，并且已经过测试。如果这不是一个选项，那么你的方法很好。

【讨论】：