Javascript风格要素 ⅠⅠ

最新推荐文章于 2024-09-21 09:29:16 发布
最新推荐文章于 2024-09-21 09:29:16 发布
阅读量94 收藏
点赞数
文章标签： javascript php ViewUI
原文链接：https://my.oschina.net/yaohaixiao/blog/123105
版权

我们使用习惯用法可以使我们的意图更加的清晰和简洁。

使用==时，当心强制转换

考虑下面函数： 

function gw(f){
    if (d.w.sv.checked == true) {
        zv = 'on';
    }
    else {
        zv = 'off';
    }
    procframe.location.replace("http://b.www.yahoo.com/module/wtr_tr.php?p=" +
    escape(f.p.value) +
    "&sv=" +
    zv);
    return false;
}

==运算符不应该被用着和true比较值，因为它要执行强制转换。如果我们想确定d.w.sv.checked是否是布尔值
true，我们必须用===运算符。如果我们仅在意一个值是真实存在的不是假的，最好不要用相等运算符。

例如，由于强制转换：1 == true是真，1 === true是假。==运算符隐藏了类型错误。

使用?:运算符选择两值之一

if语句通常被用来从两个值中选择一个。这应该是三元操作符?:最适合的。 

zv = d.w.sv.checked ? 'on' : 'off';

绝不使用隐含的全局变量

变量zv不是作为一个var或函数参数来声明的，所以它是一个隐式的全局变量。如果这个页面的另一个函数使用了同样名字的全局变量，则可能得到一个 失败的结果。这样的臭虫（bug）是非常难以发现，却很容易避免。这个例子中，我们既可以声明zv为一个var，也可以发现它仅仅被使用过一次而整个去掉 它。 

function gw(f){
	procframe.location.replace("http://b.www.yahoo.com/module/wtr_tr.php?p=" +
	escape(f.p.value) +
	"&sv=" +
	d.w.sv.checked ? 'on' : 'off');
	return false;
}

绝不使用?:运算符选择两种行为之一

我们常质疑那些返回一个常量的函数，但这有时是在浏览器环境下所必需的。

下面我们看一个不正确使用?:运算符的例子。它常被用于在两个任务间选择。 

function u(o, z){
	var em = o.id.substring(1);
	var p = d.getElementById('e' + em);
	if (p) {
		(z == 0) ? p.style.backgroundColor = '#fff' : p.style.backgroundColor = '#989898';
	}
	p = d.getElementById('e' + (em - 1));
	if (p) {
		(z == 0) ? p.style.backgroundColor = '#fff' : p.style.backgroundColor = '#989898';
	}
}

对Z的判断是模糊不清的。Z正好等于0时我们选择#fff颜色，那么，Z不等于时？如上所述似乎指明的是前者，但它实际上是后者。在这个例子中幸运的是，我们大概想要的就是后者，所以它不是技术上错误（这次）。但是在文体上只糟糕的。

我们可以用if代替?:，但碰巧的是这些值对应的是同一个左值(lvalue)，所以我们无需if就可以改正这个错误。 

function u(o, z){
	var em = o.id.substring(1), p = d.getElementById('e' + em);
	if (p) {
		p.style.backgroundColor = z ? '#fff' : '#989898';
	}
	p = d.getElementById('e' + (em - 1));
	if (p) {
		p.style.backgroundColor = z ? '#fff' : '#989898';
	}
}

使用||运算符指定一个默认值

事件处理程序依赖于浏览器。理想情况下，应用程序应该通过公共库隔绝对浏览器的依赖。当没有这样的库时，就会有些函数发生如下情况： 

function md(e){
	(window.event) ? ev = window.event : ev = e;
	(ev.target) ? sr = ev.target : sr = ev.srcElement;
	if (ev && sr && sr.id == "fp" || sr.id == "sb") 
		st = 1;
	if (sr.className.indexOf("pllist") < 0 && sr.className != "more" &&
	sr.className != "plinkc" &&
	sr.tagName != "scrollbar " &&
	_toClose &&
	_toCloseNorgie) {
		d.getElementById(_toClose).innerHTML = "";
		_toClose = "";
		_toCloseNorgie.parentNode.className = '';
		_toCloseNorgie = '';
	}
}

