• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

掌握JS模块化开发,编写高可用代码

互联网 diligentman 2个月前 (11-28) 20次浏览

开发一个模块管理引擎:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo</title> <style> </style></head><body> <script>  //AMD require.js  // CMD sea.js  //COMMONJS Node.js  //UMD  let module = (function () {   const moduleList = {};   function define(name, modules, action) {    modules.map((m, i) => {     modules[i] = moduleList[m]; //获取到依赖的方法    });    moduleList[name] = action.apply(null, modules);    // console.log(moduleList);   }   return { define };  })();  module.define('arr', [], function () {   console.log('define');   return {    first(arr) {     return arr[0];    },    max(arr, key) {     return arr.sort((a, b) => b[key] - a[key])[0];    }   }  });  module.define('lesson', ['arr'], function (arr) {   let data = [    { name: 'html', price: 199 },    { name: 'css', price: 265 },   ];   // console.log(arr);   console.log(arr.max(data, 'price'));  });  module.define('a', [], function () {   return {    name: 'cyy',    age: 18   }  });  module.define('b', ['a'], function (a) {   a.name = 'cyy2';  });  module.define('c', ['a'], function (a) {   console.log(a);  }); </script></body></html>

 

模块的基本使用:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo</title> <style> </style></head><body> <script type="module">  //引入时当前路径的./不可省略  import { name, age, show } from './script.js';  console.log(name, age);  show(); </script></body></html>

script.js

let name = 'cyy';let age = 18;function show() { console.log('show');}export { name, age, show };

 

模块延迟解析与严格模式:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo</title> <style> </style></head><body> <!-- 模块会在最后执行,此时元素已经渲染完毕 --> <!-- 使用type="module"时,默认是严格模式 --> <script type="module">  let div0 = document.querySelector('div');  console.log(div0); </script> <!-- 普通js必须在元素渲染之后使用 --> <script>  let div = document.querySelector('div');  console.log(div); </script> <div>cyy</div> <script>  let div2 = document.querySelector('div');  console.log(div2); </script></body></html>

 

作用域在模块中的体现:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo</title> <style> </style></head><body> <!-- 普通脚本在全局顶级作用域里 --> <script>  let url = 'www.baicu.com';  console.log(url); </script> <!-- module在自己的块级作用域里可以访问顶级作用域的内容但是顶级作用域里的内容不能访问到module里面的 --> <!-- 想要使用module里的内容,必须要通过导入和导出 --> <script type="module">  // console.log(url);  let cyy = 'cyy';  export { cyy }; </script> <script>  console.log(url); </script></body></html>

 

预解析的必要性:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo</title> <style> </style></head><body> <!-- 多次重复导入时会报错 --> <script type="module">  import { name, age } from './script.js';  import { name, age } from './script.js';  import { name, age } from './script.js';  console.log(name); </script></body></html>

 

模块的具名导出与导入:

// export let name = 'cyy';// export function show() { console.log('show') }// export class User {//  static func() {//   console.log('User-static-func');//  }// }// 具名导出// 批量导出let name = 'cyy';function show() { console.log('show') }class User { static func() {  console.log('User-static-func'); }}export { name, show, User };

 

批量导入与建议:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo</title> <style> </style></head><body> <!-- 具名导入 --> <script type="module">  // 批量导入并设置别名  import * as api from './script.js';  console.log(api.name);  api.show();  api.User.func(); </script></body></html>

 

别名使用:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo</title> <style> </style></head><body> <!-- 具名导入 --> <script type="module">  // 给导入的模块设置别名  import { name as n, s } from './script.js';  let name = 'cyy2';  console.log(n);  console.log(name);  s(); </script></body></html>

script.js

// 批量导出let name = 'cyy';function show() { console.log('show') }class User { static func() .........

喜欢 (0)