基于cloneNode的组件模版思想

引：

看了一下 YUI 源码架构，发现似乎没有像 Extjs 一样存在一个模版模块，如Ext.template ，而是大量利用了浏览器提供的克隆功能，如同原型设计模式般得到相似的组件（节点）实例，而不用每次重复构建相同的DOM节点，实际也是一种模版思路。

 

实战：

 

在这个思想下，我尝试实验一个基于clone模版的阴影功能 ：

 

演示@googlecode

阴影即是在一块区域后面的一片灰色区域，做的好的话还可以圆角边等花样，看一下 windowlite ：采用 extjs 的阴影样式而构建圆角阴影：

 

 

原理即是在window 层下放一 div 里面元素组成圆角背景，略大于 window，从而透出 window 形成阴影边框。

阴影层实现 html 代码:

 

<div class="x-shadow" id="ext-gen58" style="z-index: 10000; left: 593px; top: -277px; width: 587px; height: 298px; display: block;">
			<div class="xst">
				<div class="xstl">
				<div class="xstc" style="width: 575px;">
				<div class="xstr">
			</div>
			<div class="xsc" style="height: 286px;">
				<div class="xsml">
				<div class="xsmc" style="width: 575px;">
				<div class="xsmr">
			</div>
			<div class="xsb">
				<div class="xsbl">
				<div class="xsbc" style="width: 575px;">
				<div class="xsbr">
			</div>
		</div>

 

其中 width，height 根据window 的大小而动态调整。

若以 extjs 一类的模版实现，可将此段html设为模版，大小位置参数填充，不同的window，根据该模版填充参数创建不同的阴影层即可。

 

 

cloneNode 模版：

 

若采用 clone 的原型设计，可以页面开始就建立该层（原型层），不同的window建立时，只需 clone 原型层，并修改相应的属性即可，程序更方便简单。

 

步鄹

1.页面开始原型层建立

 

<div class="x-shadow" id="shadowTemplate" style="z-index: 10000; left: -9999px; top: -9999px; display:block;">
			<div class="xst">
				<div class="xstl"></div>
				<div class="xstc"></div>
				<div class="xstr"></div>
			</div>
			<div class="xsc">
				<div class="xsml"></div>
				<div class="xsmc"></div>
				<div class="xsmr"></div>
			</div>
			<div class="xsb">
				<div class="xsbl"></div>
				<div class="xsbc"></div>
				<div class="xsbr"></div>
			</div>
		</div>

 

2.每次 window 建立 需要新的原型层时克隆原型层，并修改相应属性

 

//克隆原型层
function createShadow(style){
			var s1=Ext.getDom("shadowTemplate").cloneNode(true);
			s1.id="s"+Ext.id();
			Ext.fly(s1).setStyle(style);
			var width=Ext.fly(s1).getComputedWidth()-12,
			height=Ext.fly(s1).getComputedHeight()-12;
			var h1=Ext.fly(s1).child(".xstc",true),
			h2=Ext.fly(s1).child(".xsbc",true),
				h4=Ext.fly(s1).child(".xsmc",true),
			h3=Ext.fly(s1).child(".xsc",true);
			h1.style.width=width+"px";
			h2.style.width=width+"px";
			h4.style.width=width+"px";
			h3.style.height=height+"px";
			return s1;
		}

		Ext.onReady(function(){
			var s1=createShadow({
				display:"block",
				left:"10px",
				top:"10px",
				width:"100px",
				height:"100px"
			});
			Ext.getBody().dom.appendChild(s1);	
			
			var s1=createShadow({
				display:"block",
				left:"10px",
				top:"210px",
				width:"100px",
				height:"100px"
			});
			Ext.getBody().dom.appendChild(s1);
		});

 

3.将克隆后的层DOM节点插入到合适位置即可。

 

 

实践2：

 

tabpanellite 中支持两种使用方式

1。直接从markup中渐进增强过来

2。完全由javascript生成一切

对于2，使用模版节点的做法:

Ext.ux.TabPanelLite.template = function() {

    var holder = document.createElement("div");
	holder.className="tabpanel";
    holder.innerHTML = ""
    + "<div class='tabheader'>"
    + "<ul class='tabpanel_nav clearfix'><ul></div><div class='panels'></div>";
    return {

        getSkeleton: function() {
            return holder.cloneNode(true);
        },
        getPanel: function() {
            var p = document.createElement("div");
            p.className = "panel";
            return p;
        },
        getTab: function(active) {
            var li = document.createElement("li");
            li.innerHTML = "" +
            "<a class='tab_left' href='#' hideFocus='on'>"
            + "	<em class='tab_right'>"
            + "		<span class='tab_inner'>"
            + "			<span class='tab_text'>??"

            + "			</span>"
            + "		</span>"
            + "	</em>"
            + "	</a>";
            return li;

        }

    };

} ();