因为有Apache Cordova的教程，所以我做了它。

我试过的是这个 cordova 教程。

你为什么在使用Cordova？

我会对Cordova做一个简要介绍。Cordova是一个跨平台应用程序开发框架，最初由Nitobi公司开发，并被Adobe收购后作为开源项目贡献给Apache。这个框架已经存在于2009年，因此已经积累了很多功能。尽管现在有很多流行的单页应用程序框架，但我选择使用Cordova作为一种折衷的解决方案，因为对其它框架不是很了解。

以下是任务。因为这是教程的原样，所以可能没有太多意义。不过只有使用了nodebrew这一部分有点不一样。我只是在浏览器上完成的。

准备环境

模块1：创建一个Cordova项目

暂时先用nodebrew安装node.js。

curl -L git.io/nodebrew | perl - setup

安装完成后，最新的v4.0.0版本已经包含在其中。

nodebrew list
v4.0.0

which npm
/Users/myname/.nodebrew/current/bin/npm

不知道为什么，总觉得礼节有点相似，所以我提前使用了。

nodebrew use v4.0.0

由于Cordova需要在命令行中设置环境，因此需要安装命令行。

npm install -g cordova
which cordova
/Users/yourname/.nodebrew/current/bin/cordova

应用程序的初始创建

模块2：构建一个Cordova项目

创建一个与自己的包名和工作项目的目录相对应的文件夹。将yourname替换为自己的名字。

cordova create workshop com.yourname.workshop Workshop

我到目录中去

cd workshop

在这里，教程中会要求选择平台（如iOS或Android），但暂时我不打算添加，因为我想先通过浏览器了解一下它们是什么样的。

我不知道用了什么插件，但是因为它似乎会在后面的教程中用到，所以我安装了插件。

安装所需的插件

cordova plugin add org.apache.cordova.device
cordova plugin add org.apache.cordova.console

看起来在安装了插件之后，我在某处看到了在浏览器中运行时应该这样做，所以我提前做了这个。

设置可移动的平台

cordova platform add browser

然后，他们安装了一个用于浏览器的插件。按照步骤来说，应该先执行platform add，但是后来是否也能追随进行呢？

cordova platform add browser
Adding browser project...
Running command: /Users/yourname/.cordova/lib/npm_cache/cordova-browser/4.0.0/package/bin/create /Users/yourname/Dropbox/Develop/workshop/platforms/browser com.yourname.workshop Workshop
Creating Browser project. Path: platforms/browser
Discovered plugin "cordova-plugin-whitelist" in config.xml. Installing to the project
Fetching plugin "cordova-plugin-whitelist@1" via npm
Installing "cordova-plugin-whitelist" for browser

This plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version, you do *not* need this plugin since the whitelist will be built in.

Installing "cordova-plugin-console" for browser
Installing "cordova-plugin-device" for browser

目前为止，只是用浏览器打开了一下，大概就是这个样子。

这似乎是处于停止状态，或者说需要进行正确的构建操作。

构建已设置的应用

下面是制作浏览器版本的构建的步骤。

cordova build browser

Running command: /Users/ishimaru/Dropbox/Develop/workshop/platforms/browser/cordova/build 
Cleaning Browser project
Browser packaged app built in platforms/browser/build/package.zip

构建时，平台目录内会有浏览器、iOS等文件夹，其中的build文件夹内似乎会生成一个zip文件。

在浏览器上进行模拟操作（看起来没什么意义，哈哈）

cordova emulate browser

那么，我收到了一条消息说它在移动。太好了。

我不明白「DEVICE IS READY」指的是什么，但是我会继续下一步。

设置教程用的文件并进行简易操作

第三模块：设置工作坊文件

如果你一旦把它消除掉。(´・ω・｀)

pwd /Users/yourname/Dropbox/Develop/workshop
rm -rf www

据说他们复制了一个副本，打算把startar-www复制到www。

git clone https://github.com/ccoenraets/cordova-tutorial
cd cordova-tutorial
cp -pR starter-www ../www

我特地进行了构建，但是通常在浏览器中打开文件时，它的运行方式相同。

要尝试从服务器端获取JSON的请求动作。

模块4：选择数据存储策略

要尝试从服务器端获取JSON数据。

<script src="js/services/memory/EmployeeService.js"></script>

将此放置于www/index.html中：

改成这样应该会不错。试试更换一下内部实现装置吧。

服务器端需要进入”/Users/ishimaru/Dropbox/Develop/workshop/cordova-tutorial/server”这个位置，这是git clone的地方。然后，先安装node module并运行服务器。

cd cordova-tutorial/server
npm install

请查看package.json的内容并执行安装操作，安装的文件将存放在node_modules目录中，然后使用它来运行服务器。

node server

虽然看不清楚，但它动了。

听说要将对话框本地化

第五模块：使用本地通知

安装对话框插件。

cordova plugin add org.apache.cordova.dialogs

把生成的 Cordova 用的 js 文件加载到 index.html 中

<script src="cordova.js"></script>
</body>
</html>

编写覆盖浏览器的window.alert函数的逻辑。

