包含畫圖理解javascript的詞條

本文目錄一覽：

• 1、javascript 和jsp的區別
• 2、javascript框架是什麼意思？有什麼作用？怎麼理解？最好舉個例子
• 3、如何理解這 14 道 JavaScript 題
• 4、關於Javascript的問題 getElementById().length
• 5、Javascript如何在網頁上實現畫圖功能
• 6、[探討]為什麼說JavaScript是性價比最高的技術？

javascript 和jsp的區別

jsp其實就java的一個方向.

java用來是一門編程語言,他可以用來開發軟體,也可以用來開發網站,jsp就是java開發網站的方向.

java和javascript是完全不一樣的,他們只是名字有點相似,事實上javascript是為了借java的名號來推廣自己.

你可以這樣理解jsp和javascript

jsp是為了處理數據,javascript是為了展示數據..比如說,我把一個數據給jsp處理,處理完之後他就不管了..可是我覺得這樣顯示數據他不好看..怎麼辦.這就要交給javascript了.

由此可看出來..jsp著重數據的出路,而javascript更著重數據的展示.

javascript框架是什麼意思？有什麼作用？怎麼理解？最好舉個例子

淺談js框架設計 在這個JavaScript框架隨處亂跑的時代，你是否考慮過寫一個自己的框架？下面的內容也許會有點幫助。

一個框架應該包含哪些內容？

1.語言擴展

大部分現有的框架都提供了這部分內容，語言擴展應當是以ECMAScript為基礎進行的，不應當依賴任何宿主環境，也就是說，作為一個框架的設計者，你應當保證你的語言擴展可以工作在任何宿主環境中，而不是僅僅適合瀏覽器環境。你必須保證把它放到WScript,SpiderMonkeyShell,Rhino Shell,Adobe ExtendScript Toolkit甚至FlashActionScript等環境中都能正確的工作，舉個現實一點的例子setTimeout不可以出現在其中，你也不能用XMLHTTP載入腳本運行，儘管它們看起來很貼近語言。保持這一部分的獨立性可以讓你方便的移植你的框架到其他宿主環境下。　

2.數據結構和演算法

JS本身提供的內置對象非常有限，很多時候，框架應該提供一些數據結構和演算法來幫助使用者更好的完成邏輯表達。但我認為隨便翻本數據結構或者演算法書用JS挑幾個實現了加到框架中是不負責任的，多數數據結構應當以庫的形式存在而非框架。框架中的數據結構應該足夠常用而且實現不是非常複雜的，可以考慮的如集合、哈希表、鏈表、有序數組以及有序數組上的二分搜索。對JS來說，對象是一個天然的字元串哈希表，而集合很容易在哈希表上實現，因此只需要處理掉Object的內置方法，我們就可以實現一個高效的集合或哈希表。

3.DOM擴展

JS主要應用於Web開發，目前所有的框架也都用於瀏覽器環境，那麼，瀏覽器端環境里重點中的重點DOM當然也是框架的擴展目標了，如果一個框架不提供DOM的擴展，那麼其實基本沒什麼用處了。需要注意的是，DOM擴展也有w3c的標準可依，所以，不要嘗試為各種瀏覽器做一些奇怪的擴展，比如FF下面的element們的prototype，框架的編寫者應當無視它們。DOM擴展的主要任務之一是兼容性，不同瀏覽器上的DOM實現相差很多，框架必須消除這些實現帶來的差異，提供統一的訪問方式。當然，做為框架，應當提供一些更為方便的介面，將宿主提供的DOM對象用js對象封裝是個不錯的想法，但是同時這也很可能會造成內存泄露，所以做這事之前，了解內存泄露是必要的。實際上，自己想像的擴展遠不如W3C的設計，比如如果你能更完整地實現XPath，你就能比JQuery做的更好。

4.AJAX擴展

