JavaScript中处理全局变量
2016-04-06 18:12
435 查看
js如何避免变量冲突
/* 1.解决js冲突方法一 用匿名函数将脚本包起来,改变变量的作用域 让变量的作用域控制在匿名函数之内 */ (function(){ var str = "hello world!"; alert(str); })(); /* 1.解决两个匿名函数之间通信 使用全局变量 在window作用域下定义全局变量但是也应该要控制全局变量的个数 使用普通变量作为全局变量,扩展性就会很差,可以使用一个对象类型的变量作为全局变量 如果需要很多全局变量作通信,则可以将这些变量都作为全局变量的属性 */ var GLOBAL = {}; (function(){ GLOBAL.str = "hello world2!"; alert(GLOBAL.str); })(); /* 2.解决变量命名冲突 全局变量属性如果命名简单极有可能被无意中覆盖 可以使用命名空间解决这个问题 只不过为了避免被覆盖多嵌套了一次对象比如 */ (function(){ GLOBAL.A = {}; GLOBAL.A.name = "alice"; alert(GLOBAL.A.name); })(); /* 3.还可以多级使用 */ (function(){ GLOBAL.B = {}; GLOBAL.B.DATE = {}; GLOBAL.B.DATE.year = 2016; GLOBAL.B.DATE.month = 4; alert(GLOBAL.B.DATE.month); })(); </script> <script> /* 4.定义命名空间函数 这样可以在命名空间中的匿名函数调用,多级非常方便 */ var GLOBAL = {}; GLOBAL.namespace = function(str){ var arr = str.split("."),o = GLOBAL; for(i = (arr[0] == "GLOBAL") ? 1 : 0;i < arr.length; i++){ o[arr[i]] = o[arr[i]] || {}; o = o[arr[i]]; } } GLOBAL.namespace("CLASS.PER"); GLOBAL.CLASS.PER.name = "lefeier"; console.log('GLOBAL : ' + GLOBAL); alert(GLOBAL.CLASS.PER.name); </script> <script> /* 5.程序统一入口 window.onload 所有资源全部下载完毕之后才执行 DOMReady 只要页面所有的节点全部加载完成即可 它并不是原生js事件 但是很多的js框架提供这种事件 */ /* 6.JavaScript分层概念 1. base层 封装不同浏览器下js的差异,提供统一接口 抚平DOM EVENT 事件冒泡 onXXX、attachEvent addEventListener 自定义函数 2. common层 提供可以复用的组件 3. page层 完成页面内的功能需求 */ // 部分base层的方法 /* 封装阻止事件冒泡 */ function stopPropagation(e){ e = window.event || e; if(document.all){/* IE */ e.cancelable = true; }else{ e.stopPropagation(); } } /* 封装事件绑定 */ function on(node, eventType, handler){ node = typeof node == "string" ? document.getElementById(node) : node; if(document.all){ node.attachEvent("on"+eventType, handler); //现在的IE版本已经抹平了不同 }else{ node.addEventListener(eventType, handler, false); } } var btn = document.getElementById("btn"); on(btn,"click",function(){ alert("button clicked!"); }); /* 获取含有指定class名的指定页面元素 */ function getClass(tagname, className) { //tagname指元素,className指class的值 //getElementsByClassName用下面的方法 var tagname = document.getElementsByTagName(tagname); //获取指定元素 var tagnameAll = []; //这个数组用于存储所有符合条件的元素 for (var i = 0; i < tagname.length; i++) { //遍历获得的元素 if (tagname[i].className.split(" ")[0] == className) { //如果获得的元素中的class的值是于指定的类名,就赋值给tagnameAll tagnameAll[tagnameAll.length] = tagname[i]; } } return tagnameAll; }
/* getElementsByClassName 兼容处理 */ function getElementsByClassName(ele, className){ if(ele.getElementsByClassName){ return ele.getElementsByClassName(className); }else{ //IE 7 8 var elements = ele.getElementsByTagName('*'); var result = [], element; for(var i = 0, element = elements[i]; i < elements.length;i++){ if(hasClass(elements[i], className)){ result.push(elements[i]); } } return result; } } function hasClass(ele, className){ var classNameStr = ele.className; classNameStr = classNameStr.trim(); className = className.trim(); var classItms = classNameStr.split(' '); for(var i = 0; i < classItms.length; i++){ if(className === classItms[i])return true; } return false; }
相关文章推荐
- 问题1:javascript的函数对象问题
- 【jsp】使用SimpleTagSupport自定义标签库
- js面向对象学习笔记
- jsp自定义标签使用
- javascript级联插件
- javascript中this的用法
- js高级程序设计笔记1
- 使用WCF POST JSON
- JSP开发模式及MVC
- 几种常见排序算法的JavaScript实现
- JavaScript中的正则表达式
- 100多个基础常用JS函数和语法集合大全
- js 日期工具类
- 关于fastjson大小写转换问题的解决办法
- 根据JSON创建对应的HIVE表
- 爬虫Jsoup小结
- BOOST JSON 数组解析
- 通过JS简单实现图片缩放
- jsp入门(一个菜鸟的搬砖历程
- JS两种方案解决跨域问题