javascript设计模式与开发实践
1. js面向对象6种形式（详情）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
// 1. 基于object的对象
var person=new Object();
person.name='my name';
person.getName= function () {
return this.name+' is aa';
}
console.log("person.getName: "+person.getName());
//2.对象字面量方式
var person2={
name:'person2',
getName: function () {
return this.name+' is bb';
}
}
console.log("person2.getName: "+person2.getName());
//3.工厂模式
function createPerson3(name,age){
var o=new Object();
o.name=name;
o.age=age;
o.getName=function(){
return this.name+' is cc';
}
return o;//使用return返回生成的对象实例
}
var person3=createPerson3('person3',12);
console.log("person3.getName: "+person3.getName());
// 4.构造函数模式
function Person4(name,age){
this.name=name;
this.age=age;
this.getName= function () {
return this.name+" is dd";
}
}
var person4=new Person4('person4',22);
console.log("person4.getName: "+person4.getName());
//5 原型模式
function Person5(){ }
Person5.prototype.name='person5';
Person5.prototype.age=22;
Person5.prototype.getName= function () {
return this.name+" is ee";
}
var person5=new Person5();
console.log("person5.getName(): "+person5.getName());
// 6 组合构造函数及原型模式
function Person6(name,age){
this.name=name;
this.age=age;
}
Person6.prototype={
construct:Person6,//原型字面量方式会将对象的constructor变为Object，此外强制指回Person
getName: function () {
return this.name+" is ff";
}
}
var person6=new Person6('person6',22);
console.log("person6.getName(): "+person6.getName());
</script>
</body>
</html>
2.静态类型语言：编译时便已确定变量的类型 如 java: int a = 1;
动态类型语言：待变量被赋予某个值之后，才会具有某种类型 如 javascript : var a=1;
javascript面向接口编程: 一个对象如果有lenght属性，也可以依照下标来存取属性，那这个对象就可以被当作数组来使用。【鸭子类型】
3.多态
多态：给不同的对象发送同一消息，这些对象会根据这个消息分别给出不同的反馈。【主人向家禽发出“叫”的命令，鸡会“咯咯咯“，鸭会”嘎嘎嘎“】
把不变的部分隔离出来，把可变的部分封装起来
// 多态 把相同的隔离出来，动物都会叫，
// 把不同的封装起来，不同动物不同叫声。
var makeSound= function (animal) {
animal.sound();
}
var duck= function () {}
duck.prototype.sound= function () {
console.log("嘎嘎嘎: ");
}
var chicken= function () { }
chicken.prototype.sound=function(){
console.log("咯呼呼: ");
}
makeSound(new duck()); // ? 为什么要用new ?
makeSound(new chicken());
var dog= function () { }
dog.prototype.sound= function () {
console.log("旺旺旺: ");
}
makeSound(new dog());
console.log("typeof dog: "+typeof dog); // 这个简单点！
var cat={
sound: function () {
console.log("喵喵喵");
}
}
makeSound(cat); //=================== 多态简单版 google==============
var googleMap={
show: function () {
console.log("google : " );
}
}
var baiduMap={
show: function () {
console.log("baidu;");
}
}
var renderMap= function (type) {
type.show();
}
renderMap(googleMap);
renderMap(baiduMap);
4.js模拟封装 public private 、 object.create()
//js模拟封装 非必须 private public ES6 有更好的方式
var my=(function () {
var __name='aaa'; // private
return {
getName: function () {
return __name; // public
}
}
})();
console.log("my.getName(): "+my.getName());
console.log("my.__name: "+my.__name); // 直接警告出错了。。 // javascript 要得到一个对象,不是通过实例化类，而是找到一个对象作为原型并克隆它 Object.create() /* 兼容ie
Object.create=Object.create || function (obj) {
var F= function () {};
F.prototype=obj;
return new F();
}
*/
var Plane= function () {
this.blood=100;
}
console.log("typeof plane: "+typeof plane);
var plane=new Plane();
plane.blood=110;
var clonePlane=Object.create(plane); // 新飞机
console.log("clonePlane: "+clonePlane.blood);
var clonePlane2=Object.create(new Plane()); //老飞机
console.log("clonePlane2: "+clonePlane2.blood);
5.构造器创建对象效率比object.create()高 原型继承
// 常用原型继承
var obj={name:'aaa'};
var A= function () {}
A.prototype=obj;
var a=new A();
console.log("a.name: "+a.name); // 构造器创建对象 效率比 object.create()高，但构造器底层也是object.create()
// ES6有新的方式
function Person10(name){
this.name=name;
}
Person10.prototype.getName= function () {
return this.name;
}
var b=new Person10('xxx');
console.log("b.name: "+b.name);
6. js闭包、单例、函数作用域
// 【函数】内变量的作用域： 没加var为全局变量，加var为局部变量
// 函数里面可以访问到函数外面的变量, 函数外面无法访问到函数里面的变量
var func= function () {
var a=1;
console.log("a: "+a);
};
func();
// alert(a); // undefined //闭包，解决局部变量的问题，把一些不需要暴露在全局的变量封装成私有变量，防止被修改
//使用闭包封装私有变量
var user=(function () {
var __name='sven', __age=22; // 约定用 __ 表示私有
return{
getUserInfo: function () {
return __name + __age;
}
}
})();
console.log("user.__name: "+user.__name); // 访问不到
console.log("user.getUserInfo(): "+user.getUserInfo()); // 可以访问
// js中的单例
var test={}; // 独一无二，可全局访问 //为了减少全局变量，可使用对象字面量的方式
var namespace1={
a:function(){alert(1);},
b:function(){alert(2);}
} //怪异的写法，不懂。。。
var strategies={
"S": function (salary) {
return salary*4;
},
"A": function (salary) {
return salary*3;
},
"B": function (salary) {
return salary*2;
}
};
var calc= function (level, salary) {
return strategies[level](salary); // 真怪异
}
console.log("calc: "+calc('S',20000));
console.log("calc2: "+calc('A',10000));
7.闭包
//闭包，解决局部变量的问题，把一些不需要暴露在全局的变量封装成私有变量，防止被修改
//使用闭包封装私有变量
var user=(function () {
var __name='sven', __age=22; // 约定用 __ 表示私有
return{
getUserInfo: function () {
return __name + __age;
}
}
})();
console.log("user.__name: "+user.__name); // 访问不到
console.log("user.getUserInfo(): "+user.getUserInfo()); // 可以访问
console.log("typeof user: "+typeof user); /* 闭包 读取函数内部的变量，把变量的值始终保持在内存中*/
function f1(){
var n=999;
function f2(){
console.log(n);
}
return f2;
}
var res=f1();
res(); //网上经典闭包
//f1(); //闭包2
function f11(){
var test=111;
tmp_test= function () {
return test;
}
}
function f2(){
console.log("测试一： "+tmp_test());
var test1=tmp_test();
console.log("测试二： "+test1);
}
f11();
f2(); //闭包作用1： 使用闭包代替全局变量
// 全局变量 stu1
var stu1='aa';
function st1(){
console.log("stu11: "+stu1);
}
st1();
console.log("stu1: "+stu1); //使用闭包 ,这种简单。。。。。。。
(function () {
var stu2='bb';
function st2(){
console.log("stu2: "+stu2);
}
function a(){
console.log("闭包stu2: "+stu2);
}
st2();
a();
})();
console.log("undefined stu2: "+stu2);
javascript设计模式与开发实践的更多相关文章
- 《JavaScript设计模式与开发实践》整理
最近在研读一本书<JavaScript设计模式与开发实践>,进阶用的. 一.高阶函数 高阶函数是指至少满足下列条件之一的函数. 1. 函数可以作为参数被传递. 2. 函数可以作为返回值输出 ...
- JavaScript设计模式与开发实践 - 观察者模式
概述 观察者模式又叫发布 - 订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个目标对象(为了方便理解,以下将观察者对象叫做订阅者,将目标对象叫做 ...
- JavaScript设计模式与开发实践 - 策略模式
引言 本文摘自<JavaScript设计模式与开发实践> 在现实中,很多时候也有多种途径到达同一个目的地.比如我们要去某个地方旅游,可以根据具体的实际情况来选择出行的线路. 如果没有时间但 ...
- JavaScript设计模式与开发实践 - 单例模式
引言 本文摘自<JavaScript设计模式与开发实践> 在传统开发工程师眼里,单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返 ...
- 《javascript设计模式与开发实践》--- （单一职责原则）
看的这本书叫<JavaScript设计模式与开发实践> 先规划一下看书的顺序,基础知识我已经大概的浏览了一遍了,没有留下笔记,以后有时间还会补上.本来打算顺着看的.但是我感觉我很难短时间内 ...
- JavaScript设计模式与开发实践——读书笔记1.高阶函数(上)
说来惭愧,4个多月未更新了.4月份以后就开始忙起来了,论文.毕设.毕业旅行等七七八八的事情占据了很多时间,毕业之后开始忙碌的工作,这期间一直想写博客,但是一直没能静下心写.这段时间在看<Java ...
- 《JavaScript设计模式与开发实践》读书笔记-基础知识
笔记内容多摘录自<JavaScript设计模式与开发实践>(曾探著),侵删. 面向对象的JavaScript 1. 动态需要类型和鸭子类型 鸭子类型 如果它走起路来像鸭子,叫起来也是鸭子, ...
- 《Javascript设计模式与开发实践》--读书笔记
第2章 this call apply bind()方法创建一个新的函数,在bind()被调用时,这个新函数的this被bind的第一个参数指定,其余的参数将作为新函数的参数供调用时使用. bind( ...
- JavaScript设计模式与开发实践——JavaScript的多态
“多态”一词源于希腊文polymorphism,拆开来看是poly(复数)+ morph(形态)+ ism,从字面上我们可以理解为复数形态. 多态的实际含义是:同一操作作用于不同的对象上面,可以产生不 ...
- 《JavaScript设计模式与开发实践》知识点笔记
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC" } p.p2 { margin: 0.0px ...
随机推荐
- Hibernate连接数据库超时设置autoReconnect=true
如果连接闲置8小时 (8小时内没有进行数据库操作), mysql就会自动断开连接, 要重启tomcat. 不用hibernate的话, connection url加参数: autoReconnect ...
- 公司VPN信息
公司VPN证书信息(请妥善留档本邮件) 管理 管理员 <admin@pansoft.com> 2016/12/12 11:00 收件人: huhuan@pansoft.com × ...
- R语言读取本地文件注意事项
R里面应该用/,而不是\ ,或者用两个\\ R区分大小写,所以应该用C:,而不是c:
- Html中行内样式的设置
Html中行内样式的设置.. <html> <head> <title>显示的页面选项卡标题</title> <style type=" ...
- margin和padding的区别
目前web2.0已经越来被人们认可,因为喜欢搞web开发的人员不得不硬着头皮去学习web2.0的标准,其中很重要的一条就是新的布局规则,div+css.以前基本上是用table布局的,这种传统的方式简 ...
- Python学习笔记——迭代器（RandSeq和AnyIter）
1.RandSeq #coding:utf-8 #!/usr/bin/env python 'randSeq.py -- 迭代' #从random模块里仅仅导入choice方法 from random ...
- IO
文件过滤 http://codego.net/9245/ C# 文件处理 http://wenku.baidu.com/link?url=yXKiIA_OZYR4MIynDgz-qhOnfJoCyOQ ...
- ueditor 百度编辑器，取消或自定义右键菜单
如图:有2种自定义方法,一种是改源码,一种是初始化 初始化,如下代码: var ue = UE.getEditor('XXXid',{ // contextMenu:[ {label:'', cmdN ...
- getCanonicalName和getSimpleName getName的区别与应用
接口: package com.test; public interface Fruit { } 一个实现类: package com.test; public class Apple impleme ...
- CF451E Devu and Flowers （隔板法 容斥原理 Lucas定理 求逆元）
Codeforces Round #258 (Div. 2) Devu and Flowers E. Devu and Flowers time limit per test 4 seconds me ...