10 2020 档案

566 手写37个 原生JavaScript 系列汇总（含promise A+）
该文被密码保护。

posted @ 2020-10-30 15:33 冲啊！ 阅读(126) 评论(0) 推荐(0)

565 手写promise源码
摘要：// 考虑到兼容性问题，不使用ES6+ ; (function () { // 构造函数constructor function MyPromise(executor) { // 参数合法校验 if (typeof executor !== "function") { throw new TypeE 阅读全文

posted @ 2020-10-26 12:09 冲啊！ 阅读(151) 评论(0) 推荐(0)

564 函数的防抖和节流
摘要：函数的防抖和节流 防抖：在用户频繁触发的时候，只识别一次（识别第一次/识别最后一次） 节流： 目的是频繁触发中缩减频率。假设我们频率设置为500ms，我们频繁触发了10000ms，对于防抖，则只触发一次；对于节流，则触发20次 // 第一次点击，没有立即执行，等待500MS，看看这个时间内有没有触发 阅读全文

posted @ 2020-10-25 11:21 冲啊！ 阅读(144) 评论(0) 推荐(0)

563 fabudingyue
该文被密码保护。

posted @ 2020-10-24 14:18 冲啊！ 阅读(0) 评论(0) 推荐(0)

562 DOM0级、DOM2级事件，事件对象，阻止默认行为、冒泡，事件传播机制，事件委托
摘要：DOM0级、DOM2级事件及其原理 事件是元素（或者浏览器）天生自带的行为，只要行为触发，则会触发相关的事件行为； 事件绑定：基于xxx.onxxx = function()，属于给某个事件行为绑定方法，再行为触发的时候可以通知方法执行 * 事件绑定 * 1.DOM0级事件绑定 * xxx.onxx 阅读全文

posted @ 2020-10-24 12:19 冲啊！ 阅读(376) 评论(0) 推荐(0)

561 手写instanceof
摘要：// example：要检测的实例 // classFunc:要检测的类 function instance_of(example, classFunc) { // TZH: 判断是否是基本类型要反向判断，即判断是否object（null特殊处理）和function。 // 因为纵观es发展历史，基 阅读全文

posted @ 2020-10-24 09:33 冲啊！ 阅读(126) 评论(0) 推荐(0)

560 JS数据类型检测，自定义检测数据类型函数，对象转换为字符串、数字
摘要：4种检测数据类型的方法 * 1. typeof xxx * ⇒ typeof null ⇒ "object" * ⇒ typeof 数组、正则、日期、对象 ⇒ "object" * * 2. xxx instanceof xxx * 检测当前实例是否属于这个类（也可以用来检测数据类型：对typeof 阅读全文

posted @ 2020-10-23 20:51 冲啊！ 阅读(153) 评论(0) 推荐(0)

