单页面Web应用开发框架：Durandal学习入门

谁借莪１个温暖的怀抱￠ 2022-07-27 15:49 253阅读 0赞

### [Durandal][] 是一个轻量级的JavaScript框架，其目标是单页面应用（SPAs）的开发变得简单而优雅。它支持MVC、MVP和MVVM等模式，因此不论你采用哪种类型的前端架构，Durandal都能胜任。  Durandal以 [ RequireJS][RequireJS] 为基础，加上一个轻量级的惯例层，带来了令人惊叹的生产效率，并且帮助你维持稳健的编码实践。配上开箱即用的富界面组件、模态对话框、事件/消息、组件、过渡效果、导航等等，使你可以轻松开发出任何你能想象的应用。  尽管Durandal才发布大约一年时间，但其社区正以飞快的速度成长 ###

**Features**

*  Clean MV\* Architecture
 *  JS & HTML Modularity
 *  Simple App Lifecycle
 *  Eventing, Modals, Message Boxes, etc.
 *  Navigation & Screen State Management
 *  Consistent Async Programming w/ Promises
 *  App Bundling and Optimization
 *  Use any Backend Technology
 *  Built on top of jQuery, Knockout & RequireJS
 *  Integrates with popular CSS libraries such as Bootstrap and Foundation
 *  Make Your Own Templatable and Bindable Widgets
 *  Fully Testable

**Browser Support**：IE 6+ Firefox 2+ Safari 3.2+ Chrome 3+ Opera 10+

**Dependencies**： jQuery >= 1.8.0 Knockout >= 2.2.1 RequireJS >= 2.0.0

要开始使用Durandal，可以有多种方式，这取决于你的平台。因为Durandal是一个纯JavaScript库，独立于任何服务端平台，我们尝试用多种方式来打包，以满足各类Web开发人员。在本教程中，我们将直接使用HTML Starter Kit。你可以在[官方网站][Link 1] 上直接 [ 下载][Link 2] 。

下载完HTML Starter Kit后，解压缩，你就可以直接在Firefox各版本中打开  *index.html* 页面，运行其示例程序了。或者你也可以将其部署到Web服务器中，浏览其index页面。

Starter Kit演示了一个基本的导航架构，包括导航、页面历史、数据绑定、模态对话框等等。当然，我们不只是看看而已，我们要从头开始写一个小程序。首先打开app文件夹，删除里面的所有内容，然后删除*index.html* 。这样我们就有了一个空项目，并且预配置了所有必须的scripts和css。

*\* 注： IE, Chrome 和 Safari 可能无法从文件系统中直接打开这类文件。如果你仍希望使用这些浏览器，可以将其部署到你喜欢的* Web*服务器中。*

Index.html（根目录）  
我们开始编写index.html文件，内容如下：

<!DOCTYPE html> 
    <html> 
      <head> 
        <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css" /> 
        <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.css" /> 
        <link rel="stylesheet" href="lib/durandal/css/durandal.css" /> 
        <link rel="stylesheet" href="css/starterkit.css" /> 
      </head> 
      <body> 
        <div id="applicationHost"></div> 
        <script src="lib/require/require.js" data-main="app/main"></script> 
      </body> 
    </html>

Durandal采用RequireJS作为其核心构件之一，鼓励模块化的编程方式。在Durandal应用中，所有的JS代码都写在模块中。上文index.html中的script标签就是用于加载RequireJS来完成框架的模块策略。当模块加载器完成初始化后，它通过data-main属性的值来启动应用。

**main.js(app目录)**

requirejs.config({
      paths: {
        'text': '../lib/require/text',
        'durandal':'../lib/durandal/js',
        'plugins' : '../lib/durandal/js/plugins',
        'transitions' : '../lib/durandal/js/transitions',
        'knockout': '../lib/knockout/knockout-3.4.0',
        'jquery': '../lib/jquery/jquery-1.9.1'
        } 
    });
     
    define(function (require) {
       var system = require('durandal/system'),
           app = require('durandal/app');
     
       system.debug(true);
     
       app.title = 'Durandal Starter Kit';
     
       app.configurePlugins({
         router:true,
         dialog: true
       });
     
       app.start().then(function() {
         app.setRoot('shell');
       });
    });

shell.html (app/views目录)

<section>
      <h2>Hello! What is your name?</h2>
      <form class="form-inline">
        <fieldset>
           <label>Name</label>
           <input type="text" data-bind="value: name, valueUpdate: 'afterkeydown'"/>
           <button type="submit" class="btn" data-bind="click: sayHello, enable: name">Click Me</button>
        </fieldset>
      </form>
    </section>

**shell.js(app/viewsmodel目录)**

define(function (require) {
      var app = require('durandal/app'),
          ko = require('knockout');
     
      return {
         name: ko.observable(),
         sayHello: function() {
           app.showMessage('Hello ' + this.name() + '! Nice to meet you.', 'Greetings');
         }
       };
    });

属性name看起来有点特别，它是我们使用[Knockout][]创建的一个可被观察的(observable)属性，可被观察observable属性支持数据到html的双向绑定，变更通知和一些其它特性!现在你可以用Google打开index.html，或者如果你使用其他浏览器的话，可以部署到Web服务器下然后浏览**index.html**。当页面打开时，会经历以下这些步骤：

1.  加载RequireJS。
2.  RequireJS将加载main.js，然后配置框架。
3.  main.js调用setRoot展示整个应用。
4.  加载shell.js和shell.html，绑定数据，然后注入到页面的applicationHost div中

页面加载完以后，试着在输入框中输入点什么，然后点击按钮看看会有什么效果！

本文参考网址：[http://durandaljs.com/get-started.html][http_durandaljs.com_get-started.html]

[Durandal]: http://durandaljs.com/
[RequireJS]: http://requirejs.org/
[Link 1]: http://durandaljs.com/pages/downloads/
[Link 2]: http://durandaljs.com/version/latest/HTML%20StarterKit.zip
[Knockout]: http://knockoutjs.com/
[http_durandaljs.com_get-started.html]: http://durandaljs.com/get-started.html