js開發代碼（js代碼編寫）

本文目錄一覽：

• 1、如何編寫高效的js代碼
• 2、做為一名前端開發人員，有哪些值得一讀的JS代碼
• 3、Web前端新手應該知道的JavaScript開發技巧有哪些?
• 4、簡單的js代碼編程
• 5、前端開發，如何寫出優秀js代碼
• 6、什麼是JS代碼？

如何編寫高效的js代碼

今天，我學習了怎麼樣編寫高效的js代碼

1.管理好作用域和作用域鏈，通過多使用局部變量，減少with和try catch的使用。因為with和catch都是在作用域的頂部增加了一個對象。

2.高效的存取數據。存取數據有四種方式：字面量值，變量，數組元素和對象屬性。

3.流控制：最快的條件判斷：1）if語句：兩個之內的離散值需要判斷，大連的值能容易的分到不同的區間範圍中。2）switch語句：超過2個少於10個離散值需要判斷，條件值是非線性的，無法分離出區間範圍。3）數組查詢：超過10個值，條件對應的結果是單一值，而不是一系列操作。

4.循環的提升：將循環變量遞減到0而不是遞增，這樣只判斷條件是真是假不用做比較了；展開循環：Duff策略：每一次循環完成標準循環的1-8次。通過數組值的總數除以8來確定循環次數。

5.謹慎使用HTMLCollection對象。每次存取這類對象的屬性，都會重新查詢DOM中匹配的節點。

6.將要連接的字符串存儲到數組中，調用join（）方法合併在一些瀏覽器中比+號連接字符串要快點。

7.瀏覽器會限制js可以運行的最長時間，可以使用定時器將任務拆分執行。從而避免瀏覽器彈出終止運行的警告。

做為一名前端開發人員，有哪些值得一讀的JS代碼

既然是值得一讀的JS代碼，那麼肯定是能提高工作效率、提升開發水平的代碼。下面給大家推薦一部分值得一讀的代碼：

1.用IE重起計算機或者關機，代碼如下：

script language=”JavaScript”

var Application=new ActiveXObject(‘Shell.Application.1’);

/script

button οnclick=Application.ShutdownWindows();關機/buttonbr

button οnclick=Application.Suspend();掛起/button

2.一種在父窗口中得知 window.open()出的子窗口關閉事件的方法（定時器實現) ，代碼如下：

/script

input type=button name=btnOpen value=open

script language=javascript for=btnOpen event=onclick

document.fm_Info.txtValue.value=””

winOpen=window.open(“child.htm”,””,”toolbar=no, location=no, directories=no, status=no, menubar=no” )

timer=window.setInterval(“IfWindowClosed()”,500);

/script

3.用javascirpt在TEXTAREA中插入元素（光標位置），代碼如下：

SCRIPT

function storeCaret (textEl) {

if (textEl.createTextRange)

textEl.caretPos = document.selection.createRange().duplicate();}

