Blog
Blog copied to clipboard
pekonchan
# 何为闭包 1）官方一点说，**能够读取其他函数内部的局部变量的函数**，即为闭包。 抓住几个点： - 它自身是个函数 - 访问其他函数，即非自身函数内 - 局部变量 2）从表现上来认识： 一个函数A里定义了另一个函数B，B读取了A的局部变量 3）从**特性**上去认识：函数内定义的局部变量，会随着函数的执行完毕而被销毁，内存被回收。但是在闭包存在的情况下，局部变量被闭包函数引用，因此没有被立即销毁，还能被访问到，直到闭包不被引用，才回收内存。 ``` function example() { var a = 1; return function () { console.log(a); } } var test...
### 前言 基本上面试问Promise首先会问你很简单的一句，“你了解过Promise吗” 这是时候只要你把我下面“是什么”的说明理解好了就足够了。但是假设面试官追问下去，你要对他的一些方法要有理解。 ### 是什么 Promise是解决异步编程的一种方案。以前我们处理异步操作，一般都是通过回调函数来处理，典型的例子就好像使用`setTimeout`一样，如果执行操作函数里面还有`setTimeout`，一层一层往下，都有的话。那么代码看起来十分臃肿，不利于维护，也很容易写出bug。 而Promise的出现，能够让异步编程变得更加可观，把异步操作按照同步操作的流程表达出来，避免层层嵌套的回调函数。 Promise对象有三种状态，进行中`pending`、完成成功`fulfilled`、失败`rejected`，顾名思义，表示这个异步操作是进行中还是成功还是失败了。 Promise的状态一旦确定了，就不会再更改了，这就是promise（承诺）的由来吧，承诺状态确定了就是确定了。 然而Promise还是有不足的地方： 1. 如果没有执行捕获错误的函数（如下述说的catch，then的第二个参数），则Promise内部发生的错误（虽然会报错但）是无法传递到Promise外部代码上的，因此外部脚本并不会因为错误而导致不继续执行下去。 2. 一旦新建了，就无法中断它的操作。不像`setTimeout`那样，我还可以使用`clearTimeout`取消掉。 ### 创建 promise是一种对象类型，即可通过`new Promise()`来创建一个promise实例对象。 ``` let promise1 = new Promise((resolve, reject) => { if (xxx)...
**未经允许，请勿私自转载** # 前言 关于chrome extension的开发经验总结或说明文档等资料很多，很多人在写，然而，我也是一员。但是，也许这篇文章，可能给你一些不一样的感受。 **这里介绍的是80%你要开发扩展会碰到的问题** **前面部分**大多数是一些基础介绍，和别人的资料大同小异，但是用的是通俗的语言或者我自己理解来描述的，不是拷贝官方的描述，不然的话，你干脆看官方文档就好啦，干嘛还来我这里折腾对吧，也许这些通俗的描述，更方便你理解（当然不排除也会有官方的话语） **后面部分**多为一些我在项目中总结的方法，这部分就是在别人的资料可能看不到的地方了，当然，这些方法也许不通用，因为毕竟是基于我项目里的，但是尽量总结一套方法出来。 废话不多说，咱们开始吧... ------------------------------------ # 目录 - WHAT - 最基本组成 - manifest.json - background script - content script - popup - 基础的通信机制 - content...
**未经允许，请勿私自转载** ## 前言 我的前言都是**良心话**，还是姑且看一下吧： 别人一看这个标题，心想，“怎么又是一个老到掉牙的需求，网上一搜一大堆解决方案啦！”。没错！这个需求实在老土得不能再老土了，我真不想写这样一种需求的文章，无奈！无奈！ 现实的情况是我想这么旧的需求网上资料一大把一大把，虽然我知道网上资料可能有坑，但是我总不信找不到一篇好的全面的资料的。然而现实又是一次啪啪的打脸，我是没找到，而且很多资料都是一个拷贝一个，质量参差不齐，想必很多找资料的人也深有体会 为了让别人不再走我的老路，特此写了此篇文章和大家**分享** 我不能说我写的文章质量杠杠滴。但是我会在这里，**客观地指出我方案的缺点**，不忽悠别人。 写该文章的**目的**只有两个： - 让缺乏这方面经验的人能够信手拈来一个较为全面的方案，对自己对公司相对负责，别qa提很多bug啦（我也是这么过来，纯粹想帮助小白） - 让更有能力的人，补充完善我的方案，或者借鉴我的经验，造出更强更全面的方案，当然，我也希望能让我学习一下就最好了。 ## 目录 - 需求 - 一个最简单的方案 - 超简单处理 - 简单处理二 - 缺点 - 利用DOM节点高亮（基础版） - splitText -...
**未经允许，请勿私自转载** ## 前言 这是个老掉牙的需求啦，不过仍然有很多人在网上找解决方案，特别是搜索结果排名靠前的那些，都是些只会介绍兼容性不好的使用`-webkit-line-clamp `的方案。 如果你看到这篇文章，可能代表你正是从那么多千篇一律的文章中跳转过来的，想找更好地方案的。那恭喜你，没有更好的，只有更合不合适的，当然，前提是我的文章流量够多，能被顶上去你才有机会看到。 > 这里介绍三种多行文本截断的方法，当然第一种就是你看到想吐的`-webkit-line-clamp `方案，不想看就直接跳到第二种方法开始看啦。 ## 使用-webkit-line-clamp 对多行文本的容器应用如下样式 ``` div { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; } ``` 除了`-webkit-line-clamp`其他属性固定不变，主要是将对象作为弹性伸缩盒子模型显示，并设置伸缩盒对象的子元素的排列方式。 而`-webkit-line-clamp`是用来控制多少行进行省略 ### 优点： -...
## 前言 从历往经验来看，开发一个新项目，往往在刚开始部署项目，到项目的正式交付，以及交付后的后续维护，功能增强等过程，都需要对项目的一些已有结构和逻辑进行调整。 因此，如果有些内容刚建项目时不考虑好未来的可扩展性，后续调整会很麻烦。 这里先来说，在vue项目中，如何写路由配置，更利于未来可扩展。 ## vue-router的基本配置 为了方便新学者的阅读与理解。先来看一下最基本的路由是如何配置的 ```js // 0. 导入Vue和VueRouter脚本，如果使用模块化机制编程，要调用 Vue.use(VueRouter) // 1. 定义 (路由) 组件。 // 可以从其他文件 import 进来 const Foo = { template: 'foo' } const...
## 前言 关于axios取消请求的文章和资料不胜其数。大部分都是单独介绍 *切换路由时取消上个页面尚未完成的请求* 或者 *取消重复请求* 的文章，且大部分是介绍了核心的内容，缺乏关于一整套完整的方案的描述。 此文章介绍这么一套完整方案，即可满足**切换路由取消指定请求**与**取消重复请求**，并附带一些其他小干货处理 ## 请求拦截 关于axios取消请求，官方文档也有简单描述到使用方法，基础方法我这里不赘述，直接写方案。 思路： > 用一个变量存储目前处于pending状态的请求，用一个标识表明。拦截发送请求，判断这个api请求之前是否已经有还在pending的同类，即是否存在上述变量中，如果存在，则取消处理，不存在就正常发送，等请求完结后删除这个api请求在上述变量中的标识，这是一个完整的处理取消重复请求的流程。 > 而对于切换了路由（页面），要取消上个页面仍然pending的请求，就需要监听路由切换，每次切换都对上述变量存储的请求标识做判断，哪些是要取消的请求，就给取消掉即可。这里并没有对所有处于pending状态的请求做取消处理，原因是，系统中可能有些请求是不必要由于切换路由就要取消的，如全局的一些请求等。当然，这个也可以延伸一下，用于你实际项目需求，指定哪些所需要取消。 关于请求效果的设置，我习惯单独一个文件http.js，代码注释一步一步写得很清楚，大家看下去就自然很好理解了。 ```javascript // http.js import axios from 'axios'; // 用于存储目前状态为pending的请求标识信息 let pendingRequest = [];...
### 是什么 我们都知道js是单线程运行，那么在单线程进程中具体如果执行js的脚本，你或许还不清晰，那么该文章你就得看下去了。 js脚本（任务）的执行遵循一个机制：event loop，中文称为“事件循环”吧。顾名思义，表示的是周而复始不断循环执行任务事件的一个过程机制 这个机制主要是为了实现如何在js单线程运行的大背景下实现异步，避免出现脚本阻塞的情况。 在说明这个机制之前，我们先了解一下基础的概念，方便之后的理解 #### 任务的区分 ##### 同步与异步任务 我们知道任务可以划分为同步任务和异步任务，我这里不说具体标准的定义，通俗说一下其意思。 同步任务：能马上被执行的，按照一定顺序依次被执行的任务 异步任务：等到一定触发时机发生了，才会被执行对应的操作，并不是马上就执行 ##### 宏任务与微任务 - macro-task（宏任务）： 整体的script、setTimeout、setInterval、I/O、ui渲染、setImmediate（[用法参考](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setImmediate)） 以上脚本操作产生的是宏任务，可能有些资料把宏任务称呼为`task` - micro-task（微任务）： Promise的方法，如then等、process.nextTick(Node.js)、MutationObserve（[用法参考](http://javascript.ruanyifeng.com/dom/mutationobserver.html)） 注意，在微任务中，`process.nextTick`的触发顺序会比其他微任务要先执行 以上脚本操作产生的是微任务 ### 任务执行流程 js是单线程运行的，只有一个进程在执行着脚本任务，即主线程，那什么任务才会进入主线程呢，这是由一个叫`call stack`（调用栈/执行栈）的家伙来处理的。 从宏观上看，`event...
### 概念 利用冒泡机制实现对元素的时间处理程序。即，把对该元素要进行的事件处理，利用冒泡机制，将其处理程序绑定到（委派）祖先级（一般为父级）上进行执行。 要理解事件委派，先掌握两个概念—— 捕获与冒泡 ### 捕获与冒泡 假设我们点击页面上的一个元素，这个过程会存在捕获和冒泡阶段。 #### 捕获阶段 从祖先元素一级一级地遍历到点击的元素所在节点的过程，叫捕获阶段。其所经历的元素都会触发点击事件（因为这里是以'click'事件为例子） #### 冒泡阶段 在捕获结束后已经落在了所点击元素的节点了，接着跟着原来捕获的过程**反向**遍历。其所经历的元素都会触发点击事件（因为这里是以'click'事件为例子） 举个例子吧 例如你点的元素的层级结构是这样的： ``` body > div > span ``` 那么捕获阶段的过程就是按照上述结构的顺序，而冒泡的顺序就是这样 ``` span > div > body...
## 前言 上一篇 [npm入门（一）—了解基本组成与概念](https://juejin.im/post/5c765b5de51d453eec65973f) 简单介绍了一下npm的相关知识，这篇可以说是npm的核心知识。 ## 分类 关于pacakge，是有分为public pacakge（公共包）、private pacakge（私有包）。前面我们也知道npm账号也有两种，一直的免费用户，一个是付费用户。私有包是付费用户才能发布的。 直观地，在npn website上看，package前面会有个标签标注该包是公有的还是私有的  ### scopes 在此之前，我们先了解这么一个概念——scopes（中文意思是作用域）。我们在注册npm账号和创建组织时，你将被授予一个与你的用户或组织名称匹配的范围，即你获得了一个适用范围（scope），这个范围是你的用户名或者创建的组织名。你可以将此范围用作相关包的命名空间。如你有一个package名叫`mypackage`，你的用户名为`myusername`，则你可以把这个package放到你的域里 ``` @myusername/mypackage ``` 这样有什么作用呢？ 1. 避免与别人的包重名，发生冲突。 2. 限制该包的访问权限。假设你是付费用户，想要创建一个私有包，那么可以在你的域里授权哪些用户才能访问 ### public package 默认地，如果我们不对registry进行了任何设置，那么发布的包就是基于默认的registry（`http://registry.npmjs.org `）的，发布出来的包是公共的，任何人都可以访问使用。 public...