超简单实现 .NET开发类似Web Parts的功能(2)_.Net教程

推荐：数据访问层的第一种实现:Access SQL
经过上面篇文章的介绍，整个系统的框架算是基本搭建完了，下面，我们要具体实现各个层次。关于数据访问层的实现，我准备讨论三种实现方式，这一篇文章讨论第一种：Access 动态生成SQL。 顾名

//核心代码：拖拽开始回掉函数

//关闭定时器，通过之前记录的module属性得到整个大<div>元素，调用aA()
//函数计算所有box的偏移值。记录

head_i.onDragStart=function(af,ag) {
//关闭定时器

clearInterval(ap);
//通过之前记录的module属性得到整个大box的<div>元素
var module_i=this.module;
//计算页面上所有其它box的偏移值

aA(module_i);
//将下一个box的<div>元素记录下来
module_i.origNextSibling=module_i.nextSibling;
//得到移动的<div>，指定到鼠标位置，从隐藏状态显示出来

//使用alpha filter将透明度设置为80,填充好内容和CSS

//createDiv()生成一个DIV
var module_i_copy=createDiv();
module_i_copy.style.left=getOffset(module_i,true);
module_i_copy.style.top=getOffset(module_i,false);
module_i_copy.style.height=module_i.offsetHeight;
module_i_copy.style.width=module_i.offsetWidth;
module_i_copy.style.display="block";
module_i_copy.style.opacity=0.8;
module_i_copy.style.filter="alpha(opacity=80)";
module_i_copy.innerHTML=module_i.innerHTML;
module_i_copy.className=module_i.className;
//设置dragged为false
this.dragged=false
};

//核心代码：拖拽中回掉函数
//全部由aG函数实现拖拽过程中的移动和“补位”

head_i.onDrag=function(af,ag) {
setModulePos(this.module,af,ag);
//设置dragged为true
this.dragged=true
};

//核心代码：拖拽结束函数

head_i.onDragEnd=function(af,ag) {
if (this.dragged) {
//被拖拽叻，设置动态回位效果，把box安定下来
ap=aD(this.module,150,15)
} else {
//box仅仅被鼠标点叻一下超级链接，需要提供正常

//的超级链接被点击效果
ax();
if (this.href) {
if (this.target){
window.open(this.href,this.target)
} else {
document.location=this.href
}
}
}
this.target=null;
this.href=null;
//拖拽工作最后一步，取回box内的内容
if (this.module.nextSibling!=this.module.origNextSibling) {
aI()
}
}
}//second for end
}//first for end
}
/**
* 隐藏浮动的拖拽移动中<div>元素
*/
function ax()
{
createDiv().style.display="none"
}
/** 设置拖拽结束后的box动态回位效果

*/
function aD(a,aa,ab)
{
var ac=parseInt(createDiv().style.left);
var ad=parseInt(createDiv().style.top);
var ae=(ac-getOffset(a,true))/ab;
var af=(ad-getOffset(a,false))/ab;
return setInterval(function(){if(ab<1){clearInterval(ap);ax();return}ab--;ac-=ae;ad-=af;createDiv().style.left=parseInt(ac) "px";createDiv().style.top=parseInt(ad) "px"},aa/ab)
}
/**
* 全局变量colArray为列c_1、c_2和c_3数组（也即三个<td>元素）

* 计算所有可移动的大box（即<div>）距离页面左边的偏移量和
* 距离页面上方的偏移量。对于当前拖拽的box，在其所在列中，
* 所有在它下面的<div>的pagePosTop值需要减去当前拖拽box的高度

*/
function aA(a)
{
for(var aa=0;aa<colArray.length;aa )
{
var ab=0;
for(var ac=0;ac<colArray[aa].childNodes.length;ac )
{
var ad=colArray[aa].childNodes[ac];
if(ad==a)
ab=ad.offsetHeight;
ad.pagePosLeft=getOffset(ad,true);
ad.pagePosTop=getOffset(ad,false)-ab
}
}
}
/**
* 得到某一元素距离页面左边或上边的偏移量

*/
function getOffset(obj,isLeftOffset)
{
var offsetValue=0;
while(obj!=null)
{
offsetValue =obj["offset" (isLeftOffset?"Left":"Top")];
obj=obj.offsetParent
}
return offsetValue
}
/**
* 核心代码，拖拽中处理函数。变量a为box（即<div>元素），aa和ab为偏移量
*/
function setModulePos(obj,posLeft,posTop)
{
var module=null;
var ad=100000000;

//对每一列遍历

for(var i=0;i<colArray.length;i )
{//对每一个<div>box遍历
for(var j=0;j<colArray[i].childNodes.length;j )
{
var module_i=colArray[i].childNodes[j];
//对于正在移动中的box自身，不作处理

if(module_i==obj)
continue;
//计算某些偏移量

var ai=Math.sqrt(Math.pow(posLeft-module_i.pagePosLeft,2) Math.pow(posTop-module_i.pagePosTop,2));
if(isNaN(ai))
continue;
if(ai<ad)
{
ad=ai;module=module_i
}
}
}

//再适当的位置上添加当前移动中的box
if(module!=null&&obj.nextSibling!=module)
{
module.parentNode.insertBefore(obj,module);
//TODO: 这行代码好像不起什么作用

DisplayModule(obj)
}
}
/**
* 在页面上显示变量a的父节点
* TODO: 第一行代码有什么用？

*/
function DisplayModule(obj)
{
obj.parentNode.style.display="none";
obj.parentNode.style.display=""
}
/**
* 构造要取回内容的URL
*/
function aI()
{
var a="";
for(var i=0;i<colArray.length;i )
{
a =a!=""?":":"";
for(var j=0;j<colArray[i].childNodes.length-1;j )
{
var module=colArray[i].childNodes[j];
if(module.id=="" || module.style.display=="none")
continue;
a =module.id.substring(7) ",";
}
}
_sendXMLRequest("mydestop/frmXmlHttp.aspx?MYTABLE=" escape(a),null)
}

