Javascript的運(yùn)用與提高

田明山

【摘 要】JavaScript作為一種網(wǎng)絡(luò)的腳本語言、解釋性語言，采用小程序段的方式實(shí)現(xiàn)編程，廣泛的應(yīng)用于網(wǎng)頁制作過程中，被幾乎所有的網(wǎng)頁用來改進(jìn)設(shè)計(jì)、驗(yàn)證表單、檢測瀏覽器、創(chuàng)建cookies，以及更多的應(yīng)用，是因特網(wǎng)上最流行的腳本語言。當(dāng)你學(xué)習(xí)它、使用它、掌握它時(shí)，你一定會(huì)喜歡上它。

【關(guān)鍵詞】程序設(shè)計(jì)；JavaScript；問題解決

JavaScript屬于計(jì)算機(jī)專業(yè)類的重要教學(xué)內(nèi)容，對(duì)學(xué)生提高網(wǎng)頁設(shè)計(jì)水平具有重要意義。為保證學(xué)生能掌握J(rèn)avaScript的網(wǎng)頁制作，更好的培養(yǎng)網(wǎng)頁制作的實(shí)踐型人才，本文通過對(duì)JavaScrip學(xué)習(xí)過程中需要關(guān)注并加以解決的問題的分析，旨在提升學(xué)生掌握J(rèn)avaScrip的層次。

1 如何在js被禁用的情況下要保證網(wǎng)頁仍能實(shí)現(xiàn)它的核心功能

具體的js實(shí)現(xiàn)有以下幾個(gè)方案：

方案一：可以使用javascript偽協(xié)議：

Myexample

方案二：使用內(nèi)嵌的事件處理函數(shù)：

當(dāng)我們采用以上兩種方案，在js被禁用時(shí)，“在一個(gè)新窗口里打開鏈接”這個(gè)功能就無法實(shí)現(xiàn)了。所以，我們不能為了使用js而濫用js。以下方案就為js預(yù)留出了退路，即所謂的平穩(wěn)退化（留好js被禁后的退路）

方案三：平穩(wěn)退化：

2 getElementsByName和getElementsById的區(qū)別

通常我們?cè)讷@取頁面內(nèi)控件時(shí)有多種方法，比如document.getElementsByName和document.getElementsById。如果您需要查找文檔中的一個(gè)特定的元素，最有效的方法是 getElementById（）。由于一個(gè)頁面中的 name 屬性可能不唯一（如 HTML 表單中的單選按鈕通常具有相同的 name 屬性），而getElementsByName（） 方法則返回帶有指定名稱的對(duì)象的集合（即數(shù)組）。

3 將網(wǎng)頁的結(jié)構(gòu)和內(nèi)容與JavaScript腳本的動(dòng)作分離

3.1 網(wǎng)頁的結(jié)構(gòu)和內(nèi)容由html來做，而網(wǎng)頁的樣式則由CSS來做，網(wǎng)頁的行為讓由JavaScript來做

3.2 分離JavaScript代碼其實(shí)很簡單，JavaScript代碼并不要求事件必須在html中處理，完全可以在外部JavaScript文件里將一個(gè)事件添加到html文檔中的某個(gè)元素上。

4 瀏覽器的兼容性問題

兼容性問題是由于多種瀏覽器同時(shí)存在而導(dǎo)致的。用戶在使用不同瀏覽器訪問一個(gè)相同的頁面時(shí)，所看到的效果有時(shí)會(huì)有差異。這種差異可能會(huì)比較小，甚至不會(huì)被用戶注意到；也可能很大，極端情況下可能造成在某種瀏覽器下無法正常瀏覽。引起這些差異的問題統(tǒng)稱為“瀏覽器兼容性問題”。我們所要做的是新老要通吃，尤其要注意老的，即向后兼容。比如：

4.1 document.formName.item（”itemName”） 問題

問題說明：IE下，可以使用 document.formName.item（”itemName”） 或 document.formName.elements ["elementName"]；而ff 下，只能使用document.formName.elements["elementName"]。

