Javascript博客轉載集合

再讀ecmascript

摘要: 這幾天，又花了點時間看了下ecmascript。如下是我摘錄出來的一些理解。在此記錄下。第一部分：關於變量對象的理解1） 什麼是變量對象？數據的存取與讀取機制，就是變量對象。 變量對象 是執行上下文相關的對象，包括3種：變量 (var )函數定義(FD)函數形參2） 關於函數的argumentsfunction foo(x,y,z){ z=40; y=50; alert(arguments.callee===foo); alert(arguments.length); //1 alert(arguments[1]); //undefine alert(arguments[2]); //und.閱讀全文

javascript 中的 arguments,callee.caller,apply,call 區別

摘要: 記錄一下：1.arguments是一個對象， 是函數的一個特性，只有在函數內才具備這個特性，在函數外部不用使用。舉例：function test(){ alert(typeof arguments); //object } alert(typeof arguments); //undefined2.callee,callercallee 表示當前正在使用的函數，例如 arguments.callee 表示testcaller 表示當前函數的調用者，若是在最頂層 那麼就爲 null ,如 test() 爲 null ;test2() 爲testfunction test(){ aler...閱讀全文

js 設計模式-單例模式

摘要: 本文參考：http://www.addyosmani.com/resources/essentialjsdesignpatterns/book /#singletonpatternjavascript目錄： 1）什麼是單例 2）使用場景 3）類比 3）舉例什麼是單例？ 單例要求一個類有且只有一個實例，提供一個全局的訪問點。所以它要繞過常規的控制器，使其只能有一個實例，供使用者使用，而使用着不關心有幾個實例，所以 這是設計者的責任 In JavaScript, Singletons serve as a shared resource namespace which isolate im...閱讀全文

深刻理解JavaScript內部原理（6）： 閉包

摘要: 說明本文是翻譯http://dmitrysoshnikov.com/ecmascript/chapter-6-closures/概要本文將介紹一 個在JavaScript常常會拿來討論的話題 ——閉包（closure）。閉包其實已是個老生常談的話題了； 有大量文章都介紹過閉包的內容（其中不失一些很好的文章，好比，擴展閱讀中Richard Cornford的文章就很是好）， 儘管如此，這裏仍是要試着從理論角度來討論下閉包，看看ECMAScript中的閉包內部到底是如何工做的。正如在此前文章中提到的，這些文章都是系列文 章，相互之間都是有關聯的。所以，爲了更好的理解本文要介紹的內容， 建議先去閱讀下閱讀全文

深刻理解JavaScript內部原理（5）： function

摘要: 本文是翻譯http://dmitrysoshnikov.com/ecmascript/chapter-5-functions /#introduction概要In this article we will talk about one of the general ECMAScript objects — about functions. In particular, we will go through various types of functions, will define how each type influencesvariables objectof a context and閱讀全文

深刻理解JavaScript內部原理（3）： this

摘要: 本文是翻譯http://dmitrysoshnikov.com/ecmascript/chapter-3-this/概要本文將進一步討論與執行上 下文密切相關的概念——this關鍵字。事實證實，this這塊的內容很是的複雜，它在不一樣執行上下文的狀況下其值都會不一樣，而且會相應的引起一些問題。 不少程序員一看到this關鍵字，就會把它和麪向對象的編程方式聯繫在一塊兒，它指向利用構造器新建立出來的對象。在ECMAScript中，也支持 this，然而， 正如你們所熟知的，this不只僅只用來表示建立出來的對象。接下來給你們揭開在ECMAScript中this神祕的面紗。定義This是執行上下文的 一個屬性：a閱讀全文

深刻理解JavaScript內部原理（1）： 執行上下文

摘要: 說明本文是翻譯Dmitry Soshnikov 的文章Execution Contexts. 文章地址：http://dmitrysoshnikov.com/ecmascript/chapter-1-execution-contexts /概要在這篇文章中，咱們將向你們介紹ECMAscript的可執行上下文以及相關的可執行上下文的類型定義每當控制器進入ECMAscript可執行代 碼的時候，控制器就進入了一個可執行上下文。可執行上下文（簡稱EC）是一個抽象的概念，在ECMA262中用他來區分不一樣類型的可執行代碼標準規範中並 沒有從技術實現的角度來定義執行上下文的具體結構和類型；這是實現標準的ECMA閱讀全文

淺談javascript中的做用域

摘要: 首先說明一下：Js中的做用域不一樣於其餘語言的做用域，要特別注意。JS中做用域的概念： 表示變量或函數起做用的區域，指代了它們在什麼樣的上下文中執行，亦即上下文執行環境。Javascript的做用域只有兩種：全局做用域和本地做用域， 本地做用域是按照函數來區分的。首先來看幾道題目：1.if(true){ var aa= "bb";}console.log(aa); //bb for(var i = 0; i < 100; i++){ //do}console.log(i); //1002.var bb = '11111';function aa() { a閱讀全文

深刻分析js中的constructor 和prototype

摘要: 在javascript的使用過程當中，constructor 和prototype這兩個概念是至關重要的，深刻的理解這兩個概念對理解js的一些核心概念很是的重要。咱們在定義函數的時候，函數定義的時候函數自己 就會默認有一個prototype的屬性，而咱們若是用new 運算符來生成一個對象的時候就沒有prototype屬性。咱們來看一個例子，來講明這個function a(c){ this.b = c; this.d =function(){ alert(this.b); }}var obj = new a('test');alert(typeof obj.proto...閱讀全文

加強用戶體驗，設置快捷鍵

摘要: 快捷鍵在平常的使用仍是挺多的，例如熟悉的粘貼ctrl+v，複製 ctrl+c，使用快捷鍵能提升咱們的作事效率，特別是當咱們熟悉了一種操做後，再次使用它來進行操做就會變得很方便，很順手，對於使用鍵盤的重度用戶， 鍵盤永遠比鼠標來的快。本文主要提到用js的方法設置tabindex 和js設置組合快捷鍵1）tabindex： 就是利用tab來輕鬆的控制頁面中的連接和表單元素 它的用法很簡單：obj.tabindex = tabindex; 這個tabindex 的值，按照w3c 的規定能夠從0開始 一直到32767 這個比較的簡單，關鍵是明白他的做用，這裏就不舉例了。這裏有一篇文章對tabind...閱讀全文

Range在各瀏覽器下的問題和常見處理辦法

摘要: 第一次聽到Range這個概念是在空間編輯器的技術交流會上，當時做者給咱們提到編輯器中最重要的概念就是Range，經過操做range，就能夠實現編 輯器的全部操做。到底具體什麼是range呢，其實簡單點就是選區，你們對矩形可能有概念，其實range能夠理解爲矩形，只要咱們選定了一個文本，那麼 這個文本就佔有空間了，因此range是有起始和結束位置的。1、關於瀏覽器的兼容性 目前主要有3種關於range的相似的對象，分別是W3C range 對象，Mozzlia selection ，ie TextRange 關於這三種的區別，請查看文檔http://www.quirksmode.org/dom...閱讀全文

拖拽效果的實現原理分析2

摘要: 上文對html5支持的瀏覽器的拖拽效果進行了分析，本文不採用任何庫，來分析下拖拽的過程先想一想咱們平時拖拽是怎麼操做的，大體能夠分爲幾下幾個步驟： 鼠標按下，鼠標移動，拖拽，被拖動的物件跟着走鼠標鬆開，物件中止，無拖動了計算距離，拖拽的距離（鼠標移動）對應在事件上就是 onmousedown，onmousemove ，開始拖拽onmouseup ，中止拖拽計算相對的拖拽距離下面咱們按照這種思路，寫一個拖拽效果,假設咱們拖動標題，這塊的內容就跟着走。首先咱們來寫一個含有標題和內容的塊css 爲：#doc{border:1px solid #a0b3d6; background:white;positio閱讀全文

圖片旋轉效果的研究

摘要: 最近在項目中須要作圖片的旋轉功能，我研究了一下。下面來總結下圖片旋轉在各個瀏覽器的支持狀況1、圖片旋轉的方案1）css3實現圖片旋轉功能：支持的 瀏覽器有chrome，firefox；opera是不支持的。 具體代碼爲：-moz-transfrom:rotate(90deg);-webkit-ransfrom:rotate(90deg);上述代碼的意 思就是將圖片順時針旋轉90度，其實能夠旋轉任意的度數。可是支持css3的瀏覽器只有chrome，firefox3.6 ，safari，ie瀏覽器是不支持的。那麼IE下該怎麼處理呢？因而就有了下面的一種方案2）在IE下經過濾鏡來實現旋轉 具體代碼爲..閱讀全文

頁面滾動圖片等元素動態加載實現本質

摘要: 各類網站常常看到頁面滾動到可視區域，而後才加載相應的圖片資源，他的本質是什麼呢？本文來分析一下很簡單，就是判斷當前元素是不是可視區域內假設：h1 = 滾動條滾去的高度 w1 = 滾動條滾去的寬度 h2 = 屏幕的高度 obj 表示當前對象 {x：當前對象相對於文檔左上角的位置x,y:當前對象相對於文檔左上角的y}則應該這樣判斷 在y軸方向 上：if(obj.x>h1&&obj.x<h1+h2||obj.x+obj.offsetHeight>h1&&|obj.x+obj.offsetHeight<h1+h2) {loading()} 同理在X軸閱讀全文

深刻研究瀏覽器的各類高度

摘要: 項目中常常碰到各類高度，今天再次總結一下1）getboundingClientRect() 這個是IE下特有的一個方法，該方法得到頁面中某個元素的左，上，右和下分別相對瀏覽器視窗的位置，它返回的是一個對象，該對象有是個屬 性：top，left，right，bottom，其中若是滾動了滾動條，top和left的值可能會爲負值，由於他是相對了可視窗口，被捲進去了。 2）scrollTop 表示的意思是對象被捲進去的高度，若是是body的對象，那麼則表示滾動條捲去的高度，即瀏覽器上方隱藏的高度。若是是div等對象，那麼就表示滾動條滾 去該div上方的高度。3）offsetHeight,offsetWi..閱讀全文

doc.documentElement.scrollTop&&doc.body.scrollTop

摘要: doc = document；doc.documentElement.scrollTop, doc.body.scrollTop的區別scrollTop 是指對象被捲去的高度，在body對象上就是指窗口被滾動條捲去的高度，若是在其餘的對象上，那麼就是容器被滾動條捲去的高度其實 doc.documentElement.scrollTop, doc.body.scrollTop 都是指窗口被滾動條捲去的高度，是一個意思。那麼爲何還有兩個呢？本質：若是頁面具備 DTD（或者說指定了 DOCTYPE）時，使用 document.documentElement。若是頁面不具備 DTD（或者說沒有指定了 閱讀全文

js中事件綁定研究

摘要: 本質:不一樣的庫或者工具中老是封裝了不一樣的事件綁定形式,可是究其根源，仍是IE事件模型和W3C事件模型不一樣的處理方式1）W3C事件模型：支持事件捕 捉和冒泡addEventListener('type',function(){},bool) removeEventListener('type',function(){},bool)2）IE事件模型：僅支持事件冒泡 attachEvent('type',function(){});detachEvent('type',fucntion(){});*如何統一： 設置W3C事件綁定函數的第三個參閱讀全文

js數組操做，拼寫好像，沒看清楚就容易出錯的。

摘要: 有2個單詞很像，若是沒有看清楚，就很容易出錯，特此記錄下：1）數組的 切片操做（slice），看w3c對他的描述：（1）定義：從已有的數組中選定製定的數組（2）返回值：數組（3）注意： 不改變原數組的值，能夠用負數做爲索引。常見用法：[].slice.call(arguments)，意思就是將參數連接成數組形式2）刪除數組元素操 做（splice），和上面的單詞只有一個字母（p）的區別（1）定義：插入，替換，刪除數組中的元素（2）語 法：arryobject.splice(index,howmany,ele1,ele2,.....)能夠理解爲先刪除，而後再添加元素，index 是開始位置，從0開始閱讀全文