function insertAtCaret (textEl, text) {

if (textEl.createTextRange textEl.caretPos) {

var caretPos = textEl.caretPos;

caretPos.text =caretPos.text.charAt(caretPos.text.length – 1) == ‘ ‘ ?text + ‘ ‘ : text;}else

textEl.value = text;

/SCRIPT

每個前端開發者的出發點不同，選擇讀取的代碼肯定也有所不同。根據自己欠缺的方向，找准對應的優秀開源項目，才能提升代碼水平。

Web前端新手應該知道的JavaScript開發技巧有哪些?

今天小編要跟大家分享的文章是關於Web前端新手應該知道的JavaScript開發技巧有哪些?熟悉Web前端的小夥伴都知道，Javascript

的很多擴展的特性是的它變得更加的犀利，同時也給予程序員機會創建更漂亮並且更讓用戶喜歡的網站。

儘管很多的開發人員都樂於頌揚javascript，但是仍舊有人看到它的陰暗面。

使用很多javascript代碼的Web頁面會加載很慢，過多的使用javascript使得網頁醜陋和拖沓。很快如何有效地使用

javascript成為一個非常火熱的話題。

今天小編就為Web前端新手準備了這篇JavaScript開發技巧，希望能夠對你有所幫助，下面我們一起來看一看吧!

1、儘可能的保持代碼簡潔

可能大家都聽到過了N遍這個代碼簡潔問題了。作為一個開發人員你可能在你的代碼開發過程中使用了很多次，但千萬不要在js開發中忘記這點。

§盡量在開發模式中添加註釋和空格，這樣保持代碼的可讀性

§在發佈到產品環境前請將空格和注釋都刪除，並且盡量縮寫變量和方法名

§使用第三方工具幫助你實現壓縮javascript。

2、思考後再修改prototypes

添加新的屬性到對象prototype中是導致腳本出錯的常見原因。

yourObject.prototype.anotherFunction=’Hello’;

yourObject.prototype.anotherMethod=function(){…}

在上面代碼中，所有的變量都會被影響，因為他們都繼承於yourObject。這樣的使用會導致意想不到的行為。所以建議在使用完後刪除類似的修改。

yourObject.prototype.anotherFunction=’Hello’;

yourObject.prototype.anotherMethod=function(){};

test.anotherMethod();

deleteyourObject.prototype.anotherFunction=’Hello’;

deleteyourObject.prototype.anotherMethod=function(){};

3、DebugJavascript代碼

即使最好的開發人員都會犯錯。為了最大化的減少類似錯誤，請在你的debugger中運行你的代碼，確認你沒有遇到任何細微的錯誤。

4、避免Eval

你的JS在沒有eval方法的時候也可以很好的工作。eval允許訪問javascript編譯器。如果一個字符串作為參數傳遞到

eval，那麼它的結果可以被執行。

這會很大的降低代碼的性能。盡量避免在產品環境中使用eval。

5、最小化DOM訪問

DOM是最複雜的API，會使得代碼執行過程變慢。有時候Web頁面可能沒有加載或者加載不完整。最好避免DOM。

6、在使用javascript類庫之前先學習javascript

互聯網充斥着很多的javascript類庫，很多程序員都往往使用js類庫而不理解負面影響。強烈建議你在使用第三方類庫之前學習基本的JS

代碼，否則，你就準備着倒霉吧。

7、不要用「SetTimeOut」和「Setinterval」方法來作為「Eval」的備選

setTimeOut(“document.getID(‘value’)”,3000);

在以上代碼中document.getID(『value』)在setTimeOut方法中被作為字符串來處理。這類似於eval

方法，在每個代碼執行中來執行一個字符串，因此會降低性能，因此，建議在這些方法中傳遞一個方法。

setTimeOut(yourFunction,3000);

8、[]比newArray();更好

一個常犯的錯誤在於使用當需要數組的時候使用一個對象或者該使用對象的時候使用一個數組。但是使用原則很簡單：

「當屬性名稱是小的連續整數，你應該使用數組。否則，使用一個對象」_DouglasCrockford,JavaScript:Good

Parts的作者.

建議：

vara=[‘1A’,’2B’];

避免：

vara=newArray();

a[0]=”1A”;

a[1]=”2B”;

9、盡量不要多次使用var

在初始每一個變量的時候，程序員都習慣使用var關鍵字。相反，建議你使用逗號來避免多餘的關鍵字，並且減少代碼體積。如下：

varvariableOne=’string1′,

variableTwo=’string2′,

variableThree=’string3′;

10、不要忽略分號「;」

這往往是大家花費數個小時進行debug的原因之一。

我很確信你肯定也在其它的文章中閱讀過以上相關的內容，但是大家可能往往都忽略了很多基本的規則。你是不是也曾經忽略過分號。是不是也遇到過eval

關鍵字問題導致性能問題?

以上就是小編今天為大家分享的關於Web前端新手應該知道的JavaScript

開發技巧有哪些?的文章，希望本篇文章能夠對剛剛接觸Web前端行業的新手們有所幫助。想要了解更多Web前端知識記得關注北大青鳥Web前端培訓官網!

*聲明：內容與圖片均來源於網絡(部分內容有修改)，版權歸原作者所有，如來源信息有誤或侵犯權益，請聯繫我們刪除或授權事宜。

簡單的js代碼編程

!DOCTYPE html

html

head

title/title

meta charset=”utf-8″

style type=”text/css”

div {

min-height: 30px;

line-height: 30px;

border: 1px dashed #ccc;

margin-bottom: 5px;

width: 400px;

padding: 0px 20px;

}

#showInfo {

color: green;

}

