20200608 前端开发日报-前端开发博客

Javascript异步详解（三）-Generator；转行学前端的第 59 天 : 了解 BOM location 对象相关；前端如何学习？；JS new的时候干了啥；前端升级打怪路:DOM事件和事件委托；有哪些被低估未被广泛使用的有用的 HTML 标签？；学习vue源码（7）手写解析器；迟来的前端面经

Javascript异步详解（三）-Generator

1. 概述在上一个章节里，我们讨论了如何通过Promise范式解决两个回调函数的重要问题： 1. 由于控制反转，回调并不是可信任或可组合的。 2. 基于回调的异步不符合大脑对任务步骤的规划方式可以说Promise很好的解决了第一个问题，但是对于第二个问题，Promise是通过不断的链式调用一定程度上的优化了回…
转行学前端的第 59 天 : 了解 BOM location 对象相关

我是小又又，住在武汉，做了两年新媒体，准备用 6 个月时间转行前端。今日学习目标昨天基于搜索来基础学习 window 弹窗管理相关。然后发布文章遇见了一些问题,但是今天尝试的时候,又好了,就很奇怪. 今天主要是基于搜索来学习 BOM location 对象和 URL 接口，又是适合学习的一天，加油，小又又！！！！ …
前端如何学习？

结合个人经历总结的前端入门方法，总结从零基础到具备前基本技能的道路，学习方法，资料，由于能力有限，不能保证面面俱到，知识作为入门参考，面向初学者，让初学者少走弯路。互联网的快速发展和激烈竞争，用户体验成为一个重要的关注点，导致专业前端工程师成为热门职业，各大公司对前端工程师的需求量都很大，要求…
JS new的时候干了啥

new 在 MDN 上的定义是:new运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例在JavaScript中, new 是一个关键字,创建了一个对 this 的绑定.而在面向对象的语言中, new 关键字总是用于实例化一个类,如在Dart中: class Person {} var p = new Person() 复制代码在JavaScript中,没有类的…
前端升级打怪路:DOM事件和事件委托

<html lang="en"> <body> <table> <tr> <td>P</td> </tr> </table> </body> </html> 复制代码请问点击鼠标点击 P 的时候发生了什么? 答: 点击的时候事件会经历三个阶段: 捕获阶段（Capturing phase）—— 事…
有哪些被低估未被广泛使用的有用的 HTML 标签？

复习一波。
学习vue源码（7）手写解析器

通过学习vue源码（6）熟悉模板编译原理的学习，我们知道解析器在整个模板编译中的位置。我们只有将模板解析成AST后，才能基于AST做优化或者生成代码字符串，那么解析器是如何将模板解析成AST的呢？这次，我们将详细介绍解析器内部的运行原理。 1 解析器的作用解析器要实现的功能是将模板解析成AST。例如： &…
迟来的前端面经

最近也是在换工作，小公司和大厂（虾皮、腾讯）都有面试。几次面试收获还是比较大的，了解许多自己的短板，当然也拿到了合适的offer。本文主要整理下面试遇到的问题和知识点，希望对准备找工作的掘友有所帮助。基础部分面试的时候，前端基础知识，还是仔细准备，这一块可以问的东西很多，不管哪一面，都将会有问到，…
使用 Vue Cli 实现多页应用

如何在 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’ } } 上述…
你不知道的JS系列——全面解析[[Prototype]]、prototype、constructor

之前看一篇讲 ]、prototype 与 constructor 的博文，文章强调两点： __proto__ (就是将要讲的 ] )和 constructor 属性是对象所独有的 prototype 属性是函数所独有的对于初学者来看，并无不妥，拍手称赞。本着负责的态度，告诉你事实是： ] 虽然显示是对…
有趣的Canvas，你值得拥有

Canvas 是 HTML5 提供的一个用于展示绘图效果的标签. Canvas 原意为画布, 在 HTML 页面中用于展示绘图效果. 最早 Canvas 是苹果提出的一个方案, 今天已经在大多数浏览器中实现。
Vue自定义render统一项目组弹框功能

往期推荐文章（希望各位看官有收获） Lodash那些“多余”和让人眼前一亮的 API JavaScript好用还未火的注解@Decorator（注解 | 装饰器 | 装潢器）下文代码篇幅较大部分，只需关注带*号部分，不会影响阅读体验一、本文收获 pick 二、为什么要统一封装弹框；要封装成怎样通过举例常规…
webpack之基本概念

当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图会映射项目所需的每个模块，并生成一个或多个 bundle 1、入口entry webpack从入口文件开始找与其直接或间接的依赖来构建依赖图。入口可以有多个 module.exports = { entry: { app:’./path/index.js’ } } 复制代码 …
ThreeJS —— 机房Demo（三）

