JavaScript 设计模式

【JavaScript 设计模式 - 工具函数】的更多相关文章

JavaScript 设计模式 - 工具函数

1.类式继承,模拟面向对象语言的继承方式 function extend(subClass, superClass) { var F = function() {}; F.prototype = superClass.prototype; subClass.prototype = new F(); subClass.prototype.constructor = subClass; subClass.superclass = superClass.prototype; if(superClass…

javascript 实用工具函数

整理日常开发中我们常常会使用到的一些工具函数. var utils = (function(){ var fay = {}; // 返回当前时间的毫秒数 fay.getTime = Date.now() || function getTime() {return new Date().getTime();}; // 对象复制 fay.extend = function(target, obj) { if(obj && typeof obj !== 'object') return thro…

javascript常用工具函数总结(不定期补充)未指定标题的文章

前言以下代码来自:自己写的.工作项目框架上用到的.其他框架源码上的.网上看到的. 主要是作为工具函数,服务于框架业务,自身不依赖于其他框架类库,部分使用到es6/es7的语法使用时要注意转码虽然尽量在函数中做了错误情况的处理,仍有可能出现报错的情况(不定期完善) 1. 获取url上的参数 /** *获取url上的参数 * @return {object} * @example * getRequest() getRequest().paramA */ function getRequest(…

JavaScript常用工具函数

检测数据是不是除了symbol外的原始数据 function isStatic(value) { return ( typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' || typeof value === 'undefined' || value === null ) } 检查数据是否为有效的类数组长度 function isLength(value) { return ( t…

JavaScript设计模式-1.函数

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>javascript高级语法1-函数</title> </head> <body> <script> function print(p){ console.log(p.toString(),p) } /* var arr= new Array(); arr.pu…

javascript工具函数

第一部分 JavaScript工具函数转义特殊字符为html实体 HtmlEncode: function(str){ return str.replace(/&/g, '&').replace(/\"/g, '"').replace(/</g, '<').replace(/>/g, '>').replace(/'/g, '''); }, 验证是否为有效的手机电话号码 IsMobile: function(str){…

JavaScript设计模式与开发实践——读书笔记1.高阶函数(上)

说来惭愧,4个多月未更新了.4月份以后就开始忙起来了,论文.毕设.毕业旅行等七七八八的事情占据了很多时间,毕业之后开始忙碌的工作,这期间一直想写博客,但是一直没能静下心写.这段时间在看<JavaScript设计模式与开发实践>,感觉很不错,受益匪浅. 这篇文章将围绕高阶函数是什么.高阶函数有什么作用等几个方面来进行介绍. 什么是高阶函数? 高阶函数是指至少满足下列条件之一的函数: 1.函数可以作为参数被传递 2.函数可以作为返回值输出 1.函数作为参数传递,这样我们可以抽离出一部分容易变化的业…

JavaScript封装Ajax工具函数及jQuery中的ajax，xhr在IE的兼容

封装ajax工具函数首先要思考:1.为什么要封装它?提高开发效率2.把一些不确定的情况考虑在其中 a. 请求方式 b. 请求地址 c. 是否异步 d. 发送参数 e. 成功处理 f. 失败处理3.确定参数 a. Type--请求方式 get (get/post) b. Url--请求地址默认当前地址字符串 c. Async--是否异步 true (true/false) d. Data--发送的数据 {} 对象{name:xx} e. Success--成功回调 function 函数函…

常用的工具函数助力JavaScript高效开发

前言日常开发中,面对各种不同的需求,我们经常会用到以前开发过的一些工具函数,把这些工具函数收集起来,将大大提高我们的开发效率. 1.校验数据类型 export const typeOf = function(obj) { return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase()} 示例: typeOf('树哥') // stringtypeOf([]) // arraytypeOf(new Date()) …

【读书笔记】读《JavaScript设计模式》之装饰者模式

一.定义装饰者模式可用来透明地把对象包装在具有同样接口的另一个对象之中.这样一来,你可以给一个方法添加一些行为,然后将方法调用传递给原始对象.相对于创建子类来说,使用装饰者对象是一种更灵活的选择(装饰者提供比继承更有弹性的替代方案). 装饰者用于通过重载方法的形式添加新功能,该模式可以在被装饰者前面或者后面加上自己的行为以达到特定的目的. 二.举例 2.1 装饰者是一种实现继承的替代方案.当脚本运行时,在子类中添加行为会影响原有类所有的实例,而装饰者却不然.取而代之的是它能给不同对象各自添加新…

【读书笔记】读《JavaScript设计模式》之适配器模式

一.定义适配器模式可用来在现有接口和不兼容的类之间进行匹配.使用这种模式的对象又叫包装器(wrapper),因为它们是在用一个新的接口包装另一个对象.在设计类的时候旺旺会遇到有些接口不能与现有API一同使用的情况.借助于适配器,你不用直接修改这些类也能使用它们. 适配器可以被添加到现有代码中以协调两个不同的接口.如果现有代码的接口能很好的满足需要,那就可能没有必要使用适配器.但要是现有接口对于手头的工作来说不够直观或实用,那么可以使用适配器来提供一个更简化或更丰富的接口. var client…

【读书笔记】读《JavaScript设计模式》之门面模式

一.前言门面模式,也称Facade(外观)模式.核心的两点作用—— 1> 简化类的接口(让接口变得更加容易理解.容易应用.更加符合对应业务),来掩盖一个非常不同或者复杂的实现 2> 消除类与使用它的客户代码之间的耦合可以把门面模式想成是简化API来展示给其他开发人员,通常都是可以提高可用性. 二.举例例子一.事件监听 function addEvent(el, type, fn) { if (window.addEventListener) { el.addEventListener(t…

JavaScript设计模式-单例模式、模块模式（转载学习中。。。。）

(转载地址:http://technicolor.iteye.com/blog/1409656) 之前在<JavaScript小特性-面向对象>里面介绍过JavaScript面向对象的特性了,有了面向对象之后,自然就会想——那是不是还有设计模式呢?由于js面向对象的方式是基于原型(prototype)的,而不是传统基于类型(class),所以js的设计模式也和经典的设计模式有些差异. 关于设计模式先说说什么是设计模式吧.很多人都觉得“设计模式”这东西很玄乎,把Gof四人帮的<Desig…

转载,javascript 设计模式

了解JavaScript设计模式我们需要知道的一些必要知识点:(内容相对基础,高手请跳过) 闭包:关于闭包这个月在园子里有几篇不错的分享了,在这我也从最实际的地方出发,说说我的理解. 1.闭包最常用的方式就是返回一个内联函数(何为内联函数?就是在函数内部声明的函数): 2.在JavaScript中有作用域和执行环境的问题,在函数内部的变量在函数外部是无法访问的,在函数内部却可以得到全局变量.由于种种原因,我们有时候需要得到函数内部的变量,可是用常规方法是得不到的,这时我们就可以创建一个闭包,用来…

【JavaScript设计模式系列---开篇预览】

转:http://www.cnblogs.com/Darren_code/archive/2011/08/31/JavascripDesignPatterns.html 2011-08-31 23:55 by 聂微东, 28174阅读, 146评论, 收藏, 编辑一直都在考虑这个月分享大家什么东西最好,原计划是打算写一些HTML5中JS方面的内容或者是AJAX方面的,可是自己由于表达能力,时间,还有个人工作方面…

了解JavaScript设计模式我们需要知道的一些必要知识点:(内容相对基础,高手请跳过) 闭包:关于闭包这个月在园子里有几篇不错的分享了,在这我也从最实际的地方出发,说说我的理解. 1.闭包最常用的方式就是返回一个内联函数(何为内联函数?就是在函数内部声明的函数): 2.在JavaScript中有作用域和执行环境的问题,在函数内部的变量在函数外部是无法访问的,在函数内部却可以得到全局变量.由于种种原因,我们有时候需要得到函数内部的变量,可是用常规方法是得不到的,这时我们就可以创建一个闭包,用来…

JavaScript设计模式经典-面向对象中六大原则

作者 | Jeskson来源 | 达达前端小酒馆 1 主要学习JavaScript中的六大原则.那么六大原则还记得是什么了吗?六大原则指:单一职责原则(SRP),开放封闭原则(OCP),里氏替换原则(LSP),依赖倒置原则(DIP),接口分离原则(ISP),最少知识原则(LKP). 单一职责原则开放封闭原则里氏替换原则依赖倒置原则接口分离原则最少知识原则那么什么是单一职责原则呢?单一职责原则,英文单词为:single responsable princple,原则体现为,一个对象或者是方法只做…

15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码)

15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码) 前言设计模式是一个程序员进阶高级的必备技巧,也是评判一个工程师工作经验和能力的试金石.设计模式是程序员多年工作经验的凝练和总结,能更大限度的优化代码以及对已有代码的合理重构.作为一名合格的前端工程师,学习设计模式是对自己工作经验的另一种方式的总结和反思,也是开发高质量,高可维护性,可扩展性代码的重要手段. 我们所熟知的金典的几大框架,比如jquery, react, vue内部也大量应用了设计模式, 比如观察…

一篇文章图文并茂地带你轻松学完 JavaScript 设计模式(二)

JavaScript 设计模式(二) 本篇文章是 JavaScript 设计模式的第二篇文章,如果没有看过我上篇文章的读者,可以先看完上篇文章后再看这篇文章,当然两篇文章并没有过多的依赖性. 5. 代理模式代理模式提供了对目标对象的另一种访问机制. 在 vue3 还没出来之前,我猜过可能会使用 proxy 取代 defineProperty ,结果也被验证了,毕竟 proxy 比 defineProperty 支持更多的拦截机制,可以对数组的方法进行拦截. const obj = {};…

《JavaScript设计模式张》整理

最近在研读另外一本关于设计模式的书<JavaScript设计模式>,这本书中描述了更多的设计模式. 一.创建型设计模式包括简单工厂.工厂方法.抽象工厂.建造者.原型和单例模式. 1)简单工厂又叫静态工厂方法,由一个工厂对象决定创建某一种产品对象类的实例. 两种实现方式,第一种是通过类实例化对象创建,第二种是创建一个新对象然后包装增强其属性和功能. demo代码. 2)工厂方法通过对产品类的抽象使其创建业务主要负责用于创建多类产品的实例. 将工厂方法看作是一个实例化对象的工厂类. demo…

《JavaScript设计模式与开发实践》整理

最近在研读一本书<JavaScript设计模式与开发实践>,进阶用的. 一.高阶函数高阶函数是指至少满足下列条件之一的函数. 1. 函数可以作为参数被传递. 2. 函数可以作为返回值输出. 1)高阶函数实现AOP AOP(面向切面编程)的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来,这些跟业务逻辑无关的功能通常包括日志统计.安全控制.异常处理等. 把这些功能抽离出来之后,再通过“动态织入”的方式掺入业务逻辑模块中. 这样做的好处首先是可以保持业务逻辑模块的纯净和高内聚性,其次是可以很…

JQuery中的工具函数总结

前提引入前提当然也是要引入Jquery啦... <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> 工具方法 ①获取浏览器的名称与版本信息在jQuery中,通过$.browser对象可以获取浏览器的名称和版本信息,如$.browser.chrome为true,表示当前为Chrome浏览器,$.browser.…

Javascript设计模式学习一

学习Javascript设计模式之前,需要先了解一些相关知识,面向对象的基础知识.this等重要概念,以及掌握一些函数式编程的技巧. Js多态多态的思想:实际上是把“做什么”和“谁去做”分离开来.例: var makeSound = function(animal){ if(animal.show instanceof Function){ animal.show(); } } var dog = { show: function(){ console.log('汪汪'); } } var c…

五、jquery使用工具函数

工具函数对应的网址在 http://api.jquery.com/categouy/utilities/ 工具函数处理对象的不同,可以将其分为几大类别:浏览器的检测.数组和对象的操作.字符串的操作.测试的操作.URL的操作. 1.浏览器的检测在浏览其的进啊侧中,又可分为浏览器类型与特征的检测,前者获取浏览器的名称或版本信息,今后这检测浏览是否支持标准的W3C盒子模型. 1-1.虽然jquery有很好的浏览器兼容性,但有时程序开发人员需要获取浏览器的相关信息,提供给用户或程序.在jquery…

javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件（三）

在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调用和联动. 切换要求:当前图片显示指定时间后执行切换效果并切换下一张图片,最后一个切换后从头开始. 按照要求一个效果对象完成后要执行下一个,最后一个完成后要从头开始, 看上去就是一个带状态通知的环形列表,类似于这样的特征,可以采用职责链模式来构建. 职责链就是由不同的功能处理构成的链表,每一个功能处理作为一个…

javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件（二）

在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编写. 先思考一下一个切换效果需要完成的操作 1.准备阶段,将各个strip归位到动画效果开始的位置. 2.动画效果处理. 3.执行. 3.完成. 所有的切换效果都具备上述3步操作. 既然这样就好抽象了. 可以对上述的操作进行单独定义,然后通过模板方法模式对各个操作进行调用. 所谓的模板方法模式,其实就是有这么…

javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件（一）

类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. 先贴上完成的效果. 实现原理不复杂,在动的一条一条的称之为“窗帘条”或者是“strip”,每一个strip都是一个div,类似于雪碧图的方式将其背景图的位置设置为strip的可视位置,然后用jquery的animate让他们按照一定规律动起来就完成窗帘切换效果了. 为了使用方便,将这个功能作为jq…