導航:首頁 > 編程語言 > jquery編程規范

jquery編程規范

發布時間:2022-07-18 00:53:55

⑴ js模塊化編程有什麼規范

基礎

我們首先簡單地概述一下,自從三年前Eric Miraglia(YUI的開發者)第一次發表博客描述模塊化模式以來的一些模塊化模式。如果你已經對於這些模塊化模式非常熟悉了,大可以直接跳過本節,從「進階模式」開始閱讀。
匿名閉包
這是一種讓一切變為可能的基本結構,同時它也是javascript最棒的特性。我們將簡單地創建一個匿名函數並立即執行它。所有的代碼將跑在這個函數內,生存在一個提供私有化的閉包中,它足以使得這些閉包中的變數能夠貫穿我們的應用的整個生命周期。

復制代碼 代碼如下:

(function () {
// ... all vars and functions are in this scope only
// still maintains access to all globals
}());

注意這對包裹匿名函數的最外層括弧。因為Javascript的語言特性,這對括弧是必須的。在js中由關鍵詞function開頭的語句總是會被認為是函數聲明式。把這段代碼包裹在括弧中就可以讓解釋器知道這是個函數表達式。
全局變數導入
Javascript有一個特性叫做隱式全局變數。無論一個變數名在哪兒被用到了,解釋器會根據作用域鏈來反向找到這個變數的var聲明語句。如果沒有找到var聲明語句,那麼這個變數就會被視為全局變數。如果這個變數用在一句賦值語句中,同時這個變數又不存在時,就會創建出一個全局變數。這意味著在匿名閉包中使用或創建全局變數是很容易的。不幸的是,這會導致寫出的代碼極難維護,因為對於人的直觀感受來說,一眼根本分不清那些是全局的變數。
幸運的是,我們的匿名函數提供了簡單的變通方法。只要將全局變數作為參數傳遞到我們的匿名函數中,就可以得到比隱式全局變數更清晰又快速的代碼了。下面是示例:

復制代碼 代碼如下:

(function ($, YAHOO) {
// now have access to globals jQuery (as $) and YAHOO in this code
}(jQuery, YAHOO));

模塊導出
有時你不僅想要使用全局變數,你還想要聲明它們,以供反復使用。我們可以很容易地通過導出它們來做到這一點——通過匿名函數的返回值。這樣做將會完成一個基本的模塊化模式雛形,接下來會是一個完整的例子:

復制代碼 代碼如下:

var MODULE = (function () {
var my = {},
privateVariable = 1;
function privateMethod() {
// ...
}
my.moleProperty = 1;
my.moleMethod = function () {
// ...
};
return my;
}());

注意我們已經聲明了一個叫做MODULE的全局模塊,它擁有2個公有的屬性:一個叫做MODULE.moleMethod的方法和一個叫做MODULE.moleProperty的變數。另外,它還維護了一個利用匿名函數閉包的、私有的內置狀態。同時,我們可以很容易地導入需要的全局變數,並像之前我們所學到的那樣來使用這個模塊化模式。
進階模式
上面一節所描述的基礎已經足以應對許多情況,現在我們可以將這個模塊化模式進一步的發展,創建更多強大的、可擴展的結構。讓我們從MODULE模塊開始,一一介紹這些進階模式。
放大模式
整個模塊必須在一個文件中是模塊化模式的一個限制。任何一個參與大型項目的人都會明白將js拆分多個文件的價值。幸運的是,我們擁有一個很棒的實現來放大模塊。首先,我們導入一個模塊,並為它添加屬性,最後再導出它。下面是一個例子——從原本的MODULE中放大它:

復制代碼 代碼如下:

var MODULE = (function (my) {
my.anotherMethod = function () {
// added method...
};
return my;
}(MODULE));

我們用var關鍵詞來保證一致性,雖然它在此處不是必須的。在這段代碼執行完之後,我們的模塊就已經擁有了一個新的、叫做MODULE.anotherMethod的公有方法。這個放大文件也會維護它自己的私有內置狀態和導入的對象。
寬放大模式
我們的上面例子需要我們的初始化模塊最先被執行,然後放大模塊才能執行,當然有時這可能也不一定是必需的。Javascript應用可以做到的、用來提升性能的、最棒的事之一就是非同步執行腳本。我們可以創建靈活的多部分模塊並通過寬放大模式使它們可以以任意順序載入。每一個文件都需要按下面的結構組織:

復制代碼 代碼如下:

var MODULE = (function (my) {
// add capabilities...
return my;
}(MODULE || {}));

在這個模式中,var表達式使必需的。注意如果MODULE還未初始化過,這句導入語句會創建MODULE。這意味著你可以用一個像LABjs的工具來並行載入你所有的模塊文件,而不會被阻塞。
緊放大模式
寬放大模式非常不錯,但它也會給你的模塊帶來一些限制。最重要的是,你不能安全地覆蓋模塊的屬性。你也無法在初始化的時候,使用其他文件中的屬性(但你可以在運行的時候用)。緊放大模式包含了一個載入的順序序列,並且允許覆蓋屬性。這兒是一個簡單的例子(放大我們的原始MODULE):

