javascript – Basic RequireS帮助 – 如何调用/定义函数?也使用onclick和jquery

前端之家收集整理的这篇文章主要介绍了javascript – Basic RequireS帮助 – 如何调用/定义函数?也使用onclick和jquery前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
帮帮我!

我是超级困惑的家伙…我不知道我在做什么

我一直在看着RequireJS和AMD教程昨天和今天的一天的例子,到了这一点,但是我认为我对于一个模块还有一个根本的误解.

>我有一堆从我的HTML元素调用“onClick”的函数

>如何用RequireJS定义我的函数,以便我可以调用它们?所以困惑:/我也不明白
>如何获取我的onLoad函数调用(在我的例子中它的$(function(),但是如何在RequireJS中启动它?)

我正在使用Node v0.10.12

  1. <html>
  2. ...
  3. <head>
  4. <script data-main="" src="libraries/require.js"></script>
  5. ...
  6. <script>
  7. ...
  8. //I really need all these javascript files for every function defined on this page...
  9. require(['simulatorConfiguration.js','modelConfiguration.js','libraries/jquery-1.10.2.min.js','libraries/jquery.lightBox_me.js','libraries/jquery-migrate-1.2.1.js','libraries/raphael-min.js'],function(start) {
  10.  
  11. $(function() {
  12.  
  13. loadPage(); //<--- CALL LOAD PAGE,but it can't find the function
  14. //do some jquery stuff
  15. });
  16.  
  17. });
  18.  
  19. //function that get's called on body onload!
  20. define('loadPage',function loadPage()
  21. {
  22. hideAllDivs();
  23. //more jquery stuff...
  24.  
  25. createModelMenu();
  26. //more jquery stuff...
  27. });
  28.  
  29. define('hideAllDivs',function hideAllDivs()
  30. {
  31. //some UI stuff...
  32.  
  33. });
  34.  
  35. define('createModelMenu',function createModelMenu()
  36. {
  37. //some jquery stuff...
  38. });
  39.  
  40. define('createTestMenu',function createTestMenu(model_key)
  41. {
  42. var javascriptLoc = "models/" + models[model_key].modelDir + "/testConfiguration.js";
  43. require([javascriptLoc],function(util) {
  44.  
  45. showModelInformation(model_key);
  46. //some Jquery stuff...
  47. });
  48. });
  49.  
  50. define('showModelInformation',function showModelInformation(model_key)
  51. {
  52. hideAllDivs();
  53. //some jquery stuff
  54. });
  55.  
  56. define('showTest',function showTest(test_key)
  57. {
  58. hideAllDivs();
  59. //some RaphaelJS stuff...
  60. });
  61.  
  62.  
  63. define('takeControl',function takeControl()
  64. {
  65. //some UI stuff
  66. });
  67.  
  68. define('giveUpControl',function giveUpControl()
  69. {
  70. //some UI stuff...
  71.  
  72. });
  73. </script>
  74. </head>
  75. <body>
  76. ...
  77. <li><a href="#" id="AoD" onclick="showTests(this.id)">Audio On Demand</a></li>
  78. ...
  79. <input type="submit" value="Yes,Release Control" onclick="giveUpControl()">
  80. ....
  81. <input type="submit" value="Take Control" onclick="takeControl()">
  82. ....
  83. </body>

我需要做如下事情:

  1. //function that get's called on body onload!
  2. define('loadPage',function loadPage()
  3. {
  4. return function(loadPage)
  5. {
  6. hideAllDivs();
  7. //more jquery stuff...
  8.  
  9. createModelMenu();
  10. //more jquery stuff...
  11. }
  12. });
  13. //and call it with loadPage.loadPage(); ?

或者可能是这样:

  1. //function that get's called on body onload!
  2. define('loadPage',function loadPage()
  3. {
  4. return function()
  5. {
  6. hideAllDivs();
  7. //more jquery stuff...
  8.  
  9. createModelMenu();
  10. //more jquery stuff...
  11. }
  12. });

要么

  1. function(loadPage)?

我看过这些类似的问题:

> Calling methods in RequireJs modules from HTML elements such as onclick handlers
> How do I use jquery ui with requirejs
> How can I include jQueryUI in my modular backbone.js app using RequireJS?

这些也是有帮助的,但还没有:

> http://hippieitgeek.blogspot.se/2013/07/load-jquery-ui-with-requirejs.html
> http://www.requirejs.org/jqueryui-amd/example/webapp/app.html
> https://github.com/jrburke/jqueryui-amd

我尝试将函数分成另一个文件,所以我有“index.html”和“Logic.js”…这里是要点:

> https://gist.github.com/anonymous/6439418

=========================================

https://gist.github.com/anonymous/6470443

解决方法

您需要(a)创建和(b)加载模块所需的最低代码如下所示:
  1. // (a) Create two modules,'hideAllDivs' and 'loadPage'.
  2. define ('hideAllDivs',[],function () {
  3. return function() {
  4. };
  5. });
  6.  
  7. define('loadPage',['hideAllDivs'],function(hideAllDivs)
  8. {
  9. return function()
  10. {
  11. hideAllDivs();
  12. //more jquery stuff...
  13.  
  14. createModelMenu();
  15. //more jquery stuff...
  16. };
  17. });
  18.  
  19. // (b) Load the loadPage module and call it.
  20. require(['jquery-blah-blah','loadPage','anotherModule'],function($,loadPage,anotherModule) {
  21. $(function() {
  22. loadPage();
  23. });
  24. });

强烈推荐阅读:http://requirejs.org/docs/api.html#define

猜你在找的jQuery相关文章