Question

所以我设置了我的第一个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'
        });
});

非常感谢任何建议！

Answer 1

更改以下代码......

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

你不能在字符串上调用append。我已更新您的JSFiddle。

Answer 2

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

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

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

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

遇到JS对象文字设置问题

2 个答案: