m0_52942098的博客

原创 VSCode插件开发之contributes和命令

之前说到 package.json 中，activationEvents、main 以及 contributes 是文件中非常重要的部分。contributes 是在 package.json 中的一组 JSON 声明，是 package.json 中重要的内容，有很多重要的配置项，下面罗列一些比较常见的配置项。

原创 VSCode插件开发概述

vscode是微软推出的一款轻量级代码编辑器，在使用的时候总会需要安装一些插件去协助我们进行开发，这些插件就是利用 vscode 开放的一些 API 的基础上进行扩展功能的开发，从而解决开发中的一些问题，提高生产效率。

原创 webpack简介及入门

webpack简介及入门

原创 vue2与vue3的区别

vue2与vue3区别

原创 js实现二叉树遍历

js实现二叉树遍历

原创 Vuex概述及核心概念

Vue概述及核心概念

原创 Vue组件传值及插槽

Vue组件传值及插槽

原创 Vue事件处理及表单输入绑定

Vue事件处理及表单绑定

原创 Vue条件渲染及列表渲染

Vue条件渲染及列表渲染

原创 Vue的基本特性

Vue的基本特性：data、computed、methods

原创 Vue计算属性及样式绑定

vue学习（二）

原创 JavaScript实现堆

目录优先级队列堆思路实现优先级队列其实就是一个披着队列外衣的堆，优先级队列对外接口只是从队头取元素，从队尾添加元素，再无其他取元素的方式，看起来就像一个队列。在优先队列中，每个元素都拥有一个优先级属性，优先级高的排在前面，优先级低的排在后面，同样优先级高的元素可以享受优先出队。优先级队列内部元素是自动根据元素的权值排序，在逻辑上可以看作一个堆，可以用数组实现。实现一个优先队列有很多种不同的方式，比如有序链表就可以作为优先队列，入队时将元素插入合适位置，出队删除链表头并返回但是堆这种实现方式更契

原创 var、let、const之间的区别

目录变量varvar声明作用域变量提升let暂时性死区块级作用域for循环中的let声明const区别总结变量ECMAScript变量是松散类型的，也就是说变量可以用于保存任何类型的数据，每个变量只不过是一个用于保存任意值的命名占位符。有三个关键字可以声明变量：var let const，var在ECMAScript的所有版本中都可以使用，let和const只能在ECMAScript6及更晚的版本中使用。varvar message;这段代码声明了一个名为message的变量，可以用来保存任何

原创 ES6的新特性

原创 Vue简介及基本指令

目录Vue概述vue简介vue的特点MVVM模式Vue指令渲染数据Vue的指令自定义指令Vue概述vue简介Vue.js可以说是MVVM 架构的最佳实践，是一个JavaScript MVVM库，是一套构建用户界面的渐进式框架。专注于 MVVM 中的 ViewModel，不仅做到了数据双向绑定，而且也是一款相对比较轻量级的JS 库，API 简洁。vue的特点数据驱动视图：数据的变化会驱动视图自动更新，数据驱动视图是单向的数据绑定。双向数据绑定：数据的变化会被自动渲染到页面上，页面上采集的数据发

原创 JavaScript实现快速排序

目录快速排序快速排序快速排序：快速排序几乎可以说是目前所有排序算法中最快的一种，可以看作是冒泡排序的升级版，它的思想是分而治之。当然，没有任何一种算法是在任意情况下都是最优的，比如希尔排序在某些情况下可能优于快速排序，但是大多数情况下，快速排序还是比较好的选择基本思想：图例：图例实现：输出结果：...

原创 JavaScript实现插入排序和希尔排序

插入排序标题

原创 Node的数据库编程

目录Node的数据库编程建立连接终止与MySQL的连接：执行数据库的操作(CRUD)Node的数据库编程Node的MySQL驱动：mysql2是node的原生mysql驱动的升级版。安装库：npm install mysql2。建立连接显式连接：导入mysql2模块//引入模块const mysql = require('mysql2')调用createConnection方法创建数据库的连接对象//创建数据库连接对象const connection = mysql.crea

原创 Ajax概述及XMLHttpRequest对象的常见属性方法

目录Ajax概述Ajax优点Ajax缺点Ajax核心XMLHttpRequest对象的方法XMLHttpRequest对象的属性HTTP概述请求报文响应报文Ajax概述Ajax：Asynchronous JavaScript And XML，异步JavaScript和XML技术。不是一门新的语言或技术，是由JavaScript、XML、DOM、CSS等多种已有技术组合而成的一种浏览器端技术。它是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验。通过AJAX可以在浏览器向

原创 Node访问服务器端静态资源

目录通过Node访问服务器端静态资源res的常用属性req的常用属性通过Node访问服务器端静态资源通过Node的http模块访问服务器端的静态资源(css文件、图像、html文件)。获取客户端请求的url地址//获取用户请求路径console.log(req.url)找到url对应的资源文件，利用fs模块读取文件的内容将文件内容发送给客户端if(req.url === '/index' || req.url ==='/') { //读到的就是Buffer型数据 f

