这样写JS的方式对吗?

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="../jquery.min.js"></script>
	<script>
		(function(){
			var RentNumObj = {};
			RentNumObj.geocount = 0;
			RentNumObj.tarDomId = "";
			RentNumObj.rentJson = {};
			var seed = 1;
			var prefix = "dom00";
			var selobjid = null;
			var delobjid = null;
			function getGeocount () {
				return RentNumObj.geocount;
			}
			function setGeocount (val) {
				RentNumObj.geocount = val;
			}
			function getTarDomId () {
				return RentNumObj.tarDomId;
			}
			function setTarDomId (val) {
				RentNumObj.tarDomId = val;
			}
			function getRentnumArr () {
				return RentNumObj.rentnumArr;
			}
			function setRentnumArr (val) {
				RentNumObj.rentnumArr = val;
			}
			function checkRentValLose () {
				var rentJson = RentNumObj.rentJson;
				for (var p in rentJson){
					if( rentJson[p] == undefined || rentJson[p] == null ){
						return false;
					}
				}
				return true;
			}
			function checkTarget () {
				var args = arguments;
				var tarid = RentNumObj.tarDomId;
				if( tarid == "" ){
					RentNumObj.tarDomId = tarid = args[0];
				}
				return $("#"+tarid);
			}
			function print () {
				// console.log("geocount:", RentNumObj.geocount);
				// console.log("tarDomId:", RentNumObj.tarDomId);
				// console.log("rentnumArr:", RentNumObj.rentnumArr);
				// console.log("rentJson:", RentNumObj.rentJson);
				// console.log("=========================");
				$("#panel").html("");
				$("#panel").append("<div>geocount: "+RentNumObj.geocount+"</div>");
				$("#panel").append("<div>tarDomId: "+RentNumObj.tarDomId+"</div>");
				$("#panel").append("<div>rentnumArr: "+RentNumObj.rentnumArr+"</div>");
				$("#panel").append("<div>rentJson: "+RentNumObj.rentJson+"</div>");
			}
			function print2(){
				$("#panel2").html("");
				$("#panel2").append("<div>selobjid: "+ selobjid +"</div>");
				$("#panel2").append("<div>rentnum: "+ rentJson[selobjid] +"</div>");
			}

			//var pt = RentNumObj.prototype;
			var pt = RentNumObj;
			pt.add = function(){
				print();
				var tarobj = checkTarget("intext");
				//tarobj[0].value = "";
				var geocount = getGeocount();

				if(geocount > 0){
					var tarval = tarobj[0].value;
					if( !checkRentValLose() ){
						//if( tarval == "" ){
							alert("未绑定租金值,请填写租金值!");
							tarobj[0].value = "";
							return false;
						//}
					}
				}
				selobjid = prefix + seed;
				seed = seed + 1;
				//$("#panel").append("<div id=‘"+selobjid+"‘ width=‘20‘ height=‘10‘ style=‘background-color:yellow;‘>"+selobjid+"</div>");
				$("body").append("<input type=‘button‘ id=‘"+selobjid+"‘ class=‘btnCls‘ value=‘"+selobjid+"‘>");

				$(".btnCls").bind("click", RentNumObj.sel);
				geocount = geocount + 1;
				setGeocount(geocount);
				RentNumObj.rentJson[selobjid] = null;
				print();
			};
			pt.del = function(){
				print();
				if( delobjid == null){
					alert("请先选择!");
					return false;
				}
				var rentJson = RentNumObj.rentJson;
				delete rentJson[ delobjid ];
				var geocount = getGeocount();
				geocount = geocount - 1;
				setGeocount(geocount);
				$("#"+delobjid).remove();
				// $("body").remove("‘#"+delobjid+"‘");
				delobjid = selobjid = null;
				// $("#"+delobjid).remove();
				print();
			};
			pt.clear = function(){
				print();
				var rentJson = RentNumObj.rentJson;
				for(var p in rentJson){
					delete rentJson[p];
					console.log("p:", p);
					$("#"+p).remove();
				}
				setGeocount( 0 );
				delobjid = selobjid = null;
				print();
			};
			pt.sel = function(){
				print();
				var me = this;
				// console.log( me );
				// console.log("id : " + me.id);
				delobjid = selobjid = me.id ;
				rentJson = RentNumObj.rentJson;
				console.log("rentJson[selobjid]:", rentJson[selobjid]);
				print2();
				print();
			};
			pt.save = function(){
				print();
				var tarobj = checkTarget("intext");
				var geocount = getGeocount();
				if(geocount > 0){
					var tarval = tarobj[0].value;
					if( !checkRentValLose() && tarval == "" ){
						alert("未绑定租金值,请填写租金值!");
						return false;
					}
				}
				print();
			};
			pt.bindOnBlur = function(){
				print();
				var tarval = checkTarget("intext")[0].value;
				if( tarval != "" && selobjid != null ){
					var rentjson = RentNumObj.rentJson;
					rentjson[selobjid] = tarval;
					alert("租金值已经绑定!");
					checkTarget("intext")[0].value = "";
					delobjid = selobjid = null;
				}
				print();
			};
			window.RentNumObj = RentNumObj;
		})();

		$(function(){

			console.log(RentNumObj);

			$("#btn_add").bind("click", RentNumObj.add);
			$("#btn_del").bind("click", RentNumObj.del);
			//$("#btn_sel").bind("click", RentNumObj.sel);
			$("#btn_save").bind("click", RentNumObj.save);
			$("#btn_clear").bind("click", RentNumObj.clear);

			$("#intext").bind("blur", RentNumObj.bindOnBlur);
		});
	</script>