document.addEventListener('deviceready', function () {
  if (navigator.notification) { // Override default HTML alert with native dialog
      window.alert = function (message) {
          navigator.notification.alert(
              message,    // message
              null,       // callback
              "Workshop", // title
              'OK'        // buttonName
          );
      };
  }
}, false);

然后，运行以下命令进行构建并查看。

cordova 构建 浏览器
cordova 模拟浏览器

帮助按钮按了也没有弹窗呢，算了。

进行下一个动作。

好像要立即解決点击延迟300毫秒的问题。

第六模块：避免300毫秒的点击延迟

我开始阅读 fastclick.js 这个文件了。

<script src="lib/fastclick.js"></script>
<script src="cordova.js"></script>
</body>
</html>

添加了FastClick.attach。

document.addEventListener('deviceready', function () {
  if (navigator.notification) { // Override default HTML alert with native dialog
      window.alert = function (message) {
          navigator.notification.alert(
              message,    // message
              null,       // callback
              "Workshop", // title
              'OK'        // buttonName
          );
      };
  }
}, false);
FastClick.attach(document.body);

我其实不太明白，但是因为警告弹出了，所以就算是没问题。

将其转化为单页应用程序。

模块7：建立一个单页面应用

好像是要删除除了script标签以外的body标签中的所有DOM。在其他框架（比如Monaca）中，通常也是首先删除再执行。

变成这样了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>

<script src="cordova.js"></script>
<script src="lib/fastclick.js"></script>
<script src="lib/jquery.js"></script>
<script src="js/services/memory/EmployeeService.js"></script>
<script src="js/app.js"></script>

</body>
</html>

在js中创建一个函数来生成最初在index.html中写入的dom。将其放在本地函数的代码块中。

    function renderHomeView() {
        var html =
            "<h1>Directory</h1>" +
            "<input class='search-key' type='search' placeholder='Enter name'/>" +
            "<ul class='employee-list'></ul>";
        $('body').html(html);
        $('.search-key').on('keyup', findByName);
    }

然后，将该函数调用放在service.initialize之后的位置。

    service.initialize().done(function () {
        renderHomeView();
    });

然后，删除“Event Registration”区块中重复的处理。
通过查看renderHomeView的处理内容，我们可以知道在其中实现了从body中删除帮助按钮，并在释放search-key键盘时开始搜索的事件处理，因此需要删除以下两个区块。

$('.search-key').on('keyup', findByName);
$('.help-btn').on('click', function() {
    alert("Employee Directory v3.4");
});

现在修复已经完成了，接下来需要进行功能确认。
因为不太清楚，所以我将app.js的所有结果源码都写在这里。

// We use an "Immediate Function" to initialize the application to avoid leaving anything behind in the global scope
(function () {

    /* ---------------------------------- Local Variables ---------------------------------- */
    var service = new EmployeeService();
    service.initialize().done(function () {
        renderHomeView();
    });

    /* --------------------------------- Event Registration -------------------------------- */
    document.addEventListener('deviceready', function () {
        if (navigator.notification) { // Override default HTML alert with native dialog
            window.alert = function (message) {
                navigator.notification.alert(
                    message,    // message
                    null,       // callback
                    "Workshop", // title
                    'OK'        // buttonName
                );
            };
        }
    }, false);
    FastClick.attach(document.body);

    /* ---------------------------------- Local Functions ---------------------------------- */
    function findByName() {
        service.findByName($('.search-key').val()).done(function (employees) {
            var l = employees.length;
            var e;
            $('.employee-list').empty();
            for (var i = 0; i < l; i++) {
                e = employees[i];
                $('.employee-list').append('<li><a href="#employees/' + e.id + '">' + e.firstName + ' ' + e.lastName + '</a></li>');
            }
        });
    }

    function renderHomeView() {
        console.log("renderHomeView start");
        var html =
            "<h1>Directory</h1>" +
            "<input class='search-key' type='search' placeholder='Enter name'/>" +
            "<ul class='employee-list'></ul>";
        $('body').html(html);
        $('.search-key').on('keyup', findByName);
        console.log("renderHomeView end");
    }

}());

在进行操作确认时，发现可以正常运行，因此一切顺利。

为了确认操作，需要进行构建和运行应用程序，以下是一种方式。

cordova build ios
cordova emulate ios

由于我是一个浏览器，所以什么也没做。

看起来现在算是基本上成为了单页应用了，但是感动程度真的是无语（笑）。

由于在字符串中编写HTML有点麻烦，所以听说要引入模板引擎。

模块8：使用Handlebars模板

事前准备时确保读取库的CSS和js。

将body读取为模板引擎的主体源代码。Template引擎应该是handlebars。

<script src="lib/handlebars.js"></script>

另外，我们可以给移动设备应用上一个名为Ratchet的样式表。

我在index.html的头部添加了以下内容。

<link href="assets/ratchet/css/ratchet.css" rel="stylesheet">
<link href="assets/css/styles.css" rel="stylesheet">

然后，似乎要将HTML移到模板引擎中。

据说通常将它放在标签中，但这种形式有点奇怪。就好像在