精读《React Hooks 最佳实践》；JavaScript中的这些骚操作，你都知道吗？；还在找源文件？在 vue 前端页面一键打开源码所在行；如何使用vue slot创建一个模态框；如何理解vue中的native；2020 年，JS 令一个新人沮丧；编写一个较为强大的Vue；js异步处理的三种方式
-
精读《React Hooks 最佳实践》React 16.8 于 2019.2 正式发布，这是一个能提升代码质量和开发效率的特性，笔者就抛砖引玉先列出一些实践点，希望得到大家进一步讨论。
-
引言 :snowboarder: 写这篇文章的缘由是上周在公司前端团队的 code review 时，看了一个实习小哥哥的代码后，感觉一些刚入行不久的同学，对于真实项目中的一些 js 处理不是很熟练，缺乏一些技巧。 因此整理了自己开发中常用的一些 js 技巧，灵活的运用，会增强你解决问题的能力，也会对你的代码简洁性有很大的…
-
1 遇到 vue 文件额外用一个 loader 解析一下，在 loader 中用 parser5 将元素对应的源码行列信息以 html 属性的方式加在标签中 2 给 document 绑定点击事件（事件代理）发送打开请求 3 webpack-dev-server 提供打开文件的服务 具体实现 github 地址 loader 实现 // open-sourceadd-element-location-loader….
-
【1】遮罩层：承载内容，管理样式布局。 【2】内容层：控制遮罩层的显示与否。 遮罩层和内容区之间应该解耦。 遮罩层和内容区之间应该解耦。 遮罩层和内容区之间应该解耦。 遮罩层不依赖于内容区，内容是放置在遮罩层里的，至于内容区里的内容是什么，遮罩层完全不用在意。因此可以在遮罩层里采用插槽。 遮罩层的…
-
<luo-hao @click="handleClick"></luo-hao> 复制代码 在 luo-hao 组件内部通过 console.log("listeners: ", this.$listeners) 复制代码 在控制台中可以看到 listeners: {click: ƒ} 复制代码 说明在组件上注册的自定义事件，最终都会被注册在组件实例上。在组件内部点击，不会触发…
-
本文是一篇译文 ， 原文 在 Hackers News 上的点数超过 200 点。 我的朋友是一位著名的计算机科学家，他之前没有用过 JS，今天他需要用到 GitHub 的一个 JS 库。而我在过去的 6 年主要的工作是在麻省理工学院进行可用性研究和教学，所以我其实也没什么把握。最终，我们俩出来搞出一堆错误之外一无所获，他也放弃了这…
-
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…
-
function f1() { console.log(‘1’) } function f2() { console.log(‘2’) } f1() f2() 复制代码 很容易可以看出，上述代码会依次输出1，2。因为代码是从上到下，依次执行，执行完f1()，才会执行f2()。但是如果f1()中的代码执行的是读取文件或者ajax操作呢，文件的读取都需要一定时间，难道我们需要完全等到文…
-
2、创建项目（vue create vue3test ） 选择default（直接回车enter）,初始化项目 3、进入项目文件夹，更新vue版本（vue add vue-next） 4、运行项目（npm run serve） 5、浏览器上访问（ http://localhost:8081 ），初始化页面展示 二、Vue3AP…
-
很简单一个问题,0.1+0.2,我们肉眼可见的算出来等于0.3,但js是一个神奇的语言,我们在控制台输入0.1+0.2等于0.30000000000000004,为什么会这样尼,我百度了了一下,原因如下:
-
超详细4小时开发一个SpringBoot+vue前后端分离博客项目
作者：吕一明 项目代码： https://github.com/MarkerHub/… 项目视频： https://www.bilibili.com/vide… 转载请保留此引用，感谢！ 前后端分离项目 文章总体分为2大部分，Java后端接口和vue前端页面，比较长，因为不想分开发布，真正想你4小时学会，哈哈。 先看效果： 不多说，开始…
-
webpack配置时，为了提高解析速度，需要指定需要处理的文件。 有三种配置可以指定需要处理的文件： test include exclude test test: /.jsx?$/,复制代码 正则表达式，指定项目中所有的文件（包含node_modules）后缀名为.jsx 或者 .js的文件。 include 指定需要处理的文件。可以是具体的文件或者文件名…
-
1.邮箱 {代码…} 2.手机号码 {代码…} 3.电话号码 {代码…} 4.是否url地址 {代码…} 5.是否字符串 {代码…} 6.是否数字 {代码…} 7.是否boolean {代码…} 8.是否函数 {代码…} 9.是否为null {代码…} 10…
-
工欲善其事，必先利其器。要想打造自己的可视化引擎，那就必须要先熟悉Cavas API。Canvas具体教程可以参考Canvas MDN 。下面我们将对Cavas API进行简单的说明。 基本用法 <canvas>是HTML 5 新增的元素，在浏览器创建一个固定大小的画布。通过Document.getElementById() 方法获取HTML <canvas> 元素的引…
-
想必大多数人在开发 vue 等 SPA 项目都时候都会直接用 vue-cli 等脚手架开发，一是方便省去了好多配置上的功夫，二是 vue-cli 毕竟是久经考验较为成熟的东西，遇到问题也能在网上找到相应解决方案。
-
1) 字体规则(可以被继承) {代码…} 2) 网络字体（字体图标库）iconfont（阿里的图标库） {代码…} 3) 文本相关规则（可以被继承） {代码…} 4) 列表相关（ul,ol） {代码…} 5) 盒子相关 {代码…} 6) 背景相…
-
最近在学习一些底层方面的知识。所以想做个系列尝试去聊聊这些比较复杂又很重要的知识点。学习就好比是座大山，只有自己去登山，才能看到不一样的风景，体会更加深刻。今天我们就来聊聊Vue中比较重要的异步更新策略及 nextTick 原理。 在聊话题之前我们可以看下下面这道面试题： setTimeout(() => { console.lo…
-
假设如今正在开发的大多数 Web 应用程序，都面临着类似的情况：前端变得越来越大，而与后端的相关性越来越小。 重新思考不同的前端框架如何共存，例如，使用 JQuery 或 AngularJS 1.x 构建的旧模块，与使用 React 或 Vue 构建的新模块联动。 整体方法不适用于普遍的 Web 应用程序。 管理十个十人的项目，要比管理…
-
基于 Vue SSR 的微架构在 FOLLOWME5.0 实践
2020年5月22日 FOLLOWME5.0 的第一个版本终于上线了，这也是公司内部基于 Genesis 上线的第二个项目。首页是老项目经历了最原始的那种 Vue SSR，后来在年初的时候，迁移到了 Nuxt.js 下，再到现在迁移到了 Genesis ，可谓是一波三折。 首次实践 在2019年的上半年，我们在和 APP 混合开发的项目中，首次实…
-
代码优化 Webpack配置优化 其它优化 代码 v-show 和 v-if 区分使用 v-show 根据表达式之正假值，切换元素 display CSS property。当条件变化时该指令触发过渡效果。适用于频繁操作，不会触发浏览器的重排。 v-if 根据表达式的值 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定/组件被销毁并…
-
大家一定看过很多电子设备开箱测评，今天我们也来跑一个软件新版的上手测评 —— Webpack 5！ 从 2017 年发出关于 v5 的投票开始，到 2019 年 10 月发布第一个 beta 版本，目前是 5.0.0-beta.16。现在在收集使用反馈、生态升级的过程中，相信不久后就可以正式发布了。这次 升级重点 ： 性能改进、Tree Shacking、Code G…
-
理解 js 深复制与浅复制，我们首先需要理解的概念有：堆，栈，数据类型，引用类型 堆与栈的特点 堆： 存储引用类型数据 按引用访问 存储空间动态分配 无序存储，可以通过引用直接获取 存储空间大，但是运行效率相对较低 栈: 存储基础数据类型 按值访问 存储空间固定 由系统自…
-
应用 AST 技术实现自动化升级 React 15 至 React 16 的解决方案
导语 本文通过React语法从v15自动升级为v16的方案，阐述了AST的概念及其在前端项目中的应用与探索，介绍了若干适合AST技术在前端落地的场景。 背景 通常一个中后台系统至少有三到五年的生命周期。 在立项之初一般会采用一些成熟稳健的技术，然而随着时间的流逝，原有技术栈必…
-
真实干货，走心分享！ 如何做一个优秀的时间管理者？ lzx告诉我们，每天少睡几个小时，你就有更多的时间去做运动。 对于程序员来说，每天少点时间写业务，就有更多时间去做(hua)优(hua)化(shui)。 我们今天讲的是Vue中如何更灵活的封装业务组件，使效率翻倍。因为 Ctrl + c 加 Ctrl + v 都不足以满足我们了，搬过…
-
1.什么是Promise 1.1 Promise简介 上篇文章中我们介绍了回调函数及其问题，最重要的两个问题就是控制反转和回调地狱的问题。在回调的模式中，我们将控制权交给了第三方，期待它在正确的时候调用我们回调函数实现正常功能。但是第三方很容易未调用、错误调用和重复调用回调函数造成问题。试想一下我们把控制权再反转过…
-
在某些情况下，当用户与我们的最终产品或应用程序进行交互时，我们发现自己会执行许多密集的，占用大量CPU的任务。启动轮询器，建立WebSocket连接，甚至加载视频或图片等媒体，都有可能成为性能障碍，尤其是当这些任务在不需要的情况下消耗资源的时候。在用户没有主动与界面交互的同时，从不必要的工作负载或网络请求中…
-
1. 阿里巴巴矢量图 选择需要的字体修改参数 选择SVG下载 2. IcoMoon 点击右上角"icoMoon App" 点击左上角"Import Icons" 选择下载的 svg 文件,点击"打开"按钮 页面上会多一个"Untitled Set"选项,下面的小图标就是导入的本地 svg 文件 …
-
本篇文章来自淘系中后台架构前端团队-思忠 :monkey: 前言 icejs 是淘系中后台项目组经过近三年的演进沉淀出的一个基于 React 的研发框架，目前已在淘系、飞猪等众多内部中后台业务项目里被广泛使用。从最初的工程构建工具演进成研发框架，这背后有着怎样的历程，以及新的框架又给我们提供了怎样的能力，这篇文章将…
-
简介： 当前几种常见的前端性能优化方案仍然不可避免地会存在一些缺点。本文在 ESI (Edge Side Include) 的基础上，提出了一种新的优化思路：边缘流式渲染方案（ESR），即借助 CDN 的边缘计算能力，将静态内容与…
-
一直以来做的react项目都是自己配置webpack的，之前每次新项目都是copy一下上一个项目的配置文件，npm i后就能愉快地跑起来了。copy多了也就想写一个npm包，以后直接npm i这个包就可以愉快地玩耍了，还可以让公司其他小伙伴们用，何乐不为呢。 1.功能 虽然说这是一个极简单的包，但是一些必要的功能能还是要必备的。 …
-
CSS 中 关于 Overflow ，你需要了解的这些知识点
点赞再看，养成习惯本文 GitHub [链接] 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。
-
上一篇整理了loader的使用，这篇整理一下 babel 跟 postcss-loader 的配置。 .babelrc 插件跟预设 其实， .babelrc 配置文件是用来支持我们在使用babel解析编译代码时，使用一些插件来处理高版本语法或者提案语法。插件跟预设的区别在于，预设其实是一些插件的组合，它方便我们处理一类语法的打包编译问题…
-
导图要表达的内容用文字来表述的话： 1.同步和异步任务分别进入不同的执行"场所"，同步的进入主线程，异步的进入Event Table（事件表）并注册函数。 2.当指定的事情完成时，Event Table会将这个函数移入Event Queue。 3.主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。 4….
-
module.exports = { entry: { index: "./src/index.js", // 指定打包输出的chunk名为index foo: "./src/foo.js" // 指定打包输出的chunk名为foo }, plugins: [ new HtmlWebpackPlugin({ template: "./src/index.html", // 要打包输出哪…
-
最近看到Nodejs的事件循环，发现网上的一些文档和描述都不够清晰。 所以今天来和大家一起从源码出发了解下Nodejs的事件循环机制。 官网描述 我们先看下nodejs的官网对事件循环的描述。 ┌───────────────────────────┐ ┌─>│ timers │ │ └─────────────┬─────────────┘ │ ┌─────────────┴…
-
之前我们实现了 redux 的功能，这次我们来实现一下配合 redux 开发中经常会用到的一个库—— react-redux。本文不会详细介绍 react-redux 的使用，另外需要了解 Context API， 再看此文就很容易理解了。可以看看我…
-
JavaScript好用还未火的注解@Decorator（注解 | 装饰器 | 装潢器）
What （是什么）- Why （为什么）- How （怎么用）- Where （哪里用）阐述方法论； AOP 编程思想； JavaScript Decorator 的弊端； 如何定义 Decorator ； 自定义 Decorator 如何传参； 优雅的异常处理； 如何判断一个函数为异步函数； 二、What：是什么 1. AOP思想 先了解一下…
-
36 * N 个工作中常用的 JavaScript 函数片段
最近在思否看到一个文章36个工作中常用的JavaScript函数片段。 身为坑爹面试官（▄█▀█●），怎么能只有一个答案呢？ 数组 Array 数组去重 方案一：Set + … {代码…} 方案二：Set + Array.from {代码…} 方案三…
-
const vm = new Vue(options) 其中 vm 对象 封装 了对视图的所有操作，包括 数据读写、事件绑定、DOM 更新 vm 的 构造函数 是 Vue，按照 ES6 的说法，vm 所属的 类 是 Vue options 是 new Vue 的参数，一般称之为 选项 或者 构造选项 2、options 里面有什么 五类属性 数据： da…
-
原文转载自「刘悦的技术博客」 v3u.cn/a_id_86 前端是庞杂的，包括 HTML、 CSS、 Javascript、Image 、Video等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么 ? 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好…
-
自从网站，web等诞生开始，路由就一直存在；在前后端分离之前，一般提到的路由都是后端路由；路由通过一个请求，然后分发到指定的路径，匹配对应的处理程序；它的作用就是分发请求，把对应的请求分发到对应的位置 前端路由与后端路由 后端路由 后端路由可以理解为服务器将浏览器请求的url解析之后映射成对应的函数…
-
是一个现代 JavaScript 应用程序的 静态模块打包工具 。 能够构建项目的依赖图，反应出项目中所需的各个模块，生成一个或多个bundle。 2、entry entry指明用哪个文件来作为依赖图的起点，然后webpack找到enrty依赖了哪些模块和库。webpack从这里开始转发。 module.exports = { // 单入口 entry:’src/…
-
Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
原因：由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。
-
简介 老板：移动端这里加个可以返回首页的按钮，要能可以拖动的。我：好的 老板。这个按钮样式有木有要求？老板：你自己看着办。 效果 嗯。。。 自我感觉还可以，应该不用再改，今晚可以准时下班了。 代码 相关文…
-
近期，对一个老项目进行直出改造，将其从 Vue 客户端渲染改造成支持 Vue 服务端渲染（SSR），然而在测试环境进行压测的过程中，就发现其存在明显的内存泄漏问题。这个问题可能是一般人在做 Vue SSR 时不容易踩的坑，但是一旦踩到，则可能是不容易排查出来的坑，尤其对于老项目的改造而言，会有更多的干扰因素。在此将排…
-
上一篇整理了 plugins 的配置。这篇开始整理webpack其他的一些配置项。 resolve resolve 是指定webpack打包构建过程中模块如何解析的相关配置。比如代码中的模块路径怎么解析，文件名怎么解析。这里简单整理一下两个配置项 extensions 及 alias 。 extensions extensions 是用来解析文件名的。…
-
作者：Paula Hu 博客：掘金主页、 知乎主页 、 GitHub主页 点赞是对原创者最大的肯定，我希望在这里看到你努力的身影~~~:kissing_heart::kissing_heart::kissing_heart: 写在前面 我相信很多同学对Vue的数据响应式是通过 Vue.js文档 来了解的，但毕竟文档的篇幅有限，你能知道自己理解了多少吗？先来看看下…
-
想自学JS吗？想提升JS底层原理吗？76张脑图带你彻底搞懂原生JS
"不畏惧，不讲究，未来的日子好好努力"——大家好！我是小芝麻:smile: 在默默的更新了一段时间的文章后，小芝麻决定励志成为一个标题党:smile: 别走，别走，别走啊:sob:….. 搞错了，下面我们正式开始； 本篇内容适用于：初学前端；及工作时间不久想回顾基础的各位伙伴； 文章主要由图片组…
-
我们平时“搬砖”只关注业务代码，页面脚本现在都由 webpack 帮我们自动组装，可能会忽略页面 script 的一些细节。 下面列了有关 script 标签的几个小问题，可以来自测下： script 标签放在 header 和 body 的区别？ script 中的 defer、async 属性有什么作用？ 多脚本加载时间不同，会影响其执行顺序…
-
路由的基本功能是为了保证视图和URL的同步，而视图可以看成是资源的一种表现。 目前，前端的主流Vue、React、Angular这些，他们都提供了有关路由的插件，一般来说，这些路由插件总是提供两种不同方式的路由方式： Hash 和 History。具体内容将会在下文中提到，下面就让我们围绕这两种方式来简单手写一个路由： 1、Ha…
-
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…
-
点击关注“有赞coder” 获取更多技术干货哦～ 作者：苏木团队：增长中心 前言：React Hooks被越来越多的人认可，整个社区都以积极的态度去拥抱它。在最近的一段时间笔者也开始在一些项目中尝试去使用React Hooks。原本以为React Hooks很简单，和类组件差不多，看看API就能用起来了。结果在使用中遇到…
-
你是否经常在文章中见到 “你还没有用TypeScript么，都2020年了！” 这样的标语？今天我们就来探究一下TypeScript的优缺点。 此篇文章适用于没接触过TypeScript的人、仅读过文档但无实际项目操作的人，笔者希望借此文章可以给大家提供一个思路，便于以上两种类型的读者做出选择。如果你是TypeScript老鸟，这…
-
前端，面试时间 5.7-5.19，共计两周。西安，薪资区间 10-15 由于考虑到个人发展原因，从杭州回到了老家陕西，面试了7、8家，2个offer收场。记录一下面试情况。（题目不重要，重点在于如何将眼花缭乱的题目分类到你的知识体系中。 公司A 公司情况：初创公司，银行项目，人数20+，需出差。 技术栈：前端vue+后…
-
基础的教程是跟着官网走的，把购物车的那个例子走完，就知道基础的东西应该怎么写了，感觉这个例子还是挺充分的，快速上手么得问题。通过购物车的例子自己瞎总结出来的一些知识点： *ngFor *ngIf Interpolation {{ }} Property binding [] event binding router Service Import service …
-
增强版的 swr？
-
本文将以理论介绍的方式来对微前端这个概念做一个整体扫盲，涉及到的大多数理论知识并不会太过于对展开，如果读者对一些细节比较感兴趣，可以留言或者搜索相关的概念。 什么是微前端？ 微前端（Micro-Frontends）是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多…
-
一句话介绍 bind: bind() 方法会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，之后的一序列参数将会在传递的实参前传入作为它的参数。(来自于 MDN ) 由此我们可以首先得出 bind 函数的两个特点： 返回一个函数 可以传入参数 返回函数的模拟实现 var foo = { value…
-
最近因为一些原因想要换份工作，通过猎头帮我投递了几家公司，收到了蚂蚁、字节和拼多多的面试邀约，先来说下面试的结果 蚂蚁：收到 offer，定级 P6+ 字节：收到 offer，定级 2-1 拼多多：1 面之后未继续流程 拼多多 先来说说拼多多，本来投的是 C 端，结…
-
React.lazy 是什么 随着前端应用体积的扩大，资源加载的优化是我们必须要面对的问题，动态代码加载就是其中的一个方案，webpack 提供了符合 ECMAScript 提案 的 import() 语法 ，让我们来实现动态地加载模块（注：require.ensure 与 import() 均为 webpack 提供的代码动态加载方案，在 webpack 2.x 中，require.ensur…
更多内容请关注公众号【前端开发博客】每日更新
