前端知識一些總結

前言

自從ES6標準發佈以後，我還沒怎麼細看，因此關於js的知識整體還留在幾年之前。雖然藉着Vue,ElmentUI等前端框架能作出實用的界面來，但新瓶仍是裝着老酒。若是隻有我本身，也足以應付不少事情，但涉及到和前端同事合做，有時他們寫的新式語法不甚瞭解時難免略有尷尬。

藉着大前端的紅火，以及ES6及後期版本的某些語法接近於C#，熟悉起來相對簡單。

let命令

衆所周知，js的var是很靈活的，靈活到變量未聲明前也可以使用。

b="bb" var b="cc" 

輸出：「bb」

C# var

在很早之前，C#是不支持var的。後來吸收了javascript的var,但也作了一些優化：

• 必須在變量聲明時賦值。

能夠寫var a="1234"; 不能寫出 var a; a="1234" 

• 必須是局部變量

//局部變量a能夠用a聲明，b必須指定類型 class Program { string b = "222"; static void Main(string[] args) { var a = "111"; } } 

• 變量聲明後，類型肯定，不能再改變類型

ES6 let

ES6針對var的優化方式就是新增了let和const,用來區分不一樣的應用場景

• var能夠在未聲明變量前使用，let會報錯

a="12" var a="3" 

輸出：「12」

b="bb" let b="bb" 

輸出：Uncaught SyntaxError: Identifier ‘b’ has already been declared
at :1:1

• let聲明的變量只在代碼塊有效

{ let a1="12" var b2="3" } a1 

輸出：VM486:5 Uncaught ReferenceError: a1 is not defined
at :5:1

{ let a1="12" var b2="3" } b2 

輸出：「3」

• 暫時性死區

只要塊級做用域內存在let,它所聲明的變量就「綁定"這個區域，再也不受外部的影響。

var tmp = 123; if (true) { tmp = 'abc'; // ReferenceError let tmp; } 

輸出：VM566:4 Uncaught ReferenceError: tmp is not defined
at :4:7
(anonymous) @ VM566:4

ES6 明確規定，若是區塊中存在let和const命令，這個區塊對這些命令聲明的變量，從一開始就造成了封閉做用域。凡是在聲明以前就使用這些變量，就會報錯。

總之，在代碼塊內，使用let命令聲明變量以前，該變量都是不可用的。這在語法上，稱爲「暫時性死區」（temporal dead zone，簡稱 TDZ）。

詳情參考let和const命令

Module

c#有using,java有import，但之前的javascript卻沒有相應的模塊（module）體系，沒法將一個大程序拆分紅互相依賴的小文件，再用簡單的方法拼裝起來。這對開發大型的、複雜的項目造成了巨大障礙。

在 ES6 以前，社區制定了一些模塊加載方案，最主要的有 CommonJS 和 AMD 兩種。前者用於服務器，後者用於瀏覽器。ES6 在語言標準的層面上，實現了模塊功能，並且實現得至關簡單，徹底能夠取代 CommonJS 和 AMD 規範，成爲瀏覽器和服務器通用的模塊解決方案。

ES6 模塊的設計思想是儘可能的靜態化，使得編譯時就能肯定模塊的依賴關係，以及輸入和輸出的變量。CommonJS 和 AMD 模塊，都只能在運行時肯定這些東西。好比，CommonJS 模塊就是對象，輸入時必須查找對象屬性。

// CommonJS模塊 let { stat, exists, readFile } = require('fs'); // 等同於 let _fs = require('fs'); let stat = _fs.stat; let exists = _fs.exists; let readfile = _fs.readfile; 

面代碼的實質是總體加載fs模塊（即加載fs的全部方法），生成一個對象（_fs），而後再從這個對象上面讀取 3 個方法。這種加載稱爲「運行時加載」，由於只有運行時才能獲得這個對象，致使徹底沒辦法在編譯時作「靜態優化」。

ES6 模塊不是對象，而是經過export命令顯式指定輸出的代碼，再經過import命令輸入。

// ES6模塊 import { stat, exists, readFile } from 'fs'; 

export 命令

模塊功能主要由兩個命令構成：export和import。export命令用於規定模塊的對外接口，import命令用於輸入其餘模塊提供的功能。

一個模塊就是一個獨立的文件。該文件內部的全部變量，外部沒法獲取。若是你但願外部可以讀取模塊內部的某個變量，就必須使用export關鍵字輸出該變量。下面是一個 JS 文件，裏面使用export命令輸出變量。

// profile.js export var firstName = 'Michael'; export var lastName = 'Jackson'; export var year = 1958; 

上面代碼是profile.js文件，保存了用戶信息。ES6 將其視爲一個模塊，裏面用export命令對外部輸出了三個變量。

export的寫法，除了像上面這樣，還有另一種。

// profile.js var firstName = 'Michael'; var lastName = 'Jackson'; var year = 1958; export {firstName, lastName, year}; 

Module 的語法

Components組件

對我來講，瞭解Module如何應用最容易的辦法，是翻看VUE或ElementUI的源碼。

例如alert組件 element\packages\alert\src\main.Vue

<template> //省略 . . . </template> <script type="text/babel"> const TYPE_CLASSES_MAP = { 'success': 'el-icon-success', 'warning': 'el-icon-warning', 'error': 'el-icon-error' }; export default { name: 'ElAlert', props: { title: { type: String, default: '' }, type: { type: String, default: 'info' }, //省略... }, data() { return { visible: true }; }, methods: { close() { //省略。 } }, computed: { typeClass() { return `el-alert--${ this.type }`; }, //省略 } }; </script> 

從這裏咱們能夠看到幾個關鍵點:

• export 用於輸出
• props-父組件能夠經過props將值傳給子組件

詳情參考Vue組件選項props

總結

官方文檔很詳細。暫時不想寫了。懶惰是罪人

參考

element

Vue

ECMAScript 6 入門