javascript设计模式与开发实践
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//#第一章:面向对象的js
var duck = {
duckSinging: function () {
console.log("嘎嘎嘎");
}
};
var chick = {
duckSinging: function () {
console.log("嘎嘎嘎");
}
};
var choir = []; //合唱团
var joinChoir = function (animal) {
if (animal && typeof animal.duckSinging === "function") {
choir.push(animal);
console.log(animal + "已加入");
console.log(choir);
}
};
joinChoir(duck);
joinChoir(chick);
//1.2多态
var makeSound = function (animal) {
if (animal instanceof Duck) {
console.log("嘎嘎嘎");
} else if (animal instanceof Chicken) {
console.log("哥哥哥");
}
};
var Duck = function () {
};
var Chicken = function () {
};
makeSound(new Duck()); //嘎嘎嘎
makeSound(new Chicken()); // 哥哥额
//对象的多态
var makeSound1 = function (animal) {
animal.sound();
};
var Duck = function () {
};
Duck.prototype.sound = function () {
console.log('嘎嘎嘎');
};
var Chicken = function () {
};
Chicken.prototype.sound = function () {
console.log('咯咯咯');
};
makeSound1(new Duck()); //嘎嘎嘎
makeSound1(new Chicken()); // 哥哥额
var Dog = function () {
};
Dog.prototype.sound = function () {
console.log('汪汪汪');
};
makeSound1(new Dog()); // 哥哥额
//多态在设计模式中的作用
var googleMap = {
show: function () {
console.log("开始渲染谷歌地图1");
}
};
var baiduMap = {
show: function () {
console.log("开始渲染百度地图2");
}
};
var renderMap = function (type) {
if (type === "google") {
googleMap.show();
} else if (type === "baidu") {
baiduMap.show();
}
};
renderMap('google');
renderMap('baidu');
//优化后
var renderMap2 = function (map) {
map.show();
};
renderMap2(googleMap);
renderMap2(baiduMap);
var sosoMap = {
show: function () {
console.log('kais开始渲染搜搜地图')
}
};
renderMap2(sosoMap);
//1.3 封装
var myObject = (function () {
var __myname = 'sven'; //'私有变量'
return {
getName: function () { //公开方法(public)
return __myname;
}
}
})();
console.log(myObject.getName()); //'sven'
console.log(myObject.__myname); // undefined
//1.4 使用克隆的原型模式
var Plane = function(){
this.blood =100;
this.attacklevel =1;
this.defenselevel = 1;
};
var plane = new Plane();
plane.blood =500;
plane.attacklevel =7;
plane.defenselevel =10;
var clonePlane = Object.create(plane);
console.log(clonePlane);
//对象不支持Object.create方法的浏览器,
Object.create = Object.create || function(obj){
var F =function(){};
F.prototype = obj;
return new F();
};
//第十七章 适配器模式
var googleMap_17 = {
show: function () {
console.log("开始渲染谷歌地图1");
}
};
var baiduMap_17 = {
show: function () {
console.log("开始渲染百度地图2");
}
};
var renderMap_17 = function (map) {
if(map.show instanceof Function){ //判断是否有次方法
map.show();
}
};
renderMap_17(googleMap_17);
renderMap_17(googleMap_17);
//第三方借口没有指定方法(如果百度地图没有show方法)
var googleMap_17_2 = {
show: function () {
console.log("开始渲染谷歌地图17_2");
}
};
var baiduMap_17_2= {
display: function () {
console.log("开始渲染百度地图17_2");
}
};
// 增加适配器
var baiduMapAdapter={ ///adapter 适配器
show:function(){
return baiduMap_17_2.display();
}
};
var renderMap_17_2 = function (map) {
if(map.show instanceof Function){ //判断是否有次方法
map.show();
}
};
renderMap_17_2(googleMap_17_2);
renderMap_17_2(baiduMapAdapter);
//数据格式不统一
var getGuangdong =function(){
var guangdongCity =[
{
name:'shenzhen',
id:11
},
{
name:'guangdong',
id:12
}
];
return guangdongCity;
};
var Render_17_2= function(fn){
console.log('开始渲染广东省地图');
document.write(JSON.stringify(fn()));
};
Render_17_2(getGuangdong);
//新的数据格式为
var guangdongCity={
shenzhen:11,
guangzhou:12,
zhuhai:13
};
var getGuangdong_3 =function(){
var guangdongCity =[
{
name:'shenzhen',
id:11
},
{
name:'guangdong',
id:12
}
];
return guangdongCity;
};
var Render_17_3= function(fn){
console.log('开始渲染广东省地图17_3');
document.write(JSON.stringify(fn()));
};
var addressAdapter =function(oldAddressfn){
var address ={},oldAddress = oldAddressfn();
for(var i = 0,c;c=oldAddress[i++];){
address[c.name]= c.id;
}
return function(){
return address;
}
};
Render_17_3(addressAdapter(getGuangdong_3));
</script>
</body>
</html>