- 博客(44)
- 收藏
- 关注
RSS订阅
原创 CSS(一) 经典布局（两边固定，中间自适应）的五种方式
两边固定，中间自适应本篇总结五种思路实现方式，圣杯布局圣杯布局，方便理解是带有两只耳朵的奖杯，耳朵跟奖杯是一体，所以左右两边跟中间同级，但是content在上面第一步：中间盒子100%，两边固定宽度，三个盒子依次上下第二步：全员float：left， left与right 在第二行 脱离文档流第三步：父级盒子 不要给宽度，margin：0 200px 留出 左右盒子位置第四步：left 盒子 （1）margin-left:100% 将浮动元素向上移动一行文档流‘（2）positi
2020-07-06 15:03:40
1825
1
原创 仿京东分类栏组件
京东效果展示功能描述：1.底部进度条跟随左滑变化2.可以规定单行展示个数，以及单行总个数代码1.index.vue 入口组件<template> <div class="container"> <div class="title">nav-show</div> <!-- column-num 一行多少个 row-show 视口展示几个 --> <nav-show :col
2021-07-14 10:24:15
384
5
原创 git总结
常用命令git init git初始化git clone 'address' 把项目克隆到本地 git branch 查看本地分支git branch -a 查看所有分支（本地和远程）git branch -d dev_name 删除本地分支git fetch 将远程最新内容拉到本地git pull 将远程最新内容拉到本地，并合并到本地分支git log 查看历史提交记录git diff <fileName> 比较文件的不
2021-06-30 13:35:49
164
原创 vue 笔记总结
1.自定义指令去抖html<button @click="sayHello" ref="target" v-throttle>提交</button>jsVue.directive('throttle', { bind: function (el, binding) { let throttleTime = binding.value // 节流时间 if (!throttleTime) { // 用户若不设置节流时间，则默认2s thrott
2021-06-11 10:45:30
183
1
原创 CSS 常用样式总结
宽高计算height:calc（100% - 100px）渐变属性background: linear-gradient(90deg, #fd6f7d 0%, #f93c47 100%);box-shadow: 0px 1px 3px 0px rgba(250, 72, 84, 0.5);
2021-06-01 08:31:18
97
原创 移动端常见兼容问题
1.iphone X 底部被遮挡问题解决方式：在底部元素添加以下适配代码body {height: 100vh;}/* 你的贴底元素↓ */.container { position: absolute; bottom: 0; padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */ padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS
2021-04-21 09:57:46
314
原创 JS 模块化规范
JS 模块化什么是模块化？将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起模块化的好处1.提高复用性2.高可维护3.更好的分离，按需加载4.避免命名冲突模块化的缺点1.增加请求2.依赖过多3.难以维护CommonJS说明在服务器端: 模块的加载是运行时同步加载的在浏览器端: 模块需要提前编译打包处理 （依赖Browserify）基本语法## 暴露//文件中会生成module对象,exports === module.export
2021-02-26 14:12:56
193
原创 CSS 基本知识点梳理
1.介绍下CSS的盒子模型？通过box-sizing设置box-sizing:context-box标准盒子模型：宽度=内容的宽度（content）+ border + padding + marginbox-sizing:border-box怪异盒模型：宽度=内容宽度（content+border+padding）+ margin2. CSS选择器有哪些？哪些属性可以继承？CSS 选择器id选择器：#id类选择器：.className标签选择器：div h3 p 相邻选择器：div+
2021-02-24 20:51:44
113
原创 CSS 常见的兼容性问题
怎么让Chrome支持小于12px 的文字？p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例
2021-02-24 18:49:44
137
原创 vue WebWorker的使用
webworker我们知道javascript是单线程，当主线程遇到大量计算或者复杂的业务逻辑时，会对我们的页面造成不好的用户体验。webworker 很好的解决了这个问题，我们可以在主线程开启一个worker线程执行任务而不干扰用户界面（主线程）worker描述感觉还是有点抽象，举个例子。那撸多（鸣人）这个5s真男人跟佩恩打架，开启了仙人模式，然而他的查克拉不够用，只能维持五秒钟仙人模式，他自己又不能一边打架一边聚集查克拉。这可怎么办？出了穿甲装的佩恩，一刀一个那撸多这个时候那撸多灵机一动，想
2021-02-23 18:00:06
3745
1
原创 vue vuex模块化
简单介绍state//store.js//存放数据 state: { index:'index in root store' },//组件内获取方式 computed: { // 可以结合computed 使用 index(){ return this.$store.state.index } }mutationsmutations两个参数 第一个是默认参数state 第二个是传参payload,这里有一个异步同步的概念，一般我们
2021-02-21 12:44:44
251
原创 vue 组件通讯总结
Props $emit 方式父子传参最常用的方式就是使用props,$emit1. 父传子子组件从父组件接受参数通过props，并且可以规定类型，默认值等总结1.父组件中 v-bind:parentToOne="parentMsg" ,一般parentToOne 与 parentMsg 名称相同即可即：v-bind:parentMsg="parentMsg" 下面props接收也改为parentMsg，这里为了阐明关系2.子组件中Props接收 parentToOne父组件 <
2021-02-19 16:36:21
146
1
原创 vue手写双向绑定实现
前言认识Object.defineProperty() // Object.defineProperty 三个参数 // 第一个参数，属性所在的对象 // 第二个参数，要操作的属性 // 第三个参数，被操作属性的特性 // 格式是 {} //configurable,enumerable,value,writable // set 写入属性时触发 // get 读取属性let obj = {value:'kk'}
2021-02-08 18:01:40
1988
原创 CSS 移动端布局
px rem em1.px 固定的像素单位2.em 相对父元素fontSize大小 3.rem 相对根元素 fontSize大小（CSS3出现）举个栗子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
2021-02-07 16:58:27
320
原创 JS meta 标签作用
功能1：<meta http-equiv="refresh" content="0; url="http://www.baidu.com">重新定向到指定的网页，content后面跟的是时间（单位秒），把这句话加到指定网页的里一般也用在实时性很强的应用中，需要定期刷新的新闻股票不过现在用ajax，它可以实现无刷新更新数据这个东西可谓是小广告神奇，弹出不搭理它给你跳走。...
2021-01-13 21:30:26
573
1
原创 JS 浏览器窗口控制
业务场景：老系统里（非SPA） 在主页面有很多子模块页面，在点击去到子模块a页面打开新窗口，如果a页面已经在浏览器打开则不打开新的窗口，切换至a页面窗口首先，了解window对象1.window.openwindow.open('http://www.baidu.com') //打开一个新页面 返回打开的window对象本身2.window.focus()window.focus() //聚焦到当前页面3.window.closedwindow.closed //可以拿到 window的
2021-01-13 20:57:40
1505
原创 JS 递归应用场景
问题描述在使用Ant Design of Vue的 树型选择控件时，服务端返回的数据如下：let arr = [ { "id": "0", "pid": "-1", "value": "香港明华船务有限公司", "mmsi": null }, { "id": "0-0", "pid": "0", "value": "超大型矿砂船", "mmsi": null }, {
2020-12-30 17:16:39
979
原创 (一) 多窗口打开单页面实现同步拖拽
step1 实现拖拽css<style> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background-color: #ae7000; cursor: pointer; text-align: center; line-height: 200px; position:absolute; }</style>
2020-12-21 22:37:50
252
原创 JS DOM篇（二）Element 类型
Element 类型标签汇总（省略,在html中总结）操作属性方法nodeName || tagName //访问元素的标签名getAttribute(attrName) //获取属性setAttribute(atrtName,attrVal) //设置属性创建元素var odiv = document.createElement('div')odiv.id = 'myDiv'odiv.className = 'box'document.body.appendChild(o
2020-12-16 21:25:36
173
原创 JS DOM篇（一）
Node类型DOM1级定义了一个Node接口，节点类型定义了12个常数值常量来表示（用nodeType区分）开发人员最常用的就是元素节点和文本节点nodeName 和 nodeValue属性if(someNode.nodeType == 1){ value = someNode.nodeName //nodeName是元素的标签名}节点关系 childNodes parentNode每个节点都有childNodes属性，保存着一个NodeList对象（是个伪数组）var fir
2020-12-15 23:40:16
110
原创 JS BOM篇（二）location对象与history对象
location 对象location 是最有用的对象之一。1.提供了与当前窗口中加载的文档有关的信息，2.提供了导航功能。3.即是window对象的属性，也是document对象的属性。 即（window.location = document.location）属性列表属性名例子说明hash“#content”返回URl中的hash（#号后跟0或多个字符），如果不包括散列，则返回空字符host“www.jsk.com:80”返回服务器名称和端口号（
2020-12-15 21:46:23
126
原创 JS BOM篇（一）window对象
Window对象BOM的核心对象是window对象，它表示浏览器的一个实例。即是JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。全局作用域全局作用域下中声明的变量、函数都会变成window对象的属性和方法。窗口位置 window.moveTo(x,y) window.moveBy(x,y)窗口大小获取窗口信息 //IE9+、Firefox、Safari、Opera、Chrome 均提供以下属性 innerWidth：容器中页面视图的
2020-12-15 11:47:31
202
原创 JS 面试题（一）
输出的值(关于this) var name = 'kk' var object = { name:'lele', getName:function(){ return function(){ return this.name } } } console.log(object.getName()()); // 思考如何输出'lele'...
2020-12-14 21:21:24
87
原创 JS 基础篇(十) cookie封装
cookie简单介绍cookie的特点1.cookie一般有大小限制为4kb，2.限制同一域名数量为50个3.读取有域名限制4.时效性cookie 使用//添加cookiedocument.cookie = “key=value”; // 一次写入一个键值对//读取cookie document.cookie //获得所有cookie 分号分割//expires 时效document.cookie = `${key}=${value};${expires}=${expires
2020-12-09 21:48:45
111
原创 JS 基础篇(九) 函数防抖和函数节流
函数防抖函数防抖：高频率触发的时候，只执行一次，第一次或者最后一次。重点在只执行一次。应用场景1. 手机号、邮箱输入检测2. 搜索框搜索输入（只需最后一次输入完后，再放松Ajax请求）3. 窗口大小resize（只需窗口调整完成后，计算窗口大小，防止重复渲染）4. 滚动事件scroll（只需执行触发的最后一次滚动事件的处理程序）5. 文本输入的验证（连续输入文字后发送 AJAX 请求进行验证，（停止输入后）验证一次就好codecss<style> .conte
2020-12-07 22:33:15
239
原创 JS 基础篇(八) 深拷贝与浅拷贝
前提堆栈的概念在javascript中，Object，Array，Function是放到堆中，Number，String，Null，Boolean存放在栈中指针个人理解像一个内存地址，指向了数据存放的堆中数据存储关于堆栈以后会细说浅拷贝浅拷贝就是赋值了一份内存地址而已，而内存中的数据并没有复制一份,任何一个数据改变两个数据都会改变看图：let obj = {a:1,b:2}let copyObj = objcopyObj.a = 'kk'console.lo
2020-12-07 15:40:20
86
原创 JS 数组篇 数组排序方法总结
生成乱序数组function arrRandom() { let arr = []; for (let i = 0; i < 10; i++) { let num = parseInt(Math.random() * 500); arr.push(num); } return arr;}sort()/* *sort 排序 */let arr = arrRandom();arr.sort((a, b) => a - b);console.log(
2020-12-07 10:23:04
165
原创 JS 循环遍历总结
for介绍for 语句用于创建一个循环，它包含了三个可选的表达式，这三个表达式被包围在圆括号之中，使用分号分隔，后跟一个用于在循环中执行的语句（通常是一个块语句）。示例var i = 0;for (; i < 9; i++) { console.log(i); // more statements}for…in介绍1.for...in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性。2.for ... in是为遍历对象属性而构建的，不建议
2020-11-26 00:19:09
140
原创 JS 数组篇 多维数组扁平化
概念：数组扁平化是指将一个多维数组变为一维数组思想：遍历数组每一项，如果该项为数组，方法总结let arr = [1,2,3,['a','b'],[[4],[[[5,6],'c']]]]Array.prototype.flatconst arr1 = [0, 1, 2, [3, 4]];console.log(arr1.flat());// expected output: [0, 1, 2, 3, 4]const arr2 = [0, 1, 2, [[[3, 4]]]];conso
2020-11-25 23:23:53
510
原创 JS 数组篇 数组求和与数组去重
数组求和for循环求和 let arr = [1,2,3,4,5] function sum(arr){ let sum = 0; for(let index = 0;index<arr.length;index++){ sum += arr[index] } return sum } console.log(sum(arr))map-reduce求和let arr = [1,2,3,4,5]function sumMap(arr){
2020-11-24 17:47:38
427
原创 JS 数组篇 伪数组(arguments)转化为数组
什么是伪数组1. 具有length属性2. 按索引方式存储数据3. 不具有数组的方法, 比如push(),pop()等伪数组有哪些1.document.getElementsByTagName和document.childNodes,返回NodeList对象的都是伪数组2.上传文件时选择的file对象也是伪数组3.function的arguments对象（参数数组）4.Jquery 中 $() 抓取的对象 都是 伪数组5.自制伪数组let a = {0:1,1:2,length:2}
2020-11-24 15:12:46
444
转载 JS 数组篇 数组常用API 下
此篇主要是数组循环的一些apiforEach()定义forEach() 方法对数组的每个元素执行一次给定的函数。语法arr.forEach(callback(currentValue,index,array), thisArg)参数callback为数组中每个元素执行的函数，该函数接收一至三个参数：currentValue数组中正在处理的当前元素。index 可选数组中正在处理的当前元素的索引。array 可选forEach() 方法正在操作的数组。thisAr
2020-11-24 13:41:00
127
转载 JS 数组篇 数组常用API 上
push()定义push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。更改原数组参数elementN被添加到数组末尾的元素。返回值当调用该方法时，新的 length 属性值将被返回。示例//添加元素到数组var sports = ["soccer", "baseball"];var total = sports.push("football", "swimming");console.log(sports); // ["soccer",
2020-11-24 10:50:58
101
转载 JS String篇 字符串常用Api
charAt()定义charAt() 方法从一个字符串中返回指定的字符。语法str.charAt(index)参数index一个介于0 和字符串长度减1之间的整数。 (0~length-1)如果没有提供索引，charAt() 将使用0。描述字符串中的字符从左向右索引，第一个字符的索引值为 0，最后一个字符（假设该字符位于字符串 stringName 中）的索引值为 stringName.length - 1。如果指定的 index 值超出了该范围，则返回一个空字符
2020-11-23 14:15:29
476
原创 JS 进阶篇(一) 手动实现 Object.create 和 操作符new
Object.create()定义：Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。语法Object.create(proto，[propertiesObject])参数proto新创建对象的原型对象。propertiesObject可选。需要传入一个对象，该对象的属性类型参照Object.defineProperties()的第二个参数。如果该参数被指定且不为 undefined，该传入对象的自有可枚举属性(即其自身定
2020-11-22 15:30:33
400
原创 JS 进阶篇(二) 手动实现call apply bind
手动实现callcall的使用let obj = { key:'obj value' }funciton getName(){ return this.name}console.log(getName.call(obj))思考 1.如何在obj里面调用getName? 2.call方法是绑定在谁的身上？解答第一个问题，需要在obj内部添加一个getName方法var obj = { name:"obj name", getName:function(){
2020-11-22 13:23:27
132
原创 JS 基础篇(三) call apply bind 区别
call apply bind的使用```const obj = { name:'obj name'}function getName(para1,para2){ return this.name + '-'+para1+'-'+para2}//call 的使用console.log(getName.call(obj,'form','call'))//apply 的使用console.log(getName.apply(obj,['form','call']))//bind 的使用
2020-11-22 10:25:09
414
原创 JS 基础篇(一) instanceof、constructor
instanceof定义：instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。语法：object instanceof constructor参数： object 某个实例对象 constructor 构造函数codefunction Car(make, model, year) { this.make = make; this.model = model; this.year = year;}cons
2020-11-20 13:51:38
519
原创 JS 基础篇(七) 函数柯理化
以下方法来自于各种资料大厂面试题收集。添加了一些个人理解的注释和解释。对下面概念熟悉的小可爱，不喜勿喷。侵删本人脑回路略慢，写的是我认为的比较详细的版本call，apply，bind的区别相同点：能够改变this指向不同点：call apply在使用的时候会触发运行一次，而bind只是绑定了函数，不会立即执行call、apply因为要立即执行函数，所以第二个参数或之后的参数都是当前的真实参数，bind是“预设参数”call 与 apply 传参不同：call可以多参数；apply 是一个
2020-07-21 15:53:16
423
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人