require.js使用方法的简单代码讲解笔记

目录
  • 目的：
  • 基本API
    • 第一步：a.js定义
    • 第二步：引入这个模块
  • 加载文件

页面需要加载多个js文件时，加载时浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；由于js文件之间存在依赖关系，必须严格保证加载顺序，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。这种情况下require.js插件应运而生。

目的：

这个插件的体积非常小14k左右，主要是解决目前我们js文件引入臃肿的问题，它可以将我们需要的js文件定义成一个模块的方式，只要我们想引入某个模块，我们声明引入就可以了。而且是异步加载的模式，对浏览器体验也非常好，不会阻塞渲染。

基本API

require定义三个变量：define,require,requirejs，其中require === requirejs，一般使用require更简短

  • define 从名字就可以看出这个api是用来定义一个模块
  • require 加载依赖模块，并执行加载完后的回调函数

第一步：a.js定义

define(function(){
    function fun1(){
      alert("it works");
    }
    fun1();
})

第二步：引入这个模块

require(["js/a"],function(){
    alert("load finished");
})

注意：a.js引入在js文件下，同时a.js中后缀不要了。

加载文件

加载本地是上面的那个样子，如果我们要加载其他网站要用到require.config这个方法

require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
        "a" : "js/a"
    }
})
require(["jquery","a"],function($){
    $(function(){
        alert("load finished");
    })
})

这样配置后，当百度的jquery没有加载成功后，会加载本地js目录下的jquery

  • 在使用requirejs时，加载模块时不用写.js后缀的，当然也是不能写后缀
  • 上面例子中的callback函数中发现有$参数，这个就是依赖的jquery模块的输出变量，如果你依赖多个模块，可以依次写入多个参数来使用：

讲讲data-main这个属性：

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

其实就是引入require.js后，再引入js文件夹下的main.js文件

赞 (0)

