- 博客(41)
- 收藏
- 关注
RSS订阅原创 rem布局代码
<script type="text/javascript"> (function() { var html = document.documentElement; var hWidth = html.getBoundingClientRect().width; html.style.fontSize = hWidth / 36 + 'px'; // 3...
2019-07-04 15:55:46
369
转载 节流和防抖
防抖(debounce)实现原理就是利用定时器，函数第一次执行时设定一个定时器，之后调用时发现已经设定过定时器就清空之前的定时器，并重新设定一个新的定时器，如果存在没有被清空的定时器，当定时器计时结束后触发函数执行。实现1// 实现 1// fn 是需要防抖处理的函数// wait 是时间间隔function debounce(fn, wait = 50) { // 通过闭...
2019-07-04 11:10:56
323
原创 less或scss中@mixin的用法
一些重复样式// 背景图片@mixin bgImage($path) { background-image: url($path + '@2x.png'); @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) { background-image: url($path + '@3x.pn...
2019-07-02 14:44:48
6199
转载 前端路由之hash路由与history路由 Orz
在vue的路由配置中，有两种模式，分别是hash模式和history模式对于vue这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。区别hash — 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：www.a...
2019-07-02 14:00:50
1520
转载 vue路由跳转传参 Orz
好困好困好困常用路由跳转方式通过router-link进行跳转通过$router.push进行跳转router-link<router-link :to="{ path: 'yourPath', params: { name: 'name', dataObj: data ...
2019-07-02 11:58:50
164
转载 数组遍历 Orz
forEach() 用于遍历数组无返回值，会改变原来数组中的值let arr = [1, 3, 12, 2, 20, -1, 6, 17];arr.forEach((item, index, array) => { array[index] = item * 2;});console.log(arr); // [2, 6, 24, 4, 40, -2, 12, 34]...
2019-07-02 11:48:03
154
转载 css样式规范
书写顺序位置属性(position, top, right,z-index, display, float等)大小(width, height, padding,margin)文字系列(font, line-height,letter-spacing, color- text-align等)背景(background, border等)其他(animation, transition等...
2019-07-02 11:32:00
435
原创 H5 图片热点区域
应用场景不规则按钮的响应一张图片设置多个响应域使用方法利用usemap属性，构建一个map标签<!DOCTYPE html><html><head><meta charset="utf-8"><title>热点区域</title></head><body><!--...
2019-07-02 11:07:22
2522
转载 CSS3属性
transition过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。属性描述transition简写属性，用于在一个属性中设置四个过渡属性。transition-property规定应用过渡的 CSS 属性的名称。tran...
2019-06-23 19:45:05
160
转载 eslint规范
"no-alert": 0,//禁止使用alert confirm prompt"no-array-constructor": 2,//禁止使用数组构造器"no-bitwise": 0,//禁止使用按位运算符"no-caller": 1,//禁止使用arguments.caller或arguments.callee"no-catch-shadow": 2,//禁止catch子句参数...
2019-06-23 19:39:41
538
转载 图片懒加载
定义：延迟加载也称为惰性加载，即在长网页中延迟加载图像。用户滚动到它们之前，视口外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。举个例子来说明，当打开淘宝首页的时候，只有在浏览器窗口里的图片才会被加载，当你滚动首页向下滑的时候，进入视口内的图片才会被加载，而其它从未进入视口的图像不会也不会加载。优势首先它能提升用户...
2019-06-23 19:35:02
314
转载 vue-mixins
使用场景当两个组件存在相同的方法，例如需要进行初始化，例如分页操作，进入页面时，需要对页面初始化页面。这个时候你可以选择传统的写组件来进行分离，但是使用mixins可以不通过状态传递，直接进行强大的混合，方便了许多。mixins允许你封装一块在应用的其他组件中都可以使用的函数。如果使用姿势得当，他们不会改变函数作用域外部的任何东西，因此哪怕执行多次，只要是同样的输入你总是能得到一样的值，对...
2019-06-23 19:20:35
393
原创 伪类与伪元素
伪类：用于向某些选择器添加特殊的效果，当已用元素处于某种状态时，为其添加对应的样式:link 未访问的连接:visited 已访问的连接:hover 鼠标移动到容器，可用于页面的任何元素:active 被激活时的状态，不仅限于连接:focus 获得焦点时的状态，不仅限于连接:target:first-child…伪元素：用于将特殊的效果添...
2019-06-23 13:43:47
223
原创 vue动态绑定class和style
vue动态绑定class的几种方式通过对象绑定:class="{ 'active': isActive }"绑定多个第一种（用逗号隔开）:class="{ 'active': isActive, 'sort': isSort }"第二种（放在data里面）//也可以把后面绑定的对象写在一个变量放在data里面，可以变成下面这样:class="classObject"data()...
2019-06-23 11:52:26
2489
转载 JavaScript-touch事件及vue的v-touch插件
touch事件开始的触摸事件touchstart、touchmove和touchend是ios版Safari浏览器为了向开发人员传达一些信息新添加的事件。因为ios设备既没有鼠标也没有键盘，所以在为移动Safari浏览器开发交互性网页的时候，PC端的鼠标和键盘事件是不够用的。在iPhone 3Gs发布的时候，其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。随后，...
2019-06-23 11:36:56
3710
转载 前端一些javascript简写方式
if操作符简写xxxxvar a = 1if (a = 2) { a = 3} else { a = 4}可简写为 ==> if (a = 1) a = 3; a = 4if (flag === true) 存在条件的简写 ==> if (flag) 或者 ==> if(!flag)三元操作符简写const x = 20;let answer;if (...
2019-06-21 23:50:36
1037
转载 扁平数组和树形结构的相互转换
扁平数组转换为树形结构var arr = [{id: 1, pid: '-1'},{id: 11, pid: '1'},{id: 12, pid: '1'}]function listToTree(list) { var map = {}, node, tree= [], i; for (i = 0; i < list.length; i ++) { m...
2019-06-09 21:22:55
4677
转载 Javascript实现继承的6种方式
一.类式继承简介：将父类对象的实例赋值给子类的原型，则子类的原型可以访问父类原型上的属性和方法，以及父类构造函数中复制的属性和方法。//1.类式继承//声明父类function SuperClass() { this.superValue = true;}//为父类添加公有方法SuperClass.prototype.getSuperValue = function () { ...
2019-06-09 21:12:04
1904
转载 XSS与CSRF
XSS：跨站脚本攻击注入攻击的一种。攻击者利用应用程序的动态展示功能，在HTML页面中嵌入恶意代码。当用户浏览该页时，这些嵌入在html的恶意代码就会被执行，用户浏览器被攻击者控制盗取用户cookie,伪造用户身份控制用户浏览器结合浏览器及其插件漏洞，下载病毒木马到浏览者的计算机运行衍生URL跳转漏洞官网挂钓鱼网站蠕虫攻击CSRF：跨站请求伪造XSS 是实现 CSRF...
2019-06-08 21:44:57
295
转载 webpack
webpack的作用构建就是把源代码转换成发布到线上的可执行JavaScrip、CSS、HTML代码，包括如下内容：代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。代码分割：提...
2019-06-08 21:41:20
165
转载 虚拟DOM和diff算法
虚拟dom虚拟DOM的本质就是一个JS对象，虚拟DOM减少了真实DOM的操作，当修改数据的时候，就是修改虚拟DOM产生全新的虚拟DOM，新旧虚拟DOM使用diff算法，得到patch(也就是需要修改的部分)，然后将这个patch打到浏览器的DOM上（减少重绘和回流，从而达到性能优化的目的）每次DOM操作会引起重绘或者回流，频繁的真实DOM的修改会触发多次的排版和重绘相当耗性能...
2019-06-08 21:11:47
1796
原创 判断一个对象是否为数组方法
使用instanceof操作符var a = [];console.log(a instanceof Array) // trueArray.prototype.isPrototypeOf(obj)var a = []Array.prototype.isPrototypeOf(a) // trueArray.isArray()方法var a = []Array.isArra...
2019-06-06 21:15:18
461
原创 cookie
定义和用法setcookie()函数向客户端发送一个 HTTP cookie。setcookie(name,value,expire,path,domain,secure)参数描述name必需。规定 cookie 的名称。value必需。规定 cookie 的值。expire可选。规定 cookie 的有效期。path可选。规定 cookie...
2019-06-06 21:05:52
191
转载 不使用vue-cli搭建项目
配置开发时的前端工程（vue-loader+webpack）首先打开终端，我们先来用 npm init 来初始化项目E:\vue实战\vue_web>npm initThis utility will walk you through creating a package.json file.It only covers the most common items, and tr...
2019-06-04 13:01:36
4524
4
原创 数组去重与排序
数组去重方法一 ES6 Set方法去重function unique (arr) { return Array.from(new Set(arr))}方法二 indexOffunction unique (arr) { var result = []; //结果数组 for(var i = 0; i < arr.length; i++) { ...
2019-06-04 09:51:15
3005
转载 小程序
生命周期应用生命周期用户首次打开小程序，触发 onLaunch（全局只触发一次）。小程序初始化完成后，触发onShow方法，监听小程序显示。小程序从前台进入后台，触发 onHide方法。小程序从后台进入前台显示，触发 onShow方法。小程序后台运行一定时间，或系统资源占用过高，会被销毁。页面生命周期小程序注册完成后，加载页面，触发onLoad方法。页面载入后触发o...
2019-06-01 11:26:41
272
转载 vue和react的区别及各自优点
区别监听数据变化的实现原理不同Vue 通过 getter/setter 以及一些函数的劫持，能精确知道数据变化，不需要特别的优化就能达到很好的性能React 默认是通过比较引用的方式进行的，如果不优化（PureComponent/shouldComponentUpdate）可能导致大量不必要的VDOM的重新渲染为什么 React 不精确监听数据变化呢？这是因为 Vue 和 Re...
2019-06-01 10:33:06
18432
1
转载 前端SEO问题
合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理...
2019-05-31 10:08:14
186
转载 项目中遇到的问题及解决方案
移动端点击（click）事件300毫秒延迟的问题移动端页面对于点击事件会有300毫秒的延迟，也就是js捕获click事件的回调函数处理，需要300ms后才生效，导致多数用户感觉移动设备上基于HTML的web应用界面响应速度慢，甚至有时候会影响一些业务逻辑的处理。移动浏览器为什么会设置300毫秒的等待时间呢？这与双击缩放的方案有关。平时我们有可能已经注意到了，双击缩放，即用手指在屏幕上快速点击两...
2019-05-30 15:25:33
3145
转载 ES6新特性
箭头操作符var array = [1, 2, 3];//传统写法array.forEach(function(v, i, a) { console.log(v);});//ES6array.forEach(v = > console.log(v));类的支持//类的定义class Animal { //ES6中新型构造器 constructor(nam...
2019-05-30 13:23:44
276
转载 git
Git可以完成两件事情：版本控制多人协作开发多人协助实现创建一个git裸服务器 （git init --bare）从裸服务器将版本库克隆至本地（git clone ）本地常规操作 (git add + git commit)推送版本至服务器 （git remote + git push origin master）从远程服务器拉取版本（git pull）...
2019-05-30 10:03:56
128
转载 前端优化
文件优化图片优化不用图片。很多时候会使用到很多修饰类图片，其实这类修饰图片完全可以用 CSS 去代替。对于移动端来说，屏幕宽度就那么点，完全没有必要去加载原图浪费带宽。一般图片都用 CDN 加载，可以计算出适配屏幕的宽度，然后去请求相应裁剪好的图片小图使用 base64格式将多个图标文件整合到一张图片中（雪碧图）选择正确的图片格式：对于能够显示 WebP 格式的浏览器尽量使用 W...
2019-05-29 11:10:08
168
转载 混合开发
Android与H5互调可以让我们的实现混合开发，至于混合开发就是在一个App中内嵌一个轻量级的浏览器（高性能webkit内核浏览器），一部分原生的功能改为Html 5来开发。然后这个浏览器又封装了一个WebView控件（(网络视图)）来加载显示网页，展现html页面。需要注意的是，当H5内嵌在app里面的时候，app那边有很高的权限来控制H5页面上的操作，比如app可以直接调用html里面的函数...
2019-05-29 10:39:59
776
转载 html
什么是viewport？Viewprot是用户网页的可视区域，Viewprot翻译为中文可以叫做“视区”，浏览器就想一个盒子一样，pc的浏览器和手机浏览器屏幕是不同尺寸大小。同样一套尺寸网页在pc上可以正常浏览，如果没有viewport定义浏览器的尺寸，想pc尺寸一样在手机浏览器上显示，布局可能就乱掉，或者先尺寸比例非常的不协调。使用viewport元标签控制布局<mate name...
2019-05-22 19:19:21
205
转载 React
React 中 keys 的作用是什么？Keys是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识在开发过程中，我们需要保证某个元素的 key 在其同级元素中具有唯一性。在 React Diff 算法中React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。此外，React 还需要借助 Key 值来判断元素与本地状...
2019-05-21 21:26:58
250
转载 Vue面试题整合
生命周期总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.m...
2019-05-21 15:32:39
2155
原创 Promise
Promise以前的异步网络请求// 请求 代表 一个异步网络调用。// 请求结果 代表网络请求的响应。请求1(function(请求结果1){ 处理请求结果1})容易产生回调地狱请求1(function(请求结果1){ 请求2(function(请求结果2){ 请求3(function(请求结果3){ 请求4(functio...
2019-05-19 16:34:11
160
转载 javascript面试题
Ajax知识解析Ajax就是用JS发起一个请求，并得到服务器返回的内容。这跟以前的技术最大的不同点在于页面没有刷新，改善了用户体验。ajax请求步骤首先创建一个XMLHttpRequest对象监听请求成功后的状态变化设置请求参数发起请求操作DOM，实现局部刷新当你从浏览器地址输入一个URL回车后发生了什么浏览器输入url，按下回车键浏览器根据域名查找对应的I...
2019-05-18 20:11:32
235
转载 js闭包-词法作用域
前置知识 – 作用域作用域是一套规则，用于确定在何处以及如何查找变量（标识符）的规则function foo() { var a = 'iceman'; console.log(a); // 输出"iceman"}foo();在foo函数执行的时候，输出一个a变量，那么这个a变量是哪里来的嘞，有看到函数第一行有定义a变量的代码var a = ‘iceman’。va...
2019-05-18 09:25:07
299
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人