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

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

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

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

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

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

5.如何高效的寫css.

 

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

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

 

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

 

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

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

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

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

 

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

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

 

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

 

2、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];    
　　
　　...

}

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

詳情參見：LESS CSS 框架簡介

 

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