一些浏览器把事件对象作为一个参数传给事件管理程序。微软选用把事件对象放入到一个全局的事件变量中。在Javascript中，全局变量是全局对 象的成员。在浏览器中，全局对象始终包含一个window对象成员，其值是全局对象。当测试一个变量是否存在时，通过window访问全局变量是避免未定 义变量错误的一种方法。无论如何，做这样的测试不应该是必要的。

我们能通过问它是否是另外一种，来代替首先判断是否是微软事件。

ev = e || event;我们用||(默认)运算符。如果e是真，我们将有它的值，但是如果e是假，则我们将用event。

在下一个语句，我们又用||运算符去确定sr是哪个值。

我们应该用var去声明ev和sr来避免全局冲突： 

function md(e){
	var ev = e || event, sr = ev.target || ev.srcElement;
	if (sr && (sr.id == 'fp' || sr.id == 'sb')) {
		st = 1;
	}
	if (sr.className.indexOf('pllist') < 0 && sr.className != 'more' &&
	sr.className != 'plinkc' &&
	sr.tagName != 'scrollbar ' &&
	_toClose &&
	_toCloseNorgie) {
		d.getElementById(_toClose).innerHTML = '';
		_toClose = '';
		_toCloseNorgie.parentNode.className = '';
		_toCloseNorgie = '';
	}
}

全局变量是魔鬼

下面我们看到另一个时间处理程序。正如你所料，它重复像前面一样破坏风格。 

function kd(e){
	(window.event) ? ev = window.event : ev = e;
	(ev.target) ? el = ev.target : el = ev.srcElement;
	if (ev && el) {
		code = ev.keyCode;
		id = el.id;
	}
	else {
		return;
	}
	ctn = lt.id.substring(1);
	if (code == 13) {
		return;
	}
	else 
		if ((code == 191 || code == 222) && id != 'fp') {
			_ffs = 1;
			gk = 0;
		}
		else 
			if ((code < 31 || code > 41) &&
			(code < 16 || code > 18) &&
			code != 9 &&
			code != 8) {
				gk = 1;
			}
			else {
				gk = 0;
			}
	if (!_ffs && (id == 'fp' || id == 'st')) {
		if (code == 9) {
			if (box.value == '' || (box.value != '' && (at == 1 || ev.shiftKey))) {
				mt(ctn);
			}
			else 
				if (id == 'st' && box.value != '' && at == 0) {
					at = 1;
					mt(ctn);
				}
		}
		else 
			if (id == 'fp' && gk == 0 && (box.value == '' && st == 0) &&
			!ev.shiftKey &&
			!ev.ctrlKey &&
			!ev.altKey) {
				d.getElementById('mk').focus();
				d.getElementById('mk').blur();
			}
			else 
				if (gk == 1) {
					at = 0;
				}
	}
	else 
		if ((id == 'mk2' && box.value != '' && ev.shiftKey && code == 9) ||
		(id == 'm6' && !ev.shiftKey && code == 9)) {
			d.getElementById('mk').focus();
		}
		else 
			if (!_ffs && gk == 1 && el.type != 'text' && !ev.ctrlKey && !ev.altKey) {
				box.value = '';
				box.focus();
			}
}
function mt(ctn){
	if ((ev && !ev.ctrlKey && !ev.altKey) || !ev) {
		if (ev.shiftKey) {
			nextTab = parseInt(ctn) - 1;
		}
		else {
			nextTab = parseInt(ctn) + 1;
		}
		if (nextTab == 0) {
			d.getElementById('mk').focus();
		}
		else 
			if (nextTab < 8) {
				t(d.getElementById('v' + nextTab));
			}
			else {
				return;
			}
	}
}

有意思的是它有一个同伴函数mt，它仅被kd调用。mt被传给一个参数ctn，但kd和mt之间的通讯大部分是通过全局变量。

使用内部函数避免全局变量

我们可以通过增加传递给mt的参数数量来除掉所有的全局变量。但代替方案，我们将使mt变成kd的内部函数。作为一个内部函数，mt能访问kd的所有变量。 

