当前位置: 首页 > Web前端 > JavaScript

JS模块化——AMD

时间:2023-03-27 12:10:28 JavaScript

AMD用法定义(id?,dependencies?,factory);define('foo',['utils'],function(utils){utils.add(1,2);return{name:'foo'}})implementationAMD兼容的rj.js可以直接配置依赖路径rj.confing({paths:{'jquery':'...'}})加载模块//RequireJs('')rj(['moduleA'],function(moduleA){})definemodulerj('moduleA',[],function(){return'helloworld';})behaviordefine('a',function(){console.log('aload');return{run:function(){console.log('arun')}}})define('b',function(){console.log('bload');return{run:function(){console.log('brun')}}})require(['a','b'],function(a,b){console.log('mainrun');a.run();b.run();})//加载//bload//主要加载//arun//brunrj.js简单实现//默认配置constdefaultOptions={paths:''}constdef=newMap();constrj={};//配置rj.config=(options)=>Object.assign(defaultOptions,options);//来自CDNconst__import=(url)=>{returnnewPromise((resolve,reject)=>{System.import(url).then(resolve,reject);})}//普通脚本const__load=(url)=>{returnnewPromise((resolve,reject)=>{constheader=document.getElementsByTagName("header")[0];constscript=document.createElement('script');script.async=true;script.src=url;script.type='text/javascript';script.onload=resolve;script.onerror=reject;header.appendChild(script);})}//获取地址//dep->a->a.js->http:xxx/xx/xx/a.jsconst__getUrl=(dep)=>{constp=location.pathname;返回p.slice(0,p.lastIndexOf('/'))+'/'+dep+'js';}//定义模块添加依赖constdefine=(name,deps,factory)=>{def.set(名称,{名称,部门,工厂});}//触发依赖constrequire=(deps,factory)=>{returnnewPromise((resolve,reject)=>{Promise.all(deps.map(dep=>{//走CDNif(defaultOptions.paths[dep])__import(defaultOptions.paths[dep]);return__load(__getUrl(dep)).then(()=>{const{deps,factory}=def.get(dep);if(deps.length==0)returnfactory(null);returnrequire(deps,factory);})})).then(resolve,reject);}).then(instance=>factory(...instance));}