再vue.config.js中配置
module.exports = {
pluginOptions: {
electronBuilder: {
chainWebpackMainProcess: config => {
config.module.rule('node').test(/\.node$/).use('node-loader').loader('node-loader').end()
},
}
}
}
示例 1:
输入: 1->2->3->4->5->NULL, k = 2
输出: 4->5->1->2->3->NULL
解释:
向右旋转 1 步: 5->1->2->3->4->NULL
向右旋转 2 步: 4->5->1->2->3->NULL
示例 2:
输入: 0->1->2->NULL, k = 4
输出: 2->0->1->NULL
解释:
向右旋转 1 步: 2->0->1->NULL
向右旋转 2 步: 1->2->0->NULL
向右旋转 3 步: 0->1->2->NULL
向右旋转 4 步: 2->0->1->NULL
1：计算节点个数并找到旧尾链接到新头形成闭环
2：为了找到新尾巴的位置我们直接用n- k -1即可，防止出现k >节点数n的情况计算结果为负数，只要 k%n就可以取得正确的值，得到公式 (n - k % n -1) ，
3：断开新头新尾巴的链接，
4：并将新尾巴的next置空
public ListNode rotateRight(ListNode head, int k) {
if (head == null) {
return null;
}
if (head.next == null) {
return head;
}
ListNode oldTail = head;
// 找到旧尾并计算节点个数
int n = 0;
for (n = 1; oldTail.next != null; n++) {
oldTail = oldTail.next;
}
oldTail.next = head; // 旧头指向旧头 形成闭环
ListNode newTail = head;
// 找到新尾位置也就是断开闭环位置 n - K % 2 -1 公式可找到新尾位置
for (int j = 0; j < n - k % n - 1; j++) {
newTail = newTail.next;
}
ListNode newHead = newTail.next; // 新头位于新尾后面
newTail.next = null; // 断开闭环
return newHead;
}
示例：
给定一个链表: 1->2->3->4->5, 和 n = 2.
当删除了倒数第二个节点后，链表变为 1->2->3->5.
利用哑结点和双指针，让start指针先移动n个位置， 然后两个指针再一起移动，当start移动的已经为空了说明已经到了要删除节点的前一个节点， 让end指针指向它的下下一个节点即可完成删除
public ListNode removeNthFromEnd(ListNode head, int n) {
ListNode dh = new ListNode(0);
dh.next = head;
ListNode start = dh;
ListNode end = dh;
for (int i = 1; i <= n + 1; i++) {
start = start.next;
}
while (start != null) {
start = start.next;
end = end.next;
}
end.next = end.next.next;
return dh.next;
}
如果，我们将这两个数相加起来，则会返回一个新的链表来表示它们的和。
您可以假设除了数字 0 之外，这两个数都不会以 0 开头。
示例：
输入：(2 -> 4 -> 3) + (5 -> 6 -> 4)
输出：7 -> 0 -> 8
原因：342 + 465 = 807
利用哑结点，遍历两个链表的值使其一 一相加，用carry记录当前的值是否大于10； 大于10下一位如果有值不为空则+1，如果下一位值为空说明已经遍历完成了，则在末尾创建一个新的节点值为 carry值，当前的相加的值为 sum %10。
public ListNode twoSum(ListNode l1, ListNode l2) {
ListNode dh = new ListNode(0);
ListNode a = l1, b = l2, pre = dh;
int carry = 0;
while (a != null || b != null) {
int x = (a != null) ? a.val : 0;
int y = (b != null) ? b.val : 0;
int sum = carry + x + y;
carry = sum / 10;
pre.next = new ListNode(sum % 10);
pre = pre.next;
if (a != null)
a = a.next;
if (b != null)
b = b.next;
}
// 遍历完成，carry仍然大于0则在末尾创建一个新的节点值为当前的carry值
if (carry > 0) {
pre.next = new ListNode(carry);
}
return dh.next;
}
你可以假设每种输入只会对应一个答案。但是，数组中同一个元素不能使用两遍。
示例:
给定 nums = [2, 7, 11, 15], target = 9
因为 nums[0] + nums[1] = 2 + 7 = 9
所以返回 [0, 1]
暴力解法两遍遍历找出两数相加等于target的两个val的下标值
public int[] twoSum(int[] nums, int target) {
int[] result = new int[2];
for (int i = 0; i < nums.length; i++) {
for (int j = i + 1; j < nums.length; j++) {
if (nums[i] + nums[j] == target) {
result[0] = i;
result[1] = j;
return result;
}
}
}
return null;
}
一遍遍历，利用hash存储每个值，用target 减去当前遍历的值得到的结果是否 存在hash里，有的话返回两个值的下标
public int[] twoSum(int[] a, int target) {
Map<Integer, Integer> map = new HashMap<>();
for (int i = 0; i < a.length; i++) {
if (map.containsKey(target - a[i])) {
return new int[] { map.get(target - a[i]), i };
}
map.put(a[i], i);
}
return null;
}
在日常我们写 css 样式的时候或多或少都遇到过自己写的样式不生效的时候，一般都不会去探究背后的原因直接一股脑的！important 完事，但这样是非常不好的，但有的时候加了 important 也无法生效样式（当然我们还是遵循能不写 Important 就尽量不写），这是为什么呢！在 css 写样式中有个重要的权重问题！
每个 css 规则都有自己相应的权重值，权重值越大的规则生效，主要有 5 种
<div style="....."></div> =>1000
#id{} =>100
.class{}=>10
body{} =>1
p{}=>1
当写 css 规则时会按照值进行累加，值越大权重越大
body #id {} =>元素1 id选择器100 = 101
#id .class{} =>id选择器100类选择器 = 110
#id .class p{} => id选择器100 类选择器10 元素标签1 = 111
无论多少个同级权重累加都不会超过高等级权重值
.class .class .Nclass {
}
< #id {
}
相同权重值作用于同一个元素时权重值大的生效
.test1 .test2{background:red} =>20
.tetst1 .test2 p{background:black} =>21
假设以上两条都作用于同一个元素，下面权重值高的会生效
有时候!important 加了也没生效是为什么呢？因为它也遵循权重大小规则例如：
.test1 .test2{background:red!important} =>20
.tetst1 .test2 p{background:black!important} =>21
上面都加了 important 但还是权重值更大的会生效
离元素标签越近的生效
在一个单独的 css 文件写如下样式
.nav-bar {
background: red;
}
在 html 的 style 中写
<head>
<style>
.nav-bar {
background: black;
}
</style>
</head>
以上栗子中虽然都一样但是下面的 css 会生效
详细参阅【Understanding Specificity】
相同的权重后面的会覆盖前面的
p {
background: red;
}
p {
background: black;
}
不要用!important
永远都不要使用“!important”：“如果你遇到了权重问题，第一个解决方法肯定是去掉“!important”，“!important”会覆盖所有的样式规则，但“!important”根本没有结构与上下文可言，所以很 容易找不到样式失效的原因
本文参考你应该知道的 css 权重问题
]]>新建 global.less 在资源文件夹 aseets/style 下 具体代码如下 虽然这个没什么用但是必须得创建
@primary-color: "#f52533" !important;
新建 vars.less 在资源文件夹 aseets/style(根据自己项目情况而定)
@import "~antd/lib/style/themes/default.less"; //引入antd的变量文件，实现变量的覆盖
@primary-color: #1da57a;
@link-color: #1da57a;
@btn-primary-bg: #1da57a;
:root {
--primary-color-0: @primary-color; //color.less中加入css原生变量：--PC
}
在项目根目录下 新建 themColor.js 用于动态更改全局主题色
const path = require("path");
const { generateTheme, getLessVars } = require("antd-theme-generator");
const options = {
stylesDir: path.join(__dirname, "./src/assets/styles"), //对应具体位置
antDir: path.join(__dirname, "./node_modules/antd"), //对应具体位置
varFile: path.join(__dirname, "./src/assets/styles/vars.less"), //对应具体位置
mainLessFile: path.join(__dirname, "./src/assets/styles/global.less"), //对应具体位置
themeVariables: [
"@primary-color",
"@secondary-color",
"@text-color",
"@text-color-secondary",
"@heading-color",
"@layout-body-background",
"@btn-primary-bg",
"@layout-header-background"
],
indexFileName: "index.html",
outputFilePath: path.join(__dirname, "./public/color.less") //页面引入的主题变量文件
};
generateTheme(options)
.then(less => {
console.log("Theme generated successfully");
})
.catch(error => {
console.log("Error", error);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<!-- 重点是这里 start -->
<link
rel="stylesheet/less"
type="text/css"
href="%PUBLIC_URL%/color.less"
rel="external nofollow"
/>
<script>
window.less = {
async: false,
env: "production"
};
</script>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"
></script>
<!-- 重点是这里 end -->
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
在 scripts 中加入以下代码
"scripts": {
"start": "node themeColor && node scripts/start.js",
"build": "node themeColor && node scripts/build.js",
"test": "node scripts/test.js"
},
在需要动态更改的地方 使用以下代码就可以了
window.less
.modifyVars({
"@primary-color": "#FFB6C1",
"@link-color": "#FFB6C1",
"@btn-primary-bg": "#FFB6C1"
})
.then(() => {})
.catch(error => {
// message.error(`Failed to update theme`);
});
举个栗子
非严格模式
var value = 'global scope';
function a() {
console.log(this.value);
}
a(); // global scope
严格模式
'use strict';
var value = 'global scope';
function a() {
console.log(this.value);
}
a(); // undefined
在浏览器中全局的 this 默认是 window， 因此 a()在全局中被调用相当于是 window.a，谁调用它 this 就指向谁，因此这里打印出全局变量的'global scope'
在看一个栗子：
var value = 'global scope';
var o = {
value: 'local scope',
a: function() {
console.log(this.value);
}
};
o.a(); //local scope
这里通过创建一个 o 实例对象，通过 o 调用 this 的指向就指向 o。
2.call, apply, bind 改变this指向在 js 中有三种方式可以显示的改变 this 的指向，call 和 apply 除了传参不一样其本质是一样的，call 和 apply 第一个参数都是要传入将要指向的 this, call 后面可接多个参数，apply 则是第二个参数接收一个参数的集合，也就是数组。
fn.call(this, arg1, ag2, ag3);
fn.apply(this, [...arg]);
bind 的本质是封装了 apply 它返回的一个函数。
来看几个栗子:
var value = 'global scope';
function b() {
console.log(this.value);
}
var o = {
value: 'local scope',
a: function() {
console.log(this.value);
}
};
b.call(o); //local scope
b.apply(o); //local scope
let c = b.bind(o);
c(); //local scope
上面几个栗子都是改变了 this 的指向，原本在非严格模式下指向全局的 this 应该输出'global scope'，改变 this 指向后指向了传入的 o 对象因此打印出'local scope'
call 和 apply 的原理其实是在传入的对象增加要执行的函数，从而改变 this 的指向，执行完后在删除函数，这个后面会有一章节来仿写 call,apply 和 bind 函数。
通过 new 关键字调用函数会以构造函数的形式调用会发生以下步骤 1.创建一个对象 2.将对象的实例原型指向构造函数的原型
3.将对象的 this 绑定到构造函数并创建一系列属性 4.返回这个对象
因此我们可以 new 关键字调用的函数也会改变 this 的指向，它指向创建出来的实例对象
举个栗子：
var value = 'global scope';
function A() {
this.value = 'local scope';
this.sayValue = function() {
console.log(this.value);
};
}
let b = new A();
b.sayValue();
通过 new 内部发生的过程我们就可以知道上面的栗子将 this 指向了新创建出来的实例 b 因此打印 value 时候就打印出'local scope'
在 ES6 中新增了箭头函数用法，它本身没有绑定 this，它的 this 指向是离的它最近的一个普通函数所绑定的 this，在 ES5 之前我们在一些匿名函数为了防止 this 指向丢失我们可能会这样绑定 this
function a() {
let self = this;
this.value = 'Hi!';
setTimeout(function() {
console.log(self.value);
}, 0);
}
在 ES6 中这样就可以了
function a() {
this.value = 'Hi!';
setTimeout(() => {
console.log(this.value);
}, 0);
}
只要记住一点。在箭头函数中的this的指向永远是离它最近的一个普通函数所绑定的this,如上栗子离匿名函数最近的普通函数是 a函数， 当a被谁调用时 this就指向谁
贴一段 MDN 的介绍
Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值..... Promise 对象是一个代理对象（代理一个值），被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。 这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象。
通俗点来说就是解决异步操作问题的一个类。
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise
相信接触过异步操作的同学都经历过回调地狱，一个异步接着一个异步如下所示
asyncFunc1(opt, (...args1) => {
asyncFunc2(opt, (...args2) => {
asyncFunc3(opt, (...args3) => {
asyncFunc4(opt, (...args4) => {
// some operation
});
});
});
});
这样的代码不仅难以维护，可读性也差简直痛苦，Promise 的出现通过链式调用可以很大程度上解决回调地狱的问题，通过 Promise 可以写成这样
asyncFunc1('...“).then(res=> {
return asyncFunc2(res);
}).then(res => {
return asyncFunc3(res);
}).then(res => {
return asyncFunc4(res);
}).then(res =>{
console.log(res)
})
这样的每一次的 then 的返回值都可以作为下一个的异步操作的参数，这样回调地狱的问题就轻易解决了。
本文对 Promise 的用法不多做介绍跟多的用法可看阮一峰老师的 es6 入门http://es6.ruanyifeng.com/
开始写之前贴上 PromiseA+规范的链接 http://www.ituring.com.cn/article/66566
1、首先 Promise 有三种状态等待(pending),
成功态(fulfilled,规范中称为执行态我认为解释为成功态或者完成态更好理解),
失败(rejected),并且只能为以上三种状态的其实一种，等待态可改变为成功态或者失败态，成功态有成功的值不能改变为其他任何状态，失败态有失败的值不能改变为其他任何状态。
2、Promise 接受一个函数作为参数文档中称为‘executor’翻译过来就是执行者说明在构造函数一调用的时候就被执行，这个 executor 函数有两个参数分别是 resolve,reject，当 executor 函数中的 resovle 函数被调用时状态改变为成功态(fulfiiled)，reject 函数被调用时状态就改变为失败态(rejected),当 executor 函数执行出错时就直接调用 reject 方法，因此我们要捕获 executor 函数执行时的异常。
根据这两条我们写初始的代码
class Promise {
constructor(executor) {
//状态
this.status = 'pending';
//失败的值
this.reason = null;
//成功的值
this.value = null;
let resolve = value => {
if (this.status == 'pending') {
this.status = 'fulfilled';
this.value = value;
}
};
let reject = reason => {
if (this.status == 'pending') {
this.status = 'rejected';
this.reason = reason;
}
};
//当调用构造函数时就调用executor函数并捕获异常
try {
executor(resolve, reject);
} catch (error) {
reject(error);
}
}
}
3、promiseA+规定必须要有一个 then 方法可以访问其成功或失败时候的返回值，then 方法接受两个参数分别为 onFulfilled 和 onRejectd，并且还规定了当两个参数不是函数时其值被忽略
4、当 onFulfilled 和 onRejected 是函数时，onFulfilled 函数只能被调用一次，在 promise 执行成功结束后，并将 promise 的返回值作为终值，onReject 函数只能被调用一次，当 promise 被拒绝执行后其必须被调用，其第一个参数为 promise 的据因。
根据这两条我们来写 then 的初始方法
//then方法接受两个参数onFulfilled,onRejected
then(onFulfilled, onRejected) {
//如果非函数就直接返回值
onFulfilled = typeof onFulfilled == 'function' ? onFulfilled : v => v
// 错误的就直接抛错不在执行
onRejected = typeof onRejected == 'function' ? onRejected : err => { throw err }
//成功后立即执行,并将其结果作为参数
if (this.status == 'fulfilled') {
onFulfilled(this.value)
}
// 失败后立即执行,并将其拒因作为参数
if (this.status == 'rejected') {
onRejected(this.reason)
}
}
}
5、then 方法可以被同一个 promise 多次调用，如下所示
let p = new Promise()
p.then()
p.then()
当 promise 成功执行时，所有 onFulfilled 需按照其注册顺序依次回调
当 promise 被拒绝执行时，所有的 onRejected 需按照其注册顺序依次回调
以上代码只能解决同步问题，所以当我们异步执行的时候我们要有两个队列(当多次调用的时候)在等待状态的时候分别存放成功和失败时候的回调，并在状态改变的时候依次取出来执行
在构造函数添加代码
//成功回调存放
this.resolvedCallbacks = [];
//失败回调存放
this.rejectedCallbacks = [];
let resolve = value => {
if (this.status == 'pending') {
this.status = 'fulfilled';
this.value = value;
//依次取出回调执行
this.resolvedCallbacks.map(cb => cb());
}
};
let reject = reason => {
if (this.status == 'pending') {
this.status = 'rejected';
this.reason = reason;
//依次取出回调执行
this.rejectedCallbacks.map(cb => cb());
}
};
在 then 函数添加 pending 状态判断
//当时等待状态时候存放失败或成功的回调
if (this.status == 'pending') {
this.rejectedCallbacks.push(() => {
onRejected(this.reason);
});
this.resolvedCallbacks.push(() => {
onFulfilled(this.value);
});
}
6、规范规定 then 函数必须返回一个 promise 对象，因为我们知道规范中的 promise 是和链式调用的如 p.then().then()这样形式的调用用来解决回调地狱的问题，所以我们要返回一个 promise 对象可供链式调用，规范中称它为 promise2 promise2 = promise1.then(onFulfilled, onRejected);
7、then 会有个返回值规范中称它为 x 并作为下一个 promise 的参数进行传递，
这个 x 值就是 onFulfilled 或者 onRejected 执行后的返回值，
并且这个 x 值需要做判断，判断的函数为 resolvePromise，
如果 x 是普通值就直接作为 promise2 的终值，如果 x 是 promise 就取得 x 的最终状态作为 promise2 的结果。 resolvePromise 有四个参数 promise2,x,resolve,reject,其中 resolve 和 reject 为 promise2 的。
根据这两条得出以下代码
//then方法接受两个参数onFulfilled,onRejected
then(onFulfilled, onRejected) {
// 返回promise对象
let promise2 = new Promise((resolve, reject) => {
//如果非函数就直接返回值
onFulfilled = typeof onFulfilled == 'function' ? onFulfilled : v => v
// 错误的就直接抛错不在执行
onRejected = typeof onRejected == 'function' ? onRejected : err => { throw err }
//成功后立即执行,并将其结果作为参数
if (this.status == 'fulfilled') {
//x 为onFufilled的值
let x = onFulfilled(this.value)
// 判断x的函数
resolvePromise(promise2, x, resolve, reject)
}
// 失败后立即执行,并将其拒因作为参数
if (this.status == 'rejected') {
onRejected(this.reason)
resolvePromise(promise2, x, resolve, reject)
}
//当时等待状态时候存放失败或成功的回调
if (this.status == 'pending') {
this.rejectedCallbacks.push(() => {
let x = onRejected(this.reason)
resolvePromise(promise2, x, resolve, reject)
})
this.resolvedCallbacks.push(() => {
onFulfilled(this.value)
resolvePromise(promise2, x, resolve, reject)
})
}
})
return promise2
}
8、resolvePromise 实现的功能主要就是判断 x 的值规范规定了以下几点 1.如果 x 指向同一对象就抛错，防止相互引用的情况出现，并且 x 不为空， 2.如果 x 是普通值就直接 resolve 3.如果 x 是函数或者对象(包括 promise)
.定义 then 并使得 then = x.then()----promiseA+原文‘Otherwise, if x is an object or function,Let then be x.then’，并捕获取 then 过程的异常如果出错就直接 reject()
.如果 then 是函数就调用 call 执行 this 为当前的 x,后面分别是成功和失败的回调，如果 then 非函数就直接 resolve
.并且成功和失败只能被调用一次，因此我们要定义一个 called 来标记是否已经执行过成功或失败的回调，如果成功的返回值仍然是 Promise 就递归调用 resovlePromise 函数
根据这条我们来写 resovlePromise 函数
function resolvePromise(promise2, x, resolve, reject) {
if (x == promise2) {
return new TypeError('Error');
}
let called = false; //定义标志，防止重复调用
// x 不能为空，且为对象或者函数时，为普通值就直接resovle
if (x != null && (typeof x == 'object' || typeof x == 'function')) {
//定义then 并捕获异常
try {
let then = x.then();
//如果then为函数，默认为promise对象就继续递归解析
if (typeof then == 'function') {
then.call(
x,
y => {
//只允许被调用一次
if (called) return;
called = true;
resolvePromise(promise2, y, resolve, reject);
},
err => {
if (called) return;
called = true;
reject(err);
}
);
} else {
if (called) return;
called = true;
resolve(x);
}
} catch (error) {
if (called) return;
called = true;
reject(error);
}
} else {
resolve(x);
}
}
好了这样我们就完成了一个符合规范的 Promise
附上 all,race,resolve,reject，catch,finlly 代码
Promise.resolve = function(v) {
return new Promise((resolve, reject) => {
resolve(v);
});
};
Promise.reject = function(err) {
return new Promise((resolve, reject) => {
resolve(err);
});
};
Promise.race = function(promises) {
return new Promise((resolve, reject) => {
for (let i = 0; i < promises.length; i++) {
promises[i].then(resolve, reject);
}
});
};
Promise.all = function(promises) {
let arr = [];
let index = 0;
return new Promise((resolve, reject) => {
for (let i = 0; i < promises.length; i++) {
promises[i].then(data => {
addResult(i, data);
}, reject);
}
function addResult(i, data) {
if (index == arr.length) {
resolve(arr);
}
index++;
arr[i].push(data);
}
});
};
Promise.catch = function(errFn) {
return this.then(null, errFn);
};
Promise.finally = function(fn) {
this.then(
() => {
fn();
},
() => {
fn();
}
);
return this;
};
完整代码
class Promise {
constructor(executor) {
//状态
this.status = 'pending'
//失败的值
this.reason = null
//成功的值
this.value = null
//成功回调存放
this.resolvedCallbacks = []
//失败回调存放
this.rejectedCallbacks = []
let resolve = (value) => {
if (this.status == 'pending') {
this.status = 'fulfilled'
this.value = value
//依次取出回调执行
this.resolvedCallbacks.map(cb => cb())
}
}
let reject = (reason) => {
if (this.status == 'pending') {
this.status = 'rejected'
this.reason = reason
//依次取出回调执行
this.rejectedCallbacks.map(cb => cb())
}
}
//当调用构造函数时就调用executor函数并捕获异常
try {
executor(resolve, reject)
} catch (error) {
reject(error)
}
}
//then方法接受两个参数onFulfilled,onRejected
then(onFulfilled, onRejected) {
// 返回promise对象
let promise2 = new Promise((resolve, reject) => {
//如果非函数就直接返回值
onFulfilled = typeof onFulfilled == 'function' ? onFulfilled : v => v
// 错误的就直接抛错不在执行
onRejected = typeof onRejected == 'function' ? onRejected : err => { throw err }
//成功后立即执行,并将其结果作为参数
if (this.status == 'fulfilled') {
//x 为onFufilled的值
let x = onFulfilled(this.value)
// 判断x的函数
resolvePromise(promise2, x, resolve, reject)
}
// 失败后立即执行,并将其拒因作为参数
if (this.status == 'rejected') {
onRejected(this.reason)
resolvePromise(promise2, x, resolve, reject)
}
//当时等待状态时候存放失败或成功的回调
if (this.status == 'pending') {
this.rejectedCallbacks.push(() => {
let x = onRejected(this.reason)
resolvePromise(promise2, x, resolve, reject)
})
this.resolvedCallbacks.push(() => {
onFulfilled(this.value)
resolvePromise(promise2, x, resolve, reject)
})
}
})
return promise2
}
}
function resolvePromise(promise2, x, resolve, reject) {
if (x == promise2) {
return new TypeError('Error')
}
let called = false //定义标志，防止重复调用
// x 不能为空，且为对象或者函数时，为普通值就直接resovle
if (x != null && (typeof x == 'object' || typeof x == 'function')) {
//定义then 并捕获异常
try {
let then = x.then()
//如果then为函数，默认为promise对象就继续递归解析
if (typeof then == 'function') {
then.call(x, y => {
//只允许被调用一次
if (called) return
called = true
resolvePromise(promise2, y, resolve, reject)
}, err => {
if (called) return
called = true
reject(err)
})
} else {
if (called) return
called = true
resolve(x)
}
} catch (error) {
if (called) return
called = true
reject(error)
}
} else {
resolve(x)
}
}
Promise.resolve = function (v) {
return new Promise((resolve, reject) => {
resolve(v)
})
}
Promise.reject = function (err) {
return new Promise((resolve, reject) => {
reject(err)
})
}
Promise.race = function (promises) {
return new Promise((resolve, reject) => {
for (let i = 0; i < promises.length; i++) {
Promise.resolve(promises[i]).then((resolve,reject));
}
})
}
Promise.all = function (promises) {
let arr = []
let index = 0;
let resultarr =[];
let count = 0;
len asynclen = promises.length
return new Promise((resolve, reject) => {
for (let i = 0; i <asynclen ; i++) {
promises[i].then((value) => {
count++;
resultarr.push(value);
if(count==asynclen ){
resolve(resultarr)
}
}, reject)
}
})
}
Promise.catch = function (errFn) {
return this.then(null, errFn);
}
Promise.finally = function (fn) {
this.then(() => {
fn();
}, () => {
fn();
});
return this;
}
首先为了能像 vue 一样调用，我们先实现一个 mvvm 类，里面初始化传入的参数。
class Mvvm {
constructor(option) {
this.methods = option.methods; //方法
this.data = option.data; // 数据
this.target = null; //记录watcher
this.element = document.getElementById(option.el); //获取根元素
this.observe(this, this.data); //设立观察者对data里面的数据进行劫持
this.compile(this.element); //指令解析，整合
}
}
Observe 取出 data 中所有的属性并对其进行劫持，在 Mvvm 类中添加 observe 方法
observe(root, data) {
for (let key in data) {
this.definedRective(root, key, data[key])
}
}
definedRective(root, key, value) {
if (typeof value == 'object') {
this.observe(value, value) //如果还有子属性还是对象递归取出
}
Object.defineProperty(root, key, {
set(newVal) {
if (value == newVal) return //如果数据没改变就直接返回
value = newVal // 记录改变的值
},
get() {
return value
}
})
}
这里 observe 取出 data 中的属性数据，如果子属性还是个对象就进行递归，这样子属性如果发生了变化也能监听的到了。这个部分我们已经可以在数据变化的时候对数据进行拦截，但是我们要有一个事件的接收和派发调度员，让订阅消息的人可以实时的知道数据更新。
Dispatcher 主要做的事情就是对事件的接受和发布，让监听的人可以实时的知道数据的更新并同步的对 dom 的数据进行更新。
class Dispatcher {
constructor() {
this.watchers = []; //监听者队列
}
add(watcher) {
this.watchers.push(watcher); //接受监听者
}
notify(value) {
console.log('更新');
this.watchers.forEach(watcher => {
watcher.update(value);
}); //通知更新
}
}
Dispatcher 其实就相当于一个调度员赋值事件的接受和发布，每当有新的 watcher 就添加进队列，当数据更新时，统一通知这些 watcher 我数据更新啦你也快更新吧。有了调度员，现在缺个订阅的我们来看下 watcher 怎么实现
watcher 其实很简单就做一件事对节点的数据进行更新
class Watcher {
constructor(node, type) {
this.node = node; //监听的子节点
this.type = type; // 子节点类型，不同子节点类型赋值方式不同
}
update(value) {
if (this.type == 'input') {
this.node.value = value;
}
if (this.type == 'text') {
this.node.nodeValue = value;
}
}
}
现在有了 watcher,和 dispatcher 我们在对数据进行劫持的时候在 set get 中进行事件的发布和订阅
definedRective(root, key, value) {
if (typeof value == 'object') {
this.observe(value, value)
}
const dep = new Dispatcher();//事件派发者
Object.defineProperty(root, key, {
set(newVal) {
if (value == newVal) return //如果数据没改变就直接返回
value = newVal // 记录改变的值
dep.notify(newVal) //发布事件
},
get() {
console.log('get', value)
dep.add(this.target) //添加订阅者
return value
}
})
}
最后实现 complie 对 v-model 等指令进行解析，并新建订阅者
compile(element) {
const childNodes = element.childNodes;//获取所有子节点
for (let node of childNodes) {
if (node.nodeType == 1) {// nodetype属性在文末最后会附上解释，这里的1代表普通元素
const attrs = node.attributes;//获取所有节点属性
for (let attr of attrs) {
if (attr.name == 'v-model') { //解析v-model的指令
const name = attr.value
node.addEventListener('input', (e) => {
this[name] = e.target.value //监听数据input数据改变
})
this.target = new Watcher(node, 'input')
this[name] //触发劫持添加监听,一定要写这一句，因为这句其实就是获取data里面的值，一旦获取data的值就会触发get 将订阅者添加进订阅者集合
}
if (attr.name == '@click') {
const name = attr.value
node.addEventListener('click', this.methods[name].bind(this))
}
}
}
if (node.nodeType == 3) {//nodeType等于3表示文本元素
const reg = /\{\{(.*)\}\}/
const match = node.nodeValue.match(reg)
if (match) {
const name = match[1].trim()
this.target = new Watcher(node, 'text')
node.nodeValue = this.data[name]
this[name] //触发劫持添加监听
}
}
}
}
