說實(shí)話我有點(diǎn)吃驚，用js寫的對話效果在當(dāng)天都就被多個專題收錄，而且直接被推薦到首頁。我怎么也沒有想到隨便寫的一個小例子會這么受關(guān)注，莫非是因為貼圖的關(guān)系？
嘛，無所謂這些小細(xì)節(jié)了。
既然如此，我們就把這個對話效果做得完善一些吧。上一節(jié)《從案例中學(xué)習(xí)JavaScript》之實(shí)現(xiàn)對話效果 中，我們主要通過 setInterval 方法做了一個輪詢，從而實(shí)現(xiàn)了字符串的動畫打印效果。但是，還不夠完善，比如，一旦字符長度超過了div的邊界，文字就會溢出。當(dāng)然，你可以給div加上一個 overflow：hidden 的樣式，可是這樣的話，就無法完整地顯示出對話了。
我們開始逐步解決這個問題，最終實(shí)現(xiàn)的效果就是，文字填滿對話框的時候，自動停住，需要用戶手動去點(diǎn)擊一下，然后進(jìn)行下一段對話。
本章主要講函數(shù)的封裝。
本節(jié)涉及的知識點(diǎn)：
- 函數(shù)的封裝技巧
下節(jié)涉及的知識點(diǎn)：
- div元素的 scrollHeight 和 clientHeight
- 開關(guān)變量的使用技巧
有朋友反應(yīng)說案例文章太長，因此我決定多分幾章來寫，爭取每一篇都能把東西徹底講清楚，而又不至于看起來太累。
追求精煉和簡潔。
我希望通過本文，讓那些剛踏入 js 巨坑的朋友們徹底明白如何快速，有效地封裝一個方法。當(dāng)然，等你熟練了以后就無所謂了，愛怎么寫怎么寫。
好了，開始吧。
1. 頁面重構(gòu)
本期我對之前的頁面進(jìn)行了一次重構(gòu)，我在原先的innerBox里面又嵌套了一個div，目的是為了讓文字區(qū)域的定位顯得更加靈活。不像之前那樣緊挨著邊框，不是太美觀。
現(xiàn)在的效果：
對了，目錄結(jié)構(gòu)也做了一些調(diào)整：
代碼如下：
css
body {
background: url(../img/bg.jpg) no-repeat;
background-size: 100%;
}
.dialog {
width:100%;
height:100px;
background:rgba(136,180,251,0.5);
position:absolute;
bottom: 0;
}
.dialog .pic {
width:60px;
height:60px;
background:url(../img/1.png) no-repeat;
background-size: 100%;
display:inline-block;
position: absolute;
top:16px;
left:16px;
border-radius: 5px;
}
.dialog .innerBox{
width:90%;
height:80px;
border:2px solid #dcc0a5;
opacity: 0.8;
left:85px;
top:10px;
position: absolute;
border-radius: 5px;
font-family: 微軟雅黑;
color:#fff;
text-shadow: 1px -1px 1px #333;
padding:2px;
}
.dialog .innerBox #content {
background: #E10482;
margin:2px 10px 10px 10px;
width:95%;
height:99%;
ine-height:25px;
overflow: hidden;
font-size: 20px;
}
html：
<body>
<div class='dialog'>
<span class='pic'></span>
<div id = 'innerBox' class='innerBox'>
<div id='content'></div>
</div>
</div>
</body>
這樣就可以靈活地控制文字區(qū)域了，我們的文字就在content區(qū)域顯示出來，定位好后，別忘了將背景色給去掉。
.dialog .innerBox #content {
/*background: #E10482;*/
margin:2px 10px 10px 10px;
width:95%;
height:99%;
ine-height:25px;
overflow: hidden;
font-size: 20px;
}
去掉背景色之后：
對于初學(xué)者，我建議畫圖層的時候先加個背景色，這樣會清晰很多，確定沒問題之后，再把背景色給去掉。當(dāng)然，css高端玩家就忽略我說的話吧。
2. 方法的封裝
讓我們找到上一節(jié)的代碼，開始進(jìn)行方法封裝。
var innerBox = document.getElementsByClassName('innerBox')[0];
var text = 'JavaScript一種直譯式腳本語言，是一種動態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用）網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動態(tài)功能。天空，你也要好好學(xué)習(xí)呀！';
var len = text.length;
var timer = null;
var index = 0;
timer = setInterval(function(){
if(index == len){
clearInterval(timer);
}
innerBox.innerHTML += text.charAt(index++);
},50);
封裝方法我認(rèn)為可以分為以下幾個步驟：
- 零散地寫代碼，先把功能實(shí)現(xiàn)了再說。
- 找不同，就是看哪些地方是不一定的。
- 復(fù)制
- 粘貼
這是我自己總結(jié)出來的，理論我們不多說，我直接上代碼，把我的做法和思路寫出來，你一看就懂了。
2.1 零散地寫代碼，先把功能實(shí)現(xiàn)了再說。
這一步，我們在上一個章節(jié)已經(jīng)實(shí)現(xiàn)。
2.2 找不同，就是看那些地方是不一定的。
這個太簡單了，就是你看一看自己寫的代碼中，哪些東西有可能是動態(tài)的。
讓我們仔細(xì)觀察上面的代碼，最起碼有以下三個地方是不確定的。
首先，獲取的dom元素不確定。我們完全可以傳入一個id，然后再函數(shù)里面用document.getElementById 來包裹一下。其次，需要顯示的文本內(nèi)容不確定。最后，對話的速度也不確定，也就是輪詢的時間間隔，數(shù)值越小，速度越快。
這些不確定的地方 就是 函數(shù)需要傳入的參數(shù)。
所以，一個函數(shù)的模型就出來了。
/**
* 游戲?qū)υ? * @param {string} id 對話框的id
* @param {string} text 對話文本
* @param {number} speed 速度
*/
var gameDialog = function(id,text,speed){
}
2.3 復(fù)制
現(xiàn)在，我們原封不動地將之前的代碼拷貝到函數(shù)里。為了看起來更直觀，我們采用 document.getElementById 的方式來獲取dom元素。源代碼在這里改動一下。
var gameDialog = function(id,text,speed){
var innerBox = document.getElementById('content');
var text = '文本內(nèi)容';
var len = text.length;
var timer = null;
var index = 0;
timer = setInterval(function(){
if(index == len){
clearInterval(timer);
}
innerBox.innerHTML += text.charAt(index++);
},50);
}
是的，原封不懂地復(fù)制。
2.4 粘貼
最后一步就是填空題，小學(xué)題目了，把參數(shù)對好了一個個填進(jìn)去。
ctrl + c ， ctrl + v
ctrl + c ， ctrl + v
ctrl + c ， ctrl + v
var gameDialog = function(id,text,speed){
var innerBox = document.getElementById(id);
var text = text;
var len = text.length;
var timer = null;
var index = 0;
timer = setInterval(function(){
if(index == len){
clearInterval(timer);
}
innerBox.innerHTML += text.charAt(index++);
},speed);
}
OK，完成！
就這么輕松加隨意。
當(dāng)然，可能有人會問，如果不確定的地方很多咋辦，我總不可能寫上十幾個參數(shù)吧。先賣個關(guān)子，以后會詳細(xì)說到。
測試
gameDialog('content',
" 簡書客戶端中包含雜文時政、小說詩歌、電影評論、科技新聞，無論你的興趣如何構(gòu)成，總能在這里找到志趣相投的作者與內(nèi)容。"+
" 簡書始終致力于做中文世界最好的寫作與閱讀平臺，集結(jié)最優(yōu)秀的創(chuàng)作者與文字愛好者，在嘈雜喧囂的網(wǎng)絡(luò)時代，重新沉淀并喚醒文字的力量。"
,38);
封裝的好處不言而喻，我們只需要傳入?yún)?shù)，打個括號就可以直接調(diào)用方法了，不再需要每次都把實(shí)現(xiàn)代碼寫一遍，這樣極大程度上實(shí)現(xiàn)了代碼的復(fù)用。
本章結(jié)束 ...
剽悍一小兔，電氣自動化畢業(yè)。
參加工作后對計算機(jī)感興趣，深知初學(xué)編程之艱辛。
希望將自己所學(xué)記錄下來，給初學(xué)者一點(diǎn)幫助。
免責(zé)聲明： 博客中所有的圖片素材均來自百度搜索，僅供學(xué)習(xí)交流，如有問題請聯(lián)系我，侵立刪，謝謝。
