簡略的前端架構(gòu)心得&&基于editor為例子的編碼小技巧

更新時間：2010年11月25日 20:31:17 作者：

這一陣事情有點(diǎn)多，沒來的及更新神馬東西。今天分享兩個ppt吧。主要內(nèi)容是關(guān)于一些編碼的小技巧，另一個關(guān)于前端架構(gòu)的一些些東西。

比較粗糙簡略。感興趣的同學(xué)可以看看。稍微貼下主要內(nèi)容吧：

這是第一份ppt主要的內(nèi)容。具體東西我就不多貼了，對這幾個方面感興趣的同學(xué)可以下載來看看，既然是基于editor為例子的ppt，這里我也附上一個簡單的利用execCommand命令做的簡易的demo，editor的原理在demo里都能看出來。這里附上代碼：
<!doctype html>

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<style type="text/css"> 
.wp { 
width: 500px; 
} 
.bar { 
margin-bottom: 8px; 
} 
.con { 
border: 2px solid #ccc; 
} 
.block { 
overflow: hidden; 
height: 1%; 
} 
.controler { 
float: left; 
margin-right: 6px; 
border: 1px solid #999; 
height: 20px; 
width: 20px; 
text-align: center; 
font-size: 14px; 
font-weight: bold; 
} 
</style> 
</head> 
<body> 
<script type="text/javascript"> 
var Class = { 
create : function () { 
return function () { 
this.init.apply(this, arguments); 
} 
} 
}, 
H$ = function(i) {return document.getElementById(i)}, 
$CE = function() { 
var div = document.createElement('div'); 
return function(html) { 
div.innerHTML = html; 
var el = div.childNodes[0]; 
div.removeChild(el); 
return el; 
} 
} (); 
var Editor = Class.create(); 
Editor.prototype = { 
init : function(id) { 
var c = []; 
c[0] = ['bold', 'B']; 
c[1] = ['italic', 'I']; 
this.t = H$(id); 
this.t.style['display'] = 'none'; 
this.i = $CE('<iframe frameBorder="0" width="500" height="200"></iframe>'); 
var wp = $CE('<div class="wp"></div>'), 
bar = $CE('<div class="bar block"></div>'), 
con = $CE('<div class="con"></div>'), 
self = this; 
for (var i=0; i<c.length; i++) { 
var btn = $CE('<a class="controler">'+c[i][1]+'</a>'); 
bar.appendChild(btn); 
btn.onclick = (function(i){ 
return function () { 
self.action(c[i][0]); 
} 
})(i); 
if (!+"\v1") {btn.unselectable = 'on'} // IE下一定要設(shè)置unselectable = 'on' 
} 
this.t.parentNode.insertBefore(wp, this.t); 
con.appendChild(this.t); 
con.appendChild(this.i); 
wp.appendChild(bar); 
wp.appendChild(con); 
this.e = this.i.contentWindow.document || this.i.contentDocument; 
this.e.designMode = 'on'; 
this.e.open(); 
this.e.close(); 
}, 
action : function (cmd, val) { 
this.e.execCommand(cmd, 0, val || null); 
} 
} 
</script> 
<textarea id="test"></textarea> 
<script type="text/javascript"> 
new Editor('test'); 
</script> 
</body> 
</html> 