前端
多纤果冻
superme
展开
-
eslint 强行将let 转化成const解决方法
在eslintrc.js中rules添加'prefer-const ':'false'原创 2020-05-28 17:23:40 · 6103 阅读 · 2 评论 -
js阻止默认事件和中止冒泡
<div onClick={e => { e.preventDefault() //阻止默认事件 e.stopPropagation() //阻止冒泡 }}></div>原创 2021-10-04 18:34:59 · 339 阅读 · 0 评论 -
解决谷歌浏览器不支持cookie的问题(单点登录依赖cookie)
在浏览器地址栏里输入:chrome://flags/搜索same-site将这两个SameSite配置禁用原创 2021-10-04 13:49:42 · 2818 阅读 · 2 评论 -
moment.js获取本周本月本年日期及具体时分秒
引用moment代码// 本周let start = moment().startOf('week')let end = moment().endOf('week')// 本月let start = moment().startOf('month')let end = moment().endOf('month')// 本年let start = moment().startOf('year')let end = moment().endOf('year')//获...原创 2021-06-02 03:20:59 · 4080 阅读 · 0 评论 -
Vue怎么操作父元素、兄弟元素、子元素
<button @click = “clickfun($event)”>点击</button>methods: {clickfun(e) {// e.target 是你当前点击的元素// e.currentTarget 是你绑定事件的元素#获得点击元素的前一个元素e.currentTarget.previousElementSibling....原创 2020-03-26 10:50:28 · 2520 阅读 · 0 评论 -
JS实现字符串中去除指定子字符串
平时开发中经常需要去除字符串指定子字符,下面是两种可靠的方法<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script&...原创 2019-10-22 15:56:34 · 9181 阅读 · 0 评论 -
Js学习之console 对象
console对象是 JavaScript 的原生对象,它有点像 Unix 系统的标准输出stdout和标准错误stderr,可以输出各种信息到控制台,并且还提供了很多有用的辅助方法。console的常见用途有两个。调试程序,显示网页代码运行时的错误信息。 提供了一个命令行接口,用来与网页代码互动。console对象的浏览器实现,包含在浏览器自带的开发工具之中。以 Chrome ...转载 2019-05-12 13:15:24 · 720 阅读 · 0 评论 -
Js之定时器学习
JavaScript 提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成。它们向任务队列添加定时任务。setTimeout()setInterval()clearTimeout(),clearInterval()实例:debounce 函数运行机制setTimeout(f, 0)...转载 2019-05-12 12:34:03 · 220 阅读 · 0 评论 -
Js 学习之Promise 对象
概述Promise 对象的状态Promise 构造函数Promise.prototype.then()then() 用法辨析实例:图片加载小结微任务参考链接概述Promise 对象是 JavaScript 的异步操作解决方案,为异步操作提供统一接口。它起到代理作用(proxy),充当异步操作与回调函数之间的中介,使得异步操作具备同步操作的接口。P...转载 2019-05-12 00:21:49 · 137 阅读 · 0 评论 -
VS Code 的常用快捷键和插件
一、vs code 的常用快捷键1、注释: a)单行注释:[ctrl+k,ctrl+c] 或 ctrl+/ b)取消单行注释:[ctrl+k,ctrl+u] (按下ctrl不放,再按k + u) c)多行注释:[alt+shift+A] d)多行注释:/**2、移动行:alt+up/down3、显示/隐藏左侧目录栏ctrl + b4、复制当...原创 2019-05-07 18:25:08 · 318 阅读 · 0 评论 -
一名【合格】前端工程师的自检清单
开篇前端开发是一个非常特殊的行业,它的历史实际上不是很长,但是知识之繁杂,技术迭代速度之快是其他技术所不能比拟的。winter在他的《重学前端》课程中提到:到现在为止,前端工程师已经成为研发体系中的重要岗位之一。可是,与此相对的是,我发现极少或者几乎没有大学的计算机专业愿意开设前端课程,更没有系统性的教学方案出现。大部分前端工程师的知识,其实都是来自于实践和工作中零散的学习。...转载 2019-05-09 00:42:26 · 274 阅读 · 1 评论 -
CSS垂直居中的七个方法
我们在编辑一个版面,通常都会用到水平居中和垂直居中来设计,而水平居中很好处理,不外乎就是设定margin:0 auto;或是text-align:center;,就可以轻松解决掉水平居中的问题,但一直以来最麻烦对齐问题,都是“垂直居中”这个讨人厌的设定,以下将介绍七种单纯利用CSS垂直居中的方式。七种垂直居中的方法设定行高(line-height) 添加伪元素 calc动态计算...转载 2019-05-09 00:33:09 · 134 阅读 · 0 评论 -
Js学习之拖拉事件(drag)
拖拉(drag)指的是,用户在某个对象上按下鼠标键不放,拖动它到另一个位置,然后释放鼠标键,将该对象放在那里。拖拉的对象有好几种,包括元素节点、图片、链接、选中的文字等等。在网页中,除了元素节点默认不可以拖拉,其他(图片、链接、选中的文字)都是可以直接拖拉的。为了让元素节点可拖拉,可以将该节点的draggable属性设为true。<div draggable="true"&g...转载 2019-05-12 13:22:03 · 17516 阅读 · 1 评论 -
Js学习之数组(array)
定义数组(array)是按次序排列的一组值。每个值的位置都有编号(从0开始),整个数组用方括号表示。var arr = ['a', 'b', 'c'];上面代码中的a、b、c就构成一个数组,两端的方括号是数组的标志。a是0号位置,b是1号位置,c是2号位置。除了在定义时赋值,数组也可以先定义后赋值。var arr = [];arr[0] = 'a';arr[1] =...转载 2019-05-12 13:45:31 · 672 阅读 · 0 评论 -
微信小程序之上传图片和图片预览
这几天一直负责做微信小程序这一块,也可以说是边做边学习吧,把自己做的微信小程序的一些功能分享出来,与大家探讨一下,相互学习相互进步。先看下效果图只写了一下效果样式的话希望大家不要太在意,下面马路杀手要开车了。1.wxml排版和布局 这个排版非常简单就是一个按钮button加个图片image标签而已,这个相信有点基础的人都能理解,直接放代码:<view ...转载 2019-05-12 15:30:13 · 346 阅读 · 0 评论 -
使用rem.js对移动端进行弹性布局
最近在做移动端的微站项目,既然是移动端,那么一个不可忽视的话题就是不同设备之间的适配。目前市场上有各种品牌的手机,不同手机的屏幕分辨率不同,这就要求我们前端开发人员在做移动端项目的时候,一定要注意手机适配问题。一、 关于rem以及rem.js的推荐文章目前有很多大神的博客里面,已经对rem以及rem.js做了很深入的阐述和解析。所以我就不再进行解释什么是rem这个单位,以...转载 2019-06-12 22:44:31 · 276 阅读 · 0 评论 -
双向绑定Object.defineProperty属性学习
官网的关于数据绑定的说明图:原理图告诉我们,a对象下面的b属性定义了getter、setter对属性进行劫持,当属性值改变是就会notify通知watch对象,而watch对象则会notify到view上对应的位置进行更新(这个地方还没讲清下面再讲),然后我们就看到了视图的更新了,反过来当在视图(如input)输入数据时,也会触发订阅者watch,更新最新的数据到data里面(图中...原创 2019-06-12 12:34:19 · 271 阅读 · 0 评论 -
axios操作详解
axios承诺基于HTTP客户端的浏览器和node.js特征制作,使XMLHttpRequest从浏览器 制作,使http来自node.js的请求 支持承诺API 拦截请求和响应 转换请求和响应数据 取消请求 JSON数据的自动转换 客户端支持防止XSRF浏览器支持 最新✔ 最新✔ 最新✔ 最...翻译 2019-07-14 21:24:11 · 1228 阅读 · 0 评论 -
封装Axios的开发实践
前言前端开发中,如果页面需要与后台接口交互,并且无刷新页面,那么需要借助一下Ajax的http库来完成与后台数据接口的对接工作。在jQuery很盛行的时候,我们会使用$.ajax(),现在,可选择的就更多,例如:SuperAgent、Axios、Fetch…等等。有了这些http库,我们不在需要关注太多与ajax底层相关的细节的问题。很多时候和场景下,只需要关注如何构建一个requ...转载 2019-07-16 11:26:15 · 264 阅读 · 0 评论 -
手动封装ajax
在开始之前先想一想ajax是怎样的流程首先打开一个连接 发送数据 返回结果我们要自定义的设置有哪些设置请求方式 设置请求头 设置返回数据格式 返回成功后或失败后我们要做的功能有哪些数据校验 统一数据的格式 支持文件上传 对于传入参数的容错处理 超时处理 //modify time 2019-01-01经过以上思考基本结构大致成型数据校验 数据格式的统一 ...转载 2019-07-21 15:21:04 · 255 阅读 · 0 评论 -
前端开发工具及调试
前端开发工具 IntelliJ IDEA 简体中文专题教程 Webstorm,InterllIdea,Phpstorm SublimeText Atom Atom飞行手册(中文版) Atom-vue代码高亮 visual studio code Chrome, Firebug, Filddle 调试 Fiddler Fiddler调式...原创 2019-02-01 18:43:06 · 326 阅读 · 0 评论 -
如何安装Sass
安装Sass和Compasssass基于Ruby语言开发而成,因此安装sass前需要安装Ruby。(注:mac下自带Ruby无需在安装Ruby!)window下安装SASS首先需要安装Ruby,先从官网下载Ruby并安装。安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。如下图:安装完成后需测试安装有没有成功,运行C...转载 2019-04-02 21:58:03 · 284 阅读 · 0 评论 -
sass快速入门
1. 使用变量;sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值。或者,对于仅使用过一 次的属性值,你可以赋予其一个易懂的变量名,让人一眼就知道这个属性值的用途。sass使用$符号来标识变量(老版本的sass使用!来标识变量。改成$是多半因为!highlight-color看起来太丑了。...转载 2019-04-02 21:39:54 · 601 阅读 · 1 评论 -
JS节流和防抖的区分和实现详解
本文主要介绍的是关于JS中比较常用的函数:节流函数和防抖函数,从概念、使用场景到代码简单实现做了一个详细的区分。希望对你有所帮助。在写JS时,这两个函数比较常见,有时候傻傻分不清用哪个,或者说知道代码要怎么写,但要说出它究竟是节流函数还是防抖函数时一脸楞逼。今天有一个同学分享了这两个的区分,我也来回顾一下,加深一下印象,以便日后用到时心里有底。PS:百度和谷歌搜索前几个介绍都是相反介绍,...转载 2019-02-14 17:41:54 · 516 阅读 · 0 评论 -
前端开发面试题索引
那几个月在找工作(百度,网易游戏) 名企笔试大全 2016校招内推 -- 阿里巴巴前端 -- 三面面试经历 年后跳槽那点事:乐视+金山+360面试之行 拉勾网js面试题 前端面试 前端开发面试题 百度面试 前端工作面试问题 前端开发面试题 5个经典的前端面试问题 如何面试一名前端开发工程师? 前端实习生面试总结 史上最全 前端开发面试问题及答案整理 BAT及各大互...原创 2019-02-01 19:12:04 · 1179 阅读 · 0 评论 -
常用CDN公共库
CDN公共库是指将常用的JS库存放在CDN节点,以方便广大开发者直接调用。将JS库存放在服务器单机上相比,CDN公共库更加稳定、高速。百度、微软等提供的CDN节点地址,这些CDN公共库为您的应用程序提供稳定、可靠、高速的服务,包含全球所有最流行的开源JavaScript库。新浪CDN 百度静态资源公共库 360网站卫士常用前端公共库CDN服务 Bootstrap中文网开源项目免费 C...原创 2019-02-01 18:52:24 · 1611 阅读 · 0 评论 -
大前端工具集
这个项目的定位是 大前端程序猿的百宝箱。主要针对 前端方向和 Node 方向;主要内容是国内外优秀的 库、工具、套路、设计、交互,或关注的 技术博客、技术组织、技术公众号 等等,反正用 瑞士军刀 来总结这篇文章再合适不过了。目录技术博客/技术组织技术公众号博客搭建HTMLCSS浏览端 JSProject BuildNode PackageNode Pr...转载 2019-02-01 18:37:16 · 1940 阅读 · 0 评论 -
编写理智,可管理,可扩展的CSS的高级建议和指南
在参与规模庞大、历时漫长且参与人数众多的项目时,所有开发者遵守如下规则极为重要:保持 CSS 便于维护 保持代码清晰易懂 保持代码的可拓展性为了实现这一目标,我们要采用诸多方法。本文档第一部分将探讨语法、格式以及分析 CSS 结构;第二部分将围绕方法论、思维框架以及编写与规划 CSS 的态度。CSS 文档分析无论编写什么文档,我们都应当尽力维持统一的风格,包括统一的注释...翻译 2019-02-01 18:21:22 · 392 阅读 · 0 评论 -
GitHub已完全弃用jQuery,问题是为什么?
GitHub已完全弃用jQuery,问题是为什么? 作者 | GitHub 前端工程团队译者 | 无明最近,我们将 jQuery 完全从 GitHub.com 的前端代码中移除了,这标志着我们数年来逐步移除 jQuery 这个渐进式的过程终于结束了,这对我们来说是一件里程碑式的事件。这篇文章将介绍过去我们是如何依赖上 jQuery 的,随着时间地推移,我们意识到不再需要它,但...转载 2018-10-10 22:40:43 · 2839 阅读 · 0 评论 -
响应式布局和自适应布局详解
响应式布局和自适应布局详解 注:响应式布局等于流动网格布局,而自适应布局等于使用固定分割点来进行布局。自适应布局给了你更多设计的空间,因为你只用考虑几种不同的状态。而在响应式布局中你却得考虑上百种不同的状态。虽然绝大部分状态差异较小,但仍然也算做差异。它使得把握设计最终效果变得更难,同样让响应式布局更加的难以测试和预测。但同时说难,这也算是响应式布局美的所在。在考虑到表层级别不确定因素...转载 2018-10-20 08:50:34 · 1106 阅读 · 0 评论 -
使用jQuery在html页面添加新内容
jQuery 添加新内容有以下四个方法: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 下面实例演示:点击按钮则在表格数据区域增加一行1、HTML结构<table id = "test"> ...原创 2019-02-15 18:23:09 · 7172 阅读 · 0 评论 -
利用HTML和CSS实现常见的布局
单列布局水平居中水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的父容器是parent元素)使用inline-block 和 text-align实现.parent{text-align: center;}.child{display: in...转载 2019-02-24 13:00:53 · 227 阅读 · 0 评论 -
什么时候(以及为什么)你应该使用ES6箭头功能
箭头功能(也称为“胖箭头功能”)无疑是ES6最受欢迎的功能之一。他们介绍了一种编写简洁功能的新方法。这是一个用ES5语法编写的函数:function timesTwo(params){ return params * 2 }timesTwo(4); // 8现在,这里的函数表示为箭头函数: var timesTwo = params => params * ...翻译 2019-02-24 23:59:05 · 672 阅读 · 0 评论 -
在单页应用中,如何优雅的监听url的变化
单页应用的原理从早起的根据url的hash变化,到根据H5的history的变化,实现无刷新条件下的页面重新渲染。那么在单页应用中是如何监听url的变化呢,本文将总结一下,如何在单页页面中优雅的监听url的变化。单页应用原理 监听url中的hash变化 监听通过history来改变url的事件 replaceState和pushState行为的监听一、单页应用原理 单页应用...转载 2019-02-13 22:43:12 · 807 阅读 · 1 评论 -
在单页应用中,如何优雅的上报前端性能数据
最近在做一个较为通用的前端性能监控平台,区别于前端异常监控,前端的性能监控主要需要上报和展示的是前端的性能数据,包括首页渲染时间、每个页面的白屏时间、每个页面所有资源的加载时间以及每一个页面中所以请求的响应时间等等。 本文的介绍的是如何设计一个通用的jssdk,可以以较小的侵入性,自动上报前端的性能数据。主要采用的是Performance API以及sendBeacon方法等等。主要参考的是...转载 2019-02-13 22:35:57 · 872 阅读 · 0 评论 -
前端监控和前端埋点方案设计
在线上项目中,需要统计产品中用户行为和使用情况,从而可以从用户和产品的角度去了解用户群体,从而升级和迭代产品,使其更加贴近用户。用户行为数据可以通过前端数据监控的方式获得,除此之外,前端还需要实现性能监控和异常监控。性能监控包括首屏加载时间、白屏时间、http请求时间和http响应时间。异常监控包括前端脚本执行报错等。实现前端监控有三个步骤:前端埋点和上报、数据处理和数据分析。本文针对整...转载 2019-02-13 22:30:50 · 517 阅读 · 0 评论 -
ES6箭头功能深入学习
译自:https://ponyfoo.com/articles/es6-arrow-functions-in-depth 6箭头功能es6-deep- articles文章的每日传奇仍在继续。今天我们将讨论箭头功能。在之前的文章中,我们讨论了解构和模板文字。我力求覆盖所有的东西,当它涉及到ES6功能集-最终,我们将移动到ES7。我发现写这些特征使它们更容易被雕刻在我的头骨上。由于您正在...翻译 2019-02-24 22:09:07 · 174 阅读 · 0 评论 -
居中的css:完全指南(翻译)
译自:https://css-tricks.com/centering-css-complete-guide/这里主要参考的是CHRIS COYIER写的一篇的文章(点击查看),主要讲了关于css水平、垂直居中的一些方法,每个方法后面都有一个demo,可以在线查看效果。1 水平水平居中有行内元素和块元素,行内元素有文字、图片、链接等;块元素主要是div、p等block元素。1...翻译 2019-02-24 19:36:17 · 159 阅读 · 0 评论 -
Webpack初体验
1 .安装Webpack4.0 (1) Node.js 4 is no longer supported. Source Code was upgraded to a higher ecmascript version明确不支持node.js4.X,在本文中使用的是:node -vv8.9.3 (2) CLI has been move to ...转载 2019-02-13 17:39:06 · 124 阅读 · 0 评论 -
响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh)
简要介绍:前端开发中,静态网页通常需要适应不同分辨率的设备,常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发,分析了px在移动端布局中的不足,接着介绍了几种不同的自适应解决方案。 一、px和视口在静态网页中,我们经常用像素(px)作为单位,来描述一个元素的宽高以及定位信息。在pc端,通常认为css中,1px所表示的真实长度是固定的。那么,px真的是...转载 2019-02-13 17:22:54 · 846 阅读 · 0 评论