这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
先上需要用到的全部代码片段(截取)
prototype 为对象添加属性的的过程中有些误区,在本文将为大家详细介绍下,感兴趣的朋友可不要错过
- MenuControl.prototype.boxDisplay = false; //是否显示图层选择菜单
- MenuControl.prototype.controlUI;
- MenuControl.prototype.show = function() {
- if (pointControl.boxDisplay) {
- pointControl.hide();
- }
- menuBoxDiv.style.display = "";
- this.boxDisplay = true;
- this.controlUI.style.backgroundColor = '#DDDDDD';
- };
- MenuControl.prototype.hide = function() {
- menuBoxDiv.style.display = "none";
- this.boxDisplay = false;
- this.controlUI.style.backgroundColor = 'white';
- };
- //图层选择开关
- function MenuControl(controlDiv, map) {
- controlDiv.style.padding = '5px';
- var controlUI = document.createElement('div');
- this.controlUI = controlUI;
- controlUI.style.backgroundColor = 'white';
- controlUI.style.height = '18px';
- controlUI.style.borderStyle = 'solid';
- controlUI.style.borderWidth = '1px';
- controlUI.style.cursor = 'pointer';
- controlUI.style.textAlign = 'center';
- controlUI.title = '点击启用菜单';
- controlDiv.appendChild(controlUI);
- var controlText = document.createElement('div');
- controlText.style.fontFamily = 'Arial,sans-serif';
- controlText.style.fontSize = '12px';
- controlText.style.paddingLeft = '4px';
- controlText.style.paddingRight = '4px';
- controlText.innerhtml = '<strong>图层选择</strong>';
- controlUI.appendChild(controlText);
- google.maps.event.addDomListener(controlUI, 'click',
- function() {
- if (menuControl.boxDisplay) {
- menuControl.hide();
- } else {
- menuControl.show();
- }
- });
- }
- //点开关框体
- PointControl.prototype.boxDisplay = false; //是否显示图层选择菜单
- PointControl.prototype.controlUI;
- PointControl.prototype.show = function() {
- if (menuControl.boxDisplay) {
- menuControl.hide();
- }
- pointBoxDiv.style.display = "";
- this.boxDisplay = true;
- this.controlUI.style.backgroundColor = '#DDDDDD';
- };
- PointControl.prototype.hide = function() {
- pointBoxDiv.style.display = "none";
- this.boxDisplay = false;
- this.controlUI.style.backgroundColor = 'white';
- };
- function PointControl(controlDiv, map) {
- controlDiv.style.padding = '5px';
- var controlUI = document.createElement('div');
- this.controlUI = controlUI;
- controlUI.style.backgroundColor = 'white';
- controlUI.style.height = '18px';
- controlUI.style.borderStyle = 'solid';
- controlUI.style.borderWidth = '1px';
- controlUI.style.cursor = 'pointer';
- controlUI.style.textAlign = 'center';
- controlUI.title = '点击操控点菜单';
- controlDiv.appendChild(controlUI);
- var controlText = document.createElement('div');
- controlText.style.fontFamily = 'Arial,sans-serif';
- controlText.style.fontSize = '12px';
- controlText.style.paddingLeft = '4px';
- controlText.style.paddingRight = '4px';
- controlText.innerHTML = '<strong>点</strong>';
- controlUI.appendChild(controlText);
- google.maps.event.addDomListener(controlUI, 'click',
- function() {
- if (pointControl.boxDisplay) {
- pointControl.hide();
- } else {
- pointControl.show();
- }
- });
- }
做的是谷歌的地图应用,其中有右方有两个 div 按钮,通过点击打开左方的 div 子菜单
要求是
打开前判断该子菜单是否已经为打开状态,如是,则先关闭,后打开 在开关子菜单时,按钮会据相应行为变色 这里就要求在各个按钮的 show() 方法下操作另一按钮的属性和方法来达到开关的效果 开始时写成这样
- MenuControl.prototype.controlUI;
- MenuControl.prototype.show = function(){
- controlUI.style.backgroundColor = '#DDDDDD';//直接调用属性
- };
- function MenuControl(controlDiv, map) {
- controlUI = document.createElement('div');
- controlUI.style.backgroundColor = 'white';
- }
结果无论开关哪一个菜单,都只有 "点" 按钮变色 原因大概是 controlUI 莫名定义为全局变量了 后来我试图这样
- MenuControl.prototype.controlUI;
- MenuControl.prototype.show = function(){
- this.controlUI.style.backgroundColor = '#DDDDDD';//添加this关键字
- };
- function MenuControl(controlDiv, map) {
- controlUI = document.createElement('div');
- controlUI.style.backgroundColor = 'white';
- }
结果还是失败 后来我想通了,大概这样就可以了
- MenuControl.prototype.controlUI.style.backgroundColor = "white";//一上来就给你赋值,看你往哪儿跑
- MenuControl.prototype.show = function(){
- this.controlUI.style.backgroundColor = '#DDDDDD';
- };
- function MenuControl(controlDiv, map) {
- controlUI = document.createElement('div');
- this.controlUI.style.backgroundColor = 'white';
- }
这样至少有错误信息了,不能给 undefined 添加 style 属性什么的 于是我绝望了,准备给所有属性也添加上全局变量,这样调用就方便许多 没成想,被自己启发了 于是就有了最开始那段代码
- MenuControl.prototype.controlUI;//先建立此属性,挖一个坑
- MenuControl.prototype.show = function(){
- this.controlUI.style.backgroundColor = '#DDDDDD';//使用this关键字调用,实际调用的是this.controlUI对象
- };
- function MenuControl(controlDiv, map) {
- var controlUI = document.createElement('div');//建立局部变量,并正常赋值
- this.controlUI = controlUI;//将此局部变量反赋给this对象的属性,达到关联引用
- controlUI.style.backgroundColor = 'white';//正常调用引用对象进行操控
- }
这样就将 prototype 添加的属性和自身创建的局部变量关联起来,使其可被外部其它对象所调用获取 达到成功将同名属性通过类对象进行区分并全局调用
来源: http://www.phperz.com/article/17/0426/278874.html