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