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