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类定义的模板与代码层次化