require js之define 函数

2023-11-03

require js define 函数

模块不同于传统的脚本文件,它良好地定义了一个作用域来避免全局名称空间污染。它可以显式地列出其依赖关系,并以函数(定义此模块的那个函数)参数的形式将这些依赖进行注入,而无需引用全局变量。RequireJS的模块是模块模式的一个扩展,其好处是无需全局地引用其他模块。 RequireJS的模块语法允许它尽快地加载多个模块,虽然加载的顺序不定,但依赖的顺序最终是正确的。同时因为无需创建全局变量,甚至可以做到在同一个页面上同时加载同一模块的不同版本。

  • 在定义一个模块的时候,方法的第一行写一个“use strict”;这是干什么的?

use strict --严格模式,这种模式使得Javascript在更严格的条件下运行。

  • 消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;
  • 消除代码运行的一些不安全之处,保证代码运行的安全;
  • 提高编译器效率,增加运行速度;
  • 为未来新版本的Javascript做好铺垫。

1. 简单的值对模块

其实就是把文件名称作为name参数传入,若依赖该组件那么返回的就是一个对象!

define({
  name: "hehe",
  age: "18"
});

2. 简单的函数模块

和上面一样文件名称作为默认的name,与上面的差异是,可以提前执行返回值外的代码

define(function() {
  return {
    name: "hehe",
    age: "18"
  };
});

3. 依赖函数模块

define([
  'angular',
  'jsUtil',
  'modules/meet/modules',
  'modules/meet/services/Meet',
  'modules/meet/services/MeetRemoteService'
],function(require) {
  'use strict';

  var module = angular.module('meet.services');

  module.factory('MeetService', function(Meet, MeetRemoteService) {
    var service = {
      name: 'hehe',
      age: '18'
    };
    return service;
  });
});

和上面一样,关键是依赖模块是以返回值作为入参的形式传入,如果加载错误或者没有找到对应的模块,那么得到的入参是Undefiend,需要注意!

4. 返回函数模块

define([
  'angular',
  'jsUtil',
  'modules/meet/modules',
  'modules/meet/services/Meet',
  'modules/meet/services/MeetRemoteService'
],function(require) {
  'use strict';

  var module = angular.module('meet.services');

  module.factory('MeetService', function(Meet, MeetRemoteService) {
    var service = {};
    service.getWeekOfMeet = function(weekFlag, date) {

      return MeetRemoteService.get(weekFlag, date).then(function(data) {
        data.content = Meet.sortMeet(data.content);
        return data;
      });
    }
    return service;
  });
});

和上面一样,这里返回的是函数,在依赖模块中把他作为函数对象调用即可,其实这是一个简单的闭包!

5. 完整定义

define('sample3' ,['sample','sample1'],function (sample,sample1) {
  var sample4 = require('sample4');
  return function(){
    alert(sample.name+':'+sample.sayhell());
  } 
});

这就是完整定义,有名称,有依赖,有回调,内部还有common的形式引入依赖对象!

