5行代码带你实现一个js的打字效果；Web性能优化之——浏览器缓存；Vue.directive 实现元素scroll逻辑复用；webpack构建流程及梳理；简单使用vue-cli；一个多层 if / else 嵌套的代码重构案例(JavaScript)；迫于菜 – Vue.js 源码（五）；前端部署演化史
-
5行代码带你实现一个js的打字效果 有次看电影:clapper:， 看到屏幕上一个个的文字蹦出来， 感觉像是有人在打字一样， 觉得挺有意思， 于是这里也用js实现了一个。 项目体验地址： 打字效果体验 项目源码地址： 源码地址 效果预览 最简单的打字效果 只要五行代码， 这里直接贴出来： const dom = document.querySelector(‘.cont…
-
Web性能优化之——浏览器缓存 在前端开发中，一个网站的性能最直观体现就是网页打开的速度，而提高网页反应速度的一个方法就是使用缓存。 Web 缓存常用来保存一些常见的资源文件，当 Web 请求抵达资源时，如果本地有“已缓存的”文件，就可以直接从本地读取而不用从原始服务器中提取这个文档。通过设置 Web 缓存，可以达到几点优化： 减少冗余…
-
Vue.directive 实现元素scroll逻辑复用 继上篇Vue 滚动触底 mixins,将对于文档滚动触底的逻辑迁移到某个dom上，将会用到 Vue.directive 来实现代码逻辑复用。 元素滚动 如何实现滚动 元素实现滚动的条件有两个: 有父子两个元素 子元素的高度 > 父元素的高度, 并且父元素设置 overflow:scroll / auto; scrollHeight …
-
webpack构建流程及梳理 webpack的核心功能是通过抽离出很多插件来实现的，因此系统内功能的划分粒度很细，这样做到了完美解偶同时又分工明确，代码容易维护。可以说插件就是webpack的基石，这些基石又影响着流程的走向。这些钩子是通过Tapable串起来的，可以类比Vue框架的生命周期，webpack也有自己的生命周期，在周期里边会顺序地触发一些钩子…
-
简单使用vue-cli 上一篇我们简单的看了看vue的基本用法，就是三步，首先就是用<script>标签引入vue的依赖，然后就是写html标签，在标签中用vue指令绑定一些属性，最后就是new Vue(xxx)实例，在这个实例中有很多的实例属性可以给html标签中那些绑定的属性赋值、或者是绑定事件函数； 这一篇我们来说说vue-cli这样的一个脚手…
-
一个多层 if / else 嵌套的代码重构案例(JavaScript) 日常开发经常会遇到复杂的条件判断, 一般做法就是用 if / else , 或者优雅一点用 switch 来实现多个条件的判断. 如果条件越来越多, 会导致代码越来越臃肿, 如何使用更优雅的方式来实现呢? 案例 先来看一段代码: const clickHandler = (status) => { if(status === 1) { sendLog(‘processing’) jumpT…
-
前端部署演化史 前端一说起刀耕火种，那肯定紧随着前端工程化这一话题。随着react/vue/angular，es6+，webpack，babel，typescript以及node的发展，前端已经在逐渐替代过去 script 引 cdn 开发的方式了，掀起了工程化这一大浪潮。得益于工程化的发展与开源社区的良好生态，前端应用的可用性与效率得到了很大提高。 前端以前是…
-
前端路由的基本原理 目前前端开发最流行的莫过于SPA单页面架构，前端开发的三驾马车 react 、 vue 和 angluarJS 均是基于此模型来运行的。单页面指的是只有一个主页面，通过动态的替换DOM内容并修改URL地址，来模拟多页面的效果，切换页面的功能直接由前台脚本完成。SPA能够模拟多页面应用的效果，归功于 前端路由机制 。它有两种实现方…
-
为什么说学习Javascript是个好主意的5个原因 在往年， Javascript 是一门很受欢迎的编程语言，但是现在依然有很多人问这样的问题：为什么值得学习 Javascript 。几年以来， Javascript 广泛地传播，前端，后端甚至移动开发中无处不在，而且这种编程语言的受欢迎程度并没有下降。在 Javascript 的基础上发展出各种不同的框架（和库），并且几乎在每个需要用户界面的…
-
Vue2.0源码阅读笔记（九）：内置组件 Vue2.0中一共有五个内置组件：动态渲染组件的component、用于过渡动画的transition-group与transition、缓存组件的keep-alive、内容分发插槽的slot。 component组件配合is属性在编译的过程中被替换成具体的组件，而slot组件已经在上一篇文章中加以描述，因此本章主要阐述剩余的三个内置组件。 一、KeepAlive …
-
Websocket实现后端主动向Android推送任务 以前很多推送都是通过前端通过设定一定的时间间隔不断的向服务器获取推送消息，不过这样的缺点是浪费了很多服务器资源，而且也有可能被人滥用，导致服务器异常。于是乎出现了websocket协议。websocket协议的好处是可以实现持久性连接，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。 本篇文章主要讲的是利用…
-
Three.js：走进 3D 的奇妙世界 文章来源：宜信技术学院 & 宜信支付结算团队技术分享第6期-支付结算部支付研发团队前端研发高级工程师-刘琳《Three.js – 走进3D的奇妙世界》 分享者：宜信支付结算部支付研发团队前端研发高级工程师-刘琳 随着人们对用户体验越来越重视，Web开发已经不满足于2D效果的实现，而把目标…
-
JS精进系列之把reduce用起来 Array.prototype.reduce 是JS中一个很神奇的方法, 应该应用场景实在太多了, 比如 实现异步函数串行, 聚合数据等等。本文使用reduce来实现一下我们日常用使用到的工具函数, 希望每个例子都可以自己手动实现一遍, 习惯, 适应使用reduce来解决问题, 跟着JS标准更新自己的技术。 pipe 管道 pipe 管道可能是我们在linux下…
-
浅谈Vue下的components模板 浅谈Vue下的components模板 在我们越来越深入Vue时，我们会发现我们对HTML代码的工程量会越来越少，今天我们来谈谈Vue下的 components模板的 初步使用方法与 应用 我们先来简单的写一段components代码 (局部方法创造模板) <div id=”app”> <haha></haha> </div> /* 这是最简单常用…
前端日报栏目数据来自码农头条，每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等，为开发者提供动力，如果觉得内容对你有用，记得分享给你的小伙伴。进入码农头条查看更多
