dojo自定义Widget
使dojo AMD规范进行widget 定义,开始的时候一直找不到自己定义的widget模块的位置,经过探索,总算有收获,我这个人有毛病,脑子里不允许有一些想不通的问题,一旦有了问题,就非常难受,心里暗自谩骂自己“你怎么笨蛋”,言归正传,关于dojo AMD规范这个网上一大堆,说起来就是按需加载,按照依赖加载,用一个define函数代替了原来的provide,require和declare函数,仔细研究,其实内容还是差不多的,可谓换汤不换药。
现在就简单介绍下这个玩意儿。
AMD是什么
作为一个规范,只需定义其语法API,而不关心其实现。AMD规范简单到只有一个API,即define函数:
define([module-name?], [array-of-dependencies?], [module-factory-or-object]);
其中:
◆ module-name: 模块标识,可以省略。
◆ array-of-dependencies: 所依赖的模块,可以省略。
◆ module-factory-or-object: 模块的实现,或者一个JavaScript对象。
从中可以看到,第一个参数和第二个参数都是可以省略的,第三个参数则是模块的具体实现本身。后面将介绍在不同的应用场景下,他们会使用不同的参数组合。
从这个define函数AMD中的A:Asynchronous,我们也不难想到define函数具有的另外一个性质,异步性。当define函数执行时,它首先会异步的去调用第二个参数中列出的依赖模块,当所有的模块被载入完成之后,如果第三个参数是一个回调函数则执行,然后告诉系统模块可用,也就通知了依赖于自己的模块自己已经可用。如果对应到dojo1.6之前的实现,那么在功能上可以有如下对应关系:
◆ module-name: dojo.provide
◆ dependencies: dojo.require
◆ module-factory: dojo.declare
不同的是,在加载依赖项时,AMD用的是异步,而dojo.require是同步。异步和同步的区别显而易见,前者不会阻塞浏览器,有更好的性能和灵活性。而对于NodeJs这样的服务器端AMD,则模块载入无需阻塞服务器进程,同样提高了性能。
定义的模块可以返回函数也可以返回一个对象,这个要结合实际情况:
define(function () { var privateValue = 0;
return {
increment: function () {
privateValue++;
}, decrement: function () {
privateValue--;
}, getValue: function () {
return privateValue;
}
};
});
上面这个就是返回一个对象,当我们dojoConfig定义了这个包的位置的时候,并且使用了require函数后,就可以在代码中使用了
var
dojoConfig = {
parseOnLoad: true,
packages: [{
"name": "MyTest",
"location": "/MyTest"
}]
}; require(["MyTest/MyTest"], function (MyTest2) {
MyTest2.increment();
alert(MyTest2.getValue());
MyTest2.increment();
alert(MyTest2.getValue()); var x = new MyTest2();//这个是错误的,因为返回的是一个对象
在这里遇到很多问题,第一个就是如何找到自定义的包
dojo在寻找包的时候默认的位置是相对dojo.js的目录的
斜杠的作用,没有斜杠,就是相对于dojo这个目录来说的
dojoConfig = {
parseOnLoad: true,
packages: [{
"name": "MyTest1",
"location": "MyTest"}]
};
既然知道了是相对dojo.js文件的目录,那么就可以用相对路径,或者直接放到dojo.js文件所在的目录中:
修改方法:用相对路径/或者直接放到dojo下面去(迁移不方便)
var
dojoConfig = {
parseOnLoad: true,
packages: [{
"name": "MyTest1",
"location": "../../../MyTest"
}]
};
var
dojoConfig = {
parseOnLoad: true,
packages: [{
"name": "MyTest1",
"location": "/Scripts/dojo-release-1.8.3/MyTest"}]
};
在程序中可能往往会用下面的表示方式
var
dojoConfig = {
parseOnLoad: true,
packages: [{
"name": "MyTest1",
"location": location.pathname.replace(/\/[^/]+$/, "") + "/MyTest"
}]
};
获取的其实是当前html文件所在的目录,
不用/开始的就表示相对路径。
相对路径问题:注意:相对路的文件夹符号是斜杠:/
location获取的是当前html文件所在的位置,如果是根路径,那么location.pathname.replace(/\/[^/]+$/, "")返回的是一个空的字符串,可以看到这个路径跟上面第一个是一样的。下面是location对象的图解:
下面看一个复杂的,也就是返回的是一个函数的情况,在这里我和同事讨论了半天,为什么有的可以用new,有的不可以,这就要看返回的到底是什么。
define(["dojo/_base/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin", "dojo/text!./HTMLTemplate.htm", "dojo/dom-style",
"dojo/_base/fx", "dojo/_base/lang"],
function (declare, WidgetBase, TemplatedMixin, template, domStyle, baseFx, lang) {
return declare( [WidgetBase, TemplatedMixin], { name: "liu",
age: 25,
templateString: template,
baseClass: "",
basebackgroundColor: "#fff",
constructor: function (options) {
declare.safeMixin(this, options);
// console.log("1 step");
// this.name = options.name;
// this.age = options.age;
}, postCreate: function () { var domNode = this.domNode; // Run any parent postCreate processes - can be done at any point
this.inherited(arguments); //domStyle.set(domNode, basebackgroundColor) },
_setNameAttr: function (av) {
if (av != "") { this._set("name", av);
}
},
_setAgeAttr: function (av) {
if (typeof av == 'number' && av.constructor == Number) {
if (av > 0 && av < 100) {
this._set("age", av);
} }
} }) })
下面这个是可以正确执行的
<div data-dojo-type="MyTest/JScriptemplate" data-dojo-props="name:'liu',age:15">press me</div>
另外一个和同事争论的就是如果在定义的模块中没有定义构造函数,采用编程式的时候,也可以传递参数?只要在创建对象的时候采用json格式的去写,是没有问题的,这估计是dojo内部做了匹配。大家可以将上面的构造函数去掉,尝试下。
require(["MyTest/JScriptemplate"], function (ss) {
var x = new ss({ "a": "3", "b": 9 });
alert(ss.a);
alert(ss.b);
})
模板文件很简单了:
<div>
<span>${name}</span>
<span>${age}</span>
</div>
dojo自定义Widget的更多相关文章
- yii2——自定义widget
参考资料:http://www.bsourcecode.com/yiiframework2/how-to-create-custom-widget-in-yii2-0-framework/ 如何使 ...
- Webappbuilder自定义widget模板
Webappbuilder自定义widget模板 by 李远祥 到\\widgets\samplewidgets目录下拷贝 CustomWidgetTemplate 文件并重命名为MyWidget 设 ...
- 关于dojo自定义类
dojo自定义类时,只要没有在constructor函数中传参改变的变量,都属于静态变量,因此不能用this.访问,而是直接用变量名访问
- Flutter实战视频-移动电商-44.详细页_首屏自定义Widget编写
44.详细页_首屏自定义Widget编写 把详细页的图片.标题.编号和价格形成一个单独的widget去引用 详情页的顶部单独封装个插件 在pages下面新建detials_page的文件件并在里面新建 ...
- django-xadmin自定义widget插件(自定义详情页字段的显示样式)
有时候我们想要修改xadmin详情页字段的显示方式,比如django默认的ImageField在后台显示的是image的url,我们更希望看到image的缩略图:再比如django将多对多字段显示为多 ...
- dojo新建widget步骤----主要针对widget路径
一,新建目录 二,新建文件 三,写urtil widget代码 四,写RedTextDialog代码 五,写HTML代码 =====================如有不懂,结合http://blog ...
- Thingworx SDK开发自定义Widget
Thingworx自带的图表数量有限,样式也很有限,在echarts上看到了这样一个非常简单的图表,下面将做一个简单的静态引入示范 首先创建Thingworx项目 然后右键ui新建widget 自动生 ...
- Flutter 目录结构介绍、入口、自定义 Widget、MaterialApp 组件、Scaffold 组件
Flutter 目录结构介绍 文件夹 作用 android android 平台相关代码 ios ios 平台相关代码 lib flutter 相关代码,我们主要编写的代 码就在这个文件夹 test ...
- Android学习笔记_54_自定义 Widget (Toast)
1.Toast控件: 通过查看源代码,发现Toast里面实现的原理是通过服务Context.LAYOUT_INFLATER_SERVICE获取一个LayoutInflater布局管理器,从而获取一个V ...
随机推荐
- SecureCRT 7 注册码
Name: Sherrill Ray Company: 空 Serial Number:03-40-084141 License Key: ABWGUE ZPPZ6X XHTN2S 1N7PER A ...
- PHP实现http与https转化
http://zyan.cc/post/142/ 最近在写PHP程序时,需要使浏览器在https和http之间转化,上网搜索相关信息,无奈只有最近在写PHP程序时,需要使浏览器在https和http之 ...
- Web前端开发:SQL Jsp小项目(二)------添加修改
沿着昨天整理好的页面,今天实现list页面中的修改, User update框架 需要的效果图: 先看用户查询界面, 修改id为4的那个用户: 修改后返回用户查看界面. 1 .先是从list界面开始, ...
- Merge Into For Update Example
Merge Into article aa Using ( SELECT md5_id, Min(article_id) as Min_Article_ID from article )) and s ...
- 使用resumable.js上传大文件(视频)兵转换flv格式
前台代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Video.asp ...
- Sublime Text3一些安装和使用技巧
ST3是一款很好的编辑软件,他不仅仅是能编辑前端代码,包括JS,PHP,HTML,CSS等,还能编辑JAVA,C++等常用后代编辑语言.因为本人写前端,本篇文章只介绍ST3的一些前端的技巧. 对于ST ...
- Windows下lex 与 yacc的使用(2)
Windows下lex 与 yacc的使用 ...
- sgu 107 987654321 problem
其实挺水的,因为两个数平方,只有固定的后面几位数会影响到最后结果的后面几位数.也就是说,如果想在平方之后尾数为987654321,那么就有固定的几个尾数在平方后会是这个数,打个表,发现 10^8 内 ...
- centos coreseek 快速安装
CoreSeek快速安装: 安装前,建议查看:源码包说明README:4.0/4.1版可参考3.2版本安装,步骤相同:如遇到问题,请看详细安装说明. ##下载coreseek:coreseek 3.2 ...
- keepalived+haproxy-部署高可用负载均衡
环境: 准备两台机子,安装haproxy及keepalive都一样,只是配置不一样而已. 这里只说明一台机子上安装haproxy及keepalive. ======================== ...