JavaScript闭包
JavaScript闭包函数和对其词法环境lexical environment的引用捆绑在一起构成闭包,也就是说,闭包可以让你从内部函数访问外部函数作用域。在JavaScript,函数在每次创建时生成闭包。在本质上,闭包是将函数内部和函数外部连接起来的桥梁。
定义闭包为了定义一个闭包,首先需要一个函数来套一个匿名函数。闭包是需要使用局部变量的,定义使用全局变量就失去了使用闭包的意义,最外层定义的函数可实现局部作用域从而定义局部变量,函数外部无法直接访问内部定义的变量。
12345678910function student(){ var name = "Ming&q ...
Map与WeakMap
Map与WeakMapMap对象用来保存键值对,并且能够记住键的原始插入顺序,任何对象或者原始值都可以作为键或者是值。WeakMap对象同样用来保存键值对,对于键是弱引用的而且必须为一个对象,而值可以是任意的对象或者原始值。
Map描述Map对象类似于一个普通的键值对的Object对象,也是键值对的集合,但是他们之间有一些重要的区别:
描述
Map
Object
意外的键
Map默认情况不包含任何键,只包含显式插入的键。
一个Object有一个原型, 原型链上的键名有可能和在对象上的设置的键名产生冲突。
键的类型
一个Map的键可以是任意值,包括函数、对象或任意基本类型。
一个 ...
Function与Object
Function与ObjectJavaScript中内置了两个顶级对象Function、Object,Object是所有对象的基类,而所有的构造函数同时又是Function对象的实例。
ObjectJavaScript中的所有对象都来自Object,所有对象从Object.prototype继承方法和属性,尽管它们可能被覆盖,例如其他构造函数在原型中实现自己的toString()方法。Object原型对象的更改将传播到所有对象,除非这些受到更改的属性和方法沿原型链被覆盖。
1234567891011121314151617181920212223// 定义三个对象var a = functio ...
Flex布局
Flex布局Flex布局也称弹性布局,可以为盒状模型提供最大的灵活性,是布局的首选方案,现已得到所有现代浏览器的支持。
基础通过指定display: flex来标识一个弹性布局盒子,称为FLEX容器,容器内部的盒子就成为FLEX容器的成员,容器默认两根轴线,水平的主轴与垂直的交叉轴,主轴的开始位置叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end,容器成员默认按照主轴排列。
容器属性flex-directionflex-direction属性决定主轴的方向,取值为row | row-reverse | column ...
null和undefined
null和undefined的区别在Js中null与undefined是两种基本数据类型,都可以用来表示”无”这个概念,但是在语义表达以及实际使用上是有所区别的。
描述大多数计算机语言只有一个用来表示”无”这个概念的值,例如C与C++的NULL、Java与PHP的null、Python的None、lua与Ruby的nil,但是在Js中有null与undefined两种基本数据类型来表示”无”这个概念。在很多情况下null和undefined几乎等价,例如在if语句中,都会被自动转为false。
1234var _null = null;var _undefined = undefined;if ...
Float浮动
Float浮动CSS中float属性会使元素浮动,使元素向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
实例
元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。
使用float意味着使用块布局,其会在display非块级元素情况下修改display值的计算值。
一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素会脱离文档流但不会脱离文本流,当浮动时其不会影响周围的盒子模型,但是文字会环绕在浮动元素周围,可以认为文档流与文字流是分层结构而浮动元素盒子与文字元素处于同一层。
文档流,指的是盒子元素排版布局过程中,元素会自动从左 ...
ES6新特性
ES6新特性ES6的常用新特性简介,全部特性可参阅 Ecma-InternationalMDNES6入门ES6 教程
ES6全称ECMAScript 6.0,是JavaScript的下一个版本标准,2015.06发版。ECMAScript和 JavaScript的关系是,前者是后者的规格,后者是前者的一种实现。
let 与 constES2015(ES6)新增加了两个重要的JavaScript关键字: let和const。ES6明确规定,代码块内如果存在let或者 const,代码块会对这些命令声明的变量从块的开始就形成一个封闭作用域。代码块内,在声明变量之前使用它会报错,称为暂时性死区。ES ...
文本溢出截断
文本溢出截断省略文本溢出截断省略是比较常见的业务场景,主要分为单行文本溢出截断省略与多行文本溢出截断省略,单行的截断方案比较简单,多行截断相对比较复杂。
单行溢出省略单行文本溢出截断省略直接使用CSS即可,其无兼容问题,文本溢出范围才显示省略号,否则不显示省略号,省略号位置显示刚好,但是只能作为单行文本溢出截断省略的解决方案。
1234567891011<section> <div class="t1">很长很长很长很长很长很长很长很长的文本</div> <div class="t1">不很长的 ...
BFC块级格式化上下文
块级格式化上下文BFC块级格式化上下文Block Formatting Context,是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域,是用于布局块级盒子的一块渲染区域,并且与这个区域的外部毫无关系,是一个独立的区域,是一个环境。
触发BFC
根元素<html>。
浮动元素,元素的float不是none。
绝对定位元素,元素的position为absolute或fixed。
行内块元素,元素的display为inline-block。
表格单元格,元素的display为table-cell。
表格标题,元素的display为ta ...
CSS盒子模型
CSS盒子模型所有的HTML元素都可以看作是一个盒子。将盒子模型拆分,则包括 外边距+边框+填充+内容。显得专业一些,box model = margin+border+padding+content。
1234567891011121314------------------------------------------| margin | | -------------------------------------- || | border | || ...