2019独角兽企业重金招聘Python工程师标准>>>

前言: javascript 项目中原生态的语法用得比较少了,都是基于jQuery开发,但在移动项目中还是比较麻烦的。想整理个简单点的框架。这篇文章是基于 javascript dom 高级程序设计这本书来讨论的,这本书在框架开发方面还是比较好的。javascript 框架能够便于利用,最好能像C# Java 这类面向对象语言来组织代码和复用功能模块,因此这里说说javascript面向对象的一些开发方式。例如命名空间,对象,对象的继承等等。

1. 命名空间

一般用到命名空间,主要是为了便于程序的组织,分模块;同时可以解决大量javascript代码带来的潜在的javascript对象冲突。当然,这里并不是一种真正的命名空间,其实质还是js对象。例如:

(function () {//命名空间if (!window.TScript) { window['TScript'] = {} }function $() {var elements = new Array();for (var i = 0; i <= arguments.length; i++) {var element = arguments[i];if (typeof element == 'string') {element = document.getElementById(element);}if (arguments.length == 1) {return element;}elements.push(element);}return elements;};window['TScript']['$'] = $;
)();

访问的时候就可以直接使用 TScript.$('id')。获取javascript对象了,这样TScript实际上就是一个命名空间。但是是否会觉得 TScript.$ 这样每次都加个TScript太罗嗦,可以这样:

(function($){// $("id")
})(TScript.$);

这样通过立即执行函数来简化操作,就像通常开发jQuery 插件一样,(function($){ //采用jQuery对象 })(jQuery);

这里在网上收集到两种命名空间的方式,实际上是构建一个函数,来注册命名空间可以复用,比较方便。

1. YUI的。

//YUI命名空间的实现方法
var YAHOO = window.YAHOO || {};
YAHOO.namespace = function(ns) {if (!ns || !ns.length) {return null;}var levels = ns.split(".");var nsobj = YAHOO;//如果申请的命名空间是在YAHOO下的,则必须忽略它,否则就成了YAHOO.YAHOO了for (var i=(levels[0] == "YAHOO") ? 1 : 0; i<levels.length; ++i) {//如果当前命名空间下不存在,则新建一个关联数组。nsobj[levels[i]] = nsobj[levels[i]] || {};nsobj = nsobj[levels[i]];}//返回所申请命名空间的一个引用;return nsobj;
};

2. 不知名的。主要是可以做成com.oschina.* 这种java包风格的。

Namespace = new Object();Namespace.register = function (namespace) {var nsArray = namespace.split('.');var sEval = "";var sNs = "";for (var i = 0; i < nsArray.length; i++) {if (i != 0) {sNs += ".";}sNs += nsArray[i];sEval += "if(typeof(" + sNs + ")=='undefined')" + sNs + "=new Object();";}if (sEval != "") {eval(sEval);}};

2.对象及继承

前面提到javascript里的一切都是对象,其实这里说对象是构建一个类似java 的构造函数:

function Apple(color) {this.color = color;
}
var apple = new Apple("red");

这里总结一下比较常用的对象继承方式,在js里说继承主要是共用一些数据,减少内存。通常采用原型来实现propertype。例如:

function Fruit() { }Fruit.prototype.des = "水果";function Apple(area) {this.area = area;}var F = function () { }; //这里采用空对象做中介,实现继承F.prototype = Fruit.prototype;Apple.prototype = new F();Apple.prototype.constructor=Apple

这里为什么用空对象做中介,因为如果直接Apple.prototype=Fruit.prototype。这样它们共用的是同一份数据,如果对Apple.prototype的修改会反映到Fruit上去。

YUI做了一个封装,类似命名空间一样:

function extend(Child, Parent) {var F = function () { };F.prototype = Parent.prototype;Child.prototype = new F();Child.prototype.constructor = Child;Child.uber = Parent.prototype; //上级父对象的引用
}

还有一种jquery的拷贝赋值的方式继承:

//jquery 拷贝继承,将父对象的所有属性拷贝赋值给子对象function deepCopy(p, c) {var c = c || {};for (var i in p) {if (typeof p[i] === 'object') {//针对属性是对象的需要递归拷贝属性,深拷贝c[i] = (p[i].constructor === Array) ? [] : {};deepCopy(p[i], c[i]);} else {c[i] = p[i];}}return c;}var Apple = deepCopy(Fruit);

3. 关于this

可以一句话来说明下:this关键字引用的是包含它的函数作为某个对象的方法被调用时的那个对象。

我们知道在js脚本里面,所有的成员,包括变量,函数都是windows是对象的成员。那么在下面的例子中:

value = "window";function testThis() {this.value = "testThis";}testThis();alert(value);// testThis;

这里函数直接调用,那么调用函数的对象是window ,因此函数内的this指的是window。

那么下面:

value = "window";function testThis() {this.value = "testThis";}var obj = new testThis();alert(obj.value);//testThisalert(value);//window

第一次弹出的是testThis,这是由于此时testThis函数作为对象来访问,那么函数内的this就表示实例化的这个obj对象,详相当于在函数内部将value覆盖了。而函数外部的value没有影响,仍然作为window的成员,所以第二次弹出window。

转载于:https://my.oschina.net/congqian/blog/135831

javascript里的面向对象相关推荐

  1. javascript笔记:深入分析javascript里对象的创建(上)续篇

    今天回来一看我的博客居然有这么多人推荐真是开心极了,看来大家对我的研究有了认可,写博客的动力越来越大了,而且我发现写javascript在博客园里比较受欢迎,写java的受众似乎少多了,可能博客园里j ...

  2. java script创建对象_javascript笔记:深入分析javascript里对象的创建

    大家知道在java里面类可以具有静态属性和方法,无需实例化该类的对象,就可以访问这些属性和方法,但是javascript里面是不是只有通过对象初始化方式才会模拟出这样的特点了?其实不然,在编程语言里, ...

  3. javascript 中的面向对象实现 如何封装

    javascript 是一门很灵活的语言,也是一门有缺陷的语言. 比如我们今天要谈的,如何用面向对象的手法来封装javascript ,javascript是没有类的概念的. 所以今天谈到的封装,其实 ...

  4. html5学习笔记---05.JavaScript 中的面向对象,继承和封装

    05.JavaScript 中的面向对象 a.创梦技术qq交流群:CreDream:251572072 a.JavaScript 是一种基于对象的语言   类:JavaScript 对象很抽象,所以下 ...

  5. JavaScript Oriented[探究面向对象的JavaScript高级语言特性]

    JavaScript Oriented 探究面向对象的JavaScript高级语言特性 Prologue . JavaScript Introduce 1.  JS Abstract JavaScri ...

  6. 【JavaScript】JavaScript模拟实现面向对象一张图帮助你深刻理解原型链和原型对象

    文章目录 一.JavaScript模拟面向对象 1.函数是类 2.函数中各种变量的声明 3.关于函数内的this 小结:JavaScript中函数是什么? 4.练习:面向对象思想编写Complex类 ...

  7. JavaScript教程-38-JavaScript面向对象编程

    1:JavaScript不是面向对象的一种编程语言,而是基于对象的.因为JavaScript是基于对象的一种脚本语言,所以没有所谓的类似java中 类 class 的概念.但是我们可以通过JavaSc ...

  8. Javascript基础与面向对象基础~第四讲 Javascript中的类对象

    今天来说JS中如何实现类(class),事实上本应该昨天晚上写的,可我失言了,在些说一声"抱歉"!JS中的类是JS面向对象的基础,也是我最拿手的东西,你写的代码能否提高一个层次,一 ...

  9. JavaScript 里,$ 代表什么?/JQuery是什么语言?/html中用link标签引入css时的中 rel=stylesheet属性?/EL表达式是什么?...

    JavaScript 里,$ 代表什么? 比如说我写一个mouseover事件: $(document).ready(function(){ $("p").mouseover(fu ...

最新文章

  1. python3 list 列表 倒序
  2. 指纹浏览器 开源 linux,浏览器指纹--Canvas指纹
  3. 移动APP开发使用什么样的原型设计工具比较合适?
  4. apache开源项目--ZooKeeper
  5. 使用Java程序通过http post访问ABAP Netweaver服务器
  6. SFTP是什么?与FTP之间有什么区别
  7. 手把手教你创建容器服务Kubernetes集群
  8. 安卓案例:列表控件上拉加载更多
  9. 6、vueJs基础知识06
  10. oracle 主键自增
  11. php导出excel数据
  12. 计算机统计分析spss试卷,《SPSS计算机统计分析方法》习题A卷.doc
  13. 悄悄这样学接口测试,到了公司然后惊艳全场。
  14. Facebook广告投放数据分析
  15. 新编计算机组装与维护标准教程,计算机组装与维护标准教程(2015-2018版)
  16. 几款常见的可视化HTML编辑器 WYSIWYG
  17. 服务器wifi无线放大器,旧路由器改wifi放大器详细教程【图】
  18. spring-boot mybadis多数据源配置
  19. 【UCIe】初识 UCIe
  20. 微信内域名如何防封,微信域名防封跳转

热门文章

  1. python简单的爬虫教程中召唤小海龟_Python练习,网络小爬虫(初级)
  2. layui移动端适配_实战:移动端适配的最佳实践
  3. 电脑开机一会就蓝屏怎么回事_常见的电脑蓝屏是怎么回事?学会三种解决方法,远离电脑维修店...
  4. mysql jdbc批量更新_jdbc批量更新数据
  5. mysql 数据库还原后没有_MySQL数据库的备份还原至最新状态
  6. 百练OJ:2808:校门外的树
  7. 第12章:项目采购管理(2)-章节重点
  8. 笔记-高项案例题-2018年下-项目管理-项目集管理-项目组合管理
  9. skywalking链路追踪在微服务架构中的使用
  10. Jquery中绑定select的change事件自动填充input的value值