JS设计模式——1.富有表现力的JS】的更多相关文章

创建支持链式调用的类(构造函数+原型) Function.prototype.method = function(name, fn){ this.prototype[name] = fn; return this; }; //构造函数+原型 创建类 var Anim = function(){}; Anim.method('starts', function(){ console.log('starts'); }).method('ends', function(){ console.log('…
第一章:富有表现力的JavaScript 1.1  JavaScript的灵活性 1.2  弱类型语言 1.3  函数是一等对象 1.4  对象的易变性 1.5  继承 1.6  JavaScript中的设计模式 1.7  小结 1.1 JavaScript的灵活性 JavaScript最强大的特性是其灵活性.作为JavaScript程序员,只要你愿意,可以把程序写得很简单,也可以很复杂.这种语言也支持多种不同的编程风格.你既可以采用函数式编程风格,也可以采用更复杂一点的面向对象编程风格. 1.…
1.JavaScript的灵活性 JavaScript是目前最流行.应用最广泛的语言之一,它是一种极富表现力的语言,它具有C家族语言所罕见的特性.这种语言允许我们使用各种方式来完成同一个任务或者功能,还允许我们在面向对象编程的过程使用函数式编程中的概念来丰富其实现方式.这种语言允许我们采用多种不同的编程风格进行编程,如简单一些的函数式编程,复杂一些的面向对象编程.所以我们可以在长期的编码过程中,培养专门属于自己的编程风格,下面的例子会体现出JavaScript的灵活性. 下面我们将要实现一个模拟…
第一章 创建一个类 方法一:      var Anim = function() {           ...      };      Anim.prototype.start = function() {           ...      };      Anim.prototype.stop = function() {           ...      }; 方法二:      var Anim = function() {           ...      };    …
1.javascript的灵活性,你可以把它写的很简单,也可以写的很复杂,简直就是随心所欲: 2.javascript是弱类型语言,定义变量的时候不用声明变量类型,不声明类型,并不是说,javascript变量没有类型,类型是根据赋值类型所定:javascript有三种原始类型:布尔类型.数值型.字符串: 数值类型不区分整数和浮点数.此外还有对象类型.函数类型.null.undefined:原始类型是按值传送,其它是按引用传送. 3.函数是一等对象,可以通过闭包设置对象的私有属性: 4.对象的易…
js设计模式——8.中介者模式 /*js设计模式——中介者模式*/ class A { constructor() { this.number = 0; } setNumber(num, m) { this.number = num; if (m) { m.setB(); } } } class B { constructor() { this.number = 0; } setNumber(num, m) { this.number = num; if (m) { m.setA(); } }…
刚入职时,看过一段时间的设计模式,似懂非懂.不知不觉过去七个月了,对JS的理解更深刻了,数据结构与算法的基础也基本上算是过了一遍了,接下来要把设计模式搞定,然后不再深层次研究JS了,而是学习前端自动化.linux.数据库.服务器等的相关知识. 虽然各种模式非常有用,但我们编写业务代码的时候,往往不需要去预先猜测是否需要使用模式,当发现不方便维护和扩展的时候,再编写也不迟. 设计模式的学习主要参考<JavaScript设计模式与开发实践>一书,很多笔记也会从该书抄录.开始JS设计模式的学习. 1…
0.前言 老实讲,看设计模式真得很痛苦,一则阅读过的代码太少:二则从来或者从没意识到使用过这些东西.所以我采用了看书(<js设计模式>)和阅读博客(大叔.alloyteam.聂微东)相结合的办法,勉勉强强写了这么多随笔,当然写随便不是为了炫耀,而是对知识进行总结,以便加深理解. 1.职责链模式是什么? 有一个请求,多个对象都可以处理该请求,但是到底哪个对象要处理该请求在开发期是不确定的,也就是说请求的发送者和接受者是一种动态的关系.所以需要将这些对象链成一条链,并沿着这条链传递该请求,链上的对…
JS设计模式——5.单体模式 http://www.cnblogs.com/JChen666/p/3610585.html   单体模式的优势 用了这么久的单体模式,竟全然不知!用它具体有哪些好处呢? 1.可以用它来划分命名空间(这个就是就是经常用的了) 2.利用分支技术来封装浏览器之间的差异(这个还真没用过,挺新鲜) 3.借助单体模式,可以把代码组织的更为一致,方便阅读与维护(这个也用过了) 最基本的单体模式 最简单的单体其实就是一个对象字面量.它把一批有一定关联的方法和属性组织在一起. va…
js模拟java接口检测函数:确保子类实现接口中的方法:(出自js设计模式) 上代码: <script type="text/javascript" > <%--接口工厂方法 start--%> /** name:接口名称:字符串类型 arr_method:接口中的方法名称:数组形式['method1','method2',····] 可以定义接口名称和接口定义的方法名称, **/ //首先编写接口创建工厂,用来创建接口,用以 定义接口需要定义的方法 var I…
一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach()方法用来循环遍历数组,方法中的function回调函数接收3个参数 参数1是遍历的数组内容(item):参数2是对应的数组索引(index),参数3是是数组本身(array). [].forEach(function(item,index,array){ ... }) var arr = ["白板&…
js设计模式小结 工厂模式/构造函数--减少重复 - 创建对象有new - 自动创建obj,this赋值 - 无return 原型链模式 - 进一步去重 类是函数数据类型,每个函数都有prototype constructor->指向原型本身 __proto__->指向object类的prototype地址 实例是对象数据类型:每个对象都有__proto__属性->指向所属类的prototype地址 js对原型的操作 给原型添加属性 - Fn.prototype.sum=function…
js设计模式小结 工厂模式/构造函数--减少重复 - 创建对象有new - 自动创建obj,this赋值 - 无return 原型链模式 - 进一步去重 类是函数数据类型,每个函数都有prototype constructor->指向原型本身 __proto__->指向object类的prototype地址 实例是对象数据类型:每个对象都有__proto__属性->指向所属类的prototype地址 js对原型的操作 给原型添加属性 - Fn.prototype.sum=function…
js设计模式有很多种,知道不代表会用,更不代表理解,为了更好的理解每个设计模式,对每个设计模式进行总结,以后只要看到总结,就能知道该设计模式的作用,以及模式存在的优缺点,使用范围. 本文主要参考张容铭著的<JavaScript设计模式>. 1.简单工厂模式 由一个工厂对象决定创建某一种产品对象类的实例,主要用来创建同一类对象. 举例子:1.比如不同的弹出框,有警告框,提示框,确认框等.我们创建一个大类包含包含其共有的部分,比如显示,内容等,再根据创建是选择的类型,再将差异部分添加进去. 2.体…
定义: 观察者模式又叫发布订阅模式,它定义了对象间的一种一对多的依赖关系.观察者模式让两个对象松耦合地联系在一起,虽然不太清楚彼此的细节,但这不影响他们之间的互相通信. 思路 定义一个对象,在对象中实现注册事件,关闭事件和触发事件. js 简单实现 var Observer = { data: {}, // 订阅 register: function (event, func) { if (this.data[event]) { this.data[event].push(func); } el…
一.js面向对象程序 var o1 = new Object();     o1.name = "宾宾";     o1.sex = "男";     o1.age = "27"; o1.msg = function(){     console.log("姓名:"+this.name+"  性别:"+this.sex+"  年龄:"+this.age); }   var o2 = ne…
js设计模式——7.备忘录模式 /*js设计模式——备忘录模式*/ // 备忘类 class Memento { constructor(content) { this.content = content; } getContent() { return this.content; } } // 备忘列表 class CarTaker { constructor() { this.list = []; } add(memento) { this.list.push(memento); } get…
js设计模式——6.模板方法模式与职责链模式 职责链模式…
js设计模式——5.状态模式 代码演示 /*js设计模式——状态模式*/ // 状态(红灯,黄灯,绿灯) class State { constructor(color) { this.color = color; } handle(context) { console.log(`turn to ${this.color} light`); context.seState(this); } } // 主体 class Context { constructor() { this.state =…
js设计模式——4.迭代器模式 代码演示 /*js设计模式——迭代器模式*/ class Iterator { constructor(container) { this.list = container.list; this.index = 0; } // next 判断下一项还有则继续追加 next() { if (this.hasNext()) { return this.list[this.index++]; } return null; } // hasNext 判断是否还有下一项 h…
js设计模式——观察者模式 /*js设计模式——.观察者模式*/ // 主题,保存状态,状态变化之后触发所有观察者对象 class Subject { constructor() { this.state = 0; this.observers = []; } getState() { return this.state; } setState(state) { this.state = state; this.notifyAllObservers(); } // notifyAllObserv…
js设计模式——2.外观模式…
js设计模式——1.代理模式 以下是代码示例 /*js设计模式——代理模式*/ class ReadImg { constructor(fileName) { this.fileName = fileName; this.loadFromDisk(); // 初始化即从硬盘中加载,模拟 } // display 对外提供一个方法 display() { console.log('display...' + this.fileName); } loadFromDisk() { console.lo…
1.    背景 最近项目原因使用了durandal.js和knockout.js,颇有受益.决定写一个比较浅显的总结. 之前一直在用SpringMVC框架写后台,前台是用JSP+JS+标签库,算是很传统的MVC开发模式了.后来,前端用Flex还有微软的WPF做过开发,到这次,前端使用纯JS+HTML,利用knockout.js,也算是接触了几种语言下的MVVM模式. 此次开发中,结合require.js和durandal.js,完成了按需加载.AMD规范以及前端页面路由.当然了,一般控件的编写…
转载自http://www.blogjava.net/Alpha/archive/2009/06/27/284373.html Flex中As调用Js的方法是:     1.导入包 (import flash.external.ExternalInterface;)     2.使用ExternalInterface.call("Js函数名称",参数)进行调用,其返回的值就是Js函数所返回的值 Js调用As的方法是:     1.导入包 (import flash.external.E…
基本概念 链接:https://www.zhihu.com/question/47244505/answer/105026648 链接:How to decide when to use Node.js? JavaScript 是一种(最好的)编程语言, 主要作为前端开发中用来增加网页的动态功能,比如操作DOM, 读取用户输入, 动画效果, 提 交服务器请求(Ajax). JavaScript 是什么? - 前端开发 NodeJs 是基于JavaScript的,可以做为后台开发的语言. 提供了很…
上一篇我向大家分享了7款效果震憾的HTML5应用组件,今天主要来分享一下CSS3网页菜单,因为在一个网站中,菜单起着举足轻重的作用,所以作为WEB开发人员,我们有必要将网站的菜单设计得尽量完美,下面向大家推荐8款极具表现力的jQuery/CSS3网页菜单,在网页应用中,也许你能够用到它们. 原创声明:转载请务必在文章正文明显处注明并保留原文完整性 来源:编程文库    原文链接:http://wiki.itivy.com/?p=513 1.CSS3带头像3D下拉菜单 这款CSS3下拉菜单设计富有…
1.1.2 Node.js控制台(REPL) Node.js也有自己的虚拟的运行环境:REPL. 我们可以使用它来执行任何的Node.js或者javascript代码.还可以引入模块和使用文件系统. 在终端的执行命令来打开控制台, 1.1.3 加载Node.js脚本 记载node.js脚本文件非常简单,运行"node 文件名"即可,"node program.js".如果我们想快速执行一些简单的语句,可以使用-e参数,这样我们直接执行一些javascript或者no…
js调用php和php调用js的方法举例1 JS方式调用PHP文件并取得php中的值 举一个简单的例子来说明: 如在页面a.html中用下面这句调用: <script type="text/javascript" src="b.php?action=test"></script> <script type="text/javascript" > alert(jstext); </script> 在b…
通过Edge.js项目,你可以在一个进程中同时运行Node.js和.NET代码.在本文中,我将会论述这个项目背后的动机,并描述Edge.js提供的基本机制.随后将探讨一些Edge.js应用场景,它在这些场景中可以为你开发Node.js程序提供帮助. 为何要使用Edge.js? 虽然许多应用程序只能用Node.js编写,不过有些情况下又需要综合Node.js和.NET两者的优点.基于以下几个理由,你想要在程序中使用.NET和Node.js:.NET框架和NuGet包提供了一个丰富的功能生态系统,它…