安静的对折-CSDN博客

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

代理模式：为其他对象提供一种代理以便控制对这个对象的访问。由于一个对象不能直接引用另一个对象，所以需要通过代理对象在这两个对象之间起到中介的作用。虚拟代理虚拟代理在web开发中是比较常用的代理模式，例如图片的预加载，当图片过大或者网络不好的时候，img标签显示图片的位置通常会有一段空白的时间，而我们常用的做法就是先用一张占位图来显示，等图片加载好了后再显示图片。var myImage = (...

2019-04-18 13:39:25 268

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

适配器模式：将一个类（对象）的接口（方法或者属性）转化成另外一个接口，以满足用户需求，使类（对象）之间接口的不兼容问题通过适配器得以解决数据的适配数据的适配在前端中是非常常见的场景，它解决了前后端的数据依赖。有的时候服务器传递过来的数据格式和前端需要使用的格式不一致，这种情况在使用UI框架时比较常见，因为框架有自己固定的格式，所以这个时候我们就需要对服务器传递过来的数据格式进行适配。例如我们...

2019-04-09 10:21:05 246

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

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

2019-04-02 09:56:51 303

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

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

2019-03-26 11:14:12 235

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

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

2019-03-19 09:48:54 173

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

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

2019-03-11 10:51:16 206

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

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

2019-03-04 14:03:27 154

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

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

2019-02-27 10:09:40 237

原创原型链

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

2018-10-21 20:01:14 334

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

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

2018-10-13 15:13:10 2118

原创 js多线程Web Worker

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

2018-10-07 17:10:27 2517

原创 DocumentFragment一个轻量级的document

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

2018-05-01 22:12:31 825

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

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

2018-05-01 21:23:13 7354

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

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

2017-08-02 14:23:10 13012

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

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

2017-08-02 11:53:05 2053

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

在移动端页面上，当有 fixed 遮罩背景和弹出层时，在屏幕上滑动能够滑动背景下面的内容，这就是臭名昭著的滚动穿透问题解决方法一：css之overflow:hiddenhtml, body { overflow: auto; height: 100%;}使用这种方法时，在与饿了么前端 mint-ui 组件库中的 Infinite scroll 存在冲突，导致在

2017-07-24 15:26:05 2510 1

原创 weex采坑之旅（二）JDK version环境搭建

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

2017-06-10 15:21:11 1218

原创 weex采坑之旅（三）Android SDK环境搭建

上一篇文章我们配置了jdk version，这一节就来配置Android SDK环境搭建Android SDK是Android平台上进行软件开发所需要的开发包，这里我们通过安装Android Studio的方式来安装Android SDK，Android Studio 是Android开发的IDE(集成开发环境)，至少是2.0 或者更新版本同样打开如下连接，此官方网站容易被墙https

2017-06-08 21:05:25 6897

原创 weex采坑之旅（一）初识weex

按照官方文档搭好weex依赖环境后，安装项目依赖包，运行npm run dev 和 npm run serve开启watch模式和静态服务器。然后打开浏览器，输入 http://localhost:8080/index.html，既可以看到 weex h5 的页面，但是我们会发现手机图形里什么也没有显示，但是我们发现一个 .js 文件没有找到这个文件是模拟手机端的文件，通过路径

2017-06-08 20:39:21 1087 1

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

今天一后台同事问我：为什么从App里面分享到微信好友时，在微信里没有发下载分享里的软件，而在浏览器中却可以？于是我在微信公众号中试了一下，发现果然不可以下载。通过google 发现，原来是微信屏蔽了内置浏览器的下载功能。那么有没有解决办法呢？肯定是有的。1：判断发现是在微信中打开，给提示让其从右上角选择在浏览器中打开，这样的效果对于用户体验来说肯定是差的。2：将要下载的app上传到腾

2017-04-26 14:55:16 10113

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

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

2017-04-20 09:17:31 10583

原创 vue嵌套路由-params传递参数（四）

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

2017-04-18 22:07:54 118107 10

原创 vue嵌套路由-query传递参数（三）

在嵌套路由中我们经常会遇到父路由向子路由里面传递参数，传递参数有两种方法，通过 query 或者 paramsindex.html main.js 同样通过重定向来显示父路由import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)//引入两个组件import home fro

2017-04-17 18:50:29 65292 1

原创 vue嵌套路由（二）

在实际项目中我们会碰到多层嵌套的组件组合而成，但是我们如何实现嵌套路由呢？因此我们需要在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。index.html，只有一个路由出口 main.js，路由的重定向，就会在页面一加载的时候，就会将home组件显示出来，因为重定向指向了home组件，redirect的指向与path的必须一致。chi

2017-04-17 17:46:50 23906 2

原创 vue简单路由（一）

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

2017-04-17 16:22:05 1817

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

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

2017-04-10 18:30:23 38073

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

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

2017-04-09 13:28:47 11807 1

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

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

2017-01-17 22:24:22 2606

原创 js中in操作符

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

2017-01-16 22:41:55 7172

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

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

2017-01-16 22:36:18 872

原创 js中的闭包

定义：只有函数内部的子函数才能读取函数的局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数，并且返回了该内部函数” // 只有函数内部的子函数才能读取函数的局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数，并且返回了该内部函数”// 为了读取f1函数中的局部变量，在f1中定义了一个子函数f2，函数f2就可以访问f1函数中的局部变

2017-01-16 22:29:00 298

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

js中函数可以作为参数和返回值，来看看下面的排序 function Student(name, height, weight) { this.name = name; this.height = height; this.weight = weight; } //创建对象 var st

2017-01-15 22:50:02 4178 1

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

在前端开发中我们常常需要从一个跳到另一个页面，并且将当前页面的数据传递过去，我常用下面两种方法1、在url路径后面带参数，参数与url之间用?隔开，参数与参数之间用&符隔开 window.location.href = "a.html?name='kevin'&age='20'";2、通过localStorage 和 sessionStorage 先存本地在取出数据用setI

2017-01-15 20:55:36 13888

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

相同点：apply和call方法都是Function.prototype原型中，他们可以改变this的指向，而且都是直接调用函数不同点： apply：参数传入的是数组call：参数传入的是一个一个的 //call和apply通过对象调用的时候,如果传入的是null,那么函数中的this就是window对象 //cal

2017-01-15 20:20:53 368

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

用canvas实现朝四个方向行走的小人，也可是使用键盘方向键操作行走的方向，其实就是用canvas不停的清除重画 canvas { border: 1px solid red; } 您的浏览器不支持canvas，请升级到最新的浏览器 var cas =

2017-01-15 16:47:01 11327 1

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

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

2017-01-14 23:23:46 5855

原创用js实现五子棋

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

2017-01-11 23:49:46 846

原创 CSS3背景图片尺寸属性

1、background-origin 规定 background-position 属性相对于什么位置来定位a、padding-box 背景图像相对于内边距框来定位b、border-box 背景图像相对于边框盒来定位c、content-box 背景图像相对于内容框来定位2、background-clip 规定背景的绘制区域，也就是背景图片显示的区域a、border-box

2017-01-11 23:20:20 2506