AboyL-CSDN博客

原创关于ios的webview中键盘弹出影响布局的解决方案

原文首发简书:原文如果你在开发ios中的webview界面的时候会遇到以下问题，并且没有一个很好的解决方案的时候，可以继续阅读以下的文章，如果已经有了比较好的解决方案，我希望你可以继续阅读以下的内容，并给与我真诚的建议，谢谢!!!问题使用header container footer 三个absolute布局的时候，当键盘弹出的时候，header消失在视图外面当键盘弹出的时候、遮住了最...

2019-06-09 11:22:39 3920 1

原创 Vue简易三页轮播图实现

实现效果点击切换。可移动一个单位下面我们思考我们的组件使用形式 <base-swiper class="swiper"> <base-swiper-item v-for="item of list" :key="item" :gap="10"> <div class="box">

2019-01-02 23:41:17 4266 1

原创如何实现一个简单的vue服务---以图片点击放大为例子

我们使用Vue的组件，通常是使用引入，然后写在template里面的做法<component :props>但是很多的时候，我们其实并不喜欢这样做，而是通过服务进行组件的调用，比如loading，比如alert。如果我们每次loading我还要去写一个组件，那么肯定是很繁琐的。比如element里面我们都可以使用this.$loading这种形式来显示loading但是...

2019-01-02 21:27:27 649

原创渐变边框小型研究（如果做出一个颜色渐变、宽度渐变的边框)

前几天跟人讨论到一道题目。怎么实现如图的效果可以看到。这里有点渐变边框。不过对于这个题目我们两人产生了一点歧义。。。我以为是渐变边框加上逐渐缩小。。。然后群友认为的是渐变边框后来群友给出了渐变边框的解法。https://www.jianshu.com/p/14268d2f00f7我做了逐渐缩小的解法。<!DOCTYPE html><html lang="en"...

2018-11-17 22:43:59 769

原创 AOP与设计模式以及Vue

我们在上节中提到了，我们的代码实现还是存在问题，这个问题在哪里？这个是需要去结合vue来看的，因为我写这个东西的时候就是希望在vue中使用，如果最后不能再vue中使用那么就没有意义了。而在vue中的使用的实际使用的时候给我出了一个难题，那就是vue的this的执行问题。我们知道vue对自己的实例是做了一层代理的。我们在创建一个vue实例的时候，走的是data:{属性} 但是实际上我们可以通...

2018-10-25 23:59:44 1421

原创 AOP的优化

接上文上文我们实现了一个简单的AOP，但是其实还是存在问题的。问题在哪里？回到我们最开始的问题。我们希望的是，在我们的请求开始的时候调用loading，在我们请求结束的隐藏loading。我们以前的代码看起来没有问题。但是真的没有问题吗？实际上我们用这份代码做测试的时候我们就会发现问题所在了。因为异步的存在。这里就不再探讨异步是什么了，我相信你能听懂我再说什么。// 执行器functi...

2018-10-25 23:19:44 464

原创实现自己的Promise-2-链式操作

