博客
关于我
RequireJS极简入门教程
阅读量:287 次
发布时间:2019-03-01

本文共 2903 字,大约阅读时间需要 9 分钟。

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and . Using a modular script loader like RequireJS will improve the speed and quality of your code.

随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作、模块复用、单元测试等等一系列复杂的需求。


requirejs

RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一。RequireJS压缩后只有14K,轻量。它还同时可以和其他的框架协同工作。

RequireJS核心功能:

声明不同js文件之间的依赖
可以按需、并行、延时载入js库
可以让我们的代码以模块化的方式组织
初看起来并不复杂。

HOW TO

在HTML中,添加这样的 <script> 标签:

<!-- JavaScript --><script data-main="js/main" src="js/libs/require/require.js"></script>

属性 data-main 是告诉requirejs:你下载完require.js以后,马上去载入真正的入口文件main.js。它一般用来对requirejs进行配置,并且载入真正的程序模块。

main.js

在main.js 中通常做两件事:

  1. 配置requirejs 比如项目中用到哪些模块,文件路径是什么

  2. 载入程序主模块

/** * 真正的入口文件main.js。它一般用来对requirejs进行配置,并且载入真正的程序模块。 */require.config({    paths: {        jquery: 'libs/jquery-2.1.4.min',        jqueryUi: 'libs/jquery-ui.min',        underscore: 'libs/underscore-min',        backbone: 'libs/backbone-min',        bootstarp: 'libs/bootstrap.min',        fancytree: 'libs/jquery.fancytree-all.min',        selectize: 'libs/selectize.min',        mCustomScrollbar: 'libs/jquery.mCustomScrollbar.concat.min',        text: 'libs/require/text',        typeahead: 'libs/typeahead.bundle.min',        bloodhound: 'libs/typeahead.bundle.min',        bootpag: 'libs/bootpag.min',        moment: 'libs/moment',        datatables: 'plugin/datatables/jquery.dataTables',        jsonview: 'plugin/jsonview/jquery.jsonview',        bootstrapDialog: 'plugin/bootstrap-dialog/bootstrap-dialog'    },    shim: {        'underscore': {            exports: '_'        },        'jqueryUi': {            deps: ['jquery']        },        'bootstarp': {            deps: ['jquery', 'jqueryUi']        },        'fancytree': {            deps: ['jquery', 'jqueryUi']        },        'common/base': {            deps: ['underscore']        },        'views/conversation-view/': {            deps: ['jquery']        },        'views/app-view/': {            deps: ['jquery']        },        'typeahead': {            deps: ['jquery', 'bloodhound']        },        'datatables': {            deps: ['jquery']        },        'jsonview': {            deps: ['jquery']        },        'bootstrapDialog': {            deps: ['jquery']        }    }});

这里的 define 是requirejs提供的函数。requirejs一共提供了两个全局变量:

requirejs/require: 用来配置requirejs及载入入口模块。如果其中一个命名被其它库使用了,我们可以用另一个
define: 定义一个模块

使用 shim

shim是将依赖中的全局变量暴露给requirejs,当作这个模块本身的引用。

requirejs.config({  baseUrl: '/public/js',  paths: {    hello: 'hello'  },  shim: {    hello: { exports: 'hello' }  }});requirejs(['hello'], function(hello) {  hello();});

上面代码 exports: 'hello' 中的 hello ,是我们在 hello.js 中定义的 hello 函数。当我们使用 function hello() {} 的方式定义一个函数的时候,它就是全局可用的。如果我们选择了把它 export 给requirejs,那当我们的代码依赖于 hello 模块的时候,就可以拿到这个 hello 函数的引用了。

转载地址:http://mrqa.baihongyu.com/

你可能感兴趣的文章
Mysql学习总结(6)——MySql之ALTER命令用法详细解读
查看>>
Mysql学习总结(70)——MySQL 优化实施方案
查看>>
Mysql学习总结(71)——MySQL 重复记录查询与删除总结
查看>>
Mysql学习总结(71)——数据库介绍(MySQL安装 体系结构、基本管理)再回顾
查看>>
Mysql学习总结(72)——MySQL 开发者开发,设计规范再总结
查看>>
Mysql学习总结(73)——MySQL 查询A表存在B表不存在的数据SQL总结
查看>>
Mysql学习总结(74)——慢SQL!压垮团队的最后一根稻草!
查看>>
Mysql学习总结(75)——并发量大、数据量大的互联网业务数据库设计军规
查看>>
Mysql学习总结(76)——MySQL执行计划(explain)结果含义总结
查看>>
Mysql学习总结(77)——温故Mysql数据库开发核心原则与规范
查看>>
Mysql学习总结(78)——MySQL各版本差异整理
查看>>
Mysql学习总结(79)——MySQL常用函数总结
查看>>
Mysql学习总结(7)——MySql索引原理与使用大全
查看>>
Mysql学习总结(80)——统计数据库的总记录数和库中各个表的数据量
查看>>
Mysql学习总结(81)——为什么MySQL不推荐使用uuid或者雪花id作为主键?
查看>>
Mysql学习总结(82)——MySQL逻辑删除与数据库唯一性约束如何解决?
查看>>
Mysql学习总结(83)——常用的几种分布式锁:ZK分布式锁、Redis分布式锁、数据库分布式锁、基于JDK的分布式锁方案对比总结
查看>>
Mysql学习总结(84)—— Mysql的主从复制延迟问题总结
查看>>
Mysql学习总结(85)——开发人员最应该明白的数据库设计原则
查看>>
Mysql学习总结(8)——MySql基本查询、连接查询、子查询、正则表达查询讲解
查看>>