原创 Node网络编程

目录网络编程Node实现TCP协议TCP协议Net模块提供的APInet.Server类net.Socket类Node实现UDP协议Node实现HTTP协议网络编程Node实现TCP协议TCP协议TCP协议：传输控制协议，提供面向连接的、可靠的数据传输服务（三次握手四次挥手）。面向连接：数据传输之前，客户端与服务器端要建立连接可靠的：数据传输是有序的、要对数据进行校验Scoket：网络套接字，是一套用于不同主机间通信的API，它工作在TCP/IP协议栈之上，是进行网络连接的数据结构。服

原创 Node数据流

目录数据流文件输入输出流管道流链式流模块和包url模块数据流数据流（stream）是处理系统缓存的一种方式。操作系统采用数据块（chunk）的方式读取数据，每收到一次数据，就存入缓存。Node有两种缓存的处理方式：等到所有数据接收完毕，一次性从缓存读取。这种方式先将数据全部读入内存，然后处理。优点是符合直觉，流程非常自然，缺点是如果遇到大文件，要花很长时间，才能进入数据处理的步骤。“数据流”方式，收到一块数据，就读取一块，即在数据还没有接收完成时，就开始处理它。这种方式每次只读入数据的一小块，

原创 Node的文件系统及Buffer概述

目录node.js开发网站Node的文件系统文件与目录的基本操作写入文件操作读文件操作Node事件处理机制Node的全局对象Buffernode.js开发网站node.js本身就是一个http服务器，不需要web容器。node.js需要我们自己写代码处理请求。Node的文件系统fs模块：提供了文件操作的API。fs模块共有5个类：fs.Dirent类：指示文件的类型fs.FSWatcher类：监视文件的状态fs.ReadStream类：读取流(文件输入流)fs.WriteStream

原创 Node.js概述及编程基础

目录Node.js概述什么是Node.jsNode的特点Node.js概述什么是Node.jsNode.js简称Node，是一个可以使JavaScript运行在服务器端的平台，是JavaScript的运行时环境，Node.js可以解析和执行JavaScript代码。JavaScript本是一种Web前端语言，Node.js让JavaScript成为服务器端脚本语言，现在的JavaScript可以完全脱离浏览器来运行。Node.js将V8引擎封装起来，作为服务器运行平台，以执行JavaScript编

原创 Redux概述

目录Redux概述Redux三大核心Redux组成State状态Action事件ReducerStore流程React-reduxProviderconnect流程Redux概述Redux是一个用于JavaScript状态容器，提供可预测化的状态管理。Redux可以构建一致化的应用，运行于不同的环境并且易于测试。Redux三大核心单一数据源整个应用的state被存储在一个object tree中，并且这个object tree只存在于唯一一个store中。State是只读的唯一改变

原创 React路由

目录React路由概述路由的基本使用基本使用常用组件路由的执行过程编程式导航默认路由匹配模式模糊匹配精确匹配React路由概述现在的前端应用大多都是SPA（单页应用程序），也就是只有一个HTML页面的应用程序，因为它的用户体验更好，对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面）。前端路由是一套映射规则，在React中，是URL路径和组件的对应关系。使用React路由来说，就是配置路径

原创 React事件处理

