- 博客(39)
- 收藏
- 关注
RSS订阅原创 js执行机制 和 事件循环（event loop）
javaScript是一门单线程语言，它的异步和多线程的实现是通过event loop(事件循环)来实现的。javaScript Event Loop大体有三部分组成：调用栈 call stack 消息队列 message queue 和 微任务队列 Microtask queue。Event Loop 刚开始时，会从全局栈的代码开始一行一行执行，遇到函数调用就把函数压入栈中（调用栈），被压入的函数叫做帧frame， 当函数返回（函数return 或者 执行完毕）后会从调用栈中弹出。javaSc
2022-04-11 09:34:53
456
原创 数组 的常见操作
ES6新增的数组的操作方式：includes() :判断数组中是否含有某个成员判断机理：基本尊徐严格相等（===），但是对于应NaN的判断与===不同，includes方法认为NaN===NaN基本用法：数组.includes()
2022-03-16 22:33:19
1158
原创 前端面试题
前端面试题 —— HTML如何理解 HTML 语义化 让人更容易读懂（增加代码的可读性） 让搜索引擎更容易读懂（SEO） 块状元素有哪些？ 内联元素有哪些块状元素的特点：display: block/table;有 div h1 h2 table ul ol p 等；内联元素的特点：display: inline/inline-block;有 span img input button 等；前端面试题 —— CSSCSS - 布局（1）盒模型宽度的计算
2022-02-17 15:03:08
242
原创 回顾Restful API
一种新的API设计方式（其实早已推广使用）传统API设计：把每个url当做一个功能Restful API设计：把每个url当做一个唯一的资源不用url参数，举例：传统API设计：/api/list?pageIndex=2 用参数去局限返回的页面Restful API设计：/api/list/2...
2022-01-17 19:54:39
254
原创 留言板项目开发
一、需求分析需求分析很重要：原型图：功能描述：二、数据库设计mongodb创建数据库和集合：回顾mongoose:mongoose定义Schema和Model:三、接口（路由）设计分析需要哪些接口：哪些接口需要登录验证：登录如何实现（跨域传递cookie）:四、初始化环境开发初始化koa2环境：规范目录和层级：连接数据库：五、项目开发前端代码介绍：跨域和跨域传递cookie：接口开发和前后端联调：六、项目总结
2022-01-03 12:29:40
968
原创 登录实现方案与实践
一、cookie和登录校验1）cookie是什么存储在浏览器的一段字符串，最大5kb；每个域都可有一个cookie，跨域不共享；格式如: k1=v1;k2=v2...（可结构化）；cookie会随着http请求传递给服务端：每次http请求，cookie都会随着传递到服务端；（cookie中会携带用户敏感信息，不要把自己的cookie公开让大家看到）服务端可修改cookie再返回给前端；默认，跨域不可传递cookie2）服务端操作cookie// 服务端操作co
2021-12-24 14:11:44
2725
原创 mongoose
为什么要使用mongoose:mongodb数据格式过于灵活（不够规范），可以插入任何数据，不受限制；实际项目开发时，要有数据格式的规范（重要），特别是多人协作开发时。而mongoose可以提供规范：Schema定义数据格式的规范；以Model规范Collection;规范数据操作的API.使用npm安装mongoose：npm imongoose...
2021-12-22 12:45:40
255
原创 mongodb中的一些概念
启动数据库服务：mongodb中的一些概念数据库database：mongodb可以成为数据库系统（服务）；一个数据库系统，允许对接很多服务；每个数据库，就对接一个数据库集合 collection:数据库是一个服务（业务）的数据容器；一个服务（业务）的数据，要分类管理；如留言板系统，有留言数据，有用户数据文档document:集合collection也是数据容器；文档document 是单条数据，如一条留言，一个用户；可以被增删改查bson:.
2021-12-20 12:13:00
395
原创 koa2框架
框架frame：1.框架的作用：封装原生代码的API；规范流程和格式；让开发人员更加关注与业务代码，提高开发效率。2.框架frame和lib库的区别：框架是唯一的，库可以共存；框架关注全流程，库关注单个功能。koa2koa2是nodejs web server 框架；官网和文档：Koa (koajs) -- 基于 Node.js 平台的下一代 web 开发框架 | Koajs 中文文档通过async/await语法高效编写web server；koa2的中间件机制，能合理.
2021-12-16 00:38:59
4288
原创 Node.js处理HTTP
req和res1.nodejs如何监听http请求:nodejs启动Web服务：使用http模块启动服务，通过本机的IP（127.0.0.1）或本机的域名（localhost）访问服务。// 获取http模块const http = require("http");// 创建一个服务器const server = http.createServer(()=>{ // 接收到请求后 console.log("已经收到了http请求")})// 监听端口ser.
2021-12-09 18:14:53
570
原创 Node.js基础入门
1.node.js是什么：node.js是一个基于Chrme V8 引擎的js运行时。2.使用node.js的好处：node.js使得js语言能做更多的事情，而不仅仅是网页。npm1.npm是什么：npm 是 node package manager,即nodejs软件包管理者。npm的官网https://www.npmjs.com有几百万的软件包，开源免费。3.lodash是一个一致性、模块化、高性能的JS实用工具库。为什么选择Lodash：lodash通过降低arry,
2021-12-08 12:24:03
400
原创 vue.js/devtolls插件下载
下载vue.js/devtools插件时遇到的问题：猜测可能是vue-devtools版本问题导致的，目前vue-devtools需要使用beta版本的，这个才是vue3.x用的，可以参考如下步骤重新安装一下工具（与网络问题有关，访问可能会比较慢，同学可以耐心等待或者多试几次）1、在官网https://github.com/vuejs/vue-devtools，下载vuejs_devtools_beta-6.0.0.7-an+fx.xpi文件，安装谷歌版的（1）进入官网，找到右侧圈起来的地方，点击.
2021-11-02 12:47:02
8528
1
原创 vue基础入门下
一、mixin混入的基础语法定义mixin：全局mixin的定义方法和全局组件类似，局部mixin的定义方法和定义局部组件类似： // 定义局部mixin const myMixin = { data() { return { count:222, }},}const app = Vue.createApp({ // 在
2021-10-15 11:07:59
106
原创 Vue怎么做动画和过渡效果？
1.通过添加或删除 类名/行内样式 来实现css做动画或过渡效果: <style> @keyframes leftToRight{ from{ transform: translateX(-100px); } to{ transform: translateX(0px); } } .a
2021-10-11 23:30:18
447
原创 Vue组件
组件的定义与使用组件具备复用性组件名使用横线连接的小写命名方式。全局组件：全局组件，只要定义了，处处可以使用，性能不高，但是使用起来简单。名字建议小写字母单词，中间用横线连接。定义全局组件： //声明一个全局组件（使用app.component声明全局组件） app.component('hello-word',{ data() { return { cou
2021-10-07 20:31:58
172
原创 自己总结前端面试题
sass常见面试题1.什么是sass?Sass是css的预处理器，它能用来清晰地、结构化地描述文件样式，有着比普通css更强大的功能。Sass能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表，有助于更好地组织管理样式文件，以及更高效地开发项目。2.列出Sass的一些功能？一个开源的预处理器，被解析为css。完全兼容css3。在css基础上增加变量、嵌套、混合等功能。在更少的时间内轻松地编写css代码。自定义输出格式。3.解释Scss和Sass之间的
2021-10-04 16:16:09
536
原创 小程序开发
项目目标：1.移动端屏幕适配；2.模块化和组件化；3.在项目中使用Ajax获取服务器端数据；4.复习ES6技术选型：开发语言：ES6;获取数据：Ajax;打包工具：Webpack;模板引擎：art-template;触摸滑动库：Swiper准备工作：1.创建项目目录结构...
2021-10-04 13:34:38
65
原创 Swiper
Swiper是什么：swiper是开源、免费、强大的触摸滑动插件。在移动端和PC端。swiper可以做什么：实现移动端和PC端的大部分滑动功能。如幻灯片、Tab选项卡、页面滑动切换Swiper使用方法：参考官网的使用教程Swiper使用方法 - Swiper中文网版本升级怎么办：一切以官网为准，同样参考官网的教程。各种版本下载地址：https://github.com/nolimits4web/swiperSwiper的常用API1.swiper初始化：用于初始化一个Swipe.
2021-09-26 13:04:53
2630
原创 移动端Web开发性能优化
什么是性能：性能指的是页面的响应速度，页面的响应速度具体指的是：1.打开页面到实际能够正常使用的时间：网络请求的时间、页面加载和渲染的时间2.与页面进行交互的流畅程度：JavaScript脚本的执行速度注意点：要更快地加载页面首屏内容，无需考虑整张页面。（首屏内容指的是打开网站可以看到的内容，不包含下滑滚动条才能看到的内容）为什么需要优化移动端的性能：提升用户体验；与PC端相比，移动端网络速度较慢；与PC端相比，移动端的设备性能较低各阶段的性能优化点1.网络请求过程中的优化点
2021-09-24 16:29:22
393
原创 移动端事件
grid项目的属性：grid-column-start和grid-column-end、grid-row-start和grid-row-end:项目网格的开始和结束；取值：1.number型，是网格线的序号，*项目可以重叠，使用z-index决定谁在上面2.name,通过名字来引用一个命名的网格线3.span number :该网格项将跨越所提供的网格数量grid-row/grid-column分别是grid-row-start和grid-row-end/grid-column-s
2021-09-18 23:28:44
408
原创 rem和vw布局
1.rem布局的原理我们使用rem布局主要是为了实现容器的宽高可以等比例放大或缩小。我们用rem作为容器宽和高的单位，rem是相对单位，1rem=html字体的大小，所以我们只需要在屏幕发生变化时，修改html的字体大小就能实现等比缩放的效果。那么当前视口宽所对应的html的字体应该是多大呢？当前视口html字体 =（设计图的视口宽/设计图html的字体大小） *当前视口宽...
2021-09-11 00:35:21
1131
原创 移动Web开发入门
1.移动Web与PC Web开发的关系基本知识体系没有太大的区别：HTML、CSS、JavaScript；不同的终端设备具有不同的特性：屏幕大小不同、网络环境和设备性能不同、交互方式不同、兼容性不同
2021-09-07 15:47:46
117
原创 Flex布局
Flex弹性布局（工具）1）Flex布局基础知识什么是Flex布局Flex是Flexible Box的缩写，意为‘弹性的盒子’，所以Flex布局一般也叫做“Flex 弹性布局，它的典型案例是圣杯布局。任何一个HTML元素都可以指定为Flex布局：display:flex或 inline-flex;display:flex表示Flex容器是块级元素，display:inline-flex表示flex容器是内联块元素什么是Flex容器（flex container）采用Flex布局.
2021-09-07 15:40:15
174
原创 本地存储(cookie/localStorage)
cookie一、初识cookie1.cookie是什么：cookie全程HTTP Cookie,是浏览器存储数据的一种方式。因为存储在用户本地，而不是存储在服务器上，所以是本地存储一般会自动的随着浏览器每次请求发送到服务器端。2.cookie有什么用利用cookie跟踪统计用户访问网站的习惯，比如什么时间访问，访问了哪些页面，在每个页面的停留时间等。网页语言切换（代码后期放）*不要使用cookie保存密码等敏感信息3.cookie的基本用法写入cookie：duc
2021-08-21 01:37:35
2893
原创 前后端数据交互与HTTP协议
一、前后端通信的过程1.什么是前后端通信：1）前端和后端数据交互的过程举例：后端向前端发生数据——访问页面，前端向后端发送数据——用户注册2）浏览器与服务器之间数据交互的过程2.概念解释1）前端：浏览器端2）客户端：只要能和服务器通信的就叫客户端3）后端：服务器端二、前后端的通信方式1.使用浏览器访问网页（了解即可）2.一些标签：link/img/script 当浏览器解析到这些标签时就会再次向服务器发送请求；3.a标签和form标签等，浏览器解析到.
2021-08-19 23:28:36
1359
原创 webpack中处理引入的本地图片
一、处理html文件中的图片1.安装loader:npm install --save-dev [email protected].配置loader:{test:/\.(htm|html)$/,loader:'html-withing-loader'}3.安装file-loader:npm install --save-dev [email protected]该loader主要是处理html文件的图片，需要结合file-loader来处理，添加配置项，处
2021-08-18 18:38:38
463
原创 Webpack
一、认识Webpackwebpack是静态模板打包器，当webpack处理应用程序时，会将所有这些模块打包成一个或多个文件。模块：webpack可以处理js/css/图片/图标字体等单位静态：开发过程中存在于本地的js/css/图片/图标字体等文件，就是静态的动态的内容webpack没办法处理，只能处理静态的。二、Webpack初体验1.初始化项目2.安装webpack需要的包报错，原因：初始化时设置的包名与我们安装的webpack包名冲突，我们要更改初始化时的包名.
2021-08-15 20:10:02
87
原创 Babel
一、认识Babel使用Babel官网https://www.babeljs.io/提供的在线编译器;Babel是什么：Babel是javaScript的编译器，用来将ES6的代码，转换成ES6之前的代码。Babel本身可以编译ES6的大部分语法，比如let/const/箭头函数/类，但是对于ES6新增的API，比如Set、Map、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign/Array.from）都不能直接编译，需要借助其它的模块。Babel一
2021-08-15 14:39:19
551
2
原创 Module模块
Module的基本用法1.搭建服务器环境我们直接在文件中打开.html文件可以发现文件的路径使用的是file协议，并不是服务器的协议，所以我们需要先搭建服务器环境，Module才能正常运行。步骤：1）使用vscode下载插件live Server,右键，选择使用2）导出和导入导出：导出的东西可以被导入（import）,并访问到；导入：一个模块没有导出，也可以将其导入。被导入的代码都会执行一遍，也仅仅会执行一遍。如果执行是发现其导出，则接收。1.export defaul.
2021-08-14 13:21:49
172
原创 Class类的继承
一、继承的语法1.子类继承父类——语法：class子类extends父类，在子类的构造方法中调用父类的构造方法。2.同名覆盖：子类中声明的方法名和父类中的方法名相同时，子类中的方法将覆盖继承于父类的方法，采用自己的。3.super前面不能有this操作 //父类Person class Person{ constructor(name,sex){ this.name = name; ...
2021-08-13 17:20:19
6774
原创 Class类的基本使用
系列文章目录第一章：Class类的基本使用第二章：Class类的属性与方法第三章：继承第四章：注意事项和应用提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录系列文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结前言前面我们学习了用构造函数模拟类，现在我们有了类语法，所以不再使用构造函数来模拟类一、Class类的基本使用 //使用class声明一个类
2021-08-11 15:09:03
4501
原创 async/await
通过这一章的学习，我们已经了解了Promise是如何解决异步回调地狱问题的，接下来我们来 扩展一个新的知识——async和await一、什么是async/await？async/await 是基于Promise实现的。async/await 使得异步代码看起来像同步代码。以前的方法有回调函数和Promise, async/await是写异步代码的新方法。二、async/await语法async函数返回一个Promise对象，可以使用then 方法添加回调函数。当函数执行的时候，一旦遇
2021-08-11 12:56:41
917
原创 Promise图片的异步加载（练习）
我们来实现一个图片的加载；设置第一张图片加载1s之后加载第二张图片：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initia
2021-08-07 17:05:38
248
原创 Promise实现异步加载图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pr.
2021-08-07 13:52:39
455
原创 Promise构造函数的方法2
Promise.all()1.有什么用：Promise.all()关注多个Promise对象的状态变化。传入多个Promise实例，包装成新的Promise实例返回。2.Promise.all()的基本用法：const p = Promise.all([p1,p2])；p.then()接收p1、p2的return，放入一个数组中。3.Promise.all()返回的Promise的状态变化与所有传入的Promise实例对象状态有关。所有状态都变成resolved，最终的状态才
2021-08-07 01:45:51
123
原创 Promise构造函数的方法1:Promise.resolve()和Promsie.reject()
1.promise.resolve()它是成功状态的Promsie的一种简写方式。参数传递：（以下重点掌握一般参数的传递）：1）一般参数和参数为空的情况下，直接返回一个resolved状态的Promise对象；2）如果参数是Promise的实例，将不做任何修改、原封不动地返回这个实例；3）如果参数是具有then方法的对象，Promise.resolve()会将这个对象转为Promise对象，并立即执行这个对象的then方法。ps: 重视返回的Promise的状态对其后者执行的函数的影
2021-08-06 11:04:53
2954
原创 JavaScript - Promise的catch()方法，知识扩展finally方法
catch简介catch方法的作用：很多情况我们只需传promise的成功态（resolved）下调用的then方法的第一个处理函数，所以为了更好的语义化，我们使用then方法专门处理resolved态，使用catch方法专门处理rejected态。catch方法的本质：catch的本质是then方法的特例，即：then(null,err => {}); 不处理成功态，只处理失败态。catch的基本用法Promise的错误不会消失，直到被捕获为止：new Promis
2021-08-05 21:17:42
1393
原创 js之Promise 解决 回调地狱（callback hell）详解
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
2021-08-05 15:28:03
299
原创 JavaScript - ES6之Promise(then方法详解)
Promise的出现Promise是异步操作的一种解决方案，有时候我们使用回调函数异步操作时会层层嵌套，不利于我们修改需求。Promise一般用来解决层层嵌套的回调函数（回调地狱 callback hell）的问题。Promise的基本用法第一步：实例化Promise构造函数const p = new Promise((resolve,reject)=>{}) //Promise解决的不是回调函数，而是回调地狱.resolve和reject是函数，调用它们可以改变Promise的状
2021-08-05 11:17:57
8387
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人