diff --git a/10-组件化开发/09-组件插槽使用/复习/复习插槽.html b/10-组件化开发/09-组件插槽使用/复习/复习插槽.html
new file mode 100644
index 0000000..165e226
--- /dev/null
+++ b/10-组件化开发/09-组件插槽使用/复习/复习插槽.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <div id="app">
+    <apps>
+      <div slot="mid">
+        <form action="" method="get">
+          <label class="" for="">
+            用户名：<input type="text" name="" id="" placeholder="请输入用户名">
+          </label>
+          <label class="" for="">
+            密码：<input type="password" name="" id="" placeholder="请输入密码">
+          </label>
+          <button>确认</button>
+        </form>
+      </div>
+    </apps>
+    <apps>
+      <div slot-scope="data">
+        <div v-for="datas in data">
+          <p>{{datas.join("-")}}</p>
+        </div>
+      </div>
+    </apps>
+  </div>
+  <template id="tpl">
+    <div>
+      <slot>
+        <button>左边</button>
+      </slot>
+      <slot name="mid">
+        <button>中间</button>
+      </slot>
+      <slot :data="list">
+        <h1>这是子组件内容</h1>
+        <div v-for="item in list">
+          <div>{{item}}</div>
+        </div>
+      </slot>
+    </div>
+  </template>
+</body>
+<script src="../../../JavaScript/vue.js"></script>
+<script>
+  new Vue({
+    el:"#app",
+    components:{
+      'apps':{
+        template:"#tpl",
+        data(){
+          return {
+            list:['这是内容1','这是内容2','这是内容3','这是内容4']
+          }
+        }
+      }
+    }
+  })
+</script>
+</html>
\ No newline at end of file
diff --git a/10-组件化开发/09-组件插槽使用/复习父子访问.html b/10-组件化开发/09-组件插槽使用/复习父子访问.html
new file mode 100644
index 0000000..edf3741
--- /dev/null
+++ b/10-组件化开发/09-组件插槽使用/复习父子访问.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <div id="app">
+    <div>
+      <h1>这是父组件</h1>
+      <ul v-for="lists in content">
+        <li>{{lists}}</li>
+      </ul>
+      <button @click="Clickme()">点击我获取数据</button>
+    </div>
+    <br>
+    <br>
+    <apps ref="children"></apps>
+  </div>
+  <template id="tpl">
+    <div>
+      <h1>这是子组件</h1>
+      <ul v-for="item in list">
+        <li>{{item}}</li>
+      </ul>
+    </div>
+  </template>
+</body>
+<script src="../../JavaScript/vue.js"></script>
+<script>
+  new Vue({
+    el:"#app",
+    data:{
+      content:[]
+    },
+    methods: {
+      Clickme(){
+        this.content= this.$refs.children.list; 
+      }
+    },
+    components:{
+      'apps':{
+        template:"#tpl",
+        data(){
+          return {
+            list:["这是第一个内容","这是第二个内容","这是第三个内容"]
+          }
+        }
+      }
+    }
+  })
+</script>
+</html>
\ No newline at end of file
diff --git a/10-组件化开发/09-组件插槽使用/index.html b/11-前端模块化开发/01-前端模块化的重要性/模块化开发（ES5）index.html
similarity index 54%
rename from 10-组件化开发/09-组件插槽使用/index.html
rename to 11-前端模块化开发/01-前端模块化的重要性/模块化开发（ES5）index.html
index e927973..6a0a80e 100644
--- a/10-组件化开发/09-组件插槽使用/index.html
+++ b/11-前端模块化开发/01-前端模块化的重要性/模块化开发（ES5）index.html
@@ -7,9 +7,9 @@
   <title>Document</title>
 </head>
 <body>
-  <div id="app">
-
-  </div>
+  
 </body>
-<script src="../../"></script>
+<script src="./模块化开发（ES5）model_first.js"></script>
+<script src="./模块化开发（ES5）model_second.js"></script>
+<script src="./模块化开发（ES5）selectA.js"></script>
 </html>
\ No newline at end of file
diff --git a/11-前端模块化开发/01-前端模块化的重要性/模块化开发（ES5）model_first.js b/11-前端模块化开发/01-前端模块化的重要性/模块化开发（ES5）model_first.js
new file mode 100644
index 0000000..afc9c32
--- /dev/null
+++ b/11-前端模块化开发/01-前端模块化的重要性/模块化开发（ES5）model_first.js
@@ -0,0 +1,42 @@
+var content =(
+   function(){
+    // 创建模块化
+    var arr=[];
+    var name="潇潇";
+    var age=20;
+    var tip=true
+    function doing(name,age) {
+      console.log("这是你的名字"+name+"\n"+"这是你的年龄"+age+"\n"+name+"在吃饭");
+    }
+    if(tip){
+      doing(name, age)
+    }
+    arr.name=name
+    arr.doing=doing
+    return arr
+  }
+)()
+// 创建闭包：确保有作用域以免变量被修改
+// ()(
+//   function(){
+
+//   }
+// ) 
+// var content = ( //创建模块化
+//   function () {
+//     var arr = [];
+//     var name = "潇潇";
+//     var age = 20;
+//     var tip = true
+//     function doing(name, age) {
+//       console.log("这是你的名字" + name + "\n" + "这是你的年龄" + age + "\n" + name + "在吃饭");
+//     }
+//     if (tip) {
+//       doing(name, age)
+//     }
+//     arr.name = name
+//     arr.doing = doing
+//     return arr //返回内容保存到模块化名
+//   }
+// )()
+// 别处文件调用使用 模块名.属性进行调用
\ No newline at end of file
diff --git a/11-前端模块化开发/01-前端模块化的重要性/模块化开发（ES5）model_second.js b/11-前端模块化开发/01-前端模块化的重要性/模块化开发（ES5）model_second.js
new file mode 100644
index 0000000..fa4aac4
--- /dev/null
+++ b/11-前端模块化开发/01-前端模块化的重要性/模块化开发（ES5）model_second.js
@@ -0,0 +1,12 @@
+(
+  function(){
+    var name = "这是我的名字";
+    var tip = false
+    function doing(name) {
+      console.log(name+":笑笑");
+    }
+    if (tip==false) {
+      doing(name)
+    }
+  }
+)()
\ No newline at end of file
diff --git a/11-前端模块化开发/01-前端模块化的重要性/模块化开发（ES5）selectA.js b/11-前端模块化开发/01-前端模块化的重要性/模块化开发（ES5）selectA.js
new file mode 100644
index 0000000..280814b
--- /dev/null
+++ b/11-前端模块化开发/01-前端模块化的重要性/模块化开发（ES5）selectA.js
@@ -0,0 +1,2 @@
+content.name="佚名"
+content.doing(content.name,12);
\ No newline at end of file
