VisualStudio环境下的Web前端开发经验总结（css,javascript）

标签：

vs是我最熟悉的开发环境，但使用做web前端开发时时，碰到一些问题：

1.一个文件几万行代码，如何有效的组织代码，才能快速的找到某个模块？

2.js代码如何使用#region方式折叠？

3.js代码的intellisence有些情况下会失效，痛苦。

4.js选择何种类定义，有效的实现信息封装

5.如果高效的写css.

经过摸索，总结出如下的经验。（注：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是一个对象，则在上示函数内部，vs无法给出x的智能提示。

解决方案是，把x做成以function实现的类，如下

//代码2
function MyClass(p1,...){

//若只传进来一个参数，则该参数的类型为MyClass，则直接返回该参数
if(p1 && p1.constructor==MyClass && this.augument.length==1){

　　return p1;

}

...

}

则将前示的代码1改为

//代码3
var x=new MyClass(...);

var foo=function(x){
//对参数x增加下列行，即可得到x的智能提示
x=MyClass(x);

}

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

详情参见：LESS CSS 框架简介

四、js的类定义，另起一篇：javascript类定义小结

VisualStudio环境下的Web前端开发经验总结（css,javascript）

标签：

原文地址：http://www.cnblogs.com/erentec/p/4324313.html