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

Posted 知

篇首语：内心简单，知足常乐，便是余生最美好的养生。本文由小常识网(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

相关参考