Personal Blog
0%

发表于

笔记一

在vue项目中使用ts-class的形式来编写组件的时候，要记得在export上面➕@Component装饰器，不然组件不能正常注册

1
2
3
4
5
6
7
8
9
10
11
12
13
import {
    Component,
    Vue,
    InjectReactive
} from 'vue-property-decorator';

@Component
class Child extends Vue {
    @InjectReactive() node: number;
    mounted() {
        console.log(this.node)
    }
}

如果在页面中需要用到子组件的情况，需要像这样注册,并且@Component装饰器只需要写一次

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import {
    Vue,
    Component,
    ProvideReactive
} from 'vue-property-decorator';
import Child from './child.vue'
@Component({
    components: {
        Child
    }
})
class Parent extends Vue {
    @ProvideReactive() node = {}
    mounted() {
        this.node = 1
    }
}

笔记二 — ProvideReactive来做数据透传的注意点

如果在组件中使用Provide来进行数据透传的话，数据是不带响应式的。如果需要数据具有响应式，那么需要用ProvideReactive来做属性的透传，代码例子可以看上一个代码，另外由于在路由跳转的时候，有时候会有Provide的值重新定义的问题，这时候控制台会抛出异常，具体可以看这个
issue,有临时的解决方案

笔记三 — 在弹窗中保证数据的实时性

需要把数据以Provide的形式传递给弹窗，但是数据仅仅只在第一次显示的时候是正常的数据，在关闭弹窗后再一次开启弹窗，显示的数据是上一次的数据。原因暂时不知道。所以我在关闭弹窗的时候同时用v-if来销毁元素，这样每次打开的元素都是一个最新的元素，同时这个时候获取到的数据也是最新的数据。

笔记四 — 数据获取完后保证子组件获取最新的数据

在父组件用axios获取数据的时候，然后传递给子组件，但是子组件渲染的时候是定义时就给的默认值。
原因：父组件在请求数据的时候，子组件的生命周期已经走完并且已经渲染完成，所以这时候是拿不到请求后返回的真实数据
方案：我这里用v-if来判断获取的数据的长度是否为空来判断是否要渲染子组件，缺点：数据量很大的时候会有很长时间的空白。

笔记五 — 自定义组件绑定v-models

想让自定义组件能够使用v-model语法糖，这样子组件的数据就可以实时的反馈到父组件中去

在vue中，对input来说，v-model是value和input事件的语法糖，对于checkbox来说，监听的事件是change，给对应的元素添加对应的事件，然后在自组件emit出去，把相应的value值绑定到对应的dom元素中去。

发表于 更新于

怎么在js文件中用引用svg文件

使用webpack的require.context,它接收三个参数

  • 要搜索的文件夹目录
  • 是否还应该搜索它的子目录，
  • 以及一个匹配文件的正则表达式。
    1
    const req = require.context('./svg', false, /\.svg$/)
    req返回的是一个方法
    1
    2
    3
    4
    function webpackContext(req) {
    	var id = webpackContextResolve(req);
    	return __webpack_require__(id);
    }
    包含三个属性
  • id
  • keys
  • resolve
    阅读全文 »

发表于

命令行文件的上传与下载

文件的上传和下载命令都是scp

上传
从服务器上下载文件 scp username@servername:/path/filename /Users/mac/Desktop（本地目录，例如：

1
scp root@47.98.37.170:/root/test.txt /Users/mac/Desktop就是将服务器上的/root/test.txt下载到本地的/Users/mac/Desktop目录下。注意两个地址之间有空格！

下载
上传本地文件到服务器 scp /path/filename username@servername:/path ;

note： 下载命令就是将两个路径换一个位置就行了。

TS 4.0的一些更新

类型解构

1
2
3
4
5
6
type Strings = [string, string];
type Numbers = number[]

type Unbounded = [...Strings, ...Numbers, boolean];
# // [string, string, ...Array<number | boolean>]
# 按照官方的解释就是解构一个已知长度的类型的时候，那么最后的结果类型也是没有任何限制的，在解构类型之后添加的类型声明都要添加到被解构类型的类型中去

—待续哈，明天更新

发表于 更新于

Proposal for a .item() method on all the built-in indexables

这个方法是给有索引对象内置的一个方法，那么这个方法接收一个 number 类型的 index，对象能够根据 index 来确定值。那其实看到这会有个问题，具备索引的对象自己就能根据索引来确定值了，那么这个方法出现的意义是为什么？它其实是用负值的 index 来获取值，比如

1
2
const arr =[1,2,3]
arr.item(-1) // 3

是这样的用法。
那么这个方法是挂载在 String，Array，TypeArray 这三个数据结构的原型链上。
然后对于 dom 结构中类型 document.getElementById()这样的返回 NodeList 结构在经过 Array.from 转化之后同样会挂载 item 方法

但是这个方法目前还处于 stage3 阶段，因此是不能直接使用的 hhhh。但是官方给出了 polyfill

