- 博客(31)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 参照antd table写的表格组件
参数说明类型默认值columns表格列的配置描述，具体项见下表ColumnsType[]–dataSource数据数组object[]–rowKey唯一字段key名string–className表格内置样式名: 常用表格、试卷详情表格stringborder-tablehasSelection表格行是否可选择booleanfalseonSelectionChange复选框选择后回调函数(checkedIds) =>...
2022-01-27 16:06:24
934
原创 结合tween和requestAnimationFrame实现的点到点轨迹动画
类似高德地图的轨迹路线实现，结合tween和requestAnimationFrame实现的: 传入一些轨迹点集合，利用tween得出每两个点之间的动态点坐标。` Document <div class="test"> <div id="box" style="left:0"></div></div><script> var position = { x: 10,
2021-06-01 11:03:17
407
原创 vue原理及其部分重点
mvvmMVVM是Model-View-ViewModel缩写，也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据。响应式数据原理响应式对象响应式对象，核心就是利用 Object.defineProperty 给数据递归添加了 getter 和 setter，目的就是为了在我们访.
2021-06-01 11:01:03
182
原创 LRU（最近最少使用）缓存机制在前端开发中的实际应用
一、 需求：检查项里面配有摄像头。可重复配置，初始化播放前三个视频，然后点播放视频a，1. a如果和当前列表重复，则此视频高亮。并且将a的顺序调到最后面2. A如果是新视频，则替换列表中最前面操作的视频二、业务调用初始化三个视频let len = 3this.cameraNodes = new LRUcache(len) for(var i=0; i<len; i++){ //这里闭包传入i 保证i是正确的0，1.。。而不是都是len (function(i){
2021-04-28 17:01:54
581
原创 utils文件整合
仿照聊天消息时间展示 判断一个日期 是否是 今天/昨天function getDateStr(time) { let now = new Date(), //今天零点 today_o = `${now.getFullYear()}-${now.getMonth()+1}-${now.getDate()}`, today_o_stamp = new Date(today_o).getTime(), yester_o_stamp = .
2020-12-16 16:55:44
237
原创 落地实施微信公众号的网页支付
起因：最近项目里用到了小程序的支付，，这一块看微信文档比较顺畅。但做起公众号的网页支付，觉得文档就有点模糊不清楚，写的太多，没有可实现的code，查阅各种资料，才顺利完成支付；一、 引入JSSDK绑定JS接口安全域名之后直接访问 sdk安装插件 weixin-js-sdkwindow.wx = require('weixin-js-sdk')二、 通过config接口注入权限验证配置这里通过单独的wxConfig组件引入形式达到一次异步配置<template>.
2020-11-28 15:56:55
378
原创 微信公众号网页jsapi授权
微信授权登录并获取用户基本信息官方文档详细步骤微信公众账号提供用户请求授权页面URL。用户点击授权页面URL，将向服务器发起请求scope为snsapi_base时 服务器询问用户， 用户同意授权给微信公众账号服务器跳转页面将CODE回调传给微信公众账号微信公众账号通过CODE向服务器请求Access Token 完成授权实现微信公众平台配置 ： 必须配置成 https://****此处需要 安全域名的证书必须来自当前域名下，在开发中因为java配置证书为别的域名下。导致在开发
2020-11-28 15:33:36
1151
原创 了解Promise.allSettled
例子const resolved = Promise.resolve(42)const rejected = Promise.reject(-1)const allSettled = Promise.allSettled([resolved, rejected])allSettled.then(res => { console.log(res)})// // [// { status: 'fulfilled', value: 42 },// { st.
2020-11-18 15:26:37
424
原创 echart图表上传
理论： 可以用canvas截图实现： echarts提供了方法DOM.getDataURL(opts),opts有type，pixelRatio， backgroundColor等配置需求： 实现多个图表的截图上传，进出港的进港统计，出港统计，进出港折线图统计code：DOM.// 多个echart图片导出,并上传拿到“图片id”，返回到进出港页面做导出图表async function getPdf() { await getUploadUrl({name: 'in', DOM: i.
2020-11-18 14:16:02
391
原创 uniapp 两个scroll-view相互作用
如何在uniapp，scroll-view标题和scroll-view内容相互联动效果?talk is less, show the code:<template> <view class="img-show-wrap fz"> <scroll-view class="tabs-con" scroll-x="true" scroll-with-animation :show-scrollbar=false> <view class="tabs-con
2020-06-30 10:25:11
7605
1
原创 transform在css中的巧用
未知高度下的垂直居中top: 50%; transform: translateY(-50%);线条动画： 由中间向两边散开left: 50%; transform: translateX(-50%);
2020-06-29 17:21:48
337
原创 简单实现redux，了解redux原理
实现createStore、getState、subscribe、dispatchexport function createStore(reducer, enhancer){ let currentState = undefined; let currentListeners = []; //提供getState方法 function getState(){ return currentState } //订阅方法： 把订阅.
2020-06-03 11:02:50
264
原创 简单实现antd的表单设计
这里用到的antd v3 版本的antd从antd的使用入手：class NormalLoginForm extends React.Component { handleSubmit = e => { e.preventDefault(); this.props.form.validateFields((err, values) => { if (!err) { console.lo.
2020-06-02 16:19:27
1654
原创 vue项目的实践总结
1. vue-cli配置1.1 通过命令查看配置结果：vue inspect 全部配置vue inspect --rules 查看全部规则vue inspect --rule vue 查看指定规则vue inspect --plugins 查看全部插件vue inspect --plugin vue-plugin 查看指定插件vue inspect --mode development 指定模式vue ui 查看可视化配置界面1.2 svg-sprite-
2020-05-22 17:02:29
4140
原创 vue 2 组件之间传值
对vue2版本的组件之间传值的一个简单整合：父组件 =》 子组件: props 和 refs- props: { msg: String }//parent<hello-world :msg="welcome to vue.js" />this.$ref.helloWorld.msg子组件 =》 父组件 : 自定义事件//childthis.$emit('send', msg)//parent<hello-world @send="sendMsg($eve
2020-05-18 14:05:40
513
原创 深入了解reduce
语法arr.reduce(callback,[initialValue])reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。callback （执行数组中每个值的函数，包含四个参数）1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））2、currentValue （数组中当前被处理的元素）3、i.
2020-05-13 15:53:40
698
原创 在vue项目中引用less全局文件
问题：在vue中引入一些公共的文件，比如全局变量、函数；一般比较常见的做法是，在每一个页面都初始引入公共文件@import url("~@less/variable.less");这种做法要写很多句引入，一直在重复，重复的代码就没有意义，其实有办法一次引入，受用终生；一次引入的做法来了~~~vue-cli 2版本的写法在build/utils 里配置//定义lessloader的加...
2020-03-31 17:23:29
8455
原创 JS设计模式： 参与者模式
参与者模式： 在特定的作用域中执行给定的函数。并将参数原封不动的传递需求情景： 定时从后端拉取数据，缓存下来，一旦用户点击查看，就要展示这些信息=》 点击一个按钮要将额外的数据传入这个事件的回调函数中let A = { event: {} }A.event.on = function(dom, type, fn) { if(dom.addEventListener) { ...
2020-01-18 17:59:01
542
原创 vue项目中页面响应式布局设计方案
针对全屏页面开发，兼容 19201080，以及 1366768js设置原型属性$screen: 获取当前是什么屏幕isS： 1366定义的最小屏幕isM： 1366-1600的中间屏幕isB： 1600以上的大屏在主文件app.vue中设置：let _w = window.innerWidth, _h = window.innerHeight, isS = fals...
2019-11-27 17:09:49
7171
原创 webpack配置多种打包方式
配置多种打包方式npm run build:test 测试服务器npm run build:innet 内网服务器具体配置：配置package.json "build:innet": "set NODE_ZNV='innet' && node build/build.js"ps: set NODE_ZNV=‘innet’ 这个参数可以通过process...
2019-08-28 18:00:52
368
原创 在vue中 storge 和vuex使用的用法区别
在vue中 storge 和vuex使用的用法区别1.联动性：storge对于属性的改变不能触发其他页面的改动storage： 存取login之后就不会改变的信息，比如userId， isAdmin(是否是管理员)vuex： 存取login之后可能在某个组件会改变的信息， 比如isInMyPort，isInPort比如：我在A页面改了userInfo 不经过刷新。b对他的调用并不知...
2019-08-28 17:49:19
1318
原创 jquery中$.Callback的解析认识
用法观察者模式: 添加完后统一触发。function aaa(){ alert(1);}function bbb(){ alert(2);}var cb= $.Callbacks();cb.add(aaa);cb.add(bbb);cb.fire();好处，应用场景。要统一的管理aaa和bbb。有时候如下，很难对不同作用域下的函数进行统一管理。fu...
2019-08-28 17:04:26
1217
原创 git clone 报错 SSL_ERROR_SYSCALL, errno 10054
git clone发生错误RPC failed; curl 56 OpenSSL SSL_read: SSL_ERROR_SYSCALL, errno 10054原因： 刚新换电脑，电脑已经存在他人的ssh，但是git配置的账号密码已经改成自己的吗，这样ssh和用户不一致解决办法:配置自己的ssh替换原来用户的步骤：检查是否已经有SSH Key：cd ~/.ssh...
2019-07-17 10:54:20
8685
2
原创 vue源码基础点
1.Object.defineProperty(obj, propertyName, {})1.writeable: 默认为false 只读2.get：获取属性值3.set：监视属性值的变化4.configurable: 是否可以重新定义2.Object.keys() 得到对象可枚举属性组成的数组3.Object.hasOwnProperty(‘属性名称’): 属性是存在于自身。而不...
2019-03-24 15:55:32
425
原创 vuex简单入门：singer实例创建以及读写全过程
Vuex 是什么？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 原理图对于原理图的分析理解： Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store ...
2018-05-14 14:37:31
889
原创 vue实现音乐播放器实战笔记
其他此应用的全部数据来自 QQ音乐，利用 axios 结合 node.js 代理后端请求抓取全局通用的应用级状态使用 vuex 集中管理全局引入 fastclick 库，消除 click 移动浏览器 300ms 延迟页面是响应式的，适配常见的移动端屏幕，采用 flex 布局疑难总结 &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; 小技巧关于 Vue
2018-05-10 13:52:44
14283
3
原创 vue2.0用axios来进行referer伪造
当使用跨域jsonp接口时。referer属性是前台接口告诉服务器该接口的域名，而后台可以对应设置请求头referer从而对接口进行限制访问。 比如qq音乐的一个jsonp数据接口 https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg 其后台接口对referer和host的设置如下referer: 'https://...
2018-05-08 11:28:59
21717
2
原创 vue开发拖拽进度条滑动组件
分享一个最近写的进度条滑动组件，以前都是用jq写，学会了vue，尝试着拿vue来写觉得非常简单，代码复用性很强！ 效果图如下：调用组件如下：<slider :min=0 :max=100 v-model = "per"></slider><template> <div class="slider" ref="slider"
2018-05-02 17:18:14
22228
13
原创 VUE构建虚拟DOM的原理剖析以及render函数
要想通过VUE来写HTML结构，一般官方推荐都是tempplate属性，使用起来简单方便；具体code如下例一：例一：使用template进行渲染ul列表var vm = new Vue({ el:"#demo1", template:` <ul class = "bg" style = "fontSize:20px" abc = "yyy"&...
2018-04-23 11:27:02
2883
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人