大部分現有框架出現的原因都是因為AJAX，所以如果你想設計一個受歡迎的框架，AJAX是必須要做的。跟DOM擴展很相似，AJAX擴展的主要任務是兼容和內存泄露，對AJAX的核心組件XMLHttpRequest對象，必須在IE6中使用ActiveX創建，而ActiveX又有各種版本，而隨之而來的內存泄露和兼容性變得非常麻煩，比如：事件函數名大小寫、this指向、事件函數的null賦值。處理好這些兼容性的基礎上，可以做進一步的工作，提供一些常用的實現。應該指出的是，除非你確定你提供的介面比原來的更好，否則不要改變原來的XMLHttpRequest對象的介面，比如寫一個Request函數來代替open和send，如果你不清楚W3C的專家們為什麼這麼設計，請不要把他們想像成傻瓜。我想自己另外寫一個兼容且內存安全的XMLHttpRequest加入到自己框架的命名空間里，使它從外部看上去跟W3C描述的XMLHttpRequest一模一樣是不錯的辦法，對XMLHttpRequest我認為唯一可以考慮的修改是提供onsuccess事件。當然針對一些複雜功能的AJAX擴展也是可行的，比如HTMLHttpRequest類似的擴展可以讓AJAX初學者喜歡你的框架。

5.效果

時間效果是最能刺激用戶神經的，漸隱、緩動、滑動、顏色漸變這些都很不錯，其實技術難度也不是很高。拖動效果則是瀏覽器中一個很重要的效果，用滑鼠事件來模擬本來很容易，不過兼容和setCapture也是很麻煩的事情。這一部分內容量力而為就可以了。

7.腳本管理

因為大家非常喜歡C++風格的include或者JAVA風格的import，很多框架提供了基於AJAX的腳本管理，不過同步載入的效率問題是巨大的。之前我們曾經作過各種嘗試，希望找到一個瀏覽器中不用XMLHTTP載入外部js的方法，但是最後得出的結論是：不可能。

關於這個，略微思考就可以知道，Java C++ C#都是編譯型語言，include 和import都是編譯期處理，在js中做到類似的事情是不太可能的。為了實現類似的功能，我想我們可以利用服務端程序或者編寫一個文本工具來實現。

YUI將所有的js文件依賴關係提取出來的做法是可行的，不過這不能算是include的實現方式了，維護依賴關係不是一件很簡單的事情。

8.控制項

EXT的成功告訴我們：提供優質的控制項才是框架的王道。你不能指望優質的擴展會吸引更多使用者。多數人只關心如何快速完成手邊的工作。當然不是所有框架都要提供這部分內容。控制項好壞取決於能力和美工，不過至少要保證框架里的控制項不會內存泄露。

框架設計的若干原則：

1.不要做多餘的事

對這框架設計來說，我認為一個非常必要的原則就是不要做多餘的事情，舉個極端的的例子：

function add(a,b)

{

return a+b;

}

這樣的代碼如果出現在框架中，就是個十足的笑話。不過大多數時候，事情不是那麼明顯，很多框架試圖用某種形式在JS中”實現”OOP，但是實際上，JS本身是OO的（ECMA262中明確指出來的，不像某些人所說是基於對象云云）只是有一些語法跟Java等語言不同。那麼顯然這些OOP的”實現”其實是跟上面的例子一樣的道理。另一個例子是Array.prototype.clone

Array.prototype.clone=function(){

return this.slice();

}

2.慎用prototype擴展

很多框架利用修改原生對象的prototype來做語言擴展，但我認為應當小心地看待這件事，毫無疑問這將造成一定的命名污染，你無法保證框架的使用者或者與你的框架共存的其他框架不會使用同樣的名字來完成其他的事情。特別需要注意的是，Object和Array這兩個對象的prototype擴展格外的危險，對Object來說，如果Object被修改，那麼框架的使用者將無法創建一個未被修改的乾淨的對象，這是一個致命的問題，尤其如果你的使用者喜歡用forin來反射一個對象的屬性。Array.prototype修改的危險來自js一個不知有意還是無意的小小設計，對原生的Array來說，任何情況下for和forin的遍歷結果是相同的，而因為無法控制自定義的屬性是不可枚舉的，任何Array.prototype的修改都會破壞這種特性。一方面，我認為不應當推薦用forin遍曆數組，這其中包含著錯誤的語義。另一方面，框架的設計者必須尊重這些使用者，因為對於ECMA所定義的語法而言，它是正確的做法。其中包含著這樣一個簡單的事實：假如你的框架中修改了Array.prototype，那麼一些之前能正確工作的代碼變得不可正確工作。

