JavaScript常用设计模式
单例模式:确保类只能被实例化一次。
var obj = {}
2、函数返回值
var func = function () {return {}}
var obj = func();
3、构造函数初始化
var obj = (function () {return {}})()
装饰者模式:装饰者用用于包装同接口的对象。
var obj = obj || {}
obj.set = function(){}
obj.get = function(){}
obj.……= function(){}
模块模式:该模式使用闭包封装私有状态和组织。
var module = (function(obj){})({});
观察者模式:它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象。
function func() {}
func.prototype.set = function(opt){}
func.prototype.get = function(opt){}
var obj = new func();
obj.set({});
obj.get({});
构造函数模式:自定义自己的构造函数,然后在里面声明自定义类型对象的属性或方法。
1、构造函数
function func(name,age){
this.id = 0;
//code……
}
func.prototype.pro = function(){}
2、构造函数强制实例化
function func(title) {
if (!(this instanceof func)) {
return new func(title);
}
this.title = title;
}
func.prototype.get = function () { return this.title; }
console.log(obj.get());
工厂模式:工厂模式就好比现实生活中的工厂可以产生大量相似的产品。
function func(opt){
var obj = {
id:0,
title:''
}
return $.extend(obj,opt);
}
var f1 = func({id:1,title:'标题1'});
var f2 = func({id:2,title:'标题2'});
对象创建模式:对象中创建对象
模式1:命名空间(namespace)
var obj = obj || {};
obj.app = obj.app || {};
obj.app.ios = obj.app.ios || {};
obj.app.android = obj.app.android || {};
模式2:通过自执行函数创建对象
var obj;
(function () {
obj = {}
})
模式3:链模式
var obj = {
func1: function () {return this;},
func2: function () {return this;},
……: function () {return this;}
}
// 链方法调用
obj.func1().func2().……();
模式4:函数语法糖
函数语法糖是为一个对象快速添加方法(函数)的扩展,这个主要是利用prototype的特性
if (typeof Function.prototype.method !== "function") {
Function.prototype.method = function (name, implementation) {
this.prototype[name] = implementation;
return this;
};
}
var func = function (name) {
this.name = name;
}.method('set', function (name) {
this.name = name;
}).method('get', function () {
return this.name;
});
var a = new func('a');
a.set('b');
console.log(a.get());
沙盒模式
JavaScript常用设计模式的更多相关文章
- 7 种 Javascript 常用设计模式学习笔记
7 种 Javascript 常用设计模式学习笔记 由于 JS 或者前端的场景限制,并不是 23 种设计模式都常用. 有的是没有使用场景,有的模式使用场景非常少,所以只是列举 7 个常见的模式 本文的 ...
- Javascript 常用设计模式
转载自:https://blog.csdn.net/buptlyz/article/details/52018193 单例模式(模块模式):确保始终只创建一个实例的对象时使用的设计模式. 为什么需要采 ...
- Javascript常用的设计模式详解
Javascript常用的设计模式详解 阅读目录 一:理解工厂模式 二:理解单体模式 三:理解模块模式 四:理解代理模式 五:理解职责链模式 六:命令模式的理解: 七:模板方法模式 八:理解javas ...
- JavaScript 常用功能总结
小编吐血整理加上翻译,太辛苦了~求赞! 本文主要总结了JavaScript 常用功能总结,如一些常用的JS 对象,基本数据结构,功能函数等,还有一些常用的设计模式. 目录: 众所周知,JavaScri ...
- select元素javascript常用操作 转
/*------------------------------------------------------ *作者:xieyu @ 2007-08-14 *语言:JavaScript *说明:s ...
- Android常用设计模式(二)
Android常用设计模式之观察者模式 观察者设计模式在Android应用中会经常用到,模式原理类似于这样的场景: 用户订报纸,然后在报社登记,报社来统计用户(添加用户),用户也可以取消订阅,报社删除 ...
- 代码重构 & 常用设计模式
代码重构 重构目的 相同的代码最好只出现一次 主次方法 主方法 只包含实现完整逻辑的子方法 思维清楚,便于阅读 次方法 实现具体逻辑功能 测试通过后,后续几乎不用维护 重构的步骤 1 新建一个方法 ...
- IOS开发常用设计模式
IOS开发常用设计模式 说起设计模式,感觉自己把握不了笔头,所以单拿出iOS开发中的几种常用设计模式谈一下. 单例模式(Singleton) 概念:整个应用或系统只能有该类的一个实例 在iOS开发我们 ...
- 第二篇、JavaScript常用的API
下面是我整理的一些JavaScript常用的API清单. 目录 元素查找 class操作 节点操作 属性操作 内容操作 css操作 位置大小 事件 DOM加载完毕 绑定上下文 去除空格 Ajax JS ...
随机推荐
- 使用Axure RP原型设计实践08,制作圆角文本框
本篇体验做一个简单圆角文本框,做到3个效果: 1.初始状态,圆角文本框有淡淡的背景色,边框的颜色为浅灰色2.点击圆角文本框,让其获取焦点,边框变成蓝色,背景色变成白色3.圆角文本框失去焦点,边框变成红 ...
- finger-guessing game:2增加游戏进度,界面title及游戏界面
增加游戏进度,界面title及游戏界面 //初始化引擎组件 init(50, "div_caiquan", 800, 400, main); //定义游戏层,加载进度层.游戏背景层 ...
- 【Devops】【docker】【CI/CD】jenkins源码管理,添加SSH地址后报错+Jenkins构建报错:Please make sure you have the correct access rights and the repository exists.
jenkins源码管理,添加SSH地址后报错: Could not read from remote repository. Please make sure you have the correct ...
- libcurl下载文件
一.初始化 CURL *pHandler = curl_easy_init(); 二.设置请求参数: 调用curl_easy_setopt方法,设置选项 curl_easy_setopt(pHan ...
- svn导出文件进行比较
之前有介绍svn log 的命令,即可导出版本A~B之间所有的修改动作,然后复制出相应的文件(中间有一个算法去处理每一个动作,然后得到最终需要导出的文件列表,svn常用动作有:Modified.Add ...
- ios之网络异常与正常视图的切换
1. xib中创建两个View 2. View的视图大概如下第一个:View View 第二个:View 3. 代码切换: [self.view addSubview:_redView]; // 会 ...
- Java Date 时分秒置0
Date now = new Date(); Calendar cal1 = Calendar.getInstance(); cal1.setTime(now); // 将时分秒,毫秒域清零 cal1 ...
- ViewFlipper的简单用法
ViewFlipper和ViewPager挺像的,都是一个view容器.内部可以添加多个view,只是viewpager可以通过左右滑动来切换view,而viewFlipper则没有这个功能,所以需要 ...
- Eclipse中输入变量会自动补全上屏的解决方法
我自己在启动Eclipse代码补全后输入感觉确实爽多了,但是每次输入变量后一按下空格,编译器会自己帮你写一个很蛋疼的名字,比如你输入了:String mStr后按下空格,它就变成了mString,十分 ...
- [Hook] 跨进程 Binder 学习指南
cp from : http://weishu.me/2016/01/12/binder-index-for-newer/ 毫不夸张地说,Binder是Android系统中最重要的特性之一:正如其名“ ...