秋泽雨

未分类

electron 集成redux

安装react-redux
1
yarn add react-redux redux -D

未分类

基础准备

https: http://showme.codes/2017-02-20/understand-https/
（1）使用对称加密内容，并且只有自己知道。–>怎么做到即能使用对称加密算法，又不公开密钥？
（2）每个人连接的时候使用不同的加密算法，采用随机数。–>用户怎么知道不同的加密算法。
（3）给用户做协商，告诉用户使用的算法。–>协商过程被劫持怎么办。
（4）加密加密协商过程。–> 如果使用对称加密，又回到鸡生蛋蛋生鸡的问题了。
(5) 非对称加密协商过程，不让别人知道。–> 私钥加的密，公钥都能解，公钥加的密，只有私钥能解。保证客户到服务端的安全。
(6) 如何得到公钥？-> 服务端发送给客户或者客户发请求，不行，中间人拦截，所以得用三方机构数字签名啥的。
(7) 要达到Web服务器针对每个客户端使用不同的对称加密算法，同时，我们也不能让第三者知道这个对称加密算法是什么，怎么办？
(8) 使用随机数，就是使用随机数来生成对称加密算法。这样就可以做到服务器和客户端每次交互都是新的加密算法、只有在交互的那一该才确定加密算法。
amd cmd :https://www.cnblogs.com/zhoulujun/p/9415407.html

（1）commonjs 一个脚本文件就是一个模块
（2）commonjs是值拷贝，拷贝后如果值改变了则不变，es6是动态引用，变了也会变。https://zhuanlan.zhihu.com/p/33843378
（3）es6静态编译，commonjs执行时加载
（4）es6import提前。
（5）引入的模块都不会重复执行
（6）cmd是浏览器端的同步 commonjs是服务端的

react + redux
- react 原理、虚拟dom、reactdom原理
- diff原理
- react 生命周期
- react 合成事件原理
- react diff算法，key的作用，setData的机制，事件合成
- rudux 基本使用和理解
- mobx 基本使用和理解
2. javascript
- 前端做并发请求控制
做一个5个的控制，哪个执行完了就去数组里取。
- 闭包
- Jsonp跨域，js原型继承 & 原型链，promise
- eventLoop https://segmentfault.com/a/1190000016278115?utm_source=tag-newest
- bind函数运行结果 –> 其实就是用apply call这些方法，吧参数处理下就好。所以最后函数say里的this的值还是由第一次绑定时的参数决定
- 继承、组合
- 原型链
- 实现一个bind函数
- ==的隐式转化，隐式转换，会问为什么这样
- argument是数组吗，如果不是怎么变为数组
- requestAnimationFrame 和 setTime、setInterval的区别，requestAnimationFrame 可以做什么
- html meta标签有啥作用
- cookie 结构有什么字段
- deepClone
- 回流重绘
- canvas
- 前端缓存、会话机制
3. css
- 布局
- css 为什么要放在头部
- bfc 块级格式化上下文
- css实现正方形div水平垂直居中
- 正方形实现、三角形实现
- 伪类
- 实现布局header,content,footer，上中下布局；当content 超出窗口可视区，不显示footer；当content 没超出可视区时，固定footer 在最下面
- 宽是高的一半的垂直居中，里面有字体也要垂直居中类数组
4. 计算机基础
- https 协议的过程
- https 获取加密密钥的过程
- http握手原理
- http 请求都包含哪些字段
- http 请求幂等性

算法
- 排序算法
- 二叉树遍历
- 二叉树路径总和（leetcode 112）
- js 单线程、宏任务与微任务的执行顺序
node
- Process.nextTick, setImmediate, promise.then, pronise
- nodejs 事件循环
基础能力
- csrf/xss 攻击原理
es6
- es6 箭头函数
- import 和 require
- symbol
- promise async settimeout先后次序
- 怎么将一个异步方法promise化，以及实现promise.all()方法
- Promise / setTimeout 的执行顺序；实际考察知识点：对「事件队列 / 宏任务 / 微任务」的了解
- 什么是闭包
electron
- 主进程和渲染进程
- 为什么有主进程和渲染进程
- remote模块原理
- Electron环境
- Electron ipc 还没有看

待完成：
算法、ipc的文章、mobx

阅读剩下更多

未分类

typescript-注解

秋泽雨发表于 2019-12-05 标签： typescript

装饰器

