- 博客(68)
- 收藏
- 关注
RSS订阅转载 JS中的yield
yield是什么yield是ES6的新关键字，使生成器函数执行暂停，yield关键字后面的表达式的值返回给生成器的调用者。它可以被认为是一个基于生成器的版本的return关键字。 yield关键字实际返回一个IteratorResult（迭代器）对象，它有两个属性，value和done，分别代表返回值（yield表达式求值的结果）和是否完成。 yield无法单独工作，需要配合generator(生成器)的其他函数，如next，懒汉式操作，展现强大的主动控制特性。 next()方法里如果有参数，
2020-09-07 11:34:21
10344
1
原创 选择器的权重及几种组合方式
1.选择器的权重 选 择 器 --------- 权重!importent ------------infinity行间样式 ------------- 1000id ----------------------- 100class | 属性 | 伪类 — 10标签 | 伪元素 ---------- 1通配符 ------------------ 0补充说明1.属性<style type="text/css">[title]// 或者[title = "W3S
2020-09-04 11:43:05
1082
原创 JavaSript面试常考
1var a = false == 1console.log(a) // false2if(typeof(a) && (-true) + (+undefined) + '') { console.log('pass')} else { console.log('no pass')}// 'pass'原因：console.log...
2020-07-09 12:12:37
243
原创 HTML标签分类
HTML标签分为块级标签，行内标签和行内块标签1.块级标签block代表元素：div p ul li ol h1-h6 hr dl dd dt form特点：* 1) 可设置宽高，独占一行* 2） 不受空格影响* 3）一般用于其它元素的一个容器（盒子）* 4）默认宽度100%2.行内标签inline代表元素：span a i em b strong sub sup font u lable br特点* 1）不支持设置宽高，从左到右排列* 2）宽度和高度根据元素内容撑开* 3）
2020-07-06 22:51:13
299
原创 雪碧图（精灵图）
雪碧图（精灵图 sprite）背景图定位技术（重要），属于网站优化的一部分特点：*通过图片整合减少用户对服务器的请求次数，从而提高网站的优化速度*把N多个小图标放到一张大图上去*通过整合图片来减少图片的体积*使用 **background**属性 *例如：background: #ccc url('/icon.png') no-repeat 0 -200pxfirst: 先写一个宽高色块（要定位图片的宽高）。x轴向右为负，y轴向下为负（比如例子中-200px就是y轴向下200px）sec
2020-07-06 22:33:13
673
原创 CSS的一些属性总结
文本/字体属性font-style:normal / italic(倾斜) / obliquetext-align(文本水平):center / left / right / justify(两端对齐)text-indent: 缩进(常使用em单位)text-indent: 2em;缩进2字符text-decoration: 文本修饰属性none: 去除下划线underline...
2020-04-22 12:28:06
174
原创 继承的实现方式
1.传统形式 - 原型链缺点：过多的继承了没用的属性Grand.prototype.lastName = 'Jack'function Grand () {}var grand = new Grand ()Father.prototype = grandfunction Father () { this.name = 'hehe'}var father = new Fat...
2020-04-16 22:23:58
223
转载 z-index详解
前端学习笔记之Z-index详解阅读目录z-index 基础 层叠上下文和层叠层 层叠次序 综合总结 结论 参考CSS当中的z-index属性看起来足够简单，但是如果你真的想了解它是如何工作的话，在这简单的表面之下，又有许多值得探究的内容。 在这篇教程中，通过探究层叠上下文和一系列实际的例子，我们将会阐明z-index的内在机理。CSS为盒模型的布局提供了三种不同的定位方案...
2020-04-11 16:12:38
1723
原创 前端-移动端自适应解决方案
移动前端自适应适配布局解决方案方案：固定一个某些宽度，使用一个模式，加上少许的媒体查询方案 使用flexbox解决方案 使用百分比加媒体查询 使用rem1. 简单问题简单解决我觉得有些webapp并一定很复杂，比如拉勾网，你看看它的页面在iphone4,iphone6,ipad下的样子就知道了：它的页面有一个特点，就是：顶部与底部的bar不管分辨率怎么变，它的...
2020-04-10 11:07:00
2340
原创 元素居中的实现方式
实现这样的效果：<div id="wrap"> <div id="content"></div></div>1. flex(最常用)#wrap{ width: 300px; height: 300px; border: 1px solid black; display: flex;}#...
2020-04-09 21:11:53
171
原创 前端面试常考汇总
CSS部分：盒模型有哪几种点击查看三栏布局点击查看子元素在父元素内居中实现一个方块从左上角移动到右下角，有几种方法JavaScript部分跨域及解决方案http 协议？GET与POST请求的差别？call(), apply(), bind()ES6 语法（知道哪些？怎么用的）const,let 与 var 的区别箭头函数的特点promise数组去重，你可以想到...
2020-04-09 17:43:56
161
原创 对象的拷贝
首先要明白：传值与传址，内存的堆栈1，Object.assign()var a = { name: "hello" }var b = Object.assign({}, a)b.name = 'hi'console.log(a.name) //helloObject.assign（）只适用于浅拷贝，如下：var a = { info: { name: "hello"} }...
2020-04-09 17:40:59
149
原创 数组去重
1. 双循环var arr = [1,4,2,4,1,2]function foo(arr) { var result = [] for(var i=0;i<arr.length;i++) { if(toCom(arr[i])){ result.push(arr[i]) } } function ...
2020-04-09 17:05:19
103
原创 var, let, const的区别
写在前面，做了解：首先，一个常见的问题是，ECMAScript 和 JavaScript 到底是什么关系？ECMAScript是一个国际通过的标准化脚本语言。JavaScript由ECMAScript和DOM、BOM三者组成。可以简单理解为：ECMAScript是JavaScript的语言规范，JavaScript是ECMAScript的实现和扩展。2011...
2020-04-09 16:34:43
130
原创 箭头函数的特点/作用
一、箭头函数的特点箭头函数是匿名函数1. 箭头函数使表达更加简洁，隐式返回值const isEven = n => n % 2 === 0;const square = n => n * n;箭头函数的一个用处是简化回调函数，如下：// 正常函数写法[1,2,3].map(function (x) { return x * x;});// 箭头函数...
2020-04-09 16:02:08
7249
原创 typeof数据类型及转换
第一章：typeof 返回数据类型，有六种：number, string, boolean, object, undefined, function. const a = 11; console.log(typeof (a)); //返回number const b = "11"; console.log(typeof (b)); //返回string ...
2020-04-09 13:45:36
511
原创 js的隐式类型转换之特殊的隐式转换总结
1.[]!![] == true //true[] == true //false![] == [] //true原因：[]是javascript中比较特殊的隐式转换String([]) //""Number([]) //0Boolean([]) //true[] == true // 0 == 1 ->false...
2020-04-09 13:44:07
246
转载 flex布局和它的属性们
网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地...
2020-04-09 13:03:05
198
转载 box-shadow的几个属性学习
一.box-shadow的定义和语法定义：box-shadow是css3新增的一个属性。在W3School里，定义box-shadow是向框添加一个或者多个阴影的属性。 语法：box-shadow: h-shadow v-shadow blur spread color inset. h-shadow: 阴影的水平位置 v-shadow：阴影的垂直位置 blur：阴影的模糊半径 sprea...
2020-02-27 20:24:17
5117
原创 怎么设置a , 使(a == 1 && a == 2 && a == 3)返回true
一道京东面试题：下面代码什么时候会打印出 1 ？var a = ?;if(a == 1 && a == 2 && a == 3){ console.log(1);}怎么实现呢？a 能与1，2，3相等，那a肯定不能是简单的一个number或string，那试试数组和对象吧？！我们知道当复杂类型与基本类型数据作比较时，会发生隐式类型转化先试试数...
2020-01-20 16:33:01
611
原创 一道容易错的题
请问下面的代码的打印结果是什么？为什么？var b = 10;(function b() { b = 20; console.log(b);})()是10？还是20？其实都不是我们知道作用域的函数声明提升和变量声明提升，但是这里的 function b(){} 是函数表达式，不是函数声明。函数表达式与函数声明不同，它的函数名只在函数内部有效，并且此绑定属于常量绑...
2020-01-19 18:53:06
405
原创 vue 双向绑定的原理
前天面试被面试官问到了 "vue 实现双向数据绑定的原理是什么？"，除了知道v-modle可以实现数据双向绑定，我哪里知道其中的原理。面试已凉，回来之后查阅了资料，写下这篇博客，加深自己学习理解，也希望能帮到大家。VUE是采用数据劫持结合发布者-订阅者模式的方式实现数据双向绑定，通过Object.defineProperty() 来劫持各个属性的setter, getter, 在数据变动...
2020-01-16 14:30:30
235
转载 计算属性computed和侦听属性watch的区别
前天面试的时候，被问到“计算属性和侦听属性的区别”，当时一脸懵，我只知道计算属性和方法的区别。希望能帮到大家。区别计算属性是依赖的值改变会重新执行函数，计算属性是取返回值作为最新结果，所以里面不能异步的返回结果。不能写异步逻辑。侦听属性是侦听的值改变会重新执行函数，将一个值重新赋值作为最新结果，所以赋值的时候可以进行一些异步操作。演示当一个值改变了需要1s之后显示到页面中，通过wa...
2020-01-15 15:05:17
575
原创 CSS盒模型
两种盒模型盒模型的组成，由里向外分别是：content, padding, border, margin盒模型又分为标准盒模型和 IE 盒模型从上面两图可以看出，在标准模型中，盒模型的宽高只是 内容(content)的宽高；而在 IE 模型中，盒模型的宽高是 内容(content) + 填充(padding) + 边框(border) 的总宽高如何设置两种盒模型...
2020-01-15 14:20:30
105
原创 三栏布局的几种实现方式
三栏布局算是网页中最常见的布局之一，尤其以内容为主的网站，比如CSDN、淘宝等。基本都是两侧固定宽度，中间自适应。另外，三栏布局在面试时也极容易遇到。下面介绍几种三栏布局的实现方式：效果图：1. 绝对定位 特点：简单粗暴，但不推荐，这里不做详细展示说明2. 浮动 <style> .left{ backgr...
2020-01-14 18:56:06
1309
原创 状态码
总述：1xx:信息响应类，表示接收到请求并且继续处理2xx:成功。处理成功响应类，表示动作被成功接收、理解和接受3xx:重定向，为了完成指定的动作，必须接受进一步处理4xx:客户端错误，客户请求包含语法错误或者是不能正确执行5xx:服务端错误，服务器不能正确执行一个正确的请求详细说明：200 OK: 交易成功（服务器成功返回数据）你好，我好，大家都好301 Moved Pe...
2020-01-14 10:52:52
133
原创 http 协议
本篇内容会讲到什么是服务器？如何访问服务器？http 协议请求消息格式请求头请求体GET 和 POST响应消息格式响应头响应体在浏览器地址栏中输入一个页面地址，按下回车键后发生了什么？ajax什么是服务器？如果所有程序都是单机的，会导致什么后果呢？1. 数据难以共享2. 受计算机配置的影响，运算速度差异巨大3. 个人计算机的安全性堪忧，可能会受到恶...
2020-01-10 19:21:29
297
原创 NaN是什么？怎么可靠的测试一个值是NaN
1. NaN是什么？NaN全称是Not-A-Number(不是一个数字)，我们可以通过Number.NaN来获得一个NaN，在类型转换失败时，我们常常会得到一个NaN，需要注意的是，NaN是JS中唯一一个自身不相等的存在。Number.NaN //NaNNaN === NaN //false那为什么NaN!==NaN?NaN 只是Number 的一个静态属性Number(...
2020-01-06 19:08:12
1509
原创 react学习之 生命周期
生命周期就是由生到死的过程。react 组件的生命周期分为三个状态：Mounting： 已插入真实DOMUpdating： 正在被渲染Unmounting：已移除真实DOM生命周期的方法有： componentWillMount在渲染前调用,在客户端也在服务端。 componentDidMount: 在第一次渲染后调用，只在客户端。之后组件已经生成了对...
2020-01-03 12:00:57
79
原创 react学习之 组件、props和 state
一、react五大特点：1. 声明式代码： react 面向数据编程，不需要直接去控制DOM，你只要把数据控制好，react 自己回去帮你操作dom，这就是声明式开发。（不在乎过程，只在乎结果，只在乎数据，不操作DOM）2. 高效：react 通过对DOM 的模拟，最大限度地减少与DOM的交互3. 灵活： react 可以与已知的库或框架很好的配合4. JSX: JSX 是 Jav...
2020-01-03 11:11:59
124
原创 ES 6 异步解决方案
写在前面： JS 经常会遇到 异步任务， 所谓异步任务，就是需要经过一段时间 或 当某个时机达到后才能得到结果的任务 比如： - 使用ajax 请求服务器，当服务器完成响应后拿到响应结果 - 监听按钮是否被点击，当按钮被点击后拿到某个文本框的值 - 使用 setTimeout() ，等待一段时间后做某一件事 JS 没有一...
2020-01-02 18:53:40
708
2
原创 this.$nextTick() 学(cai)习(keng)
1. 用法： 在数据修改之后立即使用这个方法，获取更新后的DOM。官方文档解释：可能你还没有注意到，Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“...
2020-01-02 10:00:07
172
原创 事件循环
概念1. 浏览器、JS、执行引擎的关系 JS: 一门计算机语言，提供了表达程序逻辑的语法和实现基本功能的API 浏览器： JS语言的真实运行环境，又称之为JS的宿主环境 JS执行引擎： JS宿主环境（比如浏览器）中的一个功能模块，用于解析并执行JS他们的关系如下：2. 进程和线程进程：当一个应用程序运行时，需要使用内存和CPU资源，这些资源需要...
2020-01-01 21:23:34
157
转载 前端性能优化的关键时间点
思维导图前端性能优化的关键时间点有哪些？1. 开始渲染时间：浏览器开始绘制页面，在此之前页面都是白屏，所以也称白屏时间。2. DOM Ready：dom 解析已经完成，资源还没有加载完成（js, img等）3. 首屏时间：用户看到第一屏页面的时间。4. onload：原始文档和所有引用的内容已经加载完成。用户最明显的感觉就是浏览器上Loading状态结束。开始渲染...
2019-12-30 18:17:55
537
原创 用正则 去除字符串中的字母
var str = "12j3j98s39802v9cv0c0903vfbx32"var reg = /[a-zA-Z]*/gvar result = str.replace(reg, "")//输出result即可
2019-12-26 14:24:43
3645
原创 call, apply, bind 的区别
JS改变this指向的三个方法是: call(), apply(), bind()。它们都是Function.prototype下的方法，用于改变函数运行时上下文。三者的相同点：1. 改变函数this指向2. 第一个参数都是 this 对象的指向3. 都可以利用后续参数传参不同点：看一个实例：var xz = { name : "小战", ge...
2019-12-25 18:00:27
88
原创 data —— toLocaleString()
var date = new Date()//date.toLocaleString() 打印当前 年月日+时分秒date.toLocaleString() //"2019/12/25 下午2:58:18"//date.toLocaleDateString() 打印当前日期（年月日）date.toLocaleDateString() //"2019/12/25"//date....
2019-12-25 15:09:43
1121
原创 react 安装
1.首先，要安装Node.js 及 NPM可以去官网下载最新的版本：https://nodejs.org/https://nodejs.org/dist/v10.16.0/node-v10.16.0-x64.msi下载好之后一直点击下一步，安装完成！！！cmd打开命令提示符：检测版本输入：node -v安装node时会自带一个npm的包管理工具。检测npm版...
2019-12-24 17:04:20
127
转载 git从远程到本地，拉取分支，拉取项目，从其它分支拉取，推送，同步的操作
第一步，从远程拉取到本地 //git clone从远程拉到本地$ git clone git@git.release.viphome.cn:mall/mall-api.git备注：git clone 接着是远程地址，最后项目名字后加.git第二步，关于git branch有两种用法git branch //一般显示本地分支git branch -r //显示远程的分支...
2019-12-24 11:34:32
1980
原创 文字溢出打点处理
1. 单行文字溢出打点p{ width: 150px; background: pink; overflow: hidden; white-space: nowrap; //不换行 text-overflow: ellipsis; //省略号代替溢出}2.多行文本溢出打点这里举两行文本溢出打点例子：p{ width: 150px; displ...
2019-12-20 15:51:23
513
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人