RequireJS define 详细介绍

1、定义模块

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

一个文件应该只定义 1 个模块。多个模块可以使用内置优化工具将其组织打包。

2、简单的值对模块

define({
    color: "black",
    size: "unisize"
});

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

3、简单函数模块

define(function () {
    //Do setup work here
    return {
        color: "black",
        size: "unisize"
    }
});

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

4、依赖函数模块

define([‘sample‘,‘sample1‘],function (sample,sample1) {
    return {
        color: sample.color,
        size:  sample2.sayhell()
    }
});

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

5、返回函数模块

define([‘sample‘,‘sample1‘],function (sample,sample1) {
    return function(){
        alert(sample.name+‘:‘+sample.sayhell());
    }
});

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

6、完整定义

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

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

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

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

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

标签加载完成之后,获取标签的唯一标识name

通过把之前得到的name比较defQueue中的元素name进行组件调用,下图可以看出 require中是 sample/js/sample , 而define则是 sample , 所以不会执行sample组件,那么,在require的回调函数中也就不会获取到 sample的返回值!

时间: 2024-08-01 09:00:03

RequireJS define 详细介绍的相关文章

Nagios各独立配置文件详细介绍

以下介绍各配置文件的详细情况 查看安装正文请点击此处 a. templates.cfg文件 nagios主要用于监控主机资源以及服务,在nagios配置中称为对象,为了不必重复定义一些监控对象,Nagios引入了一个模板配置文件,将一些共性的属性定义成模板,以便于多次引用.这就是templates.cfg的作用. 下面详细介绍下templates.cfg文件中每个参数的含义: define contact{         name                            gene

[转]PHP之APC缓存详细介绍(学习整理)

From : http://www.2cto.com/kf/201210/160140.html 1.APC缓存简介APC,全称是Alternative PHP Cache,官方翻译叫”可选PHP缓存”.它为我们提供了缓存和优化PHP的中间代码的框架. APC的缓存分两部分:系统缓存和用户数据缓存.系统缓存它是指APC把PHP文件源码的编译结果缓存起来,然后在每次调用时先对比时间标记.如果未过期,则使用缓存的中间代码运行.默认缓存 3600s(一小时).但是这样仍会浪费大量CPU时间.因此可以在

ThinkPHP使用分组详细介绍(十七)

原文:ThinkPHP使用分组详细介绍(十七) 使用分组(模块分组) *就是将多个项目合并到一个项目/应用去(就是Home.Admin) ---分组不分组看自己的建立项目习惯,个人习惯用根目录配置生成前后台项目方式, ---因为分组方式,要控制啊配置啊等文件都要对应建立自己的文件目录,麻烦 步骤一:配置文件生成对应项目 ├─App              --由于入口文件配置生成 App 项目/应用 ├─ThinkPHP    --核心入口文件 ├─index.php   - -入口配置文件

红黑树详细介绍三

根据之前红黑树的原理和<算法导论>上面的伪代码,我用代码将增加和调整的代码实现了一下,如有不对请大家指正.代码可以结合前两篇文章看. 红黑树的详细介绍一 红黑树详细介绍二 /* * ===================================================================================== * * Filename: rbtree->h * * Description: red black tree * * Version:

UITextField详细介绍

//初始化textfield并设置位置及大小 UITextField *text = [[UITextField alloc]initWithFrame:CGRectMake(20, 20, 130, 30)]; //设置边框样式,只有设置了才会显示边框样式 text.borderStyle = UITextBorderStyleRoundedRect; typedef enum { UITextBorderStyleNone, UITextBorderStyleLine, UITextBord

thinkPHP 模板中的语法知识 详细介绍(十二)

本章节:介绍模板中的语法,详细的语法介绍 一.导入CSS和JS文件    ==>记住常量的是大写 1.css link .js  scr <link rel='stylesheet' type='text/css' href='__PUBLIC__/Css/test.css'/> <script src='__PUBLIC__/Js/test.js'></script> 2.import(==默认是在Public文件夹下) //导入Public文件夹下面的Js目录

kubernetes实战篇之helm示例yaml文件文件详细介绍

系列目录 前面完整示例里,我们主要讲解helm打包,部署,升级,回退等功能,关于这里面的文件只是简单介绍,这一节我们详细介绍一下这里面的文件,以方便我们参照创建自己的helm chart. Helm Chart 结构 Chart 目录结构 mychart/ Chart.yaml # Yaml文件,用于描述Chart的基本信息,包括名称版本等 LICENSE # [可选] 协议 README.md # [可选] 当前Chart的介绍 values.yaml # Chart的默认配置文件 requi

Django对中间件的调用思想、csrf中间件详细介绍、Django settings源码剖析、Django的Auth模块

目录 使用Django对中间件的调用思想完成自己的功能 功能要求 importlib模块介绍 功能的实现 csrf中间件详细介绍 跨站请求伪造 Django csrf中间件 form表单 ajax csrf相关装饰器 在CBV上加csrf装饰器 Django settings源码剖析及模仿使用 Django settings源码剖析 查看内部配置文件 模仿使用 Auth模块 auth简介 auth模块常用方法 创建用户 校验用户名和密码 保存用户登录状态 判断当前用户是否登录 校验原密码 修改密

微铺子点单系统详细介绍 - 争做国内最专业的微信商店平台,微信外卖订餐系统!

什么是微铺子? 微铺子是国内专业的微信点单系统,集成了外卖.点餐.订座等众多功能.通过微铺子,店家可以在微信上建立店铺,消费者只需关注店家的帐号,即可浏览商品与店家的信息,消费者关注到商家后,根据提示,进行点击点单,简单三步,15秒内,即可完成订餐.店家可以通过电脑后台.电子邮件.短信或无线打印机多种方式即时查看订单,并提供相应的服务. 微铺子系统适用于:餐饮.酒店.水果店.蛋糕店.花店.零售.超市等. 微铺子从创立到与合作商家的长期测试,再到正式投入商用,期间不断根据客户的需求完善产品,不断开