不同浏览器下 autoplay 的限制策略和方案的整理 PC 端浏览器的限制策略 和 应对方案 使用 Mac 在 PC 端测试的浏览器包括 Chrome 浏览器 Safari 浏览器 Firefox 浏览器 Chrome 浏览器 Chrome-限制策略 内容参考自 [链接] [链接] 2018 年 4 月份发布的 Chrome 66 正式关掉了声音自动播放 静音自动播放总是允许的。 在下列...

8张图让你一步步看清 async/await 和 promise 的执行顺序 为什么写这篇文章？ 测试一下自己有没有必要看 需要具备的前置基础知识 主要内容 对于async await的理解 画图一步步看清宏任务、微任务的执行过程 为什么写这篇文章？ 说实话，关于js的异步执行顺序，宏任务、微任务这些，或者async/await这些慨念已经有非常多的...

移动端IOS遇到的兼容性问题 和 Mac联机调试方法 有时候遇到一些移动端「疑难杂症」，因为移动端不方便调试，可能找不到问题点，所以经常需要电脑端和移动端联机调试，这个联机方法记录一下。 平时的移动端业务开发中，到最后总会发现一些IOS兼容性问题，这里就把自己遇到的问题记下来，避免将来再踩坑吧 Mac联机调试移动...

7 种 Javascript 常用设计模式学习笔记 由于 JS 或者前端的场景限制，并不是 23 种设计模式都常用。 有的是没有使用场景，有的模式使用场景非常少，所以只是列举 7 个常见的模式 本文的脉络： 设计与模式 5 大设计原则 7 种常见的设计模式 一句话解释含义 列举生活中的场景 、 业务代码场景 js 代码演示 设计与模式 之前...

Promise实现思路的个人理解 我一直觉得Promise虽然方便，但是它的写法很怪，无法理解实现Promise的人是如何思考的。 不过最近我对于实现Promise的思考过程的有了一点点个人理解，特此记下。 感觉这篇文章我还是没有把思路说清楚，时间紧张，就当做一次记录，回头我要把这个过程在表达的在清楚一点。 用例 {代码...} 我觉...

《Javascript数据结构和算法》笔记-「字典和散列表」 集合、字典、散列表存储的都是「不重复」的数据结构 集合：我们更关注每一个元素的值，并把其作为主要元素 字典：我们用[键,值]的形式来存储数据 散列表： 跟字典类似，也会是用[键,值]的形式来存储数据 但是「字典」和「散列表」的实现方式略有不同。 字典 字典也称...

读书笔记-JavaScript实现「集合」 目标 学习如何创建集合，添加、移除值、搜索是否存在 学习如何做并集、交集、差集的数据操作 学习如何使用 ES6 的 Set 类 集合是无顺序、不重复的的项组成的数据结构。与数学中的有限集合是通过一个概念 ES6 原生的 Set 就是「集合」，原生的 Map 就是「字典」 6.2 实现与 ES6 的 Set ...

JavaScript-链表 《Javascript数据结构与算法》第五章 5.1 链表数据结构 链表不同与数组 数组要插入或者移入一个元素的成本很高，因为所有元素都需要移动位置。 链表插入或者移动一个元素时很高效，因为并不需要移动其他的元素位置。 链表存储元素的方式，在内存中不是有顺序的，每一个元素由 1.存储元素本身的节点 2.指...

vue源码-对于「计算属性」的理解 这是我最近学习vue源码的一个个人总结和理解，所以可能并不适合每一位读者 本文的整体脉络如下，首先尽可能去掉细节，对计算属性源码的大致实现有一个了解，然后举一例子，分别谈谈计算属性依赖收集和派发更新的流程。 计算属性的源码实现 举例来说，谈谈页面初次渲染时，整个依赖收集的...

微信公众号授权 通过「内网穿透」实现本地调试 最近开发公众号，遇到一个很郁闷的问题，这个可以结合我的另一篇微信授权的文章看。 就是微信授权之后，遇到bug需要调试代码，打印log都需要提交到线上的测试服务器才能看到结果。 这是由于微信授权流程中的后端回跳到前端的那个地址必须是线上地址。 这就导致授权之后，每...

