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