浅析js封装和作用域_javascript技巧
程序员文章站
2022-03-30 13:27:19
...
基本的代码如下
再点击保存,取消时需要一定的操作,第一次的代码如上:
点击保存,根本没反应,很奇怪,这种最常用的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;"这种类似的绑定。于是有测试如下:
修改
点击没反应,修改如下
点击还是没反应,也没有错误,在修改如下:
这次有反应了,看来是少了一对括号。修改为封装的方法如下:
点击没反应,提示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);
}
相应的html修改如下:
点击,看看是不是正确的传递了参数,一切正常,看来这样就完成了。
最后整理js代码:
把通用的js代码放到一个js文件里,这里放到了common.js中,不同的代码放在htm中,修改后的所有代码如下:
common.js的代码:
function functionTest(text)
{
var alertText=text
$("#btnSave").click(function (e) {
alertTestInnert();
});
this.AlertTest= function (text)
{
alert(text);
}
function alertTestInnert()
{
alert(alertText);
}
}
复制代码 代码如下:
再点击保存,取消时需要一定的操作,第一次的代码如上:
点击保存,根本没反应,很奇怪,这种最常用的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;"这种类似的绑定。于是有测试如下:
修改
复制代码 代码如下:
点击没反应,修改如下
复制代码 代码如下:
点击还是没反应,也没有错误,在修改如下:
复制代码 代码如下:
这次有反应了,看来是少了一对括号。修改为封装的方法如下:
复制代码 代码如下:
点击没反应,提示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);
}
相应的html修改如下:
复制代码 代码如下:
点击,看看是不是正确的传递了参数,一切正常,看来这样就完成了。
最后整理js代码:
把通用的js代码放到一个js文件里,这里放到了common.js中,不同的代码放在htm中,修改后的所有代码如下:
复制代码 代码如下:
common.js的代码:
复制代码 代码如下:
function functionTest(text)
{
var alertText=text
$("#btnSave").click(function (e) {
alertTestInnert();
});
this.AlertTest= function (text)
{
alert(text);
}
function alertTestInnert()
{
alert(alertText);
}
}
上一篇: jquery mobile怎么样
下一篇: 关于判断目录的10篇课程推荐
推荐阅读
-
浅析php中常量,变量的作用域和生存周期_php技巧
-
JavaScript中的作用域链和闭包_javascript技巧
-
js使用函数绑定技术改变事件处理程序的作用域_javascript技巧
-
深入浅析同源策略和跨域访问_javascript技巧
-
js 跨域和ajax 跨域问题小结_javascript技巧
-
原生js事件的添加和删除的封装_javascript技巧
-
JavaScript中的作用域链和闭包_javascript技巧
-
Javascript中的作用域和上下文深入理解_javascript技巧
-
原生js事件的添加和删除的封装_javascript技巧
-
JS简单动画封装浅析_javascript技巧