在 JS 对象文字设置时遇到问题

Having trouble with JS object literal setup

本文关键字：遇到 问题 设置 文字 JS 对象      更新时间：2023-09-26

所以我设置了我的第一个JS设计模式 - 但我遇到了一个问题。

这是我在小提琴上的代码：http://jsfiddle.net/jrutter/CtMNX/

var emailSignup = {
'config': {
    // Configurable Options
    'container': $('#email-signup'),
    'emailButton': $('#email-submit'),
    'emailInput': $('#email-input'),
    'brontoDirectAddURL': 'URL',
    'brontoListID': '0bbc03ec000000000000000000000003287b',
},
'init': function (config) {
    // stays the same
    // provide for custom configuration via init()
    if (config && typeof (config) == 'object') {
        $.extend(emailSignup.config, config);
    }
        // Create and/or cache some DOM elements
       emailSignup.$container = $(emailSignup.config.container);
emailSignup.$button = $(emailSignup.config.emailButton);
emailSignup.$input = $(emailSignup.config.emailInput);
emailSignup.$brontoURL = emailSignup.config.brontoDirectAddURL;
emailSignup.$brontoList = emailSignup.config.brontoListID;
    // Add email track to drop image pixel into for submission
    emailSignup.$container.append('<div class="email-error"></div>');
    emailSignup.$container.append('<div class="email-track"></div>');
    // Call getEmaile
    emailSignup.getEmail(emailSignup.$button, emailSignup.$input);
    // make a note that the initialization is complete
    emailSignup.initialized = true;
},
'getEmail': function ($button, $input) {
    // click event
    emailSignup.$button.click(function () {
        // get the val
        var $emailVal = $(emailSignup.$input).val();
        // Call validateEmail
        console.log($emailVal);
        emailSignup.validateEmail($emailVal);
        return false;
    });
},
'validateEmail': function ($emailVal) {
    var $emailRegEx = /^(['w-'.]+@(['w-]+'.)+['w-]{2,4})?$/;
    //console.log($emailVal);
    if ($emailVal == '') {
        $(".email-error").html('<p>You forgot to enter an email address.</p>');
    } else if (!$emailRegEx.test($emailVal)) {
        $(".email-error").html('<p>Please enter a valid email address.</p>');
    } else {
        $(".email-error").hide();
        emailSignup.submitEmail($emailVal);
    }

},
'submitEmail': function ($emailVal) {
    $(".email-track").html('<img src=' + emailSignup.$brontoURL+'&email='+$emailVal+'&list1=' + emailSignup.$brontoList + '" width="0" height="0" border="0" alt=""/>');
},

};

它是一个通过 bronto 将订阅者添加到电子邮件列表的功能 - 当脚本包含在页面上并且页面上也设置了 init 函数时，它完美运行。但是当我将脚本包含在共享标头中并尝试从文档就绪中触发函数时，它似乎不起作用。

另外，如果我尝试传入一个"容器" - 那也会破坏脚本。不知道我做错了什么？但是如果我传入 URL - 那确实有效！

$(function () {
     emailSignup.init({
       'brontoDirectAddURL':'URL','container':'#email-signup'
        });
});

任何建议将不胜感激！

更改以下代码...

emailSignup.$container = emailSignup.config.container;
emailSignup.$button = emailSignup.config.emailButton;
emailSignup.$input = emailSignup.config.emailInput;
emailSignup.$brontoURL = emailSignup.config.brontoDirectAddURL;
emailSignup.$brontoList = emailSignup.config.brontoListID;

进入以下...

// Create and/or cache some DOM elements
emailSignup.$container = $(emailSignup.config.container);
emailSignup.$button = $(emailSignup.config.emailButton);
emailSignup.$input = $(emailSignup.config.emailInput);
emailSignup.$brontoURL = $(emailSignup.config.brontoDirectAddURL);
emailSignup.$brontoList = $(emailSignup.config.brontoListID);
// Add email track to drop image pixel into for submission
emailSignup.$container.append('<div class="email-error"></div>');
emailSignup.$container.append('<div class="email-track"></div>');

不能对字符串调用追加。我已经更新了你的JSFiddle。

默认配置对象包含 jQuery 集合。但是，您只需将字符串"#email-signup"作为container传递，而不是$("#email-signup")。这就是错误的来源。因此，您的初始呼叫应该是：

$(function () {
    emailSignup.init({
        'brontoDirectAddURL':'URL','container': $('#email-signup')
    });
});

请注意，由于您的初始模块包含一些 jQuery 调用，因此您还需要将整个emailSignup混乱包装到一个$(document).ready()中。

您可以考虑将整个事情重新配置为jQuery插件。

相关文章：