CSS-- BFC 看图中共有 3 个 p 元素,每个 p 元素设置width100px,height 40px, magrin 20px,预期结果应该是 4个方向margin都为20px,每两个元素之间上下就应该是40px,但很明显 两个p元素上下之间的margin值为20,像是重叠了一样,与预期结果不同,这是什么原因导致的呢?答案是 BFC。下面学习总结一下 BFC。BFC 是什么BFC (block fo...
JavaScript -- offset、client、scroll 获取元素长度区别 以一个例子来区别这几个属性的计算方式:父元素为橘黄色区域,子元素为蓝色边框包裹的区域。父元素布局:子元素布局:(content设置width、height都为100px,因为右侧出现滚动条,所以浏览器布局显示content width 90.4为去掉滚动条的宽度。)offset 类offsetHeight 与 offsetWidthoffsetWidth :获取元素本身的...
CSS -- flex 布局语法总结与分析 Flex Box 弹性盒子使用弹性盒布局可以更有效的对一个容器中的子元素进行排列、分配空间。注意: 元素设为 Flex 布局以后,其子元素的 float、clear 和 vertical-align 属性将失效。使用 flex 布局的元素称为flex容器 ,其包含的所有子元素称为flex 项目,容器默认有两根轴,容器中的项目按照轴的方向进行排列:1、水平方向的 主轴(main axis)...
JavaScript -- 异步与执行机制(宏任务与微任务) 事件循环(Event Loop)由于 JavaScript 是单线程,当要处理异步任务时需要有人来管理,规定异步任务执行完毕后其注册的回调函数何时返回给主线程来执行,这个管理员就是 事件循环(Event Loop),是 JavaScript 的执行机制。首先要知道,js引擎 负责JavaScript 代码的解析执行,对于页面的渲染、事件的监听、定时器事件等都是有浏览器的其他线程来负责的。Ja...
JavaScript -- new 操作符模拟实现原理 构造函数创建实例化对象时必须使用 new 关键字,new 操作符到底做了什么事情,又是怎么实现的?MDN 上的讲解:new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。new 关键字会进行如下的操作:创建一个空的简单JavaScript对象(即{});链接该对象(即设置该对象的构造函数)到另一个对象 ;将步骤1新创建的对象作为this的上下文 ;如果该...
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 方...
JavaScript-- ES6 箭头函数 箭头函数:作用: 箭头函数表达式更适用于那些本来需要匿名函数的地方,比如回调函数使用方法:(param1,param2,…) =>{ statements }支持剩余参数和默认参数,支持参数列表解构普通函数与箭头函数用法比较:如返回数组中每一项字符串的长度 //普通函数 let arr=['heiuwo','eiswoeif','ciwove'] arr...
JavaScript -- call、apply、bind 方法的使用及区别(包含扩展运算符 : ...) JavaScript提供了一些函数方法来处理改变 this指向问题:常用的有 call apply bind ,下面来分析这三个函数的用法和区别:1、call()方法Function.prototype.call() 语法:func.call(thisArg, arg1,arg2,…)thisArg:必选的。在 func 函数运行时使用的 this 值,即要指向的对象arg:为传...
JavaScript -- 闭包与作用域链 什么是闭包红宝书上解释:闭包 是指有权访问另外一个函数作用域中的变量的函数.闭包就是能够读取其他函数内部变量的函数MDN 上解释:闭包是由函数以及创建该函数的词法环境组合而成。这个环境包含了这个闭包创建时所能访问的所有局部变量。要理解闭包必须先理解什么是作用域以及作用域链。作用域及作用域链作用域分为全局作用域和函数作用域,es6 后又引入了块级作用域的概念。作用域在代码定义...
JavaScript-- IIFE(立即调用函数) IIFE:(立即调用函数)IIFE( 立即调用函数表达式)是一个在定义时就会立即执行的 JavaScript 函数。IIFE:全称为 Immediately-invoked function expression其结构为:(function(){/* code */}());//Crockford recommends this one,括号内的表达式代表函数立即调用表达式(fun...
web worker 介绍HTML 5提供了web workers 接口,使web应用程序可以在与主线程分离的后台线程中运行脚本。当页面点击计算按钮后执行函数计算,此函数计算需要消耗长时间,导致浏览器页面无响应(假死),点击页面dom元素无响应。因此为解决此类问题,可以将费时的操作在一个单独的线程中执行处理,避免主线程发生阻塞现象。基本用法主线程1、新建 Worker 线程:var myWorker = n...
JavaScript--执行上下文 执行上下文(execution context)概念在 JavaScript 中,执行上下文类似于代码执行的环境,当 Javascript 代码在运行的时候,都是在执行上下文中运行。每个函数都有其自身的执行上下文,包括全局执行上下文,在函数调用时JavaScript 引擎为该函数创建执行上下文后执行。执行上下文的分类执行上下文分为三类:1、全局执行上下文:在执行全局代码前将 window...
JavaScript--函数与回调函数(及 this 指向问题) 函数什么是函数?是实现特定功能的 n 条语句的封装体,只有函数是可以执行的,其他类型的数据不能执行使用函数的好处?可以提高代码复用性,便于阅读交流怎么定义函数?1、 函数声明方式来定义函数:function square(number) {return number * number;}2、 函数表达式的方式来定义函数:var square = function(number...
JavaScript--对象 对象JavaScript 的设计是一个简单的基于对象的范式。一个对象就是一系列属性的集合,一个属性包含一个名和一个值。一个属性的值可以是函数,这种情况下属性也被称为方法。例子 1:创建第一个对象 person ,并定义其属性和方法: var person={ name:'Bob', age:13, ...
JavaScript--内存管理与内存泄漏 内存管理像 C 语言这样的底层语言一般都有底层的内存管理接口,比如 malloc() 和free() 。相反,JavaScript是在创建变量(对象,字符串等)时自动进行了分配内存,并且在不使用它们时“自动”释放。 释放的过程称为垃圾回收。这个“自动”是混乱的根源,并让JavaScript(和其他高级语言)开发者错误的感觉他们可以不关心内存管理。因此可知 JavaScript 的内存管理使...
JavaScript--变量提升与暂时性死区的概念 变量提升(Hoisting)被认为是, Javascript中执行上下文 (特别是创建和执行阶段)工作方式的一种认识。从概念的字面意义上说,“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面,但这么说并不准确。实际上变量和函数声明在代码里的位置是不会动的,而是在编译阶段被放入内存中。JavaScript 仅提升声明,而不提升初始化。如果你先使用的变量,再声明并初始化它,变量的值将是...
JavaScript--内存空间(栈空间、堆空间) JavaScript在内存分配管理上使用栈内存和堆内存,简单的基本数据类型的数据一般存储在栈内存中(其值有固定的大小范围),而像复杂的 Object 类型的数据则使用堆内存来存储(其大小不固定如数组对象等)。栈内存中存储js声明的变量名和变量值,由于基本数据类型的值直接存储在栈内存中可以直接获取数据的值,而Object类型存储在堆内存中,栈内存存放的是使用Object类型数据名和该数据在堆内存中...
JavaScript--for in循环输出的顺序 For循环是按顺序的,for in 循环是不一定按顺序的。用 for in 循环对象,循环出来的属性顺序并不可靠,所以不要在 for…in 中做依赖对象属性顺序的逻辑判断for in 循环遍历的规律:先遍历出(非负)整数属性(integer properties,按照升序),然后其他属性按照创建时候的顺序遍历出来。let obj = { "49": "Germany",...
JavaScript--undefined与null 的区别 1. undefined与null的区别 * undefined:表示“未定义即没有赋值”, * null:表示没有对象null是一个表示"无"的对象,转为数值时为0;undefined是一个表示"无"的原始值,转为数值时为NaN。 var a; console.log(a);//undefined a=null; console.log...