LsWorld

Vercel的基本介绍要是用过hexo来搭建的博客的话，在hexo的官方文档中就有介绍过如何将博客的静态页面搭建到Vercel平台中。但Vercel不仅能搭建静态的页面，也可以将自己github账号中的项目所作的页面进行一个展示，可以省去自己使用服务器搭建的费用。这里只对Vercel基础搭建做一个介绍，想了解更多可以查看官方文档Introduction to Vercel – Vercel Docs 注册Vercel进入到Vercel登录页面，这里直接连接你的github账号。 因为我早已经连接过了，其他的步骤就无法演示了。根据提示一步步下去到最后出现下面这个页面就成功了。 搭建使用vue3+vite所建立的的项目在node.js环境下使用npm init vite@latest来创建一个vite项目 这里接下来会有让你选择项目名与框架。如上图可知我目前创建的项目名是vite-project使用的框架为vue，并且使用ts语法。 在项目的根目录中使用npm install命令导入了vite所需要的包。接下来就是启动项目看看项目页面如何。 vite默认开启了端口...

数组Array是大家日常开发中使用的比较多的数据类型，这里就不进行过多赘述了，本文主要介绍一些数组常用的方法与操作，以供在写算法或在开发中更好的解决问题。（这里只做了一些我平常用到较多的方法，更多的方法参考MDN Web Docs (mozilla.org)官方文档） 数组的常见操作创建数组//使用new Array()创建数组 let arr = new Array(1,2,3) console.log(arr) //[1, 2, 3] //使用字面量来创建数组 let arr = [1,2,3] console.log(arr) //[1, 2, 3] 访问数组元素let arr = [1,2,3] console.log(arr[0]) // 1 console.log(arr[3]) // undefined JavaScript中访问一个不存在的元素不会报错，会返回undefined 遍历数组//使用for循环遍历数组 let arr = [1,2,3] for(let i = 0; i <arr.length; i++){ c...

在项目实际开发中，有时候需要对数据进行限制或模糊匹配的时候，正则可以很好的解决这些问题。 正则表达式的基础使用正则表达式的语法：/表达式/ 在javascript中，创建正则表达式的方式有两种，一是用字面量的方式创建，即let 变量名 = /表达式/，另一种是通过RegExp()构造函数的方式创建。 在检测字符串是否符合正则编写规范时，可以使用test()来检测。 let str = '123' let reg1 = /123/ let reg2 = RegExp(/123/) console.log(reg1.test(str)) //true console.log(reg2.test(str)) //true 模式修饰符模式修饰符是在正则基础表达式后面加上后缀，从而实现一些功能。 模式符 说明 g 用于在目标字符串中实现全局匹配 i 忽略大小写 m 实现多行匹配 u 以Unicode编码执行正则表达式 y 黏性匹配，仅匹配目标字符串中此正则表达式的lastIndex属性指示的索引 模式符可以根据需求多个混合使用 let str = 'a...

TypeScript的安装因为TypeScript只是相当于JavaScript的拓展，JavaScript所有语法并对其进行一些语法的增加，安装可以通过Node.js的npm包控制管理进行安装。使用npm i -g typescript进行全局安装。 浏览器目前默认识别不了ts文件，需要通过tsc xxx.ts来进行将ts转变为js，使用tsc xxx.ts -w会自动监听ts文件的变更。 TypeScript配置在根目录创建tsconfig.json对ts进行配置，在命令行中使用tsc或tsc -w来运行配置文件 //tsconfig.json文件 { //"compilerOptions"编译器的选项 "compilerOptions": { //"target"用来指定ts编译为js的版本 "target": "ES6", //"module"指定要使用的模块化的规范 "module": "ES6", //"strict"所有严格检查开...

常用Composition APIsetup组件中所需要用到的数据方法等，均要配置在setup中，setup值为一个函数 有两种返回值： 若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用 若返回时一个渲染函数：则可以自定义渲染内容 setup函数会接收到两个参数，第一个为props为组件数据传递，第二个为context上下文 setup不能使用async，但如果父组件中使用Suspense来修饰子组件并用动态引入则可以返回Promise setup会在beforeCreate之前执行一次，this是undefined ref函数原先vue2中的ref写在标签内部作为一个标识一样的存在 使用需要import {ref} from 'vue'引入 数据经过ref加工变成Reflmpl{}进行包装实现响应式 ref函数内部如果为对象等引用数据类型则会额外使用reactive函数 reactive函数用于定义一个对象类型的响应式数据，通过proxy来实现响应式，并通过reflect操作源对象内部的数据调用数据可以不加...

Webpack就是将浏览器识别不了的文件转换为浏览器能识别的文件 webpack4的安装（以下全以webpack4版本进行，之后再用webpack5进行比较）在安装webpack前要确保电脑已经安装了node.js npm i webpack@4 -D -g是全局安装开发者模式的webpack其中-g代表全局安装-D代表开发者模式 npm i webpack-cli@3 -D -g是全局安装开发者模式的webpack-cli其中-g代表全局安装-D代表开发者模式 其他的安装与上同理 如果想局部安装就去掉-g即可。 全局运行webpack可以直接在命令行输入webpack就可进行打包 没有全局安装，但局部安装了。局部运行webpack需要在命令行输入npx webpack才能进行打包 webpack的配置文件webpack.config.js为webpack的配置文件，当运行webpack会加载里面的配置 //webpack.config.js 模块化默认采用采用commonjs //resolve用来拼接绝对路径的方法 const { resolve } ...

