對於前端來說，不需要像後端一樣搭建各種工具的環境，不過geogle的angularjs，nodejs和facebook的reactjs這些主流的mvvm前端架構除外，下面我來寫一個對我一個後端程式設計師來說的簡易前端架構搭建：

• webapp
  
  • msc //自己定義自己前端框架的名字，一定要有意義，未來是屬於你，我這個的意義是mysupcon
    
    • core
      
      • css
        
        • public_bs.css //全域性的自定義的css
      • js
        
        • lib //存放外部的各類前端框架
          
          • bootstrap
            
            • js
            • css
            • plugin //存放利用bootstrap實現的一些外掛
          • jquery.js
        • common.js //一些公用的js
        • msc_bs_widget.js //擴充套件jquery方法儲存
        • msc_bs.js //所有css，js引入該檔案，書寫html的時候只要引入該檔案就好，後邊會詳細介紹
  • staticResources //存放自己寫的前端介面的靜態檔案
    
    • css
    • js
    • html
    • image
  • WEB-INF
    
    • jsp //所有後端到前端都經過jsp，由jsp中嫌棄staticResources中的html檔案實現
    • web.xml

下面我來講講前端引用的總入口程式碼介紹msc_bs.js：

var js=document.scripts;
var jsRoot; 
for(var i=0;i<js.length;i++){
 

 if(js[i].src.indexOf("msc_bs.js")>-1){
   jsRoot=js[i].src.substring(0,js[i].src.lastIndexOf("/")+1);
 }
}

jsRoot是根據找到msc_bs.js所在位置的上一層js目錄，就是存放外部框架js的根目錄。這樣在哪裡匯入這個檔案都能引用所有的前端js。
下面以匯入一個bootsrap的js和css為例。

document.write('<link rel="stylesheet" type="text/css" href="'+jsRoot+'lib/bootstrap3.3.5/css/bootstrap.min.css"
 
>');
document.write('<script src="'+jsRoot+'/lib/bootstrap3.3.5/js/bootstrap.min.js"></script>');

在寫的html中只要寫入

<script type="text/javascript" src="../msc/core/js/msc_bs.js"></script>

該路徑是根據你請求的url跳到專案目錄下再加的絕對路徑。
這樣是不是很簡單。

純屬個人對前端架構的研究感悟。有啥不足之處歡迎指出，一起學習成長。