![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
文章平均质量分 90
sayid760
日常知识压缩整理、以备不时之需;
欢迎拍砖,不足之处还望博友指出
展开
-
【前端算法系列】回溯算法
46.全排列就是返回其所有可能的组合种类第1种方法 递归:遍历每一层还有哪些子节点没有被访问过,没有访问过的就push到当前组合里终结条件:遍历的层级数等于传入数字个数时,返回结果// 入参是一个数组const permute = function(nums) { // 缓存数组的长度 const len = nums.length // curr 变量用来记录当前的排列内容 const curr = [] // res 用来记录所有的排列顺序 const res =原创 2021-01-04 23:30:34 · 364 阅读 · 0 评论 -
日常用到的前端性能优化
图片的优化图片动画webp现代图像格式,可位图像提供无损压缩和有损压缩,可设置透明。无损比png小26%,有损比jpeg小25-34%,比gif有更好的动画(缺点:最多处理256色,不适合彩色图片)图片压缩图片尺寸随网络环境变化响应式图片js绑定事件检测窗口大小css媒体查询,加载不同格式图片img标签的srcset属性根据浏览器根据宽、高和像素密度来加载相应的图片资源// 媒体查询@media screen and(max-width:640px){ my_imag原创 2020-12-28 23:31:06 · 129 阅读 · 0 评论 -
前端手写系列
js原生类效果原创 2020-12-07 11:35:50 · 1202 阅读 · 4 评论 -
前端数据监控
有什么数据要收集的?收集完,怎么上报?上报完,各种数据怎么处理?原创 2020-09-16 22:58:19 · 703 阅读 · 0 评论 -
UI组件库框架设计
Vue组件库搭建实践vue代码风格一个组件框架的设计:搭建框架–> 编写组件 --> 测试组件 --> 发布上线 --> site预览和文档目录结构└── build/ ├── webpack.base.conf.js ├── webpack.dev.conf.js ├── webpack.prod.conf.js ├── webpack.umd.conf.js ├── webpack.theme.conf.js ├── web原创 2020-09-21 22:51:09 · 1084 阅读 · 0 评论 -
搭建cli命令行脚手架
cli (Command-line interface)简称命令行界面,又叫脚手架。比如vue-cli、create-react-app、gulp-cli、node脚本、shell脚本等作用:帮你减少做重复性工作的工具前端常用:创建项目、打包构建上传OSS、刷新CDN常用到的几个库commander:用来编写指令和处理命令行的const program = require("commander");// 定义指令program .version('0.0.1') .command(原创 2020-09-08 23:21:06 · 1674 阅读 · 0 评论 -
微前端实践
接入一个应用,要求子应用必须有相关协议,导出固定方法,让父应用去调用这些方法,加载子应用,就做到了每个子应用都互相解耦所以子应用在打包的时候必须提供bootstrap\mount\unmout方法原创 2020-09-15 20:53:30 · 771 阅读 · 0 评论 -
tdd/bdd
底层原理:一段测试代码,通过这段代码去运行其他代码,预期他的结果,然后判断输出结果是否与预期相等npm i jest@24.8.0 -D"test":"jest" // 运行时会去找xxx.test.js的后缀进行测试// 初始化配置npx jest --initnpx jest --coverage // 生成代码覆盖率报告单元测试:测试一个模块集成测试:多个模块测试...原创 2020-11-13 17:56:26 · 473 阅读 · 0 评论 -
前端serverless
新建函数,选择模板函数2、高级配置3、建立触发器,触发函数执行原创 2020-08-19 14:40:13 · 1195 阅读 · 1 评论 -
【前端算法系列】时间复杂度和空间复杂度
常数时间复杂度或者O(1)原创 2021-01-21 13:15:10 · 700 阅读 · 0 评论 -
【持续更新】typecsript语法
简介介绍typescript是微软开发的一款编程语言;是js的超级,遵循最新的es6、es5规范,扩展了js的语法;更像后端java、c#这样的面向对象语言,可以让js开发大型企业项目;angular2+基于ts语法,最新的vue、react也集成ts。安装npm install typescript -gtsc index.ts语法...原创 2020-07-27 17:50:22 · 562 阅读 · 0 评论 -
js设计模式
不常用原型模式重新创建一个对象开销比较大,不合适,通过原型模式,帮你在原有对象克隆或拷贝出对象Object.create是原型模式的一种实现const obj={ name:'xiaoming', getName(){ console.log(this.name) }} let a=Object.create(obj)a.name='lili...原创 2020-08-08 21:07:50 · 1558 阅读 · 0 评论 -
jsonp
原理:利用script标签不存在同源和非同源,没有跨域限制;(jsonp请求一定需要对方服务器做支持才可以)在script的世界中,没有同源跨域这一说,只要你给我src属性中的地址是一个合法的地址,script都可以把对应的内容请求回来1)首先把需要请求的数据的,把跨域的API数据接口的地址,赋值给script的src2)把当前页面中的某一个函数名当做参数值,传递给需要跨域请求数据的服务器(url...原创 2018-02-27 23:07:17 · 260 阅读 · 0 评论 -
聊天窗口内容滚动到底部的方法scrollTop和scrollIntoView
测试内容样式:<style type="text/css"> #container{ overflow-y:auto; overflow-x:hidden; height:150px; border:1px solid red; width:350px; } html,body{margin:0px;padding:0px;font...原创 2018-03-14 09:49:34 · 15679 阅读 · 0 评论 -
ES6笔记(set)
1、Set: 新的数据结构:类似于数组,但是成员的值都是唯一的,没有重复,他的键跟值是一样的(1)、set的基本用法: 初始化 //new Array() [] var s = new Set() var s = new Set( [ 1, 2, 3, 4 ] ) var s = new Set( [...document.querySelectorAll('div')] ...原创 2018-07-02 23:09:55 · 2412 阅读 · 0 评论 -
ES6笔记(类class)
1、ES6的类是一种语法糖,本质还是基于原型基本格式: class 类名{ constructor(){ } 方法1... 方法2... ... 方法n... }1,类的 类型 是 function2,类名就是构造函数 类名 === 类名.prototype.constructor3, 实例化 也是用 ...原创 2018-07-02 23:10:20 · 311 阅读 · 0 评论 -
ES6笔记( let 、const、this、call/apply/bind)
1、let 块级作用域(1)函数内部(2)块中(通常指的是一对花括号之间)特性:①let 定义的变量不会被提升是②在同一个作用域下,let不能重复定义两个同名的标识符在不同的作用域下,可以使用同名的标识符③var在全局作用域下,会把属性绑定到window上,从而可能产生覆盖属性的隐患,而let关键字只是会遮蔽它,并不会覆盖window上的同名属性(let的定义的不会挂载到wi...原创 2018-07-02 23:08:12 · 574 阅读 · 0 评论 -
拖拽
1、pc端 (js)<style> #box{ width: 100px; height: 100px; background: pink; position: absolute; }</style><div id="box"></div><script>var oBox=document.querySelec...原创 2018-04-10 09:11:01 · 958 阅读 · 0 评论 -
ES6笔记(对象、函数传参、展开运算符、不定参)
1、对象第一:字面量对象的方法,支持缩写形式 方法缩写规则: 在原来的基础上去掉 冒号 和 function关键字第二:对象中的属性与变量名或者参数 同名的时候, 可以省略赋值的操作//对象方法的缩写var obj={ uName:'aaa',// showUserName:function(){// console.log(this.uName)// } sho...原创 2018-07-02 23:08:48 · 6665 阅读 · 0 评论 -
ES6笔记(字符串模板、异步、promise)
1、模板字符串es6模板字符简直是开发者的福音啊,解决了ES5在字符串功能上的痛点。第一个用途,基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。第二个用途,在ES5时我们通过反斜杠(\)来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。//以前的写法var str='javasrcipt\ is\ amazing';console.log(str)...原创 2018-07-02 23:09:49 · 348 阅读 · 0 评论 -
禁止弹窗后面body滑动
知识点:① return false 实际上做了3件事情:event.preventDefault(); //取消事件的默认行为event.stopPropagation(); //阻止事件冒泡停止回调函数执行并立即返回。②preventDefault() //取消事件的默认事件(事件捕捉)<a href="http://www.baidu.com">测试</a>$(...原创 2018-04-11 16:24:24 · 7664 阅读 · 1 评论 -
ES6笔记(解构)
1、解构解构通俗点说,就是通过一种特定格式,快捷的读取对象/数组中的数据的方法基本用法:(如果右边是对象,左边也要用对象的格式,解构出来就是变量了,再也不是属性了)//解构对象var oUser={ 'name':'aaa', 'age':20}//es5读数据的方法console.log(oUser['name'],oUser['age']);//aaa 20//let{name,...原创 2018-07-02 23:09:07 · 4054 阅读 · 0 评论 -
ES6笔记(对象的is、 assign、keys、valus、entries等方法)
1、Object.is与 === 行为基本一致,除了NaN, +0与-0//===console.log(1===1); //trueconsole.log(1==='1'); //falseconsole.log(1===true); //falseconsole.log(0===false); //falseconsole.log({}==={}); //false ;注意:空对象作...原创 2018-07-02 23:10:07 · 1185 阅读 · 0 评论 -
swiper项目常用总结
1、banner <!--BANNER--><section class="swiper-container bannerBox"> <div class="swiper-wrapper"> <div class="swiper-slide"> <a href="#原创 2018-04-28 15:22:37 · 2043 阅读 · 0 评论