Require.js入门讲解(一）

最新推荐文章于 2024-04-16 15:56:03 发布
最新推荐文章于 2024-04-16 15:56:03 发布
阅读量298 收藏
点赞数 
 

  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目录结构如下：

 

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，和获取更多信息

xingye123_
关注
requireJs 教学视频，找了好久才找到
03-23
requireJs 教学视频，对于java人员必须会使用，找了好久才找到，对于企业当中必须会用到的
require函数
weixin_30871293的博客
09-15 181
require API 介绍https://github.com/amdjs/amdjs-api/wiki/require require是一个基于AMD规范实现的函数，它区别于传统的CommonJS require规范。因为它能够异步地加载动态的依赖，所以，我们对基于require的回调方式有了更多的需求。 局部require vs 全局require 局部require可以被解析...
视频教程-requirejs新手上手课-JavaScript
weixin_32290971的博客
05-28 136
requirejs新手上手课 2009年4月创办 淄博日诺网络科技有限公司 ...
node.js入门
11-03
以下是对Node.js入门知识的详细讲解： 1. **安装Node.js** 在开始学习之前，首先需要在计算机上安装Node.js。访问Node.js官方网站（https://nodejs.org/）下载适合操作系统的安装包，按照提示完成安装。 2. **...
Node.js入门经典
06-01
《Node.js入门经典》是一本全面介绍Node.js的教程，旨在帮助初学者快速掌握这一强大的JavaScript后端开发框架。Node.js以其高效的非阻塞I/O模型和事件驱动机制，在Web开发领域占据了重要的地位，尤其适合构建实时...
浅谈webpack4.x 入门(一篇足矣)
12-09
本文将详细讲解如何从零开始配置Webpack 4的开发环境，以及处理CSS、JS、图片等资源。 首先，我们需要进行全局安装Webpack和它的命令行工具： ```bash npm install -g webpack webpack-cli ``` 然后，创建项目...
node.js入门手册
05-13
Node.js是一种基于Chrome V8引擎的JavaScript运行环境，它允许开发者在服务器端使用JavaScript进行编程。这个"node.js入门手册"很可能包含了以下一系列关键知识点： 1. **基础概念**：Node.js的基础概念包括事件...
NODE.JS 两本入门书籍
08-22
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它让开发者能够使用 JavaScript 来进行服务器端编程，极大地拓宽了JavaScript的应用范围。这两本书籍——《Node.js入门》和《深入浅出Node.js》对于初学...
一、Require函数
零度flying
08-13 3021
Require函数 Require函数: 用于引入模块、 JSON、或本地文件。 可以从 node_modules 引入模块。 可以使用相对路径（例如 ./、 ./foo、 ./bar/baz、 …/foo）引入本地模块或 JSON 文件，路径会根据 __dirname定义的目录名或当前工作目录进行处理 // 引入本地模块： const myLocalModule = require('./path/myLocalModule'); // 引入 JSON 文件： const jsonData = req.
requirejs详细教程
wangzhiguo9261的博客
04-13 457
https://www.cnblogs.com/HCJJ/p/6611669.html
require.js的用法
了凡
05-16 642
require.js的用法不错的文章： Javascript模块化编程（三）：require.js的用法 官网介绍http://www.requirejs.cn/ 视频教程RequireJs视频教程require.js的诞生，就是为了解决这两个问题： 实现js文件的异步加载，避免网页失去响应 管理模块之间的依赖性，便于代码的编写和维护 以例子来说明 如下的项目结构：在index.html中<sc
require() 函数
freedom的专栏
01-24 899
require() 函数require() 函数与 include() 相同，不同的是它对错误的处理方式。include() 函数会生成一个警告（但是脚本会继续执行），而 require() 函数会生成一个致命错误（fatal error）（在错误发生后脚本会停止执行）。如果在您通过 include() 引用文件时发生了错误，会得到类似下面这样的错误消息：PHP 代码：
Require.js用法
lihefei_coder的博客
04-20 317
载入Require.js <script src="js/require.js" data-main="js/main"></script> 定义模块 //普通模块 define(function() { return { method1: function() {}, method2: function() {}, }; }); //依赖其他模...
常用代码之五：RequireJS, 一个Define需要且只能有一个返回值/对象，一个JS文件里只能放一个Define....
weixin_33712987的博客
11-12 97
RequireJS 介绍说一个JS文件里只能放一个Define，这个众所周知，不提。 关于Define，它需要有一个返回值/对象，且只能有一个返回值/对象，这一点却是好多帖子没有提到的，但又非常重要的，一不留神就会报错。 别的不说了，上代码： 1. require.htm代码如下： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran...
require和import（模块导入/导出）
最新发布
weixin_48363291的博客
04-16 1262
浅谈require和importrequire
js中的defind()函数和require()函数的使用
weixin_42498482的博客
07-27 2536
解析define()函数和require()函数之间的关系，及define()定义的模块正确的引入方式引入
ES6 系列之模块加载方案
weixin_33724059的博客
11-13 286
前言 本篇我们重点介绍以下四种模块加载规范： AMD CMD CommonJS ES6 模块 最后再延伸讲下 Babel 的编译和 webpack 的打包原理。 require.js 在了解 AMD 规范之前，我们先来看看 require.js 的使用方式。 项目目录为： * project/ * index.html * vender/ * main.js ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值