`
jake_12345
  • 浏览: 8247 次
  • 性别: Icon_minigender_1
  • 来自: 江西
社区版块
存档分类
最新评论

javascript类模版 从零开始(一)

阅读更多

javascript对于新手或者其他语言爱好者来说,是一个很难从写法上面去理解的,于是突发奇想,写一个javascript类模版,大概模样如下:

 

Package("cn.test");//申明当前命名空间
Import("com.data");//导入包
Class({
	classname:"Test",//类名
	properties:{
		$name:"jake",//$开头代表私有属性
		$h:new HashMap()
	},
	construct:function(){//构造方法
		this.id = 0;
		this.name="jake c";
		this.h=new HashMap();
	},
	methods:{//方法列表
		getName:function(){
			return this.name;
		},
		setName:function(v){
			if(typeof v == "undefined")
				return ;
			this.name=v;
		},
		setH:function(){
			return;
		}
	}
});
Package.finish();//当前包结束

Import("cn.test");//导入刚刚定义的类

var t = new Test();
Logger.get("view").info(t);//日志输出t对象
Logger.get("view").info("before set " + t.getName());

var t1 = new Test();//创建第二个对象

t.setName("jake1");
Logger.get("view").info("after set " +  t.getName());

Logger.get("view").info("t1.name " + t1.getName());

Logger.get("view").info("t.name " + t1.name);//私有属性无法访问 undefined

Logger.get("view").info(t1.getH());

 目前支持包(命名空间,引用的是Module.js),私有属性,对象类型属性的实例化,构造方法,继承,接口,静态方法等,感兴趣的同学可以下载看看。目前只是做了一个大概,还有一些功能未实现,希望大家可以给点意见,呵呵

    其实主要意图还是注重在统一的写法,模式上面,形成一个大项目所具备的一些条理,层次等,从基层写起。

    (第一次写博客,见笑了,呵呵)

 

1.日志

 

在调试的过程中,我们经常需要看到输出结果,之前喜欢用alert,这是个很苦逼的方法,每次都有点确定,关掉之后才能继续运行下一步,所以采用log形式会方便一些。代码采用的是Log4Jse.js,这个工具很方便调用,而且兼容各大浏览器

 

 

Logger.get("view").info("(" + e.x + "," + e.y + ")");
 

 

 


2.加载完所以元素之后初始化类

 

由于javascript是动态加载的,html和script加载的先后顺序不一样,在javascript里面经常需要引用到html的DOM元素,如果采用面向对象可能需要在类的属性里面引用一个DOM,如

 

var Scence = function(){
	this.x = 0,
	this.y = 0,
	this.width = 600,
	this.height = 400,
	this.canvas = document.getElementById("canvas1");//需要引用的DOM元素
	this.ctx = this.canvas.getContext("2d");
	this.components = new HashSet();
};

Scence.prototype.draw = function(){
	for ( var it = this.generalviewers.iterator(); it.hasNext();) {
		var obj = it.next();
		obj.getValue().draw();
	}
}

 

 从代码可以看出需要用DOM元素作为Scence类(我们称之为类) 的属性,所以需要在html加载完成之后进行初始化实例。想到Jquery有个$(document).ready();,从中拿了一下代码过来,实现自定义的类可以在加载完html之后,再进行初始化。Class()就相当于$(document).ready(Class(...))

 

3.关键字

 

为了避免和javascript内部关键字冲突,于是另外加了自己的关键字

 

var KEYWORDS_ = [ "classname", "construct", "hashCode", "properties",
		"methods", "implement", "extend", "statics", "borrows", "constructor",
		"superclass", "super", "proto_properties", "clone", "Package", "Import" ];

 

 KEYWORDS_里面的每一个单词代表这个模版设计的关键字,有些是类的定义用的如"classname", "construct", "properties","methods", "implement", "extend", "statics", "borrows", "constructor", "Package", "Import"

而"hashCode"作为每个对象的唯一标识,在在面向对象语言里面比较两个对象是否相等通过比较hashcode来判定,

用类模版定义类的对象都自动赋予hashCode方法(采用闭包实现),从而确定唯一性 。

"proto_properties"并没有在外部用到,内部用到的一个最为初始化对象类型属性初始的值的备份列表,每个对象在初始化的时候都需要从里面获取对象的属性值,并且克隆(clone)一份,赋予新的对象。

 

                              // 初始化对象属性
				for (p in classProxy["proto_properties"]) {

					if (!CheckForKeyWords(p)) {
						var cp = $.clone(classProxy["proto_properties"][p]);
						this[p] = cp;
					}
				}
 

 

(未完待续)

0
0
分享到:
评论

相关推荐

    javaScript从零开始学源代码

    从零开始学习JavaScript源代码,意味着我们将深入理解其语法、结构和核心概念,这对于任何想要在Web开发领域有所建树的人来说都是至关重要的。下面,我们就来详细探讨JavaScript的基础知识和重要特性。 1. **基础...

    从零开始学JavaScript源码

    从零开始学习JavaScript,你需要掌握以下几个关键知识点: 1. **基础语法**:JavaScript的基础包括变量(var、let、const)、数据类型(原始类型:number、string、boolean、null、undefined、symbol;复杂类型:...

    Javascript从零开始

    作为“从零开始”的学习资源,本文将深入探讨JavaScript的基础知识,帮助初学者快速掌握这一强大的工具。 一、JavaScript简介 JavaScript是由网景公司的Brendan Eich在1995年开发的,最初是为了增强网页的交互性。...

    从零开始构建JavaScript技术栈中文版

    《从零开始构建JavaScript技术栈中文版》是一本旨在帮助初学者系统地建立起JavaScript技术体系的教程。在JavaScript开发的学习旅程中,理解并掌握JavaScript的核心概念、语法特性以及相关工具链是至关重要的。本教程...

    javascript从零开始PPT

    "从零开始"的学习路径意味着我们将从最基础的概念出发,逐步深入到JavaScript的核心概念和技术。以下是对JavaScript基础知识的详细阐述: 1. **基本语法**:JavaScript语法与C++和Java相似,但它是一种弱类型语言,...

    网页模板_javascript_源码

    这些模板可以极大地提升网站开发效率,减少从零开始编写代码的工作量。JavaScript作为前端开发的重要语言,它允许我们创建交互性强、功能丰富的动态网页。 在网页模板中,JavaScript通常用于实现以下功能: 1. **...

    资源类图文网站模板是一款适合设计资讯类网站模板下载 .rar

    这类模板通常包含了一系列预先设计好的页面布局、色彩方案、图形元素以及交互功能,旨在为用户提供便捷的建站体验,减少从零开始设计的时间和成本。本模板以RAR格式压缩打包,方便用户下载和使用。 首先,RAR是一种...

    js网页模板

    "js网页模板"是开发者们为了快速构建网页而预设的一系列HTML、CSS和JavaScript代码结构,它们提供了基本的设计布局和功能模块,帮助用户节省时间和精力,无需从零开始编写所有代码。 网页模板通常包括以下组成部分...

    Node.js-渐进式Express学习课程从零开始实现一个Express

    在本“Node.js-渐进式Express学习课程从零开始实现一个Express”的教程中,我们将深入探讨Node.js的Web开发框架Express。Express是基于Node.js平台的,它为构建高效、简洁的网络应用提供了强大的支持。这个课程的...

    BootStrap前端UI源码模板_javascript_BootStrap前端UI源码模板_bootstrap_

    总的来说,这个Bootstrap前端UI源码模板集合为开发者提供了便捷的起点,帮助他们快速搭建专业且具有吸引力的网站,无需从零开始设计。无论是牙科相关站点还是其他类型的网页,这些模板都能提供一个坚实的基础,节省...

    从零基础开始入门学习html5、css3、javascript,从初级开始学习前端知识.zip

    HTML5、CSS3和JavaScript是构建现代Web应用的基础技术,对于初学者来说,这是一个极好的起点,能够让你从零开始逐步掌握前端开发的核心知识。在这个压缩包中,“oeasy-html5-tutorial-master”可能是一个教程项目的...

    免费的商用模板 - Mondays

    设计师们通过模板,可以快速构建出具有吸引力的网页,而无需从零开始。"Mondays"模板系列则进一步优化了这一过程,提供了多种风格和功能各异的模板,适用于各种类型的商业网站。 这些模板通常包括以下部分: 1. **...

    设计师作品素材网站模板下载是一款适合设计素材类下载模板素材 .rar

    模板的使用大大减少了从零开始创建网站所需的时间和精力。 在压缩包的文件列表中,我们看到一个名为“README.md”的文件。这是一个常见的文本文件,通常包含关于压缩包内资源的说明、使用指南或版权信息。另一个...

    资源类图文网站模板是一款适合设计资讯类网站模板下载。_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.rar

    这个模板提供了预先设计和编码的HTML元素,包括头部、导航、主体内容区域、侧边栏和页脚等,使得开发者无需从零开始创建页面布局,可以更快地构建网页。 其次,JavaScript(JS)在模板中起着至关重要的作用。它是...

    锻炼健身单页网站模板是一款运动健身类HTML5模板素材下载 .rar

    【标签】“模板”意味着这是一个预设的设计框架,用户可以根据自己的需求进行定制,无需从零开始创建整个网站。这样的模板通常包括HTML文件、CSS样式表、JavaScript脚本和其他图像资源,它们组合在一起构成了一个...

    大图幻灯片养生网站模板是一款html5模板,适合养生保健类网站模板下载。_html网站模板_网页源码移动端前端_H5模.rar

    【标题】中的“大图幻灯片养生网站模板”指...对于不熟悉编程的用户,这样的模板是一个理想的选择,因为它减少了从零开始设计网站的工作量。只需根据自己的需求调整文字、图片和颜色,就能打造出个性化的养生保健网站。

    JavaScript_Hugoplate是一个使用Hugo和TailwindCSS构建的免费入门模板,可以节省您的工作时间

    这个模板的主要目的是为了简化和加速Web开发过程,帮助开发者快速启动他们的项目,避免从零开始搭建基础结构。 Hugo是一个用Go语言编写的静态网站生成器,它以其高效、快速和易于使用的特点而受到欢迎。使用Hugo,...

    户外俱乐部HTML网站模板是一款户外休闲娱乐运动类网站模板 .rar

    这种模板通常包含了多种预设的页面布局、色彩方案、字体样式以及图形元素,旨在帮助用户快速搭建一个具有专业外观和功能的网站,无需从零开始编写HTML和CSS代码。 【描述】进一步强调了这个模板是针对户外活动领域...

Global site tag (gtag.js) - Google Analytics