创建dojo组件之程序式与声明式style区别

Email:longsu2010 at yeah dot net

近来我们服务的对象总是遇到在HTML标签上写style不生效的问题，所以花了一点时间研究了一下，请往下看。

问题描述：dojo组件一般都支持程序式和声明式，在写HTML标签的时候可能会写style，但是有时候style根本没有效果，先看HTML标签是怎么写的：

程序式（创建组件的锚点）：<div id="widget_id_p" style="some-style"></div>

声明式：<div data-dojo-type="widget-type" data-dojo-props="widget-options" style="some-style"></div>

原因说明（分情况）：

1、无模板。如果组件是一个无模板组件那么在创建组件的时候该组件可能使用声明该组件的HTML标签作为模板，所以这时候写在标签上的style会生效。

2、有模板。

A)程序式会忽略写在锚点标签上的样式，原因是组件创建时候会直接替换掉创建锚点。可以使用如下方法指定样式：

new Some_Widget({ style : { height : '200px' } },'widget_id_p');

B)声明式会保留样式，解析程序（dojo/parser）会读取样式（原因可能是向后兼容，dojo以前是没有data-dojo-props这个属性，声明式的配置项与其他HTML属性混在一起）。值得注意的是data-dojo-props中同样可以指定样式，效果就与程序式指定style配置项相同。当data-dojo-props和写在HTML标签上的style属性同时存在时，相同的样式前者优先级高。

注：

1、关于创建模板规则会在将来的博客中讲述

2、下面是我做的例子中的关键代码，若要运行请适当做调整（可将代码放在与dojo、dijit、dojox同级的demos目录下的xx子目录运行之）。

<!DOCTYPE HTML>
<html>
<head>
	<Meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title></title>
	<link rel="stylesheet" href="../../dijit/themes/black/document.css"/>
	<link rel="stylesheet" href="../../dijit/themes/black/claro.css"/>

<script type="text/javascript">
	var dojoConfig = {
		async:true,parSEOnLoad:false,paths:{'demos':'../demos'},deps:["dijit/dijit-all"],callback: function() {
			require(["dojo/parser","dijit/layout/ContentPane","dijit/form/DateTextBox"],function(parser,panel,text){
				parser.parse();
				new panel({},'panel');
				new text({},'text');
			}); 
		}
	}
</script>
<script type="text/javascript" src="../../dojo/dojo.js"></script>

</head>
<body class="claro">
<!-- 无模板的ContentPane，程序式和声明式样式都会生效 -->
<div id="panel" style="width:200px;height:200px;border:1px solid green;"></div>

<!-- 有模板的DateTextBox， 程序式样式没生效 -->
<div id="text" style="width:200px;height:200px;border:1px solid green;"></div>

<!-- 有模板的DateTextBox， 声明式样式生效 -->
<div data-dojo-type="dijit.form.DateTextBox" style="width:200px;height:200px;border:1px solid green;"></div>
<!--  有模板的DateTextBox， 声明式同时在style属性和data-dojo-props指定样式data-dojo-props优先级更高 -->
<div data-dojo-type="dijit.form.DateTextBox" style="width:200px;height:200px;border:1px solid green;" data-dojo-props="style:{width:'200px',height:'28px',border:'1px solid red'}"></div>
</body>
</html>

创建dojo组件之程序式与声明式style区别

猜你在找的Dojo相关文章