Night snow-CSDN博客

原创前端365(2021-08-28)

每天分享看到的知识点！（1）Web Socket介绍要创建一个新的 Web Socket, 就要实例化一个WebSocket对象并传入提供连接的URL:let socket = new WebSocket("ws://www.example.com/server.php")WebSocket对象没有像xhr一样的readystatechange事件，可以监听状态的变化。而是有与不同状态对应的其他事件。readyState值从0开始WebSocket.OPENING (0): 连接正在建立W

2021-08-28 21:33:39 130

原创 HTML点击对象key值获取路径

问题：公司遇到了这样一个业务，需要将JSON对象输出到html页面中，点击属性值，并展示这个对象的可访问路径网上没有找到相关的解决方案，索性自己写了一个<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v

2021-07-06 13:43:32 487

原创 webpack文件打包原理

webpack文件打包原理1. 打包核心代码add.js exports.default = function (a,b) {return a + b}index.js var add = require('add.js').default console.log(add(1,2))代码打包 //list为一个对象，存放文件名，和文件代码 (function (list) { function require(file) {

2021-07-06 12:30:35 160

原创 EventEmitter简单实现

class EventEmitter { constructor () { // 选择map做储存结构，比一般对象更简洁 this._events = this._events || new Map(); this._maxListeners = this._maxListeners || 10; } // 触发事件 ...

2020-06-13 00:12:49 272

原创 javaScript 常见的设计模式（一）

express常见的几个操作，有需要的可以看下https://github.com/yonghui-wang/qianduan/tree/master/expressconst express = require('express');const cookieSession = require('cookie-session');let server = express();server.listen(8080);server.use(cookieSession({ keys: [

2020-06-12 17:32:12 165

原创 new，instanceof原理剖析

new 功能分析看看new 运算符都干了什么1. 创建一个空对象obj2. 将空对象原型链上的__proto__ 指向构造函数的原型ptototype3. 绑定this值，将构造函数this指向空对象，并传入参数4. 如果构造函数Fn返回值是一个对象或函数，则返回改对象，否则返回obj function Parent (name,age) { this.name = name; this.age = age; }

2020-06-09 12:53:51 233

原创 MVVM原理初探索

html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <di

2020-06-08 20:46:59 141

原创 JS函数柯里化（curry）

JS函数柯里化（curry）函数柯里化，就是把一个多参数的函数，转化为单参数函数。也就是说：参数项可以分多次传递，直到参数满足条件，函数执行 function add(x, y) { return x + y; } add(1, 2) // 3 // 柯里化 function addX(y) { return function (x) { ret

2020-06-04 20:05:11 369

原创 canvas实现flybird小游戏

(function () { let Pipe = function () { this.h1 = Math.round(Math.random() * 220 + 100); // h1为上边管道，随机高度220-320之间 this.space = 140; // 上下方管道空隙为140 // 下方管道长度 = 总高度 - 土地高 -...

2020-01-08 17:37:54 1063

原创 js原生写个简单的轮播图

效果图css * { margin: 0; padding: 0; } .container { position: relative; width: 640px; height: 480px; margin: 50px auto; overflow: h...

2019-07-18 17:26:31 130

原创 js原生写一个瀑布流

瀑布流特点：1. 瀑布流元素宽度相同，高度不同2. 滚动页面时，在页面高度最小处插入元素效果图：话不多说，直接上代码css: * { margin: 0; padding: 0; } .box { float: left; padding: 0 5px...

2019-07-17 16:16:26 139

原创说下js中常见的几种循环

forEach: 类似for循环，无返回值 var arr = [1,2,3,4,5]; arr.forEach((item,index,array) => { console.log(index + '--' + item); // 0--1 1--2 2--3 ... console...

2019-07-16 12:39:48 473

原创 js展平一个数组

for循环递归数组的concat方法会返回一个新数组 let arr1 = [1,[2,3,[4]]]; function flatten(arr) { let result = []; for (var i = 0; i < arr.length; i++) { if (Array.isArray(arr[i])...

2019-07-14 14:08:04 756

原创 call，apply原理分析

call 与 apply 的相同点都是为了改变函数调用时this指向，函数可立即执行call 与 apply 的不同点call使用多个参数进行传参，apply只有两个参数，后面参数是一个数组一、call 使用说明let obj = { gender: '男'}function show(name,age) { console.log(`我是${name} 今年${ag...

2019-07-14 00:31:37 153

原创说下防抖和节流

1. 防抖触发高频率事件在n秒后函数会触发一次，n秒内触发高频率事件，重新计算时间举个例子：就像进电梯，电梯开启后，有一群人要进电梯，假如电梯3s内不进人就会关闭，现在不断有人进入。进电梯就是高频率事件，前一个人进去后，后面的人重新开始计时，，事件不断触发。当最后一个人进入后，3s后电梯开始关闭。 var inp = document.getElementById('input'); ...

2019-07-12 11:17:54 144

原创说说构造函数中几种继承

1.call的借用继承 function parent1() { this.name = "parent1" } function child1() { parent1.call(this) this.type = 'child1' } parent1...

2019-07-11 12:57:02 184

night snow 的博客