当前位置:Gxlcms > JavaScript > Javascript模块化编程(三)require.js的用法及功能介绍_基础知识

Javascript模块化编程(三)require.js的用法及功能介绍_基础知识

时间:2021-07-01 10:21:17 帮助过:3人阅读

这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战。
我采用的是一个非常流行的库require.js。

一、为什么要用require.js?
最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了。后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载。下面的网页代码,相信很多人都见过。
代码如下:

输出的变量名),表明这个模块外部调用时的名称;(2)deps数组,表明该模块的依赖性。
比如,jQuery的插件可以这样定义:
代码如下:

  shim: {
    'jquery.scroll': {
      deps: ['jquery'],
      exports: 'jQuery.fn.scroll'
    }
  }

七、require.js插件
require.js还提供一系列插件,实现一些特定的功能。
domready插件,可以让回调函数在页面DOM结构加载完成后再运行。
代码如下:

  require(['domready!'], function (doc){
    // called once the DOM is ready
  });

text和image插件,则是允许require.js加载文本和图片文件。
代码如下:

  define([
    'text!review.txt',
    'image!cat.jpg'
    ],
    function(review,cat){
      console.log(review);
      document.body.appendChild(cat);
    }
  );

类似的插件还有json和mdown,用于加载json文件和markdown文件。
(完)

人气教程排行