自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 javascript设计模式之代理模式

代理模式:为其他对象提供一种代理以便控制对这个对象的访问。由于一个对象不能直接引用另一个对象,所以需要通过代理对象在这两个对象之间起到中介的作用。 虚拟代理 虚拟代理在web开发中是比较常用的代理模式,例如图片的预加载,当图片过大或者网络不好的时候,img标签显示图片的位置通常会有一段空白的时间,...

2019-04-18 13:39:25

阅读数 78

评论数 0

原创 javascript设计模式之适配器模式

适配器模式:将一个类(对象)的接口(方法或者属性)转化成另外一个接口,以满足用户需求,使类(对象)之间接口的不兼容问题通过适配器得以解决 数据的适配 数据的适配在前端中是非常常见的场景,它解决了前后端的数据依赖。有的时候服务器传递过来的数据格式和前端需要使用的格式不一致,这种情况在使用UI框架时比...

2019-04-09 10:21:05

阅读数 42

评论数 0

原创 javascript设计模式之原型模式

原型模式(prototype):用原型实例指向创建对象的类,使用于创建新的对象的类共享原型对象的属性以及方法。其实原型模式也是一种继承,所以原型模式也是javascript语言的灵魂。 先写一个士兵基类 var Soldier = function () { this.blood = 100;...

2019-04-02 09:56:51

阅读数 58

评论数 0

原创 javascript设计模式之建造者模式

建造者是指将一个复杂的构建与其表示相分离,使得同样的构建过程可以创建不同的表示。 比如我们以简历模板为例,有求职者、技能、职位、描述的等等一些功能。 // 创建一个人类 var Human = function(phone, skill) { this.phone = phone ||...

2019-03-26 11:14:12

阅读数 75

评论数 0

原创 javascript设计模式之策略模式

策略模式是指定义一系列算法并把它们封装起来。 比如我们在写一个注册页面,有以下几条校验逻辑 1.用户名不能为空 2.密码长度不能少于6位 通常我们会写成下面这个样子 function strategy(value) { if(value === '') { aler...

2019-03-19 09:48:54

阅读数 49

评论数 0

原创 javascript设计模式之工厂模式

工厂模式是指不暴露创建对象的具体逻辑,而是将逻辑封装在一个函数中,这个函数就被称为工厂。工厂模式又可以分为:简单工厂、工厂方法、抽象工厂。 1、 简单工厂模式 简单工厂模式又叫静态工厂方法,由一个工厂对象决定创建某一种产品对象类的实例。主要用来创建同一类对象。 比如我们玩游戏的时候,通常会有多种角...

2019-03-11 10:51:16

阅读数 45

评论数 0

原创 javascript设计模式之单例模式

单例模式的定义是:保证一个类仅有一个实例,并提供一个访问它的全局访问点。 单例模式实现起来也非常简单,无非就是用一个变量来标志当前是否已经为某个类创建过对象,如果创建过,则在下一次获取该类的实例时,则返回之前创建的对象。 我们以一个例子为例,来一步一步的实现单例模式,比如:我们在页面上点击按钮的时...

2019-03-04 14:03:27

阅读数 38

评论数 0

原创 javascript中通俗易懂的this指向

JavaScript 的 this 总是指向一个对象,而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的,在具体的实际应用中,this的指向大致可以分为以下4种。 1、作为对象的方法调用 当函数作为对象的方法被调用时,this指向该对象 var obj = { name: ...

2019-02-27 10:09:40

阅读数 78

评论数 0

原创 原型链

在说原型链之前,我们需要先来讲讲构造函数 1、构造函数 当任意一个普通函数用于创建一类对象时,它就被称作构造函数。 function Person(name, age) { this.name = name; this.age = age } var person1 = new P...

2018-10-21 20:01:14

阅读数 76

评论数 0

原创 visibilitystate检测页面是否处于焦点状态

visibilityState主要作用是用于判断当前页面是否处于激活状态,即浏览器标签页是被隐藏还是显示。 属性:document.visibilityState 取值: visible:页面可见处于显示状态,没有最小化 hidden:页面不可见处于隐藏状态或者页面处于最小化 事件: docume...

2018-10-13 15:13:10

阅读数 427

评论数 0

原创 js多线程Web Worker

我们知道javascript时单线程模型,即所有任务都在一个线程上完成,前面一个任务如果没有执行完成,后面的任务就只能等待。

2018-10-07 17:10:27

阅读数 1670

评论数 0

原创 DocumentFragment一个轻量级的document

DocumentFragment 接口表示一个没有父级文件的最小文档对象。它被当做一个轻量版的 Document 使用,用于存储已排好版的或尚未打理好格式的XML片段DocumentFragment 节点不属于文档树,但是有一个很使用的特点,当把一个DocumentFragment 节点插入到文档...

2018-05-01 22:12:31

阅读数 432

评论数 0

原创 高逼格的console.log(),要不来看下

我们编写前端代码的过程中,经常会用到控制台找一下dom元素,看看css样式是怎么样的,或者打印一些东西,了解一下代码执行的过程以及输出了什么。。。现在我们来换一个姿势看看1、带样式的console.log()这里%c为打印内容定义的样式2、格式打印当然除了%c还有其它%d:打印整数%s:打印字符串...

2018-05-01 21:23:13

阅读数 3044

评论数 0

原创 微信公众号开发,ios系统自带返回按钮,不刷新页面

微信公众号开发时,在IOS系统下点击返回按钮,发现返回后的页面是没有经过刷新的,虽然这样是有好处,不用再重新请求页面数据,但是很多时候我们是需要重新去请求页面数据的。 首先我们需要监听手机的系统,然后在监听返回事件,当用户点击返回按钮后,将页面进行强制刷新,代码如下 var ua = na...

2017-08-02 14:23:10

阅读数 9199

评论数 0

原创 vue弹窗组件的编写历程

在项目中我们多多少少会遇到弹出提示框或者对话框,对于这一类通用的地方可以将其封装成组件 对话框组件例如: 在点击操作过后弹出对话框或者提示框,想到的是肯定要传递一个信息到子组件中,告诉子组件显示出来,当然这种对于第一次点击肯定是会生效的,但是当你在不刷新页面的情况进行第二次点击...

2017-08-02 11:53:05

阅读数 1662

评论数 0

原创 移动端滚动穿透的问题解决

在移动端页面上,当有 fixed 遮罩背景和弹出层时,在屏幕上滑动能够滑动背景下面的内容,这就是臭名昭著的滚动穿透问题 解决方法一: css之overflow:hidden html, body { overflow: auto; height: 100%; } 使用这种方法时,...

2017-07-24 15:26:05

阅读数 2119

评论数 1

原创 weex采坑之旅(二)JDK version环境搭建

官方文档上说明 安装JDK version>=1.7 并配置环境变量 安装Android SDK 并配置环境变量。 但是没有给出相应的安装步骤,因此在这里先给出JDK相应的安装步骤。 打开如下网站,下载JDK version http://www.oracle.c...

2017-06-10 15:21:11

阅读数 842

评论数 0

原创 weex采坑之旅(三)Android SDK环境搭建

上一篇文章我们配置了jdk version,这一节就来配置Android SDK环境搭建 Android SDK是Android平台上进行软件开发所需要的开发包,这里我们通过安装Android Studio的方式来安装Android SDK,Android Studio 是Android开发的I...

2017-06-08 21:05:25

阅读数 5715

评论数 0

原创 weex采坑之旅(一)初识weex

按照官方文档搭好weex依赖环境后,安装项目依赖包,运行npm run dev 和 npm run serve开启watch模式和静态服务器。 然后打开浏览器,输入 http://localhost:8080/index.html,既可以看到 weex h5 的页面,但是我们会发现手机图形里...

2017-06-08 20:39:21

阅读数 628

评论数 0

原创 js解决微信屏蔽内置浏览器的下载功能以及判断手机系统

今天一后台同事问我:为什么从App里面分享到微信好友时,在微信里没有发下载分享里的软件,而在浏览器中却可以? 于是我在微信公众号中试了一下,发现果然不可以下载。通过google 发现,原来是微信屏蔽了内置浏览器的下载功能。那么有没有解决办法呢? 肯定是有的。 1:判断发现是在微信中打开,给提示让其...

2017-04-26 14:55:16

阅读数 8609

评论数 0

原创 vue组件——slot分发内容

slot元素作为组件模板之中的内容分发插槽。这个元素自身将被替换。 有 name 特性的 slot 称为具名 slot。 有 slot 特性的内容将分发到名字相匹配的具名 slot。 内容分发就是指混合父组件的内容与子组件自己的模板 单个slot 如果子组件的模板不包含 slot...

2017-04-20 09:17:31

阅读数 9850

评论数 0

原创 vue嵌套路由-params传递参数(四)

在嵌套路由中,父路由向子路由传值除了query外,还有params,params传值有两种情况,一种是值在url中显示,另外一种是值不显示在url中。 1、显示在url中 index.html main.js params传值是通过 :[参数值] 如path: "/h...

2017-04-18 22:07:54

阅读数 99547

评论数 9

原创 vue嵌套路由-query传递参数(三)

在嵌套路由中我们经常会遇到父路由向子路由里面传递参数,传递参数有两种方法,通过 query 或者 params index.html main.js 同样通过重定向来显示父路由 import Vue from 'vue' import VueRouter f...

2017-04-17 18:50:29

阅读数 60682

评论数 1

原创 vue嵌套路由(二)

在实际项目中我们会碰到多层嵌套的组件组合而成,但是我们如何实现嵌套路由呢?因此我们需要在 VueRouter 的参数中使用 children 配置,这样就可以很好的实现路由嵌套。 index.html,只有一个路由出口 main.js,路由的重定向,就会在页面一加载的时候,就会将...

2017-04-17 17:46:50

阅读数 22488

评论数 2

原创 vue简单路由(一)

在项目中,将vue的单页面应用程序改为了多页面应用程序,因此在某些场景下,需要频繁的切换两个页面,因此考虑使用路由,这样会减少服务器请求。 使用vue-cli(vue脚手架)快速搭建一个项目的模板(webpack-simple),运行起来后,将原来index.html页面挂载点中的内容删除 ind...

2017-04-17 16:22:05

阅读数 1584

评论数 0

原创 css样式,中间文字,两边横线

在项目中遇到过中间文字,两边横线的布局,如下图: 两边横线我们可以使用标签的上边框或者下边框,然后对中间的文字使用 vertical-align 属性来控制。 html 产品清单 css .order { height: 60px; ...

2017-04-10 18:30:23

阅读数 28229

评论数 0

原创 vue中如何动态的绑定图片

在项目中遇到需要动态的改变图片路径,图片路径并非是从后台获取过来的数据。 因此在data中必须用require加载,否则会当成字符串来处理。

2017-04-09 13:28:47

阅读数 10675

评论数 1

原创 用angular实现多选按钮的全选与反选

在页面中我们常常会遇到多选框,例如购物车里的商品 下面用angular来实现这一功能 全选: {{ item }} {{arr}} //创建模块 angular.module("select", [])...

2017-01-17 22:24:22

阅读数 1653

评论数 0

原创 js中in操作符

in 操作符用来判断属性是否存在与对象中。 使用 in 操作符分单独使用和在 for-in 循环中使用。 在单独使用时, in 操作符会在通过对象能够访问给定属性时返回 true ,无论该属性存在于实例中还是原型中 function FF() { ...

2017-01-16 22:41:55

阅读数 5589

评论数 0

原创 js中object类型中的三个方法

hasOwnProperty() :用于检查给定的属性在当前对象实例中是否存在 isPrototypeOf() :用于检查传入的对象是否是传入对象的原型 propertyIsEnumerable(propertyName) :用于检查给定的属性是否能够被枚举 ...

2017-01-16 22:36:18

阅读数 712

评论数 0

原创 js中的闭包

定义:只有函数内部的子函数才能读取函数的局部变量,因此可以把闭包简单理解成“定义在一个函数内部的函数,并且返回了该内部函数” // 只有函数内部的子函数才能读取函数的局部变量,因此可以把闭包简单理解成“定义在一个函数内部的函数,并且返回了该内部函数” // ...

2017-01-16 22:29:00

阅读数 236

评论数 0

原创 js中函数可以作为参数和返回值

js中函数可以作为参数和返回值,来看看下面的排序 function Student(name, height, weight) { this.name = name; this.height = height; ...

2017-01-15 22:50:02

阅读数 3502

评论数 1

原创 js页面跳转并传值的常用方法

在前端开发中我们常常需要从一个跳到另一个页面,并且将当前页面的数据传递过去,我常用下面两种方法 1、在url路径后面带参数,参数与url之间用?隔开,参数与参数之间用&符隔开 window.location.href = "a.html?name='kevin&...

2017-01-15 20:55:36

阅读数 10419

评论数 0

原创 JavaScript中的apply()方法和call()方法

相同点: apply和call方法都是Function.prototype原型中,他们可以改变this的指向,而且都是直接调用函数 不同点: apply:参数传入的是数组 call:参数传入的是一个一个的 //call和apply...

2017-01-15 20:20:53

阅读数 259

评论数 0

原创 使用canvas实现行走的小人动画

用canvas实现朝四个方向行走的小人,也可是使用键盘方向键操作行走的方向,其实就是用canvas不停的清除重画 canvas { border: 1px solid red; } ...

2017-01-15 16:47:01

阅读数 6606

评论数 1

原创 用canvas实现围绕旋转动画

使用canvas的convas来实现围绕旋转动画,外圈顺时针,里层逆时针 代码demo链接地址 代码demo链接地址 html文件 body { margin: 0; padd...

2017-01-14 23:23:46

阅读数 3818

评论数 0

原创 用js实现五子棋

思路: 1、先用canvas画五子棋的棋盘 2、获取鼠标点击的位置 3、根据鼠标点击的位置判断,并画棋子 4、根据下的棋子判断是否赢了 * { padding: 0; margin: 0;...

2017-01-11 23:49:46

阅读数 489

评论数 0

原创 CSS3背景图片尺寸属性

1、background-origin  规定 background-position 属性相对于什么位置来定位 a、padding-box 背景图像相对于内边距框来定位 b、border-box 背景图像相对于边框盒来定位 c、content-box 背景图像相对于内容框来定位 2、ba...

2017-01-11 23:20:20

阅读数 1360

评论数 0

原创 使用纯CSS3实现转动时钟案例

使用纯CSS3属性来实现转动时钟 .box { width: 200px; height: 200px; border: 10px solid #ccc; ...

2017-01-10 23:55:45

阅读数 4282

评论数 0

原创 使用Html5实现手风琴案例

使用H5实现横向的手风琴功能 * { padding: 0; margin: 0; } div { width: 522px; ...

2017-01-09 22:52:41

阅读数 3193

评论数 0

提示
确定要删除当前文章?
取消 删除