mustache模板引擎模板引擎是将数据变为视图的最优雅解决方案，用{{}}来进行表示 mustache官方git: janl/mustache.js: Minimal templating with in JavaScript (github.com) 使用正则表达式来实现简单的模板替换var templateStr = '<h1>标题{{title}},内容{{content}}</h1>' var data = { title: '模板', content: '了解' } // 正则中用\进行转义 \w搜索字母 /g表示全局搜索 //replace方法接收到参数 var replaceStr = templateStr.replace(/\{\{(\w+)\}\}/g,function(findStr,$1){ console.log(f...

javascript的数据类型： 使用typeof来判断数据类型console.log(typeof '字符串')//输出 string console.log(typeof 123)//输出 number console.log(typeof true)//输出 boolean console.log(typeof null)//输出 object null输出object是历史遗留问题 let a console.log(typeof a)//输出 undefined const s = Symbol(1) console.log(typeof s)//输出 symbol const bigInt = 132n console.log(typeof bigInt)//输出 bigint const fn = function(){ console.log('函数') } console.log(typeof fn)//输出 function const arr = [] console.log(typeof arr)//输出 objec...

注意：具体内容可以去参考ECMA官方文档，这里只是对某些语法进行总结与参考 ES6语法变量声明let不能重复声明var可以重复声明 let用来声明变量const用来声明常量const声明后不可以重新赋值，let可以重新赋值。const一定要赋初始值。 cs6后新增了块级作用域，使用let和const声明只在代码块中生效 let和const不存在变量提升，用var声明变量会参与预加载 而且不影响作用域链 { let example = '例子' function fn(){ console.log(example) } fn() //最终输出'例子' } 解构赋值ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值，这称为解构赋值 //数组解构 const example = ['例子1','例子2','例子3'] let ['example1','example2','example3'] = example //对象解构 const exampleObj = { ...

6.1客户/服务器方式（C/S方式）和对等方式（P2P方式）​ 开发一种新的网络应用首先要考虑的问题就是网络应用程序再各种端系统上的组织方式和它们之间的关系 客户/服务器方式​ 客户和服务器是指通信中所设计的两个应用进程​ 客户/服务器方式所描述的是进程之间服务和被服务的关系​ 客户是服务请求方，服务器是服务提供方​ 服务器总是处于运行状态，并等待客户的服务请求。服务器具有固定端口号（例如HTTP服务器的默认端口号80），而运行服务器的主机也具有固定的IP地址​ 基于C/S方式的应用服务通常是服务集中型的，常会出现服务器计算跟不上众多客户机请求的情况 对等方式​ 没有固定的服务请求者和服务提供者，分布再网络边缘各端系统中的应用进程是对等的，被称为对等方。对等相互之间直接通信​ 目前，再因特网上流行的P2P应用主要包括P2P文件共享、即时通讯、P2P流媒体、分布式存储等​ P2P的应用是服务分散型​ P2P方式最突出的特性之一就是它的可扩展性，系统性能不会因规模的增大而降低​ P2P方式具有成...

总线的基本概念一、为什么要用总线分散连接存在的问题： ​ 1.内部的连线复杂 ​ 2.新增IO设备困难 二、什么是总线​ 总线是连接各个部件的信息传输线，是各个部件共享的传输介质 三、总线上信息的传送​ 串行：所谓的串行就是将要传输的信息一位一位的放在总线上，接收方一位一位的进行接收，支持距离长 ​ 并行：需要多条数据线进行传输，数据能同步进行传输，如果传输距离长，线与线之间并行传输，传输信号可能会发生变形，接收方很难接收到正确信号 四、总线结构 ​ 1.单总线结构 ​ 所有数据在同一条总线上传输，会发生总线争用问题 ​ 2.面向CPU双总线结构 ​ 向CPU延生出两条总线，IO总线和M总线，M总线连接主存。 ​ 存在问题：一旦IO总线和M总线同时向CPU发送数据，CPU的计算任务还是会被打断。 ​ 3.以存储器为中心的双总线结构 ​ 从贮存延生两条总线，一条连接系统总线（包括IO设备接口和CPU），一条存储总线连接CPU。 3.2总线的分类1.片内总线（芯片内部的总线）2.系统总线（计算机各部件之间的信息）1.数据总线​ 双向与机器字长、存储字长有关。通常情况下...

5.1运输层概述​ 如何为运行在不同主机上的应用进程提供直接的通信服务使运输层的任务​ 它使应用进程看见的就好像是在两个运输层实体之间有一条端到端的逻辑通信信道​ 因特网的运输层位应用层提供了两种不同的运输协议，即面向连接的TCP和无连接的UDP 5.2运输层端口号、复用与分用的概念​ 运行在计算机上的进程使用进程标识符PID来标志​ 因特网上不同操作系统又使用不同格式的进程标识符 TCP/IP体系的运输层使用端口号来区分应用层的不同应用进程端口号使用16比特表示，取值范围0~65535​ 熟知端口号：01023，IANA把这些端口号派给了TCP/IP体系中最重要的一些应用协议​ 登记端口号：102449151，为没有熟知端口号的应用程序使用​ 短暂端口号：49152~65535，留给客户进程选择暂时使用 端口号只具有本地意义，不同计算机中的相同端口号使没有联系的 5.3UDP和TCP的对比用户数据报协议UDP​ 无连接的UDP​ UDP支持单播、多播以及广播​ UDP使面向应用报文​ 提供不可靠传输，不使用流量控制和拥塞控制​ 首部开...