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

JavaScript底层数据组织实现方式

阅读更多
近一段时间以来,一直比较关注JavaScript相关的东西。

学的多了以后就变得很想提个为什么。

JS相关的书籍,基本市面上有的我都有收藏,看了十几本以后感觉最满意的有2本。
一本是《JavaScript DOM 高级编程艺术》、还有就是国人大师级人物周爱民写的《JavaScript精髓》。前一本适合想做JS框架的人看,后一本适合想做JS引擎的人看。。


说了很多废话之后还是回到今天的题目:底层数据组织和实现方式。

用周爱民的话说JS中只有一种数据类型就是对象,我们通常所说的方法,也就是我们在脚本中定义的function也是一种对象,对象只有一种操作就是“读取”,我们通常看到的调用比如:
function test(){....};
test();

这种形式提示也只是使用到了JS对象的读取操作,加上括号的另外一种语义。

当然这些和今天的题目比较不靠谱所以先不深入说了。

今天提到的JS底层数据组织实现方式是我看完这么多书、实际编写完JQuery插件后得到的一种感悟,当然尚未在市面上任何一本书上得到过证实。。。

我感觉在JS中只有2中数据类型,一种是原始类型、一种是数组类型。除此之外再无别。


为什么这么说呢?

我们知道数组分为2种类型:一种是顺序数组、一种是哈希数组。

顺序数组就是通常我们建立的new Array()这种类型的数组,这种类型的数组在底层,数据时按顺序存在于内存当中。我们只需要依照数据下标就可以取得数组的内容。
比如var test = ['a','b']; alert(test[0]);
我们可以看到a被显示出来。


哈希数组是JS中使用最频繁的一种数组组织方式,可以说大部分JS的特性和效果都是利用的哈希数组的特性。比如:我们最常使用的JSON数组格式。

JSON数组格式类似于JS中的对象字面量也类似于JS对象。
var test = {test:"a",value:"b"}
这里就是一个JSON对象,你也可以说成是一个JS对象或者一个JS的对象字面量。
它的主要结构就是key和value。而这些东西在JS底层都是使用哈希数组实现的。

再比如JS中的命名空间的概念。

命名空间被广泛使用在框架的开发中,我们在开发一个JS框架时不可避免的要注意一个问题就是我们在框架中定义的方法是否和其他框架方法冲突,我们在框架中使用的全局变量是否和其他框架中的全局变量冲突。如何解决这个问题呢?我们就是使用命名空间。

比如:
(function(){
	window['IC']={}
	
	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['IC']['$']=$;
	
	function getElementsByClassName(className,tag){
		
		var allTags = document.getElementsByTagName(tag);
		var matchingElements = new Array();

		className = className.replace(/\-/g, "\\-");
		var regex = new RegExp("(^|\\s)" + className + "(\\s|$)");
		
		var element;

		for(var i=0; i<allTags.length; i++){
			element = allTags[i];
			if(regex.test(element.className)){
				matchingElements.push(element);
			}
		}
		

		return matchingElements;
		
	}
	
	window['IC']['getElementsByClassName']=getElementsByClassName;
})();

上面的代码中我创建了自己的一个JS库“IC”,当然是用的命名空间也是IC。
我在库中定义了2个方法,一个是$一个是getElementsByClass。
$在相当多的框架中被使用。如何保证我们的$不和其他的$冲突,就是使用命名空间。
在实际的使用中,我们使用IC.$('myId');这种方式(命名空间.方法名)的方式避免和其他框架造成冲突。

我们可以看到命名空间其实就是我们自己创建一个2维数组。而这种2维数组就是哈希数组的一种表现形式。可以说我们使用哈里数组实现了JS中命名空间这种特性。


其他的还有很多例子时间关系今天就先写这么多,以后想到了再补充吧。呵呵。。。。
2
0
分享到:
评论
1 楼 hunterdong 2009-12-15  
非常好,勤于思考,写的很有条理,多谢。

看你写的数据仓库笔记,我也正好在看,看到第3章


yourightsite.blogspot.com