直接修改prototype看上去非常誘人，但是在考慮它之前應當先考慮兩種可能的方案：

(1)函數

提供一個以對象為第一個參數的函數比如 Array.prototype.each =

function ForEach(arr,f)

{

if(arr instanceof Array)/*…*/;

}

(2)繼承

以return的形式繼承一個內置對象 比如考慮Array.prototype.each=

function ArrayCollection()

{

var r=Array.apply(this,arguments);

r.each=function(){/*……*/};

return r;

}

套用一句名言，不要修改原生對象的prototype，除非你認為必要。不過修改原生對象的prototype確實有一些特殊的用途（就是”必要的情況”），主要體現在2點：文字量支持和鏈式表達。舉一個例子可以體現這兩點：

var cf=function f(a,b,c,d)

{

/*……..*/

}.$curry(3,4).$curry(5).$run();

如果希望實現類似上面的表達方式，可能就需要擴展Function.prototype，權衡一下的話，如果你認為命名污染的代價是值得的，那麼也是可以提供給使用者的。

一個比較討巧的辦法是把選擇權利交給使用者，提供一個擴展器：

function FunctionExtend()

{

this.$curry=function(){/*……*/};

this.$run=function(){/*……*/};

}

如果用戶喜歡可以FunctionExtend.apply(Function.prototype); 如果不喜歡擴展 則可以

var r=function(){/*……*/};

FunctionExtend.apply(r);

3.保持和原生對象的一致

不知你有沒有注意到，內置對象Function Array等都有這樣的性質：

new Function()跟Function的結果完全一致（String Number Boolean這種封裝型對象沒有這樣的性質）

如果框架中提供的類也具有這種性質，會是不錯的選擇。這僅僅是一個例子，如果你注意到了其他細節，並且讓框架中的類和原生對象保持一致，對使用者來說是非常有益的。

4.尊重語言 尊重用戶

編寫框架應該尊重依賴的語言環境，在對原有的元素修改之前，首先應該考慮到原來的合理性，任何語言的原生環境提供的都是經過了精心設計的，在任何修改之前，至少應該考慮這幾點：效率、命名規範、必要性、與其他功能是否重複。如果你沒有付出至少跟語言的設計者相當的工作量，你的做法就是欠考慮的。

編寫框架也應該尊重用戶的所有習慣，將編寫者的喜好強加給使用者並不是框架應該做的事情。框架應該保證大部分在沒有框架環境下能運行的代碼都能在框架下正常工作，這樣用戶不必為了使用你的框架而修改原有的代碼。

5.規範命名和使用命名空間

減少命名污染可以讓你的框架跟其他框架更好地共存。很多框架使用了命名空間來管理，這是良好的設計。命名應該是清晰且有實際意義的英文單詞，如前面3所述，為了保持和原生對象的一致，命名規則最好貼近原生對象，比如類名第一字母大寫，方法名用駝峰命名。捎帶一提prototype中的$實在是非常糟糕的設計，無法想像$出現的目的僅僅是為了讓使用者少寫幾個字母。這種事情應該交給你的用戶在局部代碼中使用

如何理解這 14 道 JavaScript 題

使用在相似的字元串變數輸出，比如某一個模塊的所有字元串輸出都必須是html安全的，這個時候就可以使用該表達式

#escape x as x?html

First name: ${firstName}

#noescapeLast name: ${lastName}/#noescape

Maiden name: ${maidenName}

/#escape ！

關於Javascript的問題 getElementById().length

ul id=”listUL”……./ul

alert(oUl.length)=11，意思是說listUL含有11個子節點，可能你數不出來11個，

是因為你忽略了「空白」的地方，也算是一個節點。

11個節點分別是：空白，li，空白，li，空白，li，空白，li，空白，li，空白

望採納^

aLi = oUl.childNodes;

aLi.length =11是正常 的，就是上面的原因

Javascript如何在網頁上實現畫圖功能

方法只有一個：

    通過canvas的方式，在畫布上畫圖

