Durandal入门学习笔记(一)

最新推荐文章于 2019-11-29 10:54:55 发布

meijory

最新推荐文章于 2019-11-29 10:54:55 发布

阅读量2.6k

点赞数

分类专栏： durandal 文章标签： durandal 模块化 JS框架

本文链接：https://blog.csdn.net/meijory/article/details/53762884

版权

durandal 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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采用RequireJS来构建模块，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的行为的模块。

meijory

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Durandal入门学习笔记(一)

Durandal学习笔记(一) Durandal是一个轻量级的JavaScript框架，其目标是单页面应用（SPAs）的开发变得简单而优雅。它支持MVC、MVP和MVVM等模式，因此不论你采用哪种类型的前端架构，Durandal都能胜任。1.简介 Durandal以RequireJS为基础.鼓励模块化的编程方式。在Durandal应用中，所有的JS代码都写在模块中。 Dura
复制链接

扫一扫