javascript全局变量封装模块实现代码

下面的代码是我的测试代码，注释很重要：


代码如下:

/*global window,jQuery,validate_email,masterUI,$,rest*/
/** Enable ECMAScript "strict" operation for this function. See more:
* http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/
* http://stackoverflow.com/questions/5020479/what-advantages-does-using-functionwindow-document-undefined-windo
* Q1: Why are window and document being fed instead of just being accessed normally?
* A1: Generally to fasten the identifier resolution process, having them as local variables can help (although IMO the performance improvements may be negligible).
* A2: Passing the global object is also a widely used technique on non-browser environments, where you don't have a window identifier at the global scope, e.g.:
* (function (global) {
* //..
* })(this); // this on the global execution context is the global object itself
* A3: Passing window and document allows the script to be more efficiently minified
*
* Q2: Why the heck is undefined being passed in?
* A1: This is made because the undefined global property in ECMAScript 3, is mutable, meaning that someone could change its value affecting your code, for example:
* undefined = true; // mutable
* (function (undefined) {
* alert(typeof undefined); // "undefined", the local identifier
* })(); // <-- no value passed, undefined by default
* If you look carefully undefined is actually not being passed (there's no argument on the function call),
* that's one of the reliable ways to get the undefined value, without using the property window.undefined.
*
*/
(function(window, document, undefined) {
"use strict";
window.test = {
init: function () {
"use strict";
alert("ok");
}
};
})(window, document);// no undefined parameter here to avoid using mutable window.undefined changed by other guy

1.说明，参考了一篇文章和stackoverflow上的一个帖子
2.(function(){})() 这种代码写在独立的js文件里，当js文件被html加载的时候，该函数就会执行。实际上创建了windows.text对象。
以后html代码就可用test.init的形式调用方法。
测试html部分代码如下：


代码如下:

[plain] view plaincopyprint?
<head>
<title>AppEngine SDK</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../master/script/third_party/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../../master/plugin/jquery-validation-1.9.0/jquery.validate.js"></script>
<script type="text/javascript" src="../../master/plugin/artDialog4.1.6/jquery.artDialog.js"></script>
<script type="text/javascript" src="../../master/script/app/test.js"></script>
<script type="text/javascript">
$(document).ready(function() {
test.init();
})
</script>
</head>

3.Jslint会报两个问题，一是关于undefined的，没找到什么好方法，任它抱怨吧。另一格式最后调用方式要改成：


代码如下:

[javascript] view plaincopyprint?}(window, document)); }(window, document));

无所谓了，就任由它吧。只要功能正常就行。

赞 (0)

