20190513 前端开发周报-前端开发博客

有趣的CSS弹跳动画；写了十年JS却不知道模块化为何物？；一次 Web 端大量图片同时加载卡顿问题的优化之旅；灵活运用JavaScript开发技巧；JavaScript DOM 操作简易速查手册；[Vue.js进阶]从源码角度剖析计算属性的原理；JavaScript中的浅拷贝与深拷贝；【vue源码】深度理解v-for

有趣的CSS弹跳动画这是只用了一个div来做的小动画，纯粹利用CSS3的animation来完成，就像是一个正方形在地上弹跳，碰到地面的时候尖角还会压缩变圆，阴影的部分也会随着正方形升高而缩小，至于到底该怎么完成呢？让我们继续看下去。
写了十年JS却不知道模块化为何物？模块化这个问题并非一开始就存在，WWW刚刚问世的时候，html，JavaScript，CSS（JS和CSS都是后来在网景被引进浏览器的）都是极其简单的存在，不需要模块化。模块化的需求是规模的产物，当web page进化到web application，浏览器端处理的逻辑越来越复杂，展现的样式和动画越来多，对于工程的要求也就越来越高。于是模块…
《一次 Web 端大量图片同时加载卡顿问题的优化之旅》由于业务的需要，笔者最近需要实现一个大量图片同时加载的需求。在实现这个需求的过程中，笔者遇到了很多的坑，也总结了一些优化方案。这里将笔者使用或准备使用的优化方案总结一下。（by 苏格团队）
灵活运用JavaScript开发技巧何为技巧，意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺，推动着人类科学技术的发展，同时犹如文字一样承托着人类文化的进步。每写好一篇文章，都会使用大量的写作技巧。烘托、渲染、悬念、铺垫、照应、伏笔、联想、想象、抑扬结合、点面结合、动静结合、叙议结合、情景交融、首尾呼…
#前端技术#【JavaScript DOM 操作简易速查手册】详见：在本文中，作者简要罗列了JavaScript 操作 Dom 的基本方法，涉及元素查询、文档结构遍历、属性及内容操作等内容。（作者：毛瑞）
[Vue.js进阶]从源码角度剖析计算属性的原理最近在学习Vue计算属性的源码，发现和普通的响应式变量内部的实现还有一些不同，特地写了这篇博客，记录下自己学习的成果文中的源码截图只保留核心逻辑完整源码地址可能需要了解一些Vue响应式的原理 Vue 版本： 2.5.21 计算属性的概念一般的计算属性值是一个函数，这个函数会返回一个值，并且其函数内…
JavaScript中的浅拷贝与深拷贝前言文章开始之前，让我们先思考一下这几个问题：为什么会有浅拷贝与深拷贝什么是浅拷贝与深拷贝如何实现浅拷贝与深拷贝好了，问题出来了，那么下面就让我们带着这几个问题去探究一下吧！如果文章中有出现纰漏、错误之处，还请看到的小伙伴多多指教，先行谢过以下↓ 数据类型在开…
【vue源码】深度理解v-for 最近在阅读element源码的，但是element内部有很多 this._l 方法， element 源码里面也找不到，查了一下，原来是vue的内部渲染列表的方法源码位置，代码不长，可以一读三个工具函数 isDef isDef是isDefined的缩写，反过来就是isUndefined，反正就是看它是不是undefined function isDef (v) {…
28岁裸辞转行前端是怎样的一种体验本来题目是没有年龄的。只是在网上常看到“已经25岁是否还适合转行当程序员”之类的问题，就觉得有必要暴露下我的年龄。
Sorry，会JS真的了不起真的可以为所欲为相信每一个想要学习前端的人对于前端三剑客html+css+js都不会陌生，这些可以说是一个前端的标配，而在前端的世界里，没有什么是JavaScript实现不了的，你真的了解js吗？一个优秀的前端怎么能够不会JS？为了让大家在学习JS的路上少走弯路我特意给大家准备了价值 3880元的高端课程大礼包。 1、html+css…
教你如何用 JS 强行装逼，有些想都想不到文/北妈阅读本文需要 3.5分钟一今天北妈来点收藏干货，以下代码部分来自网络总结，我们总追求简短有效的方式，有时候一行代码的奇技淫巧能带来很多代码篇幅减少单行简洁的代码很难维护（有时甚至难以理解），但这并不能阻止广大攻城狮们脑洞，在编写简洁的代码后获得一定的满足感。当然有的…
一张图弄明白 Vuex 里该存放什么样的数据原文： markus.oberlehner.net/blog/should… 大多数人刚上手 Vuex 的时候，首先都想知道，应该往其中存放什么样的数据呢？在对这个问题给出答案的过程中，很多人（包括我）先是来到了“一股脑放进去”的阶段。但是在遭遇了首次障碍后，你很快就会领悟到：这可不是在 Vue.js 应用中管理数据的完美方案啊。在本文中我…
TypeScript：一种思维方式 TS 怎么影响了我的思考方式。
理解promise、async 和await之间的执行关系先看下面的例子 console.log(‘script start’); async function async1(){ console.log(‘async1 start’); await async2(); console.log(‘async1 end’); } async function async2(){ console.log(‘async2 end’); } async1(); setTimeout(function(){ console.log(‘setTimeout’); },0) new Promise(r…
45个有用的JavaScript技巧，窍门和最佳实践变量没有声明而直接赋值得话，默认会作为一个新的全局变量，要尽量避免使用全局变量。 2. 使用===取代== ==和!=操作符会在需要的情况下自动转换数据类型。但===和!==不会，它们会同时比较值和数据类型，这也使得它们要比==和!=快。 === 10 // is false == 10 // is true ’10’ == 10 // is tr…
用最少的代码手工实现一个Promise，5分钟看懂 Promise 采用面向对象的方式封装了回调函数，可以将回调金字塔改为平行的链式写法，优雅的解决了回调地狱,ES7带来了异步的终级解决方案async/await，可以用写同步代码的方式编写异步代码，而Promise正是async/await的基石。 Promise 是一种设计模式，也是规范，历史上曾经出现过Promise A/Promise A+/Promise B/Promis…
前端战五渣学JavaScript——防抖、节流和rAF 看了《JavaScript高级程序设计》和网上的一些博客，感觉对函数节流和函数防抖的概念是反的，以下我写的关于防抖和节流的概念取决于多数人的概念吧，并且基于伦敦前端工程师David Corbacho的客座文章。文章写的很好，并且有对应的代码可以操作，更容易理解。其实我觉得叫什么不重要，这个方法叫节流还是这个方法叫防抖，…
nextTick 在 vue 2.5 和 vue 2.6 之间有什么不同我们知道对于 Vue 来说，从数据变化到执行 DOM 更新，这个过程是异步的，发生在下一个 tick 里。它会创建一个更新队列 queue ，队列中维护着各个属性的 watcher ，在需要时执行、更新它们。在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 Vue.nextTick() …
vue.js应用开发笔记编辑推荐: 本文来自博客园，本文主要涉及到的东西有vue、vue-router、vuex、axios以及nodejs一些后台应用开发，希望对您的学习有所帮助。一、vue.js 1、项目搭建使用vue-cli脚手架，首先必须安装vue、vue-cli：cnpm i vue vue-cli -g，全局安装完成之后我们便可以使用vue-cli脚手架进…
没有废话的vue进阶( 一 ) vue组件主要包含：由vue-router产生的页面，可以称之为路由组件独立基础组件：例如Date和input这之类的可以全局复用的基础组件业务组件，除了以上两种就是业务组件组件精髓 props tppe 类型 default 默认如果是对象，数组，必须要写成方法进行返回 …
利用nodejs搭建 https 代理服务器并实现中间人攻击虽然提到了中间人攻击，但这不是一篇安全类文章，要通过中间人修改https内容，必须客户端信任中间人提供的证书。我做这么一个工作，最原始的需求，是为了解决公司内网环境下 npm 包安装的问题，简单点讲，就是切换仓库和依赖镜像源。常用的 cnpm 也提供镜像功能，也能解决包依赖的硬编码地址问题，但是不支持 lockfil…
web图像优化(5) 避免使用有损编解码器重新压缩图像建议始终从原始图像压缩。重新压缩图像有后果。假设您使用了已经被压缩的质量为60的JPEG。如果您使用有损编码重新压缩此图像，则会变得更糟。每轮新一轮的压缩都会引入分代丢失 – 信息将会丢失，并且压缩伪像将开始建立
纯原生Ajax2.0（不用FormData）实现表单及文件上传通常我们用Ajax上传文件的时候都会用到 FormData ,这种方式比较简单。今天介绍一种用纯Ajax上传文件的方式表单数据可以用一下四种方式进行发送: 1.method:POST,enctype:application/x-www-form-urlencoded (默认编码方式); 2.method:POST,enctype:text/plain; 3.method:POST,enctype:multipar…
Web 技巧 (04) 大漠老师将围绕着 CSS 布局展开为你介绍各项技巧。
【前端刷题笔记02】字节跳动2019面试题客户端请求 -> 服务器响应该请求 -> 服务器确认数据传送完毕，发送关闭连接的响应 -> 客户端发送响应，在2MSL内未收到回复则视为服务器端已收到该响应并关闭连接接口，客户端关闭连接。
没有废话的vue高级进阶( 二 ) 8种组件通信详解 vue组件通信的重要性无需多言。。。但是你肯定没有全部掌握，所以这第二篇文章应运而生 props和$emit props父传子，$emit子传父，看下边代码，清澈的像少女的眼眸。。。emmm Vue.component(‘child’,{ data(){ return { mymessage:this.message } }, …
【CuteJavaScript】GraphQL真香入门教程欢迎关注我的个人主页 && 个人博客 && 个人知识库 && 微信公众号“前端自习课”
如何选取合适的前端动效方案？总结得挺全面的一份清单。
从布局看css基础css布局学习css的主要目的是为了记住各种属性么？NO，最重要的是理解css的定位机制与盒子模型。接下来，从布局的角度来学习css的定位机制和盒子模型，学习之前还是先来提几个问题 1.进行css布局前为什么要学习…
js性能优化浅析当用户输入一个域名网址时，浏览器会将这个域名发送到DNS服务器（这一过程中，我们可以通过改变我们host的配置，将域名配置为我们开发环境的服务器ip。实现远程开发）；通过DNS服务器进行域名解析，拿到对应的服务器ip地址；浏览器拿到服务器的ip后，找到对应的服务器； =>这个过程可…
前端Vue：函数式组件 { functional: true, // Props 是可选的 props: { // … }, // 为了弥补缺少的实例 // 提供第二个参数作为上下文 render: function (createElement, context) { // … } } 复制代码组件需要的一切都是通过 context 参数传递，它是一个包含如下字段的对象： props: 提供所有prop的对…
Vue奇淫技巧1、转发请求config — index.js — module.exports — dev — proxyTable
前端数据Mock 文章目录前言对于前后端分离的开发，两边的开发进度不同是常有的事情，对于已经开发的功能，如何快速有效地模拟接口的请求是提高开发效率的关键，下面来讲讲几种数据 mock 的方法。 http-server 如果我们只是测试一段 JS 代码在对应数据下是否能够跑通，那么我们可以直接使用 no…
js 防抖实战讲解在前端开发中会遇到一些频繁的事件触发，比如： window 的 resize、scroll mousedown、mousemove keyup、keydown …… 为此，我们举个示例代码来了解事件如何频繁的触发： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>频繁…
css3中的变形（transform）、过渡（transition）、动画（animation）属性讲解css3中制作动画的几个属性：css3中的变形（transform）、过渡（transition）、动画（animation）。
前端如何赋能业务你是否头疼于，每天做不完的需求和改不完的bug？你是否发愁，每天撸业务代码，是否能获得技术成长？而追求成就感的你是否想过，你所编写的一行行代码，是在反复的变化中迅速成为遗留代码，还是助公司插上腾飞的翅膀，在你死我活的战场上脱颖而出？因此本文会将业务和前端关联起来讨论，探讨业务发…
Promise 源码解析写promise的时候，发现自己应用了树，链表，前度遍历等方法，觉得对于部分想了解promise机制，并且加深数据结构学习的同学有些许帮助，决定写一篇文章分享出来。不过文笔实在堪忧，没有耐心看下去的同学，可以直接看源码。源码地址 . promise的状态是什么时候变化的 ? 1:通过new Promise()生成的promise的状态变化…
【进阶 6-1 期】JavaScript 高阶函数浅析戳蓝字「高级前端进阶」关注我们哦！本期开始介绍 JavaScript 中的高阶函数，在 JavaScript 中，函数是一种特殊类型的对象，它们是 Function objects。那什么是高阶函数呢？本节将通过高阶函数的定义来展开介绍。高阶函数高阶函数英文叫 Higher-order function，它的定义很简单，就是至少满足下…
你必须知道的Git命令这篇笔记是为了学习Git知识而收集总结的，主要是看受一篇帖子《你可能不知道的15条Git命令》的影响，才想记录这篇笔记的，如有雷同，纯属巧合。
ES6专题— class与面向对象编程在ES5中，我们经常使用方法或者对象去模拟类的使用，并基于原型实现继承，虽然可以实现功能，但是代码并不优雅，很多人还是倾向于用 class 来组织代码，很多类库、框架创造了自己的 API 来实现 class 的功能。
Vue数据绑定简析作为MVVM框架的一种，Vue最为人津津乐道的当是数据与视图的绑定，将直接操作DOM节点变为修改 data 数据，利用 Virtual Dom 来 Diff 对比新旧视图，从而实现更新。不仅如此，还可以通过 Vue.prototype.$watch 来监听 data 的变化并执行回调函数，实现自定义的逻辑。虽然日常的编码运用已经驾轻就熟，但未曾去深究技术背后…
12个提升你javascript能力的概念 javascript 是一门复杂的语言。如果你是一名 javascript 开发者，理解它的一些基础概念是很重要的。本文选取了 12 个 JS 开发者应该掌握的概念，但不代表 JS 开发者需要了解的全部内容。注意：我会在 github 仓库 JS Tips & Tidbits 上持续更新这个列表，如果有兴趣欢迎 star。 1. 值 VS 引用理解 jav…
你再也不用使用 Redux、Mobx、Flux 等状态管理了这个库的作者希望使用 React 内置 API ,直接实现状态管理的功能。看完这个库的说明后，没有想到代码可以这个玩。短短几行代码，仅仅使用 React Hooks ，就实现了状态管理的功能。看完之后，第一想法就是翻译成中文，分享给其他人。提交 Pull Request 后，库作者将我的翻译合并了。同时作者欢迎将 README 翻译成其他语…
看一眼就学会的 HTML 小游戏搭建身边经常会有小伙伴问我有没有办法不买服务器也能上线自己的个人项目，比如不少同学都非常喜欢搭建一个属于自己的博客站点或者小游戏等。
使用CSS实现逼真的水波纹点击效果虽然webkit具有遮罩的能力（webkit mask），不过webkit虽然强大，但在跨浏览器上总是它的罩门，况且在性能上也是往往会造成困扰（这也是为什么chrome要这么吃资源了），因此撇开webkit不谈，我们该用什么方法，才…
《分享 8 个有趣且实用的 API》在日常开发中总是和各种 API 打交道，我们名为前端工程师实为 API 调用工程师。这篇文章我就分享 8 个有趣的 API，你若通过阅读这篇文章对前端增加一点点的乐趣，对我来说也是一种鼓励。（by 小生方勤）
vue权限问题解决方案最近一直在忙着一个用vue来做的权限管理的项目，其实在此之前，我也研究过vue的权限如何实现，并且也为之写过一篇博客，但当真正应用在项目中的时候，还是发现了许多问题，所以此篇也会就着我在项目中遇到的一些问题，拿出来和大家分享一下，当然示例代码还是我的github仓库中的 ant-design-vue-ms 。权限问题解决思…
VueCli+Node+mongodb打造个人博客（含前台展示及后台管理系统）（上）可以看到，在整个项目中，没有页面的跳转只有前后端的数据交换，所有的页面更新都是组件更新和数据更新后端只对数据库进行增删查改，以及接受前端的异步请求返回数据所以本质上这是一个单页面应用所有的重心全部…
简单理解JavaScript原型链什么是原型 ? 我是这样理解的:每一个JavaScript对象在创建的时候就会与之关联另外一个特殊的对象，这个对象就是我们常说的原型对象，每一个对象都会从原型“继承”属性和方法。什么是原型链 ? 一个由有限个原型对象组成的用来实现继承和共享属性的对象链。打个通俗的比方，可以把原型链理解成一个家族…
JS数组扁平化的思路与实现其实最核心的思路就是递归，如果单纯用编程语言实现，而不是使用一些巧妙的API的话，本质的思路就是递归，因为JS数组多层嵌套，实现扁平化的过程其实就是层层递归取出元素的过程，这里给出三种实现JS数组扁平化的方法。纯递归实现扩展运算符降维打击纯递归实现算法的步骤是这样的： …
Webpack 是怎样运行的?在平时开发中我们经常会用到Webpack这个时下最流行的前端打包工具。它打包开发代码，输出能在各种浏览器运行的代码，提升了开发至发布过程的效率。
JavaScript继承解析基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。借助构造函数实现继承缺点：无法继承原型链上的属性和方法 function Person () { this.name = ‘person1′ } Person.prototype.sex = ’10’ Pers…
没有废话的vue高级进阶( 三 ) 组件高级用法及最佳实践世界上有太多孤独的人害怕先踏出第一步。 —绿皮书书接上回，上篇介绍了vue组件通信比较有代表性的几种方法，本篇主要讲述一下组件的高级用法和最佳实践，争取用最少的篇幅占领高地！（多说一句，后续这个系列会有 vue最佳实践和源码解读，我总有办法能让大家看懂，所以点赞关注，不迷…
译| 自定义一个Vue路由器大量的教程在解释Vue的官方路由库vue-router如何集成到现有的Vue应用中做了很好的工作。 vue-router通过向我们提供将应用的组件映射到不同的浏览器URL路由所需的功能，做了出色的工作。简单的应用通常不需要完全成熟的路由库，如vue-router。在本文中，我们将使用Vue构建一个简单的自定义客户端路由器。通过这样做…
一个合格的 Webpack4 配置工程师素养（一）准备开发环境 – 安装node – 安装webpack – npm init 初始化项目目录结构先跑一个小demo // src/index.js import _ from ‘lodash’ function create_div_element () { const div_element = document.createElement(‘div’) div_element.innerHTML = _.join([‘kobe…
开发函数计算的正确姿势——支持 ES6 语法和 webpack 压缩
JS是世界上最好的语言—— 使用Electron开发桌面应用(一) 前阵子用Node+Vue搞了一个小程序的发布系统，开发期间一直在本地跑直到完成全部功能准备部署到服务器才发现了一个问题，根据官方的api小程序想要发布必须要依赖开发者工具！微信开发者工具会在你的本地启一个web服务，我们获取到它的端口号然后配合api才能完成上传。。。这就陷入了一个非常尴尬的局面，他喵的小程序开…
《JS 函数的 6 个基本术语》让我们谈谈什么是：lambdas（匿名函数）、 first-class functions（头等函数）、higher-order functions（高阶函数）、unary functions（一元函数）、currying（柯里化）和pure functions（纯函数）。（by reahink）
JS笔记(17)：事件事件：一件事情或者一种行为（对于元素来说，他的很多事件都是天生自带的），只要我们去操作这个元素，就会触发这些行为如果没有事件函数赋值，事件默认值为null 系统默认事件：null 自定义事件：undefined 元素天生自带的事件(事件本身不带on）： 1) 【鼠标事件】 …
Vue项目打包后动态获取自定义变量一般使用 Vue 项目连接后端请求，使用的 axios import axios from ‘axios’ export const CMSAPI = axios.create({ baseURL: "http://localhost:8080", timeout: 30000, }); 复制代码 axios 中的 baseURL 一般是访问地址 Vue 项目打包后，如果我们需要修改这个 baseURL 就需要修改代码重新 buil…
自学NodeJS设置Header 服务端设置CORS 只允许127.0.0.1:8888进行跨域请求就可以这样设置 response.writeHead(200,{ ‘Access-Control-Allow-Origin’:’http://127.0.0.1:8888′ }) 复制代码 CORS的预请求我们前端如果在header里携带了token,那么后台则需要做一下类似的配置： response.writeHead(200,{ ‘Access-Control-Allow-O…
Node.js一行代码实现静态文件服务器 nodejs不仅仅可以用来写服务端接口，用来做静态文件服务器替代nginx的功能，也是分分钟可以搞定的。话不多说，先上代码： var server=http.createServer(function (req,res){ fs.createReadStream(Path.resolve(__dirname,"."+req.url)).pipe(res); }) 复制代码在项目根目录建一个hello.html文件测…
为管理复杂组件状态困扰？试试 vue 简单状态管理 Store 模式在 vue 中，通信有几种形式：父子组件 emit/on vuex 中共享 state 跨组件 EventBus 文档中的提到的 Store 模式却鲜有人去使用讨论。笔者在研究 ElementUI的Table组件的代码组织方式，以及在自己 ElementUI 表单编辑项目中实践之后觉得其在复杂组件组织上非常有用，是一个被忽视的组件通信方法。 …
一图理解VUE生命周期感谢作者：[链接]
理解JavaScript的闭包闭包真言理解闭包情景一：函数作为返回值理解闭包情景二：函数作为参数传递到其他函数中理解闭包情景三：循环和闭包实际开发中闭包的应用闭包优缺点闭包真言 JavaScript中闭包无处不在，你只需要能够识别并拥抱它。当函数可以记住并访问所在的词法作用域，即使函数是在当前…
基于 Jenkins、Gitlab、Harbor、Helm 和 Kubernetes 的 CI/CD（二）上节课我们完成了最基本的流水线流程，接下来的工作就是来实现之前的具体 Pipeline 脚本了。 Pipeline 第一个阶段：单元测试，我们可以在这个阶段是运行一些单元测试或者静态代码分析的脚本，我们这里直接忽略。第二个阶段：代码编译打包，我们可以看到我们是在一个maven的容器中来执行的，所以我们…
简谈JSONP 浏览器出于安全方面的考虑，只允许与同源下的接口交互。所谓"同源"指的是"三个相同"。协议相同：如都是 http 或者 https 域名相同：www.example.com/dir 和 www.example.com/dir2/ 端口相同：如都是80端口目前，如果非同源，共有三种行为受到限制。 …
babel-runtime和babel-polyfill的介绍和使用 Babel默认只转换新的JavaScript 语法，而不转换新的API。例如，Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，及一些定义在全局对象上的方法（比如 Object.assign）都不会转译。如果想使用这些新的对象和方法，则需要为当前环境提供一个polyfill。 babel-polyfill 目前最常…