前端知識由零開始總結工具書

有趣的靈魂八百斤發表於2018-11-10
前端

一、前言

首先這個東西不是為了給那個誰使用，或者說在社群裡混個點贊啥的，就是為了總結一下自己所有學過的東西，並且系統化的總結一下，為了以後面試，或者別人問起時能很快速的知道自己有哪些個b數，大概就這麼簡單。很多東西都是copy別人的，但是基本都是自己總結的。如果你認為有用到你的地方請聯絡我加上原文連結，謝謝。

二、什麼是模組化開發？

有哪些模組化開發規範：

1. Common.js --- node.js

  • 模組引用-require()
//不帶路徑預設進入node_modules
var math=require（'math');

//帶路徑，引用當前目錄的add.js模組
var add=require('./add.js');
複製程式碼
  • 模組定義
//module物件：在每一個模組中，module物件代表該模組自身。
//export屬性：module物件的一個屬性，它向外提供介面。

export.add=function (num1,num2){
    alert(num1+num2);
}
複製程式碼
  • module.export和export的區別：
// hello.js
funciton hello () {
    console.log('hello');
}
1.
export.hello = hello;

var aaa = require('hello.js');
aaa.hello();    // console.log('hello');

2.
module.export = hello;

var aaa = require('hello.js');
aaa();      // console.log('hello');

複製程式碼

2. ES6模組化（import,export兩個模組對應使用）

  • 方式一：export{介面}
//lib.js 檔案
let bar = "stringBar";
let foo = "stringFoo";
let fn0 = function() {
    console.log("fn0");
};
let fn1 = function() {
    console.log("fn1");
};
export{ bar , foo, fn0, fn1}

//main.js檔案
import {bar,foo, fn0, fn1} from "./lib";
console.log(bar+"_"+foo);
fn0();
fn1();
複製程式碼
  • 方式二： XX as YY
//lib.js檔案
let fn0 = function() {
    console.log("fn0");
};
let obj0 = {}
export { fn0 as foo, obj0 as bar};

//main.js檔案
import {foo, bar} from "./lib";
foo();
console.log(bar);
複製程式碼
  • 方式三：export的地方定義匯出的函式，或者變數
//lib.js檔案
export let foo = ()=> {console.log("fnFoo") ;return "foo"},bar = "stringBar";

//main.js檔案
import {foo, bar} from "./lib";
console.log(foo());
console.log(bar);
複製程式碼
  • 方式四:default

這種匯出的方式不需要知道變數的名字， 相當於是匿名的， 直接把開發的介面給export； 如果一個js模組檔案就只有一個功能， 那麼就可以使用export default匯出；

//lib.js
export default "string";

//main.js
import defaultString from "./lib";
console.log(defaultString);
複製程式碼
  • 方式五：

export也能預設匯出函式， 在import的時候， 名字隨便寫， 因為每一個模組的預設介面就一個

//lib.js
let fn = () => "string";
export {fn as default};

//main.js
import defaultFn from "./lib";
console.log(defaultFn());
複製程式碼
  • 方式六：

使用萬用字元* ,重新匯出其他模組的介面

//lib.js
export * from "./other";
//如果只想匯出部分介面， 只要把介面名字列出來
//export {foo,fnFoo} from "./other";

//other.js
export let foo = "stringFoo", fnFoo = function() {console.log("fnFoo")};

//main.js
import {foo, fnFoo} from "./lib";
console.log(foo);
console.log(fnFoo());
複製程式碼

3. AMD --- RequireJS國外相對流行

  • AMD 通過非同步載入模組。模組載入不影響後面語句的執行。所有依賴某些模組的語句均放置在回撥函式中。
  • AMD 規範只定義了一個函式 define，通過 define 方法定義模組。該函式的描述如下：

define(id?, dependencies?, factory)

id：指定義中模組的名字（可選）。如果沒有提供該引數，模組的名字應該預設為模組載入器請求的指定指令碼的名字。如果提供了該引數，模組名必須是“頂級”的和絕對的（不允許相對名字）。
dependencies：當前模組依賴的，已被模組定義的模組標識的陣列字面量（可選）。
factory：一個需要進行例項化的函式或者一個物件。

複製程式碼
  • AMD 規範允許輸出模組相容 CommonJS 規範，這時 define 方法如下：
define(function (require, exports, module) {
    var reqModule = require("./someModule");
    requModule.test();
      
    exports.asplode = function () {
        //someing
    }
});
複製程式碼
  • 使用例子：
// test.js 
// 獨立模組
define(function(){
    var add = function(x,y) {
        return x + y;
    };
    return {
        add : add
    }
});

// test.js 
// 存在依賴情況--模組又依賴於 cart 和 inventory 這兩個模組
define(["./cart", "./inventory"], function(cart, inventory) {
        //return an object to define the "my/shirt" module.
        return {
            color: "blue",
            size: "large",
            addToCart: function() {
                inventory.decrement(this);
                cart.add(this);
            }
        }
    }
); 

//頁面呼叫
require(['test'], function (m){
     console.log(m.add(2,3));
});
 

複製程式碼

4. CMD --- SeaJS國內相對流行

  • 對於依賴的模組 CMD 是延遲執行，而 AMD 是提前執行（不過 RequireJS 從 2.0 開始，也改成可以延遲執行。 ）
  • CMD 推崇依賴就近，AMD 推崇依賴前置。
  • AMD 的 api 預設是一個當多個用，CMD 嚴格的區分推崇職責單一，其每個 API 都簡單純粹。例如：AMD 裡 require 分全域性的和區域性的。CMD 裡面沒有全域性的 require，提供 seajs.use() 來實現模組系統的載入啟動。
  • 使用例子：
// test.js
// 下面使用 sea.js 建立一個模組
define(function(require, exports) {
    // 對外提供name屬性
    exports.name = 'test';
    // 對外提供hello方法
    exports.hello = function() {
      console.log('Hello test.com');
    };
});

// 物件封裝到模組
define(function(require, exports, module) {
    // 對外提供介面
    module.exports = {
        name: 'test',
        hello: function() {
          console.log('Hello test.com');
        }
    };
});

//載入一個模組，在載入完成時，執行回撥
seajs.use('test', function(a) {
    a.hello();
});
複製程式碼

注： AMD和CMD特點比較

a. 對於依賴的模組，AMD是提前執行，CMD是延後執行;

b. CMD推崇依賴就近，AMD推崇依賴前置;

c. AMD的API預設是一個當多個用，CMD的API嚴格區分，推崇職責單一。

// CMD
define(function(require, exports, module) {   
    var a = require('./a')   //需要的時候載入
    a.doSomething()    
    var b = require('./b')   
    b.doSomething()    
    ... 
})
// AMD 
define(['./a', './b'], function(a, b) {  // 依賴必須一開始就寫好（載入）
    a.doSomething()
    ...
    b.doSomething()
    ...
}) 
複製程式碼

三、HTML5 & CSS3關鍵點總結

前端知識由零開始總結工具書
前端知識由零開始總結工具書

相關文章