本文讨论下Discuz里的DIY功能是如何实现的。DIY功能分两部分。一是由站长设置网页上的DIY，我们称之为门户DIY。二是由各用户自己设置的个人空间首页上的DIY。我们这里主要讨论前者。后者较前者而言相对简单。一个空白的门户页的模板内容异常的简单 (template/default/portal/index.htm): <!--{template common/header}--> <style id="diy_style" type="text/css"></style> <div class="wp"> <!--[diy=diy1]--><div id="diy1" class="area"></div><!--[/diy]--> </div> <script src="misc.php?mod=diyhelp&action=get&type=index&diy=yes&r={echo random(4)}" type="text/javascript"></script> <!--{template common/footer}--> 当我们在它上面加了框架和模块后，它的模板就变成类似下面的内容： (data/diy/template/default/portal/index.htm ) <!--{template common/header}--> <style id="diy_style" type="text/css"></style> <div class="wp"> <!--[diy=diy1]--> <div id="diy1" class="area"> <div id="frame897w19" class="frame move-span cl frame-1-1-1"> <div class="title frame-title"> <span class="titletext">1-1-1框架</span> </div> <div id="frame897w19_left" class="column frame-1-1-1-l"> <div id="frame897w19_left_temp" class="move-span temp"></div> <!--{block/36}--> <!--{block/35}--> </div> <div id="frame897w19_center" class="column frame-1-1-1-c"> <div id="frame897w19_center_temp" class="move-span temp"></div> </div> <div id="frame897w19_right" class="column frame-1-1-1-r"> <div id="frame897w19_right_temp" class="move-span temp"></div> </div> </div> </div> <!--[/diy]--> </div> <!--{template common/footer}--> 在这个例子里，我们在门户页上加了一个1-1-1框架，并在该框架的左列加了两个模块:

这个DIY的设置保存在数据库的数表 common_diy_data 里，而其中每个模板的设置都存在数表 common_block 里。加上DIY设置内容的模板保存在文件 data/diy/template/default/portal/index.htm里，它对应的模板缓存文件是data/template/1_diy_portal_index.tpl.php里，两者的内容非常类似。 <?php if(!defined('IN_DISCUZ')) exit('Access Denied'); hookscriptoutput('index'); block_get('36,35'); ?> <?php include template('common/header'); ?> <style id="diy_style" type="text/css"></style> <div class="wp"> <!--[diy=diy1]--> <div id="diy1" class="area"> <div id="frame897w19" class="frame move-span cl frame-1-1-1"> <div class="title frame-title"> <span class="titletext">1-1-1框架</span> </div> <div id="frame897w19_left" class="column frame-1-1-1-l"> <div id="frame897w19_left_temp" class="move-span temp"></div> <?php block_display('36');?> <?php block_display('35');?> </div> <div id="frame897w19_center" class="column frame-1-1-1-c"> <div id="frame897w19_center_temp" class="move-span temp"></div> </div> <div id="frame897w19_right" class="column frame-1-1-1-r"> <div id="frame897w19_right_temp" class="move-span temp"></div> </div> </div> </div> <!--[/diy]--> </div> <?php include template('common/footer'); ?>

从DOM元素结构看： area frame move-span title frame-title column move-span temp move-span block move-span block column move-span temp column move-span temp 从界面上可以看出DIY功能只能在有area风格类的div元素内使用。为了叙述的方便，我们称有area风格的元素为DIY区域，有frame风格类的元素为框架，有column类的元素为列，有block风格类的元素为模块。那么一个DIY区域里从上往下可以有多个框架，一个框架里从左到右可以有多个列，一个列里从上到下可以有多个框架或模块。

DIY功能由三个文件提供common_diy.js, portal_diy.js, 和space_diy.js。前者提供DIY的基础包括如何拖曳来调整DIY区域里的框架和模板的位置，后两者在此基础上分别提供门户和个人空间的DIY功能包括如何添加新框架和新模板到DIY区域里去。

common_diy主要提供了两个类： DIY和Drag。DIY提供的是关于DIY的功能，而Drag提供与拖曳有关的功能。在portal_diy和space_diy里分别造了一个Drag类的对象drag，和一个DIY类的对象spaceDiy。

common_diy.js里定义了 Frame框架类，Column列类，和Block模块类

Drag应该是common_diy.js里最主要的类。它里面含有很多成员：

