簡略的前端架構(gòu)心得&&基于editor為例子的編碼小技巧
更新時(shí)間：2010年11月25日 20:31:17 作者：
這一陣事情有點(diǎn)多，沒來的及更新神馬東西。今天分享兩個(gè)ppt吧。主要內(nèi)容是關(guān)于一些編碼的小技巧，另一個(gè)關(guān)于前端架構(gòu)的一些些東西。
比較粗糙簡略。感興趣的同學(xué)可以看看。稍微貼下主要內(nèi)容吧：
這是第一份ppt主要的內(nèi)容。具體東西我就不多貼了，對這幾個(gè)方面感興趣的同學(xué)可以下載來看看，既然是基于editor為例子的ppt，這里我也附上一個(gè)簡單的利用execCommand命令做的簡易的demo，editor的原理在demo里都能看出來。這里附上代碼：
<!doctype html>
<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>
大家可以自行考到本地去演示，很簡單的一個(gè)例子，提供一個(gè)思路而已。
下面提供第一個(gè)ppt的下載： 【點(diǎn)擊這里下載《關(guān)于js的一些小技巧》】
【阿里中國站前端架構(gòu)史--略談】
以下為ppt部分內(nèi)容：
這是第一份ppt主要的內(nèi)容。具體東西我就不多貼了，對這幾個(gè)方面感興趣的同學(xué)可以下載來看看，既然是基于editor為例子的ppt，這里我也附上一個(gè)簡單的利用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>
大家可以自行考到本地去演示，很簡單的一個(gè)例子，提供一個(gè)思路而已。
下面提供第一個(gè)ppt的下載： 【點(diǎn)擊這里下載《關(guān)于js的一些小技巧》】
【阿里中國站前端架構(gòu)史--略談】
以下為ppt部分內(nèi)容：
感興趣的同學(xué)可以看看。
文件打包下載地址
相關(guān)文章
JavaScript設(shè)計(jì)模式策略模式案例分享
這篇文章主要介紹了JavaScript設(shè)計(jì)模式策略模式案例分享，策略設(shè)計(jì)模式就是指一個(gè)問題匹配多個(gè)解決方法，不一定要用到哪一個(gè)，而且有可能隨時(shí)增加多個(gè)方案2022-06-06
這篇文章主要介紹了微信小程序生成二維碼的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
JavaScript實(shí)現(xiàn)郵箱地址自動(dòng)匹配功能代碼
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)E-mail郵箱地址自動(dòng)匹配功能代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
針對jQuery、Ext、KISSY三者類庫的對比及分析已經(jīng)很多了，但多數(shù)是從功能和設(shè)計(jì)的角度切入，因此本篇文章決定換一個(gè)特殊的角度，從各類庫的頂層對象名的鍵盤輸入的體驗(yàn)上來對這三個(gè)類庫進(jìn)行比較。2010-10-10
JSONObject-lib包是一個(gè)beans,collections,maps,java arrays和xml和JSON互相轉(zhuǎn)換的包，本文給大家介紹jsonobject使用方法相關(guān)知識，感興趣的朋友一起學(xué)習(xí)吧2015-12-12
百度有啊通欄展示大家并不陌生吧，下面與大家分享下具體的實(shí)現(xiàn)js代碼，感興趣的朋友可以參考下哈2013-05-05
由淺到深了解JavaScript類...2006-09-09
這篇文章主要介紹了JavaScript生成有縮進(jìn)的表格代碼的相關(guān)資料,代碼簡單易懂，非常具有參考價(jià)值，需要的朋友可以參考下2016-06-06
微信小程序swiper組件用法實(shí)例分析【附源碼下載】
這篇文章主要介紹了微信小程序swiper組件用法,結(jié)合實(shí)例形式分析了微信小程序中swiper組件的功能、使用方法,并附帶完整源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
javascript 通用loading動(dòng)畫效果實(shí)例代碼
這篇文章主要介紹了javascript 通用loading動(dòng)畫效果實(shí)例代碼，有需要的朋友可以參考一下2014-01-01