前端模块化AMD之requirejs简单运用

要用到，首先就要下载，下载地址 https://requirejs.org/

简单的开始

1、首先在自己的html文件内引入require.js

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

2、创建一个模块文件，使用define关键字写入模块内容

//a.js
define(function(){
   return {
      say:function(name){
         console.log('tag', name)
      }
   }
});

3、创建一个main.js ，使用require.config 指定要加载的模块文件

//main.js
require.config({
    paths: {
        "jquery": ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
        "a": "js/a"
    }
})

 

4、在引入的require.js script标签内添加data-main属性并绑定main.js

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

5、在html页面内调用模块

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script data-main="js/main" src="js/require.js"></script>
    <script>
        require(["jquery"], function ($) {
            
            const xiao=$("#xiao").html();
            console.log('tag', xiao)

            require(["a"],function(_){
                _.say(xiao);
            });
            
        })

    </script>
</head>

<body>
    <span id="xiao">我是小白呀</span>
</body>

</html>

 

关于requierjs，目前只是了解一些基础的用法，但是知道这些就已经可以运用到项目中去了

posted @ 2020-08-27 11:42  小雨漫漫路  阅读(105)  评论(0)    收藏  举报