require.js 简洁入门

andot 发布于2019-08-21 12:21 / 3167人阅读

摘要：另外一个道理，一部分是依赖另一部分的，比如依赖文件的载入。其实主要做的事情就是这两点。这里只是我虚构一个假的例子，实际应用中要根据自己的实际需求去设计构思自己的项目，再次提醒，不要为了用而用。

前言

提到require.js大多数人会说提到模块化开发，AMD等等，其实require.js并没有这么多复杂的概念，这里我就希望排除这些概念，从实用的角度来简单说一下require.js是干什么的，我们要怎么用它。

1.为什么要用require.js

大多数前端开发者都用过jquery，那么用jquery之前我们首先要把jquery加载进页面，然后在之后的js之中才可以使用$,这里面我们知道了两个道理，一个是我们不能把所有js代码都放到一个文件里，有些东西可以多带带提出来成为一个模块，比如jquery。另外一个道理，一部分js是依赖另一部分js的，比如$依赖jquery文件的载入。其实require.js主要做的事情就是这两点。

当你的js项目足够大，足够复杂，依赖的库足够多，你完全需要这样一种工具去做这些js的管理，否则你的项目扩展性很差，结构很糟糕，要找到想修改的地方会很困难。

其实其他很多编程语言都已经在代码里实现了类似的功能，比如这段python

import web

db = web.database(dbn="sqlite", db="todos.db")

很好理解，我们导入了web对象，然后就可以在接下来的代码里使用web.database

2.怎么用require.js？

首先页面要载入require.js，这个没办法用它自己依赖

既然使用require这种模式的目的是把文件分割成可理解的小块，那么我们的js文件也要分割成一个一个部分，称之为模块，官方api实例中的目录结构是这样的：

www/

index.html

js/

app/

sub.js

lib/

jquery.js

canvas.js

app.js

这里是一个app应用，但是普通页面开发也可以借鉴的是这个概念，就是把js根据功能和目的分开放，库文件放到一起，子模块放到一起，入口js再来选择性载入。
这里注意一下，模块化开发的目的是方便开发者理解和提高效率，如果读者认为没有必要完全则不需要硬去这么做，为了使用什么概念或者方法反而增加了开发成本的事情不要做。

定义模块

jquery这类的库文件先不提，我们说自己怎么定义一个模块，就是sub.js文件里

//定义对象
define({
    color: "black",
    size: "unisize"
});

//定义方法
define(function () {
    //Do setup work here

    return {
        color: "black",
        size: "unisize"
    }
});

如果我们定义的东西里面有依赖，比如用到jquery，我们可以这样

define(["../lib/jquery"], function($) {

        return {
            color: "blue",
            size: "large",
            addToCart: function() {
                $(".cart-color").append(color)
            }
        }
    }
);

思考一下，这里的概念是这样的，第一个参数，数组里的东西是我接下来要依赖的模块，后面的回调函数的参数，依次就是前面数组里的对象的传递。

调用模块

还记得上面那个目录结构吗，我们依然摘取官网的实例, app.js是项目的入口，内容如下

require.config({
    //By default load any module IDs from js/lib
    baseUrl: "js/lib",
    //except, if the module ID starts with "app",
    //load it from the js/app directory. paths
    //config is relative to the baseUrl, and
    //never includes a ".js" extension since
    //the paths config could be for a directory.
    paths: {
        app: "../app"
    }
});

// Start the main app logic.
require(["jquery", "canvas", "app/sub"],
function   ($,        canvas,   sub) {
    //jQuery, canvas and the app/sub module are all
    //loaded and can be used here now.
});

require.config 配置文件，这里定义了baseUrl等

接下来我们require调用，注意这里是调用，上面是定义define，不过看到代码发现和之前类似，同样是第一个参数是依赖对象的数组，回调里会执行，参数是之前依赖的对象。

3.举个栗子

实践是检验真理的唯一标准，光看别人实践也没用，自己动手做一遍胜读十年书。我自己写了一个简单的例子，读者如果感兴趣也可以自己写一个

我有一个中间模块，我把他叫做sth，这个模块放在 sth.js 里面，如下

