20190821 前端开发日报

使用 Vue 实现一个虚拟列表;从零开始实现一个Vue级联组件;Vue中keepalive的深入理解和使用;手摸手教你用Canvas实现给图片添加平铺水印;原生js深入理解系列(三)— 事件冒泡的分析以及如何防止事件冒泡;Promise由浅入深;React hooks实战总结;CSS实现镂空遮罩

  1. 使用 Vue 实现一个虚拟列表 因为 DOM 性能瓶颈,大型列表存在难以克服的性能问题。 因此,就有了 “局部渲染” 的优化方案,这就是虚拟列表的核心思想。 虚拟列表的实现,需要重点关注的问题一有以下几点: 可视区域的计算方法 可视区域的 DOM 更新方案 事件的处理方案 下面逐一分解说明。 可视区域计算 可视区域的计算,就是使用当前...
  2. 从零开始实现一个Vue级联组件本文实现的是一个省、市、县...多级联动组件,当组件渲染完成后默认会加载出所有的省名称,当用户点击某个省的名称后,右边会自动添加一列显示该省下对应的市名称列表,当用户点击某个市后,右边又会自动添加一列...
  3. Vue中keepalive的深入理解和使用 在平常开发中,有部分组件没有必要多次初始化,这时,我们需要将组件进行持久化, 使组件的状态维持不变 ,在下一次展示时,也不会进行重新初始化组件。 也就是说, keepalive 是 Vue 内置的一个组件,可以 使被包含的组件保留状态,或避免重新渲染 。也就是所谓的 组件缓存 基本用法 //被keepalive包含的组...
  4. 手摸手教你用canvas实现给图片添加平铺水印类似这样的效果首先想到的是用canvas完成这种功能,因为我之前也没有接触过canvas,所以做这个功能的时候,就是一步一步的摸索中学习,过程还是挺nice的,接下来跟我一步步来实现这个功能以及发现一些canvas的坑吧。
  5. 原生js深入理解系列(三)--- 事件冒泡的分析以及如何防止事件冒泡 在上一任务基础上继续JavaScript的体验 接触一下JavaScript中的高级选择器 学习JavaScript中的数组对象遍历、读写、排序等操作 学习简单的字符串处理操作 任务描述 参考以下示例代码,读取页面上已有的source列表,从中提取出城市以及对应的空气质量 将数据按照某种顺序排序后,在resort列表中按照顺序显示出来 一、总...
  6. Promise由浅入深 在Promise出现以前,处理一个异步网络请求,大概如下 // 请求 代表 一个异步网络调用。 // 请求结果 代表网络请求的响应。 请求1(function(请求结果1){ 处理请求结果1 }) 复制代码 乍一看,好像没什么问题,但现在需求变了,需要在第一个请求的基础上,去执行第二个网络请求,代码如下。 请求1(function(请求结果...
  7. React hooks实战总结react 于19年2月份在16.8版本中新增了hook这一特性,已经过去了半年多了,社区的各种文章解析页汗牛充栋,本文将结合自己的项目实践,对react hooks做一个全面的讲解,俗话说没吃过猪肉,还没见过猪跑吗?确实,...
  8. CSS实现镂空遮罩 前一阵子面试被问题到这个问题,突然懵逼了,脑子一片空白,以前知道这种效果,比如什么值得买的改版引导页面: 当时再紧张也应该打出一种实现方法,就是什么值得买这种使用图片实现 它首先加了一个半透明的黑色蒙层( background-color: rgba(0,0,0,.8) )然后添加提前制作好的图片作为子元...
  9. 想学Node.js,stream先有必要搞清楚流的英文stream,流(Stream)是一个抽象的数据接口,Node.js中很多对象都实现了流,流是EventEmitter对象的一个实例,总之它是会冒数据(以 Buffer 为单位),或者能够吸收数据的东西,它的本质就是让数据流动起...
  10. 一步步带你实现web全景看房——three.js canvas画2d相信大家都很熟悉了,但3d世界更加炫酷。我们直接从three.js入手。下面我们从0开始来摸索一下3d世界 1. 基本概念 在THREEjs中,渲染一个3d世界的必要因素是场景(scene)、相机(camera)、渲染器(renderer)。渲染出一个3d世界后,可以往里面增加各种各样的物体、光源等,形成一个3d世界: ...
  11. css3效果大集合(1)1、背景渐变色效果 {代码...} 2、三角形效果 {代码...} 3、圆环效果 {代码...} 4、div上下跳动 {代码...} 5、加载loading效果 {代码...} 文章链接
  12. 讨论:JS你阅览无数,但你知道this在其中所扮演的角色吗? 对于许多刚刚接触前端的学者来说,this时常出现在编程中。虽然知道this用途的强大,但对于提示的作用并不是过于了解,而今天就让Damon跟大家说说this在JS中能够扮演的角色。 前提先知: 对于在开始讲解this之间我们需要知道,从java或者是从PHP等标准语言对于this的看法来说。大多数情况下,虽说this能够使用...
  13. HTTP/2:更快的页面加载时间也许人们已经听说过 HTTP2,有很多数大公司都使用HTTP2,如Google、Youtube、Facebook ......
  14. 你了解Promise吗?(这可能是讲述promise最完整的专栏) 在异步编程中,Promise扮演了举足轻重的角色,它解决了ajax请求过程中的回调地狱的问题,令代码更具可读性。下面的介绍中,笔者会通过一些片段代码,加上一些其自己的理解带大家一起重新温故一下Promise为编程所带来的便利。 Promise是抽象异步处理对象以及对其进行各种操作的组件; Promise很重要!很重要!很重要!对...
  15. Vue.js中最重要的角色-组件 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级...
  16. quickjs到底能干什么 又来讨论QuickJS!!! QuickJS刚出来就引起了很多人的关注及讨论,但是毕竟比较新而且底层构建又是C语言,所以入门门槛还是挺高的,后面跟进下来的人估计也没那么多。 但是帕奇我还是很敢兴趣的,所以有继续关注下来。 首先QuickJS在知乎也有个个大神发声,有讲解到底是干嘛用的,而已是否是日后趋势: strip hello...
  17. 【重学前端学习笔记】关于类型,有哪些你不知道的细节 在学习《关于类型,有哪些你不知道的细节》一章节中,讲到了 javascript 内置了 Symbol.toPrimitive 属性,可自定义类型转换操作。 typeof 我们最常使用 typeof 来进行类型检测,对于基本类型使用 typeof 能得到我们想要的结果 console.log(typeof '123') //'string' console.log(typeof 1...
  18. 带你入门并掌握Webpack4(实战篇三) 上篇 带你入门并掌握Webpack4(实战篇一) 上篇 带你入门并掌握Webpack4(实战篇二) 17.PWA 配置 demo17 源码地址 本节使用 demo15 的代码为基础 我们来模拟平时开发中,将打包完的代码防止到服务器上的操作,首先打包代码 npm run build 然后安装一个插件 npm i http-server -D 在 package.j...
  19. 深度揭秘Vue的事件机制 这个系列讲到这里,Vue基本核心的东西已经分析完,但是Vue之所以强大,离不开它提供给用户的一些实用功能,开发者可以更偏向于业务逻辑而非基本功能的实现。例如,在我们日常开发中, @click=*** 用得飞起,但是我们是否思考,Vue如何在后面为我们的模板做事件相关的处理,自定义事件的原理和原生dom事件有不同的地方吗...
  20. 为什么webpack配置中常常用path库处理路径 我们常常发现在webpack中或一些对于路径相关的配置文件中常常使用path库进行处理 像是下面这样 entry: { bundle: , }, output: { path: path.resolve(__dirname, '../dist/c...
  21. 使用 CSS Grid Generator来快速使用及学习 Grid 布局CSS Grid Generator是一个由Sarah Drasner创建的免费工具。它是一个可视化设计工具,允许咱们创建一个基本的 grid 布局,然后就可以使用生成对应的代码,帮助咱们快速布局。
  22. ReactNative分布式热更新系统热更新是一个非常方便的方案。在应对大量用户和深度定制的时候一定不能使用开源的方案。一般第三方的这种方案,服务器带宽较小,或者不够灵活,不能满足自己的想法。这里推荐自己实现对应的热更新方案。只需要少...
  23. 基于原生JS验证表单组件:xy-formform表单元素大家可能都用到过,除了可以提交表单外,还有一些内置的表单校验,比如require、minlength、maxlength,还有各种类型的input,比如type=email可以校验是否是邮箱类型,如果不满足还可以使用pattern进...

关注github前端日报 订阅精彩文章

前端日报栏目数据来自码农头条,每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等,为开发者提供动力,如果觉得内容对你有用,记得分享给你的小伙伴。进入码农头条查看更多

原文:20190821 前端开发日报 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/fe-daily-20190821.html)