前端路由-原生SPA
22：前端路由-原生SPA一、什么是路由 路由：就是根据不同的地址，响应不同的内容。一般情况下，在项目开始之前，都会对路由地址进行规划、设定，然后在项目开发过程中，针对预先规划的路由地址进行处理和响应。 就是地址和页面一一对应关系的集合 就是一个 url 地址，对应哪个组件（页面） 前端路由的本质 根据地址栏变化(不重新向服务器发送请求)，局部更新不同的页面内容，完成前端业务场景切换 前端路由的思路 URL 地址栏中的 Hash 值发生变化 前端 JS 监听 Hash 地址的变化 window.onhashchange = function(){ } 前端 JS 把当前 Hash 地址对应的组件渲染到浏览器中 二、什么是SPA SPA：单页面应用，Single Page Application 只有Web 页面的应用，是加载单个 HTML 页面，并在用户与应用程序交互时，动态更新该页面的 Web...
对象高级
21：对象高级一、数据劫持 数据劫持：能够拦截到数据被使用或被修改的时机，在这个时机除了可以获取数据的值或对数据的值进行修改之外，还可以执行其他功能。 当对数据进行修改时，除了要修改数据自身之外，还希望对所有使用了该数据的位置进行同步修改。 对象的访问器属性 访问器属性由 “getter” 和 “setter” 方法表示。在对象字面量中，它们用 get 和 set 表示： 1234567891011let obj = { _msg: "hello world", get msg() { // 当读取 obj.msg 时，getter 起作用 return this._msg; }, set msg(value) { // 当执行 obj.msg = value 操作时，setter 起作用 this._msg = value }}; 当读取 obj.msg 时，getter 起作用，当 obj.msg 被赋值时，setter...
设计模式
20：设计模式一、设计模式 什么是设计模式 设计模式是一种固定的解决问题的方式 是一套经过代码设计经验总结优化之后的固定的方式 是软件工程的基础，是代码的基石脉络 是一套经过反复使用、多人知晓的、经过分类的、代码设计经验的总结 为了代码的可重用性、让代码更容易被他人理解、保证代码的可靠性。设计模式使代码的编写真正的工程化；设计模式是软件工程的基石脉络，如同大厦的结构 设计模式的分类（W3C平台） 构造器模式，模块化模式，暴露模块模式，单例模式，中介者模式，原型模式，命令模式，外观模式，工厂模式，Mixin模式，装饰模式，亨元(Flyweight)模式，MVC模式，MVP模式，MVVM模式，组合模式，适配器模式，外观模式，观察者模式，迭代器模式，惰性初始模式，代理模式，建造者模式，… 二、单例模式 单个实例，多次操作只操作（产生）一个实例 应用： 一个项目中所有的信息提示框只需要有一个即可 改内容，改样式 贪吃蛇中的食物对象 优势：节省性能，提升执行速度 语法： const obj1 = {}; const obj2 = new...
函数高级
19：继承一、继承 面向对象三大特点：封装，继承，多态 封装：打包 继承：如果一个对象A不具有某个功能a，通过某种方式使用了对象B的a功能 的过程 多态：对象或功能的多种形态，在使用某个对象时，不关心从哪来，在封装某个对象时，不关心将要在哪被使用 继承 构造函数执行之后得到的实例，继承了原型身上的方法（实例继承了类的原型） 类与类之间的继承 继承方式 构造函数继承（改变this指向继承） call，apply，bind 简单方便易操作 非常易于做多继承 只能继承构造函数内的属性或方法，不能继承原型身上的属性或方法 原型对象继承 其实就是在拷贝原型对象，同时注意深浅拷贝 只能继承原型对象上的属性或方法，不能继承构造函数内的属性或方法 可以实现多继承 原型链继承 既能继承构造函数内的属性或方法，又能继承原型上的属性或方法 但是不方便处理参数 不适合多继承 混合（组合）继承 构造函数+原型对象 构造函数+原型链 集合了各种方式的优点 ES6新增的class的继承...
函数高级
18：函数高级一、闭包函数1. 函数定义阶段 在堆内存中开辟一段存储空间 把函数体内的代码存储在这一段空间内 把堆空间地址赋值给栈内存中的变量 2. 函数调用阶段 按照变量名内的空间地址找到堆内存中对应的存储空间 在调用栈中开辟一段新的作用域执行空间 在执行空间中进行形参赋值 在执行空间中进行预解析（声明提升，检查报错等） 在执行空间中完整执行一遍函数内的代码 将当前作用域执行空间，销毁 3. 不会销毁的函数执行空间 当函数内返回了一个复杂数据类型 并且函数外部有变量接收了这个复杂数据类型 函数执行完毕后的执行空间不会被销毁 12345678910function fn() { const obj = { name: 'admin' } return obj}const res = fn();console.log(res); // { name: 'admin' }// 如果需要释放这个空间，给 res 重定向, 即可res = null; 4....
面向对象编程
17：面向对象编程一、什么是面向对象 面向对象编程（Object-Oriented Programming, OOP）是一种软件开发方法，它将数据和方法封装在一起，形成一个对象，通过对象之间的交互实现程序的功能。 每个对象都有自己的状态和行为，对象之间通过调用彼此的方法来实现交互。 这种编程范式强调代码的可重用性、可维护性和灵活性，使得程序开发更加高效和可靠。 同时，面向对象编程也是一种更加自然的编程方式，因为它更接近我们日常生活中的实体和行为。 二、面向过程和面向对象 面向过程： 关注过程的编程模式 在面向过程编程中，数据和方法是分离的，程序主要由一系列函数组成，每个函数都是一个独立的模块，它们之间通过参数和返回值进行交互。 程序的执行顺序是由函数的调用顺序决定的。...
DOM动画
16：DOM动画缓冲运动的封装123456789101112131415161718192021222324function move(ele, obj, cb){ clearInterval(ele.t) ele.t = setInterval(()=>{ let state = true; for(let key in obj){ let now = parseInt(getStyle(ele, key)); let speed = (obj[key] - now) / 10; speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed); ele.style[key] = now + speed + "px"; if(now !== obj[key]) state = false; } if(state){ clearInterval(ele.t); ...
ES6
14：ES6一、声明关键字 ES6新增的声明关键字： let，const：声明变量 class：声明类 import，export：模块化开发 let和const的特点 不存在提升 不允许重复声明 全局不会绑定到window 块级作用域 暂时性死区 const声明的变量不允许修改地址 使用规范：const -> let ->...
正则
15：正则一、正则的概念和意义 正则：正确的规则，用来约束字符串的规则，正则的数据类型是对象，正则对象，正则表达式 正则的意义： 节省代码量，减少代码冗余 并没有节省性能 如：从一串杂乱的字符串中取出所有的数字，放在数组中 1234567891011121314var str = “asd256asd834as5da38sd512zcacas";var linshi='';var arr=[];for(var i = 0; i < str.length; i++){ if(str[i]>=0 && str[i]<=9){ linshi += str[i]; }else{ if(linshi != ''){ arr.push(linshi) linshi = ''; } }}console.log(arr); 二、正则的创建 字面量：var...
this
13：this一、this是哪里 this在英文中的含义是【这】。那么【这】是【哪】？ this关键字一般存在于函数中，表示一个指针，指向了当前函数的执行对象。也叫当前函数的**【执行】上下文。** 注意**【执行】**这两个字，如果函数没有执行，那么this是没有内容的，只有当函数执行时，this才被绑定了内容。 总结一句话：谁【执行】了**this**所在的函数，**this**就是谁。 二、常见的this指向2.1 默认绑定 当一个没有明确隶属对象的函数，被直接调用时。该函数内部的this指向window。 123456function fn(){ console.log(this.a);}var a = 10;fn(); //10// 这里的this指全局对象window 当然要注意,在ES5的严格模式下，没有明确隶属对象的函数在默认执行时，其内部的this指向undefined。 2.2...