Three世界中的物体都是大部分都是由一个个几何体Geometry构成的，上一节我们在场景中加入了一些几何体模拟机器，并渲染出来了画面，这一节我们将加入一些新的几何体，来模拟线路等目录结构 ├── font // 字体文件 |├──── font.ttf // 字体源文件 |└──── font.json // 转换后的字体文件 ├── img // 素材图片 …
快速搭建 vue 组件方案 vue-general-components

一个基于 vue2，vuepress，rollup的 vue 组件快速开发工具 vue-general-components 项目背景在日常开发中，我们经常会在项目中写很多组件，有些是通用的有些是非常业务的，而一些优秀的组件会随着项目结项而封印；而不会说提炼成对应的 npm 仓库；社区上有很多优秀的 ui 库比如， element-ui 、 ant-design-…
学习vue源码（1）手写与事件相关的实例方法

在Vue.js内部有这样一段代码其中定义了Vue构造函数，然后分别调用initMiXin，stateMixin，eventsMixin，lifecycleMixin，renderMixin，并将Vue构造函数当作参数传给这5个函数这5个函数的作用就是向Vue的原型上挂载方法。当函数initMixin被调用时，会向Vue构造函数的prototype属性添加_init…
[vue源码01] data响应式和初始化渲染

导航执行上下文原型链继承事件循环柯里化偏函数函数记忆隐式转换和运算符浏览器缓存机制（http缓存机制）前端安全深浅拷贝 Debounce Throttle [深…
vue路由权限校验

引言做后台系统的时候，难免会有用户权限的判断。admin可以查看全部菜单，user只能查看部分菜单。一开始接触这个需求的时候，完全是纯前端做的。在配置路由的时候，加一个roles的属性，通过判断用户的roles是否与路由的roles属性相匹配来作为显示隐藏的依据 { path: ‘/router’, name: ‘router’, meta: { …
如果是自学WEB前端的话，该如何才能找到一份7K实习生工作呢？

下面说一下我的感受吧自学web前端8个月，我是怎样拿下7K薪资的？自学两个字，说起来很轻松，但真正做起来那真是绝非易事，说实话，在我收到HR发来的offer那一刻，眼泪差点掉下来，这个过程中吃的这些苦，真的只有自己才能知道，在自学的时候经常会碰到一些技术方面的问题，找不到老师教，只能去群里哪里找大牛讨教，但…
学习vue源码（2）手写Vue.extend方法

Vue.extend( optons ); （1）参数 { object } options （2）用法使用基础Vue构造器创建一个“子类”，其参数是一个包含“组件选项”的对象。data选项是特例，在Vue.extend（）中，它必须是函数。 <div id="mount-point"></div> <!– 创建构造器 –> var Profile = Vue.extend({ template…
2020你应该知道的前端知识

前端发展迅速，知识零散，这无论对于刚入门的新手还是前端中级工程师来说对重点都不好把控，对此，小编总结出前端2020你需要学习和掌握的前端知识库，如果对你有帮助，不要忘记点赞提纲第一部分 JavaScript深度剖析第二部分前端工程化第三部分核心框架原理进阶第四部分 Node.js全栈开发第五…
学习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学习非寻常之路（章二）

导读：坦白讲，我是Java服务端研发，只知道Vue这么个前端编程语言，未曾任何学习过，仅仅是个小白。但为何突然学习Vue呢，这得益于一次需求研发，无奈前端资源紧张，恰这次需求实现是面向运营端，非C端用户，产品可以接受自己自测，毕竟初期也仅是他负责这个模块的间断性周期数据维护。鉴于此，我尝试着是否可以自己实现…
有一种坑叫做代码重构–vue转nuxt

当接到领导说某某“seo精鲤”（实际上只会搞搞百度推广，连代码都不会写的）要将之前开发好的h5商城适应seo，心里顿时一万只草泥马在奔腾，因为我知道接下来绝B很多坑在等着我去踩。没办法，生活在底层的技术开发为了苟且也只能将这口气憋回去，硬着头皮，一个字，就是干。技术选型 vue、react等新技术的确是香，这…
学习vue源码（4）手写vm.$mount方法

一、概述前面的文章 https://mp.weixin.qq.com/s?__biz=MzU5NDM5MDg1Mw==&tempkey=MTA2M19WeHNUZGZ1VHVqRzFZcjZ0S2l0U014cnFwVDRtVkdfQ2dsaTVrOGdEVVU5WjZIUzdnYWR2aklESmoyc3BRMUREanYtQldtMENFSlZQX1lpb091RW1mS3lNYnBGUlhhTzRNUGpUbmh2b3JZVDJoUm5KMlBxbVk5NTlaNVptWnJ2SUF1Z0MwT0dMVUc0a2x6alBZS1RlNWU2UjVpVy1…
js动态绑定class（当前父级div下的子元素有没有这个class，有的话移除，没有的话添加）

<div class="layui-inline" id=‘’ onclick="changeType(id)"> <label class="layui-form-label"></label> </div> function changeType(id){//id是通过绑定事件传过来的 var askclass = document.getElementById(‘askclass’+id);//采取拼接方式…
学习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方法被同一个插件多次调用时，插件也只会被安装一次。关于…
node.js性能压力测试入门教程：wrk和loadtest安装使用

wrk wrk 是一个通用的性能压力测试工具，可通过linux编绎安装，叵通过 brew 安装 brew install wrk 使用： wrk -t12 -c400 -d30s http://127.0.0.1:8080/index.html 这条语句使用12个进程，连续测试30秒，并同时保持400个并发 loadtest loadtest 是支持通过 npm 安装的一个性能测试工具, 支持 windows和li…
习vue源码（6）熟悉模板编译原理

前面我们在学习vue源码（4）手写vm.$mount方法中谈到 compile函数把模版转换成渲染函数，但是没有谈到具体实现，这一次我们来具体实现。先大概谈下模板编译原理。一、模版编译原理概述（1）在Vue.js中创建HTML并不是只有模板这一种途径。既可以手动写渲染函数来创建HTML，也可以在Vue.js中使用JSX…
JavaScript和node.js内存泄露的原因和避免方法及Chrome调试工具使用教程

当我们使用“老式”方法编写网页时，通常不太需要关注JavaScript内存管理。但 SPA（单页应用程序）的兴起促使我们需要关注与内存相关的编码实践。在本文中，我们将探讨导致JavaScript内存泄漏的编程模式，并说明如何改善内存管理。 JavaScript代码中常见的内存泄漏偶然的全局变量全局变量始终被根结点引用，…
Vue学习总结之Vue的生命周期(二)

点赞再看、养成习惯。本文已收录至 github.com/likekk/-Blo… 欢迎大家star，共同学习，共同进步。如果文章有错误的地方，欢迎大家指出。后期将在将GitHub上规划前端学习的路线和资源分享。写在前面每一篇文章都希望您有所收获，每一篇文章都希望您能静下心来浏览、阅读。每一篇文章都是作者精心打磨的作品…
学习vue源码（9）手写代码生成器

前面的学习vue源码（6）熟悉模板编译原理我们谈到，模板编译分为解析器，优化器，代码生成器。前面两部分已经实现，现在就来看看代码生成器怎么实现吧。代码生成器的作用是使用 AST 生成 render 函数代码字符串。解析器主要干的事是将模板字符串转换成 element ASTs，例如： <div> <p>{{…
Vue项目性能优化 — 实栈指南(详细)

Vue 框架通过数据双向绑定和虚拟 DOM 技术，帮我们处理了前端开发中最脏最累的 DOM 操作部分，我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题，所以我们仍然需要去关注 Vue 项目性能方面的优化，使项目具有更高效的性能、更好的用户体验。…
学习vue源码（8）手写优化器

前面的学习vue源码（6）熟悉模板编译原理我们谈到模板编译分为解析器，优化器，代码生成器。在学习vue源码（7）手写解析器里我们已经学会了解析器怎么实现，现在就来看看优化器怎么实现吧。优化器的目标是找出那些静态节点并打上标记优化器的实现原理主要分两步：第一步：用递归的方式将所有节点添…
三分钟搭建websocket实时在线聊天，项目经理也不敢这么写

websocket是一种网络通信协议，我们都知道http协议，http协议只能从客户端主动发起，不能从服务端推送数据到客户端，今天我们讲的websocket就是一种不仅能从客户端发送数据到服务端，也可以主动从服务的推送数据…
Webpack 08 之使用Babel处理ES6语法

课程目标打包命令webpack和devServer命令的区别 babel是什么，做什么的? babel的优点? 浏览器的版本低可能不识别我们的js中的ES6的语法的解决方案一、打包使用webpack命令和打包使用devServer命令的区别：使用webpack命令打包的文件，会生成一个dist文件夹，文件夹下面有一个index.js文件，命令为np…

更多内容请关注公众号【前端开发博客】每日更新

关注我

我的微信公众号：前端开发博客，在后台回复以下关键字可以获取资源。

回复「小抄」，领取Vue、JavaScript 和 WebComponent 小抄 PDF
回复「Vue脑图」获取 Vue 相关脑图
回复「思维图」获取 JavaScript 相关思维图
回复「简历」获取简历制作建议
回复「简历模板」获取精选的简历模板
回复「加群」进入500人前端精英群
回复「电子书」下载我整理的大量前端资源，含面试、Vue实战项目、CSS和JavaScript电子书等。
回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识，加我微信:caibaojian89 交流