浅析js封装和作用域
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
var text="test";
var t=new functionTest(text);
function functionTest(text)
{
var alertText=text
$("#btnSave").click(function (e) {
alertTestInnert();
});
this.AlertTest= function ()
{
alert(alertText);
}
function alertTestInnert()
{
alert(alertText);
}
}
function alertTestOuter()
{
alert(text);
}
</script>
<body>
<input type="button" id="btnSave" class="button" value="保存" />
<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:t.AlertTest;" />
</body>
</html>
再点击保存，取消时需要一定的操作，第一次的代码如上：
点击保存，根本没反应，很奇怪，这种最常用的jquery绑定事件竟然不起作用了。后来一比较才知道，其实自己忘了，绑定应该在$(document).ready(function () {})中进行；
js修改如下：
代码如下:
var text="test";
$(document).ready(function () {
var t=new functionTest(text);
});
function functionTest(text)
{
var alertText=text
$("#btnSave").click(function (e) {
alertTestInnert();
});
this.AlertTest= function ()
{
alert(alertText);
}
function alertTestInnert()
{
alert(alertText);
}
}
function alertTestOuter()
{
alert(text);
}
修改后，点击保存可以了，而且正确的传递了参数，这样就可以保证在不同点的情况下传递不同的参数了。
但还有一种情况，页面会动态生成一些标签，这些标签的点击事件也需要处理。再次以取消按钮为例，由于是动态生成，就不能使用和保存一样的方法了。
只能使用onclick="javascript:t.AlertTest;"这种类似的绑定。于是有测试如下：
修改
代码如下:
<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:t.AlertTest;" />
<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:alertTestOuter;" />
<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:alertTestOuter();" />
这次有反应了，看来是少了一对括号。修改为封装的方法如下：
代码如下:
<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:t.AlertTest();" />
点击没反应，提示Uncaught ReferenceError: t is not defined
看来是变量t没有定义，作用域起作用了。于是修改js如下，也就是把变量t放到外边，赋值放在里边，就是如下：
代码如下:
var t;
var text="test";
$(document).ready(function () {
t=new functionTest(text);
});
function functionTest(text)
{
var alertText=text
$("#btnSave").click(function (e) {
alertTestInnert();
});
this.AlertTest= function ()
{
alert(alertText);
}
function alertTestInnert()
{
alert(alertText);
}
}
function alertTestOuter()
{
alert(text);
}
最后一步，如何给取消调用的方法传递参数？
第一步修改js如下，也就是把取消调用的函数改为需要传递参数的方法，代码如下：
代码如下:
var t;
var text="test";
$(document).ready(function () {
t=new functionTest(text);
});
function functionTest(text)
{
var alertText=text
$("#btnSave").click(function (e) {
alertTestInnert();
});
this.AlertTest= function (text)
{
alert(text);
}
function alertTestInnert()
{
alert(alertText);
}
}
function alertTestOuter()
{
alert(text);
}
<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:t.AlertTest('124');" />
点击，看看是不是正确的传递了参数，一切正常，看来这样就完成了。
最后整理js代码：
把通用的js代码放到一个js文件里，这里放到了common.js中，不同的代码放在htm中，修改后的所有代码如下：
代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="common.js" type="text/javascript"></script>
<script type="text/javascript">
var t;//需要定义的外边，否则点击取消时，不能访问到变量t
var text="test"; //传递的参数
$(document).ready(function () {
t=new functionTest(text); //给t赋值，定义不能放在这里边
});
</script>
<body>
<input type="button" id="btnSave" class="button" value="保存" />
<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:t.AlertTest('124');" />
</body>
</html>
function functionTest(text)
{
var alertText=text
$("#btnSave").click(function (e) {
alertTestInnert();
});
this.AlertTest= function (text)
{
alert(text);
}
function alertTestInnert()
{
alert(alertText);
}
}
相关推荐
-
深入理解Javascript中this的作用域
大家在使用Javascript的时候经常被this这个家伙搞得晕头转向的.对大多数有OOP开发经验的开发人员来说this是当前作用域中引用普通元素的标识符,但是在Javascript中它却显得古灵精怪的,因为它不是固定不变的,而是随着它的执行环境的改变而改变.在Javascript中this总是指向调用它所在方法的对象. 举一个简单的例子: 复制代码 代码如下: function test(){ alert(this); } var obj=function(){ var name='testO
-
js使用函数绑定技术改变事件处理程序的作用域
第一种,也是 最常见的,就是直接在html标签里面通过指定事件处理程序同名的HTML属性来注册事件,代码如下: 复制代码 代码如下: function eventHandler() { alert("当前作用域是 input 元素本身"); } <input type="button" value="单击我" onclick="eventHandler(this)"/> 第二种方式就是将一个函数赋值给一个事件处理程
-
js变量以及其作用域详解
一.变量的类型 Javascript和Java.C这些语言不同,它是一种无类型.弱检测的语言.它对变量的定义并不需要声明变量类型,我们只要通过赋值的形式,可以将各种类型的数据赋值给同一个变量.例如: 复制代码 代码如下: i=100;//Number类型 i="variable";//String类型 i={x:4};//Object类型 i=[1,2,3];//Array类型 JS的这种特性虽然让我们的编码更加灵活,但也带来了一个弊端,不利于Debug,编译器的弱检测让我们维护冗长的
-
JavaScript作用域示例详解
作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理.今天这篇文章对JavaScript作用域示例详解的介绍,希望能帮助大家更好的学习JavaScript. 任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期.在JavaScript中,变量的作用域有全局作用域和局部作用域两种. 一.JavaScript中无块级作用域 在Java或C#中存在块级作用域
-
详解JavaScript的AngularJS框架中的作用域与数据绑定
AngularJS 简介 AngularJS 是由 Google 发起的一款开源的前端 MVC 脚本框架,既适合做普通 WEB 应用也可以做 SPA(单页面应用,所有的用户操作都在一个页面中完成).与同为 MVC 框架的 Dojo 的定位不同,AngularJS 在功能上更加轻量,而相比于 jQuery,AngularJS 又帮您省去了许多机械的绑定工作.在一些对开发速度要求高,功能模块不需要太丰富的非企业级 WEB 应用上,AngularJS 是一个非常好的选择.AngularJS 最为复杂同
-
javascript中的变量作用域以及变量提升详细介绍
变量作用域"一个变量的作用域表示这个变量存在的上下文.它指定了你可以访问哪些变量以及你是否有权限访问某个变量." 变量作用域分为局部作用域和全局作用域. 局部变量(处于函数级别的作用域)不像其他对面对象的编程语言(比方说C++,Java等等),javascript没有块级作用域(被花括号包围的):当是,javascript有拥有函数级别的作用域,也就是说,在一个函数内定义的变量只能在函数内部访问或者这个函数内部的函数访问(闭包除外,这个我们过几天再写个专题). 函数级别作用域的一个例子
-
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
函数表达式 1.JavaScript中定义函数有2钟方法: 1-1.函数声明: 复制代码 代码如下: function funcName(arg1,arg2,arg3){ //函数体} ①name属性:可读取函数名.非标准,浏览器支持:FF.Chrome.safari.Opera. ②函数声明提升:指执行代码之前会先读取函数声明.即函数调用可置于函数声明之前. 1-2.函数表达式: 复制代码 代码如下: var funcName = function(arg1,arg2,arg3){ //函
-
JavaScript的作用域和块级作用域概念理解
作用域永远都是任何一门编程语言中的重中之重,因为它控制着变量与参数的可见性与生命周期.讲到这里,首先理解两个概念:块级作用域与函数作用域. 什么是块级作用域呢? 任何一对花括号({和})中的语句集都属于一个块,在这之中定义的所有变量在代码块外都是不可见的,我们称之为块级作用域. 函数作用域就好理解了(*^__^*) ,定义在函数中的参数和变量在函数外部是不可见的. 大多数类C语言都拥有块级作用域,JS却没有.请看下文demo: //C语言 #include <stdio.h> void mai
-
javascript 函数及作用域总结介绍
在js中使用函数注意三点:1.函数被调用时,它是运行在他被声明时的语法环境中的: 2.函数自己无法运行,它总是被对象调用的,函数运行时,函数体内的this指针指向调用该函数的对象,如果调用函数时没有明确指定该对象, this 默认指向 window ( strict 模式除外,本文不涉及 strict 模式): 3.函数是一种带有可执行代码的对象类型数据. 一.声明函数 1.使用 function 关键字 复制代码 代码如下: function myfun(a,b){ //声明名为myfun的函
-
深入理解JavaScript高级之词法作用域和作用域链
主要内容:1.分析JavaScript的词法作用域的含义 2.解析变量的作用域链 3.变量名提升时什么 最近在传智播客讲解JavaScript的课程,有不少朋友觉得JavaScript是如此的简单,但是又如此的不知如何使用,因此我准备了一些内容给大家分享一下. 这个系列主要讲解JavaScript的高级部分的内容,包括作用域链.闭包.函数调用模式.原型以及面向对象的一些东西. 在这里不包含JavaScript的基本语法,如果需要了解基础的同学可以到http://net.itcast.cn里面去下
-
关于JS管理作用域的问题
关键字:标识符.执行上下文.作用域.作用域链.变量对象.活动对象理论知识 理解JavaScript如何管理作用域和作用域链很重要.因为在作用域链中要查找的变量对象的个数直接影响标识符解析的性能.标识符在作用域链中的位置越深,查找和访问它所需的时间越长:如果作用域管理不当,就会给脚本的执行时间带来负面影响. 当执行JavaScript代码时,JavaScript引擎会创建一个执行上下文(Execution Context).执行上下文(有时被称为作用域)设定了代码执行时所处的环境.JavaScri
-
js作用域及作用域链概念理解及使用
(1)作用域 一个变量的作用域(scope)是程序源代码中定义的这个变量的区域. 1. 在JS中使用的是词法作用域(lexical scope) 不在任何函数内声明的变量(函数内省略var的也算全局)称作全局变量(global scope) 在函数内声明的变量具有函数作用域(function scope),属于局部变量 局部变量优先级高于全局变量 var name="one"; function test(){ var name="two"; console.log