java企業應用程序上的javascript模式

我只想問一下在大型java企業應用程序上編寫javascript文件的準則。基本上我們現在要做的就是複製JSP的文件夾結構，和每個JSP都有一個對應的js文件。你可以看到如下：java企業應用程序上的javascript模式

war 
|- js 
    |- jquery.js 
    |- jquery.ui.js 
    |- datatables.js 
    |- other-lib.js 
    |- pages 
     |- login.js 
     |- dashboard.js 
     |- userAdmin.js

我們正在使用Sitemesh，這就是爲什麼在主裝飾JSP，所有的庫都在<script>標籤進口。因此，在主裝飾JSP，你可以看到這樣的事情：

<head> 
    <script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript" src="js/datatables.js"></script> 
    <script type="text/javascript" src="js/xform.js"></script> 
    <script type="text/javascript" src="js/generic.js"></script> 
</head>

正如我所說的「JS /頁」文件夾下的js文件導入其具體的JSP文件。現在

，我剛纔讀Addy Osmani's Article about JS Patterns，並且使用揭示模塊模式啓動。但仍然，我有點失落。我來到這個RequireJS框架/工具。但我不知道如何開始檢修java應用程序的js文件。

我應該在哪裏把$(document).ready(function(){})如果我開始使用模塊的模式？

我應該讓每個JSP頁面成爲一個模塊嗎？還是應該分解行爲並根據概念的可用性/行爲創建模塊？

我不知道還有什麼要問的，我有很多想法，我通常是代碼後端，因爲我是一名Java開發人員，但現在，由於我的團隊中沒有前端工程師，我必須學習這個新東西。因爲我對JavaScript和jQuery的知識有限，所以請忍受。

來源

2012-08-28 jcera

你有5個不同的問題。我們應該選出哪一個答案？ – ShaunOReilly

「如果我開始使用模塊模式，我應該在哪裏放置$（document）.ready（function（）{}）？」我認爲這個問題是我的首要任務。另外，如果你回答其他問題，是否可以。 – jcera

使用異步模塊（AMD，像require.js）可以讓你的JS似乎有點更像你可以有明確的規定相互之間可以「進口」（要求）命名空間的Java。您將擁有實例化一些頂級對象的主線（您的主要js）。

在JSP或PHP，你會經常只是呼應<script>標籤到頁面上添加一系列的腳本的HTML文檔。使用require.js，您必須生成爲該應用程序定製的JavaScript - 即，您的main.js可能會有所不同，或者您需要腳本內聯。

這使得require.js真的，你有一噸的模板的JavaScript和小服務器端預處理的一個頁面的Web應用程序極大。

人們似乎在js社區（如果有一個連貫的一個）之類的揭示模塊模式作爲封裝代碼的方式。這基本上是解決javascript範圍混亂的唯一好方法。除此之外，你還可以：

因子公共代碼（模態，位點特異性的驗證，REST API調用等）進入模塊可以包括在每一個頁面，要求用戶緩存中更長的時間
編寫涵蓋單個功能塊的小模塊。這樣，您可以將它們交換出來，或在必要時將它們包含在不同的頁面中。
考慮使用像grunt這樣的js構建工具，它將連接並縮小您的javascript。 Dojo也有一個很好的。

在揭示模塊模式中，你不必擔心它，除非你有一個需要jQuery的IIFE（自執行函數）。只要確保在jQuery閉包中包裝你的模塊函數調用。

$(function(){ 
    (function($){ $('body').append('<div />'); })(jQuery); // this needs the DOM & jQuery 
}); 
(function(){ 
    my_module = my_module || {}; 
    my_module.nonjQueryFunc = function(){}; 
    my_module.myjQueryFunc = function(el){ 
     $(el).text("I need a ready DOM"); 
    }; 
});

在另一個.js文件：

$(function(){ 
    my_module.myjQueryFunc(); // this needs the DOM to be ready & jQuery to exist 
}); 

my_module.nonjQueryFunc();

來源

2012-08-28 05:54:08 bokonic

如果你正在尋找發展在每個JSP頁面的複雜的JS功能，考慮把更多的精力放在中的模塊和對構建功能UI組件。正如bokonic所說的那樣，AMD庫可以幫助您將一個好的結構添加到您的代碼庫中。

如果您需要查看構建大型JavaScript應用程序的參考架構，請查看BoilerplateJS（http://boilerplatejs.org）。它不是實用程序庫，而是將一些領先的實用程序庫集成到可用作複雜JS項目起點的參考體系結構中。

即使您不想按照原樣使用它，請查看主頁上討論的問題。你將能夠得到大規模JS項目，比如必要的架構方法的一個想法：

你應該如何組織代碼結構
如何創建的功能模塊
層次如何使UI組件自包含
如何做路由，書籤，歷史記錄處理
如何管理JS腳本和依賴
如何優化，模糊部署
如何讓你的組件單元測試
如何應對的造型，本土化方面

我BoilerplateJS的主要作者，我寫的做幾個複雜的JS項目後，分享我的經驗。

來源

2012-08-28 07:31:29 Hasith

嗨，boilerplate.js看起來非常有趣，因爲我在我的項目中使用了骨幹和backbone.marionette，如果您能夠提供一些示例，或者將示例結合到boilerplate.js和backbone中，我將不勝感激。謝謝 – danikoren

嗨，我知道有人使用BoilerplateJS與骨幹。我會很快拿到一份樣品，並讓你知道。 – Hasith

感謝，期待 – danikoren

java企業應用程序上的javascript模式

回答

相關問題