- 博客(93)
- 收藏
- 关注
RSS订阅原创 vue 拖拽指令
Vue.directive('dragscroll', function(el) { el.onmousedown = function(ev) { const disX = ev.clientX; const disY = ev.clientY; const originalScrollLeft = el.scrollLeft; const originalScrollTop = el.scrollTop; const originalScrollBehavio
2022-03-02 15:12:29
1005
原创 ES2015 迭代器模式 Iterator
设计模式：迭代器模式一、实现迭代器的目的是干什么呢？// 迭代器设计模式// 场景：你和我协同开发一个任务清单应用// 我的代码 =========const todoList = { life:['吃饭','睡觉','撸猫'], study:['语文','数学','英语']}// 你的代码 =========for (const item of todoList.life) { console.log(item);}for (const item
2020-11-22 17:01:10
283
2
原创 ES2015 Iterable（可迭代的）接口
一、为什么ES2015提供Iterable（可迭代的）接口ES中能够表示有结构的数据类型越来越多，以前有数组、对象等等，ES2015中新增了Map和Set对象…为了给各种各样的数据结构提供统一遍历方式，ES2015提供了Iterable（可迭代的）接口接口的概念：可以理解为一种规格标准例如在ES中，任意一种数据类型都有toString()方法，这是因为他们都实现了统一的规格标准，即他们都实现了统一的接口实现Iterable接口就是for…of的前提二、了解for…of 的内部原理在控制台打
2020-11-22 16:36:04
383
原创 ES2015 for of 循环
一、为什么ES2015 引入 for of 循环我们先来回想一下，ES2015以前与遍历相关的方法for循环：遍历普通的数组for in : 遍历键值对一些函数式的遍历方法 ，比如forEach这些遍历方式都有一定的局限性，比如说forEach() 不能退出循环// for of 基本语法const arr = [100,200,300,400]for(const item of arr){ console.log(item) if(item > 100){ br
2020-11-18 06:57:27
478
原创 ES2015 Symbol 一种全新的原始数据类型
一、Symbol 的基本使用在ES2015之前，对象的属性名都是字符串，而字符串有可能会重复，重复的话有可能会有冲突。看一个例子，比如有3个js文件// share.js=========const cache = {}// a.js=========cache['foo'] = '123'// b.js=========cache['foo'] = Math.random()console.log(catch)现在我们大量使用第三方库，很多时候需要自己去扩展。如果出现属性重复怎么办
2020-11-17 19:14:19
229
原创 ES2015 Reflect 统一的对象操作API
Reflect属于一个静态类，也就是说他不能通过new方法去构建一个实例对象 new Reflect。只能够去调用这个静态类的一些静态方法，比如 Reflect.get( )，Math对象也是如此。Reflect 内部封装了一系列对对象的底层操作，提供了13个静态方法。Reflect.get(target, name, receiver)Reflect.set(target, name, value, receiver)Reflect.has(target, name)Reflect.de
2020-11-07 14:36:06
224
原创 ES2015 class
一、类 classES2015以前ECMAScript都是通过定义函数和定义原型对象来实现类// 比如定义一个Person类// 先定义一个函数，作为类的构造函数function Person(name){ this.name = name;}Person.prototype.say = function(){ console.log(`say ${this.name}`)}ES2015以后新增了class关键词来声明一个类class Person{ // 如果需要在
2020-11-07 13:44:38
264
原创 ES2015 Proxy 对比 defineProperty
如果我们想监视某个对象的读写，我们可以使用ES5提供的defineProperty方法为对象添加属性，可以捕获到对象属性的读写过程。defineProperty应用场景：在vue3.0 以前的版本，就是使用defineProperty实现了数据响应从而实现双向数据绑定。因为Proxy比defineProperty，vue3.0 中使用的是Proxy在ES2015中，全新设计了一个叫做Proxy 的类型，专门用来为对象设置访问代理器。什么是代理呢？通俗点解释：把代理想象成门卫，无论你是想出去还是
2020-11-06 17:22:26
446
原创 ES2015 箭头函数( Arrow functions ) 与 this
箭头函数没有this的机制，箭头函数不会改变this的指向第一个例子const person = { name:'tom', sayHi:function(){ console.log(`hi,my name is ${this.name}`) }}person.sayHi()// hi,my name is tomconst person = { name:'tom', sayHi:()=>{ console.log(`hi,my name is
2020-11-06 15:44:05
209
原创 ES2015 ...操作符的2种用法
ES2015中新增了一种...的操作符，...操作符有两个作用一、剩余参数 RestES2015以前对于未知个数的参数，我们是用arguments对象来接收，arguments是一个伪数组function foo(){ console.log(arguments)}foo(1,2,3,4,5,6,7)ES2015以后，可以用...来代替arguments 接收剩余参数//在形参前面加上...操作符，这个形参以数组的形式接收从当前这个位置开始往后所有的实参。可以取代以前以argumens
2020-11-06 15:19:10
219
原创 ES2015 函数的参数默认值 Default Parameters
ES2015以前，如果我们想要设置参数默认值，需要在函数体中通过逻辑代码来实现。// ES2015以前我们需要在函数体中通过逻辑代码来实现function foo(param){ param = param === undefined ? true : param; console.log(param)}foo() // trueES2015以后，实现方法就简单方便多了：function foo(param = true){ console.log(param)}foo()
2020-11-05 16:33:28
424
2
原创 ES2015 解构 Destructuring
ES2015 新增了一种从数组/对象中获取指定元素的方法，叫解构。一般来说，所有新增方法都是为了弥补过去版本的不完美，正是因为遇到了问题，才出现了新的解决方案。一、数组的解构 （Destructuring）在过去，如果我们想提取一个数组的元素，方法如下：const arr = [100,200,300]const item1 = arr[0]const item2 = arr[1]const item3 = arr[2]console.log(item1,item2,item3) //
2020-11-05 16:22:03
331
原创 ES2015 let与块级作用域
一、块级作用域在ES2015之前，ES中只有2种作用域：全局作用域函数作用域ES2015新增了一种作用域——块级作用域，现在有3种了：全局作用域函数作用域块级作用域块： 代码中用花括号所包裹起来的范围举两个常见的块：if(true){ console.log('花括号里面是块')}for(var i = 0; i<10; i++){ console.log('花括号里面是块')}ES2015以前块是没有单独的作用域的，这就导致我们在块里面定义的成员，外部也可以
2020-11-05 16:01:01
158
原创 JavaScript和ECMAScript之间的关系
JavaScript是ECMAScript的扩展语言ECMAScript 也是一门脚本语言，缩写为ES，通常看做JavaScript的标准化规范。但实际上JavaScript是ECMAScript的扩展语言，因为ECMAScript只提供了最基本的语法，通俗点说只是约定了我们的代码如何编写，比如定义变量和函数，循环和分支…它只是停留在语言层面，并不能用来完成我们应用中的实际功能开发。JavaScript实现了ECMAScript的语言标准，并且在这个基础之上做了一些扩展，使得我们可以在浏览器环境中操作
2020-11-05 11:33:26
2783
1
原创 说说我陷入的思维误区
昨天，听了关于价值变现的分享，有一个点对我触动特别深。摘取我的一部分笔记：=======只要行业还在，就永远有刚刚入门的人。你别觉得自己进入这个行业晚了，还会有比你更晚的人，所以，你的经验就会有价值。比你晚入门的后辈可以参考你分享的经验前进，因为对于一个新手来说，一开始就看资深顶级内容明显是一头雾水，能力也不匹配的。当然，市场上永远有比你专业精进的前辈，你也可以向他们学习，可以避免走很多弯路，减少时间成本和金钱成本，快速成长。你的经验，同样也可以作用给起步比你晚的人。举个意思想通的例子，当我
2020-10-15 19:04:05
256
1
原创 ant design vue 和 v-contextmenu右键点击菜单实现树tree 增删改查
实现思路：vue的实现思路和前面写的react版本的是一样的…ant design vue 有一个右键点击的API @rightClick, 所以想自己扩展基于树结构的增删改查功能还是蛮简单的。我这里实现的是，右键点击会出现操作图标，增加、删除按钮会弹出相应的操作弹窗。右键单击出现的菜单是用v-contextmenu实现的v-contextmenu文档说明：https://github....
2019-09-29 14:28:29
11188
4
原创 ant design vue 右键点击菜单实现树tree 增删改查
实现思路：vue的实现思路和前面写的react版本的是一样的…ant design vue 有一个右键点击的API @rightClick, 所以想自己扩展基于树结构的增删改查功能还是蛮简单的。我这里实现的是，右键点击会出现操作图标，增加、删除按钮会弹出相应的操作弹窗。效果展示：部分代码实现：因为项目里还有设计其他的业务逻辑，这里只展示了核心代码。html: <a-c...
2019-09-29 14:12:08
16725
8
原创 ant design react 右键点击菜单实现树tree 增删改查
效果展示：html: <Card bordered={false} onClick={this.clearMenu}> <Alert type="info" showIcon message="左键点击组织可查看该组织下的人员，右键点击该组织可以进行添加、修改、删除操作" type="info" /> <di...
2019-09-29 14:03:38
12432
4
原创 vue 使用 v-charts 实现环形图
v-charts 文档直达v-charts 有环形图的示例demo但这不是我想要的效果，需要自己调整一下样式下图是我调整之后的样子，我隐藏了自带的legend，环形图里面的颜色改成了渐变色1、安装v-chartsnpm i v-charts echarts -S2、在main.js 引入环形图因为我现在里面只用到了环形图，所以我只引入了这一个。// main.jsimpor...
2019-07-07 16:51:21
19866
12
原创 react native 接入百度AI活体检测、人脸识别 iOS版本
1、下载iOS 有动作版本SDK下载下来的的压缩包解压后是这样的：2、把用xcode 把FaceSDK导入到iOS项目3、确认下Bundle Identifier 是否是申请license时填报的那一个（注意：license和Bundle Identifier是一一对应关系，填错了会导致SDK不能用）3、把6个文件导入iOS包名把FaceParameterConfig.h...
2019-06-28 20:47:59
1545
5
原创 react native 接入百度AI活体检测、人脸识别 Android版本
https://github.com/songxiaoliang/react-native-baidu-face业务需求场景： 利用百度AI进行活体检测1、注册百度AI开放平台账号注册地址：百度AI开放平台注册之后，进行企业认证，这项功能需要企业认证才开放的。2、创建应用登录之后找到人脸识别模块，然后创建应用创建应用之后，会生成AppID 、API Key 等信息，这些后续在An...
2019-06-28 20:00:20
4907
2
原创 react native实现水波浪动画效果
web端可以用canvas来绘制波浪效果react native 中可以用ART来绘制，ART可以绘制直线、虚线、矩形、圆等等…Android默认就包含ART库，IOS需要单独添加依赖库。ART暴露的组件有7个，在这里就不多介绍了，推荐2篇文章：react-native-art-绘图入门react-native之ART绘图详解废话不多说了1、添加依赖Android默认就包含A...
2019-06-26 11:11:59
2784
1
原创 react native 清除缓存
1、安装react-native-http-cachenpm install react-native-http-cache --save2、Linking Librariesreact-native link react-native-http-cache执行这个命令之后，Android和iOS项目都会把库链接进去。(PS: 如果该命令添加失败的话，需要自己在Xcode或者An...
2019-04-22 17:15:47
2872
原创 ant design vue 表格table 默认勾选几项
为什么我同样的功能要用react 、vue 都写一遍 ？啊我真是不是闲的蛋疼啊(～ o ～)~zZ在 ant design vue 中 ， 表格的第一列是联动的选择框截一张官方文档图，图示最后一排就是禁用状态点击 checkbox 会触发onChange , 从而得到selectedRowKeys,selectedRowKeys就是选中的 key 数组。 onChange: (sele...
2019-04-04 11:27:29
11672
17
原创 ant design react 表格table 默认勾选几项
在 ant design react 中 ， 表格的第一列是联动的选择框截一张官方文档图，图示最后一排就是禁用状态点击 checkbox 会触发onChange , 从而得到selectedRowKeys,selectedRowKeys就是选中的 key 数组。 onChange: (selectedRowKeys, selectedRows) => { console.lo...
2019-04-04 11:26:29
10613
8
原创 vue+cordova 实现第三方登录（ QQ 微信 微博）之微博登录
概要1、首先先到各个开放平台申请开发者账号先申请，审核通过还需要一定时间微信开放平台 https://open.weixin.qq.com/腾讯开放平台 http://open.qq.com/新浪微博开放平台 http://open.weibo.com/2、添加对应的cordova插件QQ：https://github.com/iVanPan/Cordova_QQ.git微...
2019-03-29 10:26:00
1659
原创 vue+cordova 实现第三方登录（ QQ 微信 微博）之微信登录
概要1、首先先到各个开放平台申请开发者账号先申请，审核通过还需要一定时间微信开放平台 https://open.weixin.qq.com/腾讯开放平台 http://open.qq.com/新浪微博开放平台 http://open.weibo.com/2、添加对应的cordova插件QQ：https://github.com/iVanPan/Cordova_QQ.git微...
2019-03-25 17:39:50
5771
7
原创 vue-cli3 + cordova搭建app
概要1、首先先到各个开放平台申请开发者账号先申请，审核通过还需要一定时间微信开放平台 https://open.weixin.qq.com/腾讯开放平台 http://open.qq.com/新浪微博开放平台 http://open.weibo.com/2、添加对应的cordova插件QQ：https://github.com/iVanPan/Cordova_QQ.git微...
2019-03-25 17:38:34
3798
11
转载 ionic cordova开发的Android应用程序签名（或重新签名）详解
1、给哪种apk签名cordova 可以打包出2种apk包，一种是debug测试版,一种是release发布版。签名是给release发布版的apk签名的打包发布版的apk:cordova build andorid --release完全通过DOS命令来完成apk签名2、签名的3个工具给apk签名一共要用到3个工具，或者说3个命令，分别是：keytool、jarsigner和zipa...
2019-03-25 17:07:40
1509
原创 ionic cordova 打包debug调试版、release发布版
2.两种打包的版本 一种是debug调试版，一种是release发布版打包debug调试版 在工程目录下执行ionic build android，生成的apk就是debug调试版本 打包release发布版 在工程目录下执行ionic build andorid –release，生成的apk就是release发布版本。 如果没有配置签名文件则默认只生成android-releas...
2019-03-25 16:37:41
1786
2
原创 dva 中使用postcss-pxtorem适配移动端
1、安装插件npm install postcss-pxtorem --save-dev2、 新建一个rem.js放在utils下面// 基准大小const baseSize = 32// 设置 rem 函数function setRem () { // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。 const scale = document.docume...
2019-03-13 15:26:38
2963
5
原创 hybrid app cordova解决软键盘遮挡输入框
1、监听原生软键盘的动作 cordova plugin add ionic-plugin-keyboard //监听原生软键盘的动作2、在index.js添加相关事件// 监听键盘隐藏 window.addEventListener('native.keyboardshow',function (e) { document.documentElement.sty...
2019-03-12 11:24:28
1731
原创 Cordova解决低版本安卓系统WebView兼容问题，更改WebView内核
有2种解决办法：Crosswalk内核腾讯x5内核Crosswalk内核1. 如何使用：cordova plugin add cordova-plugin-crosswalk-webview 2.关于 cordova-plugin-crosswalk-webview报错：原因：gradle版本跟crosswalk产生冲突，需要降低gradle版本，或者安装兼容插件解决办法有...
2019-03-12 11:14:46
7893
原创 cordova build Command failed with exit code EACCES
解决方案：删除平台目录，并重新安装每个平台（这里以Android为例）$ cd <your-project-directory>$ rm -r platforms $ cordova platform add android$ cd <your-project-directory>/platforms/android/cordova$ chmod a+x b...
2018-10-30 15:30:45
4142
1
原创 mac上配置cordova开发Android平台APP环境
cordova上有说明文档，如何开始一个APP: cordova中文文档在配置环境这块没有详细说明，只是简单介绍了一下步骤在cordova中文文档中我们看到需要安装以下4个东西。（Android 平台的）1、Java JDKjava jdk 下载地址：下载下载安装之后，可以 /usr/libexec/java_home -V 查看一下版本和路径信息：然后配置一下环境变量环境变量...
2018-10-29 17:05:34
1722
原创 markdown 之生成pdf文件
给大家推荐一个免费的，markdown文件导出为pdf的网站：[stackedit]（https://stackedit.io/app#）导出方法点开菜单导出文件选择导出为pdf文件格式是不是特别简单？？_...
2018-10-18 16:46:49
2178
2
原创 markdown 之项目目录文件结构展示
一般来说，我们为项目写readme文档时，都会对整个目录的项目结构做个说明。例如这样的：我们可以用mddir来生成项目目录结构：mddir使用命令node mddir "../relative/path/"例子打开终端或命令提示符，并cd进入mddir /src文件夹。使用说明：$ cd ~/Documents/demo-project$ pwdUsers/usernam...
2018-10-18 16:45:56
24331
原创 几个常见的Content-Type
几个常见的Content-Type:text/html ：HTML格式text/plain ：纯文本格式 text/xml ：XML格式image/gif ：gif图片格式 image/jpeg ：jpg图片格式 image/png ：png图片格式application/xml ： XML数据格式application/json ： ...
2018-07-20 11:19:06
6598
原创 npm 安装卸载模块 & ionic插件安装与卸载
npm安装模块npm install xxx利用 npm 安装xxx模块到当前命令行所在目录npm install -g xxx利用npm安装全局模块xxx本地安装时将模块写入package.json中：npm install xxx 安装但不写入package.jsonnpm install xxx –save 安装并写入package.j...
2018-04-12 10:35:12
18703
4
原创 gulp-file-include构建公用头部尾部
如果静态文件都包含了公用的头部和尾部一个个改的话太浪费时间啦。gulp-file-include可以让我们把公用的文件都放在header.html和footer.html然后再构建，如果需要改头部尾部的话只需要改一个文件就好。page文件夹里面包含include文件夹和若干html静态文件：include文件夹里放着公用的头部和尾部：（如果需要改尾部信息只需要改这个地方）gulp-file-in
2018-04-11 15:54:22
3162
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人