2015秋前端開發(fā)課件-js良好實踐

1、1-JavaScript良好實踐學(xué)習(xí)如何寫出好的JavaScript2015 Spring, xian本章內(nèi)容命名在JavaScript中作用域全局和函數(shù)偽造塊作用域重復(fù)的對象標(biāo)識符this對象在全局中，函數(shù)中和對象作用域中在事件處理器中變量嚴(yán)格模式命名在JavaScript中命名JavaScript中幾乎所有都用camelCase駱駝命名法變量，方法，屬性對象，模塊var number = 5;function printMsg(message) var arr = ;arr.toString();var controls = (function() ();命名：函數(shù)構(gòu)造器唯一規(guī)則的例外是函

2、數(shù)構(gòu)造器函數(shù)構(gòu)造器使用PascalCase帕斯卡命名法函數(shù)構(gòu)造器比其他對象個特殊一些其用new來調(diào)用不用new，this值不正確不幸的是，JavaScript沒有不用new而調(diào)用函數(shù)構(gòu)造器的方式希望開發(fā)者能夠看到表達(dá)上的不同作用域全局，函數(shù)和對象作用域JavaScript只有兩類作用域全局作用域和函數(shù)作用域函數(shù)作用域可能被對象作用域調(diào)用，當(dāng)使用new時JavaScript中沒有塊作用域和不定義作用域使用IIFE定義作用域在所有文件中的全部JavaScript代碼，共享同一全局作用域作用域任何if-else, for或while塊作用域中的事物，在塊外有效count和printMsg都已聲明但，

3、count沒有值，因為執(zhí)行流并沒有到初始化處 if (false) var count = 15; function printMsg(message) console.log(Message: + message + !); ;printMsg(count)/outputs Message: undefined!count和printMsg都已定義 假的塊作用域 演示函數(shù)作用域函數(shù)作用于是唯一的臨時變量作用域變量用var聲明，并不能在函數(shù)作用域外存在(function() if (false) var count = 15; function printMsg(message) consol

4、e.log(Message: + message + !); ; ();printMsg(count); /ReferenceError: printMsg is not defined函數(shù)作用域 演示重復(fù)的對象標(biāo)識符重復(fù)的對象標(biāo)識符由于在JavaScript中共享了全局作用域，通常會有重復(fù)的對象標(biāo)識符如果兩個或多個庫/框架/js文件有同名函數(shù)，會發(fā)生什么？哪一個是實際的？重復(fù)的對象標(biāo)識符(2)避免重復(fù)標(biāo)識符的方案，是使用函數(shù)作用域，或模塊需要做一些事情，只暴露有意義的片段jsConsole.write(Message);document.write(Message);database.wri

5、te(Message);重復(fù)的對象標(biāo)識符 演示this對象this對象this對象有不同的值，根據(jù)作用域在函數(shù)作用域中在對象作用域中在全局作用于中在事件處理器中this在全局作用域中在全局作用域中this意為全局作用域如 window在全局作用域中，下列均運行正確console.log( this = window) /logs truethis.message = Hello;var message = Hello;window.message = Hello;this在全局作用域中 演示this在函數(shù)作用域中this在函數(shù)作用域中幾乎總是意味著，this為函數(shù)的父對象如果函數(shù)在全局作用域中

6、，this意味著全局作用域在對象作用域中，this意味著對象自身之后再敘述(function createAndSetVariable(number) this.number = number;(5);console.log(number); /logs 5this為windowthis在函數(shù)作用域中 演示this在對象作用域中當(dāng)函數(shù)用new調(diào)用時，創(chuàng)建對象作用域應(yīng)用規(guī)則與傳統(tǒng)的函數(shù)調(diào)用相同除了this的值總是要注意大寫命名的函數(shù)就是這個原因！function Person(fname, lname) this.fname = fname; this.lname = lname;var per

7、son = new Person();var invalidPerson = Person();this意味著person對象的實例this為windowthis在對象作用域中 演示this在事件處理器中this在事件處理器中，為觸發(fā)事件的DOM元素如，當(dāng)click事件觸發(fā)了一個錨點元素，this為click錨點元素var button = document.getElementById(the-button);function onButtonClick(ev) console.log(this = button); /logs truebutton.addEventListener(cli

8、ck, onButtonClick, false);var usernameTb = document.getElementById(tb-user);function onUsernameTbChange(ev) console.log(this = usernameTb); /logs trueusernameTb.addEventListener(change, onUsernameTbChange, false);this在事件處理器中 演示變量變量在作用域的最開始聲明所有變量即便其并不使用防止了大量易錯代碼許多方式來結(jié)構(gòu)化變量聲明：function something() var n

9、umber; var word; var eventNumbers;function something() var number, word, eventNumbers;變量在作用域的最開始聲明所有變量即便其并不使用防止了大量易錯代碼許多方式來結(jié)構(gòu)化變量聲明：function something() var number; var word; var eventNumbers;function something() var number, word, eventNumbers;均正確的運行變量 演示嚴(yán)格模式嚴(yán)格模式strict mode嚴(yán)格模式是JavaScript功能的優(yōu)秀子集刪除了一些

10、JavaScript不好的部分加入了部分有待為ECMAScript版本嚴(yán)格模式改變了語法和運行時行為讓改變語法來防止靜態(tài)錯誤約束功能來刪除不良JS讓轉(zhuǎn)變到新JS特性更無縫嚴(yán)格模式用法嚴(yán)格模式能夠用全腳本或預(yù)函數(shù)如果使用全腳本，所有代碼都在嚴(yán)格模式中并非好主意，因為第三方腳本可能在嚴(yán)格模式下失效更好的使用IIFE和預(yù)函數(shù)嚴(yán)格模式該方式代碼只在嚴(yán)格模式中運行嚴(yán)格模式屬性一些嚴(yán)格模式特征：轉(zhuǎn)換靜態(tài)錯誤至異常嘗試改變document值刪除對象的原型令this在函數(shù)作用域中未定義在函數(shù)作用域中，this等于undefined，來替換父對象禁止八進(jìn)制語法防止不用var的變量聲明嚴(yán)格模式 演示JavaScr

11、ipt執(zhí)行JavaScript執(zhí)行眾所周知，JavaScript為逐行執(zhí)行執(zhí)行流從頂至底想象所有加載的JavaScript文件，合并為一個大JavaScript文件當(dāng)在執(zhí)行流程中到達(dá)時，JavaScript執(zhí)行一行代碼但可能為多次執(zhí)行用戶并不滿意時間JavaScript執(zhí)行(2)常用方法啟動JavaScript執(zhí)行，當(dāng)網(wǎng)頁準(zhǔn)備好時有事件來啟動或者，如果使用jQuery，可用其加載事件在加載時間的最后來加載腳本，確保所有DOM已經(jīng)渲染window.onload = function() /do the code preparations$(document).ready(function();$(function();HTML文件中的JavaScript加載HTML文件中的JavaScript加載一個常見的問題是：哪里加載JavaScript？在頭部加載？在body元素的尾部加載？在文檔中任意地方加載？所有的JavaScript文件都有相同的全局作用域，所以并不沒有什么問題