Question

我正在将我的JS意大利面条代码重构为更有用且更混乱的东西。

我想摆脱我拥有的意大利面代码。

此刻，我有许多可用于gridster小部件的功能和事件：

function applyJsonToGrid()
{
//some code here
}

function insertWidgetToGrid()
{
//some code here
}

$(document).on("click", ".add", function () {
insertWidgetToGrid();
}

// and a lot of different code written in this way

我发现了一个主意：example

在尝试创建自己的模块时，我已经做到了：

var gridsterModule = {

    settings: {
        gridElement: $('.gridster ul li'),
        gridList: $('.gridster ul')
    },

    init: function () {
        this.simpleTest();
    },


    simpleTest: function () {
        console.log(this.settings.gridList)
    }
}

之后，我尝试测试模块是否设置正确：

 $(function () {
        gridsterModule.init();
    });

但是在控制台中，我得到的是空对象，而不是$（'。gridster ul'）。我是在做错事还是我对这个想法不正确？我的html中有.gridster ul元素，如果我从控制台调用$（'。gridster ul'），我会得到我需要的值。

任何有关如何使用模块以及任何其他改进我的JS代码的方法的解释都是很棒的！

Answer 1

可能您需要设置初始值，而不是gridList: $('.gridster ul')。

尝试

var gridsterModule = {

    settings: {
        gridElement: null,
        gridList: null
    },

    init: function () {
        this.settings.gridElement = $('.gridster ul li');
        this.settings.gridList = $('.gridster ul');

        this.simpleTest();
    },


    simpleTest: function () {
        console.log(this.settings.gridList)
    }
}

如何使用模块模式或任何其他方式来改善代码？

1 个答案: