20200420 前端开发日报

了解 CSS min()/max()/clamp() 数学函数；JavaScript基础自检之原型和原型链；vue组件回调返回值，让你的代码更为简洁；Webpack上手指北；飞猪微前端实践：统一运营工作台的解决方案；通天塔前端性能优化实践；【剑指offer：圆圈中最后剩下的数字】JavaScript实现；看不懂 00 后的黑话缩写？没事，这款上了 GitHub 热榜的开源工具来帮你

1. 了解 CSS min()/max()/clamp() 数学函数

   “min()/max()/clamp() 这 3 个数学函数是现代浏览器 2018 年底开始支持的，因此，如果你胆儿足够肥，是可以在实际项目中小范围使用的。”

2. JavaScript基础自检之原型和原型链

   这篇总结，主要是看了 一名【合格】前端工程师的自检清单 这篇文章，照着单子来整理总结下，这篇介绍的是「JavaScript中的原型和原型链」这个小结，是按着其中的问题进行归档整理的，其中参考了很多前辈总结的知识，在这里表示感谢！ JavaScript基础自检之原型和原型链 JavaScript自检之变量和类型 …

3. vue组件回调返回值，让你的代码更为简洁

   缘由 最近写公司业务代码的时候遇到这样一个需求，我写这块部分需要新增加一个弹窗，进行二次确认。使用的组件库是比较老的ant desgin vue 1.2.4。这个组件库是没有像elementUI的$confirm方式可以自定义html部分的。但是我的内容其实非常少。 如果用传统的直接写弹窗的二次确认方式 缺点1：业务代码会变得很多 缺点2…

4. Webpack上手指北

   近几年，打包构建工具层出不穷，前有Grunt、Gulp，后有Webpack、Rollup等，它们各有优势，均受到部分开发者的欢迎，本文聊聊Webpack的使用。 模块化 不论是新工具还是新技术，都是为了解决问题而存在，那么构建工具解决什么问题呢？ 众所周知，最初的网页十分简单，没有多少交互，代码量也少，但随着技术的发展，J…

5. 飞猪微前端实践：统一运营工作台的解决方案

   “基于微前端与 SDK 化的一体化集成方案，完成 4 大场景 10 余个平台的接入和配置打通，并对数百处视觉和交互体验进行了优化 ，在后期体验度量和用户反馈跟踪能力接入后，整体已达可用状态。”

6. 通天塔前端性能优化实践

   目标提升前端和Node中间层性能 通天塔是京东内部的一个快速搭建活动页面的平台，用户可以通过在可视化平台上选择需要的模板及配置对应数据，来生成对应的原生、H5及PC活动页面。模板样式丰富，操作灵活，在京东被大量使用，用户流量也呈现出了非常迅猛的增长。但随着项目的迭代，功能越来越复杂，模板越来越多，前端和…

7. 【剑指offer：圆圈中最后剩下的数字】JavaScript实现

   题目描述：0,1,,n-1 这 n 个数字排成一个圆圈，从数字 0 开始，每次从这个圆圈里删除第 m 个数字。求出这个圆圈里剩下的最后一个数字。例如，0、1、2、3、4 这 5 个数字组成一个圆圈，从数字 0 开始每次删除第 3 个数字，则删除的前 4 个数字依次是 2、0、4、1，因此最后剩下的数字是 3。 示例： 输入: n = 5, m = 3 …

8. 看不懂 00 后的黑话缩写？没事，这款上了 GitHub 热榜的开源工具来帮你

   这些神奇的词汇你看懂吗？nss、zqsg、rs、xswl、nbcs、ky、dbq、ssfd 没事，「能不能好好说话？」 拼音首字母缩写翻译工具来啦！ 项目介绍 社交平台上通过拼音首字母缩写指代特定词句的情况越来越多，为了让常人勉强能理解这一门另类沟通方式、做了这一个划词翻译油猴…

9. Node.js 源码解析：util.promisify 如何将 Callback 转为 Promise

   讲得很细致。你会有所收获。

10. 目标是最完善的微前端解决方案：qiankun 2.0

    微前端框架 qiankun 正式发布 2.0 版本。

11. JavaScript 如何与 CSS 和 Sass 共享数据

    持续进步的同学都关注了 “ 1024译站 ” 这是1024译站的第 82 篇文章  来源：css-tricks.com 作者：Marko Ilic 编译：大道至简 JavaScript 与 CSS 已经相生相伴 20 年了，但是要在它们之间共享数据却非常困难。当然，这方面肯定有过一些尝试，不过我想到的是简单而又直观的做法：不需要做代码结构上…

12. ES6—async, await, promise 综合例子

    ES6—async, await, promise 综合例子         new Promise(主线程代码).then(成功微任务, 失败微任务);         sync—替代promise         await—替代then 1. <div id="aa"></div> …