復制代碼 代碼如下:

var MODULE = (function (my) {
var old_moleMethod = my.moleMethod;
my.moleMethod = function () {
// method override, has access to old through old_moleMethod...
};
return my;
}(MODULE));

我們在上面的例子中覆蓋了MODULE.moleMethod的實現,但在需要的時候,可以維護一個對原來方法的引用。
克隆與繼承

復制代碼 代碼如下:

var MODULE_TWO = (function (old) {
var my = {},
key;
for (key in old) {
if (old.hasOwnProperty(key)) {
my[key] = old[key];
}
}
var super_moleMethod = old.moleMethod;
my.moleMethod = function () {
// override method on the clone, access to super through super_moleMethod
};
return my;
}(MODULE));

這個模式可能是最缺乏靈活性的一種選擇了。它確實使得代碼顯得很整潔,但那是用靈活性的代價換來的。正如我上面寫的這段代碼,如果某個屬性是對象或者函數,它將不會被復制,而是會成為這個對象或函數的第二個引用。修改了其中的某一個就會同時修改另一個(譯者註:因為它們根本就是一個啊!)。這可以通過遞歸克隆過程來解決這個對象克隆問題,但函數克隆可能無法解決,也許用eval可以解決吧。因此,我在這篇文章中講述這個方法僅僅是考慮到文章的完整性。
跨文件私有變數
把一個模塊分到多個文件中有一個重大的限制:每一個文件都維護了各自的私有變數,並且無法訪問到其他文件的私有變數。但這個問題是可以解決的。這里有一個維護跨文件私有變數的、寬放大模塊的例子:

復制代碼 代碼如下:

var MODULE = (function (my) {
var _private = my._private = my._private || {},
_seal = my._seal = my._seal || function () {
delete my._private;
delete my._seal;
delete my._unseal;
},
_unseal = my._unseal = my._unseal || function () {
my._private = _private;
my._seal = _seal;
my._unseal = _unseal;
};
// permanent access to _private, _seal, and _unseal
return my;
}(MODULE || {}));

所有文件可以在它們各自的_private變數上設置屬性,並且它理解可以被其他文件訪問。一旦這個模塊載入完成,應用程序可以調用MODULE._seal()來防止外部對內部_private的調用。如果這個模塊需要被重新放大,在任何一個文件中的內部方法可以在載入新的文件前調用_unseal(),並在新文件執行好以後再次調用_seal()。我如今在工作中使用這種模式,而且我在其他地方還沒有見過這種方法。我覺得這是一種非常有用的模式,很值得就這個模式本身寫一篇文章。
子模塊
我們的最後一種進階模式是顯而易見最簡單的。創建子模塊有許多優秀的實例。這就像是創建一般的模塊一樣:

復制代碼 代碼如下:

MODULE.sub = (function () {
var my = {};
// ...
return my;
}());

雖然這看上去很簡單,但我覺得還是值得在這里提一提。子模塊擁有一切一般模塊的進階優勢,包括了放大模式和私有化狀態。

⑵ 什麼是Dojo與Jquery宏觀對比,結果如何