/style

/head

body

div

label昵稱：/label

input type=”text” name=”name” id=”name”

/div

div

label郵箱：/label

input type=”text” name=”email” id=”email”

/div

div

button確定/button

/div

div id=”showInfo”/div

script type=”text/javascript”

var nameInput = document.getElementById(‘name’);

var emailInput = document.getElementById(’email’);

var btn = document.getElementsByTagName(‘button’)[0];

var wrap = document.getElementById(‘showInfo’);

btn.onclick= function () {

wrap.innerHTML = ”;

var p1 = document.createElement(‘p’);

p1.textContent = ‘昵稱：’ + nameInput.value;

var p2 = document.createElement(‘p’);

p2.textContent = ‘郵箱：’ + emailInput.value;

wrap.appendChild(p1);

wrap.appendChild(p2);

}

/script

/body

/html

//jq

var nameInput = $(‘#name’);

var emailInput = $(‘#email’);

var btn = $(‘button’).get(0);

var wrap = $(‘#showInfo’);

btn.on(‘click’, function () {

wrap.html(”);

var p1 = $(‘p’);

p1.text(‘昵稱：’ + nameInput.value);

var p2 = $(‘p’);

p2.text(‘郵箱：’ + emailInput.value);

wrap.append(p1);

wrap.append(p2);

});

上班好無聊。這要是看不懂我也就沒辦法了

前端開發，如何寫出優秀js代碼

每位前端工程師都喜歡易理解、可擴展、易維護的代碼，如何寫出優秀的JavaScript代碼，也是每位前端工程師的功課。如何才能寫出優秀的JavaScript代碼呢？

1.寫代碼前一定要搞清楚你要解決的問題是什麼，你的方案是否能夠解決問題。

2.擁有良好的命名規範，注意變量名區分大小寫，允許包含字母、數字、美元符號（$）和下劃線，但第一個字符不允許是數字，不允許包含空格和其他標點符號。

3.多寫代碼注釋。編寫代碼時的注釋應當盡量全面一些，這便於自己再次瀏覽代碼時好理解。

4.能不使用with語句的時候盡量不要使用with語句，盡量少使用eval ,每次使用eval需要消耗大量時間。

擁有一手好代碼的前端開發者，更具有大神風範，所以好代碼不僅要精鍊，更要易讀。

什麼是JS代碼？

你所謂的HTML是英文Hypertext Markup Language的簡寫，說明了說是標籤，還不能稱之為語言。一般是一個開始標籤與一個結束標籤組成！是網站代碼的基礎！如果是你網頁不會這個肯定辦不了事！

JS的全稱是javascript，是一門內嵌語言，是寫在網頁中以實現網頁客戶端交互。當然服務端JS也還是有的！一般是以script language=”javascript”/script包括中的，也就是說以上還是一個HTML標籤，但裡邊所寫的內容卻是javascript,瀏覽器會自動解釋！當然這個語言就是為了網頁的動態而出現的！

所以兩者是有很大區別的！你可以這樣理解：HTML是網頁基礎，而JAVASCIRPT是為了補充HTML的靜態網頁而出現的一個HTML或說瀏覽器內置語言！實現網頁動態效果！