最近在研究HTML5在Ubuntu Kylin中的应用,快速学习了下Durandal框架。求了解和掌握该框架的童鞋跟贴、完善。
http://durandaljs.com/
http://durandaljs.com/pages/get-started/
Durandal是一个小巧的JavaScript框架,用于创建简单而优雅的单页面应用(SPA)。该项目不准备重复造轮子,因此建立在已知的和大家喜爱的库,如jQuery、 Knockout和RequireJS。
Durandal可用于任何后端或没有后端的场景。开发所需的包括:必要的脚本库,模块和目录结构。
一、安装与设置
1、 .Net开发人员
适用于.net背景和使用Visual Studio的开发人员
• 安装VS2012和2012 web tools,下载vsix文件并安装
• 使用命令Install-Package Durandal.StarterKit
2、Node.js用户
以Ubuntu为例:
• 安装npm包管理软件
sudo apt-get install npm
• 安装nodejs:
npm install -g n
• 安装supervisor:便于调试
npm install -g supervisor
• 安装mimosa
npm install -g mimosa
• 安装Bower
npm install -g bower
bower install durandal
• 创建新的Durandal项目
mimosa skel:new durandal path/to/your/new/project/folder
• 启动后台服务
make start
• 查看效果
在浏览器中输入:localhost:3000
3、手动设置
• 直接下载原始的开始项目文件:http://durandaljs.com/version/latest/HTML%20StarterKit.zip
• 直接打开index.html文件(firefox浏览器,其它浏览器需要启动web服务器)
无论是在线还是手动设置,最终得到一个示例性的项目目录,在该项目目录结构的基础之上进行修改可以生成得到用户自己的项目。
二、概 述
示例程序Durandal StarterKit建立了一个基本的导航类型的架构,包含几个基本的页面。只需创建模块和视图并放到对应的目录,同时在router中注册即可添加用户自己的页面。
1、目录结构
• App
∘ viewmodesl/ 放置js代码,即模块,包含应用相关的代码。
∘ views/ 放置html模板文件,即视图,负责页面布局
∘ main.js 然后js文件,相当于main函数
• index.html
首页页面,定义的applicationHost用户host用户视图,script标签用于指定程序入口,即/app/main.
2、main.js
通用步骤
• 配置ReqireJS
• (可选)打开调试、配置插件,设置标题
• 调用app.start()
• 配置应用相关的conversions
• 配置第三方库
• 设置应用的root
3、viewmodesl/shell.js
利用router注册所需页面
router: router,
activate: function () {
router.map([
{ route: ‘’, title:‘Welcome’, moduleId: ‘viewmodels/welcome’, nav: true },
{ route: ‘flickr’, moduleId: ‘viewmodels/flickr’, nav: true }
]).buildNavigationModel();
return router.activate();
这个文件对应shell.html,正是整个网页的根页面。
4、Model-View结构
如上所述,只需创建模块和视图并放到对应的目录viewmodels 和 views,同时在router中注册即可添加用户自己的页面。
三、学习小结
掌握基于Durandaljs框架的编程技术的核心在于:
• 掌握HTML、CSS和JavaScript的语法及通用编程框架
• 熟悉掌握Durandaljs的API和第三方库,能够熟练的应用到网页开发
• 学会和习惯用JS操作HTML模板的开发模式
类似的开发模式为PHP+HTML,但凡高级点的CMS系统都是通过PHP操作HTML模板的方式动态生成页面的。