Like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function item(n) {
	# ToInteger() abstract op
	n = Math.trunc(n) || 0;
	# Allow negative indexing from the end
	if(n < 0) n += this.length;
	# OOB access is guaranteed to return undefined
	if(n < 0 || n >= this.length) return undefined;
	# Otherwise, this is just normal property access
	return this[n];
}

# Other TypedArray constructors omitted for brevity.
for (let C of [Array, String, Uint8Array]) {
    Object.defineProperty(C.prototype, "item",
                          { value: item,
                            writable: true,
                            enumerable: false,
                            configurable: true });
}

2021-3-21 更新

proposal

item方法更名为at方法

Spec-compliant polyfills using the old name of .item(): Array.prototype.item, String.prototype.item

The original iteration of this proposal proposed the name of the method to be .item(). Unfortunately, this was found out to be not web compatible. Libraries, notably YUI2 and YUI3, were duck-typing objects to be DOM collections based on the presence of a .item property. Please see #28, #31, and #32 for more details.

Captured below is the original motivation for choosing the .item() name and the original concerns.

发表于 更新于

为什么 axios 既可以用 axios({})这样请求 ，也可以 axios.get()这样请求？

在使axios.create的时候,调用了这个方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/**
 * Create an instance of Axios
 *
 * @param {Object} defaultConfig The default config for the instance
 * @return {Axios} A new instance of Axios
 */
function createInstance(defaultConfig) {
  var context = new Axios(defaultConfig);//生成配置 和拦截器
  # 在这里，instance 是一个 wrapped 函数，将context作为参数传递给request，所以调用axios({})就是在调用request({})
  var instance = bind(Axios.prototype.request, context);

  #Copy axios.prototype to instance
  # 这个是把Axios原型链的东西挂载到instance上去
  # 因为instance 是个一个functoin，所以在直接赋值的时候不能直接看到
  # 能在instance 的prototype上可以看到
  # 所以在调用类似axios.get(）这类的方法是能正常运行
  utils.extend(instance, Axios.prototype, context);

  # Copy context to instance
  utils.extend(instance, context);
  # console.log(instance)
  return instance;
}

从图中可以看到,方法之类的确实挂载到了原型链上
prototype

cancalToken 怎么取消请求的

那么其实什么时候需要取消请求，举一个很常见的例子，取消重复请求，就是当前已经发出请求的情况下，后续同样的请求如果发送就会被取消（如果是表单的提交也可以使用 dom 的 disabld 禁止点击 2333）
举个栗子：
在 axios 上是挂载了 Cancel 相应的东西

  • axios.Cancel = require(‘./cancel/Cancel’);
  • axios.CancelToken = require(‘./cancel/CancelToken’);
  • axios.isCancel = require(‘./cancel/isCancel’);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var data = document.getElementById("data").value;
         const CancelToken = axios.CancelToken;
         axios
           .post(
             "/post/server",
             {
               data,
             },
             {
               cancelToken: new CancelToken((c) => {
                 cancel = c;
                 console.log(c)
               }),
             }
           )
           .then(function (res) {
             output.className = "container";
             output.innerHTML = res.data;
           })
           .catch(function (err) {
             output.className = "container text-danger";
             output.innerHTML = err.message;
           });
         cancel('sdfsd');

然后这里 axios.post 实际上就是调用了request方法，方法的返回值是一个 promise，最后一个执行的 promise 是一个叫dispatchRequest的函数，函数位置在 core/dispatchRequest.js 文件下，因为返回的是一个 promise ，状态是 pendding，加入到微任务队列，然后执行主线程的cancel方法。cancel 方法是在初始化 cancelToken 的时候给 cancel 赋值了。

cancelToken：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

function CancelToken(executor) {
  if (typeof executor !== 'function') {
    throw new TypeError('executor must be a function.');
  }

  var resolvePromise;
  # 这里把resolve钩子赋值给resolvePromise 为了让cancel函数能够改变promise的状态
  this.promise = new Promise(function promiseExecutor(resolve) {
    resolvePromise = resolve;
  });

  var token = this;
  executor(function cancel(message) {
    if (token.reason) {
      # Cancellation has already been requested
      return;
    }

    token.reason = new Cancel(message);
    # 这里改变promise状态位fulfilled
    resolvePromise(token.reason);
  });
}

主线程任务执行完成的时候开始进入下一轮任务执行，没有宏任务需要执行，直接执行微任务，先执行刚刚 request 返回的 promise，其实是开始执行了dispatchRequest

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

module.exports = function dispatchRequest(config) {
  throwIfCancellationRequested(config);
  # 省略其他代码
}
/**
 * Throws a `Cancel` if cancellation has been requested.
 */
