前端培訓-初級階段（13） - 類、模塊、繼承

時間 2019-11-05

原文原文鏈接

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，如今前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提高技術水平，打牢基礎知識的中心思想，咱們開課啦（每週四）。html

該文爲前端培訓-初級階段（1三、18）的補充內容 (介紹了 ECMAScript 歷史，ES6 經常使用點)。前端

本文介紹ECMAScript基礎知識。jquery

基礎內容知識咱們會用到。默認已讀。es6

咱們要講什麼

js 中的類
js 中的模塊
js 中的繼承實現

類

在 JavaScript 中，類的實現是基於原型繼承機制的。若是兩個實例都從同一個原型對象上繼承了屬性，咱們說它們是同一個類的實例。
ES6 提供了更接近傳統語言的寫法，引入了 Class（類）這個概念。經過class關鍵字，能夠定義類。
ES6 的 Class 能夠看做是一個語法糖，它的絕大部分功能，ES5 均可以作到，新的class寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已。。

class Logger {
  constructor(wigName) {
    this.wigName = wigName;
  }

  warn(info) {
    return console.log(`${this.wigName}-${info}`)
  }
}
logger = new Logger('lilnong.top')
logger.warn('404')
//ES5 中怎麼寫
function Logger(wigName){this.wigName = wigName;}
Logger.prototype.warn = function(info){
    return console.log(`${this.wigName}-${info}`)
}
logger = new Logger('lilnong.top-ES5')
logger.warn('404')

如圖 ES6 其實也仍是在prototype上面試

ES6 的 Class還有一些特殊的功能，好比必須經過 new 來實例化。那麼咱們的 ES5 怎麼來實現這個功能？（話說 ES6 怎麼在低版本實現能夠去在線 babel）編程

function fun(){console.log(new.target)};console.log(fun(),new fun())經過新加的 new.target來區分。
function fun(){console.log(this instanceof fun)};console.log(fun(),new fun())這個方法就是經過 new 的特性是判斷，面試題new的時候系統作了幾步操做segmentfault
1. 建立一個空對象
2. 空對象綁在 this 上
3. 而後調用

模塊

歷史上，JavaScript 一直沒有模塊（module）體系，沒法將一個大程序拆分紅互相依賴的小文件，再用簡單的方法拼裝起來。其餘語言都有這項功能，好比 Ruby 的require、Python 的import，甚至就連 CSS 都有@import，可是 JavaScript 任何這方面的支持都沒有，這對開發大型的、複雜的項目造成了巨大障礙。
在 ES6 以前，社區制定了一些模塊加載方案，最主要的有 CommonJS 和 AMD 兩種。前者用於服務器，後者用於瀏覽器。ES6 在語言標準的層面上，實現了模塊功能，並且實現得至關簡單，徹底能夠取代 CommonJS 和 AMD 規範，成爲瀏覽器和服務器通用的模塊解決方案。
ES6 模塊的設計思想是儘可能的靜態化，使得編譯時就能肯定模塊的依賴關係，以及輸入和輸出的變量。CommonJS 和 AMD 模塊，都只能在運行時肯定這些東西。好比，CommonJS 模塊就是對象，輸入時必須查找對象屬性。

// CommonJS模塊
let { stat, exists, readFile } = require('fs');

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

ES6 的模塊功能主要由兩個命令構成：export和import。export命令用於規定模塊的對外接口，import命令用於輸入其餘模塊提供的功能。固然如今瀏覽器還不支持瀏覽器

模塊規範（CommonJSAMDCMDUMD）

CommonJS(NodeJS)
require引入模塊是同步的,但script標籤引入JS是異步的, 所以CommonJS在瀏覽器環境下沒法正常加載(沒法處理依賴問題)。服務器

//模塊定義 myModule.js
   var name = 'Byron';
   function printName(){
       console.log(name);
   }
   module.exports = {
       printName: printName,
   }
   //加載模塊
   var myModule = require('./myModule.js');
   myModule.printName();

AMD(RequireJS)
AMD: Asynchronous Module Definition(異步模塊定義)。AMD模塊中全部的依賴都前置，require指定的回調函數，只有前面的模塊都加載成功後，纔會運行，解決了依賴性的問題。babel

// 定義模塊 myModule.js
   //define([依賴的模塊]，定義模塊的代碼)
   define(function(){
       var name = 'Byron';
       function printName(){
           console.log(name);
       }
       return {
           printName: printName
       };
   });
   
   // 加載模塊
   //require([依賴的模塊],callback(依賴名))
   
   require(['myModule.js'], function (myModule){
   　 myModule.printName();
   });

CMD(SeaJS)
CMD: Common Module Definition(通用模塊定義), 推崇依賴就近原則(也就是懶加載),模塊內部的依賴在須要引入的時候再引入.

// 定義模塊  myModule.js
define(function(require, exports, module) {
  var $ = require('jquery.js');
  var foo = require('foo');
  var out = foo.bar();
  $('div').addClass('active');
  module.exports = out;
});

// 加載模塊
seajs.use(['myModule.js'], function(myModule){

});

UMD
UMD: 兼容AMD、CMD和commonJS規範的同時，還兼容全局引用的方式例子:

//moduleName.js
   ;(function (global) {
       function factory () {
           var moduleName = {};
           return moduleName;
       }
       //CommonJS
       if (typeof module !== 'undefined' && typeof exports === 'object') {
           module.exports = factory();
       } else if (typeof define === 'function' && (define.cmd || define.amd)) { //AMD || CMD
           define(factory);
       } else { //script標籤
           global.moduleName = factory();
       }
   })(typeof window !== 'undefined' ? window : global);
   UMD模塊在不一樣環境引入:
   
   // Node.js
   var myModule = require('moduleName');
   // SeaJs
   define(function (require, exports, module) {
       var myModule = require('moduleName');
   });
   // RequireJs
   define(['moduleName'], function (moduleName) {
   
   });
   // Browse global
   <script src="moduleName.js"></script>

ES6模塊(import,export)
能夠取代CommonJS和AMD規範,是瀏覽器和服務器通用的模塊解決方案。

//模塊定義 myModule.js
   var name = 'Byron';
   function printName(){
       console.log(name);
   }
   const myModule = {
       printName: printName,
   };
   export myModule;
   
   //加載模塊
   import myModule from './myModule.js';
   myModule.printName();

繼承

js 中的繼承依賴於 原型鏈繼承。

function Fun(){};//聲明一個方法
Fun.prototype.toAuthor = ()=>console.log('linong');//在他的原型上綁定一個方法
var fun = new Fun();//實例化一下
fun.toAuthor()//調用方法，
fun.toAuthor = ()=>console.log('lilnong.top');//覆蓋這個方法
fun.toAuthor();//調用，這個時候在本身這裏找到了，就不會去調用原型上的方法了

fun.__proto__ == Fun.prototype //實例上是__proto__ ，構造函數上是prototype