- 博客(256)
- 收藏
- 关注
RSS订阅原创 现代配置指南——YAML 比 JSON 高级在哪？
一直以来，前端工程中的配置大多都是.js文件或者.json文件，最常见的比如：package.json babel.config.js webpack.config.js这些配置对前端非常友好，因为都是我们熟悉的 JS 对象结构。一般静态化的配置会选择 json 文件，而动态化的配置，涉及到引入其他模块，因此会选择 js 文件。还有现在许多新工具同时支持多种配置，比如Eslint，两种格式的配置任你选择：.eslintrc.json .eslintrc.js后来不知道什么时候...
2021-12-13 16:31:57
1263
原创 js 数组去重、扁平化函数
1、数组扁平化（又称数组降维）flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回const test = ["a", ["b", "c"], ["d", ["e", ["f"]], "g"]]// flat不传参数时，默认扁平化一层test.flat()// ["a", "b", "c", "d", ["e", ["f"]], "g"]// flat传入一个整数参数，整数即扁平化的层数test.flat(2)// ["a"
2021-12-10 16:30:45
940
原创 10个 HTML 文件上传技巧分享
简介上传文件功能可以说是项目经常出现的需求。从在社交媒体上上传照片到在求职网站上发布简历，文件上传无处不在。在本文中，我们将讨论 HTML文件上传支持的10种用法，希望对你有用。1. 单文件上传我们可以将input类型指定为file，以在Web应用程序中使用文件上传功能。<input type="file" id="file-uploader">input filte提供按钮上传一个或多个文件。 默认情况下，它使用操作系统的本机文件浏览器上传单个文件。成功上传后，Fil..
2021-12-09 15:52:27
2555
1
原创 前端实用技巧，通过 babel 精准操作 js 文件
babel修改js配置文件实现原理像那些js配置文件，里面可能有很多的非配置代码，而且一次可能要修改好几个文件比如我们在前端项目，要插入一个页面，需要修改router、menus等配置文件，还要手动拷贝页面模板等等这些高重复机械化操作，人工修改非常容易出错我们可以直接用babel来操作AST抽象语法树，通过工程化去精准修改。让babel去帮我们找到指定位置，并正确插入配置代码。我们在做工程化开发的时候，经常会用到babel去操作AST。首先我们了解一下什么是ASTAST，抽象语法树（
2021-12-08 15:20:44
1182
2
原创 前端架构师破局技能，NodeJS 落地 WebSocket 实践
本文从网络协议，技术背景，安全和生产应用的方向，详细介绍 WebSocket 在 Node.js 中的落地实践。大纲预览本文介绍的内容包括以下方面：网络协议进化 Socket.IO？ ws 模块实现 Express 集成 WebSocket 实例 消息广播 安全与认证 BFF 应用网络协议进化HTTP 协议是前端最熟悉的网络通信协议。我们通常的打开网页，请求接口，都属于 HTTP 请求。HTTP 请求的特点是：请求-> 响应。客户端发起请求，服务端收到请求后进行响应
2021-12-07 16:03:19
1018
原创 使用 button 的 5 个理由，看完使用更加频繁了
button 是平时使用最广泛的一个 HTML 元素了，只要有点击交互的地方都推荐使用这个。但是，仍然有大部分网站使用的还是div，比如某博，所到之处几乎都是 div既然是按钮，为什么不直接使用button呢？这里介绍一下使用 button 的 5 个理由一、禁用特性button支持禁用。这也是表单元素的通性，直接设置disabled属性可以达到禁用的效果<button disabled>按钮</button>而且，这种禁用不仅可以禁用鼠标点击，也会禁用键盘访问
2021-12-06 16:15:40
453
原创 Error Boundaries 居然是这么实现的，你了解吗？
这里简单讲解下React工作流程，后文有用。分为三步：触发更新 render阶段：计算更新会造成的副作用 commit阶段：在宿主环境执行副作用副作用有很多，比如：插入DOM节点 执行useEffect回调好了，让我们进入主题。什么是Error BoundariesReact提供了两个与错误处理相关的API：getDerivedStateFromError：静态方法，当错误发生后提供一个机会渲染fallback UI componentDidCatch：组件实例方法，当错误发
2021-12-03 16:31:29
894
原创 TypeScript 之常见类型，你都掌握了吗？
常见类型（Everyday Types）本章我们会讲解 JavaScript 中最常见的一些类型，以及对应的描述方式。注意本章内容并不详尽，后续的章节会讲解更多命名和使用类型的方式。类型可以出现在很多地方，不仅仅是在类型注解 (type annotations)中。我们不仅要学习类型本身，也要学习在什么地方使用这些类型产生新的结构。我们先复习下最基本和常见的类型，这些是构建更复杂类型的基础。原始类型:string，number和boolean（The primitives）Java...
2021-12-02 15:48:59
782
原创 企业开发团队分享，BEM 代码命名规范实践
背景最近老大在维护别人的代码时，发现我们团队写的样式各有种的想法及风格，这在后续维护会增加一定的难度，所以老大决定统一样式的会名规范，所以就安排我去调研及实践，下面是我调研的结果。什么是 BEM 命名规范BEM 由 Yandex 团队提出的一种前端 CSS 命名方法论。BEM 是BlockElementModifier的缩写 ，其中B表示块（block）、E表示元素（element）、M表示修饰符（modifier）。这三个部分通常使用__与--连接。即：.块__元素--修饰符...
2021-12-01 16:46:12
1178
原创 前端的你，在什么时候会想写一个 HTTP 服务器？
当你第一次接触工程化的项目时，看到项目控制台正在 building，过一会突然跳出一个 URL 地址，你点开它居然是你刚写好的网页，好神奇。当你接后端同伴的接口时，你把数据带去，接口竟然给你返回 500 错误；你去找后端，后端说这样传不行，你不知道为啥不行，反正按照他说的改完，返回 200 成功了。有时候你的请求莫名其妙的就跨域了，后端说让你们自己处理，你就找呀找解决方案。但是为什么会跨域？后端怎么配置的，你也不清楚。终于有一天，你痛定思痛，决定痛改前非，一定要自己搭一个 HTTP 服务器，彻底
2021-11-30 17:51:45
489
原创 前端跨域问题如何解决？七大跨域原理详解
咱们做前端的，平时跟后端对接接口那是必须的事情，但是可能很多同学忽略了一个对接过程中可能会发生的问题——跨域，那跨域到底是啥呢？为什么会跨域呢？又怎么才能解决呢？为什么跨域？为什么会出现跨域问题呢？那就不得不讲浏览器的同源策略了，它规定了协议号-域名-端口号这三者必须都相同才符合同源策略如有有一个不相同，就会出现跨域问题，不符合同源策略导致的后果有1、LocalStorge、SessionStorge、Cookie等浏览器内存无法跨域访问 2、DOM节点无法跨域操作 3、Ajax请求无法
2021-11-29 17:07:50
2068
原创 了解ES6中模板字符串的标签函数
模板字符串是可能是我们耳熟能详的一个ES6新特性，它可以允许我们在字符串中插入变量，还能够换行等等，确实使用起来非常地方便。然而，ES6还新增了一种主要用于和模板字符串配合使用的标签函数。1.什么标签函数？顾名思义，标签函数也是一种函数。这是一个很简单的标签函数声明：function tagFoo() { console.log('这是一个标签函数');}仔细观察一下，看看tagFoo和我们常用的普通函数有什么区别呢？是不是看不出区别呢？得出这个结论很正常，因为标签函数其实就是一
2021-11-26 17:38:01
780
原创 Promise 使用的5个常见错误，你还这样用吗？
Promise 提供了一种优雅的方法来处理 JS 中的异步操作。这也是避免“回调地狱”的解决方案。然而，并没有多少开发人员了解其中的内容。因此，许多人在实践中往往会犯错误。在本文中，介绍一下使用 promise 时的五个常见错误，希望大家能够避免这些错误。1.避免 Promise 地狱通常，Promise是用来避免回调地狱。但滥用它们也会导致 Promise是地狱。userLogin('user').then(function(user){ getArticle(user).the
2021-11-26 17:20:59
277
原创 前端需要了解的：开放图谱协议（The Open Graph protocol）
Open Graph 是一种互联网协议，最初由 Facebook 创建，用于标准化网页中元数据的使用，使得社交媒体得以以丰富的“图形”对象来表示共享的页面内容。什么是 Open Graph Protocol（开放图谱协议） Open Graph Protocol（开放图谱协议），简称OG 协议。它是 Facebook 在 2010 年 F8 开发者大会公布的一种网页元信息（Meta Information）标记协议，属于 Meta Tag （Meta 标签）的范畴。是一种为社交分享而生的 M.
2021-11-25 16:29:01
819
原创 从 Vue3 源码学习 Proxy 和 Reflect
这两个功能都出现在ES6中，两者配合得非常好！Proxyproxy是一个外来的对象，他没有属性! 它封装了一个对象的行为。它需要两个参数。const toto = new Proxy(target, handler)target:是指将被代理/包裹的对象handler:是代理的配置，它将拦截对目标的操作（获取、设置等）多亏了 proxy ，我们可以创建这样的traps：const toto = { a: 55, b:66 }const handler = { get...
2021-11-25 16:20:18
196
原创 Java 8 map 和 flatMap 的区别？看完你就明白了
背景说到 Java 8 map 和 flatMap 的区别，大部分人都答不上来，会用 map 的都不多，还有一部分人甚至都不知道这两个玩意是干嘛用的，有的还以为我问 HashMap 和 FlatMap。。这里所问的 map 和 flatMap 并不是集合，它们都是 Stream 流接口中的方法，如果你没用过，我估计在座的各位也有点晕！在 Java 8 Stream（流）接口中有 8 个特别有意思的方法，其实就是分为两大类：map flatMap现在知道这两个玩意的来路了吧？map
2021-11-24 17:24:52
925
原创 掌握这 10 个 js 算法排序，前端开发更轻松
1.冒泡排序比较相邻的元素。如果第一个比第二个大，就交换他们两个function bubbleSort(arr) { var len = arr.length; for (var i = 0; i < len - 1; i++) { for (var j = 0; j < len - 1 - i; j++) { if (arr[j] > arr[j+1]) { // 相邻元素两两对比
2021-11-24 17:15:29
705
原创 6大 js 数组排序整理汇总，逻辑思路更加清晰
(1) 数值排序 | 上升 [⇣⁰₉]const arr = [40, 100, 1, 5, 25, 10];arr.sort(function(a, b){ return a-b;});之前：[40,100,1,5,25,10]之后：[1,5,10,25,40,100](2) 数值排序 | 降序[⇣⁹₀]const arr = [40, 100, 1, 5, 25, 10];arr.sort(function(a, b){ return b-a; });之前：[
2021-11-23 16:11:57
193
原创 后端一次给你10万条数据，如何优雅展示，到底考察我什么?
今天跟大家来唠唠嗑，如果后端真的返回给前端10万条数据，咱们前端要怎么优雅地展示出来呢？前置工作先把前置工作给做好，后面才能进行测试后端搭建新建一个server.js文件，简单起个服务，并返回给前端10w条数据，并通过nodemon server.js开启服务没有安装nodemon的同学可以先全局安装npm i nodemon -g// server.jsconst http = require('http')const port = 8000;http...
2021-11-23 16:04:20
5130
1
原创 ES6新增API详解：Number篇
新增的静态属性ES6在Number对象上新增了一些静态常量属性，用于辅助计算。 Number.EPSILON Number.EPSILON（2-52）代表任意两个数值之间的最小差值，换句话说，如果a与b的差值的绝对值小于Number.EPSILON，那么我们就可以认为这两个值是相等的。即： |a-b|<Number.EPSILON \ \ \} \Longrightarrow a=b∣a−b∣<Number.EPSILON}⟹a=b 在JavaScript中，整数并不..
2021-11-18 16:48:18
406
原创 网页弹框的异步行为分析
1. 序网页弹框是个很常见的功能，比如需要告知用户消息的时候 (Alert)，需要用户进行确认的时候 (Confirm)，需要用户补充一点信息的时候 (Prompt) …… 甚至可以弹框让用户填写表单 (Modal Dialog)。弹框之后，开发者需要知道这个弹框是什么时候关闭以便进行接下来的操作。在比较古老的 UI 组件中，这个事情是通过事件回调来进行的，大概长这样：showDialog(content, title, { closed: function() { console
2021-11-18 16:10:14
1874
原创 Flutter业务开发常用小技巧（样式布局篇）
阴影样式中flutter和css对应关系UI给出的css样式width: 75px;height: 75px;background-color: rgba(255, 255, 255, 1);border-radius: 4px;box-shadow: 0px 0.5px 5px 0px rgba(0, 0, 0, 0.08);flutter样式布局Container( constraints: BoxConstraints.tightFor(width: 75, h
2021-11-17 16:09:44
1710
原创 重写数组的方法（改变原数组）
改变原数组的方法push()按参数顺序向数组尾部添加元素，返回新数组的长度var color = ['red', 'green']var color2 = color2.push(['blue','purple'])alert(color) // ['red', 'green']alert(color2) // ['red', 'green','blue','purple']重写：Array.prototype._push = function() { f
2021-11-17 16:02:16
147
原创 Node.js 的 Util 模块，你真的了解了吗？
从类型判断说起在 JavaScript 中，进行变量的类型校验是一个非常令人头疼的事，如果只是简单的使用typeof会到各种各样的问题。举几个简单的：console.log(typeof null) // 'object'console.log(typeof new Array) // 'object'console.log(typeof new String) // 'object'后来，大家发现可以使用Object.prototype.toString()方法来进行变量类型...
2021-11-16 15:41:45
1034
原创 超时的异步操作，如何完美解决？
自从 ECMAScript 的 PromiseES2015和 async/awaitES2017特性发布以后，异步在前端界已经成为特别常见的操作。异步代码和同步代码在处理问题顺序上会存在一些差别，编写异步代码需要拥有跟编写同步代码不同的“意识”。如果一段代码久久不能执行完成，会怎么样？如果这是同步代码，我们会看到一种叫做“无响应”的现象，或者通俗地说 —— “死掉了”；但是如果是一段异步代码呢？可能我们等不到结果，但别的代码仍在继续，就好像这件事情没有发生一般。当然事情并不是真的没发生，...
2021-11-16 15:31:44
1541
原创 MyBatis 中为什么不建议使用 where 1=1？
最近接手了一个老项目，“愉悦的心情”自然无以言表，做开发的朋友都懂，这里就不多说了，都是泪...接手老项目，自然是要先熟悉一下业务代码，然而在翻阅 mapper 文件时，发现了一个比较诡异的事情。这里给出简化后的业务代码：<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis
2021-11-15 17:09:07
239
原创 在 JavaScript 中如何检查对象为空
下面的代码片段，用于检查对象是否为空。 对于较新的浏览器，你可以使用 ES6 的 “Object.keys”。对于较旧的浏览器，可以安装Lodash库并使用其“ isEmpty”方法。const empty = {};/* ------------------------- 较新的浏览器----------------------------*/Object.keys(empty).length === 0 && empty.constructor === Object/
2021-11-15 17:01:05
685
原创 浅析Web components的痛点
写在前面最近致力于研究 Web components（以下简称WC），并且也初有成效的拿到了一定的结果，但今天想回过头来重新审视一下 WC。WC 到底是什么？简单的讲，Web Component 就是把组件封装成 html 标签的形式，并且在使用时不需要写额外的 js 代码。组件是前端的发展方向，抛开周边技术生态，单纯看 React 和 Vue 都是组件框架。因此，WC 可以视为原生标签的拓展/延伸，说到底，它依旧是一个标签！类似<video></video>..
2021-11-12 16:21:11
954
原创 前端架构师代码规范，代码风格统一很有必要
本文从代码规范，代码检查，代码格式化，以及编辑器自动化实现的方向，介绍代码规范统一在我们团队的实践应用。
2021-11-12 15:56:33
915
原创 如何完成数据库复杂查询的动态构建？
有的时候，你需要动态构建一个比较复杂的查询条件，传入数据库中进行查询。而条件本身可能来自前端请求或者配置文件。那么这个时候，表达式树，就可以帮助到你。Where当中可以传入固定的条件以下是一个简单的单元测试用例。接下来，我们将这个测试用例改的面目全非。[Test]public void Normal(){ var re = Enumerable.Range(0, 10).AsQueryable() // 0-9 .Where(x => x >= 1 &a
2021-11-11 16:33:23
1083
原创 这几个高级前端常用的API，你用到了吗？
MutationObserverMutationObserver 是一个可以监听 DOM 结构变化的接口。当 DOM 对象树发生任何变动时，MutationObserver 会得到通知。APIMutationObserver 是一个构造器，接受一个 callback 参数，用来处理节点变化的回调函数，返回两个参数：mutations：节点变化记录列表（sequence<MutationRecord>） observer：构造 MutationObserver 对象。Mutat
2021-11-11 16:25:14
2157
原创 简单、好懂的Svelte实现原理
Svelte问世很久了，一直想写一篇好懂的原理分析文章，拖了这么久终于写了。Demo1首先来看编译时，考虑如下App组件代码：<h1>{count}</h1><script> let count = 0;</script>这段代码经由编译器编译后产生如下代码，包括三部分：create_fragment方法 count的声明语句 class App的声明语句// 省略部分代码…function create_fragme
2021-11-10 15:36:06
340
原创 用了很多动效，介绍4个很优秀的 Veu 路由过渡动效
Vue Router 过渡是向Vue应用程序添加个性的一种快速简便的方法。 它让我们可以在应用程序的不同页面之间添加平滑的动画/过渡效果。如果使用得当，它可以让我们的应用程序更加现代和专业，从而增强用户体验。在今天的文章中，我们介绍使用Vue Router过渡的基础知识，然后再介绍一些基本示例，希望能给大家一些启发和灵感。下面我们要创建的四个过渡页面。将 Vue 路由过渡添加到项目中通常，Vue路由器设置如下所示// default template<template>
2021-11-10 15:23:20
277
原创 JavaScript 算法之美系列-排序
前言最近一段时间重（入）拾（门）算法，算法渣渣的我只有做笔记换来一丝丝心里安慰，在这里也记录分享一下，后面将会归纳成一系列吧。比如「递归与回溯」、「深度与广度优先」、「动态规划」、「二分搜索」和「贪婪」等。冒泡排序（Bubble Sort）冒泡排序基本思想给定一个数组，我们把数组里的元素通通倒入到水池中，这些元素将通过相互之间的比较，按照大小顺序一个一个地像气泡一样浮出水面。冒泡排序实现每一轮，从杂乱无章的数组头部开始，每两个元素比较大小并进行交换，直到这一轮当中最大或最小的元素被放
2021-11-09 15:50:06
91
原创 开发过程中，记得规范你的 commit msg
规范 commit msg 的意义规范化、格式化的 commit message 可以让我们更好的追踪需求的演进、回滚时能够快速的找到提交、最次也能让我们的仓库显的更专业。团队如何规范 commit msg呢，靠宣讲、靠文档？当然得靠工具生成和约束。前端圈轮子那么多，这种工具不在话下。commitizen 问答式生成 commit msg格式化 commitlint 校验卡控 commit msg规范化commitizencommitizen: simple commit conve..
2021-11-08 14:56:22
691
原创 这10个 JS 开发小技巧，让你的开发水平更上一层楼
1. 生成一个带有随机数的列表Array.from({ length: 1000 }, Math.random)// [ 0.6163093133259432, 0.8877401276499153, 0.4094354756035987, ...] - 1000 items2.生成一个带有数字的列表Array.from({ length: 1000 }, (v, i) => i)// [0, 1, 2, 3, 4, 5, 6....999]3. RGB→转换为十六进制c
2021-11-08 14:51:22
122
原创 窥探css-loader与style-loader的作用
前言大家伙都清楚在使用webpack构建前端项目时都会使用到sass-loader、less-loader、postcss-loader、css-loader、style-loader，但这些loader在其中起到什么作用呢？本篇主要阐述css-loader与style-loader的作用和实现，加深对loader的理解。css-loadercss-loader会对@import和url()进行处理，就像js解析import/require()一样，默认生成一个数组存放存放处理...
2021-11-06 17:29:35
1352
原创 Web Components中引入外部CSS的 8 种方法
开发中，还是会遇到需要引入外部CSS到Shadow DOM情况，那么如何处理呢？作者就最近遇到的情况给出如下几种方案。一、@import示例代码const template = document.createElement('template');class WhatsUp extends HTMLElement { connectedCallback() { const shadowRoot = this.attachShadow({mode: 'open'}); s
2021-11-05 17:37:12
654
原创 stylelint 接入实战踩坑总结
前言团队合作时，当每个人的代码都拥有自定义的格式化方式时，在提交merge的时候往往要解决很多冲突，此时我们可以使用eslint+stylelint来对团队的代码进行约束。eslint的配置引入比较简单，网上有比较多的教程，而stylelint的教程大多语焉不详。在这里，我会介绍一下我在引入stylelint所遇到的坑，以及解决方法。正文stylelint是一个强大的，现代的代码检查工具，可以帮助你在团队合作中强制执行样式约定。1. 安装stylelintyarn add -D s
2021-11-05 17:32:53
5486
原创 Vue3源码分析——编译模块和编译器
Vue3的编译模块包含4个目录：compiler-core // 编译核心Compiler-DOM // 浏览器相关Compiler-sfc // 单文件组件Compiler-SSR // 服务端渲染其中，compiler-core模块是Vue编译的核心模块，与平台无关。其余三个基于compiler-core，适用于不同的平台。Vue的编译分为三个阶段，即解析(Parse)、转换(Transform)和代码生成(Codegen)。Parse阶段将模板字符串转换为语法抽象树...
2021-10-30 15:38:42
662
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人