解決途徑：統(tǒng)一使用document.formName.elements["elementName"]。

4.2 數(shù)組類對(duì)象問題

問題說明：IE下，可以使用 （） 或 [] 獲取數(shù)組類對(duì)象；ff下，只能使用 [ ]獲取數(shù)組類對(duì)象。

解決途徑：統(tǒng)一使用 [] 獲取集合類對(duì)象。

4.3 window.location.href問題

問題說明：使用IE或者ff2.0.x以下版本，可以使用window.location或window.location.href；而ff1.5.x以下版本，卻只能使用window.location。

解決方法：只使用 window.location 以避免版本兼容問題。當(dāng)然也可以使用 location.replace（）方法。

4.4 frame和iframe問題

4.4.1 訪問frame對(duì)象

IE：可以使用window.frameId或者window.frameName來訪問frame對(duì)象；

ff：只能使用window.frameName來訪問frame對(duì)象；

解決方法：統(tǒng)一使用 window.document.getElementById（”frameId”） 來訪問這個(gè)frame對(duì)象。

4.4.2 切換frame內(nèi)容

在IE和ff中都均使用 window.document.getElementById（”frameId”）.src=“example.html”或 window.frameName.location=“example.html”來更改frame中的內(nèi)容；

如果需要將frame中的參數(shù)傳回父窗口，可以在frame中使用parent關(guān)鍵字來訪問父窗口。

4.5 innerText的問題.

問題說明：innerText在IE中可以正常工作，但是innerText在ff中卻不起效果。

解決方法：在非IE瀏覽器中可以使用textContent代替innerText。innerHTML 能夠同時(shí)被ie、ff等瀏覽器支持，而outerHTML卻只能被ie支持，最好不用。

5 性能考慮

以前的程序員話費(fèi)大量的精力，想盡一切的辦法把程序的效率弄得高一點(diǎn)，因?yàn)槟菚r(shí)的計(jì)算機(jī)非常慢，而且也非常貴，而現(xiàn)如今的計(jì)算機(jī)不僅快多了而且也便宜多了，是不是就無需考慮執(zhí)行性能了呢？性能是永遠(yuǎn)要考慮的問題，這涉及到你編寫的網(wǎng)頁能否順利快速地加載。

那如何保證腳本執(zhí)行的性能是最優(yōu)的呢？我們可以盡量做到以下幾點(diǎn)。

5.1 盡可能少訪問dom、少使用標(biāo)記、少用循環(huán)遍歷

5.2 合并腳本代碼（js代碼），減少頁面在加載時(shí)所發(fā)送的請(qǐng)求數(shù)量；將之前，這樣可以加快頁面的加載速度，卻不影響js的加載。

5.3 盡可能的壓縮腳本：將js代碼中多余的空格、注釋刪除，甚至可以將變量名簡化。可以準(zhǔn)備兩個(gè)版本的js腳本文件：一個(gè)是工作版本，用于修改代碼和注釋，另一個(gè)為精簡版本，則用于發(fā)布。

不管什么樣的語言，能實(shí)際運(yùn)用才是王道，技術(shù)是靠練出來的，也就是說多做項(xiàng)目，你才能有提高。JavaScript更是如此，同時(shí)JavaScript的掌握和運(yùn)用還需要結(jié)合HTML、SQL、CSS等的學(xué)習(xí)來提高自己綜合能力。一個(gè)人必須去感受和領(lǐng)悟構(gòu)建程序帶來的強(qiáng)烈快感。當(dāng)你一步步的掌握知識(shí)點(diǎn)，一點(diǎn)點(diǎn)的將程序搭建起來時(shí)，就會(huì)對(duì)自己產(chǎn)生激勵(lì)與肯定，帶來十分美妙的滿足感。

【參考文獻(xiàn)】

[1]W3School.W3School教程JavaScript.

[2]Jaward.如何正確學(xué)習(xí)JavaScript.

[3]周翔.提高web應(yīng)用性能之 JavaScript 性能調(diào)優(yōu).

[責(zé)任編輯：王偉平]