requireJs | 在html-Js中使用ADM规范

requireJs规范就是:在项目配置文件中配置好“js的路径”和“js文档中的函数模块的引用”,然后加载Html过程中就会根据配置好的路径和对应模块名称去加载代码,这样实现了js和HTML的分离,在另外的配置文档中管理js模块之间的依赖关系,这样有利于维护。

例如:

首先在HTML头部声明配置文件

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

 async="async"  的意思是这些配置不必须在后面代码之前加载,即异步加载,如果配置的模块很多的话就可以先后台下载,等下好了就可以加载了。
 
类似的还有一个defer="defer"   ,这个会让你的js配置等到<body>里面所有代码加载完才会加载,这时<body>里面不能require你的模块,因为还没有加载。


 data-main="../js/main" ,这个是配置文件main的相对路径,require默认文件后缀.js所以后缀省略,还有就是这句话设置了所有js的根目录为../js/,后面配置路径就简化了。
 
 
配置文档是main.js
结构如下:

main.js

​
​
require.config({
//config即配置

    paths: {
//paths设置模块名称和对应路径

        jquery: 'https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js',

        bootstrap: 'https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js',

        sql: 'plugin/sql',

        sqlTool: 'plugin/sqlTool',

        database : 'database',

        progressBar : 'showTools/progressBar'

    },

    shim: {
//shim配置模块间依赖关系

        bootstrap: {
//bootstrap依赖于模块jquery

            deps: ['jquery']

        },

        database: {
//database模块比较大,这里选择性暴露公有接口

            init: function () {
//设置初始化对象的方法,给对象返回几个接口

                return {
//设置接口的名称和对应引用

                    'submit': submit,

                    'showAllTables': showAllTables

                }

            }

        },
        
        progressBar: {
//暴露接口的另一种方法

            export : 'proStart'

        }

    }

});

​

​

database的依赖关系写到了database.js里

define(['sql', 'sqlTool'], function () {
//database依赖于sql和sqlTool
    
    return {

        submit : function () {

            
        },


        showAllTables : function (label) {

            

        },

        ///这里还可以写私有的函数只供给公有接口使用,外部看不到

        
    }


});

然后在html的<body>中使用这些接口,例如:

<script>require(['database'], function (data) {data.showAllTables(ViewLabel)})</script>

<li onclick="require(['database'], function (data) {data.submit()})" ></li>

require模块方法的格式:

require(['progressBar'], function (bar) {
//方括号里写模块名,例如'progressBar', 回调函数里写具体的接口使用
    
    bar.proStart('bar')
    
});

​

猜你喜欢

转载自blog.csdn.net/u011607490/article/details/81743484
今日推荐