- 博客(145)
- 收藏
- 关注
RSS订阅原创 vue.js 多种打包场景的配置
一. 认识 vue.js 中的webpack 配置文件vue.js 开发环境与正式打包是两个 webpack 配置文件处理的。这两个配置文件，作为开发者大佬肯定不陌生， 但是对于刚刚入门vue.js 的朋友们，肯定有些疑惑， dev配置文件，则是开发时的配置文件， prod 是打包时的文件。 还有一个 webpack.base.conf.js 文件则是公用的配置， 这里不过多解释 ， vue...
2019-10-20 16:22:08
753
1
原创 聊聊 Vue 中 axios 的封装
前言金三银四，技术论坛上诸如：阿里、头条、腾讯….面经层出不穷，朋友圈很多小伙伴都在找工作也遇到了各种各样的麻烦。本文希望那些在准备面试的过程中蕉绿的童鞋别僵化了自己的思维，以自己曾经遇见到一道面试题为引，用自己对待问题的想法行文，天马行空，从僵硬的知识点中跳脱出来一起思考，内容简单易懂。评论区有很多的同学留下了许多很棒的思路，大家不要错过哟，欢迎大家一起继续交流学习。题const fucA...
2019-10-20 16:11:02
331
原创 中高级前端开发高频面试题
使用setTimeout代替setInterval进行间歇调用var executeTimes = 0;var intervalTime = 500;var intervalId = null;// 放开下面的注释运行setInterval的DemointervalId = setInterval(intervalFun,intervalTime);// 放开下面的注释运行setTim...
2019-10-20 15:55:44
522
原创 聊聊 Vue 中 axios 的封装
axios 是 Vue 官方推荐的一个 HTTP 库，用 axios 官方简介来介绍它，就是：Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。作为一个优秀的 HTTP 库，axios 打败了曾经由 Vue 官方团队维护的 vue-resource，获得了 Vue 作者尤小右的大力推荐，成为了 Vue 项目中 HTTP 库的最佳选择。虽然，axi...
2019-10-20 15:37:56
186
原创 Vue3.x源码调试
断点调试根据demo小例子或者api的使用姿势进行调试，每个小例子只关心其走过的逻辑分支。如何调试vue3.x的ts源码官网说使用 yarn dev 命令就可以对其进行调试，可是运行该命令后，是生成过后的代码，不能对其编写的ts源码进行调试。其实再生成对应的sourcemap文件，便可以原汁原味的调试。先看下几个截图：如果这是你想要的调试效果，下面请看下如何生成sourcemap文...
2019-10-18 14:53:40
1407
原创 Promise的秘密（Promise原理解析以及实现）
写在前面本篇文章将会带大家从分解promise入手，一步步实现一个promise。但阅读之前需要比较熟练地了解了解用法，结合用法看文章可能更容易理解。结构先看一下简单的用法。const promise = new Promise((resolve, reject) => { setTimeout(() => { resolve('success') })}).then...
2019-10-18 14:45:55
537
原创 学习KOA框架
Context 对象Koa 提供一个 Context 对象，表示一次对话的上下文（包括 HTTP 请求和 HTTP 回复）。通过加工这个对象，就可以控制返回给用户的内容。Context.response.body属性就是发送给用户的内容const Koa = require('koa');const app = new Koa();const main = ctx => { ...
2019-10-18 14:39:09
168
原创 面试官，不要再问我三次握手和四次挥手
三次握手和四次挥手是各个公司常见的考点，也具有一定的水平区分度，也被一些面试官作为热身题。很多小伙伴说这个问题刚开始回答的挺好，但是后面越回答越冒冷汗，最后就歇菜了。见过比较典型的面试场景是这样的:面试官：请介绍下三次握手求职者：第一次握手就是客户端给服务器端发送一个报文，第二次就是服务器收到报文之后，会应答一个报文给客户端，第三次握手就是客户端收到报文后再给服务器发送一个报文，三次握手就成...
2019-10-17 17:22:48
403
原创 面试一定会问到的-js事件循环
最近在看js事件循环，事件循环是js运行的核心，js 是单线程的， js 的异步事件就是依赖于事件循环机制，网上找了些资料，发现腾讯云这篇 js事件循环 写的很详细，下文基于这一篇文章，外加上自己的一些总结。事件循环首先，我们来解释下事件循环是个什么东西: 就我们所知，浏览器的js是单线程的，也就是说，在同一时刻，最多也只有一个代码段在执行，可是浏览器又能很好的处理异步请求，那么到底是为什么呢...
2019-10-17 17:18:12
282
原创 Vue3.0简单认识
Vue3.0设计目标更小更快（）加强TypeScript支持（）加强API设计一致性提高自身可维护性开放更多底层功能更快Object.defineProperty -> Proxy （颗粒度更大）Virtual Dom 重构更多编译优化：slot默认编译为函数（不存在父子组件强耦合），Momomorphic vnode factory，Compiler-generated...
2019-10-17 17:15:55
302
原创 「译」Vue.set实际上是什么？
谈到Vue.set就要说响应式原理，所以得为你自己准备下这方面的理论知识。然而，一如即往，这并不难或者枯燥。准备点鳄梨和薯条，制作些鳄梨酱，然后我们再进入话题。数据和响应式原理在一个Vue组件中，无论你何时创建一个data()功能属性，都会返回一个对象。Vue在组件背后做了很多事情，来使得它具有响应式。export default { data() { return { red: 'h...
2019-10-17 17:13:03
275
1
原创 深入阅读 koa 源码
koa是什么koa 2做了的事情：基于node原生req和res为request和response对象赋能，并基于它们封装成一个context对象。基于async/await 中间件洋葱模型机制。koa1和koa2在源码上的区别主要是于对异步中间件的支持方式的不同。koa1是使用generator、yield)的模式。koa2使用的是async/await+Promise的模式。下文主...
2019-10-16 15:50:15
182
原创 为什么用vue.js，为什么前端开发46%的人都在用？
一句话总结：用数据绑定的思想，vue可以简单写单个页面，也可以写一个大的前端系统，也可以做手机app的界面。1、Vue.js是什么？渐进式框架自底向上增量开发的设计易学习易整合Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其...
2019-10-16 15:08:11
569
原创 Vue 3.0 源码开放，看看都有哪些新特性
当大多数国人还在庆祝国庆节的时候，尤雨溪大大在昨天凌晨发布了 Vue 3.0 源代码，源码地址：github.com/vuejs/vue-n… 。虽然目前还 处于 Pre-Alpha 版本，但是可以预见后面的 Alpha、Beta 等版本应该不会太遥远。之前，就有预言，除了性能优化、脚手架和新功能外，TypeScript绝对是一个重点，因此，在Vue 3.0源代码版本中，98%代码由Types...
2019-10-16 14:58:58
209
原创 前端分层架构实践心得
首先介绍下本项目的应用，是一个交互简洁的 Todo 应用，应用取名叫 Memo，Memory 的简写，参考了微软的 To Do 以及 Listify、Trello 等应用。不过最大的不同是，项目并不依赖后端，而是使用浏览器提供的 indexDB 进行数据的存储，可以保证数据的绝对安全。另外更新应用也不会清除原来的数据，除非将应用卸载。效果图如下：体验平台 二维码 链接 Web点击体验 An...
2019-10-16 14:54:51
799
原创 Web 简史丫
你可能认为web就是javascript？是，但不单单是。这篇文章可能有点长，涉及大量历史资料，建议安排一个充裕的时间 + 充足的兴趣 + 充足的耐心来通读（预估10分钟）。在今天的编程领域，web已然是一颗明星，当然，你也可以觉得他很快不那么火了，but whatever，它确实已经产生了足够大的影响力，并对社会、职业产生了很深的影响，看街边小广告培训班、网上满天飞的高薪就业班就知道大概一二...
2019-10-15 17:44:57
256
原创 从 React 谈 Web UI 开发
前我在 Twitter 上这样表达过对 React 的理解，但是 Twitter 篇幅有限，所以在这篇文章里，我要做更详尽的阐述。我从前不喜欢 React, 是因为写 React 的 render function 不像写 template 一样方便，尤其是存在复杂的判断渲染的时候，Vue 的 template 一个 v-if 就搞定了。而在 React 里写，需要把这个判断写成 functio...
2019-10-15 17:39:43
147
原创 WEB 前端模块化都有什么？
前言说到前端模块化，你第一时间能想到的是什么？Webpack？ES6 Module？还有吗？我们一起来看一下下图。相信大伙儿对上图的单词都不陌生，可能用过、看过或者是只是听过。那你能不能用一张图梳理清楚上述所有词汇之间的关系呢？我们日常编写代码的时候，又和他们之间的谁谁谁有关系呢？一、千丝万缕为了更贴合我们的日常开发场景（前后端分离），我们尝试先从不同平台的维度区分，作为本文的切入点。...
2019-10-15 17:38:27
764
原创 Web前端热更新
热更新是什么？简单来说，热更新一般是指手机里的app有小规模更新，以直接打补丁的形式更新。相对应的，另一种更新方式就是下载新的安装包，重新安装。所以热更新在手游里头是比较常见的，毕竟游戏应用个个都几百兆起步。那Web前端有热更新？按上面那个说法，Web应该是不存在热更新的。因为网页的架构是B/S，即 浏览器+服务器 ， 它不像手机app一样是 C/S 客户端+服务器所以在网页这一块是...
2019-10-15 17:35:43
498
原创 JavaScript 的简洁之道
简介如果你关注代码本身和代码的编写方式，而不是只关心它是否能工作，那么你写代码是有一定的水准。专业开发人员将为未来的自己和“其他人”编写代码，而不仅仅只编写当前能工作就行的代码。在此基础上，简洁代码可以定义为自解释的、易于人理解的、易于更改或扩展的代码。以下列表一些好编写方式，仅供参考，当然，如果你有更好的方式，欢迎留言。想阅读更多优质文章请猛戳[GitHub博客][1],一年百来篇优质文...
2019-10-14 15:56:52
161
原创 不要这样写简li
简历问题从严重到不严重排序实习经验介绍太少。我根本就无法看出你在其中做了什么工作，我甚至都不知道你的抓取工作用了什么技术。至少介绍三句话也好。编程经验只有名词列举，没有佐证。你如果有这些编程经验，至少提供代码链接或者项目链接给我看看，我才知道到底写得好不好。没有给我看你做的项目。那我只能默认你没有做过什么拿得出手的项目了…… 我司的技术栈跟你的不太匹配，而你并没有针对这一点改写你的简历，...
2019-10-14 15:53:04
126
原创 从零开始一个微信小程序版知乎
以前工作没直接进行过小程序的开发，最近闲了下来就赶紧学习一下。因为从零开始，所以没有使用任何框架及UI库，记录一下本次开发中踩过的坑吧~展示效果(界面样式设计与交互来自iOS 4.8.0版本知乎App)：动态效果请移步到GitHub查看。一、开始前的准备申请账号：根据小程序注册文档，填写信息和提交相应的资料，就可以拥有自己的小程序帐号。开发工具：微信开发者工具数据来源：Easy M...
2019-10-14 15:50:33
1753
1
原创 小哥哥我想..把报警日志发到微信
前言笔者所在公司项目的报警信息会通过钉钉发送到群组或个人，这样如果服务出现了问题我们都会第一时间收到提醒并进行处理。某日从钉钉收到报警信息的我突发奇想，如果自己的项目也能在出现问题的第一时间通过社交工具通知我岂不美 ( sang ) 滋 ( xin )滋( bing ) ( kuang )。通过微信公众平台进行报警很容易，申请公众平台后写个报警后台或者使用企业微信进行接口信息发送。但不管是公...
2019-10-14 15:38:08
306
原创 React中型项目的优化实践
本文可能涉及的内容–项目介绍整个项目大概有60+个页面，用到的组件大概150+，package里面的依赖大概有70+个，应该勉强算得上是一个中型的React的项目了。下面给大家看看我们现在build一次项目的结果–打包时间约150s，打包完之后的资源gzip之后约1.2m，尽管之前分离了一些公用依赖，但是index包的体积达到了600+还是令人难以接受的。需要解决的问题 &&...
2019-10-12 15:38:36
189
原创 React + Electron 搭建一个桌面应用
当你冲这个标题点进来的时候，我猜你一定知道 React 是什么，更多详情请戳这里，就不介绍React了，一个神般存在的前端框架。另外，浏览器和移动端横行的时代，为什么还需要桌面应用？我就不解释了，反正优点很多，做为技术多学一点总没错。Electron 简单介绍是什么?官网是这么介绍的：Electron is an open source library developed by GitHu...
2019-10-12 15:33:20
997
原创 React 最简单的入门应用项目
学习一项工具，最快的方式就是边学便用。在学习 GUI 时我会边看API边写一个记事本，学习 web 框架时我会边学边写一个留言板。学习和工作上一直是在写后端代码，有一点前端基础，但没有用过JS框架，看到最近React特别火，就开始了边学 React 边写留言板。一共花了大概两天左右的时间入门 React 并写出了这个留言板。另外还收集了一些资料，比较适合刚接触 React 的人或是前端新手。...
2019-10-12 15:27:35
1610
原创 你可能不知道的React用法
前言React作为前端最的框架之一，但是有的时候我们仅限于能用的阶段，有一些高级用法，我们在日常开发中却很少涉足。但是一旦用起来，我们就能发现它的方便和强大之处，我们就会越来越发现我们已经离不开它了！这就像是刚用React时，我内心是拒绝的，但是现在我已经离不开它了，越来越不能理解以前自己为什么抱着JQuery不放呢！今天我们重点讲一下Context这个高级API，以及如何封装它，让它更加易用...
2019-10-12 15:25:36
116
原创 再撸一个 Vue 指令实现拖拽功能
之前撸了一个 copy 指令，这次再撸一个拖拽指令。。具体是个什么蛇皮玩意儿呢，大概就像介样：再撸一个 Vue 指令实现拖拽功能emmm。。没错，看起来就是如此的鸡肋，但是莫得办法，大佬喜欢啊。由于我们项目中用的是 element-ui ，所有这个指令只针对 element-ui的对话框组件哈，如果你们用的别的ui库也有这个需求的，涂涂改改应该也能用。。其实这个拖拽的原理还是很简单的：...
2019-10-11 15:39:03
175
原创 很全面的vue面试题总结
VUE面试题v-show 与 v-if 区别动态绑定class的方法计算属性和 watch 的区别怎样理解单向数据流keep-alive自定义组件的语法糖 v-model 是怎样实现的生命周期组件通信路由跳转vue-router 有哪几种导航钩子Vue.js 2.x 双向绑定原理什么是 MVVM，与 MVC 有什么区别vuexthis.$nextTick()vue的原...
2019-10-11 15:22:42
261
原创 今日头条面试题与解析
简答题1.css3特性中的transform：translateZ(0)有什么作用答案： GPU加速，优化前端性能2.列举三种禁止浏览器缓存的头字段，并写出响应的设置值Expires：告诉浏览器把回送的资源缓存多长时间 -1或0则是不缓存 简要：添加Expires头能有效的利用浏览器的缓存能力来改善页面的性能，能在后续的页面中有效避免很多不必要的Http请求，WEB服务器使用Expires...
2019-10-11 15:17:57
370
原创 现代 Web 页面开发流程
通常来说，Web页面开发的流程大致是这样的：设计师（设计师不是美工，就像程序员不是码农一样）提供设计稿，通常是图片格式。然后前端的开发人员（在ThoughtWorks我们称之为UI Dev）来手工的将图片转换为对应的HTML+CSS，往往还需要在各个浏览器中调试等。大多数时候，设计师会提供色卡，或者至少前景色/背景色/高亮色的值给开发人员。如果没有的话，开发人员会用到一些工具如colorpick...
2019-10-11 15:08:12
2921
原创 收下这波 vue 技巧，让开发效率翻倍
组件（component）的使用vue 提供的模块化无疑是提高开发效率的神器，而且对于后期代码优化和维护也提供的极大地便利。组件使用简介vue 提供了组件功能，组件又可以分为全局组件和非全局组件。区别是全局组件你可以直接在 .vue 文件中直接使用自定义的 html 即可。非全局组件必须在 Vue 的对象中定义 components 引入这个组件局部组件引用方式import A from...
2019-10-10 15:50:13
147
原创 10分钟彻底搞懂前端页面性能监控
前言前端页面性能是一个非常核心的用户体验指标。本文介绍阿里UC 岳鹰全景监控平台 如何设计一个通用、低侵入性、自动上报的页面性能监控方案。主要采用的是Navigation Timing API以及sendBeacon等方法。为什么要监控页面性能？一个页面性能差的话会大大影响用户体验。用户打开页面等待的太久，可能会直接关掉页面，甚至就不再使用了，这种情况在移动端更加明显，移动端用户对页面响应...
2019-10-10 15:43:45
2311
1
原创 前端渣渣对requestAPI的不断重构之路
自学路上太艰难，因为不仅仅会遇到一些除了前端的问题，还会遇到许多其他没涉及到的问题，那时候的自己属于，这个东西能做出来就行了，不会去考虑优化，或者重构代码等，直到大三去实习了一段时间之后，才发现自己多菜，乃至现在毕业了，入部门直接做一些重要的需求，如 xx 展会演示的某个功能，看着前人代码，越感自己菜到极致。好了，不扯那么多了，上边是为了做铺垫，因为这篇文章，会有我最初的代码风格和现在的一个风...
2019-10-10 15:27:32
248
原创 JavaScript的原型链图
各种对象的__proto__和函数的prototype 都阐明了不能保证100% 正确（有问题直接注释或者私信偶） 但是互联网上原型链图比这个全的偶没见过（右上角的Number Date们需要改进）可以改进但是 不能再简单了有点晕吧 大部分人都会晕所有网上 一堆 xxx.proto.proto.proto 皆可由此图搞定那些刁钻古怪的问题退化为孔乙己的茴字问题死记硬背吧 先 要不改行...
2019-10-10 15:23:55
174
原创 Vue 3 源码导读
5号凌晨，尤雨溪公布了 Vue 3 源代码。话不多说，我们趁热对 Vue 3 源码进行一些简要的分析。如果你还没有阅读过 Composition API RFC，可能无法完全看懂下面的内容。兼容性目前打包后的代码是 ES2015+，不支持 IE 11。对 TypeScript 的使用目前的代码 98% 以上使用 TypeScript 编写。如果你还没有学习 TypeScript，请...
2019-10-08 14:45:00
233
原创 给自己搭个脚手架
背景想做个测试或者某个东西的demo，需要新建一个项目。如果从 0 开始，要配置一大堆东西，耗时长；如果直接用现在流行的一些脚手架，如vue-cli等，黑箱操作，你需要阅读文档，也很难全局看清里面到底有哪些内容…在某个项目里，新建一个组件，其实有些固定的文件都要建，如xxx.js,xxx.html,xxx.css，更有可能有些固定内容，需要手工复制过来…平时做的项目都是在架子里面堆砌内容，没...
2019-10-08 14:41:12
257
原创 前端缓存最佳实践
前言缓存，这是一个老生常谈的话题，也常被作为前端面试的一个知识点。本文，重点在与探讨在实际项目中，如何进行缓存的设置，并给出一个较为合理的方案。强缓存和协商缓存在介绍缓存的时候，我们习惯将缓存分为强缓存和协商缓存两种。两者的主要区别是使用本地缓存的时候，是否需要向服务器验证本地缓存是否依旧有效。顾名思义，协商缓存，就是需要和服务器进行协商，最终确定是否使用本地缓存。两种缓存方案的问题点...
2019-10-08 14:36:31
146
原创 前端-埋点-理念-通识-浅谈
Q1：为什么需要埋点？采集用户浏览次数采集用户交互行为采集商品曝光…先别管采集了什么，重点就是采集二字Q2： 采集来有什么用啊？前端：上报用户行为啊！前端：产品说要这些啊！公司：服务于大数据业务！思考埋点，不应从前端角度出发，但怎么就和大数据业务扯上关系了呢？Q3： 什么是大数据业务？上图是一个标准的大数据业务的上下游可以看到数据采集是第一环节但什么时候开始准备采集呢？...
2019-10-08 14:33:54
451
原创 请用心练完这16个webpack小例子
16个demo，webpack+react搭配使用首先教大家2个新技能1.按照正常github地址情况下，你的github本身不能访问目录。例如要访问vue-demo下的vueCpu文件夹:github.com/holidaying/… （master是分支名）就可以访问。2.github目录的制作明确一个问题。一个标题就是一个目录名称写法xx#不能少题目名称的写法规则：abc de...
2019-09-29 16:02:40
271
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人