前端知识由零开始总结工具书

一、前言

首先这个东西不是为了给那个谁使用，或者说在社区里混个点赞啥的，就是为了总结一下自己所有学过的东西，并且系统化的总结一下，为了以后面试，或者别人问起时能很快速的知道自己有哪些个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关键点总结