javaScript系列
文章平均质量分 85
妙趣前端
学生
展开
-
深入浅出主流的几款小程序跨端框架原理
目前,小程序在用户规模及商业化方面都取得了极大的成功。微信、支付宝、百度、字节跳动等平台的小程序日活都超过了3亿。我们在开发小程序时仍然存在诸多痛点:小程序孱弱简陋的原生开发体验,注定会出现小程序增强型框架,来提升开发者开发体验;各家厂商小程序API碎片化的现状,注定会有多端框架会成为标配,由跨端框架肩负跨平台移植挑战。正是因为开发者对于提升小程序开发效率有着强烈需求,小跨端框架发展到如今已经百花齐放、百家争鸣:除了美团的 mpvue 、网易的 megalo 、滴滴的 chameloen 已经趋于稳定,原创 2022-03-13 17:24:22 · 3421 阅读 · 0 评论 -
大前端介绍
前端简单来说,大前端就是所有前端的统称,比如Android、iOS、web、Watch等,最接近用户的那一层也就是UI层,然后将其统一起来,就是大前端。大前端最大的特点在于一次开发,同时适用于所有平台,开发者不用为一个APP需要做Android和iOS两种模式而担心。大前端是web统一的时代,利用web不仅能开发出网站,更可以开发手机端web应用和移动端应用程序。为什么出现大前端由于node的出现,前端工程师不需要依赖于后端程序而直接运行,从而前后端分离起来。所以当开发一个新产品的时候服务只需要原创 2021-09-11 23:27:42 · 6432 阅读 · 1 评论 -
TypeScript in React
TypeScript in React为什么使用TypeScript?日常开发中弱类型JavaScript的痛点引用的组件/函数不知道可接收的参数以及参数类型-----各种找文档----甚至深入到源码复杂数据的数据流转难以追踪----各种Debugger或者日志排查BFF/后端接口字段以及字段类型不明确----各种找文档----负责人底层依赖的接口类型改动----前端全局搜索替换改动的地方----调试TypeScript为了类型定义而诞生,具有以下优势定义组件的属性以及函数的参数,代原创 2021-08-27 15:00:11 · 344 阅读 · 0 评论 -
初识WeakSet
初始WeakSetECMAScript 6 新增的“弱集合”(WeakSet)是一种新的集合类型,为这门语言带来了集合数据结构。WeakSet 是 Set的“兄弟”类型,其 API 也是 Set 的子集。WeakSet中的“weak”(弱),描述的是 JavaScript 垃圾回收程序对待“弱集合”中值的方式。基本 API可以使用 new 关键字实例化一个空的 WeakSet:const ws = new WeakSet(); 弱集合中的值只能是 Object或者继承自 Object 的类型,.原创 2021-05-30 16:17:56 · 1581 阅读 · 0 评论 -
this的用法
this 指向问题在绝大多数情况下,函数的调用方式决定了 this 的值(运行时绑定)。this是 JavaScript 语言的一个关键字。它是函数运行时,在函数体内部自动生成的一个对象,只能在函数体内部使用。function test() { this.x = 1;}上面代码中,函数test运行时,内部会自动有一个this对象可以使用。那么,this的值是什么呢?函数的不同使用场合,this有不同的值。总的来说,this就是函数运行时所在的环境对象。下面分四种情况,详细讨论th原创 2021-02-21 20:53:54 · 6958 阅读 · 1 评论 -
观察者模式-单例模式-Promise 实现TodoList
观察者模式-单例模式-Promise 实现TodoList单例模式单例是一种创建型设计模式, 让你能够保证一个类只有一个实例, 并提供一个访问该实例的全局节点。问题单例模式同时解决了两个问题, 所以违反了_单一职责原则_:保证一个类只有一个实例。 为什么会有人想要控制一个类所拥有的实例数量? 最常见的原因是控制某些共享资源 (例如数据库或文件) 的访问权限。它的运作方式是这样的: 如果你创建了一个对象, 同时过一会儿后你决定再创建一个新对象, 此时你会获得之前已创建的对象, 而不是一原创 2021-02-21 16:44:40 · 429 阅读 · 0 评论 -
智能重复
智能重复/* 试着编写smartRepeat 使用栈结构 ,自己编写栈结构 ,需要完成栈的基本操作,入栈 ,出栈,销毁栈,栈的初始化 将 3[abc] ---> abcabcabc 将 3[2[a]2[b]] ---> aabbaabbaabb 将 3[2[a]2[2b]] ---> aa2b2b aa2b2b aa2b2b (最终原创 2021-02-16 15:47:42 · 374 阅读 · 0 评论 -
观察者模式实现表单验证
作者:晴栀人生天地之间,若白驹之过隙,忽然而已。观察者模式观察者模式是这样一种设计模式。一个被称作被观察者的对象,维护一组被称为观察者的对象,这些对象依赖于被观察者,被观察者自动将自身的状态的任何变化通知给它们。当一个被观察者需要将一些变化通知给观察者的时候,它将采用广播的方式,这条广播可能包含特定于这条通知的一些数据。当特定的观察者不再需要接受来自于它所注册的被观察者的通知的时候,被观察者可以将其从所维护的组中删除。 在这里提及一下设计模式现有的定义很有必要。这个定义是与所使用.原创 2021-02-14 22:54:10 · 1507 阅读 · 6 评论 -
数据响应式
defineReactive函数监听变化import observe from './observe'export default function defineReactive(data, key, val) { console.log("我是defineReactive", data, key) if (arguments.length === 2) { val = data[key] } // 子元素要进行observe ,至此形成 递归, 这个.原创 2021-02-14 20:30:00 · 379 阅读 · 0 评论 -
koa基本使用
koa基本使用var Koa = require('koa');var Router = require('koa-router');var app = new Koa();var router = new Router();/* koa 中间件*/app.use(async(ctx, next) => { console.log(new Date()) await next();})router.get('/', (ctx, next原创 2021-02-09 22:10:53 · 1519 阅读 · 0 评论 -
JavaScript原型链
作者: 晴栀良辰难再,人生中大好时刻,不要再去旧梦重圆。文章目录原型链对应名称从属关系一、prototype二、`__proto__`补充说明:三、constructor补充说明:四、实例与原型五、原型的原型六、原型链继承属性继承方法在 JavaScript 中使用原型使用不同的方法来创建对象和生成原型链使用语法结构创建的对象使用构造器创建的对象使用 `Object.create` 创建的对象使用 `class` 关键字创建的对象性能错误实践:扩展原生对象的原型总结:4 个用于拓展原型链的方法..原创 2021-02-08 19:58:30 · 165 阅读 · 0 评论 -
遇到的问题笔记
A. DNS(Domain Name System,域名系统),因特网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住能够被机器直接读取的IP数串。BC.DNS协议运行在UDP协议之上,使用端口号53。D. 浏览器:chrome对每个域名会默认缓存60s,IE将DNS缓存30min,Firefox对DNS缓存功能,但是默认缓存时间只有1分钟,safari约为10s。windows DNS缓存的默认值是MaxCacheTTL,它的默认值是86400s,也就是..原创 2021-02-05 19:21:40 · 637 阅读 · 0 评论 -
DIFF算法之snabbdom
diff算法是发生在虚拟DOM上snabbdomH函数是用来产生虚拟节点的虚拟节点有哪些属性虚拟节点上树简单的p函数使用import { init } from 'snabbdom/init'import { classModule } from 'snabbdom/modules/class'import { propsModule } from 'snabbdom/modules/props'import { styleModule } from 'snabbdom/modul原创 2021-02-05 17:44:04 · 326 阅读 · 0 评论 -
diff算法
diff算法是发生在虚拟DOM上snabbdomH函数是用来产生虚拟节点的虚拟节点有哪些属性虚拟节点上树简单的p函数使用import { init } from 'snabbdom/init'import { classModule } from 'snabbdom/modules/class'import { propsModule } from 'snabbdom/modules/props'import { styleModule } from 'snabbdom/modul原创 2021-02-04 11:10:44 · 2070 阅读 · 1 评论 -
手写Mustache
手写Mustache文章目录手写Mustachemustache基本使用自己实现目录结构扫描类Scanner将模板字符串变成初步tokens将token生成嵌套tokens自己实现tokens处理“a.b.c”(lookup函数)递归处理嵌套数据(parseArray方法)将 tokens 变成dom字符串(renderTemplate方法)源码mustache基本使用mustache.js 是 mustache 模板系统的JavaScript实现。Mustache 是一套轻逻辑的模板语法。它可以原创 2021-02-03 18:52:18 · 462 阅读 · 0 评论 -
掌握webpack的使用
文章目录一、webpack 简介1.1 webpack 是什么1.2 webpack 五个核心概念1.2.1 Entry1.2.2 Output1.2.3 Loader1.2.4 Plugins1.2.5 Mode二、Webpack 初体验2.1 初始化配置2.2 编译打包应用三、webpack 开发环境的基本配置3.1 创建配置文件3.2 打包样式资源3.3 打包html资源3.4 打包图片资源3.5 打包其他资源3.6 devserver3.7 开发环境配置(基本模板)四、webpack 生产环境的基本原创 2021-01-27 22:42:23 · 1452 阅读 · 0 评论 -
柠檬水找零
力扣 柠檬水找零题目描述在柠檬水摊上,每一杯柠檬水的售价为 5 美元。 顾客排队购买你的产品,(按账单 bills 支付的顺序)一次购买一杯。每位顾客只买一杯柠檬水,然后向你付 5 美元、10 美元或 20 美元。 你必须给每个顾客正确找零,也就是说净交易是每位顾客向你支付 5美元。注意,一开始你手头没有任何零钱。 如果你能给每位顾客正确找零,返回 true ,否则返回 false 。示例 1:输入:[5,5,5,10,20]输出:true解释: 前 3 位顾客那里,我们按顺序收取原创 2021-01-14 16:42:10 · 142 阅读 · 1 评论 -
3行核心CSS代码的rate评分组件,秀到你怀疑人生
3行核心CSS代码的rate评分组件,秀到你怀疑人生文章目录3行核心CSS代码的rate评分组件,秀到你怀疑人生原理代码基本布局先把默认的星星显示出来实现选中单个星星实现连同兄弟元素一起高亮然后把input反向排列鼠标移入预览选中效果加入放大动画总结用css实现一个rate评分 ❗ 核心代码也就三行,效果如下:原理梳理如下:去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库]、;借用5个radio单选框,把默认样式都去掉,显示默认的星星;用checked伪类监听用户选原创 2021-01-10 20:06:54 · 182 阅读 · 2 评论 -
如何优雅的解决按钮”重复点击“问题
文章目录一、这个问题怎么解决呢?二、封装按钮锁定、解锁逻辑三、使用实例一、这个问题怎么解决呢?简单点,使用一个lock标记,在请求发出时上锁,上锁后就不可以再发请求,可以在请求结束后解锁:let clickButton = (function () { let lock = false return function (postParams) { if (lock) return lock = true // 假设使用axios发送请求 axios.post原创 2020-12-16 09:07:46 · 1090 阅读 · 0 评论 -
前端 API 请求缓存数据的 5 种方案
当我们睁开眼,时间与太阳一起走过;当我们难过时,时间与悲伤一起走过;当我们孤独时,时间与寂寞一起走过;当我们读短信时,时间在读信间走过;请珍惜时间,不要让时间哭着从我们指缝间走过。文章目录前端 API 请求缓存数据的 5 种方案方案一 数据缓存方案二 promise 缓存方案三 多promise 缓存方案四 添加时间有关的缓存方案五 基于修饰器的方案四总结前端 API 请求缓存数据的 5 种方案在开发 web 应用程序时,性能都是必不可少的话题。对于webpack打包的单页面应用程序.原创 2020-12-06 10:38:39 · 1045 阅读 · 0 评论 -
第三期--变量、作用域与内存
不要老叹息过去,它是不再回来的;要明智地改善现在。要以不忧不惧的坚决意志投入扑朔迷离的未来。文章目录变量、作用域与内存前言一、原始值与引用值1.动态属性2.复制值3.传递参数4.确定类型二、执行上下文与作用域1.作用域链增强2.变量声明2.1. 使用 var 的函数作用域声明2.2 使用 let 的块级作用域声明2.3. 使用 const 的常量声明2.4. 标识符查找三、垃圾回收1.标记清理2.引用计数3.性能4.内存管理4.1. 通过 const 和 let 声明提升性能4.2隐藏类和删除操.原创 2020-12-06 00:51:57 · 716 阅读 · 2 评论 -
第二期操作符
一份汗水,不份收获,一份耕耘,一份成就。——何肖娜文章目录操作符一元操作符一、递增/递减操作符二、 一元加和减三、 位操作符1. 按位非2. 按位与3. 按位或4. 按位异或5. 左移6. 有符号右移7. 无符号右移四、布尔操作符1. 逻辑非2. 逻辑与3. 逻辑或五、乘性操作符1. 乘法操作符2. 除法操作符3. 取模操作符六、指数操作符(**)七、加性操作符1. 加法操作符2. 减法操作符八、关系操作符九、相等操作符1. 等于和不等于2. 全等和不全等十、条件操作符十、赋值操作符十一、逗号操作.原创 2020-12-01 19:14:20 · 701 阅读 · 0 评论 -
Symbol 类型与Object类型
有汗水,有仔细、有心,前面的路没有转角。——范华倩文章目录Symbol 类型1. 符号的基本用法2. 使用全局符号注册表3. 使用符号作为属性4. 常用内置符号5. Symbol.asyncIterator6. Symbol.hasInstance7. Symbol.isConcatSpreadable8. Symbol.iterator9. Symbol.match10. Symbol.replace11. Symbol.search12. Symbol.species13. Symbol.spl.原创 2020-12-01 16:40:06 · 802 阅读 · 0 评论 -
JavaScript柯里化
文章目录JavaScript柯里化JavaScript中valueOf、toString的隐式调用JavaScript中valueOf函数与toString方法深入理解JavaScript柯里化JavaScript中valueOf、toString的隐式调用函数add可以实现连续的加法运算函数add语法如下add(num1)(num2)(num3)…;//注意这里是省略号哟,无限使用举例如下:add(10)(10)=20;add(10)(20)(50)=80;add(10)(20)(50原创 2020-11-30 08:48:29 · 836 阅读 · 2 评论 -
Object.defineProperty()使用
Object.defineProperty()本文部分参考了书籍《你不知道的javascript》上卷对象的定义与赋值经常使用的定义与赋值方法obj.prop =value或者obj['prop']=valueObject.defineProperty()语法说明Object.defineProperty()的作用就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性Object.defineProperty(obj, prop, desc)obj 需要定义属性的当前对象原创 2020-11-10 18:22:20 · 549 阅读 · 1 评论 -
requestAnimationFrame介绍
requestAnimationFrame介绍图像在屏幕上更新的速度,也即屏幕上的图像每秒钟出现的次数,它的单位是赫兹(Hz)。 对于一般笔记本电脑,这个频率大概是60Hz, 可以在桌面上右键->屏幕分辨率->高级设置->监视器 中查看和设置。这个值的设定受屏幕分辨率、屏幕尺寸和显卡的影响,原则上设置成让眼睛看着舒适的值都行。setTimeout 其实就是通过设置一个间隔时间来不断的改变图像的位置,从而达到动画效果的。但我们会发现,利用seTimeout实现的动画在某些低端机上会出现卡原创 2020-11-06 21:59:00 · 591 阅读 · 0 评论 -
instanceof运算符
instanceof运算符instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。function Car(make, model, year) { this.make = make; this.model = model; this.year = year;}const auto = new Car('Honda', 'Accord', 1998);console.log(auto instanceof Car);// expec原创 2020-11-05 22:52:25 · 589 阅读 · 0 评论 -
async 与 await 的用法详解
文章目录async概念返回值await概念用法返回结果匿名函数注意事项非 await 部分await 内部函数嵌套async概念用于声明异步函数,返回值为一个 Promise 对象,它以类似 同步 的方式来写异步方法,语法与声明函数类似,例如:async function fn() { console.log('Hello world!');}console.log(fn().constructor); // Promise()// 这里证明其返回值为一个 Promise 对象;原创 2020-09-08 13:24:25 · 2203 阅读 · 0 评论 -
八幅漫画理解使用 JWT设计的单点登录系统
上次在《JSON Web Token - 在Web应用间安全地传递信息》中我提到了JSON Web Token可以用来设计单点登录系统。我尝试用八幅漫画先让大家理解如何设计正常的用户认证系统,然后再延伸到单点登录系统。如果还没有阅读《JSON Web Token - 在Web应用间安全地传递信息》,我强烈建议你花十分钟阅读它,理解JWT的生成过程和原理。用户认证八步走所谓用户认证(Authentication),就是让用户登录,并且在接下来的一段时间内让用户访问网站时可以使用其账户,而不需要再次登录的原创 2020-09-04 14:59:04 · 148 阅读 · 0 评论 -
JSON Web Token - 在Web应用间安全地传递信息
文章目录JWT的组成载荷(Payload)头部(Header)签名(签名)签名的目的信息会暴露?JWT的适用场景JSON Web Token(JWT)是一个非常轻巧的规范。这个规范允许我们使用JWT在用户和服务器之间传递安全可靠的信息。让我们来假想一下一个场景。在A用户关注了B用户的时候,系统发邮件给B用户,并且附有一个链接“点此关注A用户”。链接的地址可以是这样的https://your.awesome-app.com/make-friend/?from_user=B&target_user原创 2020-09-04 14:56:15 · 139 阅读 · 0 评论 -
图解 JavaScript——代码实现(六种异步方案, 重点是 Promise、Async、发布 / 订阅原理实现,真香)
图解 JavaScript——代码实现(六种异步方案, 重点是 Promise、Async、发布 / 订阅原理实现,真香)本节主要阐述六种异步方案:回调函数、事件监听、发布/订阅、Promise、Generator和Async。其中重点是发布/订阅、Promise、Async的原理实现,通过对这几点的了解,希望我们前端切图仔能够在修炼内功的路上更进一步。一、六种异步方案1.1 回调函数异步编程的最基本方法,把任务的第二段单独写在一个函数里面,等到重新执行这个任务的时候,就直接调用这个函数原创 2020-08-22 13:05:11 · 368 阅读 · 2 评论 -
canvas曲线运动&阳光下的泡沫效果&泡沫曲线运动&矩阵数字雨&烟花效果&方块旋转
文章目录canvas曲线运动&阳光下的泡沫效果&泡沫曲线运动&矩阵数字雨&烟花效果&方块旋转曲线运动勾股定理三角函数什么是弧度角度转弧度弧度转角度三角函数图像与canvas结合曲线运动案例代码阳光下的泡沫效果结合canvas实现气泡效果效果图完整代码泡沫曲线运动效果图完整代码矩阵数字雨效果图完整代码环形方块旋转效果图完整代码canvas烟花效果效果图完整...原创 2020-04-30 10:51:25 · 2650 阅读 · 1 评论 -
offsetParent
offsetParentHTMLElement.offsetParent 是一个只读属性,返回一个指向最近的(指包含层级上的最近)包含该元素的定位元素或者最近的 table,td,th,body元素。当元素的 style.display 设置为 “none” 时,offsetParent 返回 null。offsetParent 很有用,因为 offsetTop 和 offsetLeft 都是相...原创 2020-04-30 09:52:31 · 1303 阅读 · 1 评论 -
带你使用canvas制作马赛克&canvas飞鸟动画&小球动画
文章目录canvas制作马赛克&飞鸟动画&小球拖拽动画一、了解单像素操作1、在canvas中的像素操作2、得到场景像素数据3、ImageData对象4、在场景中写入像素数据5、创建一个ImageData对象二、canvas使用图片1、在canvas中插入图片(需要image对象)2、在canvas中设置背景(需要image对象)渐变三、飞鸟动画效果图完整代码四、操作单个像素(行...原创 2020-04-25 13:46:56 · 2609 阅读 · 1 评论 -
canvas实现移动端刮刮卡
文章目录实现刮刮卡了解canvas的透明设置ImageData对象得到场景像素数据全局透明度的设置覆盖合成实现刮刮卡实现刮刮卡了解canvas的透明设置ImageData对象ImageData对象中存储着canvas对象真实的像素数据,它包含以下几个只读属性:width:图片宽度,单位是像素height:图片高度,单位是像素data:Uint8ClampedArray类型的一维数组...原创 2020-04-24 22:30:38 · 901 阅读 · 1 评论 -
带你“手撕代码”,了解基本原理实现
文章目录前言常见的“手撕代码”,都是高频题哦curry(柯里化)compose(函数组合)pipe(函数管道)throttle(函数节流)debounce(函数防抖)formatMoney(千分位)deepClone(深拷贝)模拟instanceof实现apply方法实现bind方法模拟Promise.all(多个Promise并行执行)多个Promise串行执行(两种方式)后记前言在前端面...原创 2020-04-18 07:38:14 · 10306 阅读 · 0 评论 -
JavaScript基础心法——深浅拷贝
文章目录深浅拷贝前言浅拷贝深拷贝JavaScript中的拷贝方法concatsliceObject.assign()... 展开运算符首层浅拷贝ES6写法总结深浅拷贝浅拷贝和深拷贝都是对于JS中的引用类型而言的,浅拷贝就只是复制对象的引用,如果拷贝后的对象发生变化,原对象也会发生变化。只有深拷贝才是真正地对对象的拷贝。前言说到深浅拷贝,必须先提到的是JavaScript的数据类...原创 2020-04-15 20:45:57 · 977 阅读 · 0 评论 -
让你变得高级(复杂判断的更优雅写法)
让你的代码更加的的完美每天学习一点,进步一点,加油!!文章目录复杂判断的更优雅写法前言使用switch使用Map数据结构使用object结构使用Map与object的区别总结后记复杂判断的更优雅写法前言我们编写js代码时经常遇到复杂逻辑判断的情况,通常大家可以用if/else或者switch来实现多个条件判断,但这样会有个问题,随着逻辑复杂度的增加,代码中的if/else/swi...原创 2020-04-07 12:15:28 · 812 阅读 · 0 评论 -
一步带你了解防抖和节流
欢迎大家的交流学习,留下你的见解,与方法每天进步一点,快乐成长!!!文章目录十分钟学会防抖和节流前言防抖(debounce)节流(throttle)1、时间戳2、定时器3、requestAnimationFrame后记十分钟学会防抖和节流前言作为一名前端开发者,我们经常会处理各种事件,比如常见的click、scroll、 resize等等。仔细一想,会发现像scroll、onch...原创 2020-04-07 10:57:05 · 300 阅读 · 0 评论 -
一步教你使用原生JS快速实现目标实例效果与解析
文章目录原生JS快速实现目标实例效果与解析HTMLCSSJS后记原生JS快速实现目标实例效果与解析放是很常见的一种相互作用效果,很多时候我们都会补充第三方的控件来实现,其实用原生js实现起来也非常的方便。然后我们就用原生js和css快速实现这样的效果:HTML的内容很简单,就是五个空的容器和一个可以被拖拽的元素:HTML<body> <div class...原创 2020-04-03 15:36:57 · 525 阅读 · 0 评论