20190919 前端开发日报

Istio 1.3 发布,HTTP 遥测不再需要 Mixer;TypeScript 疑难杂症;基于vueCli2发布一个vue组件的npm包;【面试高频知识点】promise的理解(通俗易懂);前端唯一标识那些事儿;解放双手-vue语法自动转typescript;js中有关this指向问题;每日优鲜供应链前端团队微前端改造

  1. Istio 1.3 发布,HTTP 遥测不再需要 MixerIstio 是 Google、IBM 和 Lyft 联合开源的服务网格(Service Mesh)框架,旨在解决大量微服务的发现、连接、管理、监控以及安全等问题。 Istio 对应用是透明的,不需要改动任何服务代码就可以实现透明的服务治理…
  2. TypeScript 疑难杂症 本文会定期更新,我遇到的觉得值得分享的 TypeScript 问题都会优先更新在 TypeScript 疑难杂症 里 ——- 别光顾着收藏,给孩子赏几个赞吧!——- 限制传入对象必须包含某些字段 用于给某个处理特定对象的函数来限制传入参数,尤其是当对象的某些字段是可选项的时候,比如说:test函数接受的参数…
  3. 基于vueCli2发布一个vue组件的npm包 这篇文章主要记录了从零发布一个vue的npm包(包含一个简单的指令和一个vue组件)的实践过程及些许心得。 初始化项目 这里我们通过@vue/cli拉取简单配置的模板来初始化一个2.X的项目,不了解的同学可以看下 vueCli3官方文档 vue init webpack-simple vue-directive-kit 初始化的项目目录如下 ├── REA…
  4. 【面试高频知识点】promise的理解(通俗易懂) 前一段时间找工作,面试了大大小小十几家公司,其中也包含了腾讯、blue等知名公司。总结面试经历,发现自己还有很多不足的地方,许多知识点都知其然不知其所以然。趁着最近事比较少,会陆陆续续总结一些面试的高频知识点,提升自己知识的深度和广度。本文是系列文章之一:promise的理解。 一、何为promise,我们为何要…
  5. 前端唯一标识那些事儿 在做聊天模块的时候,最初的消息唯一标识是msgId,在业务量小的情况下是可以满足需求的,毫秒级的唯一冲突是很难出现的。但是当用户量上升之后,时间戳的这种方案显然不行。因此需要引入一种新的前端生成唯一标识的方案。 除了时间戳之外,我在公司的其他前端项目中,发现一些其他的前端唯一性标识实现,因此在这里做一…
  6. 解放双手-vue语法自动转typescript 代码的复用是一件很常见的事情,如果是公共代码的复用那还好说,直接做成一个内部私有库,想用的话安装一下 npm 包就行了,但是业务代码的复用就不好做成包了,一般都是复制粘贴 我一般写代码的时候,如果觉得某段业务代码以前见过其他人写过,那么考虑到业务优先性,只要别人的代码不是写得太烂,我一般会优先抄别…
  7. js中有关this指向问题 this是在函数在被调用的时候才发生的绑定,即this具体指向什么,在于函数是怎么调用的,而非函数自身,也非函数的词法作用域 this的四种绑定(优先级从低到高) 默认绑定 隐士绑定 显示绑定 new 绑定 默认绑定 没有其他绑定规则时存在的默认规则即默认绑定 function foo(){ console.log(this.a) } v…
  8. 每日优鲜供应链前端团队微前端改造 我所在团队是做toB业务的,技术栈是Vue,团队目前有十多个典型的toB业务(菜单+内容布局),这些业务都是服务于一个大平台的,因为历史原因,每个业务都是独立的,都有一个html入口,所以当用户在这个大平台上使用这十多个业务的时候,每当切换系统时,页面都会刷新,体验很差;在开发层面,这十多个业务又有太多共同之…
  9. 用 js 写卡牌游戏(四) 前言 又过了三个月,咳咳咳…… 这次我决定录一个视频,如果不想看文字的朋友,可以翻到最下面看视频,内容和文字差不多。 正文 首先来做攻击效果,也就是卡牌冲过去,再回来。这属于动画效果,我这里就不造轮子了,直接找一个现成的好用点的动画库,这里我…
  10. GitHub 很早就提供 GraphQL API 了,还不学习它就 Out 了 欢迎各位 Gophers !在本教程中,我们将探索如何使用 Go 和 GraphQL 服务进行交互。在本教程完结之时,我们希望你可以了解到以下内容: GraphQL 的基础知识 使用 Go 构建一个简易的 GraphQL 服务 基于 GraphQL 执行一些基本的查询 …
  11. 探究JS V8引擎下的“数组”底层实现 今天在学习JS的数组时,发现JS的数组可以存放不同类型的元素、并且数组长度是可变的。what??这跟我之前接触的数组不一样啊。数据结构中定义的数组都是定长的、数据类型一致的存储结构。JS中的数组竟然如此特殊,这也是为什么标题中数组二字加上了“”的原因。带着一脸的懵逼,打开搜索引擎,一探究竟。 目录: 什么…
  12. 企业最佳 Node.js 应用案例分享 微软、IBM、思科、Netflix、PayPal……这些只是少数几家在产品中使用Node.js软件的顶尖公司。自2009年首次发布以来,JavaScript环境越来越受欢迎。为什么呢?这是因为Node.js使用起来非常容易。此外,Node.js还允许前端开发者在服务器端构建和执行代码。这带来更快的开发周期。那么都有谁在使用Node.js呢?他们又为什么使…
  13. 如何架构一个中后台项目的前端部分(技术选型篇) (点击上方公众号,可快速关注) 文/劳卜 阅读本文需要 2.2 分钟这是劳卜的第 31 篇 原创文章 前言 最近我正在公司做一个中后台管理系统的前端框架搭建工作,虽然说公司已经有现成的中后台框架可供选择,但是并不特别适合我们部门的项目,因此在借鉴原有…
  14. JS数据结构与算法系列-字符串 在工作中,作为前端的我们或多或少会遇到字符串的处理,这个系列就带领大家一起学习这些字符串的操作思路和代码实现。 替换空格 1.题目描述: 请实现一个函数,把字符串中的每个空格替换成"%20"。 例如输入“We are happy.”,则输出“We%20are%20happy.”。 2.解题思路: 第一种是正则表达式:直接使用正则表…
  15. 初探React中函数组件和类组件的差异 自从React Hooks的出来,社区讨论Hooks的越来越多。这并不是说React Hooks就优于类组件,但是使用Hooks来构建组件时有一个巨大的可用性提升,特别是因为这些函数组件可以通过React Hooks中的钩子函数来访问状态和生命周期。 今天我们就来一起聊聊如何将React的类组件转换为函数组件,用React Hooks中的钩子函数替换类…
  16. 透过现象看本质: 常见的前端架构风格和案例 所谓软件架构风格,是指描述某个特定应用领域中系统组织方式的惯用模式。架构风格定义一个词汇表和一组约束,词汇表中包含一些组件及连接器,约束则指出系统如何将构建和连接器组合起来。软件架构风格反映了领域中众多系统所共有的结构和语义特性,并指导如何将系统中的各个模块和子系统有机的结合为一个完整的系统 …
  17. 大前端常用按钮限流防抖总结 在实际前端项目中, 会有一些场景 , 在用户点击按钮时 ,因手抖等各种原因多次点击 , 重复提交请求 . 因此 , 通常情况下,会要求前后端均做一些限流/防手抖策略 . 这里简单说一下各前端如何去实施的. 防抖和限流是我们再开发过程中常用的优化性能的方式 通常 , 我们会给重要请求的按钮设置限制 , 比如 500ms 只能提交一次…
  18. 换个角度就很好深入理解的js继承 有个小伙子找到我,问我说:“我看了好多遍继承、原型链,但是感觉还是没懂” 我说:“你有儿子你就懂了” 复制代码 目录 前言 什么是Prototype 什么是原型链 基础结构 晋升机构 进阶结构 官方结构 NEW操作符 END 前言 最近在整理生活的过程中,遇到了几个问题,我身边的大多数人是…
  19. 「2019 Google IO 大会」面向Web开发人员的WebAssembly (上) 这是一个由 simviso 团队对2019 Google I/O 大会中关于 面向Web开发人员的WebAssembly 相关话题进行翻译的文档,内容并非直译,其中有一些是译者自身的思考。Surma是Google公司WEB基础的贡献者,也是open web平台的开发倡导者。 视频地址: 面向Web开发人员的WebAssembly 2019 Google I/O 上 视频翻译版权归 sim…
  20. [连载 1] 如何将协议规范变成开源库系列文章之 WebSocket 这是系列文章的第一篇,也是非常重要的一篇,希望大家能读懂我想要表达的意思。 系列文章开篇概述 相对于其他编程语言来说,Python 生态中最突出的就是第三方库。任何一个及格的 Python 开发者都使用过至少 5 款第三方库。 就爬虫领域而言,必将用到的例如网络请求库 Requests、网页解析库 Parsel 或 BeautifulSou…
  21. 1500行TypeScript代码在React中实现组件keep-alive现代框架的本质其实还是Dom操作,今天看到一句话特别喜欢,不要给自己设限,到最后,大多数的技术本质是相同的。
  22. vue源码分析之nextTick理解这部分内容,有助于理解Vue对页面的渲染过程,同时也可以了解到beforeUpdate和updated的使用。另外就是通过了解nextTick的调用了解vue内部是如何使用Promise的。这部分内容和之前介绍计算属性的内容也有关联…
  23. Halo,Babel 本文基于 babel 7 做叙述,如果之前一直使用 babel 6 的同学可以先看本文关于 babel 6 升级 babel 7 的相关模块 Babel 是如何工作的呢? Babel 的编译过程可以分为三个阶段: 解析(Parsing):将代码字符串解析成抽象语法树。 转换(Transformation):对抽象语法树进行转换操作。 生成(Code Generati…
  24. JavaScript和TypeScript中的符号symbol 是 JavaScript 和 TypeScript 中的原始数据类型,可用于对象属性。与 number 和 string 相比,symbol 具有一些独特的功能,使它脱颖而出。
  25. 息息相关的 JS 同步,异步和事件轮询JS 是一门单线程的编程语言,这就意味着一个时间里只能处理一件事,也就是说JS引擎一次只能在一个线程里处理一条语句。
  26. webpack的tree shaking util.js export const a = () => { console.log("a123456方法"); }; export const b = () => { console.log("b123456方法"); }; 复制代码 main.js import {a} from ‘./utils’; a(); 复制代码 sideEffects 一般而言,上述代码,在 webpack 进行 tree shaking 能够不打包 f…
  27. 纯前端音乐播放器,极简demo:[链接]项目地址:[链接] 数据来源于咪咕音乐
  28. WebViewJavascriptBridge源码探秘(上)这个方法写的很清晰,把要调用的js的函数名handlerName,参数data,和回调方法的Id(callbackId)打包到一个字典对象message中。callbackId,每个回调一个,唯一。为什么用callbackId,因为block本身是一个对象这个…
  29. ECMAScript/Javascript AST(Abstract Syntax Tree,抽象语法树)在计算机科学中,抽象语法树(Abstract Syntax Tree, AST),是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构,树上的每个节点都表示源代码中的一种结构。之所以说语法是“抽象”的,是因为…
  30. 如何打造一个上千Star的Github项目每一个程序员都或多或少接触过Github,至少是听说过吧。而Github最大的好处是在于程序员可以不用付出任何费用,可以在上面参考、借鉴甚至是照搬其他人贡献的项目,因为这一切都是开源的。另外,任何一个Github用…

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

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


关注我

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

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

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