我们对任何事物的了解都是从感性认识开始的,所以在这里我们也用一个经典的“Hello world!”示例来表现Dojo的使用。
![]()
![]()
很简单,页面上一个按钮,点击按钮后,跳出一个显示Hello World信息的对话框。
<html>
<head>
<title>Hello World</title>
<style type="text/css">
@import "../dojoroot/dojo1.0.2/dijit/themes/tundra/tundra.css";
@import "../dojoroot/dojo1.0.2/dojo/resources/dojo.css"
</style> <!--(1)-->
<script type="text/javascript" src="../dojoroot/dojo1.0.2/"
djConfig="parseOnLoad: true, isDebug: true"></script><!--(2)-->
<script type="text/javascript">
dojo.require("dojo.parser"); <!--(3)-->
dojo.require("dijit.form.Button"); <!--(4)-->
</script>
<script type="text/javascript">
dojo.addOnLoad(function(){
dojo.connect(dojo.byId('helloBtn'),
'onclick',
function(){
alert("Hello world!");
}
)
});<!--(5)-->
</script>
</head>
<body class="tundra">
<button dojoType="dijit.form.Button" id="helloBtn">Say Hello</button><!--(6)-->
</body>
</html>
|
(1) <style type="text/css">
@import "../scripts/dojo-1.0.2/dijit/themes/tundra/tundra.css";
@import "../scripts/dojo-1.0.2/dojo/resources/dojo.css"
</style>
引入css样式表的定义文件,示例使用的是dojo自带的css样式。可替换成我们自定义的样式文件。
(2) <script type="text/javascript" src="../scripts/dojo-1.0.2/dojo/dojo.js"
djConfig="parseOnLoad: true, isDebug: true"></script>
① 确定dojo.js文件的相对路径,由此确定使用dojo的方式编程,这是必需的。
② djConfig="parseOnLoad: true" 与(3)中的 dojo.require("dojo.parser");一起配合来使页面能使用Dojo的解析架构。
③ djConfig是Dojo内置的一个全局对象,可以通过它来控制Dojo的行为。在本示例中,isDebug是djConfig的一个属性,设置是否为debug模式,如果为真,则console.debug的输出有效,这在开发时很有用,在发布时建议设置为false。
(4) dojo.require("dijit.form.Button");声明将要使用的dojo的组件类型。类似Java中的import语句
(5) <script type="text/javascript">
dojo.addOnLoad(function(){
dojo.connect(dojo.byId('helloBtn'),
'onclick',
function(){
alert("Hello world!");
}
)
});
</script>
① dojo.addOnLoad表示在HTML页面加载后执行脚本程序
② dojo.connect用于连接事件处理器(某一个函数)到一个元素或者一个对象。
(6) <button dojoType="dijit.form.Button" id="helloBtn">Say Hello</button>这是在页面中定义一个要使用的按钮控件,由dojoType属性指明可复用到的dojo组件类型是dijit.form.Button
在页面中声明组件的方式可以像上面的示例一样,直接在标签中用dojoType对应的属性值来表明该组件对应的类型以及可实现的功能。
除此之外还有另一种实现方式,编程实现。
标签式实现需要在页面开发的时候,就要确定组件的类型、传入的参数,编程方式与之相比较就具有了更大的灵活性,参数可以动态生成以及页面与业务逻辑分离等多种好处。
下面我们用编程方式来举例来实现之前Hello World页面同样的功能。
<html>
<head>
<title>Hello World</title>
<style type="text/css">
@import "../dojoroot/dojo1.0.2/dijit/themes/tundra/tundra.css";
@import "../dojoroot/dojo1.0.2/dojo/resources/dojo.css"
</style> <!--(1)-->
<script type="text/javascript" src="../dojoroot/dojo1.0.2/"
djConfig="parseOnLoad: true, isDebug: true"></script><!--(2)-->
<script type="text/javascript">
dojo.require("dojo.parser"); <!--(3)-->
dojo.require("dijit.form.Button"); <!--(4)-->
</script>
<script type="text/javascript">
function constructHelloBtn(){
var btnOutDiv=dojo.byId("btnOutDiv");
helloBtnDiv=document.createElement("div");
var helloBtn=new dijit.form.Button({id:"helloBtn",label:"Say Hello"},helloBtnDiv);
btnOutDiv.appendChild(helloBtn.domNode);
return helloBtn;
}
dojo.addOnLoad(function(){<!--(5)-->
var helloBtn=constructHelloBtn(); <!--(7)-->
dojo.connect(dojo.byId('helloBtn'),
'onclick',
function(){
alert("Hello world!");
}
)
});
</script>
</head>
<body class="tundra">
<div id="btnOutDiv"></div><!--(6)-->
</body>
</html>
|
标识(1)(2)(3)(4)的形式、含义与之前完全一致,这里不再赘述。我们把关注点主要集中在(5)(6)(7)上。
先看(6),标签式实现要确定该组件的dojoType,以及参数,比如id。而编程方式实现只是定义一个html div组件作为将来放置动态生成的dojo组件的外层容器,唯一的id是为了将来查找该div做准备。
(5)处还是dojo.addOnLoad函数,表示在HTML页面加载时执行脚本程序,与之前代码不同的是,多了var helloBtn=constructHelloBtn();语句来构建一个按钮组件的实例。深入到自定义的constructHelloBtn()函数内部,我们可以看到,首先查找到在(6)处定义的div容器,之后新建一个dijit.form.Button的实例,其中设置id,label参数。这里是简单实现,我们可以想见其他诸如参数从某个配置文件动态读取后传入的方式。最后是把生成的该组件实例放入到外层div容器中用以显示。
分享到:
相关推荐
实训商业源码-付费进群自动定位版本-毕业设计.zip
单级热电制冷器件,全球前20强生产商排名及市场份额(by QYResearch).pdf
实训商业源码-Turbo Website Reviewer SEO分析报告工具源码-毕业设计.zip
内容概要:本文详细介绍了利用COMSOL进行铌酸锂波导倍频(PPLN)仿真的方法和技术难点。首先讨论了材料设置中非线性系数d33的空间调制方式,推荐使用tanh函数代替sign函数以提高收敛性。接着阐述了波导结构的选择和模式分析的关键步骤,强调了正确设置边界条件的重要性。对于网格划分提出了在极化周期交界处局部加密的方法,并解释了分步求解策略以节省内存。最后,作者提醒注意相位匹配条件以及考虑实际器件制造中的工艺误差对转换效率的影响。 适合人群:从事非线性光学研究、光子学器件设计的研究人员和工程师。 使用场景及目标:帮助读者掌握COMSOL软件中针对PPLN结构的仿真技巧,优化仿真流程,提升仿真准确性,解决实际项目中可能遇到的问题。 阅读建议:由于文中涉及大量具体的操作细节和技术要点,建议读者结合自己的项目背景仔细研读每个部分的内容,并尝试将所学应用到实践中去。
PLOT2222222222
内容概要:本文介绍了“19永磁直驱风机+混合储能+PQ逆变并网”系统,这是一种集成永磁直驱风机、混合储能设备和PQ逆变器的综合性解决方案,旨在实现可再生能源的高效利用和电网的稳定并网。文中详细阐述了各组件的工作原理及其协同效应,强调了该系统在提高能量转换效率、增强电网稳定性和改善供电质量方面的优势。通过对实际应用效果的分析,展示了该系统在低风速环境下的稳定输出能力、混合储能系统的削峰填谷作用以及PQ逆变器的智能调控和保护功能。 适合人群:从事新能源研究和技术开发的专业人士,关注绿色能源发展的科研工作者和政策制定者。 使用场景及目标:适用于风电场建设、分布式能源系统规划等领域,旨在推动可再生能源的广泛应用,促进电网的智能化和稳定性。 其他说明:随着可再生能源的发展,该系统有望在全球范围内获得更广泛的应用,成为未来能源领域的重要组成部分。
内容概要:本文详细介绍了商用车P2并联混合动力系统的HCU(整车控制器)控制策略及其建模方法。首先探讨了模式切换策略,针对不同工况如车辆速度、电池电量等因素进行模式选择。接着深入讲解了扭矩分配策略,考虑到了温度变化以及坡道情况对扭矩分配的影响。此外,还讨论了能量回收策略,利用预测性制动提高能量利用率。最后提及了故障降级策略,确保系统在出现故障时能够快速响应。文中提供了多个具体代码片段来辅助理解和实施这些策略。 适合人群:从事汽车电子控制系统开发的技术人员,尤其是专注于混合动力系统的研究人员和工程师。 使用场景及目标:帮助开发者将理论性的功能规范转化为实际可用的控制模型,适用于商用车P2并联混合动力系统的开发过程中,旨在提升系统的效率和平顺性。 其他说明:建议读者在实践中不断调整和完善模型参数,以适应不同的应用场景和技术要求。同时,在构建模型时应注意保持良好的可追溯性和验证性,以便后续维护和改进。
OpenAI Agents SDK
干式无油螺杆空压机,2024年前13大企业占据全球78%的市场份额.pdf
实训商业源码-多功能水果外卖电子商务手机模板-毕业设计.zip
.NET Framework 3.5(Windows server系统)
电子设计竞赛相关资源
电子设计竞赛相关资源
膜用聚砜,全球前9强生产商排名及市场份额(by QYResearch).pdf
信號完整性小技巧 #2 EYE CONTOUR.pdf
常规S参数与共模差模S参数转换
实训商业源码-UNIAPP开发的软件市场多端源码-毕业设计.zip
内容概要:本文详细介绍了LMS(LabVIEW Multifunctional System)测试系统在模态分析和锤击实验中的应用。首先解释了LMS系统及其核心功能——模态分析,这是一种用于确定结构振动特性的关键技术,可以获取固有频率、阻尼比和模态形状等参数。接着阐述了锤击实验的具体步骤,包括实验准备、数据采集、激励与响应记录、数据分析和结果解读。文中还简要介绍了LMS系统中使用的软件工具,涵盖数据导入、滤波与去噪、频域分析、模态识别与提取等功能。最后强调了模态分析和锤击实验在结构设计、优化和故障诊断中的重要作用。 适合人群:从事机械工程、振动与噪声分析的技术人员,尤其是需要掌握模态分析和锤击实验的应用工程师。 使用场景及目标:适用于希望深入了解LMS系统在模态分析和锤击实验中的具体应用,提升结构设计和故障诊断能力的专业人士。目标是在实际工作中更好地利用LMS系统进行振动与噪声分析。 其他说明:本文不仅提供了理论知识,还详细描述了实验操作流程,帮助读者更好地理解和应用相关技术。
内容概要:本文详细介绍了使用MATLAB 2021b进行手写数字图像识别的深度学习入门教程。主要内容涵盖从加载MNIST数据集到构建并训练卷积神经网络(CNN)的全过程。首先展示了如何读取和预览数据集,接着逐步讲解了CNN各层的设计思路及其功能,如卷积层、批规范化层、ReLU激活函数以及池化层的作用。随后,演示了如何将数据集划分为训练集和验证集,并设置训练选项来启动模型训练。此外,还提供了提取和展示中间层特征图的方法,帮助理解CNN的工作机制。最后,评估了模型性能并通过混淆矩阵直观地展示了分类效果。 适合人群:初学者和希望快速掌握MATLAB环境下深度学习应用的研究人员或学生。 使用场景及目标:适用于希望通过实际操作加深对深度学习理论和技术的理解,特别是对于想要了解CNN架构及其在图像识别任务中具体应用的人群。 其他说明:文中提供的代码片段可以直接在MATLAB环境中执行,便于读者跟随教程动手实践。同时,强调了模型训练过程中需要注意的问题,如过拟合现象的监控等。
内容概要:本文详细介绍了博世汽车电驱仿真模型的技术细节,涵盖同步电机和异步电机的相电流波形优化、自动弱磁FOC控制、正反转切换电流稳定性和铁损计算等方面。文中展示了MATLAB和C语言编写的自动化控制脚本,以及Python编写的高效铁损计算方法。特别强调了在高转速条件下保持电流波形的稳定性,以及通过动态磁滞模型提高铁损计算精度。 适合人群:从事电动汽车驱动系统研究的专业人士、电机控制系统工程师和技术研究人员。 使用场景及目标:适用于需要深入了解和应用先进电机控制技术和仿真的场合,如电动汽车动力系统的开发和测试。目标是掌握先进的FOC控制算法和优化技术,提高电机性能和效率。 其他说明:文章不仅提供了理论背景,还包括具体的实现代码片段,便于读者理解和实际操作。