VisualStudio環境下的Web前端開發經驗總結（css,javascript）

vs是我最熟悉的開發環境，但使用做web前端開發時時，碰到一些問題：

1.一個文件幾萬行代碼，如何能快速的找到某個模塊？

2.js代碼如何使用#region方式折疊？

3.js代碼的intellisence有些情況下會失效，痛苦。

4.js選擇何種“類”定義，有效的實現代碼模塊化

5.如何高效的寫css.

 

---------------------------------------------------------------

完美的解決方案是使用：TypeScript，若使用ts，不用往下看了。

 

---------------------------------------------------------------

 

經過摸索，總結出如下的經驗。（注：vs 的版本是2012）

一、安裝vs插件，解決問題1、2

插件1：Web Essentials，主要的好處是支持js的代碼折疊（#region...#endregion）。

詳情參見：最鋒利的Visual Studio Web開發工具擴展：Web Essentials詳解

 

插件2：jsparser，可將js代碼中的function組織成目錄，便於查找。

安裝好該插件后，需要點擊菜單項：視圖>其它窗口>JavaScript Parser，才能出來相應的窗口。

 

插件安裝方法：打開vs的菜單項：工具>擴展和更新..,在“聯機”中搜索相關插件，安裝。

 

二、IntelliSence的增強

 單兵作戰時，把所有js代碼寫在一個文件里比較省事，發布起來方便，智能提示也方便。

但有些情況下，智能提示會失效，如：

//代碼1
var foo=function(x){
　　//x 的類型未知，智能提示失效
}

 

解決方案是，把x做成以function實現的類的實例，如下

function MyClass(...){}

//x是MyClass的實例
function foo(x){
　　x=new MyClass(x);//這里是關鍵，讓MyClass直接返回x，此時x的值不變，且類型已強制為MyClass，智能提示生效
　　x.//這里已經有智能提示了
}

//測試代碼
var a=new MyClass(...);
foo(a)

為了支持上述的智能提示增強，可按如下方法改造MyClass

//給Function增加一個函數，用於增強智能提示
Function.prototype.isDirectReturn = function (arg) {
    return arg.length == 1 && arg[0].constructor == this;
}


fucntion MyClass(...){
    //當輸入的參數只有一個，且為MyClass的實例時，直接回返（用於智能提示）
    if( MyClass.isDirectReturn(arguments) ) return arguments[0];    
　　
　　...

}

三、高效的寫css，可用less。

詳情參見：LESS CSS 框架簡介

 

四、js的類定義、代碼模塊化、層次化，另起一篇:javascript類定義的模板與代碼層次化