新版vue-router的hooks用法；Javascript异步详解（三）-Generator；如何提升 Webpack 打包速度；转行学前端的第 59 天 : 了解 BOM location 对象相关；Vue组件为什么data必须是一个函数？；迟来的前端面经；使用 Vue Cli 实现多页应用；Vue 3 响应式原理及实现
-
虽然Vue 3还没有正式发布，但是热爱新技术的我早已按捺不住自己的内心，开始尝试在小项目中使用它了。 根据这篇 《今日凌晨Vue3 beta版震撼发布，竟然公开支持脚手架项目！》 我搭建了一个Vue 3的脚手架项目，用这种方式搭建的脚手架项目不仅仅只有vue是新版的，就连vue-router、vuex都是最新的。 给大家截一下pac…
-
1. 概述 在上一个章节里，我们讨论了如何通过Promise范式解决两个回调函数的重要问题： 1. 由于控制反转，回调并不是可信任或可组合的。 2. 基于回调的异步不符合大脑对任务步骤的规划方式 可以说Promise很好的解决了第一个问题，但是对于第二个问题，Promise是通过不断的链式调用一定程度上的优化了回…
-
文/米酒 背景 前段时间在某个项目进行需求开发的时候，该项目是基于 webpack3 进行打包构建的。在开发过程中我发现打包很慢，开发体验不佳，于是做了简单的优化并梳理了优化方案 分析打包速度 进行优化的第一步需要知道我们的构建到底慢在那里。通过 speed-measure-webpack-plugin 测量你的 webpack 构建期间各…
-
转行学前端的第 59 天 : 了解 BOM location 对象相关
我是小又又，住在武汉，做了两年新媒体，准备用 6 个月时间转行前端。 今日学习目标 昨天基于搜索来基础学习 window 弹窗管理相关。然后发布文章遇见了一些问题,但是今天尝试的时候,又好了,就很奇怪. 今天主要是基于搜索来学习 BOM location 对象 和 URL 接口 ，又是适合学习的一天，加油，小又又！！！！ …
-
我们需要先复习下原型链的知识，其实这个问题取决于 js ，而并非是 vue 。 function Component(){ this.data = this.data } Component.prototype.data = { name:’jack’, age:22, } 复制代码 首先我们达成一个共识（没有这个共识，请补充下 js 原型链部分的知识）： 实例它们构造函数内的this内容是不一…
-
最近也是在换工作，小公司和大厂（虾皮、腾讯）都有面试。几次面试收获还是比较大的，了解许多自己的短板，当然也拿到了合适的offer。本文主要整理下面试遇到的问题和知识点，希望对准备找工作的掘友有所帮助。 基础部分 面试的时候，前端基础知识，还是仔细准备，这一块可以问的东西很多，不管哪一面，都将会有问到，…
-
如何在 Vue Cli 下实现 多入口 的 Web App 快速配置 Cli 创建了一个 Vue 项目 之后 可以通过 vue.config.js 对项目进行配置 在 vue.config.js 里增加一个叫 pages 的项 module.exports = { pages: { index: ‘src/main.js’, another: ‘src/another/main.js’ } } 上述…
-
从零开始实现你自己的响应式库，从零开始实现 Vue 3 响应式模块。本文完整内容见buid-your-own-vue-next 1. 实现响应式 响应基本类型变量 首先看一下响应式预期应该是什么样的，新建一个 demo.js 文件，内容如下…
-
结合个人经历总结的前端入门方法，总结从零基础到具备前基本技能的道路，学习方法，资料，由于能力有限，不能保证面面俱到，知识作为入门参考，面向初学者，让初学者少走弯路。 互联网的快速发展和激烈竞争，用户体验成为一个重要的关注点，导致专业前端工程师成为热门职业，各大公司对前端工程师的需求量都很大，要求…
-
导航 执行上下文 原型链 继承 事件循环 柯里化 偏函数 函数记忆 隐式转换 和 运算符 浏览器缓存机制（http缓存机制） 前端安全 深浅拷贝 Debounce Throttle [深…
-
前端发展迅速，知识零散，这无论对于刚入门的新手还是前端中级工程师来说对重点都不好把控，对此，小编总结出前端2020你需要学习和掌握的前端知识库，如果对你有帮助，不要忘记 点赞 提纲 第一部分 JavaScript深度剖析 第二部分 前端工程化 第三部分 核心框架原理进阶 第四部分 Node.js全栈开发 第五…
-
最近做了一个小型的vue的h5项目，发现在手机上运行的时候，第一次进去的首页比较慢，然后同事提了下可以在生产环境用cdn，于是我尝试了下 生产环境开启cdn 1、 在 vue.congfig.js 里面加入 const isProduction = process.env.NODE_ENV == "production"; configureWebpack: (config) => { if (…
-
2020年，你可能需要基于Vue的微服务架构实践，在服务端或客户端聚合子服务
# 拉取代码 git clone git@github.com:fmfe/vue-genesis-micro.git # 安装依赖 npm install # 开发环境启动 npm run dev # 打包生产环境代码 npm run build # 生产环境运行 npm run start 复制代码 微服务是什么？ 微服务是一个新兴的软件架构，就是把一个大型的单个应用程序和服务拆分为数十个的支持微服务。 为什么…
-
前言:ajax的知识相对比较简单，此文章仅代表鄙人的总结和理解，如有错漏，欢迎指正… 一、原理： Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。 XMLHttpRequest是ajax的核心机制，是一种支持异步请求的技术。简单的说，也就是j…
-
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略，下面这张图来了解下。 qiankun qiankun 蚂蚁金服基于single-spa 的微前端解决方案，生产可用。 特性 基于 single-spa 封装，提供了更加开箱即用的 API。 技术栈无关，任意技术栈的应用均可 使用/接…
-
将 arguments 对象转换为数组 arguments对象是函数内部可访问的类似数组的对象，其中包含传递给该函数的参数的值。 与其他数组不同，这里我们可以访问值并获得长度（length），但是不能在其上使用其他数组方法。 幸运的是，我们可以将其转换为常规数组： 复制代码 varargArray =Array.prototype.slice.call…
-
这里所指的angularjs是只angular早期的1.x版本。虽然vue, react在热度上已经碾压angularjs几条街，但是在面对web开发（以DOM为中心的开发）中，某些场景下面，angularjs可能比任何框架或库都做得好。这里，主要举例两个点。 Modal弹窗的隐现 现在是单向数据流和immutable的天下，其目的是为了数据流所蕴含的业务流清晰…
-
通过 学习vue源码（6）熟悉模板编译原理 的学习，我们知道解析器在整个模板编译中的位置。我们只有将模板解析成AST后，才能基于AST做优化或者生成代码字符串，那么解析器是如何将模板解析成AST的呢？ 这次，我们将详细介绍解析器内部的运行原理。 1 解析器的作用 解析器要实现的功能是将模板解析成AST。 例如： &…
-
webpack NPM 设置淘宝镜像 # 配置淘宝镜像 npm config set registry https://registry.npm.taobao.org # 安装cnpm npm install -g cnpm –registry=https://registry.npm.taobao.org 全局安装包 npm install –global 或者 npm install -g 其他命令 npm set # 查看包的信息 npm i…
-
点赞再看、养成习惯。 本文已收录至 github.com/likekk/-Blo… 欢迎大家star，共同学习，共同进步。如果文章有错误的地方，欢迎大家指出。后期将在将GitHub上规划前端学习的路线和资源分享。 写在前面 每一篇文章都希望您有所收获，每一篇文章都希望您能静下心来浏览、阅读。每一篇文章都是作者精心打磨的作品…
-
TypeScript 中的顶级类型：any 和 unknown
作者：Dr. Axel Rauschmayer翻译：疯狂的技术宅 原文：[链接] 未经允许严禁转载 在 TypeScript中，any 和 unknown 是包含所有值的类型。在本文中，我们将会研究它们是怎样工作的。 TypeScript 的两种顶级类型 any…
-
前面的 学习vue源码（6）熟悉模板编译原理 我们谈到，模板编译分为解析器，优化器，代码生成器。 前面两部分已经实现，现在 就来看看 代码生成器怎么实现吧。 代码生成器的作用是使用 AST 生成 render 函数代码字符串。 解析器主要干的事是将 模板字符串 转换成 element ASTs，例如： <div> <p>{{…
-
JavaScript 中所哟变量都可以当作对象使用，除了两个例外 null 和 undefined。 false.toString(); // false .toString(); // "1,2,3" funciton Fun(){} Fun.num = 1; Fun.num; // 1 复制代码 一个常见的误解是数字的字面值不能当作对象使用。这是因为JavaScript解析器的一个错误，他试图将点操作…
-
之前学习 vue 的时候，一直没刨根问底过。在看到网上这类文章比较多，参差不齐的质量有时候看的一头雾水。当然也有不错的文章，但是终究是别人的理解。于是写一篇关于自己的理解记录下来，亲身实践才能收获更多！ 初阶：响应式原理 在说明之前，我们先了解一个 Object.defineProperty() 。引用 MDN 上的权威介绍 de…
-
最近一个小伙遇到一个需求，客户需要绘制圆点样式的线条。 大致效果是这样的： 思路一：计算并使用arc填充 他自己实现了一种思路，然后咨询我有没有更好的思路。 先看看他的思路是如何实现的，大致代码如下： // 绘制圆点线，通过计算在线条上进行插值运算，计算出需要绘制圆点的一系列点位 // 然后调用dra…
-
Vue 中的双向绑定是指当我们改变 data 中的一个变量时，页面中该变量也会随之跟新，我们在页面中改变一个变量时，data 中变量的值也随之变化。 通常我们使用 v-model 来实现双向绑定，并且 v-model 只能在 input、selsect、textarea 元素和 component 中使用。 1. v-model 的原理 <input type="text"…
-
三分钟搭建websocket实时在线聊天，项目经理也不敢这么写
websocket是一种网络通信协议，我们都知道http协议，http协议只能从客户端主动发起，不能从服务端推送数据到客户端，今天我们讲的websocket就是一种不仅能从客户端发送数据到服务端，也可以主动从服务的推送数据…
-
TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
-
一个轻量级 JavaScript 全文搜索库，轻松实现站内离线搜索
介绍 Lunr.js是个用于浏览器的轻量级 JavaScript 全文搜索引擎。它为JSON文档建立索引，并提供一个简单的搜索界面来检索与文本查询比较匹配的文档对于一些小型的博客、开发者文档或 Wiki 网站来说,完全可以通过它实现站内离线搜索: 为什么使用它? 对于已经将所有数据存储在客户端中的Web应用程序，也能…
-
前言：都2020年了，感觉是时候该学一波webpack了，趁着最近有时间，就学了一下，等把官网上的webpack结构和模块大概看了一遍之后，就感觉可以开始搭个项目实战一下了，从0开始，一步步记录下来 使用版本： webpack4.x 1.包含插件和loader * html: html-webpack-plugin clean-webpack-plugin * css: …
-
Flowable 工作流 Springboot vue.js 前后分离 跨域 有代码生成器
特别注意： 本代码为 Springboot 工作流 前后分离 + 跨域 版本 （权限控制到菜单和按钮） 后台框架： springboot 2.3.0+ Flowable 6.5.0+ mybaits+maven+接口 前端页面：html +vue.js 形式 jquery ajax 异步跨域 json 格式数据交互 前后分离，前后台分开部署 （特别注意，前端用的vue.js, 就是html页面引入vue.js…
-
在疫情期间，上班族开启了远程办公，体验了各种远程办公软件。老师做起了主播，学生们感受到了被钉钉支配的恐惧，歌手们开启了在线演唱会，许多综艺节目也变成了在线直播。在这全民互动直播的时期，我们来聊聊互…
-
以下是v8引擎的学习总结内容，这里做个学习笔记，方便自查。 V8是什么？ V8是Google开发的开源js引擎，目前用在chrome浏览器和node.js中，用于执行js代码。V8是js虚拟机中的一种，js虚拟机就是把js编程语言翻译成机器语言。市面上比较流行的js引擎，SpiderMonkey，v8，JS core等。 解释执行/编译执行 由于计算机…
-
点赞再看，养成习惯本文 GitHub [链接] 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。
-
Vue.extend( optons ); （1）参数 { object } options （2）用法 使用基础Vue构造器创建一个“子类”，其参数是一个包含“组件选项”的对象。data选项是特例，在Vue.extend（）中，它必须是函数。 <div id="mount-point"></div> <!– 创建构造器 –> var Profile = Vue.extend({ template…
-
new 在 MDN 上的定义是:new运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例 在JavaScript中, new 是一个关键字,创建了一个对 this 的绑定.而在面向对象的语言中, new 关键字总是用于实例化一个类,如在Dart中: class Person {} var p = new Person() 复制代码 在JavaScript中,没有类的…
-
[vue源码02] computed 响应式 – 初始化，访问，更新过程
导航 执行上下文 原型链 继承 事件循环 柯里化 偏函数 函数记忆 隐式转换 和 运算符 浏览器缓存机制（http缓存机制） 前端安全 深浅拷贝 Debounce Throttle [深…
-
步骤：1：clientA创建peer对象，打开本地媒体流，将媒体流添加到peer中。调用peer对象的createOffer方法创建一个用于offer的sdp2：clientA将sdp传送到服务端3：服务端将sdp发送给clientB4：clientB创建peer对象,…
-
作为一个 Node.js 开发者，我很早便了解到了 TypeScript，但又因为我对 CoffeeScript 的喜爱，直到 2016 年才试用了一下 TypeScript，但当时对它的学习并不深入，直到最近又在工作中用 TypeScript 开发了两个后端…
-
学习vue源码（3） 手写Vue.directive、Vue.filter、Vue.component方法
一、Vue.directive Vue.directive(id, ); 1）参数 { string } id { Function | Object } 复制代码 （2）用法 注册或获取全局指令。 <!– 注册 –> Vue.directive(‘my-directive’,{ bind:function(){}, inserted:function(){}, update:function(){}, componentUpdated:functi…
-
众所周知， Vue.js 组件是Vue创建自定义元素的重要功能之一，同时，模板可帮助你避免从头开始创建网页设计。总之，这些工具对于希望其开发过程更快，更高效的任何Web开发人员都是必不可少的。 此外，在过去的几年中，Vue.js 变得非常流行，许多企业将其添加到他们的技术栈中。该框架的优点是它具有内置的数据绑定和M…
-
前情提要 由于资源需要全球可以进行访问，可能会涉及节点的访问很慢，所以我们有些地方直接使用七牛云存储了 站点配置 这里我们推荐使用静态资源上云 优势 资源自动解压缩 云资源自动切换最近节点 等等 配置静态资源地址 module.exports = { … publicPath: (process.env.ENV == &q…
-
当后端一次性丢给你10万条数据, 作为前端工程师的你,要怎么处理?
前段时间有朋友问我一个他们公司遇到的问题, 说是后端由于某种原因没有实现分页功能, 所以一次性返回了2万条数据,让前端用 select 组件展示到用户界面里. 我听完之后立马明白了他的困惑, 如果通过硬编码的方式去直接渲染这两万条数据到 select 中,肯定会卡死. 后面他还说需要支持搜索, 也是前端来实现,我顿时产生了兴趣….
-
一、前言 现在也算上暂时闲下来了。算算已经好久没写文章了。这篇文章记录下我使用的一些前端小功能吧。如有错误，请及时指出。 二、vue数字滚动小组件 开发中要用到数字上下滚动的组件。在 github 上找了找这种功能。找到了一个 vue-digitroll 。周末花了一下午的时间研究了 vue-digitroll 的源码…
-
compile 部分已经讲完了 （compile部分分为 解析器 + 优化器+ 代码生成器）， 终于走到了 render，今天就来给自己记录下渲染三部曲的第二部render， （渲染三部曲= compile + render生成Vnode + 将Vnode通过 update 挂载到 页面上）， update里 有一系列 diff操作。 咦，render 内容不多的 噔噔噔噔 render 的作…
-
<html lang="en"> <body> <table> <tr> <td>P</td> </tr> </table> </body> </html> 复制代码 请问点击鼠标点击 P 的时候发生了什么? 答: 点击的时候事件会经历三个阶段: 捕获阶段（Capturing phase）—— 事…
-
学习vue源码（5） 手写Vue.use、Vue.minxin、Vue.compile
一、Vue.use Vue.use(plugin); （1）参数 { Object | Function } plugin 复制代码 （2）用法 安装Vue.js插件。如果插件是一个对象，必须提供install方法。如果插件是一个函数，它会被作为install方法。调用install方法时，会将Vue作为参数传入。install方法被同一个插件多次调用时，插件也只会被安装一次。 关于…
-
本文旨在理一下vue中diff算法的主要逻辑和关键细节。 从一个简单的demo切入： p标签渲染一个items数组 <div id="demo"> <p v-for="item in items" :key="item">{{ item }}</p> </div> <script src="../vue-source/dist/vue.js"></scr…
-
什么是微前端？ 我们先来看两个实际的场景： 1. 复用别的的项目页面 通常，我们的后台项目都长这样： 如果我们的项目需要开发某个新的功能，而这个功能另一个项目已经开发好，我们想直接复用时。PS：我们需要的只是别人项目的这个功能页面的 「 内容部分 」 ，不需要别人项目的顶部导航…
-
前面我们在 学习vue源码（4） 手写vm.$mount方法 中谈到 compile函数把模版转换成 渲染函数， 但是没有谈到具体实现，这一次我们来具体实现。 先大概谈下模板编译原理。 一、模版编译原理概述 （1）在Vue.js中创建HTML并不是只有模板这一种途径。既可以手动写渲染函数来创建HTML，也可以在Vue.js中使用JSX…
-
面试造火箭，工作拧螺丝！ 在技术圈毕竟只有百分之一的人能进入BAT，百分之九九的小伙伴只能在普通公司做这普通的事情，此文没有BAT啥经验，都是基础。帮助小伙伴们快速梳理知识，不会涉及到具体的很细节的知识点，关注面试本身。公司一般会从以下5个方面（HTML5+CSS3/JS/框架/项目/工具）考察一个人的能力，此文总结…
-
又是一个阳光明媚，风和日丽的周末，有人陪女神去逛街，有人陪女神去看电影，小编却默默的拿出电脑。哈哈哈，不是小编屌丝，女神正坐在旁边玩手机（感觉不是屌丝才怪）。 这两天小编重读了一遍vue2.0官网的风格指南，整理了这九条关键规则。 v-for设置键值 提到 v-for 需要设置键值，许多人第一反应会从 diff 算…
-
作为前端经常遇到线上报错却无法复现的情况，要是这个时候有错误监控能快速帮我们定位问题所在，再查找错误监控的相关资料尝试去实现一个自己的sdk。下面我以 错误监控 和 设备信息 两方面作为关注点去实现。 完整代码 错误监控 运行时报错 window.onerror = (msg,url,lineNo,columnNo,e) => { // …上…
-
大声对webpack4.0说声你好之webpack的高级应用(四)
再学了前三节之后，其实我们已经会对文件资源等进行一些打包，但是这些在大型项目中是远远不够的，那么我们在平时的配置中还会遇到什么难题呢？ 我能学会什么 通过本节的学习，你可以学会 按需打包文件 区分线上环境与开发环境配置 Webpack 和 Code Splitting SplitChunksPlugin 配置参数详解 Laz…
-
Promise 是ES6 中一个JS 的 Promise 类型对象，用来传递异步操作的消息。有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise 对象提供统一的接口，使得控制异步操作更加容易。Promise 也有一些缺点。首先，一旦新建它就会立即执行，无法中途取消Promise。其次，Pro…
-
前言 有时，您将需要构建一个JavaScript倒数时钟。您可能有活动，销售，促销或游戏。您可以使用原始JavaScript构建时钟，而不用寻找最近的插件。虽然有很多很棒的时钟插件，但是使用原始JavaScript可以带来以下好处： 您的代码将是轻量级的，因为它将具有零依赖性。 您的网站将表现更好。您无需加载外部脚本…
-
vue3 beta 版本已经发布快两个月了，相信大家或多或少都有去了解一些 vue3 的新特性，也有一部分人调侃学不动了，在我看来，技术肯定是不断更迭的，新的技术出现能够提高生产力，落后的技术肯定是要被淘汰的，五年前会JQ一把梭就能找到一份还行的工作，现在只会JQ应该很少公司会要了吧。刚好前两天尤大也发了一篇文章讲…
-
EmailJS：5步使用JavaScript直接从前端发送电子邮件
有很多方法可以读取这些数据。你可以将你的表单与数据库（如MySQL）连接，然后从数据库中读取传入的信息。好吧，这是一个选择，但是我认为这对于你的非技术客户来说可能会很麻烦。
-
byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9461 本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。 一、Chrome浏览器双指触摸的模拟 结果是模拟不了。 页面整体缩放行为是可以通过按住Shift键+页面左键模拟的，但是，实际上，还是一个触摸点，因此无法模…
-
#Javascript高级编程读书笔记#13.5 内存和性能
13.5 内存和性能 Javascript 中函数都是对象，过多被添加到事件的处理程序都会占用内存，内存中对象越多性能就越差。其次，事先指定好所有事件处理程序而导致的DOM访问次数也会延迟整个页面的交互就绪时间 对付“事件处理程序过多”的方案就是 事件委托 ，事件委托利用了 事件冒泡 只指定一个事件处理程序就可以管理…
更多内容请关注公众号【前端开发博客】每日更新