function kd(e){
	var ev = e || event, el = ev.target || ev.srcElement, cnt, code = ev.keyCode, gk, id = el.id, ctn = lt.id.substring(1);
	
	function mt(){
		var nextTab;
		if (!ev.ctrlKey && !ev.altKey) {
			nextTab = parseInt(ctn) + ev.shiftKey ? -1 : 1;
			if (!nextTab) {
				d.getElementById('mk').focus();
			}
			else 
				if (nextTab < 8) {
					t(d.getElementById('v' + nextTab));
				}
		}
	}
	
	if (code == 13) {
		return;
	}
	else 
		if ((code == 191 || code == 222) && id != 'fp') {
			_ffs = 1;
			gk = 0;
		}
		else 
			if ((code < 31 || code > 41) &&
			(code < 16 || code > 18) &&
			code != 9 &&
			code != 8) {
				gk = 1;
			}
			else {
				gk = 0;
			}
	if (!_ffs && (id == 'fp' || id == 'st')) {
		if (code == 9) {
			if (box.value == '' ||
			(box.value != '' && (at == 1 || ev.shiftKey))) {
				mt();
			}
			else 
				if (id == 'st' && box.value != '' && at == 0) {
					at = 1;
					mt();
				}
		}
		else 
			if (id == 'fp' && gk == 0 && (box.value == '' && st == 0) &&
			!ev.shiftKey &&
			!ev.ctrlKey &&
			!ev.altKey) {
				d.getElementById('mk').focus();
				d.getElementById('mk').blur();
			}
			else 
				if (gk == 1) {
					at = 0;
				}
	}
	else 
		if ((id == 'mk2' && box.value != '' && ev.shiftKey && code == 9) ||
		(id == 'm6' && !ev.shiftKey && code == 9)) {
			d.getElementById('mk').focus();
		}
		else 
			if (!_ffs && gk == 1 && el.type != 'text' && !ev.ctrlKey &&
			!ev.altKey) {
				box.value = '';
				box.focus();
			}
}

在函数kd中，从两个地方调用函数mt。通过使它成为一个内部函数，我们能有效的减少kd所用到的全局变量的数目，这将降低了干扰其他组件的可能性。kd依旧是一个烂摊子，但它现在不是一无是处的烂摊子。

作者：Douglas Crockford
原文：The Elements of JavaScript Style Part Two
翻译：秦歌（随网之舞 ）

转载于:https://my.oschina.net/yaohaixiao/blog/123105

