`
qyzone
  • 浏览: 6076 次
社区版块
存档分类
最新评论

了解JavaScript设计模式需要掌握的必要知识

阅读更多
作者: hezi


了解JavaScript设计模式需要掌握的必要知识:
1 闭包
  闭包最常用的方式就是返回一个内联函数(何为内联函数?就是在函数内部声明的函数);
  在JavaScript中有作用域和执行环境的问题,在函数内部的变量在函数外部是无法访问的,在函数内部却可以得到全局变量。由于种种原因,我们有时候需要得到函数内部的变量,可是用常规方法是得不到的,这时我们就可以创建一个闭包,用来在外部访问这个变量。
  闭包的用途 主要就是上一点提到的读取函数内部变量,还有一个作用就是可以使这些变量一直保存在内存中。
  使用闭包要注意,由于变量被保存在内存中,所以会对内存造成消耗,所以不能滥用闭包。解决方法是 在退出函数之前,将不使用的局部变量全部删除。举例如下:
  function f(){
     var i = 999;
     function f1(){
      alert(i+=1);
      }
      return f1;
  }
  var result = f();
    result(); // 1000
    result(); // 1001
    result(); // 1002
2 封装:
  
   通过将一个方法或者属性声明为私用的,可以让对象的实现细节对其他对象保密以降低对象之间的耦合程度,可以保持数据的完整性并对其修改方式加以约束,这样可以是代码更可靠,更易于调试。封装是面向对象的设计的基石。
    尽管JavaScript是一门面向对象的语言,可它并不具备将成员声明为公用或私用的任何内部机制,所以我们只能自己想办法实现这种特性。下面还是通过一套完整的代码去分析,介绍什么是私有属性和方法,什么是特权属性和方法,什么是公有属性和方法,什么是公有静态属性和方法。举例:
  
  3  私有属性和方法:
   函数有作用域,在函数内用var 关键字声明的变量在外部无法访问,私有属性和方法本质就是你希望在对象外部无法访问的变量。
  
  
  4 特权属性和方法:

   创建属性和方法时使用的this关键字,因为这些方法定义在构造器的作用域中,所以它们可以访问到私有属性和方法;只有那些需要直接访问私有成员的方法才应该被设计为特权方法。
  
  
   5  共有属性和方法:
  直接链在prototype上的属性和方法,不可以访问构造器内的私有成员,可以访问特权成员,子类会继承所有的共有方法。
  
   6 共有静态属性和方法:
  最好的理解方式就是把它想象成一个命名空间,实际上相当于把构造器作为命名空间来使用。
     /* -- 封装 -- */
     var _packaging =function(){
     //私有属性和方法
     var name ='Darren';
     var method1 =function(){
      //...
     }
     //特权属性和方法
     this.title ='JavaScript Design Patterns' ;
     this.getName =function(){
      return name;
     }
     }
     //共有静态属性和方法
    _packaging._name ='Darren code';
     _packaging.alertName =function(){
     alert(_packaging._name);
     }
     //共有属性和方法
     _packaging.prototype = {
     init:function(){
     //...
     }
    }
  7 继承 :分为类式继承和原型式继承 。
  /* -- 类式继承 -- */
   2   //先声明一个超类
   3   function Person(name){
   4     this.name = name;
   5   }
   6   //给这个超类的原型对象上添加方法 getName
   7   Person.prototype.getName =function(){
   8   returnthis.name;
   9   }
  10   //实例化这个超类
  11   var a =new Person('Darren1')
  12   alert(a.getName());
  13   //再声明类
  14   function Programmer(name,sex){
  15   //这个类中要调用超类Person的构造函数,并将参数name传给它
  16   Person.call(this,name);
  17   this.sex = sex;
  18   }
  19   //这个子类的原型对象等于超类的实例
  20   Programmer.prototype =new Person();
  21   //因为子类的原型对象等于超类的实例,所以prototype.constructor这个方法也等于超类构造函数,你可以自己测试一下,如果没这一步,alert(Programmer.prototype.constructor),这个是Person超类的引用,所以要从新赋值为自己本身
  22   Programmer.prototype.constructor = Programmer;
  23   //子类本身添加了getSex 方法
  24   Programmer.prototype.getSex =function(){
  25   returnthis.sex;
  26   }
  27   //实例化这个子类
  28   var _m =new Programmer('Darren2','male');
  29   //自身的方法
  30   alert(_m.getSex());
  31   //继承超类的方法
  32   alert(_m.getName());
  
  
   /* -- 原型式继承 -- */
   2   //clone()函数用来创建新的类Person对象
   3   var clone =function(obj){
   4 var _f =function(){};
   5   //这句是原型式继承最核心的地方,函数的原型对象为对象字面量
   6   _f.prototype = obj;
   7   returnnew _f;
   8   }
   9   //先声明一个对象字面量
  10   var Person = {
  11   name:'Darren',
  12   getName:function(){
  13   returnthis.name;
  14   }
  15   }
  16   //不需要定义一个Person的子类,只要执行一次克隆即可
  17   var Programmer = clone(Person);
  18   //可以直接获得Person提供的默认值,也可以添加或者修改属性和方法
  19   alert(Programmer.getName())
  20   Programmer.name ='Darren2'
  21   alert(Programmer.getName())
  22
  23   //声明子类,执行一次克隆即可
  24   var Someone = clone(Programmer);
分享到:
评论

相关推荐

    Javascript 设计模式 很经典 第一本

    ### JavaScript设计模式经典知识点概述 #### 一、书籍简介与背景 《Pro JavaScript Design Patterns》是一本关于JavaScript设计模式的经典著作,由Ross Harmes和Dustin Diaz共同编写,并于2008年出版。该书深入浅出...

    javascript 设计模式.docx

    ### JavaScript设计模式详解 #### 一、引言 在软件工程领域,设计模式是指针对某一类问题的最佳实践或解决方案的总结。对于JavaScript开发者而言,掌握常见的设计模式不仅可以提高编程效率,还能增强代码的可维护...

    JavaScript网页设计300例

    - 虽然《JavaScript网页设计300例》可能主要关注原生JavaScript,但了解React、Vue或Angular等流行前端框架的基本概念和应用也是必要的,这些框架极大地提高了开发效率和代码质量。 通过本书的300个实例,读者可以...

    前端JavaScript需要掌握的技能列表

    以上就是从前端JavaScript需要掌握的技能列表中提取的关键知识点。这些技能不仅限于JavaScript本身,还包括了与前端开发相关的其他技术和工具。掌握这些技能将有助于提升作为一名前端开发者的专业能力和竞争力。

    全站开发javascript

    JavaScript是一种广泛应用于网络开发中的编程语言,它...全栈开发工程师需要熟练掌握JavaScript,并且了解前后端的开发技术。通过这个全栈教程,初学者可以逐步深入理解JavaScript,最终成为一名合格的全栈开发工程师。

    毕业设计-基于JavaScript与CSS的电商系统项目实现

    9. **JSON与API通信**:电商系统通常需要与后端服务器进行数据交换,JSON是常用的数据交换格式,而理解如何使用JavaScript的XMLHttpRequest或fetch API进行API调用是必要的。 10. **错误处理与调试**:开发过程中,...

    应届生找Java开发岗最少需要掌握哪些知识.rar

    此外,MVC设计模式和Spring框架的应用也是必备知识,Spring的IoC(Inversion of Control)和AOP(Aspect Oriented Programming)特性能够简化企业级开发。 数据库知识不可忽视,至少需要掌握一种关系型数据库,如...

    JavaScript 脚本程序设计

    总之,《JavaScript脚本程序设计》教程全面覆盖了JavaScript的基本知识,是初学者进入JavaScript世界的理想起点。通过深入学习和实践,你将能够熟练掌握这门语言,为构建交互丰富的Web应用打下坚实基础。

    pro javascript design patterns

    《Pro JavaScript设计模式》是一本深入探讨JavaScript设计模式的专业书籍,由Ross Harmes和Dustin Diaz共同撰写。这本书旨在帮助开发者理解和应用各种设计模式来优化和改进他们的JavaScript代码,提高代码的可读性、...

    SMmuiscPlay极简模式JavaScript音乐播放器

    此外,了解JavaScript和HTML5音频API的基础知识是必要的。 在实际应用中,SMmuiscPlay可以用于个人博客、在线音乐平台、企业网站等多种场景,为用户提供便捷的音频体验。 总之,SMmuiscPlay是一个以JavaScript为...

    js设计模式简述

    本文旨在为初学者提供一个简单的入门指南,通过解析几种常见的JavaScript设计模式,帮助读者理解和掌握其核心概念。 #### 二、基础知识概述 在深入探讨各种设计模式之前,有必要先回顾一下几个重要的JavaScript...

    [JavaScript入门]Eloquent JavaScript(2nd)

    了解保留字和关键字对于编程也是很有必要的,因为它们有特殊的意义,不能作为变量名或其他标识符。 函数是编程的核心概念之一,它允许我们将代码块封装起来,使代码更易于管理和复用。在JavaScript中,函数可以被...

    初学web开发需要掌握哪些知识.docx

    初学者进入Web开发领域需要掌握一系列基础知识和技术,以下是一份详细的指南: 首先,要学习HTML(超文本标记语言)。HTML是构建网页的基础,用于定义网页的结构和内容。理解基本的HTML标签,如段落(`<p>`)、标题...

    jquery之父写的javascript

    - **设计模式应用**:书中还探讨了如何将面向对象的设计模式应用于JavaScript编程中,包括工厂模式、单例模式等,以此提高代码的复用性和可维护性。 - **性能优化技巧**:针对JavaScript运行时可能会遇到的性能...

    cat-clicker:在Udacity.com学习JavaScript设计模式课程时创建的项目

    该项目名为“猫点击器”,源于Udacity.com上的一门JavaScript设计模式课程。在这个项目中,学生将运用JavaScript语言和设计模式来开发一个简单的应用程序,模拟用户点击猫的图片,每次点击后记录点击次数。这个项目...

    ajax设计模式与最佳实践

    总之,“Ajax设计模式与最佳实践”是Web开发者不可或缺的参考资料,它不仅提供了深入的技术细节,还强调了如何将理论知识转化为实际应用中的高效解决方案。无论你是初学者还是经验丰富的开发者,都能从中受益匪浅,...

    前端面试知识点梳理

    - 一个完整的前端知识图谱应当包含JavaScript、框架技术、构建工具、网络协议、设计模式等多个方面。 - 对于JavaScript语言本身,ES6及更高版本的特性,如let、const、解构赋值、箭头函数等,都是面试官常问的知识...

    javascript

    25. **设计模式**:探索常用的JavaScript设计模式,如单例模式、工厂模式、观察者模式等。 26. **框架与库**:介绍流行JavaScript框架(如jQuery、React等)的基本使用方法及优势。 27. **性能优化**:提供关于...

    CRMEB1.7.4知识付费源码,挺好用的,功能齐全,没有Bug,用来学习挺好的,功能相当强大

    知识付费是一种在线商业模式,它允许内容创作者通过售卖他们的专业知识或经验来获得收入。在这个数字化时代,知识付费源码成为搭建此类平台的关键技术组件。CRMEB1.7.4是一款专为此目的设计的源码,它提供了一套完整...

    软件知识大赛试卷

    3. **操作系统原理**:部分题目的答案可能涉及操作系统概念,如进程管理、内存管理、文件系统等,这些都是软件开发人员需要掌握的基本知识。 4. **计算机网络**:"D"可能与TCP/IP协议、网络层次模型、网络安全等...

Global site tag (gtag.js) - Google Analytics