首页 > 代码库 > bower程序包管理器与npm的对比及handlebars包的使用实例

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="http://www.mamicode.com/bower_components/jquery/dist/jquery.min.js"></script>

    <script type="text/javascript" src="http://www.mamicode.com/bower_components/handlebars/handlebars.min.js"></script>

    <script type="text/javascript" src="http://www.mamicode.com/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 = http://www.mamicode.com/{

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

 

}

   

bower程序包管理器与npm的对比及handlebars包的使用实例