1、Factory基本写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单工厂模式之一个对象有时候可以代替许多类</title>
    <script type="text/javascript">
    //简单工厂模式之一个对象有时候可以代替许多类
    //工厂模式
    function createBook(name,time,type){
        //封装一个对象，并对该对象拓展其属性和方法
        var o = new Object();
        //var o = {};
        o.name = name;
        o.time = time;
        o.type = type;
        o.getName = function(){
            console.log(this.name);//this指向当前对象o
        }
        return o;//将对象o返回出去
    }
    //测试用例
    var jsbook = createBook('js book',2015,'js');
    var cssbook = createBook('css book',2014,'css');
    jsbook.getName();
    cssbook.getName();
    //本例已经通过验证
    </script>
</head>
<body>
    
</body>
</html>

2、Factory差异性写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单工厂模式之差异化写法——三种弹窗效果封装</title>
    <script type="text/javascript">
    //简单工厂模式之差异化写法——三种弹窗效果封装
    //工厂模式
    function createPop(type,text){
        //封装一个对象，并对该对象拓展其属性和方法
        var o = {};
        o.text = text;
        o.show = function(){
            console.log(this.text);//this指向当前对象o
            //show显示方法代码
        }
        if(type == 'alert'){
            alert(o.text);
        }else if(type == 'prompt'){
            prompt('提示',o.text);
        }else if(type == 'confirm'){
            confirm(o.text);
        }
        return o;//将对象o返回出去
    }
    //测试用例
    var userNameTip = createPop('confirm','用户名只能是12位以内字母下划线和数字组成');//创建即弹出
    userNameTip.show();
    //本例已经通过验证
    </script>
</head>
<body>
    
</body>
</html>

js原生设计模式——3简单工厂模式\简单工厂模式封装简单对象的更多相关文章

  1. js原生设计模式——3简单工厂模式\js面向对象编程实例

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  2. js原生设计模式——4安全的工厂方法模式之Factory方法模式

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  3. js原生设计模式——4安全的工厂方法模式之oop编程增强版

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  4. js原生设计模式——13桥接模式(相同业务逻辑抽象化处理的职责链模式)

    桥接模式之多元化类之间的实例化调用实例 <!DOCTYPE html><html lang="en"><head>    <meta ch ...

  5. js原生设计模式——12装饰者模式

    1.面向对象模式装饰者 <!DOCTYPE html><html lang="en"><head>    <meta charset=&q ...

  6. js原生设计模式——9外观模式封装

    1.事件处理程序兼容性封装 <!DOCTYPE html><html lang="en"><head>    <meta charset= ...

  7. js原生设计模式——7原型模式之真正的原型模式——对象复制封装

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  8. js原生设计模式——9外观模式封装2(小型代码库YJ)

    <script type="text/javascript">    //小型代码库YJ封装    var YJ = {        //根据id获取元素       ...

  9. js原生设计模式——7原型模式之new+call(this)组合应用再探讨实例

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

随机推荐

  1. eclipse中创建NDK和JNI开发环境最简单配置方法

    一.使用环境 1.windows64位操作系统 2.ADT为adt-bundle-windows-x86_64-20130917 3.NDK为android-ndk-r9b 二.配置生成头文件.h ⒈ ...

  2. Linux 添加Nginx 到 service 启动

    第一步: 编写nginx文件,放入/etc/init.d/ nginx文件内容如下,粉红色部分为自己实际nginx安装的路径. #!/bin/bash # nginx Startup script f ...

  3. python之requests模块

    1.安装 pip install requests 2.基本用法 就是以某种HTTP方法向远端服务器发送一个请求而已 import requests r = requests.get('https:/ ...

  4. DHCP配置部分

    1.DHCP工作过程 dhcp discover \\客户端请求服务器器提供地址 dhcp offer \\服务器提供ip地址 dhcp request \\客户端租用ip地址 dhcp ack \\ ...

  5. CSS实现三角形方法一--rotate+relative

    方法说明:两个正方形,一个小的,一个大的,将大的正方向进行旋转,然后移动到小的正方形的合适位置,覆盖小正方形的一部分,使小正方形剩余部分为三角形,再把大正方形的背景色改为浏览器窗口的颜色. 用到知识: ...

  6. Java 之final，static小结

    一.final 1.final变量: 当你在类中定义变量时,在其前面加上final关键字,那便是说,这个变量一旦被初始化便不可改变,这里不可改变的意思对基本类型来说是其值不可变,而对于对象变量来说其引 ...

  7. 18、手把手教你Extjs5（十八）模块记录的拖放删除、拖放复制新增

    网页当中的拖放(drag-drop)是比较有趣的操作,extjs5中很好的封装了拖放的动作,也有各种类来支持,但是要学好“拖放”这个东西真是很难,特别是象我这样英语不好的人,看不太懂官网上的说明,做一 ...

  8. webform中 ajax调用后台方法(非webservice)

    方法一:通过创建一个没有内容的窗体 后台: public partial class Ajax_ShoppingCart : System.Web.UI.Page { bookdbDataContex ...

  9. UISwitch——开关控件

    开关的可配置选项很少,一般用于处理布尔值. 下面给出一个小Demo,创建两个开关,开关一可以控制开关二的可用与否,两者的关系就相当于水闸与水龙头的关系. #import "ViewContr ...

  10. 我推荐的一些iOS开发书单

    文/叶孤城___(简书作者)原文链接:http://www.jianshu.com/p/2fa080673842著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 上次发了一下比较不错的i ...