- 博客(101)
- 收藏
- 关注
RSS订阅原创 联动picker组件
从不联动组件到今天，很久没发布文章了，一方面是过年，一方面是没有静下来好好写完联动的picker组件。数据处理断断续续理了好几天，到今天才完善，还有是因为zed帮忙做了点还帮忙发布了npm。联动其实跟没联动思路一样的，只是把联动的数据处理成不联动的，只是另外要加一些改变。首先是数据格式：[{value: '一列1',data: [{value: '二列1',data: [{...
2019-02-18 21:21:32
502
原创 无联动picker组件
省市区联动这种插件应该很多人用过，在我第一次写这种功能的时候，第一时间就是找插件，尤其是移动端，对当时的我来说从来没有想过自己写。最近看了同事写的省市区的组件，发现几乎所有的picker组件都是根据手指移动距离来滑动，但是有个问题，就是我快速的滑动一下，组件是没办法像原生scroll一样滑动一段距离。想要做这种效果想要计算手指在移动的那段时间内的速度，然后移动一段距离，就像一个小型的小引擎一样。...
2019-02-02 15:17:41
413
原创 ES6之字符串扩展
ES6对字符串扩展了一些功能，开发过程用到的不多，还有一些是Unicode的，这边就不仔细说那些，简单提一下ES6对字符串扩展了哪些。字符的Unicode表示法做出了改进提供了codePointmentAt能够正确处理4个字节存储的字符ES6 提供了String.fromCodePoint方法，可以识别大于0xFFFF的字符，正好与codePointAt方法相反ES6 为字符串添加了遍历器...
2019-02-02 15:17:37
104
原创 ES6之变量的解构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。解构赋值在一些场景下还是很有用的。数组：从数组中提取值，按照对应位置，对变量赋值。“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。如果解构不成功，变量的值就等于undefined。不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。let [a, [[b],...
2019-02-02 15:17:32
76
原创 ES6之let、const
虽然用着ES6一些常用的简单语法，但是对于ES6一直没有一个完整的认识，不管是用得上还是用不上。于是决定重头好好学一遍ES6。块级作用域：Let和const声明的是块级作用域的变量，让变量的作用域更合理了，更是很简单的解决了for循环闭包的经典问题。function f() { let n = 5; if (true) { let n = 10; co...
2019-02-02 15:17:24
95
原创 移动端左滑右滑组件
很久没发布文章了，一方面工作原因，一方面是惰性开始出来了。希望能继续坚持菜鸡之路。最近有个需求，移动端有导航，需要左滑右滑的时候就能切换导航，跟轮播一样的效果，但是轮播内容少，而且是一次性加载数据。而需求是很多类型，每个类型有非常多的列表，如果使用轮播，一次性加载数据太多，再加上分页，那就完全行不通。自己写了个左滑右滑的组件。我一直觉得写组件最重要的就是理解原理和理清思路。当我们触摸到屏幕的...
2019-02-02 15:17:20
869
原创 Vue下拉刷新组件
之前写了上拉加载，当然也就有下拉刷新。下拉刷新在web项目中使用会比上拉加载少。这边补充两点：1、上拉加载和下拉刷新最大意义是说明原理；2、全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。下拉刷新原理：监听tou...
2019-02-02 15:17:15
2174
原创 vue上拉加载更多组件
很久没发布文章了，但其实一直在学习写组件，本来想写个跑马灯组件，但是因为css动画会出现卡顿，就算开启GPU加速还是会，暂时还没有什么好的解决方法，所以有解决方法的欢迎指点一下。我想，工作一段时间的都碰见过上拉加载更多需求，现在这种插件也蛮多的，也很多是把上拉加载下拉刷新结合。但是这些组件都有一个问题，就是下拉到最底部，刷新浏览器，浏览器会记住这个距离，从而触发上拉加载的方法。虽然这个小问题在正...
2019-02-02 15:17:08
1541
原创 发布vue组件npm包
其实很早之前就想尝试着写一写vue组件然后发布npm包，这次借着公司开发新项目，于是封装了一个Toast组件。我封装的都是通过vue提供的方法去封装的，但其实从JavaScript的角度去实现或许会更简单，性能也可能更好，不过我只是封装vue组件，有大牛愿意指点的话感激不尽。Vue.extend：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象，简单讲可以理解成继承。...
2019-02-02 15:17:03
164
原创 localStorage和sessionStorage
在以前，想要存储数据在本地中只有cookie，而cookie又被限制了大小，在不同浏览器只能存储4k左右的cookie。于是H5新增了本地存储localStorage，在不同浏览器可以存储5M左右。sessionStorage和localStorage的区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清...
2019-02-02 15:16:59
96
原创 Vuex之module
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。新建一个js，moduleA：const state = { mo...
2019-02-02 15:16:54
1450
原创 Vuex之action
一般开发使用mutation已经足够，不过官网推荐mutation不要有异步操作，那么为了规范，我们应该把异步操作的方法都放在vuex提供的action里面。Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提...
2019-02-02 15:16:49
273
原创 Vuex之mutation
我们已经可以在组建中使用store里面的数据了，那么我们要怎么修改这个数据呢？vuex提供了mutation，官网上说：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并...
2019-02-02 15:16:40
168
原创 Vuex之getter
Vuex提供给我们一个Getter方法，主要就是为了在数据派生一些状态，简单来说就是想要通过判断进行过滤。比如有这样一个应用场景，我们有一个考试得分的数组，我们需要在很多页面使用，但是只显示不及格的，那么我们每个页面都要这样：computed: { scoreArr(){ return this.$store.state.score.filter(item => item &lt...
2019-02-02 15:16:36
166
原创 Vuex之state
我们已经把vuex的结构给建起来了，那么我们怎么在各个组件中使用vuex的状态呢？那就是通过state。我们都知道state是vuex的数据中心，那么我们页面可以直接使用，不管是标签还是js里面都可以这样使用：this.$store.state.test然后官网推荐从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态：computed: { test () { r...
2019-02-02 15:16:29
324
原创 Vuex之结构
之前整理了vuex的使用场景，现在开始学习学习怎么使用。我会根据官网api来重新学习一遍。首先我们要安装vuex：Npm install vuex –save官网推荐的vuex结构：├── main.js├── components│ ├── App.vue│ └── …└── store├── index.js # 我们组装模块并导出 store 的地...
2019-02-02 15:16:24
124
原创 Vuex使用场景
最近本着学习的心态，拉取了公司大佬最新架构的vue项目好好研究一番。然而在vuex的使用上本人出现了很大的歧义。到底什么场景使用vuex？于是搜集了一些资料，但是没有太权威的文章，只能结合资料整理了一些本人自己的观点。先看一下官网给出的：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。...
2019-02-02 15:16:19
762
原创 Vue3 UI创建项目
之前整理了vue3命令行创建项目，vue3还出了图形化管理项目的功能，讲真的，vue越来越简单了，本人认为有点偏向了傻瓜式开发。当然，要开发好项目还是很深的。Vue UI，可以打开创建界面。有创建有导入，这边先创建：右边的按钮鼠标放上去就知道功能。然后点击最下面的创建按钮：自己选择，这都很明显很简单。下一步：要是有预设过直接会在这边显示你之前创建过的，没有就是跟命令行差不多，...
2019-02-02 15:16:14
170
原创 Vue3新建项目
Vue3.x已经出了很久了，只是现在业务没有新工程，所以还是一直在vue2.x上工作，为了不被落下，理了理vue3.x新建项目的过程。node install -g n专门用来管理node版本，更新到最新稳定版本npm install -g @vue/cli安装vuecli3npm install -g @vue/cli-init使用2.x版本npm install -g @vue/cli...
2019-02-02 15:16:01
975
原创 cookie
Cookie是客户端存在本地的一个数据，简单来说就是本地缓存。Cookie曾一度用于客户端数据的存储，因当时并没有其它合适的存储办法而作为唯一的存储手段，但现在随着现代浏览器开始支持各种各样的存储方式，Cookie渐渐被淘汰。由于浏览器的每次请求都会携带Cookie数据，会带来额外的性能开销，于是cookie成为了记录用户信息的专属，Cookie使基于无状态的HTTP协议记录稳定的状态信息成为...
2019-02-02 15:15:56
124
原创 README.md
README.md文件是一个项目的入门手册，里面介绍了整个项目的使用、功能等等。所以README文件写得好不好，关系到这个项目能不能更容易的被其他人了解和使用。README至少要写明项目的功能和使用，这是最基本的，当然，一个好的README想要的不仅仅是功能和使用方法。一般npm包和git上面的项目，当然，好的项目都会有README，这已经是一个约定了。md是Markdown的缩写，其实REA...
2019-02-02 15:15:50
545
原创 Vue中computed和watch比较
Vue在监听数据的时候我们都会用computed和watch，但是很少人真正的去比较两个的区别，一般都是能实现就行。本人也是，习惯了watch，之后就几乎没用过computed。所以用官网的例子理解一下这两者的区别。computed: { // 计算属性的getter reversedMessage: function () {console.log('调用了'); re...
2019-02-02 15:15:41
586
原创 Label和input实现纯CSS切换
Label和input直接有一个关联，那就是聚焦选中的关系。<label for="tab1">1</label><label for="tab2">2</label><label for="tab3&qu
2019-02-02 15:15:37
1283
原创 Async/await
JavaScript的异步一直是JavaScript的一个复杂的事，从回调到Promise再到Generator，直到async/await，都是为了解决异步操作带来的麻烦。先说说async，async是异步的意思，异步就表示不会阻塞代码执行，async写在一个函数声明之前，看个简单的例子：async function fn() { console.log('async方法');}...
2019-02-02 15:15:29
62
原创 Promise的几个方法
我们知道了Promise链接调用，只要返回一个Promise对象就能一直链接调用，但是如果是这样写：new Promise(function(resolve, reject){ resolve('star');}).then(function(data){ console.log('two: ', data); return new Promise(function(r...
2019-02-02 15:15:24
4299
原创 初识promise
Promise是ES6新出的一个构造函数，最主要的就是为了解决回调地狱的问题。Promise三个状态：pending初始状态，fulfilled（resolve）成功状态，rejected（reject）失败状态。语法：new Promise( function(resolve, reject) { } );Promise构造函数接收一个函数为参数，这个函数接收两个函数参数一个是成功reso...
2019-02-02 15:15:19
58
原创 Vue组件之间传值
基于现在都是模块化开发，vue开发过程中组件之间传值是必不可少的，传值的方法有很多，今天整理一些组件之间传值的方法。Props：这个方法应该是最常用的，父组件通过bind指令传给子组件，子组件通过跟data同级的props数组接收。父组件：子组件：props: [‘msg’]然后子组件就可以使用msg这个值了。$parent：子组件修改父组件数据，这要在props的基础上才能使用，子...
2019-02-02 15:15:14
3227
原创 JavaScript报错
开发过程中难免会报错，有些报错一看就懂，有些看多了也记得。每种计算机编程语言都要它独特的一套错误处理与调试机制，每种错误都有对应的错误类型，而当错误发生时，就会抛出相应类型的错误对象。JavaScript同样如此，JavaScript定义了下列 7 种错误类型：1、Error 错误2、EvalError 全局错误3、RangeError 引用错误4、ReferenceError 参数错误...
2019-02-02 15:15:01
260
原创 字体图标iconfont
前端开发离不开图标，会有一部分直接使用图片引进，但是在性能上来说对用户体验不是很好。字体图标：以字体文件的形式封装，并通过 CSS 的 @font-face 作为 Web Font 调用，达到简单图片的效果。优点：1、 轻量性，加载速度快，因为字体图标都非常小。2、 矢量性，不管在什么分辨率和端下，都有很好的展示效果。3、 灵活性，各种css效果前端控制，不需要UI修改。4、 兼容性，...
2019-02-02 15:14:57
82
原创 Vue异步更新队列及nextTick
vue通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触 DOM。Vue的dom更新是异步的，当数据发生变化，vue并不是里面去更新dom，而是开启一个队列。跟JavaScript原生的同步任务和异步任务相同。比如我们调用一个方法，同时涉及多个数据的操作改变，vue会把这一些列操作推入到一个队列中，相当于JavaScript的同步任务，在执行过程中可能会出现一些产生任务队列的异步任务，比如...
2019-02-02 15:14:52
262
原创 发布npm包
Npm包管理器不用多讲，用过三大框架的应该都用过。今天讲一下怎么发布自己的npm包。首先建一个文件夹，然后命令工具进入这个目录，执行npm init：name 项目名称version 项目的版本号description 项目的描述信息entry point 项目的入口文件test command 项目启动时脚本命令git repository 如果你有 Git 地址，可以将这个项目放...
2019-02-02 15:14:46
67
原创 Vue全局注册
Vue开发过程中经常会有公告的模板或者过滤器等，这些都要依赖vue全局注册一些方法、属性、模板等。创建plugin.js：export default { install:(Vue) => { }}main里面引入：import plugin from './utils/plugin'Vue.use(plugin);之前说过了Vue.use...
2019-02-02 15:14:41
508
原创 Vue混入mixins
Vue官网上介绍：混入(mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。虽然平时没用过，但是这些方法对于想要开发一个好项目是非常有用的。混入其实很简单，就是你mixins跟页面的初始化一样，有生命周期、有方法、有数据有过滤器等，反正页面有的mixins都有。创建plugin...
2019-02-02 15:14:36
361
原创 Vue.use()
用vue开发的一定对Vue.use不陌生，在引入一些插件的时候经常需要在main里面用到这个语法。不知道有没有人想过为什么有些插件需要用Vue.use才能用，有些直接使用。一般我们都是按照插件的使用方法直接用了，很少去想为什么。今天参考简书学习了一下。先上一波简书上Vue.use官方源码：export function initUse(Vue: GlobalAPI) { Vue.us...
2019-02-02 15:14:31
430
原创 Export和import
Es6的模块功能几乎所有人都在用，而且实现的非常简单，可以说成为了通用的模块方案。主要就到处模块export和导入模块import。Export到导出模块可以是函数、类，也可以是var、let、const定义的变量，但是一定不能直接导出一个字符串或者数字，一个js里面可以有多个export，可以一起导出用花括号{}把要导出的内容都包裹起来：const a = 10;const b = {...
2019-02-02 15:14:25
434
原创 H5新特性之语义化标签
H5新增了很多标签，也更加语义化了，但是除了header、footer、nav等，其他的还真的没有去了解过，今天整理一下H5新增的语义化标签。Header： 不用多说，就是定义头部，可以多个。Footer： 底部，不一定是文档最底部，可以多个。Nav： 导航栏标签，定义导航栏。Article： 独立内容区域，与session类似，用于文章等。Aside：...
2019-02-02 15:14:20
2463
原创 Vue插槽slot
使用了那么久的vue，到现在才知道vue自带的组件插槽slot，说真的，插槽的作用在一些场景下非常有用。插槽分为单个插槽、具名插槽、作用域插槽。其中作用域插槽会稍显复杂。单个插槽：子组件testSlot.vue：<template> <div class=""> <p>子组件共有的</p&am
2019-02-02 15:14:15
97
原创 移动端导航简单实现
在移动端导航的功能太常见了，很多时候还需要可滑动，点击的时候还需要当前动画到中间。实现的方法很多，今天分享一个本人最近开发所用的方法。因为本人都是用vue开发，今天写用jQuery的方法，原理都是一样的。标签：<div> <ul> <li id="nav0">导航11</li&
2019-02-02 15:14:11
724
原创 Input被软键盘遮住
在业务开发过程中，移动端输入框被软键盘遮住的情况还是很容易出现的。在不同手机不同系统都有可能出现。网上也有很多解决办法，比如计算高度然后scroll到某个地方、调用scrollIntoView，、scrollIntoViewIfNeeded、监听window的resize方法、定位fixed。方法有很多。这边提一下踩过的坑，如果是scrollIntoView和scrollIntoViewIfN...
2019-02-02 15:14:06
669
原创 移动端视频不全屏播放
因为中秋国庆两个节假日，又因为所做工作的业务，这两星期任务繁忙，所以这两星期没有更新内容。最近因为活动有涉及视频，希望视频播放可以不全屏，这是之前就没有解决的问题，于是我这边查了好多资料。这边不得不说一下，以后百度不到的东西可以去知乎寻找。当然，不知道是不是只有我现今认识和所处环境不知道这个实现的属性，其实这已经是总所周知的事情，如果是请各位谅解本人的局限性。阻止视频全屏播放特别简单，三个属...
2019-02-02 15:14:02
393
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人