正文

javascript设计模式:读书笔记(未完)

 2022-05-05  504

关键词：

该篇随我读书的进度持续更新
阅读书目:《JavaScript设计模式》

2016/3/30
2016/3/31

2016/3/30：

模式是一种可复用的解决方案,可用于解决软件设计中遇到的常见问题./将解决问题的方法制作成模板,并且这些模板可应用于多种不同的情况.
有效模式的附加要求:适合性,实用性,适用性.

模式的优点:

防止局部问题引起大问题,模式让我们的代码更有组织性
模式通常是通用的解决方式,不管我们开发哪种应用程序,都可以用模式优化我们代码的结构
模式确实可以让我们避免代码复用,使代码更整洁
使用模式方便我们与工作伙伴一起工作时进行沟通和交流

优秀的模式有以下的特点

解决特殊问题
没有显而易见的解决方案－间接提供解决问题的方案
证明了作用与描述相一致
描述了一种关系,从正式描述能深入解释它与代码关系的系统结构和机制

反模式:

描述一种针对某个特定问题的不良解决方案,该方案会导致糟糕的情况发生
描述如何摆脱前述的糟糕情况以及如何创造好的解决方案

JavaScript中的反模式示例:

在全局上下文中定义大量的变量污染全局命名空间(就是乱使用全局变量)
向setTimeout/setInterval传递字符串,这会导致出发eval()的内部使用
修改Object类的原型
内联形式使用JavaScript,它是不可改变的
滥用document.write

设计模式:
确定->包含的类和实例,它们的角色,协作方式,职责分配

创建型设计模式
处理对象创建机制,以适合给定情况的方式来创建对象.旨在通过控制创建过程来解决减少创建对象的基本方法可能导致的项目复杂性
Constructor(构造器),Factory(工厂),Abstract(抽象),Prototype(原型),Singleton(单例),Builder(生成器)都属于创建型设计模式.
结构型设计模式
找出不同对象之间建立关系的简单方法,确保系统某一部分发生变化时,系统整个结构不需要同时改变,对于不适合某一特定目的而需要改变的系统部分,模式也能帮助它进行重组.
Decorator(装饰者),Facade(外观),Flyweight(享元),Adapter(适配器),Proxy(代理)都属于结构型设计模式.
行为设计模式
专注于改善或简化系统中不同对象的通信
Iterator(迭代器),Mediator(中介者),Observer(观察者),Visitor(访问者)都属于行为设计模式.

2016/3/31:

Constructor(构造器)模式:
<经典OOPL中,Constructor是一种在内存已分配给该对象的情况下,用于初始化新创建对象的特殊方法.>
JavaScript中,创建新对象有两种方法:
1. var newObj = {};
2. var newObj = new Object();
以上两种方法都创建了空对象.
赋值方法有4种:
newObj.some = "hello world";
newObj["some"] = "hello world";
以上两种兼容ECMAScript3
Object.defineProperty(newObj,"some",{value:"hello world"});//mdn链接
Object.defineProperties(newObj,{"some":{value:"hello world"},"other":{value:"goodbye"}});//mdn链接
以上两种方法属于ECMAScript5

基本构造器:

function people(name,age){
    this.name = name;
    this.age = age;
    this.toString = function(){
      return this.name;
    };
  }

View Code

问题:toString这样的函数为每个people构造器创建的新对象而重新分别定义了.

带原型的构造器:

function people(name,age){
  this.name = name;
  this.age = age;
}
people.prototype.toString = function(){
  return this.name;
}

View Code

这样就可以单一实例在所有people对象之间共享了.

Module(模块)模式
在JavaScript中,实现模块的方法:

对象字面量表示法(对象表达式)
Module模式
AMD模块
CommonJS模块
ECMAScript Harmony模块

后三种在后面讨论,目前学习前两种

