用 JS 写游戏自动脚本是什么体验？；从promise到asycn/await；【面试高频知识点】promise的理解（通俗易懂）；TypeScript 疑难杂症；前端经典面试题(60道前端面试题包含JS、CSS、React、网络、浏览器、程序题等)；Vue自定义防抖指令；vue-router的原理；基于vueCli2发布一个vue组件的npm包
-
用 JS 写游戏自动脚本是什么体验？ 我是从写游戏脚本入的编程这行 今天翻看老照片，翻到了下面这张： 故事要从 2012 年说起，那时候我大二，梦想是去迪信通卖手机，业余爱好是捣鼓手机，就是刷系统，美化主题，逛论坛啊这些，也加了一些奇奇怪怪的 QQ 群。某天下午，看到群里有人说：“有会写自动脚本的吗？求合作，一起搞 DNF！” DNF…
-
从promise到asycn/await 在MDN中，定义promise的只有一句话：promise对象用于表示一个异步操作的最终完成（或失败），及其结果值。 从这句话的定义我们可以抓住几个关键词：promise是对象、异步操作、最终状态及结果值。 在真正了解promise是什么前，我们不得不思考，promise的出现究竟是为了解决什么问题。 背景 javascript是单线程语言：…
-
【面试高频知识点】promise的理解（通俗易懂） 前一段时间找工作，面试了大大小小十几家公司，其中也包含了腾讯、blue等知名公司。总结面试经历，发现自己还有很多不足的地方，许多知识点都知其然不知其所以然。趁着最近事比较少，会陆陆续续总结一些面试的高频知识点，提升自己知识的深度和广度。本文是系列文章之一：promise的理解。 一、何为promise，我们为何要…
-
TypeScript 疑难杂症 本文会定期更新，我遇到的觉得值得分享的 TypeScript 问题都会优先更新在 TypeScript 疑难杂症 里 ——- 别光顾着收藏，给孩子赏几个赞吧！——- 限制传入对象必须包含某些字段 用于给某个处理特定对象的函数来限制传入参数，尤其是当对象的某些字段是可选项的时候，比如说：test函数接受的参数…
-
前端经典面试题(60道前端面试题包含JS、CSS、React、网络、浏览器、程序题等)(以下所有答案仅供参考) 简答题 1、什么是防抖和节流？有什么区别？如何实现？ 参考答案 防抖 触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间 思路： 每次触发事件时都取消…
-
Vue自定义防抖指令 最近项目中经常出现由于用户多次点击导致的问题，防抖/节流使用的很多，因此，想通过vue自定义指令的方式来实现。后面有需要使用防抖的地方只要使用改指令即可。 原代码 <button @click="sayHello">提交</button> 复制代码 sayHello() { console.log(‘Hello!’) } 复制代码 我想达到的…
-
vue-router的原理 前端三大框架Vue,React,Angular,他们都是单页面应用开发的，所以利用路由的跳转非常有必要的，vue-router,react-router,angular-router都是基于前端路由原理进行封装实现的，所以我们使用起来非常方便，只会使用还不行，刚上手的小白，给他随便说两句就会使用路由， 但是我们也需要了解路由的原理，知己知彼，才能百战百…
-
基于vueCli2发布一个vue组件的npm包 这篇文章主要记录了从零发布一个vue的npm包（包含一个简单的指令和一个vue组件）的实践过程及些许心得。 初始化项目 这里我们通过@vue/cli拉取简单配置的模板来初始化一个2.X的项目，不了解的同学可以看下 vueCli3官方文档 vue init webpack-simple vue-directive-kit 初始化的项目目录如下 ├── REA…
-
如何优雅的使用javascript递归画一棵结构树 递归和尾递归 简单的说，递归就是函数自己调用自己，它做为一种算法在程序设计语言中广泛应用。其核心思想是把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解。一般来说，递归需要有边界条件、递归前进阶段和递归返回阶段。当边界条件不满足时，递归前进；当边界条件满足时，递归返回。 但是…
-
探索如何使用 JSON.stringify() 去序列化一个 Error最近在做 Node 服务端需求的时候，遇到了几次服务端报错的问题。打 log 发现均是一些 Error，但是它们都没法很好地透传给前端浏览器，出现问题只能查看服务端机器的日志，调试起来非常不方便。思考了一下，服务端…
-
用 JavaScript 实现一个简单的状态机使用状态机可以构建健壮的 UI，其好处已有详细的描述—— 例如你可以参见Edward J. Pring 的文章和 David Khourshid 的视频。 另外Krasimir Tsonev 描述了 JavaScript 中状态机的一些常用方法。一些比较流行的 Java…
-
HTTP请求之gzip压缩知多少什么是gzip压缩，gzip压缩是基于deflate中的算法进行压缩的，gzip会产生自己的数据格式，gzip压缩对于所需要压缩的文件，首先使用LZ77算法进行压缩，再对得到的结果进行huffman编码，根据实际情况判断是要用动态h…
-
【2019/09/18】前端面试 1）设计理念上的区别：Vue使用的是可变数据，而React更强调数据的不可变。所以应该说没有好坏之分，Vue更加简单，而React构建大型应用的时候更加棒 2）数据流的不同： Vue2.x 已经不鼓励组件对自己的 props 进行任何修改了。 所以现在我们只有 组件 <–> DOM 之间的双向绑定这一种。 React 从…
-
每日优鲜供应链前端团队微前端改造 我所在团队是做toB业务的，技术栈是Vue，团队目前有十多个典型的toB业务（菜单+内容布局），这些业务都是服务于一个大平台的，因为历史原因，每个业务都是独立的，都有一个html入口，所以当用户在这个大平台上使用这十多个业务的时候，每当切换系统时，页面都会刷新，体验很差；在开发层面，这十多个业务又有太多共同之…
-
学习至今的css，我掌握了什么？常见写法： translateX（<length-percentage>） //沿x方向移动一定的距离
-
webpack4知识点总结归纳 webpack 是一个现代JavaScript 应用程序的静态模块打包器(module bundler)，webpack4是webpack当前最新的主版本。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。。在我们做vue的项目时，对webpack一定不陌…
-
浅析Vue编译原理 在上一篇里，我们主要聊了下Vue数据绑定简析，明白了其观察者模式的基本原理。我们知道在观察者中有一种属于 渲染函数观察者 ( vm._watcher )，通过对渲染函数的求值计算来触发依赖收集，进而进行响应式的数据绑定，但是对于渲染函数如何编译，我们知之甚少。 这一篇我们将从 template 编译 AST 语法树， 再 generate 转…
-
理解vue-router中(router-link router-view $router $route)实现原理 关于 vue-router 实现原理的问题是非常重要的，并且经常会在面试中提问 本章简单讲解一下 vue-router 中 router-link 、 router-view 、 $router 、 $route 的实现原理 里面的注释可能会有点多，但是还是本着 走一步测一步 的原则，慢慢看，慢慢来 路由模式 说到前端路由，不得不说路由的两种模式： …
-
用 js 写卡牌游戏（四） 前言 又过了三个月，咳咳咳…… 这次我决定录一个视频，如果不想看文字的朋友，可以翻到最下面看视频，内容和文字差不多。 正文 首先来做攻击效果，也就是卡牌冲过去，再回来。这属于动画效果，我这里就不造轮子了，直接找一个现成的好用点的动画库，这里我…
-
透过现象看本质: 常见的前端架构风格和案例 所谓软件架构风格，是指描述某个特定应用领域中系统组织方式的惯用模式。架构风格定义一个词汇表和一组约束，词汇表中包含一些组件及连接器，约束则指出系统如何将构建和连接器组合起来。软件架构风格反映了领域中众多系统所共有的结构和语义特性，并指导如何将系统中的各个模块和子系统有机的结合为一个完整的系统 …
-
如何打造一个上千Star的Github项目每一个程序员都或多或少接触过Github，至少是听说过吧。而Github最大的好处是在于程序员可以不用付出任何费用，可以在上面参考、借鉴甚至是照搬其他人贡献的项目，因为这一切都是开源的。另外，任何一个Github用…
-
js实现Trie字典树实现一个 Trie (前缀树)，包含 insert, search, 和 startsWith 这三个操作。
-
JavaScript重要概念之七种继承方式 继承是面向对象软件技术当中的一个概念，与多态，封装共同为面向对象的三个基本特征。 继承可以使子类具有父类的属性和方法或者重新定义，追加属性和方法等。 方式 原型的继承 分析 由于原型链的存在，实例对象可以通过原型链向上查找属性和方法，就可以使用到原型对象的属性和方法。 实例对象和原型对象是相…
-
基于 Vue 的商品主图放大镜方案 在做电商类应用时，难免会遇到商品主图实现放大镜效果的场景，现有的基于 Vue 的第三方包不多并且无法直接复用，今天，我来分享一种高稳定性的基于 Vue 的图片放大镜方法。 实现原理 放大镜的原理用一句话概括，就是根据小图上的鼠标位置去定位大图。 图1 原理图（以2倍放大为例） 相信原理图已经画…
-
从0搭建自己的webpack开发环境（一）又一个连载来啦！这次我们将分四篇文章来介绍如何从0构建一个webpack开发环境，了解其内部机制和原理，从而让我们更准确的掌握和使用webpack，下面开始我们的起步：
-
JavaScript重要概念之this指向 解析器在调用函数时，每次都会像函数内传递进一个隐含的参数this，this指向一个对象，这个对象称为函数的上下文对象。 根据函数调用方式的不同，this会指向不同的对象。 何时确定 何时 执行上下文生命周期中的创建阶段（生成变量对象，建立作用域链，确定this指向） this的指向是在函数被调用的时候确定的 …
-
js 避免污染全局变量造成污染全局变量的原因 在经典页面中，经常会有这样的引用js {代码…} a.js {代码…} b.js {代码…} 上面定义的函数都是全局变量 这就造成了污染全局变量，那么这样有什么危害呢？ 危害 随着项目的变大，全局…
-
如何安全的运行第三方 JavaScript 代码（上）？ 在本文中，我们将为读者详细介绍如何在自己的软件中安全地运行第三方 JavaScript 代码。 最近，我们团队完成了 Figma 插件 API 的开发工作，这样第三方开发人员就可以直接在基于浏览器的设计工具中运行代码。这为第三方开发人员带来便利的同时，也给我们带来许多严峻挑战，比如，如何确保插件中运行的代码不会带…
-
解放双手-vue语法自动转typescript 代码的复用是一件很常见的事情，如果是公共代码的复用那还好说，直接做成一个内部私有库，想用的话安装一下 npm 包就行了，但是业务代码的复用就不好做成包了，一般都是复制粘贴 我一般写代码的时候，如果觉得某段业务代码以前见过其他人写过，那么考虑到业务优先性，只要别人的代码不是写得太烂，我一般会优先抄别…
-
2019大龄前端如何准备面试？ 今年毋庸置疑是找工作的寒冬，今年出来找工作的每一个同学 都是值得尊敬的。在寒冬季找工作，虽然略难，但是反过来看也会逼迫我们成为更加优秀的自己。 但是不管是旺季还是寒冬，有一些优秀的同学找工作还是挺顺利的。所以说还是得提高我们自己的硬实力。 今年前端很明显一个变化就是前端面试里除了基础知识 也添加了…
-
前端唯一标识那些事儿 在做聊天模块的时候，最初的消息唯一标识是msgId，在业务量小的情况下是可以满足需求的，毫秒级的唯一冲突是很难出现的。但是当用户量上升之后，时间戳的这种方案显然不行。因此需要引入一种新的前端生成唯一标识的方案。 除了时间戳之外，我在公司的其他前端项目中，发现一些其他的前端唯一性标识实现，因此在这里做一…
-
使用 Node.js 在深度学习中做图片预处理最近在做一个和对象识别相关的项目，由于团队内技术栈偏向 JavaScript，在已经用 Python 和 Tensorflow 搭建好了对象识别服务器后，为了不再增加团队成员维护成本，所以尽可能将训练和识别之外的任务交给 Node.js…
-
纯前端音乐播放器，极简demo：[链接]项目地址：[链接] 数据来源于咪咕音乐
-
换个角度就很好深入理解的js继承 有个小伙子找到我，问我说：“我看了好多遍继承、原型链，但是感觉还是没懂” 我说：“你有儿子你就懂了” 复制代码 目录 前言 什么是Prototype 什么是原型链 基础结构 晋升机构 进阶结构 官方结构 NEW操作符 END 前言 最近在整理生活的过程中，遇到了几个问题，我身边的大多数人是…
-
基于Vue的轮播组件Vue-Awesome-Swiper Swiper是一个开源、免费、强大的触摸滑动插件。Vue-Awesome-Swiper是一个基于 Swiper4 和Vue 的轮播组件，Vue-Awesome-Swiper也支持服务端渲染和单页应用。下面雷雪松给大家介绍一下Vue的轮播组件Vue-Awesome-Swiper。 1、Vue-Awesome-Swiper安装 npm install vue-awesome-swiper 2、Vue-Awesome-Swiper…
-
Vue实战—如何实现商家页面（15）这篇我们来实现商家页面 搭建文件结构 现在我们需要来搭建项目的html模板： {代码…} 我们通过vue的特殊特性ref引用了DOM元素seller类。以便我们用BScroll。 address-wrapper类用来存放商家地址，与电话图标。 p…
-
前端学习笔记（十三）v-modelv-ifv-elsev-showv-forv-bind—-简写: :class=”qq”、:type=”text”v-on—-简写: @click=”qq”
-
JS数据结构与算法系列-字符串 在工作中，作为前端的我们或多或少会遇到字符串的处理，这个系列就带领大家一起学习这些字符串的操作思路和代码实现。 替换空格 1.题目描述: 请实现一个函数，把字符串中的每个空格替换成"%20"。 例如输入“We are happy.”，则输出“We%20are%20happy.”。 2.解题思路: 第一种是正则表达式：直接使用正则表…
-
探索 TypeScript + Jest 开源项目的自动化测试（上）最近在做一个采用 TypeScript 语言编写的项目，测试库选择了 Jest。我跟着 Jest 文档完成了入门教程后依然不知道从何开始，主要是有以下几个问题：
-
前端工程化：构建、部署、灰度 优秀的技术方案很多，大部分时候我们感觉只是在现有技术方案里面做排列组合、求笛卡尔积、选择最优解，做出一个最适合当前项目的方案。未来，人类应该编写最核心的业务代码、设置规则，由云端和AI来根据当前项目情况自动选择和调整到最优的架构和方案。 前言 前端项目的工程化，不只对开发层面的组件化、模…
-
js中有关this指向问题 this是在函数在被调用的时候才发生的绑定，即this具体指向什么，在于函数是怎么调用的，而非函数自身，也非函数的词法作用域 this的四种绑定（优先级从低到高） 默认绑定 隐士绑定 显示绑定 new 绑定 默认绑定 没有其他绑定规则时存在的默认规则即默认绑定 function foo(){ console.log(this.a) } v…
-
「前端发动机」深入 React hooks — 3 分钟搞定 useStateReact Hooks的基本用法，官方文档 已经非常详细。本文的目的，是想通过一个简单的例子详细分析一些令人疑惑的问题及其背后的原因。这是系列的第一篇，主要讲解 useState。
-
关于js内存回收机制及内存泄漏的可能原因 JS的垃圾回收机制是为了以防内存泄漏，内存泄漏的含义就是当已经不需要某块内存时这块内存还存在着，垃圾回收机制就是间歇的不定期的寻找到不再使用的变量，并释放掉它们所指向的内存。 C#、Java、JavaScript有自动垃圾回收机制，但c++和c就没有垃圾回收机制，也许是因为垃圾回收机制必须由一种平台来实现。在JS中，JS…
-
javascript面向对象编程学习(一) 在 javascript 中，函数可以有属性。 每个函数都有一个特殊的属性叫作原型（ prototype ） ①所有引用类型都有一个__proto__(隐式原型)属性，属性值是一个普通的对象 ②所有函数都有一个prototype(原型)属性，属性值是一个普通的对象 ③所有引用类型的__proto__属性指向它构造函数的prototype var b = {} b._…
-
Vue Composition API 响应式包装对象原理 上一篇文章 Vue 3.0 最新进展，Composition API 中，笔者通过描述Vue Composition API 的最新修正，本文通过解析 @vue/composition-api 的响应式原理部分代码，以便在解读学习过程中，加深对 Vue Composition API 的理解。 如果读者对 Vue Composition API 还不太熟悉，建议在阅读本文之前先了解 Vue 3.0 即将带来…
-
【React技术栈】从零开始手写reduxRedux 是 JavaScript 状态容器，提供可预测化的状态管理。Redux 除了和 React 一起用外，还支持其它界面库。Redux 体小精悍，仅有 2KB。这里我们需要明确一点：Redux 和 React 之间，没有强绑定的关系。本文旨在…
-
息息相关的 JS 同步，异步和事件轮询JS 是一门单线程的编程语言，这就意味着一个时间里只能处理一件事，也就是说JS引擎一次只能在一个线程里处理一条语句。
-
初探React中函数组件和类组件的差异 自从React Hooks的出来，社区讨论Hooks的越来越多。这并不是说React Hooks就优于类组件，但是使用Hooks来构建组件时有一个巨大的可用性提升，特别是因为这些函数组件可以通过React Hooks中的钩子函数来访问状态和生命周期。 今天我们就来一起聊聊如何将React的类组件转换为函数组件，用React Hooks中的钩子函数替换类…
-
WebViewJavascriptBridge源码探秘（上）这个方法写的很清晰，把要调用的js的函数名handlerName，参数data，和回调方法的Id(callbackId)打包到一个字典对象message中。callbackId，每个回调一个，唯一。为什么用callbackId，因为block本身是一个对象这个…
-
ECMAScript/Javascript AST（Abstract Syntax Tree，抽象语法树）在计算机科学中，抽象语法树（Abstract Syntax Tree, AST），是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。之所以说语法是“抽象”的，是因为…
-
GitHub 很早就提供 GraphQL API 了，还不学习它就 Out 了 欢迎各位 Gophers ！在本教程中，我们将探索如何使用 Go 和 GraphQL 服务进行交互。在本教程完结之时，我们希望你可以了解到以下内容： GraphQL 的基础知识 使用 Go 构建一个简易的 GraphQL 服务 基于 GraphQL 执行一些基本的查询 …
-
探究JS V8引擎下的“数组”底层实现 今天在学习JS的数组时，发现JS的数组可以存放不同类型的元素、并且数组长度是可变的。what？？这跟我之前接触的数组不一样啊。数据结构中定义的数组都是定长的、数据类型一致的存储结构。JS中的数组竟然如此特殊，这也是为什么标题中数组二字加上了“”的原因。带着一脸的懵逼，打开搜索引擎，一探究竟。 目录： 什么…
-
Halo，Babel 本文基于 babel 7 做叙述，如果之前一直使用 babel 6 的同学可以先看本文关于 babel 6 升级 babel 7 的相关模块 Babel 是如何工作的呢？ Babel 的编译过程可以分为三个阶段： 解析（Parsing）：将代码字符串解析成抽象语法树。 转换（Transformation）：对抽象语法树进行转换操作。 生成（Code Generati…
-
「2019 Google IO 大会」面向Web开发人员的WebAssembly （上） 这是一个由 simviso 团队对2019 Google I/O 大会中关于 面向Web开发人员的WebAssembly 相关话题进行翻译的文档，内容并非直译，其中有一些是译者自身的思考。Surma是Google公司WEB基础的贡献者，也是open web平台的开发倡导者。 视频地址： 面向Web开发人员的WebAssembly 2019 Google I/O 上 视频翻译版权归 sim…
-
5 分钟理解 Spring Boot 响应式的核心 Reactor 一、前言 关于 响应式 Reactive，前面的两篇文章谈了不少概念，基本都离不开下面两点： 响应式编程是面向流的、异步化的开发方式 响应式是非常通用的概念，无论在前端领域、还是实时流、离线处理场景中都是适用的。 有兴趣的朋友可以看看这…
-
如何架构一个中后台项目的前端部分（webpack 配置篇） （点击上方公众号，可快速关注） 文/劳卜 阅读本文需要 3.1 分钟这是劳卜的第 32 篇 原创文章 前言 上篇文章：如何架构一个中后台项目的前端部分（技术选型篇） 当我们的前端项目完成了技术选型阶段后，接下来所要做的便是项目的构建和配置。 虽然说用脚手架能够帮…
-
webpack中clean-webpack-plugin插件使用遇到的问题及解决方法 webpack 会生成文件，然后将这些文件放置在 /dist 文件夹中，但是 webpack 无法追踪到哪些文件是实际在项目中用到的。 通常，在每次构建前清理 /dist 文件夹，是比较推荐的做法，因此只会生成用到的文件。 clean-webpack-plugin 是一个比较普及的管理插件，安装方法如下： npm install clean-webpa…
-
vue面试题之二：路由 vue-router 面试题 mvvm即Model-View-ViewModel，mvvm的设计原理是基于mvc的 MVVM是Model-View-ViewModel的缩写，Model代表数据模型负责业务逻辑和数据封装，View代表UI组件负责界面和显示，ViewModel监听模型数据的改变和控制视图行为，处理用户交互，简单来说就是通过双向数据绑定把View层和Model层连接起来。在MVVM架构下，View和Model…
-
Vuex 从使用到原理分析（下篇） 该系列分为上中下三篇： Vuex 从使用到原理分析（上篇） ：介绍 Vuex，以及 Vuex 的几种常见写法； Vuex 从使用到原理分析（中篇） ：分析 Vuex 的初始化以及模块获取安装； Vuex 从使用到原理分析（下篇） ：分析 Vuex 和 Store 中的一些方法包括辅助函数； 在前面我们还没有分析 store …
前端日报栏目数据来自码农头条，每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等，为开发者提供动力，如果觉得内容对你有用，记得分享给你的小伙伴。进入码农头条查看更多
