很久没写外网的东西了，重新写一些自己的东西
需求：对一段html进行高亮。问题抽象：一个dom树上的所有的text-node进行多模板匹配，匹配完了之后进行高亮展示
已有方案
匹配
获取target在所有源文本中的start-end的index
高亮
把匹配出来的位置给高亮
在使用antd table组件的时候经常会遇到table的col的宽度的奇怪的表现（自适应等），开始以为是奇怪的display：flex导致的，后来发现是一个table布局的问题，因此研究table相关的表现。
table包括html table和css table，前者是table，tr，th，colgroup等组成的html元素，后者是display为table，table-row，table-header-group，table-column-group的元素。
未完待续。。。：html table的各种表现
相关阅读：
编译简介
过程：预处理-词法-文法-语意-中间代码-后端
栗子：
词法+文法：基于pegjs
ast的操作：基于babel/recast
前端中的应用
关键词：
ppt：https://lqdev.top/static/compile/assets/player/KeynoteDHTMLPlayer.html
朋友收到oa，记录一下过程和准备材料。
需要准备智商题。。需要看价值观。。需要刷题库。。感觉和国内（靠一张嘴）还是有区别的。
面经1： https://wdxtub.com/interview/14520850399925.html
oa面经： https://wdxtub.com/interview/14520850399861.html
一亩三分地amazon部分：https://www.1point3acres.com/bbs/tag-136-1.html
quora amazon oa：https://www.quora.com/What-can-I-expect-in-Amazons-SDE-online-assessment-Can-someone-who-has-taken-the-assessment-please-give-me-examples-of-the-types-of-questions-asked
结果：
最后去了头条sp（头条这么累我是不会去的，真香。。）头条一共面了4次（2过2挂），总面试论述估计有15面。。。。
面试总结：
全靠一张嘴吹逼
头条的面试总结：面了15轮还是有一定发言权利的。一二面日常算法（必有），也就是中等难度，解不出来也要说出来自己的思路。三面一般是leader面，综合考察个人能力（也包括视野，而且自己要发现自己的亮点），一般都是根据之前的东西问一下解决的过程，或者提出一个问题来让你解决。四面要么是给sp要么是前三面分歧太大，需要另一个大佬来定夺。
总体看就是基础没问题，智商没问题，努力没问题，offer就没问题了。
过程：
doc：
这个生命周期某种程度上用来替代UNSAFE_componentWillReceiveProps。另外是为了异步渲染（？）。
推荐阅读顺序：5&4，2／6，3，1
特性：
在新的生命周期情况下，一些新的pattern：
tips：
通过babel了解一下es6的class，let，const和箭头函数
class的实现方式：原型链继承的语法糖，但是es6中未提供静态变量
箭头函数如何处理this：在上文生成一个变量，和arguments：使用上文的arguments，当然箭头函数的写法也是其很重要的一部分。
let：
作用域问题：通过创建不同的变量和调用关系／通过作为函数执行时的参数实现
//测试class 和箭头函数 class A { static name = () => "liuqi"; constructor() { this.hello = "coool"; const a = () => { console.log("hello", this, arguments); }; const b = function() { console.log("hello", this, arguments); }; } } class B extends A { a = function() {}; } const b = val => { console.log(val); }; const a = x => { return () => { console.log(x); }; }; // 测试let的上下文 for (let i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, i * 1000); } for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, i * 1000); } for (var i = 0; i < 5; i++) { setTimeout(() => { console.log(i, this); }, i * 1000); } for (let i = 0; i < 5; i++) { setTimeout(() => { console.log(i); }, 1000); } if (true) { let a; if (false) { let a; let b; a = 1; } a = 2; } |
"use strict"; "use strict"; // constructor 返回值 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError( "this hasn't been initialised - super() hasn't been called" ); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } // 通过原型链进行继承 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError( "Super expression must either be null or a function, not " + typeof superClass ); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : (subClass.__proto__ = superClass); } // 类型检查 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } // 声明一个class／function var A = function A() { var _this = this, _arguments = arguments; _classCallCheck(this, A); this.hello = "coool"; var a = function a() { console.log("hello", _this, _arguments); }; var b = function b() { console.log("hello", this, arguments); }; }; // 类的静态方法 A.name = function() { return "liuqi"; }; // 类的继承 var B = (function(_A) { _inherits(B, _A); function B() { var _ref; var _temp, _this2, _ret; _classCallCheck(this, B); for ( var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++ ) { args[_key] = arguments[_key]; } return ( (_ret = ((_temp = ((_this2 = _possibleConstructorReturn( this, (_ref = B.__proto__ || Object.getPrototypeOf(B)).call.apply( _ref, [this].concat(args) ) )), _this2)), (_this2.a = function() {}), _temp)), _possibleConstructorReturn(_this2, _ret) ); } return B; })(A); var b = function b(val) { console.log(val); }; var a = function a(x) { return function() { console.log(x); }; }; // let的作用域 var _loop = function _loop(_i) { setTimeout(function() { console.log(_i); }, _i * 1000); }; for (var _i = 0; _i < 5; _i++) { _loop(_i); } for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, i * 1000); } for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i, undefined); }, i * 1000); } var _loop2 = function _loop2(_i2) { setTimeout(function() { console.log(_i2); }, 1000); }; for (var _i2 = 0; _i2 < 5; _i2++) { _loop2(_i2); } // let的作用域 if (true) { var _a = void 0; if (false) { var _a2 = void 0; var _b = void 0; _a2 = 1; } _a = 2; } |
let a = 1; console.log("1:", a); new Promise((resolve, reject) => { console.log("2:", a); resolve(1); console.log("3:", a); reject(2); console.log("4:", a); }) .then(val => { a = 2; console.log("5:", a); }) .catch(val => { a = 3; console.log("6:", a); }); console.log("7:", a); a = 4; console.log("8:", a); |
输出：
1: 1
2: 1
3: 1
4: 1
7: 1
8: 4
5: 2
分析：promise的then是异步的，promise resolve之后的状态就确定了，不能再改变了
官方文档：https://draftjs.org/docs/getting-started
awesome：https://github.com/nikgraf/awesome-draft-js
draft js plugin：https://www.draft-js-plugins.com/
example：https://draftjs-examples.herokuapp.com/
how drafjs represent rich text：https://medium.com/@rajaraodv/how-draft-js-represents-rich-text-data-eeabb5f25cf2
draft js in zhihu：https://zhuanlan.zhihu.com/p/24951621
draft js + electron：https://www.jianshu.com/p/0d22b3bf96a5
和具体业务无关
需求：
给定一些变量&常量&函数&运算符，生成一个返回一定内容和意义的表达式。
例如：
给定变量 {name: “时间1″, key:”time1″,value:”2018-01-01-00:01”}{name: “时间2″, key:”time2″,value:”2018-01-01-00:02”}，其中key指代的是进行实际运算（就像在编译器里）使用的唯一值，name用于助记
运算符 + – * / > < ( )
生成rule：
time1 > time2
在某些情况下，如果key不友好，rule 的内容可读性不好，希望有如下情况
>
和更进一步的：加入函数等表示方式及其可视化（可读性更加）的表示方式和对应的交互：
例如将一个元素拖入编辑面板，删除一个元素（整体删除），光标的移动，more（redo， undo，copy，paste）