所有的网站都要用htmlu做吗,深圳集智邦是网站建设公司,建公司,如何建立网站会员系统#xff08;73#xff09;封装一个widget 醒目#xff1a;必须在web环境下使用#xff0c;无论是python的web.py或者是通过http访问网站环境#xff0c;都可以#xff0c;但纯本地是不可行的。 首先#xff0c;什么是widget#xff1f; 简单来说#xff0c;就是一个do… 73封装一个widget 醒目必须在web环境下使用无论是python的web.py或者是通过http访问网站环境都可以但纯本地是不可行的。 首先什么是widget 简单来说就是一个dom结点比如像这样 div这是一个dom结点
/div 为什么需要widget呢 很简单比如我们想在这样一个地方 div classnodes/div 添加很多个上面那个dom结点比如像这样。 div classnodesdiv这是一个dom结点/divdiv这是一个dom结点/div
/div 或者在很多地方添加这一个dom结点。 解决办法① 我们可以这么直接把他写在HTML里 优点 ①复制粘贴到所有需要他的地方非常简单 缺点 ①假如这个结点非常的复杂可能还有一些事件比如点击后弹一个弹窗什么的我们要ctrl c、ctrl v很多次 ②假如产品经理突然说让我们把这个改一下吧因此我们可能需要在很多地方进行修改但也有可能忘记把某个地方的改掉 解决办法② 封装一个widget 优点 ①上面的缺点都不是问题了 缺点 ①假如这个结点很简单比如就上面一行那么这么写反而复杂了。 封装方法 ①基础是上面的类的继承我们需要继承一个类这个类就是widget的基础类 类dijit/_WidgetBase ②其次我们需要一个模板类这个模板做什么用的呢很简单是帮我们省去重复工作的我们使用这个类于是就可以省去重复写创建dom结点的工作了只需要修改模板内的东西即可。 ③为了说的更简单点我给一个基础类声明其创建方式是类的封装具体见之前的71 代码如下 define([dojo/_base/declare,dijit/_WidgetBase,dijit/_TemplatedMixin,dojo/text!template.html], function (declare, _WidgetBase, _TemplatedMixin, template) {return declare(template, [_WidgetBase, _TemplatedMixin], {name: 这是一个模板的文件, //替换模板内的${name}位置baseClass: templateClass, //模板的根div的css类templateString: template, //这个template就是模板的内容通常这么写就没错了postCreate: function () { //渲染模板还有给他加事件就放在这一步了this.inherited(arguments); }});
}); define引入的第一个插件是声明类 第二个插件是widget 第三个插件是模板类 第四个是模板指向一个html 第五个是on用于绑定触发事件的 同样为了简单说明有以下前提 新建的文件和dojo文件夹、dijit文件夹等在同一个根目录下包括 《1》调用类的html文件 《2》类的声明的js文件 《3》类的模板文件 ④首先创建一个test.html文件这个html文件是调用类的html文件 我们还需要创建一个类文件test.js这个js文件声明一个类 我们最后创建一个模板文件template.html这个文件作为模板 ⑤首先给出模板文件的html内容 divdiv data-dojo-attach-pointnode classnode${name}/div
/div 其中 data-dojo-attach-point可以通过这个属性找到该结点可以理解为id一样的东西同一个模板文件内不能重复 class就是其类就像正常的div的class属性一样 ${name}在js文件里可以通过某个变量来控制他可以理解为那个变量的值就是${name}显示的东西 ⑥接下来给出js文件 define([dojo/_base/declare,dijit/_WidgetBase,dijit/_TemplatedMixin,dojo/text!template.html,dojo/on], function (declare, _WidgetBase, _TemplatedMixin, template, on) {return declare(template, [_WidgetBase, _TemplatedMixin], {name: 这是一个模板的文件, //替换模板内的${name}位置baseClass: templateClass, //模板的根div的css类templateString: template, //这个template就是模板的内容通常这么写就没错了postCreate: function () { //渲染模板还有给他加事件就放在这一步了this.inherited(arguments);this.aEvent();},aEvent: function () {var self this;on(this.node, click, function () {self.node.innerHTML br——添加了一些内容;})}});
}); 我简单解释一下这个js文件 《1》aEvent是这个widget绑定的一个方法凡是使用这个widget的地方都会自动绑定这个事件。之所以能自动绑定是通过postCreate这个方法调用的原因。 《2》postCreate是创建widget必然会被执行的函数不需要我们手动调用这个函数是通过递归被执行的总之知道他肯定会被执行就是了 他是创建widget被执行的一系列的函数之一准确的说是倒数第二个倒数第一个是startup一般是被手动调用的 《3》这个widget展现出来的作用是。挂载某一个html的dom结点之上然后点击文字部分的时候会触发一个事件而这个事件的效果是增加一行文字文字内容就是innerHTML里面添加的内容。这个事件可以被无限次触发 ⑦最后给出test.html文件的内容 !DOCTYPE html
html
headmeta charsetutf-8
/head
scriptvar dojoConfig {async: true}/script
script srcdojo/dojo.js/script
scriptrequire([test], function (test) {var te new test({}, base);})
/script
style.node {border: 1px solid #ccc;}
/style
body
div idbase/div
/body
/html 我调用这个widget的方法很简单require一个test实际是test.js那个文件然后在回调函数传参给他然后new一个test就是创建一个widget但这个widget放在哪里呢很简单test的第二个参数就是widget被放置的地方因为idbase是相符的。 最后 因为某些人可能没法创建web环境因此给一个示例地址 http://www.jianwangsan.cn/test.html ps这是我的个人网站理论上来说应该是没有毒的吧。。。。
