CodeMagiclin-CSDN博客

原创路由跳转和传参

路由传参路由跳转有两种方式：（1）声明式导航:router-link（务必要有to属性)，可以实现路由的跳转（2）编程式导航:利用的是组件实例的$router.push/replace方法，可以实现路由的跳转。(可以书写一些自己业务)8.2:路由传参，参数有几种写法?params参数:属于路径当中的一部分，需要注意，在配置路由的时候，需要占位，例如path: " /searchf/: keyword"第一种写法：字符串形式this.$router.push(" /search/" + thi

2022-01-15 22:16:17 1788

原创软件设计模式

设计模式运用在程序设计中已经很多年了，它最早被整理在Erich Gamma、Richard Hlem、Ralph Johnson和Jhon Vlissides(绰号四人帮(the Gang of Four简称Gof) )合著的一本书中。现在已经被应用到各种各样的编程语言，最大的魅力在于在各种编程语言中表现都是一样的，只是语法略有不同。例如把Java的实现模式转换到c很容易。JavaScript是一门特别灵活的语言，早些年被认为是玩具式的语言，只能做一点为网页涂脂抹粉的小差事。项目工程也不是很大，更无从说起

2022-01-14 18:36:47 595

原创 CSS3转换、过渡与动画

一、转换transformtransform字面上就是变形，转换的意思，在CSS3中转换主要包括移动、旋转、缩放和扭曲。（1）移动translate（）translate（x，y）translateX（X）translateY（Y）（2）旋转rotate（）正数表示顺时针旋转，负数则表示逆时针旋转（3）缩放scale（）scale（x，y）scaleX（X）scaleY（Y）（4）扭曲skew（）skew（x，y）skewX（X）skewY（Y）（5）矩阵matrix（）将

2022-01-05 20:54:10 414

原创【前端三剑客之JavaScript】调用栈

JavaScript 中有很多函数，经常会出现在一个函数中调用另外一个函数的情况，调用栈就是用来管理函数调用关系的一种数据结构。因此要讲清楚调用栈，你还要先弄明白函数调用和栈结构。什么是函数调用？函数调用就是运行一个函数，具体使用方式是使用函数名称跟着一对小括号。当执行到函数的时候，我们就有了两个执行上下文了——全局执行上下文和函数的执行上下文。 JavaScript 引擎是通过一种叫栈的数据结构来管理这些执行上下文。在执行上下文创建好后，JavaScript 引擎会将执行上下文压入栈中，通常把

2021-11-29 14:45:05 292

原创【前端三剑客之JavaScript】变量提升

【前端三剑客之JavaScript】变量提升JavaScript执行情况：1.在执行过程中，若使用了未声明的变量，那么 JavaScript 执行会报错。2.在一个变量定义之前使用它，不会出错，但是该变量的值会为 undefined，而不是定义时的值。3.在一个函数定义之前使用它，不会出错，且函数能正确执行。js中变量的声明和赋值var myname //声明部分myname = '极客时间' //赋值部分js中函数的声明和赋值function foo(){ console.

2021-11-19 11:25:45 322

原创关于对leetcode946验证栈序列的思考

题目描述给定 pushed 和 popped 两个序列，每个序列中的值都不重复，只有当它们可能是在最初空栈上进行的推入 push 和弹出 pop 操作序列的结果时，返回 true；否则，返回 false 。示例 1：输入：pushed = [1,2,3,4,5], popped = [4,5,3,2,1]输出：true解释：我们可以按以下顺序执行：push(1), push(2), push(3), push(4), pop() -> 4,push(5), pop() -> 5,

2021-10-09 15:49:41 98

原创 React笔记（一）

React笔记（一）React 介绍React 是一个用于构建用户界面的渐进式 JavaScript 库本身只处理 UI不关系路由不处理 ajaxReact主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。数据驱动视图React 由 Facebook 开发第一个真生意义上把组件化思想待到前端开发领域angular 早期没有组件化思想后来也被 Vue 学习借鉴了React 起源于 Facebook 的内部项目，因为该公司对市场上所有 Java

2021-10-09 15:18:37 101

原创关于对leetcode933最近请求次数的思考

关于对leetcode933最近请求次数的思考给定一个整数数组 nums ，找到一个具有最大和的连续子数组（子数组最少包含一个元素），返回其最大和。题目描述写一个RecentCounter 类来计算最近的请求。它只有一个方法：ping(int t)，其中 t 代表以毫秒为单位的某个时间。返回从 3000毫秒前到现在的 ping 数。任何处于[t - 3000, t]时间范围之内的 ping 都将会被计算在内，包括当前（指 t 时刻）的 ping。保证每次对 ping 的调用都使用比之前更大的

2021-10-09 14:58:11 69

转载前端性能优化之雅虎军规

前端性能优化之雅虎军规1.尽量减少HTTP请求数80%的终端用户响应时间都花在了前端上，其中大部分时间都在下载页面上的各种组件：图片，样式表，脚本，Flash等等。减少组件数必然能够减少页面提交的HTTP请求数。这是让页面更快的关键。减少页面组件数的一种方式是简化页面设计。但有没有一种方法可以在构建复杂的页面同时加快响应时间呢？嗯，确实有鱼和熊掌兼得的办法。合并文件是通过把所有脚本放在一个文件中的方式来减少请求数的，当然，也可以合并所有的CSS。如果各个页面的脚本和样式不一样的话，合并文件就是一项比

2021-08-13 09:14:26 147

原创浏览器工作原理（2）从输入URL到页面渲染

浏览器工作原理（2）浏览器进程：主要负责用户交互、子进程管理和文件储存等功能。网络进程：面向渲染进程和浏览器进程等提供网络下载功能。渲染进程：主要职责是把从网络下载的 HTML、JavaScript、CSS、图片等资源解析为可以显示和交互的页面。ps：因为渲染进程所有的内容都是通过网络获取的，会存在一些恶意代码利用浏览器漏洞对系统进行攻击，所以运行在渲染进程里面的代码是不被信任的。这也是为什么 Chrome 会让渲染进程运行在安全沙箱里，就是为了保证系统的安全。用户输入当用户在地址栏中输入

2021-08-12 17:08:44 115

原创 Flex弹性布局

Flex弹性布局将容器的displays属性设置为flex之后，容器内的元素，无论是块级元素还是行内元素，都一视同仁，成为弹性布局的元素。同时，设置浮动和vertical-align也会失效。Flex弹性布局默认主轴为横向（flex-direction:row）默认从左到右纵向：flex-direction:column默认从上到下顺序反转：row-reversecolumn-reverseflex布局中父项相关设置主轴的内容分布：使用justify-content属性之前必须清楚主轴是哪个

2021-08-06 17:12:30 154

原创浏览器的工作原理资料推荐

学习前端最重要的是要理解浏览器的工作原理，毕竟我们写的代码最终是要被浏览器处理的，理解浏览器背后的原理可以帮我们更快速定位问题，找到问题的解决方案。这周刷微博的时候看到一些关于浏览器工作原理的资料，觉得非常不错。以前一直在寻找这方面的资料，一直没找到合适的。看到这两个资料，太受用了。1、How browsers work本文内容比较长，比较全面地介绍了浏览器的工作原理。为方便阅读我把它保存成了一个 pdf，你也可以到下面这个地址直接访问（会慢一些）：http://taligarsiel.com/Pro

2021-08-05 09:33:07 117

原创浏览器工作原理（1）

浏览器工作原理（1）线程 VS 进程多线程可以并行处理任务，但是线程是不能单独存在的，它是由进程来启动和管理的。那什么又是进程呢？一个进程就是一个程序的运行实例。详细解释就是，启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，我们把这样的一个运行环境叫进程。目前多进程浏览器的架构最新的 Chrome 浏览器包括：1 个浏览器（Browser）主进程、1 个 GPU 进程、1 个网络（NetWork）进程、多个渲染进程和多个插件进程。下面我们来逐

2021-08-04 17:16:22 146

原创 BFC、IFC、GFC、FFC

BFC、IFC、GFC、FFCCSS2.1中只有BFC和IFC, CSS3中才有GFC和FFC。那么到底什么是BFC、IFC、GFC和FFC呢？What’s FC?一定不是KFC，FC的全称是: Formatting Contexts，是W3CCSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。BFCBFC(Block Formatting Contexts)直译为"块级格式化上下文"。Block Formatt

2021-08-04 16:06:05 1906

原创关于对leetcode20有效的括号的思考

关于对leetcode20有效的括号的思考给定一个只包括 ‘(’，’)’，’{’，’}’，’[’，’]’ 的字符串 s ，判断字符串是否有效。有效字符串需满足：左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。示例 1：输入：s = "()"输出：true示例 2：输入：s = "()[]{}"输出：true示例 3：输入：s = "(]"输出：false示例 4：输入：s = "([)]"输出：false示例 5：输入：s = "{[]}

2021-08-04 11:27:04 72

原创关于对leetcode53最大子序和的思考

关于对leetcode53最大子序和的思考给定一个整数数组 nums ，找到一个具有最大和的连续子数组（子数组最少包含一个元素），返回其最大和。示例 1：输入：nums = [-2,1,-3,4,-1,2,1,-5,4]输出：6解释：连续子数组 [4,-1,2,1] 的和最大，为 6 。示例 2：输入：nums = [1]输出：1示例 3：输入：nums = [0]输出：0示例 4：输入：nums = [-1]输出：-1示例 5：输入：nums = [-100000

2021-08-04 10:56:54 67

原创珺珺学算法（1）算法概述及复杂度分析

珺珺学算法（1）算法概述及复杂度分析一、什么是算法？**算法(Algorithm)**是指解决问题的方法或过程，它包含一系列步骤，用来将输入数据转换成输出结果。算法具有以下性质：**输入：**有零个或多个输入**输出：**至少有一个输出**确定性：**组成算法的每条指令清晰、无歧义**有限性：**算法中每条指令的执行次数有限，执行每条指令的时间也有限**程序：**是算法用某种程序设计语言的具体实现，程序不一定满足有限性**算法复杂性：**算法所需要的计算机资源**算法的时间复杂

2021-07-30 12:35:23 94

原创微信小程序基础入门（2）vant weapp框架引入详解及使用

微信小程序基础入门（2）vant weapp框架引入详解及使用一、安装Node使用 Vant Weapp 前，请确保你的电脑已经安装了Node，因为需要用到npm导入vant weapp相关的包，需要下载安装node，如果电脑没有的话需要百度前往node官网自行下载。二、创建微信小程序项目详情请看https://blog.csdn.net/MagiclinLOL/article/details/119209714?spm=1001.2014.3001.5501三、npm下载在项目根目录下打开cm

2021-07-29 14:55:47 564

原创微信小程序基础入门（1）含优势介绍、环境搭建、与vue对比及vant weapp框架初步使用

微信小程序开发小程序的诞生带来了互联网产品新一轮的变革，小程序正发挥着日益重要的作用。最近珺珺问我她想学习微信小程序开发，但是不知道从何下手，本文我将介绍微信小程序的优点及开发环境的搭建。小程序是什么，相信不用做太多介绍了，下面直入主题。(注：蓝色字体代表链接)一、微信小程序的优点:1、用户体验好：便捷地获取服务，无需安装卸载，即用即走；2、流量获取易：背靠10亿+微信用户；3、开发成本低：节省大量资金、时间、人力，从而做好自己的产品；4、微信生态强：微信生态体系、多渠道实现营销推广，节省推

2021-07-29 14:20:46 824

原创 Icon font&CSS Sprite&SVG Sprite&Base64

CSS Sprite：又称为CSS精灵或者雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。能很好地减少网页的http请求，从而大大的提高页面的性能。SVG Sprite：与CSS Sprite类似。另外一种实现思路 + 。用于定义可复用的形状，定义的现状不会展示出来，而是通过use元素引用来显示。Icon font：图标字体，也叫字体图标，就是字体做的图标。能自由变化大小，且不会模糊。

2021-05-11 14:54:41 167

转载 CSS中可以和不可以继承的属性

一、无继承性的属性1、display：规定元素应该生成的框的类型2、文本属性：vertical-align：垂直文本对齐text-decoration：规定添加到文本的装饰text-shadow：文本阴影效果white-space：空白符的处理unicode-bidi：设置文本的方向3、盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、borde

2021-05-08 15:07:25 68

原创 [前端三剑客之CSS]display:none opacity:0 visibility:hidden三角恋的爱恨情仇

三种方法均可隐藏元素。不同在于以下几点:一、空间占据display:none 的元素不会占据，但是设置display:none 会引发回流和重绘opacity:0和visibility:hidden 的元素会占据位置，但是改变这属性时只会触发重绘二、子元素继承display:none 不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了。visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出opacity: 0 也会

2021-05-08 14:48:01 128

原创关于对leetcode1两数之和的思考

【力扣扣】两数之和给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出和为目标值的那两个整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。示例 1：输入：nums = [2,7,11,15], target = 9输出：[0,1]解释：因为 nums[0] + nums[1] == 9 ，返回 [0, 1] 。示例 2：输入：nums = [3

2021-05-04 22:08:05 81

原创【前端三剑客之JavaScript】闭包

闭包(closure)：指有权访问另一个函数作用域中变量的函数，即一个作用域可以访问另一个函数内部的局部变量。function fn (){var num = 10;function fun(){ console.log(num);} fun()}fn ()函数外面的作用域也可访问函数内部的局部变量：function fn (){var num = 10;return function (){ console.log(num);}}var f = fn(.

2021-04-24 23:39:02 84

原创【前端三剑客之JavaScript】浅拷贝和深拷贝

一、浅拷贝:仅拷贝一层，更深层次对象级别的只拷贝引用拷贝的是地址，新旧对象指向的是同一数据，拷贝数据后改动数据会影响原数据var obj = { id = '1', name:'andy' msg : { age:18 }};var o ={};for(var k in obj){ //k为属性名 obj[k]为属性值 o[k]= obj[k];}o.msg.age = 20;console.log(onj);//var ob

2021-04-24 17:27:46 97

原创【前端三剑客之JavaScript】函数及其this指向

【前端三剑客之JavaScript】函数及其this指向一、函数定义方式:(1) 自定义（命名）函数 ——> function fn() {} ;(2) （匿名）函数表达式 ——> var fun = function () {} ;(3) new Function(‘参数1’，‘参数2’，‘函数体’)var f = new Function('a','b','console.log(a+b)') ;f(1,2);函数也属于对象；所有函数都是Function函数的实例对象；

2021-04-23 10:36:46 73

原创【前端三剑客之JavaScript】类与对象

面向对象:三大特性：封装、继承、多态优点：易维护、复用、扩展,由于面向对象有封装、继承、多态的特性，可设计出低耦合的系统使系统更加灵活更易于维护缺点：性能比面向过程低面向过程：优点：性能比面向对象高，适合与硬件联系紧密的东西例如单片机采用面向过程编程缺点：没有面向对象易维护、复用、扩展类抽象了对象的公共部分，泛指某一大类（class），对象则特指某一具体的事物，通过类实例化一个具体的对象类必须使用new关键字实例化。在ES6中类不存在变量提升，所以必须先定义类，才能通过类实例化对象。类里面

2021-04-04 21:18:23 131

转载图解 HTTP 笔记（二）——简单的 HTTP 协议

本章主要以 HTTP 1.0 为例，讲解 HTTP 协议的基本结构。在两台计算机之间使用 HTTP 协议进行通讯时，在一条通讯线路上必定有一端是客户端，另一端则是服务器端。请求访问文本或图像等资源的一端成为客户端，而提供资源响应的一端成为服务器端。HTTP 协议规定，请求从客户端发出，最后服务器端响应该请求并返回。一、请求和响应报文的组成某个客户端发出的请求如下：GET /index.htm HTTP/1.1Host: hackr.jp复制代码其中，GET 表示请求访问服务器的类型..

2021-03-30 14:51:29 111 1

转载图解 HTTP 笔记（一）——了解 Web 及网络基础

图解 HTTP 笔记（一）——了解 Web 及网络基础本章内容：Web 建立在何种技术之上，HTTP 协议如何诞生并发展？一、Web 基于 HTTP 通信Web 使用一种名为 HTTP （HyperText Transfer Protocol，超文本传输协议）的协议作为规范，协议指的是对一些规则的约定。可以说 Web 是建立在 HTTP 协议上通信的。二、HTTP 的诞生2.1 诞生背景这一节主要讲 HTTP 的诞生背景，了解 HTTP 协议的诞生背景有利于我们学习理解 HTTP 协议。

2021-03-30 14:49:19 87

原创 Browser历险记】认识Browser浏览器

【Browser历险记】认识Browser常见浏览器介绍浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。查看浏览器占有的市场份额（知晓）点击链接查看网站： http://tongji.baidu.com/data/browser浏览器内核浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。渲染引擎：负责取得网页的内容（HT

2021-03-22 16:13:20 2606

原创【HTML5】多媒体标签

【HTML5】多媒体标签HTML5中新增的多媒体标签主要包括音频（audio）标签和视频（video）标签音频标签：HTML5在不使用插件的情况下可支持有限数量的原生音频格式文件播放，具体支持情况如下表格：格式：<audio src = "文件地址" controls="controls" ></audio>常见属性：视频标签：格式：<vedio src = "文件地址" controls="controls" ></vedio>

2021-03-21 23:35:31 145

原创【HTML5】常用语义化标签

【HTML5】常用语义化标签HTML5 是 HTML 标准的最新演进版本。这个术语代表了两个不同的概念：它是一个新的 HTML 语言版本包含了新的元素，属性和行为，同时包含了一系列可以被用来让 Web 站点和应用更加多样化，功能更强大的技术。这套技术往往被称作 *HTML5 和它的朋友们，*通常简称为 HTML5。从要对全部所有的 Web 开发人员有用这一点出发，这个参考页面链接了有关 HTML5 技术的大量资源，并且基于它们各自的功能，把它们归类成了若干组。语义：能够让你更恰当地描述你的内容

2021-03-21 00:20:58 174

原创【ECMAScript6】你不得不知道系列之字符串

【ECMAScript6】你不得不知道系列之字符串·模板字符串：ES6新增的创建字符串的方式，使用反引号"`"定义let name = `zhangsan`;模板字符串可以通过“$”+”{}“符号解析变量let name = `zhangsan`; let sayhello = `Hi,my name is ${name}`;console.log(sayhello);//Hi,my name is zhangsan模板字符串可以换行let result = { name："z

2021-03-20 22:24:34 75

原创【ECMAScript6】你不得不知道系列之Set

【ECMAScript6】你不得不知道系列之SetES6提供了Set数据结构，类似于数组，但其成员值是唯一的。Set本身是一个构造函数，用来生成Set数据结构const s = new Set();console.log(s.size);//0Set函数可接收一个数组作为参数初始化：const ss = new Set ([1,2,3,4,4]);console.log(ss.size);//5Set 实现数组去重const s1 = new Set(["a","a","b","b"])

2021-03-20 17:10:04 91

原创【ECMAScript6】你不得不知道系列之实例方法

【ECMAScript6】你不得不知道系列之实例方法·实例方法之find():用于找出第一个符合条件的数组成员，若没有找到则返回undefineddemo:let ary =[{ id:1, name:'张三'}，{ id:2, name:'李四'}]；let target = ary.find((item,index) => item.id ==2);example:var ary =[{ id:1, name:'张三'}，{

2021-03-20 16:51:23 64

原创【ECMAScript6】你不得不知道系列之剩余参数&扩展运算符

【ECMAScript6】你不得不知道系列之剩余参数剩余参数语法允许我们将一个不定数量的参数表示为一个数组。ES6中对于函数多余的实参，采用args数组接收。function sum(first,...args){ console.log(first); console.log(args);}sum(10,20,30)const sum = (...args)=> { //使用三点加args表示接收多余的实参 let total = 0 ; args.fo

2021-03-20 15:58:28 121 1

原创【ECMAScript6】你不得不知道系列之箭头函数

【ECMAScript6】你不得不知道系列之箭头函数ES6中新增的定义函数的方式：( ) => { }const fn = ( ) =>{ }若函数体中仅一句代码且其执行结果是其返回值则可省略大括号：function sum(num1.num2){ return num1+num2;}const sum = (num1,num2) =>num1+num2;若形参只有一个，则小括号也可省略：const fn = v =>{ alert(v);}f

2021-03-14 15:22:13 112

原创【JavaEE】NoteSet

【javaEE】NoteSet1、Spring的概念和优点①. Spring是一个轻量级的IOC和AOP容器框架②. Spring是非侵入式的，基于Spring开发的应用一般不依赖于Spring的类③. Spring是个容器，包含并且管理应用对象的生命周期和配置。④. Spring提供对事务的管理⑤. Spring对主流的框架提供了很好的集成支持。2、Spring中的IoC和DI思想IoC(Inversion of Control 控制反转)：是一种面向对象编程中的一种设计原则，用来减低计算

2021-03-14 11:53:43 164

原创【ECMAScript6】你不得不知道系列之let、const和var的区别

【ECMAScript6】你不得不知道系列之letlet关键字是ES6中用来声明变量的：1、具有块级作用域特性，即let声明的变量只能在一对花括号内起作用。eg：if（true）{var a=1；let b=1;console.log(a);//1console.log(b);//1}console.log(a);//1console.log(b);//undefined2、不存在变量提升：即不可像以前先使用变量再声明了。if（true）{console.log

2021-03-14 11:39:56 157

原创【狂】JSON

JSON背景介绍JSON (JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于 ECMAScript (w3c制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。——百度百科数据传输是我们在敲代码时，经常遇到的一个场景,前后端交互。给数据一个统一的格式有利于我们编写和解析数据。json，

2021-03-11 23:55:13 68

空空如也

空空如也