require 那点事

Posted 2020-08-07

require 提供了一个 模块管理的方案 不太熟悉的话挺多暗坑 团队引入 需谨慎 彻底熟悉后 再引入项目

ADM规范

Asynchronous Module Definition - 异步加载模块规范

解决模块化编程带来的代码加载先后顺序问题及常规异步加载代码带来的不确定因素

 

载入require实现模块化编程

1	<script src="/static/js/require.min.js" data-main="/static/js/shop"></script>

data-main指定了入口配置文件shop.js，同时指定了基于shop.js的相对路径baseUrl，baseUrl可以在config配置方法内重置

 

require.config配置方法

baseUrl重置相对路径

1 2 3

require.config({     baseUrl : ‘js/lib‘ });

 

paths配置待调用模块路径

1 2 3 4 5 6

require.config({     paths : {         jquery : ‘jquery.min‘,         control : ‘control‘     } });

已配置路径的模块的调用方式

1 2 3

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

 

shim垫片

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

有时我们需要使用非AMD定义模块，如jQuery，需要shim参数来帮助解决这些库的解析名称及载入顺序问题

 

项目入口配置文件shop.js代码展示

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

require.config({     paths : {         jquery   : ‘jquery.min‘,         jqmd5    : ‘jquery.md5‘,         cookie   : ‘public/cookie‘,           jqui     : ‘jquery.ui.min‘, /* 前端UI框架 */         jquid    : ‘jquery.ui.dialog.min‘, /* 前端UI框架 - 模态框模块 */         jqtmpl   : ‘jquery.tmpl.min‘, /* 模版引擎 */         jqvali   : ‘jquery.validation.min‘, /* 表单验证 */         jqvalicn : ‘jquery.validation.cn.min‘, /* 表单验证汉化 */           base     : ‘base‘, /* 基础功能 */         control  : ‘control‘, /* 控制器模块 */         login    : ‘login/index‘, /* 登录页模块 */         register : ‘register/index‘, /* 注册页模块 */         detail   : ‘detail/index‘ /* 详情页模块 */     } });   require([‘control‘], function (Control){     Control.cookie();     Control.template(); });

 

定义模块的define方法

独立模块

1 2 3 4

define(function (){     var control = {};     return control; });

该模块调用不依赖其它模块

 

依赖模块

1 2 3 4

define([‘base‘], function (){     var control = {};     return control; });

该模块调用需要依赖base模块

 

项目控制器模块control.js代码展示

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

define([‘jquery‘, ‘jqmd5‘, ‘cookie‘, ‘base‘], function (){     var control = {};       /**      * 登录状态检测      */     control.cookie = function (){         setTimeout(WK.LC.syncLoginState, 100);     };       /**      * 模块调用及配置      */     control.template = function (){         if($(‘.naver‘).length > 0) base.naver();           if(CATEGORY == ‘login‘)         {             if(MODEL == ‘index‘){                 // 登录页                 require([‘login‘], function (Login){                     Login.form();                 });             };               if(MODEL == ‘register‘ || MODEL == ‘check‘){                 // 注册页                 require([‘register‘], function (Register){                     Register.form(MODEL);                 });             };         };           if(CATEGORY == ‘goods‘)         {             // 详情页             if(MODEL == ‘index‘){                 require([‘detail‘], function (Detail){                     // Detail.form();                 });             };         };     };       return control; });

 

加载模块的require方法

异步加载

1 2 3 4

require([‘control‘], function (Control){     Control.cookie();     Control.template(); });

 

AMD模式

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

该模式的定义模块方法清晰且不会污染全局环境，能够清楚的显示依赖关系

 

require是一款可以帮助我们架构好前端框架的好工具，为我们带来更为方便的模块化编程，轻松控制好模块载入的数量和顺序，并且性能优秀