javascript学习
文章平均质量分 72
Geek技术前线
公众号 Geek技术前线
展开
-
Safari 18.0 WebKit 新特性介绍
随着 iOS 18、iPadOS 18、macOS Sequoia 和 visionOS 2 的发布,Safari 18.0 也正式上线。今天我们来学习下 Safari 18.0 有哪些新的特性原创 2024-09-24 13:02:40 · 801 阅读 · 0 评论 -
如何使用 React、TypeScript、TailwindCSS 和 Vite 创建 Chrome 插件
如何使用现代 Web 技术创建一个 Chrome 插件。通过结合使用 React、TypeScript、TailwindCSS 和 Vite,我们可以快速高效地开发出功能强大的扩展。文章从环境设置、项目创建、组件开发、样式设计到最终的打包和发布,提供了全面的指导原创 2024-09-21 08:54:13 · 684 阅读 · 0 评论 -
AbortController的使用
今天介绍一个有用的 JavaScript api `AbortController`原创 2022-06-24 14:56:31 · 2211 阅读 · 0 评论 -
performance简记
参考单位是时间戳单位是相对于文档开始的时间原创 2022-06-06 20:25:06 · 254 阅读 · 0 评论 -
JavaScript不再需要写void 0了
我们经常会在一些代码中看到void 0的写法,这种写法其实现在已经不需要了原创 2022-05-23 11:49:49 · 201 阅读 · 0 评论 -
javascript装饰器进入stage3了
前言在3月底,js的装饰器提案终于进入了stage3,同时其metadata部分单独拆开仍处于stage2阶段([详见](https://github.com/tc39/proposal-decorators/pull/454))。但是此装饰器却非平时我们广泛使用的装饰器。通过本文我们将了解下该js提案下装饰器的用法并对比和先前装饰器提案下用法的区别decorator提案的历史在[babel-plugin-proposal-decorators](https://babeljs.io/docs/en原创 2022-04-05 14:15:35 · 1520 阅读 · 0 评论 -
2020的最后一天,不妨了解下装饰器
装饰器目前还处于提案阶段,要在javascript中使用装饰器,我们必须借助babel或typescript的转码能力为什么要用装饰器引入装饰器更能够便于代码逻辑的解藕和复用。举一个例子举一个非常常见的需求。假设我们有一个类Network,它有一个异步getList方法class Network { async getList() { return await list(); }}有一天,我们想给它加个全局loading,那么我们可能会这么写class Network {.原创 2020-12-31 17:44:34 · 275 阅读 · 0 评论 -
如何实现一个惊艳面试官的非递归版本的 js 对象深拷贝方法
众所周知,js 语言本身是不提供对象的深拷贝的功能,无论是直接赋值、Object.assign、展开运算符...都只是浅拷贝,关于 js 的深浅拷贝的一些概念可以参考我比较久以前写过的一篇文章关于如何实现深拷贝,网上有很多相关的文章和实现都非常完美,本文主要讲述的是用一种非常规的使用非递归方法实现深拷贝本文的深拷贝只考虑数组、对象、简单值三种数据类型要实现判断数据类型,先来实现这 3...原创 2020-03-28 13:49:58 · 1017 阅读 · 0 评论 -
超详细preact hook源码逐行解析
本文通过对preact的hook源码分析,理解和掌握react/preact的hook用法以及一些常见的问题。虽然react和preact的实现上有一定的差异,但是对于hook的表现来说,是基本一致的。对于 preact的hook分析,我们很容易旧记住 hook 的使用和防止踩一些误区preact hook 作为一个单独的包preact/hook引入的,它的总代码包含注释区区 300 行。...原创 2019-11-11 20:59:33 · 734 阅读 · 0 评论 -
vscode实用注释正则替换
vscode默认对于/** 注释 */ 是有提示的,而// 注释则没有。匹配 // (.*)(([\u4e00-\u9fa5]|\w|.)+)替换 /**$2 */原创 2019-09-11 10:12:22 · 897 阅读 · 0 评论 -
babel踩坑记录
1、如果子模块和外部模块都有.babelrc时,babel处理子模块时,是使用的子模块的babelrc处理的。解决方法:外部模块不使用babelrc,而是使用babel.config.js文件代替。如module.exports = function(api) { api.cache(true) const presets = [ [ '@babel/prese...原创 2019-04-10 16:57:39 · 1277 阅读 · 0 评论 -
rxjs实现元素拖拽
最近看了一点rxjs的东西。现学现玩一下…就来尝试下元素拖拽吧如果使用非rxjs而是普通的js实现思路也不难。一般实现拖拽的思路是:1、监听 drag 元素 的 mousedown,回调中设置标识开始拖动,计算出初始点击到元素左上角距离2、监听 document 的 mousemove,判断 1 中标识处于拖动,通过计算当前位置设置元素的样式3、监听 document 的 mouse...原创 2019-01-23 17:52:27 · 862 阅读 · 0 评论 -
初识web-components & todolist实现
在当下,前端三巨头vue react ng都是提倡组件化开发的,在原生领域,web-components也逐渐成为标准。近段时间大热的omi就是基于web-components实现的web-components主要由3部分组成custom-elementsshadow-domslot templatecustom-elements从字面意思可以知道这是自定义元素的意思。区别于原...原创 2019-01-22 19:43:19 · 571 阅读 · 0 评论 -
尾调用优化
// 不尾递归function f(n) { if (n === 0 || n === 1) return n else return f(n - 1) + f(n - 2)}// 尾递归,不爆栈function fTail(n, a = 0, b = 1) { if (n === 0) return a return fTail(n - 1, b, a + b)}...原创 2018-10-17 16:40:54 · 254 阅读 · 0 评论 -
reselect源码阅读
reselect源码阅读 之前就听闻了reselect是一个用于react性能优化的库,并且源码只有100多行。可谓短小精悍,今天来阅读一波膜拜大佬们的思想import { createSelector } from 'reselect'const shopItemsSelector = state => state.shop.itemsconst taxPercen...原创 2018-05-13 18:04:23 · 868 阅读 · 0 评论 -
redux-sage笔记
前言:以前用redux处理异步状态都使用redux-thunk那个库。也一直听说redux-saga是个和redux-thunk能够实现类似功能的库,而且redux-saga的处理方法更加高压和方便。这几天阅读了下文档写些小结。以下是一些saga的常用方法redux/sagatakeEvery yield* takeEvery('PRODUCTS_REQUESTED', fetchProdu原创 2017-12-13 21:31:09 · 2729 阅读 · 0 评论 -
Immutable.js 简记
前言:之前的项目中,在遇到redux的深层嵌套问题时,直接使用深拷贝的库对state进行深拷贝再操作并返回修改后的新的state,一直觉得很不优雅和低效。下一个项目中打算在redux中使用Immutable.js。在此对一些API进行简单记录。日后用到其它也会慢慢补充文档地址Immutable中的一些数据结构Map 无序键值对(有点像js的Object)设置set (对应delete、delet原创 2017-12-09 12:06:02 · 506 阅读 · 0 评论 -
co源码解读
co是tj大神写出来的一个自动执行genrator函数,网上也有各种源码解析。我写下自己阅读后的一些见解,水平有限,如有错误请指正。co的通常api是这样的co(function* () { var result = yield Promise.resolve(true); yield doSome(); yield doSome(); .... return resu原创 2017-12-28 10:12:38 · 476 阅读 · 0 评论 -
函数防抖和函数节流的简单实现和探讨
函数防抖和函数节流函数防抖(debounce)通俗的说作用就是防止某个函数执行过于频繁。也就是说就是让某个函数在上一次执行后,满足等待某个时间内不再触发此函数后再执行,而在这个等待时间内再次触发此函数,等待时间会重新计算。应用场景例如某个resize事件,我们想resize触发时去执行某个函数,但是resize是在窗口不停拖动会不断触发的,而很多时候我们不必拖动过程中不停执行那原创 2018-01-21 20:35:25 · 1254 阅读 · 0 评论 -
浅谈JavaScript之深浅拷贝(一)
无论什么语言都会涉及到深浅拷贝的问题,这里以javascript的角度来聊聊。通常来说:浅拷贝是指只复制目标的对象的引用(某的语言的指针),当改变复制出来的对象的东西的话,原来的对象也是会改变的,因为它们都是指向了同一块的内存空间;深拷贝则是指复制了对象的内容,结果就是复制出来的对象和原来的对象之间没有任何联系了。修改任一都不会影响另一者。这是比较通俗的说法,不同语言之间有可能又轻微的区别。预备知原创 2017-12-30 15:04:59 · 473 阅读 · 0 评论 -
redux源码解读(一)自实现简易redux
redux的源码解读(一)首先是自己实现的简易版的redux。主要是对着API按照自己的思路实现了一遍的初版,没有任何的异常处理function createStore(reducer, initialState) { let currentState = initialState, listeners = []; function getState(原创 2018-01-12 19:48:19 · 399 阅读 · 0 评论 -
redux源码解读(二)测试环境搭建和代码测试
(一)中写了一个简易版的redux,测试都是直接通工看命令行输出的,显然这是不科学的所以就需要写测试了,所以。我选择了jest。网上的介绍如下….配置简单的测试环境按照官方文档npm install --save-dev jest把下面的内容添加到package.json { "scripts": { "test": "jest" }}添加b原创 2018-01-14 14:51:30 · 405 阅读 · 0 评论 -
redux源码分析(三) 源码部分
源码结构: - /utils/ - actionTypes.js - isPlainObject.js 判断是否是简单对象 - warning.js 一些警告在控制台打印 - applyMiddleware.js - bindActionCreator.js - combineReducer.js - compose.js - index.js下面是每原创 2018-01-16 12:16:34 · 309 阅读 · 0 评论 -
浅谈JavaScript之深浅拷贝(二)
上篇写了一些实验。本篇讨论下实现最简单的方法 const newobj = JSON.parse(JSON.stringify(obj))这种方法有个问题是,对象内的函数JSON化会被忽略,所以,就需要手动实现了。function deepClone(obj) { let isArray = Array.isArray(obj); let result = is...原创 2018-03-13 14:59:30 · 240 阅读 · 0 评论 -
几个键盘事件的坑
今天在线笔试遇到几个之前没有注意的坑点,记录下change事件和input事件react中input的change事件是经过修改的,当input的输入内容改变就会触发;而原生input的change事件是当失去焦点切value值改变才会触发,在原生中用oninput比较好。keyup、keypress、keydown红宝书上解释: - keyup 释放键盘上的键时触发...原创 2018-03-19 15:53:55 · 398 阅读 · 0 评论 -
近期学习计划
引用某大佬的一句话,应该成为一个软件工程师而不是一个前端工程师4月: 1、学习了Preact的源码。根据自己的理解写了一些小结 2、五一的时候回顾了下vue,学习了下mpvue,写了个mpvue的微信小程序cnode社区。 3、学习了下代码可读性的一些规范。谷歌、腾讯等大厂的代码规范 4、适配了个基于mpvue的小程序markdown库。mpvue-cnode 5、重新回顾了...原创 2018-05-05 20:13:42 · 351 阅读 · 0 评论 -
js函数重载
以前上c++的时候函数重载再熟悉不过了,今天看到了一篇文章,也是讲了下js的函数重载,我觉得也是收益匪浅。 js语言本身是没有重载这种说法的,js的重载是巧妙地利用了jS的闭包的特性,先上代码吧。function addMethod(object, name, f){ var old = object[name]; //用old保存上次的指向 object[name]原创 2017-12-02 12:05:39 · 373 阅读 · 0 评论