JavaScript
关注
分享
扫一扫
文章平均质量分 72
多云转晴ing
这个作者很懒，什么都没留下…
展开
-
手动实现Promise/A+（二）：实现promsie中的其它方法
Promise 的其他 API 实现then 方法基本就是 promise 的全部内容，至于 catch、resolve、reject 等方法都是在原有的基础上做的扩展或者封装，这些方法并不算是 promise 的核心。下面就一一实现这些方法。catchcatch 是 promise 实例上的方法，添加一个拒绝态的回调到当前 promise，然后返回一个新的 promise。实现如下：catch(errCbs){ return this.then(null, errCbs);}reso原创 2020-08-08 19:28:33 · 190 阅读 · 0 评论 -
手动实现Promise/A+（一）：实现 then 方法
promise 如今已经深度融入前端开发技术当中，很多模块内部都依赖 promise，使用 promise 可以很好的解决异步回调问题。promise 内部有三种状态：预备态（pending）、成功态（fulfilled）和失败态（rejected）。初始状态是 pending，当操作完成时会变成成功态，如果操作出现异常而终止时它会变成失败状态（或拒绝态）。一旦 promise 被履行或者被拒绝，它就不可逆转，即不能从成功态再变回其他状态，状态之间不能再相互转换。此时的 promise 可以认为是完成状态原创 2020-08-08 19:26:34 · 1000 阅读 · 0 评论 -
事件对象和事件冒泡、捕获机制
冒泡与捕获事件冒泡与捕获是事件处理的两种机制，主要描述当在一个元素上有两个相同类型的事件处理器被激活会发生什么。再点击子元素时，浏览器运行了两种不同的阶段：捕获阶段和冒泡阶段。捕获阶段的行为：浏览器检查元素的最外层祖先<html>，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它；然后，它移动到<html>中单击元素的下一个祖先元素，并执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素；而冒泡与捕获恰恰相反：浏览器原创 2020-07-27 10:23:32 · 496 阅读 · 0 评论 -
实现一个简单的 Redux 功能库
首先简单说一下 Redux 在 React 项目中的用法。Redux 和 React 之间并没有什么关系，脱离了 React，Redux 也可以与其它的 js 库（甚至是原生 js）搭配使用，Redux 只是一个状态管理库，但它与 React 搭配使用时却很好用，使开发 React 应用更加简介。这里实现一个简单的计数器功能，当鼠标点击按钮时数字就会加一。使用 React-Hooks 写一个 App 组件用来实现该功能：import React,{ useState } from "react";fu原创 2020-07-25 11:20:17 · 219 阅读 · 0 评论 -
Vue 学习笔记
1. 自定义事件Vue 实例内部已经实现发布订阅功能，直接用即可。当任意的两个组件想要通信时，可以利用自定义事件做到。加入 A 组件想给 B 组件传送数据。A 组件可以这么写：<template> <h2 @mouseenter="change('Hello!')">组件A</h2></template><script>import event from '../event';export default { name原创 2020-07-25 10:26:34 · 340 阅读 · 0 评论 -
四个好用的DOM API
1. classList.contains这个方法可以判断某个元素节点是否有某个 class 类名，返回布尔值。比如：// div 元素是否有 wrapper 类名div.classList.contains("wrapper"); 封装：function hasClassName(el, className){ return el.classList.contains(className);}node.contains除了 classList.contains 方法之外，还有原创 2020-07-25 10:20:51 · 334 阅读 · 0 评论 -
File、Blob、ArrayBuffer 相互转换
假如后端传过来一个 a.jpg 图片文件，但这个文件的数据类型是 ArrayBuffer，想要用 URL.createObjectURL 展示图片，如何做到？createObjectURL 函数的参数是 File 对象、Blob 对象或者 MediaSource 对象。因此就要将 ArrayBuffer 转成这三者中的其一类型。ArrayBuffer、File 相互转换ArrayBuffer 转成 File 直接调用 new File 构造函数即可：function bufToFile(buf,原创 2020-07-25 10:06:06 · 16824 阅读 · 4 评论 -
响应式设计技术概览
什么是响应式开发在移动互联网日益成熟的时候，桌面浏览器上开发的网页已经不能满足移动端设备上的展示和阅读。在响应式流行之前，通常的做法是对移动端单独开发一套特定的版本，但是，如果移动端设备越来越多的时候开发成本会比较大，因为需要做所有屏幕的适配。响应式开发的目的就是：一个网站能兼容多种终端。实现不同屏幕分辨率的终端上浏览网页时有不同的展示方式，通过响应式设计能使网站在不同终端上有更好的浏览阅读体验。响应式开发的技术媒体查询（@media）；bootstrap；CSS 单位（rem、vh、vw、e原创 2020-07-25 10:03:30 · 1976 阅读 · 0 评论 -
发布订阅模式以及 EventEmitter 类的实现
在前端开发中，经常会使用到发布订阅模式，发布订阅模式也被称为观察者模式。最常见的发布订阅模式莫过于给 DOM 绑定事件，当点击一个按钮或者鼠标移动到某个元素上就会触发事件监听函数，然后弹出一个文本框或者改变元素样式。div.addEventListener("click", () => { alert("Hello!");});div 元素相当于一个订阅者，他会告诉浏览器（发布者），他要订阅一个 click 事件，这个事件会弹出一个提示框。当用户点击 div 元素时，浏览器就会“发布”原创 2020-05-23 12:08:41 · 1231 阅读 · 0 评论 -
放大镜原理
在浏览各大网购网站时（淘宝、京东等），图片放大效果是常见的一个功能。实现思路鼠标移入小图片时，放大的图片区域会显示出来，同时小图片上有一个提示被放大的区域；当移出小图片时，放大的图片隐藏，提示区域也被隐藏；在移动过程中提示框也会跟着鼠标进行移动。相关技术鼠标事件；背景图片样式；元素的尺寸属性和数学计算；HTML 骨架<div id="main"> <div class="wrapper"> <!-- 小图和提示被放大的区域原创 2020-05-17 16:58:30 · 1078 阅读 · 0 评论 -
PWA 入门教程
PWA渐进式 web 应用 (Progressive web apps) 简称为 PWA。它可以给用户原生应用的体验。之所以称为“渐进式”，是因为给网站架设 PWA 并不影响原有的网页（或者说不需要代码层面的重构），这是一个独立的功能，你可以选择性添加该功能。PWA 的主要作用：可以让网站安装到设备的主屏幕上，就像用户在 APP 商店下载应用后这个应用的图标会放在桌面上。PWA 不需要用户通过应用商店进行下载，当你访问某个站点时，该站点如果支持 PWA，它会提示你可以将这个站点添加到桌面上。PWA原创 2020-05-09 09:45:30 · 2952 阅读 · 1 评论 -
commander.js + axios 做一个查询天气的命令行工具
commander.js 是一个用来创建命令行程序的 Nodejs 库。commander 的 API 没有几个，本文主要用到了其中的 option 方法。而天气信息则是使用的高德天气的开放web接口，注册登录高德开放平台后就可以使用里面的免费API接口了。初始化项目首先创建一个 weather 文件夹，初始化 npm：npm init然后需要下载两个模块：yarn add comm...原创 2020-04-29 16:46:12 · 360 阅读 · 0 评论 -
浏览器特性
1. onload 事件图片可以绑定一个 onload 事件，表示当图片加载完成后才触发执行脚本。<body> <img src="./img/01.png" /> <script> let img = document.querySelector('img'); img.onload = functio...原创 2020-04-26 12:42:02 · 722 阅读 · 1 评论 -
哈希表
哈希表哈希表，又叫散列表，是数据结构的一种。散列表用途很广泛，比如一个电话薄，每一个姓名对应一个电话号码。姓名与电话号码呈映射关系。假如要创建一个电话薄，可以使用 JavaScript 对象来实现。function PhoneBook(){ var book = {}; this.add = function(name,number){ book[name] ...原创 2019-10-27 11:14:18 · 198 阅读 · 0 评论 -
HTML5 File API 使用入门
HTML5 File API在 HTML5 的 input 标签中，新增了一个 type=file 属性的表单控件。这个控件可以让我们能调出文件选择窗口然后读取这些文件的内容成为可能。<input type="file" id="file-ipt" name="file" accept=".jpg,.jpge,.gif,.png">上面代码就是一个 file DOM。它支持选择...原创 2019-10-20 09:21:34 · 490 阅读 · 0 评论 -
for循环的应用—— 打印100以内的素数；打印1000以内的完数（一个数自身所有的因数相加等于它本身的数）
1> 打印100以内的素数：<script>var i ,j; for(i = 2;i <= 100;i ++){ var count = 0; //这一步非常重要！每次内循环后归零重新开始 for(j = 1;j <= i/2;j ...原创 2018-05-03 16:38:14 · 1411 阅读 · 0 评论 -
递归示例：斐波那契数列和汉诺塔
斐波那契数列：<script>// 1>斐波那契数列（输入数字，打印出斐波那契数列的这一项） function fb(n){ if(n == 1 || n == 2){ return 1; } return fb(n-2) + fb(n-1); }</script>当在控制台调用函数时会出现结果：汉诺塔：简述...原创 2018-05-10 16:14:19 · 351 阅读 · 0 评论 -
js 两种方法打印九九乘法表
1> 循环嵌套：<script> var i , j; for(i = 1;i <= 9;i ++){ document.write("<br>"); // i 为行的乘数，j 为列数 每一行打印完后换行 for(j = 1;j <= ...原创 2018-05-06 21:40:43 · 50981 阅读 · 4 评论 -
Object 中的几个很相似的方法
Object 中的几个很相似的方法这里主要讨论这么几个方法，他们用法很相似，但又有所不同。在实际开发中就有可能陷入其中，搞不清到底用哪个方法比较好。下面就开始一一介绍。in 和 hasOwnProperty() 两方法的区别这两个方法用来判断一个属性是否是某个对象中的，都会返回一个布尔值。var obj = { a: 1}console.log('a' in obj); ...原创 2019-09-15 12:15:42 · 518 阅读 · 0 评论 -
JavaScript计算字符串的字节数
<script> var str = '企sss鹅t'; function countStr(str){ var count = 0; for(var i = 0;i < str.length;i ++){ //str.length: 变量值的字符长度，值为6 ...原创 2018-05-01 12:16:07 · 345 阅读 · 0 评论