前端
文章平均质量分 84
十一T_T
这个作者很懒,什么都没留下…
展开
-
ES6-promise
1.promise对象是一个代理对象,一个代表为知返回结果的对象值。原创 2022-12-05 11:09:14 · 334 阅读 · 0 评论 -
vite插件
vite插件原创 2022-12-01 18:04:42 · 3255 阅读 · 0 评论 -
React中组件通信有哪些方式
React中组件通信有哪些方式原创 2022-10-18 17:57:33 · 3897 阅读 · 0 评论 -
9种常见的前端跨域解决方案(详解)
一、什么是跨域? 在前端领域中,跨域是指浏览器允许向服务器发送跨域请求,从而克服Ajax只能同源使用的限制。什么是同源策略? 同源策略是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。 同源策略限制以下几种行为:Cookie、LocalStorage 和 IndexDB 无法读取 DOM和J原创 2022-05-07 16:17:12 · 3737 阅读 · 1 评论 -
vue3.2版本新特性
1. 新的单文件组件功能<script setup>是一种编译时语法糖,可在SFC (单文件组件,也就是我们常说的.vue 文件)内使用 Composition API 时极大地提升工作效率。<style> v-bind在 SFC 标签中启用组件状态驱动的动态 CSS 值。<style><template> <div class="button" @click="color = color==='red'?'green':'red'"...原创 2021-09-18 17:59:51 · 3996 阅读 · 0 评论 -
npm package.json属性详解
目录概述nameversiondescriptionkeywordshomepagebugslicense和用户相关的属性: author, contributorsfilesmainbinmandirectoriesdirectories.libdirectories.bindirectories.mandirectories.docdirectories.examplerepositoryscriptsconfi..原创 2021-09-07 10:47:17 · 549 阅读 · 0 评论 -
前端面试必备技巧
一、页面布局三栏布局题目:假设高度已知,请写出三栏布局,其中左栏、右栏宽度各为 300px,中间自适应。解答:可以有很多种布局方式,这里列出五种:float布局,absolute布局,flex布局,table布局,grid布局,代码如下:<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" conten原创 2020-09-23 15:43:51 · 458 阅读 · 0 评论 -
前端知识体系(2)-vue篇
1.什么是mvvmMVVM的核心是数据驱动即ViewModel,ViewModel是View和Model的关系映射。MVVM本质就是基于操作数据来操作视图进而操作DOM,借助于MVVM无需直接操作DOM,开发者只需编写ViewModel中有业务,使得View完全实现自动化。2.什么是 SPA 单页面,它的优缺点分别是什么SPA( single-page application )即一个web项目就只有一个页面(即一个HTML文件,HTML 内容的变换是利用路由机制实现的。仅在 Web页面初始.原创 2020-09-22 20:31:25 · 401 阅读 · 0 评论 -
JS经典试题(1)
let a={},b='0',c=0a[b]='电脑'a[c]='书籍'console.log(a[b])//书籍 数字属性名==字符串属性名let a={},b=Symbol('1'),c=Symbol('1') //symbol 创建唯一值a[b]='电脑'a[c]='书籍'console.log(a[b])//电脑let a={},b={n:'1'},c={m:'2'} //[object,object]a[b]='电脑'a[c]='书籍'console.log(.原创 2020-09-01 21:43:49 · 326 阅读 · 0 评论 -
ajax、fetch、axios区别
ajax、fetch、promise、axios、async/awaitAJAX(Asynchronous Javascript And XML)异步JS和XML,是一种异步请求技术。ajax技术是实现网页的局部数据的刷新,你可以通过XHR、fetch、websocket等API实现。Axios在NPM上的描述是:Promise based HTTP client for the brow...原创 2019-12-30 22:05:00 · 513 阅读 · 0 评论 -
web 前端性能优化汇总
性能优化原创 2019-11-16 19:42:19 · 104 阅读 · 0 评论 -
用 CSS 和 D3 创作火焰动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div clas翻译 2018-08-20 11:40:48 · 385 阅读 · 0 评论 -
前端三大主流框架
随着时间和技术的发展,前端框架从jQuery一家独大的情况,发展到现在的Angular、Vue、React三足鼎立的情况,三个框架各有优略,也都是比较成熟。React :1.声明式设计:React采用声明范式,可以轻松描述应用。2.高效:React通过对DOM的模拟,最大限度地减少与DOM的交互。3.灵活:React可以与已知的库或框架很好地配合。优点:1. 速度快:在UI渲染过程中...原创 2019-04-07 22:57:57 · 3956 阅读 · 0 评论 -
Ajax原理
一、什么是AjaxAjax(Asynchronous JavaScript and XML的缩写)是一种异步请求数据的web开发技术,对于改善用户的体验和页面性能很有帮助。简单地说,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并在网页上呈现出来。常见运用场景有表单验证是否登入成功、百度搜索下拉框提示和快递单号查询等等。Ajax目的:提高用户体验,较少网络数据的传输量。...原创 2019-04-12 00:38:35 · 148 阅读 · 0 评论 -
用CSS绘制图形和形状
//太极八卦图.warp{ width: 300px; height: 300px; border-radius: 50%; background: linear-gradient(to right,#fff 50%,#000 50%); } .inner{ ...原创 2019-04-18 20:11:57 · 273 阅读 · 0 评论 -
Promise里的代码为什么比setTimeout先执行?
Promise里的代码为什么比setTimeout先执行?下面是一段代码,分析下面这段代码:var r = new Promise(function(resolve, reject){console.log("a");resolve()});setTimeout(()=>console.log("d"), 0)r.then(() => console.log(...原创 2019-05-25 22:28:17 · 1434 阅读 · 1 评论 -
JSON
一、JSON是什么?有一种叫做JSON (JavaScript Object Notation) 的轻量级数据交换格式能够替代XML的工作。它就是JSON。1.数据格式比较简单, 易于读写, 格式都是压缩的, 占用带宽小。2.易于解析这种语言,客户端JavaScript可以简单的通过eval()进行JSON数据的读取。3.包括ActionScript, C, C#, ColdFusion,...原创 2019-04-04 14:15:36 · 118 阅读 · 0 评论 -
ES6数组
array.from():array.from()函数的用法: 将两种对象转换成数组。1.部署了Iterator接口的对象,比如:Set,Map,Array。2.类数组对象,什么叫类数组对象,就是一个对象必须有length属性,没有length,转出来的就是空数组。1、将类数组对象转换为真正数组:let arrayLike = { 0: 'tome', 1: '20'...原创 2018-09-09 23:28:50 · 223 阅读 · 0 评论 -
前端面试分析
1.什么情况下会碰到跨域问题?有哪些解决方法?跨域问题是这是浏览器为了安全实施的同源策略导致的,同源策略限制了来自不同源的document、脚本,同源的意思就是两个URL的域名、协议、端口要完全相同。script标签jsonp跨域、nginx反向代理、node.js中间件代理跨域、后端在头部信息设置安全域名、后端在服务器上设置cors。2.如何判断一个变量是对象还是数组?判断数组和对象分别都...原创 2018-09-03 22:39:28 · 279 阅读 · 0 评论 -
web--interview_day1
1.Doctype作用?严格模式与混杂模式有什么区别?<!DOCTYPE>声明叫做文件类型定义(DTD),声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。怪异模式(即兼容模式)服务于旧式规则,严格模式服务于标准规则。标准模式(浏览器按W3C标准解析执行代码)/怪异模式(兼容老页面,使用浏览器自己的方法解析执行代码,使用一种比较宽松的向后兼容的方式...原创 2018-09-04 23:29:05 · 244 阅读 · 0 评论 -
css3混合模式mix-blend-mode
什么是图层混合模式 ?简单的理解,图层混合模式就是几个图层叠在一起,然后采用不同的层叠方式,实现层叠效果。 CSS3混合模式种类在CSS3混合模式中,目前仅有16种:normal,multiply,screen,overlay,darken,lighten,color-dodge,color-burn,hard-light,soft-light,difference,exclusion,hu...转载 2018-08-20 17:19:26 · 1599 阅读 · 0 评论 -
H5 新特性
1. 新增表单类型: email(电子邮件地址输入框)代码示例: <input type=“email” /> 输入内容中必须包含@,并且@后需要有内容url(网址输入框)代码示例: <input type="url" /> 输入的网址要加上协议前缀;如http://、https:// 等number(数值输入框)代码示例: <inpu...原创 2018-08-20 13:52:47 · 312 阅读 · 0 评论 -
纯 CSS 创作一只愤怒小鸟中的黑炮
BlackBombInAngryBirds.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="styl转载 2018-08-19 21:12:22 · 249 阅读 · 0 评论 -
PC端页面布局
1. a标签与4个伪类:link 选择所有未访问的链接(没有被点击过的链接) ; :visited 选择已经被访问过的链接 ; :hover 设置鼠标悬停时的链接样式 ; :active 选择所有激活的链接(正在被点击的链接);注意: :hover 必须在 :link 和 :visited 后定义才能有效! :active 必须在 :hover 后定义才能有效. 伪类名称不区分大小...原创 2018-08-19 17:07:24 · 3571 阅读 · 0 评论 -
弹性盒模型&响应式布局
1.移动端布局与PC端的区别PC端最常用的布局是固定宽度(980px,960px,1000px,1200px);移动端网页是可以横屏看也可以竖屏看,屏幕的分辨率不同,固定宽度的布局必然是不可行的。 PC端布局考虑更多的是浏览器的兼容性;移动端,考虑更多的是手机屏幕分辨率不同的兼容性。 PC端浏览器内核有很多,Trident(IE内核),Gecko(Firefox内核),Webkit(Saf...原创 2018-08-19 11:07:38 · 2696 阅读 · 0 评论 -
请谈谈mvc、mvp和mvvm模式
请谈谈mvc、mvp和mvvm模式。1、MVC:MVC是应用最广泛的软件架构之一,一般MVC分为:Model( 模型 )、Controller( 控制器 )、View( 视图 )。这主要是基于分层的目的,让彼此的职责分开。View 一般通过 Controller 来和 Model 进行联系。Controller是 Model 和 View 的协调者,View和Model不直接联系。...原创 2018-09-09 23:42:49 · 199 阅读 · 0 评论 -
浅谈Script / JavaScript
浅谈Script标签:属性<script>拥有7个属性。async boolean异步执行该脚本,但不保证按照指定它们的先后顺序执行defer boolean通知浏览器该脚本将在文档完成解析后遇到</html>,并会按照它们出现的先后顺序执行。但会在触发 DOMContentLoaded 事件前执行。integrity包含用户代理可用于验证已提取资源是否...原创 2018-10-22 18:43:20 · 915 阅读 · 0 评论 -
jqueryAPI
入口函数:$(document).ready(function(){ console.log("jquery入口函数") }) ;$(function(){ console.log("jquery入口函数") }) ;window.onload= function(){ console.log("js入口函数") } js入口函数执行比jquery入口函数执行晚;都会等待文档加...原创 2019-02-24 17:34:52 · 300 阅读 · 0 评论 -
旋转木马 -- 拖拽的对话框 ---- 高清放大镜 -----自制滚动条
旋转木马:@charset "UTF-8";/*初始化 reset*/blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}body,button,input,select,text...原创 2018-12-17 00:21:32 · 226 阅读 · 0 评论 -
JavaScript -- webAPI 随记02
模拟百度搜索:<div id="box"><input type="text" id="txt" value=""><input type="button" value="搜索" id="btn"></div>var keyWords = [&qu原创 2018-12-17 23:49:06 · 162 阅读 · 0 评论 -
闭包和作用域
作用域与作用域链作用域[[scope]]:每个javascript函数都是一个对象,对象中有些属性我们可以访问,但有些不能访问,不能访问的属性仅供javascript内部调用,[[scope]]就是其中的一个。[[scope]]指的就是作用域,其中存储了运行期上下文的集合(之前介绍的AO活动对象)作用域链:[[scope]]中所存储的执行期上下文对象的集合,这个集合呈链式链接,这种链式链接...原创 2018-11-29 19:45:19 · 226 阅读 · 0 评论 -
典型的JavaScript面试题
问题1:范围(Scope)思考以下代码: 控制台(console)会打印出什么?答案上述代码会打印出 5 。这个问题的陷阱就是,在立即执行函数表达式(IIFE)中,有两个命名,但是其中变量是通过关键词var来声明的。这就意味着a是这个函数的局部变量。与此相反,b是在全局作用域下的。这个问题另一个陷阱就是,在函数中他没有使用_“严格模式”_('usestrict';)。如果严格模式...原创 2018-11-29 19:25:34 · 188 阅读 · 0 评论 -
animation心形--表白
animation心形线 -- 表白*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/body{background:#000;}.heart3d { position:...原创 2018-11-24 18:52:33 · 1864 阅读 · 0 评论 -
JavaScript -- webAPI 随记
API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。- 任何开发语言都有自己的API- API的特征输入和输出(I/O)- API的使用方法(console.log())Web API的概念浏览器提供的一套操作浏...原创 2018-12-06 00:33:16 · 315 阅读 · 0 评论 -
小程序---抽奖轮盘制作
<view class='background-image'> <image src='pointer.png' class='point' bindtap="start"></image> <image src='turn.png' class='turn' animation="{{rotateData}}"></imag原创 2018-11-07 00:14:44 · 2264 阅读 · 0 评论 -
小程序Canvas
<view class = "canvas-area"> <canvas canvas-id = "myCanvas" class = "myCanvas" disable-scroll = "false" bindtouchstart = "touchStart" bindtouchmove = "touchMove" />原创 2018-10-31 00:48:41 · 157 阅读 · 0 评论 -
移动端和PC端的区别
1. PC考虑的是浏览器的兼容性,而移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器使用的都是webkit内核,所以说做移动端开发,更多考虑的应该是手机分辨率的适配,和不同操作系统的略微差异化。2. 在部分事件的处理上,移动端多出来的事件是触屏事件,而缺少的是hover事件。 另外包括移动端弹出的手机键盘的处理,这样的问题在PC端都是遇不到的。 3...原创 2018-07-31 22:13:10 · 3093 阅读 · 1 评论