559 对象和数组的深浅拷贝
摘要：数组浅拷贝练习题 let utils = (function () { /* * toArray：转换为数组的方法 * @params * 不固定数量，不固定类型 * @return * [Array] 返回的处理后的新数组 * by haha on 2020 */ // 方法1 function 阅读全文

posted @ 2020-10-23 20:15 冲啊！ 阅读(133) 评论(0) 推荐(0)

557 原型prototype和原型链__proto__：原理，函数的三种角色，for in，手写new
该文被密码保护。

posted @ 2020-10-23 10:59 冲啊！ 阅读(231) 评论(0) 推荐(0)

556 面向对象，构造函数
摘要：面向对象 JS本身就是一门基于面向对象编程的语言 对象：泛指，一切我们需要研究的东西都是对象 类：把这么多东西按照特点进行分组分类（大类和小类） 实例：某一个类别中具体的某个事物 反推：通过对某一个实例的研究，我们会发现一些实例私有的特征，以及当前类下每一个实例都具备的公共特征 /* * arr1、 阅读全文

posted @ 2020-10-23 10:55 冲啊！ 阅读(106) 评论(0) 推荐(1)

555 柯理化函数，组合函数 compose
摘要：柯理化函数 柯理化函数编程思想：利用闭包的保存机制，事先把一些信息存储起来（存储到不释放的上下文中），这样可以供下级上下文中调用，我们把这种预先存储的思想叫做柯理化函数编程思想 function add1(x, y, z) { return x + y + z } function add2(x, 阅读全文

posted @ 2020-10-22 11:36 冲啊！ 阅读(187) 评论(0) 推荐(0)

553 原生JavaScript练习题
摘要：练习题1 // 作用域链 var a = 10 var b = 11 var c = 12 function test(a) { /* * EC(TEST) * 作用域链:<EC(TEST),EC(G)> * 初始THIS:window * 形参赋值:a=10 [私有变量] * 变量提升:var b 阅读全文

posted @ 2020-10-22 11:17 冲啊！ 阅读(270) 评论(0) 推荐(0)

552 let、const、var及其区别，变量提升，前端代码中的上下文（作用域），循环中的 IIFE、块级作用域，循环绑定事件的优化
摘要：let、const、var及其区别，变量提升 代码获取到后： 词法解析（AST）：把代码拆成对应的字符，并且识别成浏览器可以解析的对象。 上下文 --> 【初始化】作用域链、【初始化】this、形参赋值......【最后】变量提升 --> 代码执行 /* JS中声明变量或者函数的方式 【传统】 va 阅读全文

posted @ 2020-10-21 16:41 冲啊！ 阅读(216) 评论(0) 推荐(0)

551 闭包，浏览器垃圾回收机制/内存收机制
摘要：闭包： 函数执行过程中，会形成一个全新的私有上下文，此时会产生两个机制： （1）保护：保护自己的私有变量不受外界干扰（操作自己的私有变量和外界没有关系）； （2）保存：如果当前上下文不被释放【只要上下文中的某个东西被外部占用即可】，则存储的这些私有变量也不会被释放，可以供其下级上下文中调取使用，相当 阅读全文

posted @ 2020-10-21 12:04 冲啊！ 阅读(195) 评论(0) 推荐(0)

550 JavaScript运行机制之“堆栈”
摘要：3.1 名词、概念简述，案例 数据类型之间的区别 堆(Heap) 内存 栈(Stack) 内存 ECStack（Execution [ˌeksɪˈkjuːʃn] Context Stack）和 EC（Execution Context ） GO（Global Object）【全局对象】 VO（Var 阅读全文

posted @ 2020-10-21 11:21 冲啊！ 阅读(128) 评论(0) 推荐(0)

549 数据类型转换汇总：转换为Number、字符串、布尔，比 较操作==、===，练习题
摘要：4.1 转换为Number类型 把其他数据类型转换为Number类型 * 1.特定需要转换为Number的 * + Number([val]) * + parseInt、parseFloat([val]) * * 2.隐式转换（浏览器内部默认要先转换为Number在进行计算的） * 【基本上都是基于 阅读全文

posted @ 2020-10-21 10:18 冲啊！ 阅读(242) 评论(0) 推荐(0)

547 Promise：Ajax 的串行、并行， Promise的executor和状态，then、catch、finally，then链
摘要：Promise ES6 语法规范中新增加的内置类，用来处理 JS 中异步编程的，而我们所谓的 promise 设计模式，就是基于 promise 对异步操作进行管理。 对Ajax中的串行、并行导致的回调地狱、其他乱七八糟的事，进行管控。 我的理解：执行Promise的执行器函数executor过程中 阅读全文

posted @ 2020-10-19 16:50 冲啊！ 阅读(774) 评论(0) 推荐(0)

546 变量提升
摘要：**栈内存、作用域、执行上下文【执行环境】** 当浏览器开辟出供代码执行的栈内存后，代码并没有自上而下立即执行，而是继续做了一些事情：把当前作用域中所有带var、function关键字的进行提前的声明和定义 ⇒变量提升机制 【预解析】 带var的只是提前声明（declare）： “var a;” ， 阅读全文

posted @ 2020-10-17 15:42 冲啊！ 阅读(139) 评论(0) 推荐(0)

545 parseInt解析
摘要：/* 数组的迭代方法（遍历数组中的每一项做一些特殊的处理） forEach 遍历数组每一项（数组中有多少项，就会触发执行多少次回调函数，每一次把迭代的当前项和当前项的索引传递给回调函数） map 和forEach类似，只不过支持返回值，回调函数中的返回值会把当前迭代的这一项替换掉 find 迭代数据 阅读全文

posted @ 2020-10-17 14:45 冲啊！ 阅读(137) 评论(0) 推荐(0)

544 BFC的原理和功能
摘要：其实BFC是上⾯三种布局⽅式中的普通流，BFC会产⽣⼀个独⽴的容器，该容器内部的元素不会在布局上影响到外部的元素，在外部的普通流看来它和其他普通流元素⽆差别，⽂档最终会按照上⾯说的普通流计算布局。 <!DOCTYPE html> <html lang="en"> <head> <meta chars 阅读全文

posted @ 2020-10-08 12:11 冲啊！ 阅读(107) 评论(0) 推荐(0)

543 CSS布局模型：流动模型(Flow），浮动模型(Float），层模型(Layer）
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>流动模型(Flow 阅读全文

posted @ 2020-10-08 10:02 冲啊！ 阅读(408) 评论(0) 推荐(0)

542 vw弹性适配
摘要：vw : 1vw 等于视⼝宽度的1% vh : 1vh 等于视⼝⾼度的1% vmin : 选取 vw 和 vh 中最⼩的那个 vmax : 选取 vw 和 vh 中最⼤的那个 视⼝单位区别于%单位，视⼝单位是依赖于视⼝的尺⼨，根据视⼝尺⼨的百分⽐来定义的；⽽%单位则是依赖于元素的祖先元素。 <!DO 阅读全文

posted @ 2020-10-07 20:52 冲啊！ 阅读(154) 评论(0) 推荐(0)

541 固定定位不总是相对于浏览器视窗（viewport）进行定位
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>固定定位（posi 阅读全文

posted @ 2020-10-07 17:45 冲啊！ 阅读(330) 评论(0) 推荐(0)

540 CSS3属性对层叠上下文的影响
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS3属性对层叠 阅读全文

posted @ 2020-10-07 17:27 冲啊！ 阅读(105) 评论(0) 推荐(0)

539 层叠上下文的创建（层叠上下⽂形成条件）
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>层叠上下文的创建- 阅读全文

posted @ 2020-10-07 17:09 冲啊！ 阅读(207) 评论(0) 推荐(0)

538 不同堆叠上下文元素排列顺序
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>不同堆叠上下文元素 阅读全文

posted @ 2020-10-07 16:49 冲啊！ 阅读(143) 评论(0) 推荐(0)

537 同一个堆叠上下文元素排列顺序
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>同一个堆叠上下文元 阅读全文

posted @ 2020-10-07 16:42 冲啊！ 阅读(131) 评论(0) 推荐(0)

536 层叠顺序
摘要：https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-orderz-index/ <!-- 我的demo --> <!DOCTYPE html> <html lang="en"> <head> <me 阅读全文

posted @ 2020-10-07 16:30 冲啊！ 阅读(121) 评论(0) 推荐(0)

535 postition fixed和sticky
摘要：https://www.zhangxinxu.com/wordpress/2020/03/position-sticky-rules/ 我的demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=" 阅读全文

posted @ 2020-10-07 10:03 冲啊！ 阅读(155) 评论(0) 推荐(0)

534 定位常⻅值及原理
摘要：http://www.ruanyifeng.com/blog/2019/11/css-position.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= 阅读全文

posted @ 2020-10-07 09:58 冲啊！ 阅读(135) 评论(0) 推荐(0)

533 CSS3多列布局
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv 阅读全文

posted @ 2020-10-06 18:08 冲啊！ 阅读(92) 评论(0) 推荐(0)

532 全屏布局
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv 阅读全文

posted @ 2020-10-06 17:53 冲啊！ 阅读(110) 评论(0) 推荐(0)

531 等高布局：margin + padding，table + table-cell
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv 阅读全文

posted @ 2020-10-06 15:01 冲啊！ 阅读(184) 评论(0) 推荐(0)

530 等分布局：flex，float，table+table-cell
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv 阅读全文

posted @ 2020-10-06 14:10 冲啊！ 阅读(166) 评论(0) 推荐(0)

529 双飞翼布局
摘要：双飞翼布局最早是淘宝团队提出，是针对圣杯布局的优化解决方案。 主要是优化了圣杯布局中开启定位的问题。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width 阅读全文

posted @ 2020-10-06 11:52 冲啊！ 阅读(99) 评论(0) 推荐(0)

528 圣杯布局
摘要：圣杯布局是来源于该布局效果类似圣杯而得名。简单来说，就是指三行三列布局； 圣杯布局核心：主要是实现中间主体部分中的左右定宽+中间自适应的布局效果； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="v 阅读全文

posted @ 2020-10-05 21:35 冲啊！ 阅读(98) 评论(0) 推荐(0)

527 三列布局：float + margin，float + overflow，table + table-cell，flex，grid，postion，中间自适应-四种方法
摘要：三列布局一般情况下是指三列中左边两列是确定的宽度，右边一列是自动填满剩余所有空间的一种布局效果; 两列定宽,一列自适应(右边) float + margin属性实现； float + overflow属性实现； display属性的table相关值实现； 使用flex实现； 使用Grid实现； 两侧 阅读全文

posted @ 2020-10-05 20:46 冲啊！ 阅读(189) 评论(0) 推荐(0)

526 两列布局：float + margin，float + margin(fix)，float + overflow，table + table-cell，绝对定位，flex，Grid网格布局
摘要：两列布局一般情况下是指定宽与自适应布局，两列中左列是确定的宽度，右列是自动填满剩余所有空间的一种布局效果； 左列定宽, 右列自适应 float + margin属性实现； 优点：实现方式简单 缺点：自适应元素margin属性值需要与定宽元素的width属性值保持一致；定宽元素浮动与自适应元素不浮动导 阅读全文

posted @ 2020-10-05 20:28 冲啊！ 阅读(258) 评论(0) 推荐(0)

525 水平垂直居中：table + margin-auto，position定位，flex + justify-content + align-items
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv 阅读全文

posted @ 2020-10-05 20:08 冲啊！ 阅读(158) 评论(0) 推荐(0)

524 垂直居中布局：table-cell+vertical-align，绝对定位position，flex + align-items
摘要：垂直居中布局解决方案1 - table-cell+vertical-align <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid 阅读全文

posted @ 2020-10-05 20:03 冲啊！ 阅读(207) 评论(0) 推荐(0)

523 水平居中布局：text-align，margin-auto，text-algin + inline-block，绝对定位position + transform，flex + justify-content
摘要：水平居中布局 水平居中布局解决方案1-text-align <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia 阅读全文

posted @ 2020-10-05 19:42 冲啊！ 阅读(230) 评论(0) 推荐(0)

522 解读伪类和伪元素
摘要：https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudoclasses_and_pseudo-elements 伪类 ⽤于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据⽤户⾏ 阅读全文

posted @ 2020-10-05 13:25 冲啊！ 阅读(135) 评论(0) 推荐(0)

导航