jquery变量var的使用

最新推荐文章于 2022-01-17 16:57:00 发布

wespten

最新推荐文章于 2022-01-17 16:57:00 发布

阅读量1.8w

点赞数 5

分类专栏：全栈前端开发文章标签： jquery变量var的使用

本文链接：https://blog.csdn.net/qq_35029061/article/details/83548790

版权

全栈前端开发专栏收录该内容

61 篇文章 3 订阅

订阅专栏

变量var的使用

js的变量没有类型

                    var $li = $('#' + file.id),
                        $percent = $li.find('.progress span');
                    //console.log("percentage:", percentage);
                    // 避免重复创建
                    if (!$percent.length) {
                        $percent = $('<p class="progress"><span></span></p>')
                            .appendTo($li)
                            .find('span');
                    }

如果是null不会进入if

如果是一个数组会进入

空字符串不会进入

如果是undefined不会进入

如果是1会进入

如果是0不会进入

如果是字符串1也会进入

ES6 改变了现状，引入了新的 let 关键字，提供了除 var 以外的另一种变量声明方式。

let 关键字可以将变量绑定到所在的任意作用域中（通常是 { .. } 内部）。换句话说， let为其声明的变量隐式地了所在的块作用域。

与var不同的是，它声明的变量只能是全局或者整个函数块的。换句话，块级 == { }

let 声明的变量只是在其声明的块或者子块中可用，这一点，与var相似。二者的主要区别在于var声明的变量的作用域是整个封闭函数，而let声明的作用域是块。

 1 function varTest() {
 2     var x = 1;
 3     if (true) {
 4     var x = 2;  // 同样的变量!
 5     console.log(x);  // 2
 6     }
 7     console.log(x);  // 2
 8 }
 9 
10 function letTest() {
11     let x = 1;
12     if (true) {
13     let x = 2;  // 不同的变量
14     console.log(x);  // 2
15     }
16     console.log(x);  // 1
17 }

当用到内部函数时候，let 会让你的代码更加简洁。

 1 var list = document.getElementById('list');
 2 
 3 for (let i = 1; i <= 5; i++) {
 4     let item = document.createElement('li');
 5     item.appendChild(document.createTextNode('Item ' + i));
 6 
 7     item.onclick = function(ev) {
 8       console.log('Item ' + i + ' is clicked.');
 9     };
10     list.appendChild(item);
11 }
12 
13 // to achieve the same effect with 'var'
14 // you have to create a different context
15 // using a closure to preserve the value
16 for (var i = 1; i <= 5; i++) {
17     var item = document.createElement('li');
18     item.appendChild(document.createTextNode('Item ' + i));
19 
20     (function(i){
21     item.onclick = function(ev) {
22       console.log('Item ' + i + ' is clicked.');
23     };
24     })(i);
25     list.appendChild(item);
26 }

以上示例的工作原理是因为（匿名）内部函数的五个实例引用了变量i的五个不同实例。注意，如果将let 替换为 var，则它将无法正常工作，因为所有内部函数都将返回相同的i，6是最终值。此外我们可以通过将创建新元素的代码移动到每个循环的作用域来保持循环更清晰。

在程序或者函数的顶层，let 并不会像var 一样在全局对象上创建一个属性，比如：

1 var x = "apple";
2 let y = "apple";
3 console.log(this.x);  //'apple'
4 console.log(this.y);  //undefined

在处理构造函数的时候，可以通过let 绑定来共享一个或者多个私有成员，而不使用闭包：

 1 var Thing;
 2 {
 3     let privateScope = new WeakMap();
 4     let counter = 0;
 5 
 6     Thing = function(){
 7         this.someProperty = 'foo';
 8         privateScope.set(this, {
 9             hidden: ++counter,
10         });
11     };
12 
13     Thing.prototype.showPublic = function(){
14         return this.someProperty;
15     };
16 
17     Thing.prototype.showPrivate = function(){
18         return privateScope.get(this).hidden;
19     };
20 }
21 
22 console.log(typeof privateScope);   //undefined
23 
24 var thing = new Thing();
25 console.log(thing);                //Thing { someProperty: 'foo' }
26 console.log(thing.showPublic());   //foo
27 console.log(thing.showPrivate());  //1

当在块中使用时，let 将变量的作用域限制为该块。注意var 的作用域在它被声明的函数内区别。

 1 var a = 1;
 2 var b = 2;
 3 
 4 if(a === 1){
 5     var a = 11;
 6     let b = 22;
 7 
 8     console.log(a);   // 11
 9     console.log(b);   // 22
10 }
11 console.log(a);   // 11
12 console.log(b);   // 2

