这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 Javascript oop 设计模式 面向对象编程简单实例介绍的相关资料, 这里附有实例代码帮助大家学习理解,需要的朋友可以参考下
Javascript oop 设计模式 面向对象编程
最初我们写 js 代码的时候是这么写
- function checkName(){
- //验证姓名
- }
- function checkEmail(){
- //验证邮箱
- }
- function checkPassword(){
- //验证密码
- }
这种方式会造成全局变量的严重污染,再过渡到
- var checkObject = {
- checkName : function(){};
- checkEmail: function(){};
- checkPassword: funcion(){};
- }
- //也可如此写
- var checkObject = {} // || function(){}
- checkObject.checkName = function(){};
- checkObject.checkEmail = function(){};
- checkObject.checkPassword = function(){};
- //以上这两种写法不能复制一份,也就是说在new 方法创建新的对象的时候,新对象不能继承这些方法
以上是直接使用,而不是新建对象复制一份的, 复制一份的话可以这么写
- var checkObject = function(){
- return {
- checkName:function(){},
- checkEmail:function(){},
- checkPassword:function(){}
- }
- }
- //使用的时候 可以
- var a = checkObject();
- a.checkName();
这么写可以实现对象的复制 但是这不符合面向对象,新创建的类和 checkObject 没有任何关系 于是我们可以采用构造函数的方式书写代码
- var checkObject = function(){
- this.checkName = function(){}
- this.checkEmail = function(){}
- this.checkPassword = function(){}
- }
- //像这样我们便可以用CheckObject 来创建新的对象了,通过new 来创建对象,创建出来的每个对象都会对this上的属性进行复制,但是这么做的话,每次都会有相对较大消耗,对于共有的方法,我们可以放在对象的原型上
- var checkObject = function(){};
- checkObject.prototype.checkName = function(){};
- //...
- //这样写要将prototype 书写很多遍 ,所以我们可以这么写,并实现链式调用,将this返回
- var checkObject = function(){};
- checkObject.prototype={
- checkName:function(){
- //验证姓名
- return this;
- },
- checkEmail:function(){
- //验证邮箱
- return this
- },
- checkPassword:function(){
- //验证密码
- return this;
- }
- }
- // 这两种方式不可混用,否则后边会覆盖前边,此时我们调用只需
- new checkObject().checkName().checkEmail().checkPassword();
下面再来介绍一下面向对象和面向过程两种编程方式 .page 10
多个 function 书写的方式是一种面向过程书写代码的实现方式,添加了很多全局变量而且不利于别人复用,在别人使用时你也不可修改,我们可以改用面向对象方式来重写,我们把需求抽成一个对象,这个对象称之为类,面向对象一个重要特点就是封装,将属性和方法封装在一个对象中,就像将物品放在一个旅行箱中,这样不管是使用和管理我们都方便,(虽然有时候感觉直接拿在外边摆放也很方便,但是东西一多便不利于管理)
- var Book = (function () {
- //静态私有变量
- var bookNum = 0;
- //静态私有方法
- function checkBook() {
- }
- //返回构造函数
- return function (newId, newName, newPrice) {
- //私有变量
- var name, price;
- //私有方法
- function checkId(id) {
- }
- //特权方法
- this.getPrice = function () {
- };
- this.getName = function () {
- };
- this.setName = function (name) {
- this.name = name
- };
- this.setPrice = function () {
- };
- //公有属性
- this.id = newId;
- //公有方法
- this.copy = function () {
- };
- bookNum++;
- if (bookNum > 100)
- throw new Error('oop javascript');
- //构造器 实例化过程中被调用的方法
- this.setName(name);
- this.setPrice(price);
- }
- })();
- Book.prototype = {
- //静态公有属性
- isJSBook: false,
- //静态公有方法
- display: function () {
- }
- };
- //对比Java 别被js 起的这些名字弄混了 其实Js 就模仿了一个New 其他的跟Java基本一样 类 全局变量 方法 有自己的理解比较好 以前未想明白
- // java 为什么那么些
// 为了看起来更像一个类 我们将原型上的方法 写到类里边
- var Book = (function () {
- //静态私有变量
- var bookNum = 0;
- //静态私有方法
- function checkBook() {
- }
- //返回构造函数
- function _Book(newId, newName, newPrice) {
- //私有变量
- var name, price;
- //私有方法
- function checkId(id) {
- }
- //特权方法
- this.getPrice = function () {
- };
- this.getName = function () {
- };
- this.setName = function (name) {
- this.name = name
- };
- this.setPrice = function () {
- };
- //公有属性
- this.id = newId;
- //公有方法
- this.copy = function () {
- };
- bookNum++;
- if (bookNum > 100)
- throw new Error('oop javascript');
- //构造器 实例化过程中被调用的方法
- this.setName(name);
- this.setPrice(price);
- }
- _Book.prototype = {
- //静态公有属性
- isJSBook: false,
- //静态公有方法
- display: function () {
- }
- };
- return _Book;
- })();
下面再介绍一种创建对象的安全模式
- //注意 执行new Book 方法之前 this.title 会先执行一次
- var Book = function (title) {
- if (this instanceof Book) {
- alert(1);
- this.title = title;
- }else{
- return new Book(title);
- }
- };
- var book = new Book('js');
- alert(book.title);
来源: http://www.phperz.com/article/17/0516/329623.html