标签：style blog http io ar color 使用 sp java
序——
《Node.js自学之路》系列文章，将记录我学习基于Node.js进行Web开发的过程。
Node.js是基于V8引擎运行的开发平台，执行JavaScript速度快、性能好；也因其以JavaScript作为开发语言，对于前端工程师而言，它的学习曲线更低、开发效率更高。
文章目录：
一、Bower——前端类库管理
1.为什么使用bower
前端需要使用大量的类库，常用的就有：用来解决IE功能性Bug的HTML5 Shiv、ExplorerCanvas、Respond；JavaScript类库jQuery、Underscore.js；UI框架Bootstrap；其他完成特定功能的类库更是数不胜数。
当然这些类库都可以在Github找到，但在实际项目开发中进行手动下载是效率很低的、且不利于版本的更新；这时就需要使用bower高效地进行前端类库管理。
2.安装bower
npm install -g bower
检测版本
bower -v
3.创建配置文件
为了便于管理类库，需要创建配置文件；在项目文件夹下，使用以下命令，引导创建bower.json文件
bower init
默认情况下，bower下载类库时会自动创建bower_components文件夹并将类库放在其中，可以通过创建.bowerrc文件设置指定路径
{"directory" : "public/libs"}
注意：Win7环境下，创建文件必须指定名称，所以创建 .bowerrc 文件时需要借助编辑器
4.下载类库
当在bower的search界面搜索到需要的类库时，说明该类库已经被bower所收录，可以直接下载
bower install --save LIB_NAME
--save用于将该类库的信息写入bower.json文件
打开bower.json后就可以看到已经安装的类库，比如当安装了jquery和bootstrap后：
所以，更直接的方式是先在bower.json文件中写入要安装类库的信息，使用以下命令直接检测进行全部安装
bower install
若bower没有收录，则找到该类库的github页，在右侧找到clone地址，将LIB_NAME名替换成该地址，并将开头的http改为git
bower install --save git://...
注意：以上的操作必须在安装了Git的前提下进行
5.移除类库
bower uninstall --save LIB_NAME
当然可以直接进入public/libs中删除文件夹，并在bower.json中删除类库信息
二、RequireJS——JS文件引用管理
1.为什么使用require.js
上面说到前端需要大量的类库，而JS类库更是占了大部分，在使用JS类库时，存在很多的依赖关系，比如jquery.cookie是基于jquery开发的、backbone是基于underscore的等等，这些依赖关系需要手动进行引用的顺序管理；另一方面，在不同的页面上，对于JS的引用需求也是不同的，如果希望做到按需加载，那么就要使用require.js这样的类库，它实现了异步加载、避免阻塞、提高了页面性能。
2.下载require.js
bower install --save requirejs
3.使用require.js
在views/index.jade中添加：
script(type="text/javascript", src="/libs/requirejs/require.js", data-main="/js/index")
注意：jade的语法与html有较大差异，且对缩进的要求严格
在使用require.js后，引用其它JS文件是不需要再加.js后缀的，所以data-main="/js/index"中index而非index.js
4.创建配置文件
在public/js下创建config.js文件，用于配置JS类库路径及依赖关系，以jquery和bootstrap为例
require.config({ baseUrl: ‘/libs‘, paths: { jquery: ‘jquery/dist/jquery‘, bootstrap: ‘bootstrap/dist/js/bootstrap‘ }, shim: { bootstrap: [‘jquery‘] } });
注意：paths中的JS文件仍是不用加.js后缀的
shim中指定了在引入bootstrap.js文件前必须引入jquery.js，因为前者是依赖于后者的
5.在JS文件中按需引用
在public/js文件夹下创建index.js文件
require([‘./config‘], function(config) { require([‘bootstrap‘], function() { //do something }); });
虽然，只引入了bootstrap.js文件，但因为在config.js文件中做了配置，会在bootstrap.js文件前引入jquery.js文件
可以打开浏览器的调试面板，查看
#########################################
Node.js正在快速发展中，软件包升级很快，文章有运行不通的地方请参考官方文档解决。我也会不定期更新文章，尽量保持文章代码的可用性。
#########################################
作者：@zhnoah
出处：http://www.cnblogs.com/zhnoah/
本文版权归本人和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连
接，否则保留追究法律责任的权利。
标签：style blog http io ar color 使用 sp java
原文地址：http://www.cnblogs.com/zhnoah/p/4108499.html
