第一次实现模块模式变量是未定义的

Question

这是我的代码

    var s;
var AddEvent =  {
    settings : {
        saveButton : $('#uploadfiles1'),
        cancelSpeech :  $('.cancelSpeech'),
        datePicker : $(".datepicker"),
        eventName : $('input[name=eventname]'),
        eventDate : $('input[name=eventdate]')
    },
    init:function(s){
        s = this.settings;
        this.BindEvents();
        $('.Wallpapers').addClass('active');
        $('input, textarea').placeholder();
    },
    BindEvents:function(){
        this.CancelButton();
        this.DatePicker();
       // this.SaveButton();
        $('input[type=text],textarea').on('keyup change',function(){
            AddEvent.FieldsCheck(); 
        });
    },
    CancelButton: function()
    {
        s.cancelSpeech.on('click',function(){
            var referrer =  document.referrer;
            window.location = referrer;
        });
    },
    DatePicker :function()
    {
        s.datePicker.datepicker({
            //defaultDate: +7,
            showOtherMonths: true,
            autoSize: true,
            //appendText: '(dd-mm-yyyy)',
            dateFormat: 'dd/mm/yy'
        });
    },
    SaveButton: function()
    {
        this.ClearFields();
    },
    FieldsCheck: function()
    {
        alert(s.eventName.attr('name'));
        if(s.eventName.val()!='' && s.eventDate.val() !='' && $('textarea').val()!='')
        {
            s.saveButton.removeAttr('disabled').removeClass('disabled');
        }
        else
            s.saveButton.attr('disabled','disabled').addClass('disabled');
    },
    ClearFields:function()
    {
        $('input,textarea').val('');
        this.FieldsCheck();
    }
};
$(function(){
    AddEvent.init(s);
});

我正在实现这个例子http://css-tricks.com/how-do-you-structure-javascript-the-module-pattern-edition/

但每次当我在此行输入我的输入字段时，我都会在警报中得到未定义

alert(s.eventName.attr('name'));

请告诉我我做错了什么我试图搜索，但无法找到任何有用的东西。

编辑：在这里，我创造了一个小小的jsfiddle，我得到了

TypeError: this.settings is undefined
[Break On This Error]   

console.log(this.settings.eventName.attr('id'));

谢谢

Answer 1

你的问题在这里：

var s;
AddEvent.init(s);

有没有办法在此之后有s定义。

一个解决方案是简单地不传递s （并且在函数的参数中没有声明它）：

init:function(s){
    s = this.settings;
...
AddEvent.init();

但这会让变量污染全局命名空间。

如果您希望从所有功能访问您的settings ，您可以嵌入一个闭包：

var AddEvent =  (function(){
    var settings;
    return {
        init:function(){
                settings = {
                        saveButton : $('#uploadfiles1'),
                        cancelSpeech :  $('.cancelSpeech'),
                        datePicker : $(".datepicker"),
                        eventName : $('input[name=eventname]'),
                        eventDate : $('input[name=eventdate]')
                };
            this.BindEvents();
            $('.Wallpapers').addClass('active');
            $('input, textarea').placeholder();
        },
        BindEvents:function(){
            this.CancelButton();
            this.DatePicker();
           // this.SaveButton();
            $('input[type=text],textarea').on('keyup change',function(){
                AddEvent.FieldsCheck(); 
            });
        },
        CancelButton: function()
        {
            settings.cancelSpeech.on('click',function(){
                var referrer =  document.referrer;
                window.location = referrer;
            });
        },
        DatePicker :function()
        {
            settings.datePicker.datepicker({
                //defaultDate: +7,
                showOtherMonths: true,
                autoSize: true,
                //appendText: '(dd-mm-yyyy)',
                dateFormat: 'dd/mm/yy'
            });
        },
        SaveButton: function()
        {
            this.ClearFields();
        },
        FieldsCheck: function()
        {
            alert(settings.eventName.attr('name'));
            if(settings.eventName.val()!='' && settings.eventDate.val() !='' && $('textarea').val()!='')
            {
                settings.saveButton.removeAttr('disabled').removeClass('disabled');
            }
            else
                settings.saveButton.attr('disabled','disabled').addClass('disabled');
        },
        ClearFields:function()
        {
            $('input,textarea').val('');
            this.FieldsCheck();
        }
    }
})();

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