JavaScript学习
js学习记录
ldz_miantiao
每天住在B站的切图仔
展开
-
Node 后端系统数据架构图
最近重新复习了 NodeJS 的后端编码,学习的时候梳理了整个流程,画出一副结构图,如果有错误请指正。我估计等我真正到业务中编码的时候,肯定早就已经忘记代码怎么写了,但是只要流程记住了,express/koa2/egg框架我应该都是可以看文档想起来的吧。。。。(但愿)。...原创 2020-11-27 21:59:06 · 3379 阅读 · 1 评论 -
Websocket 封装
export class WebSocketClass { /** * @description: 初始化实例属性,保存参数 * @param {String} url ws的接口 * @param {Function} msgCallback 服务器信息的回调传数据给函数 * @param {String} name 可选值 用于区分ws,用于debugger * @param {String} startWsAfter 启动之后要做的事情 */ constr原创 2020-10-22 14:46:45 · 794 阅读 · 0 评论 -
解决vue在IE11读取缓存的问题
垃圾IE会在发起请求的时候读取接口缓存,就贼蠢,我们要使用时间戳拼接在url来解决。最好不要直接加在参数上,怕后端会进行设置。function filterUrl (url) { return url.indexOf('?') !== -1 ? `${url}&time=${new Date().getTime()}` : `${url}?time=${new Date().getTime()}`}例子1:封装getfunction get(params, url) { r.原创 2020-07-07 20:57:10 · 742 阅读 · 0 评论 -
vue中解决 “数据大屏“ 展示的屏幕适配问题
现在非常流行的大数据可视化方案,不过要做数据大屏有一个很重要的问题就是屏幕适配。一、引入flexible文件flexible是移动端屏幕适配非常著名的的插件,能够帮助我们修改rem的值,也就是修改html标签下font-size的值。例:在vue-cli中的main.js主配置文件中引入// 适配flex,文件放在src/common目录下import "@/common/flexi...原创 2020-05-06 23:46:45 · 8454 阅读 · 2 评论 -
js中使用对象映射代替 if-else,可以这很优雅!
没人喜欢一大串的单调的ifelse,有没有更加优雅的方式呢?那就是 jojo 对象映射哒!例子://常见if-else组成的逻辑判断FnAll(code, p){ if(code === 'a'){ Fna(p); } if(code === 'b'){ Fnb(p); }if(code === 'b'){ Fnc(p); }if(code === 'd'){ F...原创 2020-04-22 17:25:15 · 1819 阅读 · 1 评论 -
递归解决JS深拷贝问题
内容来源于掘金上的《JavaScript 设计模式核⼼原理与应⽤实践》一书,但是内容是收费的所以放链接也是看不到的。就不给了。function deepClone(obj) { // 如果是 值类型 或 null,则直接return if(typeof obj !== 'object' || obj === null) { return obj } ...原创 2020-04-21 22:44:01 · 591 阅读 · 0 评论 -
js实现组合继承(es5)
转自神三元的博客,这段代码真的很美组合继承(简直完美)function Parent5 () { this.name = 'parent5'; this.play = [1, 2, 3]; } function Child5() { Parent5.call(this); //使用call改变作用域 this.type = 'child5'; }...转载 2020-04-17 00:51:05 · 260 阅读 · 0 评论 -
js判断网页是否全屏
下面是原文https://blog.csdn.net/k358971707/article/details/60465689这里直接上结果 function isFullscreenForNoScroll(){ var explorer = window.navigator.userAgent.toLowerCase(); if...转载 2020-03-28 00:11:00 · 3704 阅读 · 0 评论 -
AST抽象语法树——吃透javascript的语言精髓
Javascript就像一台精妙运作的机器,我们可以用它来完成一切天马行空的构思。我们对javascript生态了如指掌,却常忽视javascript本身。这台机器,究竟是哪些零部件在支持着它运行?原文链接 :https://segmentfault.com/a/1190000016231512?utm_source=tag-newest...转载 2020-03-01 22:46:29 · 487 阅读 · 0 评论 -
将数组扁平化并去除其中重复数据,最终得到一个升序且不重复的数组
arr.toString()可以将数组扁平化,new Set([…newArr ])是接用了set 特性进行去重function arrayClearRepeatAndUpSort(oldArr) { let newArr = oldArr.toString().split(",").sort((a,b)=>{ return a - b ; }).map(...原创 2020-03-01 18:20:28 · 481 阅读 · 0 评论 -
获取浏览器各种宽高
摘抄自掘金 https://juejin.im/post/5b94d8965188255c5a0cdc02获取屏幕的高度和宽度(屏幕分辨率):window.screen.height/width获取屏幕工作区域的高度和宽度(去掉状态栏):window.screen.availHeight/availWidth网页全文的高度和宽度:document.body.scrollHeig...原创 2020-02-22 14:45:44 · 359 阅读 · 0 评论 -
限制字符串的开头或者结尾
使用es6的startsWith和endsWith方法let str='postedit'; if(str.startsWith('po')){ alert('开头正确');}else if(str.endsWith('it')){ alert('结束正确');}原创 2020-02-20 23:21:38 · 408 阅读 · 0 评论 -
数组新增常用方法map,reduce,filter,forEach
内容来自阮一峰的博客map映射let arr=[66,59,80];let result=arr.map(item => {if(item >= 60){ return "及格"}else{ return "不及格"}});//result:["及格", "不及格", "及格"]reduce --汇总let arr = [12,69,180,8763...原创 2020-02-20 22:59:40 · 209 阅读 · 0 评论 -
Ajax与Flash技术的优劣简单对比
Ajax的优势:1.可搜索性 2.开放性 3.费用 4.易用性 5.易于开发。Flash的优势:1.多媒体处理 2.兼容性 3.矢量图形 4.客户端资源调度Ajax的劣势:1.它可能破坏浏览器的后退功能 2.使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中 ,不过这些都有相关方法解决。Flash的劣势:1.二进制格式 2.格式私有 3.flash 文件经常会很大,用户第一次使用...原创 2019-07-30 00:06:47 · 229 阅读 · 0 评论 -
高性能的JavaScript——超精简实用的学习总结
自述:谷歌的v8内核确实厉害,所以现在网页的运算速度极大的提升并且几乎大部分的网页代码不需要很深入的优化,就能够让网页流畅的运行起来,但是代码优化真的不需要了么?可能突破自己的瓶颈就差这一步。一、加载与执行解析多个<script>标签中间需要间隔的时间<script>文件要先加载完毕才能去渲染页面的内容,所以通常的做法是将 <script>标签放在b...原创 2019-06-29 14:46:52 · 248 阅读 · 0 评论 -
简单实用的jQuery实现表格筛选功能
$(&amp;amp;quot;tr:contains('关键词')&amp;amp;quot;).addClass(&amp;amp;quot;selected&amp;amp;quot;);//结合filter的筛选方法,可以实现表格的过滤。$(function(){ $(&amp;amp;quot;#filterName&amp;amp;quot;).keyup(function(){//f原创 2019-03-13 21:27:26 · 3140 阅读 · 1 评论 -
JS的小数操作:指数形式操作与显示位数的控制(附加整数检测)
1、让数字以指数的形式展示var a = 5E10;a //50000000000a.toExponential(); //5E+102、控制小数的显示位数var a = 42.59;a.toFixed(0); //43a.toFixed(3); //42.590a.toFixed(1); //42.6注意:例如42.toFixed(3)无效,因为 . 被认为是常量的一部分...原创 2019-12-02 10:36:35 · 499 阅读 · 0 评论 -
JS检查一个数是否为有限数值或者NaN的方法
一、ES6提供了Number.isFinite()方法用来检测一个数值是否为有限的--> Number.isFinite(NaN)<-- false--> Number.isFinite(Infinity)<-- false--> Number.isFinite("12")<-- false--> Number.isFinite(tru...原创 2019-09-10 22:49:30 · 626 阅读 · 1 评论 -
原生JS DOM 重点知识笔记(第六期-js动画)
一、延迟定时函数:setTimeout()setTimeout能够让函数在一段时间后执行setTimeout(function(){这里是内容},1000)//在1000毫秒之后执行函数var fun=function(){ alert("定时");}setTimeout("fun",1000);二、取消控制函数clearTimeout()最好用一个变量来存储延迟函数v...原创 2019-03-21 20:31:05 · 185 阅读 · 0 评论 -
es6的Class类3种私有方法实现
一、命名上做区别_ccc是一个仅限于内部使用的私有方法 class a{ //公有方法 foo(b){ this._ccc(b); } //私有方法 _ccc(b){ return this.data = b; }}二、私有方法移出模块模块内部的方法对外都是可见的,内部使用b.call(this, b),这样b实际上是当前模型 class a{ //公有方法 ...原创 2019-09-18 11:12:56 · 2506 阅读 · 0 评论 -
JavaScript把集合转换成数组(ES6语法)
数组可以使用众多的操作方法,如push()、pop()、等,但是对于一个集合来说是无法直接使用数组的方法的,那么ES6就给我们提供了一个把集合转变成数组的方法Array.from()第一个案例let arr = Array.of(3,4,7,9,11); console.log('arr=',arr) //arr=[3,4,7,9,11]第二个案例<html>...原创 2019-07-25 09:47:03 · 5640 阅读 · 0 评论 -
正则修饰符——y
ES6新增了修饰符y,那么它与原来的g修饰符有什么不同点呢g修饰符可以简单理解为是多次(全局)匹配y修饰符需要在lastIndex位置继续匹配,否则失败{ let s='bbb_bb_b'; let a1=/b+/g; let a2=/b+/y; console.log('one',a1.exec(s),a2.exec(s)); //one //["bb...原创 2019-07-24 20:53:40 · 686 阅读 · 0 评论 -
JS数组齐全的常用方法及其数据结构分析:检测、转换、栈、队列、重排序、操作、位置、迭代、归并
数组是js引用类型中最见的类型之一,掌握数组的各种使用方法是非常重要的,如:检测方法、转换方法、栈方法、队列方法、重排序方法、操作方法、位置方法、迭代方法、归并方法等, 这次记录一下这些方法。一、检测方法使用isArray()方法可以最终确定某个值是不是数组,而不管它是在哪个全局执行环境中创建的。使用方法如下:if(Array.isArray(value)){ //Array就是你的...原创 2019-07-24 15:05:14 · 193 阅读 · 0 评论 -
JS最常用的继承方式——组合继承(伪经典继承)
组合继承有时候也叫做为经典继承,指的是将原型链和借用构造函数的技术组合到一起,发挥二者之长。背后的思路是使用原型链实现方式对原型属性和方法的继承,而借用构造函数来实现对实例属性的继承。查看案例(高程三):function SuperType(name){ this.name=name; this.colors=["red","blue","green"]; } S...原创 2019-07-23 22:28:33 · 352 阅读 · 0 评论 -
原生JS DOM 重点知识笔记(第五期-CSS DOM)
一、CSS DOM操作获取一个内联样式,下面会输出:grey<p style="color:grey" id="para"> 这里是内容</p><script> var para=document.getElementById("para"); alert(para.style.color);</script>主动设置一个内...原创 2019-03-21 19:59:26 · 165 阅读 · 0 评论 -
原生JS DOM 重点知识笔记(第四期-Ajax)
Ajax代码如下// 使用JQUERY的写法var url="http://**********"$.getJSON(url,function(data/*json数据*/){ 需要执行的操作});//使用js的写法function loadXMLDoc(){ var xmlhttp; if(window.XMLHttpRequest) {//IE7+, Firefox, ...原创 2019-03-18 22:58:45 · 134 阅读 · 0 评论 -
原生JS DOM 重点知识笔记(第三期)
用DOM方法动态插入标签一、使用createElement方法创建标签让id等于testdiv的div内容进行操作 <div id="testdiv"> 这里是文本 </div>然后创建一个p标签,未归到DOM节点里面,还是文档碎片 var para=document.createElement("p");二、appendChild方法添加标签...原创 2019-03-16 14:18:39 · 119 阅读 · 0 评论 -
原生JS DOM 重点知识笔记(第二期)
一、给多个标签添加事件function{ if(!document.getElementById) return false;//判断标签是否能够使用 if(!document.getElementsByTagName) return false; if(!document.getElementById(&amp;quot;父元素ID&amp;quot;)) return false;//判断是否有此父标签 v...原创 2019-03-05 22:42:51 · 261 阅读 · 0 评论 -
ES6尾调用的阐述及其作用解释
转载于阮一峰的个人博客http://www.ruanyifeng.com/blog/2015/04/tail-call.html,尾调用(Tail Call)是函数式编程的一个重要概念,本文介绍它的含义和用法。一、什么是尾调用?尾调用的概念非常简单,一句话就能说清楚,就是指某个函数的最后一步是调用另一个函数。 function f(x){ return g(x); ...转载 2019-07-25 11:19:01 · 398 阅读 · 0 评论 -
使用nodejs快速创建一个本地服务器
使用nodejs能够让我们搭建一个本地服务器,相比其它语言简介许多。一、安装nodejs可以去官网查看多种下载方式,网上也有非常多的教程这里就不再着重介绍友情链接:node.js官网下载区域二、进行编程// 加载http核心模块var http = require('http')//创建web服务器var server = http.createServer()/* ...原创 2019-08-05 15:18:20 · 1092 阅读 · 0 评论 -
nodejs 中 exports 和 module.exports 的关系
exports 与module.exports 是nodejs中用来导入导出模块的指令,但是连两者的关系比较复杂,这里简单总结一下每个模块都有一个module对象;module对象中有一个exports对象;我们可以把对象需要把导出的成员挂载到module.exports接口对象中;也就是:module.exports.xxx = xxx的方式;node在每一个模块中都提供了一个成...原创 2019-08-08 15:41:13 · 170 阅读 · 0 评论 -
js数组查找一个目标元素方法
假设现有一个数组为a[2,4,5,-5,6,3]使用find()方法查找数组中小于0的第一个成员a.find( (n)=> n<0 ) 得到的值为 -5使用findIndex()方法查找数组中小于0的第一个成员的位置a.findIndex( (n)=> n<0 ) 得到的值为 3...原创 2019-09-11 14:30:30 · 20883 阅读 · 0 评论 -
es6字符串转为字符数组
需要使用到扩展字符串"..."[...'hello']=> ["h","e","l","l","o"]原创 2019-09-11 14:14:24 · 6309 阅读 · 0 评论 -
js数组合并es5和es6方法
es5数组合并方法var a1[2,2,3];var a2[4,4,4];a1.concat(a2); //[2,2,3,4,4,4]es6合并数组 var a1[2,2,3];var a2[4,4,4];[...a1,...a2]; //[2,2,3,4,4,4]原创 2019-09-11 14:09:15 · 1681 阅读 · 0 评论 -
push方法无法使用数组参数解决方法
push函数可以将一个数组添加到另外一个数组的尾部,但是需要借助其它的函数ES5写法,需要借助applyvar a1=[5,2,3]var a2=[2,4,6]Array.prototype.push.apply(a1,a2)ES6的扩展运输符可以优化这种方式var a1=[5,2,3]var a2=[2,4,6]a1.push(...a2)...原创 2019-09-11 13:48:18 · 2134 阅读 · 0 评论 -
返回正则表达式的修饰符和正文内容
source为es5方法,flags为es6方法一、返回表达式的正文/abc/ig.source值为abc二、返回表达式的修饰符/abc/ig.flags值为gi原创 2019-09-10 22:16:31 · 133 阅读 · 0 评论 -
es6将对象和数组声明为常量(冻结对象/数组)
我们知道const能够将变量声明为常量并赋值,但是数组之类的引用数据类型保存的是地址所以依旧能够改变内容,所以要想真正的将对象冻结,则应该配合使用Object.freeze方法进行声明const f = Object.freeze({});进行操作,常规模式下不起作用,严格模式下报错f.prop = 22;...原创 2019-09-06 14:24:36 · 514 阅读 · 0 评论 -
es6在块级作用域内声明函数需要注意的地方
es的let使其拥有了块级作用域的概念,并且可以光明正大的在作用域中声明函数,不过有几个需要注意的点不同浏览器拥有不同的环境,导致行为差异大 ,声明的时候尽量写成函数表达式的形式 ,而不是函数声明语句;这里是函数声明语句(不推荐){ let a = 12; function f(){ return a; }}这里是函数表达式(推荐){ let a = 12; l...原创 2019-09-06 13:40:48 · 306 阅读 · 0 评论 -
js对象数组赋值或者新增新对象
给数组里的对象进行赋值,如果不存在就添加新的数据对象var model = []//newData是新的对象数组model = Object.assign({}, model ,newData.data)原创 2019-08-21 13:14:42 · 4920 阅读 · 0 评论 -
原生JS DOM 重点知识笔记(第一期)
尽管现在的主流写法是mvvm框架,尽量避免了对dom 的直接操作,但是在javasript中对DOM操作依然是重点并且无法保证在今后的工作和学习中不涉及到此类技术(除非jQuery真的没有任何应用场景了)一、获取元素通过元素的ID,标签名字,类名获取,注意区分大小写1. getElementById(“miantiao”)<div id="miantiao"> 内容&l...原创 2019-03-02 11:00:24 · 260 阅读 · 1 评论