janwool的博客_设计模式JS版

PHP和JS判断浏览器是微信还是支付宝

PHP代码if(strpos($_SERVER['HTTP_USER_AGENT'],'MicroMessenger')!==false){return‘WeiXin’;}//判断是不是支付宝if(strpos($_SERVER['HTTP_USER_AGENT'],'AlipayClient')!==false){return"AliPay";}JS判断functionWxOrAli(){var

支付宝

微信

浏览器

原创 2018-05-02 14:36:51 1392 阅读 1点赞

javascript防止变量全局污染

前段时间封装了一个函数，当时考虑的没那么多，最近回头看这个封装的函数时发现其实造成了全局污染。原先的函数是这样的：functioninterval(fn,ms){!this.fn?(this.fn=fn,this.ms=ms,this.step=0):nullthis.step++this.step%(this.ms*60)==0?this.fn():nullrequestAnimationFra

变量污染

模拟

setInterval

原创 2018-04-09 10:36:37 1281 阅读 1点赞

Javascript实现运算符重载

最近要做数据处理，自定义了一些数据结构，比如Mat,Vector,Point之类的，对于加减乘除之类的四则运算还要重复定义，代码显得不是很直观，javascript没有运算符重载这个像C++、C#之类的功能的确令人不爽，于是想“曲线救国”，自动将翻译代码实现运算符重载，实现思路其实很简单，就是编写一个解释器，将代码编译。例如：S=A+B(B-C.fun())/2+D翻译成`S=replace(re

运算符

重载

javascript

原创精选 2018-03-19 14:22:50 3376 阅读 1点赞

Vue+Websocket实现多人在线王者飞机（一）

看了Vue官方教程（貌似和自己写的框架差别不大，听前前端同事一直吹Vue，于是学习了一下，和自己写的框架好像也没强哪里去嘛,就是要傲娇哈哈），等有空也整理自己的框架，开源好了），想找个项目练练手（没找到好的），就写个飞机大战吧。飞机大战总共三个页面：登录、匹配、游戏页面，三个页面的功能：1、登录：玩家填写用户名，socket连接2、匹配：等待其他玩家准备3、游戏：战斗页面上述流程仿照了王者荣耀，所

Vue

request

AnimationFra

原创 2018-03-01 01:21:14 3933 阅读

javascript实现Map结构

//定义mapfunctionMap(){this.container={};}//将key-value放入map中Map.prototype.put=function(key,value){try{if(key!=null){this.container[key]=value;}}catch(e){returne;}};//根据key从map中取出对应的valueMap.prototype.ge

Map

遍历

原创 2018-01-17 00:12:32 2573 阅读

数据绑定——观察者模式

AngularJs是一款优秀的前端JS框架,它实现了将数据模型(data-model)关联到视图(UI)上。但个人认为正是由于它规范性的结构和体系导致使用的时候并不是很灵活。那么如何自己实现一个数据绑定视图的功能呢。设想一下这样的应用场景，当我们修改数据或从服务器接收数据更新现有

JS

数据绑定

Angular

原创精选 2017-01-04 13:56:59 1128 阅读

多级伸缩菜单——组合模式

常见的后台管理模板都有一个伸缩菜单，我们可以通过CSS轻松实现，但是如果我们动态的添加菜单，javascript的操作Dom将会变得很繁琐，我们可以应用组合模式来轻松实现。组合模式用于把一组相似的对象当做一个单一的对象，以树形结构的形式来组合对象，以实现部分和整体的关系。下面的实例通过多级的伸缩菜单实现

组合模式

伸缩菜单

原创 2016-12-13 17:26:38 1207 阅读 2点赞 2收藏

正确的输入——过滤器模式

在建造者模式中动态创建表单时，用户的输入是任意的，显然这是不允许的，我们需要过滤掉用户不合理的输入并加以提示，过滤器模式允许开发人员通过不同的标准过滤一组对象，并通过逻辑运算将他们连接起来。实例中根据表单的要求，设计输入为空过滤器，邮箱格式过滤器，长度过滤器，并根据用户的输入给出结果，其类图结构如下：代

过滤器

模式

表单验证

原创 2016-12-13 16:03:14 1353 阅读

Android的ListView——适配器模式

安卓中有一个重要的控件ListView,安卓通过让用户实现BaseAdapter类来连接ListView和数据列表，将数据绑定显示在ListView中。适配器模式连接两个不兼容的接口，使两个不能一起工作的两个接口实现一起工作的功能。例子通过模仿Android的ListView实现过程来验证适配器模式，类

模式

适配器

ListView

原创 2016-12-13 14:33:21 881 阅读

动态表单构建器——建造者模式

在编写一个弹出框时,它可以包含确定按钮，取消按钮，标题栏，关闭按钮，最小化按钮，内容，最大化按钮等内容，但这些内容在不同的需求下又不是必须存在的，不同的需求需要对这些组件自由组合，显然每次组合都要重复编码。将这些不同的，容易变动的组件分离开来，通过一个Builder类一步一步的构造复杂的对象，这就是建造者模式。 &n

模式

表单

建造者

原创 2016-12-12 16:03:48 608 阅读 1收藏

怪物工厂——工厂模式

在原型模式中模拟游戏怪物的场景中，用户每点击一个按钮模拟游戏场景的变化，程序员都需要手动的new一个对象，耦合度太高，我们需要了解每个怪物类实现的方法。工厂模式提供了一种界面和算法的分离，降低耦合度。调用者想要创建一个对象，只需将想要创建的对象的名称委托给工厂，由工厂根据对象名称返回给调用者。这和我们现

工厂模式

耦合度

降低

原创 2016-12-12 11:17:37 1185 阅读

原型模式——javascript的面向对象

javascript没有类这个概念，但是面向对象的标志确是拥有类概念。对于类抽象重复的解决方案在javascript中没有办法通过继承来实现。但是javascript的每个函数都自动添加一个名称为prototype属性，这是一个对象，我们可以将所有的实例通过一个原型链引用到prototype上，从而模拟类的方式。 &