jside編程代碼（jside中文版下載）

本文目錄一覽：

• 1、javascript用什麼編輯器
• 2、一般程序員做前端代碼開發時用什麼工具寫代碼？
• 3、最好用的 JavaScript IDE 或編輯器是哪個
• 4、DW中怎麼編寫JavaScript腳本語言？
• 5、哪些JavaScript IDE最好用
• 6、如何寫出規範的JavaScript代碼

javascript用什麼編輯器

目前前端使用率最高的就是sublime 和 webstorm了，當然了還有visual ，DW， 等等。下面僅介紹一些sublime和webstorm。

1.Sublime Text 是一個代碼編輯器（Sublime Text 2是收費軟件，但可以無限期試用），也是HTML和散文先進的文本編輯器。Sublime Text是由程序員Jon Skinner於2008年1月份所開發出來，它最初被設計為一個具有豐富擴展功能的Vim。

Sublime Text具有漂亮的用戶界面和強大的功能，例如代碼縮略圖，Python的插件，代碼段等。還可自定義鍵綁定，菜單和工具欄。Sublime Text 的主要功能包括：拼寫檢查，書籤，完整的 Python API ， Goto 功能，即時項目切換，多選擇，多窗口等等。Sublime Text 是一個跨平台的編輯器，同時支持Windows、Linux、Mac OS X等操作系統。

2.WebStorm 是jetbrains公司旗下一款JavaScript 開發工具。被廣大中國JS開發者譽為“Web前端開發神器”、“最強大的HTML5編輯器”、“最智能的JavaScript IDE”等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能。

功能編輯

JavaScript

· 基於DOM，特定瀏覽器完成

· 編碼導航和用法查詢

· 支持ECMAScript

· 支持CoffeeScript

· 支持結點

· JavaScript重構

· JavaScript單元測試

· 代碼檢測和快速修復

· JSLint/JSHint

· 基於 Mozilla的JavaScript調試器

其他用途

· 批量代碼分析

· 編碼語言混合或內混

· 拼寫檢查器

· 重複代碼檢測器

編輯語言

· 支持HTML5

· css/js

· 檢驗和快速修復

· Zen編碼

· 顯示內容

· 顯示應用的風格

便捷的環境

· HTML5樣本文件和其他Web應用程序模板

· FTP和遠程文件同步

· 集成了版本控制系統

· 本地記錄

優勢功能編輯

智能的代碼補全

支持不同瀏覽器的提示，還包括所有用戶自定義的函數(項目中)

代碼補全包含了所有流行的庫，比如：JQuery, YUI, Dojo, Prototype, Mootools and Bindows。

代碼格式化

代碼不僅可以格式化，而且所有規則都可以自己來定義

html提示

大家經常在js代碼中編寫html代碼，一般來說十分痛苦，不過有了智能提示，就爽多了。而且html裡面還能有js提示。

聯想查詢

只需要按着Ctrl鍵點擊函數或者變量等，就能直接跳轉到定義；可以全

代碼導航和用法查詢 (8張)

項目查找函數或者變量，還可以查找使用並高亮。

代碼重構

這個操作有些像Resharper，熟悉Resharper的用戶應該上手很快，支持的有重命名、提取變量/函數、內聯變量/函數、移動/複製、安全刪除等等。

代碼檢查和快速修復

可以快速找到代碼中的錯誤或者需要優化的地方，並給出修改意見，快速修復。

代碼調試

支持代碼調試，界面和IDEA相似，非常方便。

代碼結構瀏覽

可以快速瀏覽和定位

代碼摺疊

功能雖小，不過勝在方便高效

包裹或者去掉外圍代碼

自動提示包裹或者去掉外圍代碼，一鍵搞定

一般程序員做前端代碼開發時用什麼工具寫代碼？

1、Bootstrap

Bootstrap是快速開發Web應用程序的bai前端工具包。它是一個CSS和HTML的集合，它使用了新的瀏覽器技術，給你的Web開發提供了時尚的版式，表單，buttons，表格，網格系統等等。