步驟：

1、定義一個canvas

2、獲取canvas，然後通過畫圖

示例：canvas 元素來顯示一個紅色的矩形

canvas id=”myCanvas”/canvas//定義一個canvas

script type=”text/javascript”

var canvas=document.getElementById(‘myCanvas’);//獲取canvas

var ctx=canvas.getContext(‘2d’);

ctx.fillStyle=’#FF0000′; //圖形填充色

ctx.fillRect(0,0,80,100); //繪製一個紅色矩形

/script

[探討]為什麼說JavaScript是性價比最高的技術？

JavaScript作為性價比最高的技術只是人們對於JavaScript一個很客觀的評價，個人認為JavaScript確實所有計算機語言中比較好的一門語言，但是究竟好在哪裡很多人都不知道，甚至一些小的前端工程師對於JavaScript的理解也只停留在做網頁頁面的特效上，然而事實卻並非如此，JavaScript可以說是網站前端的靈魂，網站前端技術之所以能夠興起主要還是要靠JavaScript，因為其是網站前端語言中唯一能編程的語言。

下面說一下個人對於JavaScript的一些理解，看看其到底有哪些高的性價比。

1、JavaScript實現了網站頁面的交互和特效。

這應該是JavaScript最基本的功能了吧，使用JavaScript寫特效或者是做交互應該是我們前端開發最常用的，比如網站上的輪播圖、無縫滾動、焦點圖、放大鏡等等都是使用JavaScript實現的，還有ajax技術可以說是JavaScript實現後台與用戶交互的得力助手，據說就是因為ajax技術才使得JavaScript如此火爆，當然這只是一個傳聞，但是沒有JavaScript我們的頁面可能失去了很多色彩，使得我們提交頁面不得不刷新表單，這一切會讓我們瘋的。

2、關於JavaScript在html5中的應用

做前端的都知道html5是一個劃時代的語言，他不同於之前的html只能簡單的做網頁的布局或者骨架，html增加了語義化標記和大量的API函數，這使得html也有了編程的身影，比如使用html5的畫圖標記可以畫出自己想要的圖形，無需藉助圖像處理工具，使用html的API函數可以直接調用安卓或者ios手機設備上的攝像頭等硬體設備，之前這是我們前端開發根本不敢想像的工作，這些神奇的API函數其實就是JavaScript，html5增加的很多新的功能和方法大多也是使用JavaScript進行封裝的代碼。所以JavaScript和html5大家應該都明白了吧。

3、基於JavaScript各種前端框架和JavaScript框架

以前對於前端工程師而言做一個兼容各個瀏覽器甚至是兼容全平台包括移動設備的頁面是很難的，但是現在，使用一些基於JavaScript開發的前端框架如bootstrap等可以很輕鬆的做到兼容各個瀏覽器設置是兼容移動設備，這都是JavaScript的功勞。還有很多JavaScript框架如angularjs等可以很輕鬆的實現頁面特效和一些頁面交互，這都也都是JavaScript的功勞，總之，前端中唯一編程的語言就是JavaScript，它解救了前端開發人員不能編程只能寫樣式的困境。

4、JavaScript的新版本ES6

很多搞開發的人員應該都聽說過現在很熱的一門後台語言nodejs，它雖然和現在我們使用的JavaScript沒有直接的關係，因為nodejs是伺服器腳本後台語言，JavaScript是瀏覽器前端語言，，但是其語法乃至其出身應該都是有淵源的，現在nodejs作為後台語言要比傳統的後台語言如php、jsp效率要高很多，其語法就是JavaScript的新語法ES6標準，其運行環境也是瀏覽器JavaScript解釋器重新經過改進封裝，所以兩者還是有很深的關係的。要是說nodejs是JavaScript一個應用有些牽強，但是也不可否認JavaScript語言確實有很高的性價比，以為從nodejs的效能可以看出JavaScript的性價比。

最後總結：從JavaScript中的幾個應用說了一下JavaScript的神奇之處和其一些效能，正因為有JavaScript這麼廣泛的應用才能說明JavaScript只性價比很高的語言，不然沒人會去用。