【Dojo 1.x】笔记1 入门
Dojo是个框架 ,是个js框架,现在除了这一点什么都不知道,就这么上手了。
ps:不建议Web初学者看我的笔记,这个要有一定积累才能看。
在<body>标签内写这么一点代码:
<body>
<h1 id="greeting">Hello</h1>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="async: true"></script>
</body>
按下F12,没报错,算是用CDN引用成功了Dojo。
如果F12报错无法访问dojo.js,请到BootCDN引用,现在暂时不自己开本地服务器引用,以后再说。
1. AMD:异步模块
自1.7起,Dojo就启动了AMD异步模块定义的支持,原因是为了更好地支持大型复杂Web程序。
可见,Dojo是一个重量级框架。
2. 全局函数
算是加载了dojo.js这个文件后的两个入口吧,是两个全局函数:define和require
上面提及,Dojo支持异步模块定义了,那么define就能定义一个模块,而requie就能用你定义的模块。
——有关为什么用define和require这种奇怪的写法,请阅读http://dojotoolkit.org/documentation/tutorials/1.10/modern_dojo/
通常,模块是一个简单的js文件。
以下通过简单的HTML DOM操作来演示define和require,Dojo中操作DOM的模块是'dojo/dom', 'dojo/dom-construct'两个。
demo
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head> <body>
<h1 id="greeting">Hello</h1>
<script src="https://cdn.bootcss.com/dojo/1.10.4/dojo.js" data-dojo-config="async: true"></script> <script>
require(
[
'dojo/dom',
'dojo/dom-construct'
],
function(dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<em> Dojo!</em>', greetingNode);
}
);
</script>
</body> </html>
我换掉了CDN引用,这样会快一些。
可见HTML文本改变了,引用了dom和dom-construct两个模块后,就能用dom.byId这个方法和domConstruct.place这个方法进行DOM操作了。
代码解释
require有两个参数。
第一个是字符串数组,代表模块的id(或者带路径的模块名称),为什么是这样写,请学习AMD知识或者node.js或者前端js模块化编程。如果下载了SDK,是能在文件夹里找到dom.js和dom-construct.js这两个文件的。
第二个是回调函数。回调函数的参数就是以上引入的模块。回调函数的参数的名字可以自定义,但是顺序是和第一个字符串数组的模块顺序一致的。
由于AMD机制和异步操作,这就意味着,等待模块加载完成后,回调函数才会正式运作,但是这是自动的,在后台自己做完一切。大可不必管交叉调用js文件和模块的问题,AMD机制自己会在后台完成模块之间的交叉调用问题。
3. 说两句话
理解异步操作、js模块化,是Dojo学习中相当重要的。与普通的js框架不同,Dojo更合适开发复杂的大型Web平台。
有兴趣的同学可以学习一下ES6的模块化编程,或者学习一下npm+webpack这种新型的后端写法,node.js也是可以看看的。
目前只学到这里,暂时还是双击打开html文件查看代码成果,下一个笔记就要用本地服务器打开了,可以用IIS,也可以用XAMPP,无所谓。
暂时等这种静态写法学完后,就试着用npm包管理机制写一写试试,混搭Vue什么的。
【Dojo 1.x】笔记1 入门的更多相关文章
- python学习笔记--Django入门四 管理站点--二
接上一节 python学习笔记--Django入门四 管理站点 设置字段可选 编辑Book模块在email字段上加上blank=True,指定email字段为可选,代码如下: class Autho ...
- WebSocket学习笔记——无痛入门
WebSocket学习笔记——无痛入门 标签: websocket 2014-04-09 22:05 4987人阅读 评论(1) 收藏 举报 分类: 物联网学习笔记(37) 版权声明:本文为博主原 ...
- Java学习笔记之---入门
Java学习笔记之---入门 一. 为什么要在众多的编程语言中选择Java? java是一种纯面向对象的编程语言 java学习起来比较简单,适合初学者使用 java可以跨平台,即在Windows操作系 ...
- Bootstrap笔记--快速入门
首先是Bootstrap的简介: 业余了解:下面这个网址可以查询IP地址的地理位置 下面学习:(具体可以参考Bootstrap中文网) 栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流 ...
- DBFlow框架的学习笔记之入门
什么是DBFlow? dbflow是一款android高性的ORM数据库.可以使用在进行项目中有关数据库的操作.github下载源码 1.环境配置 先导入 apt plugin库到你的classpat ...
- MongoDB学习笔记:快速入门
MongoDB学习笔记:快速入门 一.MongoDB 简介 MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统.在高负载的情况下,添加更多的节点,可以保证服务器性能.M ...
- 学习笔记_J2EE_SpringMVC_01_入门
1. 概述 笔者作为一个不太正经的不专业佛教信仰者,习惯了解事物的因果关系,所以概述就有点BBB...了.如果不喜欢这些的,请自行跳过概述章节,直接进入第二章的操作实践:2 入门示例. 1.1. ...
- dubbo入门学习笔记之入门demo(基于普通maven项目)
注:本笔记接dubbo入门学习笔记之环境准备继续记录; (四)开发服务提供者和消费者并让他们在启动时分别向注册中心注册和订阅服务 需求:订单服务中初始化订单功能需要调用用户服务的获取用户信息的接口(订 ...
- SpringBoot学习笔记<一>入门与基本配置
毕业实习项目技术学习笔记 参考文献 学习视频 2小时学会Spring Boot:https://www.imooc.com/learn/767 学习资料 SpringBoot入门:https://bl ...
随机推荐
- 轻量级C#网络通信组件StriveEngine —— C/S通信开源demo(附源码)
前段时间,有几个研究ESFramework网络通讯框架的朋友对我说,ESFramework有点庞大,对于他们目前的项目来说有点“杀鸡用牛刀”的意思,因为他们的项目不需要文件传送.不需要P2P.不存在好 ...
- 原生JS实现下拉刷新
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- CSS Media媒体查询使用大全,完整媒体查询总结
前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查 ...
- [Swift]LeetCode28. 实现strStr() | Implement strStr()
Implement strStr(). Return the index of the first occurrence of needle in haystack, or -1 if needle ...
- [Swift]LeetCode103. 二叉树的锯齿形层次遍历 | Binary Tree Zigzag Level Order Traversal
Given a binary tree, return the zigzag level order traversal of its nodes' values. (ie, from left to ...
- [Swift]LeetCode207. 课程表 | Course Schedule
There are a total of n courses you have to take, labeled from 0 to n-1. Some courses may have prereq ...
- [Swift]LeetCode979. 在二叉树中分配硬币 | Distribute Coins in Binary Tree
Given the root of a binary tree with N nodes, each node in the tree has node.val coins, and there ar ...
- SQL执行错误#1064---保留字错误
CREATE TABLE IF NOT EXISTS `change` ( `id` INT NOT NULL AUTO_INCREMENT, `creator` VARCHAR(45) NOT NU ...
- visual studio git for coding
直接放图吧 双击存储库项目进入Git操作页面 点击之后输入你要发布的git地址 选择你的操作 如果你登录的密码错了 就需要去修改 否则永远都pull失败 打开控制面板 在这里修改
- java基础(三)-----java的三大特性之多态
面向对象编程有三大特性:封装.继承.多态. 封装隐藏了类的内部实现机制,可以在不影响使用的情况下改变类的内部结构,同时也保护了数据.对外界而已它的内部细节是隐藏的,暴露给外界的只是它的访问方法. 继承 ...