肥仔John的博客_JavaScript

petite-vue源码剖析-逐行解读@vue-reactivity之effect

当我们通过effect将副函数向响应上下文注册后，副作用函数内访问响应式对象时即会自动收集依赖，并在相应的响应式属性发生变化后，自动触发副作用函数的执行。 // ./effect.ts export funciton effect<T = any>( fn: () => T, options?: R

响应式

嵌套

数组

原创点赞0 阅读79 收藏0 评论0 2022-04-30

petite-vue源码剖析-逐行解读@vue-reactivity之Map和Set的reactive

本篇我们会继续探索reactive函数中对Map/WeakMap/Set/WeakSet对象的代理实现。 Map/WeakMap/Set/WeakSet的操作由于WeakMap和WeakSet分别是Map和Set的不影响GC执行垃圾回收的版本，这里我们只研究Map和Set即可。 Set的属性和方法

迭代器

迭代

键值对

原创点赞0 阅读50 收藏0 评论0 2022-04-30

JS魔法堂：判断节点位置关系

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　在polyfill querySelectorAll 和写弹出窗时都需要判断两个节点间的位置关系，通过jQuery我们可以轻松搞定，但原生JS呢？下面我将整理各种判断方法，以供日后查阅。二、祖孙关系　　　　　　　　　　　　　　　　　　　　　　　　html<div id="ancestor">

chrome

html

jquery

原创点赞0 阅读96 收藏0 评论0 2022-03-29

JS魔法堂：再识ASCII实体、符号实体和字符实体

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　相信大家都熟悉通过字符实体   来实现多个连续空格的输入吧！本文打算对三类HTML实体及JS相关操作作进一步的整理和小结，若有纰漏请大家指正，谢谢。二、初识HTML实体 &nbs

html

表单

chrome

原创点赞0 阅读128 收藏0 评论0 2022-03-29

JS魔法堂：再识IE的内存泄露

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　 IE6~8除了不遵守W3C标准和各种诡异外，我想最让人诟病的应该是内存泄露的问题了。这阵子趁项目技术调研的机会好好的再认识一回，以下内容若有纰漏请大家指正，谢谢！目录一大坨！二、内存泄漏到底是哪里漏了？ 2.1.

内存泄漏

内存空间

当前页

原创点赞0 阅读65 收藏0 评论0 2022-03-29

JS魔法堂：被玩坏的innerHTML、innerText、textContent和value属性

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　由于innerText并非W3C标准属性，因此我们无法在FireFox中使用它(修正：FF45+已经支持innerText属性)，一般情况下我们可以使用textContent来代替，但它两者是否就能完全等同呢？在坑爹的表单元素（如input、textarea等）中表现是否依旧诡异呢？文本将记录一些实验结果，避免日

html

取值

赋值

原创点赞0 阅读59 收藏0 评论0 2022-03-29

JS读书心得：《JavaScript框架设计》——第12章异步处理

一、何为异步　　　　　　　　　　　　　　　　　　　　　　　　　　　　执行任务的过程可以被分为发起和执行两个部分。同步执行模式：任务发起后必须等待直到任务执行完成并返回结果后，才会执行下一个任务。异步执行模式：任务发起后不等待任务执行完成，而是马上执行下一个任务，当任务执行完成时则会收到通知。面对IO操作频繁的场景，异

流程控制

异步任务

回调函数

原创点赞0 阅读37 收藏0 评论0 2022-03-29

JS魔法堂: Native Promise Only源码剖析

一, 前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　深入学习Promise的朋友应该都看过<深入理解Promise五部曲>这一系列的文章, 以解除回调地狱之外的观点来剖析Promise更多的内涵,确实十分精彩. Part 1: The Sync Problem Part 2: The

子节点

事件处理

异步请求

原创点赞0 阅读34 收藏0 评论0 2022-03-29

JS魔法堂：元素克隆、剪切技术研究

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　当需要新元素时我们可以通过 document.createElement 接口来创建一个全新的元素，也可以通过克隆已有元素的方式来获取一个新元素。而在部分浏览器中，通过复制来获取新元素的效率比通过 document.createElement 方式的要高一些，具体的

html

事件处理

chrome

原创点赞0 阅读53 收藏0 评论0 2022-03-29

JS魔法堂：mmDeferred源码剖析

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　 avalon.js的影响力愈发强劲，而作为子模块之一的mmDeferred必然成为异步调用模式学习之旅的又一站呢！本文将记录我对mmDeferred的认识，若有纰漏请各位指正，谢谢。项目请见：mmDeferred@github二、API说明　　　　　　　　　　　　　　　　　　　　　　　　　　

异步模式编程

回调函数

异步调用

代码块

