`

3 创建自己的库 ADS.js(第一版本)

阅读更多

伪命名空间的使用.

 

在javascript2.0广泛使用之前,这里说的"命名空间"都不是真正的. 只是在脚本内营造一个属于自己的小空间的小技巧而已.

 

如果你的使用了Prototype库, 同时你又自己写了一个 function $(){} 函数 , 你的$函数就会与 Prototype库的$函数重名,所以我们要使用命名空间, 而且是伪命名空间.

 

例如:

(function(){//代码})();

 

//代码 处的代码,不能被外面访问,这就是自己的小空间了.

 

 

开始写自己的库

 

只有架子, 没写实现,以后会补全的,这里只是写一个写库的思想

(function(){
	
	//ADS命名空间 Advanced DOM Scripting
	if(!window.ADS)
	{
		window.ADS={};
	}	
	//确定浏览器是否与整个库兼容
	//例子 alert(ADS.getEvent());
	function isCompatible(other){}
	window.ADS.isCompatible=isCompatible;
	//取得元素
	//例子 ADS.$('bu1','bu2')
	function $(){}
	window.ADS.$=$;
	//添加事件
	//例子 ADS.addEvent(window,'load',test6);
	function addEvent(node,type_,listener){}
	window.ADS.addEvent=addEvent;
	//删除事件
	//例子 ADS.removeEvent(window,'load',test6);
	function removeEvent(node,type,listener){}
	window.ADS.removeEvent=removeEvent;
	
	function getElementsByClassName(className,tag,parent){}
	window.ADS.getElementsByClassName=getElementsByClassName;
	
	function toggleDisplay(node,value){}
	window.ADS.toggleDisplay=toggleDisplay;
	
	function removeChild(parent){}
	window.ADS.removeChild=removeChild;
	
	function prependChild(parent,newChild){}
	window.ADS.prependChild=prependChild;
	// 获得事件对象
	function getEvent(){}
	window.ADS.getEvent=getEvent;
	
	
})();

 

 

下面是写了实现的  库,  ADS.js

/**
 * @author 赵磊 2009-04-25
 */
(function(){
	
	//ADS命名空间 Advanced DOM Scripting
	if(!window.ADS)
	{
		window.ADS={};
	}	
	//确定浏览器是否与整个库兼容
	//例子 alert(ADS.getEvent());
	function isCompatible(other){
		if(other===false
		||!Array.prototype.push
		||!Object.hasOwnProperty
		||!document.createElement
		||!document.getElementsByTagName
		){
			return false;
		}
		return true;
	}
	window.ADS.isCompatible=isCompatible;
	//依据id取得元素
	//例子 ADS.$('bu1','bu2')
	function $(){
		var elements=new Array();
		
		//查找作为参数提供的所有元素
		for(var i=0;i<arguments.length;i++)
		{
			var element=arguments[i];
			//如果该参数是一个字符串,假设它是一个id
			if(typeof element=='string')
			{
				element=document.getElementById(element);
			}
			//如果只提供了一个参数,则立即返回这个元素
			if(arguments.length==1)
			{
				return element;
			}
			//否则将它添加进数组
			elements.push(element);
		}
		
		//返回包含多个被请求元素的数组
		return elements;
	}
	window.ADS.$=$;
	//添加事件
	//例子 ADS.addEvent(window,'load',test6);
	//    ADS.addEvent(window,'load',test5);
	//可以为一个对象添加多个事件
	function addEvent(node,type_,listener){
		//检查兼容性
		if(!isCompatible()){return false;}		
		
		if(!(node=$(node))){return false;}
		
		if(node.addEventListener)
		{
			//W3C的方法
			node.addEventListener(type_,listener,false);
			return true;
		}else if(node.attachEvent)
		{			
			//MS IE的方法
			node['e'+type_]=listener;
			node[type_]=function()
			{				
				node['e'+type_](window.event);
			}			
			node.attachEvent('on'+type_,node[type_]);			
			return true;
		}
		//若两种方法都不具备
		return false;
	}
	window.ADS.addEvent=addEvent;
	//删除事件
	//例子 ADS.removeEvent(window,'load',test6);
	function removeEvent(node,type,listener){
		if(!(node=$(node))) {return false;}
		
		if(node.removeEventListener)
		{
			//W3C的方法
			node.removeEventListener(type,listener,false);
			return true;
		}
		else if(node.detachEvent)
		{
			// MS IE 的方法
			node.detachEvent('on'+type,node[type]);
			node[type]=null;
			return true;
		}
		//若两种方法都不具备
		return false;
	}
	window.ADS.removeEvent=removeEvent;
	//依据className 查找元素(集合)
	//例子 ADS.getElementsByClassName("className","*",document);
	//返回 数组
	function getElementsByClassName(className,tag,parent){
		parent=parent||documetn;
		if(!(parent=$(parent))){return false;}
		
		//查找所有匹配的标签
		var allTags=(tag=="*"&&parent.all)?parent.all:parent.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.ADS.getElementsByClassName=getElementsByClassName;
	//反复隐显
	//例子 ADS.toggleDisplay('id');
	//    ADS.toggleDisplay('id','block');
	function toggleDisplay(node,value){
		if(!(node=$(node))){return flase;}
		
		if(node.style.display!='none'){
			node.style.display='none';
		}else{
			node.style.display=value||'';
		}
		return true;
	}
	window.ADS.toggleDisplay=toggleDisplay;
	//在指定元素后面插入一个元素
	//ADS.insertAfter("bu1","bu8")
	//ADS.insertAfter(ADS.$("bu1"),ADS.$("bu8"))	
	function insertAfter(node,referenceNode){
		if(!(node=$(node))){return false;}
		if(!(referenceNode=$(referenceNode))){return false;}
		return referenceNode.parentNode.insertBefore(node,referenceNode.nextSibling);
	}
	window.ADS.insertAfter=insertAfter;	
	//删除指定元素的所有子元素
	function removeChild(parent){
		if(!(parent=$(parent))) return false;
		while(parent.firstChild){
			parent.firstChild.parentNode.removeChild(parent.firstChild);
		}
		return parent;
	}
	window.ADS.removeChild=removeChild;
	//给指定节点添加子节点,  添加在已有子节点的前面
	//
	function prependChild(parent,newChild){
		if(!(parent=$(parent))) return false;
		if(!(newChild=$(newChild))) return false;
		if(parent.firstChild)
		{
			//如果存在一个 子节点,则在这个节点之前插入
			parent.insertBefore(newChild,parent.firstChild)
		}else{
			//如果没有子节点,则直接插入
			parent.appendChild(newChild);
		}
		return parent;
	}
	window.ADS.prependChild=prependChild;
	// 获得事件对象
	function getEvent(){
		if(window.event)
				{ 
					return window.event;
				}
			    var f=getEvent.caller;
			    while(f!=null)
			    {
			        var e = f.arguments[0]; 					
			        if(e && (e.constructor==MouseEvent||e.constructor==Event||e.constructor==KeyboardEvent)) return e;			              
			        f=f.caller;
			    }
	}
	window.ADS.getEvent=getEvent;
	
	
})();

 

 

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    video.js+video.ads.js js视频与广告插件

    1. 在页面中引入`video.js`和`video.ads.js`的JavaScript和CSS文件。 2. 创建一个`&lt;video&gt;`元素,并添加必要的属性,如`id`、`src`和`controls`。 3. 初始化`video.js`播放器,并配置广告插件。 4. 使用提供的API和...

    ads.rar_javascript

    标题中的“ads.rar_javascript”暗示了这个压缩包包含的是与JavaScript相关的代码,很可能用于实现广告展示或管理的第二部分。在这个场景中,我们可以深入探讨JavaScript在广告技术中的应用、基本概念以及可能涉及到...

    show_ads.rar_The Show

    标题中的"show_ads.rar_The Show"暗示了这是一个与网络广告展示相关的项目,可能是用于在网页上显示广告的JavaScript代码。描述中提到的"Code for javascript on the web"进一步确认了这一点,它表明我们处理的是一...

    ads.kernvalley.us:KernValley.US的广告制作工具网站

    1. **网页开发**:广告制作工具网站的构建需要前端和后端技术,如HTML、CSS、JavaScript(用于交互性)以及PHP、Python或Java等服务器端语言。它可能使用框架如React、Angular或Vue.js来提高开发效率和用户体验。 2...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part1.rar

    第一部分 深入理解DOM脚本编程  第1章 遵循最佳实践   1.1 不唐突和渐进增强   1.2 让JavaScript运行起来   1.2.1 把行为从结构中分离出来   1.2.2 不要版本检测   1.2.3 通过平稳退化保证可访问...

    JS广告轮换

    1. 添加动画效果:可以通过CSS3过渡(transition)或JavaScript库(如jQuery)实现平滑过渡。 2. 响应式设计:根据屏幕尺寸调整广告大小和布局,确保在不同设备上都能良好展示。 3. 添加控制按钮:用户可以手动切换...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part3.rar

    第一部分 深入理解DOM脚本编程  第1章 遵循最佳实践   1.1 不唐突和渐进增强   1.2 让JavaScript运行起来   1.2.1 把行为从结构中分离出来   1.2.2 不要版本检测   1.2.3 通过平稳退化保证可访问...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part2.rar

    第一部分 深入理解DOM脚本编程  第1章 遵循最佳实践   1.1 不唐突和渐进增强   1.2 让JavaScript运行起来   1.2.1 把行为从结构中分离出来   1.2.2 不要版本检测   1.2.3 通过平稳退化保证可访问...

    JS实现在线打印

    JavaScript(简称JS)是一种广泛应用于Web开发的轻量级编程语言,它主要负责网页的动态交互。在现代的Web应用中,JS不仅用于客户端的页面交互,还可以通过Node.js实现在服务器端的操作。本篇文章将重点探讨如何使用...

    jQuery广告文字切换动画特效.zip

    2. **CSS样式**:为了实现视觉效果,我们可以为`#ad-banner`添加一些基本样式,如宽度、高度、背景色等,同时隐藏除第一个`&lt;p&gt;`元素之外的所有元素。 ```css #ad-banner { width: 100%; height: 50px; ...

    ASP.Net 脚本实现flash循环广告

    var ads = ['ad1.swf', 'ad2.swf', 'ad3.swf', 'ad4.swf']; var index = 0; setInterval(function () { $('#flashAd object param[name=movie]').attr('value', ads[index]); $('#flashAd embed').attr('src', ads...

    前端项目-videojs-vast-plugin.zip

    VideoJS是一个广受欢迎的开源JavaScript和CSS库,它允许开发者创建功能丰富的HTML5视频播放器。而VAST(Video Ad Serving Template)则是一种广告投放标准,用于在视频内容中插入广告。本篇文章将详细探讨VideoJS与...

    eschop分析大全.docx

    此外,还有`styles`、`images`等目录用于存储CSS样式和图片资源,以及`todolist.js`, `topbar.js`等JavaScript文件,它们负责前端交互和动态效果。 总的来说,EShop是一个全面的电商解决方案,涵盖了从商品展示、...

    jquery页面广告框架

    1. **jQuery库**:确保页面已经引入了 jQuery 库,可以通过 CDN 链接或者本地文件引入。 2. **广告素材**:准备好要展示的广告图片或视频,以及相应的链接和描述信息。 3. **HTML 结构**:创建一个用于承载广告的...

    常用网页广告大全2-js

    在压缩包文件中,你可能会发现各种JavaScript库,如jQuery广告插件,或者第三方广告平台的SDK,如Facebook Audience Network、Google Ad Manager的JS代码示例。这些资源可以帮助你快速集成和自定义网页广告,同时也...

    REACT NATIVE跨平台移动应用开发 第二版.zip

    1. **React Native基础知识**:React Native基于React.js,一个用于构建用户界面的JavaScript库。它引入了一种声明式编程模型,使得UI设计更加直观。React Native将React的理念扩展到移动平台,通过桥接机制将...

    Projeto-Integrador:Projeto Integrador 4 periodo ADS

    【标题】"Projeto-Integrador:Projeto Integrador 4 periodo ADS" 提供的信息表明,这是一个针对广告与数字媒体(ADS)专业第四学期的学生所设计的综合项目。在这个项目中,学生可能会运用到他们在课程中学到的各种...

    常用的网页图片对联广告代码

    1. **动态加载广告图片**:使用JavaScript的`XMLHttpRequest`对象或更现代的`fetch` API,可以异步从服务器获取广告图片的URL。这使得广告可以在用户看到网页内容的同时加载,提高用户体验。 ```javascript fetch('...

    css3广告文字向下滚动切换代码

    // 重置动画并设置为第一个显示 }, 5000); // 延迟时间与动画时长相等 } }); ``` 以上就是使用CSS3实现广告文字向下滚动切换的基本步骤和原理。通过结合HTML、CSS3和JavaScript,我们可以创建出丰富多样的滚动...

    3mat2021-1:Dados的Estrutura deRepositóriodo 3°semettre de ADS Fatec Franca 202101

    在本压缩包“3mat2021-1”中,我们主要关注的是与“Estrutura de Repositório”相关的数据,这是ADS(Análise e Desenvolvimento de Sistemas)课程第三学期在Fatec Franca 202101期间的一个项目。这个项目可能...

Global site tag (gtag.js) - Google Analytics