自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(142)
  • 收藏
  • 关注

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

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

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

转载 this指向问题详解

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

2018-11-14 15:49:21 431

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

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

2018-11-10 11:09:05 3218

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

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

2018-11-09 21:46:27 468

转载 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 343

转载 async/await 的执行顺序

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

2018-10-25 22:02:55 421 1

转载 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 10389 12

原创 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 6446 2

转载 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 2274 1

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

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

2018-10-02 22:10:33 1313

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

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

2018-10-02 21:47:25 1614

转载 react 生命周期

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

2018-09-29 15:50:54 218

转载 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 503

原创 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 7101 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 390

转载 使用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 792

转载 使用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 1508

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

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

2018-08-20 20:14:28 498

转载 原生JS操纵cookie

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

2018-08-14 11:34:40 502

转载 你真的理解setState吗?

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

2018-08-12 10:54:09 3979

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

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

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

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

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

2018-08-10 15:48:28 564

转载 redux 在 react 中的应用

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

2018-08-08 12:10:28 224

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

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

2018-07-29 16:36:42 9836

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

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

2018-07-29 11:42:59 806 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 247

转载 Axios 的使用

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

2018-07-25 15:25:07 235

原创 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 245

转载 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 250

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

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 921

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

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

2018-07-07 21:25:41 183

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

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

2018-07-07 21:08:54 1224

转载 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 591

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

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

2018-07-07 21:07:25 694

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

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

2018-07-06 20:41:41 282

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

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

2018-07-02 16:18:31 19821 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 6120 1

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

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

2018-07-02 15:45:05 684

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

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

2018-06-25 11:28:41 314

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

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

2018-06-23 14:45:32 2856

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

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