├── .gitignore
├── README.md
├── dataStructure
├── Queue
│ ├── index.js
│ └── test.js
└── Stack
│ ├── index.js
│ └── test.js
├── feature
├── attribute
│ └── MyPromise.js
└── method
│ ├── apply.js
│ ├── bind.js
│ ├── call.js
│ ├── instanceof.js
│ └── new.js
├── framework
├── react
│ └── .gitkeep
└── vue
│ ├── mini-vue-router
│ ├── components
│ │ ├── Link.js
│ │ └── View.js
│ ├── create-macher.js
│ ├── create-route-map.js
│ ├── history
│ │ ├── base.js
│ │ ├── hash.js
│ │ └── html5.js
│ ├── index.js
│ ├── install.js
│ └── util
│ │ └── route.js
│ └── mini-vue
│ ├── compiler.js
│ ├── dep.js
│ ├── index.html
│ ├── observer.js
│ ├── vue.js
│ └── watcher.js
├── functions
├── Array
│ ├── every.js
│ ├── filter.js
│ ├── find.js
│ ├── flat.js
│ ├── forEach.js
│ ├── includes.js
│ ├── map.js
│ ├── reduce.js
│ └── some.js
├── Object
│ ├── assign.js
│ ├── orderAssign.js
│ └── reverseAssign.js
└── utils
│ ├── compose.js
│ ├── curry.js
│ ├── debounce.js
│ ├── deepClone.js
│ ├── getType.js
│ ├── getUrlData.js
│ ├── isEqual.js
│ ├── memoize.js
│ └── throttle.js
├── upload.sh
└── work
└── performance
├── FCP.js
└── FMP.js
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .vscode
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | 
4 |
5 |
6 | 
7 |
8 |
9 | 
10 |
11 |
12 | 
13 |
14 |
15 |
16 | # fackAchieve
17 |
18 | 手写 es6 函数，Promise 特性，lodash 库的函数实现,模拟 vue,React 等前端框架的实现和原理的理解。
19 |
20 | ## functions 文件夹
21 |
22 | 手动实现各种函数，包括不限于 ES6 等函数的方法
23 |
24 | ### 内容对应表
25 |
26 | #### Array
27 |
28 | | 方法名称(name) | 位置(position) | 作用(effect) |
29 | | :------------- | :--------------------------------------------------------- | :----------: |
30 | | forEach | [functions/Array/forEach.js](functions/Array/forEach.js) | -- |
31 | | every | [functions/Array/every.js](functions/Array/every.js) | -- |
32 | | some | [functions/Array/some.js](functions/Array/some.js) | -- |
33 | | filter | [functions/Array/filter.js](functions/Array/filter.js) | -- |
34 | | find | [functions/Array/find.js](functions/Array/find.js) | -- |
35 | | reduce | [functions/Array/reduce.js](functions/Array/reduce.js) | -- |
36 | | map | [functions/Array/map.js](functions/Array/map.js) | -- |
37 | | flat | [functions/Array/flat.js](functions/Array/flat.js) | -- |
38 | | includes | [functions/Array/includes.js](functions/Array/includes.js) | -- |
39 |
40 | #### Object
41 |
42 | | 方法名称(name) | 位置(position) | 作用(effect) |
43 | | :------------- | :--------------------------------------------------------------------- | :----------------: |
44 | | assign | [functions/Object/assign.js](functions/Object/assign.js) | -- |
45 | | reverseAssign | [functions/Object/reverseAssign.js](functions/Object/reverseAssign.js) | 逆向 assign |
46 | | orderAssign | [functions/Object/orderAssign.js](functions/Object/orderAssign.js) | 逆向 reverseAssign |
47 |
48 | #### utils
49 |
50 | | 方法名称(name) | 位置(position) | 作用(effect) |
51 | | :------------- | :------------------------------------------------------------- | :-----------: |
52 | | memoize | [functions/utils/memoize.js](functions/utils/memoize.js) | 缓存结果 |
53 | | curry | [functions/utils/curry.js](functions/utils/curry.js) | 柯里化 |
54 | | compose | [functions/utils/compose.js](functions/utils/compose.js) | 合并函数 |
55 | | getType | [functions/utils/getType.js](functions/utils/getType.js) | 判断类型 |
56 | | isEqual | [functions/utils/isEqual.js](functions/utils/isEqual.js) | 判断值相等 |
57 | | deepClone | [functions/utils/deepClone.js](functions/utils/deepClone.js) | 深拷贝 |
58 | | getUrlData | [functions/utils/getUrlData.js](functions/utils/getUrlData.js) | 获取 url 参数 |
59 | | debounce | [functions/utils/debounce.js](functions/utils/debounce.js) | 函数防抖 |
60 | | throttle | [functions/utils/throttle.js](functions/utils/throttle.js) | 函数节流 |
61 |
62 | ## feature 文件夹
63 |
64 | 手动实现各种 ES6 新特性
65 |
66 | | 方法名称(name) | 位置(position) | 描述(desc) |
67 | | :------------- | :--------------------------------------------------------------- | :------------------------: |
68 | | MyPromise | [feature/attribute/MyPromise.js](feature/attribute/MyPromise.js) | 符合 A+规范的 Promise 实现 |
69 | | call | [feature/method/call.js](feature/method/call.js) | 手写 call 函数 |
70 | | apply | [feature/method/apply.js](feature/method/apply.js) | 手写 apply 函数 |
71 | | bind | [feature/method/bind.js](feature/method/bind.js) | 手写 bind 函数 |
72 | | new | [feature/method/new.js](feature/method/new.js) | new 构造方法 |
73 | | instanceof | [feature/method/instanceof.js](feature/method/instanceof.js) | instanceof 方法 |
74 |
75 | ## framework 文件夹
76 |
77 | 模拟 vue,React 等前端框架，了解原理
78 |
79 | | 方法名称(name) | 位置(position) | 描述(desc) |
80 | | :------------- | :---------------------------------------------------------------------- | :-------------: |
81 | | vue | [framework/vue/mini-vue](framework/vue/mini-vue/vue.js) | mini vue |
82 | | vue-router | [framework/vue/mini-vue-router](framework/vue/mini-vue-router/index.js) | mini vue-router |
83 | | react | [framework/react](framework/react) | mini react |
84 |
85 | ## dataStructure 文件夹
86 |
87 | 手动实现各种数据结构
88 |
89 | | 结构名称(name) | 位置(position) | 描述(desc) |
90 | | :------------- | :----------------------------------------------------------- | :--------: |
91 | | Stack | [dataStructure/Stack/index.js](dataStructure/Stack/index.js) | 栈结构 |
92 | | Queue | [dataStructure/Queue/index.js](dataStructure/Queue/index.js) | 队列结构 |
93 |
94 | ## work 文件夹
95 |
96 | 工作中，各种场景会碰到的常用方法或类实现
97 |
98 | | 名称(name) | 位置(position) | 描述(desc) |
99 | | :--------- | :------------------------------------------------- | :--------------: |
100 | | FMP | [work/performance/FMP.js](work/performance/FMP.js) | 首次有效绘制时间 |
101 | | FCP | [work/performance/FCP.js](work/performance/FCP.js) | 首屏时间 |
102 |
--------------------------------------------------------------------------------
/dataStructure/Queue/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * ES6语法构建队数据结构
3 | */
4 | class Queue{
5 | constructor() {
6 | this._queue = [];
7 | }
8 | // 查询队顶元素
9 | top() {
10 | return this._queue[0];
11 | }
12 | // 元素出队
13 | pop() {
14 | this._queue.shift();
15 | }
16 | // 元素入队
17 | push(item) {
18 | this._queue.push(item);
19 | }
20 | // 查询队尾元素
21 | peek() {
22 | return this._queue[this._queue.length - 1];
23 | }
24 | // 查询队元素总数
25 | length() {
26 | return this._queue.length;
27 | }
28 | // 清空队
29 | clear() {
30 | this._queue = [];
31 | }
32 | // 队是否为空
33 | isEmpty() {
34 | return this._queue.length === 0;
35 | }
36 | // 获取当前队
37 | getStack() {
38 | return this._queue;
39 | }
40 | // 获取队无符号间隔的字符串
41 | getString() {
42 | let str = "";
43 | this._queue.map((item) => (str += item));
44 | return str;
45 | }
46 | reverseStack() {
47 | return this._queue.reverse();
48 | }
49 | // 获取队无符号间隔的反向字符串
50 | getReverseString() {
51 | let str = "";
52 | this._queue.map((item) => (str += item));
53 | return str.split('').reverse().join('')
54 | }
55 | print(){
56 | console.log(this._queue)
57 | }
58 | }
59 | module.exports = Queue
--------------------------------------------------------------------------------
/dataStructure/Queue/test.js:
--------------------------------------------------------------------------------
1 | const Queue = require("./index")
2 |
3 |
4 | let q = new Queue()
5 | q.push('1')
6 | q.push('2')
7 | q.push('3')
8 | q.push('4')
9 | q.push('5')
10 |
11 | q.pop()
12 | q.pop()
13 | console.log(q.getString())
14 | q.print()
--------------------------------------------------------------------------------
/dataStructure/Stack/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * ES6语法构建栈数据结构
3 | */
4 | class Stack {
5 | constructor() {
6 | this._stack = [];
7 | }
8 | // 查询栈顶元素
9 | top() {
10 | return this._stack[this._stack.length - 1];
11 | }
12 | // 元素出栈
13 | pop() {
14 | this._stack.pop();
15 | }
16 | // 元素入栈
17 | push(item) {
18 | this._stack.push(item);
19 | }
20 | // 查询栈底元素
21 | peek() {
22 | return this._stack[0];
23 | }
24 | // 查询栈元素总数
25 | length() {
26 | return this._stack.length;
27 | }
28 | // 清空栈
29 | clear() {
30 | this._stack = [];
31 | }
32 | // 是否为空
33 | isEmpty() {
34 | return this._stack.length === 0;
35 | }
36 | // 获取当前栈
37 | getStack() {
38 | return this._stack;
39 | }
40 | // 获取栈无符号间隔的字符串
41 | getString() {
42 | let str = "";
43 | this._stack.map((item) => (str += item));
44 | return str;
45 | }
46 | reverseStack() {
47 | return this._stack.reverse();
48 | }
49 | // 获取栈无符号间隔的反向字符串
50 | getReverseString() {
51 | let str = "";
52 | this._stack.map((item) => (str += item));
53 | return str.split("").reverse().join("");
54 | }
55 | print() {
56 | console.log(this._stack);
57 | }
58 | }
59 |
60 | module.exports = Stack;
61 |
--------------------------------------------------------------------------------
/dataStructure/Stack/test.js:
--------------------------------------------------------------------------------
1 | const Stack = require("./index")
2 |
3 |
4 | /**
5 | * 进制转换
6 | * @param {*} num 需要转换的10进制数
7 | * @param {*} base 需要转换的进制
8 | * @returns
9 | */
10 | function scale(num, base) {
11 | let s = new Stack();
12 | while (num > 0) {
13 | s.push(num % base);
14 | num = Math.floor((num /= base));
15 | }
16 | return s.getReverseString();
17 | }
18 | console.log(scale(125, 2)); // 1111101
19 | console.log(scale(125, 8)); // 175
20 |
--------------------------------------------------------------------------------
/feature/attribute/MyPromise.js:
--------------------------------------------------------------------------------
1 | // 用常量定义promise的三种状态
2 | const PENDING = 'pending';
3 | const FULFILLED = 'fulfilled';
4 | const REJECTED = 'rejected';
5 |
6 | class MyPromise {
7 | constructor(execurte) {
8 | // 默认状态是等待
9 | this.status = PENDING
10 | // 成功的回调默认值
11 | this.value = undefined
12 | // 失败的回调默认值
13 | this.resaon = undefined
14 | // 成功的回调队列,可以多次then，所以存在多个定义为数组
15 | this.resolveCallBacks = []
16 | // 失败的回调
17 | this.rejecteCallBacks = []
18 | // 针对执行器进行异常处理
19 | try {
20 | execurte(this.resolve, this.reject)
21 | } catch (error) {
22 | this.reject(error)
23 | }
24 | }
25 |
26 | // 成功时候的回调
27 | resolve = (value) => {
28 | queueMicrotask(() => {
29 | if (this.status === PENDING) {
30 | this.status = FULFILLED; // 修改状态
31 | this.value = value;
32 | this.resolveCallBacks.forEach((fn) => fn(this.value)); // 成功的回调
33 | }
34 | })
35 | }
36 | // 失败时候的回调
37 | reject = (resaon) => {
38 | queueMicrotask(() => {
39 | if (this.status === PENDING) {
40 | this.status = REJECTED; // 修改状态
41 | this.resaon = resaon;
42 | this.rejecteCallBacks.forEach((fn) => fn(this.resaon)); // 失败的回调
43 | }
44 | })
45 | }
46 | // then方法
47 | then = (resolveCallBack, rejecteCallBack) => {
48 | // 如果传递空值，则默认向后传递所以添加一个默认情况
49 | resolveCallBack = resolveCallBack ? resolveCallBack : value => value;
50 | // 参数可选
51 | rejecteCallBack = rejecteCallBack ? rejecteCallBack : reason => { throw reason };
52 | let p = new MyPromise((resolve, reject) => {
53 | // 处理不同的返回，如果是正常值直接返回，如果是Promise对象，则返回一个Promise供继续调用
54 | // 成功
55 | if (this.status === FULFILLED) {
56 | // 开启一个微任务，等待p结果的返回。否则程序限制性后返回p的值
57 | // 针对执行的函数进行异常处理
58 | queueMicrotask(() => {
59 | try {
60 | let callbackValue = resolveCallBack(this.value)
61 | this._returnValue(p, callbackValue, resolve, reject)
62 | } catch (error) {
63 | reject(error)
64 | }
65 | })
66 | // 失败
67 | } else if (this.status === REJECTED) {
68 | queueMicrotask(() => {
69 | try {
70 | let callbackValue = rejecteCallBack(this.resaon)
71 | this._returnValue(p, callbackValue, resolve, reject)
72 | } catch (error) {
73 | reject(error)
74 | }
75 | })
76 | // 等待过程
77 | } else {
78 | // 判断为等待状态的情况，存储任务然后后续执行
79 | // 存储成功的任务
80 | this.resolveCallBacks.push(() => {
81 | queueMicrotask(() => {
82 | try {
83 | let callbackValue = resolveCallBack(this.value)
84 | this._returnValue(p, callbackValue, resolve, reject)
85 | } catch (error) {
86 | reject(error)
87 | }
88 | })
89 | })
90 | // 存储失败的情况
91 | this.rejecteCallBacks.push(() => {
92 | queueMicrotask(() => {
93 | try {
94 | let callbackValue = rejecteCallBack(this.resaon)
95 | this._returnValue(p, callbackValue, resolve, reject)
96 | } catch (error) {
97 | reject(error)
98 | }
99 | })
100 | })
101 | }
102 | })
103 | return p
104 | }
105 |
106 | // 注册一个非静态的方法,catch收集错误信息
107 | catch(rejecteCallBack) {
108 | return this.then(undefined, rejecteCallBack)
109 | }
110 |
111 | // 注册一个非静态的方法,无论成功或者失败finally都会执行
112 | finally(callback) {
113 | return this.then((value) => {
114 | return MyPromise.resolve(callback()).then(() => value)
115 | }, (resaon) => {
116 | return MyPromise.resolve(callback()).then(() => { throw resaon })
117 | })
118 | }
119 |
120 | // then可能返回一个普通值，也可能返回一个 Promise,一个内置工具
121 | /**
122 | *
123 | * @param {*} p 当前在运行的Promise
124 | * @param {*} callbackValue 返回值（then出来的值）
125 | * @param {*} resolve 成功回调
126 | * @param {*} reject 失败回调
127 | * @returns
128 | */
129 | _returnValue(p, callbackValue, resolve, reject) {
130 | // 如果p和callbackValue相等，则说明产生了循环引用
131 | if (p === callbackValue) {
132 | return reject(new TypeError('靓仔，你的代码循环引用了'))
133 | }
134 | // 判断callbackValue是不是Promise类型
135 | if (callbackValue instanceof MyPromise) {
136 | callbackValue.then(value => resolve(value), resaon => reject(resaon))
137 | } else {
138 | resolve(callbackValue)
139 | }
140 | }
141 |
142 | // 直接注册resolve方法，表示直接只返回一个成功的结果
143 | static resolve(value) {
144 | // 如果是promise对象则直接返回
145 | if (value instanceof MyPromise) {
146 | return value
147 | } else {
148 | // 如果不是promise对象，则重新创建一个
149 | return new MyPromise((resolve) => {
150 | resolve(value)
151 | })
152 | }
153 | }
154 |
155 | // 静态方法，返回错误的Promise
156 | static reject(resaon) {
157 | if (resaon instanceof MyPromise) {
158 | return this.reject('[object Promise]')
159 | } else {
160 | // 如果不是promise对象，则重新创建一个
161 | return new MyPromise((resolve, reject) => {
162 | reject(resaon)
163 | })
164 | }
165 | }
166 |
167 | // all静态方法,有一个失败，直接返回失败，结果是按照传入的顺序返回
168 | static all(promises) {
169 | // 保存回调结果的数组
170 | let result = [];
171 | // 累加器，用来判断执行的方法队列是否执行完成
172 | let count = 0;
173 | // all 方法也返回一个promise对象
174 | return new MyPromise((resolve, reject) => {
175 | function pushResult(key, value) {
176 | result[key] = value
177 | count++
178 | // 如果累加器和执行的任务列表长度相等，则说明已经完成了整个任务
179 | if (count === promises.length) {
180 | resolve(result)
181 | }
182 | }
183 | // 循环处理要执行的任务
184 | promises.forEach((task, index) => {
185 | if (task instanceof MyPromise) {
186 | task.then((v) => pushResult(index, v), (resaon) => reject(resaon))
187 | } else {
188 | pushResult(index, promises[index])
189 | }
190 | })
191 | })
192 | }
193 |
194 |
195 | // 所有 Promises 都完成后（包含成功和失败）
196 | static allSettled(promises) {
197 | return new MyPromise((resolve) => {
198 | let results = []
199 | let count = 0
200 | promises.forEach((task, index) => {
201 | if (task instanceof MyPromise) {
202 | task.finally(_ => {
203 | count++
204 | results[index] = {
205 | status: task.status,
206 | value: task.value || task.resaon
207 | }
208 | if (count === promises.length) {
209 | resolve(results)
210 | }
211 | })
212 | } else {
213 | count++
214 | results[index] = {
215 | status: 'fulfilled',
216 | value: task
217 | }
218 | if (count === promises.length) {
219 | resolve(results)
220 | }
221 | }
222 | })
223 | })
224 | }
225 |
226 | // 有一个成功就返回
227 | static any(promises) {
228 | return new MyPromise((resolve) => {
229 | promises.forEach((task) => {
230 | if (task instanceof MyPromise) {
231 | task.then(_ => {
232 | resolve(task.value)
233 | })
234 | } else {
235 | resolve(task)
236 | }
237 | })
238 | })
239 | }
240 |
241 | // 有一个改变状态（成功或者失败）就返回
242 | static race(promises) {
243 | return new MyPromise((resolve) => {
244 | promises.forEach((task) => {
245 | if (task instanceof MyPromise) {
246 | task.finally(_ => {
247 | resolve(task.value || task.resaon)
248 | })
249 | } else {
250 | resolve(task)
251 | }
252 | })
253 | })
254 | }
255 | }
256 |
257 | MyPromise.defer = MyPromise.deferred = function () {
258 | let testObj = {}
259 | testObj.promise = new Promise((resolve, reject) => {
260 | testObj.resolve = resolve
261 | testObj.reject = reject
262 | })
263 | return testObj
264 | }
265 |
266 | module.exports = MyPromise
--------------------------------------------------------------------------------
/feature/method/apply.js:
--------------------------------------------------------------------------------
1 | // 思路同call，参数不一样
2 | const arr = [1, 2, 3, 4, 5]
3 | function fackApply(context, arg) {
4 | if (typeof this !== 'function') {
5 | throw new TypeError('当前调用apply方法的不是函数！')
6 | }
7 | const flag = Symbol('function')
8 | const callback = context || (typeof window !== 'undefined' ? window : globalThis)
9 | callback[flag] = this
10 | // 同call一样，只是参数需要展开
11 | const result = callback[flag](...arg)
12 | delete callback[flag]
13 | return result
14 | }
15 |
16 | Function.prototype.fackApply = fackApply
17 |
18 | // const max = Math.max(arr);
19 |
20 | // const max = Math.max.apply(null, arr);
21 |
22 | const max = Math.max.fackApply(null, arr);
23 |
24 | console.log(max)
--------------------------------------------------------------------------------
/feature/method/bind.js:
--------------------------------------------------------------------------------
1 | /**
2 | * 编写思路
3 | * 1.返回一个原返回一个函数
4 | * 2.传递参数并绑定传入的this
5 | * 3.可以通过new调用
6 | */
7 | const user = {
8 | x: 42,
9 | getX: function () {
10 | return this.x;
11 | }
12 | };
13 |
14 | function fackBind(thisArg, ...args) {
15 | if (typeof this !== 'function') {
16 | throw new TypeError('当前调用bind方法的不是函数！')
17 | }
18 | const callback = thisArg || (typeof window !== 'undefined' ? window : globalThis)
19 | return () => this.apply(callback, args)
20 | }
21 |
22 | // MDN版本
23 | function fackBind2(otherThis) {
24 | if (typeof this !== 'function') {
25 | throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
26 | }
27 | var ArrayPrototypeSlice = Array.prototype.slice;
28 | var baseArgs = ArrayPrototypeSlice.call(arguments, 1),
29 | baseArgsLength = baseArgs.length,
30 | fToBind = this,
31 | fNOP = function () { },
32 | fBound = function () {
33 | baseArgs.length = baseArgsLength; // reset to default base arguments
34 | baseArgs.push.apply(baseArgs, arguments);
35 | return fToBind.apply(
36 | fNOP.prototype.isPrototypeOf(this) ? this : otherThis, baseArgs
37 | );
38 | };
39 |
40 | if (this.prototype) {
41 | fNOP.prototype = this.prototype;
42 | }
43 | fBound.prototype = new fNOP();
44 |
45 | return fBound;
46 | };
47 |
48 | Function.prototype.fackBind = fackBind
49 | Function.prototype.fackBind2 = fackBind2
50 |
51 | const generator = user.getX;
52 |
53 | const a = generator.bind(user);
54 | console.log(a());
55 |
56 | const b = generator.fackBind(user);
57 | console.log(b());
58 |
59 | const c = generator.fackBind2(user);
60 | console.log(c());
61 |
--------------------------------------------------------------------------------
/feature/method/call.js:
--------------------------------------------------------------------------------
1 | /**
2 | * 编写思路
3 | * 1.确定函数的作用域
4 | * 2.存储执行函数的执行结果
5 | * 3.删除零时函数并返回
6 | */
7 |
8 | const fackCall = function (context, ...args) {
9 | if (typeof this !== 'function') {
10 | throw new TypeError('当前调用call方法的不是函数！')
11 | }
12 | // 定义一个私有标识符
13 | const flag = Symbol('function')
14 | // 确定返回函数的作用域， 默认是window,区分node和浏览器环境
15 | const callback = context || (typeof window !== 'undefined' ? window : globalThis)
16 | // 把要执行函数的函数体 复制到临时的函数中
17 | callback[flag] = this
18 | // 保存返回的结果
19 | const result = callback[flag](...args)
20 | // 删除临时变量
21 | delete callback[flag]
22 | // 返回结果
23 | return result
24 | }
25 |
26 |
27 | Function.prototype.fackCall = fackCall
28 |
29 | function Product(name, price) {
30 | this.name = name;
31 | this.price = price;
32 | }
33 | function Food(name, price) {
34 | // Product(name, price) 没有this会找不到
35 | // Product.call(this, name, price);
36 | Product.fackCall(this, name, price);
37 | }
38 |
39 | console.log(new Food('张三', 5).name);
40 | console.log(new Food('张三', 5).price);
41 |
--------------------------------------------------------------------------------
/feature/method/instanceof.js:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | * @description 编写思路
4 | * 1. 不支持运算符重载，通过函数穿参数解决
5 | * 2. 判断对象A是否在对象B的原型链上
6 | * 3. 如果不存在就一直查询，一直到顶层
7 | * 3. 返回一个布尔值
8 | */
9 | function Car(make, model, year) {
10 | this.make = make;
11 | this.model = model;
12 | this.year = year;
13 | }
14 |
15 | const auto = new Car('Honda', 'Accord', 1998);
16 |
17 |
18 | function fackInstanceof(detectObject, souceObject) {
19 | let leftObj = Object.getPrototypeOf(detectObject) // 相当于detectObject.__proto__
20 | let rightObj = souceObject.prototype // 获取源对象原型
21 | // 循环获取detectObject对象的原型
22 | while (true) {
23 | // 如果是null直接返回（第一次或者原型链顶）
24 | if (Object.is(leftObj, null)) return false
25 | // 如果第一次相等直接返回
26 | if (Object.is(leftObj, rightObj)) return true
27 | // 不相等，继续向上找
28 | leftObj = Object.getPrototypeOf(leftObj)
29 | }
30 | }
31 |
32 | console.log(auto instanceof Car);
33 |
34 | console.log(auto instanceof Object);
35 |
36 | console.log(fackInstanceof(auto, Car));
37 |
38 | console.log(fackInstanceof(auto, Object));
--------------------------------------------------------------------------------
/feature/method/new.js:
--------------------------------------------------------------------------------
1 | /**
2 | * 编写思路
3 | * 1. js不支持运算符重载，所以第一个参数是constructor，剩余的参数是arguments
4 | * 2. 创建一个新对象，并链接构造函数到运算的对象
5 | * 3. 绑定对象的this
6 | * 4. 如果没对象返回this，有对象返回新对象
7 | */
8 |
9 | const fackNew = function (thisArg, ...args) {
10 | if (typeof thisArg !== 'function') {
11 | throw new TypeError('当前调用fackNew的不是函数！')
12 | }
13 | // 定义一个空对象
14 | let temoObj = {}
15 | // 链接该对象（设置该对象的constructor）到另一个对象 ,继承旧对象的原型
16 | // Object.setPrototypeOf(temoObj, thisArg.prototype);
17 | temoObj = Object.create(thisArg.prototype); // 推荐这种
18 | // 设置临时对象的this
19 | thisArg.apply(temoObj, args)
20 | // 定义要返回的对象
21 | let returnObj = temoObj
22 | // 如果函数没有返回对象，则返回this
23 | if (typeof thisArg === 'object') {
24 | returnObj = this
25 | }
26 | return returnObj
27 | }
28 |
29 | // 精简代码版本
30 | const _new = function (thisArg, ...args) {
31 | const temoObj = Object.create(thisArg.prototype)
32 | thisArg.apply(temoObj, args)
33 | return typeof thisArg === 'object' ? this : temoObj
34 | }
35 |
36 |
37 |
38 | function Car(name, age) {
39 | this.name = name;
40 | this.age = age;
41 | }
42 |
43 | const car1 = new Car('张三', 1993);
44 |
45 | console.log(car1.name);
46 |
47 |
48 | const car2 = _new(Car, '李四', 1998);
49 |
50 | console.log(car2.name);
--------------------------------------------------------------------------------
/framework/react/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gzg1023/fackAchieve/472a586e6c201c2e8a93f9fadd42cb9b428e6c38/framework/react/.gitkeep
--------------------------------------------------------------------------------
/framework/vue/mini-vue-router/components/Link.js:
--------------------------------------------------------------------------------
1 | export default {
2 | name: 'routerLink',
3 | props: {
4 | to: {
5 | type: String,
6 | require: true
7 | }
8 | },
9 | render(h) {
10 | return h('a',
11 | {
12 | attrs: {
13 | href: this.$router.mode === 'hash' ? `#${this.to}` : `${this.to}`
14 | }
15 | }, this.$slots.default)
16 | }
17 | }
--------------------------------------------------------------------------------
/framework/vue/mini-vue-router/components/View.js:
--------------------------------------------------------------------------------
1 | export default {
2 | name: 'routerView',
3 | render(h) {
4 | const route = this.$route
5 | let depth = 0;
6 | this.isRouterVirw = true
7 | let parent = this.$parent
8 | while (parent) {
9 | if(parent.isRouterVirw){
10 | depth ++
11 | }
12 | parent = parent.$parent
13 | }
14 | const record = route.matched[depth]
15 | if(record){
16 | return h(record.component)
17 | }
18 | return h()
19 | }
20 | }
--------------------------------------------------------------------------------
/framework/vue/mini-vue-router/create-macher.js:
--------------------------------------------------------------------------------
1 | import createRouteMap from "./create-route-map";
2 | import createRoute from "./util/route";
3 | export default function createMacher(routes) {
4 | const { pathList, pathMap } = createRouteMap(routes)
5 |
6 | // 匹配路由的函数,通过路径拿到组件
7 | function match(path) {
8 | const record = pathMap[path]
9 | if(record){
10 | return createRoute(record,path)
11 | }
12 | return createRoute(null,path)
13 | }
14 | // 动态添加路由
15 | function addRoutes(routes) {
16 | createRouteMap(routes, pathList, pathMap)
17 | }
18 | return{
19 | match,
20 | addRoutes
21 | }
22 | }
--------------------------------------------------------------------------------
/framework/vue/mini-vue-router/create-route-map.js:
--------------------------------------------------------------------------------
1 | // 解析routers,生成路由表
2 | export default function createRouteMap(routes, pathList, pathMap) {
3 | // 路由路径表
4 | pathList = pathList ?? []
5 | // 路径映射表
6 | pathMap = pathMap ?? {}
7 |
8 | routes.forEach(route => {
9 | addRouteRecord(route, pathList, pathMap)
10 | });
11 |
12 | return {
13 | pathList,
14 | pathMap
15 | }
16 | }
17 |
18 | function addRouteRecord(route, pathList, pathMap, parentRecord) {
19 | // 处理父子路由
20 | let path = parentRecord ? `${parentRecord.path}/${route.path}` : route.path
21 | let record = {
22 | path: path,
23 | component: route.component,
24 | parentRecord: parentRecord
25 | }
26 | // 如果不存在则添加
27 | if (!pathMap[path]) {
28 | pathList.push(path)
29 | pathMap[path] = record
30 | }
31 | // 处理子路由
32 | if (route.children) {
33 | route.children.forEach((subRoute) => {
34 | addRouteRecord(subRoute, pathList, pathMap, record)
35 | })
36 | }
37 | }
--------------------------------------------------------------------------------
/framework/vue/mini-vue-router/history/base.js:
--------------------------------------------------------------------------------
1 | import createRoute from "../util/route";
2 | export default class History {
3 | constructor(router) {
4 | this.router = router
5 | // 当前路由对象。通过match创建的对象
6 | this.current = createRoute(null, '/')
7 | this.callback = null
8 | }
9 |
10 | /**
11 | * 路由跳转函数
12 | * @param {*} path 要跳转的路径
13 | * @param {*} onComplete 回调函数
14 | */
15 | transitionTo(path, onComplete) {
16 | this.current = this.router.matcher.match(path)
17 | this.callback && this.callback(this.current)
18 | onComplete && onComplete()
19 | }
20 |
21 |
22 | listen(callback){
23 | this.callback = callback
24 | }
25 | }
--------------------------------------------------------------------------------
/framework/vue/mini-vue-router/history/hash.js:
--------------------------------------------------------------------------------
1 | import History from "./base"
2 |
3 | export default class hashHistory extends History{
4 | constructor(router){
5 | super(router)
6 | // 修正浏览器地址栏。改为/#/
7 | this.ensureSlash()
8 | }
9 |
10 |
11 | ensureSlash(){
12 | if(location.hash){
13 | return
14 | }else{
15 | location.hash = '/'
16 | }
17 | }
18 | // 返回当前路由地址,去除#符号
19 | getCurrentLocation(){
20 | return location.hash.substr(1)
21 | }
22 |
23 | // 设置hash监听
24 | setUpListener(){
25 | window.addEventListener('hashchange',() =>{
26 | this.transitionTo(this.getCurrentLocation())
27 | })
28 | }
29 | }
--------------------------------------------------------------------------------
/framework/vue/mini-vue-router/history/html5.js:
--------------------------------------------------------------------------------
1 | import History from "./base"
2 |
3 | export default class HTML5History extends History{
4 | constructor(router){
5 | super(router)
6 | }
7 |
8 |
9 | // 返回当前路由地址,去除#符号
10 | getCurrentLocation(){
11 | return location.pathname
12 | }
13 |
14 | // 设置history监听
15 | setUpListener(){
16 | window.addEventListener('popstate',() =>{
17 | this.transitionTo(this.getCurrentLocation())
18 | })
19 | }
20 | }
--------------------------------------------------------------------------------
/framework/vue/mini-vue-router/index.js:
--------------------------------------------------------------------------------
1 |
2 | import install from './install'
3 | import createMacher from './create-macher';
4 | import HTML5History from "./history/html5";
5 | import HashHistory from "./history/hash";
6 | export default class VueRouter {
7 | constructor(options) {
8 | this._routes = options.routes || []
9 | this.matcher = createMacher(this._routes)
10 | let mode = options.mode || 'hash'
11 | this.mode = mode
12 | this.push = this.push
13 | switch (mode) {
14 | case 'history':
15 | this.history = new HTML5History(this, options.base)
16 | break;
17 | case 'hash':
18 | this.history = new HashHistory(this, options.base, this.feedback)
19 | break;
20 | default:
21 | throw new Error('type Error: mode is not a goog value')
22 | }
23 | }
24 |
25 | init(app) {
26 | const history = this.history
27 |
28 | history.listen((current)=>{
29 | app._route = current
30 | })
31 |
32 | history.transitionTo(
33 | history.getCurrentLocation(),
34 | () => {
35 | history.setUpListener()
36 | }
37 | )
38 | }
39 |
40 | push(path) {
41 | if (this.mode === 'hash') {
42 | location.hash = '/' + path
43 | } else {
44 | location.pathname = path
45 | }
46 | }
47 | }
48 | VueRouter.install = install
--------------------------------------------------------------------------------
/framework/vue/mini-vue-router/install.js:
--------------------------------------------------------------------------------
1 |
2 | // 保存传入的Vue实例
3 | export let _Vue = null
4 | import Link from "./components/Link";
5 | import View from "./components/View";
6 | export default function install(Vue) {
7 | _Vue = Vue
8 | _Vue.mixin({
9 | beforeCreate() {
10 | // 跟实例
11 | if (this.$options.router) {
12 | this._routerRoot = this
13 | this._router = this.$options.router
14 | this._router.init(this)
15 | _Vue.util.defineReactive(this, '_route', this._router.history.current)
16 | } else /* 组件*/ {
17 | this._routerRoot = this.$parent && this.$parent._routerRoot
18 | }
19 | }
20 | })
21 | _Vue.component(View.name,View)
22 | _Vue.component(Link.name,Link)
23 | Object.defineProperty(Vue.prototype, '$router', {
24 | get () { return this._routerRoot._router }
25 | })
26 |
27 | Object.defineProperty(Vue.prototype, '$route', {
28 | get () { return this._routerRoot._route }
29 | })
30 | }
--------------------------------------------------------------------------------
/framework/vue/mini-vue-router/util/route.js:
--------------------------------------------------------------------------------
1 | /**
2 | * 匹配路由对象
3 | * @param {*} record
4 | * @param {*} path
5 | *
6 | */
7 | export default function createRoute(record, path) {
8 | const matched = []
9 | while (record) {
10 | // 使用unshift是因为先拿到子路由，父路由要排到前面
11 | matched.unshift(record)
12 | record = record.parentRecord
13 | }
14 | return {
15 | path,
16 | matched
17 | }
18 | }
--------------------------------------------------------------------------------
/framework/vue/mini-vue/compiler.js:
--------------------------------------------------------------------------------
1 | class Compiler {
2 | constructor(vm) {
3 | this.el = vm.$el
4 | this.vm = vm
5 | this.compiler(this.el)
6 | }
7 | // 编译模版，处理各种节点
8 | compiler(el) {
9 | const childNodes = el.childNodes
10 | Array.from(childNodes).forEach((node) => {
11 | if (this.isTextNode(node)) {
12 | // 处理文本
13 | this.compilerText(node)
14 | } else if (this.isElementNode(node)) {
15 | // 处理元素
16 | this.compilerElement(node)
17 | }
18 | // 处理多层节点
19 | if (node.childNodes && node.childNodes.length !== 0) {
20 | this.compiler(node)
21 | }
22 | })
23 | }
24 | // 编译元素节点，处理指令
25 | compilerElement(node) {
26 | Array.from(node.attributes).forEach((attr) => {
27 | let attrName = attr.name
28 | // 判断是否为指令
29 | if (this.isDirective(attrName)) {
30 | // 转化指令
31 | attrName = attrName.substr(2)
32 | let key = attr.value
33 | this.update(node, key, attrName)
34 | }
35 | })
36 | }
37 | // 编译文本节点，处理差值表达式
38 | compilerText(node) {
39 | let reg = /\{\{(.+?)}\}/
40 | let content = node.textContent
41 | if (reg.test(content)) {
42 | // 获取正则匹配的第一个内容
43 | let key = RegExp.$1.trim()
44 | node.textContent = content.replace(reg, this.vm[key])
45 | // 触发依赖
46 | new Watcher(this.vm, key, (newValue) => {
47 | node.textContent = newValue
48 | })
49 | }
50 | }
51 | // 判断元素是否为指令
52 | isDirective(attrName) {
53 | return attrName.startsWith('v-')
54 | }
55 | // 判断元素是否为文本节点
56 | isTextNode(node) {
57 | return node.nodeType === 3
58 | }
59 | // 判断元素是否为元素节点
60 | isElementNode(node) {
61 | return node.nodeType === 1
62 | }
63 | // 更新指令数据
64 | update(node, key, attrName) {
65 | let updateFn
66 | if (attrName.indexOf(':') !== -1) {
67 | attrName = attrName.substr(3)
68 | updateFn = this.onUpdater
69 | updateFn && updateFn.call(this, node, key, this.vm[key], attrName)
70 | } else {
71 | updateFn = this[attrName + 'Updater']
72 | // 此处的this的Compiler对象
73 | updateFn && updateFn.call(this, node, key, this.vm[key])
74 | }
75 |
76 | }
77 | // 处理v-text指令
78 | textUpdater(node, key, value) {
79 | // 文本节点的值用textContent
80 | node.textContent = value
81 | // 收集依赖
82 | new Watcher(this.vm, key, (newValue) => {
83 | node.textContent = newValue
84 | })
85 | }
86 | // 处理v-model指令
87 | modelUpdater(node, key, value) {
88 | // 表单的值是value
89 | node.value = value
90 | // 收集依赖
91 | new Watcher(this.vm, key, (newValue) => {
92 | node.value = newValue
93 | })
94 | // 双向绑定
95 | node.addEventListener('input', (e) => {
96 | console.log(e)
97 | this.vm[key] = node.value
98 | })
99 | }
100 |
101 | // 处理v-show
102 | showUpdater(node, key, value) {
103 | if (value) {
104 | node.style.display = 'block'
105 | } else {
106 | node.style.display = 'none'
107 | }
108 | new Watcher(this.vm, key, (newValue) => {
109 | node.style.display = newValue ? 'block' : 'none'
110 | })
111 |
112 | }
113 | // 处理v-on
114 | onUpdater(node, key, value, handleType) {
115 | // value = value.substr(2)
116 | console.log("🚀 onUpdater", node, key, value)
117 | node.addEventListener(handleType, (e) => {
118 | this.vm[key]()
119 | })
120 | }
121 | }
--------------------------------------------------------------------------------
/framework/vue/mini-vue/dep.js:
--------------------------------------------------------------------------------
1 | // 观察者模式的 发布者
2 | class Dep {
3 | constructor() {
4 | // 收集依赖对象
5 | this.subs = []
6 | }
7 | // 添加依赖对象
8 | addSub(sub) {
9 | if (sub && sub.update) {
10 | this.subs.push(sub)
11 | }
12 | }
13 | // 通知方法
14 | notify() {
15 | this.subs.forEach((sub) => {
16 | sub.update()
17 | })
18 | }
19 | }
--------------------------------------------------------------------------------
/framework/vue/mini-vue/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | mini vue
7 |
8 |
9 |
10 |
差值表达式
11 |
{{ msg }}
12 |
13 |
{{ count }}
14 | {{ person }}
15 |
16 |
v-text
17 |
18 |
v-model
19 |
20 |
21 |
v-if
22 |
23 |
v-on
24 |
25 |