在编写web软件时
遇到一些可以共用js的情况
于是就想着如何封装js代码
基本需求很简单
其实就是根据不同的情况封装js代码
基本的代码如下
复制代码 代码如下:
<html xmlns="
<head><title>
</title>
<script src="jquery
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:tAlertTest;"这种类似的绑定于是有测试如下
修改
复制代码 代码如下:
<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);
}
相应的html修改如下
复制代码 代码如下:
<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:t
AlertTest(
);" />
点击看看是不是正确的传递了参数一切正常看来这样就完成了
最后整理js代码
把通用的js代码放到一个js文件里这里放到了commonjs中不同的代码放在htm中修改后的所有代码如下
复制代码 代码如下:
<html xmlns="
<head><title>
</title>
<script src="jquery
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(
);" />
</body>
</html>
commonjs的代码
复制代码 代码如下:
function functionTest(text)
{
var alertText=text
$("#btnSave")click(function (e) {
alertTestInnert();
});
thisAlertTest= function (text)
{
alert(text);
}
function alertTestInnert()
{
alert(alertText);
}
}