function throwIfCancellationRequested(config) {
  if (config.cancelToken) {
      # 这个方法挂载在canceltoken原型链傻姑娘
    config.cancelToken.throwIfRequested();
  }
}
CancelToken.prototype.throwIfRequested = function throwIfRequested() {
  if (this.reason) {
      # 这里抛出错误，然后在主程序代码中的catch捕获，然后程序返回，不进行后续创建xhr对象的过程
    throw this.reason;
  }
};

在xhr文件中看到有一段代码，长这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
if (config.cancelToken) {
      // Handle cancellation
      config.cancelToken.promise.then(function onCanceled(cancel) {
        if (!request) {
          return;
        }

        request.abort();
        reject(cancel);
        // Clean up request
        request = null;
      });
    }

那么上文中的resolvePromise改变后的promise就是在这里调用，那什么情况会到这里来执行请求，假如有A，B两个请求，A请求响应时间过长，然后等到B执行回调都回来的时候，直接把A请求给取（gan）消(diao)了

发表于 更新于

简单请求

请求方法只能是以下三种：

  1. GET
  2. POST
  3. HEAD

请求头只能用以下几种：

  1. Accept
  2. Accept-Language
  3. Content-Language
  4. Content-Type （需要注意额外的限制）
  5. DPR
  6. Downlink
  7. Save-Data
  8. Viewport-Width
  9. Width

Content——Type只能有以下几种

  1. text/plain
  2. multipart/form-data
  3. application/x-www-form-urlencoded

请求中的任意XMLHttpRequestUpload 对象均没有注册任何事件监听器；XMLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问。

请求中没有使用 ReadableStream 对象。

复杂请求

非简单请求就是复杂亲求

发表于 更新于

GET请求

  1. GET请求返回的资源会被浏览器缓存
  2. GET请求会保存在浏览器的历史记录中
  3. GET请求能当书签
  4. GET不能用来处理敏感数据
  5. 有长度限制（具体长度参见各个浏览器规范）
  6. 仅仅用来获取数据，不能修改
  7. 参数的数据类型，只接收ascll编码
  8. 仅支持url编码
  9. 产生一个数据包
  10. 页面重载或者回退没有影响

POST请求

  1. 请求不会被缓存
  2. 不会保存在历史记录中
  3. 不能作为书签
  4. 数据长度没有限制
  5. 参数的数据类型没有限制
  6. 支持多种编码
  7. 两个数据包，需要服务器响应100后继续发出请求之后服务器（可能）响应200
  8. 刷新或者回退 数据会重新提交

其他http方法

put

put方法跟post一样，也是用来创建或者更新资源的，但是跟post不一样的地方在于put请求是幂等的，也就是说put请求发起多次所产生的结果是跟第一个一样的；那么对于post请求，重复请求就会产生多次创建相同资源的副作用

head请求跟get请求是差不多相同的，不同的地方在于head请求没有返回体
那么head 请求通常是在发起get请求之前检查get请求返回的是什么，比如在下载文件的时候或者下载请求体的时候

delete

删除方法用来删除资源

options

是复杂请求的预检请求

发表于 更新于

趁趁趁着还不太忙，补个npm包的发布

  • 那么首先就是npm init -y初始化一个npm仓库
  • 然后touch index.js创建index文件
  • 安装chalk figlet commander这几个包，⚠️一定一定要装开发依赖！！
  • 然后coding
  • 要记得在package文件加上bin字段，value是对象，key是要在terminal运行的命令，key对应的对象是要执行的文件
  • ⚠️一定一定要记得在执行的文件的头部要加#!/usr/bin/env node(心塞，查了好久才找到)！！！
  • coding结束要用npm link本地调试一个，记住npm的repo不要定位到淘宝的去！！
  • 没有账号的记得注册，然后用npm login 登陆一下
  • npm publish，⚠️一定一定要记得改版本号！！如果publish的时候403了，maybe是你的包重名了，记得去npm上查一下你的包有没有跟别人的重了(踩坑踩的那叫一踩一个准hhh)
    Done！

发表于 更新于

https握手过程

  1. 服务端生成公私钥
  2. 服务端把公钥，加密的hash算法以及个人信息发送给CA
  3. CA把服务端发送来的明文信息用服务端发来的hash算法加密生成密文，然后用CA的私钥对密文进行加密生成签名
  4. CA把证书发还给服务端，证书内容包括签名，以及证书的颁发对象以及 颁发者等信息。
  5. 服务端把证书和明文信息一起发送给客户端
  6. 客户端接收服务端发送的证书，用内置在操作系统的公钥对签名进行解密，然后用服务端发来对hash算法对明文进行加密，如果两次生成的字符串相等，那么数据是可信的
    7.客户端与服务端经过DH加密算法生成对称密钥
  7. 用生成的对称密钥加密一段握手信息，发送给服务端。双端验证。
  8. 后续加密用生成的对称密钥加密
    阅读全文 »

发表于 更新于 分类于 ，

react 更新了
react

vue脚手架更新

vue

来玩~