![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
题词策
总有一天你会站在世界最亮的地方。活成自己渴望的模样
展开
-
PWA(渐进式 web 应用)
Progressive Web Application背景PWA 全称是渐进式 web 应用,它是用一系列前端技术来实现的,目标是提供类似原生APP一样的体验。解决的问题:Web 的用户体验首屏加载速度网页离线无法访问用户留存Native App 安装完毕桌面上有一个入口Native App 能够通过发送通知让用户再次回到应用中来Web App需要记住URL并输入地址Device API 的不完善Native App 更方便访问设备硬件和设备上的数据WebAPI原创 2020-06-27 09:38:06 · 575 阅读 · 0 评论 -
JS线程__详解
JS线程很多文章在介绍线程以及线程之间的关系,都存在着脱节的现象。还有的文章过于广大,涉及到了内核,本文希望以通俗易懂的话去描述晦涩的词语,可能会和实际有一丢丢的出入,但是更易理解。我们都知道JS是单线程的,即js的代码只能在一个线程上运行,也就说,js同时只能执行一个js任务,但是为什么要这样呢?这与浏览器的用途有关,JS的主要用途是与用户互动和操作DOM。设想一段JS代码,分发到两个并行互不相关的线程上运行,一个线程在DOM上添加内容,另一个线程在删除DOM,那么会发生什么?以哪个为准?所以为了避免原创 2020-06-15 09:29:39 · 3319 阅读 · 1 评论 -
常见兼容问题
如何处理兼容问题在JS代码里使用对象检测,判断该特性是否支持 eg:‘XMLHttpRequest’ in window‘WebkitMask’ in document.documentElement.style使用postcss做样式的后处理样式问题清除浏览器默认样式引入common.css或reset.css重置默认样式引入common.css或reset.css重置默认样式引入common.css或reset.css重置默认样式;Ios滑动卡顿问题body {-webk原创 2020-06-12 00:02:33 · 274 阅读 · 0 评论 -
阿里巴巴笔试+面试
阿里面试考查知识点安全方面:XSS: 跨站脚本攻击(通过input框或者地址栏注入js脚本)CSRF:跨站请求伪造(通过浏览器请求自动携带cookie)SQL注入:路由相关:路由模式(hash,browser)路由传参(url,state, path+query, name+params)路由监听(beforeEach, afterEach, subscribe)路由原理(hashChange + popState)webpack:entryoutputmodules原创 2020-06-09 14:51:07 · 771 阅读 · 2 评论 -
什么是BFC?(CSS)
前言(BFC 神奇背后的原理)BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等)。虽然我知道如何利用 BFC 解决这些问题,但当别人问我 BFC 是什么,我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BFC。一、BFC是什么?在解释 BFC 是什么之前,需要先介绍 Box、Formatting Context的概念。Box: CSS布局的基本原创 2020-06-09 10:27:43 · 311 阅读 · 0 评论 -
前端必看面试(CSS/JS/ES5/ES6等等)
CSS篇:盒模型:怪异模式:box-sizing = border-box, width = content+padding+border标准模式:box-sizing = content-box, width = content垂直居中方法:// 不定宽高{ position: fixed; top: 0; bottom: 0; left: 0; right: 0;}{ display: flex; align-items: ce原创 2020-06-09 10:13:13 · 688 阅读 · 4 评论 -
上传头像源码(JS)
文件上传formData文件上传://源码<input type="file">//支持文件上传,用post方式提交formData对象,键为文件名,值为文件eg:var ele = document.querySelector('input');ele.onchange = function(e){ console.log('e...', e); let files = e.target.files; // 创建一个formData let f原创 2020-06-08 19:47:00 · 534 阅读 · 0 评论 -
前端规范总结
1> 目录规范前后端不分离项目css目录可用于存放css资源文件(包含less,sass等动态样式表语言)。css文件后缀名 必须(MUST) 为.css,less文件后缀名 必须(MUST) 为.less。需要单独区分字体css├── build│ ├── build.js│ └── webpack.dev.js├── src│ ├── assets│ ├── js│ └── css│ ├── componets│ └──原创 2020-06-07 23:40:27 · 223 阅读 · 0 评论 -
React项目build之后资源文件路径 问题解决 背景图片
React项目build之后资源文件路径 问题解决 背景图片1. 找到node_modules -> react-scripts -> config -> paths.js修改function getServedPath(appPackageJson) { const publicUrl = getPublicUrl(appPackageJson); const servedUrl = envPublicUrl || (publicUrl ? url.parse(原创 2020-06-07 23:15:09 · 547 阅读 · 0 评论 -
Async函数_详解(ES7)
Async / awaitPromise的Async/awaitasync/await是es7推出的一套关于异步的终极解决方案,为什么要说他是终极解决方案呢?因为他实在是太好用了,而且写起来还非常的简单。什么是async/await呢?可以总结为一句话:async/await是一对好基友,缺一不可,他们的出生是为Promise服务的。可以说async/await是Promise的进化版。这两个基友必须同时出现,缺一不可语法:1 async function (function re原创 2020-06-07 23:12:47 · 348 阅读 · 0 评论 -
自动构建工具_详解(gulp)
gulp自动构建工具现在的前端开发不再是简单的使用HTML + CSS + JavaScript 这些技术去构建网页应用。我们要提高效率,就必须减少重复的工作。使用less之类预处理的css提供开发阶段更加便利,更加快捷gulp 就是一种可以自动化完成我们开发过程中大量的重复工作预处理语言的编译js css html 压缩混淆图片体积优化gulp是一个前端自动化构建工具。gulp类似的工具:grunt 、webpackgulp是基于node体系的。gulp优点:原创 2020-06-07 23:03:26 · 287 阅读 · 0 评论 -
git+github操作总结
git+github操作总结GitHub:使用HTTPS协议时:需要输入github账户名和密码使用SSH协议时:不需要账户名密码,但是需要配置一次密钥。使用GitHUb 配置公钥秘钥在全局打开 命令提示符输入ssh-keygen (如何解决:提示ssh-keygen不是内部命令)找到生成秘钥的位置,复制文件以.pub结尾的秘钥。在github上“用户”——“settings”——“SSH and GPG keys”——“New SSH key”添加复制的秘钥,title随意取名原创 2020-06-07 22:29:54 · 131 阅读 · 0 评论 -
什么是git
git 初识git 是什么Git是目前世界上最先进的开源的分布式版本控制系统。需要安装git点击安装(注意:安装目录不要在中文下)git config --global user.name xxx(英文用户名)git config --global user.email xxxx(邮箱地址)git config --list 查看全局的配置常用命令添加查看添加到本地仓库(版本库)1:git init2:git add .3:git commit -m “描述”4:原创 2020-06-07 22:21:52 · 146 阅读 · 0 评论 -
代理和跨域JSONP区别
代理和跨域JSONP区别简介:跨域问题是由于浏览器为了防止CSRF攻击,避免恶意攻击而带来的风险而采取的同源策略限制。当一个页面中使用XMLHTTPRequest对象发送HTTP请求时(XHR请求),必须保证当前页面和请求的对象是同源的,即协议、域名和端口号要完全一致,否则浏览器就会阻止此跨域请求返回的数据。http://www.a.com 与 https://www.a.com 是不同源的,它们协议不同http://www.a.com 与 http://www.b.com 是不同源的,它们域原创 2020-06-07 21:44:38 · 214 阅读 · 0 评论 -
HTML5 拖放(Drag 和 Drop)
简介(Drag 和 Drop)拖拽(Drag/Drop)是个非常普遍的功能。在生活中,拖放物品其实是相当常见的一个动作。你可以抓住一个对象,并且拖动到你想放置的区域。HTML5 中提供了直接拖放的 API,极大的方便我们实现拖放效果,不需要去写一大堆的 js,只需要通过监听元素的拖放事件就能实现各种拖放功能。想要拖放某个元素,必须设置该元素的 draggable 属性为 true,当该属性为 false 时,将不允许拖放。而 img 元素和 a 元素(地址-href)都默认设置了 draggabl原创 2020-06-07 21:33:29 · 519 阅读 · 0 评论 -
原型链 解析(JS)
原型链 解析(JS)解读函数的 prototype 属性:每个函数都有一个prototype 属性(显示原型属性),它默认指向一个Object空对象(即称为:原型对象)每个实例对象(new 函数名())都有一个__proto__,称为隐式原型属性。对象的隐式原型的值为其对应构造函数的显式原型的值(内存结构如图所示:)原型对象中有一个属性constructor,它指向函数对象给原型对象添加属性(一般都是方法总结:函数的prototype 属性:在定义函数时自动添加的,默认值是一个空原创 2020-06-07 21:22:47 · 143 阅读 · 0 评论 -
多媒体_详解(audio/video)
多媒体(audio)audio该标签往页面插入音频标签语法:<audio src="song.mp3" controls loop autoplay>浏览器不支持audio标签</audio>浏览器对音频的兼容性大约有80%的浏览器支持HTML5的audio标签,但是并没有一种统一的音频格式。从支持的格式来看,要让所有的浏览器可以播放audio元素上的音频,最佳的方式是提供MP3和Ogg两种格式兼容代码如下:<!--拥有两份源文件的音频播放器--&g原创 2020-06-07 21:10:46 · 555 阅读 · 0 评论 -
什么是 JSON ?
JSON什么是JSON ?JSON : JavaScript Object Notation (JavaScript 对象表示法)JSON : 是轻量级的文本数据交换格式JSON : 独立于语言,支持不同编程语言(PHP,JSP,.NET)JSON 语法规则JSON 语法是 JavaScript 对象表示语法的子集。数据由 键名/值 组成数据由逗号分隔大括号保存对象中括号保存数组JSON 数据的书写格式是:名称/值对。名称/值 包括字段名称(在双引号中),后面写一个冒号原创 2020-06-07 20:45:12 · 184 阅读 · 0 评论 -
刮刮乐案例(canvas)
源代码:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>audio</title> <style type="text/css"> canvas { /* canvas 默认宽高 300*150 css设置的宽高,只能设置canvas对象在页面显示的大小。原创 2020-06-07 20:34:13 · 351 阅读 · 0 评论 -
阻止冒泡和取消默认行为(JS)
冒泡和捕获是事件的两种行为使用 stopPropagation() 起到阻止捕获和冒泡阶段中当前事件的进一步传播。使用 preventDefault() 可以取消默认事件。浏览器通过HTML标签或DOM元素提供的一些功能性的默认行为。- 比如:在a标签href属性上的跳转,form表单里点击提交按钮时网页会产生提交行为并刷新网页等等。我们可以通过js取消或更改这些默认事件。防止冒泡和捕获:w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble原创 2020-06-07 20:28:24 · 313 阅读 · 0 评论