您的位置: 首页  >  文章  >  Require.js入门讲解(一）

Require.js入门讲解(一）

分类: 文章 • 2024-08-07 12:30:40 
 

  1. test:function(a){

  2. console.log(a+"你好！");

  3. a.f();

  4. info();

  5. }

  6. }

  7. });

 也可通过如下方式定义模块，其中require,均为外部传入的模块命名对象

 

  1. define(function(require,$){

  2. var data={text:""};

  3. var obj=new Object({

  4. c1:10,

  5. text: function (str) {

  6. data.text=str;

  7. },

  8. doEach:function(){

  9.  

  10. alert(data.text);

  11. },

  12. doNext:function(){

  13. alert(this.text);

  14. }

  15. });

  16.  

  17. //==========num 相当于是匿名函数function()的返回结果================

  18. var num=(function(){

  19.  

  20. var m1=function(a,b){

  21. return a+b;

  22. }

  23.  

  24. var m2=function(a,b){

  25. return a-b;

  26. }

  27.  

  28. //===========返回一个对象======================

  29. return {m1:m1,m2:m2};

  30.  

  31. })();

  32.  

  33. //obj.c2=1000;

  34. var objTmp={c2:1000,showC2:function(){

  35. obj.c2=obj.c2+1000;

  36. alert(obj.c2);

  37.  

  38. }};

  39.  

  40. obj=$.extend(obj,objTmp);

  41.  

  42. var obj1=(function(mod){

  43.  

  44. mod.showString=function()

  45. {

  46. alert("this is a string");

  47. }

  48. return mod;

  49. //===========下面的obj相当于是function(mod)的传入参数=====================

  50. })(obj);

  51.  

  52. return {

  53. obj:obj,

  54. num:num,

  55. data:data

  56. }

  57. }(require,$));

四、应用模块

使用require函数加载已定义的模块，示例代码如下：

 

  1. //=============命名全局对象app==========================

  2. var app;

  3. //=============导入jquery模块，命名为对象$============================

  4. require(["jquery"],function($){

  5.  

  6. console.log("the jquery load succes!");

  7.  

  8. //=============导入app目录下的app模块文件，将其命名为app1变量===========

  9. require(["app/app"],function(app1){

  10.  

  11. function setClickEvent(btnName)

  12. {

  13. app.obj.text(btnName);

  14. //===========好像在jquery中不能向一般为document 添加元素事件 事件==事件函数的方式增加事件响应，而是事件（事件响应函数）；===切记切记

  15. $(btnName).click(app.obj.doEach);

  16. $(btnName).text(btnName);

  17. }

  18.  

  19. //======回调函数中的参数app就是创建的模块对象本身=======

  20. var tmp={

  21. sex:"male",

  22. old:34

  23. };

  24.  

  25. //=============赋值全局对象====================

  26. app=$.extend(app1,tmp);

  27. //=============执行全局对象方法==================

  28. app.obj.doEach();

  29.  
  30.  

  31. //===============增加ready事件相应函数=================================

  32. $(document).ready(function(){

  33. //===============直接应用同一模块中的方法======================

  34. setClickEvent("#btn1");

  35. setClickEvent("#btn2");

  36. setClickEvent("#btn3");

  37. });

  38.  

  39. /*require(["app/addEvent"],function(event){

  40. console.log("event add");

  41. });*/

  42. });

  43. });

  44.  

  45. ​

require()函数接受两个参数。第一个参数是一个数组，表示所依赖的模块；第二个参数是一个回调函数，当前面指定的模块都加载成功后，它才会被调用。

五、完整例子

js目录结构如下：

 

Require.js入门讲解(一）

html文件：

 

  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4. <meta charset="UTF-8">

  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">

  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">

  7. <title>Document</title>

  8. </head>

  9. <body>

  10. <script src="js/require.js" data-main="app.js"></script>

  11. </body>

  12. </html>

主模块js：

 

  1. require.config({

  2. //By default load any module IDs from js/

  3. baseUrl: 'js',

  4. //except, if the module ID starts with "pb"

  5. paths: {

  6. pb: '../pb'

  7. },

  8. shim: {

  9. 'world': {

  10. deps:['animalWorld'],

  11. // use the global 'Backbone' as the module name.

  12. exports: 'world'

  13. }

  14. }

  15. });

  16. require(['cat','dog','world'], function (cat,dog,world) {

  17. world.world();

  18. cat.say();

  19. dog.say();

  20. });

animial.js

 

  1. define([], function() {

  2. 'use strict';

  3. function _showName(name){

  4. console.log(name);

  5. }

  6. return {

  7. say(words){

  8. console.log(words);

  9. },

  10. showName(name){ //练习私有方法

  11. _showName(name);

  12. }

  13. }

  14. });

cat.js:

 

  1. define([

  2. 'animal'

  3. ], function(animal) {

  4. 'use strict';

  5. return {

  6. say(){

  7. animal.say("喵喵");

  8. animal.showName("猫");

  9. }

  10. }

  11. });

dog.js

 

  1. define([

  2. 'animal'

  3. ], function(animal) {

  4. 'use strict';

  5. return {

  6. say(){

  7. animal.say("汪汪");

  8. animal.showName("狗");

  9. }

  10. }

  11. });

欲更多的了解requie.js可以查阅： https://www.runoob.com/w3cnote/requirejs-tutorial-1.html，和获取更多信息

相关推荐