前端模块化发展之路： IIFE（自执行函数）>>AMD(RequireJS实现)>>CMD(SeaJS实现)>>CommonJS(NodeJs)>>ES6 Modules(模块化直接成为了Javascript语言规范中的一部分)。

一、前端模块化发展简介

1.CommonJS(require / module.exports / exports)

2009年，美国程序员Ryan Dahl创造了node.js项目，将javascript语言用于服务器端编程。这标志”Javascript模块化编程”正式诞生。nodeJs中的模块，一律为CommonJS 格式。

1.1 语法风格

1
2
3
4
5
6

//Math.js
module.exports = {
	'add': function(a, b) {
		return a + b;
	}
}

1
2
3
4

//main.js
const Math = require('./Math');
console.log(Math.add(2, 3));
console.log('done');

HTTP 特性

• 基于TCP-IP协议 应用层协议 默认端口号80
• 无连接无状态

什么是无状态

• 状态】的含义就是：客户端和服务器在某次会话中产生的数据
• 那么对应的【无状态】就意味着：这些数据不会被保留
• 通过增加cookie和session机制，现在的网络请求其实是有状态的
• 在没有状态的http协议下，服务器也一定会保留你每次网络请求对数据的修改，但这跟保留每次访问的数据是不一样的，保留的只是会话产生的结果，而没有保留会话

HTTP 报文

请求报文

HTTP 协议是以 ASCII （a s ki）码传输，建立在 TCP/IP 协议之上的应用层规范。规范把 HTTP 请求分为三个部分：状态行、请求头、消息主体。

• GET 可提交的数据量受到URL长度的限制，HTTP 协议规范没有对 URL 长度进行限制。这个限制是特定的浏览器及服务器对它的限制
• 理论上讲，POST 是没有大小限制的，HTTP 协议规范也没有进行大小限制，出于安全考虑，服务器软件在实现时会做一定限制
• 参考上面的报文示例，可以发现 GET 和 POST 数据内容是一模一样的，只是位置不同，一个在 URL 里，一个在 HTTP 包的包体里

vuex

数据驱动模板（管理共享状态） 核心store仓库（响应式的状态存储） 提交mutation才能修改内部状态 记录每次改变保存状态快照

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

const store = new Vuex.Store({
    state:{
        count:0
    },
    mutations: {
        increase(state){
            state.count++;
        }
    },
    // 开启严格模式
    strict: process.env.NODE_ENV !== 'production'
    // 在严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。
})

store.commit('increase');
store.state.count;

不要在发布环境下启用严格模式！严格模式会深度监测状态树来检测不合规的状态变更——请确保在发布环境下关闭严格模式，以避免性能损失。

1.01^365=37.8

两个盒子，一个下边距20px，一个上边距50px，最后为两个盒子之间的距离为多少 50px 解决:根据W3C的标准，在页面中元素都一个隐含的属性叫做Block FormattingContext 简称BFC，该属性可以设置打开或者关闭，默认是关闭的。

以管理员的身份运行cmd

1. 先卸载密钥

   1	slmgr.vbs /upk

• 此时弹出窗口显未“已成功卸载了产品密钥”。

2. 安装密钥

   1	slmgr /ipk W269N-WFGWX-YVC9B-4J6C9-T83GX

• 弹出窗口提示：“成功的安装了产品密钥”。

3. 设置计算机名

   1	slmgr /skms cosyer的个人电脑

• 弹出窗口提示：“密钥管理服务计算机名成功的设置为cosyer的个人电脑”。

什么是chrome extensions

Chrome Extensions，中文名叫 “Chrome浏览器扩展程序”。引用官方文档的描述，翻译一下就是 “可以修改和增强浏览器功能的 H5 小程序”。 它的入口在浏览器窗口的右上角，地址栏的最右边

webpack4 最主要的卖点便是零配置，要想成为一位webpack配置工程师怎么能不开始了解呢？话不多说，让我们开始体验 webpack 4 的一些特性。

entry 和 output

1. 创建空目录，初始化配置

   1 2 3

   mkdir webpack4-quickstart cd webpack4-quickstart npm init -xyz

2. 安装相关依赖

   1 2	npm i webpack --save-dev npm i webpack-cli --save-dev

• webpack： 即 webpack 核心库。它提供了很多 API, 通过 Node.js 脚本中 require(‘webpack’) 的方式来使用 webpack。
• webpack-cli：是 webpack 的命令行工具。webpack 4 之前命令行工具是集成在 webpack 包中的，4.0 开始 webpack 包本身不再集成 cli。

3. package.json添加构建命令

   1 2 3

   "scripts":{ "build":"webpack" }

现代的前端框架react/vue/angular都有路由router的概念，通过手写实现可以帮助我们更好地了解它的工作原理。它们都推荐单页面应用 SPA 开发模式，在路由切换时替换 DOM Tree 中最小修改的部分 DOM，来减少原先因为多页应用的页面跳转带来的巨量性能损耗。它们都有自己的典型路由解决方案，@angular/router、react-router、vue-router等。

一般来说，这些路由插件总是提供两种不同方式的路由方式： Hash 和 History，有时也会提供非浏览器环境下的路由方式 Abstract(支持所有 JavaScript 运行 环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式)。

实现路由的2种方式

1. hash模式 状态保存需要另行传递
2. history模式 原生提供了自定义状态传递的能力

缺点

hash: 地址栏会多出一个#号，对url造成影响，在某些场景下如微信支付有坑。 history: 兼容性差，直接访问报404，需要服务器做处理。

基本原理

• hash 主要原理是通过监听 # 后的 URL 路径标识符的更改而触发的浏览器 hashchange 事件(当 location.hash 发生改变时，将触发这个事件)

注意： Hash 方法是利用了相当于页面锚点的功能，所以与原来的通过锚点定位来进行页面滚动定位的方式冲突，导致定位到错误的路由路径，因此需要采用别的办法。

• history 则基于 pushState 和 popState replaceState

Hash 模式是使用 URL 的 Hash 来模拟一个完整的 URL，因此当 URL 改变的时候页面并不会重载。History 模式则会直接改变 URL，所以在路由跳转的时候会丢失一些地址信息(只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求)，在刷新或直接访问路由地址的时候会匹配不到静态资源。因此需要在服务器上配置一些信息，让服务器增加一个覆盖所有情况的候选资源。

history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。

函数柯里化定义

函数柯里化（function currying）又称部分求值。一个currying的函数首先会接受一些参数，接受了这些参数后，

该函数并不会立即求值，而是继续返回另外一个函数，刚才传入的参数在函数形成的闭包里被保存起来。待到函数真正需要求值的时候，之前传入的参数都会被一次性用于求值。

把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数。

顾名思义，柯里化其实本身是固定一个可以预期的参数，并返回一个特定的函数，处理批特定的需求。这增加了函数的适用性，但同时也降低了函数的适用范围。

1
2
3
4
5
6
7
8
9
10
11

function add(x,y){
    return x + y;
}
// 函数只传入一个参数的时候实现加法
function curry(x){
    return function(y){
        return x + y;
    }
}
var add2 = curry(1);
add2(1) // 2 即curry(1)(1)

A: “这个接口我传个 JSON 给你，格式是这样的 ‘[1, 2, 3]’”

B: “等下，这不是数组吗，JSON 应该有键啊，类似这样才行’{ “key”: [1, 2, 3] }’”

A: “不，这就是 JSON 格式的数据”

B: “啊，是吗？” 你是否也有这样的疑惑？ wappalyzer chrome网页分析插件