关注
分享
2b勿扰
专注技术的研究
展开
-
前后端通信(node版本) ws和websocket.io的使用
ws的使用前端代码人物一<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...原创 2020-04-23 23:27:44 · 16842 阅读 · 0 评论 -
node下 http，https，tcp服务的创建
HTTP协议var http = require('http');var server = http.createServer(); // server eventEmitterserver.on('request', function (request, response) {console.log('666666666666666666') }).listen(9080, func...原创 2020-04-23 22:30:35 · 15960 阅读 · 0 评论 -
ES6 Proxy的详解
Proxy 对象 get，set的应用let handel = { get(target,key){ console.log(key); if(key[0] === "_"){ throw new Error('内部属性禁止外部访问') } return...原创 2020-03-15 20:48:52 · 16205 阅读 · 0 评论 -
ES6 generator函数的详解
迭代器的基础用法function* helloGenerator(){ yield '我是next1' yield '我是next2' return 123}let res = helloGenerator()console.log(res.next());console.log(res.next());console.log(res.next());cons...原创 2020-03-13 23:15:04 · 15934 阅读 · 0 评论 -
JS 闭包底层和作用域链详解
首先上代码js的有些属性是访问不到的 [[scope]] 域的意思js引擎自己去用我们用不到[[scope]] 存储的就是由这个函数产生而产生的很复杂的结构执行期上下文的集合 这个集合呈现的是链式结构 这个才是真正的作用域链系统会根据内部的原理定期的调用scope 系统自己用的属性// a函数定义 function a(){ // b函数定义 ...原创 2020-03-13 13:39:15 · 15943 阅读 · 0 评论 -
ES6专题 class类继承super详解
super作为对象在普通方法中指向父类的原型对象class A{ // 属性应该怎么写？？？ //#pA私有属性，static pA静态属性 pA = 123 //实例属性 p(){ return 3 }}//A.prototype.pA = 123class B extends A{ constructor(){ ...原创 2020-03-12 23:01:05 · 16468 阅读 · 0 评论 -
ES6专题 class中函数的指向问题的两种解决方案
class Person{ constructor(){ this.eat = this.eat.bind(this)//第二种方式 } eat(){ // 调用get this.get() } //第一种方式 // eat = ()...原创 2020-03-11 22:34:59 · 16036 阅读 · 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-U...原创 2020-01-21 22:49:53 · 16141 阅读 · 0 评论 -
JS 第三方工具封装经典案例（canvas元素拖动）
<!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-U...原创 2020-01-21 16:04:54 · 16338 阅读 · 0 评论 -
JS 第三方工具封装经典案例（canvas时钟）
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>走动的时钟</title> <met...原创 2020-01-21 10:11:04 · 15943 阅读 · 0 评论 -
JS 基础篇(音量调节器）
js文件var objFun = { bindEvent(boxID){ this.wrapperDom = document.getElementById(boxID); this.audio = this.wrapperDom.querySelector('audio'); this.moon = this.wrapperDom.que...原创 2020-01-21 09:50:47 · 18148 阅读 · 0 评论 -
JS 基础篇(classlist兼容性问题）
<!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-U...原创 2020-01-20 21:39:58 · 17718 阅读 · 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-...原创 2020-01-20 21:23:33 · 16202 阅读 · 0 评论 -
JS 基础篇(发布订阅模式)
发布订阅模式的js文件//发布者var eventObj = { //缓存列表，存放订阅者的信息 list:{}, //添加订阅 listen:function(key,fn){ if(!this.list[key]){ this.list[key] = []; } typeof fn==='...原创 2020-01-20 18:30:21 · 16304 阅读 · 0 评论 -
JS 基础篇(迭代器)
function each(obj,fn){ if(Array.isArray(obj)) { for(var i=0,len=obj.length;i<len;i++) { // fn(obj[i],i); fn.call(obj,obj[i],i,obj); // cb.apply(this,...原创 2020-01-20 17:39:51 · 15904 阅读 · 0 评论 -
JS 基础篇(策略模式-表单验证案例)
<!DOCTYPE html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" con...原创 2020-01-20 17:33:07 · 16139 阅读 · 0 评论 -
JS 基础篇(代理模式)
保护代理<script> //主体，发送 function sendMsg(msg) { console.log(msg); } //代理 function proxySend(msg) { msg = msg.replace(/XT/, ''); sendMsg(msg); } ...原创 2020-01-20 17:21:08 · 16003 阅读 · 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-equ...原创 2020-01-20 17:04:29 · 15907 阅读 · 0 评论 -
JS 基础篇(深拷贝和浅拷贝)
浅拷贝的几种方式//对象var obj1 = Object.assign({},obj);var {...obj2} = obj; //扩展运算符//数组var arr01 = [1,2,3];arr02= arr01.slice(0);var [...arr03] = arr01;//扩展运算符var arr04 = Array.from(arr01);var arr05=a...原创 2020-01-20 11:12:58 · 15874 阅读 · 0 评论 -
JS 基础篇(ajax底层封装)
js代码function xmlAjax(opt){ return new Promise(function(resolve,reject){ var initOpt = { method:'post', url:'', data:null, async:true, ...原创 2020-01-19 17:16:30 · 15969 阅读 · 0 评论 -
JS 基础篇(原型和继承)
原型主要是用来存公共属性和方法function Animal(){}var a=new Animal()a._prop_=Animal.prototype//对象的_prop_指向函数对象的原型a.constructor=Animal//对象的构造函数指向函数对象//a即为Animal的实例也为Animal.prototype的实例在这里插入代码片原型继承function...原创 2020-01-19 11:18:03 · 16020 阅读 · 0 评论 -
JS 基础篇(闭包)
闭包特点1.函数嵌套函数2. 函数内部可以引用外部的参数和变量3. 参数和变量不会被垃圾回收机制回收，而是在保存在内存中闭包的好处希望变量存在缓存中2.避免全局污染for(var i=0;i<ali.length;i++) { // (function(i){ // // console.log(i) ali[...原创 2020-01-19 09:30:53 · 19875 阅读 · 0 评论 -
JS 基础篇(冒泡，捕获，事件委托)
冒泡和捕获 <div id="wrapDiv">wrapDiv <p id="innerP">innerP <span id="textSpan">textSpan</span> </p> </div> <script> var wrapDiv = document....原创 2020-01-18 22:43:50 · 19940 阅读 · 0 评论 -
JS 基础篇(对象的详解)
JS对象有内部对象，浏览器对象，自定义对象内部对象Array,Object,Date ,Math, Number,String,RegExp，Error, EvalError ,TypeError浏览器对象window, document , Screen ,History,Location自定义对象//图片对象var img = new Image();img.src='...'...原创 2020-01-18 19:30:28 · 19890 阅读 · 0 评论 -
JS 基础篇(数据类型和创建对象的方式)
JS 的数据类型有值类型和引用类型值类型：字符串 string ， 数字 NUMBER ，布尔 ，undefined ，Symbol //值类型 var str = '我是字符串类型' ; var num = 110; var bol =true; //false var km = null; var sym = Symbol('name');//Symbol 常用与常量，唯...原创 2020-01-18 17:43:30 · 19962 阅读 · 0 评论 -
WebSocket的使用
前端代码form id="form1" runat="server"> <div> <input id="userName" type="text" /> <input id="conn" type="button" value="连接" /> <input id="close" type="...原创 2020-01-15 21:49:21 · 18600 阅读 · 0 评论 -
ES6+ 迭代器的实现原理
const arr = [1,2] function makeIterator(array){ let nextIndex = 0; return { next:function(){ return nextIndex < array.length ? { ...原创 2019-12-25 20:44:21 · 20245 阅读 · 0 评论 -
ES6+ 专题（第七种数据类型Symbol）
Symbol实现类对象的私有属性// 会实现私有属性 const private = Symbol('private') const obj = { // 私有属性 _name:'张三', [private]:'私有的属性' } console.log(obj); console.log(Object.keys(obj)...原创 2019-12-25 10:57:27 · 20166 阅读 · 0 评论 -
ES6+ 专题（数组去重方法）
<!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-U...原创 2019-12-24 21:27:07 · 20257 阅读 · 0 评论 -
ES6+ 专题篇（模板的使用）
let s1 = '啦啦啦\n哈哈哈' console.log(s1); let s2 = `啦啦啦哈哈哈` console.log(s2); let a = '-------' let b = '啦啦啦'+a+'哈哈哈' console.log(b); let b1 = `啦啦啦${a}哈哈哈` console.log(b...原创 2019-12-24 11:39:09 · 20140 阅读 · 0 评论 -
ES6+ 专题篇（预解析底层详解）
预解析内容AO{ a :undefined 1 function a(){} b :undefined c:function c(){} }在按照顺序读取 function fn(a){ console.log(a); // function a(){} var a = 123; co...原创 2019-12-24 11:23:16 · 20173 阅读 · 0 评论 -
moke.js基础语法
const Mock = require('mockjs')const data = Mock.mock({ //定义数据生成规则 'memberList|2-6': [ { 'id|+1': 2, // 自增长1 ，初始值为2， 'name|1-3': '小梦', // 随机生成1到3个重叠小梦 'name|2'...原创 2019-12-15 17:34:07 · 5122 阅读 · 0 评论 -
JS 第三方工具封装经典案例（刮刮乐）
css*{ margin: 0; padding: 0;}.prize { position: absolute; width: 300px; height: 150px; text-align: center; line-height: 150px; font-size: 30px; color: red;}#ca...原创 2019-12-11 21:59:54 · 2895 阅读 · 3 评论 -
WEBGL （绘制动态点）
<!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-U...原创 2019-12-11 15:02:20 · 2965 阅读 · 0 评论 -
JS 第三方工具封装经典案例（canvas抽奖轮盘）
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>转盘旋转</title></head><body> <canvas id="canvas" width="500" heigh...原创 2019-11-29 20:53:21 · 833 阅读 · 0 评论 -
JS 第三方工具封装经典案例（canvas动态绘图）
<!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-11-29 14:58:49 · 1050 阅读 · 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-11-28 18:53:55 · 683 阅读 · 0 评论 -
JS 第三方工具封装经典案例（弹框）
弹框主要的js文件var createMsgWin = { init(param) { var initParam = { title: '友情提示', //标题 tips: "没有任何提示信息！", //主体内容 btnOk: '确定', //确定按钮文字 btnNo: '取...原创 2019-11-28 10:43:35 · 571 阅读 · 0 评论