define(function(require){
    var p1 = require("part/part1");
    var p2 = require("part/part2");
    return {
        f1: p1.doSome,
        f2: p2.doOther
    }
})

这里面require了另外两个子模块，part1和part2，并把他们的方法拿出来放到中间块里面并且返回
我们来看下part1，part2长啥样，首先他们都是part1.js 和part2.js文件，require.js里认为你载入的都是js脚本文件，所以统一省略.js

//part1.js
define(function(){
    return {
        doSome: function(){
            console.log("doSome")
        }
    }
})

//part2.js
define(function(){
    return {
        doOther: function(){
            console.log("doOther")
        }
    }
})

然后我们在主文件里，比如index.html,main.js...调用 sth

require(["sth","check"],function(sth,check){
    if(check.ok){
        sth.f1()
    }else{
        sth.f2()
    }
})

我们假设这里还有另外一个check对象，如果check为真则执行sth.f1
,否则执行sth.f2 想一下，f1，f2其实是在两个文件里面。

这里只是我虚构一个假的例子，实际应用中要根据自己的实际需求去设计构思自己的项目，再次提醒，不要为了用而用。

最后

好了骚年们，对require.js感兴趣了吗，那就去这里疯狂的看吧
http://requirejs.org/

专线服务云服务器 require.js 简洁简洁方法 php简洁

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87550.html

JS学习笔记 - 模块化

摘要：在开发大型的项目中，可能会使用到管理的模块化工具。说道，学习过的同学会比较熟悉，是服务器模块的规范，采用了这个规范。可能是未来模块化解决方案的首选。本文章记录本人在学习 JavaScript 中理解到的一些东西，加深记忆和并且整理记录下来，方便之后的复习。在开发大型的web项目中，可能会使用到管理js的模块化工具。但是在前端轮子漫天飞的时代。那一款js模块化工具真正适合我...

CntChen 2019-08-22 10:57 评论0 收藏0
深入 CommonJs 与 ES6 Module

摘要：目前主流的模块规范模块通用模块如果你在文件头部看到这样的代码，那么这个文件使用的就是规范实际上就是全局变量这三种风格的结合这段代码就是对当前运行环境的判断，如果是环境就是使用规范，如果不是就判断是否为环境，最后导出全局变量有了后我们的代码和目前主流的模块规范 UMD CommonJs es6 module umd 模块（通用模块） (function (global, facto...

sanyang 2019-08-23 14:42 评论0 收藏0
es6语法快速上手

摘要：二一个的解析器在我们正式讲解语法之前，我们得先了解下。而则实际上为新增了块级作用域。的继承机制，实质是先创造父类的实例对象所以必须先调用方法，然后再用子类的构造函数修改。随着google和firfox以及node6.0对es6的支持，es6语法的定稿使它越来越受到关注，尤其是react项目基本上都是用es6来写的。是时候从es5到es6转变了showImg(http://static...

PiscesYE 2019-08-19 18:33 评论0 收藏0
[ 学习路线 ] 学完这些去阿里！GOGOGO

摘要：以下知识点是前辈师兄总结基础语义化标签引进了一些新的标签，特别注意等，注意的标题结构理解浏览器解析的过程，理解的树形结构，及相应理解标签在各个浏览器上的默认样式代理样式，理解中的重置样式表的概念理解等功能性标签理解标签，理解文件提交过程推荐以下知识点是前辈师兄总结 1、HTML/HTML5基础： 1.0、语义化H5标签1.1、H5引进了一些新的标签，特别注意article...

zhaochunqi 2019-08-28 18:06 评论0 收藏0
[ 学习路线 ] 学完这些去阿里！GOGOGO

摘要：以下知识点是前辈师兄总结基础语义化标签引进了一些新的标签，特别注意等，注意的标题结构理解浏览器解析的过程，理解的树形结构，及相应理解标签在各个浏览器上的默认样式代理样式，理解中的重置样式表的概念理解等功能性标签理解标签，理解文件提交过程推荐以下知识点是前辈师兄总结 1、HTML/HTML5基础： 1.0、语义化H5标签1.1、H5引进了一些新的标签，特别注意article...

learn_shifeng 2019-08-21 10:27 评论0 收藏0