20200530 前端开发周报

精读《React Hooks 最佳实践》;JavaScript中的这些骚操作,你都知道吗?;还在找源文件?在 Vue 前端页面一键打开源码所在行;如何使用vue slot创建一个模态框;如何理解vue中的native;2020 年,JS 令一个新人沮丧;编写一个较为强大的Vue;js异步处理的三种方式

  1. 精读《React Hooks 最佳实践》

    精读《React Hooks 最佳实践》React 16.8 于 2019.2 正式发布,这是一个能提升代码质量和开发效率的特性,笔者就抛砖引玉先列出一些实践点,希望得到大家进一步讨论。

  2. JavaScript中的这些骚操作,你都知道吗?

    引言 :snowboarder: 写这篇文章的缘由是上周在公司前端团队的 code review 时,看了一个实习小哥哥的代码后,感觉一些刚入行不久的同学,对于真实项目中的一些 js 处理不是很熟练,缺乏一些技巧。 因此整理了自己开发中常用的一些 js 技巧,灵活的运用,会增强你解决问题的能力,也会对你的代码简洁性有很大的...

  3. 还在找源文件?在 vue 前端页面一键打开源码所在行

    1 遇到 vue 文件额外用一个 loader 解析一下,在 loader 中用 parser5 将元素对应的源码行列信息以 html 属性的方式加在标签中 2 给 document 绑定点击事件(事件代理)发送打开请求 3 webpack-dev-server 提供打开文件的服务 具体实现 github 地址 loader 实现 // open-sourceadd-element-location-loader....

  4. 如何使用vue slot创建一个模态框

    【1】遮罩层:承载内容,管理样式布局。 【2】内容层:控制遮罩层的显示与否。 遮罩层和内容区之间应该解耦。 遮罩层和内容区之间应该解耦。 遮罩层和内容区之间应该解耦。 遮罩层不依赖于内容区,内容是放置在遮罩层里的,至于内容区里的内容是什么,遮罩层完全不用在意。因此可以在遮罩层里采用插槽。 遮罩层的...

  5. 如何理解vue中的native

    <luo-hao @click="handleClick"></luo-hao> 复制代码 在 luo-hao 组件内部通过 console.log("listeners: ", this.$listeners) 复制代码 在控制台中可以看到 listeners: {click: ƒ} 复制代码 说明在组件上注册的自定义事件,最终都会被注册在组件实例上。在组件内部点击,不会触发...

  6. 2020 年,JS 令一个新人沮丧

    本文是一篇译文 , 原文 在 Hackers News 上的点数超过 200 点。 我的朋友是一位著名的计算机科学家,他之前没有用过 JS,今天他需要用到 GitHub 的一个 JS 库。而我在过去的 6 年主要的工作是在麻省理工学院进行可用性研究和教学,所以我其实也没什么把握。最终,我们俩出来搞出一堆错误之外一无所获,他也放弃了这...

  7. 编写一个较为强大的Vue

    why euv? because: 'vue'.split('').sort().join('') // euv source: 'node'.split('').sort().join('') // deno Quick Start 安装 git clone https://github.com/wclimb/euv.git cd euv npm install 运行 npm run dev 目前支持功能 :white_ch...

  8. js异步处理的三种方式

    function f1() { console.log('1') } function f2() { console.log('2') } f1() f2() 复制代码 很容易可以看出,上述代码会依次输出1,2。因为代码是从上到下,依次执行,执行完f1(),才会执行f2()。但是如果f1()中的代码执行的是读取文件或者ajax操作呢,文件的读取都需要一定时间,难道我们需要完全等到文...

  9. vue3.0创建项目及API讲解(一)

    2、创建项目(vue create vue3test ) 选择default(直接回车enter),初始化项目 3、进入项目文件夹,更新vue版本(vue add vue-next) 4、运行项目(npm run serve) 5、浏览器上访问( http://localhost:8081 ),初始化页面展示 二、Vue3AP...

  10. 解决js精度丢失办法

    很简单一个问题,0.1+0.2,我们肉眼可见的算出来等于0.3,但js是一个神奇的语言,我们在控制台输入0.1+0.2等于0.30000000000000004,为什么会这样尼,我百度了了一下,原因如下:

  11. 超详细4小时开发一个SpringBoot+vue前后端分离博客项目

    作者:吕一明 项目代码: https://github.com/MarkerHub/... 项目视频: https://www.bilibili.com/vide... 转载请保留此引用,感谢! 前后端分离项目 文章总体分为2大部分,Java后端接口和vue前端页面,比较长,因为不想分开发布,真正想你4小时学会,哈哈。 先看效果: 不多说,开始...

  12. webpack中include和exclude

    webpack配置时,为了提高解析速度,需要指定需要处理的文件。 有三种配置可以指定需要处理的文件: test include exclude test test: /.jsx?$/,复制代码 正则表达式,指定项目中所有的文件(包含node_modules)后缀名为.jsx 或者 .js的文件。 include 指定需要处理的文件。可以是具体的文件或者文件名...

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

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

  14. 【实现自己的可视化引擎01】认识Canvas

    工欲善其事,必先利其器。要想打造自己的可视化引擎,那就必须要先熟悉Cavas API。Canvas具体教程可以参考Canvas MDN 。下面我们将对Cavas API进行简单的说明。 基本用法 <canvas>是HTML 5 新增的元素,在浏览器创建一个固定大小的画布。通过Document.getElementById() 方法获取HTML <canvas> 元素的引...

  15. 从零构建一个类似vue-cli的脚手架

    想必大多数人在开发 vue 等 SPA 项目都时候都会直接用 vue-cli 等脚手架开发,一是方便省去了好多配置上的功夫,二是 vue-cli 毕竟是久经考验较为成熟的东西,遇到问题也能在网上找到相应解决方案。

  16. css基础知识(对规则的补充)

    1) 字体规则(可以被继承) {代码...} 2) 网络字体(字体图标库)iconfont(阿里的图标库) {代码...} 3) 文本相关规则(可以被继承) {代码...} 4) 列表相关(ul,ol) {代码...} 5) 盒子相关 {代码...} 6) 背景相...

  17. 通熟易懂的Vue异步更新策略及 nextTick 原理

    最近在学习一些底层方面的知识。所以想做个系列尝试去聊聊这些比较复杂又很重要的知识点。学习就好比是座大山,只有自己去登山,才能看到不一样的风景,体会更加深刻。今天我们就来聊聊Vue中比较重要的异步更新策略及 nextTick 原理。 在聊话题之前我们可以看下下面这道面试题: setTimeout(() => { console.lo...

  18. 重新思考前端:微前端

    假设如今正在开发的大多数 web 应用程序,都面临着类似的情况:前端变得越来越大,而与后端的相关性越来越小。 重新思考不同的前端框架如何共存,例如,使用 JQuery 或 AngularJS 1.x 构建的旧模块,与使用 React 或 Vue 构建的新模块联动。 整体方法不适用于普遍的 Web 应用程序。 管理十个十人的项目,要比管理...

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

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

  20. Vue项目优化总结

    代码优化 Webpack配置优化 其它优化 代码 v-show 和 v-if 区分使用 v-show 根据表达式之正假值,切换元素 display CSS property。当条件变化时该指令触发过渡效果。适用于频繁操作,不会触发浏览器的重排。 v-if 根据表达式的值 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定/组件被销毁并...

  21. Webpack5 上手测评

    大家一定看过很多电子设备开箱测评,今天我们也来跑一个软件新版的上手测评 —— Webpack 5! 从 2017 年发出关于 v5 的投票开始,到 2019 年 10 月发布第一个 beta 版本,目前是 5.0.0-beta.16。现在在收集使用反馈、生态升级的过程中,相信不久后就可以正式发布了。这次 升级重点 : 性能改进、Tree Shacking、Code G...

  22. js 深复制 VS 浅复制

    理解 js 深复制与浅复制,我们首先需要理解的概念有:堆,栈,数据类型,引用类型 堆与栈的特点 堆: 存储引用类型数据 按引用访问 存储空间动态分配 无序存储,可以通过引用直接获取 存储空间大,但是运行效率相对较低 栈: 存储基础数据类型 按值访问 存储空间固定 由系统自...

  23. 应用 AST 技术实现自动化升级 React 15 至 React 16 的解决方案

    导语 本文通过React语法从v15自动升级为v16的方案,阐述了AST的概念及其在前端项目中的应用与探索,介绍了若干适合AST技术在前端落地的场景。 背景 通常一个中后台系统至少有三到五年的生命周期。 在立项之初一般会采用一些成熟稳健的技术,然而随着时间的流逝,原有技术栈必...

  24. 如何在10分钟之内完成一个业务页面 – Vue的封装艺术

    真实干货,走心分享! 如何做一个优秀的时间管理者? lzx告诉我们,每天少睡几个小时,你就有更多的时间去做运动。 对于程序员来说,每天少点时间写业务,就有更多时间去做(hua)优(hua)化(shui)。 我们今天讲的是Vue中如何更灵活的封装业务组件,使效率翻倍。因为 Ctrl + c 加 Ctrl + v 都不足以满足我们了,搬过...

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

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

  26. 如何使用JavaScript检测空闲的浏览器选项卡

    在某些情况下,当用户与我们的最终产品或应用程序进行交互时,我们发现自己会执行许多密集的,占用大量CPU的任务。启动轮询器,建立WebSocket连接,甚至加载视频或图片等媒体,都有可能成为性能障碍,尤其是当这些任务在不需要的情况下消耗资源的时候。在用户没有主动与界面交互的同时,从不必要的工作负载或网络请求中...

  27. Vue 使用 vue-svg-icon

    1. 阿里巴巴矢量图 选择需要的字体修改参数 选择SVG下载 2. IcoMoon 点击右上角"icoMoon App" 点击左上角"Import Icons" 选择下载的 svg 文件,点击"打开"按钮 页面上会多一个"Untitled Set"选项,下面的小图标就是导入的本地 svg 文件 ...

  28. icejs:企业级前端研发框架的演进与实践

    本篇文章来自淘系中后台架构前端团队-思忠 :monkey: 前言 icejs 是淘系中后台项目组经过近三年的演进沉淀出的一个基于 React 的研发框架,目前已在淘系、飞猪等众多内部中后台业务项目里被广泛使用。从最初的工程构建工具演进成研发框架,这背后有着怎样的历程,以及新的框架又给我们提供了怎样的能力,这篇文章将...

  29. 前端性能优化:当页面渲染遇上边缘计算

    简介: 当前几种常见的前端性能优化方案仍然不可避免地会存在一些缺点。本文在 ESI (Edge Side Include) 的基础上,提出了一种新的优化思路:边缘流式渲染方案(ESR),即借助 CDN 的边缘计算能力,将静态内容与...

  30. Webpack-bsv-极简React项目脚手架

    一直以来做的react项目都是自己配置webpack的,之前每次新项目都是copy一下上一个项目的配置文件,npm i后就能愉快地跑起来了。copy多了也就想写一个npm包,以后直接npm i这个包就可以愉快地玩耍了,还可以让公司其他小伙伴们用,何乐不为呢。 1.功能 虽然说这是一个极简单的包,但是一些必要的功能能还是要必备的。 ...

  31. CSS 中 关于 Overflow ,你需要了解的这些知识点

    点赞再看,养成习惯本文 GitHub [链接] 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。

  32. webpack4配置总结(四)

    上一篇整理了loader的使用,这篇整理一下 babel 跟 postcss-loader 的配置。 .babelrc 插件跟预设 其实, .babelrc 配置文件是用来支持我们在使用babel解析编译代码时,使用一些插件来处理高版本语法或者提案语法。插件跟预设的区别在于,预设其实是一些插件的组合,它方便我们处理一类语法的打包编译问题...

  33. JavaScript 执行机制——前端菜鸟的总结

    导图要表达的内容用文字来表述的话: 1.同步和异步任务分别进入不同的执行"场所",同步的进入主线程,异步的进入Event Table(事件表)并注册函数。 2.当指定的事情完成时,Event Table会将这个函数移入Event Queue。 3.主线程内的任务执行完毕为空,会去Event Queue读取对应的函数,进入主线程执行。 4....

  34. webpack4优化总结

    module.exports = { entry: { index: "./src/index.js", // 指定打包输出的chunk名为index foo: "./src/foo.js" // 指定打包输出的chunk名为foo }, plugins: [ new HtmlWebpackPlugin({ template: "./src/index.html", // 要打包输出哪...

  35. 2020-5-27-Nodejs源码阅读——事件循环

    最近看到Nodejs的事件循环,发现网上的一些文档和描述都不够清晰。 所以今天来和大家一起从源码出发了解下Nodejs的事件循环机制。 官网描述 我们先看下nodejs的官网对事件循环的描述。 ┌───────────────────────────┐ ┌─>│ timers │ │ └─────────────┬─────────────┘ │ ┌─────────────┴...

  36. 带你实现 react-redux

    之前我们实现了 redux 的功能,这次我们来实现一下配合 redux 开发中经常会用到的一个库—— react-redux。本文不会详细介绍 react-redux 的使用,另外需要了解 Context API, 再看此文就很容易理解了。可以看看我...

  37. JavaScript好用还未火的注解@Decorator(注解 | 装饰器 | 装潢器)

    What (是什么)- Why (为什么)- How (怎么用)- Where (哪里用)阐述方法论; AOP 编程思想; JavaScript Decorator 的弊端; 如何定义 Decorator ; 自定义 Decorator 如何传参; 优雅的异常处理; 如何判断一个函数为异步函数; 二、What:是什么 1. AOP思想 ​ 先了解一下...

  38. 36 * N 个工作中常用的 JavaScript 函数片段

    最近在思否看到一个文章36个工作中常用的JavaScript函数片段。 身为坑爹面试官(▄█▀█●),怎么能只有一个答案呢? 数组 Array 数组去重 方案一:Set + ... {代码...} 方案二:Set + Array.from {代码...} 方案三...

  39. 关于 Vue 构造选项

    const vm = new Vue(options) 其中 vm 对象 封装 了对视图的所有操作,包括 数据读写、事件绑定、DOM 更新 vm 的 构造函数 是 Vue,按照 ES6 的说法,vm 所属的 类 是 Vue options 是 new Vue 的参数,一般称之为 选项 或者 构造选项 2、options 里面有什么 五类属性 数据: da...

  40. 全方位360度无死角谈谈如何优化前端性能的总结

    原文转载自「刘悦的技术博客」 v3u.cn/a_id_86 前端是庞杂的,包括 HTML、 CSS、 Javascript、Image 、Video等等各种各样的资源。前端优化是复杂的,针对方方面面的资源都有不同的方式。那么,前端优化的目的是什么 ? 从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好...

  41. vue-router原理及其核心功能实现

    自从网站,web等诞生开始,路由就一直存在;在前后端分离之前,一般提到的路由都是后端路由;路由通过一个请求,然后分发到指定的路径,匹配对应的处理程序;它的作用就是分发请求,把对应的请求分发到对应的位置 前端路由与后端路由 后端路由 后端路由可以理解为服务器将浏览器请求的url解析之后映射成对应的函数...

  42. 学习webpack中的核心概念

    是一个现代 JavaScript 应用程序的 静态模块打包工具 。 能够构建项目的依赖图,反应出项目中所需的各个模块,生成一个或多个bundle。 2、entry entry指明用哪个文件来作为依赖图的起点,然后webpack找到enrty依赖了哪些模块和库。webpack从这里开始转发。 module.exports = { // 单入口 entry:'src/...

  43. Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结

    原因:由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

  44. vue 自定义指令 — 移动端 touch拖拽

    简介 老板:移动端这里加个可以返回首页的按钮,要能可以拖动的。我:好的 老板。这个按钮样式有木有要求?老板:你自己看着办。 效果 嗯。。。 自我感觉还可以,应该不用再改,今晚可以准时下班了。 代码 相关文...

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

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

  46. webpack4配置总结(六)

    上一篇整理了 plugins 的配置。这篇开始整理webpack其他的一些配置项。 resolve resolve 是指定webpack打包构建过程中模块如何解析的相关配置。比如代码中的模块路径怎么解析,文件名怎么解析。这里简单整理一下两个配置项 extensions 及 alias 。 extensions extensions 是用来解析文件名的。...

  47. 你真的理解Vue的数据响应式吗

    作者:Paula Hu 博客:掘金主页、 知乎主页 、 GitHub主页 点赞是对原创者最大的肯定,我希望在这里看到你努力的身影~~~:kissing_heart::kissing_heart::kissing_heart: 写在前面 我相信很多同学对Vue的数据响应式是通过 Vue.js文档 来了解的,但毕竟文档的篇幅有限,你能知道自己理解了多少吗?先来看看下...

  48. 想自学JS吗?想提升JS底层原理吗?76张脑图带你彻底搞懂原生JS

    "不畏惧,不讲究,未来的日子好好努力"——大家好!我是小芝麻:smile: 在默默的更新了一段时间的文章后,小芝麻决定励志成为一个标题党:smile: 别走,别走,别走啊:sob:..... 搞错了,下面我们正式开始; 本篇内容适用于:初学前端;及工作时间不久想回顾基础的各位伙伴; 文章主要由图片组...

  49. script 标签的加载机制 | 前端查漏补缺

    我们平时“搬砖”只关注业务代码,页面脚本现在都由 webpack 帮我们自动组装,可能会忽略页面 script 的一些细节。 下面列了有关 script 标签的几个小问题,可以来自测下: script 标签放在 header 和 body 的区别? script 中的 defer、async 属性有什么作用? 多脚本加载时间不同,会影响其执行顺序...

  50. 带你了解路由的底层原理,用原生js手写一个路由

    路由的基本功能是为了保证视图和URL的同步,而视图可以看成是资源的一种表现。 目前,前端的主流Vue、React、Angular这些,他们都提供了有关路由的插件,一般来说,这些路由插件总是提供两种不同方式的路由方式: Hash 和 History。具体内容将会在下文中提到,下面就让我们围绕这两种方式来简单手写一个路由: 1、Ha...

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

  52. React Hooks 踩坑分享

    点击关注“有赞coder” 获取更多技术干货哦~ 作者:苏木团队:增长中心 前言:React Hooks被越来越多的人认可,整个社区都以积极的态度去拥抱它。在最近的一段时间笔者也开始在一些项目中尝试去使用React Hooks。原本以为React Hooks很简单,和类组件差不多,看看API就能用起来了。结果在使用中遇到...

  53. 花椒前端 TypeScript 实践总结

    你是否经常在文章中见到 “你还没有用TypeScript么,都2020年了!” 这样的标语?今天我们就来探究一下TypeScript的优缺点。 此篇文章适用于没接触过TypeScript的人、仅读过文档但无实际项目操作的人,笔者希望借此文章可以给大家提供一个思路,便于以上两种类型的读者做出选择。如果你是TypeScript老鸟,这...

  54. 五月中级前端面试报告

    前端,面试时间 5.7-5.19,共计两周。西安,薪资区间 10-15 由于考虑到个人发展原因,从杭州回到了老家陕西,面试了7、8家,2个offer收场。记录一下面试情况。(题目不重要,重点在于如何将眼花缭乱的题目分类到你的知识体系中。 公司A 公司情况:初创公司,银行项目,人数20+,需出差。 技术栈:前端vue+后...

  55. 突然上手Angular

    基础的教程是跟着官网走的,把购物车的那个例子走完,就知道基础的东西应该怎么写了,感觉这个例子还是挺充分的,快速上手么得问题。通过购物车的例子自己瞎总结出来的一些知识点: *ngFor *ngIf Interpolation {{ }} Property binding [] event binding router Service Import service ...

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

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

  57. JavaScript的bind方法模拟实现

    一句话介绍 bind: bind() 方法会创建一个新函数。当这个新函数被调用时,bind() 的第一个参数将作为它运行时的 this,之后的一序列参数将会在传递的实参前传入作为它的参数。(来自于 MDN ) 由此我们可以首先得出 bind 函数的两个特点: 返回一个函数 可以传入参数 返回函数的模拟实现 var foo = { value...

  58. 三年前端寒冬入大厂,收获蚂蚁、字节 Offer 面经分享

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

  59. 这就是你日思夜想的 React 原生动态加载

    React.lazy 是什么 随着前端应用体积的扩大,资源加载的优化是我们必须要面对的问题,动态代码加载就是其中的一个方案,webpack 提供了符合 ECMAScript 提案 的 import() 语法 ,让我们来实现动态地加载模块(注:require.ensure 与 import() 均为 webpack 提供的代码动态加载方案,在 webpack 2.x 中,require.ensur...

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

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