Durandal入门学习笔记(一)
Durandal学习笔记(一)
Durandal是一个轻量级的JavaScript框架，其目标是单页面应用（SPAs）的开发变得简单而优雅。它支持MVC、MVP和MVVM等模式，因此不论你采用哪种类型的前端架构，Durandal都能胜任。
1.简介
Durandal以RequireJS为基础.鼓励模块化的编程方式。在Durandal应用中，所有的JS代码都写在模块中。
Durandal是一个纯JavaScript库，独立于任何服务端平台.
2.下载HTML Starter Kit
Starter Kit演示了一个基本的导航架构，包括导航、页面历史、数据绑定、模态对话框等等。
可以直接在官网下载HTML Starter Kit查看示例程序。下载完HTML Starter Kit后，解压缩，你就可以直接在Firefox各版本中打开index.html页面，运行其示例程序了。 或者你也可以将其部署到Web服务器中，浏览其index页面。
3.应用与详解
3.1示例1 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应用中，所有的JS代码都写在模块中。当模块加载器完成初始化后，它通过data-main属性的值来启动应用。
就像C语言中的main函数一样，data-main属性指向的是主模块，是整个应用的入口。
3.2创建模块
创建一个名为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-2.3.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');
});
});- requirejs.config
用于配置模块系统，使其能够找到核心库。当我们引用“jQuery”时，模块系统就知道到哪里去加载它。
路径的配置包括requirejs的text插件（用于加载视图）、Durandal的核心模块、Knockout和jQuery。
- 定义应用主模块
Durandal应用的所有代码都写在模块中，并且按照以下格式：
define(function (require) {
var someModule = require('some/module');
...other modules required here...
return someValue;
});用define函数来创建一个模块。它的参数是另一个函数，这个函数是模块的工厂。
这个函数的返回值将是模块的一个实例。
当函数返回一个对象时，你可以创建单例对象模块。
或者返回一个函数，你可以创建一个类构造器模块。
另外，你也可以声明该模块依赖于其他模块，此时你需要使用require函数来引入其他模块。
在上面的主模块代码中，引入或者说require了两个Durandal模块：system和app。
system模块开启框架的调试功能。
app模块设置应用的标题。（加载两个可选的插件）
最后调用start方法启动应用。
当它结束时，调用一个特殊的方法：setRoot。
当setRoot方法被调用时，才会真正去展示页面。你可以将root视为应用的主窗口、主布局或者应用的shell。该方法的参数指向一个包含shell的行为的模块。