相关推荐

  • 详解require.js配置路径的用法和css的引入

    详解require.js配置路径的用法和css的引入

    前端开发在近一两年发展的非常快,JavaScript作为主流的开发语言得到了前所未有的热捧.大量的前端框架出现了,这些框架都在尝试着解决一 些前端开发中的共性问题,但是实现又不尽相同.通常一般的前端加载js文件都是这样 : <script type="text/javascript" src="js/js1.js"></script> <script type="text/javascript" src="

  • 关于RequireJS的简单介绍即使用方法

    RequireJS介绍 RequireJS 是一个JavaScript模块加载器.它非常适合在浏览器中使用.使用RequireJS加载模块化脚本将提高代码的加载速度和质量. 兼容性 浏览器(browser) 是否兼容 IE 6+ 兼容 ✔ Firefox 2+ 兼容 ✔ Safari 3.2+ 兼容 ✔ Chrome 3+ 兼容 ✔ Opera 10+ 兼容 ✔ 优点 实现js文件的异步加载,避免网页失去响应 管理模块之间的依赖性,便于代码的编写和维护 快速上手 step 1 引入require

  • Javascript模块化编程(三)require.js的用法及功能介绍

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

    这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js.  一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代码,相信很多人都见过. 复制代码 代码如下: <script src="1.js"></script> &l

  • 第二次聊一聊JS require.js模块化工具的基础知识

    前一篇:JS模块化工具我们以非常简单的方式引入了requirejs:http://www.jb51.net/article/82527.htm,这一篇将讲述一下requirejs中的一些基本知识,包括API使用方式等 基本API require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短 define 从名字就可以看出这个api是用来定义一个模块 require 加载依赖模块,并执行加载完后的回调函

  • Require.js的基本用法详解

    一:什么是require.js ①:require.js是一个js脚本加载器,它遵循AMD(Asynchronous Module Definition)规范,实现js脚本的异步加载,不阻塞页面的渲染和其后的脚本的执行,并提供了在加载完成之后的执行相应回调函数的功能: ②:require.js要求js脚本必须要实现模块化,即文件化:而require.js的作用之一就是加载js模块,也就是js文件. ③:require.js可以管理js模块/文件之间的依赖;即不同的框架例如Jquery,Angul

  • require.js 加载过程与使用方法介绍

    require.js简介 require.js是javascript模块化编程中常用的一个JS库. 现在的网页功能较以前已经丰富了许多,同时网页上需要导入越来越多的JS文件来实现这些功能.使用原有的script标签一个个导入js文件会导致代码的复杂与臃肿.并且导入的各个JS文件可能会有冲突,导致许多功能无法使用且会使bug非常难定位. 这样的情况下我们就需要一个合适的Javascript模块载入框架,来满足我们团队协作.模块复用.单元测试等等一系列复杂的需求.使用require.js进行模块化加

  • require.js使用方法的简单代码讲解笔记

    目录 目的: 基本API 第一步:a.js定义 第二步:引入这个模块 加载文件 页面需要加载多个js文件时,加载时浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长:由于js文件之间存在依赖关系,必须严格保证加载顺序,当依赖关系很复杂的时候,代码的编写和维护都会变得困难.这种情况下require.js插件应运而生. 目的: 这个插件的体积非常小14k左右,主要是解决目前我们js文件引入臃肿的问题,它可以将我们需要的js文件定义成一个模块的方式,只要我们想引入某个模块,我们声明引入就可

  • 基于Require.js使用方法(总结)

    一.为什么要使用require.js 首先一个页面如果在加载多个js文件的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长:其次,由于js文件之间存在依赖关系,因此必须严格保证加载顺序,当依赖关系很复杂的时候,代码的编写和维护都会变得困难. require.js,就是为了解决这两个问题: 1. 实现js文件的异步加载,避免网页失去响应: 2. 管理模块之间的依赖性,便于代码的编写和维护. 二.require.js的加载 第一步,去官网下载最新版本,直接放到页面进行加载 <sc

  • js重写方法的简单实现

    如下所示: Function.prototype.method = function(name, fn) { this.prototype[name] = fn;//this指的应该是Function.prototype对象 return this;//返回此对象,这个有助于像jq那样的级联操作 }; Number.method("interge",function(){ });//Number是一个构造函数,所以拥有上面的method方法,所以最后返回了Number对象(构造函数),

  • Vue.js展示AJAX数据简单示例讲解

    最近琢磨了一下vue.js,并在项目中进行了运用,感觉非常好用,强烈推荐. 当通过AJAX方式取回数据后,使用vue.js可以完美地按一定逻辑在页面上的展示数据,代码简单.优美.自然,而且便于与在用的页面框架集成. 感谢vue.js的作者,官方网站地址:https://cn.vuejs.org 举个小例子.注意,代码中使用jQuery.bootstrap.没有用过bootstrap不影响阅读本文. 一.返回的JSON数据示例 [ {"playid":"12113c676a4e

  • 在Linux系统中搭建Node.js开发环境的简单步骤讲解

    1. Linux安装node.js ubuntu: sudo apt-get install nodejs npm centos: yum install nodejs npm 更详细的安装参见:https://github.com/joyent/node/wiki/Installation npm为类似PHP中Pear的包管理器 2. 开始使用node.js 用文本编辑器新建hello.js写入以下内容 console.log('hello world'); 打开命令行输入 $ node he

  • JS实现520 表白简单代码

    这两天不知道咋了,迷迷糊糊的,突然知道今天是520的我,急急忙忙赶出个程序(新手,代码有点乱),发出来大家一起研究下(参考百度的). <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>520</title> <style> html, body{padding:0px; margin:0px; background:#222; fon

  • c#模拟js escape方法的简单实例

    复制代码 代码如下: public static string Escape(string s)        {            StringBuilder sb = new StringBuilder();            byte[] ba = System.Text.Encoding.Unicode.GetBytes(s);            for (int i = 0; i < ba.Length; i += 2)            {              

  • 基于require.js的使用(实例讲解)

    本篇文章总结下require.js使用方法. 1.为什么使用require.js? 使用之前,我的页面的js是这样的 <script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript" src="/js/bootstrap.min.js"></script>

  • c#与js随机数生成方法

    本文实例讲述了c#与js随机数生成方法.分享给大家供大家参考.具体如下: 1. C#产生随机数方法: 复制代码 代码如下: Random rd = new Random(); rd.Next(low,high); 说明:生成70-100的随机数 复制代码 代码如下: Random rd = new Random();  rd.Next(70,100); 2. js随机数方法: 复制代码 代码如下: Math.ceil(Math.random() * (1 + high - low) + low)

  • 使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)

    在网站开发中,经常会简单使用js代码来判断字符串中有多少汉字的功能.今天小编抽时间给大家分享实现代码.废话不多说了,直接给大家贴代码了. $("form").submit(function () { var content = editor.getContentTxt(); var sum = 0; re = /[\u4E00-\u9FA5]/g; //测试中文字符的正则 if (content) { if (re.test(content)) //使用正则判断是否存在中文 { if

随机推荐