自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

转载 VUE 地区三级联动插件 v-Distpicker

V - Distpicker 地区选择器环境问题不多说,自己看文档,主要讲一下在实际使用过程中如何将下拉框的值赋值到对象属性上.文档: https://distpicker.uine.org/github: https://github.com/jcc/v-distpicker ...

2018-12-10 20:44:22 1205 1

转载 this指向问题详解

首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然网上大部分的文章都是这样说的,虽然在很多情况下那样去理解不会出什么问题,但是实际上那样理解是不准确的,所以在你理解this的时候会有种琢磨不透的感觉),那么接下来我会深入的探讨这个问题。  为什么...

2018-11-14 15:49:21 143

转载 HTML5事件—visibilitychange 页面可见性改变事件

又看到一个很有意思的HTML5事件 visibilitychange事件是浏览器新添加的一个事件,当浏览器的某个标签页切换到后台,或从后台切换到前台时就会触发该消息,现在主流的浏览器都支持该消息了,例如Chrome, Firefox, IE10等。虽然这只是一个简单的功能,但是能够广大的采用HTML5开发游戏的开发者提供方便,比如用户正在玩游戏时,突然切换到后台去发一条短信或打一个电话,再...

2018-11-10 11:09:05 2249

转载 原生Js实现复制功能的方法总结,execCommand和clipboardData的使用

原生Js实现复制(Copy)的两种方法,一种是利用 clipboardData,另外一种则是用 execCommand(),今天将统一讲解一下关于他们的使用方法。 document.execCommand当一个HTML文档切换到设计模式(designMode)时,文档对象暴露 execCommand方法,该方法允许运行命令来操纵可编辑区域的内容。大多数命令影响文档的选(粗体,斜体等),...

2018-11-09 21:46:27 247

转载 url的三个js编码函数escape(),encodeURI(),encodeURIComponent()简介

引子浏览器URl地址,上网一定会用到,但是浏览器地址有中文或者浏览器url参数操作的时候,经常会用到encodeURIComponent()和decodeURIComponent()以及encodeURI()等等。关于浏览器参数操作,请看文章http://www.haorooms.com/post/js_url_canshu ,今天主要讲讲escape(),encodeURI(),encode...

2018-10-26 17:35:05 160

转载 async/await 的执行顺序

随着async/await正式纳入ES7标准,越来越多的人开始研究据说是异步编程终级解决方案的 async/await。但是很多人对这个方法中内部怎么执行的还不是很了解,本文是我看了一遍技术博客理解 JavaScript 的 async/await(如果对async/await不熟悉可以先看下这篇文章)后拓展了一下,我理了一下await之后js的执行顺序,希望可以给别人解疑答惑,先简单介绍一下as...

2018-10-25 22:02:55 106

转载 VUE实现打印功能的两种方法

第一种方法:通过npm 安装插件 1,安装  npm install vue-print-nb --save2,引入  安装好以后在main.js文件中引入           import Print from 'vue-print-nb'    Vue.use(Print);  //注册 3,现在就可以使用了    <div id="printTest...

2018-10-24 11:03:35 8363 11

原创 Swiper插件 loop:true时引发绑定dom的click事件无效及解决方案

现象在使用 swiper 这个库的时候,一旦设置 loop:true 的时候,有时会遇到 dom 绑定事件无法触发的问题。原因当loop模式下slides前后会clone若干个slide,从而形成一个环路,但是却不会复制绑定在dom上的click事件。解决不要将click事件绑定在dom上,而是在new Swiper()中的on回调函数中统一调用。 梨子 let _...

2018-10-12 15:21:41 4196 1

转载 React Router路由传值的三种方法

一.props.params官方例子使用React router定义路由时,我们可以给<Route>指定一个path,然后指定通配符可以携带参数到指定的path:首先定义路由到UserPage页面: import { Router,Route,hashHistory} from 'react-router'; class App extends React.Com...

2018-10-07 22:04:11 1552 1

原创 react打包之后有多余文件的问题

打包之后还有config、node_modules、static、webpack等多余文件。 解决办法:  打开  =>  webpack.config.prod.js 找到   =>  devtool: shouldUseSourceMap ? 'source-map' : false,改为 =>  devtool:  false,...

2018-10-02 22:10:33 789

转载 前后端数据交互,axios和jquery ajax的区别