</head>
<body>
	<div class="main">
		<div class="sub"><span class="btn"><input type="button" id="btn_add" value="Add"></span></div>
		<div class="sub"><span class="btn"><input type="button" id="btn_del" value="Delete"></span></div>
		<div class="sub"><span class="btn"><input type="button" id="btn_clear" value="Clear"></span></div>
		<!--<div class="sub"><span class="btn"><input type="button" id="btn_sel" value="Select"></span></div>-->
		<div class="sub"><span class="btn"><input type="button" id="btn_save" value="Save"></span></div>

		<div class="sub"><input type="text" id="intext"></div>
	</div>
	<div class="panel" id="panel" width="100px" height="500px" ></div>
	<div class="panel" id="panel2" width="100px" height="500px" style="float:right;padding:50px;"></div>
	<div>----------------------------</div>
</body>
</html>
时间: 2024-11-04 13:12:41

这样写JS的方式对吗?的相关文章

cocos2dx手写js绑定C++

这两天连续查阅了js绑定c++的非常多文章  , 有手动与自己主动两种方式 . 本来想用自己主动绑定的 , 可是NDK一直下载不下来.....就给算了 . 以下总结一下手动绑定的实现过程 : 一共三步 : 1 . 写原始 C++ 类 ( 一般放在自己定义类库里 ) 2.  用 C++ 逐个写 成员函数相应 的 绑定代码 ( 在自己定义类库中建立的manual_binding目录里) 3.  注冊所绑定过的函数( 在AppDelegate.cpp中 加入注冊函数 ) 4.  写js代码測试效果 1

JS 引入方式 基本数据类型 运算符 控制语句 循环 异常

一.JS引入方式 什么是JavaScript? JavaScript是运行在浏览器端的脚步语言,JavaScript主要解决的是前端与用户交互的问题,包括使用交互与数据交互,JavaScript是浏览器解释执行的. JavaScript的嵌入方式 1.行间事件 <input type="button" name="clicktook" onclick= "alert("ok!");"> 2.页面scrip标签嵌入

手写js面向对象选项卡插件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>无缝滚动</title>    <style type="text/css">        body,ul{margin: 0;padding: 0;}        li{list-style: none;}  

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件.iScroll不仅仅是 滚动.它可以处理任何需要与用户进行移动交互的元素.在你的项目中包含仅仅4kb大小的iScroll,你的项目便拥有了滚动,缩放,平移,无限滚动,视差滚动,旋转功能.iScroll的强大毋庸置疑,本人也非常欢迎大家使用iScr

JS兼容方式获取浏览器的宽度

<script type="text/javascript"> //need to wait until onload so body is available window.onload = function(){ function getWindowWidth(){ if (window.innerWidth){ return window.innerWidth; } else if (document.documentElement.clientWidth){ ret

写jQuery和直接写JS的区别(转自馒头的博客)

jQuery能大大简化Javascript程序的编写,我最近花时间了解了一下jQuery,把我上手过程中的笔记和大家分享出来,希望对大家有所帮助. 要使用jQuery,首先要在HTML代码最前面加上对jQuery库的引用,比如: <script language="javascript" src="/js/jquery.min.js"></script> 库文件既可以放在本地,也可以直接使用知名公司的CDN,好处是这些大公司的CDN比较流行,

写js代码的时候应该注意的一些的小细节

在今天将为大家分享一下,在平时我们写js代码的时候应该注意的一些的小点.img1全局变量了解js的朋友应该知道全局变量就是在任何函数的外面声明的或是未声明直接简单使用的.下面来看一个例子function fn(){var a=b=0;}或许有好多朋友都觉得这两个都是局部变量,但这似乎不是你所想的那样.在这个例子中b是一个全局变量.这是为什么了?肯定有好多朋友也想不通,这是因为在js中赋值运算符是自右往左的,所以上面这个例子实际上是function fn(){var a=(b=0);}因此,在平时

同 一个页面,不同请求路径,如何根据实际场景写JS

场景:使用同一个“添加群成员”的页面来操作 建群页面:建群成功后,返回查看群成员页面.在建群过程中直接添加群成员并返回一个群名称的参数. 添加群成员页面:在巳有群内添加群成员,添加成功后,返回查看群成员页面. 分析: 使用同一个页面,调两种不同接口,从接口中可以看到,一个包含{groupId},另一个没有 建群的接口为:/chat/vindicate/group 添加群成员的接口为:/chat/vindicate/group/{groupId} 在eclipse中需要做两个页面的渲染工作,其中使

自己写的加密方式

const string sNil = "'(&.&!'%&$\"'&)\" \",&)$(%#$-$#$$\" "; //'''(&.&!''%&$"''&)" ",&)$(%#$-$#$$" ' ; const string sTemp = " !\"#$%&'()*+,-./"; //