20190309 前端开发周报

Vue中实现token验证;了解这 12 个概念,让你的 JavaScript 水平更上一层楼;如何优雅的在 vue 中添加权限控制;前端工作两年多的回顾;Web 性能优化: 图片优化让网站大小减少 62%;如何在 Web 关闭页面时发送 Ajax 请求;蚂蚁金服如何把前端性能监控做到极致?;如何通俗地解释 TCP 和 UDP 协议和 HTTP、FTP、SMTP 等协议之间的区别?

  1. Vue中实现token验证 在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下: 1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码 2、后端收到请求,验证…
  2. 了解这 12 个概念,让你的 JavaScript 水平更上一层楼 JavaScript 是一门复杂的语言。如果你是一名 JavaScript 开发人员,不管处于什么样的水平,都有必要了解 JavaScript 的基本概念。本文介绍了 12 个非常重要的 JavaScript 概念,但绝对不是说 JavaScript 开发人员只需要知道这些就可以了。 1. 变量赋值(值与引用) JavaScript 总是按照值来给变量赋值。当指定的值是…
  3. 如何优雅的在 vue 中添加权限控制 在一个项目中,一些功能会涉及到重要的数据管理,为了确保数据的安全,我们会在项目中加入权限来限制每个用户的操作。作为前端,我们要做的是配合后端给到的权限数据,做页面上的各种各样的限制。 需求 因为这是一个工作上的业务需求,所以对于我来说主要有两个地方需要进行权限控制。 第一个是侧边菜单栏,需要控…
  4. 前端工作两年多的回顾 我毕业于某普通师范学院计算机相关专业,有两年多的工作经验了吧。技术栈主要有vue,react-native,以后可能会到angular(新公司在用),react web。首先我不是大佬,我只是爱学习,爱钻研技术。 目前坐标北京 工作经历 第一家: 在北京的第一家公司是很传统的服务端渲染为主,前端切图就ojbk了,我当时属于刚接触前端,…
  5. Web 性能优化: 图片优化让网站大小减少 62%图像是web上提供的最基本的内容类型之一。他们说一张图片胜过千言万语。但是如果你不小心的话,图片大小有时高达几十兆。
  6. 如何在 Web 关闭页面时发送 Ajax 请求 有时候我们需要在用户离开页面的时候,做一些上报来记录用户行为。又或者是发送服务器ajax请求,通知服务器用户已经离开,比如直播间内的退房操作。 本文主要分两部分来讲解怎么完成退出行为的上报。 1.事件监听 浏览器有两个事件可以用来监听页面关闭, beforeunload 和 unload 。 beforeunload 是在文档和资源…
  7. 蚂蚁金服如何把前端性能监控做到极致? 了解如何通过 Performance 相关的 API 准确的采集用户性能数据,并如何通过大数据计算加工最终产出用户性能分析产品,以及如何通过性能数据纵向衡量产品性能、发现性能瓶颈。
  8. 如何通俗地解释 TCP 和 UDP 协议和 HTTP、FTP、SMTP 等协议之间的区别? HTTP协议 老王喜欢看岛国小片,时常泡在论坛上和网友交流最新资讯,老王是通过浏览器浏览网页的,而浏览器是借助HTTP协议与论坛服务器沟通交流。 FTP协议 老王购买了该网站的会员,可以无限制下载高清小片,老王是通过浏览器下载影音文件的,浏览器是借助FTP协议与文件下载服务器沟通交流。 SMTP协议 近10个G的…
  9. Vue 性能优化:如何实现延迟加载和代码拆分? 移动优先方法已经成为一种标准,但不确定的网络条件导致应用程序快速加载变得越来越困难。在本系列文章中,我将深入探讨我们在 Storefront 应用程序中所使用的 Vue 性能优化技术,你们也可以在自己的 Vue 应用程序中使用它们来实现快速加载。 Webpack 捆绑的工作原理 本系列文章中的大多数技巧都与如何使 JS 包变得…
  10. 「前端面试题系列8」数组去重(10 种浓缩版)前言 这是前端面试题系列的第 8 篇,你可能错过了前面的篇章,可以在这里找到: JavaScript 中的事件机制(从原生到框架) 理解函数的柯里化 ES6 中箭头函数的用法 this 的原理以及用法 伪类与伪元素的区别及实战…
  11. Web 性能优化: 使用 Webpack 分离数据的正确方法 制定向用户提供文件的最佳方式可能是一项棘手的工作。 有很多不同的场景,不同的技术,不同的术语。 在这篇文章中,我希望给你所有你需要的东西,这样你就可以: 了解哪种文件分割策略最适合你的网站和用户 知道怎么做 根据 Webpack glossary ,有两种不同类型的文件分割。 这些术语听起来可以互换,但…
  12. 深入了解 Vue.js 是如何进行「依赖收集] 在上一章节我们已经粗略的分析了整个的Vue 的源码(还在草稿箱,需要梳理清楚才放出来),但是还有很多东西没有深入的去进行分析,我会通过如下几个重要点,进行进一步深入分析。 深入了解 Vue 响应式原理(数据拦截) 深入了解 Vue.js 是如何进行「依赖收集」,准确地追踪所有修改 深入了解 Virtual DOM …
  13. 前端之未来 “编程是一种修行,应用修行的产物,也是我们与世界交流的方式。未来在哪里并不重要,重要的是以空杯心态持续学习和实践,用心写下每行代码。”
  14. Vue 的小奇技(第八篇):两个鲜有人知的 Vuex 技巧 这篇文章来自于一位很特别的受邀者:Nicolò Mezzopera,他是Pulilab 网站的开发者,一位真大神。我们去年还一起组织过一场在布达佩斯的关于 Vue.js 的线下交流会! 如果你今年 4 月 12 号刚好就在维罗纳,他刚好会在Vue Day Italy 2019 会上发表演讲,这是你偶遇他的好机会哦 :wink:。 介绍完了作者,我们来进…
  15. 7 个开放式的 CSS 面试题及回答策略这个问题可以让面试官了解求职者使用 CSS 的经验。它还可以告诉面试官该人是否将该技能作为业余爱好或在学术或专业环境中学习。
  16. Nodejs教程10:Nodejs的模块化 Nodejs的模块化由于出现的较早,因此它遵循的是CommonJS规范,而非ES6的模块化。 在Nodejs的模块化中,最常用到的有module对象、exports对象、require方法。 其中module和exports用于输出模块,require用于引用模块。 一个简单的模块例子 示例代码:/lesson10/module1.js、/lesson10/require.js 先新建一个mod…
  17. 基于 GitLab CI 搭建前端页面预览服务 前端在粗放开发模式下的痛点 前端业务在近几年迎来一个很好的发展,但关于前端的基础设施并没有跟上前端业务的迅速扩展。业务扩张之后,我们不能再像小作坊一样进行粗放的开发:开发前如何快速规范的初始化项目?开发中如何保证多人高效的合作开发?开发完成后如何保证正确快速的上线?上线后如何管理诸多业…
  18. 简易版本vue的实现用了两年左右的vue,虽然看过vue的源码,推荐黄轶大佬的vue源码分析,相当到位。从头梳理了vue的实现过程。周末又看了一个公开课的vue源码分析,想着自己是不是也可以写一个来实现,说干就干,开始coding! 目前…
  19. js-Promise 一、为什么需要Promise Javascript 采用回调函数(callback)来处理异步编程。从同步编程到异步回调编程有一个适应的过程,但是如果出现多层回调嵌套,也就是我们常说的回调金字塔(Pyramid of Doom),绝对是一种糟糕的编程体验。于是便有了 Promises/A , Promises/A +等规范,用于解决回调金字塔问题。 // 回调金字塔 …
  20. 前端技术周刊 2019-03-04:React 性能优化iOS 12.2 和 Safari 12.1 中包含了更新的智能跟踪预防模块,它将完全防止采用跨站追踪技术的第三方改变顶级域名中的 Cookie,只能在用户最后交互 30 天内通过 Storage Access API 完成 Cookie 读取;document.coo…
  21. CVTE2019春招前端二面凉经3月5日,从中山去往广州,一大早7点多就做好准备了,在高铁站了30分钟,转广州地铁又站了90分钟,去到地铁口,就有一辆cvte的大巴车过来接送,我选择的面试时间是11:00-12:00,但前面的人还没面试完而且12:00…
  22. JS 中的网络请求 AJAX, Fetch, WebSocket AJAX 是 Asynchronous JavaScript And XML 的简称,它可以让页面在不刷新的情况下从服务器获取数据。 XMLHttpRequest 浏览器使用 XMLHttpRequest 对象于服务器通信,它可以使用JSON,XML,HTML和text等格式发送和接收数据。 低版本 IE 浏览器没有 XMLHttpRequest 对象,但是它可以使用 ActiveXObject…
  23. vue.js 开发系列(三)Skeleton 骨架屏渲染 简单来说,骨架屏(skeleton screen) 就是一个页面从 html 下载完成 到 js 下载完成并且执行 数据渲染 这两个时间点之间暂时渲染页面基本结构的方案。 就我的理解,骨架屏优化是有一定场景的,包括且不限于以下几种情况: 有懒加载机制的SPA路由 多页面程序的首页渲染 SPA 中的非懒加载路由,但是数据量…
  24. Vue简史 题记 “谁掌握了过去,谁就掌握了未来”——乔治.奥威尔 前言 发端于2013年的个人项目,已然成为全世界三大前端框架之一,在中国大陆更是前端首选。 它的设计思想、编码技巧也被众多的框架借鉴、模仿。 学习研究Vue的演进,对于前端同学来说,是提高自身认识和水平的法门。 纪略 Ø 2013年,在Google工…
  25. 记一次绘图框架技术选型: jsPlumb VS mxGraph公司项目需要用到绘图框架,绘图部分以前是另一位同事负责,用的是 jsPlumb 框架。由于人员流动,后来这部分我接手了。项目绘图业务需求变得越来越复杂,jsPlumb 已经满足不了我们项目,于是我将目光投到了其他绘…
  26. Vue 的小奇技(第六篇):在 Vue.js 2.6 中不使用 Vuex 来创建 store 特别声明:本文是作者Alex Jover 发布在VueDose 上的一个系列。 版权归作者所有。 译者在翻译前已经和作者沟通得到了翻译整个系列的授权。 为了不影响大家阅读,获得授权的记录会放在本文的最后。 Vue.js 2.6 介绍了一些新的特性,其中我喜欢的一个就是全局 API:Vue.observable 现在你可以在…
  27. 从手机端 H5 制作来看 WEB 动画的术与道 我们在微信朋友圈里经常看到很多人分享 H5 的链接,有的科技感十足,有的展示炫目,有的非常有创意,各大公司也把H5作为他们品牌传播,活动预热的很好方式。企业商户对于这种方式也很有好感,从而导致了 H5 制作行业涌进大批从业者。这几年做过几十个 H5 ,每一次都在思考动画与技术的关系,于是记录下来。 H5 当你…
  28. 白话es6系列一:Array.of()和Array.from()es6新增了二种方法:Array.of()和Array.from(),它们有什么用途呢?在平时的开发中能给我们带来什么方便呢?本篇将从一个创建数组的小问题开始,逐步揭开它们的面纱。
  29. 前端路漫漫-新的开始 从小就对计算机一类的电子产品感兴趣,并且一直憧憬可以成为间谍电影中那种可以随意破解防火墙,控制任意终端的超级黑客,初中的时候曾经试图买过一本黑客教程的书,可惜自己连第一页都看不懂。。。尴尬。。2010年上大学,买了第一款智能手机HTC hero(G3),android 1.5的系统,开启了我的技术之路(暂且算是技术吧)。…
  30. JS实现函数的节流和防抖实现原理:A:用函数的闭包来锁住上一执行的时间,在用这一次执行的时间相比,大于设定的间隔时间则执行闭包内部的this执行会出问题这里用apply修正this指向B:也可以直接把lasTime放到全局去,不用闭包但这样就…
  31. vue+webpack4多页面打包配置多页面配置通常有两种形式,一种是多页面多配置,一种是多页面单配置。因为webpack(3.1以上)可以直接处理一个配置对象的数组,所以可以为每个页面单独写一份配置。  通常来讲,多配置的优点是配置灵活、独立,…
  32. 李狗蛋和二狗子因为 HTTP or RPC 打起来了 从前有两个程序员,一个叫李狗蛋一个叫二狗子,正在启动一个 web 项目。李狗蛋说我们系统交互就用HTTP听我的准没错。二狗子说,为什么我们不用RPC呢听我的准没错?李狗蛋说凭什么要听你?二狗子说那凭什么要听你的?李狗蛋说老子说用HTTP就用HTTP老子天下第一。二狗子脸无表情说了一声,滚…
  33. ES6 Promise 执行解析 作为一门单线程的语言,刚学习 JavaScript 语言的时候,我曾怀疑过 JavaScript 在处理 ajax 数据请求,文件解析等过程效率会很低,而且在执行这些任务较大的代码中,会严重阻塞后面代码的执行。但让人兴奋的是,这门语言具有异步加载的特性。 事件循环 1. 含义 javascript 提供一种机制来处理程序中多个块的执行,…
  34. Vue-cli 的 create 指令是如何创建项目文件的 Vue-cli 是创建 Vue 项目的一个好方法,之前只是使用,没有关注过内部结构是咋样的。最近在做一个组内项目的 cli 工具,参考了一下 Vue-cli 的实现方法。 Vue-cli 项目结构 Vue-cli ),是一个多 package 项目,使用 lerna 进行管理。package 内的 @vue 文件夹下有很多包: 其中与创建项目有关的包,我们主…
  35. 基于webpack4.x项目实战 webpack在前端开发者的世界再熟悉不过了,网上也很多关于webpack的文章,自己也写一下,加深印象 webpack 是js模块打包器,一直在更新,本文是基于 webpack4.29.5 版本,将来的某一天,发觉本文章的一些配置用不了,那可能是webpack已经更新到更高的版本了 webpack4.0的零配置 安装 webpack4 和 webpa…
  36. SpringBoot 实战 (十七) | 整合 WebSocket 实现聊天室昨天那篇介绍了 WebSocket 实现广播,也即服务器端有消息时,将消息发送给所有连接了当前 endpoint 的浏览器。但这无法解决消息由谁发送,又由谁接收的问题。所以,今天写一篇实现一对一的聊天室。
  37. 在 JSX 代码中可以加入 console.log 吗? 作为一名编程老师,我曾看到过我的学生写出了这样的代码: render() { return ( <div> <h1>List of todos</h1> console.log(this.props.todos) </div> ); } 复制代码 这样写不会在控制台打印出期望的内容。而是在浏览器上渲染出 console.log(this.props.todos) 这…
  38. 让我们用gulp写个前端脚手架 公司有个新项目要做官网,需要支持国际化,UI设计了很多页面,老板着急要于是我们就直接用 html + css + jquery分工开发了, ,做出来的项目结构是这样的(直接部署到服务器上): 等到项目维护迭代的时候就很麻烦,遇到了很多问题: 每个html页面都有导航、footer、head等公共页面,修改需…
  39. JS运行时环境 原文地址: The Javascript Runtime Environment 原文作者: Jamie Uttariello 译者语: 本文是在学习的过程中发现的一篇讲述JS机制比较明了的文章,因此尝试翻译了一下。 不是专业的,因此难免有偏颇,欢迎交流指正。 复制代码 通过本文,我们一起了解一下浏览器的JS运行时环境,探究Chrome浏览器V8引擎是如何解析…
  40. 前端水印初探 为了防止信息泄露,保障信息安全,给网页添加水印是一种比较常见的方法。 本文介绍一种添加水印的方法,具有以下特点: 不影响现有代码 可以任意给网页的不同部分添加水印 纯前端 JavaScript 实现 可简单防止用户通过浏览器开发者工具隐藏水印 思考一下,生成的水印需要满足那些需求呢? …
  41. JavaScript 原型和原型链及 canvas 验证码实践 最近在复习 JavaScript 基础,因为工作以后基本上没用过,天天都是拿起框架加油干,确实大部分都忘了。到了原型和原型链这一部分,觉得自己理解的比较模糊。又翻阅了《你不知道的 JavaScript》、阮一峰老师的 JavaScript继承机制的设计思想 还有网络上的各种文章,收获满满(感谢各位作者大佬)。所以整理成这篇文章,加…
  42. 记一次 Vue 项目重构随着公司项目越做越复杂,因前期团队对 Vue 使用经验不足,导致留下比较多坑。再这样下去项目会变成越来越难以维护,于是我对主管说:“主管,我想重构”,便有了这次的重构经历。经过对项目分析,主要存在以下问题:
  43. 手摸手,一起从0到1走进vue的世界(一) 写在前面 相信进来的小伙伴都对vue有一定的了解或者使用,毕竟现在前端最火的框架之一,vue是最好学的和入门相对简单,毕竟是中文吧,亲切感倍增,鄙人呢,现在的工作用的主要框架也是vue,平时喜欢追根溯源,最近身边很多小伙伴去面试或者做面试官,反馈的某某大佬,写代码棒棒的,但在原理和使用场景方面不够透彻,…
  44. 前端进击的巨人(八):浅谈函数防抖与节流本篇课题,或许早已是烂大街的解读文章。不过春招系列面试下来,不少伙伴们还是似懂非懂地栽倒在(~面试官~)深意的笑容之下,权当温故知新。
  45. Git基础知识教程整理(Git分支管理)git checkout命令加上-b参数表示创建并切换。git branch或者(git branch -a)后面不跟分支名时指列出所有分支,当前分支前面加*。
  46. 7个 Javascript 面试题及回答策略这个问题用来评估基础编码知识。答案可以有多种,所以应该注意倾听具体的问题,并尽量全面回答,来展示自己对单体应用与微服务架构的理解。
  47. 记一次Promise在api接口合并中的妙用 关于接口合并(不知道有没有专门的术语,这里姑且如此描述),在这里解释一下,就是打开新页面第一次请求数据是一个api接口,滚动到底部加载更多数据时是另一个api接口 一. 前言 上次作者在个人项目中遇到的post预检请求bug,水了一篇小文《 记一次跨域post请求数据之preflight request 》,这次再分享一下个人在…
  48. Webpack 快速上手(上) 作者 | 朱士奇 杏仁前端开发工程师,代码洁癖症早期,关注前端技术。 嫌啰嗦想直接看最终的配置请戳这里 webpack-workbench(https://github.com/onlymisaky/webpack-workbench) 由于文章篇幅较长,为了更好的阅读体验,本文分为上、中、下三篇: 上篇介绍了什么是 webpack,为什么需要 webpack,webpack …
  49. 13 个超实用的 Vue PC 端框架 1. Element Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 2. iView 一套基于 Vue.js 的高质量UI 组件库 3. vue-element-admin vue-element-admin是基于 Vue2.0,配合使用 Element UI 组件库的一个前端管理后台集成解决方案。它使用了最新的前端技术栈,提炼了典型的…
  50. 深入剖析 React Native 下一代架构重构 “我们通过源码分析给大家简单介绍了 Facebook 的 React Native 下一代框架的设计,相信不管从性能体验和功能上都会有很大的变化。”
  51. 【算法解析LeetCode by Javascript】213. 打家劫舍 II你是一个专业的小偷,计划偷窃沿街的房屋,每间房内都藏有一定的现金。这个地方所有的房屋都围成一圈,这意味着第一个房屋和最后一个房屋是紧挨着的。同时,相邻的房屋装有相互连通的防盗系统,如果两间相邻的房…
  52. 学习 PixiJS — 交互工具Pixi 内置一组功能有限的用于鼠标交互和触摸交互的方法,但是对于游戏和应用程序所需的丰富交互性,建议使用第三方库来简化操作,这篇文章介绍的是 Tink 库,它有通用的指针对象、拖放精灵、按钮对象、键盘控制 …
  53. 从图形到像素:前端图形编程技术概览 图形是人与人之间传递信息的媒介,直观性远胜于口头语言和书面语言。4000 多年前,古巴比伦人在石块上绘制建筑物的平面图;2000 多年前,古希腊人用图形表达建筑思想,而与其相关的数学直到文艺复兴时期才开始完善。 —— 摘自《交互式计算机图形学(第七版)》 将以上的理念带入到计算机领域,图形是计算机向用户传递…
  54. vueX10分钟入门通过本文你将: 1.知道什么是vueX. 2.知道为什么要用VueX. 3.能跑一个VueX的例子。 4.了解相关概念,面试的时候能说出一个所以然 5.项目中用Vuex知道该学什么东西。 好,走起。 1.什么是vueX? {代码…} 翻译成人…
  55. 你也许不知道的Vuejs – 最佳实践(3) 相信大多数使用 Vue 项目都会面临国际化的问题,而 vue-i18n 便是国际化的不二之选,它用起来非常简单,但是同时也会带来一些问题和挑战。本篇是个人在项目上国际化时一些经验的总结,希望能在国际化的道路上帮到你。 基本使用 vue-i18n 官方文档介绍的很清楚,先在 src/lang 目录下分别创建…
  56. 说说 Egg.js 中的多进程增强模型(二) 从说说Egg.js中的多进程增强模型(一)中我们了解到了多进程模型之间的通信方式和各个类之间的关系,可以用下面这张图进行回顾: conclusion.jpeg 所有对于APIClient的方法调用,最终都会将调用执行到follower.js / leader.js这两个实例中,在fo…
  57. webpack系列-插件机制杂记 系列文章 Webpack系列-第一篇基础杂记 webpack系列-插件机制杂记 前言 webpack本身并不难,他所完成的各种复杂炫酷的功能都依赖于他的插件机制。或许我们在日常的开发需求中并不需要自己动手写一个插件,然而,了解其中的机制也是一种学习的方向,当插件出现问题时,我们也能够自己来定位。 Tapable Webpac…
  58. WebSocket 从入门到写出开源库 我已经 2 个月没有发文了,看到有人问: ‘那个专注爬虫小奎因去哪了?’,我就赶紧跳出来了。 另外说明一下,德玛西亚之翼-奎因这个 ID 现在换成了 AsyncIns 我计划在今年的夏天去北京,在去之前我需要做好技术准备,所以最近一直是在学习。我的学习方式很简单明了:看文档、读源码、造轮子。造轮子是我认…

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

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


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流