// Input 0
/**
* get element
* document.getElementById的封装

* 如果浏览器不支持getElementById方法则返回null
*/
function _getElementById(a)
{
return document.getElementById?document.getElementById(a):null
}
/**
* get elements tag name
* document.getElementsByTagName的封装

* 根据tagName返回数组，*返回所有tag。

* 如果浏览器不支持getElementsByTagName方法，则返回空数组

*/
function _getElementsByTagName(a)
{
return document.getElementsByTagName?document.getElementsByTagName(a):new Array()
}

//标志浏览器是否为Safari
var isSafari=navigator.userAgent.indexOf("Safari")>=0;

/**
* 一个标准的colArrayAX替换页面内容典范
* 变量a为地址，aa为回掉处理函数

*/
function _sendXMLRequest(theURL,aa)
{
var xmlHttpObj=getXMLHttpObj();
if(!xmlHttpObj||isSafari&&!aa)
{//特殊浏览器特殊照顾

(new Image()).src=theURL;
}
else
{//正常的浏览器，用XMLHTTP显示内容
xmlHttpObj.open("GET",theURL,true);
xmlHttpObj.setRequestHeader( "CONTENT-TYPE ", "application/x-www-form-urlencoded ");
xmlHttpObj.send(null);
}
}
/**
* 拿到一个可用的XMLHttpRequest对象
*/
function getXMLHttpObj()
{
var a=null;
if(window.ActiveXObject)
{
a=new ActiveXObject("Msxml2.XMLHTTP");
if(!a)
{
a=new ActiveXObject("Microsoft.XMLHTTP");
}
}
else if(window.XMLHttpRequest)
{
a=new XMLHttpRequest();
}
return a;
}

function _del(a)
{
msg="确认不在桌面上显示该模块么?\n\n您可以通过自定义桌面恢复显示！";
if(window.confirm(msg))
{
var module=_getElementById("module_" a);
if(module)
module.style.display="none";
aI();
}
return false
}

/**
* 查找CSS，将class名字为a的aa自段定义值为ab
* 例如setCSSAttrib("medit","display", "none");
* 则代表将.media的display定义为none
*
*/
function setCSSAttrib(clasName,attrName,attrValue)
{
if(document.styleSheets)
{//浏览器有styleSheets，查找CSS列表并修改

clasName="." clasName;
for(var i=0;i<document.styleSheets.length;i )
{
var classI=document.styleSheets[i];
var rulesI=classI.rules;
if(!rulesI)
{
rulesI=classI.cssRules;
if(!rulesI){return}
}
for(var j=0;j<rulesI.length;j )
{
if(rulesI[j].selectorText.toLowerCase()==clasName.toLowerCase())
{
rulesI[j].style[attrName]=attrValue
}
}
}
}
else
{//浏览器不支持styleSheets，一个元素一个元素地找并修改-_-b
var elementI=_getElementsByTagName("*");
for(var i=0;i<elementI.length;i )
{
if(elementI[i].className==clasName)
{
elementI[i].style[attrName]=attrValue
}
}
}
}

var aC="";

var _pnlo;
var _mod;
var ay=false;

function _upc()
{
// setCSSAttrib("medit","display",_pnlo||_uli?"":"none");
// setCSSAttrib("panelo","display",_pnlo?"":"none");
// setCSSAttrib("panelc","display",_pnlo?"none":"");
// setCSSAttrib("mod","display",_mod?"":"none");
// setCSSAttrib("unmod","display",_mod?"none":"");
//如果_pl为true，并且_uli和_pnlo有一个为true，则设置mttl CSS的鼠标形状为移动
//如果ay又为false，则把id为c_1、c_2和c_3的这三个元素构成一个数组，传给initHead()函数
//initHead()函数负责对c_1、c_2、c_3这三个元素下的所有id以_h结尾的子元素设置拖拽事件代码
//然后把ay设置为true确保initHead()函数只调用一次。之后对mttl CSS设置鼠标形状为move
// if(_pl&&(_uli||_pnlo))
{
if(!ay)
{
initHead([_getElementById("col_l"),_getElementById("col_r")]);
ay=true
}
setCSSAttrib("TableHeader","cursor","move")
}
}

var aq=0;

var colArray=[];
var ap=0;
var am=null;

/**
* 如果am为null，将am创建为<div>标签，暂时先不显示，鼠标形状为move，

* 背景为白色，底部padding为0px，直接创建在<body>下。最后返回am
*/
function createDiv()
{
if(!am)
{
am=document.createElement("DIV");
am.style.display="none";
am.style.position="absolute";
am.style.cursor="move";
am.style.backgroundColor="#ffffff";
am.style.paddingBottom="0px";
document.body.appendChild(am)
}
return am
}

分享：依赖注入机制及IoC的设计与实现
我们设计的分层架构，层与层之间应该是松散耦合的。因为是单向单一调用，所以，这里的“松散耦合”实际是指上层类不能具体依赖于下层类，而应该依赖于下层提供的一个接口。这样，上层