資訊專欄INFORMATION COLUMN
摘要：類的數據類型就是函數，類本身就指向構造函數。另一個需要注意的地方是，在子類的構造函數中，只有調用之后，才可以使用關鍵字，否則會報錯。
1.ES6-- 新一代JavaScript標準 1.1 const和let關鍵字
以前只有全局變量以及函數內部的局部變量，所以以前的局部變量只能定義在函數里面，但是現在不是了，可以通過let關鍵字來定義局部變量。同時通過const關鍵字來定義常量，定義后的基本類型數據是不能改變的，但是定義的是引用類型的變量的話，還是可以改變的。
1.2 函數1.箭頭函數，在回調中很有作用，箭頭函數永遠是匿名的
2.this在箭頭函數中的使用：在嵌套函數中，碰到setInterval, setTimeout等定時器函數時，this會發生漂移，指向windows（global對象），以前我們要將this緩存[var self = this;]()或者通過[(){}.bind(this]())來改變this的內部函數的指向，但是有了箭頭函數后，再也不用更擔心這個問題了；
3.函數默認參數，以前的函數默認參數 [var a = a || []]();但是ES6支持了函數的默認參數；
4.rest參數[...](),rest參數是沒有指定變量名的參數數組，而arguments是所有參數的集合。而且arguments參數不是一個真正的數組，而rest參數是一個真的數組，可以調用sort和map方法。可以告別arguments參數了；
1.3.展開符操作...可以用于函數的調用，數組字面量，以及對象的展開（ES7）.
1.4.模板字符串用反引號標識。它可以當作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。模板字符串中嵌入變量，需要將變量名寫在${}之中。
// 字符串中嵌入變量
var name = "Bob", time = "today";
Hello {name}, how are you {time}?
1.5 解構賦值
解構方法可以很快的從數組或者對象中提取變量，可以用一個表達式讀取整個解構；
1.6 類JavaScript是原型繼承的，但聲明起來卻很怪，所有提供了一個原型鏈的class語法糖。通過class關鍵字定義了一個“類”，可以看到里面有一個constructor方法，這就是構造方法，而this關鍵字則代表實例對象。constructor方法是類的默認方法，通過new命令生成對象實例時，自動調用該方法。一個類必須有constructor方法，如果沒有顯式定義，一個空的constructor方法會被默認添加。
注意，定義“類”的方法的時候，前面不需要加上function這個關鍵字，直接把函數定義放進去了就可以了。另外，方法之間不需要逗號分隔，加了會報錯。類的數據類型就是函數，類本身就指向構造函數。
Class之間可以通過extends關鍵字實現繼承，這比ES5的通過修改原型鏈實現繼承，要清晰和方便很多。
子類必須在constructor方法中調用super方法，否則新建實例時會報錯。這是因為子類沒有自己的this對象，而是繼承父類的this對象，然后對其進行加工。如果不調用super方法，子類就得不到this對象。另一個需要注意的地方是，在子類的構造函數中，只有調用super之后，才可以使用this關鍵字，否則會報錯。這是因為子類實例的構建，是基于對父類實例加工，只有super方法才能返回父類實例。
super這個關鍵字，既可以當作函數使用，第一種情況，super作為函數調用時，代表父類的構造函數。第二種情況，super作為對象時，指向父類的原型對象。可以采用super(). + 方法名字來調用父類的方法。
類相當于實例的原型，所有在類中定義的方法，都會被實例繼承。如果在一個方法前，加上static關鍵字，就表示該方法不會被實例繼承，而是直接通過類來調用，這就稱為“靜態方法”。
1.7 模塊1.首先推出Require.js的AMD規范，Node.js誕生后，隨之而來的是CommonJS格式，后來的browerify，知道es6推出了模塊化，對模塊化進行了支持；
es6模塊功能主要由兩個命令構成：export和import。export命令用于規定模塊的對外接口，import命令用于輸入其他模塊提供的功能。通過as取別名。
export {firstName, lastName, year};
import {firstName, lastName, year} from "./profile";
function setName(element) {
element.textContent = firstName + " " + lastName;
}
1.8 使用Babel
各種方案層出不窮，JavaScript不斷發展，導致很多性能無法普及，babel提供了JavaScript多用途編譯器。讓你可以開心的使用ES6.
Babel通過安裝插件（plugin）或者預設（preset，就是一組設定好的插件）來編譯代碼。創建一個.babelrc文件。
{
"presets":[],
"plugins":[]
}
2.Component組件與模塊化
首先要明白兩個概念：模塊（module）和組件（component）,模塊是指的語言層面的，在前端大多數指的是一個JavaScript模塊，往往變現為一個JavaScript文件，以及其對外暴露的一些屬性和方法。組件更偏向于業務層面，往往是一個獨立功能的實現，比如一個下拉菜單，文本編輯器，路由系統等。一個組件往往包括其所需的所有資源，包括邏輯js,樣式css，模板html（template），甚至圖片和文字。
2.1模塊化方案的階段1.全局變量+命名空間：
避免污染全局作用域，模塊內部通常用匿名自執行函數。問題多多：（1）依賴全局變量，污染全局變量的同時，不安去.（2）依賴約定的命名空間，不可靠。（3）要手動管理并控制執行，容易出錯，在上線前要手動合并一些模塊
2.AMD+CommonJs
解決時上述的問題，全局下定義require和define，不需要其他變量
通過文件路徑或模塊聲明來定義模塊
依賴與加載都是由加載器完成，提供了打包工具自動分析依賴并合并
3.ES6模塊化
JavaScript帶來了自己的模塊化方案，相比AMD/CommonJS,功能更強大，引用和暴露的方式更多樣，支持復雜的靜態分析，使構建工具更細粒度地移除模塊實現中的無用代碼。
2.2 組件化階段1.基于命名空間的多入口文件
基于前面的第一種模塊化方案，不同資源手動導入，最典型的就是jQuery插件；
2.基于模塊的多入口文件
隨著前端模塊化方案的流行，組件也趨于AMD這樣的規范，把組件也暴露為一個模塊。一個AMD模塊的JavaScript，一個CSS(Less,Sass)模塊的樣式，以及其他資源。
3.單JavaScript入口的組件
這是現在比較流行的方案，借助browerify、webpack這樣的打包工具，允許我們將一般的資源當做JavaScript模塊來對待。并一致的加載進來。
4.Web Component
這是組件化里的國家隊，與2011年提出，但是還處于不溫不火的狀態，主要包括自定義元素（Custom Element）、HTML模板（HTML Template）、Shadow DOM、HTML 的引入（HTML Import）
3.前端開發常用工具1.包管理工具
用來安裝、管理和分享JavaScript包，同時自動處理多個包之間的依賴。主要有包管理工具，Bower、Component、Spm、以及Node.js的親兒子npm;
2.任務流工具
在前端項目中會遇到各種各樣的任務，比如壓縮合并代碼、驗證代碼格式、測試代碼、監視文件等等，執行這些方法不可能每次都去手動寫這些命令，非常麻煩，接觸Linux的肯定會想到shell腳本。現在前端比較流行的有Grunt和Gulp兩個；
3.模塊打包工具
主要有bundler和webpack兩個，webpack作為后起之秀，它支持AMD、CommonJS類型，通過loader機制也可以使用ES6的模塊格式，正向一個全能型構建工具發展。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/81530.html
摘要：確定新的包命名規則為了盡可能避免包的誤植域名現象，將不會再允許使用相似的包命名不過會進一步鼓勵開發者使用自己的命名空間來發布包。本文是對其幾十年來技術之路的回顧與展望，也是一代技術人的青春回憶。 showImg(https://segmentfault.com/img/remote/1460000012846628); 前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了...
摘要：的網站仍然使用有漏洞庫上周發布了開源社區安全現狀報告，發現隨著開源社區的日漸活躍，開源代碼中包含的安全漏洞以及影響的范圍也在不斷擴大。與應用安全是流行的服務端框架，本文即是介紹如何使用以及其他的框架來增強應用的安全性。 showImg(https://segmentfault.com/img/remote/1460000012181337?w=1240&h=826); 前端每周清單專注...
摘要：年，和前端開發者與應用程序前端開發者之間產生了巨大的分歧。開發最常見的解決方案有手機和平板的原生應用程序桌面應用程序桌面應用程序原生技術最后，前端開發者可以從瀏覽器開發中學習到，編寫代碼不需要考慮瀏覽器引擎的限制。 前端開發者手冊2019 Cody Lindley 編著 原文地址 本手冊由Frontend Masters贊助，通過深入現代化的前端工程課程來提高你的技能。 下載：PDF ...
摘要：年，和前端開發者與應用程序前端開發者之間產生了巨大的分歧。開發最常見的解決方案有手機和平板的原生應用程序桌面應用程序桌面應用程序原生技術最后，前端開發者可以從瀏覽器開發中學習到，編寫代碼不需要考慮瀏覽器引擎的限制。 前端開發者手冊2019 Cody Lindley 編著 原文地址 本手冊由Frontend Masters贊助，通過深入現代化的前端工程課程來提高你的技能。 下載：PDF ...
摘要：年，和前端開發者與應用程序前端開發者之間產生了巨大的分歧。開發最常見的解決方案有手機和平板的原生應用程序桌面應用程序桌面應用程序原生技術最后，前端開發者可以從瀏覽器開發中學習到，編寫代碼不需要考慮瀏覽器引擎的限制。 前端開發者手冊2019 Cody Lindley 編著 原文地址 本手冊由Frontend Masters贊助，通過深入現代化的前端工程課程來提高你的技能。 下載：PDF ...
