20190714 前端开发周报

我们也许并不了解Promise;2019 年常用 JavaScript 正则大全;项目中使用 TypeScript 的一些感悟;JavaScript 中的对象(二)- 继承与多态;web技巧(13);编写 Vue.js 组件前需要知道的 10 件事;2019 年的 JavaScript 性能;深入浅出Vue响应式原理

  1. 我们也许并不了解Promise 译者: 辣椒炒肉 原文地址:pouchdb.com/... JavaScript 开发者们,承认一个事实吧:我们也许并不了解Promise。 众所周知,A+规范所定义的Promise,非常棒。 有个很大的问题是,在我过去使用Promise的一年中,看到很多开发者们,在用PouchDB API或者是其他的Promise API,但是却不理解其中的原理。 不相信么...
  2. 2019 年常用 JavaScript 正则大全 /^((?: d|2 ): d: d$)/ 复制代码 12小时制时间(hh:mm:ss) /^(1 |0? ): d: d$/ 复制代码 base64格式 /^s*data:( +/ +(; += +)?)?(;base64)?,( *?)s*$/i 复制代码 数字/货币金额(支持负数、千分位分隔符) /(...
  3. 项目中使用 TypeScript 的一些感悟上周发布了一款名为 Smartour 的工具,是完全采用 TypeScript (以下简称 ts)来开发的。抛开以前做业务的时候的不完全使用,这次实践可以算是我第一次真正意义上的使用 ts。由于写法上的不同,以及对不熟悉事物...
  4. JavaScript 中的对象(二)- 继承与多态 原型链 你如果熟悉一般静态语言的继承模式,比如 Java、C++,你会发现这些语言的继承其实在代码实现上面都是通过类来进行的,但是问题就是 JavaScript,具体说是在 ES5 以及之前的版本是没有类这个概念的,那么继承如何进行呢?在 JavaScript 的对象创建中,我们知道每个对象都有一个 prototype,也就是它的原型,原...
  5. Web技巧(13) 任何一门语言都有自己的小技巧和新特性,比如Web的三大基石HTMLCSS和JavaScript,在各自的社区中总是有同学在不同的时候梳理一些相关的新特性和小技巧。让这些特性更好的服务于社区,尽量的让大家更好的理解和掌握。另外一个目的是,让更多的同学能把这些新特性运用于自己的项目中。在这一期中,将围绕着JavaScript的...
  6. 编写 Vue.js 组件前需要知道的 10 件事 本文介绍了编写 Vue.js 组件前需要知道的 10 件事,其中包括:组件可以全局或局部加载;延迟加载 / 异步组件;必需的 Props;使用 $emit 触发自定义事件;多 Props 绑定和覆盖等等。 1. 组件可以全局或局部加载 Vue.js 提供了两种加载组件的方法:一种是 Vue 实例中的全局加载,另一种是组件级的加载。两种方法都有...
  7. 2019 年的 JavaScript 性能 本文翻译自 V8 官方博客的这篇《The Cost Of JavaScript in 2019》,原文作者:Addy Osmani (@addyosmani )。 建议阅读本文前先读完这篇文章: 使用Script-Streaming提升页面加载性能 首发于猫眼前端团队公众号:MY-FEE 过去几年中,JavaScript 性能的大幅改进很大程度上依赖于浏览器解析和编译 JavaScript 的速...
  8. 深入浅出Vue响应式原理Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。这使得状态管理非常简单直接,不过理解其工作原理同样重要,这样你可以避开一些常...
  9. vue中8种组件通信方式, 值得收藏 之前写了一篇关于vue面试总结的文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就...
  10. 微前端详解 最近接触了一些DevOps、微服务等概念,想要找一篇文章大致了解一下,看到个微前端标题比较新颖于是选择翻译这篇文章。原文https://martinfowler.com/articles/micro-frontends.html 近年来,微服务已经爆红,许多组织使用这种架构来避免大型、单一后端的限制。虽然已经有很多关于这种构建服务器端软件的风格的文章,但...
  11. HTTP 高性能缓存:Pike 2.0 HTTP缓存服务,提供高效简单的HTTP缓存服务,类似于varnish但配置更简单。 主要特性 标准化的基于HTTP头Cache-Control缓存控制 界面化的配置,简单易用 智能的压缩方式,根据客户端选择br或者gzip 应用配置可保存至etcd中,非常方便横向扩展 界...
  12. Vue 实现前端权限控制 登录访问权限控制是对用户的校验。在用户登录成功之后,后台将返回一个token,之后前端每次进行接口请求的时候,都要带上这个token。后台拿到这个token后进行判断,如果此token确实存在并且没有过期,则可以通过访问。如果token不存在或后台判断已过期,则会跳转到登录页面,要求用户重新登录获取token。 做法一 ...
  13. 关于JS小数运算的精度误差问题 其实这里就涉及到 js 内部储存的一个问题了。在计算机领域当中呢,数字无论是定点数还是浮点数,都是以二进制的形式储存的。而在我们的 js 当中,数字是采用 IEEE754 的双精度标准进行储存,当然呢,这里我们也不用纠结这个内部到底是怎么储存的,我们可以单纯的理解为只是储存一个数字用到的二进制位数比较多而...
  14. Node.js 的原理总结 先来说说nodejs最常被提到的几个关键词,“单线程”,“非阻塞异步IO”,“事件循环”。接下来主要来通过这几个关键字总结一下nodejs的内在原理,以及引申出的一些问题。 二. nodejs是单线程吗? 如果说nodejs是单线程语言,可以想象一下,一个单实例的nodejs的服务器同时接受100个用户请求时,第100个用户的请求要等前面9...
  15. 面试必问之JSONP 个人笔记,暂时没有附带源代码,见谅。 第一部分阐述什么是JSONP,附带面试题一个。 第二部分是发展历程,img法,script法,JSONP法。没有源代码阅读会笔记困难,再次见谅。 第三部分随笔记录一些基础知识。 JSONP 请求方:frank.com 的前端程序员(浏览器) 响应方:jack.com 的后端程序员(服务器) ...
  16. 30-前端错误日志上报及网站统计(sentry+matomo) 这是坚持技术写作计划(含翻译)的第30篇,定个小目标999,每周最少2篇。 本文配合rancher1.6(手头一个测试集群没升级到最新的2.x)讲解如何搭建并配置日志错误上报框架 Sentry 及网站统计分析框架 matomo 的搭建及接入vue(本文以 iview-admin 为例)项目。 背景简述 sentry 项目运行过程中,难免出现bug,...
  17. JavaScript 实用窍门总结 简评:一开始 JavaScript 只是为网页增添一些实时动画效果,现在 JS 已经能做到前后端通吃了,而且还是年度流行语言。本文分享几则 JS 小窍门,可以让你事半功倍 ~ 1. 删除数组尾部元素 一个简单方法就是改变数组的length值: const arr = ; // truncanting arr.length = 3; console.log(arr)...
  18. 深入理解 JavaScript, 从作用域与作用域链开始 1. 什么是作用域 作用域是你的代码在运行时,某些特定部分中的变量,函数和对象的可访问性。换句话说,作用域决定了变量与函数的可访问范围,即 作用域控制着变量与函数的可见性和生命周期 。 2. JavaScript中的作用域 在 JavaScript 中有两种作用域 全局作用域 局部作用域 如果一个变量在函数外面...
  19. 用Vue写几个小游戏玩玩 前言 作为一名Vue的初级爱好者,表示Vue在手,天下我有(手动滑稽)。 介绍 Github: github.com/ordinaryA/A… 在线Demo 扫雷 :在线试玩 管道小鸟 :在线试玩 贪吃蛇 :在线试玩 扫雷 思路 棋盘的每个格子分为三种类型的其中一种: 雷:emmm 就是一颗雷 数字:...
  20. 前端模块化一——规范详述 前言 模块化——这个东西可以说在研发圈子里,耳熟能详,家喻户晓。 都快说烂了,今天为什么又拿出来讲? 作为一个开发经验刚满一年的前端, 接触过ES6 的import,nodejs 的require,webpack下的import或者require。那么他们之间到底有什么区别? CommonJS 听说过,nodejs的模块化实现?AMD听说过,也听说过CMD...
  21. 基于Vue实现后台系统权限控制需求分析 基础需求 项目的基础需求是: 系统管理员拥有最大权限,管理所有企业; 企业管理员拥有该企业所有权限,可下放权限给子账户; 子账户拥有限制权限,且可被随时更改。 根据权限列表展示隐藏相对应菜单栏...
  22. 保持Node.js的速度-创建高性能Node.js Servers的工具、技术和提示Node 是一个非常多彩的平台,而创建network服务就是其非常重要的能力之一。在本文我们将关注最主流的: HTTP Web servers.
  23. 一周 GitHub 开源项目推荐:阿里巴巴、爱奇艺、Flutter、机器学习…… 一周 GitHub 开源项目推荐 点击链接或图片即可阅读 喜欢请分享到朋友圈哦 Pont:阿里巴巴开源的前端接口层工具 pont 在法语中是 “桥” 的意思,寓意着前后端之间的桥梁。 Pont 把 swagger、rap、dip 等多种接口文档平台,转换成 Pont 元数据。Pont...
  24. HTML5 之跨域通讯(postMessage) 很多情况下,我们受到浏览器的安全策略限制。如何能规避此限制,并且能安全的使用跨域通讯,这就不得不介绍一下 postMessage 了。 一、关于 postMessage window.postMessage() 方法可以安全地实现跨源通信。 通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为 https ),端口号(...
  25. 介绍 5 个实用的 Ajax 库 在这篇文章中,我们将介绍一些用于ajax调用的最好的JS库,包括jQuery,Axios和Fetch。欢迎查看代码示例! AJAX是用来对服务器进行异步HTTP调用的一系列web开发技术客户端框架。 AJAX即Asynchronous JavaScript and XML(异步JavaScript和XML)。AJAX曾是web开发界的一个常见名称,许多流行的JavaScript小部件都是使用A...
  26. 理解JavaScript的核心知识点:原型 JavaScript 中的原型机制一直以来都被众多开发者(包括本人)低估甚至忽视了,这是因为绝大多数人没有想要深刻理解这个机制的内涵,以及越来越多的开发者缺乏计算机编程相关的基础知识。对于这样的开发者来说 JavaScript 的原型机制是一个尚待发掘的大宝藏,深入了解下去会让大家在编程这条路上走得更长远,当然你不能妄...
  27. 前端进阶必备:手撕排序算法 作者:陈大鱼头 github:https://github.com/KRISACHAN 算法是什么? 算法(Algorithm) 已经是一个老生常谈的概念了,最早来自于数学领域。 算法(Algorithm) 代表着用系统的方法描述解决问题的策略机制,可以通过一定规范的 输入,在有限时...
  28. 十分钟搞懂 HTTP 和 HTTPS 协议? 1.什么是协议? 网络协议是计算机之间为了实现网络通信而达成的一种“约定”或者”规则“,有了这种”约定“,不同厂商的生产设备,以及不同操作系统组成的计算机之间,就可以实现通信。 2.HTTP协议是什么? HTTP协议是超文本传输协议的缩写,英文是Hyper Text Transfer Protocol。它是从WEB服务器传输超文...
  29. 前端视频控件使用文档该项视频控件是npm库中的一个控件,该控件的源地址为:[链接] 。由于此款控件使用起来较为简单,且没有过多复杂按钮,只能实时播放摄像头画面,适合项目要求,因此选定该款控件作为视频播放控件。
  30. 关于前端设置过期时间开发过程少不了会遇到给某个状态设置过期时间的需求,例如:进入页面有个默认弹窗,用户关闭之后在 1 小时之内再次打开不能再弹; 面对这样需求我们首先想到的是需要设置一个变量去控制弹窗的隐藏(因为默认是开启的),...
  31. vue项目中引入iconfont 对于前端而言,图标的发展可谓日新月异。从 img 标签,到雪碧图,再到字体图标, svg ,甚至 svg 也有了类似于雪碧图的方案 svg-sprite-loader 。雪碧图没有什么好讲的了,只是简单地利用了 background-position 来做图标定位。今天咱们先聊聊怎么使用字体图标和 svg 图标。其实字体图标也不陌生了, bootstrap , font-...
  32. JS 把值转换成 String 的5个方法 译者:Jessie 原文:链接 第一次翻译,当是锻炼下阅读能力,欢迎指正~ 如果你订阅了Airbnb 的 JavaScript 风格指南,就会知道最好的方法是使用 "String()" :+1: 我用他是因为它是最明确的——容易让其他人明白你代码的意图 请记住,最好的代码并不需要多聪明的方式,而是能将你的代码理...
  33. JavaScript 编程精解 中文第三版 二十、Node.js 来源: ApacheCN『JavaScript 编程精解 中文第三版』翻译项目 原文:Node.js 译者: 飞龙 协议:CC BY-NC-SA 4.0 自豪地采用谷歌翻译 部分参考了 《JavaScript 编程精解(第 2 版)》 A student asked 'The programmers of old used only simple machines and no programming languages, yet the...
  34. vue 2.6 中 slot 的新用法 为了保证的可读性,本文采用意译而非直译。 最近发布不久的Vue 2.6,使用插槽的语法变得更加简洁。 对插槽的这种改变让我对发现插槽的潜在功能感兴趣,以便为我们基于Vue的项目提供可重用性,新功能和更清晰的可读性。 真正有能力的插槽是什么? 如果你是Vue的新手,或者还没有看到2.6版的变化,请继续阅读。也许学...
  35. 【javascript系列】Object.assign实现浅拷贝的原理以及实现 之前在前面一篇学习了赋值,浅拷贝和深拷贝。介绍了这三者的相关知识和区别。 传送门: www.mwcxs.top/page/592.ht… 本文会介绍浅拷贝Object.assign()的实现原理,然后咱们试着实现一个浅拷贝。 二、浅拷贝Object.assign() 什么是浅拷贝?浅拷贝就是创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。...
  36. 学会 NodeJS 服务器性能优化 ‍‍‍‍点击上方“独立开发者周刊” ‍喜欢本文,请置顶或星标 ‍‍‍ ‍ ‍ 前言 ‍‍‍‍‍‍‍‍‍如果你是一个NodeJS服务器开发工程师,肯定面临过一个问题:如何优化NodeJS服务器的性能。这个问题其实涉及到的内容是非常广的,优化方法也是多种多样的,如果初涉这个领域很有可...
  37. JavaScript基础专题之创建对象几种方式及优缺点(九) 根据《JavaScript高级程序设计》(红宝书)来总结一下创建对象的几种方式及优缺点 1. 工厂模式 function createPerson(name) { var o = new Object(); o.name = name; o.getName = function () { console.log(this.name); }; return o; } var person1 = createPerson('chris'); 复制...
  38. Webpack 4 构建大型项目实践 / 优化 本文所用示例的仓库地址: gayhub 上一节我们解决了工程的开发调试问题,项目的生产和开发环境也已配置完成,还约定了 Webpack 配置文件规范。但它还很粗糙,这一节我们就来一起打磨这套配置。 开发体验优化 使用 ES6 ES6 不仅在原有对象上添加了一些常用方法,还新增了一些新的词法和语法给开发者带来了极大便...
  39. 基于Media Recorder实现js获取摄像头录像数据 通过js截取摄像头图片的功能已经实现了,那么如果我要实时获取录像流或者录像的功能呢? 此篇是基于MediaRecorder API去获取录音数据的,紧接着 js实现网页摄像头截图功能 。 MediaRecorder 用法 var mediaRecorder = new MediaRecorder(stream ); 参数 stream getUserMedia()回调参数或aud...
  40. vue项目实现缓存的最佳方案 在开发vue的项目中有遇到了这样一个需求:一个视频列表页面,展示视频名称和是否收藏,点击进去某一项观看,可以收藏或者取消收藏,返回的时候需要记住列表页面的页码等状态,同时这条视频的收藏状态也需要更新, 但是从其他页面进来视频列表页面的时候不缓存这个页面,也就是进入的时候是视频列表页面的第一页 ...
  41. JavaScript进阶 - 1. 原型和原型链的概念我们好多经常会被问道JavaScript原型和原型链的概念,还有关于继承,new操作符相关的概念。本文就专门整理了原型和原型链的概念,关于对象继承我们后边进行介绍。本文包含对应的示例代码和脑图。如有奇异,欢迎指...
  42. Rx.js 思想入门 function play(movieId, cancelButton, callback){ let movieTicket let playError let tryFinish = () =>{ if(playError){ callback(null, playError) }else if(movieTicket && player.initialized){ callback(null, movieTicket) } } ...
  43. Vue 项目尝鲜(二) 项目结构简析前言 上回我们成功搭建运行了一个 vue 项目,这次的话我们来捋一捋这个项目的结构,当然也是简单看看,深入的话,其实我也不是很懂(手动捂脸)
  44. 基于 Node.js 的轻量级云函数功能实现在万物皆可云的时代,你的应用甚至不需要服务器。云函数功能在各大云服务中均有提供,那么,如何用“无所不能”的 node.js 实现呢?
  45. React的移动端和PC端生态圈的使用汇总对于一项技术,我们不能停留在五分钟状态,特别喜欢一句话,用什么方式绘制UI界面一点不重要,重要的是底层的思维,解决问题和优化的思路。
  46. Vue 项目功能实现:router 传递参数并解决刷新页面参数丢失问题url:[链接]:8081/#/paramsPassingByRouter/paramsMode 页面显示:{"id":"20180101","name":"张三","aka":"z3","age":"18"}
  47. 『ES6知识点总结』Promise 『ES6知识点总结』变量的解构赋值 本文主要内容如下: 1 Promise是什么? 1.1 特点: 1.2 三种状态: 1.3 用处: 1.4 Promise缺点: 1.5 历史过程 2 生成promise实例 3 promise实例的then()方法 4 resolve函数的参数可以是另一个Promise实例 5 Promise的方法(多种) 5.1 Promise.a...
  48. 保护 Node.js 项目的源代码SaaS(Software as a Service,软件即服务),是一种通过互联网提供软件服务的模式。服务提供商会全权负责软件服务的搭建、维护和管理,使得他们的客户从这些繁琐的工作中解放出来。对于许多中小型企业而言,SaaS...
  49. webpack4详细教程,从无到有搭建react脚手架(一) webpack 是一个现代 JavaScript 应用程序的静态模块打包器,前端模块化的基础。作为一个前端工程师(切图仔),非常有必要学习。 webpack官网的文档非常的棒,中文文档也非常给力,可以媲美vue的文档。建议先看概念篇章,再看指南,然后看API和配置总览。看完指南教程后,需要自主动手练习才能更加有影响,...
  50. JavaScript 编程精解 中文第三版 十九、项目:像素艺术编辑器 我看着眼前的许多颜色。 我看着我的空白画布。 然后,我尝试使用颜色,就像形成诗歌的词语,就像塑造音乐的音符。 Joan Miro 前面几章的内容为你提供了构建基本的 Web 应用所需的所有元素。 在本章中,我们将实现一个。 我们的应用将是像素绘图程序,你可以通过操纵放大视图(正方形彩色网格),来逐像...
  51. es6 7个比较有用的技巧有时我们需要过滤数组中值为 false 的值. 例如(0, undefined, null, false), 你可能不知道这样的技巧
  52. js使用AES加密PHP使用Openssl解密最近遇到的几个网站在提交密码时提交的已经是密文,也就是说在网络上传输的密码是密文,这样提升了密码在网络传输中的安全性。
  53. 时区与JS中的Date对象 1884年在华盛顿召开的一次国际经度会议(又称国际子午线会议)上,规定将全球划分为24个时区(东、西各12个时区)。规定英国(格林尼治天文台旧址)为中时区(零时区)、东1-12区,西1-12区。每个时区横跨经度15度,时间正好是1小时。 时区的分类 理论时区 上述时区定义其实是 理论时区 。理论时区的时间采用其...
  54. 使用 VuePress 生成静态文档 VuePress 由两部分组成:一部分是支持用 Vue 开发主题的极简静态网站生成器,另一个部分是为书写技术文档而优化的默认主题。它的诞生初衷是为了支持 Vue 及其子项目的文档需求。 每一个由 VuePress 生成的页面都带有预渲染好的 HTML,也因此具有非常好的加载性能和搜索引擎优化(seo)。同时,一旦页面被加载,Vue 将接...
  55. Go+Vue.js开发Web应用 环境准备 安装go语言,配置go开发环境; 安装node.js以及npm环境; 使用Gin 为了快速搭建后端应用,采用了Gin作为Web框架。Gin是用Golang实现的一种Web框架,api非常友好,且拥有出色的路由性能和详细的错误提示,如果你想快速开发一个高性能的生产环境,Gin是一个不错的选择。 开始一个项目 下...
  56. Javascript 函数式编程:什么是高阶函数?我们为什么需要了解它? 原文: jrsinclair.com/articles/20… 作者:James Sinclair 前端小白 高阶函数是大家经常挂在嘴边的,但是很少有人去解释它是什么,也许你已经知道什么是高阶函数了。但是我们如何在现中使用它们?有哪些例子可以告诉我们什么时候使用,以及他们怎么表现出实用性?我们可以使用他们操作DOM?或者,那些使...
  57. 码住史上最详尽的 Git 分支管理实践 Linux & Git 被称为 Linus Travis 的两大神作, 实至名归! 在谈 Git 之前, 先谈一下 Linux。 Linux 和 Windows 作为两个广泛使用的操作系统, 有着极大的差异, 在各种广泛的评价和争执中, 我对下面的评价十分赞同 : Linux 与 Windows 最本质的区别在哪里。有人会说前者免费,后者需要...
  58. 用原生 JavaScript 实现十大 jQuery 函数 作者:Omar Duarte 翻译:疯狂的技术宅 原文: devkisslist.com/2019/06/29/… 未经允许严禁转载 在本文中我将把自己最常用的 jQuery 函数转换为原生 JavaScript。 有时我需要创建一个简单的静态 HTML 或登录页面,而且不想引入任何库或其它依赖。对这种情况,我只使用普通的 JavaScript 来完成工作,...
  59. 利用Git进行多人协作开发(入门篇)本篇文章中,不仅讲解一些git的常用语句,更重要的是讲解一下多人协作开发的流程,以及怎么利用Git去实现多人协作开发。

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

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

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