Hibop.github.io
Hibop.github.io copied to clipboard
Hibop
Hibop 个人博客
> eslint是一个开源的JavaScript代码检查工具，作者Nicholas C. Zakas（大名鼎鼎的“红宝书”《JavaScript高级程序设计》作者 ）。eslint就是用来统一JavaScript代码风格的工具： - **支持ES6、JSX、 Angular、Style、React、Vue**等等； - **统一代码风格，减少review成本和低级错误的出现**： 开发环境中，开发者每次修改代码，都会先用eslint检查代码，再进行babel和react的编译，减少了我们花费在review代码风格上的时间，降低了低级bug的出现。 - 插件（plugin）和扩展（extend）丰富： - react ===> jsx和react 这两个插件 - "extends": "eslint:recommended" - "extends": "airbnb" (airbnb 的规则) ### 环境配置： 1. 引入[eslint基础包](https://github.com/eslint/eslint?spm=a2c4e.11153940.blogcont66559.16.51207ac5WehpTR)：...
## npm获取配置有6种方式，优先级由高到底 1. 命令行参数。 --proxy http://server:port即将proxy的值设为http://server:port。 2. 环境变量。 以npm_config_为前缀的环境变量将会被认为是npm的配置属性。如设置proxy可以加入这样的环境变量npm_config_proxy=http://server:port。 3. 用户配置文件。可以通过npm config get userconfig查看文件路径。如果是mac系统的话默认路径就是$HOME/.npmrc。 4. 全局配置文件。可以通过npm config get globalconfig查看文件路径。mac系统的默认路径是/usr/local/etc/npmrc。 5. 内置配置文件。安装npm的目录下的.npmrc文件。 6. 默认配置。 npm本身有默认配置参数，如果以上5条都没设置，则npm会使用默认配置参数。 ## npm镜像设置： ### 常用镜像：  ```...
## 渲染器与协调器 **渲染器**： 将 Virtual DOM 渲染成特定平台下真实 DOM 的工具 > 渲染器函数： Render = (vDom, container) => Dom 分两个阶段： - mount： 初始化挂载init。 旧的 VNode 不存在，则直接将新的 VNode 挂载成全新的 DOM，这个过程叫做 mount。 - path：...
# 前端性能优化梳理 四个方面考虑：静态资源缓存 >>> 请求优化 [请求量 压缩 + 速度 ssr ] >>> 编译时优化 >>> 运行渲染时优化 ### 网络优化： - webview： - webview缓存 - 超webview（hybrid） ### webview缓存 - 资源缓存： 1. http缓存： url缓存，强缓存、协商缓存、cdn缓存...
> TOC ``` Functional programming is a programming paradigm 1.treats computation as the evaluation of mathematical functions 2.avoids changing-state and mutable data by wikipedia ``` 三个要点： **编程范式**，**类数学函数**， **避免数据和状态改变** 编程范式从概念上来讲指的是编程的基本风格和典范模式。 换句话说其实就是程序员对于如何使用编程来解决问题的**世界观和方法论**。...
## 目录提要 > 发布-订阅（观察者）模式：What-How-Why > 实现一个EventBus > Vue中发布-订阅模式的实践 - 响应式原理（源码） - Vue的事件机理 ## 什么是发布订阅模式 发布-订阅模式也叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 在 javascript 开发中,我们一般用事件模型来替代传统的发布-订阅模式.  使用场合： 当一个对象的改变需要同时改变其它对象，并且它不知道具体有多少对象需要改变的时候，就应该考虑使用观察者模式   ## 为什么使用观察者模式——优缺点 优点： 支持简单的广播通信，自动通知所有已经订阅过的对象； 页面载入后发布者很容易与订阅者存在一种动态关联，增加了灵活性； 发布者与订阅者之间的抽象耦合关系能够单独扩展以及重用。 不足:...
### 1. react为什么要使用JSX，什么是JSX？ ### 2. 什么是虚拟DOM，怎样理解虚拟DOM？ ### 3. React是怎样渲染的，渲染机制, 初始化渲染和更新渲染？ ### 4. Diff算法怎么理解？ ### 5. setState之异步理解？ - this.setState({count:2}) // 常见 - **返回对象的回调**: this.setState((state, props) => { }) - **异步set** :...
## 涉及知识点 - ArrayBuffer: 只是申请内存长度，不能操作， 需要TypedArray 或者DataView 浏览器传输数据默认 - TypedArray： Int8Array, Uint8Array.... 可以设置每个位置的charCode - Blob: - File - blobURL || DataURL ### Q1： 后端返回的下载流，前端做pdf预览 > 因为涉及到类型转换；responseType 设置为原始的流类型arraybuffer, 不可让浏览器自动转换成 json或者blob; application/octet-stream...
## 目录 ## DOM-FileUpload 对象 在网页上传文件，最核心元素就是这个HTML DOM的`FileUpload对象`——`input[type="file"]`。 ```html ``` 在 HTML 文档中该标签每出现一次，一个 FileUpload 对象就会被创建。 - 该标签包含一个按钮，用来打开文件选择对话框 - 一段文字显示选中的文件名或提示没有文件被选中。 把这个标签放在``标签内，设置form的action为服务器目标上传地址，并`点击submit按钮`或通过`JS调用form的submit()方法`就可以实现最简单的文件上传。 这样就完成功能吗？没错。但是你要是敢提交这样的代码，估计脸要被打肿。这个面临N多问题： > - **作为一个爱美和创造美好界面的前端，怎么能忍受如此朴素的造型的上传组件**： > - **这样上传完是会刷新页面的，思考下为什么？** > - **别人"酷炫吊炸天"拖拽上传、图片预览、图片截取、保存本地都是怎么完成的？** >...
## Q： - 浏览器与服务器建立一个TCP连接后，是否会在完成一个http请求后断开？什么条件下会断开？ - 一个TCP连接可以同时发送几个HTTP请求？ - 浏览器http请求的并发性是如何体现的？并发请求的数量有没有限制？ - 总：： 从 URL 在浏览器被被输入到页面展现的过程中发生了什么？ - 展开：：网页中的图片资源为什么分放在不同的域名下？ #### 一、浏览器与服务器建立一个TCP连接后，是否会在完成一个http请求后断开？什么条件下会断开？ 在 HTTP/1.0 中，一个服务器在发送完一个 HTTP 响应后，会断开 TCP 链接。但是这样每次请求都会重新建立和断开 TCP 连接，代价过大。所以虽然标准中没有设定，某些服务器对 Connection: keep-alive 的 Header...