需要复制代码,而是实例化几个对象并将代码保存在一个地方

时间:2013-02-08 11:59:49

标签: javascript html oop

我开发了一些javascript,它从一个数组生成一个动态表,然后允许用户编辑数据。这很完美。

现在我想在同一个HTML页面上使用此代码3次。目前,它依赖于两个变量:元数据,描述标题格式,只读,所有三种情况都相同,以及实际保存表数据的“数据”。

不是每个实例都有三个代码副本,我认为最好有一个对象保持内部的一切,只需要'setData'和'getData'方法。

现有代码动态创建onclick事件 - 如何使这些事件引用对象函数,而不是全局函数? (也就是说,目前有'RemoveRow(index)'这样的函数,我假设它们是'obj.RemoveRow(index)'。我很乐意在jquery中这样做但是唉,我不知道要传入的rowindex然后,除非有人有解决方案。也许将它存储在DOM内部并以某种方式访问​​它以确定被点击的行?

是否可以将引用传递给数组?如果对象可以操作传入的数组而不是使副本工作然后调用者必须将其复制回自己的数组,那会好得多。

1 个答案:

答案 0 :(得分:0)

所以这是非常原始的代码,只有多个选项中的一个,但也许你明白了这个想法:

创建处理单个表的对象

function TableControl () {
    // dom elements
    this.table = null;
    this.rows = null;
    // values
    this.id = null;
    // create new row
    this.insertRow = function() {
        // some logic
        this.table.append( 'new row goes here' );
    },
    // load table object and rows and stuff
    this._initiate = function() {
        //create object with all passed arguments
        var args = arguments[0] || {};

        // set internal values
        this.id = args.id;

        // get dom elements
        this.table = $('#' + this.id);
        this.rows = this.table.find('tr');
    },
    this._initiate( arguments[0] );
}

使用每个表的id

创建该对象的实例
var table_1 = new TableConrol({ id: 'table_1' });
var table_2 = new TableConrol({ id: 'table_2' });
var table_3 = new TableConrol({ id: 'table_3' });

所以每个表只处理它自己的“范围”内的东西,比如添加新行,例如:

table_1.insertRow();