- 博客(29)
- 收藏
- 关注
RSS订阅原创 es6之扩展运算符 三个点（...）
对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中let bar = { a: 1, b: 2 };let baz = { ...bar }; // { a: 1, b: 2 }上述方法实际上等价于:let bar = { a: 1, b: 2 };let baz = Object.assign({}, bar); // { a: 1, ...
2020-01-03 15:35:07
136
原创 vue 非父子组件传值
非父子之间传值，可以采用发布订阅模式，这种模式在 Vue 中被称为总线机制，或者叫做Bus/ 发布订阅模式 / 观察者模式1、main.jsimport Vue from 'vue'import App from './App'import router from './router'async function start(){ Vue.prototype.bus =...
2019-11-05 16:06:06
173
原创 JS页面加载，document.ready和onload的区别
1、DomReady用jQ的人很多人都是这么开始写脚本的：window.onload=function(){ //do something}其实这个就是jq ready()的简写，他等价于：window.onload=function(){ //do something}这个就是jq ready()的方法就是Dom Ready，他的作用或者...
2019-03-20 16:33:33
539
转载 前端错误监控类
一、前端错误的分类1.即时运行错误：代码错误 * try…catch(需要把try...catch布到代码中) *window.onerror(dom0)只能捕获即时运行错误2.资源加载错误：（js、css、图片加载失败） * object.onerror(通过节点绑onerror事件，捕获加载错误；) * performance.getEntries...
2019-03-02 18:00:50
576
转载 CSRF攻击
对于常规的Web攻击手段，如XSS、CRSF、SQL注入、（常规的不包括文件上传漏洞、DDoS攻击）等，防范措施相对来说比较容易，对症下药即可，比如XSS的防范需要转义掉输入的尖括号，防止CRSF攻击需要将cookie设置为httponly，以及增加session相关的Hash token码 ，SQL注入的防范需要将分号等字符转义，等等做起来虽然筒单，但却容易被忽视，更多的是需要从开发流程上来予以...
2019-03-02 12:17:41
1215
原创 闭包
闭包可以了解为定义在一个函数内部的函数；function f1(){ var n=999; function f2(){ alert(n) //999 }}f2()就是闭包；闭包只能取得包含函数中任何变量的最后一个值，这是因为闭包所保存的是整个变量对象，而不是某个特殊的变量；function test(){ var arr = []; for...
2019-02-28 15:55:58
111
转载 教你如何快速让浏览器兼容ES6特性
写在正文前，本来这一节的内容应该放在第二节更合适，因为当时就有同学问ES6的兼容性如何，如何在浏览器兼容ES6的特性，这节前端君会介绍一个抱砖引玉的操作案例。为什么ES6会有兼容性问题？由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布，而到了今天，我们在编程中如果使用了ES6的新特性，浏览器若没有更新版本，或者新版本中没有对ES6的特性进行兼容，那么浏览器...
2019-02-26 17:56:21
171
转载 移动端js调试工具：eruda
Eruda 是一个专为手机网页前端设计的调试面板，类似 DevTools (谷歌浏览器自带的一个开发者调试工具) 的迷你版，其主要功能包括：捕获 console 日志、检查元素状态、显示性能指标、捕获XHR请求、显示本地存储和 Cookie 信息、浏览器特性检测等等。使用方式分两种，如果是webpack项目 可以npm安装在html中引用如下js:<script type="...
2019-02-26 17:18:04
1269
转载 移动端和PC端的区别
被问到移动端和PC端有什么区别，当时回答的时候主要是回答了在兼容性、网速、适配、页面布局等方面的不同，但是还是很不系统，所以这里做一个总结。第一： PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，一般浏览器使用的都是webkit内核，所以说做移动端开发，更多考虑的应该是手机分辨率的适配，和不同操作系统的略微差异化。第二： 在部分...
2019-02-26 14:12:40
3889
原创 ES6中Array.find()和findIndex()函数的用法详解
ES6为Array增加了find()，findIndex函数。find()函数用来查找目标元素，找到就返回该元素，找不到返回undefined。而findIndex()函数也是查找目标元素，找到就返回元素的位置，找不到就返回-1。他们的都是一个查找回调函数。 [1, 2, 3, 4].find((value, index, arr) => {})查找函数有三个参数。...
2018-10-30 15:06:21
672
原创 微信小程序：使用wxParse解析HTML
1、下载 wxParse ，放到utils目录下 2、在JS页面引入： import WxParse from '../../utils/wxParse/wxParse'Page({ data:{ contentHTML:'' // 解析后的HTML }, onLoad: function() { // 请求到的HTML数据 le...
2018-10-23 17:26:36
280
原创 移动端复制内容到粘贴板
1、Clipboard.js的下载 官网地址：https://clipboardjs.com/HTML：<input id="foo" value="https://fanyi.baidu.com"> <button class="btn" data-clipboard-target="#foo">复制</button>2
2018-09-07 18:40:08
687
原创 微信小程序使用阿里巴巴字体图标
第一步：去iconfont下载所需要的字体图标 进入阿里图标官网http://iconfont.cn/，添加自己所需要的图标，然后点击下载代码，解压出来如下： 第二步：转换.ttf文件 进入https://transfonter.org/平台，将解压出来的.ttf字体文件转化成base64格式。流程如下： 点击下载，解压可以得到如下图的几个文件：第三步：微...
2018-08-28 17:04:26
725
原创 mui底部选项卡 报错Unable to preventDefault inside passive event listener due to target being treated as pa
问题描述：用MUI例子中的选项卡，底部的导航只能实现div切换，链接无法跳转。查看控制台，输出：Unable to preventDefault inside passive event listener due to target 的警告。问题解决：经检查相关资料，加入以下代码，即可解决问题。mui('body').on('tap','a',function(){docume...
2018-08-22 11:17:36
2942
1
原创 面试后的一些感触
面试前会去刷一些前端面试题是很有必要的，很多公司都会有笔试这一关的，虽然大家都知道笔试这一环节真的不能体验个人的能力，但不知道为什么还是很多公司有这一轮，或许在公司看来，还是是有必要的。 去广州银行信用卡面试就很明确的写着笔试过了就会安排第一轮面试。当时我还在网上搜了一下，没找到这家的一些关于前端的面试题，不过也去刷了一些前端面试题的。 去医惠也有面试题...
2018-08-18 11:21:38
561
2
原创 js中数组遍历的几种方法及其区别
1、for循环for(j = 0,len=arr.length; j < len; j++) { }2、foreach (默认有传参，参数分别为：遍历的数组内容，对应的数组索引，数组本身。)arr.forEach(function(item，index，arr){ });3、map 遍历（对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组...
2018-08-14 11:46:43
2470
原创 js截取字符串常用方法
1、substring() 方法定义和用法：substring() 方法用于提取字符串中介于两个指定下标之间的字符。语法：stringObject.substring(start,stop)参数 描述 start 必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。 stop 可选。一个非负的整数，比要提取的子串的...
2018-08-13 17:53:52
554
原创 IOS iframe 的高度会根据内容自适应
问题：在iOS上一个页面通过iframe嵌套一个页面，内容页面中一个显示在页面底部的元素显示不出来，这个元素的 position 为 fixed 。原因：因为 iOS 下的 Safari 的 IFrame 的高度会根据页面的内容自适应造成了 IFrame 的高度过高（即iframe的高度>屏幕的高度）。这个元素的 position 为 fixed显示在了屏幕外面，导致iframe下pos...
2018-08-10 11:50:32
2663
原创 Vue computed结合watch监听对象其一属性值的变化
var vm=new Vue({ data:{ a:1, b:{ c:1 } }, watch:{ a(val, oldVal){//普通的watch监听 console.log("a: "+val, oldVal); }, b:{//深度监听，可监听到对象、数组的变化 handler(val, ol...
2018-08-08 14:46:49
11931
原创 js只保留整数，向上取整，四舍五入，向下取整，随机数等函数
1.丢弃小数部分,保留整数部分 parseInt(5/2)2.向上取整,有小数就整数部分加1 Math.ceil(5/2)3,四舍五入. Math.round(5/2)4,向下取整 Math.floor(5/2)5、Math.random(); 返回0和1间(包括0,不包括1)的一个随机数。用Math.ceil(Math.random()*1...
2018-08-07 22:57:11
822
原创 iframe父、子窗口元素获取和方法
1. jquery在iframe子页面获取父页面元素和方法代码如下:parent.$("selector");parent.method();2. jquery在父页面获取iframe子页面的元素和方法代码如下:iframe.$("select");iframe.method();3.js在iframe子页面获取父页面元素代码如下:window.parent.docum...
2018-07-20 17:51:27
905
原创 Vue:将px转化为rem,在移动端进行自适应
1.下载lib-flexible我使用vue-cli搭建的环境，通过npm来安装npm i lib-flexible --save2.引入lib-flexible在main.js中引入lib-flesibleimport 'lib-flexible/flexible'3.再安装px2rem-loadernpm install px2rem-loader4.配置...
2018-07-19 18:19:35
1425
原创 js常用数组方法大全
数组原型常用方法包括下面这些:join()push()和pop()shift() 和 unshift()sort()reverse()concat()slice()splice()indexOf()和 lastIndexOf() （ES5新增）forEach() （ES5新增）map() （ES5新增）filter() （ES5新增）下面详细介绍一下各个方法的基...
2018-07-18 17:31:54
341
原创 vue使用mui的picker,设置默认选项
一级选择示例如上图，如果后台给你的值（即默认值）不是第一个值，那么就需要设置默认值。而用vue的方式做，无论是第一次点开还是再次点开都是显示是第一个值，而不是你默认选择的那个值，这个时候怎么办呢？ mui设置默认值如下两种方法：1、setSelectedIndex(index[, duration, callback]) 参数:index Type: Number...
2018-07-09 17:59:36
8592
原创 浏览器渲染机制
浏览器渲染的整个流程 首先当用户输入一个URL的时候，浏览器就会发送一个请求，请求URL对应的资源。1.构建DOM树(DOM tree)：浏览器从上到下解析HTML文档生成DOM节点树（DOM tree），也叫内容树（content tree）；2.构建CSSOM(CSS Object Model)树：加载解析样式生成CSSOM树；3.执行JavaScript：加载并执行JavaScr...
2018-07-07 23:51:06
163
原创 前端跨域通信的几种方式
前言前端通信类的问题，主要包括以下内容：1、什么是同源策略及限制2、前后端如何通信3、如何创建Ajax4、跨域通信的几种方式 同源策略的概念和具体限制同源策略：限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。（来自MDN官方的解释）具体解释：（1）源包括三个部分：协议、域名、端口（http协议的默认...
2018-07-07 19:58:50
932
原创 js数组与字符串的相互转换
一、数组转字符串需要将数组元素用某个字符连接成字符串，示例代码如下：var a, b,c; a = new Array(a,b,c,d,e); b = a.join('-'); //a-b-c-d-e 使用-拼接数组元素c = a.join(''); //abcde 二、字符串转数组实现方法为将字符串按某个字符切割成若干个字符串，并以数组形式返回，示例代码如下：var str = 'ab+...
2018-07-06 15:27:32
163
原创 http协议类，get和post的区别
1、http协议的主要特点 简单快速：（url是唯一的） 灵活：（头部有数据类型，通过一个http协议完成不同数据类型的传输） 无连接（连接一次就会断开，不会保持连接） 无状态（客户端和服务端是两种不同的身份，客户端需要向服务端请求一个图片，通过http协议帮你建立连接，帮你中间传输，因无连接的，这次任务完成了，这次连接就要断开，下次客户端再次过来...
2018-07-05 22:21:36
586
原创 vue渲染过程的{{xxx}}显示的解决办法
这是由于浏览器的渲染机制导致的，浏览器是从头到尾 如果你的js引用在底部，那么浏览器会先加载dom此时，你用于渲染的{{}}识别符，因为还没读到该识别符对应的js文件，所以会被解析为字符串而显示在页面中，我们可以用过自定义属性v-cloak解决，实例对象对应标签中加入 v-cloak:<div id="wrap" v-cloak>然后在css中给定义属性选择器 [...
2018-07-04 17:59:51
5141
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人