尋找關於如何構建javascripts

的建議我在尋找反饋，關於如何更好地構建我的java腳本的建議。我試圖將js代碼移入他們自己的文件中。它的工作原理，但我不知道這是否是下面的示例腳本的首選方式？揭示原型模式是否過分誇張，或者不是其他原因的好選擇？尋找關於如何構建javascripts

Portalen.Archive = function() { 
}; 

Portalen.Archive.prototype = function() { 

var options = { 
    minDate: new Date(2012, 0, 1), 
    changeMonth: true, 
    changeYear: true 
}; 

var start = function() { 

    $("#StartDate").datepicker(options); 
    $("#EndDate").datepicker(options); 

    $("#searchButton").on("click", function() { 
     search(); 
    }); 
}; 

var search = function() { 
    $.ajax({ 
     url: "/Archive/Index", 
     type: "post", 
     data: $("#searchForm").serialize(), 
     success: function (response) { 
      $("#resultContainer").html(response); 
     } 
    }); 
}; 

return { 
    start: start 
};

}（）;

並在視圖我使用這樣的

<script type="text/javascript" src="~/Scripts/app/portalen-archive.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     var s = new Portalen.Archive(); 
     s.start(); 
    }) 
</script>

來源

2012-10-26 Pelle

JavaScript不是Java，所有實體都應該用類表示。因此，只有當我們需要創建多個當前類型的對象時，我們纔在JavaScript中使用類/原型。因此，我認爲在這裏創建課堂並不是必要的。但是，儘管您可以將常規JavaScript對象用作名稱空間。另外，我會將這個方法命名爲init而不是start，但這取決於你自己。

在模塊：

var Portalen = (function($, window, app) { 

    app.Archive = {} || app.Archive; 

    var options = app.Archive.options = { 
     minDate: new Date(2012, 0, 1), 
     changeMonth: true, 
     changeYear: true 
    }; 

    var search = app.search = function() { 
     $.ajax({ 
      url: "/Archive/Index", 
      type: "post", 
      data: $("#searchForm").serialize(), 
      success: function (response) { 
       $("#resultContainer").html(response); 
      } 
     }); 
    }; 

    app.Archive.init = function() { 
     app.initDatePickers(); 
     app.initEventHandlers(); 
    }; 

    app.initDatePickers = function() { 
     $("#StartDate").datepicker(options); // or app.options 
     $("#EndDate").datepicker(options); 
    }; 

    app.initEventHandlers = function() { 
     $("#searchButton").on("click", app.search); 
    }; 

    return app; 
})(jQuery, window, Portalen || {});

別的地方：

$(function() { 
    Portalen.Archive.init(); 
});

Additionaly我想建議你去看看，以Require.js這將讓你組織你的JavaScript模塊方便。

來源

2012-10-26 07:55:49

我真的很喜歡這種方法，成功地使用它，非常感謝！ – Pelle

我最近使用require.js開始。它使用module模式。您可以定義模塊，稍後在需要時導入它們，並以某種python樣式的導入方式表示依賴項。

在這種情況下的另一個好處是，您不必濫用「類」創建來包裝一次使用的代碼，以防止污染全局名稱空間。你可以爲此使用模塊，它更清潔，更有表現力。您可以閱讀模塊模式here的目標。而require.js使得模塊模式易於實現，同時爲您提供其他功能，如AMD

來源

2012-10-26 07:49:32 yakxxx

感謝您的提示，真的關於模塊模式的好文章。 – Pelle

我有時會使用這種方式：

/* defined in ~/Scripts/app/portalen.js */  
var Portalen = { 
    Archive: '', 
    AnotherClass: '' 
} 

/* defined in ~/Scripts/app/portalen-archive.js */ 
Portalen.Archive = function(options){ 
    this.options = { 
     someSettings: 'default', 
     anotherOneOption: [], 
     datePickerSettings: { 
      minDate: new Date(2012, 0, 1), 
      changeMonth: true, 
      changeYear: true 
     } 
    } 

    /* You can overwrite these settings (this.options) when creating an instance */ 
    $.extend(this.options, options) 

    /* auto init an instance.. but you can remove it and call init when & where you want after creating an instance of Portalen.Archive */ 
    this.init(); 
} 

Portalen.Archive.prototype = { 
    init: function(){ 
     var self = this; 
     console.log('initialize'); 

     self._bindEvents(); 
    }, 

    search: function(){ 
     $.ajax({ 
      url: "/Archive/Index", 
      type: "post", 
      data: $("#searchForm").serialize(), 
      success: function (response) { 
       $("#resultContainer").html(response); 
      } 
     }); 
    }, 

    _bindEvents: function(){ 
     var self = this; 
     $("#StartDate").datepicker(self.options.datePickerSettings); 
     $("#EndDate").datepicker(self.options.datePickerSettings); 

     $("#searchButton").on("click", function() { 
      self.search(); 
     }); 
    } 
}

而且你可以創建實例

<script type="text/javascript" src="~/Scripts/app/portalen.js"></script> 
<script type="text/javascript" src="~/Scripts/app/portalen-archive.js"></script> 
<script type="text/javascript" src="~/Scripts/app/portalen-another-class.js"></script> 
<script> 
    $(function(){ 
     /* For now it will automaticly call init method.. */ 
     var archive = new Portalen.Archive({ 
       /* you can overwrite any optioin */ 
       someSettings: 'overwrite this option' 
      }); 
    }); 
</script>

我歡迎任何建議，以改善這種情況:)）

來源

2012-10-26 10:56:17 Maksym

尋找關於如何構建javascripts

回答

相關問題