目录React事件处理事件绑定事件对象事件绑定this指向箭头函数bind()绑定class的实例方法事件处理中的参数传递React事件处理事件绑定React事件绑定语法与DOM事件语法相似。语法：on+事件名称={事件处理程序}，比如onClick={()=> {}}。React事件采用驼峰命名法。小驼峰命名：第一个单词小写，后面的单词首字母大写，事件名后不能带()，带上会直接执行class App extends React.Component { handle() {

原创 React Hooks

目录类组件与函数组件React Hooks中常用的钩子函数useState()useContext()useReducer()useEffect()类组件与函数组件React创建组件的方式有类组件和函数组件。函数组件：纯函数组件没有状态纯函数组件没有生命周期纯函数组件没有this类组件功能齐全，但是代码很重，组件不够轻便。若使用函数组件，又没有状态管理。于是React团队设计了React Hooks，它的本质是增强的函数组件，即在函数组件中实现状态管理。React Hooks中常用的钩子

原创 React组件的生命周期

目录React组件的生命周期创建时（挂载阶段）更新时（更新阶段）卸载时（卸载阶段）不常用的钩子函数React组件的生命周期意义：组件的生命周期有助于理解组件的运行方式，完成更复杂的组件功能、分析组件错误原因等。组件的生命周期：组件从被创建到挂载到页面中运行，再到组件不用时卸载的过程。生命周期的每个阶段总是伴随着一些方法的调用，这些方法就是生命周期的钩子函数。钩子函数的作用：为开发人员在不同阶段操作组件提供了时机。只有类组件才有生命周期。创建时（挂载阶段）执行时机：组件创建时（页面加载时）。

原创 React的三大属性

目录React的三大属性props属性组件通讯父传子子传父兄弟组件通讯Contextchildren属性props校验props的默认值state属性refs属性React的三大属性props属性组件是封闭的，默认情况下，只能使用组件自己的数据，要接收外部数据应该通过props来实现。props的作用：接收传递给组件的数据。传递数据：给组件标签添加属性。接收数据：函数组件通过参数props接收数据，类组件通过this.props接收数据。特点：可以给组件传递任意类型的数据props是只读

原创 React概述、JSX语法及React组件

目录React概述React的开发过程React的虚拟DOMJSX简介React概述React是一个用于构建用户界面的JavaScript库，用来简化可视化界面的开发。React主要用来写HTML页面，或构建Web应用。它是基于JSX(JavaScript Xml)语法，可以和html、js混合书写。核心是组件，可以实现用户界面的模块化开发，代码的复用率高、可维护性好。React的开发过程导入js文件<script src="../js/react.development.js"&

原创 JavaScript实现栈与队列的操作

目录栈队列栈ES5写法function Stack() { //用数组模拟栈 var stack = []; //入栈 this.push = function (element) { stack.push(element); } //出栈 this.pop = function () { stack.pop(); } //查看栈顶元素 this.peek = function (

原创 SQL概述及简单查询语句

目录SQL概述语法要求SQL分类DDLSQL概述SQL（Structured Query Language）是结构化查询语言，它是对关系型数据库的操作语言。它可以应用到所有关系型数据库中，例如：MySQL、Oracle、SQL Server等。虽然SQL可以用在所有关系型数据库中，但很多数据库还都有标准之后的一些语法，我们可以称之为方言。例如MySQL中的LIMIT语句就是MySQL独有的方言，其它数据库都不支持。语法要求SQL语句可以单行或多行书写，以分号结尾可以用空格和缩进来来增强语

原创 数据库基本理论

目录数据库数据库管理系统（DBMS）数据库系统的组成（DBS）数据库系统的特点数据库系统的体系结构概念模型常用的数据模型关系模型中的基本术语关系的性质关系数据库中的表之间的关系关系模型的完整性约束关系代数数据库数据库(Database，DB)是长期存储在计算机内的、有组织的、可共享的、统一管理的相关数据的集合。按照字面的理解，数据库就是存放数据的仓库。数据库管理系统（DBMS）DBMS是语言编译处理程序、系统运行控制程序、系统建立、维护程序、数据字典组成的。DBMS的功能：数据库定义功能数据

原创 Bootstrap概述、使用及栅格系统

目录Bootstrap概述什么是BootstrapBootstrap特点Bootstrap的组成Bootstrap概述什么是BootstrapBootstrap是一个基于HTML、CSS和JavaScript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件。Bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。Bootstrap特点移动设备优先，自 Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式浏览器支持，所有的主流

原创 HTML新增API使用及移动端Web页面的布局方式

目录HTML新增API的使用检测网络连接的事件（注意浏览器的兼容性）控制页面元素的全屏显示(注意浏览器的兼容性)文件读取FileReader的使用方法地理定位：Geolocation接口移动端Web页面的布局方式弹性盒布局HTML新增API的使用检测网络连接的事件（注意浏览器的兼容性）‘online’：网络已连接‘offline’：网络已断开控制页面元素的全屏显示(注意浏览器的兼容性)webkitRequestFullScreen()方法:谷歌浏览器打开全屏显示webkitCancelF

原创 移动Web开发基础

目录Bootstrap概述什么是BootstrapBootstrap特点Bootstrap的组成Bootstrap概述什么是BootstrapBootstrap是一个基于HTML、CSS和JavaScript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件。Bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。Bootstrap特点移动设备优先，自 Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式浏览器支持，所有的主流

原创 jQuery的操作及事件处理

jQuery的操作操作元素的属性获取元素的属性值$(selector).attr('属性名')设置元素的属性值以对象的方式设置属性值：$(selector).attr({'属性名':'属性值'}) 以key-value的方式设置属性值：$(selector).attr('属性名','属性值') 以回调函数的方式设置属性值$(selector).attr('属性名',function(){ return '值'})删除元素的属性$(selector)

原创 jQuery概述及其选择器

目录jQuery的概述jQuery的使用方式jQuery的选择器基本选择器基本过滤选择器属性过滤选择器jQuery的概述jQuery：是JavaScript的一个函数库，是一个轻量级的“写的少，做的多”的JavaScript库。它对JavaScript的相关操作进行了封装，例如遍历HTML文档、操作DOM、事件处理、Ajax。jQuery的使用方式引入jQuery库<script src="jquery.js"> </script><script src="

原创 JavaScript属性及正则表达式

目录offset、client、scroll属性offsetclientscroll正则表达式offset、client、scroll属性offsetoffset：偏移量，利用offset可以动态的获取元素在页面中的位置信息、大小信息。offsetLeft：返回元素相对其带有定位的父元素左边框的偏移offsetTop：返回元素相对其带有定位的元素上方的偏移offsetWidth：返回自身的宽度（包括padding、边框和内容区域的宽度），注意返回数值不带单位offsetHeight：返回自身