关于define函数的name和require函数的依赖名称之间的关系

  • define(name,[] , callback); 这个name可以省掉,默认是文件名称;当然也可以自定义,一旦我们定义了name,根据源代码我们可以发现define函数内部其实就是把这个name以及依赖模块、回调函数作为一个对象存储在全局的数组当中,也就是 defQueue.push([name,deps,callback]);那么这个name就是这个组件注册的的ID!

  • require([name , name2],callback); 系统首先会在全文检索path中是否对应的路径,如果没有自然把他作为路径拼接在baseUrl上去异步加载这个js文件,加载时从源代码中可以看到 ,var data = getScriptData(evt);返回的 data.id 其实就是name,然后执行contex.completeLoad(node.id),其内部就很清楚了,把define中注册的name和这里得到的name进行比较如果相等就执行。所以道理就是:require 和 define 的 name 必须保证一致!



    写在后面

    GitHub上集大家之力搞了一个前端面试题的项目,里面都是大家面试时所遇到的题以及一些学习资料,有兴趣的话可以关注一下。如果你也有兴趣加入我们的话,请在项目中留言。项目同时也可以在gitbook上查看。

    [InterviewLibrary-GitHub](https://github.com/springHyc/InterviewLibrary)

    [InterviewLibrary-gitbook](https://hyc.gitbooks.io/interviewlibrary/content/)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

require js之define 函数 的相关文章

  • 解决Multiple dex files define Landroid/support/v4/accessibilityservice的问题

    Error Execution failed for task 39 DeviceManage transformClassesWithDexForDebug 39 gt com android build api transform Tr
  • #ifndef.#define, #endif 的用法

    文件中的 ifndef define endif 很关键 xff0c 是为了避免多重包含 xff0c 比如如果两个C文件同时包含同一头文件 xff0c 那么就会出现问题 xff0c 所以使用这种方法可以有效避免这种情况 一般用法 xff1a
  • python中define函数_Python中的函数

    函数基础 01 函数的快速体验 1 1 快速体验 所谓函数 xff0c 就是把 具有独立功能的代码块组织为一个小模块 xff0c 在需要的时候 调用 函数的使用包含两个步骤 xff1a 定义函数 封装独立的功能 调用函数 享受 封装的成果
  • tepedef和define的区别

    xfeff xfeff 1 xff1a typedef 可以简化复杂的类型声明 2 xff1a 定义与平台无关的类型 3 xff1a 可以与 struct 结合使用 4 xff1a typedef 和 define 执行时间不同 关键字ty
  • #ifndef #define #endif 防止头文件被重复引用

    想必很多人都看过 头文件中的 ifndef define endif 防止该头文件被重复引用 但是是否能理解 被重复引用 是什么意思 是不能在不同的两个文件中使用include来包含这个头文件吗 xff1f 如果头文件被重复引用了 xff0
  • typedef和define有什么区别

    typedef和define都是替一个对象取一个别名 xff0c 以此增强程序的可读性 xff0c 区别如下 xff1a xff08 1 xff09 原理不同 define是C语言中定义的语法 xff0c 是预处理指令 xff0c 在预处理
  • dwm-1000 测距总是出现 #define SYS_STATUS_RXPTO 0x00200000UL /* Preamble detection timeout */

    ex 05b ds twr resp 程序 总是出现 致使官方的代码 无法实现通讯 define SYS STATUS RXPTO 0x00200000UL Preamble detection timeout 需要着重修改参数
  • #define、typedef 和 using之间的联系和区别

    目录 一 define 1 含义 2 用处 1 条件编译 2 解宏 3 文件包含 二 typedef 1 含义 2 用处 1 数据类型别名 2 指针别名 3 结构体别名 4 与平台无关的数据类型 三 using 1 含义 2 用处 1 权限
  • C语言带参#define个人理解

    之前接触带参 define比较少 xff0c 这几天 查阅stm32官方固件库 xff0c 看到以下代码有点懵 xff1a define IS GPIO ALL PERIPH PERIPH PERIPH 61 61 GPIOA PERIPH
  • const与define的区别

    1 define是预编译指令 xff0c const是普通变量的定义 xff0c define定义的宏是在预处理阶段展开的 xff0c 而const定义的只读变量是在编译运行阶段使用的 2 const定义的是变量 xff0c 而define
  • 关于C++中的#define

    include lt iostream gt using namespace std define ADD x y x 43 y 试卷上是减号 xff0c 本人觉得是加号 int main int m 61 3 int n 61 4 m 4
  • C++- #define 和 const 有什么区别?

    回答如下 xff1a 定义不同 xff1a define 是C 43 43 预处理器的指令 xff0c 用于定义宏 xff0c const是C 43 43 关键字 xff0c 用于定义常量 作用对象不同 xff1a define 定义的宏
  • C++中#define和const的区别

    一 define是预处理指令 xff08 pre processor directive xff09 而const是关键字 define用于给一些值定义名称 字符串 xff0c 这样定义的字符串在C C 43 43 中称为宏定义 xff0c
  • C语言--符号常量

    在C语言中 可以用一个标识符来表示一个常量 称之为符号常量 其特点是编译后写在代码区 不可寻址 不可更改 属于指令的一部分 一 符号常量定义用 define 符号常量在使用之前必须先定义 其一般形式为 形式为 define 标识符 常量 e
  • define( )和defined( )函数的区别

    PHP中define 函数用来定义一个常量 而defined 函数用来检验常量是否存在 存在则返回true 否则返回false
  • require js之define 函数

    require js define 函数 模块不同于传统的脚本文件 它良好地定义了一个作用域来避免全局名称空间污染 它可以显式地列出其依赖关系 并以函数 定义此模块的那个函数 参数的形式将这些依赖进行注入 而无需引用全局变量 Require
  • 数字电路设计之verilog的define和parameter

    1 语法定义 parameter xx yy define xx yy 注 句尾无分号 2 作用范围 parameter 作用于声明的那个文件 define 从编译器读到这条指令开始到编译结束都有效 或者遇到 undef命令使之失效 后来我
  • C++预处理器

    预处理器是一些指令 指示编译器在实际编译之前所需完成的处理 define define用于定义宏 宏是一个代码级的文本替换 因为替换发生在编译之前 神奇的例子 来猜猜输出结果 define STR s s 会给 s 加上双引号 s defi
  • VC++实用宏定义

    前言 在日常的编程工作中 常常定义一些实用的宏方便调用 该文章将收集一些常用的宏供大家参考 欢迎大家讨论和添加 指针释放 最常用的就是指针的安全释放 对应new的释放 ifndef ReleasePtr define ReleasePtr
  • 21,verilog之宏define介绍

    注 学习 交流就在博主的个人weixin公众号 FPGA动力联盟 留言或直接 博主weixin fpga start 私信 宏define提供用一个相对简单的文字来表示一大段真正有意义的文字作用 换句话说 就是综合软件见到定义的宏 就用这个

随机推荐

  • Ubuntu安装Samba服务

    1 ubuntu 和windos共享用什么 Samba 共享 Samba 是一种用于 Linux 和 Windows 之间文件共享的协议和工具集 您可以在 Ubuntu 上安装和配置 Samba 服务器 使其能够与 Windows 计算机共
  • 模拟电路设计(23)---模数和数模转换器概述

    ADC概念 现在我们对测温已经习以为常 进出公共场所 时不时就要测量体温 电子温度计对着你手腕 或额头 或耳朵 滴的一声 温度就显示出了 这个过程就涉及本文要介绍的模数转换 模数转换 即Analog to Digital Converter
  • 交换机VLAN及中继配置

    Vlan中继 trunk 是以太网接口之间的点对点链路 负责在单个链路上传输多个VLAN流量 1 配置vlan 一般都是使用这种全局静态配置模式 不使用数据库配置模式来配置vlan了 configure terminal config vl
  • java并发包:概论

    本文转载至 http blog csdn net a910626 article details 51900917 为什么要学习并发 今天和一哥们聊天 聊着聊着聊到钱的方面 当时我就说 全世界60亿人 要是每人给我一块钱那不就发财了啊 哥们
  • Android_API_28使用HTTP请求_笔记

    Google表示 为保证用户数据和设备的安全 针对下一代 Android 系统 Android P 的应用程序 将要求默认使用加密连接 这意味着 Android P 将禁止 App 使用所有未加密的连接 因此运行 Android P 系统的
  • Java中的方法(method)

    1 方法概述 什么是方法 方法是具有独立功能的代码块组织成为一个整体 使其具有特殊功能的代码集 注意 方法必须先创建才可以使用 该过程称为方法定义 方法创建后并不是直接运行的 需要手动使用后执行 该过程称为方法调用 2 方法的定义和调用 2
  • Vue 3 中动态获取高宽

    应用场景 一般用于父组件动态变换宽高 子组件需要同步修改宽高 实现简介 Vue3 写法 思路 1 监听父组件的 宽高 2 将监听到的高度赋给 你需要设置的对象 引入监听 并实现 如何得到动态宽度 此时的 div2 会与 divDom 宽度会
  • Spring Cloud Alibaba之服务容错组件 - Sentinel [规则持久化篇]

    规则持久化 拉模式 在Sentinel控制台对某个微服务的接口资源配置了流控 降级等规则后 若重启了该微服务 那么配置的相关规则就会丢失 因为Sentinel默认将规则存放在内存中 每次重启微服务都得重新配置规则显然是不合理的 所以我们需要
  • 量化投资学习-33:兼听则明,偏听则暗,多种指标综合适用-1

    兼听则明 偏听则暗 量化交易指标需要综合多个技术指标 一 上升期 1 上涨期上涨 买入与持有 1 支撑线 直线支撑 动态划线 均线支撑 稳定 历史数据 支撑线上 持有 2 波浪 1浪涨起点 3浪涨起点 5浪起点 3 均线 多头发散排列 5日
  • ❀数据集 ❀ 了解place365,运行出错解决。持续更新中...

    place365官网 Places A 10 million Image Database for Scene Recognition 官方说明 Places 数据集的设计遵循人类视觉认知的原则 我们的目标是建立一个视觉知识核心 可用于训练
  • WPF编程,Live Charts使用说明(40)——对称行(负堆积行)

    前台 using System using System Windows Controls using LiveCharts using LiveCharts Wpf namespace Wpf CartesianChart Negativ
  • 为啥一个java文件只能有一个public类

    以后 如果有人问你为什么一个java文件只能有一个public类呢 答 很简单啊 因为public类的名字要和java文件名相同 文件名只有一个 当然只能有一个public类 问 good 那为神马文件名必须要和public类名字相同呢 不
  • Blob+定位+特征来识别药片缺陷

    原图 定位 结果 代码 This example demonstrates an application from the pharmaceutical industry The task is to check the content o
  • 【Tensorflow2.0】基于Docker的Tensorflow2.x安装教程

    文章目录 1 Docker Engine安装 1 1 填加docker ce安装源到系统 1 2 docker ce 安装 1 3 国内安装环境设置 1 3 1 docker 国内源设置 1 3 2 docker hub国内源设置 1 3
  • remote: Invalid username or password. fatal: Authentication failed for .......

    最近一直没有使用GitHub提交代码 今天提交了点东西 发现怎么都push不成功 我就纳闷了 这段时间没有做任何事情 这是怎么回事呢 我使用的sourcetree提交代码 首先它会弹出一个框框让你输入 用户名密码 然而输入了很多次 还是re
  • 达梦数据库图形化管理界面manager打开报错

    达梦数据库管理工具manager打开报如下错误 Locking is not possible in the directory home diske dmdbms tool configuration org eclipse osgi A
  • Linux基础(2)用户操作

    该文章主要为完成实训任务及总结 详细实现过程及结果见 参考文章 参考文章 https howard2005 blog csdn net article details 126843544 学习目标 用户账号管理 Linux用户操作 Linu
  • 代码覆盖率和测试覆盖率_代码覆盖率与测试覆盖率; 哪个更好?

    代码覆盖率和测试覆盖率 测试覆盖率和代码覆盖率是衡量代码有效性的最流行方法 尽管这些术语有时会互换使用 因为它们的基本原理相同 但是它们并不像您想象的那样相似 很多时候 我注意到测试团队和开发团队对这两个术语的使用感到困惑 这就是为什么我想
  • VBA中实现数组排序的多种方法

    VBA里面没有现成的Sort方法可以使用 VBA里面要对数组进行排序 现有的通常做法 1 通过单元格赋值以后利用工作表里的Sort方法进行排序 2 通过SQL实现 也需要调用单元格区域存放数据 3 直接写循环语句通过算法来实现 除了上述方法
  • require js之define 函数

    require js define 函数 模块不同于传统的脚本文件 它良好地定义了一个作用域来避免全局名称空间污染 它可以显式地列出其依赖关系 并以函数 定义此模块的那个函数 参数的形式将这些依赖进行注入 而无需引用全局变量 Require