【问题标题】:Advice needed... Javascript OOP/namespacing需要建议... Javascript OOP/命名空间
【发布时间】:2010-08-23 23:08:15
【问题描述】:

现在我觉得我需要提高我的 javascript 技能,因为我已经看到我想要实现的东西会变得相当复杂。我现在已经对相同的代码片段进行了 4 次迭代,但我仍然不确定这是否是最好的方法。

任务:
网页的用户可以向网页添加不同的表单,我称之为模块。每个表单提供不同的用户输入,需要以不同的方式处理。可以根据用户的喜好将相同类型的表单/模块添加到表单列表中。

我目前的解决方案:
为了使代码更具可读性和独立的功能,我使用命名空间对象。第一个对象包含一般任务,并通过一个包含多个数组的映射来引用各个表单,其中每个数组包含 表单的 id对对象的引用,其中包含所有特别是对于那种形式需要执行的功能。


结构看起来或多或少类似于:

var module_handler = {

    _map  : [],    /* Map {reference_to_obj, id} */

    init: function(){            
        var module = example_module; /* Predefined for this example */
        this.create(module);
    },

    create: function(module) {
        //Store reference to obj id in map
        this._map.push([module,id = this.createID()]);
        module.create(id);
    },

    createID: function(id) {
        //Recursive function to find an available id
    },

    remove: function(id) {

        //Remove from map
        var idx = this._map.indexOf(id);
        if(idx!=-1) this._map.splice(idx, 1);

        //Remove from DOM
        $('#'+id+'').remove();
    }
}

var example_module = {

    create: function(id) {
        //Insert html
        $('#'+id+' > .module_edit_inner').replaceWith("<some html>");
    }
}

现在是我的问题 ;-)
需要地图的想法吗?

我的意思是:难道没有更优雅的东西吗:

var moduleXYZ = new example_module(id)

它复制对象并仅引用该形式....更合乎逻辑并提高速度的东西? 主要问题是,如果我调用例如“example_module.create()”或稍后在任何其他函数上调用,我现在每次都需要遍历 DOM。使用这种结构,我无法引用类似的形式像“这个”这样的东西???


您在这一点上看到任何改进吗???这对我很有帮助!!!真的,我现在看着我要放在上面的所有东西,真的很害怕走错路;-)

谢谢!

【问题讨论】:

    标签: javascript namespaces object


    【解决方案1】:

    我认为您正在寻找原型:

    =========

    function exampleModule(id)
    {
        this.id = id;
    }
    
    
    exampleModule.prototype.create = function()
    {
    
    }
    

    =========

    var module1 = new exampleModule(123);
    module1.create();
    
    var module2 = new exampleModule(456);
    module2.create();
    

    【讨论】:

    • 嗯,谢谢...我认为这是正确的方法。现在我必须弄清楚如何将它应用于我已经拥有的结构;-)
    • 我建议将每个类分离到一个单独的 JS 文件中。将其命名为类的名称。在这一点上,您已经非常接近 Java/OOP。你只需要小心保留“这个”。 Prototype JS 库对于这种类型的 OOP JS 编程非常有用。
    猜你喜欢
    • 2011-08-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-02-21
    • 1970-01-01
    • 2019-02-22
    • 1970-01-01
    相关资源
    最近更新 更多