对象字面量表示法:
对象字面量不需要new来实例化,但不能用于语句开头,这会导致{被解读为一个块的开始.对象外部,新成员赋值可以用myModule.property = "Value";
使用对象字面量有助于封装和组织代码.

Module(模块)模式:
Module模式最初定义为一种在传统软件工程中为类提供私有和公有封装的方法.
而在JavaScript中,Module模式用于进一步模拟类的概念.我们通过该方式,能够使一个单独的对象拥有公有/私有方法和变量,使函数名与页面其他脚本定义的函数冲突可能性降低.
JavaScript中没有真正意义上的"私有",所以我们使用作用域来模拟该概念

//函数字面量
var myMoudle = {
  myProperty:"property",
  myConfig:{
    language:"cn"
  },
  myFunction:function(){
    return "myFunction";
  }
};

//Module mode
var newMoudle = (function() {
  //private
  var innerVar = "test";

  return {
    //publish
    displayInnerVar = function() {
      return innerVar;
    }

  };
})();

View Code

(待续)

javascript设计模式读书笔记=;结构型设计模式

全系列目录JavaScript设计模式读书笔记（一）=>创建型设计模式JavaScript设计模式读书笔记（二）=>结构型设计模式JavaScript设计模式读书笔记（三）=>行为型设计模式JavaScript设计模式读书笔记&#... 查看详情

javascript设计模式读书笔记=;创建型设计模式(代码片段)

javascript设计模式读书笔记=;技巧型设计模式(代码片段)

javascript设计模式读书笔记=;架构型设计模式，mvc，mvp，mvvm

《javascript模式》读书笔记

《JavaScript模式》读书笔记前言：　　模式是针对普遍问题的解决方案。更进一步地说，模式是解决一类特定问题的模版。第一章：简介　　在软件开发过程中，模式是指一个通用问题的解决方案。一个模式不仅仅是一个可以用... 查看详情

《javascript高级程序设计》读书笔记

第一章JavaScript简介1.1JavaScript简史略1.2JavaScript实现虽然JavaScript和ECMAScript通常都被人们用来表达相同的含义，但JavaScript的含义却比ECMA-262中规定的要多得多。一个完整的JavaScript实现应该由下列三个不同的部分组成：?核心（ECMAScri... 查看详情

[读书笔记]javascript设计模式:单例模式

单例模式：保证一个类只有一个实例，并提供一个可以访问它的全局访问点。一种简单、方便的写法就是用一个变量来标识当前类是否已经创建过对象，如果有，则返回已经创建好的对象，否则创建一个新对象，并将其返回... 查看详情

javascript高级程序设计-读书笔记

第6章面向对象的程序设计创建对象1.最简单方式创建Object的实例，如varperson=newObject();person.name=“Greg”;person.age=27;person.job=”Doctor”;person.sayName=function(){ alert(this.name);};person.s 查看详情

javascript设计模式读书笔记=;技巧型设计模式(代码片段)

javascript高级程序设计-读书笔记

第11章DOM扩展1、选择符APISelectorAPILevel1的核心是两个方法：querySelector()和querySelectorAll()。在兼容的浏览器中，可以通过Document及Element类型的实例调用它们。目前完全支持SelectorAPILevel1的浏览器有IE8+、Firefox3.5+、Safari3.1+、Chrome和Oper... 查看详情

javascript高级程序设计-读书笔记

...型的值l 简单值：使用与JavaScript相同的语法，可以在JSON中表示字符串、数值、布尔值和null。但JSON不支持JavaScript中的特殊数值undefined。“Hellowor 查看详情

《javascript高级程序设计》读书笔记javascript简单介绍

第一章：javascript简单介绍 Netscape Navigator 开发的javascript Javascript的实现有三部分：1.核心（ECMAScript）:提供核心语言功能。2.文档对象模型（DOM）：提供訪问和操作网页内容的方法和接口。3.浏览器对象模... 查看详情

javascript模式读书笔记第4章函数

2014年11月10日1。JavaScript函数具有两个特点：函数是第一类对象函数能够提供作用域函数即对象，表现为： -1，函数能够在执行时动态创建，也能够在程序执行过程中创建。&nb... 查看详情

javascript模式读书笔记第4章函数

2014年11月10日1，JavaScript函数具有两个特点：函数是第一类对象函数能够提供作用域函数即对象，表现为： -1，函数能够在执行时动态创建，也能够在程序执行过程中创建。&nb... 查看详情

javascript高级程序设计-读书笔记

...表示浏览器的一个实例。在浏览器中，window对象既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。（2）窗口关系及... 查看详情

机电传动控制读书笔记四（未完待续）

对于停止过程，自己还没计算到准确的数字；对于下降过程还没调好转子电阻，使之达到600r/min。出现很多问题的原因有：计算能力不足；我开始准备通过能耗制动停止后，通过改变电源电压以及反接，使得我先前计算的值满足6... 查看详情

《javascript高级程序设计》读书笔记

由于ECMAScript中不存在块级作用域，因此在循环内部定义的变量也可以在外部访问到 //例如：varcount=10;for(vari=0;i<count;i++){alert(i);}alert(i);//10 for-in语句for-in语句是一种精准的迭代语句，可以用来枚举对象的属性。以下是for-... 查看详情

《javascript高级程序设计》读书笔记引用类型

第五章：引用类型Object类型创建object实例的两种方式：1.new方式var person = new Object();person.name = “haozk”;person.age = 24;2.对象字面量表示法var person = {name:”haozk”,age:2 查看详情