2、藍湖

藍湖用於查看標註和切圖下載非常方便

3、Cloud9IDE

Cloud9IDE是一個基於Node.JS構建的JavaScript程序開發WebIDE。它擁有一個非常快的文本編輯器，支持為JS，HTML，CSS和這幾種的混合代碼進行着色顯示。Cloud9IDE還為node.js和GoogleChrome集成調試器，可以在IDE中啟動、暫停和停止。

4、Notepad++

Notepad++是一款非常有特色的編輯器，是開源軟件，可以免費使用。我們開發人員都是必備的。支持的語言:C,C++,Java,C#,XML,HTML,PHP,Javascript!

5、VisualStudioCode

VisualStudioCode是一個運行於OSX，Windows和Linux之上的，針對於編寫現代web和雲應用的跨平台編輯器。

6、GIMP

GIMP是GNU圖像處理程序(GNUImageManipulationProgram)的縮寫。包括幾乎所有圖象處理所需的功能，號稱Linux下的PhotoShop。GIMP在Linux系統推出時就風靡了繪圖愛好者圈。

7、SecureHeaders

SecureHeaders是Twitter送給Web開發者的一份大禮，作為一款Web安全開發工具，Secureheaders能夠自動實施安全相關的header規則，包括內容安全政策(CSP)，防止XSS、HSTS等攻擊，防止火綿羊(Firesheep)攻擊以及XFO點擊劫持等。

8、Fontello

Fontello是個圖標字體生成器。這個工具允許用戶把這些圖標web字體放到自己的項目中。主要特性如下：縮小字形集合，減小字體大小;合併一些字體標記到單個文件中；訪問大量專業級的開源圖標。

最好用的 JavaScript IDE 或編輯器是哪個

IDE:

1，visual studio——宇宙最強IDE。用熟之後，懵然發現，其實宇宙中只有一個IDE，其它的所謂IDE，原來都只是加強型的文本編輯器。

2，webstrom——JB公司出品，必屬精品，一人之下，萬人之上。

3，HBuilder——國貨精品，專註H5，全中文，很給力。

文本編輯器：

1，VS CODE——visual studio的閹割版。。雖然直接閹成了文本編輯器。但更加輕量，依然宇宙最強。

2，sublime——曾經的王者，在VS CODE出現之前，公認最好的文本編輯器，沒有之一。

3，Brackets——ADOBE出品，專註WEB，界面美觀，配色華麗。

4，Notepad++——雖一度被sublime吊打，但小巧，簡單，依然有其亮點

如果樓主只是寫JS，不做後端的話，其實用個文本編輯器就足夠了。。VS CODE和sublime都不錯。。用IDE寫JS有些殺雞用牛刀的感覺。IDE通常用來做一些C#,C++，JAVA之類的大型項目，才能發揮出優勢。。

DW中怎麼編寫JavaScript腳本語言？

在任何IDE和編輯器中都可以編寫JS前端程序，而我們只需要注意注意JS語言的規範就行了。

目前在HTML文件中，運性JS有兩種方式，一種是內嵌代碼；另一種是編寫單獨的JS文件，然後引用。

第一種：內嵌代碼

就是在script type=”text/javascript”/script中直接編寫代碼，例如：

!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”

html xmlns=””

head

meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /

title首頁/title

    script type=”text/javascript”

        alert(“我是運性結果”);

    /script

/head

body

/body

/html

第二種：外部引用

在script標籤上添加一個src屬性指向文件地址。

例如我們在user.js文件中寫上：

alert(“我是運性結果”);

然後在HTML中引用：

!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”

html xmlns=””

head

meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /

title首頁/title

    script type=”text/javascript” src=”user.js”

/head

body

/body

/html

上面兩種的運性結果一樣，都是在瀏覽器中彈出一個提示框

哪些JavaScript IDE最好用

WebStorm

優點：

1. 關鍵字提示

