- 博客(36)
- 收藏
- 关注
RSS订阅原创 网格布局 - 1
Grid 布局则是将容器划分为“行”和“列”，产生单元格，然后指定项目所在的单元格。可以看作是二维布局。容器和项目采用网格布局的区域，称为“容器”。容器内部采用网格定位的子元素，称为“项目”。<div> <div><p>1</p></div> <div><p>2</p></div> <div><p>3</p></div&g
2021-03-08 19:43:56
306
2
原创 Flex 布局 - 项目属性
order flex-grow flex-shrink flex-basis flex align-selforder 属性order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0。.item { order: <int>;}flex-grow 属性flex-grow 属性定义项目的放大比例，默认为 0，即如果存在剩余空间也不放大。.item { flex-grow: <number>;}fle...
2021-03-03 17:51:20
344
1
原创 Flex 布局 - 容器属性
Flex 布局，意为“弹性布局”。任何一个容器都可以指定为 Flex 布局，行内元素也可以使用 Flex 布局。注意：设为 Flex 布局后，子元素的 float、clear 和 vertrical-align 属性都将失效。采用 Flex 布局的元素，称为 Flex 容器，简称容器；它的所有子元素自动成为容器成员，称为 Flex 项目，简称项目。容器默认的存在两根轴：水平的主轴和垂直的交叉轴。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴的空间叫做 cro
2021-03-03 17:16:07
629
1
原创 停止AJAX请求
let xhr = $.ajax({ url: url, type: "POST", dataType: 'json', data: JSON.stringify({}), headers: {'Content-Type': 'application/json'}, timeout: 10000, // 设定超时 cache: false, // 禁用缓存 error: function (e) { console.log.
2021-01-19 16:13:20
1382
原创 async 函数
async，Generator 函数的语法糖。async 函数就是将 Generator 函数的星号(*)替换成了 async，将 yield 替换成了 await。
2020-12-29 16:05:24
635
1
原创 yield* 表达式 和 Generator 函数中的 this
基本概念Generator 函数是一个状态机，封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象。Generator 函数是一个普通函数。但是有两个特征：function 关键字和函数名之间有一个星号；函数内部使用 yield 表达式，定义不同的内部状态。function* helloWorldGenerator() { yield 'hello'; yield 'world'; return 'ending';}var hw = helloW
2020-12-17 22:19:08
227
1
原创 Generator 函数的三个方法
next 方法参数yield 表达式本身没有返回值，或者说总是返回 undefined。next 方法可以带一个参数，该参数会被当做上一个 yield 表达式的返回值。function* f() { for (var i = 0; true; i++) { var reset = yield i; if (reset) { i = -1; console.log(i); } }}...
2020-12-16 20:02:01
406
原创 Generator函数、yield 表达式与 for...of 循环
目录Generator 函数基本概念yield 表达式yield 表达式规范与 Iterator 接口的关系for...of 循环Generator 函数基本概念Generator 函数是一个状态机，封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象。Generator 函数是一个普通函数。但是有两个特征：function 关键字和函数名之间有一个星号；函数内部使用 yield 表达式，定义不同的内部状态。function* helloWorldGe
2020-12-16 20:00:03
592
原创 Set和Map -- ES6
Set 基本用法Set 是一种新的数据结构，它类似于数组，但是成员的值都是唯一的，没有重复的值。Set 本身是一个构造函数，用来生成 Set 数据结构。向 Set 结构中添加数据时，不会添加重复的值。利用 Set 可以方便去重。const set = new Set([1, 2, 3, 4, 4]);[...set]// [1, 2, 3, 4][...new Set('ababbc')].join('')// "abc"向 Set 中加值时，不会发生类型转换，所以 "5"
2020-12-10 09:51:31
148
原创 Iterator 和 for...of 循环以及部分代码理解
Iterator 的概念JavaScript 表示“集合”的数据结构，主要有：Array、Object、Map、Set。遍历器（Iterator），为各种不同的机制提供统一的访问机制。任何数据结构只要部署了 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。Iterator 作用有三个：为各种数据结构，提供一个统一的、简便的访问接口； 使得数据结构中每个成员能够按照某种次序排列； ES6 创建了一种新的遍历命令 for...of 循环，Iterator 接口主
2020-12-04 16:23:43
398
原创 原始值包装类型
JavaScript 原始值：存储在栈中的简单数据段。也叫基本数据类型，包括 Number、Stirng、Boolean、Null、Underfined。let s1 = 'some text';typeof s1 // "string"let s2 = s1.substring(2);显然，s1 是一个基础数据类型，不是一个对象，所以按道理说，s1 是不应该有substring （或者其他任何属性和方法）方法的。但是字符串是有这个方法的。那是因为每当用到原始值的某个属性和方法时，后台都会创.
2020-12-03 14:52:33
425
原创 如何让一个函数不能使用 new
function A() { if (this instanceof A) { throw new Error('Uncaught TypeError: A is not a constructor') } // do other things}new A() 解释：首先，new 操作符做了这些事情：创建一个对象 该对象的 __proto__ 指向构造函数的 prototype 调用构造函数（改变构造函数中 this 的指向创建的这个对象） 如果构造函数返回值是引.
2020-12-03 14:06:57
320
原创 Promise的理解与使用
Promise 是一个对象，是异步编程的一种解决方案，从它可以获取异步操作的消息。特点对象的状态不受外界影响。只有异步操作的结果可以改变这个状态，任何其他操作都不可以改变这个状态。 一旦状态改变，就不会在变，任何时候都可以得到这个结果。Promise 状态的改变只有两种情况：从pedding变为fulfilled或者从pending变为rejected。只要这两种情况发生了，状态就凝固了，就不会在发生改变，会一直保持这个结果，这时就被称为resolved（已定型）。如果改变已经发生，再对 P..
2020-12-02 08:56:47
609
2
原创 JS 原型以及原型链
图解原型所有引用类型都有一个__proto__（隐式原型）属性，属性值是一个普通对象所有函数都有一个prototype属性，属性值是一个普通对象所有引用类型的__proto__指向它构造函数的prototype原型链当访问一个对象的某个属性时，会现在它本身属性上查找，如果没有找到则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会去它的构造函数的prototype的__proto__中查找，这样一层一层往上查找会形成一个链式结构
2020-11-30 19:03:44
190
原创 js 闭包的简单理解
闭包的概念定义在函数内部，能够访问其他函数局部变量的函数只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成 “定义在一个函数内部的函数”闭包的作用通过闭包可以在函数外部访问函数内部的变量，闭包将函数外部和内部进行了连接。使用闭包之后，外部函数变量就会被存在内存中，不会被垃圾回收机制回收。闭包让你可以在一个内层函数中访问到其外层函数的作用域。（MDN定义 ）相关文档连接...
2020-11-30 11:49:34
100
原创 js 函数声明和变量声明提升以及优先级
函数首先被提升，然后才是变量。典型例子：console.log(foo);function foo(){ console.log("函数声明");}var foo = "变量";console.log(foo);/*function foo(){ console.log("函数声明");}变量*/代码实际为：function foo(){ console.log("函数声明");}var foo;console.log(foo);..
2020-11-28 14:57:17
956
原创 JavaScript异步、事件循环和消息队列、宏任务和微任务
“JavaScript定位：单线程、异步、非阻塞、解释型脚本语言。”曾经被问过一个问题：js 是单线程，为什么会有异步代码执行？为什么是单线程？JavaScript的设计就是为了处理浏览器网页间的交互（DOM操作的处理、UI动画等），如果有多个线程同时操作DOM，那么网页会是一团糟。...
2020-11-25 21:31:14
664
1
原创 图片底部空白原因以及解决方法
浏览器渲染 img 时，下方会有一些空白。本文记录自己整理的产生原因以及解决方法。产生原因img 属于 inline 元素，inline 因为受到字号和行间距的影响底部留出了一段距离，距离与字体大小有关。图解：也有大佬这样解释：唯一疑惑可能因为他说了句“img和其他元素并列的时候这句”，但是我只写了一个img也有这个空白（我是不是转牛角尖了...）解决方法给父元素加 font-size: 0px (好像只能是 0 px 别的都还会有空白) 给父元素加 line-heigh...
2020-11-23 19:12:47
1056
原创 获取video duration time
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &am
2018-09-11 10:19:04
4042
原创 纯css实现横向滚动 移动端
<!DOCTYPE html><html><head> <title>横向滑动</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style typ
2018-09-04 10:03:29
13708
1
原创 vue 组件 keep-alive
keep-alive 是 vue 的内置组件，可以保证模块在切换的过程不被重复渲染，从而保持页面的状态keep-alive 是一个抽象组件，并不会渲染一个 DOM 在页面中。props：include：字符串或正则表达式。只有匹配的组件会被缓存。 exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。<keep-alive include="index">...
2018-09-01 11:58:58
170
原创 vue-cli中使用mui
vue-cli 中引用 mui，打包之后字体无法显示解决方法：打开 build 下的 utils.js，添加publicPath: '../../'// Extract CSS when that option is specified// (which is the case during production build) if (options.extract) { ...
2018-09-01 11:25:45
1344
原创 vue项目中多行省略
近期在vue-cli项目中，打包之后发现多行省略失效，审查之后发现样式中少了一条-webkit-box-orient: vertical;但是在我打包之前样式中，这一条确实存在。经过查找，发现在 webpack.prod.conf.js 中有这样一段// Compress extracted CSS. We are using this plugin so that possi...
2018-09-01 11:20:37
1446
原创 微信小程序中的setData
setData() 方法并不是一个同步的方法，而是一个异步的方法，所以当我们用 setData() 修改 data 中的值时，为了保证可以拿到修改之后的值，就可以在 setData() 的回调里面拿：data: { options: {}},onload: function (options) { this.setData({ options: options ...
2018-08-17 14:38:34
660
原创 页面链接跳转不记录历史
function fnUrlReplace(href) { if (href && /^#|javasc/.test(href) === false) { if (history.replaceState) { history.replaceState(null, document.title, href.split('#')[0]...
2018-07-20 16:58:54
6274
原创 IScroll - 踩过的坑
官方地址：http://iscrolljs.com/var wrapper = new IScroll("#wrapper")这一步必须是在元素已经渲染完成之后进行，否则页面会报错如果是用框架比如vue渲染的数据列表，当列表变化是，wrapper必须执行一下刷新事件：wrapper.refresh();如果是点击tab栏切换了wrapper的内容，则必须在点击之...
2018-07-20 15:43:55
1323
原创 基于bootstrap的bootstrapPaginator分页插件
引入文件页面结构：直接使用bootstrap的分页 js分页代码var setPaginator = function(pageCurr, pageSum, callback) { $('.pagination').bootstrapPaginator({ // 这个方法调用时，自动在.pagination添加分页li /*当前使用的是3版本的boo
2018-01-31 21:20:09
7542
2
原创 jQuery和jQuery UI的区别
jQuery是一个js库，主要提供的功能是选择器、属性修改和事件绑定等；jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等；jQuery本身注重于后台，没有漂亮的界面，而jQuery UI则补充了前者的不足，他提供了华丽的展示界面，使人更容易接受。既有强大的后台，又有华丽的前台。jQuery U
2017-09-20 08:59:59
1965
转载 8种CSS清除浮动的方法优缺点分析
为什么清除CSS浮动这么难？因为浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。解决浮动引起的问题有多种方法，但有些方法在浏览器兼容性方面还有问题。我根据自己的经验总结8种清除浮动的方法（测试已通过 ie chrome firefox o
2017-09-13 08:32:04
131
原创 css引入样式的几种方法
在HTML中引入CSS的方法主要有四种，它们分别是行内式、内嵌式、链接式和导入式。一、行内样式：行内样式就是在在标记的style属性中设定CSS样式二、内嵌式：内嵌式就是把样式集中写在style标签中 ...此处写CSS样式 三、连接式：不需要写在style标签中，可以直接引用。注意要把引用的样式放在元素之前，最好放
2017-09-13 08:21:58
702
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人