13. 在现代前端项目中使用 Worker

    由于需要在 Browser 进行大量的（音频转解码）计算，所以吾辈开始尝试使用 webworker 分离 CPU 密集型的计算操作，最终找到了 comlink 这个库，但之前在 vue 中使用时发生了错误，目前看起来已经得到了解决，所以在此记录一下。 调研方案 web-worker-proxy ：结合了 proxy/promise/webworker 的强大工具库，但…

14. JS事件总结

    1. 事件流（事件传播） 描述的是从页面接收事件的顺序。 IE事件流是事件冒泡流，NetScape是事件捕获流。 window: window document: document html: document.documentElement body: document.body div: document.getElementByID(‘div’) 2. 事件流阶段 （1）事件捕获阶段 （2）处于目…

15. WebSocket学习总结

    本文随便写了点自己对WebSoket通讯协议理解，在两种框架上玩的Demo，然后踩了几个坑还有没填上的坑（欢迎评论指导一下）。 WebSocket是什么？使用WebSocket的原因？ WebSocket是网络通讯协议的一种。 提到网络通讯协议，我第一个就想到了HTTP协议，但是HTTP协议的一些特性我想不用多说，大家也都是了解的，像无…

16. 深入 Nodejs 源码探究 CPU 信息的获取与利用率计算

    在 Linux 下我们通过 top 或者 htop 命令可以看到当前的 CPU 资源利用率，另外在一些监控工具中你可能也遇见过，那么它是如何计算的呢？在 Nodejs 中我们该如何实现？ 带着这些疑问，本节会先从 Linux 下的 CPU 利用率进行一个简单讲解做一下前置知识铺垫，之后会深入 Nodejs 源码，去探讨如何获取 CPU 信息及计算 CPU…

17. JavaScript判断字符串是否为数字类型：Number.isInteger、isNaN、正则表达式比较

    JavaScript中有Number.isInteger可以判断一个字符串是否为整数。不过目前JS没有内置的函数来判断一个数字是否为包含小数的数字： Number.isInteger(0); // true Number.isInteger(1); // true Number.isInteger(-100000); // true Number.isInteger(99999999999999999999999); // true Number.isInteger(0.1); // fals…

18. 基于webpack从0配置vue开发

    vue 官方为了让开发者快速进行开发，为了很大的精力，提供了vue-cli脚手架，只需简单几步，就能开始vue的开发了。 然而，对项目里的webpack封装和配置了解的不清楚，就容易导致出问题不知如何解决，甚至不会通过webpack去扩展新功能，对webpack+vue项目究竟是怎样搭建起来的感到一脸懵逼。 本文就是要解决这个问题。 …

19. JavaScript变量提升五道题，你都做对了吗？

    变量提升：在当前作用域下，会把带var和function进行提前声明或定义 ❝ 注意：块级作用域只对let/const/function有效，对var无效 ❞ 开始看题吧 变量提升块级作用域面试题目一 console.log(a)var a = 0if(true){ console.log(a) a = 1 console.log(a) function a (){} console.log(…

20. 好消息，vue 3 进入 beta 阶段

    一二三四五，周刊君等得好辛苦。4 月 16 日，vue 3 正式进入 beta 阶段。

21. typescript基础一览，助你从入门到放弃

    ts作为一个超级js，这两年是越来越火，我辈中人如何能不馋他，故观其大概后，迫不及待分享给大家，自己加深印象同时，又帮助大家，岂不美哉！本文分为三个部分，基础语法，进阶语法，以及高级语法，主要是讲解常用语法使用，方便以后忘记之处及时查阅！ 基础语法 编辑器推荐 由于ts和vscode都是巨硬出品，所以，在…

22. 40.vue全解(起手式1)

    (类似完整版的jQuery)，生产环境版本(类似mini版本的jQuery) 1.导入开发版本的vue.js 2.创建vue实例对象，设置el属性和data属性 3.使用简洁的模板语法把数据渲染到页面上 <div> {{message}} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js…

23. Webpack Module Federation 深入解析

    Federated Modules 是一个令人激动的功能，它可能会改变未来几年的前端打包方式，作者深入分析了 Module Federation 的原理及其应用场景，希望能对大家有所启发。（周刊君注：最近讲 Module Federation 的文章挺多的，不过这篇还不错，所以还是照收）

24. 从 Babel 到组件按需引入原理

    谈到 babel 肯定大家都不会感觉陌生。 桌面端组件库 Element ，借助 babel-plugin-component ，我们可以只引入需要的组件，以达到减小项目体积的目的。 使用 babel-polyfill ，开发者可以立即使用 ES 规范中的最新特性。 有了插件： transform-vue-jsx 、 react ，我们在 vue 和 react 开发中可以直接…

25. JavaScript Blob 对象解析

    Blob是JavaScript内建对象，表示不可变的原始数据，类似文件的对象。 blob是表示原始数据的不可变对象，这些数据不一定是javascript原生格式的，文件接口基于Blob，继承Blob功能并将其扩展为支持用户系统上的文件。 Blob有很多用途： 可以从网络的内容创建。 可以保存到磁盘或从磁盘读取。 …

更多内容请关注公众号【前端开发博客】每日更新