vue 源码自问自答-响应式原理 最近看了 Vue 源码和源码分析类的文章,感觉明白了很多，但是仔细想想却说不出个所以然。 所以打算把自己掌握的知识，试着组织成自己的语言表达出来 不打算平铺直叙的写清楚 vue 源码的前因后果和全部细节，而是以自问自答的形式，回答我自己之前的疑惑， 如果有错误的地方，欢迎指正哈~ Vue...

业务中前后端分离下的微信授权流程记录 这个是微信授权的流程 [链接] [链接] 我觉得微信的文档授权流程还算清晰易懂，可是不太清楚具体是哪部分前端做，哪部分后端做 导致在业务中，折腾了不少时间，特此记录一下业务实践。 第一步，当进入需要授权的页面时，「前端」向「微信」发起授权请求，前端需要提供redirect_uri...

腾讯地图WebService API 和 CORB的误会 最近业务开发中，涉及到了腾讯地图API 、 跨域 、 CORB。虽然最后的结果方法很简单， 但是觉得这个解决问题的过程，还是值得记录一下的。 业务内容如下： 1.我根据JS-SDK，配置好后端返回的签名、随机字符串、时间戳、appId，然后使用wx.getLocation拿到经纬度 （签名是根据这4个...

业务开发中的调试方法总结 这段时间，接触了单元测试，同时业务中遇到了一些需要排错调试的情况，就把自己的经验做个小结。 3种调试方法 狼叔说，常见的三种调试的境界 初级: 打log 中级: 打断点 高级: 测试驱动开发 工作2年，这三种调试方法也算都接触过了，当然这是狼叔的看法，在我看来这几种调试方式，就说一下我认...

Vue的slot-scope的场景的个人理解 这篇文章不是单纯把文档的话和api拿来翻译和演示，而是谈谈我对于slot-scope的使用场景的个人理解，如果理解错误，欢迎讨论！ Vue的插槽slot，分为3种 匿名插槽 具名插槽 作用域插槽 前两种很好理解，无论就是子组件里定义一个slot占位符，父组件调用时，在slot对应的位置填充模板就好...

webpack4 的生产环境优化 webpack4完整配置的可以参考： [链接] 本文主要介绍了 webpack4 生产环境我都做了哪些优化 文章的结构如下： 1.静态资源路径。 2.hash 缓存。 3.代码分割。 4.压缩混淆代码。 5.开启 gzip 压缩。 6.关闭 devtool。 7.Tree Shaking 1.静态资源路径。对静态资源路径的处理和验证 静态资源包括: js...

webpack4 的开发环境配置说明 完整的webpack4的配置clone地址： [链接] 开发环境的搭建，总体而言就比较轻松，因为用户就是开发者们。 你不需要考虑 hash 是否稳定、代码提取是否正常。 只要你自己能够开发、并且觉得开发体验 ok，那么你这个配置就是靠谱的。 这篇文章主要是以我自己搭建 vue + webpack 的开发为例子，...

Vue官方推荐的风格指南-个人笔记 最近刚注意到vue官方多了一个vue风格指南的推荐。 因为业务中一直用的vue，所以梳理学习一下，来增加自己代码的规范性，效果不错也可以安利到团队。 文档没有对JS或者HTML风格做约束，而是仅仅针对vue代码做了分类推荐。 一共按照优先级分4类： 优先级A：必要的。为了规避错误，这种代码...

Promise.all()返回值 : 当所有异步都执行完后,promise.all的状态才变成fulfilled,返回一个各个结果组成的数组

为啥我要自己实现一个new语法糖？ 为什么要自己实现一个new语法糖呢? 因为之前对于JS里的new语法糖一直是理论理解,但是并亲自尝试实现过。 直到有一天,在头条的面试中 我聊high了,摸着自己的良心说: 我可以实现一个new语法糖! 面试官: 嗯,那你实现一个吧。 我: ...咱要不聊点别的？ 步骤1: 观察new做了哪些事? 先随便用...

