田明山
【摘 要】JavaScript作為一種網(wǎng)絡(luò)的腳本語(yǔ)言、解釋性語(yǔ)言,采用小程序段的方式實(shí)現(xiàn)編程,廣泛的應(yīng)用于網(wǎng)頁(yè)制作過(guò)程中,被幾乎所有的網(wǎng)頁(yè)用來(lái)改進(jìn)設(shè)計(jì)、驗(yàn)證表單、檢測(cè)瀏覽器、創(chuàng)建cookies,以及更多的應(yīng)用,是因特網(wǎng)上最流行的腳本語(yǔ)言。當(dāng)你學(xué)習(xí)它、使用它、掌握它時(shí),你一定會(huì)喜歡上它。
【關(guān)鍵詞】程序設(shè)計(jì);JavaScript;問(wèn)題解決
JavaScript屬于計(jì)算機(jī)專業(yè)類的重要教學(xué)內(nèi)容,對(duì)學(xué)生提高網(wǎng)頁(yè)設(shè)計(jì)水平具有重要意義。為保證學(xué)生能掌握J(rèn)avaScript的網(wǎng)頁(yè)制作,更好的培養(yǎng)網(wǎng)頁(yè)制作的實(shí)踐型人才,本文通過(guò)對(duì)JavaScrip學(xué)習(xí)過(guò)程中需要關(guān)注并加以解決的問(wèn)題的分析,旨在提升學(xué)生掌握J(rèn)avaScrip的層次。
1 如何在js被禁用的情況下要保證網(wǎng)頁(yè)仍能實(shí)現(xiàn)它的核心功能
具體的js實(shí)現(xiàn)有以下幾個(gè)方案:
方案一:可以使用javascript偽協(xié)議:
方案二:使用內(nèi)嵌的事件處理函數(shù):
當(dāng)我們采用以上兩種方案,在js被禁用時(shí),“在一個(gè)新窗口里打開(kāi)鏈接”這個(gè)功能就無(wú)法實(shí)現(xiàn)了。所以,我們不能為了使用js而濫用js。以下方案就為js預(yù)留出了退路,即所謂的平穩(wěn)退化(留好js被禁后的退路)
方案三:平穩(wěn)退化:
2 getElementsByName和getElementsById的區(qū)別
通常我們?cè)讷@取頁(yè)面內(nèi)控件時(shí)有多種方法,比如document.getElementsByName和document.getElementsById。如果您需要查找文檔中的一個(gè)特定的元素,最有效的方法是 getElementById()。由于一個(gè)頁(yè)面中的 name 屬性可能不唯一(如 HTML 表單中的單選按鈕通常具有相同的 name 屬性),而getElementsByName() 方法則返回帶有指定名稱的對(duì)象的集合(即數(shù)組)。
3 將網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容與JavaScript腳本的動(dòng)作分離
3.1 網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容由html來(lái)做,而網(wǎng)頁(yè)的樣式則由CSS來(lái)做,網(wǎng)頁(yè)的行為讓由JavaScript來(lái)做
3.2 分離JavaScript代碼其實(shí)很簡(jiǎn)單,JavaScript代碼并不要求事件必須在html中處理,完全可以在外部JavaScript文件里將一個(gè)事件添加到html文檔中的某個(gè)元素上。
4 瀏覽器的兼容性問(wèn)題
兼容性問(wèn)題是由于多種瀏覽器同時(shí)存在而導(dǎo)致的。用戶在使用不同瀏覽器訪問(wèn)一個(gè)相同的頁(yè)面時(shí),所看到的效果有時(shí)會(huì)有差異。這種差異可能會(huì)比較小,甚至不會(huì)被用戶注意到;也可能很大,極端情況下可能造成在某種瀏覽器下無(wú)法正常瀏覽。引起這些差異的問(wèn)題統(tǒng)稱為“瀏覽器兼容性問(wèn)題”。我們所要做的是新老要通吃,尤其要注意老的,即向后兼容。比如:
4.1 document.formName.item(”itemName”) 問(wèn)題
問(wèn)題說(shuō)明:IE下,可以使用 document.formName.item(”itemName”) 或 document.formName.elements ["elementName"];而ff 下,只能使用document.formName.elements["elementName"]。
解決途徑:統(tǒng)一使用document.formName.elements["elementName"]。
4.2 數(shù)組類對(duì)象問(wèn)題
問(wèn)題說(shuō)明:IE下,可以使用 () 或 [] 獲取數(shù)組類對(duì)象;ff下,只能使用 [ ]獲取數(shù)組類對(duì)象。
解決途徑:統(tǒng)一使用 [] 獲取集合類對(duì)象。
4.3 window.location.href問(wèn)題
問(wèn)題說(shuō)明:使用IE或者ff2.0.x以下版本,可以使用window.location或window.location.href;而ff1.5.x以下版本,卻只能使用window.location。
解決方法:只使用 window.location 以避免版本兼容問(wèn)題。當(dāng)然也可以使用 location.replace()方法。
4.4 frame和iframe問(wèn)題
4.4.1 訪問(wèn)frame對(duì)象
IE:可以使用window.frameId或者window.frameName來(lái)訪問(wèn)frame對(duì)象;
ff:只能使用window.frameName來(lái)訪問(wèn)frame對(duì)象;
解決方法:統(tǒng)一使用 window.document.getElementById(”frameId”) 來(lái)訪問(wèn)這個(gè)frame對(duì)象。
4.4.2 切換frame內(nèi)容
在IE和ff中都均使用 window.document.getElementById(”frameId”).src=“example.html”或 window.frameName.location=“example.html”來(lái)更改frame中的內(nèi)容;
如果需要將frame中的參數(shù)傳回父窗口,可以在frame中使用parent關(guān)鍵字來(lái)訪問(wèn)父窗口。
4.5 innerText的問(wèn)題.
問(wèn)題說(shuō)明: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ī)不僅快多了而且也便宜多了,是不是就無(wú)需考慮執(zhí)行性能了呢?性能是永遠(yuǎn)要考慮的問(wèn)題,這涉及到你編寫的網(wǎng)頁(yè)能否順利快速地加載。
那如何保證腳本執(zhí)行的性能是最優(yōu)的呢?我們可以盡量做到以下幾點(diǎn)。
5.1 盡可能少訪問(wèn)dom、少使用標(biāo)記、少用循環(huán)遍歷
5.2 合并腳本代碼(js代碼),減少頁(yè)面在加載時(shí)所發(fā)送的請(qǐng)求數(shù)量;將之前,這樣可以加快頁(yè)面的加載速度,卻不影響js的加載。
5.3 盡可能的壓縮腳本:將js代碼中多余的空格、注釋刪除,甚至可以將變量名簡(jiǎn)化??梢詼?zhǔn)備兩個(gè)版本的js腳本文件:一個(gè)是工作版本,用于修改代碼和注釋,另一個(gè)為精簡(jiǎn)版本,則用于發(fā)布。
不管什么樣的語(yǔ)言,能實(shí)際運(yùn)用才是王道,技術(shù)是靠練出來(lái)的,也就是說(shuō)多做項(xiàng)目,你才能有提高。JavaScript更是如此,同時(shí)JavaScript的掌握和運(yùn)用還需要結(jié)合HTML、SQL、CSS等的學(xué)習(xí)來(lái)提高自己綜合能力。一個(gè)人必須去感受和領(lǐng)悟構(gòu)建程序帶來(lái)的強(qiáng)烈快感。當(dāng)你一步步的掌握知識(shí)點(diǎn),一點(diǎn)點(diǎn)的將程序搭建起來(lái)時(shí),就會(huì)對(duì)自己產(chǎn)生激勵(lì)與肯定,帶來(lái)十分美妙的滿足感。
【參考文獻(xiàn)】
[1]W3School.W3School教程JavaScript.
[2]Jaward.如何正確學(xué)習(xí)JavaScript.
[3]周翔.提高web應(yīng)用性能之 JavaScript 性能調(diào)優(yōu).
[責(zé)任編輯:王偉平]