首页 > 代码库 > 初步认识了解require与AMD模式

初步认识了解require与AMD模式

2024-11-18 00:48:02   202人阅读

require可以被理解为一个工具库，主要作用于把客户端代码分割为各模块从而实现了模块化管理，便于代码的编写与维护；其次实现了异步或动态加载解决了网页加载阻塞

它的模块管理遵循AMD规范（Asynchronous Module Definition - 异步加载模块规范）；所谓AMD规范，就是为了解决模块化编程带来的代码加载先后顺序问题，以及常规为解决该阻塞问题方式带来的各种附加问题

 

核心是通过define方法将无序混乱代码分割为有序的模块，通过require方法实现代码的模块加载

需要载入的文件：require

 

载入require实现模块化编程

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

这样就可以开始了：js文件夹下存放着require文件和demo文件夹，demo文件夹下存放着main文件；data-main属性指定的文件main.js存放着程序主代码

页面会自己加载main.js，注意该加载为异步加载且不会引起阻塞

 

定义模块的define方法

独立模块

define({    create : function (){},    update : function (){},    read : function (){},    delete : function (){}});

这是一个定义了拥有CURD4个方法的独立新模块，还可以这样写

define(function (){    return{        create : function (){},        update : function (){},        read : function (){},        delete : function (){}    };});

第二种方法更自由，还可以初始化一些代码；对象变成了函数，函数的返回值即模块

 

非独立模块

define([‘image‘, ‘text‘], function (img, txt){    return{        get : function (){            img.geturl();            txt.getext();        }    };});

参数以数组形式定义了一个依赖image模块和text模块的新模块，image和text分别代表同样被定义为模块的image.js文件和text.js文件，回调中的参数则分别对应加载的模块

新模块中get方法调用了image模块的geturl方法和text模块的getext方法

define(function (require){    var img = require(‘image‘);    var txt = require(‘text‘);    return{        get : function (){            img.geturl();            txt.getext();        }    };});

好处是导入模块过多的时候，视觉上不会蛋疼

 

加载模块的require方法

异步加载

require([‘image‘, ‘text‘], function (img, txt){    return true;});

书写格式和define一样

 

动态加载

define(function (require){    var status = false;    require([‘image‘, ‘text‘], function (img, txt){        status = true;    });    return status;});

这是一个新的独立模块，定义模块的define方法内部动态加载了2个模块，加载完成后设置了一个状态值并返回

define([‘html‘], function (html){    var hm = new html();    require([‘image‘, ‘text‘], function (img, txt){        hm.set({            img : img,            txt : txt        });    };    return hm.send();});

这是一个新的非独立模块，加载了一个依赖模块html，定义模块的define方法内部动态加载了2个模块，加载完成后改变html模块的set对象并返回html模块的send对象

 

第三参数

require([‘image‘, ‘text‘], function (img, txt){    return true;}, function (err){    return false;});

回调用于处理错误，参数为接受到的error对象

 

配置require的config方法

paths

require.config({    paths : {        jquery : ‘public/jquery‘    }});

paths参数指定各模块位置

require([‘jquery‘], function ($){    return true;});

加载已配置了路径的jquery模块

 

shim

require.config({    paths : {        ‘underscore‘ : ‘public/underscore‘,        ‘backbone‘ : ‘public/backbone‘    },    shim : {        ‘underscore‘: {            exports : ‘_‘        },        ‘backbone‘: {            deps : [‘underscore‘],            exports : ‘Backbone‘        }    }});

有些库AMD模式不兼容，需要指定shim属性的值来帮助require加载非AMD规范库
underscore、backbone就是非AMD规范库，shim指定它们依赖关系及输出符_、Backbone

 

AMD模式

定义模块的define方法和调用模块的require方法，合称为AMD模式

该模式的定义模块方法清晰且不会污染全局环境，能够清楚的显示依赖关系；允许异步加载模块，也可以根据需要动态加载模块

 

我们的学习完成了，但是还是很迷糊；先这样了不经实战也是无法继续深入了

初步认识了解require与AMD模式


联系
我们