bower程序包管理器与npm的对比及handlebars包的使用实例
1、bower: 专门为前端表现设计的程序包管理器，类似npm，主要用于前端优化。bower可以管理包含HTML，CSS，JavaScript，字体甚至是图像文件的组成部分。bower并没有做别的事 - 它仅仅安装你需要的包及其依赖的正确版本。
2、**依赖node环境，window用户必须安装git工具。安装和升级bower必须用npm。
3、npm 和bower 的最大区别，就是 npm 支持嵌套地依赖管理（），而 bower只能支持扁平的依赖（嵌套的依赖，由程序员自己解决）。
**npm与bower的区别。
1.npm不能共享多个包共同依赖的包，每个包都会下载自己依赖的包。bower对于共享包只会下载一次。
2. npm主要运用于npm.js项目的内部依赖包管理，安装的模块位于项目根目录下的node_modules文件夹内。而bower大部分情况下用于前端开发，对于CSS/JS/模板等内容进行依赖管理，依赖的下载目录结构可以自定义。
实际项目中，可以采用npm作用于后端；bower作用于前端的组合使用模式
4、bower提供清单文件bower.json跟踪程序包，便于查阅包的版本、依赖情况。bower提供api和编程api，可在git bash、cmd或js中对包进行安装、卸载、更新、删除、发布等操作。
5、bower提供的api
bower install jquery：安装jquery库。
bower cache clean：安装失败后，清除缓存
- cache:bower缓存管理
- help:显示Bower命令的帮助信息
- home:通过浏览器打开一个包的github发布页
- info:查看包的信息
- init:创建json文件
- install:安装包到项目
- link:在本地bower库建立一个项目链接
- list:列出项目已安装的包
- lookup:根据包名查询包的URL
- prune:删除项目无关的包
- register:注册一个包
- search:搜索包
- update:更新项目的包
- uninstall:删除项目的包
6、bower提供的程序api---提供了可以操作的bower. commands 对象。
var bower = require('bower');
bower.commands
.install(['jquery'], { save: true }, { /* custom config */ })
.on('end', function (installed) {
console.log(installed);
});
bower.commands
.search('jquery', {})
.on('end', function (results) {
console.log(results);
});
7、bower中配置文件.bowerrc
{
"directory" : "components",
"json" : "bower.json",
"endpoint" : "https://Bower.herokuapp.com",
"searchpath" : "",
"shorthand_resolver" : ""
}
- directory：存放库文件的子目录名。
- json：描述各个库的json文件名。
- endpoint：在线索引的网址，用来搜索各种库。
- searchpath：一个数组，储存备选的在线索引网址。如果某个库在endpoint中找不到，则继续搜索该属性指定的网址，通常用于放置某些不公开的库。
- shorthand_resolver：定义各个库名称简写形式。
8、handlebars包的使用。
html代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Handlebars demo</title>
<script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../bower_components/handlebars/handlebars.min.js"></script>
<script type="text/javascript" src="../javascript/myjs.js"></script>
<style type="text/css"></style>
</head>
<body>
<h2>Simple handlebars demo</h2>
<button id="btn_simple">Click me</button>
<div id="my_div">
</div>
<h2>Handlebars Helpers demo</h2>
<button id="btn_helper">Click me</button>
<div id="helper_div">
</div>
<script id="some-template" type="text/x-handlebars-template">
<table>
<thead>
<tr>
<th>Username</th>
<th>Real Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
{{#if users}}
<tr>
<td>{{username}}</td>
<td>{{firstName}} {{lastName}}</td>
<td>{{email}}</td>
</tr>
{{else}}
<tr>
<td colspan="3">NO users!</td>
</tr>
{{/if}}
</tbody>
</table>
</script>
<script id="helper-template" type="text/x-handlebars-template">
<div>
<h1>By {{fullName author}}</h1>
<div>{{body}}</div>
<h1>Comments</h1>
{{#each comments}}
<h2>By {{fullName author}}</h2>
<div>{{body}}</div>
{{/each}}
</div>
</script>
</body>
</html>
js代码：
$(document).ready(function () {
Handlebars.registerHelper('fullName', function (person) {
return person.firstName + " " + person.lastName;
});
$("#btn_simple").click(function () {
// $(this).hide();
showTemplate();
});
$("#btn_helper").click(function () {
showHowUseHelper();
});
});
// var context = {title: "My New Post", body: "This is my first post!"};
var persion = { title: "My New Post", body: "This is my first post!" }
function showTemplate() {
var source = $("#some-template").html();
var template = Handlebars.compile(source);
var data = {
users: [
{ username: "alan", firstName: "Alan", lastName: "Johnson", email: "alan@test.com" },
{ username: "allison", firstName: "Allison", lastName: "House", email: "allison@test.com" },
{ username: "ryan", firstName: "Ryan", lastName: "Carson", email: "ryan@test.com" }
]
};
$("#my_div").html(template(data));;
}
function showHowUseHelper() {
var context = {
author: { firstName: "Alan", lastName: "Johnson" },
body: "I Love Handlebars",
comments: [{
author: { firstName: "Yehuda", lastName: "Katz" },
body: "Me too!"
}]
};
var source = $("#helper-template").html();
var template = Handlebars.compile(source);
$("#helper_div").html(template(context));;
}