axios作为Vue生态系统中浓墨重彩的一笔,我学习这个东西也是花了一定的时间的。刚开始的时候,也是遇到了很多问题。逐渐摸透了它的脾气。首先说说FormData和Payload两种数据格式的区别:先是提交一个FormData的请求试试看:然后我们看后端:然后我们提交一个以Payload传输数据的请求:我们再切到后台:这就是使用axios和jquery a...

2018-10-02 21:47:25 579

转载 react 生命周期

在组件的整个生命周期中,随着该组件的props或者state发生改变,它的DOM表现也将有相应的改变,一个组件就是一个状态机,对于特定的输入,它总会返回一致的输出。React为每个组件提供了生命周期钩子函数去响应不同的时刻——创建时、存在期及销毁时。 生命周期方法React的组件拥有简洁的生命周期API,它仅仅提供你所需要的方法,而不会去最求全面。实例化:一个实例出吃被穿件...

2018-09-29 15:50:54 107

转载 React异步请求数据出现setState(...): Can only update a mounted or mounting component...

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op.Please check the code for the xxx comp...

2018-09-16 10:56:35 229

原创 React 中使用 swiper 插件

安装 Swipernpm install --save swiper编写 Swiper 组件1,首先引入 Swiper 以及样式// 引入此路径,才不会打包失败import Swiper from 'swiper/dist/js/swiper.js'import 'swiper/dist/css/swiper.min.css'2,在组件挂载完毕的时候生成 Swiper 对象...

2018-09-13 15:14:10 5704 1

转载 使用装饰器优化connect代码

1,npm   run   eject   弹出个性化配置//  package.json 中会导入更多依赖,多了config文件夹,里面有webpack.config.dev、webpack.confog.prod等修改文件 2,npm install babel-plugin-transform-decorators-legacy  插件 3,Package.json里 b...

2018-09-08 10:48:56 227

转载 使用Redux工具调试

Redux拥有很多第三方的调试工具,可用于分析代码和修复bug。最受欢迎的是time-travelling tool,即redux-devtools-extension。设置它只需要三个步骤。首先,在Chrome中安装Redux Devtools扩展。 然后,在运行Redux应用程序的终端里使用Ctrl+C停止服务器。并用npm或yarn安装redux-devtools-extension包...

2018-09-07 18:12:13 579

转载 使用Babel把ES6编译成ES5

建立工程目录:先建立一个项目的工程目录,并在目录下边建立两个文件夹:src和distsrc:书写ES6代码的文件夹,写的js程序都放在这里。 dist:利用Babel编译成的ES5代码的文件夹,在HTML页面需要引入的时这里的js文件。编写index.html:文件夹建立好后,我们新建一个index.html文件。  1 2 3 4 5...

2018-08-22 15:05:53 946

转载 移动端调试痛点?——送你五款前端开发利器

之所以写这个总结,还要从上周的一次移动端项目的 debug 说起。那天,测试小姐姐拿着自己的 iphone6s 过来找我,说页面打不开。我想:这怎么可能,我手机里挺好的呀,Chrome调试工具也没报错呀!就把她手机拿过来看了看,发现一进去还真就是一片空白。WTF(手动黑人问号)!!!那问题就来了,开发环境下没报错,可真机又出现了意料之外的情况,而且没法像 PC端 那样祭出 F12 大法,怎么定位问...

2018-08-20 20:14:28 246

转载 原生JS操纵cookie

cookie概述 在上一节,曾经利用一个不变的框架来存储购物栏数据,而商品显示页面是不断变化的,尽管这样能达到一个模拟 全局变量的功能,但并不严谨。例如在导航框架页面内右击,单击快捷菜单中的【刷新】命令,则所有的JavaScript变量都会丢失。因此,要实现严格的 跨页面全局变量,这种方式是不行的, JavaScript中的另一个机制:cookie,则可以达到真正全局变量的要求。 cookie...

2018-08-14 11:34:40 288

转载 你真的理解setState吗?

