- 博客(47)
- 收藏
- 关注
RSS订阅原创 node中EventMitter实现
// 发布订阅模式function EventEmitter() { this.events = {} // 事件存放对象 this._maxListener = 10; // 默认最大绑定函数个数}EventEmitter.prototype.on = EventEmitter.prototype.addListener = function(type,listener) { if (this.events[type]) { this.events[type].push(list
2021-09-27 15:38:05
265
原创 fromNow
fromNow实现一个计算出距离当时时间的相对时间值function fromNow(lastTime) { var msPerMinute = 60 * 1000; // 每分钟的毫秒数 var msPerHour = msPerMinute * 60; // 每小时的毫秒数 var msPerDay = msPerHour * 24; // 每天的毫秒数 var msPerMonth = msPerDay * 30; // 每月的毫秒数(按每月30天) var
2021-09-09 14:21:44
188
1
原创 实现一个简单的koa
不完全的koa~lib > 目录request.jsresponse.jscontext.jsbody-parser.jscookie-parser.jskoa-router.jskoa-static.jskoa.jskoa.js > 主入口文件const http = require('http');const request = require('./lib/request');const response = require('./lib/respons
2021-08-24 21:00:36
229
原创 tapable
tapable 原理使用方法参照https://github.com/webpack/tapablehttps://www.jianshu.com/p/273e1c9904d2module.exports.SyncHook = class { constructor(args) { this.tasks = []; } tap(name, task) { this.tasks.push(task); } call(...args) { this.tas
2021-07-31 12:47:39
64
原创 webpack plugin
webpack plugin插件编写AsyncPluginmodule.exports = class AsyncPlugin { apply(compiler) { compiler.hooks.emit.tapAsync('AsyncPlugin', (compilation, cb) => { setTimeout(() => { console.log('tapAsync wait 500ms'); // 延迟500ms输出 c
2021-07-26 21:18:51
80
原创 webpack loader
webpack几个常用loader原理babel-loaderconst babel = require('@babel/core'); // 需要babel核心模块对es6代码进行解析转换const loaderUtils = require('loader-utils');module.exports = function (source) { const options = loaderUtils.getOptions(this); // 获取babel配置的options参数
2021-07-26 19:29:22
67
原创 nodejs实现一个http-server静态文件服务器
nodejs实现一个http-server静态文件服务器目录结构bin 存放配置信息和启动程序node_modulessrc 存放主体资源package.jsonpackage-lock.jsonbin > www.js 启动文件#! /usr/bin/env node// 指定脚本的解释程序是node，必需添加const program = require('commander'); // 在终端上显示信息提示const options = require('./conf
2021-07-25 14:48:16
1055
1
原创 webpack 基础学习
先安装webpack 必需模块npm i webpack webpack-cli wepback-dev-server -D图片资源处理{ test: /\.html$/, loader: ['html-withimg-loader'] // 对html文件中的img的src引用进行处理},{ test: /\.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-load
2021-07-20 13:20:51
301
2
原创 js 实现链表
js 实现链表function LinkedList() { this.Node = function(item) { this.item = item; this.next = null; } // let node = new Node(); let length = 0; let head = null; this.append = function(item) { var node = new this
2021-07-19 18:23:35
93
原创 js 实现二叉搜索树
js 实现二叉搜索树//二叉搜索树function BinaryTree() { let root = null; function Node(key) { this.key = key; this.left = null; this.right = null; } function insertNode (node,newNode) { if(newNode.key < root.k
2021-07-19 14:06:44
141
原创 js 实现队列
js 实现队列//创建队列function Queue() { let items = []; this.enqueue = function(item) { items.push(item); } this.dequeue = function() { return items.shift(); } this.front = function() { return items[0]; }
2021-07-19 14:00:35
76
原创 js排序算法
js排序算法 // 生成一个长度1000000的有序数组 let array = Array.from({ length: 1000000 }, (_, i) => i); //数组乱序 function fisher_yates_shuffle(arr) { for (let i = 0; i < arr.length - 1; i++) { const j = i + Math.floor(Math.random() * (arr.length - i)
2021-06-23 18:15:44
49
原创 js 常见基础算法问题
js 常见基础算法问题后序会继续补充// 数组扁平化const flatten = arr => [].concat(...arr.map(x => Array.isArray(x) ? flatten(x) : x)); // 节流function throttle (func, delay = 60) { let lock = false; return (...arg) => { if (lock) return; func(...arg
2021-06-23 18:07:38
65
原创 Vue 响应式原理
Vue 响应式原理<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> body <div id="app"> <div>{{ age }} <p> </p> </div>
2021-06-23 17:57:37
61
原创 js 实现HashTable
js 实现HashTable // 解决方法1：改造hash函数 class HashTable { constructor() { this.table = new Array(137); } simpleHash(data) {//简单的散列函数 除留余数法 let total = 0; for (let i = 0; i < data.length; i++) { total += data.charCodeA
2021-06-23 17:55:59
292
原创 Node ReadStream实现
node ReadStream 实现fs.createReadStream 继承自 stream模块const fs = require('fs');const EventEmitter = require('events');class ReadStream extends EventEmitter { constructor(path, options = {}) { super(); this.path = path; this.encoding = opt
2021-06-22 11:01:38
464
原创 Node 实现 require 加载模块
require 实现原理 mini 版const fs = require('fs');const path = require('path');const vm = require('vm');// require模块查找文件规范// 1. 核心模块、内置模块、node自带模块// 2. 文件模块，引用都是相对路径// node最新版本: 默认先查找同名文件，如果没有找到则尝试查找.js或者.json文件，如果仍然没有就查找到同名文件夹(会当成一个包)// 先查找package.jso
2021-06-22 10:51:31
280
原创 实现一个简易express
实现一个简易expressconst http = require('http');const url = require('url');function createApplication() { const app = function (req, res) { const { pathname } = url.parse(req.url); for (let i = 0; i < app.routes.length; i++) { let route =
2021-06-19 11:00:30
144
原创 Node.js Request用法
Node.js Request用法server.jsconst express = require('express');const bodyParser = require('body-parser');const multer = require('multer'); // 解析form-data数据const UUID = require('uuid'); //生成一串uuidconst storage = multer.diskStorage({ destination: 'sr
2021-06-09 16:14:11
1485
原创 Node.js WriteStream模块实现
Node.js WriteStream模块实现const fs = require('fs');const EventEmitter = require('events');class WriteStream extends EventEmitter { constructor(path, options) { super(path, options); this.path = path; this.encoding = options.encoding || 'utf
2021-06-08 22:37:50
292
原创 Node.js 递归创建和删除目录结构
Node.js 递归创建和删除目录结构const fs = require('fs');function mkdirp(dir) { const paths = dir.split('/'); console.log(paths); !function next(index) { let current = paths.slice(0,index).join('/'); console.log(current) if (index > paths.lengt
2021-06-08 17:27:21
212
原创 Node.js 实现Express.static静态文件中间件
Node.js 实现Express.static静态文件中间件const http = require('http');const mime = require('mime'); // 获取文件的类型，需npm 安装const fs = require('fs');const url = require('url');const path = require('path');function static(root, options = {}) { return function (re
2021-06-08 17:25:04
329
原创 Node.js 实现一个body-parse中间件
Node.js 实现一个body-parse中间件bodyParse.jsconst fs = require('fs');const querystring = require('querystring');const qs = require('qs');function BodyParser() {}// 解析 application/x-www-form-urlencoded 数据BodyParser.prototype.urlencoded = function (optio
2021-06-08 15:56:21
216
原创 JS实现BinaryTree
JS实现BinaryTree<!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-Compatible" content="ie=edge"> <tit
2021-06-08 15:28:26
124
原创 js实现双人对战五子棋
js实现双人对战五子棋<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>双人对战五子棋 - temptation</title> <style type="text/css"> #center{ text-align:center; } table { border: 1px solid black;
2021-03-25 11:16:30
1019
1
原创 js实现时空穿梭效果
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-Compatible" content="ie=edge"> <
2021-03-25 11:07:03
687
原创 纯css实现跳楼梯
纯css实现跳楼梯<!doctype html><html> <head> <!--声明当前页面编码格式为国际编码（utf-8）还有一种中文编码（gbk/gb2312）--> <meta charset="UTF-8"> <!--网页三要素--> <meta name="Keywords" content="关键词,关键词"> <meta name="Descripti
2021-03-25 11:05:17
313
原创 javascript 自定义事件
javascript 自定义事件 const event = (function() { const events = {}; // 绑定事件 const on = function(type,func) { events.hasOwnProperty(type) ? null : events[type] = []; let arr = events[type]; let i = 0; for (;i < arr.length; i++) { if (f
2021-03-08 21:30:02
104
原创 javascript 遍历node节点
<!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-Compatible" content="ie=edge"> <title>Document<
2020-12-30 19:30:31
780
原创 javascript 实现拖拽组件
js部分// Function.prototype 实现 function Drag(dom) { this.dom = document.getElementById(dom); this.disX = 0; this.disY = 0; } Drag.prototype.init = function () { this.bindEvent(); } Drag.prototype.bindEvent = function() { this.m
2020-12-30 19:05:14
506
2
原创 javascript 数组方法使用即实现
// var arr = [1,3,5,7,9];// var arr2 = arr.concat(11,13,15);// console.log(arr2);// filter:筛选符合条件的数组并返回,不改变原数组// var arr3 = arr.filter(function(ege){ // return ege > 3;// })// console.log(arr3);// every:判断数组是否符合条件,返回true或者false
2020-12-30 18:58:18
79
原创 javascript 异步加载js文件
function loadScript(url,callback) { var script = document.createElement("script"); script.type = "text/javascript"; if(script.readyState) { script.onreadystatechange = function() { if(script.readyState == "complete" || script.readyState == "loaded"
2020-12-30 18:54:06
109
原创 javascript 时间版运动框架案例
js部分 var timer = null; var div = document.getElementsByTagName("div"); function getStyle(obj, style) { if(window.getComputedStyle) { return window.getComputedStyle(obj,null)[style]; }else { return obj.currentStyle[style];
2020-12-30 18:51:43
126
原创 javascript二叉树
function Node(data, left, right) { this.data = data; this.left = left; this.right = right; } function setTree() { var root = new Node(1, null, null); var node1 = new Node(2, null, null); var node2 = new Node(3, null, null);.
2020-12-30 13:47:09
76
原创 javascript之数据去重
javascript数据去重 var arr = [1,5,5,5,6,6,6,3,3,2,2,1,1,9,9,9,"a","a","s","s"]; Array.prototype.unique = function(){ var newArr = []; var len = this.length; var obj = {}; for(var i = 0 ; i < len ; i++){ if(!obj[this[i]]){
2020-12-28 19:00:35
88
1
原创 javascript实现轮播图插件
javascript实现轮播图插件(function($) { function Slider(opt) { var opts = opt || {}; this.wrap = opts.father; this.img = opts.image; this.itemWidth = this.wrap.width(); this.imgNum = this.img.length; thi
2020-12-28 18:47:37
641
原创 javascript实现瀑布流
javascript实现瀑布流html、css部分图片部分可自己上网找<!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-Compatible" c
2020-12-28 18:40:18
60
原创 jQuery高级应用
jQuery高级应用 $.ptocy() //改变this指向 var name = "xin"; function show(a,b){ console.log(this.name); console.log(a,b) } var person = { name : "qiao" } $.proxy(show,person)(1,2); var obj = { init : function(){ this.bindEvent()
2020-12-28 18:27:34
104
原创 javascript tools.js工具函数
鼠标事件封装const MOUSE = { getEvent: function (e) { return e || window.event; }, getTarget: function (e) { return this.getEvent(e).target || this.getEvent(e).srcElement; }, getClientX: function (e) { return this.ge
2020-12-28 18:18:38
608
原创 javascript深度克隆
javascript深度克隆 const obj = { name: 'xin', hobby: ['playGames','footBall','swim','travel'], outer: { age: 18, arr: [], inner: { hello: 'world' } } } function deepClone(obj) { let
2020-12-28 18:15:32
39
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人