14-前端模块化

ffq-zhy · Oct 31, 2019 · 8d19caf · 8d19caf
1 parent 16bb8c3
commit 8d19caf
Show file tree

Hide file tree

Showing 16 changed files with 479 additions and 0 deletions.
diff --git a/14-前端模块化/01-为什么要又模块化/aaa.js b/14-前端模块化/01-为什么要又模块化/aaa.js
@@ -0,0 +1,28 @@
+//小明开发
+// var name = '小明'
+// var age = 22
+
+// function sum(num1, num2) {
+//   return num1 + num2
+// }
+// var flag = true
+// if (flag) {
+//   console.log(sum(10, 20));
+// }
+//模块对象
+var moduleA = (function (param) {
+  //导出对象
+  var obj = {}
+  var name = '小明'
+  var age = 22
+
+  function sum(num1, num2) {
+    return num1 + num2
+  }
+  var flag = true
+  if (flag) {
+    console.log(sum(10, 20))
+  }
+  obj.flag=false
+  return obj
+})()
diff --git a/14-前端模块化/01-为什么要又模块化/bbb.js b/14-前端模块化/01-为什么要又模块化/bbb.js
@@ -0,0 +1,3 @@
+//小红
+var name = "小红"
+var flag = false
diff --git a/14-前端模块化/01-为什么要又模块化/index.html b/14-前端模块化/01-为什么要又模块化/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>slot-插槽的基本使用</title>
+</head>
+
+<body>
+<!--
+  1.
+ -->
+
+  <!-- 父组件 -->
+  <div id="app">
+
+
+  </div>
+
+
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
+  <script src="aaa.js" ></script>
+  <script src="bbb.js" ></script>
+  <script src="ccc.js" ></script>
+
+  <script>
+
+    const app = new Vue({
+      el: "#app",
+      data() {
+        return {
+          message: "我是父组件消息"
+        }
+      },
+    })
+  </script>
+</body>
+
+</html>
diff --git a/14-前端模块化/01-为什么要又模块化/mmm.js b/14-前端模块化/01-为什么要又模块化/mmm.js
@@ -0,0 +1,5 @@
+//小明
+//使用全局变量moduleA
+if(moduleA.flag){
+  console.log("flag是true")
+}
diff --git a/14-前端模块化/02-CommonJS的模块化/aaa.js b/14-前端模块化/02-CommonJS的模块化/aaa.js
@@ -0,0 +1,21 @@
+//CommonJS需要nodeJS支持
+var name = '小明'
+var age = 22
+
+function sum(num1, num2) {
+  return num1 + num2
+}
+var flag = true
+if (flag) {
+  console.log(sum(10, 20))
+}
+
+// module.exports = {
+//   flag : flag,
+//   sum : sum
+// }
+//导出对象
+module.exports = {
+  flag,
+  sum
+}
diff --git a/14-前端模块化/02-CommonJS的模块化/bbb.js b/14-前端模块化/02-CommonJS的模块化/bbb.js
diff --git a/14-前端模块化/02-CommonJS的模块化/index.html b/14-前端模块化/02-CommonJS的模块化/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>CommonJS的模块化</title>
+</head>
+<body>
+
+
+  <script src="aaa.js" type="module"></script>
+  <script src="mmm.js" type="module"></script>
+</body>
+</html>
diff --git a/14-前端模块化/02-CommonJS的模块化/mmm.js b/14-前端模块化/02-CommonJS的模块化/mmm.js
@@ -0,0 +1,8 @@
+//导入对象,nodejs语法,需要node支持,从aaa.js取出对象
+var {flag,sum} = require("./aaa")
+
+console.log(sum(10,20));
+
+if(flag){
+  console.log("flag is true");
+}
diff --git a/14-前端模块化/03-ES6的模块化实现/aaa.js b/14-前端模块化/03-ES6的模块化实现/aaa.js
@@ -0,0 +1,26 @@
+//1.直接默认导出
+export let name = '小明'
+var age = 22
+
+function sum(num1, num2) {
+  return num1 + num2
+}
+var flag = true
+if (flag) {
+  console.log(sum(10, 20))
+}
+//2.最后统一导出
+export {
+  flag,sum,age
+}
+
+//3.导出函数/类
+export function say(value) {
+  console.log(value);
+}
+
+export class Person{
+  run(){
+    console.log("奔跑");
+  }
+}
diff --git a/14-前端模块化/03-ES6的模块化实现/bbb.js b/14-前端模块化/03-ES6的模块化实现/bbb.js
@@ -0,0 +1,26 @@
+import aaa from './aaa.js'
+
+
+if(aaa.flag){
+  console.log(aaa.sum(10,110));
+
+}
+var name = '小红'
+
+var flag = false
+
+//3.导入function和class
+import {Person} from './aaa.js'
+const p = new Person()
+p.run()
+
+//4.默认导入 export default
+import aaa from './aaa.js'
+
+console.log(aaa.sum(10,110));
+
+// 5.统一全部导入
+import * as aaa from './aaa.js'
+console.log(aaa.flag);
+console.log(aaa.name);
+
diff --git a/14-前端模块化/03-ES6的模块化实现/index.html b/14-前端模块化/03-ES6的模块化实现/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+</head>
+<body>
+
+
+  <script src="aaa.js" type="module"></script>
+  <script src="bbb.js" type="module"></script>
+  <script src="mmm.js" type="module"></script>
+</body>
+</html>
diff --git a/14-前端模块化/03-ES6的模块化实现/mmm.js b/14-前端模块化/03-ES6的模块化实现/mmm.js
@@ -0,0 +1,13 @@
+import {name,flag,sum,say,Person} from './aaa.js'
+
+console.log(name)
+
+if(flag){
+  console.log("小明是天才");
+}
+
+console.log(sum(20,30));
+
+say('hello')
+const p = new Person();
+p.run();