理顺8个版本vue的区别 一共8个版本的vue 一共8个vue版本,都是用在什么情况下的? 默认会用的哪个vue版本,vue-cli里用的哪个版本? 如何指定使用哪个版本的vue? 不急,从2个维度去理解这8个版本。 根据是否需要编译器分为: 运行时版本 和 完整版 根据这个vue代码用在什么地方: 分为UMD / CommonJS / ES Module 【运行时版本...

一次搞清楚移动端这几个坑爹的单位慨念 目录: 一、让坑爹的单位,不再坑爹 二、需要准备什么样的设计稿 三、rem方案的原理和细节 高清屏上,位图的处理 高清屏上,关于border: 1px的处理 移动端屏幕的自动适配的处理 移动端屏幕上字体大小的处理 一、让坑爹的单位,不再坑爹 移动端适配本身不难,但是因为涉及到单位转换,想要...

整理4种Vue组件通信方式 重点是梳理了前两个,父子组件通信和eventBus通信,我觉得Vue文档里的说明还是有一些简易,我自己第一遍是没看明白。 父子组件的通信 非父子组件的eventBus通信 利用本地缓存实现组件通信 Vuex通信 第一种通信方式:父子组件通信 父组件向子组件传递数据 父组件一共需要做4件事 1.import son from '....

提高代码可读性,掌握这些就够了 今天看到一篇关于代码优化的文章,写得十分实用,在学习总结后,梳理出思维结构图,将收货的分享一下 原作者:方应杭 原文地址:[链接] 注意:这篇文章所指的代码优化,特指的是代码可读性方面的一些写法优化,而不是指的性能优化。 下面是我总结的一份思维导图,方便形成对文章内容结构的一个大致...

一篇文章彻底说清JS的深拷贝and浅拷贝 这篇文章的受众 第一类,业务需要,急需知道如何深拷贝JS对象的开发者。 第二类,希望扎实JS基础,将来好去面试官前秀操作的好学者。 写给第一类读者 你只需要一行黑科技代码就可以实现深拷贝 {代码...} 别着急走,利用window.JSON的方法做深拷贝存在2个缺点: 如果你的对象里有函数,函数...

深入理解JS引擎的执行机制 1.灵魂三问 : JS为什么是单线程的? 为什么需要异步? 单线程又是如何实现异步的呢? 2.JS中的event loop(1) 3.JS中的event loop(2) 4.说说setTimeout 首先,请牢记2点: (1) JS是单线程语言 (2) JS的Event Loop是JS的执行机制。深入了解JS的执行,就等于深入了解JS里的event loop 1.灵魂三问 : JS为...

JS面向对象之五 【继承】 我们已经准备了很多前置知识,包括 原型链,对象和对象之间的关系 this,对象和函数之间的关系 new, 用函数批量创建特定的对象的语法糖 JS面向对象的前世今生 我们说,面向对象是一种写代码的套路。因为如果满足 封装、继承、多态就是面向对象的话,那JS天生就有这3个特点。 那我们JS搞的这个面向对...

JS面向对象之四 【new】 (创建特定对象的语法糖) 个人学习笔记分享 为了讲清楚面向对象,实际上是需要几个前置知识的。包括前面的几篇文章【原型链】 【this】 和今天要说的【new】 还是先说结论: new只是一个语法糖,这个语法糖被设计出来,使用场景是批量创建对象 从场景说起: 假设这个世界没有new,我们如何批量创建一百...

JS面向对象之三【this】 (对象和函数之间的关系) 上一篇,谈了对象和对象的关系,现在我们谈谈对象和函数的关系 先说结论,也就是观点1 观点1: JS里函数和对象没有关系,JS之父通过this将他们强行关联起来 首先我们根据场景,去理解this的出现可以解决什么问题。 {代码...} 现在我们不用this,我们就只能这样调方法obj.sayName...

JS面向对象之二 【原型链】(对象和对象之间的关系) 注意这个系列文章,要经常站在JS之父的视角去思考。 牢记我们的需求,我要在JS没有class的情况下,那么利用JS现有的东西,搞出类似class的东西。 回一下JS有什么? 有7种数据类型: 6个基本数据类型 : string number boolean null undefined symbol 1个引用类型 : obj (你需...