- 博客(48)
- 收藏
- 关注
RSS订阅原创 vue常见面试题
vue常见面试题1.vue优点？答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；双向数据绑定：保留了angular的特点，在数据操作方面更为简单；组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；虚拟DOM：dom操作是非常耗费性能的， 不再使用原生的dom操
2021-03-09 11:53:50
284
原创 computed 和 watch 有什么区别及运用场景
computed：是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；watch：没有缓存性，更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；当我们需要深度监听对象中的属性时，可以打开deep：true选项，这样便会对对象中的每一项进行监听运用场景:当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 co
2021-03-09 11:39:52
567
原创 vue里methods watch和computed的区别和联系
vue常见面试题1.vue优点？答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；双向数据绑定：保留了angular的特点，在数据操作方面更为简单；组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；虚拟DOM：dom操作是非常耗费性能的， 不再使用原生的do
2021-03-09 11:30:44
301
原创 前后端之间的跨域问题 解决方法
跨域问题： 编辑器打开 地址： http://127.0.0.1:5500/day10/front-end/index.html 请求数据接口地址：http://127.0.0.1:3000/userall 报错：has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource什么情况是跨域：同源：协议、 主机
2021-01-20 21:16:46
392
原创 前后端开发需求分析
前端开发1、根据需求文档+产品原型+UI设计图 实现静态页面需求：实现 添加用户 、展示所有用户信息、删除用户、通过姓名搜索用户原型：表单 添加 + 搜索框 + 表格展示UI：2、表格展示的数据 ，通过请求后台数据接口 ，得到数据 ，进行渲染3、点击 表单中的添加 ，将表单数据 通过 请求后台数据接口，发送给后台4、点击 删除按钮 ，请求后台数据接口，进行删除5、点击搜索，请求后台数据接口，得到 搜索结果，进行渲染node后端开发1、实现 http 服务器技术栈：node +
2021-01-20 21:03:06
2104
原创 nodejs里npm包管理器的基本操作命令
1、 使用npm 管理npm init -y 生产项目配置文件 package.json2、通过npm 下载 安装 项目生产依赖 jquery 模块npm install jquery --save3、通过npm 下载 安装 项目开发依赖 zepto 模块npm install jquery --save4、通过npm 卸载 jquery 模块npm uninstall jquery5、通过npm 卸载 zepto 模块npm uninstall zepto发现问题：下载速度 太慢
2021-01-19 18:33:26
99
原创 js arguments伪数组/类数组转数组
js arguments伪数组/类数组转数组 <script> // 实参个数不确定，接收所有实参 function fn(){ console.log( arguments ); // 伪数据/类数组 console.log( arguments.callee);// 当前函数 console.log( Array.from(arguments) ); co
2021-01-18 18:19:50
101
原创 js前端实现分页
js前端实现分页<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <
2021-01-18 18:17:32
569
原创 jquery概述
一、什么是 jQuery ？jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。jQuery库包含以下功能：HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAX二、1.x、2.x、3.x 三大系列的区别下载jquery ： https://www.bootcdn.cn/jquery/jquery.js 有注释，有代码风格 — 开发版-
2021-01-18 18:14:37
116
原创 jquery实现隔行变色
jquery实现表单动态输入隔行变色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./jq
2021-01-18 18:13:30
166
原创 http与https的区别（详解）
HTTP 与 HTTPS 区别HTTP 明文传输，数据都是未加密的，安全性较差，HTTPS（SSL+HTTP） 数据传输过程是加密的，安全性较好。使用 HTTPS 协议需要到 CA（Certificate Authority，数字证书认证机构） 申请证书，一般免费证书较少，因而需要一定费用。证书颁发机构如：Symantec、Comodo、GoDaddy 和 GlobalSign 等。HTTP 页面响应速度比 HTTPS 快，主要是因为 HTTP 使用 TCP 三次握手建立连接，客户端和服务器需要交换
2021-01-16 18:54:37
109
原创 ready和onload的区别
$(document).ready和window.onload的区别：$(document).ready和window.onload都是在都是在页面加载完执行的函数，大多数情况下差别不大。$(document).ready:是DOM结构绘制完毕后就执行，不必等到加载完毕。 意思就是DOM树加载完毕，就执行，不必等到页面中图片或其他外部文件都加载完毕。并且可以写多个.ready。window.onload:是页面所有元素都加载完毕，包括图片等所有元素。只能执行一次。所以，$(document).rea
2021-01-14 20:04:03
271
原创 JS 对象的深拷贝和浅拷贝
顶部css代码深拷贝已经是一个老生常谈的话题了，也是现在前端面试的高频题目。 我们来明确一下深拷贝和浅拷贝的定义：浅拷贝：创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。深拷贝：将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。话不多说，浅拷贝就不再多说，下面我们直入正题：深拷贝已经是一
2021-01-12 20:22:25
89
原创 深拷贝和浅拷贝的定义与代码实现
深拷贝和浅拷贝的定义递归实现深拷贝顶部深拷贝已经是一个老生常谈的话题了，也是现在前端面试的高频题目。我们来明确一下深拷贝和浅拷贝的定义：浅拷贝：创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。深拷贝：将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。话不多说，浅拷贝就不再多说，下面我们
2021-01-12 19:27:30
443
原创 浅拷贝与深拷贝的含义区别及实现
面试的时候，经常会问深拷贝与浅拷贝的问题。因为它可以考察一个人的很多方面，比如基本功，逻辑能力，编码能力等等。另外在实际工作中，也常会遇到它。比如用于页面展示的数据状态，与需要传给后端的数据包中，有部分字段的值不一致的话，就需要在传参时根据接口文档覆写那几个字段的值。最常见的可能就是 status 这个参数了。界面上的展示需要 Boolean 值，而后端同学希望拿到的是 Number 值，1 或者 0。为了不影响展示效果，往往就需要深拷贝一下，再进行覆写，否则界面上就会因为某些值的变化，出现奇怪的现象。
2021-01-12 18:57:06
349
原创 js基础理论面试题
1.工厂模式、原型模式、构造函数模式、组合模式。优缺点2.简述什么是原型3.简述什么是原型链4.简述this指向，如何改变this指向5.new操作符具体干了什么工厂函数// 优点： 返回 新对象，互不影响// 缺点： 代码重复（相同方法）、// 没有从属（不能知道对象从那里来）–>instanceof 只能判断 是 对象，不能判断属于谁原型模式// 优点： 公共/相同 的 属性 、方法 不重复// 有从属关系// 缺点： 原型上的 属性不可单独改变
2021-01-11 08:58:50
136
原创 js前端基础面试题理论题目
1.工厂模式、原型模式、构造函数模式、组合模式。优缺点2.简述什么是原型3.简述什么是原型链4.简述this指向，如何改变this指向5.new操作符具体干了什么工厂函数// 优点： 返回 新对象，互不影响// 缺点： 代码重复（相同方法）、// 没有从属（不能知道对象从那里来）-->instanceof 只能判断 是 对象，不能判断属于谁原型模式// 优点： 公共/相同 的 属性 、方法 不重复// 有从属关系// 缺点： 原型上的 ...
2021-01-09 20:00:48
97
原创 js前端基础面试题理论题目
1.定义函数的方式-字面量创建（函数声明式） function 函数名（）{ }-函数表达式 var 变量名=function （）{ }-构造函数 var 变量名=new Function（）2.argument作用-实参传参的参数多于行参接受的参数，此时用argument接收，形成一个伪数组，-伪数组转数组方法Array.form（）Array.argument.prototype.slice.call（）[…argument]3.判断数据类型方法-typ
2021-01-09 19:56:20
101
原创 对JS闭包的理解
闭包的简介：闭包就是能够读取其他函数内部变量的函数。只有函数内部的子函数才能读取局部变量，在本质上，闭包是函数内部和函数外部连接起来的桥梁。当函数可以记住并访问所在词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。 - - 出自《你不知道的JavaScript（上卷）》闭包的定义：如果在一个内部函数里，对在外部作用域(但不是全局作用域)的变量进行引用，那么内部函数就被认为是闭包(closure)。闭包的特点：可以读取自身函数外部的变量(沿着作用域链寻找)先从自身开始查找，如果自身没
2021-01-08 22:12:44
124
原创 浅谈HTTP与HTTPS区别(http和https区别)
1.HTTP与HTTPS的定义HTTP:超文本传输协议，是一个基于请求与响应，无状态的，应用层的协议，常基于TCP/IP协议传输数据，互联网上应用最为广泛的一种网络协议,所有的WWW文件都必须遵守这个标准。设计HTTP的初衷是为了提供一种发布和接收HTML页面的方法。HTTPSHTTPS （全称：Hyper Text Transfer Protocol over SecureSocket Layer），是以安全为目标的 HTTP 通道，在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性
2020-12-29 20:32:14
217
原创 http和https的区别-详解
目录HTTP与HTTPS介绍HTTPS和HTTP的主要区别客户端在使用HTTPS方式与Web服务器通信时的步骤CA证书的申请及其使用过程HTTPS的缺点SSL与TLS的区别？SSL/TLS历史SSL/TLS协议的基本过程HTTPS涉及的计算环节如何优化HTTPS的速度HTTP与HTTPS介绍超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息，HTTP协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接
2020-12-29 20:27:46
167
原创 js中的this指向
普通函数this指向调用的对象1、全局函数—this指向windowfunction a(){console.log(this);//window}a()2、对象中的函数this指向当前对象var obj={say:function(){console.log(this);// obj}}obj.say();3.事件中的this指向发生事件的dom对象 点击4.定时器，这里的this指向window（常见面试题之一）setTimeout(function(){con
2020-12-27 17:11:47
77
原创 带你实现一个 JSONP 实例
带你实现一个 JSONP 实例JSONP 被用于跨域获取数据。在讲解它之前，先讲讲它与 JSON 之间的区别什么是JSON？JSON 是一种基于文本的数据交换方式，或者叫做数据描述格式。其优点是：1、基于纯文本，跨平台传递极其简单；2、Javascript 原生支持，后台语言几乎全部支持；3、轻量级数据格式，占用字符数量极少，特别适合互联网传递；4、可读性较强，虽然比不上 XML 那么一目了然，但在合理的依次缩进之后还是很容易识别的；5、容易编写和解析，当然前提是你要知道数据结构；JSO
2020-12-27 16:16:22
261
转载 Jsonp及其实现原理
Jsonp及其实现原理一、先说说JSON首先JSON是一种基于文本的数据交换方式，或者叫做数据描述格式。JSON的优点：基于纯文本，跨平台传递极其简单；Javascript原生支持，后台语言几乎全部支持；轻量级数据格式，占用字符数量极少，特别适合互联网传递；可读性较强，虽然比不上XML那么一目了然，但在合理的依次缩进之后还是很容易识别的；容易编写和解析，当然前提是你要知道数据结构；二、同源策略一个众所周知的问题，由于同源策略，Ajax直接请求普通文件存在跨域无权限访问的问题。同源策略，
2020-12-27 16:01:11
332
转载 json解决跨域的实现方法及原理
json解决跨域的实现方法及原理ajax跨域先了解一下同源策略同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能MDN官方给定的概念：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互这是一个用于隔离潜在恶意文件的重要安全机制通俗的理解：浏览器规定，A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互例如： ① 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB ② 无法接触
2020-12-27 15:52:11
2124
转载 深入浅出JSONP--解决ajax跨域问题
取不到数据！ 上周客户新买了服务器，原本在旧的服务器上放着客户的Web主页信息和一个后台程序(asp.net)，在客户的主页中有一个动态显示最新消息的处理，这个处理就是通过ajax异步从那个后台程序中取得的。由于又购买了新的服务器，客户想把web主页和那个后台程序分开来，后台程序被部署到了新的服务器上。不过这个项目是我的同事小福同志开发的，也就由他来把程序分开部署，然后进行一些小改动。"怎么最新消息取不到了，异步处理的url也已经添加上新服务器的地址(http://xxxx.com/…/news.as
2020-12-27 15:35:24
74
原创 浅谈 JSONP 的原理与实现
一、什么是JSONP1.1 同源策略如果两个页面拥有相同的协议，端口（如果指定），和主机，那么这两个页面就属于同一个源。同源策略分为：DOM同源策略：禁止对不同源页面DOM进行操作XMLHttpRequest同源策略：禁止向不同源的地址发起HTTP请求由此可见，Ajax禁止跨域。1.2 JSONP的原理JSONP是JSON with Padding的简称，一般用来解决Ajax跨域的问题。它是这样产生的：页面上调用js文件时不受跨域的影响，而且，凡是拥有src属性的标签都拥有跨域的能力，比如
2020-12-27 15:30:07
179
原创 jQuery实现轮播图效果图
如何用 jQuery 实现轮播图直接点击 对应的链接看对应具体代码注释很详细了，就不做赘述了一定一定不要忘记加入 jQuery顶部html代码css代码js代码方便你们复制，直接来一个全部的全部在一起的代码html代码回到顶部查看其他代码 <!-- 设置点击原点，切换相应的图片 --> <ul class="ul_2">
2020-12-26 18:45:16
1288
4
原创 js的六种继承方式及其优缺点
一、原型链继承 /* 原型链： JavaScript中实现继承最简单的方式就是使用原型链，将子类型的原型指向父类型的实例即可，即“子类型.prototype = new 父类型();”，实现方法如下： */ //为父类型创建构造函数 function SuperType () { this.name = ['zc','ls','ww']; this.property = true; } //为父类型添加方法 SuperType.proto
2020-12-26 18:28:08
219
原创 简单高效的理解js原型链--js面向对象编程
（一看就懂，但18岁以下请绕道）原型链理解起来有点绕了，网上资料也是很多，每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看，效果极好。不要纠结于那一堆术语了，那除了让你脑筋拧成麻花，真的不能帮你什么。简单粗暴点看原型链吧，想点与代码无关的事，比如人、妖以及人妖。1）人是人他妈生的，妖是妖他妈生的。人和妖都是对象实例，而人他妈和妖他妈就是原型。原型也是对象，叫原型对象。2）人他妈和人他爸啪啪啪能生出一堆人宝宝、妖他妈和妖他爸啪啪啪能生出一堆妖宝宝，啪啪啪就是构造函数，俗称造人。3）人他
2020-12-26 18:09:24
150
原创 Javascript面向对象三大特性详解及创建对象的各种方法
Javascript面向对象三大特性（封装性、继承性、多态性）详解及创建对象的各种方法Javascript基于对象的三大特征和C++，Java面向对象的三大特征一样，都是封装(encapsulation)、继承(inheritance )和多态(polymorphism )。只不过实现的方式不同，其基本概念是差不多的。其实除三大特征之外，还有一个常见的特征叫做抽象(abstract)，这也就是我们在一些书上有时候会看到面向对象四大特征的原因了。一、封装性封装就是把抽象出来的数据和对数据的操作封装在一起
2020-12-26 17:31:02
233
原创 js面向对象及面向对象的三大特性
一：js面向对象编程在es5中我们是这样去写面向对象的编程方式的：function Person(name) { //构造函数里面的方法和属性 this._name = name; this.getName = function () { console.log(this._name); }; this.setName = function (name) { this._name = name; }; }
2020-12-26 17:21:15
136
原创 js（javascript）实现继承的6种方式以及优缺点详解
js继承的6种方式想要继承，就必须要提供个父类（继承谁，提供继承的属性） 一、原型链继承 重点：让新实例的原型等于父类的实例。 特点：1、实例可继承的属性有：实例的构造函数的属性，父类构造函数属性，父类原型的属性。（新实例不会继承父类实例的属性！） 缺点：1、新实例无法向父类构造函数传参。 2、继承单一。 3、所有新实例都会共享父类实例的属性。（原型上的属性是共享的，一个实例修改了原型属性，另一个实例的原型属性也会被修改！） 二、
2020-12-26 17:14:48
2054
原创 URL含义详解-一个完整URL各部分的含义详解
构造一个完整URL例子：http://www.aspxfans.com:8080/news/index.asp?boardID=5&ID=24618&page=1#r_70732423一个完整的URL包括：协议、域名、端口、虚拟目录、文件名、参数、锚1.协议部分：该URL的协议部分为“http：”，这代表网页使用的是HTTP协议。在Internet中可以使用多种协议，如HTTP，FTP等等本例中使用的是HTTP协议。在”HTTP”后面的“//”为分隔符2.域名部分：该URL的域名部分
2020-12-25 11:38:24
6252
2
原创 URL详解各部分的含义
统一资源定位符（URL）是用于完整地描述Internet上网页和其他资源的地址的一种标识方法。Internet上的每一个网页都具有一个唯一的名称标识，通常称之为URL地址，这种地址可以是本地磁盘，也可以是局域网上的某一台计算机，更多的是Internet上的站点。简单地说，URL就是Web地址，俗称“网址”。 URI 方案集，包含如何访问 Internet 上的资源的明确指令。 URL 是统一的，因为它们采用相同的基本语法，无论寻址哪种特定类型的资源（网页、新闻组）或描述通过哪种机制获取
2020-12-25 11:32:17
2621
原创 HTTP常见状态码
HTTP状态码表示客户端HTTP请求的返回结果、标记服务器端的处理是否正常或者是出现的错误，能够根据返回的状态码判断请求是否得到正确的处理很重要。HTTP状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字没有分类的作用。HTTP状态码共分为5种类型：分类分类描述1**信息，服务器收到请求，需要请求者继续执行操作2**成功，操作被成功接收并处理3**重定向，需要进一步的操作以完成请求4**客户端错误，请求包含语法错误或无法完成请求5**服务器错误，服务器在处理请求的过程
2020-12-23 18:39:32
155
原创 jquery/jq实现折叠菜单
css代码<style type="text/css"> li{ list-style: none; } .menu>li>ul{ display: none; } h1{ cursor: pointer; }</style>//引入jquery<script src="js/jquery-3.5.1.js" type="text/javascript"></script>h
2020-12-23 12:07:50
304
原创 jquery/jq实现tab切换/选项卡功能
css代码 <style> *{ margin: 0 auto; padding: 0; list-style: none; } #ul{ width: 500px; display: flex; border: 1px solid orange; } #ul{
2020-12-23 12:04:31
922
1
转载 你不知道 的JS 技巧
1.三元运算符新手let hungry = true;let eat; if (hungry == true) { eat = 'yes'; } else { eat = 'no';}老手let hungry = true;let eat = hungry == true ? 'yes' : 'no';2.数字转字符串/字符串转数字新手let num = 15; let s = num.toString(); // number to string
2020-12-22 19:51:51
80
转载 关于【HTTP协议】的详细解读
HTTP协议详解一.HTTP简介1.HTTP协议，即***超文本传输协议***(Hypertext transfer protocol)。是一种详细规定了***浏览器和万维网(WWW = World Wide Web)服务器***之间互相通信的规则，通过因特网传送万维网文档的数据传送协议。2.HTTP协议作为TCP/IP模型中应用层的协议也不例外。HTTP协议通常承载于TCP协议之上，有时也承载于TLS或SSL协议层之上，这个时候，就成了我们常说的HTTPS。如下图：3.HTTP是一个***应用层
2020-12-22 19:31:11
306
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人