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. 目标是最完善的微前端解决方案:qiankun 2.0

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

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

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

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

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

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

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

  13. JS事件总结

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

  14. WebSocket学习总结

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

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

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

  16. 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...

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

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

  18. 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(...

  19. 好消息,vue 3 进入 beta 阶段

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

  20. typescript基础一览,助你从入门到放弃

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

  21. 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...

  22. Webpack Module Federation 深入解析

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

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

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

  24. JavaScript Blob 对象解析

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

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

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