node. JS Self-study road--2. Front End Management

Order--

The "node. JS self-paced" series of articles will document my learning process for Web development based on node. js.

node. JS is a development platform based on the V8 engine that performs JavaScript faster and with good performance, and because it is a language for development in JavaScript, it has a lower learning curve and more efficient development for front-end engineers.

Article directory:

node. JS Self-study Road--1. Environment construction

node. JS Self-study road--2. Front End Management

First, bower--front-end Class library management

1. Why Use Bower

Front-end need to use a large number of class library, commonly used is: to solve the IE functional bug HTML5 Shiv,explorercanvas,Respond;JavaScript class Library jQuery,underscore.js,UI Framework Bootstrap, and other class libraries that perform specific functions are countless.

Of course, these libraries can be found on GitHub, but manual downloads in real-world project development are inefficient and not conducive to version updates, and you need to use Bower to efficiently manage front-end class libraries.

2. Installing Bower

NPM Install-g Bower

Detection version

Bower-v

3. Create a configuration file

To facilitate the management of the class library, you need to create a configuration file, and under the project folder, use the following command to boot the Create Bower.json file

Bower Init

By default, when Bower downloads a class library, the Bower_components folder is automatically created and the class library is placed, and you can specify the path by creating a. bowerrc file setting

{"Directory": "Public/libs"}

Note: In a Win7 environment, creating a file must specify a name, so you need an editor to create the. bowerrc file

4. Download the class Library

When searching for the required class library in the search interface of bower, it is indicated that the class library has been included in the Bower and can be downloaded directly

Bower Install--save Lib_name

--save used to write information about the class library to the Bower.json file

When you open Bower.json, you can see the libraries you have installed, such as when jquery and Bootstrap are installed:

Therefore, the more straightforward way is to first write the information in the Bower.json file to install the class library, using the following command to directly detect the installation of all

Bower Install

If Bower is not included, find the GitHub page for the class library, find the clone address on the right, replace the Lib_name name with the address, and change the beginning of http to git

Bower Install--save git://...

Note: The above must be done with Git installed

5. Removing class libraries

Bower Uninstall--save Lib_name

Of course you can delete the folder directly into the Public/libs and delete the class library information in the Bower.json

Second, REQUIREJS--JS file reference management

1. Why Use Require.js

Above said front-end need a large number of class library, and JS class library is accounted for most, in the use of JS class library, there are a lot of dependencies, such as Jquery.cookie is based on the development of jquery, backbone is based on underscore and so on, These dependencies need to be manually referenced in order to manage, on the other hand, on different pages, the reference requirements for JS is also different, if you want to do on-demand loading, then use require.js such a class library, it implemented asynchronous loading, avoid blocking, improve page performance.

2. Download Require.js

Bower Install--save Requirejs

3. Using Require.js

Add in Views/index.jade:

Script (type= "Text/javascript", src= "/libs/requirejs/require.js", data-main= "/js/index")

Note: The syntax of Jade differs greatly from HTML, and the requirements for indentation are strict

After using Require.js, the reference to other JS files is not required to add. js suffix, so data-main= "/js/index" in index instead of Index.js

4. Create a configuration file

Create a config.js file under Public/js for configuring JS class library paths and dependencies, with jquery and Bootstrap as an example

require.config ({    '/libs ',    paths: {          ' jquery/dist/jquery ',          ' bootstrap/ Dist/js/bootstrap '                     },     shim: {          bootstrap: [' jquery ']    }  });

Note: The JS file in paths is still not added. js suffix

SHIM specifies that a jquery.js must be introduced before the Bootstrap.js file is introduced, because the former is dependent on the latter

5. On-demand reference in JS file

Create a index.js file under the Public/js folder

function (config) {    require ([function() {        //dosomething    });});

Although only the Bootstrap.js file was introduced, the Jquery.js file was introduced before the Bootstrap.js file because it was configured in the Config.js file

You can open the browser's debug panel to view

#########################################

node. JS is growing fast, packages are upgraded quickly, and articles are not available in the official documentation. I also do not update the article regularly, try to maintain the usability of the article code.

#########################################

@zhnoah
Source: http://www.cnblogs.com/zhnoah/
This article is owned by me and the blog Park, Welcome to reprint, but without the consent of the author must retain this paragraph, and in the article page obvious location to the original
The right to pursue legal liability.

node. JS Self-study road--2. Front End Management