• 借助 webpack 对项目进行分析优化

    Posted by : lon.y@qq.com on 2018年4月21日

    进入公司之后,接手的便是前人留下来的一个大项目。庆幸的是整个项目拥有完善的产品功能文档,但是由于项目过于庞大,老旧。包含了打包过慢,冗余文件过多等诸多问题。想要快速的解决这些问题,想要完全把功能重构一遍的话,成本太高了。一个一个文件来过,时间成本也比较大。因此在此篇文章中,我们介绍一下我是如何配合webpack一步步进行分析,将项目进行优化的。 同时我针对思路封装了一个webpack-unused-files,用于查找项目中的冗余文件,欢迎试用并star

    阅读全文...

  • 面试题:你能写一个 Vue 的双向数据绑定吗

    Posted by : lon.y@qq.com on 2018年4月20日

    在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理。本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧。结合注释,希望能让大家有所收获。 1、原理 Vue的双向数据绑定的原理相信大家也都十分了解了,主要是通过 Object对象的defineProperty属性,重写data的set和get函数来实现的,这里对原理不做过多描述,主要还是来实现一个实例。为了使代码更加的清晰,这里

    阅读全文...

  • 从setTimeout/setInterval看JS线程

    Posted by : lon.y@qq.com on 2018年4月20日

    最近项目中遇到了一个场景,其实很常见,就是定时获取接口刷新数据。那么问题来了,假设我设置的定时时间为1s,而数据接口返回大于1s,应该用同步阻塞还是异步?我们先整理下js中定时器的相关知识,再来看这个问题。 初识setTimeout 与 setInterval 先来简单认识,后面我们试试用setTimeout 实现 setInterval 的功能 setTimeout 延迟一段时间执行一次 (Only one) setTimeout(function, m

    阅读全文...

  • 使用 PostMan 进行自动化测试

    Posted by : lon.y@qq.com on 2018年4月15日

    最近在进行一个老项目的升级,第一步是先将node版本从4.x升级到8.x,担心升级会出现问题,所以需要将服务的接口进行验证; 如果手动输入各种URL,人肉check,一个两个还行,整个服务。。大几十个接口,未免太浪费时间了-.-; 因为是一个纯接口服务的项目,所以打算针对对应的API进行一波自动化测试; 所以就开始寻找对应的工具,突然发现,平时使用的PostMan貌似也是支持写测试用例的-.-,所以就照着文档怼了一波; 一下午的时间,很是激动,之前使用Po

    阅读全文...

  • Vue.js最佳实践(五招让你成为Vue.js大师)

    Posted by : lon.y@qq.com on 2018年4月13日

    本文面向对象是有一定Vue.js编程经验的开发者。如果有人需要Vue.js入门系列的文章可以在评论区告诉我,有空就给你们写。 对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发前端网站。但如果你想更加高效地使用Vue来开发,成为Vue.js大师,那下面我要传授的这五招你一定得认真学习一下了。 第一招:化繁为简的Watchers 场景还原: created(){ this.fetchPostList() }, watch: { searc

    阅读全文...

  • 60 行 JS 代码搞定一个下拉刷新组件

    Posted by : lon.y@qq.com on 2018年4月12日

    更多文章参见: https://github.com/elevenbeans/elevenbeans.github.io 神马? 浏览器不都有自带的刷新按钮么? Web 页为什么要下(zi)拉(xing)刷(che)新 ? 这里特指移动端,原因如下: 相较于点击右上角刷新按钮(还有可能要点两次,第一次先展开 menu bar,然后才能看到 refresh 按钮),直接了当地下拉刷新无疑提供了更好的用户体验 点击刷新按钮同步重载页面必然存在一定白屏时间,而通

    阅读全文...

  • 闭包,是真的美

    Posted by : lon.y@qq.com on 2018年4月12日

    欢迎评论和star 写这篇文章时的心情是十分忐忑的,因为对于我们今天的主角:闭包,很多小伙伴都写过关于它的文章,相信大家也读过不少,那些文章到底有没有把JS中这个近似神话的东西讲清楚,说实心里,真的有,但为数不多。 写这篇文章的初衷:让所有看到这篇文章的小伙伴都彻彻底底的理解闭包 => 提高JS水平 => 能够写出更高质量的JS代码。 开文之所以说心情是忐忑的,就是怕达不到我写该文的初衷,但是我有信心同时我也会努力的完成我的目标。如行文中有丝毫

    阅读全文...

  • 关于 Google 发布的 JS 代码规范,你需要了解什么?

    Posted by : lon.y@qq.com on 2018年4月10日

    Google为了那些还不熟悉代码规范的人发布了一个JS代码规范。其中列出了编写简洁易懂的代码所应该做的最佳实践。 代码规范并不是一种编写正确JavaScript代码的规则,而是为了保持源代码编写模式一致的一种选择。对于JavaScript语言尤其如此,因为它灵活并且约束较少,允许开发者使用许多不同的编码样式。 Google和Airbnb各自占据着当前最流行的编码规范的半壁江山。如果你会在编写JS代码上投入很长时间的话,我强烈推荐你通读一遍这两家公司的编码规

    阅读全文...

  • JavaScript:面试频繁出现的几个易错点

    Posted by : lon.y@qq.com on 2018年4月4日

    1.前言 这段时间,金三银四,很多人面试,很多人分享面试题。在前段时间,我也临时担任面试官,为了大概了解面试者的水平,我也写了一份题目,面试了几个前端开发者。在这段时间里面,我在学,在写设计模式的一些知识,想不到的设计模式的这些知识,就是面试题里面,频繁让人掉坑的考点。所以,今天就总结一下,那些让人掉坑的考点。 2.面向对象编程 关于面向对象和面向过程,个人觉得这两者不是绝对独立的,而是相互相成的关系。至于什么时候用面向对象,什么时候用面向过程,具体情况,

    阅读全文...

  • 一篇文章教会你Event loop——浏览器和Node

    Posted by : lon.y@qq.com on 2018年4月4日

    最近对Event loop比较感兴趣,所以了解了一下。但是发现整个Event loop尽管有很多篇文章,但是没有一篇可以看完就对它所有内容都了解的文章。大部分的文章都只阐述了浏览器或者Node二者之一,没有对比的去看的话,认识总是浅一点。所以才有了这篇整理了百家之长的文章。 1. 定义 Event loop:为了协调事件(event),用户交互(user interaction),脚本(script),渲染(rendering),网络(networking

    阅读全文...