4.前端模块化开发

四.前端模块化开发

1.为什么要进行模块化开发

2.如何进行模块化开发

3.模块化开发实站用法

未更新

四.前端模块化开发

1.为什么要进行模块化开发

①前言

  • 分析可知此时star为b的,即b覆盖了a,此时出现问题。
DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
head>
<body>
  <script src="a.js">script>
  //a中内容var star = '王力宏'
  <script src="b.js">script>
  //b中内容var star = 5
  <script>
    console.log(star)
  script>
body>
html>

②解决问题

  • 模块化开发主要为了解决js的变量全局空间被污染的问题
  • 原因
    因为js是从上到下执行,所以谁在下,谁就被覆盖,代码容易出现问题

2.如何进行模块化开发

①导入模块 使用import

  • 方法1 (导入模块)
    import * as m from ./m.js
    import m1 from ./m1.js
  • 方法2 (直接赋值变量 解构module)
    import {star} from ./m2.js
  • 举例
DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
head>
<body>
  <script type="module">
    import * as m1 from './m1.js'
    import * as m2 from './m2.js'

    console.log(m1)
    console.log(m2)

    console.log(m1.star)
    console.log(m2.star)
    
    //还可以这样导入:解构赋值的形式
    import {star, sing} from './m1.js'
    import {star as star2} from './m2.js' //使用as防止重名
    console.log(star)
    sing()
    console.log(star2)
    
	//导入m3
	import m3 from './m3.js'
	console.log(m3)
  script>
body>
html>

②导出模块 使用export

  • 方法1(直接作用在变量或者方法)
    export let star =5
    export let sing=5
  • 方法2(批量导出模块)
    export {star, sing}
  • 方法3(导出默认模块)
    export default{
    username: ‘helen’,
    }
  • 测试
//方法1
export let star = 5
//方法2
let star = '王力宏';

function sing(){
  console.log('大城小爱')
}

export {star, sing}
//方法3
//可以导出任意类型,但同时只能有一个export default
// export default 'helen'
// export default 99

//大部分情况是导出对象
export default{
  username: 'helen',
  age: 20,
  coding(){
    console.log('hello world')
  } 
}

3.模块化开发实际用法

  • 先将所有模块导入一个入口文件
  • 然后在实际页面中直接导入聚合模块
  • 测试
//名称叫app.js
import * as m1 from './m1.js'
import * as m2 from './m2.js'
import m3 from './m3.js'

console.log(m1)
console.log(m2)
console.log(m3)
DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
head>
<body>
  
  <script src="app.js" type="module">script>
body>
html>

未更新

你可能感兴趣的:(项目1:金融借钱还钱,java)