- 博客(27)
- 收藏
- 关注
RSS订阅原创 浏览器的存储与缓存机制
文章目录浏览器存储与缓存机制浏览器存储cookie原理及生成方式cookie的缺陷cookie与session的区别与联系手写cookielocalStoragesessionStoragesessionStorage 、localStorage 之间的区别IndexedDBcache总结区分浏览器缓存机制缓存过程强缓存Expires(HTTP/1.0)Cache-Control (HTTP/1...
2019-09-05 15:45:33
1956
1
原创 小程序实现单个卡片左滑显示按钮，并防止上下滑动干扰
实现类似ios端微信的左滑显示置顶、删除按钮的功能，首先需将按钮部分设为绝对定位，并且right设为负值溢出屏幕。利用小程序事件处理的api，分别读取触摸开始，触摸移动时，触摸结束的X/Y坐标，根据差值来改变整个卡片的位置。这里有一个细节，为了防止按钮的点击干扰到卡片主部分的滑动，需要将整个卡片分为两部分。<View style={`${positionStyle[index]}`}&g...
2019-08-02 18:19:29
1071
原创 利用flex布局实现仿微信群的多头像九宫格自适应布局
利用flex布局实现微信群的多头像自适应布局微信群聊的头像是多个成员的组合，例如下图。可以看到根据单个小头像的大小可以分为三类，分别可以看做是整个大头像的98%，47%和31%。所以可以根据单个数组的长度，分别匹配不同的样式。而为了模拟后台返回的多头像接口，需要额外做一个判断，即最多只能显示9张头像。<div id="app"> <div class="avata...
2019-07-20 17:11:48
2664
原创 利用Canvas实现小程序分享海报的生成与本地保存
利用Canvas实现小程序分享海报的生成与本地保存文章目录利用Canvas实现小程序分享海报的生成与本地保存实现过程在组件中渲染canvas使用`getImageInfo`获取canvas的图片资源根据机型适配尺寸将canvas保存成图片其他一些坑canvas在安卓机上的绘制问题canvas的层级问题虽然说这是个很常见的需求了，但真正实现起来才发现其中的坑是如此之多。尤其是微信小程序对于Can...
2019-07-10 18:13:31
1138
原创 微信小程序添加插屏广告并设置显示频率（一天一次）
微信小程序今年新上线了插屏广告，设置和在代码库中接入都非常方便。详细可见微信小程序官方文档。大体的流程就是在小程序后台新建广告位，获取到广告位的adUnitId并嵌入到源代码，因为插屏广告的单页面性，在页面的onload处添加即可。let interstitialAd = null;if (wx.createInterstitialAd) { interstitialAd = wx....
2019-07-04 09:45:23
6813
原创 剑指offer里的递归与循环
文章目录递归怎么解根据前序中序序列重建二叉树从尾到头打印链表递归产生的问题Fibonacci数列跳台阶变态跳台阶总结其实这是第二遍刷剑指offer，发现已经忘得差不多了…虽然说有印象，但该不会写还是不会写。果然纯粹为刷题而刷题，完全不总结还是没啥用啊。所以这次根据题号顺序对里面的算法思想做个总结。递归怎么解对于算法ruo ji来说真的很不愿意用递归…因为绕来绕去一定会把自己绕进去。在平时写...
2019-07-02 15:16:55
212
原创 JavaScript的执行机制——同步与异步、事件循环、微任务与宏任务
文章目录@[toc]JS执行机制同步任务异步任务为什么要异步？常见的异步任务/模式setTimeoutsetIntervalPromisegeneratorasync/awaitajaxjs如何实现异步？-> eventLoop事件循环微任务与宏任务延伸到vue例子12部分参考：这一次，彻底弄懂 JavaScript 执行机制JS执行机制javascript是一门单线程语言Eve...
2019-06-03 13:09:07
744
2
原创 仿微软Video Indexer——视频断点播放与智能解析时间线的前端可视化实现
先放一个实现效果，具体的功能可以参照Microsoft Video Indexer。其中关键词这一部分的功能可以参考之前的博文视频时间点在时间轴上的动态可视化最核心的就是视频的定点播放和可视化，其他的样式和tab栏都蛮简单的所以这里就不写了。对于视频的定点播放，用到HTML5中video标签的currentTime这个属性，即在用户点击每个时间点的时候，需要根据函数传入时间参数来改变视...
2019-05-30 20:13:17
898
原创 JS的数据类型与事件类
很久没有写博客了…因为这段时间都没有做新的项目，一直在复习前端的基础知识，大部分的（面试）知识点都归类为体系放入了印象笔记里。但因为还是有些繁杂，所以刚好再整理一次发到博客上来。注：部分图片来自网络知识点是仅个人根据面经以及自己的面试经历整理，仅供参考文章目录数据类型分类基本数据类型（存放在栈中）引用数据类型（存放在堆内存中）引用数据类型的深拷贝与浅拷贝如何实现深拷贝数据类型判断`1....
2019-05-23 21:28:05
212
原创 CSS中的伪类，应用场景？遮罩层与超链接样式
很久没写博客了…这段时间一直在准备各种面试，把知识点和体系全都总结在印象笔记里，有机会的话再把那些分享出来吧。伪类伪类是同一个标签，根据其不同的种状态，有不同的样式。通俗的可以理解成在页面上多加了一层，这个层就是伪类，具体长什么样，在这个层的CSS里定义即可。应用场景伪类一个很大的应用场景就是在超链接里：link:连接平常的状态visited:连接被访问过之后hover:鼠标放到连...
2019-05-01 21:56:33
1095
原创 Vue2.5仿去哪儿——vuex 公共画廊组件 导航栏的渐变出现
Vue2.5仿去哪儿app 实战项目笔记利用vuex实现跨页面数据共享 公共画廊组件 导航栏的渐变出现 利用vuex实现跨页面数据共享要同时改变两个页面的数据，但city.vue和home.vue之间没有一个共同的父级组件，所以无法通过类似前面的父级组件进行数据中转。所以可以用vuex来进行数据管理。vuex就是通过把所有的公用数据放到一个公共的数据空间去存储，某一个组件改变了...
2019-04-17 19:52:29
1000
1
原创 JS中的作用域链，闭包，this指向全解析
文章目录执行环境与作用域作用域链对比一下原型链与作用域链：闭包什么是闭包？闭包会引起的问题引用的变量发生变化内存泄露问题this指向问题闭包的其他用途利用闭包约束块级作用域在不久之前，将网上总结的关于闭包的博文大概看了一下，却仍然是云里雾里。事实证明还是自己直接啃书比较好，对照着红宝书，从作用域到闭包在到this，把闭包的原理和应用以及各种坑通过知识点和网上的博文串起来，才总算弄懂闭包的大概。...
2019-03-15 19:10:24
507
原创 JavaScript中几种对象继承的方式对比
文章目录继承方式1. 借助构造函数实现继承2. 借助原型链实现继承（原型式继承）3. 组合方式继承4. 组合方式继承（优化）5. 寄生组合式继承（最优）继承方式1. 借助构造函数实现继承function parent() { this.name = 'parent'}parent.prototype.say = function () {}function child() {...
2019-03-05 19:14:29
114
原创 JavaScript中的原型与原型链全解析
文章目录prototype原型对象有什么好处？让所有的对象实例共享属性和方法__proto__JS中创建对象的三种方式字面量方式使用显式构造函数（构造器方式）使用Object.create原型链加上JS默认对象Object确定原型和实例之间的关系instanceofisPrototypeOf()prototype只要创建一个函数，就会自动的为这个函数创建一个prototype属性，这个属性是...
2019-03-04 16:33:32
534
原创 Vue + 原生JS + 原生CSS3 实现视频时间点在时间轴上的动态可视化
文章目录需求实现效果模拟后台数据实现方法数据结构htmlJS功能实现初始化点击切换关键词实现时间点可视化遇到的问题v-show 用布尔类型的数组绑定无法监听生命周期造成的对象undefined问题总结需求根据关键字在视频中的出现时间，在模拟的视频时间轴中显示对应的位置用户点击，选择不同的关键字，显示对应关键词时间点击进度条中的关键词时间点，视频对应跳转到该时间播放实现效果完整源...
2019-02-26 14:44:33
6036
原创 利用Element-UI的upload组件实现文件的上传以及样式变化
最近在做项目的时候遇到在浏览器中上传视频的需求，使用Element-UI的upload组件。具体效果如下总的来说是很简单的，但一定要仔细对照官方文档，并且因为我使用了typescript，其中也遇到了一个坑。对照了一下官方文档，所需要注意的部分：只能上传一个视频并且禁止多选 :limit="1"，accept="video/*"， :multiple="false"，当重复上传时弹出错...
2019-02-20 16:18:16
18927
2
原创 TCP/IP协议族
TCP/IP协议族文章目录TCP/IP协议族网际层/网络层IPNAT（网络地址转换）ICMP（Internet控制报文协议）IGMP（Internet 组管理协议）ARP（地址解析协议）RARP（反向地址转换协议）BOOTP（自举协议/引导程序协议）DHCP（动态主机设置协议）OSPF（开放式最短路径优先协议）运输层/传输层TCPUDP应用层HTTP（超文本传输协议）HTTPS（超文本传输安全协...
2019-01-19 00:02:46
177
原创 响应式网站的实现过程及rem的动态计算
关于设计稿，px与rem以及响应式网站的开发思路与流程文章目录关于设计稿，px与rem以及响应式网站的开发思路与流程关于px，rem，vw响应式网站的实现思路开发流程使用rem实现自适应利用media实现web端与移动端的布局自动响应多份设计稿，如何设定根元素font-size？上周做了小型的一个响应式网站，主要负责前端部分。使用Vue+CSS+ts实现，第一次写响应式网站，加上对px，vw，...
2018-12-14 20:47:17
1045
原创 前端网站连接MySQL数据库
前端(Vue.js)连接MySQL数据库实现本地web服务器与MySQL数据库连接删改，查找。文章目录前端(Vue.js)连接MySQL数据库实现本地web服务器与MySQL数据库连接删改，查找。目录结构整体逻辑监听后端服务器连接数据库配置与数据库表连接入口sql语句入口启动在`/server`目录下在项目根目录下要实现本地web服务器与MySQL的连接，即实现在页面中对数据库的访问。整体逻...
2018-11-25 12:24:09
90386
12
原创 JS的变量 原型与原型链 作用域 闭包
js中的变量类型（按存储方式区分)值类型引用类型（指针）：数组、函数、对象//共享内存，数据改变存在联动性。//可以随意的扩展属性在javascript中，判断数据类型主要依赖下面两种方式：如果值应为一个引用类型，使用 instanceof 操作符检查其构造函数；如果值应为一个基本类型，使用 typeof 检查其类型type of 函数typeof只能区分值类型的详细类型...
2018-11-15 10:11:55
743
原创 Vuex的应用实例 --天气查询应用
weather其实是一个很小很简单的demo了，主要就是再熟悉一下ajax和vuex。其中用了和风天气的api，可以精确到行政区划内的天气。因为这里涉及到了在一个页面内同时请求多个页面，以及在涉及到城市和区域之间的各种切换和设定默认值，所以在vuex这一部分还是研究了一下才行。实现功能：手动改变城市和行政区，能查询北京、上海、广州、成都的各区天气预报显示行政区的天气情况，包括：实时温度、...
2018-11-01 09:08:41
1221
原创 关于Vue的组件,生命周期与路由
父组件向子组件传值：v-bind:content="father-components-data"子组件利用props：[…] 接收每一个父组件传过来的值子组件向父组件传值：this.$emit()通过事件触发向上一层触发事件，父组件监听此事件，获取子组件带出的数据内容 以一个todolist为例：var todoItem = { props:['con...
2018-10-31 17:14:02
633
原创 利用Vue.js2.0实现购物车和地址选配功能
根据慕课网-利用Vue2.0实现购物车和地址选配功能教程，通过利用Vue2.0来实现电商平台的简单功能。 vue中的$http请求服务.通过调用http服务，对.json文件发送http请求，通过遍历数组数据完成页面渲染引入vue-resource.js，即可以使用全局的 Vue.http 或者在 Vue 实例中的 this.$http 调用 http 服务。使用...
2018-10-31 17:13:04
1095
1
原创 Vue.js——一个todolist的小尝试
前言：至此为止，还仍然是跟着Vue.js的官方文档，对照网络上的一些教程进行较为分散的学习。大部分还停留在理论性的表面学习与对于官方文档中示例代码的理解。因为缺少实战，还是有些云里雾里。所以这一篇，准备对Vue来一个小小的实战。演示示例实现功能：实现浏览器的本地存储，刷新页面后获取数据缓存。在每个item前显示序号，实现单个item的finish,delete。实现一键删除所有it...
2018-10-31 17:12:00
253
原创 Vue.js框架学习笔记之三
Vue.js中的表单可以用v-model指令在表单 <input>及 <textarea>元素上创建双向数据绑定,它会根据控件类型自动选取正确的方法来更新元素。v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值...
2018-10-31 17:10:35
182
原创 Vue.js框架学习笔记之二
Vue.js中的样式绑定class和style是HTML元素的属性，用于设置元素的样式，我们可以通过v-bind来设置样式属性,可绑定一个数据属性或者对象。v-bind:class="..."v-bind:style="..."class实例：<!DOCTYPE html><html><head> <meta charset="utf-8...
2018-10-31 17:08:49
212
原创 Vue.js初接触
Vue.js框架Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 —Vue官网框架-Framefork前端的快速发展产生了成千上万的代码，但都缺乏正规的组织形...
2018-10-31 17:05:52
232
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人