SikW_04_27-CSDN博客

原创作用域与闭包

作用域和闭包作用域问题：将变量引入程序中，他们储存在哪里，程序需要时如何找到编译原理分词/词法分析将字符组成的字符串分解成有意义的代码块，这些代码块被称为词法单元(token)例：var a = 2;会分解成var、a、=、2、;，空格是否会被当成词法单元取决于空格在该门语言中是否有意义解析/语法分析将第一步生成的词法单元流（数组）转化成一个由元素逐级嵌套所组成的代表了程序语法结构的树，这棵树被称为抽象语法树（AST）AST例：将一个函数拆开function add(a, b

2021-11-28 14:21:11 492

原创 vue 3

vue 3创建Vue3.0工程使用Vue-cli创建## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上vue --version## 安装或者升级你的@vue/clinpm install -g @vue/cli## 创建vue create vue_test## 启动cd vue_testnpm run serve使用vite创建vite：新一代前端构建工具优势：开发环境中，无需打包操作，可快速的冷启动轻量快速的热重载（HMR）真正的按

2021-08-16 11:45:03 139

原创路由vue-router

路由相关理解vue-router的理解vue的一个插件库，专门用来实现SPA应用对SPA应用的理解单页Web应用整个应用只有一个完整的页面点击页面中的导航链接不会刷新页面，只会做页面的局部更新数据需要通过AJAX请求获取路由的理解什么是路由一个路由就是一组映射关系（key - value)key为路径，value可能是function或component路由分类后端路由理解：value是function，用于处理客户端提交的请求工作过程：服务器接收到一个请求时，根据

2021-08-16 11:40:19 83

原创 Vuex

Vuex理解Vuexvuex是什么概念：专门在Vue中集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式管理（读/写），也是一种组件间通信的方式，且使用于任意组件间通信Github地址：http://github.com/vuejs/vuex什么时候使用Vuex多个组件依赖同一状态来自不同组件的行为需要变更同一状态两种多组件共享数据方式对比全局事件总线实现vuex实现搭载vuex环境安装vuex插件npm i vuex

2021-08-16 11:39:33 74

原创 Vue脚手架

Vue脚手架render函数vue.js与vue.runtime.xxx.js的区别：vue.js是完整版的Vue，包含：核心功能+模板解析器vue.runtime.xxx.js是运行版的Vue，只包含核心功能，没有模板解析器目的：打包代码的时候能节省空间因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容脚手架文件结构├── node_module

2021-08-16 11:37:20 203

原创 Vue组件化编程

Vue组件化编程非单文件组件Vue中使用组件的三大步骤定义组件（创建组件）注册组件使用组件（写组件标签）定义一个组件使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别el不要写：最终所有的组件都要经过一个vm管理，由vm中的el决定服务哪个容器data必须写成函数：避免组件被复用时，数据存在引用关系备注：使用template可以配置组件结构注册组件局部注册：靠new Vu

2021-08-16 11:33:51 77

原创 Vue核心