总之，let 的作用域是自己最近的{}

		var names = ["00:00","23:00","22:00","21:00","20:00","19:00","18:00","17:00","16:00","15:00","14:00","13:00","12:00","11:00","10:00","09:00","08:00","07:00","06:00","05:00","04:00","03:00","02:00","01:00"];
		var url = CONTEXT_PATH +"/cusviews/dev/getRadarChartName";
		var param = {
				deviceCode:deviceCode
		}
		var retData = $.getData(url,param)
		if(1000!=retData.status){
			return;
		}
		var data = retData.data;
		if(null==data){
			return;
		}
		
		var rlt = {
				"data" : []
			};
		var rltdata = [];
		var dataList = new Array();
		
		function isInArray(arr,value){
		    for(var i = 0; i < arr.length; i++){
		        if(value === arr[i]){
		            return true;
		        }
		    }
		    return false;
		}
		
		$.each(data.textlist,function(j,k){
			let obj = {};
			if(isInArray(names,k.substring(11,16))){
				obj.text = k.substring(11,13);
			}else{
				obj.text = "";
			}
			obj.max = data.maxlist[j];
			rlt.data.push(obj);
		})

window.onload = function()
{
    var sum = 0;
    for (var i = 0;i <10;i++)
    {
        sum += i;   

    }
    alert(sum);
    alert("i="+i);
}
</script>
--------------------- 
上面的代码可输出i

<script>
window.onload = function()
{
    var sum = 0;
    for (let i = 0;i <10;i++)
    {
        sum += i;   

    }
    alert(sum);
    alert("i="+i);
}
</script>
--------------------- 
i未定义

è¿éåå¾çæè¿°

let具有自己的块级作用域，所以for循环转一次，创建一个块级作用域，思路与闭包相同，分别储存了5个不同的i变量。

var lis = document.getElementsByTagName("li");
for(let i=0; i<lis.length;i++){
lis[i].onclick = function(){
alert(i);
}
}

(function () {

})();

(function ($) {

})
(jQuery)
(function (window, $) {

})(window, jQuery);

(function (window, $, undefined) {

})(window, jQuery);

var _util = function () {

       this.QueryFormSerializeArray = function (domid) {
            var form = null;
            if (typeof (domid) === "string")
                from = $('#' + domid);
            else
                from = domid;
            var p = from.serializeArray();
            var s = $.map(p, function (n) {
                var t = $("#" + n.name);
                if (t.size() == 0)
                    t = from.find("*[textboxname='" + n.name + "']");
                var query = {};
                var s = $.trim(t.attr('data-query'));
                if (s) {
                    if (s.substring(0, 1) != '{') {
                        s = '{' + s + '}';
                    }
                    query = (new Function('return ' + s))();
                    if (query.filed) {
                        query.name = query.filed;
                        //query.remove("filed");
                    }
                }
                //console.log(query);
                return $.extend({}, n, query);
            });

            return s;
        };
        /**
         * 序列化Form 返回字符串
         * @param  {string} domid
         * @return {any} 序列化后的
         */
        this.QueryFormSerializeString = function (domid) {
            var s = this.QueryFormSerializeArray(domid);
            var strpars = JSON.stringify(s);
            return strpars;
        };
};
    $Core.util = new _util();

function ($)，直接进入

	$.extend({
		renderSelectorMyf : function(options){
			return new renderSelectorMy(options);
		}
	});

new实例化的时候进入方法