使用WebStorm開發時，它會自動提示JS變量，關鍵字，方法，函數或參數名，可幫助你快速輸入，避免一些低級的輸入錯誤。

2. 支持代碼重構

做開發最頭疼的就是維護結構混亂的代碼，為了保證你的代碼後期維護簡單快捷，開發過程中就必須確保代碼整潔，WebStorm 則會幫助你自動重構代碼，如移動文件，內聯變量提取等。

3. 集成Node.js

WebStorm 集成Node.js ,可以運行，編譯，測試Node.js App。

4.  集成代碼質量工具

集成了JSHint,JSLint，JSCS 等。

5. 保存本地歷史記錄

本地歷史記錄可以幫助你跟蹤代碼，獲取修改的代碼。

缺點：商用付費，偶爾性能較差，後台會創建.idea 文件，一個窗口中無法打開多個項目，非原生文件系統經常會出現很多問題

Atom

優點：

內置包管理功能

Atom內置包管理功能，是Atom最重要的功能特徵

開源免費

Atom 在GitHub上是開源的，並且是免費的

內嵌Git 控件，Web技術

內嵌Web 技術如JS，HTML及CSS

缺點：效率低

Sublime Text

優點：快

Sublime Text 最顯著的特點就是啟動和使用的過程中一個感覺就是快

多行選擇和編輯

多個光標和列選擇支持同時選擇多行編輯。非常酷炫的功能

支持多個操作系統

支持Windows,Linux,OSX.

插件種類非常豐富

低內存消耗

缺點：

沒有調試器

缺少代碼重構等功能

嚴格來講Sublime Text 是文本編輯器，不能稱之為IDE

Vim

有很多插件支持，有望成為成熟功能全面的IDE。

優點：功能非常強大，免費快並且輕量級；跨平台，穩定

缺點：上手難，界面風格老舊，70年代的風格，並不適合所有人

Visual Studio Code

VSCode 主要集中開發，重定義功能，內置Debug 和雲應用。Code 是免費的且可用於多個平台如Linux,Mac OSX,以及Windows，內嵌Git控件。

缺點：加載時間慢

Brackets

Brackets 是開源的代碼編輯器，前端工程師和Web設計人員比較適用，支持多平台，且不需要區分前後端。界面非常整潔，清新。啟動非常快。項目之間切換也非常方便。

缺點：效率低，同一時間只能打開一個文件。功能不全，缺少靜態內核分析功能，也缺少一些元素級別的文本編輯命令。

Codenvy

開發人員使用Codenvy可以修改，運行，編譯雲端代碼。

能夠提供自定義運行時環境，調試代碼；能夠將工作進度共享，且安裝非常便捷。

Microsoft’s Visual Studio

JavaScript Intellisense 的引入讓VS提供非常有用的腳本提示和自動完成輸入功能。界面友好清潔。

缺點只能用於Windows 平台

支持 JavaScript 的工具

1.SpreadJS 是一款企業級 JavaScript 電子表格控件，能將電子表格、數據可視化及計算功能集成在 JavaScript Web 應用程序中，創建計算器、動態交互式儀錶盤和樣式豐富的報表，可以流暢操作海量數據。

2.Wijmo Enterprise 是為企業應用程序開發而推出的一系列包含HTML5 和JavaScript 的開發控件集。無論應用程序是移動端、PC端、還是必須要支持IE6，Wijmo Enterprise 均能滿足需求。

如何寫出規範的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)”確定/aa 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請求頁直接包含這樣的腳本塊：scriptwindow.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. 會分析策劃文檔，能用面向對象方法進行接口定義和代碼組織這一能力對於每一個程序員來說都是非常重要的，這也是決定一個程序員水平高低的一個重要因素。能夠把需求細化並抽象出不同的類，然後有條理地編寫代碼，使代碼結構清晰，可讀性高，代碼易於維護，不至於太過程化而且雜亂無章，這樣才算是一個優秀的程序員。