• data：记载顶层框架的数组，该数组的key是一个DIY区域的ID，值是该区域内顶层框架数组
• overObj: 鼠标所在的框架或模块DOM元素，或着更准确的说是和鼠标所在位置最近的框架或模块DOM元素
• dragObj: 当前拖曳的DOM元素
• tmpBoxElement: 这个DOM元素代表了在拖曳过程中如果拖曳就此结束的话，被拖曳元素会落到的位置

它还跟踪和处理了各种鼠标事件，拖曳的功能和效果就是对这些事件的处理产生的。

• onmouseover => initDragObj：如果鼠标位于一个可移动物体上，将鼠标显示为move形状
• onmousedown => dragStart：按鼠标的位置决定被拖曳的物件
• onmousemove => drag：在拖曳过程中，不断更新被拖曳物体的位置和tmpBoxElement的位置
• onmouseup => dragEnd：将被拖曳的物体放入tmpBoxElement的位置

门户DIY的特有功能
门户DIY的一个特有功能是用户可以选择要添加的框架和模板的类型，然后将选中的类型拖到DIY区域里。这个拖曳过程和在DIY区域里通过拖曳来调整它上面的框架和模块的位置的过程有所不同。所以在portal_diy.js里给Drag物体添加了一个叫createObj的函数，在开始拖曳时它产生了一个dragObj 来代表着被拖曳的东西， 其内容取决于被拖东西的类别：框架，tab框架，还是模块，由下面三个函数提供：

• getFrameHtml
• getTabHtml
• getBlockHtml

以最后一个函数为例： getBlockHtml : function () { var id = 'block'+Util.getRandom(6); var str = '<div id="'+id+'" class="block move-span"></div>'; str += '</div>'; return str; } 另外createObj还给各种鼠标事件添加了Drag类提供的处理程序。它还指明当拖曳结束后要调用函数 getBlockData。 } else if (objType == 'block') { html = this.getBlockHtml(contentType); offWidth = 200; this.fn = function (e) {drag.getBlockData(contentType);}; 当拖曳结束后，dragObj 里的内容就加到了拖曳到的位置里。然后调用的getBlockData打开了一个对话窗，让用户设置要添加的新模块。 showWindow('showblock', 'portal.php?mod=portalcp&ac=block&op=block&classname='+blockname+'&bid='+bid+'&eleid='+eleid+'&tpl='+document.diyform.template.value,'get',-1); 在服务器端这个请求由portalcp_block.php来处理，对话窗里里第一个TAB"编辑模块"的内容是function_block.php中的函数 block_fetch_content 提供的，而模板 portalcp_block.htm 不止包含里该内容，还包含了一个函数： function succeedhandle_showblock (url, message, values) { var bid = values['bid']; var eleid = typeof values['eleid'] == 'undefined' ? 0 : values['eleid']; var x = new Ajax(); var openTitle = 0; drag.setClose(); x.get('portal.php?mod=portalcp&ac=block&op=getblock&forceupdate=1&bid='+bid+'&tpl=portal/index&inajax=1', function(s) { var obj = document.createElement('div'); bid = 'portal_block_'+bid; obj.innerHTML = s; if ($(bid) != null) { drag.stopSlide(bid); if($(bid+'_content')) $(bid+'_content').parentNode.removeChild($(bid+'_content')); $(bid).innerHTML = obj.childNodes[0].innerHTML; if(s.indexOf('runslideshow();') > 0) { runslideshow(); } } else { $(eleid).parentNode.replaceChild(obj.childNodes[0],$(eleid)); openTitle = 1; } drag.initPosition(); evalscript(s); if (openTitle == 1) drag.openTitleEdit(bid); }); hideWindow('showblock'); } 当用户设置完模块点击提交按钮后，网页向服务器发送了类似下面的一个ajax post请求: portal.php?mod=portalcp&ac=block&op=block&classname=space_doing&bid=&blocktype=0&eleid=blockHULUdI&tpl=portal/index 那时服务器产生了一个新模块，它的回复包含了新模块的ID，并调用了函数succeedhandle_showblock： <script type="text/javascript" reload="1">if(typeof succeedhandle_showblock=='function') {succeedhandle_showblock('portal.php?mod=portalcp&ac=block&op=block&bid=30', '操作成功 ', {'bid':'30','eleid':'blockPLD4hR'});}</script> 这个函数向服务器发送了类似下面的一个ajax get请求： portal.php?mod=portalcp&ac=block&op=getblock&forceupdate=1&bid=30&tpl=portal/index&inajax=1 得到的回复是这个新模块里的内容，所以加到了这个新模块内。接着它又调用了openTitleEdit函数来得到对话窗里下一个TAB"编辑模块标题"里的内容。