AMD_RequireJS-考必过

【摘要】 AMD_RequireJS考必过小编为大家整理了关于AMD_RequireJS的信息，希望可以帮助到大家！

AMD_RequireJS

标签：getname ima index 关心 turn 文件一个 data- mamicode

模块化第二种规范----AMD

说明

专门用于浏览器端，模块的加载时异步的

BIM项目负责人亲述：北京大兴机场BIM应用案例分析

¥0

去购买

基本语法

定义暴露模块

//定义没有依赖的模块

define(functioin(){

　　return 模块

})

//定义有依赖的模块

define([‘module1‘,‘module2‘],function(){

　　return 模块

})

引入使用模块

require([‘module1‘,‘module2‘],function(m1,m2){
   使用m1/m2 
})

实现（浏览器端）

Require.js

示例

1、noAMD普通模式

项目目录

dataService.js

// 定义一个没有依赖的模块
(function(window){
    let name = "dataService.js"
    function getName(){
        return name
    }
    window.dataService = {getName}
})(window)

alerter.js

// 定义一个有依赖的模块
(function(window,dataService){
    let msg = "alerter.js"
    function showMsg(){
        console.log(msg,dataService.getName())
    }

    window.alerter = {showMsg}
})(window,dataService)

app.js

(function(alerter){
    alerter.showMsg()
})(alerter)

test1.html

 <script src="./app.js"></script>

运行页面发现报错

最后结果

2、require.js 使用----自定义模块

1、下载require.js 并引用

官网：http://www.require.cn/

github: https://github.com/require/require.js

2、创建项目结构

3、定义require.js 的模块代码

require.js官网下载

dataService.js模块

define(function(){
    let name = "dataService.js"
    function getName(){
        return name
    }
    // 暴露模块
    return {getName}
})

alerter.js

// 定义一个有依赖的模块
define([‘dataService‘],function(dataService){
    let msg = ‘alerter.js‘
    function showMsg(){
        console.log(msg,dataService.getName())
    }
    // 暴露模块
    return {showMsg}
})

main.js

dataService: ‘./modules/dataService.js‘  注意不能加js

(function(){
    requirejs.config({
        baseUrl: ‘js/‘,//基本的路径
        paths: {//配置路径 相当于导入模块
            dataService: ‘./modules/dataService‘,
            alerter:‘./modules/alerter‘
        }
    });

    requirejs([‘alerter‘],function(alerter){
        alerter.showMsg()
    })
})()

官网中的方法配置说明

index.html

防止js加载阻塞页面渲染(异步)
使用程序调用的方式加载js，防出现如下丑陋的场景
不用关心相互依赖的顺序

　　　　<!-- 引入require.js 并指定js主文件的入口 -->
    <script data-main="js/main.js" src="js/libs/require.js"></script>

3、AMD规范--使用第三方模块

AMD_RequireJS