于洋的dojo2学习笔记(2.第一个dojo应用)

前置条件

@dojo/cli 命令行工具应该全局安装(参见学习笔记1)

编译和启动程序

在程序目录中运行

dojo build --mode dev --watch memory --serve

或者运行简化代码

dojo build -m dev -w memory -s

浏览http://localhost:9999 查看启动的网页(一头旋转的龙~~)

网页内容

删除初始化的内容

在src路径下修改index.html,title变为<title>我的第一个dojo2</title>,神奇的是:不用重启应用,第一次修改是自动刷新的,第二次修改需要手动刷新(这是怎么回事?)

然后,把"Hello, Dojo World!"修改为"你好!豆粥!"

/src/widgets中打开HelloWorld.ts

看到

v('div', { classes: css.label }, ['Hello, Dojo World!'])"

先改成"你好!豆粥!"试下!(不用刷新,自动生效!与修改title不同的是,无论修改几次,都是自动生效的!)

v函数指示 Dojo 2 创建一个 HTML 元素,这段代码创建一个<div>元素, 并在其中添加文字"Hello, Dojo World!"。 教程中接下来将构建一个页面,在这个页面中能查看 Biz-E 公司的员工列表, 所以我们更新标签和信息。

现在,我们再回过头来看v函数。 我们有意避免使用document.createElement来创建 DOM 元素 (Document Object Model)。 这是因为我们不会直接创建 DOM 元素。 相反,我们创建一个视图(view)的中间层,然后 Dojo 2 能高效的将这个视图转换为 DOM 元素, 并在页面中渲染出来。 这个渲染技术就是所谓的 virtual DOM(虚拟dom)。

Dojo 2 中,我们使用 Maquette 这个 virtual DOM 库提供的很多高效的方法来与 DOM 元素交互。 使用 virtual DOM 的额外好处是它促使你编写出 reactive 风格的代码,而这种风格的代码会简化你的程序

在dojo教程最后部分,我们将学习如何为 virtual DOM 节点设置属性。

虚拟DOM 属性

现在我们将为早先创建的 HelloWorld.ts 文件中的 <h1> 元素增加属性。 这些属性可作为v 函数的第二个参数传入。

return v('h1', { title: 'I am a title!' }, [ 'Biz-E-Bodies' ]);

注意,我们在 tag 和内容参数中间添加了一个参数。 第二个参数可以往元素中设置任意属性。 这种使用 JavaScript 或 TypeScript 创建 DOM 元素的方法被称为HyperScript, 这种技术应用在很多 virtual DOM 实现中。 

但是,原来的css样式没有了,字不好看了,排版也有问题

不管怎么说,能够正常运行,我们开了个好头...

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
分三个包上传时,第三个包好像传不上去,我给整合了一下,打在一个包里上传了! dojo精品中文教程 Dojo.1.0 Practice Note [1] 什么是dojo 选择dojo的理由 AJAX架构之Dojo篇 Adding Ajax中文版 (DoJo) DOJO学习笔记(七)-日期控件DropdownDatePicker和DatePicker DOJO常用的验证函数 Dojo with Adobe AIR Dojo 工具包教程 Dojo 快速安装 Dojo和JSON建立无限级AJAX动态加载的功能模块树 Dojo学习笔记( 模块与包) Dojo学习笔记-- djConfig解说 Dojo学习笔记-- dojo.dom Dojo学习笔记-- dojo.event & dojo.event.topic & dojo.event.browser Dojo学习笔记--DateTextbox Dojo学习笔记--Dojo的基础对象和方法 Dojo学习笔记--FisheyeList鱼眼效果 Dojo学习笔记--TabContainer Dojo学习笔记--ValidationTextbox Dojo学习笔记--dijit.Dialog Dojo学习笔记--dijit.Menu Dojo学习笔记--dijit.TitlePane Dojo学习笔记--dijit.Tooltip Dojo学习笔记--dijit.Tree Dojo学习笔记--dojo.graphics.color & dojo.uri.Uri Dojo学习笔记--dojo.string & dojo.lang Dojo学习笔记--动态生成widget Dojo学习笔记--开发自己的TitlePane Dojo学习笔记--页面部分区域遮挡,DialogUnderlay Dojo学习笔记(五)-djConfig详解 dojo data 接口详解 dojo0.9 使用心得 dojo学习笔记(一)-dojo.io.IO & dojo.io.BrowserIO) dojo学习笔记(三) dojo学习笔记(二) dojo.lang.array & dojo.lang.func & dojo.string.extras dojo学习笔记(六)- ContentPane dojo学习笔记(四) dojo的拖拽示例以及疑问! 介绍dojo事件 使用 Dojo 工具包和 JSON-RPC 构建企业 SOA Ajax 客户端 利用Dojo实现拖动(Drag and Drop)效果
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值