require.js中的define函数详解


Posted in Javascript onJuly 10, 2017

前言

模块不同于传统的脚本文件,它良好地定义了一个作用域来避免全局名称空间污染。它可以显式地列出其依赖关系,并以函数(定义此模块的那个函数)参数的形式将这些依赖进行注入,而无需引用全局变量。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 必须保证一致!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript 动态调整图片尺寸实现代码
Dec 28 Javascript
基于jQuery的试卷自动排版系统实现代码
Jan 06 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 Javascript
Javascript学习笔记之数组的遍历和 length 属性
Nov 23 Javascript
javascript使用正则表达式检测IP地址
Dec 03 Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
Sep 13 Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
Oct 10 Javascript
javascript关于“时间”的一次探索
Jul 24 Javascript
原生JavaScript之es6中Class的用法分析
Feb 23 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 Javascript
vue.js组件之间传递数据的方法
Jul 10 #Javascript
Node.js+Express+MySql实现用户登录注册功能
Jul 10 #Javascript
基于jQuery Easyui实现登陆框界面
Jul 10 #jQuery
Angular X中使用ngrx的方法详解(附源码)
Jul 10 #Javascript
angular实现spa单页面应用实例
Jul 10 #Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 #Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 #Javascript
You might like
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
PHP的变量类型和作用域详解
2014/03/12 PHP
php实现常见图片格式的水印和缩略图制作(面向对象)
2016/06/15 PHP
php集成动态口令认证
2016/07/21 PHP
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
Bootstrap表单Form全面解析
2016/06/13 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
jQuery利用sort对DOM元素进行排序操作
2016/11/07 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
小议Python中自定义函数的可变参数的使用及注意点
2016/06/21 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
哪些是python中web开发框架
2020/06/17 Python
学生如何注册Pycharm专业版以及pycharm的安装
2020/09/24 Python
世界上最大的餐具公司:Oneida
2016/12/17 全球购物
优秀教师工作感言
2014/02/16 职场文书
销售助理岗位职责
2014/02/21 职场文书
店面销售职位的职责
2014/03/09 职场文书
一位农村小子的自荐信
2014/04/07 职场文书
护士个人年终总结
2015/02/13 职场文书
护士求职自荐信范文
2015/03/04 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP
Python import模块的缓存问题解决方案
2021/06/02 Python
MyBatis 动态SQL全面详解
2021/10/05 MySQL
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