想成为大佬的鸭子-CSDN博客

原创 CSS(3)学习笔记——持续更新

1 选择器CSS(3)中提供的选择器手册（w3school）：http://www.w3school.com.cn/cssref/css_selectors.asp1.1 基本选择器选择器例子类选择器.class标签选择器elementid选择器#id后代选择器element_1 element_2：选择 element_1 内部的全部 elem...

2019-11-04 14:15:48 624

生命周期流程图下图截自Vue官方文档生命周期调用时机生命周期钩子调用时机beforeCreate()在实例初始化之后,数据观测(data observer)之前调用created()实例已经创建完成之后被调用.在这一步,实例已经完成以下的配置:数据观测(data observer),属性和方法的运算,watch/event事件回调.需要注意的是,此时拿不到$elbeforeMount()在挂载开始之前被调用:相关的render函数首次能被调用mounted

2021-09-09 18:27:14 751 1

原创 JavaScript——中断请求的几种方案

1 PromisePromise有一个缺点是一旦创建无法取消,所以本质上Promise是无法被终止的.但是我们可以通过中断调用链或中断Promise来模拟请求的中断.中断调用链中断调用链就是在某一个then/catch执行之后,后续的链式调用(包括then,catch,finally)不再继续执行.方法是在then/catch返回一个新的Promise实例,并保持pending状态:new Promise((resolve, reject) => { setTimeout(() =

2021-09-08 15:10:31 3589

原创 HTTP——Web常见安全问题和防御

Web中常见的安全问题有SQL注入XSSCSRF点击劫持1 SQL注入原理:就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令防御:对用户的输入进行校验,如通过正则表达式进行限制;避免动态拼装SQL,可以使用参数化的SQL或者直接使用存储过程进行数据查询存取;避免使用管理员权限的数据库连接,为每个应用使用单独的权限有限的数据库连接;避免把机密信息明文存放;2 XSSXSS即跨域脚本攻击(cross-site

2021-09-07 19:57:08 462

原创 HTTP——HTTP协议

HTTP协议的主要特点简单快速每个资源(比如图片,页面)都是通过url来定位.这都是固定的,在http协议中,处理起来也比较简单,想访问什么资源,直接输入url即可.灵活http协议的头部有一个数据类型,通过http协议,可以完成不同数据类型的传输.无连接连接一次就会断开,不会继续保持连接.无状态客户端和服务器端是两种身份.第一次请求结束后,就断开了;第二次请求时,服务器端并没有记住之前的状态,也就是说,服务器端无法区分客户端;有的时候,我们访问网站时,网站能记住我们的账号

2021-09-07 19:55:32 940

原创 HTTP——CDN简单认识

贴一个B站地址,Up主讲的不错以下内容是个人整理CDNCDN,Content Delivery Network,内容分发网络.CDN的必要性服务器(包括云服务器)一定有一个物理位置,访问服务器的客户端如果距离服务器太远,或者服务器附近有很多客户端同时访问,都会导致访问速度缓慢,也给服务器造成巨大压力.服务器都会有一定几率碰到宕机的问题(服务器发生故障,无法正常工作),如果单靠一台服务器提供服务,容易造成网络瘫痪.CDN的实现简单的说,CDN就是匹配一台最适合当前客户端的服务器来提供服务(

2021-09-07 19:48:47 676

原创 JavaScript实现排序算法(5)——选择排序,树形选择排序,堆排序

选择排序1 简单选择排序简单选择排序的核心思想是不断地找出未排序数列的最小值,将其添加到有序数列的尾部.(当然也可以选择最大值)1.1 算法过程(从小到大排序)1. 在待排数列中找到最小(或最大)元素,存放于有序数列的起始位置;2. 从余下待排数列中找到最小(或最大)元素,存放于有序数列的末尾(或开头);3. 重复第二步,直到所有元素排序完毕.1.2 排序演示对下面的数列进行简单选择排序5, 3, 2, 4, 1设置两个指针,指针a指向待排数列起始位,指针b指向待排数列末位.5,

2021-08-03 12:41:32 292

原创 JavaScript实现排序算法(4)——直接插入排序和希尔排序

插入排序1 直接插入排序直接插入排序的核心思想是,待排数列一个一个地插入有序数列,不断扩大有序数列,直到待排数列为空.1.1 算法过程(从小到大排序)1. 单个数字一定有序,因此数组首项可以看做一个有序数列,剩余的项组成待排数列;2. 从头到尾依次扫描待排数列,将扫描到的每个元素插入有序数列的适当位置.(如果待插入的元素与有序数列中的某个元素相等,则将待插入元素插入到相等元素的后面)1.2 排序演示对下面数列进行直接插入排序:5, 3, 2, 4, 1将数列首项5作为有序数列,待排数

2021-08-03 12:40:57 153 1

原创 JavaScript实现排序算法(3)——归并排序

归并排序归并排序的分治思想的典型应用,先分再合1 算法过程(从小到大排序)分治:1. 将原数列对半分为两个子数列,分别对两个子数列进行排序;2. 对子数列进行排序时,重复第一步;合并:1. 申请空间,大小为两个`已排序的`子数列之和,该空间用来存放合并后的数列;2. 设定两个指针,最初位置分别为两个子数列的起始位置;3. 比较两个指针所指向的元素,选择较小的元素放入第一步申请的空间,并移动该指针到下一位;4. 重复第三步,直至有一个子数列的指针超出数列尾;5. 将另一个子数列的元素直

2021-08-03 12:40:34 158

原创 JavaScript实现排序算法(2)——快速排序

快速排序快速排序是对冒泡排序的一种改进,被认为是目前最好的一种内部排序方法.快速排序的核心思想是分治思想,先分再合.1 算法过程(从小到大排序)1. 设定一个分界值(分界值任意,一般是数列首值,或数列中间值);2. 将不大于分界值的数置于分界值左边,大于分界值的数置于分界值右边,从而将数列以分界值为分割点,分割为左右两个数列.3. 对左右两个数列,分别重复上面的步骤.4. 左、右两个数列各数据排序完成后,整个数列的排序也就完成了2 排序演示对下面的数列进行快速排序3, 4, 6, 5

2021-08-03 12:40:03 127

原创 JavaScript实现排序算法(1)——冒泡排序

冒泡排序冒泡排序的核心思路,就是每一轮都把最大的数"冒"到数组顶部.1 算法过程(从小到大排序)1. 每一轮排序,都从第一个数开始,比较相邻的数;2. 如果第一个数比第二个数大,则交换两个数的位置;3. 如果第一个数不大于第二个数,则不交换位置,开始比较第二个数和第三个数;4. 以此类推,直到比完最后两个数,选出数列最大值置于末尾;5. 待排数列更新为原数列减去末尾值,开始下一轮排序,重复上面的步骤;2 排序演示对下面的数列进行冒泡排序:3, 4, 1, 5, 2第一轮排序开始,

2021-08-03 08:59:17 1528

原创 HTTP——浏览器输入URL到看到页面,中间都经历了什么??

1 URL解析url,统一资源定位符(Uniform Resource Locator),是互联网上标准资源的地址.互联网上每个文件都有一个唯一的url,它包含的信息指出文件的位置以及浏览器应该怎么处理它.一个完整的url:http://user:pass@www.xxx.cn:80/index.html?a=1&b=2#video组成说明http通信协议，如http、https、ftp、maito等user:pass登录信息(认证)www.xxx.cn

2021-08-01 14:08:43 202

原创原生js——实现ios辅助触控的悬浮球案例

用过iphone的都知道,ios系统有一个重要的功能——辅助触控,可以让我们在触摸屏幕有困难或需要自适应配件的情况下使用iphone.辅助触控中,悬浮球充当着重要角色,它置顶悬浮在屏幕边缘,可任意移动,既不影响用户正常操作系统,又能提供许多功能的快速入口.实际上,在很多app我们也能看到类似的交互,例如微信前几个版本的浮窗效果.那么原生js怎么实现这一交互效果呢?实现思路实现悬浮球的拖拽,原理是改变球的位置.如果以绝对定位(position: absolute)的方式来决定小球的位置,那么关键

2021-07-24 00:00:47 1467 1

原创 JavaScript——原型链?继承?组合继承?看这篇够啦

一、原型链理解原型链,首先要理解一个三方关系.三方指的是构造函数,构造函数实例,以及原型prototype,先上图:1.1 构造函数原型 prototype我们常用new一个构造函数的方式来创建实例.这样的方式很好用，但是存在浪费内存的问题。来看一个例子:function Person(name) { this.name = name; this.sayName = function() { console.log(this.name); }}cons

2021-07-22 16:24:22 160 4

原创 JavaScript——够正的正则表达式!!!

**正则表达式（ Regular Expression ）**是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象。正则表达式通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文(匹配)。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等。一个正则表达式可以由简单的字符构成，比如 /abc/，也可以是简单字符和特殊字符的组合，比如

2021-07-21 16:51:12 135 1

原创 JavaScript——关于数组

很久之前写过一篇js常用数组,随着对这门语言的学习,感觉之前写的一些笔记都太浅了.写篇巩固一下基础(为什么不在原文修改,因为富文本实在太烦人了!还是MarkDown香)判断是否为数组的方法?优缺?不能用typeof,typeof只能判断数组为objecet,不能明确其为Array;不能用.length,因为其他诸如函数也有length属性;instanceof可以判断,instanceof是通过原型链去判断数据类型的,但是存在框架问题Array.isArray()可以判断,老版本的

2021-07-21 15:28:46 304 1

原创 HTML语义化的一些个人理解

语义化的背景: 以前的HTML的结构,基本上就是div+css,然而,div并没有什么实际意义,全靠css显示页面的样式.后来,开发者提出了HTML结构的语义化,w3c也制定出了语义化标签. 什么是语义化: 语义化就是构成HTML结构的标签要有意义,比如有这样的标签:head表示头部,main表示内容主体,footer表示页面底部.那么这些标签构成的HTML结构就是语义化的.如果头部,主体,底部都用div来表示,那么他就不是一个语义化的HTML结构了. 怎么知道页面结构是...

2021-07-21 13:57:39 129

原创 Node.js——一个简单的Express后端API开发

Express是node.js的web开发框架,它有如下特点:unopinionated:框架本身只提供最小web应用开发API;不限制应用设计模式(MVC,MVP);不限制代码规范;不限制功能的选择,例如是否有视图层生成HTML页面Express实现简单的后端API开发项目初始化初始化项目npm init -y # 初始化npm add express # 添加express依赖在根目录新建app.jsconst express = require('express

2021-07-14 00:07:55 927

原创浏览器页面渲染流程

浏览器页面渲染流程渲染流程浏览器渲染流程是什么?渲染的过程其实就是将url对应的各种资源, 通过浏览器渲染引擎的解析,输出可视化的图像:HTML/CSS/JavaScript => 浏览器渲染引擎 => 图像浏览器解析HTML文件为DOM树当我们打开一个网页,浏览器请求对应的HTML(在网络传输中是0和1的字节数据),将这些字节数据转换为字符串(我们写的代码).接着再将字符串通过词法分析转换为标记(token),这一过程在词法分析中称为标记化(tokenization).

2021-06-17 09:25:21 388

原创 JavaScript——听说你想手写Promise

手写一个Promise下面是Promise的一个简单用法：const p1 = new Promise((resolve, reject) => { resolve('success'); reject('error');});p1.then(res => { console.log(res); // 打印success}, err => { console.log(err); // 没有打印});我们可以自己手写一个Promise来实现上

2021-03-23 20:04:21 128

原创 JS执行机制——单线程，同步异步，宏任务微任务，Event Loop

JS执行机制一、什么是进程和线程？本质上来说，这两个名词都是CPU工作时间片的一个描述；进程描述了CPU在运行指令及加载和保存上下文所需的时间，放在应用上来说就代表了一个程序。线程是进程中的更小单位，描述了执行一段指令所需的时间；把这些概念拿到浏览器来说，当你打开一个Tab页，其实就是创建了一个进程，一个进程中可以有多个线程，如渲染线程，JS引擎线程，HTTP请求线程等等。比如，当你发出一个请求时，其实就是创建了一个线程，当请求结束后，该线程可能就会被销毁。二、JavaScript为什么是单线程？

2021-03-17 16:38:44 238 2

原创 css属性中使用数学计算——calc()函数

首先要说明一下，这篇博客关于calc的相关知识，大多数来自于这位前辈的博客：https://blog.csdn.net/wjnf012/article/details/80227644为了能让我自己看得更顺心，我稍作修改。作为一名初出茅庐的前端实习生，在工作中...

2020-08-24 14:13:08 1472

原创修改、重置、查看npm镜像

临时修改npm镜像：npm i --registry=https://registry.npmjs.org/永久修改npm镜像：npm config set registry https://registry.npm.taobao.org重置npm镜像：npm config set registry https://registry.npmjs.org/查看镜像的配置结果：npm config get registry...

2020-08-21 16:28:06 4230

原创 Angular中的Change Detection Mechanism（变更检测原理）详解

https://indepth.dev/everything-you-need-to-know-about-change-detection-in-angular/

2020-08-13 14:04:20 113

原创前端新手想知道的Webpack使用都在这里！

Webpack 初识一、什么是Webpack在 Webpack 中文网：www.webpackjs.com 中，对 Webpack 的官方解释如下：At its core, webpack is a static module bundler for modern JavaScript applications.从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打...

2020-03-11 12:04:30 283

原创再看Vue生命周期

学习Vue的生命周期还是在好久以前，具体什么时候我也忘了，我只记得当时因为是第一次接触前端框架，对这些周期真的是学的云里雾里……但随着对Vue的深入学习，特别是在实习中实践了基于Vue的项目，回过头来再来看Vue生命周期这张图，好像也不是那么难理解了。下图截自vue官网：...

2020-03-09 22:18:02 93

原创 JavaScript实现五种排序算法

最近复习一些数据结构的算法，想着既然弄熟了JavaScript，倒不如用JavaScript来实现一下。算法的分析我觉得百度百科讲的已经很好了，因而做出了截图百科的猥suo行为。本篇博客主要是想贴一下用JavaScript实现的代码。在算法的世界里，排序算法有很多，我所知道的经典的有下面这么十个：1 冒泡排序（一）算法过程：比较相邻的元素。如果第一个比第二个大，就交换他们两个...

2020-03-08 22:55:32 631

原创 JavaScript-再谈闭包

之前写过一篇浅谈闭包的博客（https://blog.csdn.net/weixin_41309331/article/details/102649282）但当时并没有从原理性的入口来讲起闭包。这几天复习《JavaScript高级程序设计》（第三版）时，整理了一些原理性的知识。实际上，要讲闭包，得先理解JavaScript中作用域链的概念，作用域链也是理解全局不能引用局部变量，局部可以引用全局...

2020-03-07 12:56:30 116

原创 JavaScript-相等和全等操作符

JavaScript中的相等操作符分为两组，一组是相等（==）和不相等（!=），一组是全等（===）和不全等（!==）。1 相等(==)和不相等(!=)相等和不相等操作符在比较的时候，会对比较的操作数进行强制转型，即先转换再比较。它遵循以下的基本规则：1. 如果有一个操作数为布尔值，则在比较相等性之前先将其转换为数值——false为0，true为1；2. 如果有一个操作数为字符串，...

2020-03-02 12:14:14 443

原创 CSS中pointer-events的应用

分享一个最近新发现的CSS3新属性——pointer-events，使用简单，并且个人觉得应该还是能在很多时候派上用场的。（如果兼容性不至于太差的话哈哈哈）pointer-events属性值先来看它的属性值，pointer-events有两个属性值值得我注意（毕竟对于我这个菜鸟来说，其他SVG专用的属性我还尚未能看懂啊唉）：auto——效果和没有定义pointer-events属性相同...

2019-11-29 15:07:26 459

原创 js中json字符串与json对象格式转换

本篇博客整理记录了一下js和json之间转换的几种情况和方法，顺便记录一下自己在工作上遇到的一个小问题（看似很简单！但当时头脑不清醒写了很久！敲篇博客敲打自己）最近在公司开发一个页面，由于element框架的需要，我需要接口给我返回下面这种格式的数据：initialData: [ { id:1, title: "标题1", dataObj: {...

2019-11-29 11:17:07 634

原创 mac全局安装gulp报错解决方案

最近在公司接手新项目，需要在mac电脑上全局安装gulp。正常来说全局安装gulp：npminstall-ggulp结果报错：EACCES:permissiondenied,mkdir'/usr/local/lib/node_modules/gulp/node_module...类似这种错误的原因是执行命令时没有获得管理员权限解决方法：在命令前面加上su...

2019-11-13 16:20:37 1238

原创 JavaScript-DOM和BOM学习笔记——持续更新

本篇整理了一下DOM的一些基础知识，目前记录的知识还比较基础，更深的知识尚未整理。往后将继续学习和补充。如有记录得不对的地方，欢迎探讨。目录DOMDOM操作元素操作创建元素添加节点删除元素修改元素获取元素属性操作事件操作事件的三要素事件注册删除事件（解绑事件）事件类型DOM事件流事件对象事件委托BOMwindow对象的常见事件1 窗口加载事件load2 窗口加载事件DOMContentLoad...

2019-11-04 15:08:12 409

原创 ES6学习笔记——持续更新

本篇整理了一下ES6的一些常用基础知识，关于ES6的知识将会继续学习和补充。如有记录得不对的地方，欢迎探讨。目录ES6规范为什么使用ES6？let关键字const关键字var、let、const 对比：对象字面量的增强写法属性的增强写法函数的增强写法解构赋值数组解构对象解构箭头函数箭头函数中的this箭头函数经典面试题剩余参数ES6内置对象扩展数组的扩展方法...扩展运算符构造函数方法：Arr...

2019-11-04 15:02:10 261

原创 php基础笔记

PHP网站分类静态网站全部由HTML代码格式页面组成的网站，没有数据库的支持，在网站制作和维护方面工作量大。动态网站动态网站并不是指具有与动画功能的网站，而是指网站内容可根据不同情况动态变更的网站。一般情况下动态网站通过数据库进行架构。一般动态网站体现在网页一般是以 asp，jsp，php，aspx 等结尾，动态网页以数据库技术为基础，可以大大降低网站维护的工作量，维护方便。PHP基础...

2019-11-04 14:19:30 129

原创 JavaScript 同步和异步

本篇博客整理了一下我对JavaScript同步和异步的简单理解，我认为还是比较详细和好懂的。其中部分借鉴了阮一峰前辈的博客（博客链接突然失效我找不到了），在这里先感谢阮一峰前辈以及其他前辈的解释~一、为什么JavaScript是单线程？JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。Ja...

2019-10-20 17:13:54 177

原创 JavaScript 浅谈浅拷贝和深拷贝

深拷贝和浅拷贝在各大语言中都有体现，这篇博客谈谈我对JavaScript中深浅拷贝的理解。浅拷贝浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用地址。这句话怎么理解呢？来看下面这个例子：let obj = { id: 1, name: '李小龙', message: { age: 18 }}let o = {}我现在想要对象o拷贝对象obj，浅...

2019-10-20 16:52:29 212

原创 JavaScript 对象方法—— Object.keys() 和 Object.defineProperty()

ES5有两个常用的对象方法：1 Object.keys()语法：Object.keys(obj)说明： Object.keys() 用于获取对象自身所有的属性；效果类似for...in...；返回一个由属性名组成的数组。举例：var obj = { id: 1, pname: '小米', price: 1999,...

2019-10-20 16:30:55 592

原创 JavaScript 数组常用方法

本篇博客主要讨论ES6之前的数组常用方法，ES6的常用知识将会在之后的博客中记录。创建数组的基本方式1. 使用Array构造函数：var arr = new Array()//表示创建length为3的数组var arr = new Array(3)//表示创建包含这几项的数组var arr = new Array('red','yellow','blue')2.字...

2019-10-20 16:16:47 244

原创 JavaScript 浅谈闭包

在理解闭包是个什么玩意儿之前，我们先来看看JavaScript中的变量作用域，因为闭包和它有着紧密联系。在JavaScript中，变量根据作用域的不同分为两种：全局变量和局部变量。函数内部可以使用全局变量。函数外部不可以使用局部变量。当函数执行完毕，本作用域内的局部变量会销毁。什么是闭包？在《 JavaScript 高级程序设计》一书中，给出了闭包的...

2019-10-20 15:34:20 166

移动端适配原理（详细）.md

空空如也