js
炉火纯青-旺
这个作者很懒,什么都没留下…
展开
-
观察者模式 vs 发布订阅模式
发布订阅模式相比观察者模式少了事件名称的定义demo.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initi原创 2022-02-26 19:38:50 · 121 阅读 · 0 评论 -
geometry 与 wkt 互转
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2022-01-13 18:05:22 · 2610 阅读 · 0 评论 -
EventTarget 源码实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>E.原创 2022-01-07 15:51:55 · 287 阅读 · 0 评论 -
js 获取元素css样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>获.原创 2022-01-07 08:57:46 · 312 阅读 · 0 评论 -
js 代码优化
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>j.原创 2021-12-29 15:27:44 · 503 阅读 · 0 评论 -
cdn 常用js库地址
1、react<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>2、babel&...原创 2021-10-30 12:07:27 · 664 阅读 · 0 评论 -
js 发布订阅模式、观察者模式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-10-28 15:32:57 · 297 阅读 · 0 评论 -
js 原型
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原.原创 2021-10-08 16:30:42 · 72 阅读 · 0 评论 -
DOM 事件流与事件委托
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-10-08 15:43:01 · 85 阅读 · 0 评论 -
js 闭包
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>闭.原创 2021-10-08 11:03:53 · 56 阅读 · 0 评论 -
js 防抖与节流
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>防.原创 2021-10-08 09:49:04 · 64 阅读 · 0 评论 -
JS call、apply、bind
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ca.原创 2021-10-06 11:28:11 · 80 阅读 · 0 评论 -
js 柯里化
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>柯.原创 2021-09-24 16:34:31 · 104 阅读 · 0 评论 -
js 高阶函数 缓存特性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-09-24 15:36:14 · 104 阅读 · 0 评论 -
Promise API
1、Promise.all()<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-09-22 14:37:39 · 94 阅读 · 0 评论 -
Javascript 算法 - 寻找数组的中心索引
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>寻找.原创 2021-06-30 08:51:42 · 175 阅读 · 0 评论 -
react hooks 实现组件拖拽
1:Draggable.jsimport React, {useState, useCallback, useMemo, useEffect} from 'react';const POSITION = {x: 0, y: 0};const Draggable = ({children, id, onDrag, onDragEnd}) => { const [state, setState] = useState({ isDragging: false, origin原创 2021-06-28 09:45:53 · 1295 阅读 · 2 评论 -
javascript 笔记
个人笔记原创 2021-05-26 18:06:19 · 84 阅读 · 0 评论 -
javascript 算法-两数之和
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>算法.原创 2021-03-18 08:53:04 · 292 阅读 · 1 评论 -
跨域的常见解决方案
跨域是怎么造成的?跨域是因为浏览器的同源策略所导致的本域(同源)指的是(下面三者都具备)?同协议:如都是http或者https同域名:如都是http://baidu.com/a 和http://baidu.com/b同端口:如都是80端口所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。浏览器引入同源策略主要是为了防止XSS,CSRF攻击。跨域解决方案 1、 通过jsonp跨域 2、 document.domain + ifram原创 2021-01-28 10:04:16 · 380 阅读 · 0 评论 -
JS 技巧
1:代码复用 - 适用于多表单验证/* 代码复用:适用于多表单验证 */ // 验证规则配置 const scheme = { first: { required: true, }, second: { required: true, }, last: { ..原创 2020-10-19 19:29:34 · 285 阅读 · 0 评论 -
JS 算法
1:如何返回斐波那契数列中下标为n的元素 斐波那契数列:(1:无限数列 2:前两项数值都为1,从第三项起每一项的数值为前两项数值之和)// 如何返回斐波那契数列中下标为n的数据function fib(n) { const numbers = [1, 1]; for (let i = 2; i < n + 1; i++) { numbers.push(numbers[i - 2] + numbers[i - 1]); } co...原创 2020-09-04 16:40:04 · 158 阅读 · 0 评论 -
es5 prototype、es6 class 实现课程添加demo
1:index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstr原创 2020-06-18 18:07:59 · 164 阅读 · 0 评论 -
javascript 选择和反选对象的属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>picking and rejecting</title></head><body> .原创 2020-05-14 11:11:25 · 298 阅读 · 0 评论 -
jquery 实现滑块拖动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>滑块拖动</title> <script src="https://cdn.bootcdn.net/aja.原创 2020-05-09 09:34:46 · 1240 阅读 · 0 评论 -
js 对象key值大小写转换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js 对象key值大...原创 2020-04-17 14:30:33 · 4146 阅读 · 0 评论 -
js 计算日期天数、获取日期数据
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...原创 2020-03-20 15:03:34 · 678 阅读 · 0 评论 -
ES7、ES8、ES9、ES10 新特性
es7新特性:1.Array.prototype.includes()方法在ES6中我们有String.prototype.includes()可以查询给定字符串是否包含一个字符,而在 ES7 中,我们在数组中也可以用 Array.prototype.includes 方法来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回true,否则返回false。const arr ...原创 2019-12-31 11:08:59 · 170 阅读 · 0 评论 -
js 根据标签内容获取长度,单位(px)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-12-16 09:53:58 · 2511 阅读 · 0 评论 -
JS 数组常用方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...原创 2019-04-13 23:52:37 · 89 阅读 · 0 评论 -
JS 模板字符串三种写法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...原创 2019-04-13 21:39:00 · 7787 阅读 · 2 评论 -
js笔记
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...原创 2019-04-09 17:43:23 · 111 阅读 · 0 评论 -
js 数组牛操作
1:扁平化n维数组结果:Array.flat(n) 是ES10扁平数组的api, n表示维度,n值为Infinity时维度为无限大。解析:实质是利用递归和数组合并的方法 concat 实现扁平2:去重结果:set 是ES6新出来的一种定义不重复数组的数据类型。Array . from 是将类数组转化为数组... 是扩展运算符,将set里边的值转化为字...原创 2019-04-08 13:26:38 · 113 阅读 · 0 评论 -
jQuery jsonp跨域请求
jQuery jsonp跨域请求 跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的。浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。如果协议,端口和主机对于两个页面是相同的,则两个页面具有相同的源,否则就是不同源的。如果要在js里发起跨域请求,则要进行一些特殊处理了。或者,你可以把请求发到自己的服务端,再通过后台代码发起请求,再将数据...转载 2019-01-21 09:47:36 · 138 阅读 · 0 评论 -
原生js 渐变图例生成
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-11-27 16:31:34 · 958 阅读 · 0 评论 -
HTML+CSS+JS 表单数据处理
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...原创 2019-04-22 09:12:34 · 1623 阅读 · 0 评论 -
JS 回调函数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com...原创 2019-04-17 19:10:27 · 103 阅读 · 0 评论 -
原生js使用AJAX请求json数据
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-04-22 20:30:01 · 3409 阅读 · 0 评论 -
原生AJAX请求github接口数据
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-04-22 21:08:41 · 282 阅读 · 0 评论 -
HTML CSS JS 实现弹窗
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-04-18 13:41:10 · 7607 阅读 · 1 评论