天天看點

《第三方JavaScript程式設計》——1.4 第三方開發的挑戰

本節書摘來自異步社群《第三方javascript程式設計》一書中的第1章,第1.4節,作者: [美] ben vinegar anton kovalyov 譯者: 郭凱 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

你已經了解了第三方javascript是編寫高度分發應用的一種強大方式。但是編寫在其他人網站上執行的腳本,同傳統的javascript程式設計相比有一系列獨特的挑戰。具體而言,你的代碼将在一個完全不受控制、一個不同域的dom環境中執行。這意味着你必須面對一些難以預料的複雜情況,比如未知的網頁上下文,一個同其他第一方、第三方腳本共享的javascript環境,甚至浏覽器的一些限制。我們快速的浏覽一下涉及的挑戰。

1.4.1 未知的上下文

當一個釋出者在他們的web頁面中引入你的第三方javascript,通常你很少知道它被放置的上下文。你的腳本可能會被諸多不同文檔聲明,不同dom布局的頁面引入,而且應當在這些頁面中都能正常工作。

你不得不考慮釋出者可能在他們頁面頂部的

标簽中引入你的腳本,也可能會在底部引入。釋出者也可能會在iframe中加載你的應用,也可能在一個标簽完全廢棄的頁面中加載;在html5中,部分是可選的,而且并非所有浏覽器都會在内部自動生成。如果你的腳本在查詢或者操作dom的時候用到了這些核心的元素,就會陷入麻煩了。

如果你在開發一個嵌入式微件,顯示适當的樣式也是一個需要被關注的問題。微件将被放置在一個淺色背景還是深色背景的web頁面中?你希望你的微件繼承樣式并“融入”釋出者的頁面設計嗎?你希望你的微件在所有上下文中看起來都是一緻的嗎?如果釋出者頁面的html格式錯誤會出現什麼情況,導緻頁面的渲染使用怪異模式嗎?解決這些問題都需要精心編寫css。我們會在後續的章節中給出這些問題的解決方案。

1.4.2 共享環境

對于一個給定的web環境,隻有一個全局變量的命名空間被頁面上執行的每一段代碼所共享。你不僅要注意不能讓你的全局變量胡亂修改命名空間,也要明白其他腳本,可能是同你一樣的第三方應用,也能夠修改你可能依賴的标準的對象和原型。

例如,全局的json對象。在現代浏覽器中,這是一個原生的浏覽器對象,可以極快地解析和序列化json(javascript對象表示方法)。不幸的是,它可以很容易地被任何人修改。如果你的應用依賴于這個對象的正常工作,并且它被其他代碼改為了不相容的方式,你的應用可能會産生不正确的結果甚至崩潰。

下面的示例代碼示範了使用簡單的變量指派修改全局的json對象。

《第三方JavaScript程式設計》——1.4 第三方開發的挑戰

你自己可能會這麼想,“為什麼會有人這麼做?”web開發者往往加載他們自己的json方法來支援舊的浏覽器沒有提供的本地方法。但是有些這樣的庫不相容。例如,很流行的prototype javascript庫在舊版本提供的json方法同原生方法相比,在處理undefined值時的輸出并不相同,如下。

《第三方JavaScript程式設計》——1.4 第三方開發的挑戰

json對象隻是浏覽器原生對象可以被用戶端代碼改變的一個例子;還有數百種其他的對象。在本書中,我們會尋找恢複或者簡單避免這些對象的解決方法。

同樣,dom是另外一個你不得不擔心的全局應用程式命名空間。對于一個給定的web頁面而言,隻有一個dom樹,并且它是被目前頁面上運作的所有應用所共享。這就要求你操作它的時候要格外注意。任何插入到dom的新元素需要同現有的元素和平共存,并且不幹擾其他查詢dom的腳本執行。同樣,如果範圍不當,你的dom查詢也可能會意外的選擇到不屬于你的元素。反之亦然,如果你沒有認真地選擇唯一的id和類名,其他應用也可能不經意間會查詢到你的元素。

因為你的代碼同其他腳本同屬于相同的執行環境,安全性也是要考慮的。不僅要防止你的使用者使用不當,還需要考慮頁面上的其他腳本,甚至釋出者也是一個潛在的威脅。例如,如果你在為一個大型的、受歡迎的服務編寫微件或者腳本(像一個社交網站),釋出者或許會有很濃厚的興趣去嘗試在他們的頁面上做一個假的互動界面。

1.4.3 浏覽器限制

如果一個未知的文檔上下文,多個全局命名空間,以及額外的安全問題還不夠糟糕,web浏覽器禁止某些行為經常會影響到第三方腳本。例如,ajax已然成為web開發人員無重新整理擷取和送出資料的一個主要工具。但是web浏覽器的同源政策限制了xmlhttprequest跨域進行通信,如圖1.9所示。如果你正在編寫第三方腳本,且需要同你的域所在的應用進行資料通信,那麼你就不得不通過其他方式實作了。

《第三方JavaScript程式設計》——1.4 第三方開發的挑戰

同樣,web浏覽器通常也會限制應用程式讀寫第三方cookies。如此一來,你的使用者将無法“登入”你的應用或者記住後續請求的動作。根據應用的複雜度,無法讀寫第三方cookies可能是一個真正的障礙。

不幸的是,這些挑戰僅僅是冰山一角。第三方javascript的開發充滿了陷阱,說到底,web浏覽器并非為嵌入式應用而生,也沒有過多考慮第三方代碼。浏覽器日趨完善,且會引入一些新的特性,可以減輕一些第三方開發的負擔,但仍舊是一場艱苦的戰鬥,且相容舊的浏覽器通常是任何類型的分布式應用都需要考慮的問題。

但是不必擔心。你購買了本書,已經做了一個很好的決定,它包含了第三方javascript代碼所面臨的問題。作為回報,我們将會告訴你如何解決這些問題。

繼續閱讀