chenping0895
关注
18 ArcGIS API for JavaScript 4.18绘制线段和面要素之后获取长度及面积
X北辰北的博客
01-08 2031
写在前面 上一文中我们介绍了一下如何通过鼠标点击的形式绘制点、线、面要素，大家看了代码之后应该感觉其实很简单，就是使用了"esri/widgets/Sketch/SketchViewModel"这个API模块来实现的。 大致实现流程如下： 实例化SketchViewModel 设置点、线、面三种符号的样式 激活SketchViewModel相应的绘制工具 绘制 以上就是通过鼠标点击的形式绘制点、线、面要素的整体流程，我们可以通过下面绘制一个点要素的代码来看一下这个流程，代码如下： // 绘制
100天精通鸿蒙从入门到跳槽——第2天：探究 ArkTS、TypeScript 和 JavaScript 之间的关系
热门推荐
猫头虎：授渔优于赠鱼，兴趣引领智慧，探索之乐尤显珍贵。商务合作：Libin9iOak，共赴知识与乐趣的探索之旅！
01-17 6万+
本文会深入探讨ArkTSTypeScript和JavaScript之间的关系。我们首先了解了TypeScript是如何扩展JavaScript的，以及它为开发带来的优势。然后，我们将注意力转向 ArkTS，它是在TypeScript的基础上构建的，专门为开发跨端应用而设计。通过深入了解这三种技术，读者将在100天内掌握HarmonyOS的强大功能，实现在新技术领域的快速成长。本文通过分析ArkTS、TypeScript和JavaScript之间的关系，揭示了它们在HarmonyOS编程领域中的重要作用。
SuperMap iclient for javascript使用token安全认证
12-14
本范例展示了如何在SuperMap iClient for javascript中使用服务token安全认证以及如何使用SuperMap iServer rest API申请token
SuperMap iclient for javascript实现拖拽要素
12-14
常见的鼠标交互中经常见到单击，双击，悬浮等；本范例展示了在SuperMap iClient for javascript中如何使用SuperMap.Control.DragFeature实现拖拽要素的鼠标交互并对其各阶段事件进行监听。
supermap+JavaScript查询当前地图范围内的对象
08-06
supermap+JavaScript查询当前地图范围内的对象
SuperMap iclient for javascript指定矢量要素全幅显示
12-14
本范例展示了在iClient for javascript中如何将指定的单个或者多个矢量要素全幅显示
ArcGIS API For Javascript之多图层显示与隐藏，图层要素选框查询
wulafly的博客
04-12 2万+
ArcGIS API For Javascript之定位功能
arcgis js api 图层要素闪烁
08-30
arcgis js api， 动态闪烁某一区域、市域范围特效，达到突出显示区域及选中的要素功能，解压即可运行，并有代码注释
1500个前端开发常用JavaScript特效
04-24
JavaScript是前端开发中不可或缺的一部分，尤其对于创建交互性和动态效果来说更是如此。"1500个前端开发常用JavaScript特效"这个资源集包含了大量实践性的示例，旨在帮助开发者提升项目中的用户体验。以下是对这些...
supermap学习系列之silverlight--添加可拖拽的定位图钉
08-21
学习笔记，方便以后查阅。是一个silverlight版的supermap。 在地图上做了一个可以自定义图标并且可以拖拽的图钉。
JavaScript鼠标拖拽
07-30
适合初学者看的JavaScript代码示例
SuperMap iclient for ios添加marker和矢量线
12-14
SuperMap iclient for ios 7c中使用MakerManager和RMpath分别对maker和矢量线要素进行管理，本范例讲解了如何在地图上添加Maker和叠加矢量线
iClient for Javascript入门
weixin_30399155的博客
11-06 102
这玩意的背景闲话不说，先整一个出图的入门范例。 下载地址为： http://support.supermap.com.cn/ProductCenter/DownloadCenter/DownloadPage.aspx?id=59 解压后目录如下： 1、拷贝需要引用的资源 在本机新建一个文件夹，GettingStarted，然后把刚刚前面解压的文件夹中的resource、li...
SuperMap iClient for JavaScript矢量分块图层-地图快速渲染的利器
SuperMap技术控
11-25 3675
作者：doremi 一、简介TiledVectorLayer，矢量分块图层属于客户端矢量地图，所有的渲染都是由客户端完成。服务器将矢量数据以及地图的渲染风格属性信息发送给浏览器或者是其他的客户端设备，这样客户端就能将地图渲染出来。客户端根据瓦片的位置以及比例尺向服务器请求矢量切片。每个矢量切片都包含多个数据集，一个数据集相当于一个图层，每个数据集都包含了多个要素，包括点、线、面和文本要素。 此外，服
浅谈Supermap iClient for JavaScript弹窗类
SuperMap技术控
11-26 5059
作者：MR. 地图作为信息的载体和呈现方式，是GIS的重要组成部分，它是一个浏览信息的窗口，在信息日益发达的今天 ，各种地图应用如雨后春笋一般出现在大众眼前，而不是像以往一样太过局限于专业的领域。而弹窗，是作为地图信息的补充说明和描述的重要呈现方式，也广泛应用于各种地图应用中。一个好的前端界面的设计要灵活地使用空间，也要生动地完成与用户的交互，而在地图应用中，弹窗使用得好，不但会让人
SuperMap for JavaScript 热点图
博客
04-01 530
开发工具与关键技术：Visual Studio ,jQuery ,SuperMap 作者：邹赛 撰写时间：2019/3/28 在需要对地图中数据的密度进行查看时可以使用热点图，让数据更加直观。添加热点图首先需要声明一个热点图层，用于提供对热点信息的添加删除操作和渲染展示，声明时添加热点权重字段名称,权重的渐变表示颜色的渐变,颜色的深浅由低权重到高权重。然后将图层添加入地图中,代码如下 添加完成...
原生鼠标拖拽事件
qq_32307891的博客
01-17 210
  obj.onmousedown = function(ev){             var ev = ev||event;             var disX = ev.clientX - this.offsetLeft;             var disY = ev.clientY - this.offsetTop;                         ...
运行VUE项目运行时候的报错汇总
最新发布
W3306698294的博客
09-21 117
上面的问题解决问题：【在npm install 后面加 --legacy-peer-deps，就可以解决了】
Javascript编程风格与实践指南
"Javascript风格要素" JavaScript，作为一门广泛使用的编程语言，其风格要素对于编写高效、可读性强的代码至关重要。良好的JavaScript风格不仅能够提升代码的可维护性，还能够帮助开发者之间更好地理解和协作。以下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值