blog
blog copied to clipboard
wuxianqiang
博客系列
node中inherits实现原理 ```js function inherits(ctor, superCtor) { ctor.super_ = superCtor; Object.setPrototypeOf(ctor.prototype, superCtor.prototype); } ``` ```js const util = require('util'); const EventEmitter = require('events'); function MyStream() { EventEmitter.call(this); } util.inherits(MyStream, EventEmitter); ```
```html 1 1 1 let _events = [] function delegate(parentElement) { function on(selector, eventType, fn) { function handler(e) { let el = e.target while (!el.matches(selector)) { if (parentElement === el)...
法一 绝对定位与负边距实现 利用绝对定位，将元素的top和left属性都设为50%，再利用margin边距，将元素回拉它本身高宽的一半，实现垂直居中。 法二 绝对定位与margin ```html .wrapper { width: 100%; height: 500px; background: pink; position: relative; } .box { width: 20px; height: 20px; background: red; position: absolute; left: 0; top:...
单线程模型指的是，JavaScript 只在一个线程上运行。也就是说，JavaScript 同时只能执行一个任务，其他任务都必须在后面排队等待。 注意，JavaScript 只在一个线程上运行，不代表 JavaScript 引擎只有一个线程。事实上，JavaScript 引擎有多个线程，单个脚本只能在一个线程上运行（称为主线程），其他线程都是在后台配合。 JavaScript 之所以采用单线程，而不是多线程，跟历史有关系。JavaScript 从诞生起就是单线程，原因是不想让浏览器变得太复杂，因为多线程需要共享资源、且有可能修改彼此的运行结果，对于一种网页脚本语言来说，这就太复杂了。如果 JavaScript 同时有两个线程，一个线程在网页 DOM 节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？是不是还要有锁机制？所以，为了避免复杂性，JavaScript 一开始就是单线程，这已经成了这门语言的核心特征，将来也不会改变。 这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段 JavaScript 代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。JavaScript 语言本身并不慢，慢的是读写外部数据，比如等待 Ajax 请求返回结果。这个时候，如果对方服务器迟迟没有响应，或者网络不通畅，就会导致脚本的长时间停滞。 如果排队是因为计算量大，CPU 忙不过来，倒也算了，但是很多时候 CPU 是闲着的，因为 IO 操作（输入输出）很慢（比如 Ajax 操作从网络读取数据），不得不等着结果出来，再往下执行。JavaScript...
随着 JavaScript 单页应用开发日趋复杂，JavaScript 需要管理太多的 state （状态）。 这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据，也包括 UI 状态，如激活的路由，被选中的标签，是否显示加载动效或者分页器等等。 管理不断变化的 state 非常困难。如果一个 model 的变化会引起另一个 model 变化，那么当 view 变化时，就可能引起对应 model 以及另一个 model 的变化，依次地，可能会引起另一个 view 的变化。直至你搞不清楚到底发生了什么。state 在什么时候，由于什么原因，如何变化已然不受控制。当系统变得错综复杂的时候，想重现问题或者添加新功能就会变得举步维艰。 通过限制更新发生的时间和方式，Redux 试图让 state...
[规范的文档说明](https://segmentfault.com/a/1190000002452115) 1. 第一步实现简单调用，成功调用resolve，失败调用reject，参数传入then的回调函数中。 ```js function Promise (executor) { let self = this; self.status = 'pending'; self.value = undefined; self.reason = undefined; function resolve (value) { self.value = value self.status =...
## Provider ```js import React, { Component } from 'react'; import ReduxContext from './context' export default class Provider extends Component { render() { return ( {this.props.children} ); } } ```...
如何避免向下传递回调？ ## React 我们已经发现大部分人并不喜欢在组件树的每一层手动传递回调。尽管这种写法更明确，但这给人感觉像错综复杂的管道工程一样麻烦。 在大型的组件树中，我们推荐的替代方案是通过 context 用 useReducer 往下传一个 `dispatch` 函数： ```js const TodosDispatch = React.createContext(null); function TodosApp() { // 提示：`dispatch` 不会在重新渲染之间变化 const [todos, dispatch] = useReducer(todosReducer); return ( );...
虽然疫情让这个环境变得额外清凉，但是要找工作的人依然没有放慢脚步，下面准备了几个常见的面试问题，并给出了回答的思路，也许可以帮到你。 ### 你为什么从上一家公司离职？ 正确师范： > 原则：客观陈述，保持语气，不涉及抱怨，不进行诋毁，表达感恩。 比如：其实上一份工作老板对我很好（表示感恩），但公司在一直在走下坡（客观陈述），我尝试过努力去改变（表达进取心）。而贵司在行业内非常有知名度（表示羡慕），听闻培训体系很健全（表示自己爱学习），所以……总之，我对全公司还是很感恩的，他们培养了我。 ### 你有什么要问我的吗？ 一、工作本身 这份工作是做什么，我去了会做哪些事情？（了解工作基本信息） 这个项目做多久了，目前在哪个阶段，后续的规划是什么？（看看自己是不是有机会） 二、团队构成 团队的人数多少，以及如何划分组成的？（和上面的第二个问题目的类似，看看自己机会） 团队如何培养人才的，比如针对个人的成长路径是什么样的？（看看团队会给自己什么的帮助） 三、领导能力 给团队/项目的定位是什么，如何判断一个事情是做还是不做，有没有不做的例子？（看看领导的判断力） 规划是如何制定和落地的？（看看领导的做事风格） 和其他业务有冲突的时候，如何处理的？有没有别人拉了你，最终把业务怼回去的例子？（如果一直怼不回去，那可能要么是事情做的一团糟，要么是领导太老好人了。） ### 你的职业规划是什么？ 每次面试，总监以上的面试官、HR都会问一个问题：你对未来的规划，或是目标是什么。这个问题往往都会难住我，没有一个明确的目标。今天又想了想，也许真正的答案是： 我的职业没有明确的目标，我只是很享受工作的过程，工作中不断去挑战和解决问题，享受一个个问题被自己解决后的快感，享受自已经历了每件事情后内心变得越来越自信，思想越来越富友。就像人的一生，最美的风景不是在终点，而是在旅途。假如职业是我的旅途，那么我旅途的方向是什么。我想，应该是追求价值创造的最大性价比。 ### 先自我介绍一下你自己？ 我叫某某某，是一名高级前端开发，热爱新技术，3年大型网站的前端经验。负责过多个核心项目，类型涉及：技术迁移与性能优化、开发脚手架与通用组件、页面重构与改版、开发者平台与数据中心、H5；有简单带人经验。有个人博客和一些简单开源项目。 > 最后祝福正在找工作的小伙伴早日拿到自己心仪的offer！！！
如果没有create-react-app，我们应该如何构建项目呢？今天让我们一起通过自己的方式打包react项目吧！ 第一步创建文件 ``` mkdir react-boiler-plate cd react-boiler-plate ``` 然后初始化npm ``` npm init -y ``` 然后准备一个这样的目录结构 ``` build public src package.json ``` 开始安装依赖了 ```js npm i react react-dom npm i webpack...