相关推荐

  • javascript中局部变量和全局变量的区别详解

    javascript有两种变量:局部变量和全局变量.当然,我们这篇文章是帮助大家真正的区别这两种变量. 首先,局部变量是指只能在本变量声明的函数内部调用.全局变量时整个代码中都可以调用的变量.当然,单单从字面上理解肯定是不清楚的,下面我详细的介绍下: 大家都知道,变量是需要用var关键字声明的.但是javascript中也可以隐式的使用变量,就是不用声明,直接使用.而且,千万注意,javascript把隐式声明的变量总是当成全局变量来使用的. 例如: 复制代码 代码如下: function my

  • 探讨JavaScript中声明全局变量三种方式的异同

    探讨JavaScript中声明全局变量三种方式的异同

    变量及变量声明是一门语言最基本的概念,初学者都会很快掌握.JavaScript中声明变量也是如此,很简单var(关键字)+变量名(标识符). 方式1 var test;var test = 5;需注意的是该句不能包含在function内,否则是局部变量.这是第一种方式声明全局变量. 方式2 test = 5;没有使用var,直接给标识符test赋值,这样会隐式的声明了全局变量test.即使该语句是在一个function内,当该function被执行后test变成了全局变量. 方式3 window

  • 基于JavaScript 声明全局变量的三种方式详解

    JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍. 声明方式一: 使用var(关键字)+变量名(标识符)的方式在function外部声明,即为全局变量,否则在function声明的是局部变量.该方式即为显式声明详细如下: <script> var test = 5;//全局变量 function a(){ var a = 3;//局部变量 alert(a); } function b(){ alert(test); } //a();//调用a方法,那么方法里面的内容才会执行 //b(

  • javascript 用局部变量来代替全局变量第1/2页

    javascript 用局部变量来代替全局变量第1/2页

    为什么要这么做?有什么根据么?不这么做,对性能到底能带来多大的损失?本文就来探讨这些问题的答案,从根本上了解变量的读写性能都和哪些因素有关. 著作权声明        本文译自 Nicholas C. Zakas 于2009年2月10日在个人网站上发表的<JavaScript Variable Performance>.原文是唯一的正式版,本文是经过原作者(Nicholas C. Zakas)授权的简体中文翻译版(Simplified Chinese Translation).译者(明达)在翻

  • 跟我学习javascript的全局变量

    一.尽量少用全局对象 全局变量的问题在于,你的JavaScript应用程序和web页面上的所有代码都共享了这些全局变量,他们住在同一个全局命名空间,所以当程序的两个不同部分定义同名但不同作用的全局变量的时候,命名冲突在所难免. web页面包含不是该页面开发者所写的代码也是比较常见的,例如: 第三方的JavaScript库 广告方的脚本代码 第三方用户跟踪和分析脚本代码 不同类型的小组件,标志和按钮 比方说,该第三方脚本定义了一个全局变量,叫做result:接着,在你的函数中也定义一个名为resu

  • JavaScript中全局变量、函数内变量以及常量表达式的效率测试

    JavaScript中全局变量、函数内变量以及常量表达式的效率测试

    var r, s = "this is a very very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong string", x = /^\s+|\s+$/g; document.writeln("字符串测试 "); (function(){ document.write("全局->全局:"); var t = new Date(); for(

  • javascript中运用闭包和自执行函数解决大量的全局变量问题

    但是从全局看来,这样会导致出现一些让我们难以掌控的情况的出现:变量同名.多个函数共用一个全局变量后的值的变换--等等.所以,有时候,对于一些简单的全局变量,我们可以通过另一种方式来处理--用自执行函数+闭包的方法来解: 比如:我们要在网页加载时给出一个提示,在网页关闭时给出另一个提示 下面的代码,实现了以上功能 复制代码 代码如下: var msg1 = "欢迎光临!"; // 定义一个全局变量 var msg2 = "再见!" //定了另一个全局变量 window

  • Javascript全局变量var与不var的区别深入解析

    相信你对全局变量一定不陌生,在函数作用域里用a=1这种形式定义的变量会是一个全局变量,在全局作用域里,用下面3种形式都可以创建对全局可见的命名: 复制代码 代码如下: <script>var a = 1;b = 2;window.c = 3;</script> 对于b=2这种方式, 它其实和c是一样的,在执行这个赋值语句的时候,会沿着作用域链寻找名字叫做b的变量,一直找到作用域链的顶端还没有找到,于是给window添加一个属性b然后赋值. var与不var有两个区别: 1 var的

  • javascript(jquery)利用函数修改全局变量的代码

    我是将当前页用一个全局变量存储.同时在"最后一页"链接里单击方法调用一个函数自动去修改页数为最后一页,然后再调用载入评论的方法. 可是我发现点击"最后一页"第一次的时候系统没反应,再点击一次就抓去最后一页的资料了! 要说全局变量没改,应该是改了,就仿佛改了页数而载入评论的方法失效了一样. 代码如下: 复制代码 代码如下: var page = 1; //初始化页数为第一页 var str = ""; $(document).ready(funct

  • javascript全局变量封装模块实现代码

    下面的代码是我的测试代码,注释很重要: 复制代码 代码如下: /*global window,jQuery,validate_email,masterUI,$,rest*/ /** Enable ECMAScript "strict" operation for this function. See more: * http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/ * http://stackoverflow.c

  • javascript原生封装一个淡入淡出效果的函数测试实例代码

    说到js的渐变显示与消失,多数朋友会想到JQuery里面的fadeIn().fadeOut()或fadeToggle().但如果仅仅是为了引入这样的一个效果,而去调用了庞大JQuery库?或者说我通过用原生js实现一些函数来提高自己~ 所以,我简单的研究了一下纯js代码写淡入淡出的效果. 如果出现错误,请在评论中指出,我也好自己纠正自己的错误 (一)FadeIn淡入函数 淡入淡出的效果,其实就是一个setInterval(),加上循环的DOM操作,通过改变element对象节点的透明度,即可实现

  • JavaScript函数封装随机颜色验证码(完整代码)

    JavaScript函数封装随机颜色验证码(完整代码)

    数字或者字母或者数字字母混合的n位验证码带随机的颜色.下面是完整的代码,需要的自取哈! ​ function verify(a = 6,b = "num"){ //定义三个随机验证码验证码库 var num ="0123456789" var str ="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNIPQRSTUVWXYZ" var mixin = num +str; //定义一个空字符串用来存放验证码 var

  • JavaScript ES6 Module模块详解

    目录 0.什么是Module 1.Module 的加载 1.1 方式一 1.2 方式二 2.导出和导入 2.1 一个模块的导出可以被其它模块导入,并访问. 2.2 没有导出,也可以将其导入 2.3 被导入的代码都会执行一遍,也仅会执行一遍 3.export default 和对应的 import 4.export 和对应的 import 5.Module 的注意事项 总结 0.什么是Module 历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文

  • Javascript操作cookie的函数代码

    javascript操作cookie简单版本 复制代码 代码如下: function setCookie(name, value, iDay) { var oDate = new Date(); oDate.setDate(oDate.getDate() + iDay); document.cookie = name+'='+value+';expires='+oDate; } function getCookie(name) { var arr = document.cookie.split(

  • javascript 通过封装div方式弹出div窗体

    javascript 通过封装div方式弹出div窗体

    图1(弹出一个div) 图2(弹出多个)构造函数: 复制代码 代码如下: var DivWindow= function(popup/*最外层div id*/,popup_drag/*拖动div id*/,popup_exit/*退出按钮id*/ ,exitButton/*触发服务器端退出按钮id*/,varwidth,varheight,zindex){ this.popup =popup ; this.height =varheight ; //窗口高度,并没用来设置窗口高度宽度,用来定位在

  • 基于JavaScript实现轮播图代码

    基于JavaScript实现轮播图代码

    一.要点: 1.页面加载时,图片重合,叠在一起[绝对定位]; 2.第一张显示,其它隐藏; 3.设置下标,给下标设置颜色让它随图片移动; 4.鼠标移动到图片上去,显示左右移动图标,鼠标移走,继续轮播; 二.实现代码: html代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"

  • javascript实现简易计算器的代码

    javascript实现简易计算器的代码

    今天闲来无聊,想写点什么,突然想到用javascript写一个计算器.程序还存在很多的Bug,先在这里记录一下,以后慢慢更正. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.or

  • Javascript发送AJAX请求实例代码

    一个对AJAX的封装 //url就是请求的地址 //successFunc就是一个请求返回成功之后的一个function,有一个参数,参数就是服务器返回的报文体 function ajax(url,successFunc) { var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); xhr.open("POST",url,true); xhr.onr

  • JavaScript tab选项卡插件实例代码

    今天,先从最简单的开始,将已有的一个Tab选项卡切换功能改写成javascript插件形式. 原生函数写法 将一个javascript方法改写为js插件最简单的方式就是将这个方法挂载到window全局对象下面 我们先来看看最原始的使用函数写法的代码: tab.html <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta http

随机推荐