20200527 前端开发日报

基于 Vue SSR 的微架构在 FOLLOWME5.0 实践;前端常用60余种工具方法;Angular5整合富文本编辑器TinyMCE(汉化+上传);Javascript异步详解(二)-Promise(1);web界面深色模式和主题化开发;记一次惨痛的 Vue SSR 内存泄漏排查;Javascript 高阶函数-after;bpmn-js 全解析

  1. 基于 Vue SSR 的微架构在 FOLLOWME5.0 实践

    2020年5月22日 FOLLOWME5.0 的第一个版本终于上线了,这也是公司内部基于 Genesis 上线的第二个项目。首页是老项目经历了最原始的那种 Vue SSR,后来在年初的时候,迁移到了 Nuxt.js 下,再到现在迁移到了 Genesis ,可谓是一波三折。 首次实践 在2019年的上半年,我们在和 APP 混合开发的项目中,首次实...

  2. 前端常用60余种工具方法

    1.邮箱 {代码...} 2.手机号码 {代码...} 3.电话号码 {代码...} 4.是否url地址 {代码...} 5.是否字符串 {代码...} 6.是否数字 {代码...} 7.是否boolean {代码...} 8.是否函数 {代码...} 9.是否为null {代码...} 10...

  3. Angular5整合富文本编辑器TinyMCE(汉化+上传)

    1. TinyMCE简介 TinyMCE是一个轻量级的富文本编辑器,相对于CK编辑器更加精简,但必须满足绝大部分场景的需要。 2.安装和配置TinyMCE 2.1安装TinyMCE npm install-保存tinymce 2.2设置tinymce局部访问(.angular-cli.JSON) "scripts": [ "../node_modules/_tinymce@4.7.4...

  4. Javascript异步详解(二)-Promise(1)

    1.什么是Promise 1.1 Promise简介 上篇文章中我们介绍了回调函数及其问题,最重要的两个问题就是控制反转和回调地狱的问题。在回调的模式中,我们将控制权交给了第三方,期待它在正确的时候调用我们回调函数实现正常功能。但是第三方很容易未调用、错误调用和重复调用回调函数造成问题。试想一下我们把控制权再反转过...

  5. Web界面深色模式和主题化开发

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师。 官方网站:devui.designNg组件库:ng-devui(欢迎Star) 官方交流群:添加 DevUI小助...

  6. 记一次惨痛的 Vue SSR 内存泄漏排查

    近期,对一个老项目进行直出改造,将其从 Vue 客户端渲染改造成支持 Vue 服务端渲染(SSR),然而在测试环境进行压测的过程中,就发现其存在明显的内存泄漏问题。这个问题可能是一般人在做 Vue SSR 时不容易踩的坑,但是一旦踩到,则可能是不容易排查出来的坑,尤其对于老项目的改造而言,会有更多的干扰因素。在此将排...

  7. Javascript 高阶函数-after

    函数的after {代码...}

  8. bpmn-js 全解析

    bpmn.js 是一个BPMN2.0渲染工具包和Web建模器。使用JavaScript编写,在不需要后端服务器支持的前提下向现代浏览器中查看、创建、嵌入和扩展BPMN2.0流程图。 使用 有两种方式使用bpmn.js: 通过URL引入预先打包的库 通过NPM以模块的方式引入 通过URL引入预先打包的库 <!DOCTYPE html> <htm...

  9. 不喜欢 Vue Cli?那就自己搭建一个吧

    通用性的提升,往往伴随着个性化的减弱。Vue Cli 的开箱即用,简单到几乎看不到配置,但对于想要去“把玩” webpack 的开发者来说无疑很不友好。虽然你可以通过 vue.config.js 来调整 webpack 配置,但这种“玩法”中存在黑箱。 这里说的“玩法”是指的是比如对 webpack loader 的探究、 babel plugin 的探究、 eslint plu...

  10. 微前端-最容易看懂的微前端知识

    本文将以理论介绍的方式来对微前端这个概念做一个整体扫盲,涉及到的大多数理论知识并不会太过于对展开,如果读者对一些细节比较感兴趣,可以留言或者搜索相关的概念。 什么是微前端? 微前端(Micro-Frontends)是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将 Web 应用由单一的单体应用转变为多...

  11. 深入理解JS对象隐式类型转换的过程

    在平时的开发工作中,我们有时会遇到需要将一个对象转换成基本类型的情况。很多情况下这个过程都是自动完成的,我们不需要手动处理。但是每当遇到这种情况的时候,你是否有思考过其背后的逻辑是怎样的?这篇文章会跟大家一起探讨一下这个问题。 在开始这篇文章之前,大家可以尝试思考一下下面问题的答案,看看自己对这...

  12. 三年前端寒冬入大厂,收获蚂蚁P6+、字节2-1 offer 面经分享

    最近因为一些原因想要换份工作,通过猎头帮我投递了几家公司,收到了蚂蚁、字节和拼多多的面试邀约,先来说下面试的结果 蚂蚁:收到 offer,定级 P6+ 字节:收到 offer,定级 2-1 拼多多:1 面之后未继续流程 拼多多 先来说说拼多多,本来投的是 C 端,结果鬼使神差简历去到了 A 端(管理后台),一...

  13. 【bug】前端上传图片被旋转

    用户需要上传图片,然后前端将这张图片绘制到 Canvas 画布上,然后生成 base64 展示给用户 出现的问题 在电脑上,我们进行代码编写的时候,在 chrome 上进行调试的时候没有问题,但是一旦在手机上测试就发现图片进行了旋转,不同的拍摄角度图片旋转的角度也不一样,如横拍,竖拍,倒着拍。具体代码如下: const ...

  14. 谈谈我们知识体系(js篇)

    我是小白,励志要做 技术男神 的帅逼,目前住在 南京 ,做了快3年 前端工程师 ,会继续写笔记的。 js string对象的一些常用方法 普通方法 charAt() 方法返回字符串中指定位置的字符。 split // 通过把字符串分割成子字符串来把一个 String 对象分割成一个字符串数组。 slice // 提取字...

  15. 有了 Promise 和 then,为什么还要使用 async?

    本文写于 2020 年 5 月 13 日 最近代码写着写着,我突然意识到一个问题——我们既然已经有了 Promise 和 then,为啥还需要 async 和 await? 这不是脱裤子放屁吗? 比如说我们需要一段请求服务器的代码: new Promise((resolve, reject) => { setTimeout(() => { const res = '明月几时有' if (1 >...

  16. 惊艳可视化的 js:动态图演示 Promises & Async/Await 的过程

    原文地址:[链接] 原文作者:Lydia Hallie 原由 你是否运行过不按你预期运行的 js 代码 ? 比如:某个函数被随机的、不可预测时间的执行了,或者被延迟执行了。 这时,你需要从 ES6 中引入的一个非常酷的新特性: ...

  17. webpack进阶用法

    每次构建的时候,我们不会通过webpack自动清理构建目录,而是每次构建之前手动的删除构建目录,其实这样的话,每次构建前不清理目录的话,就会造成构建目录输出的output文件越来越多,针对这个问题利用了npm script 做了目录清理,在每次构建之前npm script里面增加前置操作 rm -rf ./dist 做完目录删除之后,接下来再运...

  18. 图文详解 HTTPS 工作原理

    原文:[链接] 目标读者:理解HTTP协议,对称和非对称加密,想要了解HTTPS协议的工作原理 读完本文,你能明白 什么是HTTPS,TLS(SSL),TLS和HTTPS是什么关系 什么是证书和数字签名,它们是如何传递信任的 HTTPS有...

  19. 一直没回答清楚的一道面试题-NodeJs和JavaScript有什么区别

    今天和大家唠唠NodeJs和Javascript有什么区别这个问题,写下文章之前,百度了网上的各种回答,看到以下一些经典的回答: 1、node.js是平台,Js是编程语言; 2、js是客户端编程语言,需要浏览器的JavaScript解释器进行解释执行; 3、node.js是一个基于Chrome JavaScript运行时建立的平台,它是对Google V8引擎进行了封...

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

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