;(function($){   
	debugger;
    var options = {
    		fieldCode: "gfyId",
            url: "../../Security/selector/user/PublicServiceUserList.html?s=" + Math.random(),
            multi: false,
            code: "gfyId,gfyIdName",
            keyRespField: "gfyId,id",
            dictCode: "publicserviceName",
            area: ['90%','90%']
    };
    /*引用查询选择*/
	function renderSelectorMy(options){
		
		var defaults = {};
		this.settings = $.extend({},defaults,options);
		var $domObj = $("#" + this.settings.fieldCode + "-popSelector");
		this.settings.url = $domObj.attr("action") ? $domObj.attr("action") : this.settings.url;
		this.settings.multi = $domObj.attr("multi") ? $domObj.attr("multi") : this.settings.multi;
		this.settings.code = $domObj.attr("codeAndName") ? $domObj.attr("codeAndName").split(",") : this.settings.code.split(",");
		this.settings.keyRespField = this.settings.keyRespField ? this.settings.keyRespField.split(",") : "";
		this.init();
	}
	
	//为函数添加原型链上的方法
	renderSelectorMy.prototype = {
		init: function(){
			
			var _self = this,
				_keys = _self.settings.code;
			
			$("input[name='" + _keys[0] +"']").parent().parent().find("button").unbind('click').bind('click', function(){
				var action = "_self." + $(this).attr("action");
				eval(action);
			});

		},
		querySelect : function(thi,event){
			
			var _self = this;
			var url = _self.settings.url;
			var _keys = _self.settings.code;
			var keyRespField = _self.settings.keyRespField;
			var id = keyRespField[1];
			var ids = $("input[name='" + _keys[0] +"']").val();

			if(url.indexOf("?") != -1) {
                url = url + "&" + id + "="+ids;
            }else {
                url = url + "?" + id + "="+ids;
			}
			$Core.UI.openDialog("selwind", url,
	            {
	                title: "列表选择",
	                width: _self.settings.area[0],
	                height: _self.settings.area[1],
	                onClose: function () {
	                }
	            });

			
		},
		echoSelect : function(_data){
			var _self = this;
			var data = _data.data,
				_keys = _self.settings.code,
				_rkeys = _self.settings.keyRespField,
				dictName = "",
				dictCode = _self.settings.dictCode;
			$Core.DicCache.initDictionary(dictCode,function(dicts){
				var _dicts = dicts;
				if(dicts && dicts.data){
					var dictDatas = dicts.data[dictCode];
					for(var i=0,len=dictDatas.length; i<len; i++){
						var item = dictDatas[i];
						if(data[_keys[0]] == item[_rkeys[1]]){
							var itemName = item.text;
							dictName += itemName +",";
						}
					}
					$("span input:text", $("div #" + _keys[0] + "-popSelector")).val(dictName.substr(0,dictName.length-1));
				}else{
					$("span input:text", $("div #" + _keys[0] + "-popSelector")).val(dictName);
				}
				
				
			})
		},
		selectResultAfterCallback: function(checkRlt){
			
			var _self = this,
				multi = _self.settings.multi;
			if(checkRlt.length == 0){
				$Core.UI.message.warning("选请选择数据!");
			}
			
			if(!multi && checkRlt.length != 1){
				$Core.UI.message.warning("单选,请选择一条数据!");
			}
			
			var _keys = _self.settings.code,
			code = "",
			name = "";
			if(!_self.settings.multi){
				code = checkRlt[0]['code'];
				name = checkRlt[0]['name'];
			}else{
				var _code = "",
					_name = "";
				for(var i=0,len=dataArr.length; i<len; i++){
					_code += checkRlt[i]['code'] +",";
					_name += checkRlt[i]['name'] +",";
				}
				code = _code.substring(0,_code.length-1);
				name = _name.substring(0,_name.length-1);
			}
		
			//给input[name='']:text 赋值
			address = checkRlt[0]['address'];
			headPerson = checkRlt[0]['headPerson'];
			headPersonPhone = checkRlt[0]['headPersonPhone'];
			customerType = checkRlt[0]['customerType'];
			$("input[name='address']").val(address);
			$("input[name='headPerson']").val(headPerson);
			$("input[name='headPersonPhone']").val(headPersonPhone);
			/*$("input[name='customerType']").val(customerType);*/
			$("#customerType").combobox("setValue", customerType);
			$("input[name='" + _keys[0] + "']:hidden").val(code);
			$("span input:text", $("div #" + _keys[0] + "-popSelector")).val(name);
			
			$(".panel-tool-close").trigger('click');
		}
		
	}	
	
	  //扩展jquery类方法
	$.extend({
		renderSelectorMyf : function(options){
			return new renderSelectorMy(options);
		}
	});
})(jQuery)
debugger;	
    renderSelector = $.renderSelectorMyf({
        fieldCode: "gfyId",
        url: "../../Security/selector/user/PublicServiceUserList.html?s=" + Math.random(),
        multi: false,
        code: "gfyId,gfyIdName",
        keyRespField: "gfyId,id",
        dictCode: "publicserviceName",
        area: ['90%','90%']
    });
	

    _self.renderSelectors = [renderSelector];

wespten

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquery变量var的使用

变量var的使用js的变量没有类型 var $li = $('#' + file.id), $percent = $li.find('.progress span'); //console.log("percentage:", percentage); ...
复制链接

扫一扫