Typescript和Es6引入了类的概念，也有类装饰器这样的东西，ts已作为试验性特性予以支持。

ps: 文档：https://www.w3cschool.cn/typescript/typescript-decorators.html
操练场：https://www.typescriptlang.org/play/index.html?experimentalDecorators=true#code/

装饰器工厂

function color(value: string) { // 这是一个装饰器工厂
    return function (target) { //  这是装饰器,target属于被装饰对象
        // do something with "target" and "value"...
    }
}

装饰器特点

多个装饰器可以同时应用到同一个声明上（1. 由上至下依次对装饰器表达式求值。2.求值的结果会被当作函数，由下至上依次调用。）

类装饰器

装饰在类身上的，可以监控类的属性变化，或者给类注入属性,例如一下例子，我们为这个类增加了工具方法来打日志，从而对日志这个方法进行一个总控制。

装饰器参数：为类的构造函数本身。

  function log(value: string) { 
      return function (constructor: Function) { 
          console.log('run when load this js');
          constructor.prototype.logInfo = function (message: string) {
              console.log(`log-${value}`, message);
          }
      }
  }
  @log('info')
  class Greeter {
      greeting: string;
      constructor(message: string) {
          this.greeting = message;
      }
      greet() {
          console.log('greet');
          return "Hello, " + this.greeting;
      }
  }

  const greeter = new Greeter('1');
  greeter.greet();
  greeter.logInfo('今天天气不错');

---- 运行结果入下

  console:10 run when load this js
  console:21 greet
  console:12 log-info 今天天气不错

方法装饰器

可以在执行方法前后切面做一些事情AOP
参数：
对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
成员的名字。
成员的属性描述符。

有个问题不是很理解：为什么装饰器重写方法后返回target[propertyKey]或者target就可以覆盖原方法。

 // aop 写法可以控制方法前后
 function log(value: string) { 
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) { 
      // console.log('params:', target, propertyKey, descriptor);
        const origin = target[propertyKey];
      // aop
      target[propertyKey] = function(...args: any[]) {
          console.log('before method run')
          let result = origin.apply(this, args)
          console.log('after method run')
          return result;
      }
      return target[propertyKey];
    }
}
class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    @log('info')
    greet() {
        console.log('greet');
        return "Hello, " + this.greeting;
    }
}

const greeter = new Greeter('1');
greeter.greet();

----------------- 直接写，切在方法前

 function log(value: string) { 
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) { 
        console.log('before run ');
    }
  }
  class Greeter {
      greeting: string;
      constructor(message: string) {
          this.greeting = message;
      }
      @log('info')
      greet() {
          console.log('greet');
          return "Hello, " + this.greeting;
      }
  }

  const greeter = new Greeter('1');
  greeter.greet();

属性装饰器

修饰属性的, 主要作用是给属性注入值，不用构造函数传递

参数：
对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
成员的名字。

function injectValue (target: any, propertyKey: string) {
          console.log('target:',target, propertyKey)
          console.log(target[propertyKey]);
          target[propertyKey] = 'xixi';
      }
class Greeter {
      @injectValue
      public greeting: string;
      constructor(message: string) {
        //   this.greeting = message;
      }
      greet() {
          console.log('greet：', this.greeting);
          return "Hello, " + this.greeting;
      }
  }

  const greeter = new Greeter('pikun');
  greeter.greet();

参数装饰器

阅读剩下更多

未分类

VSCODE-typings

秋泽雨发表于 2019-11-30 标签： typings

1	yarn add typings --global

阅读剩下更多

vscode

VSCODE-amd

秋泽雨发表于 2019-11-30 标签： vscode

阅读剩下更多

未分类

javascript eventloop

秋泽雨发表于 2019-11-26 标签：

Event Loop

event loop 是一种执行机制，应对不同场景的执行方案模型。不同的js执行环境尤其不同的事件轮询。

浏览器宏队列和微队列

宏队列，macrotask，也叫tasks。
- setTimeout
- setInterval
- setImmediate (Node独有)
- requestAnimationFrame (浏览器独有)
- I/O
- UI rendering (浏览器独有)
微队列，microtask，也叫jobs。
- process.nextTick (Node独有)
- Promise
- Object.observe
- MutationObserver
执行顺序: 先执行同步、在执行微队列、微队列没有之后执行宏队列，执行中可以一直往微队列中放任务到末尾，会有上限。