Vue核心特点采用组件化模式，提高代码复用率，让代码有更高的维护性声明式编码，让编码人员无需直接操作DOM，提高开发效率初识Vue想让Vue工作，就必须先创建一个Vue实例，而且需要传入一些配置对象root容器里面的代码依然符合html规范，只不过混入了一些特殊的Vue语法root容器里的代码被称为[Vue模板]Vue实例和容器是一一对应的真实开发中只要有一个Vue实例，并且会配合着组件一起使用{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性

2021-08-16 11:32:38 144

原创 TypeScript配置

TypeScript配置tsconsig.json配置include用来指定哪些ts文件需要被编译路径：**表示任意目录 *表示任意文件"include":[ "./src/**/*"]exclude表示不需要被编译的文件目录默认值："exclude":[ "./src/hello/**/*"]extends定义被继承的配置文件"extends":"./configs/base" //表示配置文件中会自动包含config目录下的b

2021-08-16 11:25:18 681

原创 typescript进阶

Typescript进阶类型别名使用 type 创建类型别名，常用于联合类型type Name = string;type NameResolver = () => string;type NameOrResolver = Name | NameResolver;function getName(n: NameOrResolver): Name { if (typeof n === 'string') { return n; } else {

2021-08-16 11:24:49 92

原创 typescript基础

TypeStript基础原始数据类型原始数据类型包括：布尔值数值字符串nullundefinedSymbol(ES6)BigInt(ES10)布尔值在ts中，使用boolean定义布尔值类型let isDone: boolean = false;未强调编译错误的代码片段，就默认编译通过注意：使用new Boolean()返回的是一个Boolean对象，不是布尔值let createBoolean:Boolean = new Boolean(1);直接调用Boole

2021-08-16 11:24:09 880

原创 git笔记

git简介Git是目前世界上最先进的分布式版本控制系统创建版本库找一个合适的地方，创建一个空目录$ mkdir learngit$ cd learngit$ pwd //显示当前目录/Users/michael/learngit如果你使用Windows系统，为了避免遇到各种莫名其妙的问题，请确保目录名（包括父目录）不包含中文通过git init命令把这个目录变成Git可以管理的仓库$ git initInitialized empty Git repository in /

2021-08-16 11:19:25 61

原创 Module的语法

Module的语法概述为了JS模块化管理严格模式ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";严格模式的限制：变量必须声明后再使用函数的参数不能有同名属性，否则报错不能使用with语句不能对只读属性赋值，否则报错不能使用前缀 0 表示八进制数，否则报错不能删除不可删除的属性，否则报错不能删除变量delete prop，会报错，只能删除属性delete global[prop]eval不会在它的外层作用域引入变量eval和arguments

2021-07-18 20:43:59 120

原创 Class的继承

Class的继承简介Class可以通过extends关键字实现继承，这比es5通过修改原型链实现继承，要清晰和方便许多class Point {}class ColorPoint extends Point {} //继承了Point类的所有属性和方法//由于没有部署任何代码，所以这两个类完全一样，等于复制了一个Point类class ColorPoint extends Point { constructor(x, y, color) { super(x, y); // 调

2021-07-18 20:43:23 104

原创 Class的基本语法

Class的基本语法简介类的由来JavaScript语言中，生成实例对象的传统方法是通过构造函数为了更接近传统语言，引入了class，作为对象的模板，通过这个关键字，可以定义类//JS传统方法function Point(x, y) { this.x = x; this.y = y;}Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')';};var p = new

2021-07-18 20:42:46 772

原创 async函数

async函数含义async是Generator的语法糖async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成awaitconst gen = function* () { const f1 = yield readFile('/etc/fstab'); const f2 = yield readFile('/etc/shells'); console.log(f1.toString()); console.log(f2.toString())

2021-07-18 20:42:14 104

原创 Generator函数的异步应用

Generator函数的异步应用传统方法回调函数事件监听发布/订阅Promise对象基本概念异步一个任务不是连续完成的，可以理解成该任务被人为分成两段，先执行第一段，然后转去执行其他任务，等做好了准备，再回过头执行第二段回调函数把任务的第二段单独写在一个函数里面，等到重新执行这个任务的时候，就直接调用这个函数Promise多个回调函数嵌套会形成回调函数地狱，难以修改而Promise允许将回调地狱的嵌套，改成链式调用Generator函数协程协程：多个线程互相协作，完成

2021-07-18 20:41:32 74

原创 Generator 函数的语法

Generator 函数的语法简介Generator函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同语法：Generator函数是一个状态机，封装了多个内部状态形式：Generator函数是一个普通函数，特征如下：function关键字和函数名之间有一个星号*函数体内部使用yield表达式，定义不同的内部状态Generator函数的调用方法跟普通函数一样，在函数名后面加一对圆括号但是调用Generator函数后，该函数并不执行，返回的也不是函数的运

2021-07-18 20:41:06 186

原创 Iterator 和 for...of 循环

Iterator 和 for…of 循环遍历器的概念遍历器：遍历器是一个接口，为各种不同的数据结构（Array、Object、Map、Set）提供统一的访问机制，任何数据只要部署了Iterator接口，就可以完成遍历操作Iterator的作用：为各种数据结构，提供一个统一的、简便的访问接口使得数据结构的成员能够按某种次序排列ES6 创造了一种新的遍历命令for...of循环，Iterator 接口主要供for...of消费Iterator的遍历过程：创建一个指针对象，指向当前数据

2021-07-18 20:40:19 90

原创 promise

PromisePromise的含义Promise是异步编程的一种解决方法Promise对象可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数特点：对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败），只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pe

2021-07-18 20:39:27 70

原创 SET 和Map数据结构

SET 和Map数据结构Set基本用法Set是一个新的数据结构，类似于数组，但是成员的值都是唯一的，没有重复的值Set本身是一个构造函数，用来生成Set数据结构const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));//通过add方法向Set数据结构中加入成员for (let i of s) { console.log(i);}// 2 3 5 4 表明不会添加重复的值Set也可以接收一个数组作为参

2021-07-18 20:38:43 62

原创 Symbol

Symbol概述ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolea

2021-07-18 20:37:44 60

原创前端代码规范

前端代码规范HTML规范1.img标签要写alt属性表示图片想要表达的意思，当图片无法显示的时候会显示文字2.单标签不要写闭合<img scr='hahaha.jpg'></img> //应该去掉</img><input type='text' value=''/> //应该去掉末尾的/ 但是如果用React写jsx模板，它就要求每个标签都要闭合，但是它始终不是原生html3.自定义属性要用data-开头4.td要写在tr里，li要写在ul

2021-07-12 23:26:41 715

原创对象的新增方法

对象的新增方法Object.is()ES5 比较两个值是否相等，只有两个运算符：相等运算符（==）和严格相等运算符（===）。它们都有缺点，前者会自动转换数据类型，后者的NaN不等于自身，以及+0等于-0。JavaScript 缺乏一种运算，在所有环境中，只要两个值是一样的，它们就应该相等ES6 提出“Same-value equality”（同值相等）算法，用来解决这个问题。Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致O

2021-06-16 02:34:56 268

原创对象的扩展

对象的扩展属性的简洁表示法ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁const foo = 'bar';const baz = {foo};baz // {foo: "bar"}// 等同于const baz = {foo: foo};//上面代码中，变量foo直接写在大括号里面。这时，属性名就是变量名, 属性值就是变量值。//下面是另一个例子function f(x, y) { return {x, y};}// 等同于func

2021-06-14 00:31:25 71

原创数组的扩展

数组的扩展扩展运算符扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列console.log(...[1, 2, 3])// 1 2 3console.log(1, ...[2, 3, 4], 5)// 1 2 3 4 5[...document.querySelectorAll('div')]// [<div>, <div>, <div>]该运算符主要用于函数调用function

2021-06-13 11:40:59 93

原创函数的扩展

函数的扩展函数参数的默认值基本用法ES6 之前，不能直接为函数的参数指定默认值，只能采用变通的方法function log(x, y) { y = y || 'World'; console.log(x, y);}log('Hello') // Hello Worldlog('Hello', 'China') // Hello Chinalog('Hello', '') // Hello WorldES6 允许为函数的参数设置默认值，即直接写在参数定义的后面functi

2021-06-10 02:20:34 88

原创数值的扩展

数值的扩展二进制和八进制的表示法ES6 提供了二进制和八进制数值的新的写法，分别用前缀0b（或0B）和0o（或0O）表示0b111110111 === 503 // true0o767 === 503 // true从 ES5 开始，在严格模式之中，八进制就不再允许使用前缀0表示，ES6 进一步明确，要使用前缀0o表示// 非严格模式(function(){ console.log(0o11 === 011); //es6的八进制和es5的八进制})() // true//

2021-06-09 00:03:14 400

原创正则的扩展

正则的扩展RegExp构造函数ES5中的构造函数的参数有两种情况参数是字符串，这时第二个参数表示正则表达式的修饰符（flag）var regex = new RegExp('xyz', 'i');// 等价于var regex = /xyz/i;参数是一个正则表示式，这时会返回一个原有正则表达式的拷贝var regex = new RegExp(/xyz/i);// 等价于var regex = /xyz/i;ES5不允许第二种情况使用第二个参数添加修饰符，否则

2021-06-08 01:21:32 70

原创字符串的新增方法

字符串的新增方法String.fromCodePoint()ES5 提供String.fromCharCode()方法，用于从 Unicode 码点返回对应字符，但是这个方法不能识别码点大于0xFFFF的字符String.fromCharCode(0x20BB7)// "ஷ" 最高位2被舍弃了，最后返回码点U+0BB7对应的字符，而不是码点U+20BB7对应的字符ES6 提供了String.fromCodePoint()方法，可以识别大于0xFFFF的字符，弥补了String.fromC

2021-06-06 11:13:22 81

原创 ES6变量

变量varvar 声明作用域使用var操作符定义的变量会成为他的函数的局部变量在函数内定义变量时省略var操作符，可以创建一个全局变量（一般不用）在局部定义域中定义全局变量很难维护，会造成困惑，在严格模式下会抛出ReferenceError可以在一条语句中用逗号分隔多个变量var变量提升使用关键字声明的变量会自动提升到函数作用域的顶部，反复提升多个变量也没有问题function foo(){ console.log(age); var age = 10;}foo();

2021-06-06 02:00:52 100

原创字符串的扩展

字符串的扩展字符的Unicode表示法ES6 加强了对 Unicode 的支持，允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的 Unicode 码点，但是，这种表示法只限于码点在\u0000~\uFFFF之间的字符。超出这个范围的字符，必须用两个双字节的形式表示"\uD842\uDFB7"// "????""\u20BB7"// " 7",超出会按\u20BB+7处理改进：只要将码点放入大括号，就能正确解读该字符"\u{20BB7}"// "????"字

2021-06-06 01:58:38 44

原创变量的解构赋值

变量的解构赋值数组的解构赋值从数组中提取值，按照对应位置，对变量赋值let [a, b, c] = [1, 2, 3];本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子let [foo, [[bar], baz]] = [1, [[2], 3]];foo // 1bar // 2baz // 3let [ , , third] = ["foo", "bar", "baz"];third // "ba

2021-06-05 03:29:05 478

weixin_50429510的博客