【问题标题】:Need to duplicate code, but rather instantiate several objects and keep the code in one place需要复制代码,而是实例化多个对象并将代码保存在一个地方
【发布时间】:2013-02-08 11:59:48
【问题描述】:

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

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

与其为每个实例设置三个代码副本,我认为最好有一个对象将所有内容保存在内部,并且只需具有“setData”和“getData”方法。

现有代码动态创建 onclick 事件 - 如何让这些事件引用对象函数,而不是全局函数? (即,目前有像'RemoveRow(index)'这样的函数,我假设它是'obj.RemoveRow(index)'。我很想在jquery中这样做,但是唉,我不知道要传入的rowindex那么,除非有人有解决方案。也许将其存储在 DOM 中的某个位置并以某种方式访问​​它以确定被单击的行?

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

【问题讨论】:

    标签: javascript html oop


    【解决方案1】:

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

    创建一个处理单个表的对象

    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();
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-12-27
      • 2015-10-16
      相关资源
      最近更新 更多