推薦：數據訪問層的第一種實現: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的設計與實現
我們設計的分層架構，層與層之間應該是松散耦合的。因為是單向單一調用，所以，這里的“松散耦合”實際是指上層類不能具體依賴于下層類，而應該依賴于下層提供的一個接口。這樣，上層