VisualStudio环境下的Web前端开发经验总结(css,javascript)vs是我最熟悉的开发环境,但使⽤做web前端开发时时,碰到⼀些问题:
1.⼀个⽂件⼏万⾏代码,如何能快速的到某个模块?
2.js代码如何使⽤#region⽅式折叠?
3.js代码的intellisence有些情况下会失效,痛苦。
4.js选择何种“类”定义,有效的实现代码模块化
5.如何⾼效的写css.
visual studio代码大全---------------------------------------------------------------
,若使⽤ts,不⽤往下看了。
---------------------------------------------------------------
经过摸索,总结出如下的经验。(注:vs 的版本是2012)
⼀、安装vs插件,解决问题1、2
插件1:Web Essentials,主要的好处是⽀持js的代码折叠(##endregion)。
详情参见:
插件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。
详情参见:
四、js的类定义、代码模块化、层次化,另起⼀篇: