bower程序包管理器與npm的對比及handlebars包的使用實例

時間 2019-11-12

標籤 bower 程序管理器 npm 比及 handlebars 使用實例简体版

原文原文鏈接

一、bower: 專門爲前端表現設計的程序包管理器，相似npm，主要用於前端優化。bower能夠管理包含HTML，CSS，JavaScript，字體甚至是圖像文件的組成部分。bower並無作別的事 - 它僅僅安裝你須要的包及其依賴的正確版本。javascript

二、**依賴node環境，window用戶必須安裝git工具。安裝和升級bower必須用npm。css

三、npm 和bower 的最大區別，就是 npm 支持嵌套地依賴管理（），而 bower只能支持扁平的依賴（嵌套的依賴，由程序員本身解決）。html

**npm與bower的區別。前端

1.npm不能共享多個包共同依賴的包，每一個包都會下載本身依賴的包。bower對於共享包只會下載一次。java

2. npm主要運用於npm.js項目的內部依賴包管理，安裝的模塊位於項目根目錄下的node_modules文件夾內。而bower大部分狀況下用於前端開發，對於CSS/JS/模板等內容進行依賴管理，依賴的下載目錄結構能夠自定義。node

實際項目中，能夠採用npm做用於後端；bower做用於前端的組合使用模式jquery

四、bower提供清單文件bower.json跟蹤程序包，便於查閱包的版本、依賴狀況。bower提供api和編程api，可在git bash、cmd或js中對包進行安裝、卸載、更新、刪除、發佈等操做。git

五、bower提供的api程序員

bower install jquery：安裝jquery庫。github

bower cache clean：安裝失敗後，清除緩存

cache:bower緩存管理
help:顯示Bower命令的幫助信息
home:經過瀏覽器打開一個包的github發佈頁
info:查看包的信息
init:建立json文件
install:安裝包到項目
link:在本地bower庫創建一個項目連接
list:列出項目已安裝的包
lookup:根據包名查詢包的URL
prune:刪除項目無關的包
register:註冊一個包
search:搜索包
update:更新項目的包
uninstall:刪除項目的包

六、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);

});

七、bower中配置文件.bowerrc

{

"directory" : "components",

"json" : "bower.json",

"endpoint" : "https://Bower.herokuapp.com",

"searchpath" : "",

"shorthand_resolver" : ""

}

directory：存放庫文件的子目錄名。
json：描述各個庫的json文件名。
endpoint：在線索引的網址，用來搜索各類庫。
searchpath：一個數組，儲存備選的在線索引網址。若是某個庫在endpoint中找不到，則繼續搜索該屬性指定的網址，一般用於放置某些不公開的庫。
shorthand_resolver：定義各個庫名稱簡寫形式。

八、handlebars包的使用。

html代碼：

<!DOCTYPE HTML>

<html>

<head>

<title>Handlebars demo</title>

</head>

<body>

<h2>Simple handlebars demo</h2>

<button id="btn_simple">Click me</button>

</div>

<h2>Handlebars Helpers demo</h2>

<button id="btn_helper">Click me</button>

</div>

<table>

<thead>

<tr>

<th>Username</th>

<th>Email</th>

</tr>

</thead>

<tbody>

<tr>

<td>{{username}}</td>

<td>{{firstName}} {{lastName}}</td>

<td>{{email}}</td>

</tr>

<tr>

<td colspan="3">NO users!</td>

</tr>

</tbody>

</table>

</script>

<div>

<h1>By {{fullName author}}</h1>

<h1>Comments</h1>

<h2>By {{fullName author}}</h2>

</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));;

}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。