Dojo能做什麼?? 1、讓開發者更容易地為 Web 頁面添加動態能力,也可以在其它支持 JavaScript 的環境中使用 Dojo; 2、利用 Dojo 提供的組件,開發者可以提升 Web 應用程序的可用性和交互能力; 3、Dojo 很大程度上屏蔽了瀏覽器之間的差異性,因此,開發者可以不用擔心 Web 頁面是否在某些瀏覽器中可用; 4、通過 Dojo 提供的工具,您還可以為代碼編寫命令行式的單元測試代碼。 5、Dojo 的打包工具可以幫助您優化 JavaScript 代碼,並且只生成部署應用程序所需的最小 Dojo 包集合。 6、……等等 Dojo架構(只包含部分包,網上找的) 第一層是Dojo 的 Widget 系統,Widget 指的是用戶界面中的一個元素,比如按鈕、進度條和樹等。通過Widget ,可以對按鈕,菜單等進行操作,包括樣式,事件處理。只需在頁面中加入簡單標簽。 第二層是應用程序支持庫,dojo大部分代碼都放在這一層,我們大部分時候是在調用這個層中的API。 第三層是環境相關包,這個包的功能是處理跨瀏覽器的問題。 第四層是語言庫,這個語言庫里包含一些語言工具 API,類似於 Java 的 util 包。 最下面一層是包系統,Dojo API 的結構與 Java 很類似,它把所有的 API 分成不同的包(package),當您要使用某個 API 時,只需導入這個 API 所在的包。 上圖中只是Dojo 提供的上百個包的一部分,這些包分別放入三個一級命名空間:Dojo,Dijit 和 DojoX 。其中 Dojo 是核心功能包 , Dijit 中存放的是 Dojo 所有的 Widget 組件,而 DojoX 則是一些擴展或試驗功能,DojoX 中的試驗功能在成熟之後有可能在後續版本中移入到 Dojo 或 Dijit 命名空間中。 Jquery和Dojo宏觀對比: 首先聲明,並不絕對,一家之言。 1、框架規模Dojo屬於重量級開發框架,由框架核心(dojo)、基本控制項庫(dijit)、擴展包(dojox)組成的,三部分都是由dojo官方提供; jQuery屬於輕量級框架,本身僅包含框架核心,另外有一個與jQuery名下的獨立開源項目jQuery UI,它提供了最常用的8個控制項。 也不是絕對,如果你像用jquery那樣用dojo,dojo它就是輕量級js庫了。如果你用jqueryui+jquery,那jquery就是重量級js庫了。 2、編程方式Dojo使用面向對象編程方式,為大型應用開發提供了保證;jQuery使用函數式編程方式,開發小型應用時更加靈活快捷。 Dojo在Javascript的基礎進行了面向對象能力的加強和規范化,提供了原生Javascript不具備的面向對象編程能力,比如父類方法重載(注意,不是重寫)、多繼承、構造函數調用鏈等等,並提供一系列面向對象編程規范的函數和屬性declare、inherit、declaredClass、extend等作為dojo自身的編程基礎。在dojo中,所有的UI控制項都被定義為類,許多Dojo的核心功能庫也被定義為類,這都是出於更好的代碼重用性的考慮。 Javascript從本質上來說屬於函數式編程語言,jQuery沒有改變Javascript的編程方式,使其學習成本大大降低。也並不是說jquery完全不能進行面向對象的編程,只是不見得如Dojo那麼直觀,用Jquery一樣可以用繼承,一樣在寫this。各家有各家的見地。 3、代碼風格除去jQuery標志性的「$」符號外,其實dojo與jQuery在一些常用API上的命名和參數列表基本相似。 4、學習成本從上文分析,我們摘掉Javascript從本質上來說屬於函數式編程語言,jQuery沒有改變Javascript的編程方式,使其學習成本大大降低,有Javascript編程基礎很容易入門。但如果想做出有更高用戶體驗的界面,光靠技術是不行的。因為Dojo和Jquery兩者代碼風格相似,所以有Jquery基礎,學習Dojo並不是非常困難。反之有Dojo基礎,再來學習Jquery也不難。 5、適用范圍 Dojo在面向對象支持,代碼架構,多極模塊載入機制,控制項完整性等方面有著較為突出的特點,適用於企業級或是復雜的大型Web應用開發; jQuery架構和機制相對簡單,易於開發,應用廣泛,適用於相對簡單的Web 2.0開發。 Dojo和jQuery分別為復雜應用開發和簡單應用開發設計,但不絕對,要看開發者怎麼用。如果是UI 交互過多的應用,就選 dojo ,但如果選擇Jquery+Jquery UI也不失為一種好辦法。 在實際項目中,需要根據具體需求來衡量,進行工具的選擇。呵呵,貌似所有的對比,最好都是具體問題具體分析,本文也是。我可不想誤導大家。

⑶ 網頁編程語言html、Ajax、javascript、jQuery、CSS這五者之間有什麼聯系

HTML不是編程語言,是任何可以用於展示的網頁必須使用的格式,是文檔對象模型(DOM)的基礎。
CSS是層疊樣式表,用於規定網頁元素樣式(如字體、顏色、布局、形狀、縮放、透明)的規則。
Javascript是腳本語言,可以操作DOM樹(如元素的刪減、移動),可以存取元素的屬性(比如獲取或改變輸入框內容),當然也可以操作CSS樣式,可以進行復雜的運算,可以調用各種API,其中包括XmlHttpRequest,即Ajax技術,可以讓js代碼發送非同步的HTTP請求,用於實現動態的網頁

jQuery是js庫,對js的功能進行了封裝,方便了DOM操作和Ajax,注意,jquery能做的事情原生js都能做,因為jquery本身就是js寫的。

總之,html、javascript、CSS共同形成了網頁的規范,Ajax是js的特定技術
jQuery和以上性質完全不同,是一個用於簡化js代碼的庫;它並非規范,有很多庫和它類似比如prototype和YUI

⑷ 如何寫出規范的JavaScript代碼

