- 博客(62)
- 收藏
- 关注
RSS订阅原创 CSS-- BFC
看图中共有 3 个 p 元素，每个 p 元素设置width100px，height 40px， magrin 20px，预期结果应该是 4个方向margin都为20px，每两个元素之间上下就应该是40px，但很明显 两个p元素上下之间的margin值为20，像是重叠了一样，与预期结果不同，这是什么原因导致的呢？答案是 BFC。下面学习总结一下 BFC。BFC 是什么BFC （block fo...
2020-03-20 20:51:48
252
原创 JavaScript -- offset、client、scroll 获取元素长度区别
以一个例子来区别这几个属性的计算方式：父元素为橘黄色区域，子元素为蓝色边框包裹的区域。父元素布局：子元素布局：（content设置width、height都为100px，因为右侧出现滚动条，所以浏览器布局显示content width 90.4为去掉滚动条的宽度。）offset 类offsetHeight 与 offsetWidthoffsetWidth ：获取元素本身的...
2020-03-20 13:17:26
409
原创 CSS -- flex 布局语法总结与分析
Flex Box 弹性盒子使用弹性盒布局可以更有效的对一个容器中的子元素进行排列、分配空间。注意： 元素设为 Flex 布局以后，其子元素的 float、clear 和 vertical-align 属性将失效。使用 flex 布局的元素称为flex容器 ，其包含的所有子元素称为flex 项目，容器默认有两根轴，容器中的项目按照轴的方向进行排列：1、水平方向的 主轴（main axis）...
2020-03-18 23:01:45
315
原创 JavaScript -- 异步与执行机制（宏任务与微任务）
事件循环（Event Loop）由于 JavaScript 是单线程，当要处理异步任务时需要有人来管理，规定异步任务执行完毕后其注册的回调函数何时返回给主线程来执行，这个管理员就是 事件循环（Event Loop），是 JavaScript 的执行机制。首先要知道，js引擎 负责JavaScript 代码的解析执行，对于页面的渲染、事件的监听、定时器事件等都是有浏览器的其他线程来负责的。Ja...
2020-03-12 17:29:34
388
原创 JavaScript -- new 操作符模拟实现原理
构造函数创建实例化对象时必须使用 new 关键字，new 操作符到底做了什么事情，又是怎么实现的？MDN 上的讲解：new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。new 关键字会进行如下的操作：创建一个空的简单JavaScript对象（即{}）；链接该对象（即设置该对象的构造函数）到另一个对象 ；将步骤1新创建的对象作为this的上下文 ；如果该...
2020-03-12 11:39:04
269
原创 JavaScript -- ES6 Promise对象
目录什么是 PromisePromise对象的产生Promise的使用重要特性及注意点1、promise 立即执行性:2、promise的三种状态:3、promise 状态不可逆性：4、链式调用 then 方法的返回值问题5、 Promise then() 方法的回调异步性:6、Promise 中的异常7、Promise.resolve()8.、resolve vs reject9、then 方...
2020-03-11 22:51:18
224
原创 JavaScript-- ES6 箭头函数
箭头函数：作用： 箭头函数表达式更适用于那些本来需要匿名函数的地方，比如回调函数使用方法：(param1,param2,…) =>{ statements }支持剩余参数和默认参数，支持参数列表解构普通函数与箭头函数用法比较：如返回数组中每一项字符串的长度 //普通函数 let arr=['heiuwo','eiswoeif','ciwove'] arr...
2020-03-09 22:09:32
278
原创 JavaScript -- call、apply、bind 方法的使用及区别（包含扩展运算符 : ...）
JavaScript提供了一些函数方法来处理改变 this指向问题：常用的有 call apply bind ，下面来分析这三个函数的用法和区别:1、call()方法Function.prototype.call() 语法：func.call(thisArg, arg1,arg2,…)thisArg：必选的。在 func 函数运行时使用的 this 值，即要指向的对象arg：为传...
2020-03-08 15:10:34
264
原创 JavaScript -- 闭包与作用域链
什么是闭包红宝书上解释：闭包 是指有权访问另外一个函数作用域中的变量的函数.闭包就是能够读取其他函数内部变量的函数MDN 上解释：闭包是由函数以及创建该函数的词法环境组合而成。这个环境包含了这个闭包创建时所能访问的所有局部变量。要理解闭包必须先理解什么是作用域以及作用域链。作用域及作用域链作用域分为全局作用域和函数作用域，es6 后又引入了块级作用域的概念。作用域在代码定义...
2020-03-05 16:25:00
710
原创 JavaScript-- IIFE（立即调用函数）
IIFE：（立即调用函数）IIFE（ 立即调用函数表达式）是一个在定义时就会立即执行的 JavaScript 函数。IIFE：全称为 Immediately-invoked function expression其结构为：(function(){/* code */}());//Crockford recommends this one，括号内的表达式代表函数立即调用表达式(fun...
2020-03-05 10:45:58
359
原创 web worker
介绍HTML 5提供了web workers 接口，使web应用程序可以在与主线程分离的后台线程中运行脚本。当页面点击计算按钮后执行函数计算，此函数计算需要消耗长时间，导致浏览器页面无响应（假死），点击页面dom元素无响应。因此为解决此类问题，可以将费时的操作在一个单独的线程中执行处理，避免主线程发生阻塞现象。基本用法主线程1、新建 Worker 线程：var myWorker = n...
2020-03-03 20:37:35
230
原创 JavaScript--执行上下文
执行上下文（execution context）概念在 JavaScript 中，执行上下文类似于代码执行的环境，当 Javascript 代码在运行的时候，都是在执行上下文中运行。每个函数都有其自身的执行上下文，包括全局执行上下文，在函数调用时JavaScript 引擎为该函数创建执行上下文后执行。执行上下文的分类执行上下文分为三类：1、全局执行上下文：在执行全局代码前将 window...
2020-02-29 00:19:18
245
原创 JavaScript--函数与回调函数（及 this 指向问题）
函数什么是函数？是实现特定功能的 n 条语句的封装体，只有函数是可以执行的，其他类型的数据不能执行使用函数的好处？可以提高代码复用性，便于阅读交流怎么定义函数？1、 函数声明方式来定义函数：function square(number) {return number * number;}2、 函数表达式的方式来定义函数：var square = function(number...
2020-02-25 21:45:15
512
原创 JavaScript--对象
对象JavaScript 的设计是一个简单的基于对象的范式。一个对象就是一系列属性的集合，一个属性包含一个名和一个值。一个属性的值可以是函数，这种情况下属性也被称为方法。例子 1：创建第一个对象 person ，并定义其属性和方法： var person={ name:'Bob', age:13, ...
2020-02-25 11:41:07
163
原创 JavaScript--内存管理与内存泄漏
内存管理像 C 语言这样的底层语言一般都有底层的内存管理接口，比如 malloc() 和free() 。相反，JavaScript是在创建变量（对象，字符串等）时自动进行了分配内存，并且在不使用它们时“自动”释放。 释放的过程称为垃圾回收。这个“自动”是混乱的根源，并让JavaScript（和其他高级语言）开发者错误的感觉他们可以不关心内存管理。因此可知 JavaScript 的内存管理使...
2020-02-24 17:36:14
252
原创 JavaScript--变量提升与暂时性死区的概念
变量提升（Hoisting）被认为是， Javascript中执行上下文 （特别是创建和执行阶段）工作方式的一种认识。从概念的字面意义上说，“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面，但这么说并不准确。实际上变量和函数声明在代码里的位置是不会动的，而是在编译阶段被放入内存中。JavaScript 仅提升声明，而不提升初始化。如果你先使用的变量，再声明并初始化它，变量的值将是...
2020-02-24 17:09:18
982
原创 JavaScript--内存空间（栈空间、堆空间）
JavaScript在内存分配管理上使用栈内存和堆内存，简单的基本数据类型的数据一般存储在栈内存中（其值有固定的大小范围），而像复杂的 Object 类型的数据则使用堆内存来存储（其大小不固定如数组对象等）。栈内存中存储js声明的变量名和变量值，由于基本数据类型的值直接存储在栈内存中可以直接获取数据的值，而Object类型存储在堆内存中，栈内存存放的是使用Object类型数据名和该数据在堆内存中...
2020-02-23 22:55:47
625
原创 JavaScript--for in循环输出的顺序
For循环是按顺序的，for in 循环是不一定按顺序的。用 for in 循环对象，循环出来的属性顺序并不可靠，所以不要在 for…in 中做依赖对象属性顺序的逻辑判断for in 循环遍历的规律：先遍历出（非负）整数属性（integer properties，按照升序），然后其他属性按照创建时候的顺序遍历出来。let obj = { "49": "Germany",...
2020-02-21 15:53:12
4360
原创 JavaScript--undefined与null 的区别
1. undefined与null的区别 * undefined:表示“未定义即没有赋值”, * null：表示没有对象null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。 var a; console.log(a);//undefined a=null; console.log...
2020-02-21 14:33:50
189
原创 JavaScript-数据类型和判断
当前元素对于浏览器窗口的距离等于其相对于文档的偏移值减去网页滚动条滚动的距离：var top=$(".detailsDiv").offset().top - $(window).scrollTop();
2020-02-20 11:57:37
168
原创 vue-TravelApp项目--首页制作
制作首页轮播：1. 安装vue-awesome-swipernpm install vue-awesome-swiper@2.6.7 --saveswiper插件的使用main.js中导入swiper模块使用：import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper' // require sty...
2020-02-18 23:55:58
295
原创 jquery获取原生dom对象的方法
使用jQuery $(selector)得到的是jquery封装的对象，里面提供了jquery的一些方法，并不是html原生对象。例如： $(’#addBookForm’)结果为：需要获取原生dom对象可以使用：$(selector).get(index)get() 方法获得由选择器指定的 DOM 元素。$(selector)[0]获取结果如下图：...
2019-10-08 17:54:45
2391
原创 修改a标签默认颜色，使其继承父元素的颜色
a标签不设置其样式的话会默认为蓝色和下划线，为了方便后续设置，可以使其继承父级元素，只设置包裹a标签的父元素的color值就可以修改a标签的颜色。a{ color: inherit;/*继承父级元素的颜色*/ text-decoration: none;}如下面例子，给li标签添加点击的active样式时设置字体颜色为红色，而a标签自身设置的有颜色就不会继承父元素设置的字体...
2019-09-27 12:18:07
2907
原创 &&运算符callback&&callback()含义
alert (1&&2)的值是？ 返回结果为2alert (0&&2)的值是？ 返回结果为00为false，1为true|| 符号：只要“||”前面为 false ，无论“||”后面是 true 还是 false ，结果都返回“||”后面的值。只要“||”前面为 true ，无论“||”后面是 true 还是 false ，结果都返回“||”前面的值。...
2019-09-26 17:21:21
755
原创 正则表达式的使用及方法详解区分
主要内容：正则表达式常用的元字符正则表达式常用的表达式模板js正则表达式使用方法正则分组的用法字符串匹配 string.match和regexObj.exec方法的区别字符串的替换1、常用元字符：地址链接\d 匹配数字\D 匹配非数字（包括换行空格，！号等）\w 匹配字母、数字、下划线\W 匹配非字母、数字、下划线(可以匹配换行，空格). 匹配除换行符（\n、\r）...
2019-09-24 21:11:00
255
原创 js中原型链分析，对象的组合继承，使子类继承父类的属性和方法
当不同的构造函数具有相同的属性和方法时，为减少代码的重复，实现代码重用，可以借用构造函数，继承其他构造函数中的属性或方法。如下面例子：主要步骤：1、在子类中使用Perent.call(this,arg1,arg2);来借用父类的构造函数，使用call方法改变this指向的当前子类的对象，并将其参数传递给父类的构造函数，此时子类中就有了父类的属性。2、要继承父类的方法，改变子类原型对象，Ch...
2019-09-22 15:52:03
898
1
原创 WEB前端性能优化总结——如何提高网页加载速度
记录收藏一篇博文：https://www.cnblogs.com/chenyoumei/p/9167238.html
2019-09-22 10:18:13
208
原创 自执行（自调用）函数的理解与用法
自执行（自调用）函数可以创建独立的作用域避免全局污染，以及项目中多个js文件中全局变量或方法命名冲突的问题；用法：(函数)(实参)，（）中可以传递参数，下面例子是自调用匿名函数，也可以设置函数名；在其他博客中看到一个例子：for(var i=0; i<6; i++){ liList[i].onclick = function(){ alert(i) // 为什么 alert...
2019-09-21 22:43:25
5828
原创 JS构造函数和普通函数的区别，使用面向对象的思想做一个js例子
普通函数：js中普通函数一般使用驼峰命名法来命名；调用时直接使用functionName()；其中普通函数内部的this指向调用函数的对象，没有对象调用时默认指向window构造函数：js中构造函数习惯以大写字母开头命名；使用new关键字来创建实例对象，其返回值一般就是实例化的对象，this指向的就是实例对象，其次通过构造函数创建多个对象都可以调用其原型对象中的属性和方法。使用构造函...
2019-09-21 14:43:23
205
原创 flex布局justify-content: space-between的排版问题
.div1{ display: flex; justify-content: space-between; flex-wrap: wrap; flex-direction: row; width: 600px; background-color: #e92...
2019-09-17 20:10:40
7630
1
原创 移动端touch事件
touch包含三个touch事件：1、touchstart：手指触摸到一个 DOM 元素时触发。2、touchmove：手指在一个 DOM 元素上滑动时触发。3、touchend：手指从一个 DOM 元素上移开时触发。touch触发后其事件中都包含三个触摸列表，其中都包含手指触摸的一些数据：touches:当前位于屏幕下的手指列表信息targetTouches: 当前位于当前元素下的手...
2019-09-15 18:46:43
265
原创 使用计时器setInterval实现倒计时
先区分一下计时器setTimeout()和setInterval()两个定时器的区别：setTimeout() 方法是延迟指定的毫秒数后执行函数体当中的代码；而setInterval()则可以在每隔指定的毫秒数循环调用函数或表达式，直到clearInterval把它清除。setTimeout()只执行一次，而setInterval可以循环重复调用。//秒杀产品倒计时函数，需要使用定时器每秒...
2019-09-14 14:44:00
1889
原创 css清除图片下方的空隙
如下图背景颜色设为灰色，轮播图片与下方元素直接有空隙显示出来一天灰色的背景线。解决方法将图片设置为display:block;可以解决问题；设置图片垂直对齐方向 vertical-align:bottom；父元素宽高固定设置overflow：hidden；将图片设置为浮动...
2019-09-13 15:48:37
735
原创 css盒模型详解
CSS3中设置盒模型：/* 标准模型，宽高等于content */box-sizing:content-box; /*IE模型，宽高等于content+padding+border*/box-sizing:border-box;在实际应用中对于盒模型理解不够透彻的话会出现问题。1 标准模型比如下面问题设置父元素宽度为640px；对顶部搜索栏进行设置，左侧logo和右侧登录按钮进行绝对...
2019-09-13 10:06:01
147
转载 【ES6】var、let、const三者的区别
首先，一个常见的问题是，ECMAScript 和 JavaScript 到底是什么关系？ECMAScript是一个国际通过的标准化脚本语言。JavaScript由ECMAScript和DOM、BOM三者组成。可以简单理解为：ECMAScript是JavaScript的语言规范，JavaScript是ECMAScript的实现和扩展。2011 年，ECMAScript 5.1 版发布。之前我们大...
2019-09-10 20:10:06
126
原创 $().each() $.each()和arr.forEach()三个用法 的区别和比较
1、array.forEach(function(currentValue, index, arr), thisValue)方法是对数组对象的遍历，将数组中每个元素传递给回调函数，其中当前元素参数是必需的；2、$().each()是jQuery的一个方法是对每个匹配元素进行操作，语法如下：$(selector).each(function(index,element))3、$.each(...
2019-09-10 19:56:45
545
原创 ES6模板字符串的用法
es6模板字符串使用反引号``即键盘数字键左边的键进行字符串拼接，其中可以使用${Expression}来插入表达式并进行解析，多用于拼接字符串时传递变量数据，比传统使用’++'拼接更方便。例子：$(function () { let data=[ {name:'小明',sex:'男',age:18}, {name:'小红',sex:'女',age:17},...
2019-09-10 19:29:59
212
原创 ajax请求及原理
同步请求即客户端向服务器发送请求后需要等待服务器的回应才能继续下一步加载页面，而异步请求即发送请求后不需要等待服务器的响应，继续自己的工作，待响应返回数据再对其进行数据的接收和处理。使用ajax可以实现异步请求，其原理就想是第三方中介人员，帮助客户解决需求，当需求解决后将其结果返回给客户，客户不需要等待结果，既高效又节省时间。原始ajax的使用：常用的有get和post请求：1、get请...
2019-09-09 21:28:12
324
原创 JS事件处理机制，为单线程+事件队列
JS事件处理机制，为单线程+事件队列事件队列中的任务执行条件：1、主线程已经空闲2、事件队列中的任务满足触发条件（1）定时函数（到达延时时间）（2）事件函数（待定事件被触发，如click事件被点击即立即执行）（3）ajax的回调函数（服务器端有数据响应）如下面例子中控制台打印结果为1sum32，主线程遇到定时函数将其放入事件队列中，当主线程按顺序执行完毕且满足延时时间则执行定时函数...
2019-09-09 20:59:42
279
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人