Node 事件循环

会分为6个阶段，每个阶段执行完毕，会去执行微队列中的任务，6个阶段如下:
- timers：执行setTimeout() 和 setInterval()中到期的callback。
- I/O callbacks：上一轮循环中有少数的I/Ocallback会被延迟到这一轮的这一阶段执行
- idle, prepare：队列的移动，仅内部使用
- poll：
  (1) 计算需要为新的I/O事件等待多久
  如果队列为空且不存在setImmediate与就绪的timer，Node.js会在这里block一定的时间等待新的I/O事件到来，立即执行其回调。这种情况具体block等待多久是不具体的，但如果在block一定时间后仍没有新到达的I/O事件，可以肯定循环依旧会进入check阶段或者回到timer阶段。
  (2) 处理该阶段队列中的事件
  当进入poll阶段，如果队列不为空且没有就绪的timer，Node.js会在这里执行队列中的callback直到队列为空或者执行的callback数达到系统设定的某个值。随后Node.js检查是否存在预设的setImmediate，存在话就进入check阶段，否则开始检查timer就绪情况选择回到timer阶段或者进入check阶段
- check：执行setImmediate的callback
- close callbacks：执行close事件的callback，例如socket.on(“close”,func)

阅读剩下更多

模块化学习

commonjs es6 cmd amd

秋泽雨发表于 2019-11-25 标签： amd / commonjs / es6

背景

时常接触到模块化，amd，cmd这些东西，但从来没认真去看过，去了解过，糊里糊涂的，这次就想把整个研究透彻。

CommonJS

CommonJS定义的模块分为：
- 模块引用(require)
- 模块输出(exports)
- 模块标识(module)
CommonJS 是一个更偏向于服务端的规范, 是同步加载模块。
CommonJS的一个模块就是一个脚本文件。require命令第一次加载该脚本时就会执行整个脚本，然后在内存中生成一个对象。
1
2
3
4
5
6
{
id: '...',
exports: { ... },
loaded: true,
...
}
为什么不适合浏览器
由于CommonJS是同步加载模块，这对于服务器端不是一个问题，因为所有的模块都放在本地硬盘。等待模块时间就是硬盘读取文件时间，很小。
但是，对于浏览器而言，它需要从服务器加载模块，涉及到网速，代理等原因，一旦等待时间过长，浏览器处于”假死”状态。
所以在浏览器端，不适合于CommonJS规范。所以在浏览器端又出现了一个规范—AMD(AMD是RequireJs在推广过程中对模块定义的规范化产出)。

AMD （AMD是”Asynchronous Module Definition”的缩写，即”异步模块定义”）

特点:
- 它采用异步方式加载模块，模块的加载不影响它后面语句的运行。
- AMD也采用require命令加载模块: require([module], callback)

阅读剩下更多

未分类

prepare for the other place

秋泽雨发表于 2019-11-23 标签：

react + redux
- react 原理、虚拟dom、reactdom原理
- redux 基本组成和设计单向数据流
- diff原理
- react 生命周期
- react 合成事件原理
- react diff算法，key的作用，setData的机制，事件合成
- React Fiber原理以及为什么componentWillRecievedProps会废弃
javascript
- amd、cmd，commonjs, es6
  1. amd
    - 异步加载机制: Asynchronous Moudle Definition
- 前端做并发请求控制
- Jsonp跨域，js原型继承 & 原型链，promise
- fetcch 取消
- eventLoop
- instanceof
- bind函数运行结果
- 继承、组合
- prototype 继承的实现
- 实现一个bind函数
- ==的隐式转化，隐式转换，会问为什么这样
- argument是数组吗，如果不是怎么变为数组
- requestAnimationFrame 和 setTime、setInterval的区别，requestAnimationFrame 可以做什么
- html meta标签有啥作用
- cookie 结构有什么字段
- deepClone
- 回流重绘
- canvas
- 前端缓存、会话机制
- 测试单测、集成测试
css
- 布局
- css 为什么要放在头部
- bfc 块级格式化上下文
- css实现正方形div水平垂直居中
- 正方形实现、三角形实现
- 伪类
- 实现布局header,content,footer，上中下布局；当content 超出窗口可视区，不显示footer；当content 没超出可视区时，固定footer 在最下面
- 宽是高的一半的垂直居中，里面有字体也要垂直居中类数组
计算机基础
- https 协议的过程
- https 获取加密密钥的过程
- http握手原理
- http 请求都包含哪些字段
- http 请求幂等性
算法
- 排序算法
- 二叉树遍历
- 二叉树路径总和（leetcode 112)
- js 单线程、宏任务与微任务的执行顺序
node
- Process.nextTick, setImmediate, promise.then, pronise
- nodejs 事件循环
- node 网关
基础能力
- 正则表达式
- 获取页面所有img并且下载
- 两个同源tab之间的交互，数据同步
- 实现布局header,content,footer，上中下布局；当content 超出窗口可视区，不显示footer；当content 没超出可视区时，固定footer 在最下面
- csrf/xss 攻击原理
es6
- es6 箭头函数
- import 和 require
- symbol
- promise async settimeout先后次序
- 怎么将一个异步方法promise化，以及实现promise.all()方法
- Promise / setTimeout 的执行顺序；实际考察知识点：对「事件队列 / 宏任务 / 微任务」的了解
- 什么是闭包

