Javascript设计模式系列一

  定义类,方法赋值给prototype属性各种写法:

  方法一:

 1   <script type="text/javascript">
 2         ////定义Message类
 3         var Message = function () {
 4         }
 5         ////添加方法
 6         Message.prototype = {
 7             Display: function (msg) {
 8                 ///弹出
 9                 alert(msg);
10              }
11         };
12
13         ////实例化
14         var msg = new Message()
15         ////调用方法
16         msg.Display(‘Hello World!‘);
17     </script>

  方法二:

  <script type="text/javascript">
        ////定义Message类
        var Message = function () {
        }

        ////添加方法
        Message.prototype.Display = function (msg) {
            ///弹出
            alert(msg);
        }

        ////实例化
        var msg = new Message()
        ////调用方法
        msg.Display(‘Hello World!‘);
    </script>

  方法三:

   <script type="text/javascript">

        ////给Function对象添加一个方法用于声明方法
        Function.prototype.method = function (name, fn) {
            this.prototype[name] = fn;
        };

        ////定义Message类
        var Message = function () {
        }

        ////添加方法
        Message.method(‘Display‘, function (msg) {
            ///弹出
            alert(msg);
        });

        ////实例化
        var msg = new Message()
        ////调用方法
        msg.Display(‘Hello World!‘);
    </script>

  方法四:链式语法。

 <script type="text/javascript">

        ////给Function对象添加一个方法用于声明方法并且返回this值
        Function.prototype.method = function (name, fn) {
            this.prototype[name] = fn;
            return this;
        };

        ////定义Message类
        var Message = function () {
        }

        ////添加方法
        Message.method(‘Display‘, function (msg) {
            ///弹出
            alert(msg);
        }).method(‘Print‘, function (msg) {
            ///弹出
            alert(msg);
        });

        ////实例化
        var msg = new Message()
        ////调用方法
        msg.Display(‘Hello World!‘);
        msg.Print(‘Hello World!‘);
    </script>
时间: 2024-10-16 00:06:42

Javascript设计模式系列一的相关文章

Javascript设计模式系列三

继承,一个类或对象继承另一个类或对象的三种方法.类式继承.原型式继承.掺元类. 一.类式继承,原型链.Extend函数. <script type="text/javascript"> ////定义Person类 var Person = function (name) { this.name = name; }; Person.prototype.getName = function () { return this.name; }; ////原型链 function A

Javascript设计模式系列二

创建对象的基本模式,一.门户大开型,二.采用下划线来表示属性和方法的私用性,三.使用闭包来创建私用的成员. 一.门户大开型.只能提供公用成员.所有属性和方法都公开的.可访问的.这些共用属性都要使用this关键字来创建. <script type="text/javascript"> ////定义Dog对象 var Dog = function (name, age) { this.name = name; this.age = age; } Dog.prototype.Sa

javascript设计模式系列二-封装

JavaScript封装: var Book = function (id, name, price) { this.id = id, this.name = name, this.price = price } Book.prototype.display = function () { //展示书本 } var book = new Book(10, 'js', 30); book.display(); console.log(book.name); 问题:通过this和prototype添

15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码)

15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码) 前言 设计模式是一个程序员进阶高级的必备技巧,也是评判一个工程师工作经验和能力的试金石.设计模式是程序员多年工作经验的凝练和总结,能更大限度的优化代码以及对已有代码的合理重构.作为一名合格的前端工程师,学习设计模式是对自己工作经验的另一种方式的总结和反思,也是开发高质量,高可维护性,可扩展性代码的重要手段. 我们所熟知的金典的几大框架,比如jquery, react, vue内部也大量应用了设计模式, 比如观察

[js高手之路]设计模式系列课程-组合模式+寄生组合继承实战新闻列表

所谓组合模式,就是把一堆结构分解出来,组成在一起,现实中很多这样的例子,如: 1.肯德基套餐就是一种组合模式, 比如鸡腿堡套餐,一般是是由一个鸡腿堡,一包薯条,一杯可乐等组成的 2.组装的台式机同理,由主板,电源,内存条,显卡, 机箱,显示器,外设等组成的 把一个成型的产品组成部件,分成一个个独立的部件,这种方式可以做出很多灵活的产品,这就是组合模式的优势 比如:家用台式机电脑,要求配置比较低, 这个时候只需要主板+电源+内存条+机箱+显示器+外设就可以了,不需要配置独立显卡 鸡腿堡+鸡翅+紫薯

JavaScript设计模式 - 迭代器模式

迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示. 迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也可以按顺序访问其中的每个元素 许多浏览器都支持 Javascript 的 Array.prototype.forEach 迭代器可以分为 内部迭代器 和 外部迭代器 一.jQuery 中的迭代器 1 $.each( [1,2,3,4], function (i, n) { 2 console.log( "当

[js高手之路]设计模式系列课程-委托模式实战微博发布功能

在实际开发中,经常需要为Dom元素绑定事件,如果页面上有4个li元素,点击对应的li,弹出对应的li内容,怎么做呢?是不是很简单? 大多数人的做法都是:获取元素,绑定事件 1 <ul> 2 <li>跟着ghostwu学习javascript设计模式的应用1</li> 3 <li>跟着ghostwu学习javascript设计模式的应用2</li> 4 <li>跟着ghostwu学习javascript设计模式的应用3</li&g

javascript设计模式详解之命令模式

每种设计模式的出现都是为了弥补语言在某方面的不足,解决特定环境下的问题.思想是相通的.只不过不同的设计语言有其特定的实现.对javascript这种动态语言来说,弱类型的特性,与生俱来的多态性,导致某些设计模式不自觉的我们都在使用.只不过没有对应起来罢了.本文就力求以精简的语言去介绍下设计模式这个高大上的概念.相信会在看完某个设计模式之后有原来如此的感慨. 一.基本概念与使用场景: 基本概念: 将请求封装成对象,分离命令接受者和发起者之间的耦合. 命令执行之前在执行对象中传入接受者.主要目的相互

javascript设计模式

javascript设计模式 阅读目录 什么是设计模式 单体模式: 工厂模式: 单例模式 观察者模式(发布订阅模式) 策略模式 模板模式 代理模式 外观模式 设计模式太多了,貌似有23种,其实我们在平时的工作中没有必要特意去用什么样的设计模式,或者你在不经意间就已经用了设计模式当中的一种.本文旨在总结平时相对来说用的比较多的设计模式. 回到顶部 什么是设计模式 百度百科: 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结. 使用设计模式是