相关推荐

    javascript数据结构与算法实现合集.zip

    数据结构是存储和组织数据的方式,它影响着我们处理数据的效率。在JavaScript中,常见的数据结构包括: 1. 数组:一种线性数据结构,可以存储多个具有相同类型或不同类型的数据,并通过索引来访问。 2. 链表:每个...

    javascript,实现数据结构和算法题.zip

    数据结构是计算机存储、组织数据的方式,它是算法设计的基础。常见的数据结构包括数组、链表、栈、队列、树、图、哈希表等。了解并熟练掌握这些数据结构可以帮助我们更有效地解决问题,优化程序性能。 1. **数组**...

    毕业设计-基于JavaScript的cesium可视化系统实现

    【标题】:“毕业设计-基于JavaScript的cesium可视化系统实现” 【内容】: 在现代Web开发中,JavaScript作为主要的前端开发语言,被广泛应用于构建交互式和动态的网页应用。本毕业设计聚焦于利用JavaScript结合...

    JavaScript讲解了数据结构和算法.zip

    在"JavaScript讲解了数据结构和算法.zip"这个压缩包中,我们可以期待找到关于如何在JavaScript环境中理解和实现数据结构和算法的学习资料。 数据结构是计算机科学的基础概念,它涉及如何有效地组织和存储数据,以...

    JavaScript+5_javascript_JavaScript帮助文件_

    构造函数用于创建特定类型的对象,原型是JavaScript中实现继承的关键,而ES6引入的类则是更面向对象的语法糖,底层仍基于原型机制。 学习JavaScript,不仅需要理解这些基础知识,还需要掌握一些常见的库和框架,如...

    C++与JavaScript交互

    通过CEF,C++可以直接与JavaScript执行环境交互,实现网页内容的加载、控制和数据交换。 5. **参数传递**:在C++调用JavaScript的过程中,可以传递数据作为参数。这些参数可以是基本类型,如整数、字符串,也可以是...

    自定义方法实现msp和json互转(底层实现原理,绝对值)

    JSON格式由于其简洁、易读性,被广泛用于Web服务之间的数据交互,而Map则在编程语言内部提供了一种键值对的数据组织方式。本文将深入探讨如何通过自定义方法实现JSON与Map之间的互转,以及在实现过程中涉及的底层...

    struts2+json+jquery实现ajax数据的存取

    它提供了一种组织和控制应用程序逻辑的方式,使开发者可以更专注于业务逻辑而不是底层的HTTP请求处理。Struts2通过Action类和配置文件来定义请求映射,支持拦截器机制,能方便地集成各种插件和第三方库,例如JSON...

    javascript学习资料

    在JavaScript中,异步编程常常通过回调函数、Promise、async/await等方式实现。回调函数是最初的异步处理方式,但容易导致"回调地狱"问题。Promise提供了更优雅的错误处理和链式调用,而async/await则是Promise的...

    基于CH375的USB HID主机代码,实现了USB Host 收发数据的功能,使用并口操作的方式.zip

    Vue.js是一种流行的JavaScript框架,用于构建用户交互丰富的Web应用程序,它的组件化特性使得代码组织清晰,易于维护。 综合以上信息,这个项目的核心知识点包括: 1. USB Host:理解USB总线的主机模式,如何控制...

    JavaScript

    10. 跨域通信:通过JSONP、CORS(跨源资源共享)等机制,JavaScript可以实现不同源的网页之间的数据交换,促进了Web服务的开放性。 JavaScript的应用不仅限于浏览器,还可以通过Node.js在服务器端运行。随着技术的...

    Javascript中的封装与继承

    封装是面向对象编程的基本原则之一,它涉及到如何组织和保护代码,以实现数据隐藏和功能模块化。在JavaScript中,我们可以利用函数和闭包来实现封装。函数可以作为构造函数创建对象,通过`this`关键字将数据绑定到...

    javascript

    此外,JavaScript还有模块系统,通过export和import关键字实现模块间的导入导出,有助于代码组织和复用。模块可以是CommonJS(Node.js环境)或ES6模块(浏览器环境)。 在Web开发中,JavaScript与DOM(文档对象模型...

    JavaScript数据结构和算法:学习算法的集合使用JavaScript

    数据结构是组织和存储数据的方式,它直接影响到我们解决问题的效率。在JavaScript中,常见的数据结构包括数组(Array)、链表(LinkedList)、栈(Stack)、队列(Queue)、哈希表(HashMap)、树(Tree)、图...

    JavaScript面向对象精要(英文版)

    实际上,ES6的类语法是对原型继承的一种封装,它提供了一种更加清晰的方式来组织代码。 ##### 3.1 定义类 ```javascript class Person { constructor(name) { this.name = name; } sayHello() { console.log...

    JavaScript语言精粹 修订版 中文高清PDF

    函数是JavaScript的核心,书中的章节会详细阐述函数的定义、调用方式、作用域以及闭包。闭包是JavaScript的一个关键特性,它允许函数访问并操作外部作用域的变量,为代码封装和模块化提供了可能。此外,函数也可以...

    底层技术浏览器开发

    6. **数据存储**:浏览器需要处理Cookie、本地存储、IndexedDB等数据存储方式,VB可以通过ADO.NET等数据访问技术来实现。 7. **安全机制**:包括证书验证、沙盒环境等,确保用户在浏览网页时的安全。VB可以利用操作...

    JavaScript精彩网页特效实例精粹

    流程控制结构帮助我们按特定顺序执行代码,函数封装了可重用的代码段,对象和数组则提供了更高效的数据组织方式。 二、DOM操作 Document Object Model(DOM)是HTML和XML文档的结构化表示,JavaScript通过DOM可以...

Global site tag (gtag.js) - Google Analytics