- 博客(213)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 axios设置responseType===blob导出文件和失败返回json处理
axios设置instance.defaults.responseType = 'blob’请求下载导出一个文件，请求成功时返回的是一个流形式的文件，正常导出文件。但是请求失败的时候返回的是json ，不会处理错误信息，而是直接导出包含错误信息的文件。 可以通过返回的blob数据type类型进行区分，如果type是文件类型，导出文件，如果type是json则把blob数据转为string，...
2019-12-16 15:09:12
11419
3
原创 nvm安装9.0.0以上node版本，npm报错或者不生效
使用nvm安装9.0.0版本nodeJS之后，node -v命令可以正常使用，但是npm命令报“‘npm’ 不是内部或外部命令，也不是可运行的程序”或者"npm WARN npm npm does not support Node.js v9.1.0"，node v12.13.1版本下没有安装任何npm，所以报npm不是内部或外部指令，node v9.1.0版本下安装了npm，但是npm是...
2019-11-26 19:38:25
2063
原创 IOS钉钉微应用文件上传OSS失败
H5开发微应用时，Android、PC端使用OSS都可以正常上传文件，IOS在Safari浏览器和微信浏览器中也可以正常上传，但是在IOS钉钉微应用中上传文件失败。 通过寻求钉钉技术协助反馈，参考：https://www.npmjs.com/package/ali-oss；钉钉与QQ浏览器情况类似，新版本中使用alioss SDK，fetch接口存在兼容问题。在ali-oss的6.1...
2019-11-21 16:11:09
3166
2
原创 Vue全家桶开发Android和IOS移动端应用常见问题解决
1、input获取焦点弹出键盘时挡住input 当一个web页面有很多input输入框时，底部的input获取焦点弹出系统输入法键盘时，会出现遮住input情况，用户输入的内容不能正常的展示给用户，需要用户手动上滑，通过布局可以解决。如下左图输入法键盘遮住了备注输入框，右图是处理后的效果，备注输入框自动上滑。 解决办法：使用相对定位relative和绝...
2019-08-11 12:15:09
1082
原创 解决微信小程序input、textarea层级过高穿透问题
微信小程序原生组件camera、canvas、input（仅在focus时表现为原生组件）、live-player、live、pusher、map、textarea、video的层级是最高的，页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。从图中效果可以看出input输入的内容穿透到了选择列表自定义组件，解决办法： 1、使用if，当触发选择列表时隐藏input或...
2019-03-09 12:36:08
25536
1
原创 wepy父组件onload中请求数据，更新.sync动态传值绑定的数据，子组件onload中获取不到值。
wepy的props传值分为静态传值和动态传值，静态传值比较简单，只能传递String字符串类型，不需要修饰符；动态传值需要使用.sync修饰符，如果想子组件向父组件传值，可以通过设置子组件props的twoWay: true来达到子组件数据绑定至父组件的效果。如果既使用.sync修饰符，同时子组件props中添加的twoWay: true时，就可以实现数据的双向绑定了，具体详细介绍看wepy...
2019-03-09 10:56:15
4714
原创 JavaScript实现Word、Excel、PPT在线预览
在文件管理的项目中需上传各种文档保存到后台，然后前端需要根据后台返回的文件地址进行在线预览，图片、视频、PDF等格式的文件用window.open(url)或者window.location.href=url能够在线预览，但是Word（.doc, .docx, .xls, .xlsx, .xlsm, .ppt, .pptx格式）文档用同样的方式打开是默认下载而不是在线预览。 微软offic...
2019-02-23 12:08:55
25430
3
原创 Vue Quill Editor自定义图片/视频上传（Element UI + OSS）、字体、字体大小、段落等
近期项目中需要使用富文本编辑器，开始想到的富文本编辑器是百度的UEditor，UEditor功能齐全、插件多，但是图片只能上传到本地服务器，如果需要上传到其他服务器需要改动源码，而且是PHP、JSP、ASP、.Net版本，同时UEditor体积过大压缩包有3.3M（jsp版本），加载速度慢。实际项目中并不需要那么多的功能，只需要基础的操作：字体、字体大小、标题、段落、图片上传、视频上传、居中对...
2018-08-07 00:31:39
13747
17
原创 Vue Element UI + OSS上传文件
Element UI提供了upload上传组件，可以到官网查看upload组件的详细介绍；查看upload组件的上传源码upload/ajax，使用的XHR对象上传文件，在项目实践中，发现该上传方法上传大文件时会出现问题，所以决定使用阿里云对象存储服务（Object Storage Service，简称OSS），OSS详细介绍可以查看官网，本文主要讲解的是OSS上传文件的前端，Browser....
2018-08-06 23:08:04
26908
21
原创 vue监听scroll使用节流函数（throttle）或防抖函数（debounce）遇到的坑
在浏览器 DOM 事件里面，有一些事件会随着用户的操作不间断触发。比如：重新调整浏览器窗口大小(resize)，浏览器页面滚动(scroll)，鼠标移动(mousemove)、文字输入(keyup)、 射击游戏中(mousedown、keydown)。也就是说用户在触发这些浏览器操作的时候，如果脚本里面绑定了对应的事件处理方法，这个方法就不停的触发。 在项目中需要通过监听元素的scro...
2018-08-06 18:11:39
18373
5
原创 JavaScript设计模式与开发实践
最近在研读了腾讯AlloyTeam前端团队，高级工程师曾探编写的《JavaScript设计模式与开发实践》，所有设计模式的实现都遵循一条原则，即“找出程序中变化的地方，并将变化封装起来”。一个程序的设计总是可以分为可变的部分和不变的部分。当我们找出可变的部分，并且把这部分封装起来，那么剩下的就是不变和稳定的部分。 JavaScript没有提供传统面向对象语言中的类式继承，而是通过原型委托...
2018-04-26 11:31:46
2211
原创 微信小程序获取用户openid
1、wx.login(OBJECT) 调用接口获取登录凭证（code）进而换取用户登录态信息，包括用户的唯一标识（openid） 及本次登录的 会话密钥（session_key）。用户数据的加解密通讯需要依赖会话密钥完成。2、code 换取 session_key 这是一个 HTTPS 接口，开发者服务器使用登录凭证 code 获取 session_key 和 openid。其中 sess...
2018-03-26 17:12:53
194268
5
原创 JavaScript基于原型的面向对象系统
我们知道在JavaScript中一切（引用类型）都是对象，对象是属性的集合，但是JavaScript中的对象到底是怎么创建的呢？在Java中是通过实例化类来创建一个对象，对象总是从类中的创建而来；在JavaScript中没有类(ES6中的class只是一个语法糖)的概念，那么JavaScript中的对象呢？JavaScript是基于原型的面向对象语言，在原型编程思想中，类并不是必需的，对象未必...
2018-03-20 21:40:54
777
原创 js函数柯里化(function currying)
currying又称部分求值。一个currying的函数首先会接受一些参数，接受了这些参数之后，该函数不会立即求值，而是继续返回另外一个函数，刚才传入的参数在函数形成的闭包中被保存起来。待到函数被真正求值的时候，之前传入的所有参数都会被一次性用于求值。 currying简单的说就是：只传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数。你可以一次性地调用 curry 函数，也...
2018-03-20 16:59:30
6012
原创 零配置打包工具 Parcel 实践
继 Webpack 之后，又一款打包工具 Parcel 横空出世，Parcel 是快速、零配置的 Web 应用程序打包器； 1、 Parcel 使用工作进程启用多核编译，并具有文件系统缓存，即使在重新启动后也可快速重新构建。 2 、Parcel 支持JS，CSS，HTML，文件资源等等 - 不需要安装任何插件。 3、在需要时，代码使用 Babel，PostCSS 和...
2018-03-06 00:05:15
10899
1
原创 使用Gulp生成SVG Symbols Sprites
SVG即可缩放矢量图形 (Scalable Vector Graphics)的简称, 是一种用来描述二维矢量图形的XML标记语言. SVG图形不依赖于分辨率, 因此图形不会因为放大而显示出明显的锯齿边缘.使用svg格式我们可以直接用代码来描绘图像，可以用任何文字处理工具打开svg图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来浏览。 在实现Web项目的图...
2018-02-08 14:01:42
1624
原创 JavaScript实现call、apply和bind
每个函数都包含两个非继承而来的方法：apply()和call()。这两个方法的用途是在特定的作用域中调用函数，实际上等于设置函数体内this对象的值。详细内容查看JavaScript中call()、apply()和 bind()方法，1、call方法的实现下面看一个使用call方法的实例：function add(c, d){ return this.a + this.b + c + d
2017-12-13 17:29:52
1850
原创 JavaScript作用域、上下文、执行期上下文、作用域链、闭包
作用域、上下文、执行期上下文、作用域链、闭包是JavaScript中关键概念之一，是JavaScript难点之一，在应聘面试时必定会问到的问题，作为前端工程师必须理解和掌握。相信大家已经阅读了很多关于这方面的文章，但是看完之后似懂非懂。在我阅读了《JavaScript高级程序设计》、《高性能的JavaScript》这两本书后，我才完全理解这些概念。一、作用域(Scope) 作...
2017-11-07 00:50:14
8266
5
原创 VScode搭建TypeScript开发环境
TypeScript 是 JavaScript 的类型的超集，它可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上，TypeScript 是开源的。为什么选择 TypeScript以及TypeScript优缺点阅读TypeScript入门教程。利用VScode搭建TypeScript开发环境前提
2017-10-17 16:17:39
13319
1
原创 浏览器HTTP缓存机制
浏览器打开页面时，需要向服务器发送请求，请求静态文件（图片，css，js等），这些静态文件通常不会经常修改，客户端可以将这些不经常修改的静态文件存储起来。当客户端再次请求时，可以直接从本地缓存中读取，这样减少了http请求和服务器负担，加快客户端加载网页速度，提高用户体验，那么这个就是客户端缓存的意义了。 Http 缓存机制作为 web 性能优化的重要手段，很多同学仅仅只是知道浏览器会对请求的静态
2017-10-10 20:37:36
957
原创 sass
Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能， 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好， 同时也让你能够快速开始小型项目， Sass 有两种语法。 第一种被称为 SCSS (Sassy CSS)，是一个 CSS3 语法的扩充版本，这份参考资料使用的就是此语法。第二种比较老的语法成为缩排语法（
2017-09-20 22:23:17
1620
原创 gulp前端自动化构建工具：常用插件介绍及使用
Gulp是基于Node.js的一个构建工具（自动任务运行器），开发者可以使用它构建自动化工作流程（前端集成开发环境）。一些常见、重复的任务，例如：网页自动刷新、CSS预处理、代码检测、压缩图片、等等…… 只需用简单的命令就能全部完成。使用它，可以简化工作，让你把重点放在功能开发上；同时减少人为失误，提高开发效率和项目质量，让专注更为专注。如果你之前接触过Grunt，那上手Gulp就会觉得非常容易理解
2017-09-16 20:30:42
4276
4
原创 前端常见跨域解决方案
什么是跨域？ 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。广义的跨域： 1.) 资源跳转： A链接、重定向、表单提交 2.) 资源嵌入： 、什么是同源策略？ 同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CS
2017-09-15 13:46:21
1012
原创 iframe.contentWindow
1、iframe.contentWindow(主页面调用iframe) 此处的iframe是从document取得的，即作作为document的子对象出现，虽然是文档(document)对象，但由于它是独立的页面，因而拥有自己的事件，拥有自己的窗口对象(contentWindow)；contentWindow属性是指指定的frame或者iframe所在的window对象。 在IE中iframe
2017-09-15 12:06:48
4682
原创 gulp API
一、gulp.src(globs[, options]) gulp.src方法是指定需要处理的源文件的路径，gulp借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，gulp.src返回当前文件流至可用插件；1、globs： 需要处理的源文件匹配符路径。类型(必填)：String or StringArray；glob 请参考 node-glob 语法 或者直接写
2017-09-14 20:38:13
556
原创 CSS Flex布局
flex 布局 2009年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。通过学习，编写了flex布局demo保存在github上：https://github.com/San-Shui/flex-box-demodemo演示地址：http://www.wjnxx.com.cn
2017-09-14 11:07:30
1428
原创 JS数组扁平化、去重、排序
在网上看到一个校招题目，已知一个数组var arr = [[1, 3, 2, 1],[5, 3, 4, 8, 5, 6, 5],[6, 2, 8, 9, [4, 11, 15, 8, 9, 12, [12, 13, [10], 14]]], 16]，用js编写一个程序将这个数组扁平化，并得到一个升序且无重复值的数组。得到最终结果为：[1,2,3,4,5,6,8,9,10,11,12,13,14,15
2017-09-13 15:30:17
6479
1
原创 webpack配置及优化
Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。总的来说webpa
2017-09-11 20:02:12
2365
原创 Git标签管理
如果你达到一个重要的阶段，并希望永远记住那个特别的提交快照，你可以使用 git tag 给它打上标签。git tag <name>可以用命令git tag查看所有标签：git tag 默认标签是打在最新提交的commit上的。有时候，如果忘了打标签，比如，现在已经是周五了，但应该在周一打的标签没有打，怎么办？方法是找到历史提交的commit id，然后打上就可以了：git log --pretty
2017-09-08 12:04:31
418
原创 Git分支管理
1、创建、合并、删除分支首先，我们创建dev分支，然后切换到dev分支：git checkout -b devgit checkout命令加上-b参数表示创建并切换，相当于以下两条命令：git branch devgit checkout dev然后，用git branch命令查看当前分支：git branchgit branch命令会列出所有分支，当前分支前面会标一个*号。现在，dev分支的工作
2017-09-07 22:16:31
411
原创 Git基本操作
CVS及SVN都是集中式的版本控制系统，而Git是分布式版本控制系统，集中式和分布式版本控制系统有什么区别呢？ 集中式版本控制系统最大的毛病就是必须联网才能工作，如果在局域网内还好，带宽够大，速度够快，可如果在互联网上，遇到网速慢的话，可能提交一个10M的文件就需要5分钟，这还不得把人给憋死啊。 和集中式版本控制系统相比，分布式版本控制系统的安全性要高很多，因为每个人电脑里都有完整的版本库，某一
2017-09-07 17:51:45
425
原创 windows删除node_modules
因为node_modules内部嵌套的子目录太多； 直接删除会报错：【文件名或扩展名太长无法删除，要么就是目录层次超过】 解决 使用的是npm里面一个专门用于删除的模块插件rimraf，官方描述：A deep deletion module for node (like rm -rf) 简单点说，就是模拟unix或者linux下的rm -rf（强制删除命令）安装 npm install
2017-09-05 22:21:37
6734
1
原创 Yarn基本命令行
Yarn 是一个新的包管理器，用于替代现有的 npm 客户端或者其他兼容 npm 仓库的包管理工具。Yarn 保留了现有工作流的特性，优点是更快、更安全、更可靠。 1、初始化一个新的项目 yarn init = 》 npm init2、添加一个依赖包 yarn add [package] = 》npm install [package] - -save yarn add [p
2017-09-01 10:42:31
8532
原创 vue自定义指令VNode详解
1、自定义指令钩子函数Vue.directive('my-directive', { bind: function () { // 做绑定的准备工作 // 比如添加事件监听器，或是其他只需要执行一次的复杂操作 }, inserted: function (newValue, oldValue) { // 被绑定元素插入父节点时调用 }, update: f
2017-08-31 11:09:32
22605
1
原创 axios请求接口发起两次请求（OPTIONS 与POST/GET）
使用axios发现每次调用接口都会有两个请求，第一个请求时OPTIONS请求，只有OPTIONS请求通过才会发送实际的请求。 为什么XMLHttpRequest的POST请求会变OPTIONS请求－XMLHttpRequest对象对HTTP请求的访问控制（CORS跨站资源共享）；HTTP访问控制（CORS）；通过这两篇文章可以知道什么是OPTIONS请求，如果要避免OPT...
2017-08-09 17:36:25
23383
原创 ES6 module export和import
1、为什么有模块概念 历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。 在 ES6 之前，社区制定了
2017-07-28 17:11:02
2062
原创 axios在vue中的简单配置与使用
一、安装1、 利用npm安装npm install axios --save2、 利用bower安装bower install axios --save3、 直接利用cdn引入二、例子1、 发送一个GET请求//通过给定的ID来发送请求axios.get('/user?ID=12345') .then(function(response){ console.l
2017-07-28 14:29:45
19060
原创 vue按需加载组件-webpack require.ensure
webpack中的require.ensure()可以实现按需加载资源包括js,css等，它会给里面require的文件单独打包，不和主文件打包在一起，webpack会自动配置名字，
2017-07-28 09:58:07
44690
5
原创 Promise深入理解
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。
2017-07-28 09:03:55
4310
2
原创 Vue Prop使用
组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的 props 选项。 vue 实例 Vue.component('child', { props: ['message'], tem
2017-07-26 15:00:20
5700
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人