面试官:“react中setState是同步的还是异步?”我:“异步的,setState不能立马拿到结果。” 面试官:“那什么场景下是异步的,可不可能是同步,什么场景下又是同步的?”我:“......”setState真的是异步的吗 ?这两天自己简单的看了下setState的部分实现代码,在这边给到大家一个自己个人的见解,可能文字或图片较多,没耐心的同学可以直接跳过看总结(源码版本是...

2018-08-12 10:54:09 3162

原创 vue项目中使用阿里iconfont图标

方法一:简单粗暴 - 生成链接使用法1.打开 iconFont官网 选择自己喜欢的图标,并且添加购物车 点击购物车,添加至项目为了方便可以给项目起一个名字选择Font class点击“暂无代码,点此生成” 就会出现我们的链接接下来复制链接地址,在我们的vue项目中,找到index.html文件,引入css样式,记住这里要放上你的链接地址.......

2018-08-10 17:50:55 11164 3

转载 vue-cli开发时使用代理跨域请求

如果前台在开发环境下可以和服务端连起来测试就好了。但是由于端口不同,所以得跨域请求了,但是前台开发完后,是不是全部URL都要改?于是搜索了一下,发现了“proxyTable”。修改config/文件夹下的index.jsdev: { proxyTable: { // proxy all requests starting with /api to jsonpla...

2018-08-10 15:48:28 333

转载 redux 在 react 中的应用

这一篇我们主要讲react如何搭配 redux 使用,从而构建一个更完(niu)善(bi)的react应用。官方文档对redux的介绍:Redux是JavaScript状态容器,提供可预测化的状态管理。注意,redux的集成是非必选的。通过之前的内容介绍我们了解到,单枪匹马的react构建的页面也可以运作得很好。你可能会对redux的编程方式感到无所适从。然而,不管是出于构...

2018-08-08 12:10:28 101

转载 五大主流浏览器内核的源起以及国内各大浏览器内核总结

可以看到chrome和IE依然占据了国内浏览器份额的大多半江山,尤其是chrome浏览器,近几年来发展迅速,抢走IE不少份额。另外国内一些浏览器也有不错的成绩,比如QQ、2345还有搜狗等等。下面主要总结一下,五大主流浏览器以及国内一些浏览器所使用的内核。 捋一下内核的概念:    浏览器内核又可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engi...

2018-07-29 16:36:42 8321

转载 移动端h5页面常见问题

4:)美化表单元素//一、使用appearance改变webkit浏览器的默认外观input,select { -webkit-appearance:none; appearance: none; }//二、winphone下,使用伪元素改变表单元素默认外观//1.禁用select默认箭头,::-ms-expand修改表单控件下拉箭头,设置隐藏并使用背景图片来修饰select::-m...

2018-07-29 11:42:59 392 1

转载 原生JS forEach()和map()遍历的区别以及兼容写法

一、原生JS forEach()和map()遍历共同点:    1.都是循环遍历数组中的每一项。    2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input。    3.匿名函数中的this都是指Window。    4.只能遍历数组。1.forEach()   没有返回值。...

2018-07-25 17:10:02 111

转载 Axios 的使用

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。Features从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御 XSRF浏览器支持      ...

2018-07-25 15:25:07 102

原创 JS 常用方法 -- 生成随机数、深拷贝

//生成随机数export const getUUID = function (len) { len = len || 6; len = parseInt(len, 10); len = isNaN(len) ? 6 : len; var seed = "0123456789abcdefghijklmnopqrstubwxyzABCEDFGHIJKLMNOPQRSTUVWXYZ...

2018-07-25 14:45:13 84

转载 npm 常用命令详解

目录(更新于20160117)npm是什么 npm install 安装模块 npm uninstall 卸载模块 npm update 更新模块 npm outdated 检查模块是否已经过时 npm ls 查看安装的模块 npm init 在项目中引导创建一个package.json文件 npm help 查看某条命令的详细帮助 npm root 查看包的安装路径 npm...

2018-07-16 21:47:17 128

转载 手机端页面在项目中遇到的一些问题及解决办法

1.解决页面使用overflow: scroll在iOS上滑动卡顿的问题?首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题。解决方案是:(1) 看是否能把body和html的height: 100%去除掉。(2) 在滚动的容器中增加:-webkit-overflow-scrolling: touch或者给body增加:body {ov...

2018-07-12 16:48:37 577

转载 入门Webpack,看这篇就够了

写在前面的话阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过;如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本文,你的疑惑一定一个一个都会消失;如果你以前没怎么接触过Webpack,而你又你对webpack感兴趣,那么动手跟着本文中那个贯穿始终的例子写一次,写完以后你会发现你已明明白白的走进了We...

2018-07-07 21:25:41 94

转载 Webpack3.0快速入门(三)-- 资源处理及打包优化

前两节文章我们手把手搭建了一个基于webpack的前端开发工程环境,并讲解了一些常用插件及loader的基本用法,包括代码分割、模板读取、文件清理、ES6编译及css处理等等,这篇文章我继续在前两篇的基础上,继续探讨:图片处理 , 包括file-loader、url-loader、image-webpack-loader的用法,file-loader和url-loader的区别等。服务端启动web...

2018-07-07 21:08:54 760

转载 Webpack3.0快速入门(二)-- CSS处理与ES6编译

写在前面在webpack快入门之从零到一初体验 一文中,我们从整体了解了webpack相关特性并手动初步实现了一个可执行编译的webpack环境,这一节,我们将在此基础上继续探讨以下功能的实现:css的编译与加载,基于style-loader、css-loader、postcss-loader、autoprefixer以及css预处理(以less为例)。ES6的编译与加载,基于babel及其相关模...

2018-07-07 21:08:12 351

转载 Webpack3.0快速入门——从零到一初体验

写在前面这篇文章是自己在整理webpack相关的东西时候突发奇想,想整理出一套由浅入深的博文以此鞭策自己学习,也希望能够帮助想学习webpack的同学,目前都是入门级别的,大佬请出门右转。学习完本篇文章,我希望您能够掌握以下几点:webpack是什么webpack有什么有点webpack.config.js配置项中,出口(entry)、入口(output)、插件(plugins)的基本作用和配置方...

2018-07-07 21:07:25 337

转载 移动端点击300ms延迟问题和解决

今天屁颠屁颠写完了,手机端做测试时,点击,发现有延迟,就百度了下,原来这就是传说中的300ms延迟啊,百度了点资料,记录下,解决项目中这个小问题!一、移动端300ms点击延迟一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟。也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应,而是会等上一小会儿才会出现点击的效果。在移动WEB兴起的初期,用...

2018-07-06 20:41:41 109

转载 微信分享功能(分享到朋友和朋友圈显示图片和简介)

想在微站里面实现分享帖子给朋友和朋友圈,显示图片和简介,就这么简单的功能折腾了1星期。。。主要是微信官方文档没看清楚,怪自己了。官方文档在这里,https://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html参考 http://www.cnblogs.com/stoneniqiu/p/6286599.html 这篇文章。遇到...

2018-07-02 16:18:31 14947 1

转载 h5 微信分享朋友和朋友圈

生成JS-SDK权限验证签名实现发送给朋友和分享到朋友圈时内容参数自定义 一、微信JS-SDK1. 获得Access Tokenaccess token的获得方法在前面有介绍,详情见 微信公众平台开发(26) ACCESS TOKEN2. 获取jsapi_ticket生成签名之前必须先了解一下jsapi_ticket,jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下,js...

2018-07-02 15:52:22 5191

转载 微信公众平台开发 -- 获取 ACCESS TOKEN

一、Access Tokenaccess_token是公众号的全局唯一票据,公众号调用各接口时都需使用access_token。正常情况下access_token有效期为7200秒,重复获取将导致上次获取的access_token失效。公众号可以使用AppID和AppSecret调用本接口来获取access_token。AppID和AppSecret可在开发模式中获得(需要已经成为开发者,且帐号没...

2018-07-02 15:45:05 421

转载 webkit webApp 开发技术要点总结

如果你是一名前端er,又想在移动设备上开发出自己的应用,那怎么实现呢?幸好,webkit内核的浏览器能帮助我们完成这一切。接触 webkit webApp的开发已经有一段时间了,现把一些技巧分享给大家 :1. viewport:也就是可视区域。对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域,这是真正有效的区域。由于移动设备屏幕宽度不...

2018-06-25 11:28:41 188

转载 javascript用户密码加密,js密码加密

今天总结几种javascript用户密码加密的方法,虽然前端当中密码加密不经常用,一般在后端加密之后存入数据库。今天主要列举一下前端js加密方法,以后可能也用得到!1、base64加密在页面中引入base64.js文件,调用方法为:   <!DOCTYPE HTML><html><head><meta charset="utf-8"><...

2018-06-23 14:45:32 1429

提示
确定要删除当前文章?
取消 删除