《基于MVC的JavaScript Web富应用开发》读书笔记一:MVC和类

简介:

  Create Class:

var Class = function(parent){
    var klass = function(){
        this.init.apply(this, arguments);
    };

    if(parent) {
        var subclass = function(){};
        subclass.prototype = parent.prototype;
        klass.prototype = new subclass;
    }

    klass.prototype.init = function(){};
    klass.fn = klass.prototype;
    klass.fn.parent = klass;

    klass.proxy = function(func){
        var self = this;
        return (function(){
            func.apply(self, arguments);
        });
    };

    klass.fn.proxy = klass.proxy;

    klass.extend = function(obj){
        var extended = obj.extended;
        for(var i in obj){
            klass[i] = obj[i];
        }
        if (extended) extended(klass)
    };

    klass.include = function(obj){
        var included = obj.included;
        for(var i in obj){
            klass.fn[i] = obj[i];
        }
        if (included) included(klass)
    };

    return klass;
};

  Demo:

var Person = new Class;
Person.include({
    init: function(name, age){
        this.name = name;
        this.age = Person.checkAge(age) ? age : null;
    },
    sayHello: function(){
        console.log("Hi , My name is " + this.name + (this.age ? ", i am " + this.age + " years old this year" : ""));
    }
});

Person.extend({
    needWater: true,
    checkAge: function(age){
        return age>0 && age < 150;
    }
});

var jim = new Person("Jim", 10);
jim.sayHello();
//output:Hi , My name is Jim, i am 10 years old this year

var tom = new Person("Tom", -1);
tom.sayHello();
//output:Hi , My name is Tom

  extend中是静态属性和方法,include中是实例属性和方法。

  当属性和方法与具体实例无关或是公用的时候,用静态属性和方法,否则用实例属性和方法。





本文转自Artwl博客园博客,原文链接:http://www.cnblogs.com/artwl/,如需转载请自行联系原作者

相关文章
|
6月前
|
前端开发 JavaScript 区块链
连接区块链节点的 JavaScript 库 web3.js
连接区块链节点的 JavaScript 库 web3.js
|
3月前
|
前端开发 JavaScript 开发者
【Web 前端】彻底告别“this”指向困扰:从零开始掌握 JavaScript 中“this”的奥秘
【8月更文挑战第23天】在 JavaScript 中,`this` 关键字的指向是根据其调用上下文动态确定的,这对于 Web 前端开发者而言是一项核心技能。本文通过多个示例解释了 `this` 的指向规则:在对象方法中指向该对象,在独立函数中指向全局对象或 `undefined`,在事件处理器中指向触发事件的 DOM 元素,在构造函数中指向新创建的对象。此外,还介绍了一些技巧,如使用箭头函数、`bind` 方法以及在事件处理器中显式保存 `this` 的引用,以帮助开发者更好地理解和控制 `this` 的指向。
47 1
|
3月前
|
前端开发 JavaScript 安全
|
3月前
|
前端开发 JavaScript
MVC中简单数据模型(M): Model类
MVC中简单数据模型(M): Model类
|
3月前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
61 0
|
3月前
|
JavaScript 前端开发 测试技术
Web中的JavaScript
Web中的JavaScript
|
4月前
|
缓存 JavaScript 前端开发
JavaScript进阶 - Web Workers与Service Worker
【7月更文挑战第4天】JavaScript的Web Workers和Service Worker增强了Web性能。Web Workers处理后台多线程,减轻主线程负担,但通信有开销,受同源策略限制。Service Worker则用于离线缓存和推送通知,需管理其生命周期、更新策略,并确保安全。两者都带来了挑战,但也极大提升了用户体验。通过理解和优化,开发者能构建更高效、安全的Web应用。
122 2
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(22)--- 简化main.js处理代码,抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中
循序渐进VUE+Element 前端应用开发(22)--- 简化main.js处理代码,抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中
|
4月前
|
开发框架 JSON 前端开发
循序渐进VUE+Element 前端应用开发(7)--- 介绍一些常规的JS处理函数
循序渐进VUE+Element 前端应用开发(7)--- 介绍一些常规的JS处理函数
|
4月前
|
缓存 前端开发 JavaScript
JavaScript进阶 - Web Workers与Service Worker
【7月更文挑战第10天】在Web开发中,Web Workers和Service Worker提升性能。Workers运行后台任务,防止界面冻结。Web Workers处理计算密集型任务,Service Worker则缓存资源实现离线支持。常见问题包括通信故障、资源限制、注册错误及缓存更新。通过示例代码展示了两者用法,并强调生命周期管理和错误处理的重要性。善用这些技术,可构建高性能的Web应用。
81 0

热门文章

最新文章