本人在開發工作中就曾與不按規范來開發的同事合作過,與他合作就不能用"愉快"來形容了。現在本人撰寫此文的目的除了與大家分享一點點經驗外,更多的是希望對未來的合作夥伴能夠起到一定的借鑒作用。當然,如果我說的有不科學的地方還希望各路前輩多多指教。下面分條目列出各種規范要求,這些要求都是針對同事編碼毛病提出來的,好些行業約定的其它規范可能不會再提及。1. 保證代碼壓縮後不出錯對於大型的JavaScript項目,一般會在產品發布時對項目包含的所有JavaScript文件進行壓縮處理,比如可以利用Google Closure Compiler Service對代碼進行壓縮,新版jQuery已改用這一工具對代碼進行壓縮,這一般會去掉開發時寫的注釋,除去所有空格和換行,甚至可以把原來較長的變數名替換成短且無意義的變數名,這樣做的目的是加快文件的下載速度,同時也減小網站訪問帶來的額外數據流量,另外在代碼保護上也起到了一點點作用,至少壓縮後的代碼即使被還原還是沒那麼容易一下讀懂的。要想代碼能正確通過壓縮,一般要求語句都要以分號正常結束,大括弧也要嚴格結束等,具體還要看壓縮工具的要求。所以如果一開始沒有按標准來做,等壓縮出錯後再回去找錯誤那是浪費時間。2. 保證代碼能通過特定IDE的自動格式化功能一般較為完善的開發工具(比如Aptana Studio)都有代碼"自動格式"化功能,這一功能幫助實現統一換行、縮進、空格等代碼編排,你可以設置自己喜歡的格式標准,比如左大括弧{是否另起一行。達到這個要求的目的在於方便你的開發團隊成員拿你代碼的一個副本用IDE自動格式化成他喜歡或熟悉的風格進行閱讀。你同事需要閱讀你的代碼,可能是因為你寫的是通用方法,他在其它模塊開發過程中也要使用到,閱讀你的代碼能最深入了解方法調用和實現的細節,這是簡單API文檔不能達到的效果。3. 使用標準的文檔注釋這一要求算是最基本的,這有利於在方法調用處看到方法的具體傳參提示,也可以利用配套文檔工具生成html或其它格式的開發文檔供其他團隊成員閱讀,你可以嘗試使用jsdoc-toolkit。如果你自動生成的API是出自一個開放平台,就像facebook.com應用,那麼你的文檔是給天下所有開發者看的。另外編寫完整注釋,也更方便團隊成員閱讀你的代碼,通過你的參數描述,團隊成員可以很容易知道你編寫的方法傳參與實現細節。當然也方便日後代碼維護,這樣即使再大的項目,過了很長時間後,回去改點東西也就不至於自己都忘記了當時自己寫的代碼是怎麼一回事了。4. 使用規范有意義的變數名使用規范有意義的變數名可以提高代碼的可讀性,作為大項目開發成員,自己寫的代碼不僅僅要讓別人容易看懂。開發大項目,其實每個人寫的代碼量可能都比較大,規范命名,日後自己看回自己的代碼也顯的清晰易懂,比如日後系統升級或新增功能,修改起代碼來也輕松多了。如果到頭發現自己當初寫的代碼現在看不太懂了,那還真是天大的笑話了。當然,使用有意義的變數名也盡量使用標準的命名,比如像這里:var me = this也許沒有var self = this好,因為self是Python中的關鍵字,在Python中self就是通常語言this的用法。再看下面一個例子,加s顯然比沒有加來的科學些,這樣可以知道這個變數名存的是復數,可能是數組等: var li = document.getElementsByTagName('li') var lis = document.getElementsByTagName('li') 5. 不使用生偏語法JavaScript作為一門動態腳本語言,靈活性既是優點也是缺點,眾所周知,動態語言不同層次開發人員對實現同樣一個功能寫出來的代碼在規范或語法上會存在較大的差別。不管怎麼樣,規范編碼少搞怪,不把簡單問題復雜化,不違反代碼易讀性原則才是大家應該做的。比如這語句:typeof(b) == 'string' && alert(b)應該改為:if (typeof(b) == 'string') alert(b),像前面那種用法,利用了&&運算符解析機制:如果檢測到&&前語句返回false就不再檢測後面語句,在代碼優化方面也有提到把最可能出現的情況首先判斷,像這種寫法如果條件少還好,如果條件較多而且語句也長,那代碼可讀性就相當差。又比如:+function(a){var p = a;}( 'a')應該改為:(function(a){var p = a;})( 'a'),其實function前面的+號與包含function的()括弧作用是一樣的,都是起運算優先作用,後者是常見且容易看明白的防止變數污染的做法,比如好些流行JavaScript框架就是採用後面這種方式。再說個降低代碼可讀性的例子,如:function getPostionTxt(type){return type == 2 ? "野外" : (type == 3 ? "商城" : (type == 4 ? "副本" : null));}應該改成:function getPostionTxt(type){var typeData={"2":"野外","3":"商城","4":"副本"};if (typeData[type]) return typeData[type]; else return null;}。如果type是從0開始不間斷的整數,那麼直接使用數組還更簡單,這種結果看起來就清晰多了,看到前面那種多層三元表達式嵌套頭不暈嗎。6. 不在語句非賦值地方出生中文語句中不應該出現中文我想一般人都知道,雖然這樣做不影響程序運行,但是顯然有背行業標准要求,當然我們也不是在使用"易語言"做開發。關於這一個問題,我本來不想把它拿出來說的,但我確實遇到有人這樣做的,也不知道是不是因為他的英語實在太爛了,至少還可以用拼音吧,另外尋求翻譯工具幫忙也不錯的選擇。我舉例如下,像以下寫法出現在教學中倒還可以理解:this.user['名字'] = '張三' 或者 this.user.名字 = '張三'7. 明確定義函數固定數量的參數固定數量參數的函數內部不使用arguments去獲取參數,因為這樣,你定義的方法如果包含較多的腳本,就不能一眼看到這個方法接受些什麼參數以及參數的個數是多少。比如像下面: var $ = function(){return document.getElementById(arguments[0]);}應該改成:var $ = function(elemID){return document.getElementById(elemID);} 8. 不必熱衷動態事件綁定雖然知道事件可以動態綁定,比如使用addEventListener或者使用jQuery的bind方法,也知道採用動態事件綁定可以讓XHTML更干凈,但是一般情況下我還是建議直接把事件寫在DOM節點上,我認為這樣可以使代碼變得更容易維護,因為這樣做,我們在查看源代碼的時候就可以容易地知道什麼Element綁定了什麼方法,簡單說這樣更容易知道一個按鈕或鏈接點擊時調了什麼方法腳本。9. 降低代碼與XHTML的耦合性不要過於依賴DOM的一些內容特徵來調用不同的腳本代碼,而應該定義不同功能的方法,然後在DOM上調用,這樣不管DOM是按鈕還是鏈接,方法的調用都是一樣的,比如像下面的實現顯然會存在問題: function myBtnClick(obj) { if (/確定/.test(obj.innerHTML)) alert('OK'); else if (/取消/.test(obj.innerHTML)) alert('Cancel'); else alert('Other'); } <a herf="javascript:;" onclick="myBtnClick(this)">確定</a><a herf="javascript:;" onclick="myBtnClick(this)">取消</a> 上面例子其實在一個函數內處理了兩件事情,應該分成兩個函數,像上面的寫法,如果把鏈接換成按鈕,比如改成這樣:<input type="button" onclick="myBtnClick(this)" value="確定" />,那麼myBtnClick函數內部的obj.innerHTML就出問題了,因為此時應該obj.value才對,另外如果把按鈕名稱由中文改為英文也會出問題,所以這種做法問題太多了。10. 一個函數應該返回統一的數據類型因為JavaScrip是弱類型的,在編寫函數的時候有些人對於返回類型的處理顯得比較隨便,我覺得應該像強類型語言那樣返回,看看下面的兩個例子: function getUserName(userID) { if (data[userID]) return data[userID]; else return false; } 應該改為: function getUserName(userID) { if (data[userID]) return data[userID]; else return ""; } 這個方法如果在C#中定義,我們知道它准備返回的數據類型應該是字元串,所以如果沒有找到這個數據我們就應該返回空的字元串,而不是返回布爾值或其它不合適的類型。這並沒有影響到函數將來的調用,因為返回的空字元串在邏輯判斷上可被認作"非",即與false一樣,除非我們使用全等於"==="或typeof進行判斷。11. 規范定義JSON對象,補全雙引號使用標准肯定是有好處的,那麼為什麼還是有人不使用標准呢?我想這可能是懶或習慣問題。也許還會有人跟我說,少寫引號可以減輕文件體積,我認為這有道理但不是重點。對於伺服器返回的JSON數據,使用標准結構可以利用Firefox瀏覽器的JSONView插件方便查看(像查看XML那樣樹形顯示),另外你如果使用jQuery做開發,最新版本jQuery1.4+是對JSON格式有更高要求的,具體的可以自己查閱jQuery更新文檔。比如:{name:"Tom"}或{'name':'Tom'}都應該改成{"name":"Tom"}。12. 不在文件中留下未來確定不再使用的代碼片段當代碼調整或重構後,之前編寫的不再使用的代碼應該及時刪除,如果認為這些代碼還有一定利用價值可以把它們剪切到臨時文件中。留在項目中不僅增加了文件體積,這對團隊其它成員甚至自己都起到一定干擾作用,怕將來自己看回代碼都搞不懂這方法是干什麼的,是否有使用過。當然可以用文檔注釋標簽@deprecated把這個方法標識為不推薦的。13. 不重復定義其他團隊成員已經實現的方法對於大型項目,一般會有部分開發成員實現一些通用方法,而另外一些開發成員則要去熟悉這些通用方法,然後在自己編寫模塊遇到有調用的需要就直接調用,而不是像有些開發者喜歡"單干",根本不會閱讀這些通用方法文檔,在自己代碼中又寫了一遍實現,這不僅產生多餘的代碼量,當然也是會影響團隊開發效率的,這是沒有團隊合作精神的表現,是重復造輪子的悲劇。比如在通用類文件Common.js有定義function $(elemID){return document.getElementById(elemID)}那麼就不應該在Mail.js中再次出現這一功能函數的重復定義,對於一些復雜的方法更應該如此。14. 調用合適的方法當有幾個方法都可以實現同類功能的時候,我們還是要根據場景選擇使用最合適的方法。下面拿jQuery框架的兩個AJAX方法來說明。如果確定伺服器返回的數據是JSON應該直接使用$.getJSON,而不是使用$.get得到數據再用eval函數轉成JSON對象。如果因為本次請求要傳輸大量的數據而不得以使用$.post也應該採用指定返回數據類型(設置dataType參數)的做法。如果使用$.getJSON,在代碼中我們一眼能看出本次請求伺服器返回的是JSON。溫馨提示:jQuery1.4後,如果伺服器有設置數據輸出的ContentType,比如ASP.NET C#設置 Response.ContentType = "application/json",那麼$.get將與$.getJSON的使用沒有什麼區別。15. 使用合適的控制項存儲合適的數據曾發現有人利用DIV來保存JSON數據,以待頁面下載後將來使用,像這樣:<div id="json">{ "name":"Tom"}</div>,顯然這個DIV不是用來界面顯示的,如果非要這樣做,達到使用HTML文件進行數據緩存的作用,至少改成用隱藏域來存這數據更合理,比如改成:<input type="hidden" value=" { "name":"Tom"}" />。其實也可以利用window對象來保存一些數據,像上面的例子,我們可以在AJAX請求頁直接包含這樣的腳本塊:<script>window.userData = { "name":"Tom"};</script>,當在AJAX請求回調函數中執行完$( "#MyDiv ").html(data)後,在window上就馬上有了這一變數。如果採用第一種方法,將不可避免eval(document.getElementById("UserData").innerHTML)。如果在window對象存放大量數據的話,這些數據不用時要及時手動清理它們,它們是要等瀏覽器刷新或重啟後才會消失的,這就會增加內存開銷。16. 永遠不要忽略代碼優化工作代碼最優化是每個程序員應該努力達到的目標,也應該成為程序員永遠的追求。寫代碼的時候,不應該急著把功能實現出來,要想一下如何寫代碼,代碼的執行效率才是較好的。舉個例子:假設有定義getElementById的快捷方法functoin $(elemID){return document.getElementById(elemID)},那麼有人可能會寫出這樣的代碼$("MyDiv").parentNode.removeChild($("MyDiv")),其實這里執行了兩次getElementById DOM查找,如果改成這樣將更好:var myDiv = $("MyDiv"); myDiv.parentNode.removeChild(myDiv)。還好getElementById的DOM查找算比較快,如果換成getElementsByTagName則更應該注重優化了。jQuery開發團隊也有提醒大家要注意這方面的問題。當然,代碼優化技巧也是需要個人不斷積累的。曾有朋友跟我說他寫網站後台代碼從來不用考慮優化的,因為他們網站用的是至強四核伺服器,我覺得這是很可笑的。17. 會分析策劃文檔,能用面向對象方法進行介面定義和代碼組織這一能力對於每一個程序員來說都是非常重要的,這也是決定一個程序員水平高低的一個重要因素。能夠把需求細化並抽象出不同的類,然後有條理地編寫代碼,使代碼結構清晰,可讀性高,代碼易於維護,不至於太過程化而且雜亂無章,這樣才算是一個優秀的程序員。

⑸ jquery和javascript有什麼區別

JavaScript 是一種腳本語言,主要用在瀏覽器中,實現對網頁的文檔對象的操作和一些用戶交互動作的處理。

而 jQuery 則是 JavaScript 的一個代碼庫(或習慣性叫類庫),它將一些在 JavaScript 開發中經常用到的功能集合起來,以方便開發者直接使用,而不需要再用原生 JavaScript 語句寫大量代碼,同時可在不同瀏覽器間實現一致的效果。是當前最流行的 JavaScript 庫之一。

(5)jquery編程規范擴展閱讀:

jquery和javascrip都是腳本語言,

腳本語言又被稱為擴建的語言,或者動態語言,是一種編程語言,用來控制軟體應用程序,腳本通常以文本(如ASCII)保存,只在被調用時進行解釋或編譯

特點:

1、腳本語言(JavaScript,VBscript等)介於HTML和C,C++,Java,C#等編程語言之間。HTML通常用於格式化和鏈接文本。而編程語言通常用於向機器發出一系列復雜的指令。

2、腳本語言與編程語言也有很多相似地方,其函數與編程語言比較相像一些,其也涉及到變數。與編程語言之間最大的區別是編程語言的語法和規則更為嚴格和復雜一些.

3、與程序代碼的關系:腳本也是一種語言,其同樣由程序代碼組成。

4、腳本語言是一種解釋性的語言,例如Python、vbscript,javascript,installshield script,ActionScript等等,它不象cc++等可以編譯成二進制代碼,以可執行文件的形式存在,腳本語言不需要編譯,可以直接用,由解釋器來負責解釋。

5、腳本語言一般都是以文本形式存在,類似於一種命令。

舉個例子說:如果建立了一個程序,叫aaa.exe,可以打開.aa為擴展名的文件,為.aa文件的編寫指定了一套規則(語法),當別人編寫了.aa文件後,自己的程序用這種規則來理解編寫人的意圖,並作出回應,那麼,這一套規則就是腳本語言。

6、相對於編譯型計算機編程語言:用腳本語言開發的程序在執行時,由其所對應的解釋器(或稱虛擬機)解釋執行。系統程序設計語言是被預先編譯成機器語言而執行的。腳本語言的主要特徵是:程序代碼即是腳本程序,亦是最終可執行文件。腳本語言可分為獨立型和嵌入型,獨立型腳本語言在其執行時完全依賴於解釋器,而嵌入型腳本語言通常在編程語言中(如C,C++,VB,Java等)被嵌入使用。

7、和系統程序設計語言相比:不同是腳本語言是被解釋而系統程序設計語言是被編譯。被解釋的語言由於沒有編譯時間而提供快速的轉換,通過允許用戶運行時編寫應用程序,而不需要耗時的編譯/打包過程。解釋器使應用程序更加靈活,腳本語言的代碼能夠被實時生成和執行。腳本語言通常都有簡單、易學、易用的特性,目的就是希望能讓程序設計師快速完成程序的編寫工作。

參考資料:網路-腳本語言

⑹ 深刻了解jQuery對象和普通DOM對象的區別

一、JavaScript 對象JavaScript 提供多個內建對象,比如 String、Date、Array 等等。
對象只是帶有屬性和方法的特殊數據類型。
訪問對象的屬性:
[javascript]
var message="Hello World!";
var x=message.length;

創建 JavaScript 對象:
[javascript]
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";

使用對象構造器:
[javascript] view plain
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
[javascript]
var myFather=new person("Bill","Gates",56,"blue");
var myMother=new person("Steve","Jobs",48,"green");

二、DOM對象
DOM實際上是以面向對象方式描述的文檔模型。DOM定義了表示和修改文檔所需的對象、這些對象的行為和屬性以及這些對象之間的關系。
根據W3C DOM規范,DOM是HTML與XML的應用編程介面(API)。
通過 DOM,可以訪問所有的 HTML 元素,連同它們所包含的文本和屬性。可以對其中的內容進行修改和刪除,同時也可以創建新的元素。
HTML DOM 獨立於平台和編程語言。它可被任何編程語言諸如 Java、JavaScript 和 VBScript 使用。
DOM對象,即是我們用傳統的方法(javascript)獲得的對象。

三、jQuery對象
jquery對象其實是一個javascript的數組
這個數組對象包含125個方法和4個屬性
4個屬性分別是
jquery 當前的jquery框架版本號
length 指示該數組對象的元素個數
context 一般情況下都是指向HtmlDocument對象
selector 傳遞進來的選擇器內容 如:#yourId或.yourClass等

如果你通過$("#yourId")方法獲取jquery對象,
並且你的頁面中只有一個id為yourId的元素
那麼$("#yourId")[0]就是HtmlElement元素
與document.getElementById("yourId")獲取的元素是一樣的

簡單理解,就是jQuery創建的對象
jQuery對象就是通過jQuery包裝DOM對象後產生的對象。jQuery對象是jQuery獨有的,其可以使用jQuery里的方法,但是不能使用DOM的方法

四、DOM對象和jquery對象的區別
[javascript]
var domObj = document.getElementById("id"); //DOM對象
var $obj = $("#id"); //jQuery對象;
[javascript]
$(「#img」).attr(「src」,」test.jpg」); //這里的$(「#img」)就是獲取jQuery對象;
[javascript]
document.getElementById(「img」).src=」test.jpg」;//這里的document.getElementById(「img」)就是DOM對象;
再說一個例子:就是this,我在寫jQuery的時候經常這樣寫:
this.attr(「src」,」test.jpg」);
可是就是出錯。其實this是DOM對象,而
.attr(「src」,」test.jpg」)
是jQuery方法,所以出錯了。要解決這個問題就要將DOM對象轉換成jQuery對象,例如:
$(this).attr(「src」,」test.jpg」);

五、DOM對象和jquery對象的轉換
DOM對象轉成jQuery對象:
對於已經是一個DOM對象,只需要用$()把DOM對象包裝起來,就可以獲得一個jQuery對象了。
方法:$(DOM對象)
[javascript]
var v=document.getElementById(「v」); //DOM對象
var $v=$(v); //jQuery對象

jQuery對象轉成DOM對象:
兩種轉換方式將一個jQuery對象轉換成DOM對象:[index]和.get(index);
(1)jQuery對象是一個數據對象,可以通過[index]的方法,來得到相應的DOM對象。
[javascript]
var $v =$(「#v」) ; //jQuery對象
var v=$v[0]; //DOM對象
alert(v.checked) //檢測這個checkbox是否被選中

(2)jQuery本身提供,通過.get(index)方法,得到相應的DOM對象。
[javascript]
var $v=$(「#v」); //jQuery對象
var v=$v.get(0); //DOM對象
alert(v.checked) //檢測這個checkbox是否被選中

⑺ Java, JScript, JavaScript, jQuery, Javanese 的區別是什麼

java:重型編程語言環境

JScript:腳本語言標准規范

JavaScript:腳本語言實現

jQuery腳本語言實現,同時是javascript的封裝擴展
Javanese :javascript運行環境(實質與java同級別,只是java屬於更重型)

⑻ 可以直接學習jquery嗎

這個得看你做什麼,做到什麼程度,如果只是學習了解,直接學習即可,jquery將js進行了封裝,並提供優秀的js編程規范,但是歸根到底它只是js的一個庫而已,想深入了解還是需要掌握js,通過學習jquery可以加深你的js的了解,簡化對s程序的編寫。

⑼ requirejs模塊化編程怎麼理解

一、Javascript模塊化編程

目前,通行的Javascript模塊規范共有兩種:CommonJS和AMD。

1、commonjs

2009年,美國程序員Ryan Dahl創造了node.js項目,將javascript語言用於伺服器端編程,這標志」Javascript模塊化編程」正式誕生。

在瀏覽器環境下,沒有模塊也不是特別大的問題,畢竟網頁程序的復雜性有限;但是在伺服器端,一定要有模塊,與操作系統和其他應用程序互動,否則根本沒法編程。

node.js的模塊系統,就是參照CommonJS規范實現的。在CommonJS中,有一個全局性方法require(),用於載入模塊。

假定有一個數學模塊math.js,就可以像下面這樣載入。

var math = require('math');

然後,就可以調用模塊提供的方法:

var math = require('math');

math.add(2,3); // 5

因為這個系列主要針對瀏覽器編程,不涉及node.js,所以對CommonJS就不多做介紹了。我們在這里只要知道,require()用於載入模塊就行了。

2、AMD

AMD是」Asynchronous Mole Definition」的縮寫,意思就是」非同步模塊定義」。它採用非同步方式載入模塊,模塊的載入不影響它後面語句的運行。所有依賴這個模塊的語句,都定義在一個回調函數中,等到載入完成之後,這個回調函數才會運行。

模塊定義
define(id?, dependencies?, factory);
其中:

id: 模塊標識,可以省略。
dependencies: 所依賴的模塊,可以省略。
factory: 模塊的實現,或者一個JavaScript對象。

模塊載入

AMD也採用require()語句載入模塊,但是不同於CommonJS,它要求兩個參數:
require([mole], callback);

第一個參數[mole],是一個數組,裡面的成員就是要載入的模塊;第二個參數callback,則是載入成功之後的回調函數。如果將前面的代碼改寫成AMD形式,就是下面這樣:

require(['math'], function (math) {
math.add(2, 3);
});

math.add()與math模塊載入不是同步的,瀏覽器不會發生假死。所以很顯然,AMD比較適合瀏覽器環境。

目前,主要有兩個Javascript庫實現了AMD規范:require.js和curl.js。本系列的第三部分,將通過介紹require.js,進一步講解AMD的用法,以及如何將模塊化編程投入實戰。

二、requirejs模塊化編程

require.js載入的模塊,採用AMD(非同步模塊定義規范) 規范。也就是說,模塊必須按照AMD的規定來寫。

require.js的兩個重要的特點:

1、實現js文件的非同步載入,避免網頁失去響應

2、管理模塊之間的依賴性,便於代碼的編寫和維護

載入requirejs:

<script src="js/require.js" data-main="js/main"></script>

data-main屬性的作用是,指定網頁程序的主模塊。在上例中,就是js目錄下面的main.js,這個文件會第一個被require.js載入。由於require.js默認的文件後綴名是js,所以可以把main.js簡寫成main。

main.js常見實例:

require.config({
paths: {
moleA: '',
moleB:'',
moleC:''
}
});

require(['moleA', 'moleB', 'moleC'], function (moleA, moleB, moleC){
// some code here

});

1、require.config

require.config用來配置一些參數,它將影響到requirejs庫的一些行為。

require.config的參數是一個JS對象,常用的配置有baseUrl,paths等。

這里配置了paths參數,使用模塊名「jquery」,其實際文件路徑jquery-1.7.2.js(後綴.js可以省略)。

我們知道jQuery從1.7後開始支持AMD規范,即如果jQuery作為一個AMD模塊運行時,它的模塊名是「jquery」。注意「jquery」是固定的,不能寫「jQuery」或其它。

註:如果文件名「jquery-1.7.2.js」改為「jquery.js」就不必配置paths參數了。

如果將jQuery應用在模塊化開發時,其實可以不使用全局的,即可以不暴露出來。需要用到jQuery時使用require函數即可。

2、require()函數

require()函數接受兩個參數。第一個參數是一個數組,表示所依賴的模塊,上例就是['moleA', 'moleB',
'moleC'],即主模塊依賴這三個模塊;第二個參數是一個回調函數,當前面指定的模塊都載入成功後,它將被調用。載入的模塊會以參數形式傳入該函數,從而在回調函數內部就可以使用這些模塊。

閱讀全文

與jquery編程規范相關的資料

熱點內容
影音先鋒好看愛情網 瀏覽:570
泰國電影《罪孽》 瀏覽:209
msn導航如何添加app 瀏覽:435
程序員做銷售還是服務員 瀏覽:577
軍人戈壁灘巡邏電影 瀏覽:939
微信設置存儲文件夾 瀏覽:646
爆點娛樂游戲源碼 瀏覽:489
傳統單片機和嵌入式系統的關系 瀏覽:622
熊出沒所有電影節目表 瀏覽:813
美噠噠看電影 瀏覽:164
u盤儲存視頻叫什麼文件夾 瀏覽:256
韓國大寸度電影有關老師的 瀏覽:718
好色的小姨小說 瀏覽:429
電影直接看 瀏覽:645
單片機學習什麼書本比較好 瀏覽:934
下載的盒子刷機包需要解壓嗎 瀏覽:309
中文字幕丈夫和公公一起干我 瀏覽:307
為什麼哈利波特連接不到伺服器 瀏覽:18
電信寬頻如何做ftp伺服器 瀏覽:823