js面向对象编程体会

面向对象编程在现在的服务端应该是一种应用很广泛的编程思想,通过实例化对象调用属性或者方法,减少了代码的冗余量,结构也比较清晰。现在谈一谈我对前端js的面向对象编程的一些理解。

我们现在的做web应用,前端的业务处理几乎全是在js的基础上完成的,可能一个项目会包含很多开发人员编写的js文件包含进去,因为我们就要注意函数名的唯一性和全局变量的使用,防止自己写的函数或声明的变量会和其他同事编写的js文件发生冲突,产生意想不到的bug。解决方法有很多,比如写匿名函数,封装成插件等等。我这里想介绍的js面向对象编程,这虽然是js语言的一种编程模式,但是面向对象在一定程度上解决了不同js文件内函数和变量之间的冲突。

首先,介绍几个基本概念:

基本概念

ECMA关于对象的定义是:”无序属性的集合,其属性可以包含基本值、对象或者函数。“对象的每个属性或方法都有一个名字,而每个名字都映射到

一个值。

在现实生活中,相似的对象之间往往都有一些共同的组成特征。类,实际上是对象的设计蓝图或者制作配方。我们能基于相同的类创建出许多不同的

对象,这些对象又会含有各自的属性和方法。

封装

封装主要用于阐述对象中所包含(或封装的内容),它通常由两部分组成:

  1. 相关的数据(用于存储属性)

  2. 基于这些数据所能做的事(所能调用的方法)

实践1:对象定义及赋予对象属性
假设我们现在想要封装一个js的类,功能是可以把我通过类名选中的元素为它缓存一个数据,方便我以后调用,这个类名就叫cacheDom吧,从最基本的开始做。
第一步.对象的定义:
    var cacheDom = function(clsname){};
对象创建好之后,根据功能,在使用这个类时需要传入一个我们需要缓存数据的dom元素的类名,那么function里面的形参就需要一个类名的参数;
    var cacheDom = function(clsname){};
基础的对象声明好之后,接下来要定义一些类内部的变量了,首选,我们需要取得类名,然后通过类名筛选得到jquery或者dom对象,接着为得到的对象缓存数据;
第二步.定义属性值:
根据功能,属性值的定义主要说明了类中通用的一些数据,就本案例来说,cacheDom类中需要的属性有:1.选中的jquery或dom对象,这是根据类名获取到的;功能简单所以只有这一个属性,就写作obj
var cacheDom = function(clsname){
    this.obj = $( '.'+claname );//这样就是通过给定的类名取得jquery对象,dom对象的获取差别也不大,这里就用jquery语法继续了
};
第三步.定义类中的方法:
这个类的方法就是缓存数据了,这里将一个知识点,js中的function也是一种属性,在本实例中我们的方法是定义在cacheDom这个对象的属性中,给缓存方法起个名字,就叫做tocache
var cacheDom = function(clsname){
    this.obj = $( '.'+claname );//这样就是通过给定的类名取得jquery对象,dom对象的获取差别也不大,这里就用jquery语法继续了
};
cacheDom.prototype{//在这里定义方法,可以很好的避免冲突
    tocache:function(obj){//tochche方法的定义,函数体内具体实现
    }
};
第四步.方法的实现:
执行顺序,1.取得类名;2.通过类名取到对象;3.将对象传入函数中缓存数据,继续将缓存方法补充完整
var cacheDom = function(clsname){
    this.obj = $( '.'+claname );//这样就是通过给定的类名取得jquery对象,dom对象的获取差别也不大,这里就用jquery语法继续了
    this.tocache(this.obj);//在这里面的其实相当于一个构造函数,在初始化对象是就会先执行这里的语句,我们这里就是在初始化对象传入类名后执行缓存方法
};
cacheDom.prototype{//在这里定义方法,可以很好的避免冲突
    tocache:function(obj){//tochche方法的定义,函数体内具体实现
         $.data(obj.get(0),'data','123456');//$.data()是jquery为dom对象缓存数据的函数,其中第一个参数是dom对象,因为之前传递的是jquery对象,故转换为don对象
    }
};
第五步.类的实例化:
var cacheobj=new cacheDom('classname');//在外部为cacheDom类实例化一个cacheobj对象,同时传入类名,之后cacheDom类就会自动给指定对象缓存数据

你可能感兴趣的:(项目心得,jquery,javascript)