- 博客(64)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 从同源政策到跨域解决方法
一、同源政策同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。所谓同源指的是协议、域名、端口相同，否则就会产生跨域问题。二、跨域跨域问题主要分为三类（1） Cookie、LocalStorage 和 IndexDB 无法读取。（2） DOM 无法获得。（3） AJAX 请求不能发送。三、解决跨域的措施跨域解决方案Cookie、LocalStorage 和 IndexDB 无法读取。1、document.domain + iframe举例来说，A网页是http://w1.
2021-08-30 22:13:23
479
原创 CSS 之实现它们它们和它们
一、CSS画图形1、用CSS画三角形首先，需要把元素的宽度、高度设为0。然后设置边框样式<!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,
2021-08-17 09:02:19
221
原创 JavaScript 之手写它们它们和它们
一、实现一个new操作符new 的原理是什么？通过 new的方式创建对象和通过字面量创建有什么区别？new原理在调用 new 的过程中会发生四件事情创建一个空对象，构造函数中的this指向这个空对象新对象被链接到原型执行构造函数方法，属性和方法被添加到this引用的对象中如果构造函数中没有返回新对象，那么返回this，即创建这个新对象，否则，返回构造函数中返回的对象根据上述描述，实现一个new//实现2function myNew(func, ...args) { const o
2021-08-13 10:12:40
335
原创 Vue.js的通识必修
1、什么是 MVVM？Model–View–ViewModel （MVVM） 是一个软件架构设计模式。MVVM 源自于经典的 Model–View–Controller（MVC）模式 ，MVVM 的出现促进了前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互
2021-08-10 21:56:16
649
1
原创 浅析Vue生命周期
生命周期定义Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。各个生命周期的作用Vue 的父组件和子组件生命周期钩子函数执行顺序Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：加载渲染过程父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate
2021-06-29 15:30:10
205
原创 node包版本管理——nvm
环境配置出现node不是可用指令的话，一般是node的变量路径错误安装完nvm后会自动设置环境变量，但是需要修改一下自动设置的环境变量系统和用户环境变量中需要配置：NVM_HOME D:\nvm （指向nvm安装的路径下）NVM_SYMLINK D:\nodejs（指向nodejs安装的路径下）系统变量中需要配置nvm的常用使用指令nvm off //禁用node.js版本管理(不卸载任何东西)nvm on
2021-05-13 11:37:41
109
原创 常见排序算法的实现与介绍
前言排序算法评价标准时间复杂度一个算法语句总的执行次数是关于问题规模N的某个函数，记为f(N)，N称为问题的规模。语句总的执行次数记为T(N)，当N不断变化时，T(N)也在变化，算法执行次数的增长速率和f(N)的增长速率相同。则有T(N) = O(f(N))，这称作算法的渐进时间复杂度，简称时间复杂度。最坏时间复杂度、最好时间复杂度和平均时间复杂度最坏时间复杂度最坏情况下的时间复杂度称最坏时间复杂度，一般不特别说明，讨论的时间复杂度均是最坏情况下的时间复杂度。这样做的原因是：最坏情况下的时间复
2021-05-09 18:44:27
343
原创 CSS3新特性
项目中比较常用的CSS3新特性：1、圆角（border-radius）语法：border-radius: n1,n2,n3,n4;border-radius: n1,n2,n3,n4/n1,n2,n3,n4;/*n1-n4四个值的顺序是：左上角，右上角，右下角，左下角。*/栗子：<!DOCTYPE html><html><head><meta charset="utf-8"> <title></title> &
2021-05-08 17:18:54
232
1
原创 HTML5新特性
为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式处理和几个api拖放元素，定位，包括网页 应用程序缓存，存储，网络工作者等。
2021-05-08 11:46:16
253
原创 32、了解异步编程的解决方案
ES5的异步编程解决方案ES6之前，异步编程的解决方案主要有4种：回调函数事件监听发布/订阅Promise对象Promise对象是一个保存着某个未来才会结束的事件，通常是异步操作的结果基本用法var promise = new Promise(function(resolve, reject) => { if (/*异步操作成功*/) { resolve(value); } else { reject(error); }}promise.then
2021-04-22 15:16:47
191
原创 31、JS面向对象的基本特征
面向对象的基本特征（封装、继承、多态）31.1 封装：将数据及其和它相关的行为封装js如何实现函数私有共有1. 基于es6的新特性：Symbol类型实现私有变量，私有属性var Pclass = (function () { const a = Symbol('a'); const m = Symbol('m'); class Pclass { constructor() { this[a] = 'a这是私有变量'; this.b = '变量B-外部可
2021-04-16 22:32:24
100
原创 28、Event Loop 事件循环
28.1 为什么要有异步任务因为JS是单线程的。所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。由于程序运行时，可能会因为IO设备（输入输出设备）很慢（比如Ajax操作从网络读取数据）而发生程序运行较慢。为提高程序相应速度，于是，所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，
2021-04-14 21:35:29
159
原创 TCP/IP模型（三次握手、四次握手）
简单介绍了SOCKET的原理模型——TCP/IP模型，包括了三次握手/四次握手。1. 网络模型计算机网络一共有3种模型。OSI七层结构TCP/IP结构五层协议结构TCP/IP模型，又称传输控制协议/网际协议(Transmission Control Protocol/Internet Protocol)。简单来说，此协议的通信过程如同数据出栈入栈的过程。入栈：数据发送方每层不断地封装头部和尾部，向中间添加传输信息出栈：数据接收方每层不断拆除头部尾部，读取中间的传输信息TCP/IP
2021-04-14 17:51:30
512
原创 Vue.js项目：炸鸡音乐播放器项目总结
Vue-musicWelcome to Vue-Music-Player???? 项目相关技术栈：Vue.js + Vue Router + Vuex + axios + jsonp + better-scroll???? 如何运行# 克隆git clone https://github.com/yxiuzhu/vuemusic# 打开项目目录cd vuemusic# 安装依赖npm install# 开启本地服务运行项目npm run dev项目演
2021-04-10 21:03:55
880
原创 Vue.js项目：在线商城软件项目总结
Vue-Elm-ShopWelcome to Vue-Elm-Shop???? ???? 如何运行# 克隆git clone https://github.com/yxiuzhu/mushroom.git# 打开项目目录cd mushroom# 安装依赖npm install# 开启本地服务运行项目npm run serve项目演示项目演示地址（请用chrome手机模式预览）项目页面及功能Home 商城首页Cart 购物车详情页Deta
2021-04-06 16:59:11
1435
1
原创 HTML、CSS基础知识汇总
1. CSS权重及其引入方式1.1 CSS引入方式网页引入css样式的几种方法，包括内联式样式表、嵌入式样式表、外链式、导入式1.内联式样式表：直接写在现有的元素标签中，比如：<p style="font-size:24px;">www.jb51.net</p>2.嵌入式样式表：使用标签嵌入到HTML文件的头部中标记中，如：<style type="text/css"> p{font-size:18px; color:#093;}&
2021-03-26 19:44:21
1264
原创 1、解构赋值
1. 解构赋值字符串解构：const [a, b, c, d, e] = “hello”数值解构：const { toString: s } = 123布尔值解构：const { toString: b } = true对象解构形式：const { x, y } = { x: 1, y: 2 }默认：const { x, y = 2 } = { x: 1 }改名：const { x, y: z } = { x: 1, y: 2 }数组解构规则：数据结构具有Iterator
2021-03-21 18:34:08
321
原创 Nginx服务器
安装完直接命令行输入命令启动，访问localhost，出现欢迎界面即证明安装成功Nginx Windows基本操作指令启动服务：start nginx退出服务：nginx -s quit强制关闭服务：nginx -s stop重载服务：nginx -s reload （重载服务配置文件，类似于重启，服务不会中止）验证配置文件：nginx -t使用配置文件：nginx -c “配置文件路径”使用帮助：nginx -h...
2021-03-20 16:17:17
56
原创 27、BOM的属性对象方法
27.1 BOM的属性对象方法BOM（浏览器对象模型）的对象用于访问浏览器的功能，提供了当前窗口中加载的文档有关的信息，和一些导航功能。BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是windowBOM由一些列相关对象构成，并且每个对象提供 很多方法与属性BOM缺乏标准，javascript 语法的标准组织是ECMA，DOM的标准组织是W3CBOM 最初是Netscape 浏览器标准的一部分window对象 ：表示浏览器窗口，是JS的顶层对象。location对象：浏览器当
2021-03-18 21:44:42
706
原创 26、addEventListener()和onClick()的区别
26.1 结论onclick事件在同一时间只能指向唯一对象addEventListener给一个事件注册多个listeneraddEventListener对任何DOM都是有效的，而onclick仅限于HTMLaddEventListener可以控制listener的触发阶段，（捕获/冒泡）。对于多个相同的事件处理器，不会重复触发，不需要手动使用removeEventListener清除IE9使用attachEvent和detachEvent26.3 实例addEventListener
2021-03-18 20:47:40
781
原创 25、搞懂闭包、作用域、执行期上下文（VO、AO）、作用域链
25.1 作用域作用域即函数或变量的可见区域。通俗点说，作用域是根据名称查找变量的一套规则在ES6之前，ES的作用域只有两种：全局作用域和函数作用域。1. 全局作用域定义在最外层的变量或者函数，可以在任何地方访问到它们。2. 函数作用域用函数形式以function(){……}类似的代码包起来的（省略号……）区域var a = "coffe";//在全局作用域function func(){ var b="coffe";//在函数作用域内 console.log(a);}
2021-03-18 20:02:57
840
原创 24、浏览器渲染原理（重要）
24.1 渲染过程1. 浏览器接收到 HTML 文件并转换为 DOM 树当我们打开一个网页时，浏览器都会去请求对应的 HTML 文件。虽然平时我们写代码时都会分为 JS、CSS、HTML 文件，也就是字符串，但是计算机硬件是不理解这些字符串的，所以在网络中传输的内容其实都是 0 和 1 这些字节数据。当浏览器接收到这些字节数据以后，它会将这些字节数据转换为字符串，也就是我们写的代码。字节数据 ==》 字符串当数据转换为字符串以后，浏览器会先将这些字符串通过词法分析转换为标记（token），这一
2021-03-18 15:39:25
149
原创 23、DOM事件代理：冒泡与捕获
涉及面试题：事件的触发过程是怎么样的？知道什么是事件代理嘛？23.1 事件触发三阶段window往事件触发处传播，遇到注册的捕获事件会触发传播到事件触发处时触发注册的事件从事件触发处往 window 传播，遇到注册的冒泡事件会触发事件触发一般来说会按照上面的顺序进行，但是也有特例，如果给一个 body 中的子节点同时注册冒泡和捕获事件，事件触发会按照注册的顺序执行// 以下会先打印冒泡然后是捕获node.addEventListener( 'click', event =&.
2021-03-18 14:52:09
91
原创 22、浏览器缓存机制
22.1 浏览器缓存机制注意：该知识点属于性能优化领域，并且整一章节都是一个面试题缓存可以说是性能优化中简单高效的一种优化方式了，它可以显著减少网络传输所带来的损耗。对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么就没有必要再将数据回传回来，这样就减少了响应数据。接下来的内容中我们将通过以下几个部分来探讨浏览器缓存机制：缓存位置缓
2021-03-17 22:37:29
90
原创 21、前端存储（缓存）
21.1 存储涉及面试题：有几种方式可以实现存储功能，分别有什么优缺点？什么是 Service Worker？cookie，localStorage，sessionStorage，indexDB特性cookielocalStoragesessionStorageindexDB数据生命周期一般由服务器生成，可以设置过期时间除非被清空否则一直存在页面关闭就清理除非被清空否则一直存在数据存储大小4k5M5M无限是否与服务器通信每次都会携带在he
2021-03-17 22:04:53
148
原创 20、Ajax的请求过程
20.1 Ajax是什么Ajax 是一种客户端向服务器请求数据的方式。不需要去刷新整个页面，对于改善用户的体验和程序的性能很有帮助。1. 简单封装的一个函数：(1)创建`XMLHttpRequest`对象, 也就是创建一个异步调用对象.(2)创建一个新的`HTTP`请求, 并指定该`HTTP`请求的方法、`URL`及验证信息.(3)设置响应`HTTP`请求状态变化的函数.(4)发送`HTTP`请求.(5)获取异步调用返回的数据.(6)使用JavaScript和DOM实现局部刷新.&l
2021-03-17 21:44:52
388
原创 19、跨域、同源策略及跨域实现方式和原理
19.1 跨域涉及面试题：什么是跨域？为什么浏览器要使用同源策略？你有几种方式可以解决跨域问题？了解预检请求嘛？同源策略限制以下几种行为：1.) Cookie、LocalStorage 和 IndexDB 无法读取2.) DOM 和 Js对象无法获得3.) AJAX 请求不能发送因为浏览器出于安全考虑，有同源策略/SOP（Same origin policy）。也就是说，如果协议、域名或者端口有一个不同就是跨域，Ajax 请求会失败。那么是出于什么安全考虑才会引入这种机制呢？ 其实主
2021-03-16 21:00:24
516
原创 18、进程、线程与协程
18.1 进程与线程涉及面试题：进程与线程区别？JS 单线程带来的好处？JS 是单线程执行的，但是你是否疑惑过什么是线程？讲到线程，那么肯定也得说一下进程。本质上来说，两个名词都是 CPU 工作时间片的一个描述。进程描述了 CPU 在运行指令及加载和保存上下文所需的时间，放在应用上来说就代表了一个程序。线程是进程中的更小单位，描述了执行一段指令所需的时间把这些概念拿到浏览器中来说，当你打开一个 Tab 页时，其实就是创建了一个进程，一个进程中可以有多个线程，比如渲染线程、JS 引擎线程、
2021-03-16 20:03:16
136
原创 17、JavaScript的垃圾回收机制
17.1 什么是垃圾一般来说没有被引用的对象就是垃圾，就是要被清除。有个例外如果几个对象引用形成一个环，互相引用，但根访问不到它们，这几个对象也是垃圾，也要被清除。编写JavaScript程序时，垃圾收集器会按照固定的时间间隔周期性的执行垃圾回收。JavaScript中最常用的垃圾收集方式是标记清除，不太常见的垃圾收集策略是引用计数，无法解决循环引用的问题...
2021-03-15 17:39:44
307
1
原创 16、Array.sort()方法和实现机制
每个浏览器中对排序方法的实现都不太一样Google的Chrome浏览器的JavaScript引擎是：V8——数组长度小于等于 10 的用插入排序InsertionSort，比10大的数组则使用快速排序 QuickSortMozilla的Firefox浏览器的JavaScript引擎是：SpiderMonkey——归并排序源码Safari浏览器的JavaScript引擎是：Nitro（JavaScriptCore ）——桶排序和归并排序IE浏览器的JavaScript引擎是：Chakra——使用.
2021-03-15 16:18:26
673
原创 14、Object.create()、new Object()和{}的区别
14.1 三者的区别字面量和new关键字创建的对象是Object的实例，原型指向Object.prototype，继承内置对象ObjectObject.create(arg, pro)创建的对象的原型取决于arg，arg为null，新对象是空对象，没有原型，不继承任何对象；arg为指定对象，新对象的原型指向指定对象，继承指定对象14.2 Object.create()Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__MDN-Object.
2021-03-15 11:25:57
209
原创 13、函数防抖和函数节流
13.1 函数防抖和函数节流优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover，input输入框的keypress等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制。13.2 函数防抖在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。function debounce(fn, delay) { var timer;
2021-03-15 10:18:00
105
原创 ES6之必学必会
// 三个常量用于表示状态const PENDING = 'pending'const RESOLVED = 'resolved'const REJECTED = 'rejected'function MyPromise(fn) { const that = this this.state = PENDING // value 变量用于保存 resolve 或者 reject 中传入的值 this.value = null // 用于保存 then 中的
2021-03-13 14:51:08
141
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人