A summary of Web front-end development experience in VisualStudio Environment (CSS,JAVASCRIPT)

VS is my most familiar development environment, but when I do web front-end development, I run into some problems:

1. A file tens of thousands of lines of code, how to effectively organize the code in order to quickly find a module?

How does 2.js code collapse using the #region method?

3.js code intellisence In some cases will be ineffective, painful.

4.js choose what class definition, effective implementation of information encapsulation

5. If you write CSS efficiently.

After groping, summed up the following experience. (Note: The version of VS is 2012)

First, install vs plug-in, solve the problem 1, 2

The main benefit of the plugin 1:web Essentials is that it supports JS code folding (#region ... #endregion).

For details see: The Sharpest Visual Studio Web development tool Extension: Web Essentials Explained

Plug-in 2:jsparser, can be JS code in the function organized into a directory, easy to find.

After installing the plugin, you need to click the menu item: View > Other Windows >javascript Parser to come out the corresponding window.

Plugin installation Method: Open vs Menu item: Tools > Extensions and Updates ..., search for related plugins in "online", install.

Second, the enhancement of intellisence

For the man-in-war, I have all the JS code written in a file is more convenient, easy to publish, smart tips are also convenient.

However, in some cases, the smart hints will fail, as follows

Code 1
var foo=function(x) {}

If the parameter x is an object, then the VS cannot give a smart hint of x inside the function above.

The solution is to make X into a function-implemented class, as follows

Code 2
function  MyClass (P1,...)　　{// If only one parameter is passed in, the parameter is of type MyClass, then the parameter is returned directly ifthis. Augument.length==1) {  return  p1;} ...}

Change the code 1 shown earlier to

Code 3
var x=new MyClass (...);

var foo=function(x) {// adds the following line to parameter x to get the smart hint of x x=MyClass (x);}

Third, the efficient write CSS, can be less.

For more information, see: Less CSS Framework Introduction

Four, JS class definition, another article: JavaScript class definition Summary

A summary of Web front-end development experience in VisualStudio Environment (CSS,JAVASCRIPT)