知识大全浅析js封装和作用域

Posted 2022-07-19 知

篇首语：内心简单，知足常乐，便是余生最美好的养生。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全浅析js封装和作用域相关的知识，希望对你有一定的参考价值。

在编写web软件时遇到一些可以共用js的情况于是就想着如何封装js代码基本需求很简单其实就是根据不同的情况封装js代码

　　基本的代码如下

复制代码代码如下: < 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" value="保存" /> <input type=button id="btnCancel" value="取消" onclick="javascript:t AlertTest;" /> </body> </>

　　再点击保存取消时需要一定的操作第一次的代码如上点击保存根本没反应很奇怪这种最常用的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" value="取消" onclick="javascript:t AlertTest;" />

　　点击没反应修改如下

复制代码代码如下: <input type=button id="btnCancel" value="取消" onclick="javascript:alertTestOuter;" />

　　点击还是没反应也没有错误在修改如下

复制代码代码如下: <input type=button id="btnCancel" value="取消" onclick="javascript:alertTestOuter();" />

　　这次有反应了看来是少了一对括号修改为封装的方法如下

复制代码代码如下: <input type=button id="btnCancel" 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" value="取消" onclick="javascript:t AlertTest( );" />

　　点击看看是不是正确的传递了参数一切正常看来这样就完成了 最后整理js代码 把通用的js代码放到一个js文件里这里放到了mon js中不同的代码放在中修改后的所有代码如下

复制代码代码如下: < xmlns=" <head><title> </title> <script src=jquery min js type=text/javascript></script> <script src=mon 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" value="保存" /> <input type=button id="btnCancel" value="取消" onclick="javascript:t AlertTest( );" /> </body> </>

　　 mon js的代码

复制代码代码如下: cha138/Article/program/Java/Javascript/201311/25500

知识大全 浅析js封装和作用域

知识大全浅析js封装和作用域