原创点赞0 阅读27 收藏0 评论0 2022-03-29

JS魔法堂：再次认识Function.prototype.call

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　大家先预计一下以下四个函数调用的结果吧！var test = function(){ co

伪代码

javascript

数组

原创点赞0 阅读216 收藏0 评论0 2022-03-29

JS魔法堂：jQuery.Deferred(jQuery1.5-2.1)源码剖析

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　 jQuery.Deferred作为1.5的新特性出现在jQuery上，而jQuery.ajax函数也做了相应的调整。因此我们能如下的使用xhr请求调用，并实现事件处理函数晚绑定。var promise = $.getJSON('dummy.js')// 其他逻辑处理promise.then(function(){ a

异步模式编程

回调函数

jquery

晚绑定

原创点赞0 阅读75 收藏0 评论0 2022-03-29

JS魔法堂：ES6新特性——GeneratorFunction介绍

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　第一次看koajs的示例时，发现该语句 function *(next){...............} ，这是啥啊？于是搜索一下，原来这是就是ES6的新特性Generator Function(生成器函数)。那什么是生成器函数呢？其实就相当

异步编程模型

yield

迭代器

生成器

html

原创点赞0 阅读85 收藏0 评论0 2022-03-29

JS魔法堂：IMG元素加载行为详解

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　在《JS魔法堂：jsDeferred源码剖析》中我们了解到img元素加载失败可以作为函数异步执行的优化方案，本文打算对img元素的加载行为进行更深入的探讨。二、资源加载的相关属性和事件　　　　　　　　　　　　　　　　　　资源加载首先当然是确定资源位置的 src属性、随之

加载

javascript

缓存

原创点赞0 阅读110 收藏0 评论0 2022-03-29

JS魔法堂：LINK元素深入详解

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　我们一般使用方式为 <link type="text/css" rel="stylesheet" href="text.css"> 来引入外部层叠式样式文件，但LINK元素各属性的具体含义、资源加载行为等方面却了解不多，本文打算稍微深入一下。由于内容较多，特设目录一坨：&

加载

css

缓存

原创点赞0 阅读74 收藏0 评论0 2022-03-29

JS魔法堂：ASI(自动分号插入机制)和前置分号

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　今晚在知乎看到百姓网前端技术专家——贺师俊对《JavaScript 语句后应该加分号么？》的回答，让我又一次看到大牛的风采，实在佩服万分。但单纯的敬佩是不足以回报他如此优秀的文字，必须深入理解文字的含义和背后的原理才不愧呢！在这之前我们需要先理解ASI（自动分号插入机制）。二、 Aut

javascript

ico

java

原创点赞0 阅读119 收藏0 评论0 2022-03-29

JS魔法堂：初探传说中的setImmediate函数

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　由于JavaScript程序为单线程，因此在执行长时间的操作时（如循环和递归操作）到导致UI线程长期被阻塞，无法响应用户操作请求（如点击按钮等），让用户体验大打折扣。于是想到将一个长时间操作切片成N个小操作并异步执行，例如jsDeferred中的 Deferred.repeat函数

异步模式编程

异步调用

调用栈

ui线程

原创点赞0 阅读196 收藏0 评论0 2022-03-29

JS魔法堂：函数节流（throttle）与函数去抖（debounce）

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　以下场景往往由于事件频繁被触发，因而频繁执行DOM操作、资源加载等重行为，导致UI停顿甚至浏览器崩溃。 1. window对象的resize、scroll事件 2. 拖拽时的mousemove事件 3. 射击游戏中的mousedown、keydown事件 4

时间间隔

c函数

简单实现

原创点赞0 阅读51 收藏0 评论0 2022-03-29

JS魔法堂：从void 0 === undefined说起

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　当使用coffeescript书写如下代码时 name = person?.name 会被预编译为 var name = typeof person !== "undefined" && person !== null ? person.name : void 0;

赋值

运算符

javascript

原创点赞0 阅读69 收藏0 评论0 2022-03-29

JS魔法堂：剖析源码理解Promises/A规范

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 Promises/A是由CommonJS组织制定的异步模式编程规范，有不少库已根据该规范及后来经改进的Promises/A+规范提供了实现如Q, Bluebird, when, rsvp.js, mmDeferred,&n

异步模式编程

事件处理

链表

数组

原创点赞0 阅读76 收藏0 评论0 2022-03-29

JS魔法堂：jsDeferred源码剖析

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　最近在研究Promises/A+规范及实现，而Promise/A+规范的制定则很大程度地参考了由日本geek cho45发起的jsDeferred项目（《JavaScript框架设计》提供该资讯，再次感谢），追本溯源地了解jsDeferred是十分有必要的，并且当你看过官网（http://cho4

异步模式编程

事件处理

函数实现

链表

原创点赞0 阅读57 收藏0 评论0 2022-03-29

JS魔法堂：通过marquee标签实现信息滚动效果

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　有限的空间展现无限的内容，这是滚动最常用到的地方。根据信息滚动效果我们可以有很多的实现方式，但HTML自带的 marquee标签是其中一个较简单的实现方式。下面记录一下，供日后查阅。二、 marquee标签的基础知识　　　　　　　　　　　　　　　　

默认值

滚动效果

css3动画

原创点赞0 阅读117 收藏0 评论0 2022-03-29

JS魔法堂：关于元素位置和鼠标位置的属性

一、关于鼠标位置的属性　　　　　　　　　　　　　　　　　　　　　　　　 1. 触发鼠标事件的区域盒子模型中的border,padding,content区域会触发鼠标事件,点击margin区域将不触发鼠标事件。 2. 鼠标事件对象MouseEvent下的属性 &nbs

html

鼠标事件

chrome

原创点赞0 阅读100 收藏0 评论0 2022-03-29

JS魔法堂：doctype我们应该了解的基础知识

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　什么是doctype？其实我们一直使用，却很少停下来看清楚它到底是什么，对网页有什么作用。本篇将和大家一起探讨那个默默无闻的doctype吧！二、什么是doctype　　　　　　　　　　　　　　　　　　　　　　　　doctype或DTD就是声明在文档首行，位于<html>前，用于告知浏览器该文档遵循那种级别的HT

html

标识符

3c

原创点赞0 阅读59 收藏0 评论0 2022-03-29

JS魔法堂：那些困扰你的DOM集合类型

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　大家先看看下面的js，猜猜结果会怎样吧！　　可选答案：　　①. 获取id属性值为id的节点元素　　②. 抛namedItem is undefined的异常var nodes = document.getElementsByName('dummyName');var node = nodes.namedItem('

html

chrome

自定义

原创点赞0 阅读36 收藏0 评论0 2022-03-29

JS魔法堂：属性、特性，傻傻分不清楚

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　或许你和我一样都曾经被下面的代码所困扰var el = document.getElementById('dummy');el.hello = "test";console.log(el.getAttribute('hello')); // IE67下输出test，其他浏览器输出null “搞毛啊

属性值

html

空字符串

原创点赞0 阅读63 收藏0 评论0 2022-03-29

JS魔法堂：获取当前脚本文件的绝对路径

一、前言　　　　　　　　　　　　　　　　　　　　　　　　当写模块加载器时，获取当前脚本文件的绝对路径作为基础路径是必不可少的一步，下面我们一起来探讨一下这个问题吧！二、各大浏览器的实现方式　　　　　　　　　　　　　　　　 [a]. Chrome和FF 超简单的一句足矣！var getCurrAbsPath = function(){ retu

javascript

绝对路径

safari

加载

原创点赞0 阅读207 收藏0 评论0 2022-03-29

JS魔法堂：Data URI Scheme介绍

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　上周五公司内部的Any Topic Conf.上我和同事们分享了这个主题，有同事说这个有用，有同事说这个没啥用，后来还延伸到网站性能的话题上，大家讨论的激烈程度让我觉得这次选题还不错。本篇先不管到底有用与否，仅仅记录理论知识。也希望大家一起来分享实战经验啊！二、从HTTP URI Scheme入手　　　　　

javascript

data uri scheme

css

数据

html

原创点赞0 阅读91 收藏0 评论0 2022-03-29

JS魔法堂之实战：纯前端的图片预览

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　图片上传是一个普通不过的功能，而图片预览就是就是上传功能中必不可少的子功能了。在这之前，我曾经通过订阅input[type=file]元素的onchange事件，一旦更改路径则将图片上传至服务器，接着就获取图片路径并赋值到img元素上。先不管文件异步提交的解决方案，就是服务端清理那些临时的预览图片已经增加不少

javascript

读取数据

microsoft

滤镜

原创点赞0 阅读103 收藏0 评论0 2022-03-29

一起Polyfill系列：让Date识别ISO 8601日期时间格式

一、什么是ISO 8601日期时间格式 ISO 8601是国际标准化组织制定的日期时间表示规范，全称是《数据存储和交换形式·信息交换·日期和时间的表示方法》。示例： 1. 2014-12-12T00:00:00.000Z 2. 2014-12-12T00:00:00.000+08 3. 2014-12-12T00

字符串

日期时间

时间格式

原创点赞0 阅读66 收藏0 评论0 2022-03-29

官方博客	意见反馈	了解我们	全部文章
在线客服	网站地图	热门标签

51CTO博客