![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 75
IT 哈
这个作者很懒,什么都没留下…
展开
-
这一次,教你从零开始写一个 IoC 容器
这一次,教你从零开始写一个 IoC 容器转载 2023-01-31 15:39:05 · 655 阅读 · 0 评论 -
require 的模块加载机制
require 的模块加载机制转载 2022-12-19 16:13:44 · 845 阅读 · 0 评论 -
现代浏览器内部机制 Part 4
浏览器原理4转载 2022-10-22 16:39:39 · 152 阅读 · 0 评论 -
Inside look at modern web browser (part 3)
浏览器原理3转载 2022-10-22 16:27:57 · 149 阅读 · 0 评论 -
Inside look at modern web browser (part 2)
浏览器原理2转载 2022-10-22 16:19:10 · 139 阅读 · 0 评论 -
Inside look at modern web browser (part 1)
浏览器原理转载 2022-10-22 16:11:03 · 134 阅读 · 0 评论 -
Build your own React
Build your own React转载 2022-10-22 13:53:08 · 149 阅读 · 0 评论 -
vue3+vite项⽬搭建-配置环境变量env
vue3+vite项⽬搭建-配置环境变量env转载 2022-10-18 15:35:00 · 8719 阅读 · 1 评论 -
npm install xxxx --legacy-peer-deps命令是什么?为什么可以解决下载时候产生的依赖冲突呢?
老项目依赖下载不动或者报错问题转载 2022-09-17 15:57:46 · 1469 阅读 · 0 评论 -
Node.js 事件循环机制
Node.js 事件循环机制转载 2022-07-15 15:05:32 · 247 阅读 · 0 评论 -
Electron Playground 系列 窗口篇
Electron 窗口管理转载 2022-07-15 10:27:55 · 1824 阅读 · 0 评论 -
css var实现网页换肤
css var实现网页换肤转载 2022-07-14 10:20:39 · 469 阅读 · 0 评论 -
vue双向绑定原理
vue双向绑定原理转载 2022-07-15 10:25:15 · 1622 阅读 · 2 评论 -
Redux的核心是 createStore
The Core of Redux: createStore转载 2022-07-11 15:37:34 · 440 阅读 · 0 评论 -
如何通过Vue实现@人的功能
如何通过Vue实现@人的功能转载 2022-07-08 16:30:25 · 2720 阅读 · 4 评论 -
一文带你搞懂 Web 应用开发进化史
一文带你搞懂 Web 应用开发进化史转载 2022-07-06 19:19:57 · 369 阅读 · 0 评论 -
Vue3.0 新特性以及使用变更总结(实际工作用到的)
前言Vue3.0 在去年9月正式发布了,也有许多小伙伴都热情的拥抱Vue3.0。去年年底我们新项目使用Vue3.0来开发,这篇文章就是在使用后的一个总结, 包含Vue3新特性的使用以及一些用法上的变更。图片.png为什么要升级Vue3使用Vue2.x的小伙伴都熟悉,Vue2.x中所有数据都是定义在data中,方法定义在methods中的,并且使用this来调用对应的数据和方法。那Vue3.x中就可以不这么玩了, 具体怎么玩我们后续再说, 先说一下Vue2.x版本这么写有什么缺陷,所以才会转载 2022-05-27 17:52:04 · 754 阅读 · 1 评论 -
区分event对象中的[clientX,offsetX,screenX,pageX]
前言在平时的开发中,非常讨厌的就是兼容性了,兼容性的问题总会让我们记忆混淆,所以这次来区分一下event对象中的常用获取鼠标位置。clientX clientYevent.clientXevent.clientYclient直译就是客户端,客户端的窗口就是指游览器的显示页面内容的窗口大小(不包含工具栏、导航栏等等)。event.clientX、event.clientY就是用来获取鼠标距游览器显示窗口的长度。client范围兼容性:IE和主流游览器都支持。offse转载 2022-07-06 19:17:53 · 935 阅读 · 0 评论 -
使用Actor模型管理Web Worker多线程
前端固有的编程思维是单线程,比如JavaScript语言的单线程、浏览器JS线程与UI线程互斥等等,Web Woker是HTML5新增的能力,为前端带来多线程能力。这篇文章简单记录一下搜狗地图WebGL引擎(下文简称WebGL引擎)使用Web Worker的一些实践方案,虽然这个项目最终夭折并且我也从搜狗离职了,但在开发WebGL引擎过程中的一些心得和实践还是值得写一写的。搜狗地图WebGL引擎使用Actor模型管理worker线程,所以这篇文章就围绕这一点展开,包括以下内容: WebGL引擎为何转载 2022-05-21 17:42:48 · 293 阅读 · 0 评论 -
vue键盘事件监听
1、在当前页截获键盘事件,所有按钮均被控制 created () { this.keyDown(); }, beforeDestroy () { this.keyDownReview() }, methods: { //按键恢复 keyDownReview () { document.onkeydown = function (event) { var e = event || window.event;转载 2022-07-06 19:20:22 · 10418 阅读 · 0 评论 -
async 与 await 的用法详解
async概念用于声明异步函数,返回值为一个Promise对象,它以类似同步的方式来写异步方法,语法与声明函数类似,例如:async function fn() { console.log('Hello world!');}console.log(fn().constructor); // Promise()// 这里证明其返回值为一个 Promise 对象;返回值也许这里会有疑问,返回值是 Promise 对象,那么函数本身定义的返回值跑到哪里去了呢?其实,...转载 2022-05-21 09:59:45 · 14464 阅读 · 7 评论 -
常用的前端JavaScript方法封装
1、输入一个值,返回其数据类型function type(para) { return Object.prototype.toString.call(para)}2、数组去重function unique1(arr) { return [...new Set(arr)]}function unique2(arr) { var obj = {}; return arr.filter(ele => { if (!obj[ele])..转载 2018-09-06 15:06:39 · 161115 阅读 · 23 评论 -
React之不简单的Children
一、children可以是任何类型的值1.1 正常dom元素<Grid> <Row /> <Row /> <Row /></Grid>class Grid extends React.Component { render() { return <div>{this.props.children}</div> }}复制代码1.2 函数<转载 2022-05-05 14:37:28 · 734 阅读 · 0 评论 -
Web 中的“选区”和“光标”需求实现
在 web 开发中,有时不可避免会和“选区”与“光标”打交道,比如选中高亮、选中出现工具栏、手动控制光标位置等。选区就是用鼠标选中的那一部分,通常是蓝色光标呢,是那个闪烁的竖线吗?温馨提示:文章比较长,耐心看完可以完全自主的操作选区和光标一、“选区”和“光标”是什么?先说结论:光标是一种特殊的选区。想搞清楚这个,不得不提到两个重要的对象:Section[1]和Range[2]。这两个对象都有大量的属性和方法,详细可以查看官方文档,这里简单介绍一下:1.Selectio..翻译 2022-05-11 08:55:10 · 516 阅读 · 0 评论 -
要搞清楚 IoC 那就用 TS 手写一个
最近把Spring重学一遍,总算是理清IOC,DI,AOP的概念,想整理一下,写篇笔记,又想锻炼自己的ts类型体操 (^_^),所以就用Typescript来篇IOC文章吧。本文来自林小骏大佬的投稿为什么要用IOC容器通常说IOC容器,第一时间会想到Spring,它可以说是IOC最成熟的实践,但IOC不是java或Spring独有,它是一种设计模式,主要是用来解决软件工程里的耦合问题。那什么是耦合? 所谓耦合指的是类之间,或模块之间的依赖,如果两个或以上的类或模块紧密耦合,意味着只要改...转载 2022-03-16 08:40:47 · 633 阅读 · 2 评论 -
vue html页面打印功能vue-print-nb
vue项目中,HTML页面打印功能.在项目中,有时需要打印页面的表格,在网上找了一个打印组件vue-print-nb本博客源码:https://github.com/shengbid/vue-print,这里面只放了打印组件的代码,只需要这个功能的下载这个https://github.com/shengbid/vue-demo 这个项目里平时博客写的一些功能的代码都放在里面,有需要可以下载看看,有帮助的话点个star哈使用方式安装 npm install vue-print-..转载 2022-02-14 15:44:36 · 2173 阅读 · 0 评论 -
【JS基础】JavaScript中的void 0
众所周知,Undefined是JS语言中的7大基本类型之一,表示未定义,它的值只有一个,就是undefined。任何变量在赋值前都是undefined。而在一些框架源码中,会出现一些这样的表达式: if (context === void 0) return func; function foo() { var a = arguments[0] !== (void 0 ) ? arguments[0] : 2; return a; } if (array == n转载 2022-01-25 09:10:48 · 3937 阅读 · 0 评论 -
在EggJS中使用Sequelize做联表查询
1.EggJS引用Sequelize安装sequelize依赖和mysql驱动cnpm i egg-sequelize mysql2 -S启用sequelize插件在config/plugin.js里面添加sequelize: { enable: true, package: 'egg-sequelize',},配置数据库在config/config.default.js里面添加 config.sequelize = { diale转载 2022-01-07 19:17:34 · 2224 阅读 · 2 评论 -
vue自定义指令update 和 componentUpdated及bind 和 inserted区别
转自vue自定义指令update 和 componentUpdated及bind 和 inserted区别_sunboylife的博客-CSDN博客_vue 自定义指令update转载 2022-01-06 18:36:32 · 573 阅读 · 0 评论 -
手把手教你实现网页端社交应用中的@人功能:技术原理、代码示例等
1、引言 第一次使用@人功能到现在已经有差不多10年了,初次使用是通过微博体验的。@人的功能现在遍布各种应用,基本上涉及社交(IM、微博)、办公(钉钉、企业微信)等场景,就是一个必不可少的功能。 最近正好在调研 IM 各种功能的技术实现方案,所以也详细地了解了下@人功能在Web网页前端的技术实现,正好借此机会给大家分享一下我所掌握的技术原理和代码实现。 本文已同步发布于“即时通讯技术圈”公众号,欢迎关注。公众号上的链接是:点此进入...转载 2021-12-27 15:52:13 · 748 阅读 · 0 评论 -
前端如何修改组件库源码来封装符合自己需求的组件?
前端开发的同学们或许会遇到这样的问题:产品中需要实现某项功能,常用的elementui、antd等组件库中确实有差不多功能的组件。但实际上这些组件可能并不能满足你的功能,或多或少都需要你去看看如何修改它才能满足你的需求。比如我曾遇到过element-ui中的「树形控件」暴露出的参数没有我需要的(获取参数);或者是「对话框」组件我需要给它的body加上上下两条border等(样式修改);还有「级联选择器」的多选可搜索功能:需要修改级联看板使它保持展开,且当子节点全部选中时,不展示全部子节点...转载 2021-12-10 10:14:58 · 850 阅读 · 0 评论 -
element时间选择器,怎么怎么转换成时间戳
我用element时间选择器选择的值要去比较大小,所以要在值前面加上今天的时间戳去比较,但是el选择的值只是一个字符串,怎么把这两个值变成当天13:00:00的时间戳和14:00:00的时间戳{ endTime: "13:00:00" startTime: "14:00:00" } new Date((new Date).toDateString()+' 13:00:00').getTime()timeStampList.push(new Date((new Date).t.转载 2021-11-22 14:35:17 · 2298 阅读 · 0 评论 -
Vue 如何快速实现头像裁剪?方法比你想象的简单
高效实现需求的方法,就是避免重复造轮子。图片裁剪的插件也不少,这里我选择 vue-cropper,原因是功能强大、简单易上手。话不多说,上效果图:效果图1634477651(1).jpgimage.png安装npminstallvue-cropper复制代码使用import{VueCropper}from'vue-cropper'复制代码代码实现以 element-ui + vue-cropper 为例实现头像裁剪src/App.vu...转载 2021-11-05 14:24:41 · 1444 阅读 · 1 评论 -
npm 和 npx 有什么区别?
作者:嘶吼链接:https://www.zhihu.com/question/327989736/answer/787995048来源:知乎著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。说到npm那当然就离不开社区文化,那我们就从社区文化开始说起:社区文化的意思是:拥有共同职业或兴趣的人群,自发组织在一起,通过分享信息和资源进行合作与交流。虚拟社区的参与者经常会在线讨论相关话题,或访问某些网站。前端程序员也有社区,世界上最大的前端社区应该就是 GitHub 了。前.转载 2021-10-29 17:35:19 · 852 阅读 · 0 评论 -
什么是对象存储?COS 能做什么?这里有份快速入门教程
随着互联网速度的逐渐提升以及用户设备数量的增多,云存储服务从新兴走向火热,现在俨然成为了大众数字生活不可或缺的一部分。但是,市面上的个人云存储产品中存在的订阅费用高昂、速度受限、功能不够全面等问题使单一产品难以满足每个人的需求;另一方面,云存储产品间各自独立、相对封闭的生态也使得不同云存储平台的用户协作存在一定困难。这些不便之处使我重新认识到了「对象存储」这一「古老」的基础服务在个人存储领域可以发挥的价值。对象存储和个人云服务之间的关系?区别?对象存储(object storage)属于公有云服务中转载 2022-02-07 14:47:18 · 1936 阅读 · 0 评论 -
响应式布局新方案
概念:融合响应式设计本文中我们可以尝试得出一种新的解决方案,那就是利用 JavaScript 和 CSS 来进行媒体查询,是响应式设计与自适应设计结合的方案,我这里给起一个好记的名字叫做融合响应式设计( Fusion Web Design,简称 FWD )。技术原则: JavaScript 判断尽量少 CSS 媒体查询的断点也尽量少 UI效果 在笔记本、平板电脑、智能手机上展示合适的 UI 效果 PC UI:给笔记本等设备上看的大屏效果 Mob...转载 2021-10-27 10:54:49 · 207 阅读 · 0 评论 -
2021年,让我们手写一个mini版本的vue2.x和vue3.x框架
mini版本的vue.js2.X版本框架模板代码首先我们看一下我们要实现的模板代码:<divid\="app"\><h3\>{{msg}}</h3\><p\>{{count}}</p\><h1\>v-text</h1\><pv-text\="msg"\></p\><inputtype\="text"v-model\=...转载 2021-10-26 09:04:37 · 348 阅读 · 0 评论 -
cookie详解(含vue-cookie)
今天看到一篇cookie的文章,写的特别详细,感谢晚晴幽草轩的分享,原文链接http://mp.weixin.qq.com/s/NXrH7R8y2Dqxs9Ekm0u33w原文如下,记录到此供以后查阅并希望好文章能被更多需要的人看到背景在HTTP协议的定义中,采用了一种机制来记录客户端和服务器端交互的信息,这种机制被称为cookie,cookie规范定义了服务器和客户端交互信息的格式、生存期、使用范围、安全性。在JavaScript中可以通过 document.cookie 来读..转载 2021-10-16 10:54:36 · 1525 阅读 · 0 评论 -
三十分钟包会——正则表达式
三十分钟包会——正则表达式一、前言正则表达式,对大家来说既熟悉又陌生。熟悉是因为工作中有很多场景能用到,比如手机号、邮箱、密码等规则校验。陌生则是因为正则表达式看上去就是一堆乱码,且一眼看上去很难看懂匹配规则。有时候在网上去找一个特定规则的正则表达式,搜出来的结果各不相同,执行效果更是不尽人意,想自己去修改,感觉也无从下手。今天就花费30分钟时间,带领大家从另一个角度去剖析匹配的目的,理解匹配的思路,一步一步抽丝剥茧去学会怎么写正则表达式(读正则表达式远比写正则表达式要困难的多)。二、理转载 2021-10-15 09:44:26 · 463 阅读 · 0 评论 -
从零开始实现一个颜色选择器(原生JavaScript实现)
项目目录与文件创建首先,我们无需搭建项目的环境,我们还是直接用最简单的方式,也就是引入的方式来创建这个项目,这样也就方便了我们一边编写一边测试。创建一个空目录,命名为ColorPicker,创建一个js文件,即color-picker.js,然后创建一个index.html文件以及创建一个样式文件color-picker.css。现在你应该可以看到你的项目目录是如下所示:ColorPicker│index.html│color-picker.js│color-picker.css...转载 2021-10-14 17:05:53 · 1258 阅读 · 0 评论