首先我们看下链式调用的例子function testP1(){ return new MyPromise((resolve,reject)=>{ setTimeout(()=>{ resolve('p1') },2000) })}function testP2(){ return new MyPromise((resolve,reject)...

2018-10-14 22:58:30 860

原创实现自己的Promise(1)

一直以来都对Promise的实现有浓厚的兴趣、感觉很好玩。很想搞清楚他的原理是什么，而最好的办法莫过于写一个自己的Promise了。首先我们需要看一下Promise的基本使用方式是什么样子的。let testPromise =new Promise((resolve,reject)=&gt;{ setTimeout(()=&gt;{ resolve('ok') },2000)...

2018-10-02 22:44:25 388

我们在使用vuex的时候，很多时候都会直接去使用commit代替了dispatch操作,虽然官方的推荐是使用dispatch，但是使用commit也可以，而且很多时候也更加的好写，所以就比较少会去使用dispatch的操作了。但是有的时候，我们还是需要使用dispatch的操作的，这个时候我们就要去设置actions了。 vuex是一个状态管理机制，管理的很多都是我们要公用的数据，在这个组件会用...

2018-09-15 15:28:26 8280

原创从一个简单的Loading封装来聊聊JS的AOP编程

第一次接触到AOP这个词的时候还是在学习Java的时候学习Spring的时候了解到的，面向切面编程，通过一些设置，我们可以在执行一个函数之前来执行其他的函数，在执行一个函数之后，执行其他的函数，常用于日志输出这些。而在前端接触到这个名词就很偶然了，先说一下自己面临的问题。很多时候，我们在请求的时候，希望执行一个loading函数，来表示正在加载，而在请求结束后，我们希望隐藏这个loading，...

2018-09-09 23:52:54 514

原创 cordova文件上传分析

接上节。。。其实主要原因是因为自己对后端的理解不够。。。 options.fileKey = 'files' options.mimeType = 'multipart/form-data'我们后端在接收的时候使用的是files，而cordova的插件不够灵活，所以最后的时候就一直拿不到数据。而请求看不到的原因个人猜测是因为走得是cordova，所以无法在chrome...

2018-08-13 22:57:15 1179

原创 cordova+axios实现formdata格式上传文件

最近做的项目是基于cordova实现的hybrid应用。里面有个功能是需要上传图片的。使用cordova的相机插件获取到相册。但是在上传的时候却遇到了问题。 cordova的上传插件是 cordova-plugin-file-transfer 官网给出例子var win = function (r) { console.log("Code = " + r.responseC...

2018-08-13 22:24:38 2060 1

原创从jQuery的init源代码来看原型的使用

其实原型这个东西一直以来都觉得是一个很简单的东西。但是因为原型链的原因反而感觉原型里面真正可以说的其实是继承与如何实现真正意义上的重载。最近看到了关于jQuery中原型的使用，反有了点新的见解。 jQuery中是怎么实现原型的。首先，我们要对原型有一个清楚的认识，什么时候需要使用原型。现在的ES6里面加入了一个class，而class其实也就是根据原型来实现的一种语法糖，以前我们需要使用...

2018-07-28 21:24:11 646

原创高效前端-web高效编程与开发实践读书笔记：浅谈函数柯里化

函数柯里化这个概念一直接触过，但是一直不是很懂他的意思。直到在看高效编程的时候才有点感觉。什么是柯里化简单来说就是*函数和一个参数值结合产生一个新的函数举个例子，add函数是需要两个值而add1只需要对add函数进行一次柯里化就只需要一个值，每次的结果都是value+1 这就是函数柯里化带来的结果。func add x,y return x+yfunc add1 ...

2018-07-28 14:09:56 416

原创 vue中v-model在组件中的使用

关于这点其实没有特别多需要讲的点。但是最近写组件的时候感觉v-model如果使用得好其实是可以减少很多的问题的，虽然对高手们来说这些使用方式是很常见的，但是对刚刚接触vue的人，如果能知道v-model在组件中的正确使用方式，其实是可以大幅度提高自己的组件质量的。首先我们要明确的是，我们所写的组件是有两种类型的，一种是共用的组件，比如共用的 common-header co...

2018-07-28 11:13:43 2966

原创 CSS的first-child、nth-of-type

这几个选择器其实我是很懵逼的。因为first-child的使用是 p:first-child这种形式这个很容易就让人想到，first-child应该位于某个元素的后端，他就想是伪元素或者伪类那个样子，但是这种思考其实是错误的。 .child:first-child很容易让人以为，选择的是 .child元素的第一个元素，也就是 <div class="father">...

2018-07-20 23:17:14 452

原创 css的绝对定位与冒泡

为什么会把两个放在一起说呢？来源于一个小案例，我们都知道事件冒泡机制，当你点击一个dom的时候，会先从下面的dom开始触发事件也就是说 <div id="a"> a <div id="b">b</div> </div> <script> funct

2018-07-20 21:03:28 1737

转载 nvm的使用

有的时候我们用的公司的node版本可能比较老。或者我们要使用老版本的node，但是我们自己电脑上安装的node版本高，很多时候就会有冲突。这个时候我们可以使用nvm来进行node版本管理可以参考这个博客 https://blog.csdn.net/qq_36423639/article/details/70230571说的很详细了这里我要补充的是一定要注意加入淘宝源。不然有可...

2018-07-14 14:39:56 1008

原创如何控制input的输入方向

inoput的输入方向是从左向右的，但是有的时候我们希望的是多个input右对齐这个时候我们可以使用两个办法一个是设置 dir设置<input type="text" dir="rtl" />这样就是从右向左输入了。但是这个样子有一个问题，那就是我们的光标依旧是在左边，看起来很奇怪。这个时候我们可以使用css的text-align的属性设置text-a...

2018-07-11 13:26:58 3518

原创 vue组件---环形进度条组件

在做项目的时候，最好只使用一套组件库，但是很多时候我们的组件库里面没有我们需要的组件，这个时候我们还是需要自己写组件了，vux里面就没有环形进度条组件，所以需要自己写一个。查找资料后发现了一个很好的实现方式，通过svg来实现，以前的时候学过一点svg但是没有怎么深入了解过。。。现在看来真是罪过，给出参考链接 https://segmentfault.com/a/119000000814940...

2018-07-09 20:49:33 8900 3

原创 vue样式穿透问题

今天在写项目的时候需要去修改一个引入的组件的样式，因为使用的是stylus，所以就可以用>>>进行穿透，但是一开始的时候失败了，后来才发现问题在于两点。一是不可以使用层叠，也就是不可以使用.class >>> .class { .class{}}只可以使用一级也就是.swiper >>> .vux-icon-...

2018-07-09 20:43:05 2351

原创高效前端-web高效编程与开发实践读书笔记：css-布局-三列布局使用float实现

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l

2018-07-08 00:13:20 283

原创高效前端-web高效编程与开发实践读书笔记：css-如何设置多行文本居中

很多时候我们需要设置文本居中，这个时候我们知道应该设置，外层的容器的height跟line-height一致，就可以实现单行文本居中了，但是这个样子只适合单行，如果我们要设置多行文本居中，需要怎么做呢？我们要做的就是让多行文本相对外部容器是一行一个模型。因此，设置外部依旧是height==line-height.再把多行文字添加进入一个span容器中，设置display为inline-bl...

2018-07-07 23:54:29 563

原创用程序做点事情--如何快速对文件夹内的文件进行重命名

学习编程语言的最好办法是使用编程语言解决问题，那些在计算机上面的问题，作为一个程序员，我们应该使用程序来解决一些我们日常中遇到的可以使用程序解决的问题。前几天的时候班级的毕业照发送了，我想把他们都放到我的QQ相册中去作为一个回忆，解压后有两个文件夹，一个是原片，一个是修改后的，精选的照片，我想把他们都放到QQ相册中，这个时候为了方便就要复制到一个文件夹中，但是在复制的过程中，一部分文件重名了，...

2018-06-19 21:23:05 2367

原创 vue动画切换出现白屏问题

参考 https://github.com/feather-components/app-transition/blob/master/app-transition.vue https://vue-js.com/topic/58c793f4a476ff9533840114使用animate.css的一些动画的时候，会出现白屏效果，比如 bounceInRight这些原因是因为这些...

2018-06-08 00:06:01 5922

原创 vscode中实用eslint与vetur来规范vue项目

现在我们很多项目上都会使用eslint来规范一些写法，这样会使得我们的代码更加的一致，但是很多时候我们并不习惯使用eslint，而且一些eslint的写法虽然好，但是会多一些步骤，比如多写一个空格之类的，而我们平时在写代码的时候，也会借助编辑器的格式化来格式化代码，这样就省去了很多手工操作，但是有的时候编辑器的格式化方式跟eslint冲突，这个时候我们怎么解决呢？下面介绍vscode下怎么解决...

2018-06-07 23:41:55 7521

原创 Vue搭配cordova创建移动端项目遇到的路径问题

使用Vue的教授叫vue-cil创建项目以后，如果我们想进行打包成一个hybrid项目应该怎么做呢？这个时候我们需要全局安装cordova，然后进行打包。但是这里我们要注意一些路径问题。首先我们要明白的是，cordova打包打包的是那些内容？cordova打包的是www文件夹下的内容，也就是说，我们的内容应该都在www文件夹下面，而我们的源代码要放到src下面去，vue-cil的index.h...

2018-06-07 23:21:58 1863

原创 vue慕课网去哪儿实战项目笔记

1、移动端300ms点击延迟问题在移动端web中会遇到300ms点击延迟的问题，这个时候可以使用fastclick来解决这个问题。引入fastclikcimport FastClick from 'fastclick'使用fastclickFastClick.attach(document.body)2、注意当网速过慢的时候获取资源导致的页面抖动问题如果网速过慢。比...

2018-06-07 17:25:46 3919 2

原创 ES6学习笔记（4）async的简单实用

async意思是异步await的意思是等待这两个关键字是在ES7中新加入的语法，如果要在浏览器中使用考虑到兼容性的问题，我们还是需要使用babel进行转换。七亩地是为了解决js中的异步问题。现在异步解决方案有三种：回调函数 promise async（Generator）因为js的异步机制，我们所有的异步操作都会被放到一个队列中，等到所有的同步的操作执行完毕了，才会去执行异步队...

2018-06-03 23:55:40 4655

原创百度地图中如何获取某个经纬度附近的地址

我们在网页版中使用百度地图的时候，可以发现点击一下定位以后会定位到现在自己这里的位置来，并且显示自己的位置大概是什么地方。但是查阅api的时候，当我们调用定位api的时候却经常做不到这个，虽然返回值里面有街道级别。但是并不是我们想要的大概地址。这个的原因是因为，我们查阅的是js的apihttp://lbsyun.baidu.com/cms/jsapi/reference/jsapi_referen...

2018-04-01 13:47:48 3586

原创 react-hot-loader的使用方式

webpack中提供了热模块更新的功能，在不刷新整个页面的情况下来替换某些更变的组件，而这样做的最大的好处就在于状态的保存。比如我们前面在输入框中输入的内容，就不会在我们热模块替换以后被刷新掉，让我们要重新再输入一次了。而react的构建现在一般还是基于webpack的，webpack也提供了对应的插件。react-hot-loaderhttps://github.com/gaearon/reac...

2018-04-01 12:18:38 7811

原创如何在react项目中使用阿里iconfont字体库的svg图标

阿里的iconfont字体库是一个拥有很多字体图标资源的字体库，我们可以看到里面有很多的多彩图标。但是传统的classname方法跟unicode方法都没有办法支持多彩字体库。只有svg格式的图片才支持。我们怎么才能使用这个呢？首先我们将字体图标加入项目以后，在我的项目中会有三份代码生成。这个时候我们把把Symbol的代码复制，然后粘贴到了我们自己在项目中新建的font.js文件中就好了。随后我们...

2018-04-01 11:35:22 14458 3

原创 nodejs中requier变量的陷阱

在做一个慕课网的一个项目的时候，里面要使用img的时候需要使用requier进行引入，在react中，这个时候我想把路径作为一个变量，就可以在各处使用了。但是最后却失败了，才发现requier的机制问题，不能直接使用变量，必须进行强制转换import React, { Component } from 'react';import { ImgFigure } from './component/...

2018-03-21 23:00:35 520

原创你不知道的JavaScript-函数中的this

当我们在一个函数中写this的时候，我们是希望做什么？或者说，我们首先把函数中的this当成了什么？this指向某个对象，那函数中的this指向谁？指向函数本身吗？这里我们要分两种情况来看函数有两种形态，一种是函数对象，一种是指向一段代码块function a() {// console.log(this.cc);this.cc=1;} var cc=3; a()//3console...

2018-03-12 09:27:43 229

原创 ES6学习笔记(3)Promise1

promise用来解决异步的东西。避免回调地狱，支持异步的链式操作，其实我在使用angular的时候就发现，其实promise也有多层嵌套，但是这个嵌套实际上只有两层。可以很好的进行理解。为什么会出现多级嵌套的问题。现在有一个A函数，他是一个异步的，http的那么我们的A函数有A(data,success,err)suc跟err是一个回调函数如果b要使用A，b本身也

2018-02-01 18:45:54 773

原创 ES6学习笔记(2)箭头函数

在学习箭头函数之前要先了解的是箭头函数解决了什么问题。在这里要注意的是js的严格模式因为使用babel进行打包的文件是在严格模式下运行的，所以在一些条件下跟我们在一些书上看到的观测到的实际上可能有一点的不同。这里要注意的是在严格模式下，this不能被指定为window，也就是在全局下的function fnc(clg this.z)将不会输入undefined，而是直接报错

2018-01-07 19:37:28 1411

原创 ES6学习笔记(1)块级作用域与函数作用域

并没有使用let跟const来作为他的标题。因为实际上来说let跟const所做的事情就是创建块级作用域。为什么这样认为呢？因为let的一个变量影响的并不是这个一个变量，而是整个作用域，实际上是对整个作用域进行了改造。而在es6之前，其实js是只有函数作用域的，也就是说一个函数创建一个作用域而不是一个｛｝创建一个作用域，这个的结果就是会导致一些结果内层变量会覆盖外层变量用来

2018-01-07 15:35:13 271

原创 css自问自答(3)效果篇

1、怎么用雪碧图去实现动画效果在需要产生动画的地方使用background-position进行移动。然后使用transtion设置动画效果2、background-size:cover跟contain有什么区别。两个都是等比例放缩。但是cover的放缩规则是尽量不超过容器，也就是会导致图片的一部分不显示。而contain的是尽量保证图片。如果容器宽高比跟背景图

2018-01-07 15:32:07 395

原创 css自问自答(2)布局篇

1、relative,absolute,fixed的偏移有什么区别从对其他元素的影响上来看，relative不脱离文档流，即使进行偏移，其他元素依旧认为他在原来的位置上面，而其他两个脱离文档流，其他元素会认为这两元素不存在。从参照物来说。relative的参照物是自己，而absolute的参照物是理他最近的父relative元素。flixed是窗口2、有那些清除浮动的方

2018-01-07 15:31:31 311

原创 css自问自答（1）

1、各个选择器的权重是什么情况，有没有可以超越这些权重情况的存在 id 100 类选择器跟伪类选择器 10 元素选择器和伪元素选择器 1 其他 0 !important 最高，其次是style属性，然后再去计算权值，权值计算不进位2、css的伪类选择器跟伪元素选择器是什么，

2018-01-03 12:51:53 351

空空如也

空空如也