在前面学习了RequireJS库模块的定义,这次要来学习模块之间进行相互调用了。比如再添加一个模块叫做common.js, 放在跟register1.js一样的目录下面。
common.js的代码如下:
register1.js的代码如下:
在main.js模块里修改如下:
boost库入门基础
common.js的代码如下:
define(['jquery'], function($){ return { // 合法的邮件 email_pattern : /^([.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/ } });
register1.js的代码如下:
define(['jquery', 'common'], function($, common){ return { init: function() { alert("加载register1.js模块"); alert(common.email_pattern); } } });
在main.js模块里修改如下:
// 全局配置 require.config({ baseUrl: 'static/js', paths: { jquery: 'lib/jquery-3.3.1.min', common: 'app/common', register: 'app/register1' } }); require(['jquery','register'],function($, register){ $(document).ready(function() { alert("加载模块完成"); register.init(); }); });
在这里主要增加common模块的加载,require里请求这个模块加载,然后加载事里写上register.init()来调用。通过这样的方式,就可以把公共的代码放到一个文件里,可以给多个文件进行调用。同时可以把复杂代码分离开来,容易理解和维护。
最后可以看html的代码都没有变动,如下:
<html> <head> <meta charset="utf-8"> <title> 使用模块相互调用的例子 </title> <script src="static/js/lib/require.min.js" data-main="static/js/main.js" ></script> </head> <body> <form id="register" action="" method="POST"> <table> <tbody> <tr> <td><label for="email">邮箱</label></td> <td><input type="text" id="email" name="email" /><span class="validate_tip"></span></td> </tr> <tr> <td><label for="username">帐号</label></td> <td><input type="text" id="username" name="username" /><span class="validate_tip"></span></td> </tr> <tr><td><input type="submit" id="register_btn" value="注册" /></td></tr> </tbody> </table> </form> </body> </html>
输出结果如下: