摘要:事件委托得到如下一個(gè)監(jiān)聽(tīng),多個(gè)函數(shù)綁定標(biāo)簽的屬性并不被同源策略同協(xié)議域名端口所約束,所以可以獲取任何服務(wù)器上腳本并執(zhí)行。從上面的代碼可以得知,是引用對(duì)象,而且是可以更改指定的對(duì)象。我記不住的,請(qǐng)求出現(xiàn)語(yǔ)法錯(cuò)誤。,服務(wù)器拒絕請(qǐng)求。
事件委托
ul#wrap>li.item$*2>{item $}
得到如下
html
- item 1
- item 2
一個(gè)監(jiān)聽(tīng),多個(gè)函數(shù)綁定
js document.getElementById("wrap").addEventListener("click", function(e) { if (e.target.nodeName === "LI") { console.log("ok"); switch(e.target.className){ case "item1": f1(); break; case "item2": f2(); break; default: alert("not a li node"); } }; },false) function f1(){ alert("f1"); } function f2(){ alert("f2"); }JSONP
標(biāo)簽的src屬性并不被同源策略(同協(xié)議、域名、端口)所約束,所以可以獲取任何服務(wù)器上腳本并執(zhí)行。ajax的核心是通過(guò)XmlHttpRequest獲取非本頁(yè)內(nèi)容,而jsonp的核心則是動(dòng)態(tài)添加標(biāo)簽來(lái)調(diào)用服務(wù)器提供的js腳本。
以上是網(wǎng)上摘抄,根據(jù)自己的理解寫下如下代碼
js//jsonp.html function getName(data){ console.log(data.name); } var scriptP = document.createElement("script"); scriptP.src = "http://localhost:8000/reponse.php?id=1&&callback=getName"; window.onload=function(){ document.body.appendChild(scriptP); }
php文件如下
php//reponse.php $getId, "name" => "zhangsan" ); echo $getCalFun+"("+json_encode($json)+")"; ?>
但卻報(bào)錯(cuò)了Uncaught SyntaxError: Unexpected token <,不知道哪里出錯(cuò)了,往大嬸指出...
原理很簡(jiǎn)單,客戶端獲取數(shù)據(jù)根據(jù)需求動(dòng)態(tài)添加script,并使jsonp的服務(wù)端拼接腳本觸發(fā)函數(shù)。
Thisjsvar ob = {}; ob.x = 1; ob.f = function(){ this.x = 2; } ob.f(); console.log(ob.x); // => 2
從上面的代碼可以得知,this是引用對(duì)象,而且是可以更改指定的對(duì)象。
主要應(yīng)用有兩種call和apply
js
function change(s,v){ if(s > v){ console.log("s >v"); }else{ console.log(" s < v"); } } change.call(2,3);// 當(dāng)前this 指向window ... function changeColor(s,v){ this.style.s = v; } var box = document.querySelector(".box"); changeColor.call(box, "backgroundcolor" , "blue"); //當(dāng)前this指向changeColor
call和apply的區(qū)別只是apply只接受兩個(gè)參數(shù),第二個(gè)參數(shù)是數(shù)組形式。
疑問(wèn):
jsvar obj = { x : 100, y : function(){ setTimeout( function(){ alert(this.x); } //這里的this指向的是window對(duì)象,并不是我們期待的obj,所以會(huì)彈出undefined , 2000); } }; obj.y();
上面是剛開(kāi)始遇到的疑問(wèn)
后來(lái)經(jīng)指點(diǎn),一段代碼理解問(wèn)題
jswindow.setTimeout();
解決方法:
... y.function(){ var that = this; setTimeout( function(){ alert(that.y); //既然setTimeout指向的是window,我們把它換了就ok } ,2000) } ...
以上代碼摘自: http://www.cnblogs.com/rainman/archive/2009/05/03/1448392.html
前端模塊化的AMD和CMD網(wǎng)上已經(jīng)有很多關(guān)于這方面的對(duì)比。我只寫一下我的理解。
AMD:加載速度快,它是異步加載,預(yù)先加載所有資源(這也是缺點(diǎn)?)。
CMD:服務(wù)器端模塊的規(guī)范,同步加載,加載完后才能執(zhí)行后面的操作。
AMD一般適用于瀏覽器,CMD則適用于本地或者服務(wù)器,例如nodejs就是采用這種模塊化(npm)。
圣杯布局初次聽(tīng)說(shuō)這個(gè),后來(lái)網(wǎng)上一搜,原來(lái)也就那么一回事
http://www.elonglau.com/33.html
如果是我的話,我會(huì)采用flex了。
Cache-Control這個(gè)只是簡(jiǎn)單了解,沒(méi)做深入,好的博客推薦看這里
http://www.cnblogs.com/TankXiao/archive/2012/11/28/2793365.html
主要了解了 HTTP狀態(tài)碼
1XX表示請(qǐng)求接受成功,待進(jìn)一步處理
2XX表示訪問(wèn)成功
3XX 訪問(wèn)重定向
4XX 客戶端請(qǐng)求錯(cuò)誤,包括語(yǔ)法、文件路徑
5XX 服務(wù)器出現(xiàn)錯(cuò)誤
常見(jiàn)的有200訪問(wèn)成功,302 訪問(wèn)重定向(google.com轉(zhuǎn)到google.com.hk),304緩存,404頁(yè)面不存在。
我記不住的:
400 Bad Request,請(qǐng)求出現(xiàn)語(yǔ)法錯(cuò)誤。
403 Forbidden,服務(wù)器拒絕請(qǐng)求。
500 服務(wù)器發(fā)生了不可預(yù)知的錯(cuò)誤
503 服務(wù)器當(dāng)前無(wú)法接受請(qǐng)求,請(qǐng)等待一段時(shí)間
對(duì)于304緩存,主要有兩個(gè)標(biāo)識(shí)判斷是否需求請(qǐng)求新的文件:
Etag
緩存文件的時(shí)間和服務(wù)器文件最后一次修改的時(shí)間
Cache-ControlCache-Control常見(jiàn)的參數(shù):
public 所有用戶均可使用(緩存在服務(wù)器上)
private 單個(gè)用戶專用
no-cache 所有頁(yè)面都不能緩存
max-age 多少時(shí)間不會(huì)去訪問(wèn)服務(wù)器
參數(shù)可以參考: http://fanli7.net/a/bianchengyuyan/C__/20130120/294176.html
JavaScript繼承實(shí)現(xiàn)可以直接看阮一峰老師的文章
http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_...
未寫:
繼承有好幾種方式(待寫一個(gè)YUI繼承方式)
拖拽實(shí)現(xiàn)
JavaScript基礎(chǔ)算法
Javascript動(dòng)畫(huà)算法
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/85580.html
摘要:設(shè)計(jì)模式的定義在面向?qū)ο筌浖O(shè)計(jì)過(guò)程中針對(duì)特定問(wèn)題的簡(jiǎn)潔而優(yōu)雅的解決方案。從前由于使用的局限性,和做的應(yīng)用相對(duì)簡(jiǎn)單,不被重視,就更談不上設(shè)計(jì)模式的問(wèn)題。 ‘從大處著眼,從小處著手’,以前對(duì)這句話一知半解,自從踏出校門走入社會(huì),開(kāi)始工作以來(lái),有了越來(lái)越深的理解,偶有發(fā)現(xiàn)這句話用在程序開(kāi)發(fā)中也有用,所以,近段時(shí)間開(kāi)始嘗試著分析jQuery源碼,分析angularjs源碼,學(xué)習(xí)設(shè)計(jì)模式。 設(shè)...
摘要:這道的面試題,是這樣的,頁(yè)面上有一個(gè)按鈕,一個(gè),點(diǎn)擊按鈕的時(shí)候,每隔秒鐘向的后面追加一個(gè)一共追加個(gè),的內(nèi)容從開(kāi)始技術(shù),首先我們用閉包封裝一個(gè)創(chuàng)建元素的函數(shù)頁(yè)面上的個(gè)元素點(diǎn)我代碼點(diǎn)擊按鈕的時(shí)候,用回調(diào)函數(shù)嵌套方式,這里我加入個(gè),就已經(jīng)快受不了 這道js的面試題,是這樣的,頁(yè)面上有一個(gè)按鈕,一個(gè)ul,點(diǎn)擊按鈕的時(shí)候,每隔1秒鐘向ul的后面追加一個(gè)li, 一共追加10個(gè),li的內(nèi)容從0開(kāi)始技...
摘要:探討判斷橫豎屏的最佳實(shí)現(xiàn)前端掘金在移動(dòng)端,判斷橫豎屏的場(chǎng)景并不少見(jiàn),比如根據(jù)橫豎屏以不同的樣式來(lái)適配,抑或是提醒用戶切換為豎屏以保持良好的用戶體驗(yàn)。 探討判斷橫豎屏的最佳實(shí)現(xiàn) - 前端 - 掘金在移動(dòng)端,判斷橫豎屏的場(chǎng)景并不少見(jiàn),比如根據(jù)橫豎屏以不同的樣式來(lái)適配,抑或是提醒用戶切換為豎屏以保持良好的用戶體驗(yàn)。 判斷橫豎屏的實(shí)現(xiàn)方法多種多樣,本文就此來(lái)探討下目前有哪些實(shí)現(xiàn)方法以及其中的優(yōu)...
摘要:等等,挺在這里,雖然不僅一篇文章闡述了事件委托是利用了冒泡機(jī)制,得益于冒泡機(jī)制,但是,怎么得益的,怎么利用的。事件委托和冒泡機(jī)制有關(guān)系嗎接下來(lái)我想引出本文的重點(diǎn)事件委托和冒泡機(jī)制有關(guān)系嗎我認(rèn)為就算有關(guān)系,關(guān)系也不大。 面試官提出的問(wèn)題 我們?cè)诿嬖嚽岸说倪^(guò)程中,經(jīng)常會(huì)聽(tīng)到面試官問(wèn)這樣的問(wèn)題: 如果我有一個(gè)頁(yè)面,里面1000個(gè)元素都要綁定click事件,請(qǐng)問(wèn)你要怎么做 如果你...
摘要:并嘗試用為什么你統(tǒng)計(jì)的方式是錯(cuò)的掘金翻譯自工程師的文章。正如你期望的,文中的前端開(kāi)發(fā)單一職責(zé)原則前端掘金單一職責(zé)原則又稱單一功能原則,面向?qū)ο笪鍌€(gè)基本原則之一。 單頁(yè)式應(yīng)用性能優(yōu)化 - 首屏數(shù)據(jù)漸進(jìn)式預(yù)加載 - 前端 - 掘金前言 針對(duì)首頁(yè)和部分頁(yè)面打開(kāi)速度慢的問(wèn)題,我們開(kāi)始對(duì)單頁(yè)式應(yīng)用性能進(jìn)行優(yōu)化。本文介紹其中一個(gè)方案:基于 HTTP Chunk 的首屏數(shù)據(jù)漸進(jìn)式預(yù)加載方案,該方案總...
閱讀 1637·2021-09-26 09:55
閱讀 1371·2021-09-23 11:22
閱讀 2726·2021-09-06 15:02
閱讀 2640·2021-09-01 11:43
閱讀 3951·2021-08-27 13:10
閱讀 3676·2021-08-12 13:24
閱讀 2069·2019-08-30 12:56
閱讀 2991·2019-08-30 11:22