- 博客(45)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 阿里云服务器web应用部署初窥（vue+express部署完整流程）
趁着双十一254.92搞了三年期的服务器，方便自己部署demo、访问接口，记录下部署具体步骤。1、选择服务所在位置，进入实例重置密码、重启实例。2、本地cmd 链接服务器ssh root@"ip地址" 输入密码3、安装nodeyum install -y nodejsnode -v检查安装是否成功4、安装nginxyum install nginx设置开机自启动sudo systemctl enable nginx启动nginx...
2020-11-02 14:34:52
589
原创 MyBatis笔记二
- 不同连接方式 关键词不同--> <property name="driverClass" value="com.mysql.cj.jdbc.Driver"/> <property name="jdbcUrl" value="jdbc:mysql://localhost:3306/babytun"/> <property name="user" value="root"/> <property name="password" value="gu19950402"/> <!
2023-03-16 14:01:07
354
原创 Mybatis笔记一
SSM开发框架MyBatis使用XML将SQL与程序接耦，便于维护。前言 MyBatis开发流程一、引入依赖可在pom.xml作为依赖引入 org.mybatis mybatis 3.5.1 二、环境配置1、/src/main/resource新建xxx.xml文件
2023-03-16 14:00:26
315
原创 模拟实现JS的new操作符、继承和ES6中class的实现原理
使用 new 操作符调用构造函数实际上会经历以下 4个步骤：(1) 创建一个新对象；(2) 将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象） ；(3) 执行构造函数中的代码（为这个新对象添加属性） ；(4) 返回新对象。function myNew(fn) { let obj = {} obj = Object.create(fn.prototype) let args = Array.prototype.slice.call(arguments, 1
2021-10-13 09:55:01
224
原创 webpack学习笔记
一、初识webpack1、配置文件名称webpack默认配置文件：webpack.config.js可以通过webpack --config指定配置文件module.exports = { entry: './src/index.js', // 4.0会默认制定入口位置为‘src/index.js’ output: './dist/main.js', // 4.0会默认制定入口位置为‘dist/main.js’ mode: 'production', // 环境
2021-09-24 15:39:08
776
1
原创 vue-router原理
一、核心原理1.什么是前端路由？在 Web 前端单页应用 SPA(Single Page Application)中，路由描述的是 URL 与 UI 之间的映射关系，这种映射是单向的，即 URL 变化引起 UI 更新（无需刷新页面）。2.如何实现前端路由？要实现前端路由，需要解决两个核心： 如何改变 URL 却不引起页面刷新？ 如何检测 URL 变化了？ 下面分别使用 hash 和 history 两种实现方式回答上面的两个核心问题。hash 实现（前置知识：http
2021-09-23 13:54:31
162
1
转载 实现一个简单的虚拟dom
原文地址：https://github.com/livoras/blog/issues/13一、用JS对象模拟DOM树function Element(tagName, props, children) { this.tagName = tagName this.props = props this.children = children}function createElement(tagName, props, children){ return new E
2021-09-22 16:02:09
198
原创 React 项目中引入 Husky 6.x 和 Lint-staged
一、项目初始化1.1 生成项目生成一个全新的 ts + react 的模版 可直接使用指令：npx create-react-app demo --typescript，注意在未来的版本中该指令会被替换为npx create-react-app demo --template typescript，该模版包含了全套正常运行 React 所需的包和配置，无需再额外手动安装 typescript 等，其中还包含了自动化测试文件以及PWA所需文件等，可自行根据需求增删。...
2021-08-04 11:26:17
499
转载 vue.use()分析和插件实例
在做 vue 开发的时候大家一定经常接触Vue.use()方法，官网给出的解释是:通过全局方法Vue.use()使用插件。它需要在你调用new Vue()启动应用之前完成：// 调用 `MyPlugin.install(Vue)`Vue.use(MyPlugin)new Vue({ // ...组件选项})也可以传入一个可选的选项对象：Vue.use(MyPlugin, { someOption: true })Vue.use会自动阻止多次注册相同插件，届...
2021-08-02 15:35:26
307
原创 图片懒加载&&防抖节流
为什么要懒加载对页面加载速度影响最大的就是图片，一张普通的图片可以达到几M的大小，而代码也许就只有几十KB。当页面图片很多时，页面的加载速度缓慢，几S钟内页面没有加载完成，也许会失去很多的用户。所以，对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。懒加载的原理当图片不在可视区域内时，统一设置img的src为指定图片src='default.png
2021-07-09 14:17:16
303
2
原创 前端面试问题整理，补充ing
1、问题：假设容器的高度默认100px，请写出三栏布局，其中左栏、右栏的宽度各为300px，中间的宽度自适应。延伸：五种方法的对比2、题目：谈一谈你对CSS盒模型的认识延伸：JS如何设置、获取盒模型对应的宽和高、边距重叠、BFC）3、DOM事件模型dom事件级别、事件流、委托代理、取消默认、自定义事件4、HTTP协议特点、报文、get 和 post的区别、HTTP状态码、持久连接、管线化5、原型链继承的几种方式创建对象有几种方法、原型、构造函数、实例，以.
2021-07-01 17:18:51
93
原创 vue2源码分析之响应式原理
<!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-06-18 11:15:01
369
原创 算法排序 数组的常用方法 async/await
数组拍平letarray=[1, [2], [3, [4, [5,6]]]]letflatArr=[];functionflat(arr){for(leti=0;i<arr.length;i++){Array.isArray(arr[i])...
2021-05-31 10:07:44
306
原创 一些JavaScript特性
JavaScript性能优化浅析工程化解决了什么问题1、es6+新特性兼容2、使用less/sass/postcss提高css编程性3、使用模块化方式提高项目可维护性4、上线前压缩代码资源文件、部署过程需要手动上传，重复机械式工作5、统一代码风格、保证代码质量...
2021-05-31 09:47:15
131
1
原创 JavaScript内存管理、performance
内存管理介绍：内存：由可读写单元组成，表示一片可操作哦空间。 管理：人为的去操作一片空间的申请、使用和释放。 内存管理：开发者主动申请空间、使用空间、释放空间。 管理流程：申请——使用——释放JavaScript的垃圾回收：JavaScript中内存管理是自动的，对象不再被引用时是垃圾，对象不能从根上访问到时是垃圾会被自动回收。JavaScript中的可达对象：可以访问到的对象就是可达对象（引用、作用域链），可大的标准就是从根触发是否能够被找到，JavaScript中的根就可以理解为是全局变
2021-05-31 09:41:22
269
转载 雪花效果
基础代码class Snow{ constructor(opt={}){ this.width = 0 this.height = 0 this.minWidth = 2 this.maxWidth = opt.maxWidth || 80 this.x = 0 this.y = 0
2020-12-29 16:13:42
115
原创 数据结构部分概念整理（栈、队列、链表、二叉树、图、拓扑排序、动态规划）
栈被称为一种后入先出（LIFO，last-in-first-out）的数据结构。对栈的主要操作:入栈使用 push() 方法，出 栈使用 pop() 方法。peek() 方法则只返回栈顶元素，而不删除它。function Stack() { this.dataStore = [] this.top = 0 this.push = push //入栈 this.pop = pop //出栈 this.peek = peek //返回栈顶元素}f
2020-12-22 13:59:00
444
原创 任务队列之宏任务、微任务
概念在一个事件循环中，异步事件返回结果后会被放到一个任务队列中。然而，根据这个异步事件的类型，这个事件实际上会被对应的宏任务队列或者微任务队列中去。并且在当前执行栈为空的时候，主线程会 查看微任务队列是否有事件存在。如果不存在，那么再去宏任务队列中取出一个事件并把对应的回到加入当前执行栈；如果存在，则会依次执行队列中事件对应的回调，直到微任务队列为空，然后去宏任务队列中取出最前面的一个事件，把对应的回调加入当前执行栈…如此反复，进入循环。在当前的微任务没有执行完成时，是不会执行下一个宏任务的。宏
2020-12-16 14:47:57
655
原创 express使用简介
框架搭建1、安装脚手架:npm install -g express-generator2、创建项目: express myapp 查看项目目录，可以知道启动文件www作用是提供http服务 express是一个全栈环境，所以有views、public3、安装nodemon自动重启工具、cross-env设置环境变量脚本 npm i nodemon cross-env –save-dev4、修改package.json...
2020-12-15 17:45:49
727
原创 TypeScript入门浅析
概述 解决JavaScript类型系统的问题 大大提高代码可靠程度 强类型与弱类型 类型安全 强类型： 语言层面限制函数的实参类型必须与形参类型相同 有更强的类型约束 不允许任意的隐式类型转换 弱类型： 语言层面不限制实参类型 几乎没有约束 允许任意的隐式类型转换（理解） 一、安装//安装npm i -g typescript//检查安装是否成功tsc -v // Version ****新建test.ts文件，输入代码并执
2020-12-11 17:33:03
93
原创 Jenkins安装与前端项目自动部署
几经波折，开始下载jenkins.msi安装，因为未知原因并未生成密码文件initialAdminPassword，于是换一种方式。步骤：1、https://www.jenkins.io/download/下载.war文件2、dos进入存放war的文件目录，安装启动因为jenkins的war包自带jetty服务器，所以启动成功后，直接打开浏览器操作即可。输入http://localhost:8080，点击回车，出现以下画面：3、安装过程中出现"No such plu.
2020-11-19 16:35:45
301
原创 浅析Object.prototype.toString方法
在JavaScript代码里，唯一可以访问该属性的方法就是通过 Object.prototype.toString ，通常方法如下：Object.prototype.toString.call(value)在ECMAScript 5中，Object.prototype.toString()被调用时，会进行如下步骤：1 如果 this是undefined ，返回 [object Undefined] ；2 如果 this是null ， 返回 [object Null] ；3 令 O 为以 t
2020-11-19 11:07:06
754
原创 vue2+axios接口调用实践
鉴于原生ajax调用产生的配置混乱等等一系列问题，实际项目中一般使用api更友好的axios来调用接口。一个完整的请求大概流程是1、准备请求参数 2、设置请求函数（主要是包括请求方法、请求路径、有时还需设置请求头token、请求格式等等）3、处理请求成功、失败的情况。成功更新数据，失败一定要给予用户适当提示。axios是基于promise用于浏览器和node.js的http客户端。功能： 从浏览器中创建 XMLHttpRequest 从 node.js 中创建 htt..
2020-11-18 19:06:13
3011
原创 js原型和原型链 js中this、call、apply、bind简介
今天封装map方法时，有两个疑问，1是为什么不能直接返回total.push(）首先直接返回total.push(）会报错，return只能返回一个值，不能返回一个操作。而且push方法返回的是新数组的长度Array.prototype._map=function(callback){letarrSelf=thisreturnarrSelf.reduce((total,item,index,arr)=>{total.push(c...
2020-11-17 17:59:40
455
原创 react之路由使用、路由守卫、跨域
本文目的：因新公司暂无react相关项目安排，防止自己……对某些技术淡忘，所以记录下react项目部分技术要点，方便日后快速进入状态。一、Router相关库react-router、react-router-dom、react-router-nativereact-router实现了路由的核心功能react-router-dom对react-router进行了封装，我选择的是react-router-dom安装：npm i react-router-dom使用Router需要在组件最
2020-11-09 16:10:20
1079
原创 react之redux使用、react-redux集成、异步action之redux-thunk
react之redux使用Redux 是 JavaScript 状态容器，提供可预测化的状态管理。Redux 的诞生主要为了解决下面的问题：1、复杂的数据，比如api数据、本地数据、UI数据等2、视图和状态管理的耦合导致的状态管理失控=>解决：redux状态管理、react视图层那么如何设计和使用redux呢？一、Redux基本思想store包含了state，state定义UI，UI触发动作Actions ,Actions 发送到Reducers,Reducers根绝a
2020-11-06 17:16:01
361
原创 vue3新增特性学习
composition api是vue3一系列新的api合集，主要有：1、ref和reactive2、computed和watch3、新的生命周期函数4、自定义函数Hook一、ref和reactive
2020-11-04 18:12:21
986
原创 原生实现promise
一、准备工作要实现promise，先看看promise是什么、做了哪些。Promise对象用于表示一个异步操作的最终完成 (或失败), 及其结果值，有以下两个特点: 1、对象的状态不受外界影响。 Promise 对象代表一个异步操作，有三种状态： pending: 初始状态，不是成功或失败状态。 fulfilled: 意味着操作成功完成。 rejected: 意味着操作失败。 2、一旦状态改变，就不会再变，任何时...
2020-10-14 16:21:31
694
2
原创 vue-ssr入门浅析（未完成……）
SSR（Server-Side Rendering），即服务端渲染。所谓服务端渲染，一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。以下简述vue ssr步骤1、安装渲染器vue-server-renderernode服务器express根目录下创建server文件夹=>创建index.js文件...
2020-09-17 20:39:36
222
原创 js设计模式（六）单一职责原则（SRP）、开放-封闭原则、代码重构
一、单一职责原则(SRP)的体现：一个对象（方法）只做一件事情。二、开放-封闭原则思想：当需要改变一个程序的功能或者给这个程序增加新功能的时候，可以使用增加代码的方式，但是不允许改动程序的源代码。三、代码重构1、提炼函数：①避免出现超大函数②独立出来的函数有助于代码复用③独立出来的函数更容易被覆写④独立出来的函数如果以一个良好的命名，本身就起到了注释的作用2、合...
2019-11-26 17:02:15
326
1
原创 js设计模式（五）发布订阅模式、组合模式、模板方法模、UI组件一般构建过程、职责链模式
一、发布订阅模式定义：又称观察者模式，他定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于他的对象都将都到统治 let event = { clientList:{}, listen:function(key,fn){ if(!this.clientList[key]){...
2019-11-24 23:18:24
130
原创 js设计模式（四）单例模式、策略模式、new function()和function()有什么区别、js中奇特的for循环写法、代理模式
一、单例模式定义:保证一个类只有一个实例，并提供一个访问它的全局访问点有一些对象我们往往只需要一个，比如登陆浮窗let createIframe = (function(){ let iframe return function(){ if(!iframe){ } return iframe }}...
2019-11-22 17:28:14
230
原创 js设计模式（三）高阶函数其他应用 、函数科里化、反科里化、函数节流防抖、分时函数、数字逢三加','
1、高阶函数其他应用①高阶函数实现AOP（面向切面编程）https://blog.csdn.net/qingbaicai/article/details/103149375②函数科里化curring又称部分求值。函数首先会接受一些参数，接受这些参数后，该函数不会立即求职，而是继续返回另一个函数，刚才传入的参数在闭包里保存起来，当函数真正需要求值的时候，之前所有的参数都会一次性用于求职...
2019-11-22 16:56:42
209
原创 js设计模式（二）高阶函数及其应用 、判断数据类型、 装饰者模式
1、高阶函数是指至少满足下列条件之一的函数函数可以作为参数被传递（应用场景：回调函数）函数可以作为返回值输出（应用场景 1、判断数据类型function idNumber(obj){return Object.prototypr.toString.call(obj) === '[objcet Number]'}）可以批量注册isType函数let...
2019-11-19 20:05:44
160
原创 js设计模式（一）封装、多态、原型模式、闭包
1、编程语言按数据类型可分为静态类型、动态类型语言静态类型优点在编译时就能发现类型不匹配的错误，缺点迫使程序员依照强契约编写约定（代码良多，分散程序员在业务逻辑上的精力）动态优点是代码数量更少，可以将更多精力放在逻辑上，缺点是无法保证变量类型2、鸭子类型的思想例如：一个对象有pop和push方法并且这些方法被正确的实现，就可以被当作栈来使用；一个对象有length属性，也可以依...
2019-11-19 18:19:13
173
原创 css揭秘二
1、css3包括第三版规范加上一些版本号还是1的新规范css前缀firefox -moz-ie -ms-opera -o-safari/chrom -webkit-2、当某些之相互依赖时，可以用代码将相互依赖关系用代码表达出来,如： font-size:20p...
2019-11-02 11:11:05
86
原创 浏览器支持与回退机制
浏览器支持与回退机制1、通过样式层叠提供回退样式2、添加辅助类（在根元素添加辅助类 如textshadow/no-textshadow）---或者使用@support，但@support也仅在支持其规则的浏览器生效慎用3、js代码检测样式属性是否支持，是，则添加相应类名生效（检测属性值同理）原理：浏览器解析css代码时，会丢弃无法使用部分<script>//...
2019-11-02 10:38:14
641
原创 前端面试总结（一年主vue）
先说不足之处，框架原理理解不够，蜻蜓点水一般，跨域几种方式的优缺点也没说出来，对于组件库的概念理解不深刻Vue了解下webpack，根据生产、开发环境配置参数了解下https://blog.csdn.net/lian772882/article/details/81364644前端面试https://github.com/gujianxiang95/Web/tree/master/...
2019-08-24 15:23:30
218
原创 波兰式和逆波兰式
为静态网页建立servernpm install http-server –ghttp-server -p 8001统一前后台端口 server { listen 8080; server_name localhost; #charset koi8-r;...
2019-07-16 09:02:45
1245
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人