美文网首页
模块化开发思想

模块化开发思想

作者: div式人格 | 来源:发表于2022-06-07 08:53 被阅读0次

模块化开发思想

  • 本质为了解决 JS 文件之间相互引用, 用来开发大型的 web 应用
  • 将项目的各个功能,封装成很多个JS组件 ,开发时,分开去研发各个组件,
  • 最后利用 es6 提供的模块系统 将各个组件导入到一个指定的 主JS 组件中。
  • 模块化开发依托于两个关键字:
    export{ }                 导出
    import {解构} from '路径'      导入

1. 导出 export

  • 一个文件只能有一个 export default
  • 在这里可以将这个文件里面的所有方法一起导出
// 1. 导出普通变量
export let a = 12;      // 写法一

let a1 = 1;
export {                // 写法二
    a1 as a2,  // 别名导出(命名冲突)
}

// 2. 导出方法
export let fn1 = () => {            // 写法一
    console.log('这是方法一');
}

let fna1 = () => {                  
    console.log('这是方法一');
}
export {                            // 写法二
    fn1,
}


// 3. 导出一个类
export class Man{       // 写法一
    name = '男人';
}
class Woman{           // 写法二
    name = '女人';
}
export {    
    Woman,
}

// 写法三
export default {
    // 一个文件只能有一个 export  default
    // 在这里可以将这个文件里面的所有方法一起导出
    Woman,
    Man,
    a,
    a1,
    // 由于这个文件 是将一个文件整体导出 所以导入时也不一样。不能使用 解构 来接。 
    // import 变量 from '路径'。 
}

2. 导入 import

// import 变量 from '路径'。  使用 export default 导出时使用。

import {
    a as a1,  // 更改名字(命名冲突)
    Man,
} from "./7. export";

相关文章

  • 前端开发——模块化(css模块化开发)

    掌握模块化开发的思想是我们进行模块化开发的基础。他有以下几部分组成: 模块化开发的优势 css模块化 css模块化...

  • 笔记七:模块化开发与规范化标准

    模块化开发 当下最重要的前段开发范式,“模块化”是一种思想 模块化演变过程 早期在没有工具和规范的情况下,对模块化...

  • 前端工程化(二)

    模块化开发 --- 当下最重要的前端开发范式之一所谓模块化,只是思想或者理论,不是具体的某个特定的实现 模块化的演...

  • 模块化开发思想

    模块化开发思想 本质为了解决 JS 文件之间相互引用, 用来开发大型的 web 应用 将项目的各个功能,封装成很多...

  • 模块化、组件化的深入理解,

    模块化、组件化是一种开发思想,是一种开发思路上的解决方案, tip:模块化只是一种思想,不是一种具体的解决方案。 ...

  • 模块化开发

    什么是模块化思想?模块化思想就是指将页面根据内容的关联性分解成不同的且相互独立的模块进行开发,每个模块之间...

  • 模块化开发

    模块化开发是一种思想,随着前端项目的日益庞大。为了使我们开发协作更加高效,互不影响。将编写的代码模块化,更利于协作...

  • 模块化开发

    前端JS模块化开发有两大规范AMD合CMD,下面以我的理解来简单总结一下模块化开发的思想 ,以及js前端常用的AM...

  • 模块化开发

    js模块化开发vue模块化开发

  • 前端开发模块化思想

    模块化解决的问题 全局变量的灾难. 函数命名冲突 依赖关系不好管理 模块化发展过程中的 7 种方式 一个文件、一个...

网友评论

      本文标题:模块化开发思想

      本文链接:https://www.haomeiwen.com/subject/wwnqmrtx.html