weixin_37722222的博客

什么是 PWA先说一下全名，progressive web app： 渐进式网页应用。这是谷歌推出的，我是这样理解的： 我们一般写 web 应用，在 pc 上是没有缓存的，打开页面的时去请求数据。 第二个也没有像 app 一样的小图标放在桌面，一点开就进入了应用，而是通过打开浏览器输入网址， 第三个就是，不能像 app 一样给用户推送消息，像微博会跟你推送说有谁评论了...

什么是迭代器(Iterator)？满足迭代器协议的对象。迭代器协议: 对象的next方法是一个无参函数，它返回一个对象，该对象拥有done和value两个属性：done(boolean): 如果迭代器已经经过了被迭代序列时为true。这时value可能描述了该迭代器的返回值。 如果迭代器可以产生序列中的下一个值，则为false。这等效于连同done属性也不指定。 valu...

　寄生组合式继承，是集寄生式继承和组合继承的有点与一身，主要是通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。　　先看一个例子： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 functioninheritPrototype(...

闭包属于一种特殊的作用域，称为 静态作用域。它的定义可以理解为: 父函数被销毁 的情况下，返回出的子函数的[[scope]]中仍然保留着父级的单变量对象和作用域链，因此可以继续访问到父级的变量对象，这样的函数称为闭包。 闭包会产生一个很经典的问题: 多个子函数的[[scope]]都是同时指向父级，是完全共享的。因此当父级的变量对象被修改时，所有子函数都受到影响。 解决: 变...

引言最近笔者和小伙伴在研究Vue SSR，但是市面上充斥了太多的从0到1的文章，对大家理解这其中的原理帮助并不是很大，因此，本文将从Vue SSR的构建流程、运行流程、SSR的特点和利弊这几方面对Vue SSR有一个较为详细的介绍。最后还将附上一个笔者实现的去除Vue全家桶的Demo案例。剖析构建流程首先我们镇上一张官网给出的构建图：Vue SSR构建流程app.js入口文...

场景：混合开发,web调用原生登录页面，API如图：web端代码：// 以7、调用原生登录页面为例子function jumpCallbackHandler(result){ // 拿到result，做接下来的事情}// 给native端传递的参数var params = { "category":"jump", "des":"login", "params"...

var TemplateEngine = function(tpl, data) { // magic here ...}var template = '<p>Hello, my name is <%name%>. I\'m <%age%> years old.</p>';console.log(TemplateEngine(temp...

Array.prototype.selfReduce = function () { const ary = this const { length } = ary const callback = arguments[0] // 如果有初始值，从数组的第0项开始循环，如果没有初始值，...

1.原型链继承 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 functionParent () { this.name ='kevin'; } Parent.protot...

本文主要涉及三种跨域方法：JSONP、CORS、postMessage。Q：为什么会出现跨域问题？A：出于浏览器的同源策略限制，浏览器会拒绝跨域请求。*注：严格的说，浏览器并不是拒绝所有的跨域请求，实际上拒绝的是跨域的读操作。浏览器的同源限制策略是这样执行的：通常浏览器允许进行跨域写操作（Cross-origin writes），如链接，重定向； 通常浏览器允许跨域资源嵌入（Cro...

前言现代web应用的飞速发展，特别是数据驱动思想指导下的React、vue等框架的出现，让我们越来越需要关注数据的组织管理。随着应用复杂度的提升，如果不对数据进行有效合理的设计拆分，那么从性能、可维护性等方面来看会逐渐成为一种阻碍。所以我们需要关注前端数据设计。其实没有一种很明确的规范告诉我们具体到前端的数据结构应该如何去设计。关系数据库设计有很多范式，借鉴而不照搬结合前端自身特点，才是好...

1.前端组件库的设计原则1.1 细粒度的考量我们在学习设计模式的时候会遇到很多种设计原则,其中一个设计原则就是单一职责原则,在组件库的开发中同样适用,我们原则上一个组件只专注一件事情,单一职责的组件的好处很明显,由于职责单一就可以最大可能性地复用组件,但是这也带来一个问题,过度单一职责的组件也可能会导致过度抽象,造成组件库的碎片化。举个例子，一个自动完成组件(AutoComplete)...

Promise 的常用 API 如下：Promise.resolve(value)类方法，该方法返回一个以 value 值解析后的 Promise 对象 1、如果这个值是个 thenable（即带有 then 方法），返回的 Promise 对象会“跟随”这个 thenable 的对象，采用它的最终状态（指 resolved/rejected/pending/settled）2、如果传入...

什么是柯里化（ curry）在数学和计算机科学中，柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。举例来说，一个接收3个参数的普通函数，在进行柯里化后， 柯里化版本的函数接收一个参数并返回接收下一个参数的函数， 该函数返回一个接收第三个参数的函数。 最后一个函数在接收第三个参数后， 将之前接收到的三个参数应用于原普通函数中，并返回最终结果。// 数学和计算科...

Hot Module Replacement（以下简称 HMR）是 webpack 发展至今引入的最令人兴奋的特性之一 ，当你对代码进行修改并保存后，webpack 将对代码重新打包，并将新的模块发送到浏览器端，浏览器通过新的模块替换老的模块，这样在不刷新浏览器的前提下就能够对应用进行更新。例如，在开发 Web 页面过程中，当你点击按钮，出现一个弹窗的时候，发现弹窗标题没有对齐，这时候你修改 CS...

将代码字符串解析成抽象语法树，即所谓的 AST 对 AST 进行处理，在这个阶段可以对 ES6 代码进行相应转换，即转成 ES5 代码 根据处理后的 AST 再生成代码字符串...

Javascript就像一台精妙运作的机器，我们可以用它来完成一切天马行空的构思。我们对javascript生态了如指掌，却常忽视javascript本身。这台机器，究竟是哪些零部件在支持着它运行？AST在日常业务中也许很难涉及到，但当你不止于想做一个工程师，而想做工程师的工程师，写出vue、react之类的大型框架，或类似webpack、vue-cli前端自动化的工具，或者有批量修改源码...

身份认证服务端提供资源给客户端，但是某些资源是有条件的。所以服务端要能够识别请求者的身份，然后再判断所请求的资源是否可以给请求者。token是一种身份验证的机制，初始时用户提交账号数据给服务端，服务端采用一定的策略生成一个字符串（token），token字符串中包含了少量的用户信息，并且有一定的期限。服务端会把token字符串传给客户端，客户端保存token字符串，并在接下来的请求中带上这...

前言在JavaScript中，document对象有很多属性，其中有3个与对网页的请求有关的属性，它们分别是URL、domain和referrer。URL属性包含页面完整的URL，domain属性中只包含页面的域名，而referrer属性中则保存着链接到当前页面的那个页面的URL。前面两个很好理解，而referrer属性简单来说就是上一个页面的URL。那么这个属性具体有什么用处呢？在H5页...

先来试个一句话解释仨，当浏览器碰到script脚本的时候： <script src="script.js"></script> 没有defer或async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该script标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。 <script async src...

在DOM事件对象中有两个属性总是时不时的困扰我，就是target和currentTarget，有时候很迷惑分不清两者的区别，因此有必要把这两个属性好好梳理一下，加深理解，以便日后的查询。MDN中对target的解释为，一个触发事件的对象的引用， 当事件处理程序在事件的冒泡或捕获阶段被调用时。而对于currentTarget，它指的是当事件遍历DOM时，标识事件的当前目标。它总是引用事件处理程序...

script标签用于加载脚本与执行脚本，在前端开发中可以说是非常重要的标签了。直接使用script脚本的话，html会按照顺序来加载并执行脚本，在脚本加载&执行的过程中，会阻塞后续的DOM渲染。现在大家习惯于在页面中引用各种的第三方脚本，如果第三方服务商出现了一些小问题，比如延迟之类的，就会使得页面白屏。好在script提供了两种方式来解决上述问题，async和defer，这两...

浏览器的渲染过程： Create/Update DOM And request css/image/js：浏览器请求到HTML代码后，在生成DOM的最开始阶段（应该是 Bytes → characters 后），并行发起css、图片、js的请求，无论他们是否在HEAD里。注意：发起 js 文件的下载 request 并不需要 DOM 处理到那个 script 节点，比如：简单的正则匹配就能做...

通常：避免使用 eval() 和 new Function() 。动态运行代码不但速度较慢，还有潜在的安全风险。一般都可以找到更好地替代方案。避免使用eval和new Function的确是降低XSS攻击的风险之一，注意是“之一”，不是全部方法，导致XSS攻击的漏洞很多，都需要堵。XSS，也就是Cross Site Scripting，说到底就是网站存在漏洞，在浏览器端执行由用户决定的sc...

使用 JavaScript 开发的时候，很多开发者多多少少会被 this 的指向搞蒙圈，但是实际上，关于 this 的指向，记住最核心的一句话：哪个对象调用函数，函数里面的this指向哪个对象。下面分几种情况谈论下1、普通函数调用这个情况没特殊意外，就是指向全局对象-window。let username='cn'function fn(){ alert(this.us...

关于面向对象和面向过程，个人觉得这两者不是绝对独立的，而是相互相成的关系。至于什么时候用面向对象，什么时候用面向过程，具体情况，具体分析。面向对象： 猫.吃(鱼)面向过程： 吃.(猫,鱼)代码实现方面：//面向对象//定义人（姓名）let People=function(name){ this.name=name;}//动作People.prototype={...