阅读剩下更多

未分类

树

秋泽雨发表于 2019-11-03 标签：

二叉查找树

是TreeSet、TreeMap实现的基础
树的术语
- 没有子节点的节点叫做树叶
- 具有相同父亲节点的叫做兄弟
- 深度：从根到某一节点的唯一路径的长。
- 长：是指改路径上的边的个数
- 高：是从某一节点到树叶的最长路径的长。
- 树的高度等于根节点的高度。
- 先序遍历：根左右
- 后序遍历: 叶左右（先访问左叶至上，再右叶至上，至根）
- 中序遍历: 左，节点，右。
树的基本节点:
1
2
3
4
5
class TreeNode {
Object element;
TreeNode firstChild;
TreeNode nextSibling;
}
二叉树
1. 特点
  - 二叉树是一种树，其中每个节点不能多于2个儿子。
  - 性质：一颗平均二叉树的深度要比节点个数N小得多。
  - 平均深度O(sqrt(N))
  - 特殊的二叉树：二叉查找树,其深度（O(logN)）
节点实现
1
2
3
4
5
class TreeNode {
Object element;
TreeNode left;
TreeNode right;
}
二叉查找树
1. 性质：节点左侧所有项均小于节点，右侧所有项均大于节点。
AVL 树
1. AVL树是一种高度平衡的平衡二叉树，树中的任意节点的左右子树的高度之差不超过1。

阅读剩下更多

未分类

vscode存在问题

秋泽雨发表于 2019-10-29 标签：

代码问题

目前合并xigua-master分支冲突较多，不知道是不是上次自动同步更新源码=导致的，因此目前还在开发分支上。
目前发布后，分支并未合并：win：browser-release-win-01 mac: browser-release-mac-01, 原因是彼此还有部分异同，需要考虑如何处理。
大家代码并未有review，存在比较多的不合理之处。
python代码提示插件200M还未移出去。

发布流程问题

打包windows32，不能再windows32上去打,因为gulp 原因，内存不足。现在需要在32位电脑打包node_modules， 64位上打包发布。
版本号、发版路径等配置均靠人工，易出错。
打包过程繁琐：比如打包前yarn build 浏览器js，然后再gulp vscode 的js ，最后electron-builder生成应用。
测试包与正式包不为同一个，无法真实模拟线上环境。
Electron webGL问题，导致windows包和mac包需要用到不同版本的Electron，但考虑到vscode源码的难以降级，因此有windows临时包。

浏览器体验问题

浏览器启动会白屏比较久的时间，体验非常不好。
vscode 加载的时候默认会有难看的主题样式，非常不好。

功能性问题

导出应用功能还未实现。

阅读剩下更多

最近动态

electron-redux

electron 集成redux

for-interv

基础准备

typescript-注解

装饰器

装饰器工厂

装饰器特点

类装饰器

方法装饰器

属性装饰器

参数装饰器

VSCODE-typings

VSCODE-amd

javascript eventloop

Event Loop

浏览器宏队列和微队列

Node 事件循环

commonjs es6 cmd amd

背景

CommonJS

AMD （AMD是”Asynchronous Module Definition”的缩写，即”异步模块定义”）

prepare for the other place

树

二叉查找树

二叉树

二叉查找树

AVL 树

vscode存在问题

代码问题

发布流程问题

浏览器体验问题

功能性问题