RequireJS极简入门教程RequireJS核心功能:HOW TOmain.js使用 shim

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 Node. 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 函数的引用了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏java相关

Redis学习笔记01---配置文件

1314
来自专栏芋道源码1024

【消息队列 MQ 专栏】消息队列之 Kafka

Kafka 最早是由 LinkedIn 公司开发一种分布式的基于发布/订阅的消息系统,之后成为 Apache 的顶级项目。主要特点如下:

2350
来自专栏我和PYTHON有个约会

爬虫 0030~ requests利刃出鞘

requests第三方封装的模块,通过简化请求和响应数据的处理,简化繁琐的开发步骤和处理逻辑、统一不同请求的编码风格以及高效的数据处理特性等而风靡于爬虫市场。

961
来自专栏从零开始学自动化测试

jenkins构建触发器定时任务Build periodically和Poll SCM

前言 跑自动化用例每次用手工点击jenkins出发自动化用例太麻烦了,我们希望能每天固定时间跑,这样就不用管了,坐等收测试报告结果就行。 一、定时构建语法 * ...

6445
来自专栏情情说

RabbitMQ实战:性能和安全

前两篇介绍了RabbitMQ在可用性、监控方面的考虑,这是基础保障,因为在某些场景下是不容许丢失消息的,但它和性能往往是对立的,需要根据业务场景做取舍。

7198
来自专栏帘卷西风的专栏

linux的一些运维指令和技巧

转载请注明出处:帘卷西风的专栏(http://blog.csdn.net/ljxfblog)

840
来自专栏北京马哥教育

Python操作分布式流处理系统Kafka

什么是Kafka Kafka是一个分布式流处理系统,流处理系统使它可以像消息队列一样publish或者subscribe消息,分布式提供了容错性,并发处理消息...

3204
来自专栏Python中文社区

Python操作分布式流处理系统Kafka

專 欄 ❈强哥,Python中文社区专栏作者,曾供职于摩根士丹利(Morgan Stanley)和eBay。❈ 什么是Kafka Kafka是一个分布式流处理...

49510
来自专栏Laoqi's Linux运维专列

Ansible 基础搭建配置

1636
来自专栏积累沉淀

kafka学习之路(三)——高级

设计原理 kafka的设计初衷是希望作为一个统一的信息收集平台,能够实时的收集反馈信息,并需要能够支撑较大的数据量,且具备良好的容错能力. 持久性 kafka使...

2276

扫码关注云+社区

领取腾讯云代金券