├── .DS_Store
├── .history
    ├── oop继承六种方式_20210128110542.html
    ├── oop继承六种方式_20210128111343.html
    └── oop继承六种方式_20210128111530.html
├── README.md
├── Web Workers
    ├── 06_Web Workers_测试.html
    ├── 06_Web Workers_测试2.html
    ├── H5 Web Workers(多线程).png
    └── worker.js
├── oop继承六种方式.html
├── vue2.0学习
    ├── .DS_Store
    ├── demo
    │   ├── $emit如何获取返回值
    │   │   ├── demo.vue
    │   │   └── index.vue
    │   └── filter.vue
    ├── slot与slot-scope用法
    │   ├── TodoItem.vue
    │   ├── index.vue
    │   └── slot新语法
    │   │   ├── index.vue
    │   │   └── slot.vue
    ├── vue组件间通信
    │   ├── attrs listeners
    │   │   ├── childCom1.vue
    │   │   ├── childCom2.vue
    │   │   ├── childCom3.vue
    │   │   ├── index.vue
    │   │   └── listeners
    │   │   │   ├── child1.vue
    │   │   │   ├── child2.vue
    │   │   │   └── index.vue
    │   ├── eventBus
    │   │   └── eventBus.html
    │   ├── props传递一个函数
    │   │   ├── Props.vue
    │   │   └── index.vue
    │   └── provide inject
    │   │   ├── ChildrenA.vue
    │   │   ├── ChildrenA_a.vue
    │   │   ├── ChildrenB.vue
    │   │   ├── ChildrenC.vue
    │   │   ├── ChildrenD.vue
    │   │   ├── ChildrenE.vue
    │   │   ├── ChildrenF.vue
    │   │   └── index.vue
    ├── watch和computed
    │   ├── computed.vue
    │   ├── index.vue
    │   └── watch.vue
    ├── 内部运行机制
    │   ├── virtual dom
    │   │   ├── diff算法
    │   │   │   ├── createElement.js
    │   │   │   └── updateChildren.js
    │   │   └── snabbdom
    │   │   │   └── demo.html
    │   └── 响应式原理
    │   │   ├── Array.js
    │   │   ├── Object.js
    │   │   └── Proxy.js
    ├── 基于axios接口封装
    │   ├── .DS_Store
    │   ├── README.md
    │   ├── babel.config.js
    │   ├── package-lock.json
    │   ├── package.json
    │   ├── public
    │   │   ├── favicon.ico
    │   │   └── index.html
    │   └── src
    │   │   ├── App.vue
    │   │   ├── api
    │   │       ├── api.js
    │   │       ├── http.js
    │   │       ├── personal.js
    │   │       ├── request.js
    │   │       └── vote.js
    │   │   ├── assets
    │   │       └── logo.png
    │   │   └── main.js
    └── 实现模态框
    │   ├── sync
    │       ├── demo.vue
    │       └── index.vue
    │   └── v-model
    │       ├── demo.vue
    │       └── index.vue
├── vuex-demo
    ├── HelloWorld.vue
    ├── main.js
    ├── store.js
    ├── 优化后HelloWorld.vue
    └── 优化后store.js
├── websocket
    ├── iframe流.html
    ├── iframe流.js
    ├── websocket.html
    ├── websocket.js
    ├── 轮询.html
    ├── 轮询.js
    ├── 长轮询.html
    └── 长轮询.js
├── 三栏布局
    ├── 三栏布局--flexbox布局.html
    ├── 三栏布局--grid布局.html
    ├── 三栏布局--浮动布局.html
    ├── 三栏布局--绝对布局.html
    ├── 三栏布局--表格布局.html
    ├── 双飞翼布局.html
    └── 圣杯布局.html
├── 多种跨域方式
    ├── 1.jsonp
    │   ├── index.html
    │   └── server.js
    ├── 2.cors
    │   ├── index.html
    │   ├── server1.js
    │   └── server2.js
    ├── 3.postMesssage
    │   ├── a.html
    │   ├── a.js
    │   ├── b.html
    │   └── b.js
    ├── 4.name
    │   ├── a.html
    │   ├── a.js
    │   ├── b.html
    │   ├── b.js
    │   └── c.html
    ├── 5.hash
    │   ├── a.html
    │   ├── a.js
    │   ├── b.html
    │   ├── b.js
    │   └── c.html
    ├── 6.domain
    │   ├── a.html
    │   ├── a.js
    │   ├── b.html
    │   └── b.js
    ├── 7.websocket
    │   ├── server.js
    │   └── socket.html
    ├── 8.nginx
    │   ├── a.js
    │   └── index.html
    └── 9.node中间件代理
    │   ├── index.html
    │   ├── server1.js
    │   └── server2.js
├── 文章中的思维导图
    ├── Ajax .xmind
    ├── Ajax请求PHP接口.xmind
    ├── CSS浮动.xmind
    ├── ES6核心特性.xmind
    ├── ES7、ES8、ES9、ES10新特性@浪里行舟.xmind
    ├── Fetch@浪里行舟.xmind
    ├── Git.xmind
    ├── HTTP协议@浪里行舟.xmind
    ├── JavaScript数据类型及其检测@浪里行舟.xmind
    ├── this.xmind
    ├── vue响应式原理.png
    ├── vue组件三大核心概念.xmind
    ├── 元素居中.xmind
    ├── 常见的CSS布局.xmind
    ├── 模块化规范.xmind
    ├── 浏览器渲染原理.xmind
    ├── 浏览器缓存机制.xmind
    ├── 线程机制与事件机制.xmind
    └── 闭包.xmind
├── 模块化
    ├── 01_modular
    │   ├── 01_全局function模式
    │   │   ├── module1.js
    │   │   ├── module2.js
    │   │   └── test1.html
    │   ├── 02_namespace模式
    │   │   ├── module1.js
    │   │   ├── module2.js
    │   │   └── test2.html
    │   ├── 03_IIFE模式
    │   │   ├── module3.js
    │   │   └── test3.html
    │   └── 04_IIFE模式增强
    │   │   ├── jquery-1.10.1.js
    │   │   ├── module4.js
    │   │   └── test4.html
    ├── 02_CommonJS-Node
    │   ├── app.js
    │   ├── modules
    │   │   ├── module1.js
    │   │   ├── module2.js
    │   │   └── module3.js
    │   └── package.json
    ├── 03_CommonJS-Browserify
    │   ├── index.html
    │   ├── js
    │   │   ├── dist
    │   │   │   └── bundle.js
    │   │   └── src
    │   │   │   ├── app.js
    │   │   │   ├── module1.js
    │   │   │   ├── module2.js
    │   │   │   └── module3.js
    │   └── package.json
    ├── 04_AMD-RequireJS
    │   ├── 01_NoAMD
    │   │   ├── js
    │   │   │   ├── main.js
    │   │   │   └── modules
    │   │   │   │   ├── alerter.js
    │   │   │   │   └── dataService.js
    │   │   └── test1.html
    │   ├── 02_RequireJS
    │   │   ├── index2.html
    │   │   └── js
    │   │   │   ├── libs
    │   │   │       └── require.js
    │   │   │   ├── main.js
    │   │   │   └── modules
    │   │   │       ├── alerter.js
    │   │   │       └── dataService.js
    │   └── 03_RequireJS2
    │   │   ├── index2.html
    │   │   └── js
    │   │       ├── libs
    │   │           ├── jquery-1.10.1.js
    │   │           └── require.js
    │   │       ├── main.js
    │   │       └── modules
    │   │           ├── alerter.js
    │   │           └── dataService.js
    ├── 05_CMD-SeaJS
    │   ├── index.html
    │   └── js
    │   │   ├── libs
    │   │       └── sea.js
    │   │   └── modules
    │   │       ├── main.js
    │   │       ├── module1.js
    │   │       ├── module2.js
    │   │       ├── module3.js
    │   │       └── module4.js
    └── 06_ES6_Babel_Browserify
    │   ├── index.html
    │   ├── js
    │       ├── lib
    │       │   ├── app.js
    │       │   ├── bundle.js
    │       │   ├── module1.js
    │       │   ├── module2.js
    │       │   └── module3.js
    │       └── src
    │       │   ├── app.js
    │       │   ├── module1.js
    │       │   ├── module2.js
    │       │   └── module3.js
    │   ├── package-lock.json
    │   └── package.json
├── 消除不同的浏览器在默认样式上不同表现reset.css
└── 移动端1px像素.css


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ljianshu/Blog/03bf481a21e8976ce95b45827d3d19176c7c9764/.DS_Store


--------------------------------------------------------------------------------
/.history/oop继承六种方式_20210128110542.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <title>JavaScript继承</title>
  7 | </head>
  8 | 
  9 | <body>
 10 |     <script>
 11 |         // 原型链继承
 12 |         // function Person(name, age) {
 13 |         //     this.name = name,
 14 |         //     this.age = age,
 15 |         //     this.setName = function () { }
 16 |         // }
 17 |         // Person.prototype.setAge = function () { }
 18 |         // function Student(name, age, price) {
 19 |         //     Person.call(this, name, age)
 20 |         //     this.price = price
 21 |         // }
 22 |         // var s1 = new Student('Tom', 20, 15000)
 23 |         // console.log(s1)
 24 | 
 25 |         // 借用构造函数继承
 26 |         // function Person(name, age) {
 27 |         //     this.name = name,
 28 |         //         this.age = age
 29 |         // }
 30 |         // Person.prototype.setAge = function () {
 31 |         //     console.log("111")
 32 |         // }
 33 |         // function Student(price) {
 34 |         //     this.price = price
 35 |         //     this.setScore = function () { }
 36 |         // }
 37 |         // Student.prototype.sayHello = function () { }
 38 |         // Student.prototype = new Person
 39 |         // Student.prototype.sayHello = function () { }
 40 |         // var s1 = new Student(15000)
 41 |         // var s2 = new Student(14000)
 42 |         // console.log(s1, s2)
 43 |         // s1.play.push(4)
 44 |         // console.log(s1.setAge, s2.setAge)
 45 |         // console.log(s1.__proto__ === s2.__proto__)
 46 |         // console.log(s1.__proto__.__proto__ === s2.__proto__.__proto__)
 47 |         // console.log(s1.__proto__.__proto__.__proto__ === Object.prototype)
 48 | 
 49 |         // 原型链+借用构造函数的组合继承
 50 |         // function Person(name, age) {
 51 |         //     this.name = name,
 52 |         //         this.age = age,
 53 |         //         this.setAge = function () { }
 54 |         // }
 55 |         // Person.prototype.setAge = function () {
 56 |         //     console.log("111")
 57 |         // }
 58 |         // var p1 = new Person('jack', 15)
 59 |         // function Student(name, age, price) {
 60 |         //     Person.call(this, name, age)
 61 |         //     this.price = price
 62 |         //     this.setScore = function () { }
 63 |         // }
 64 |         // Student.prototype = new Person()
 65 |         // Student.prototype.constructor = Student//组合继承也是需要修复构造函数指向的
 66 |         // Student.prototype.sayHello = function () { }
 67 |         // var s1 = new Student('Tom', 20, 15000)
 68 |         // var s2 = new Student('Jack', 22, 14000)
 69 |         // console.log(s1.constructor) //Student
 70 |         // console.log(p1.constructor) //Person
 71 | 
 72 |         //  组合继承优化1
 73 |         // function Person(name, age) {
 74 |         //     this.name = name,
 75 |         //         this.age = age,
 76 |         //         this.setAge = function () { }
 77 |         // }
 78 |         // Person.prototype.setAge = function () {
 79 |         //     console.log("111")
 80 |         // }
 81 |         // function Student(name, age, price) {
 82 |         //     Person.call(this, name, age)
 83 |         //     this.price = price
 84 |         //     this.setScore = function () { }
 85 |         // }
 86 |         // Student.prototype = Person.prototype
 87 |         // Student.prototype.sayHello = function () { }
 88 |         // var s1 = new Student('Tom', 20, 15000)
 89 |         // console.log(s1)
 90 |         // console.log(s1 instanceof Student, s1 instanceof Person)//true true
 91 |         // console.log(s1.constructor)//Person
 92 | 
 93 |         //组合继承优化2 
 94 |         function Person(name, age) {
 95 |             this.name = name,
 96 |             this.age = age
 97 |         }
 98 |         Person.prototype.setAge = function () {
 99 |             console.log("111")
100 |         }
101 | 
102 |         function Student(name, age, price) {
103 |             Person.call(this, name, age)
104 |             this.price = price
105 |             this.setScore = function () {}
106 |         }
107 |         Student.prototype = Object.create(Person.prototype)
108 |         Student.prototype.constructor = Student
109 |         var s1 = new Student('Tom', 20, 15000)
110 |         console.log(s1 instanceof Student, s1 instanceof Person) // true true
111 |         console.log(s1.constructor) //Student
112 |         console.log(s1)
113 | 
114 |         //ES6 class继承
115 |         // class Person {
116 |         //     //调用类的构造方法
117 |         //     constructor(name, age) {
118 |         //         this.name = name
119 |         //         this.age = age
120 |         //     }
121 |         //     //定义一般的方法
122 |         //     showName() {
123 |         //         console.log("调用父类的方法")
124 |         //         console.log(this.name, this.age);
125 |         //     }
126 |         // }
127 |         // let p1 = new Person('kobe', 39)
128 |         // console.log(p1)
129 |         // //定义一个子类
130 |         // class Student extends Person {
131 |         //     constructor(name, age, salary) {
132 |         //         super(name, age)
133 |         //         this.salary = salary
134 |         //     }
135 |         //     showName() { //在子类自身定义方法
136 |         //         console.log("调用子类的方法")
137 |         //         console.log(this.name, this.age, this.salary);
138 |         //     }
139 |         // }
140 |         // let s1 = new Student('wade', 38, 1000000000)
141 |         // let s2 = new Student('kobe', 40, 3000000000)
142 |         // console.log(s1.showName === s2.showName)//true
143 |         // console.log(s1)
144 |         // s1.showName()
145 |     </script>
146 | </body>
147 | 
148 | </html>


--------------------------------------------------------------------------------
/.history/oop继承六种方式_20210128111343.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <title>JavaScript</title>
  7 | </head>
  8 | 
  9 | <body>
 10 |   <script>
 11 |     // 原型链继承
 12 |     // function Person(name, age) {
 13 |     //     this.name = name,
 14 |     //     this.age = age,
 15 |     //     this.setName = function () { }
 16 |     // }
 17 |     // Person.prototype.setAge = function () { }
 18 |     // function Student(name, age, price) {
 19 |     //     Person.call(this, name, age)
 20 |     //     this.price = price
 21 |     // }
 22 |     // var s1 = new Student('Tom', 20, 15000)
 23 |     // console.log(s1)
 24 | 
 25 |     // 借用构造函数继承
 26 |     // function Person(name, age) {
 27 |     //     this.name = name,
 28 |     //         this.age = age
 29 |     // }
 30 |     // Person.prototype.setAge = function () {
 31 |     //     console.log("111")
 32 |     // }
 33 |     // function Student(price) {
 34 |     //     this.price = price
 35 |     //     this.setScore = function () { }
 36 |     // }
 37 |     // Student.prototype.sayHello = function () { }
 38 |     // Student.prototype = new Person
 39 |     // Student.prototype.sayHello = function () { }
 40 |     // var s1 = new Student(15000)
 41 |     // var s2 = new Student(14000)
 42 |     // console.log(s1, s2)
 43 |     // s1.play.push(4)
 44 |     // console.log(s1.setAge, s2.setAge)
 45 |     // console.log(s1.__proto__ === s2.__proto__)
 46 |     // console.log(s1.__proto__.__proto__ === s2.__proto__.__proto__)
 47 |     // console.log(s1.__proto__.__proto__.__proto__ === Object.prototype)
 48 | 
 49 |     // 原型链+借用构造函数的组合继承
 50 |     // function Person(name, age) {
 51 |     //     this.name = name,
 52 |     //         this.age = age,
 53 |     //         this.setAge = function () { }
 54 |     // }
 55 |     // Person.prototype.setAge = function () {
 56 |     //     console.log("111")
 57 |     // }
 58 |     // var p1 = new Person('jack', 15)
 59 |     // function Student(name, age, price) {
 60 |     //     Person.call(this, name, age)
 61 |     //     this.price = price
 62 |     //     this.setScore = function () { }
 63 |     // }
 64 |     // Student.prototype = new Person()
 65 |     // Student.prototype.constructor = Student//组合继承也是需要修复构造函数指向的
 66 |     // Student.prototype.sayHello = function () { }
 67 |     // var s1 = new Student('Tom', 20, 15000)
 68 |     // var s2 = new Student('Jack', 22, 14000)
 69 |     // console.log(s1.constructor) //Student
 70 |     // console.log(p1.constructor) //Person
 71 | 
 72 |     //  组合继承优化1
 73 |     // function Person(name, age) {
 74 |     //     this.name = name,
 75 |     //         this.age = age,
 76 |     //         this.setAge = function () { }
 77 |     // }
 78 |     // Person.prototype.setAge = function () {
 79 |     //     console.log("111")
 80 |     // }
 81 |     // function Student(name, age, price) {
 82 |     //     Person.call(this, name, age)
 83 |     //     this.price = price
 84 |     //     this.setScore = function () { }
 85 |     // }
 86 |     // Student.prototype = Person.prototype
 87 |     // Student.prototype.sayHello = function () { }
 88 |     // var s1 = new Student('Tom', 20, 15000)
 89 |     // console.log(s1)
 90 |     // console.log(s1 instanceof Student, s1 instanceof Person)//true true
 91 |     // console.log(s1.constructor)//Person
 92 | 
 93 |     //组合继承优化2 
 94 |     function Person(name, age) {
 95 |       this.name = name,
 96 |         this.age = age
 97 |     }
 98 |     Person.prototype.setAge = function () {
 99 |       console.log("111")
100 |     }
101 | 
102 |     function Student(name, age, price) {
103 |       Person.call(this, name, age)
104 |       this.price = price
105 |       this.setScore = function () { }
106 |     }
107 |     Student.prototype = Object.create(Person.prototype)
108 |     Student.prototype.constructor = Student
109 |     var s1 = new Student('Tom', 20, 15000)
110 |     console.log(s1 instanceof Student, s1 instanceof Person) // true true
111 |     console.log(s1.constructor) //Student
112 |     console.log(s1)
113 | 
114 |         //ES6 class继承
115 |         // class Person {
116 |         //     //调用类的构造方法
117 |         //     constructor(name, age) {
118 |         //         this.name = name
119 |         //         this.age = age
120 |         //     }
121 |         //     //定义一般的方法
122 |         //     showName() {
123 |         //         console.log("调用父类的方法")
124 |         //         console.log(this.name, this.age);
125 |         //     }
126 |         // }
127 |         // let p1 = new Person('kobe', 39)
128 |         // console.log(p1)
129 |         // //定义一个子类
130 |         // class Student extends Person {
131 |         //     constructor(name, age, salary) {
132 |         //         super(name, age)
133 |         //         this.salary = salary
134 |         //     }
135 |         //     showName() { //在子类自身定义方法
136 |         //         console.log("调用子类的方法")
137 |         //         console.log(this.name, this.age, this.salary);
138 |         //     }
139 |         // }
140 |         // let s1 = new Student('wade', 38, 1000000000)
141 |         // let s2 = new Student('kobe', 40, 3000000000)
142 |         // console.log(s1.showName === s2.showName)//true
143 |         // console.log(s1)
144 |         // s1.showName()
145 |   </script>
146 | </body>
147 | 
148 | </html>


--------------------------------------------------------------------------------
/.history/oop继承六种方式_20210128111530.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <title>JavaScript继承例子</title>
  7 | </head>
  8 | 
  9 | <body>
 10 |   <script>
 11 |     // 原型链继承
 12 |     // function Person(name, age) {
 13 |     //     this.name = name,
 14 |     //     this.age = age,
 15 |     //     this.setName = function () { }
 16 |     // }
 17 |     // Person.prototype.setAge = function () { }
 18 |     // function Student(name, age, price) {
 19 |     //     Person.call(this, name, age)
 20 |     //     this.price = price
 21 |     // }
 22 |     // var s1 = new Student('Tom', 20, 15000)
 23 |     // console.log(s1)
 24 | 
 25 |     // 借用构造函数继承
 26 |     // function Person(name, age) {
 27 |     //     this.name = name,
 28 |     //         this.age = age
 29 |     // }
 30 |     // Person.prototype.setAge = function () {
 31 |     //     console.log("111")
 32 |     // }
 33 |     // function Student(price) {
 34 |     //     this.price = price
 35 |     //     this.setScore = function () { }
 36 |     // }
 37 |     // Student.prototype.sayHello = function () { }
 38 |     // Student.prototype = new Person
 39 |     // Student.prototype.sayHello = function () { }
 40 |     // var s1 = new Student(15000)
 41 |     // var s2 = new Student(14000)
 42 |     // console.log(s1, s2)
 43 |     // s1.play.push(4)
 44 |     // console.log(s1.setAge, s2.setAge)
 45 |     // console.log(s1.__proto__ === s2.__proto__)
 46 |     // console.log(s1.__proto__.__proto__ === s2.__proto__.__proto__)
 47 |     // console.log(s1.__proto__.__proto__.__proto__ === Object.prototype)
 48 | 
 49 |     // 原型链+借用构造函数的组合继承
 50 |     // function Person(name, age) {
 51 |     //     this.name = name,
 52 |     //         this.age = age,
 53 |     //         this.setAge = function () { }
 54 |     // }
 55 |     // Person.prototype.setAge = function () {
 56 |     //     console.log("111")
 57 |     // }
 58 |     // var p1 = new Person('jack', 15)
 59 |     // function Student(name, age, price) {
 60 |     //     Person.call(this, name, age)
 61 |     //     this.price = price
 62 |     //     this.setScore = function () { }
 63 |     // }
 64 |     // Student.prototype = new Person()
 65 |     // Student.prototype.constructor = Student//组合继承也是需要修复构造函数指向的
 66 |     // Student.prototype.sayHello = function () { }
 67 |     // var s1 = new Student('Tom', 20, 15000)
 68 |     // var s2 = new Student('Jack', 22, 14000)
 69 |     // console.log(s1.constructor) //Student
 70 |     // console.log(p1.constructor) //Person
 71 | 
 72 |     //  组合继承优化1
 73 |     // function Person(name, age) {
 74 |     //     this.name = name,
 75 |     //         this.age = age,
 76 |     //         this.setAge = function () { }
 77 |     // }
 78 |     // Person.prototype.setAge = function () {
 79 |     //     console.log("111")
 80 |     // }
 81 |     // function Student(name, age, price) {
 82 |     //     Person.call(this, name, age)
 83 |     //     this.price = price
 84 |     //     this.setScore = function () { }
 85 |     // }
 86 |     // Student.prototype = Person.prototype
 87 |     // Student.prototype.sayHello = function () { }
 88 |     // var s1 = new Student('Tom', 20, 15000)
 89 |     // console.log(s1)
 90 |     // console.log(s1 instanceof Student, s1 instanceof Person)//true true
 91 |     // console.log(s1.constructor)//Person
 92 | 
 93 |     //组合继承优化2 
 94 |     function Person(name, age) {
 95 |       this.name = name,
 96 |         this.age = age
 97 |     }
 98 |     Person.prototype.setAge = function () {
 99 |       console.log("111")
100 |     }
101 | 
102 |     function Student(name, age, price) {
103 |       Person.call(this, name, age)
104 |       this.price = price
105 |       this.setScore = function () { }
106 |     }
107 |     Student.prototype = Object.create(Person.prototype)
108 |     Student.prototype.constructor = Student
109 |     var s1 = new Student('Tom', 20, 15000)
110 |     console.log(s1 instanceof Student, s1 instanceof Person) // true true
111 |     console.log(s1.constructor) //Student
112 |     console.log(s1)
113 | 
114 |         //ES6 class继承
115 |         // class Person {
116 |         //     //调用类的构造方法
117 |         //     constructor(name, age) {
118 |         //         this.name = name
119 |         //         this.age = age
120 |         //     }
121 |         //     //定义一般的方法
122 |         //     showName() {
123 |         //         console.log("调用父类的方法")
124 |         //         console.log(this.name, this.age);
125 |         //     }
126 |         // }
127 |         // let p1 = new Person('kobe', 39)
128 |         // console.log(p1)
129 |         // //定义一个子类
130 |         // class Student extends Person {
131 |         //     constructor(name, age, salary) {
132 |         //         super(name, age)
133 |         //         this.salary = salary
134 |         //     }
135 |         //     showName() { //在子类自身定义方法
136 |         //         console.log("调用子类的方法")
137 |         //         console.log(this.name, this.age, this.salary);
138 |         //     }
139 |         // }
140 |         // let s1 = new Student('wade', 38, 1000000000)
141 |         // let s2 = new Student('kobe', 40, 3000000000)
142 |         // console.log(s1.showName === s2.showName)//true
143 |         // console.log(s1)
144 |         // s1.showName()
145 |   </script>
146 | </body>
147 | 
148 | </html>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # 博客目录
  2 | 努力打造一系列适合初中级工程师能够看得懂的优质文章，今年博客侧重于框架、TS和构建工具等底层原理分析，如果想第一时间获取文章，欢迎关注**我的公众号：前端工匠，接下去的路我们一起走！**  欢迎添加我的个人微信frontJS，**获取大厂面试题及其答案**
  3 | 
  4 | ### 版权声明：本文为博主原创文章，未经博主允许不得转载。
  5 | 
  6 | - [掘金博客(全集)](https://juejin.im/user/5a9a9cdcf265da238b7d771c)
  7 | 
  8 | - [segmentFault博客(精华)](https://segmentfault.com/u/langlixingzhou/articles)
  9 | 
 10 | - 想加入**前端交流群**，跟诸多一线大厂的大佬交流学习，先关注「前端工匠」公众号👉点击“进群交流”，备注git,我拉你入群	
 11 | 
 12 | 
 13 | ### |  浏览器相关
 14 | #### 1.[深入浅出浏览器渲染原理](https://github.com/ljianshu/Blog/issues/51)
 15 | #### 2.[深入了解浏览器存储](https://github.com/ljianshu/Blog/issues/25)
 16 | #### 3.[深入理解浏览器的缓存机制](https://github.com/ljianshu/Blog/issues/23)
 17 | #### 4.[从URL输入到页面展现到底发生什么？](https://github.com/ljianshu/Blog/issues/24)
 18 | ### |  Javascript
 19 | #### 1.[前端模块化详解(完整版)](https://github.com/ljianshu/Blog/issues/48)
 20 | #### 2.[九种跨域方式实现原理（完整版）](https://github.com/ljianshu/Blog/issues/55)
 21 | #### 3.[JavaScript的数据类型及其检测](https://github.com/ljianshu/Blog/issues/4)
 22 | #### 4.[JavaScript数据类型转换](https://github.com/ljianshu/Blog/issues/1)
 23 | #### 5.[深入理解JavaScript作用域和作用域链](https://github.com/ljianshu/Blog/issues/59)
 24 | #### 6.[深入理解JavaScript执行上下文和执行栈](https://github.com/ljianshu/Blog/issues/60)
 25 | #### 7.[细说数组常用遍历的方法](https://github.com/ljianshu/Blog/issues/31)
 26 | #### 8.[浅拷贝与深拷贝](https://github.com/ljianshu/Blog/issues/5)
 27 | #### 9.[深入浅出Javascript闭包](https://github.com/ljianshu/Blog/issues/6)
 28 | #### 10.[你还没搞懂this？](https://github.com/ljianshu/Blog/issues/7)
 29 | #### 11.[原型与原型链详解](https://github.com/ljianshu/Blog/issues/18)
 30 | #### 12.[Dom事件机制](https://github.com/ljianshu/Blog/issues/44)
 31 | #### 13.[JavaScript常见的六种继承方式](https://github.com/ljianshu/Blog/issues/20)
 32 | #### 14.[浏览器与Node的事件循环(Event Loop)有何区别?](https://github.com/ljianshu/Blog/issues/54)
 33 | #### 15.[JavaScript中的垃圾回收和内存泄漏](https://github.com/ljianshu/Blog/issues/65)
 34 | #### 16.[javascript函数式编程](https://github.com/ljianshu/Blog/issues/72)
 35 | #### 17.[慎用Number.toFixed()](https://github.com/ljianshu/Blog/issues/95)
 36 | #### 18.[你会用JSON.stringify()?](https://github.com/ljianshu/Blog/issues/97)
 37 | ### |  ES6+
 38 | #### 1.[ES6核心特性](https://github.com/ljianshu/Blog/issues/10)
 39 | #### 2.[ES7、ES8、ES9、ES10新特性](https://github.com/ljianshu/Blog/issues/76)
 40 | #### 3.[ES2020新特性](https://github.com/ljianshu/Blog/issues/79)
 41 | #### 4.[ES2021新特性](https://github.com/ljianshu/Blog/issues/92)
 42 | #### 5.[7个令人兴奋的 JavaScript 新特性](https://github.com/ljianshu/Blog/issues/78)
 43 | #### 6.[你真的懂Promise吗](https://github.com/ljianshu/Blog/issues/81)
 44 | #### 7.[异步解决方案--Promise与Await](https://github.com/ljianshu/Blog/issues/13)
 45 | #### 8.[JS 异步编程六种方案](https://github.com/ljianshu/Blog/issues/53)
 46 | #### 9.[ES6迭代器和生成器](https://github.com/ljianshu/Blog/issues/42)
 47 | 
 48 | ### |  CSS
 49 | #### 1.[如何居中一个元素（终结版)](https://github.com/ljianshu/Blog/issues/29)
 50 | #### 2.[关于响应式布局，你必须要知道的](https://github.com/ljianshu/Blog/issues/38)
 51 | #### 3.[深入理解BFC](https://github.com/ljianshu/Blog/issues/15)
 52 | #### 4.[如何清除浮动](https://github.com/ljianshu/Blog/issues/16)
 53 | #### 5.[LESS即学即用](https://github.com/ljianshu/Blog/issues/19)
 54 | #### 6.[几种常见的CSS布局](https://github.com/ljianshu/Blog/issues/40)
 55 | #### 7.[实现三栏布局的几种方法](https://github.com/ljianshu/Blog/issues/14)
 56 | 
 57 | ### |  Http协议与数据请求
 58 | #### 1.[关于Http协议，你必须要知道的](https://github.com/ljianshu/Blog/issues/22)
 59 | #### 2.[深入理解HTTPS工作原理](https://github.com/ljianshu/Blog/issues/50)
 60 | #### 3.[解读HTTP/2 及 HTTP/3特性](https://github.com/ljianshu/Blog/issues/57)
 61 | #### 4.[Web 实时推送技术的总结](https://github.com/ljianshu/Blog/issues/58)
 62 | #### 5.[TCP和UDP比较](https://github.com/ljianshu/Blog/issues/61)
 63 | #### 6.[Ajax原理一篇就够了](https://github.com/ljianshu/Blog/issues/45)
 64 | #### 7.[Ajax请求后台数据](https://github.com/ljianshu/Blog/issues/46)
 65 | #### 8.[fetch 如何请求数据](https://github.com/ljianshu/Blog/issues/47)
 66 | 
 67 | ### |  页面性能优化与安全
 68 | #### 1.[页面性能优化办法有哪些](https://github.com/ljianshu/Blog/issues/9)
 69 | #### 2.[懒加载和预加载](https://github.com/ljianshu/Blog/issues/8)
 70 | #### 3.[函数节流和防抖](https://github.com/ljianshu/Blog/issues/43).
 71 | #### 4.[常见六大Web安全攻防解析](https://github.com/ljianshu/Blog/issues/56)
 72 | 
 73 | ### |  Vue全家桶
 74 | #### 1.[Vue3.2 有哪些新变化？](https://github.com/ljianshu/Blog/issues/109)
 75 | #### 2.[从头开始学习Vuex](https://github.com/ljianshu/Blog/issues/36)
 76 | #### 3.[从头开始学习vue-router](https://github.com/ljianshu/Blog/issues/39)
 77 | #### 4.[vue组件三大核心概念](https://github.com/ljianshu/Blog/issues/67)
 78 | #### 5.[vue组件间通信六种方式（完整版）](https://github.com/ljianshu/Blog/issues/66)
 79 | #### 6.[vue计算属性和watch的区别](https://github.com/ljianshu/Blog/issues/68)
 80 | #### 7.[揭秘Vue中的Virtual Dom](https://github.com/ljianshu/Blog/issues/69) 
 81 | #### 8.[深入理解vue响应式原理](https://github.com/ljianshu/Blog/issues/70)
 82 | #### 9.[令人眼前一亮的Vue实战技巧](https://github.com/ljianshu/Blog/issues/71)
 83 | 
 84 | ### |  工具
 85 | #### 1.[团队如何统一代码规范？](https://github.com/ljianshu/Blog/issues/114)
 86 | #### 2.[让开发效率“飞起”的VS Code 插件](https://github.com/ljianshu/Blog/issues/80)
 87 | 
 88 | ### |  面试
 89 | #### 1.[Javascript 面试核心考点(基础版)](https://github.com/ljianshu/Blog/issues/63)
 90 | ### |  其他
 91 | #### 1.[写技术博客那点事](https://github.com/ljianshu/Blog/issues/62)
 92 | 
 93 | 
 94 | ### |  备战大厂面试
 95 | 
 96 | - 大厂面试题及其答案（四份PDF囊括上千经典题）
 97 | - vue/react/webpack源码视频深度讲解
 98 | - JavaScript/vue 常见面试题视频讲解
 99 | - JavaScript版数据结构与算法视频资料
100 | - 简历模版等等
101 | 
102 | 感兴趣的扫描下方微信二维码（frontJS）免费找我领取，备注：git,希望对你们有些许帮助！有时候图片显示不出来，直接加frontJS
103 | 
104 | ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/11390a27203f4d8baca25de05d84a760~tplv-k3u1fbpfcp-watermark.image)
105 | 
106 | 


--------------------------------------------------------------------------------
/Web Workers/06_Web Workers_测试.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>06_Web Workers_测试</title>
 6 | </head>
 7 | <body>
 8 | <!--
 9 | 1. H5规范提供了js分线程的实现, 取名为: Web Workers
10 | 2. 相关API
11 |   * Worker: 构造函数, 加载分线程执行的js文件
12 |   * Worker.prototype.onmessage: 用于接收另一个线程的回调函数
13 |   * Worker.prototype.postMessage: 向另一个线程发送消息
14 | 3. 不足
15 |   * worker内代码不能操作DOM(更新UI)
16 |   * 不能跨域加载JS
17 |   * 不是每个浏览器都支持这个新特性
18 | -->
19 | 
20 | <input type="text" placeholder="数值" id="number">
21 | <button id="btn">计算</button>
22 | <script type="text/javascript">
23 |   // 1 1 2 3 5 8    f(n) = f(n-1) + f(n-2)
24 |   function fibonacci(n) {
25 |     return n<=2 ? 1 : fibonacci(n-1) + fibonacci(n-2)  //递归调用
26 |   }
27 |   // console.log(fibonacci(7))
28 |   var input = document.getElementById('number')
29 |   document.getElementById('btn').onclick = function () {
30 |     var number = input.value
31 |     var result = fibonacci(number)
32 |     alert(result)
33 |   }
34 | 
35 | </script>
36 | </body>
37 | </html>


--------------------------------------------------------------------------------
/Web Workers/06_Web Workers_测试2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>06_Web Workers_测试</title>
 6 | </head>
 7 | <body>
 8 | <!--
 9 | 1. H5规范提供了js分线程的实现, 取名为: Web Workers
10 | 2. 相关API
11 |   * Worker: 构造函数, 加载分线程执行的js文件
12 |   * Worker.prototype.onmessage: 用于接收另一个线程的回调函数
13 |   * Worker.prototype.postMessage: 向另一个线程发送消息
14 | 3. 不足
15 |   * worker内代码不能操作DOM(更新UI)
16 |   * 不能跨域加载JS
17 |   * 不是每个浏览器都支持这个新特性
18 | -->
19 | 
20 | <input type="text" placeholder="数值" id="number">
21 | <button id="btn">计算</button>
22 | <script type="text/javascript">
23 |   var input = document.getElementById('number')
24 |   document.getElementById('btn').onclick = function () {
25 |     var number = input.value
26 | 
27 |     //创建一个Worker对象
28 |     var worker = new Worker('worker.js')
29 |     // 绑定接收消息的监听
30 |     worker.onmessage = function (event) {
31 |       console.log('主线程接收分线程返回的数据: '+event.data)
32 |       alert(event.data)
33 |     }
34 | 
35 |     // 向分线程发送消息
36 |     worker.postMessage(number)
37 |     console.log('主线程向分线程发送数据: '+number)
38 |   }
39 |   // console.log(this) // window
40 | 
41 | </script>
42 | </body>
43 | </html>


--------------------------------------------------------------------------------
/Web Workers/H5 Web Workers(多线程).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ljianshu/Blog/03bf481a21e8976ce95b45827d3d19176c7c9764/Web Workers/H5 Web Workers(多线程).png


--------------------------------------------------------------------------------
/Web Workers/worker.js:
--------------------------------------------------------------------------------
 1 | function fibonacci(n) {
 2 |   return n<=2 ? 1 : fibonacci(n-1) + fibonacci(n-2)  //递归调用
 3 | }
 4 | 
 5 | console.log(this)
 6 | this.onmessage = function (event) {
 7 |   var number = event.data
 8 |   console.log('分线程接收到主线程发送的数据: '+number)
 9 |   //计算
10 |   var result = fibonacci(number)
11 |   postMessage(result)
12 |   console.log('分线程向主线程返回数据: '+result)
13 |   // alert(result)  alert是window的方法, 在分线程不能调用
14 |   // 分线程中的全局对象不再是window, 所以在分线程中不可能更新界面
15 | }


--------------------------------------------------------------------------------
/oop继承六种方式.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <title>JavaScript继承例子</title>
  7 | </head>
  8 | 
  9 | <body>
 10 |   <script>
 11 |     // 原型链继承
 12 |     // function Person(name, age) {
 13 |     //     this.name = name,
 14 |     //     this.age = age,
 15 |     //     this.setName = function () { }
 16 |     // }
 17 |     // Person.prototype.setAge = function () { }
 18 |     // function Student(name, age, price) {
 19 |     //     Person.call(this, name, age)
 20 |     //     this.price = price
 21 |     // }
 22 |     // var s1 = new Student('Tom', 20, 15000)
 23 |     // console.log(s1)
 24 | 
 25 |     // 借用构造函数继承
 26 |     // function Person(name, age) {
 27 |     //     this.name = name,
 28 |     //         this.age = age
 29 |     // }
 30 |     // Person.prototype.setAge = function () {
 31 |     //     console.log("111")
 32 |     // }
 33 |     // function Student(price) {
 34 |     //     this.price = price
 35 |     //     this.setScore = function () { }
 36 |     // }
 37 |     // Student.prototype.sayHello = function () { }
 38 |     // Student.prototype = new Person
 39 |     // Student.prototype.sayHello = function () { }
 40 |     // var s1 = new Student(15000)
 41 |     // var s2 = new Student(14000)
 42 |     // console.log(s1, s2)
 43 |     // s1.play.push(4)
 44 |     // console.log(s1.setAge, s2.setAge)
 45 |     // console.log(s1.__proto__ === s2.__proto__)
 46 |     // console.log(s1.__proto__.__proto__ === s2.__proto__.__proto__)
 47 |     // console.log(s1.__proto__.__proto__.__proto__ === Object.prototype)
 48 | 
 49 |     // 原型链+借用构造函数的组合继承
 50 |     // function Person(name, age) {
 51 |     //     this.name = name,
 52 |     //         this.age = age,
 53 |     //         this.setAge = function () { }
 54 |     // }
 55 |     // Person.prototype.setAge = function () {
 56 |     //     console.log("111")
 57 |     // }
 58 |     // var p1 = new Person('jack', 15)
 59 |     // function Student(name, age, price) {
 60 |     //     Person.call(this, name, age)
 61 |     //     this.price = price
 62 |     //     this.setScore = function () { }
 63 |     // }
 64 |     // Student.prototype = new Person()
 65 |     // Student.prototype.constructor = Student//组合继承也是需要修复构造函数指向的
 66 |     // Student.prototype.sayHello = function () { }
 67 |     // var s1 = new Student('Tom', 20, 15000)
 68 |     // var s2 = new Student('Jack', 22, 14000)
 69 |     // console.log(s1.constructor) //Student
 70 |     // console.log(p1.constructor) //Person
 71 | 
 72 |     //  组合继承优化1
 73 |     // function Person(name, age) {
 74 |     //     this.name = name,
 75 |     //         this.age = age,
 76 |     //         this.setAge = function () { }
 77 |     // }
 78 |     // Person.prototype.setAge = function () {
 79 |     //     console.log("111")
 80 |     // }
 81 |     // function Student(name, age, price) {
 82 |     //     Person.call(this, name, age)
 83 |     //     this.price = price
 84 |     //     this.setScore = function () { }
 85 |     // }
 86 |     // Student.prototype = Person.prototype
 87 |     // Student.prototype.sayHello = function () { }
 88 |     // var s1 = new Student('Tom', 20, 15000)
 89 |     // console.log(s1)
 90 |     // console.log(s1 instanceof Student, s1 instanceof Person)//true true
 91 |     // console.log(s1.constructor)//Person
 92 | 
 93 |     //组合继承优化2 
 94 |     function Person(name, age) {
 95 |       this.name = name,
 96 |         this.age = age
 97 |     }
 98 |     Person.prototype.setAge = function () {
 99 |       console.log("111")
100 |     }
101 | 
102 |     function Student(name, age, price) {
103 |       Person.call(this, name, age)
104 |       this.price = price
105 |       this.setScore = function () { }
106 |     }
107 |     Student.prototype = Object.create(Person.prototype)
108 |     Student.prototype.constructor = Student
109 |     var s1 = new Student('Tom', 20, 15000)
110 |     console.log(s1 instanceof Student, s1 instanceof Person) // true true
111 |     console.log(s1.constructor) //Student
112 |     console.log(s1)
113 | 
114 |         //ES6 class继承
115 |         // class Person {
116 |         //     //调用类的构造方法
117 |         //     constructor(name, age) {
118 |         //         this.name = name
119 |         //         this.age = age
120 |         //     }
121 |         //     //定义一般的方法
122 |         //     showName() {
123 |         //         console.log("调用父类的方法")
124 |         //         console.log(this.name, this.age);
125 |         //     }
126 |         // }
127 |         // let p1 = new Person('kobe', 39)
128 |         // console.log(p1)
129 |         // //定义一个子类
130 |         // class Student extends Person {
131 |         //     constructor(name, age, salary) {
132 |         //         super(name, age)
133 |         //         this.salary = salary
134 |         //     }
135 |         //     showName() { //在子类自身定义方法
136 |         //         console.log("调用子类的方法")
137 |         //         console.log(this.name, this.age, this.salary);
138 |         //     }
139 |         // }
140 |         // let s1 = new Student('wade', 38, 1000000000)
141 |         // let s2 = new Student('kobe', 40, 3000000000)
142 |         // console.log(s1.showName === s2.showName)//true
143 |         // console.log(s1)
144 |         // s1.showName()
145 |   </script>
146 | </body>
147 | 
148 | </html>


--------------------------------------------------------------------------------
/vue2.0学习/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ljianshu/Blog/03bf481a21e8976ce95b45827d3d19176c7c9764/vue2.0学习/.DS_Store


--------------------------------------------------------------------------------
/vue2.0学习/demo/$emit如何获取返回值/demo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         name: {{ name || "--" }}
 4 |         <br />
 5 |         <input :value="name" @change="handleChange" />
 6 |         <br />
 7 |     </div>
 8 | </template>
 9 | <script>
10 | export default {
11 |     props: {
12 |         name: String
13 |     },
14 |     methods: {
15 |         handleChange(e) {
16 |             const res = this.$emit("change", e.target.value, val => {
17 |                 console.log("父组件callback传递过来", val);
18 |             });
19 |             console.log(res, res === this); // 实例  true
20 |         }
21 |     }
22 | };
23 | </script>


--------------------------------------------------------------------------------
/vue2.0学习/demo/$emit如何获取返回值/index.vue:
--------------------------------------------------------------------------------
 1 | // this.$emit的返回值是什么？ this // 如果需要返回值可以使用回调参数
 2 | <template>
 3 |   <div class="hello">
 4 |     <div>
 5 |       <Demo :name="name" @change="handleEventChange" />
 6 |     </div>
 7 |     <br />
 8 |   </div>
 9 | </template>
10 | <script>
11 | import Demo from "./demo.vue";
12 | export default {
13 |   components: {
14 |     Demo
15 |   },
16 |   data() {
17 |     return {
18 |       name: ""
19 |     };
20 |   },
21 |   methods: {
22 |     handleEventChange(val, callback) {
23 |       console.log("子组件传递过来", val, callback);
24 |       this.name = val;
25 |       callback("helloWorld");
26 |       return "hello";
27 |     }
28 |   }
29 | };
30 | </script>
31 | <style>
32 | .hello {
33 |   margin: 30px;
34 | }
35 | </style>
36 | 


--------------------------------------------------------------------------------
/vue2.0学习/demo/filter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <div>
 4 |       <h2>显示格式化的日期时间</h2>
 5 |       <p>{{ date }}</p>
 6 |       <p>{{ date | filterDate }}</p>
 7 |       <p>年月日: {{ date | filterDate("YYYY-MM-DD") }}</p>
 8 |     </div>
 9 |   </div>
10 | </template>
11 | <script>
12 | import moment from "moment";
13 | export default {
14 |   filters: {
15 |     filterDate(value, format = "YYYY-MM-DD HH:mm:ss") {
16 |       return moment(value).format(format);// format如果没传值，就是以“YYYY-MM-DD HH:mm:ss”格式
17 |     }
18 |   },
19 |   data() {
20 |     return {
21 |       date: new Date()
22 |     };
23 |   }
24 | };
25 | </script>
26 | <style>
27 | .hello {
28 |   margin: 30px;
29 | }
30 | </style>
31 | 


--------------------------------------------------------------------------------
/vue2.0学习/slot与slot-scope用法/TodoItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <li class="item">
 4 |       <input v-model="checked" type="checkbox" />
 5 |       <slot name="item" :checked="checked"></slot>
 6 |     </li>
 7 |   </div>
 8 | </template>
 9 | <script>
10 | export default {
11 |   data() {
12 |     return {
13 |       checked: false
14 |     };
15 |   }
16 | };
17 | </script>
18 | <style scoped>
19 | .item {
20 |   color: red;
21 | }
22 | </style>
23 | 


--------------------------------------------------------------------------------
/vue2.0学习/slot与slot-scope用法/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="toList">
 3 |     <input v-model="info" type="text" /> <button @click="addItem">添加</button>
 4 |     <ul>
 5 |       <TodoItem v-for="(item, index) in listData" :key="index">
 6 |         <template v-slot:item="itemProps">
 7 |           <span
 8 |             :style="{
 9 |               fontSize: '20px',
10 |               color: itemProps.checked ? 'yellow' : 'blue'
11 |             }"
12 |             >{{ item }}</span
13 |           >
14 |         </template>
15 |       </TodoItem>
16 |     </ul>
17 |   </div>
18 | </template>
19 | <script>
20 | import TodoItem from "./TodoItem";
21 | export default {
22 |   components: {
23 |     TodoItem
24 |   },
25 |   data() {
26 |     return {
27 |       info: "",
28 |       listData: []
29 |     };
30 |   },
31 |   methods: {
32 |     addItem() {
33 |       this.listData.push(this.info);
34 |       this.info = "";
35 |     }
36 |   }
37 | };
38 | </script>
39 | <style scoped>
40 | .toList {
41 |   margin: 20px;
42 | }
43 | </style>
44 | 


--------------------------------------------------------------------------------
/vue2.0学习/slot与slot-scope用法/slot新语法/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="helloSlot">
 3 |     <h2>2.6 新语法</h2>
 4 |     <SlotDemo>
 5 |       <p>默认插槽：default slot</p>
 6 |       <template v-slot:title>
 7 |         <p>具名插槽：title slot1</p>
 8 |         <p>具名插槽：title slot2</p>
 9 |       </template>
10 |       <template v-slot:title>
11 |         <p>new具名插槽：title slot1</p>
12 |         <p>new具名插槽：title slot2</p>
13 |       </template>
14 |       <template v-slot:item="props">
15 |         <p>作用域插槽：item slot-scope {{ props }}</p>
16 |       </template>
17 |     </SlotDemo>
18 |   </div>
19 | </template>
20 | <script>
21 | import Slot from "./slot";
22 | export default {
23 |   components: {
24 |     SlotDemo: Slot
25 |   }
26 | };
27 | </script>
28 | <style>
29 | .helloSlot {
30 |   margin: 20px;
31 | }
32 | </style>
33 | 


--------------------------------------------------------------------------------
/vue2.0学习/slot与slot-scope用法/slot新语法/slot.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <slot />
 4 |     <slot name="title" />
 5 |     <slot name="item" :propData="propData" />
 6 |   </div>
 7 | </template>
 8 | <script>
 9 | export default {
10 |   data() {
11 |     return {
12 |       propData: {
13 |         value: "浪里行舟"
14 |       }
15 |     };
16 |   }
17 | };
18 | </script>
19 | 


--------------------------------------------------------------------------------
/vue2.0学习/vue组件间通信/attrs listeners/childCom1.vue:
--------------------------------------------------------------------------------
 1 | // childCom1.vue
 2 | <template class="border">
 3 |   <div>
 4 |     <p>foo: {{ foo }}</p>
 5 |     <p>childCom1的$attrs: {{ $attrs }}</p>
 6 |     <child-com2 v-bind="$attrs"></child-com2>
 7 |   </div>
 8 | </template>
 9 | <script>
10 | const childCom2 = () => import("./childCom2.vue");
11 | export default {
12 |   components: {
13 |     childCom2
14 |   },
15 |   inheritAttrs: false, // 可以关闭自动挂载到组件根元素上的没有在props声明的属性
16 |   props: {
17 |     foo: String // foo作为props属性绑定
18 |   },
19 |   created() {
20 |     console.log(this.$attrs); // { "boo": "Html", "coo": "CSS", "doo": "Vue", "title": "前端工匠" }
21 |   }
22 | };
23 | </script>
24 | <style scoped>
25 | .border {
26 |   border: 1px solid red;
27 | }
28 | </style>
29 | 


--------------------------------------------------------------------------------
/vue2.0学习/vue组件间通信/attrs listeners/childCom2.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="border">
 3 |     <p>boo: {{ boo }}</p>
 4 |     <p>childCom2: {{ $attrs }}</p>
 5 |     <child-com3 v-bind="$attrs"></child-com3>
 6 |   </div>
 7 | </template>
 8 | <script>
 9 | const childCom3 = () => import("./childCom3.vue");
10 | export default {
11 |   components: {
12 |     childCom3
13 |   },
14 |   inheritAttrs: false,
15 |   props: {
16 |     boo: String
17 |   },
18 |   created() {
19 |     console.log(this.$attrs); // {"coo": "CSS", "doo": "Vue", "title": "前端工匠" }
20 |   }
21 | };
22 | </script>
23 | <style scoped>
24 | .border {
25 |   border: 1px solid red;
26 | }
27 | </style>
28 | 


--------------------------------------------------------------------------------
/vue2.0学习/vue组件间通信/attrs listeners/childCom3.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="border">
 3 |     <p>childCom3: {{ $attrs }}</p>
 4 |   </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |   props: {
 9 |     coo: String,
10 |     title: String
11 |   }
12 | };
13 | </script>
14 | <style scoped>
15 | .border {
16 |   border: 1px solid;
17 | }
18 | </style>
19 | 


--------------------------------------------------------------------------------
/vue2.0学习/vue组件间通信/attrs listeners/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>浪里行舟</h2>
 4 |     <child-com1
 5 |       :foo="foo"
 6 |       :boo="boo"
 7 |       :coo="coo"
 8 |       :doo="doo"
 9 |       title="前端工匠"
10 |     ></child-com1>
11 |   </div>
12 | </template>
13 | <script>
14 | const childCom1 = () => import("./childCom1.vue");
15 | export default {
16 |   components: { childCom1 },
17 |   data() {
18 |     return {
19 |       foo: "Javascript",
20 |       boo: "Html",
21 |       coo: "CSS",
22 |       doo: "Vue"
23 |     };
24 |   }
25 | };
26 | </script>
27 | 


--------------------------------------------------------------------------------
/vue2.0学习/vue组件间通信/attrs listeners/listeners/child1.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <p class="title" @click="$listeners.other">父组件</p>
 4 |     <child2 v-on="$listeners"></child2>
 5 |   </div>
 6 | </template>
 7 | <script>
 8 | import Child2 from "./child2.vue";
 9 | export default {
10 |   components: {
11 |     Child2
12 |   },
13 |   data() {
14 |     return {};
15 |   },
16 |   created() {
17 |     console.log("child1", this.$listeners); // {changeData: ƒ, another: ƒ, other: ƒ}
18 |   }
19 | };
20 | </script>
21 | <style>
22 | .title {
23 |   margin-left: 10px;
24 |   font-size: 16px;
25 | }
26 | </style>
27 | 


--------------------------------------------------------------------------------
/vue2.0学习/vue组件间通信/attrs listeners/listeners/child2.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <p @click="$listeners.changeData('change')">孙子组件</p>
 4 |     <p @click="$listeners.another()">触发祖组件的another事件</p>
 5 |     <p @click="$listeners.other()">触发祖组件的other事件</p>
 6 |   </div>
 7 | </template>
 8 | <script>
 9 | export default {
10 |   created() {
11 |     console.log("child2", this.$listeners); // {changeData: ƒ, another: ƒ, other: ƒ}
12 |   }
13 | };
14 | </script>
15 | 


--------------------------------------------------------------------------------
/vue2.0学习/vue组件间通信/attrs listeners/listeners/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <div class="msg">{{ firstMsg }}</div>
 4 |     <child1
 5 |       @changeData="changeData"
 6 |       @another="anotherEvent"
 7 |       @other="otherEvent"
 8 |     ></child1>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | import Child1 from "./child1.vue";
14 | export default {
15 |   components: {
16 |     Child1
17 |   },
18 |   data() {
19 |     return {
20 |       firstMsg: "祖组件"
21 |     };
22 |   },
23 |   methods: {
24 |     changeData(params) {
25 |       this.firstMsg = params;
26 |     },
27 |     anotherEvent() {
28 |       alert("another");
29 |     },
30 |     otherEvent() {
31 |       alert("other");
32 |     }
33 |   }
34 | };
35 | </script>
36 | <style>
37 | .hello {
38 |   margin: 20px;
39 | }
40 | .msg {
41 |   font-size: 20px;
42 |   font-weight: bold;
43 | }
44 | </style>
45 | 


--------------------------------------------------------------------------------
/vue2.0学习/vue组件间通信/eventBus/eventBus.html:
--------------------------------------------------------------------------------
 1 | // 用于跨组件通知(不复杂的项目可以使用这种方式)
 2 | // Vue.prototype.$bus = new Vue();
 3 | 
 4 | // Son2组件和Grandson1相互通信
 5 | 
 6 | // mounted() {
 7 | //  this.$bus.$on("my", data => {
 8 | //   console.log(data);
 9 | //  });
10 | // },
11 | 
12 | // mounted() {
13 | //  this.$nextTick(() => {
14 | //   this.$bus.$emit("my", "我是Grandson1");
15 | //  });
16 | // },
17 | 
18 | 
19 | <!DOCTYPE html>
20 | <html lang="en">
21 |   <head>
22 |     <meta charset="UTF-8" />
23 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
24 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
25 |     <title>Document</title>
26 |   </head>
27 |   <body>
28 |     <div id="app">
29 |       <brother1></brother1>
30 |       <brother2></brother2>
31 |     </div>
32 |     <script src="./node_modules/vue/dist/vue.js"></script>
33 |     <script>
34 |       // 评级组件通信 可以通过共同的父亲传参
35 |       // 一个全局的发布订阅的方式
36 |       // eventBus 比较适合 简单的数据流
37 |       Vue.prototype.$bus = new Vue()
38 |       Vue.component('brother1', {
39 |         template: `<div>brother1</div>`,
40 |         mounted() {
41 |           this.$bus.$on('吃', food => {
42 |             console.log(food)
43 |           })
44 |         }
45 |       })
46 |       Vue.component('brother2', {
47 |         template: `<div>brother2</div>`,
48 |         mounted() {
49 |           this.$bus.$emit('吃', '苹果')
50 |         }
51 |       })
52 |       let vm = new Vue({
53 |         el: '#app'
54 |       })
55 |     </script>
56 |   </body>
57 | </html>
58 | 


--------------------------------------------------------------------------------
/vue2.0学习/vue组件间通信/props传递一个函数/Props.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     name: {{ name }}
 4 |     <br />
 5 |     type: {{ type }}
 6 |     <br />
 7 |     list: {{ list }}
 8 |     <br />
 9 |     isVisible: {{ isVisible }}
10 |     <br />
11 |     <button @click="handleClick">change type</button>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | export default {
17 |   name: "PropsDemo",
18 |   // inheritAttrs: false,
19 |   // props: ['name', 'type', 'list', 'isVisible'],
20 |   props: {
21 |     name: String,
22 |     type: {
23 |       validator: function(value) {
24 |         // 这个值必须匹配下列字符串中的一个
25 |         return ["success", "warning", "danger"].includes(value);
26 |       }
27 |     },
28 |     list: {
29 |       type: Array,
30 |       // 对象或数组默认值必须从一个工厂函数获取
31 |       default: () => []
32 |     },
33 |     isVisible: {
34 |       type: Boolean,
35 |       default: false
36 |     },
37 |     onChange: {
38 |       type: Function,
39 |       default: () => {}
40 |     }
41 |   },
42 |   methods: {
43 |     handleClick() {
44 |       // 不要这么做、不要这么做、不要这么做
45 |       // this.type = "warning";
46 | 
47 |       // 可以，还可以更好
48 |       this.onChange(this.type === "success" ? "warning" : "success");
49 |     }
50 |   }
51 | };
52 | </script>
53 | 


--------------------------------------------------------------------------------
/vue2.0学习/vue组件间通信/props传递一个函数/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Props
 4 |       name="Hello Vue！"
 5 |       :type="type"
 6 |       :is-visible="false"
 7 |       :on-change="handlePropChange" // 通过一般属性实现父向子通信；通过函数属性实现子向父通信
 8 |       title="属性Demo"
 9 |       class="test1"
10 |       :class="['test2']"
11 |       :style="{ marginTop: '20px' }"
12 |       style="margin-top: 10px"
13 |     />
14 |   </div>
15 | </template>
16 | <script>
17 | import Props from "./Props";
18 | export default {
19 |   components: {
20 |     Props
21 |   },
22 |   data: () => {
23 |     return {
24 |       name: "",
25 |       type: "success",
26 |       bigPropsName: "Hello world!"
27 |     };
28 |   },
29 |   methods: {
30 |     handlePropChange(val) {
31 |       this.type = val;
32 |     }
33 |   }
34 | };
35 | </script>
36 | 


--------------------------------------------------------------------------------
/vue2.0学习/vue组件间通信/provide inject/ChildrenA.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div>
 4 |       <h1>A 结点</h1>
 5 |       <button @click="() => changeColor()">改变color</button>
 6 |       <ChildrenB />
 7 |       <ChildrenC />
 8 |     </div>
 9 |   </div>
10 | </template>
11 | <script>
12 | import Vue from "vue";
13 | import ChildrenB from "./ChildrenB";
14 | import ChildrenC from "./ChildrenC";
15 | export default {
16 |   components: {
17 |     ChildrenB,
18 |     ChildrenC
19 |   },
20 |   data() {
21 |     return {
22 |       color: "blue"
23 |     };
24 |   },
25 |   // provide() {
26 |   //   return {
27 |   //     theme: {
28 |   //       color: this.color //绑定并不是可响应的
29 |   //     }
30 |   //   };
31 |   // },
32 |   provide() {
33 |     return {
34 |       theme: this
35 |     };
36 |   },
37 |   methods: {
38 |     changeColor(color) {
39 |       if (color) {
40 |         this.color = color;
41 |       } else {
42 |         this.color = this.color === "blue" ? "red" : "blue";
43 |       }
44 |     }
45 |   }
46 | };
47 | </script>
48 | <style scoped></style>
49 | 


--------------------------------------------------------------------------------
/vue2.0学习/vue组件间通信/provide inject/ChildrenA_a.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div>
 4 |       <h1>A 结点</h1>
 5 |       <button @click="() => changeColor()">改变color</button>
 6 |       <ChildrenB />
 7 |       <ChildrenC />
 8 |     </div>
 9 |   </div>
10 | </template>
11 | <script>
12 | import Vue from "vue";
13 | import ChildrenB from "./ChildrenB";
14 | import ChildrenC from "./ChildrenC";
15 | export default {
16 |   components: {
17 |     ChildrenB,
18 |     ChildrenC
19 |   },
20 |   // provide() {
21 |   //   return {
22 |   //     theme: {
23 |   //       color: this.color //绑定并不是可响应的
24 |   //     }
25 |   //   };
26 |   // },
27 |   // 使用2.6最新API Vue.observable 优化响应式 provide
28 |   provide() {
29 |     this.theme = Vue.observable({
30 |       color: "blue"
31 |     });
32 |     return {
33 |       theme: this.theme
34 |     };
35 |   },
36 |   methods: {
37 |     changeColor(color) {
38 |       if (color) {
39 |         this.theme.color = color;
40 |       } else {
41 |         this.theme.color = this.theme.color === "blue" ? "red" : "blue";
42 |       }
43 |     }
44 |   }
45 | };
46 | </script>
47 | <style scoped></style>
48 | 


--------------------------------------------------------------------------------
/vue2.0学习/vue组件间通信/provide inject/ChildrenB.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="border1">
 3 |     <h2>B 结点</h2>
 4 |     <ChildrenD />
 5 |     <ChildrenE />
 6 |   </div>
 7 | </template>
 8 | <script>
 9 | import ChildrenD from "./ChildrenD";
10 | import ChildrenE from "./ChildrenE";
11 | export default {
12 |   components: {
13 |     ChildrenD,
14 |     ChildrenE
15 |   }
16 | };
17 | </script>
18 | 


--------------------------------------------------------------------------------
/vue2.0学习/vue组件间通信/provide inject/ChildrenC.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="border1">
 3 |     <h2>C 结点</h2>
 4 |     <ChildrenF />
 5 |   </div>
 6 | </template>
 7 | <script>
 8 | import ChildrenF from "./ChildrenF";
 9 | export default {
10 |   components: {
11 |     ChildrenF
12 |   }
13 | };
14 | </script>
15 | 


--------------------------------------------------------------------------------
/vue2.0学习/vue组件间通信/provide inject/ChildrenD.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="border2">
 3 |     <h3 :style="{ color: theme.color }">D 结点</h3>
 4 |     <button @click="handleClick">改变color为green</button>
 5 |   </div>
 6 | </template>
 7 | <script>
 8 | export default {
 9 |   inject: {
10 |     theme: {
11 |       default: () => ({})
12 |     }
13 |   },
14 |   methods: {
15 |     handleClick() {
16 |       if (this.theme.changeColor) {
17 |         this.theme.changeColor("green");
18 |       }
19 |     }
20 |   }
21 | };
22 | </script>
23 | 


--------------------------------------------------------------------------------
/vue2.0学习/vue组件间通信/provide inject/ChildrenE.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="border2">
 3 |     <h3 :style="{ color: theme1.color }">E 结点</h3>
 4 |   </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |   inject: {
 9 |     theme1: {
10 |       from: "theme",
11 |       default: () => ({})
12 |     }
13 |   }
14 | };
15 | </script>
16 | 


--------------------------------------------------------------------------------
/vue2.0学习/vue组件间通信/provide inject/ChildrenF.vue:
--------------------------------------------------------------------------------
 1 | <template functional>
 2 |   <div class="border2">
 3 |     <h3 :style="{ color: injections.theme.color }">F 结点</h3>
 4 |   </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |   inject: {
 9 |     theme: {
10 |       //函数式组件取值不一样
11 |       default: () => ({})
12 |     }
13 |   }
14 | };
15 | </script>
16 | 


--------------------------------------------------------------------------------
/vue2.0学习/vue组件间通信/provide inject/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ChildrenA />
 4 |     <!-- <ChildrenA1 /> -->
 5 |   </div>
 6 | </template>
 7 | <script>
 8 | import ChildrenA from "./ChildrenA";
 9 | // import ChildrenA1 from "./ChildrenA_a";
10 | export default {
11 |   components: {
12 |     ChildrenA
13 |     // ChildrenA1
14 |   }
15 | };
16 | </script>
17 | <style>
18 | .border,
19 | .border1,
20 | .border2 {
21 |   border: 1px solid #000;
22 |   padding: 10px 0;
23 |   margin: 10px 10px 0;
24 | }
25 | .border1 {
26 |   border-color: #ccc;
27 | }
28 | .border2 {
29 |   border-color: #eee;
30 | }
31 | </style>
32 | 


--------------------------------------------------------------------------------
/vue2.0学习/watch和computed/computed.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     {{ fullName }}
 4 | 
 5 |     <div>firstName: <input v-model="firstName" /></div>
 6 |     <div>lastName: <input v-model="lastName" /></div>
 7 |   </div>
 8 | </template>
 9 | <script>
10 | export default {
11 |   data: function() {
12 |     return {
13 |       firstName: "Foo",
14 |       lastName: "Bar"
15 |     };
16 |   },
17 |   computed: {
18 |     fullName: function() {
19 |       return this.firstName + " " + this.lastName;
20 |     }
21 |   },
22 |   watch: {
23 |     fullName: function(val, oldVal) {
24 |       console.log("new: %s, old: %s", val, oldVal);
25 |     }
26 |   }
27 | };
28 | </script>
29 | 


--------------------------------------------------------------------------------
/vue2.0学习/watch和computed/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="attr">
 3 |     <h1>watch属性</h1>
 4 |     <h2>{{ $data }}</h2>
 5 |     <button @click="() => (a += 1)">修改a的值</button>
 6 |     <br />
 7 |     <br />
 8 |     <Watch />
 9 |   </div>
10 | </template>
11 | <script>
12 | import Watch from "./watch";
13 | export default {
14 |   components: {
15 |     Watch
16 |   },
17 |   data() {
18 |     return {
19 |       a: 1,
20 |       b: { c: 2, d: 3 },
21 |       e: {
22 |         f: {
23 |           g: 4
24 |         }
25 |       },
26 |       h: []
27 |     };
28 |   },
29 |   watch: {
30 |     a: function(val, oldVal) {
31 |       this.b.c += 1;
32 |       console.log("new: %s, old: %s", val, oldVal);
33 |     },
34 |     "b.c": function(val, oldVal) {
35 |       this.b.d += 1;
36 |       console.log("new: %s, old: %s", val, oldVal);
37 |     },
38 |     "b.d": function(val, oldVal) {
39 |       this.e.f.g += 1;
40 |       console.log("new: %s, old: %s", val, oldVal);
41 |     },
42 |     e: {
43 |       handler: function(val, oldVal) {
44 |         this.h.push("浪里行舟");
45 |         console.log("new: %s, old: %s", val, oldVal);
46 |       },
47 |       deep: true
48 |     }
49 |   }
50 | };
51 | </script>
52 | <style scoped>
53 | .attr {
54 |   margin: 20px;
55 | }
56 | </style>
57 | 


--------------------------------------------------------------------------------
/vue2.0学习/watch和computed/watch.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     {{ fullName }}
 4 | 
 5 |     <div>firstName: <input v-model="firstName" /></div>
 6 |     <div>lastName: <input v-model="lastName" /></div>
 7 |   </div>
 8 | </template>
 9 | <script>
10 | import { setTimeout } from "timers";
11 | export default {
12 |   data: function() {
13 |     return {
14 |       firstName: "浪里行舟",
15 |       lastName: "前端工匠",
16 |       fullName: "浪里行舟 前端工匠"
17 |     };
18 |   },
19 |   watch: {
20 |     firstName: function(val) {
21 |       clearTimeout(this.firstTimeout);
22 |       this.firstTimeOut = setTimeout(() => {
23 |         this.fullName = val + " " + this.lastName;
24 |       }, 1000);
25 |     },
26 |     lastName: function(val) {
27 |       clearTimeout(this.lastTimeout);
28 |       this.lastTimeOut = setTimeout(() => {
29 |         this.fullName = this.firstName + " " + val;
30 |       }, 1000);
31 |     }
32 |   }
33 | };
34 | </script>
35 | 


--------------------------------------------------------------------------------
/vue2.0学习/内部运行机制/virtual dom/diff算法/createElement.js:
--------------------------------------------------------------------------------
 1 | function createElement(vnode) {
 2 |     var tag = vnode.tag  // 'ul'
 3 |     var attrs = vnode.attrs || {}
 4 |     var children = vnode.children || []
 5 |     if (!tag) {
 6 |         return null
 7 |     }
 8 | 
 9 |     // 创建真实的 DOM 元素
10 |     var elem = document.createElement(tag)
11 |     // 属性
12 |     var attrName
13 |     for (attrName in attrs) {
14 |         if (attrs.hasOwnProperty(attrName)) {
15 |             // 给 elem 添加属性
16 |             elem.setAttribute(attrName, attrs[attrName])
17 |         }
18 |     }
19 |     // 子元素
20 |     children.forEach(function (childVnode) {
21 |         // 给 elem 添加子元素
22 |         elem.appendChild(createElement(childVnode))  // 递归
23 |     })
24 | 
25 |     // 返回真实的 DOM 元素
26 |     return elem
27 | }


--------------------------------------------------------------------------------
/vue2.0学习/内部运行机制/virtual dom/diff算法/updateChildren.js:
--------------------------------------------------------------------------------
 1 | function updateChildren(vnode, newVnode) {
 2 |     var children = vnode.children || []
 3 |     var newChildren = newVnode.children || []
 4 | 
 5 |     children.forEach(function (childVnode, index) {
 6 |         var newChildVnode = newChildren[index]
 7 |         if (childVnode.tag === newChildVnode.tag) {
 8 |             // 深层次对比，递归
 9 |             updateChildren(childVnode, newChildVnode)
10 |         } else {
11 |             // 替换
12 |             replaceNode(childVnode, newChildVnode)
13 |         }
14 |     })
15 | }
16 | 
17 | function replaceNode(vnode, newVnode) {
18 |     var elem = vnode.elem  // 真实的 DOM 节点
19 |     var newElem = createElement(newVnode)
20 | 
21 |     // 替换
22 | }


--------------------------------------------------------------------------------
/vue2.0学习/内部运行机制/virtual dom/snabbdom/demo.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8" />
 6 |     <title>Document</title>
 7 | </head>
 8 | 
 9 | <body>
10 |     <div id="container"></div>
11 |     <button id="btn-change">change</button>
12 |     <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom.js"></script>
13 |     <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-class.js"></script>
14 |     <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-props.js"></script>
15 |     <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-style.js"></script>
16 |     <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-eventlisteners.js"></script>
17 |     <script src="https://cdn.bootcss.com/snabbdom/0.7.1/h.js"></script>
18 |     <script type="text/javascript">
19 |     var snabbdom = window.snabbdom
20 | 
21 |     // snabbdom核心API:h函数、patch函数
22 |     // h（'<标签名>',{..属性..},[..子元素..]）
23 |     // h（'<标签名>',{..属性..},'...'）
24 |     // patch（container，vnode）
25 |     // patch（vnode，newVnode）
26 | 
27 |     // 定义 patch
28 |     var patch = snabbdom.init([
29 |         snabbdom_class,
30 |         snabbdom_props,
31 |         snabbdom_style,
32 |         snabbdom_eventlisteners
33 |     ])
34 | 
35 |     // 定义 h
36 |     var h = snabbdom.h
37 | 
38 |     var container = document.getElementById('container')
39 | 
40 |     // h函数生成 vnode
41 |     var vnode = h('ul#list', {}, [
42 |         h('li.item', {}, 'Item 1'),
43 |         h('li.item', {}, 'Item 2')
44 |     ])
45 |     patch(container, vnode)
46 | 
47 |     document
48 |         .getElementById('btn-change')
49 |         .addEventListener('click', function() {
50 |             // 生成 newVnode
51 |             var newVnode = h('ul#list', {}, [
52 |                 h('li.item', {}, 'Item 1'),
53 |                 h('li.item', {}, 'Item B'),
54 |                 h('li.item', {}, 'Item 3')
55 |             ])
56 |             patch(vnode, newVnode)
57 |         })
58 |     </script>
59 |     <script>
60 |     var element = {
61 |         tag: 'ul', // 节点标签名
62 |         attrs: {
63 |             // DOM的属性
64 |             id: 'list'
65 |         },
66 |         children: [
67 |             // 该节点的子节点
68 |             {
69 |                 tag: 'li',
70 |                 attrs: {
71 |                     className: 'item'
72 |                 },
73 |                 children: ['item1']
74 |             },
75 |             {
76 |                 tag: 'li',
77 |                 attrs: {
78 |                     className: 'item'
79 |                 },
80 |                 children: ['item2']
81 |             }
82 |         ]
83 |     }
84 |     </script>
85 | </body>
86 | 
87 | </html>


--------------------------------------------------------------------------------
/vue2.0学习/内部运行机制/响应式原理/Array.js:
--------------------------------------------------------------------------------
 1 | // Object.defineProperty 只能适用于对象
 2 | // 如果是数组，通过重写函数的方式解决了这个问题
 3 | 
 4 | function render() {
 5 |   console.log('模拟视图渲染')
 6 | }
 7 | 
 8 | let obj = [1, 2, 3]
 9 | 
10 | let methods = ['pop', 'shift', 'unshift', 'sort', 'reverse', 'splice', 'push']
11 | // 先获取到原来的原型上的方法
12 | let arrayProto = Array.prototype
13 | // 创建一个自己的原型 并且重写methods这些方法
14 | let proto = Object.create(arrayProto)
15 | 
16 | methods.forEach(method => {
17 |   proto[method] = function() {
18 |     // AOP
19 |     arrayProto[method].call(this, ...arguments)
20 |     render()
21 |   }
22 | })
23 | 
24 | function observer(obj) {
25 |   // 把所有的属性定义成set/get的方式
26 |   if (Array.isArray(obj)) {
27 |     obj.__proto__ = proto
28 |     return
29 |   }
30 |   if (typeof obj == 'object') {
31 |     for (let key in obj) {
32 |       defineReactive(obj, key, obj[key])
33 |     }
34 |   }
35 | }
36 | function defineReactive(data, key, value) {
37 |   observer(value)
38 |   Object.defineProperty(data, key, {
39 |     get() {
40 |       return value
41 |     },
42 |     set(newValue) {
43 |       observer(newValue)
44 |       if (newValue !== value) {
45 |         render()
46 |         value = newValue
47 |       }
48 |     }
49 |   })
50 | }
51 | observer(obj)
52 | function $set(data, key, value) {
53 |   defineReactive(data, key, value)
54 | }
55 | obj.push(123, 55)
56 | console.log(obj)
57 | 
58 | // 一些注意点
59 | // $set如何更新数组
60 | // function $set(data, key, value) {
61 | //   if (Array.isArray(data)) {
62 | //     return data.splice(key, 1, value) // 当前用户调用了splice方法
63 | //   }
64 | //   defineReactive(data, key, value)
65 | // }
66 | // $set(obj, 0, 100) // 不支持数组的长度变化 也不支持数组的内容发生变化 必须通过上面的方法来触发更新 或者替换成一个新的数组比如obj.length--或者 obj[1]=2都是无效的
67 | 


--------------------------------------------------------------------------------
/vue2.0学习/内部运行机制/响应式原理/Object.js:
--------------------------------------------------------------------------------
 1 | // Object.defineProperty如何实现对象响应式变化
 2 | function render() {
 3 |   console.log('模拟视图渲染')
 4 | }
 5 | let data = {
 6 |   name: '浪里行舟',
 7 |   location: { x: 100, y: 100 }
 8 | }
 9 | observe(data)
10 | function observe(obj) {
11 |   // 判断类型
12 |   if (!obj || typeof obj !== 'object') {
13 |     return
14 |   }
15 |   Object.keys(obj).forEach(key => {
16 |     defineReactive(obj, key, obj[key])
17 |   })
18 |   function defineReactive(obj, key, value) {
19 |     // 递归子属性
20 |     observe(value)
21 |     Object.defineProperty(obj, key, {
22 |       enumerable: true, //可枚举
23 |       configurable: true, //可配置
24 |       get: function reactiveGetter() {
25 |         console.log('get', value) // 监听
26 |         return value
27 |       },
28 |       set: function reactiveSetter(newVal) {
29 |         observe(newVal) //如果赋值是一个对象，也要递归子属性
30 |         if (newVal !== value) {
31 |           console.log('set', newVal) // 监听
32 |           render()
33 |           value = newVal
34 |         }
35 |       }
36 |     })
37 |   }
38 | }
39 | data.location = {
40 |   x: 1000,
41 |   y: 1000
42 | } //set {x: 1000,y: 1000} 模拟视图渲染
43 | data.name // get 浪里行舟
44 | 


--------------------------------------------------------------------------------
/vue2.0学习/内部运行机制/响应式原理/Proxy.js:
--------------------------------------------------------------------------------
 1 | // 使用proxy来实现数据的响应式变化
 2 | // 可以支持数组，而且不用区分是对象还是数组
 3 | // 兼容性 vue 3.0 会采用如果支持proxy 就使用proxy  不支持就还是Object.defineProperty
 4 | function render() {
 5 |   console.log('模拟视图的更新')
 6 | }
 7 | let obj = {
 8 |   name: '前端工匠',
 9 |   age: { age: 100 },
10 |   arr: [1, 2, 3]
11 | }
12 | let handler = {
13 |   get(target, key) {
14 |     // 如果取的值是对象就在对这个对象进行数据劫持
15 |     if (typeof target[key] == 'object' && target[key] !== null) {
16 |       return new Proxy(target[key], handler)
17 |     }
18 |     return Reflect.get(target, key)
19 |   },
20 |   set(target, key, value) {
21 |     if (key === 'length') return true
22 |     render()
23 |     return Reflect.set(target, key, value)
24 |   }
25 | }
26 | 
27 | let proxy = new Proxy(obj, handler)
28 | proxy.age.name = '浪里行舟' // 支持新增属性
29 | console.log(proxy.age.name) // 模拟视图的更新 浪里行舟
30 | proxy.arr[0] = '浪里行舟' //支持数组的内容发生变化
31 | console.log(proxy.arr) // 模拟视图的更新 ['浪里行舟', 2, 3 ]
32 | proxy.arr.length-- // 无效
33 | 


--------------------------------------------------------------------------------
/vue2.0学习/基于axios接口封装/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ljianshu/Blog/03bf481a21e8976ce95b45827d3d19176c7c9764/vue2.0学习/基于axios接口封装/.DS_Store


--------------------------------------------------------------------------------
/vue2.0学习/基于axios接口封装/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | ## Project setup
 3 | ```
 4 | npm install
 5 | ```
 6 | 
 7 | ### Compiles and hot-reloads for development
 8 | ```
 9 | npm run serve
10 | ```
11 | ## api接口的模块化管理规范（基于axios）
12 | 单独模块管理接口，其中http.js文件就是封装好的接口请求库
13 | ```
14 | // personal.js文件
15 | import axios from './http';
16 | export default {
17 |     login() {
18 |         return axios.post('/login');
19 |     },
20 |     // ...
21 | };
22 | ```
23 | 定义统一接口请求的入口 api.js
24 | ```
25 | // api.js文件
26 | import personal from './personal';
27 | export default {
28 |     personal
29 | };
30 | ```
31 | 最后注入到vue的原型上
32 | ```
33 | // main.js
34 | import api from './api/api.js';
35 | Vue.prototype.$api=api;
36 | ```
37 | 这样就可以在组件中使用了
38 | ```
39 | //=>在组件中使用
40 |  methods: {
41 |     login() {
42 |       this.$api.personal.login().then(result => {
43 |          console.log(result) // 直接就可以调用api,无需再引入api.js文件
44 |         // 业务逻辑
45 |       })
46 |     }
47 |   }
48 | ```
49 | **本代码中提供了两种封装方式：axios和fetch，分别对应http.js和request.js文件**，项目中主要以前者为主
50 | 


--------------------------------------------------------------------------------
/vue2.0学习/基于axios接口封装/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/vue2.0学习/基于axios接口封装/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "demo",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.19.2",
12 |     "core-js": "^3.6.4",
13 |     "qs": "^6.9.1",
14 |     "vue": "^2.6.11"
15 |   },
16 |   "devDependencies": {
17 |     "@vue/cli-plugin-babel": "~4.2.0",
18 |     "@vue/cli-plugin-eslint": "~4.2.0",
19 |     "@vue/cli-service": "~4.2.0",
20 |     "babel-eslint": "^10.0.3",
21 |     "eslint": "^6.7.2",
22 |     "eslint-plugin-vue": "^6.1.2",
23 |     "vue-template-compiler": "^2.6.11"
24 |   },
25 |   "eslintConfig": {
26 |     "root": true,
27 |     "env": {
28 |       "node": true
29 |     },
30 |     "extends": [
31 |       "plugin:vue/essential",
32 |       "eslint:recommended"
33 |     ],
34 |     "parserOptions": {
35 |       "parser": "babel-eslint"
36 |     },
37 |     "rules": {}
38 |   },
39 |   "browserslist": [
40 |     "> 1%",
41 |     "last 2 versions"
42 |   ]
43 | }
44 | 


--------------------------------------------------------------------------------
/vue2.0学习/基于axios接口封装/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ljianshu/Blog/03bf481a21e8976ce95b45827d3d19176c7c9764/vue2.0学习/基于axios接口封装/public/favicon.ico


--------------------------------------------------------------------------------
/vue2.0学习/基于axios接口封装/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/vue2.0学习/基于axios接口封装/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <img alt="Vue logo" src="./assets/logo.png" />
 4 |     <div>浪里行舟</div>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: 'App',
11 |   methods: {
12 |     add() {
13 |       this.$api.vote.voteAdd() // 直接就可以调用api,无需再引入api.js文件
14 |     }
15 |   }
16 | }
17 | </script>
18 | <style></style>
19 | 


--------------------------------------------------------------------------------
/vue2.0学习/基于axios接口封装/src/api/api.js:
--------------------------------------------------------------------------------
1 | // 这里数据请求的唯一入口 
2 | import personal from './personal'
3 | import vote from './vote'
4 | 
5 | export default{
6 |     personal,
7 |     vote
8 | }
9 | 


--------------------------------------------------------------------------------
/vue2.0学习/基于axios接口封装/src/api/http.js:
--------------------------------------------------------------------------------
 1 | // 基于axios实现接口请求库的封装
 2 | import axios from 'axios'
 3 | import qs from 'qs' // 引入qs模块，用来序列化post类型的数据
 4 | // 根据环境变量区分接口的默认地址
 5 | switch (process.env.NODE_ENV) {
 6 |   case 'production':
 7 |     axios.defaults.baseURL = 'http://api.zhufengpeixun.cn'
 8 |     break
 9 |   case 'test':
10 |     axios.defaults.baseURL = 'http://192.168.20.12:8080'
11 |     break
12 |   default:
13 |     axios.defaults.baseURL = 'http://127.0.0.1:3000'
14 | }
15 | // 设置超时请求时间
16 | axios.defaults.timeout = 10000
17 | // 设置CORS跨域允许携带资源凭证
18 | axios.defaults.withCredentials = true
19 | // 设置POST请求头：告知服务器请求主体的数据格式
20 | axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
21 | axios.defaults.transformRequest = data => qs.stringify(data)
22 | // 设置请求拦截器
23 | axios.interceptors.request.use(
24 |   config => {
25 |     // TOKEN校验（JWT）,接收服务器返回的token，存储到 vuex本地存储中，每一次向服务器发请求，我们应该把token带上
26 |     const token = localStorage.getItem('token')
27 |     token && (config.headers.Authorization = token)
28 |     return config
29 |   },
30 |   error => {
31 |     return Promise.reject(error)
32 |   }
33 | )
34 | // 设置响应拦截器
35 | axios.defaults.validateStatus = status => {
36 |   // 自定义响应成功的HTTP状态码
37 |   return /^(2|3)\d{2}$/.test(status)
38 | }
39 | axios.interceptors.response.use(
40 |   response => {
41 |     // 只返回响应主体中的信息（部分公司根据需求会进一步完善，例如指定服务器返回的CODE值来指定成功还是失败）
42 |     return response.data
43 |   },
44 |   error => {
45 |     if (error.response) {
46 |       switch (error.response.status) {
47 |         case 400:
48 |           error.message = '请求错误(400)'
49 |           break
50 |         case 401: // 当前请求需要用户验证（一般是未登录）
51 |           error.message = '未授权，请登录(401)'
52 |           break
53 |         case 403: // 服务器已经理解请求，但是拒绝执行它（一般是TOKEN过期）
54 |           error.message = '拒绝访问(403)'
55 |           localStorage.removeItem('token')
56 |           // 跳转到登录页
57 |           break
58 |       }
59 |       return Promise.reject(error.response)
60 |     } else {
61 |       // 断网处理
62 |       if (!window.navigator.onLine) {
63 |         // 断开网络了，可以让其跳转到断网页面
64 |         return
65 |       }
66 |       return Promise.reject(error)
67 |     }
68 |   }
69 | )
70 | export default axios
71 | 


--------------------------------------------------------------------------------
/vue2.0学习/基于axios接口封装/src/api/personal.js:
--------------------------------------------------------------------------------
1 | // 接口模块一
2 | import axios from './http'
3 | 
4 | function login(){
5 |     return axios.post('/login');
6 | }
7 | 
8 | export default {login}


--------------------------------------------------------------------------------
/vue2.0学习/基于axios接口封装/src/api/request.js:
--------------------------------------------------------------------------------
 1 | // 基于fetch实现接口请求库的封装
 2 | import qs from 'qs';
 3 | /*
 4 |  * 根据环境变量进行接口区分
 5 |  */
 6 | let baseURL = '';
 7 | let baseURLArr = [{
 8 | 	type: 'development',
 9 | 	url: 'http://127.0.0.1:9000'
10 | }, {
11 | 	type: 'test',
12 | 	url: 'http://192.168.20.15:9000'
13 | }, {
14 | 	type: 'production',
15 | 	url: 'http://api.zhufengpeixun.cn'
16 | }];
17 | baseURLArr.forEach(item => {
18 | 	if (process.env.NODE_ENV === item.type) {
19 | 		baseURL = item.url;
20 | 	}
21 | });
22 | 
23 | export default function request(url, options = {}) {
24 | 	url = baseURL + url;
25 | 	/*
26 | 	 * GET系列请求的处理 
27 | 	 */
28 | 	!options.method ? options.method = 'GET' : null;
29 | 	if (options.hasOwnProperty('params')) {
30 | 		if (/^(GET|DELETE|HEAD|OPTIONS)$/i.test(options.method)) {
31 | 			const ask = url.includes('?') ? '&' : '?';
32 | 			url += `${ask}${qs.stringify(params)}`;
33 | 		}
34 | 		delete options.params;
35 | 	}
36 | 
37 | 	/*
38 | 	 * 合并配置项 
39 | 	 */
40 | 	options = Object.assign({
41 | 		// 允许跨域携带资源凭证 
42 | 		credentials: 'include',// 如果是same-origin则同源可以  omit都拒绝
43 | 		// 设置请求头
44 | 		headers: {}
45 | 	}, options);
46 | 	options.headers.Accept = 'application/json';
47 | 
48 | 	/*
49 | 	 * token的校验
50 | 	 */
51 | 	const token = localStorage.getItem('token');
52 | 	token && (options.headers.Authorization = token);
53 | 
54 | 	/*
55 | 	 * POST请求的处理
56 | 	 */
57 | 	if (/^(POST|PUT)$/i.test(options.method)) {
58 | 		!options.type ? options.type = 'urlencoded' : null;
59 | 		if (options.type === 'urlencoded') {
60 | 			options.headers['Content-Type'] = 'application/x-www-form-urlencoded';
61 | 			options.body = qs.stringify(options.body);
62 | 		}
63 | 		if (options.type === 'json') {
64 | 			options.headers['Content-Type'] = 'application/json';
65 | 			options.body = JSON.stringify(options.body);
66 | 		}
67 | 	}
68 | 	return fetch(url, options).then(response => {
69 | 		// 返回的结果可能是非200状态码 这边返回也有可能是失败的状态码
70 | 		if (!/^(2|3)\d{2}$/.test(response.status)) {
71 | 			switch (response.status) {
72 | 				case 401: // 当前请求需要用户验证（一般是未登录）
73 | 					break;
74 | 				case 403: // 服务器已经理解请求，但是拒绝执行它（一般是TOKEN过期）
75 | 					localStorage.removeItem('token');
76 | 					// 跳转到登录页
77 | 					break;
78 | 				case 404: // 请求失败，请求所希望得到的资源未被在服务器上发现
79 | 					break;
80 | 			}
81 | 			return Promise.reject(response);
82 | 		}
83 | 		return response.json();
84 | 	}).catch(error => {
85 | 		// 断网处理
86 | 		if (!window.navigator.onLine) {
87 | 			// 断开网络了，可以让其跳转到断网页面
88 | 			return;
89 | 		}
90 | 		return Promise.reject(error);
91 | 	});
92 | }


--------------------------------------------------------------------------------
/vue2.0学习/基于axios接口封装/src/api/vote.js:
--------------------------------------------------------------------------------
 1 | // 接口模块二
 2 | import axios from './http'
 3 | 
 4 | function voteAdd() {
 5 |   return axios.post('/insertVote', {
 6 |     xxx: 'xxx'
 7 |   })
 8 | }
 9 | 
10 | export default {voteAdd}


--------------------------------------------------------------------------------
/vue2.0学习/基于axios接口封装/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ljianshu/Blog/03bf481a21e8976ce95b45827d3d19176c7c9764/vue2.0学习/基于axios接口封装/src/assets/logo.png


--------------------------------------------------------------------------------
/vue2.0学习/基于axios接口封装/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import api from './api/api'
 4 | 
 5 | Vue.config.productionTip = false
 6 | Vue.prototype.$api = api
 7 | 
 8 | new Vue({
 9 |   render: h => h(App),
10 | }).$mount('#app')
11 | 


--------------------------------------------------------------------------------
/vue2.0学习/实现模态框/sync/demo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-if="show" class="border">
 3 |     <div>子组件msg：{{ msg }}</div>
 4 |     <div>子组件数组：{{ arr }}</div>
 5 |     <p>子组件对象：{{ obj.name }}</p>
 6 |     <button @click="closeModel">关闭model框</button>
 7 |     <button @click="$emit('update:msg', '浪里行舟')">
 8 |       改变文字
 9 |     </button>
10 |     <button @click="arr.push('前端工匠')">改变数组</button>
11 |     <button @click="changeText">改变对象</button>
12 |   </div>
13 | </template>
14 | <script>
15 | export default {
16 |   props: {
17 |     msg: {
18 |       type: String
19 |     },
20 |     show: {
21 |       type: Boolean
22 |     },
23 |     arr: {
24 |       type: Array //在子组件中改变传递过来数组将会影响到父组件的状态
25 |     },
26 |     obj: {
27 |       type: Object
28 |     }
29 |   },
30 |   methods: {
31 |     closeModel() {
32 |       this.$emit("update:show", false);
33 |     },
34 |     changeText() {
35 |       this.obj.name === "前端"
36 |         ? (this.obj.name = "浪里行舟")
37 |         : (this.obj.name = "前端");
38 |     }
39 |   }
40 | };
41 | </script>
42 | 


--------------------------------------------------------------------------------
/vue2.0学习/实现模态框/sync/index.vue:
--------------------------------------------------------------------------------
 1 | //v-model 毕竟不是给组件与组件之间通信而设计的双向绑定，无论从语意上和代码写法上都没有 .sync 直观和方便。
 2 | <template>
 3 |   <div class="hello">
 4 |     <div>
 5 |       <p>父组件msg：{{ msg }}</p>
 6 |       <p>父组件数组：{{ arr }}</p>
 7 |       <p>父组件对象：{{ obj.name }}</p>
 8 |     </div>
 9 |     <button @click="show = true">打开model框</button>
10 |     <br />
11 |     <demo :show.sync="show" :msg.sync="msg" :arr="arr" :obj="obj"></demo>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | import Demo from "./demo.vue";
17 | export default {
18 |   name: "Hello",
19 |   components: {
20 |     Demo
21 |   },
22 |   data() {
23 |     return {
24 |       show: false,
25 |       msg: "模拟一个model框",
26 |       arr: [1, 2, 3],
27 |       obj: {
28 |         name: "厦门"
29 |       }
30 |     };
31 |   }
32 | };
33 | </script>
34 | 


--------------------------------------------------------------------------------
/vue2.0学习/实现模态框/v-model/demo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-if="value">
 3 |     <p>这是一个Model框</p>
 4 |     <div>子组件value：{{ value }}</div>
 5 |     <button @click="closeModel">关闭model框</button>
 6 |   </div>
 7 | </template>
 8 | <script>
 9 | export default {
10 |   props: {
11 |     value: {
12 |       type: Boolean
13 |     }
14 |   },
15 |   methods: {
16 |     closeModel() {
17 |       this.$emit("input", false);
18 |     }
19 |   }
20 | };
21 | </script>
22 | 


--------------------------------------------------------------------------------
/vue2.0学习/实现模态框/v-model/index.vue:
--------------------------------------------------------------------------------
 1 | //这是一个模态框的基本雏形，可以在父组件通过 v-model 来进行 model 框和父组件之间的显示交互。
 2 | //通过子组件看出通过props接收了value值，当点击关闭的时候还是通过$emit事件触发input事件，然后通过传入 false 参数。
 3 | <template>
 4 |   <div class="hello">
 5 |     <div>
 6 |       <p>父组件msg：{{ msg }}</p>
 7 |     </div>
 8 |     <button @click="show = true">打开model框</button>
 9 |     <br />
10 |     <demo v-model="show"></demo>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | import Demo from "./demo.vue";
16 | export default {
17 |   name: "Hello",
18 |   components: {
19 |     Demo
20 |   },
21 |   data() {
22 |     return {
23 |       show: false,
24 |       msg: "模拟一个model框"
25 |     };
26 |   }
27 | };
28 | </script>
29 | 


--------------------------------------------------------------------------------
/vuex-demo/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <p>click {{count}} times,count is {{evenOrOdd}}</p>
 4 |     <button @click="increment">+</button>
 5 |     <button @click="decrement">-</button>
 6 |     <button @click="incrementIfOdd">increment if odd</button>
 7 |     <button @click="incrementAsync">increment async</button>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   name: "HelloWorld",
14 |   computed: {
15 |     count() {
16 |       return this.$store.state.count;
17 |     },
18 |     evenOrOdd() {
19 |       return this.$store.getters.evenOrOdd;
20 |     }
21 |   },
22 |   methods: {
23 |     increment() {
24 |       this.$store.commit("INCREMENT");
25 |     },
26 |     decrement() {
27 |       this.$store.commit("DECREMENT");
28 |     },
29 |     // 只有是奇数才加1
30 |     incrementIfOdd() {
31 |       this.$store.dispatch("incrementIfOdd"); //触发store中对应的action调用
32 |     },
33 |     // 过两秒才加1
34 |     incrementAsync() {
35 |       this.$store.dispatch("incrementAsync");
36 |     }
37 |   }
38 | };
39 | </script>
40 | 
41 | 
42 | <style scoped>
43 | </style>
44 | 


--------------------------------------------------------------------------------
/vuex-demo/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import store from './store'
 3 | import App from './App'
 4 | import router from './router'
 5 | 
 6 | Vue.config.productionTip = false
 7 | 
 8 | /* eslint-disable no-new */
 9 | new Vue({
10 |   el: '#app',
11 |   router,
12 |   store,//注册上vuex的store: 所有组件对象都多一个属性$store
13 |   components: { App },
14 |   template: '<App/>'
15 | })
16 | 
17 | 


--------------------------------------------------------------------------------
/vuex-demo/store.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | Vue.use(Vuex)
 4 | const store = new Vuex.Store({
 5 |     state: {
 6 |         count: 0
 7 |     },
 8 |     mutations: {// 包含了多个直接更新state函数的对象
 9 |         INCREMENT(state) {
10 |             state.count = state.count + 1;
11 |         },
12 |         DECREMENT(state) {
13 |             state.count = state.count - 1;
14 |         }
15 |     },
16 |     getters: {   // 当读取属性值时自动调用并返回属性值
17 |         evenOrOdd(state) {
18 |             return state.count % 2 === 0 ? "偶数" : "奇数";
19 |         }
20 |     },
21 |     actions: { // 包含了多个对应事件回调函数的对象
22 |         incrementIfOdd({ commit, state }) { // 带条件的action
23 |             if (state.count % 2 === 1) {
24 |                 commit('INCREMENT')
25 |             }
26 |         },
27 |         incrementAsync({ commit }) { //异步的action
28 |             setInterval(() => {
29 |                 commit('INCREMENT')
30 |             }, 2000);
31 |         }
32 | 
33 |     }
34 | })
35 | export default store //用export default 封装代码，让外部可以引用
36 | 


--------------------------------------------------------------------------------
/vuex-demo/优化后HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <p>click {{count}} times,count is {{evenOrOdd}}</p>
 4 |     <button @click="increment">+</button>
 5 |     <button @click="decrement">-</button>
 6 |     <button @click="incrementIfOdd">increment if odd</button>
 7 |     <button @click="incrementAsync">increment async</button>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | import { mapActions, mapGetters, mapState, mapMutations } from "vuex";
13 | export default {
14 |   name: "HelloWorld",
15 |   computed: {
16 |     ...mapState(["count"]),
17 |     ...mapGetters(["evenOrOdd"])
18 |     // count() {
19 |     //   return this.$store.state.count;
20 |     // },
21 |     // evenOrOdd() {
22 |     //   return this.$store.getters.evenOrOdd;
23 |     // }
24 |   },
25 |   methods: {
26 |     ...mapActions(["incrementIfOdd", "incrementAsync"]),
27 |     ...mapMutations(["increment", "decrement"])
28 |     // increment() {// 函数名称要跟mutations中一致才可以
29 |     //            写成 ...mapMutations(["increment", "decrement"])
30 |     //   this.$store.commit("INCREMENT");
31 |     // },
32 |     // decrement() {
33 |     //   this.$store.commit("DECREMENT");
34 |     // },
35 |     // // 只有是奇数才加1
36 |     // incrementIfOdd() {
37 |     //   this.$store.dispatch("incrementIfOdd"); //触发store中对应的action调用
38 |     // },
39 |     // // 过两秒才加1
40 |     // incrementAsync() {
41 |     //   this.$store.dispatch("incrementAsync");// 函数名称要跟action中一致才可以
42 |     //                 写成 ...mapActions(["incrementIfOdd", "incrementAsync"])
43 |     // }
44 |   }
45 | };
46 | </script>
47 | <style scoped>
48 | </style>
49 | 


--------------------------------------------------------------------------------
/vuex-demo/优化后store.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | Vue.use(Vuex)
 4 | const store = new Vuex.Store({
 5 |     state: {
 6 |         count: 0
 7 |     },
 8 |     mutations: {// 包含了多个直接更新state函数的对象
 9 |         increment(state) {
10 |             state.count = state.count + 1;
11 |         },
12 |         decrement(state) {
13 |             state.count = state.count - 1;
14 |         }
15 |     },
16 |     getters: {   // 当读取属性值时自动调用并返回属性值
17 |         evenOrOdd(state) {
18 |             return state.count % 2 === 0 ? "偶数" : "奇数";
19 |         }
20 |     },
21 |     actions: { // 包含了多个对应事件回调函数的对象
22 |         incrementIfOdd({ commit, state }) { // 带条件的action
23 |             if (state.count % 2 === 1) {
24 |                 commit('increment')
25 |             }
26 |         },
27 |         incrementAsync({ commit }) { //异步的action
28 |             setInterval(() => {
29 |                 commit('increment')
30 |             }, 2000);
31 |         }
32 | 
33 |     }
34 | })
35 | export default store //用export default 封装代码，让外部可以引用


--------------------------------------------------------------------------------
/websocket/iframe流.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |     <title>Document</title>
 8 | </head>
 9 | <body>
10 |     <div id="clock"></div>
11 |     <iframe src="/clock" style="display:none"></iframe>
12 | </body>
13 | </html>


--------------------------------------------------------------------------------
/websocket/iframe流.js:
--------------------------------------------------------------------------------
 1 | //iframe流
 2 | let express = require('express')
 3 | let app = express()
 4 | app.use(express.static(__dirname))
 5 | app.get('/clock', function(req, res) {
 6 |   setInterval(function() {
 7 |     let date = new Date().toLocaleString()
 8 |     res.write(`
 9 |        <script type="text/javascript">
10 |          parent.document.getElementById('clock').innerHTML = "${date}";
11 |        </script>
12 |      `)
13 |   }, 1000)
14 | })
15 | app.listen(8080)
16 | 


--------------------------------------------------------------------------------
/websocket/websocket.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>websocket</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="clock"></div>
11 |     <script>
12 |       let clockDiv = document.getElementById('clock')
13 |       let socket = new WebSocket('ws://localhost:9999')
14 |       //当连接成功之后就会执行回调函数
15 |       socket.onopen = function() {
16 |         console.log('客户端连接成功')
17 |         //再向服务 器发送一个消息
18 |         socket.send('hello') //客户端发的消息内容 为hello
19 |       }
20 |       //绑定事件是用加属性的方式
21 |       socket.onmessage = function(event) {
22 |         clockDiv.innerHTML = event.data
23 |         console.log('收到服务器端的响应', event.data)
24 |       }
25 |     </script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/websocket/websocket.js:
--------------------------------------------------------------------------------
 1 | let express = require('express')
 2 | let app = express()
 3 | app.use(express.static(__dirname))
 4 | //http服务器
 5 | app.listen(3000)
 6 | 
 7 | let WebSocketServer = require('ws').Server
 8 | //用ws模块启动一个websocket服务器,监听了9999端口
 9 | let wsServer = new WebSocketServer({ port: 9999 })
10 | //监听客户端的连接请求  当客户端连接服务器的时候，就会触发connection事件
11 | //socket代表一个客户端,不是所有客户端共享的，而是每个客户端都有一个socket
12 | wsServer.on('connection', function(socket) {
13 |   //每一个socket都有一个唯一的ID属性
14 |   console.log(socket)
15 |   console.log('客户端连接成功')
16 |   //监听对方发过来的消息
17 |   socket.on('message', function(message) {
18 |     console.log('接收到客户端的消息', message)
19 |     socket.send('服务器回应:' + message)
20 |   })
21 | })
22 | 


--------------------------------------------------------------------------------
/websocket/轮询.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |     <title>Document</title>
 8 | </head>
 9 | <body>
10 |     <div id="clock"></div>
11 | <script>
12 |     let clockDiv = document.getElementById('clock');
13 |     setInterval(function(){
14 |         let xhr = new XMLHttpRequest;
15 |         xhr.open('GET','/clock',true);
16 |         xhr.onreadystatechange = function(){
17 |             if(xhr.readyState == 4 && xhr.status == 200){
18 |                 console.log(xhr.responseText);
19 |                 clockDiv.innerHTML = xhr.responseText;
20 |             }
21 |         }
22 |         xhr.send();
23 |     },1000);
24 | </script>
25 | </body>
26 | </html>


--------------------------------------------------------------------------------
/websocket/轮询.js:
--------------------------------------------------------------------------------
1 | //轮训
2 | let express = require('express')
3 | let app = express()
4 | app.use(express.static(__dirname))
5 | app.get('/clock', function(req, res) {
6 |   res.end(new Date().toLocaleString())
7 | })
8 | app.listen(8080)
9 | 


--------------------------------------------------------------------------------
/websocket/长轮询.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Document</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="clock"></div>
11 |     <script>
12 |       let clockDiv = document.getElementById('clock')
13 |       function send() {
14 |         let xhr = new XMLHttpRequest()
15 |         xhr.open('GET', '/clock', true)
16 |         xhr.timeout = 2000 // 超时时间，单位是毫秒
17 |         xhr.onreadystatechange = function() {
18 |           if (xhr.readyState == 4) {
19 |             if (xhr.status == 200) {
20 |               //如果返回成功了，则显示结果
21 |               clockDiv.innerHTML = xhr.responseText
22 |             }
23 |             //不管成功还是失败都会发下一次请求
24 |             send()
25 |           }
26 |         }
27 |         xhr.ontimeout = function() {
28 |           send()
29 |         }
30 |         xhr.send()
31 |       }
32 |       send()
33 |     </script>
34 |   </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/websocket/长轮询.js:
--------------------------------------------------------------------------------
1 | //长轮训
2 | let express = require('express')
3 | let app = express()
4 | app.use(express.static(__dirname))
5 | app.get('/clock', function(req, res) {
6 |   res.end(new Date().toLocaleString())
7 | })
8 | app.listen(8080)
9 | 


--------------------------------------------------------------------------------
/三栏布局/三栏布局--flexbox布局.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |     <meta charset="utf-8">
 6 |     <title>Layout</title>
 7 |     <style media="screen">
 8 |         html * {
 9 |             padding: 0;
10 |             margin: 0;
11 |         }
12 |         .layout article div {
13 |             min-height: 150px;
14 |         }
15 |     </style>
16 | </head>
17 | <body>
18 |     <!--flexbox  -->
19 |     <section class="layout flexbox">
20 |         <style>
21 |             .layout.flexbox .left-center-right{
22 |                 display: flex;
23 |             }
24 |             .layout.flexbox .left {
25 |                 width: 300px;
26 |                 background: red;
27 |             }
28 |             .layout.flexbox .center {
29 |                 background: yellow;
30 |                 flex: 1;
31 |             }
32 |             .layout.flexbox .right {
33 |                 width: 300px;
34 |                 background: blue;
35 |             }
36 |         </style>
37 |         <h1>三栏布局</h1>
38 |         <article class="left-center-right">
39 |             <div class="left"></div>
40 |             <div class="center">
41 |                 <h2>flexbox解决方案</h2>
42 |                 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
43 |                 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
44 |                 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
45 |                 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
46 |                 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
47 |                 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
48 |                 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
49 |             </div>
50 |             <div class="right"></div>
51 |         </article>
52 |     </section>
53 | </body>
54 | </html>


--------------------------------------------------------------------------------
/三栏布局/三栏布局--grid布局.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |     <meta charset="utf-8">
 6 |     <title>Layout</title>
 7 |     <style media="screen">
 8 |         html * {
 9 |             padding: 0;
10 |             margin: 0;
11 |         }
12 | 
13 |         .layout article div {
14 |             min-height: 150px;
15 |         }
16 |     </style>
17 | </head>
18 | 
19 | <body>
20 |     <!--网格布局-->
21 |     <section class="layout grid">
22 |         <style>
23 |             .layout.grid .left-center-right {
24 |                 display: grid;
25 |                 width: 100%;
26 |                 grid-template-columns: 300px auto 300px;
27 |                 grid-template-rows: 150px;
28 |             }
29 |             .layout.grid .left {
30 |                 background: red;
31 |             }
32 |             .layout.grid .center {
33 |                 background: yellow;
34 |             }
35 |             .layout.grid .right {
36 |                 background: blue;
37 |             }
38 |         </style>
39 |         <h1>三栏布局</h1>
40 |         <article class="left-center-right">
41 |             <div class="left"></div>
42 |             <div class="center">
43 |                 <h2>网格布局解决方案</h2>
44 |                 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
45 |             </div>
46 |             <div class="right"></div>
47 |         </article>
48 |     </section>
49 | </body>
50 | 
51 | </html>


--------------------------------------------------------------------------------
/三栏布局/三栏布局--浮动布局.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |     <meta charset="utf-8">
 6 |     <title>Layout</title>
 7 |     <style media="screen">
 8 |         html * {
 9 |             padding: 0;
10 |             margin: 0;
11 |         }
12 |         .layout article div {
13 |             min-height: 150px;
14 |         }
15 |     </style>
16 | </head>
17 | <body>
18 |     <!--浮动布局  -->
19 |     <section class="layout float">
20 |         <style media="screen">
21 |             .layout.float .left {
22 |                 float: left;
23 |                 width: 300px;
24 |                 background: red;
25 |             }
26 | 
27 |             .layout.float .center {
28 |                 background: yellow;
29 |             }
30 | 
31 |             .layout.float .right {
32 |                 float: right;
33 |                 width: 300px;
34 |                 background: blue;
35 |             }
36 |         </style>
37 |         <h1>三栏布局</h1>
38 |         <article class="left-right-center">
39 |             <div class="left"></div>
40 |             <div class="right"></div>
41 |             <div class="center">
42 |                 <h2>浮动解决方案</h2>
43 |                 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
44 |             </div>
45 |         </article>
46 |     </section>
47 | </body>
48 | </html>


--------------------------------------------------------------------------------
/三栏布局/三栏布局--绝对布局.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |     <meta charset="utf-8">
 6 |     <title>Layout</title>
 7 |     <style media="screen">
 8 |         html * {
 9 |             padding: 0;
10 |             margin: 0;
11 |         }
12 |         .layout article div {
13 |             min-height: 150px;
14 |         }
15 |     </style>
16 | </head>
17 | <body>
18 |     <!--绝对布局  -->
19 |     <section class="layout absolute">
20 |         <style>
21 |             .layout.absolute .left-center-right>div{
22 |                 position: absolute;
23 |             }
24 |             .layout.absolute .left {
25 |                 left:0;
26 |                 width: 300px;
27 |                 background: red;
28 |             }
29 | 
30 |             .layout.absolute .center {
31 |                 left: 300px;
32 |                 right: 300px;
33 |                 background: yellow;
34 |             }
35 | 
36 |             .layout.absolute .right {
37 |                 right: 0;
38 |                 width: 300px;
39 |                 background: blue;
40 |             }
41 |         </style>
42 |         <h1>三栏布局</h1>
43 |         <article class="left-center-right">
44 |             <div class="left"></div>
45 |             <div class="center">
46 |                 <h2>绝对定位解决方案</h2>
47 |                 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
48 |             </div>
49 |             <div class="right"> 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案</div>
50 |         </article>
51 |     </section>
52 | </body>
53 | </html>


--------------------------------------------------------------------------------
/三栏布局/三栏布局--表格布局.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |     <meta charset="utf-8">
 6 |     <title>Layout</title>
 7 |     <style media="screen">
 8 |         html * {
 9 |             padding: 0;
10 |             margin: 0;
11 |         }
12 | 
13 |         .layout article div {
14 |             min-height: 150px;
15 |         }
16 |     </style>
17 | </head>
18 | 
19 | <body>
20 |     <!--表格布局-->
21 |     <section class="layout table">
22 |         <style>
23 |             .layout.table .left-center-right {
24 |                 display: table;
25 |                 height: 150px;
26 |                 width: 100%;
27 |             }
28 | 
29 |             .layout.table .left-center-right>div {
30 |                 display: table-cell;
31 |             }
32 | 
33 |             .layout.table .left {
34 |                 width: 300px;
35 |                 background: red;
36 |             }
37 | 
38 |             .layout.table .center {
39 |                 background: yellow;
40 |             }
41 | 
42 |             .layout.table .right {
43 |                 width: 300px;
44 |                 background: blue;
45 |             }
46 |         </style>
47 |         <h1>三栏布局</h1>
48 |         <article class="left-center-right">
49 |             <div class="left"></div>
50 |             <div class="center">
51 |                 <h2>表格布局解决方案</h2>
52 |                 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
53 |                 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
54 |                 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
55 |                 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
56 |                 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
57 |                 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
58 |                 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
59 |                 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
60 |             </div>
61 |             <div class="right"></div>
62 |         </article>
63 |     </section>
64 | </body>
65 | 
66 | </html>


--------------------------------------------------------------------------------
/三栏布局/双飞翼布局.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |     <meta charset="utf-8">
 6 |     <title>Layout</title>
 7 |     <style media="screen">
 8 |     html * {
 9 |         padding: 0;
10 |         margin: 0;
11 |     }
12 |     </style>
13 | </head>
14 | 
15 | <body>
16 |     <style>
17 |     .container {
18 |         min-width: 600px;
19 |     }
20 | 
21 |     .left {
22 |         float: left;
23 |         width: 200px;
24 |         height: 400px;
25 |         background: red;
26 |         margin-left: -100%;
27 |     }
28 | 
29 |     .center {
30 |         float: left;
31 |         width: 100%;
32 |         height: 500px;
33 |         background: yellow;
34 |     }
35 | 
36 |     .center .inner {
37 |         margin: 0 200px;
38 |     }
39 | 
40 |     .right {
41 |         float: left;
42 |         width: 200px;
43 |         height: 400px;
44 |         background: blue;
45 |         margin-left: -200px;
46 |     }
47 |     </style>
48 |     <article class="container">
49 |         <div class="center">
50 |             <div class="inner">双飞翼布局</div>
51 |         </div>
52 |         <div class="left"></div>
53 |         <div class="right"></div>
54 |     </article>
55 | </body>
56 | 
57 | </html>
58 | 


--------------------------------------------------------------------------------
/三栏布局/圣杯布局.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <title>Layout</title>
 7 |   <style media="screen">
 8 |   html * {
 9 |     padding: 0;
10 |     margin: 0;
11 |   }
12 | 
13 |   </style>
14 | </head>
15 | 
16 | <body>
17 |   <style>
18 |   .container {
19 |     padding-left: 220px;
20 |     padding-right: 220px;
21 |   }
22 | 
23 |   .left {
24 |     float: left;
25 |     width: 200px;
26 |     height: 400px;
27 |     background: red;
28 |     margin-left: -100%;
29 |     position: relative;
30 |     left: -220px;
31 |   }
32 | 
33 |   .center {
34 |     float: left;
35 |     width: 100%;
36 |     height: 500px;
37 |     background: yellow;
38 |   }
39 | 
40 |   .right {
41 |     float: left;
42 |     width: 200px;
43 |     height: 400px;
44 |     background: blue;
45 |     margin-left: -200px;
46 |     position: relative;
47 |     right: -220px;
48 |   }
49 | 
50 |   </style>
51 |   <article class="container">
52 |     <div class="center">
53 |       <h2>圣杯布局</h2>
54 |     </div>
55 |     <div class="left"></div>
56 |     <div class="right"></div>
57 |   </article>
58 | </body>
59 | 
60 | </html>
61 | 


--------------------------------------------------------------------------------
/多种跨域方式/1.jsonp/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Document</title>
 8 |   </head>
 9 |   <body>
10 |     <script>
11 |       function jsonp({ url, params, callback }) {
12 |         return new Promise((resolve, reject) => {
13 |           let script = document.createElement('script')
14 |           window[callback] = function(data) {
15 |             resolve(data)
16 |             document.body.removeChild(script)
17 |           }
18 |           params = { ...params, callback } // wd=b&callback=show
19 |           let arrs = []
20 |           for (let key in params) {
21 |             arrs.push(`${key}=${params[key]}`)
22 |           }
23 |           script.src = `${url}?${arrs.join('&')}`
24 |           document.body.appendChild(script)
25 |         })
26 |       }
27 |       jsonp({
28 |         url: 'http://localhost:3000/say',
29 |         params: { wd: 'Iloveyou' },
30 |         callback: 'show'
31 |       }).then(data => {
32 |         console.log(data)
33 |       })
34 |     </script>
35 |   </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/多种跨域方式/1.jsonp/server.js:
--------------------------------------------------------------------------------
 1 | let express = require('express')
 2 | let app = express()
 3 | 
 4 | app.get('/say', function(req, res) {
 5 |   let { wd, callback } = req.query
 6 |   console.log(wd)
 7 |   console.log(callback)
 8 |   res.end(`${callback}('我不爱你')`)
 9 | })
10 | app.listen(3000)
11 | 


--------------------------------------------------------------------------------
/多种跨域方式/2.cors/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Document</title>
 8 |   </head>
 9 |   <body>
10 |     <script>
11 |       let xhr = new XMLHttpRequest()
12 |       document.cookie = 'name=xiamen'// cookie不能跨域
13 |       xhr.withCredentials = true // 前端设置是否带cookie
14 |       xhr.open('PUT', 'http://localhost:4000/getData', true)
15 |       xhr.setRequestHeader('name', 'xiamen')
16 |       xhr.onreadystatechange = function() {
17 |         if (xhr.readyState === 4) {
18 |           if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
19 |             console.log(xhr.response)
20 |             console.log(xhr.getResponseHeader('name'))
21 |           }
22 |         }
23 |       }
24 |       xhr.send()
25 |     </script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/多种跨域方式/2.cors/server1.js:
--------------------------------------------------------------------------------
1 | let express = require('express');
2 | let app = express();
3 | app.use(express.static(__dirname));
4 | app.listen(3000);


--------------------------------------------------------------------------------
/多种跨域方式/2.cors/server2.js:
--------------------------------------------------------------------------------
 1 | let express = require('express')
 2 | let app = express()
 3 | let whitList = ['http://localhost:3000'] //设置白名单
 4 | app.use(function(req, res, next) {
 5 |   let origin = req.headers.origin
 6 |   if (whitList.includes(origin)) {
 7 |     // 设置哪个源可以访问我
 8 |     res.setHeader('Access-Control-Allow-Origin', origin)
 9 |     // 允许携带哪个头访问我
10 |     res.setHeader('Access-Control-Allow-Headers', 'name')
11 |     // 允许哪个方法访问我
12 |     res.setHeader('Access-Control-Allow-Methods', 'PUT')
13 |     // 允许携带cookie
14 |     res.setHeader('Access-Control-Allow-Credentials', true)
15 |     // 预检的存活时间
16 |     res.setHeader('Access-Control-Max-Age', 6)
17 |     // 允许返回的头
18 |     res.setHeader('Access-Control-Expose-Headers', 'name')
19 |     if (req.method === 'OPTIONS') {
20 |       res.end() // OPTIONS请求不做任何处理
21 |     }
22 |   }
23 |   next()
24 | })
25 | app.put('/getData', function(req, res) {
26 |   console.log(req.headers)
27 |   res.setHeader('name', 'jw')
28 |   res.end('我不爱你')
29 | })
30 | app.get('/getData', function(req, res) {
31 |   console.log(req.headers)
32 |   res.end('我不爱你')
33 | })
34 | app.use(express.static(__dirname))
35 | app.listen(4000)
36 | 


--------------------------------------------------------------------------------
/多种跨域方式/3.postMesssage/a.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>Document</title>
 8 | </head>
 9 | <body>
10 |   <iframe src="http://localhost:4000/b.html" frameborder="0" id="frame" onload="load()"></iframe>
11 |   <script>
12 |     function load() {
13 |       let frame = document.getElementById('frame');
14 |       frame.contentWindow.postMessage('我爱你','http://localhost:4000');
15 |       window.onmessage = function (e) {
16 |         console.log(e.data);
17 |       }
18 |     }
19 |   
20 |   </script>
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/多种跨域方式/3.postMesssage/a.js:
--------------------------------------------------------------------------------
1 | let express = require('express');
2 | let app = express();
3 | app.use(express.static(__dirname));
4 | app.listen(3000);


--------------------------------------------------------------------------------
/多种跨域方式/3.postMesssage/b.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>Document</title>
 8 | </head>
 9 | <body>
10 |   <script>
11 |     window.onmessage = function (e) {
12 |       console.log(e.data);
13 |       e.source.postMessage('我不爱你',e.origin)
14 |     }
15 |   </script>
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/多种跨域方式/3.postMesssage/b.js:
--------------------------------------------------------------------------------
1 | let express = require('express');
2 | let app = express();
3 | app.use(express.static(__dirname));
4 | app.listen(4000);


--------------------------------------------------------------------------------
/多种跨域方式/4.name/a.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>Document</title>
 8 | </head>
 9 | <body>
10 |   a和b是同域的 http://localhost:3000
11 |   c是独立的  http://localhost:4000
12 |   a获取c的数据
13 |   a先引用c c把值放到window.name,把a引用的地址改到b
14 |   <iframe src="http://localhost:4000/c.html" frameborder="0" onload="load()" id="iframe"></iframe>
15 |   <script>
16 |     let first = true
17 |     function load() {
18 |       if(first){
19 |         let iframe = document.getElementById('iframe');
20 |         iframe.src = 'http://localhost:3000/b.html';
21 |         first = false;
22 |       }else{
23 |         console.log(iframe.contentWindow.name);
24 |       }
25 |     }
26 |   </script>
27 | </body>
28 | </html>


--------------------------------------------------------------------------------
/多种跨域方式/4.name/a.js:
--------------------------------------------------------------------------------
1 | let express = require('express');
2 | let app = express();
3 | app.use(express.static(__dirname));
4 | app.listen(3000);


--------------------------------------------------------------------------------
/多种跨域方式/4.name/b.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>Document</title>
 8 | </head>
 9 | <body>
10 |   
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/多种跨域方式/4.name/b.js:
--------------------------------------------------------------------------------
1 | let express = require('express');
2 | let app = express();
3 | app.use(express.static(__dirname));
4 | app.listen(4000);


--------------------------------------------------------------------------------
/多种跨域方式/4.name/c.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>Document</title>
 8 | </head>
 9 | <body>
10 |   <script>
11 |     window.name = '我不爱你'  
12 |   </script>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/多种跨域方式/5.hash/a.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>Document</title>
 8 | </head>
 9 | <body>
10 |   <!-- 路径后面的hash值可以用来通信  -->
11 |   <!-- 目的a想访问c -->
12 |   <!-- a给c传一个hash值 c收到hash值后  c把hash值传递给b b将结果放到a的hash值中-->
13 |   <iframe src="http://localhost:4000/c.html#iloveyou"></iframe>
14 |   <script>
15 |     window.onhashchange = function () {
16 |       console.log(location.hash);
17 |     }
18 |   </script>
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/多种跨域方式/5.hash/a.js:
--------------------------------------------------------------------------------
1 | let express = require('express');
2 | let app = express();
3 | app.use(express.static(__dirname));
4 | app.listen(3000);


--------------------------------------------------------------------------------
/多种跨域方式/5.hash/b.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Document</title>
 9 | </head>
10 | <body>
11 |   <script>
12 |     window.parent.parent.location.hash = location.hash  
13 |   </script>
14 | </body>
15 | 
16 | </html>


--------------------------------------------------------------------------------
/多种跨域方式/5.hash/b.js:
--------------------------------------------------------------------------------
1 | let express = require('express');
2 | let app = express();
3 | app.use(express.static(__dirname));
4 | app.listen(4000);


--------------------------------------------------------------------------------
/多种跨域方式/5.hash/c.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 | <script>
13 |   console.log(location.hash);
14 |   let iframe = document.createElement('iframe');
15 |   iframe.src = 'http://localhost:3000/b.html#idontloveyou';
16 |   document.body.appendChild(iframe);
17 | </script>
18 | </body>
19 | 
20 | </html>


--------------------------------------------------------------------------------
/多种跨域方式/6.domain/a.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>Document</title>
 8 | </head>
 9 | <body>
10 |   <!-- 域名 一级域名二级域名 -->
11 |   <!-- www.baidu.com -->
12 |   <!-- viode.baidu.com -->
13 |   <!-- a是通过 http://a.zf1.cn:3000/a.html -->
14 |   helloa
15 |   <iframe src="http://b.zf1.cn:3000/b.html" frameborder="0" onload="load()" id="frame"></iframe>
16 |   <script>
17 |     document.domain = 'zf1.cn'
18 |     function load() {
19 |       console.log(frame.contentWindow.a);
20 |     }
21 |   </script>
22 | 
23 | </body>
24 | </html>


--------------------------------------------------------------------------------
/多种跨域方式/6.domain/a.js:
--------------------------------------------------------------------------------
1 | let express = require('express');
2 | let app = express();
3 | app.use(express.static(__dirname));
4 | app.listen(3000);


--------------------------------------------------------------------------------
/多种跨域方式/6.domain/b.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>Document</title>
 8 | </head>
 9 | <body>
10 |    hellob
11 |    <script>
12 |       document.domain = 'zf1.cn'
13 |      var a = 100;
14 |    </script>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/多种跨域方式/6.domain/b.js:
--------------------------------------------------------------------------------
1 | let express = require('express');
2 | let app = express();
3 | app.use(express.static(__dirname));
4 | app.listen(4000);


--------------------------------------------------------------------------------
/多种跨域方式/7.websocket/server.js:
--------------------------------------------------------------------------------
 1 | let express = require('express');
 2 | let app = express();
 3 | let WebSocket = require('ws');
 4 | let wss = new WebSocket.Server({port:3000});
 5 | wss.on('connection',function(ws) {
 6 |   ws.on('message', function (data) {
 7 |     console.log(data);
 8 |     ws.send('我不爱你')
 9 |   });
10 | })
11 | 
12 | 
13 | 
14 | 


--------------------------------------------------------------------------------
/多种跨域方式/7.websocket/socket.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>Document</title>
 8 | </head>
 9 | <body>
10 |   <script>
11 |     // 高级api 不兼容 socket.io(一般使用它)
12 |     let socket = new WebSocket('ws://localhost:3000');
13 |     socket.onopen = function () {
14 |       socket.send('我爱你');
15 |     }
16 |     socket.onmessage = function (e) {
17 |       console.log(e.data);
18 |     }
19 |   </script>
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/多种跨域方式/8.nginx/a.js:
--------------------------------------------------------------------------------
 1 | var http = require('http');
 2 | var server = http.createServer();
 3 | var qs = require('querystring');
 4 | 
 5 | server.on('request', function(req, res) {
 6 |     var params = qs.parse(req.url.substring(2));
 7 | 
 8 |     // 向前台写cookie
 9 |     res.writeHead(200, {
10 |         'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'   // HttpOnly:脚本无法读取
11 |     });
12 | 
13 |     res.write(JSON.stringify(params));
14 |     res.end();
15 | });
16 | 
17 | server.listen('8080');
18 | console.log('Server is running at port 8080...');
19 | 


--------------------------------------------------------------------------------
/多种跨域方式/8.nginx/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>Document</title>
 8 | </head>
 9 | <body>
10 |   <script>
11 |    var xhr = new XMLHttpRequest();
12 |    // 前端开关：浏览器是否读写cookie
13 |    xhr.withCredentials = true;
14 |    // 访问nginx中的代理服务器
15 |    xhr.open('get', 'http://www.domain1.com:81/?user=admin', true);
16 |    xhr.send();  
17 |   </script>
18 | </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/多种跨域方式/9.node中间件代理/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Node中间件代理</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
12 |     <script>
13 |       $.ajax({
14 |         url: 'http://localhost:3000',
15 |         type: 'post',
16 |         data: { name: 'xiamen', password: '123456' },
17 |         contentType: 'application/json;charset=utf-8',
18 |         success: function(result) {
19 |           console.log('result', result)
20 |         },
21 |         error: function(msg) {
22 |           console.log(msg)
23 |         }
24 |       })
25 |     </script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/多种跨域方式/9.node中间件代理/server1.js:
--------------------------------------------------------------------------------
 1 | const http = require('http')
 2 | // 第一步：接受客户端请求
 3 | const server = http.createServer((request, response) => {
 4 |   // 代理服务器，直接和浏览器直接交互，需要设置CORS 的首部字段
 5 |   response.writeHead(200, {
 6 |     'Access-Control-Allow-Origin': '*',
 7 |     'Access-Control-Allow-Methods': '*',
 8 |     'Access-Control-Allow-Headers': 'Content-Type'
 9 |   })
10 |   // 第二步：将请求转发给服务器
11 |   const proxyRequest = http
12 |     .request(
13 |       {
14 |         host: '127.0.0.1',
15 |         port: 4000,
16 |         url: '/',
17 |         method: request.method,
18 |         headers: request.headers
19 |       },
20 |       serverResponse => {
21 |         // 第三步：收到服务器的响应
22 |         var body = ''
23 |         serverResponse.on('data', chunk => {
24 |           body += chunk
25 |         })
26 |         serverResponse.on('end', () => {
27 |           console.log('The data is ' + body)
28 |           // 第四步：将响应结果转发给浏览器
29 |           response.end(body)
30 |         })
31 |       }
32 |     )
33 |     .end()
34 | })
35 | server.listen(3000, () => {
36 |   console.log('The proxyServer is running at http://localhost:3000')
37 | })
38 | 


--------------------------------------------------------------------------------
/多种跨域方式/9.node中间件代理/server2.js:
--------------------------------------------------------------------------------
 1 | const http = require('http')
 2 | const data = { title: 'fontend', password: '123456' }
 3 | const server = http.createServer((request, response) => {
 4 |   if (request.url === '/') {
 5 |     response.end(JSON.stringify(data))
 6 |   }
 7 | })
 8 | server.listen(4000, () => {
 9 |   console.log('The server is running at http://localhost:4000')
10 | })
11 | 


--------------------------------------------------------------------------------
/文章中的思维导图/Ajax .xmind:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ljianshu/Blog/03bf481a21e8976ce95b45827d3d19176c7c9764/文章中的思维导图/Ajax .xmind


--------------------------------------------------------------------------------
/文章中的思维导图/Ajax请求PHP接口.xmind:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ljianshu/Blog/03bf481a21e8976ce95b45827d3d19176c7c9764/文章中的思维导图/Ajax请求PHP接口.xmind


--------------------------------------------------------------------------------
/文章中的思维导图/CSS浮动.xmind:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ljianshu/Blog/03bf481a21e8976ce95b45827d3d19176c7c9764/文章中的思维导图/CSS浮动.xmind


--------------------------------------------------------------------------------
/文章中的思维导图/ES6核心特性.xmind:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ljianshu/Blog/03bf481a21e8976ce95b45827d3d19176c7c9764/文章中的思维导图/ES6核心特性.xmind


--------------------------------------------------------------------------------
/文章中的思维导图/ES7、ES8、ES9、ES10新特性@浪里行舟.xmind:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ljianshu/Blog/03bf481a21e8976ce95b45827d3d19176c7c9764/文章中的思维导图/ES7、ES8、ES9、ES10新特性@浪里行舟.xmind


--------------------------------------------------------------------------------
/文章中的思维导图/Fetch@浪里行舟.xmind:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ljianshu/Blog/03bf481a21e8976ce95b45827d3d19176c7c9764/文章中的思维导图/Fetch@浪里行舟.xmind


--------------------------------------------------------------------------------
/文章中的思维导图/Git.xmind:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ljianshu/Blog/03bf481a21e8976ce95b45827d3d19176c7c9764/文章中的思维导图/Git.xmind


--------------------------------------------------------------------------------
/文章中的思维导图/HTTP协议@浪里行舟.xmind:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ljianshu/Blog/03bf481a21e8976ce95b45827d3d19176c7c9764/文章中的思维导图/HTTP协议@浪里行舟.xmind


--------------------------------------------------------------------------------
/文章中的思维导图/JavaScript数据类型及其检测@浪里行舟.xmind:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ljianshu/Blog/03bf481a21e8976ce95b45827d3d19176c7c9764/文章中的思维导图/JavaScript数据类型及其检测@浪里行舟.xmind


--------------------------------------------------------------------------------
/文章中的思维导图/this.xmind:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ljianshu/Blog/03bf481a21e8976ce95b45827d3d19176c7c9764/文章中的思维导图/this.xmind


--------------------------------------------------------------------------------
/文章中的思维导图/vue响应式原理.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ljianshu/Blog/03bf481a21e8976ce95b45827d3d19176c7c9764/文章中的思维导图/vue响应式原理.png


--------------------------------------------------------------------------------
/文章中的思维导图/vue组件三大核心概念.xmind:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ljianshu/Blog/03bf481a21e8976ce95b45827d3d19176c7c9764/文章中的思维导图/vue组件三大核心概念.xmind


--------------------------------------------------------------------------------
/文章中的思维导图/元素居中.xmind:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ljianshu/Blog/03bf481a21e8976ce95b45827d3d19176c7c9764/文章中的思维导图/元素居中.xmind


--------------------------------------------------------------------------------
/文章中的思维导图/常见的CSS布局.xmind:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ljianshu/Blog/03bf481a21e8976ce95b45827d3d19176c7c9764/文章中的思维导图/常见的CSS布局.xmind


--------------------------------------------------------------------------------
/文章中的思维导图/模块化规范.xmind:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ljianshu/Blog/03bf481a21e8976ce95b45827d3d19176c7c9764/文章中的思维导图/模块化规范.xmind


--------------------------------------------------------------------------------
/文章中的思维导图/浏览器渲染原理.xmind:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ljianshu/Blog/03bf481a21e8976ce95b45827d3d19176c7c9764/文章中的思维导图/浏览器渲染原理.xmind


--------------------------------------------------------------------------------
/文章中的思维导图/浏览器缓存机制.xmind:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ljianshu/Blog/03bf481a21e8976ce95b45827d3d19176c7c9764/文章中的思维导图/浏览器缓存机制.xmind


--------------------------------------------------------------------------------
/文章中的思维导图/线程机制与事件机制.xmind:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ljianshu/Blog/03bf481a21e8976ce95b45827d3d19176c7c9764/文章中的思维导图/线程机制与事件机制.xmind


--------------------------------------------------------------------------------
/文章中的思维导图/闭包.xmind:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ljianshu/Blog/03bf481a21e8976ce95b45827d3d19176c7c9764/文章中的思维导图/闭包.xmind


--------------------------------------------------------------------------------
/模块化/01_modular/01_全局function模式/module1.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 全局函数模式: 将不同的功能封装成不同的全局函数
 3 |  * 问题: Global被污染了, 很容易引起命名冲突
 4 |  */
 5 | //数据
 6 | let data = 'atguigu.com'
 7 | function foo() {
 8 |     console.log('foo()')
 9 | }
10 | function bar() {
11 |     console.log('bar()')
12 | }
13 | 


--------------------------------------------------------------------------------
/模块化/01_modular/01_全局function模式/module2.js:
--------------------------------------------------------------------------------
1 | let data2 = 'other data'
2 | 
3 | function foo() {  //与另一个模块中的函数冲突了
4 |   console.log(`foo() ${data2}`)
5 | }
6 | 


--------------------------------------------------------------------------------
/模块化/01_modular/01_全局function模式/test1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>01_全局function模式</title>
 6 | </head>
 7 | <body>
 8 | <script type="text/javascript" src="module1.js"></script>
 9 | <script type="text/javascript" src="module2.js"></script>
10 | <script type="text/javascript">
11 | 
12 |   foo()
13 |   bar()
14 | </script>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/模块化/01_modular/02_namespace模式/module1.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * namespace模式: 简单对象封装
 3 |  * 作用: 减少了全局变量
 4 |  * 问题: 不安全(数据不是私有的, 外部可以直接修改)
 5 |  */
 6 | let myModule = {
 7 |   data: 'atguigu.com',
 8 |   foo() {
 9 |     console.log(`foo() ${this.data}`)
10 |   },
11 |   bar() {
12 |     console.log(`bar() ${this.data}`)
13 |   }
14 | }
15 | 
16 | 


--------------------------------------------------------------------------------
/模块化/01_modular/02_namespace模式/module2.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * namespace模式: 简单对象封装
 3 |  * 作用: 减少了全局变量
 4 |  * 问题: 不安全(数据不是私有的)
 5 |  */
 6 | let myModule2 = {
 7 |   data: 'atguigu.com2222',
 8 |   foo() {
 9 |     console.log(`foo() ${this.data}`)
10 |   },
11 |   bar() {
12 |     console.log(`bar() ${this.data}`)
13 |   }
14 | }
15 | 
16 | 


--------------------------------------------------------------------------------
/模块化/01_modular/02_namespace模式/test2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>02_namespace模式</title>
 6 | </head>
 7 | <body>
 8 | <script type="text/javascript" src="module2.js"></script>
 9 | <script type="text/javascript" src="module22.js"></script>
10 | <script type="text/javascript">
11 |   myModule.foo()
12 |   myModule.bar()
13 | 
14 |   myModule2.foo()
15 |   myModule2.bar()
16 | 
17 |   myModule.data = 'other data' //能直接修改模块内部的数据
18 |   myModule.foo()
19 | 
20 | </script>
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/模块化/01_modular/03_IIFE模式/module3.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * IIFE模式: 匿名函数自调用(闭包)
 3 |  * IIFE : immediately-invoked function expression(立即调用函数表达式)
 4 |  * 作用: 数据是私有的, 外部只能通过暴露的方法操作
 5 |  * 问题: 如果当前这个模块依赖另一个模块怎么办?
 6 |  */
 7 | ;(function(window) {
 8 |   let data = 'www.baidu.com'
 9 |   //操作数据的函数
10 |   function foo() {
11 |     //用于暴露有函数
12 |     console.log(`foo() ${data}`)
13 |   }
14 |   function bar() {
15 |     //用于暴露有函数
16 |     console.log(`bar() ${data}`)
17 |     otherFun() //内部调用
18 |   }
19 |   function otherFun() {
20 |     //内部私有的函数
21 |     console.log('otherFun()')
22 |   }
23 |   //暴露行为
24 |   window.myModule = { foo, bar }
25 | })(window)
26 | 


--------------------------------------------------------------------------------
/模块化/01_modular/03_IIFE模式/test3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <title>03_IIFE模式</title>
 6 |   </head>
 7 |   <body>
 8 |     <script type="text/javascript" src="module3.js"></script>
 9 |     <script type="text/javascript">
10 |       myModule.foo()
11 |       myModule.bar()
12 |       console.log(myModule.data) //undefined 不能访问模块内部数据
13 |       myModule.data = 'xxxx' //不是修改的模块内部的data
14 |       myModule.foo() //没有改变
15 |     </script>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/模块化/01_modular/04_IIFE模式增强/module4.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * IIFE模式增强 : 引入依赖
 3 |  * 这就是现代模块实现的基石
 4 |  */
 5 | ;(function(window, $) {
 6 |   //数据
 7 |   let data = 'www.baidu.com'
 8 |   //操作数据的函数
 9 |   function foo() {
10 |     //用于暴露有函数
11 |     console.log(`foo() ${data}`)
12 |     $('body').css('background', 'red')
13 |   }
14 |   function bar() {
15 |     //用于暴露有函数
16 |     console.log(`bar() ${data}`)
17 |     otherFun() //内部调用
18 |   }
19 |   function otherFun() {
20 |     //内部私有的函数
21 |     console.log('otherFun()')
22 |   }
23 |   //暴露行为
24 |   window.myModule = { foo, bar }
25 | })(window, jQuery)
26 | 


--------------------------------------------------------------------------------
/模块化/01_modular/04_IIFE模式增强/test4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <title>04_IIFE模式增强</title>
 6 |   </head>
 7 |   <body>
 8 |     <!-- 引入的js必须有一定顺序 -->
 9 |     <script type="text/javascript" src="jquery-1.10.1.js"></script>
10 |     <script type="text/javascript" src="module4.js"></script>
11 |     <script type="text/javascript">
12 |       myModule.foo()
13 |     </script>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/模块化/02_CommonJS-Node/app.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |   1. 定义暴露模块:
 3 |     module.exports = value;
 4 |     exports.xxx = value;
 5 |   2. 引入模块:
 6 |     var module = require(模块名或模块路径);
 7 |  */
 8 | "use strict"
 9 | //引用模块
10 | let module1 = require('./modules/module1')
11 | let module2 = require('./modules/module2')
12 | let module3 = require('./modules/module3')
13 | 
14 | let uniq = require('uniq')
15 | let fs = require('fs')
16 | 
17 | //使用模块
18 | module1.foo()
19 | module2()
20 | module3.foo()
21 | module3.bar()
22 | 
23 | console.log(uniq([1, 3, 1, 4, 3]))
24 | 
25 | fs.readFile('app.js', function (error, data) {
26 |   console.log(data.toString())
27 | })
28 | 


--------------------------------------------------------------------------------
/模块化/02_CommonJS-Node/modules/module1.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * 使用module.exports = value向外暴露一个对象
3 |  */
4 | "use strict"
5 | module.exports = {
6 |   foo() {
7 |     console.log('moudle1 foo()')
8 |   }
9 | }


--------------------------------------------------------------------------------
/模块化/02_CommonJS-Node/modules/module2.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * 使用module.exports = value向外暴露一个函数
3 |  */
4 | "use strict"
5 | module.exports = function () {
6 |   console.log('module2()')
7 | }


--------------------------------------------------------------------------------
/模块化/02_CommonJS-Node/modules/module3.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 使用exports.xxx = value向外暴露一个对象
 3 |  */
 4 | "use strict"
 5 | exports.foo = function () {
 6 |   console.log('module3 foo()')
 7 | }
 8 | 
 9 | exports.bar = function () {
10 |   console.log('module3 bar()')
11 | }


--------------------------------------------------------------------------------
/模块化/02_CommonJS-Node/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "commonjs-node",
3 |   "version": "1.0.0"
4 | }
5 | 


--------------------------------------------------------------------------------
/模块化/03_CommonJS-Browserify/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Title</title>
 6 | </head>
 7 | <body>
 8 |     <!--<script type="text/javascript" src="js/src/app.js"></script>-->
 9 |     <script type="text/javascript" src="js/dist/bundle.js"></script>
10 | </body>
11 | </html>


--------------------------------------------------------------------------------
/模块化/03_CommonJS-Browserify/js/dist/bundle.js:
--------------------------------------------------------------------------------
  1 | (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
  2 | /**
  3 |  1. 定义暴露模块:
  4 |     module.exports = value;
  5 |     exports.xxx = value;
  6 |  2. 引入模块:
  7 |     var module = require(模块名或模块路径);
  8 |  */
  9 | "use strict"
 10 | //引用模块
 11 | let module1 = require('./module1')
 12 | let module2 = require('./module2')
 13 | let module3 = require('./module3')
 14 | 
 15 | let uniq = require('uniq')
 16 | 
 17 | //使用模块
 18 | module1.foo()
 19 | module2()
 20 | module3.foo()
 21 | module3.bar()
 22 | 
 23 | console.log(uniq([1,3,1,4,3]))
 24 | 
 25 | },{"./module1":2,"./module2":3,"./module3":4,"uniq":5}],2:[function(require,module,exports){
 26 | /**
 27 |  * 使用module.exports = value向外暴露一个对象
 28 |  */
 29 | "use strict"
 30 | module.exports = {
 31 |     foo() {
 32 |         console.log('moudle1 foo()')
 33 |     }
 34 | }
 35 | },{}],3:[function(require,module,exports){
 36 | /**
 37 |  * 使用module.exports = value向外暴露一个函数
 38 |  */
 39 | "use strict"
 40 | module.exports = function () {
 41 |     console.log('module2()')
 42 | }
 43 | },{}],4:[function(require,module,exports){
 44 | /**
 45 |  * 使用exports.xxx = value向外暴露一个对象
 46 |  */
 47 | "use strict"
 48 | exports.foo = function () {
 49 |     console.log('module3 foo()')
 50 | }
 51 | 
 52 | exports.bar = function () {
 53 |     console.log('module3 bar()')
 54 | }
 55 | },{}],5:[function(require,module,exports){
 56 | "use strict"
 57 | 
 58 | function unique_pred(list, compare) {
 59 |   var ptr = 1
 60 |     , len = list.length
 61 |     , a=list[0], b=list[0]
 62 |   for(var i=1; i<len; ++i) {
 63 |     b = a
 64 |     a = list[i]
 65 |     if(compare(a, b)) {
 66 |       if(i === ptr) {
 67 |         ptr++
 68 |         continue
 69 |       }
 70 |       list[ptr++] = a
 71 |     }
 72 |   }
 73 |   list.length = ptr
 74 |   return list
 75 | }
 76 | 
 77 | function unique_eq(list) {
 78 |   var ptr = 1
 79 |     , len = list.length
 80 |     , a=list[0], b = list[0]
 81 |   for(var i=1; i<len; ++i, b=a) {
 82 |     b = a
 83 |     a = list[i]
 84 |     if(a !== b) {
 85 |       if(i === ptr) {
 86 |         ptr++
 87 |         continue
 88 |       }
 89 |       list[ptr++] = a
 90 |     }
 91 |   }
 92 |   list.length = ptr
 93 |   return list
 94 | }
 95 | 
 96 | function unique(list, compare, sorted) {
 97 |   if(list.length === 0) {
 98 |     return list
 99 |   }
100 |   if(compare) {
101 |     if(!sorted) {
102 |       list.sort(compare)
103 |     }
104 |     return unique_pred(list, compare)
105 |   }
106 |   if(!sorted) {
107 |     list.sort()
108 |   }
109 |   return unique_eq(list)
110 | }
111 | 
112 | module.exports = unique
113 | 
114 | },{}]},{},[1]);
115 | 


--------------------------------------------------------------------------------
/模块化/03_CommonJS-Browserify/js/src/app.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |   1. 定义暴露模块:
 3 |     module.exports = value;
 4 |     exports.xxx = value;
 5 |   2. 引入模块:
 6 |     var module = require(模块名或模块路径);
 7 | */
 8 | //引用模块
 9 | let module1 = require('./module1')
10 | let module2 = require('./module2')
11 | let module3 = require('./module3')
12 | 
13 | let uniq = require('uniq')
14 | 
15 | //使用模块
16 | module1.foo()
17 | module2()
18 | module3.foo()
19 | module3.bar()
20 | 
21 | console.log(uniq([1, 3, 1, 4, 3]))
22 | 


--------------------------------------------------------------------------------
/模块化/03_CommonJS-Browserify/js/src/module1.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * 使用module.exports = value向外暴露一个对象
3 |  */
4 | module.exports = {
5 |   foo() {
6 |     console.log('moudle1 foo()')
7 |   }
8 | }


--------------------------------------------------------------------------------
/模块化/03_CommonJS-Browserify/js/src/module2.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * 使用module.exports = value向外暴露一个函数
3 |  */
4 | module.exports = function () {
5 |   console.log('module2()')
6 | }


--------------------------------------------------------------------------------
/模块化/03_CommonJS-Browserify/js/src/module3.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 使用exports.xxx = value向外暴露一个对象
 3 |  */
 4 | exports.foo = function () {
 5 |   console.log('module3 foo()')
 6 | }
 7 | 
 8 | exports.bar = function () {
 9 |   console.log('module3 bar()')
10 | }


--------------------------------------------------------------------------------
/模块化/03_CommonJS-Browserify/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "commonjs-browserify",
3 |   "version": "1.0.0",
4 |   "dependencies": {
5 |     "uniq": "^1.0.1"
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/模块化/04_AMD-RequireJS/01_NoAMD/js/main.js:
--------------------------------------------------------------------------------
1 | (function (alerter) {
2 |   alerter.showMsg()
3 | })(alerter)


--------------------------------------------------------------------------------
/模块化/04_AMD-RequireJS/01_NoAMD/js/modules/alerter.js:
--------------------------------------------------------------------------------
1 | (function (window, dataService) {
2 |   let name = 'Tom'
3 | 
4 |   function showMsg() {
5 |     alert(dataService.getMsg() + ', ' + name)
6 |   }
7 | 
8 |   window.alerter = {showMsg}
9 | })(window, dataService)


--------------------------------------------------------------------------------
/模块化/04_AMD-RequireJS/01_NoAMD/js/modules/dataService.js:
--------------------------------------------------------------------------------
 1 | ;(function(window) {
 2 |   let msg = 'www.baidu.com'
 3 | 
 4 |   function getMsg() {
 5 |     return msg.toUpperCase()
 6 |   }
 7 | 
 8 |   window.dataService = { getMsg }
 9 | })(window)
10 | 


--------------------------------------------------------------------------------
/模块化/04_AMD-RequireJS/01_NoAMD/test1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Modular Demo 1</title>
 5 |   </head>
 6 |   <body>
 7 |     <div><h1>Modular Demo 1: 未使用AMD(require.js)</h1></div>
 8 |     <script type="text/javascript" src="js/modules/dataService.js"></script>
 9 |     <script type="text/javascript" src="js/modules/alerter.js"></script>
10 |     <script type="text/javascript" src="js/main.js"></script>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/模块化/04_AMD-RequireJS/02_RequireJS/index2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Modular Demo</title>
 5 |   </head>
 6 |   <body>
 7 |     <!-- 引入require.js并指定js主文件的入口 -->
 8 |     <script data-main="js/main" src="js/libs/require.js"></script>
 9 |   </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/模块化/04_AMD-RequireJS/02_RequireJS/js/main.js:
--------------------------------------------------------------------------------
 1 | ;(function() {
 2 |   require.config({
 3 |     baseUrl: 'js/', //基本路径 出发点在根目录下
 4 |     paths: {
 5 |       //映射: 模块标识名: 路径
 6 |       alerter: './modules/alerter', //此处不能写成alerter.js,会报错
 7 |       dataService: './modules/dataService'
 8 |     }
 9 |   })
10 |   require(['alerter'], function(alerter) {
11 |     alerter.showMsg()
12 |   })
13 | })()
14 | 


--------------------------------------------------------------------------------
/模块化/04_AMD-RequireJS/02_RequireJS/js/modules/alerter.js:
--------------------------------------------------------------------------------
 1 | // 定义有依赖的模块
 2 | define(['dataService'], function(dataService) {
 3 |   let name = 'Tom'
 4 |   function showMsg() {
 5 |     alert(dataService.getMsg() + ', ' + name)
 6 |   }
 7 |   // 暴露模块
 8 |   return { showMsg }
 9 | })
10 | 


--------------------------------------------------------------------------------
/模块化/04_AMD-RequireJS/02_RequireJS/js/modules/dataService.js:
--------------------------------------------------------------------------------
1 | // 定义没有依赖的模块
2 | define(function() {
3 |   let msg = 'www.baidu.com'
4 |   function getMsg() {
5 |     return msg.toUpperCase()
6 |   }
7 |   return { getMsg } // 暴露模块
8 | })
9 | 


--------------------------------------------------------------------------------
/模块化/04_AMD-RequireJS/03_RequireJS2/index2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Modular Demo</title>
 5 |   </head>
 6 |   <body>
 7 |     <!-- 引入require.js并指定js主文件的入口 -->
 8 |     <script data-main="js/main" src="js/libs/require.js"></script>
 9 |   </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/模块化/04_AMD-RequireJS/03_RequireJS2/js/main.js:
--------------------------------------------------------------------------------
 1 | ;(function() {
 2 |   require.config({
 3 |     baseUrl: 'js/', //基本路径 出发点在根目录下
 4 |     paths: {
 5 |       //自定义模块
 6 |       alerter: './modules/alerter', //此处不能写成alerter.js,会报错
 7 |       dataService: './modules/dataService',
 8 |       // 第三方库模块
 9 |       jquery: './libs/jquery-1.10.1' //注意：写成jQuery会报错
10 |     }
11 |   })
12 |   require(['alerter'], function(alerter) {
13 |     alerter.showMsg()
14 |   })
15 | })()
16 | 


--------------------------------------------------------------------------------
/模块化/04_AMD-RequireJS/03_RequireJS2/js/modules/alerter.js:
--------------------------------------------------------------------------------
 1 | // 定义有依赖的模块
 2 | define(['dataService', 'jquery'], function(dataService, $) {
 3 |   let name = 'Tom'
 4 |   function showMsg() {
 5 |     alert(dataService.getMsg() + ', ' + name)
 6 |   }
 7 |   $('body').css('background', 'green')
 8 |   // 暴露模块
 9 |   return { showMsg }
10 | })
11 | 


--------------------------------------------------------------------------------
/模块化/04_AMD-RequireJS/03_RequireJS2/js/modules/dataService.js:
--------------------------------------------------------------------------------
1 | // 定义没有依赖的模块
2 | define(function() {
3 |   let msg = 'www.baidu.com'
4 |   function getMsg() {
5 |     return msg.toUpperCase()
6 |   }
7 |   return { getMsg } // 暴露模块
8 | })
9 | 


--------------------------------------------------------------------------------
/模块化/05_CMD-SeaJS/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Title</title>
 6 | </head>
 7 | <body>
 8 | <!--
 9 | 使用seajs:
10 |   1. 引入sea.js库
11 |   2. 如何定义导出模块 :
12 |     define()
13 |     exports
14 |     module.exports
15 |   3. 如何依赖模块:
16 |     require()
17 |   4. 如何使用模块:
18 |     seajs.use()
19 | -->
20 | <script type="text/javascript" src="js/libs/sea.js"></script>
21 | <script type="text/javascript">
22 |   seajs.use('./js/modules/main')
23 | </script>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/模块化/05_CMD-SeaJS/js/libs/sea.js:
--------------------------------------------------------------------------------
1 | /*! Sea.js 2.2.3 | seajs.org/LICENSE.md */
2 | !function(a,b){function c(a){return function(b){return{}.toString.call(b)=="[object "+a+"]"}}function d(){return B++}function e(a){return a.match(E)[0]}function f(a){for(a=a.replace(F,"/");a.match(G);)a=a.replace(G,"/");return a=a.replace(H,"$1/")}function g(a){var b=a.length-1,c=a.charAt(b);return"#"===c?a.substring(0,b):".js"===a.substring(b-2)||a.indexOf("?")>0||".css"===a.substring(b-3)||"/"===c?a:a+".js"}function h(a){var b=v.alias;return b&&x(b[a])?b[a]:a}function i(a){var b=v.paths,c;return b&&(c=a.match(I))&&x(b[c[1]])&&(a=b[c[1]]+c[2]),a}function j(a){var b=v.vars;return b&&a.indexOf("{")>-1&&(a=a.replace(J,function(a,c){return x(b[c])?b[c]:a})),a}function k(a){var b=v.map,c=a;if(b)for(var d=0,e=b.length;e>d;d++){var f=b[d];if(c=z(f)?f(a)||a:a.replace(f[0],f[1]),c!==a)break}return c}function l(a,b){var c,d=a.charAt(0);if(K.test(a))c=a;else if("."===d)c=f((b?e(b):v.cwd)+a);else if("/"===d){var g=v.cwd.match(L);c=g?g[0]+a.substring(1):a}else c=v.base+a;return 0===c.indexOf("//")&&(c=location.protocol+c),c}function m(a,b){if(!a)return"";a=h(a),a=i(a),a=j(a),a=g(a);var c=l(a,b);return c=k(c)}function n(a){return a.hasAttribute?a.src:a.getAttribute("src",4)}function o(a,b,c,d){var e=T.test(a),f=M.createElement(e?"link":"script");c&&(f.charset=c),A(d)||f.setAttribute("crossorigin",d),p(f,b,e,a),e?(f.rel="stylesheet",f.href=a):(f.async=!0,f.src=a),U=f,S?R.insertBefore(f,S):R.appendChild(f),U=null}function p(a,c,d,e){function f(){a.onload=a.onerror=a.onreadystatechange=null,d||v.debug||R.removeChild(a),a=null,c()}var g="onload"in a;return!d||!W&&g?(g?(a.onload=f,a.onerror=function(){D("error",{uri:e,node:a}),f()}):a.onreadystatechange=function(){/loaded|complete/.test(a.readyState)&&f()},b):(setTimeout(function(){q(a,c)},1),b)}function q(a,b){var c=a.sheet,d;if(W)c&&(d=!0);else if(c)try{c.cssRules&&(d=!0)}catch(e){"NS_ERROR_DOM_SECURITY_ERR"===e.name&&(d=!0)}setTimeout(function(){d?b():q(a,b)},20)}function r(){if(U)return U;if(V&&"interactive"===V.readyState)return V;for(var a=R.getElementsByTagName("script"),b=a.length-1;b>=0;b--){var c=a[b];if("interactive"===c.readyState)return V=c}}function s(a){var b=[];return a.replace(Y,"").replace(X,function(a,c,d){d&&b.push(d)}),b}function t(a,b){this.uri=a,this.dependencies=b||[],this.exports=null,this.status=0,this._waitings={},this._remain=0}if(!a.seajs){var u=a.seajs={version:"2.2.3"},v=u.data={},w=c("Object"),x=c("String"),y=Array.isArray||c("Array"),z=c("Function"),A=c("Undefined"),B=0,C=v.events={};u.on=function(a,b){var c=C[a]||(C[a]=[]);return c.push(b),u},u.off=function(a,b){if(!a&&!b)return C=v.events={},u;var c=C[a];if(c)if(b)for(var d=c.length-1;d>=0;d--)c[d]===b&&c.splice(d,1);else delete C[a];return u};var D=u.emit=function(a,b){var c=C[a],d;if(c)for(c=c.slice();d=c.shift();)d(b);return u},E=/[^?#]*\//,F=/\/\.\//g,G=/\/[^/]+\/\.\.\//,H=/([^:/])\/\//g,I=/^([^/:]+)(\/.+)$/,J=/{([^{]+)}/g,K=/^\/\/.|:\//,L=/^.*?\/\/.*?\//,M=document,N=e(M.URL),O=M.scripts,P=M.getElementById("seajsnode")||O[O.length-1],Q=e(n(P)||N);u.resolve=m;var R=M.head||M.getElementsByTagName("head")[0]||M.documentElement,S=R.getElementsByTagName("base")[0],T=/\.css(?:\?|$)/i,U,V,W=+navigator.userAgent.replace(/.*(?:AppleWebKit|AndroidWebKit)\/(\d+).*/,"$1")<536;u.request=o;var X=/"(?:\\"|[^"])*"|'(?:\\'|[^'])*'|\/\*[\S\s]*?\*\/|\/(?:\\\/|[^\/\r\n])+\/(?=[^\/])|\/\/.*|\.\s*require|(?:^|[^$])\brequire\s*\(\s*(["'])(.+?)\1\s*\)/g,Y=/\\\\/g,Z=u.cache={},$,_={},ab={},bb={},cb=t.STATUS={FETCHING:1,SAVED:2,LOADING:3,LOADED:4,EXECUTING:5,EXECUTED:6};t.prototype.resolve=function(){for(var a=this,b=a.dependencies,c=[],d=0,e=b.length;e>d;d++)c[d]=t.resolve(b[d],a.uri);return c},t.prototype.load=function(){var a=this;if(!(a.status>=cb.LOADING)){a.status=cb.LOADING;var c=a.resolve();D("load",c);for(var d=a._remain=c.length,e,f=0;d>f;f++)e=t.get(c[f]),e.status<cb.LOADED?e._waitings[a.uri]=(e._waitings[a.uri]||0)+1:a._remain--;if(0===a._remain)return a.onload(),b;var g={};for(f=0;d>f;f++)e=Z[c[f]],e.status<cb.FETCHING?e.fetch(g):e.status===cb.SAVED&&e.load();for(var h in g)g.hasOwnProperty(h)&&g[h]()}},t.prototype.onload=function(){var a=this;a.status=cb.LOADED,a.callback&&a.callback();var b=a._waitings,c,d;for(c in b)b.hasOwnProperty(c)&&(d=Z[c],d._remain-=b[c],0===d._remain&&d.onload());delete a._waitings,delete a._remain},t.prototype.fetch=function(a){function c(){u.request(g.requestUri,g.onRequest,g.charset,g.crossorigin)}function d(){delete _[h],ab[h]=!0,$&&(t.save(f,$),$=null);var a,b=bb[h];for(delete bb[h];a=b.shift();)a.load()}var e=this,f=e.uri;e.status=cb.FETCHING;var g={uri:f};D("fetch",g);var h=g.requestUri||f;return!h||ab[h]?(e.load(),b):_[h]?(bb[h].push(e),b):(_[h]=!0,bb[h]=[e],D("request",g={uri:f,requestUri:h,onRequest:d,charset:z(v.charset)?v.charset(h):v.charset,crossorigin:z(v.crossorigin)?v.crossorigin(h):v.crossorigin}),g.requested||(a?a[g.requestUri]=c:c()),b)},t.prototype.exec=function(){function a(b){return t.get(a.resolve(b)).exec()}var c=this;if(c.status>=cb.EXECUTING)return c.exports;c.status=cb.EXECUTING;var e=c.uri;a.resolve=function(a){return t.resolve(a,e)},a.async=function(b,c){return t.use(b,c,e+"_async_"+d()),a};var f=c.factory,g=z(f)?f(a,c.exports={},c):f;return g===b&&(g=c.exports),delete c.factory,c.exports=g,c.status=cb.EXECUTED,D("exec",c),g},t.resolve=function(a,b){var c={id:a,refUri:b};return D("resolve",c),c.uri||u.resolve(c.id,b)},t.define=function(a,c,d){var e=arguments.length;1===e?(d=a,a=b):2===e&&(d=c,y(a)?(c=a,a=b):c=b),!y(c)&&z(d)&&(c=s(""+d));var f={id:a,uri:t.resolve(a),deps:c,factory:d};if(!f.uri&&M.attachEvent){var g=r();g&&(f.uri=g.src)}D("define",f),f.uri?t.save(f.uri,f):$=f},t.save=function(a,b){var c=t.get(a);c.status<cb.SAVED&&(c.id=b.id||a,c.dependencies=b.deps||[],c.factory=b.factory,c.status=cb.SAVED)},t.get=function(a,b){return Z[a]||(Z[a]=new t(a,b))},t.use=function(b,c,d){var e=t.get(d,y(b)?b:[b]);e.callback=function(){for(var b=[],d=e.resolve(),f=0,g=d.length;g>f;f++)b[f]=Z[d[f]].exec();c&&c.apply(a,b),delete e.callback},e.load()},t.preload=function(a){var b=v.preload,c=b.length;c?t.use(b,function(){b.splice(0,c),t.preload(a)},v.cwd+"_preload_"+d()):a()},u.use=function(a,b){return t.preload(function(){t.use(a,b,v.cwd+"_use_"+d())}),u},t.define.cmd={},a.define=t.define,u.Module=t,v.fetchedList=ab,v.cid=d,u.require=function(a){var b=t.get(t.resolve(a));return b.status<cb.EXECUTING&&(b.onload(),b.exec()),b.exports};var db=/^(.+?\/)(\?\?)?(seajs\/)+/;v.base=(Q.match(db)||["",Q])[1],v.dir=Q,v.cwd=N,v.charset="utf-8",v.preload=function(){var a=[],b=location.search.replace(/(seajs-\w+)(&|$)/g,"$1=1$2");return b+=" "+M.cookie,b.replace(/(seajs-\w+)=1/g,function(b,c){a.push(c)}),a}(),u.config=function(a){for(var b in a){var c=a[b],d=v[b];if(d&&w(d))for(var e in c)d[e]=c[e];else y(d)?c=d.concat(c):"base"===b&&("/"!==c.slice(-1)&&(c+="/"),c=l(c)),v[b]=c}return D("config",a),u}}}(this);
3 | 


--------------------------------------------------------------------------------
/模块化/05_CMD-SeaJS/js/modules/main.js:
--------------------------------------------------------------------------------
1 | define(function (require) {
2 |   var m1 = require('./module1')
3 |   var m4 = require('./module4')
4 |   m1.show()
5 |   m4.show()
6 | })


--------------------------------------------------------------------------------
/模块化/05_CMD-SeaJS/js/modules/module1.js:
--------------------------------------------------------------------------------
 1 | define(function (require, exports, module) {
 2 |   //内部变量数据
 3 |   var data = 'atguigu.com'
 4 |   //内部函数
 5 |   function show() {
 6 |     console.log('module1 show() ' + data)
 7 |   }
 8 | 
 9 |   //向外暴露
10 |   exports.show = show
11 | })


--------------------------------------------------------------------------------
/模块化/05_CMD-SeaJS/js/modules/module2.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {
2 |   module.exports = {
3 |     msg: 'I Will Back'
4 |   }
5 | })


--------------------------------------------------------------------------------
/模块化/05_CMD-SeaJS/js/modules/module3.js:
--------------------------------------------------------------------------------
1 | define(function(require, exports, module) {
2 |   const API_KEY = 'abc123'
3 |   exports.API_KEY = API_KEY
4 | })
5 | 


--------------------------------------------------------------------------------
/模块化/05_CMD-SeaJS/js/modules/module4.js:
--------------------------------------------------------------------------------
 1 | define(function (require, exports, module) {
 2 |   //引入依赖模块(同步)
 3 |   var module2 = require('./module2')
 4 | 
 5 |   function show() {
 6 |     console.log('module4 show() ' + module2.msg)
 7 |   }
 8 | 
 9 |   exports.show = show
10 |   //引入依赖模块(异步)
11 |   require.async('./module3', function (m3) {
12 |     console.log('异步引入依赖模块3  ' + m3.API_KEY)
13 |   })
14 | })


--------------------------------------------------------------------------------
/模块化/06_ES6_Babel_Browserify/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <title>06_ES6_Babel_Browserify</title>
 6 |   </head>
 7 |   <body>
 8 |     <script type="text/javascript" src="js/lib/bundle.js"></script>
 9 |   </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/模块化/06_ES6_Babel_Browserify/js/lib/app.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var _module = require('./module1');
 4 | 
 5 | var _module2 = require('./module2');
 6 | 
 7 | var _module3 = require('./module3');
 8 | 
 9 | var _module4 = _interopRequireDefault(_module3);
10 | 
11 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12 | 
13 | (0, _module.foo)();
14 | (0, _module.bar)();
15 | (0, _module2.fun1)();
16 | (0, _module2.fun2)();
17 | (0, _module4.default)();


--------------------------------------------------------------------------------
/模块化/06_ES6_Babel_Browserify/js/lib/bundle.js:
--------------------------------------------------------------------------------
 1 | (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
 2 | 'use strict';
 3 | 
 4 | var _module = require('./module1');
 5 | 
 6 | var _module2 = require('./module2');
 7 | 
 8 | var _module3 = require('./module3');
 9 | 
10 | var _module4 = _interopRequireDefault(_module3);
11 | 
12 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13 | 
14 | (0, _module.foo)();
15 | (0, _module.bar)();
16 | (0, _module2.fun1)();
17 | (0, _module2.fun2)();
18 | (0, _module4.default)();
19 | },{"./module1":2,"./module2":3,"./module3":4}],2:[function(require,module,exports){
20 | 'use strict';
21 | 
22 | Object.defineProperty(exports, "__esModule", {
23 |   value: true
24 | });
25 | exports.foo = foo;
26 | exports.bar = bar;
27 | // 分别暴露
28 | function foo() {
29 |   console.log('foo() module1');
30 | }
31 | function bar() {
32 |   console.log('bar() module1');
33 | }
34 | },{}],3:[function(require,module,exports){
35 | 'use strict';
36 | 
37 | Object.defineProperty(exports, "__esModule", {
38 |   value: true
39 | });
40 | // 统一暴露
41 | function fun1() {
42 |   console.log('fun1() module2');
43 | }
44 | function fun2() {
45 |   console.log('fun2() module2');
46 | }
47 | exports.fun1 = fun1;
48 | exports.fun2 = fun2;
49 | },{}],4:[function(require,module,exports){
50 | 'use strict';
51 | 
52 | Object.defineProperty(exports, "__esModule", {
53 |   value: true
54 | });
55 | 
56 | // 默认暴露 可以暴露任意数据类项，暴露什么数据，接收到就是什么数据
57 | exports.default = function () {
58 |   console.log('默认暴露');
59 | };
60 | },{}]},{},[1]);
61 | 


--------------------------------------------------------------------------------
/模块化/06_ES6_Babel_Browserify/js/lib/module1.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | exports.foo = foo;
 7 | exports.bar = bar;
 8 | // 分别暴露
 9 | function foo() {
10 |   console.log('foo() module1');
11 | }
12 | function bar() {
13 |   console.log('bar() module1');
14 | }


--------------------------------------------------------------------------------
/模块化/06_ES6_Babel_Browserify/js/lib/module2.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | // 统一暴露
 7 | function fun1() {
 8 |   console.log('fun1() module2');
 9 | }
10 | function fun2() {
11 |   console.log('fun2() module2');
12 | }
13 | exports.fun1 = fun1;
14 | exports.fun2 = fun2;


--------------------------------------------------------------------------------
/模块化/06_ES6_Babel_Browserify/js/lib/module3.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | 
 7 | // 默认暴露 可以暴露任意数据类项，暴露什么数据，接收到就是什么数据
 8 | exports.default = function () {
 9 |   console.log('默认暴露');
10 | };


--------------------------------------------------------------------------------
/模块化/06_ES6_Babel_Browserify/js/src/app.js:
--------------------------------------------------------------------------------
 1 | import { foo, bar } from './module1'
 2 | import { fun1, fun2 } from './module2'
 3 | import module3 from './module3'
 4 | 
 5 | foo()
 6 | bar()
 7 | fun1()
 8 | fun2()
 9 | module3()
10 | 


--------------------------------------------------------------------------------
/模块化/06_ES6_Babel_Browserify/js/src/module1.js:
--------------------------------------------------------------------------------
1 | // 分别暴露
2 | export function foo() {
3 |   console.log('foo() module1')
4 | }
5 | export function bar() {
6 |   console.log('bar() module1')
7 | }
8 | 


--------------------------------------------------------------------------------
/模块化/06_ES6_Babel_Browserify/js/src/module2.js:
--------------------------------------------------------------------------------
1 | // 统一暴露
2 | function fun1() {
3 |   console.log('fun1() module2')
4 | }
5 | function fun2() {
6 |   console.log('fun2() module2')
7 | }
8 | export { fun1, fun2 }
9 | 


--------------------------------------------------------------------------------
/模块化/06_ES6_Babel_Browserify/js/src/module3.js:
--------------------------------------------------------------------------------
1 | // 默认暴露 可以暴露任意数据类项，暴露什么数据，接收到就是什么数据
2 | export default () => {
3 |   console.log('默认暴露')
4 | }
5 | 


--------------------------------------------------------------------------------
/模块化/06_ES6_Babel_Browserify/package-lock.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "es6-babel-browserify",
  3 |   "version": "1.0.0",
  4 |   "lockfileVersion": 1,
  5 |   "requires": true,
  6 |   "dependencies": {
  7 |     "ansi-regex": {
  8 |       "version": "2.1.1",
  9 |       "resolved": "http://registry.npm.taobao.org/ansi-regex/download/ansi-regex-2.1.1.tgz",
 10 |       "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
 11 |       "dev": true
 12 |     },
 13 |     "ansi-styles": {
 14 |       "version": "2.2.1",
 15 |       "resolved": "http://registry.npm.taobao.org/ansi-styles/download/ansi-styles-2.2.1.tgz",
 16 |       "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
 17 |       "dev": true
 18 |     },
 19 |     "babel-code-frame": {
 20 |       "version": "6.26.0",
 21 |       "resolved": "http://registry.npm.taobao.org/babel-code-frame/download/babel-code-frame-6.26.0.tgz",
 22 |       "integrity": "sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=",
 23 |       "dev": true,
 24 |       "requires": {
 25 |         "chalk": "^1.1.3",
 26 |         "esutils": "^2.0.2",
 27 |         "js-tokens": "^3.0.2"
 28 |       }
 29 |     },
 30 |     "babel-helper-call-delegate": {
 31 |       "version": "6.24.1",
 32 |       "resolved": "http://registry.npm.taobao.org/babel-helper-call-delegate/download/babel-helper-call-delegate-6.24.1.tgz",
 33 |       "integrity": "sha1-7Oaqzdx25Bw0YfiL/Fdb0Nqi340=",
 34 |       "dev": true,
 35 |       "requires": {
 36 |         "babel-helper-hoist-variables": "^6.24.1",
 37 |         "babel-runtime": "^6.22.0",
 38 |         "babel-traverse": "^6.24.1",
 39 |         "babel-types": "^6.24.1"
 40 |       }
 41 |     },
 42 |     "babel-helper-define-map": {
 43 |       "version": "6.26.0",
 44 |       "resolved": "http://registry.npm.taobao.org/babel-helper-define-map/download/babel-helper-define-map-6.26.0.tgz",
 45 |       "integrity": "sha1-pfVtq0GiX5fstJjH66ypgZ+Vvl8=",
 46 |       "dev": true,
 47 |       "requires": {
 48 |         "babel-helper-function-name": "^6.24.1",
 49 |         "babel-runtime": "^6.26.0",
 50 |         "babel-types": "^6.26.0",
 51 |         "lodash": "^4.17.4"
 52 |       }
 53 |     },
 54 |     "babel-helper-function-name": {
 55 |       "version": "6.24.1",
 56 |       "resolved": "http://registry.npm.taobao.org/babel-helper-function-name/download/babel-helper-function-name-6.24.1.tgz",
 57 |       "integrity": "sha1-00dbjAPtmCQqJbSDUasYOZ01gKk=",
 58 |       "dev": true,
 59 |       "requires": {
 60 |         "babel-helper-get-function-arity": "^6.24.1",
 61 |         "babel-runtime": "^6.22.0",
 62 |         "babel-template": "^6.24.1",
 63 |         "babel-traverse": "^6.24.1",
 64 |         "babel-types": "^6.24.1"
 65 |       }
 66 |     },
 67 |     "babel-helper-get-function-arity": {
 68 |       "version": "6.24.1",
 69 |       "resolved": "http://registry.npm.taobao.org/babel-helper-get-function-arity/download/babel-helper-get-function-arity-6.24.1.tgz",
 70 |       "integrity": "sha1-j3eCqpNAfEHTqlCQj4mwMbG2hT0=",
 71 |       "dev": true,
 72 |       "requires": {
 73 |         "babel-runtime": "^6.22.0",
 74 |         "babel-types": "^6.24.1"
 75 |       }
 76 |     },
 77 |     "babel-helper-hoist-variables": {
 78 |       "version": "6.24.1",
 79 |       "resolved": "http://registry.npm.taobao.org/babel-helper-hoist-variables/download/babel-helper-hoist-variables-6.24.1.tgz",
 80 |       "integrity": "sha1-HssnaJydJVE+rbyZFKc/VAi+enY=",
 81 |       "dev": true,
 82 |       "requires": {
 83 |         "babel-runtime": "^6.22.0",
 84 |         "babel-types": "^6.24.1"
 85 |       }
 86 |     },
 87 |     "babel-helper-optimise-call-expression": {
 88 |       "version": "6.24.1",
 89 |       "resolved": "http://registry.npm.taobao.org/babel-helper-optimise-call-expression/download/babel-helper-optimise-call-expression-6.24.1.tgz",
 90 |       "integrity": "sha1-96E0J7qfc/j0+pk8VKl4gtEkQlc=",
 91 |       "dev": true,
 92 |       "requires": {
 93 |         "babel-runtime": "^6.22.0",
 94 |         "babel-types": "^6.24.1"
 95 |       }
 96 |     },
 97 |     "babel-helper-regex": {
 98 |       "version": "6.26.0",
 99 |       "resolved": "http://registry.npm.taobao.org/babel-helper-regex/download/babel-helper-regex-6.26.0.tgz",
100 |       "integrity": "sha1-MlxZ+QL4LyS3T6zu0DY5VPZJXnI=",
101 |       "dev": true,
102 |       "requires": {
103 |         "babel-runtime": "^6.26.0",
104 |         "babel-types": "^6.26.0",
105 |         "lodash": "^4.17.4"
106 |       }
107 |     },
108 |     "babel-helper-replace-supers": {
109 |       "version": "6.24.1",
110 |       "resolved": "http://registry.npm.taobao.org/babel-helper-replace-supers/download/babel-helper-replace-supers-6.24.1.tgz",
111 |       "integrity": "sha1-v22/5Dk40XNpohPKiov3S2qQqxo=",
112 |       "dev": true,
113 |       "requires": {
114 |         "babel-helper-optimise-call-expression": "^6.24.1",
115 |         "babel-messages": "^6.23.0",
116 |         "babel-runtime": "^6.22.0",
117 |         "babel-template": "^6.24.1",
118 |         "babel-traverse": "^6.24.1",
119 |         "babel-types": "^6.24.1"
120 |       }
121 |     },
122 |     "babel-messages": {
123 |       "version": "6.23.0",
124 |       "resolved": "http://registry.npm.taobao.org/babel-messages/download/babel-messages-6.23.0.tgz",
125 |       "integrity": "sha1-8830cDhYA1sqKVHG7F7fbGLyYw4=",
126 |       "dev": true,
127 |       "requires": {
128 |         "babel-runtime": "^6.22.0"
129 |       }
130 |     },
131 |     "babel-plugin-check-es2015-constants": {
132 |       "version": "6.22.0",
133 |       "resolved": "http://registry.npm.taobao.org/babel-plugin-check-es2015-constants/download/babel-plugin-check-es2015-constants-6.22.0.tgz",
134 |       "integrity": "sha1-NRV7EBQm/S/9PaP3XH0ekYNbv4o=",
135 |       "dev": true,
136 |       "requires": {
137 |         "babel-runtime": "^6.22.0"
138 |       }
139 |     },
140 |     "babel-plugin-transform-es2015-arrow-functions": {
141 |       "version": "6.22.0",
142 |       "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-es2015-arrow-functions/download/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz",
143 |       "integrity": "sha1-RSaSy3EdX3ncf4XkQM5BufJE0iE=",
144 |       "dev": true,
145 |       "requires": {
146 |         "babel-runtime": "^6.22.0"
147 |       }
148 |     },
149 |     "babel-plugin-transform-es2015-block-scoped-functions": {
150 |       "version": "6.22.0",
151 |       "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-es2015-block-scoped-functions/download/babel-plugin-transform-es2015-block-scoped-functions-6.22.0.tgz",
152 |       "integrity": "sha1-u8UbSflk1wy42OC5ToICRs46YUE=",
153 |       "dev": true,
154 |       "requires": {
155 |         "babel-runtime": "^6.22.0"
156 |       }
157 |     },
158 |     "babel-plugin-transform-es2015-block-scoping": {
159 |       "version": "6.26.0",
160 |       "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-es2015-block-scoping/download/babel-plugin-transform-es2015-block-scoping-6.26.0.tgz",
161 |       "integrity": "sha1-1w9SmcEwjQXBL0Y4E7CgnnOxiV8=",
162 |       "dev": true,
163 |       "requires": {
164 |         "babel-runtime": "^6.26.0",
165 |         "babel-template": "^6.26.0",
166 |         "babel-traverse": "^6.26.0",
167 |         "babel-types": "^6.26.0",
168 |         "lodash": "^4.17.4"
169 |       }
170 |     },
171 |     "babel-plugin-transform-es2015-classes": {
172 |       "version": "6.24.1",
173 |       "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-es2015-classes/download/babel-plugin-transform-es2015-classes-6.24.1.tgz",
174 |       "integrity": "sha1-WkxYpQyclGHlZLSyo7+ryXolhNs=",
175 |       "dev": true,
176 |       "requires": {
177 |         "babel-helper-define-map": "^6.24.1",
178 |         "babel-helper-function-name": "^6.24.1",
179 |         "babel-helper-optimise-call-expression": "^6.24.1",
180 |         "babel-helper-replace-supers": "^6.24.1",
181 |         "babel-messages": "^6.23.0",
182 |         "babel-runtime": "^6.22.0",
183 |         "babel-template": "^6.24.1",
184 |         "babel-traverse": "^6.24.1",
185 |         "babel-types": "^6.24.1"
186 |       }
187 |     },
188 |     "babel-plugin-transform-es2015-computed-properties": {
189 |       "version": "6.24.1",
190 |       "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-es2015-computed-properties/download/babel-plugin-transform-es2015-computed-properties-6.24.1.tgz",
191 |       "integrity": "sha1-b+Ko0WiV1WNPTNmZttNICjCBWbM=",
192 |       "dev": true,
193 |       "requires": {
194 |         "babel-runtime": "^6.22.0",
195 |         "babel-template": "^6.24.1"
196 |       }
197 |     },
198 |     "babel-plugin-transform-es2015-destructuring": {
199 |       "version": "6.23.0",
200 |       "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-es2015-destructuring/download/babel-plugin-transform-es2015-destructuring-6.23.0.tgz",
201 |       "integrity": "sha1-mXux8auWf2gtKwh2/jWNYOdlxW0=",
202 |       "dev": true,
203 |       "requires": {
204 |         "babel-runtime": "^6.22.0"
205 |       }
206 |     },
207 |     "babel-plugin-transform-es2015-duplicate-keys": {
208 |       "version": "6.24.1",
209 |       "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-es2015-duplicate-keys/download/babel-plugin-transform-es2015-duplicate-keys-6.24.1.tgz",
210 |       "integrity": "sha1-c+s9MQypaePvnskcU3QabxV2Qj4=",
211 |       "dev": true,
212 |       "requires": {
213 |         "babel-runtime": "^6.22.0",
214 |         "babel-types": "^6.24.1"
215 |       }
216 |     },
217 |     "babel-plugin-transform-es2015-for-of": {
218 |       "version": "6.23.0",
219 |       "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-es2015-for-of/download/babel-plugin-transform-es2015-for-of-6.23.0.tgz",
220 |       "integrity": "sha1-9HyVsrYT3x0+zC/bdXNiPHUkhpE=",
221 |       "dev": true,
222 |       "requires": {
223 |         "babel-runtime": "^6.22.0"
224 |       }
225 |     },
226 |     "babel-plugin-transform-es2015-function-name": {
227 |       "version": "6.24.1",
228 |       "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-es2015-function-name/download/babel-plugin-transform-es2015-function-name-6.24.1.tgz",
229 |       "integrity": "sha1-g0yJhTvDaxrw86TF26qU/Y6sqos=",
230 |       "dev": true,
231 |       "requires": {
232 |         "babel-helper-function-name": "^6.24.1",
233 |         "babel-runtime": "^6.22.0",
234 |         "babel-types": "^6.24.1"
235 |       }
236 |     },
237 |     "babel-plugin-transform-es2015-literals": {
238 |       "version": "6.22.0",
239 |       "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-es2015-literals/download/babel-plugin-transform-es2015-literals-6.22.0.tgz",
240 |       "integrity": "sha1-T1SgLWzWbPkVKAAZox0xklN3yi4=",
241 |       "dev": true,
242 |       "requires": {
243 |         "babel-runtime": "^6.22.0"
244 |       }
245 |     },
246 |     "babel-plugin-transform-es2015-modules-amd": {
247 |       "version": "6.24.1",
248 |       "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-es2015-modules-amd/download/babel-plugin-transform-es2015-modules-amd-6.24.1.tgz",
249 |       "integrity": "sha1-Oz5UAXI5hC1tGcMBHEvS8AoA0VQ=",
250 |       "dev": true,
251 |       "requires": {
252 |         "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
253 |         "babel-runtime": "^6.22.0",
254 |         "babel-template": "^6.24.1"
255 |       }
256 |     },
257 |     "babel-plugin-transform-es2015-modules-commonjs": {
258 |       "version": "6.26.2",
259 |       "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-es2015-modules-commonjs/download/babel-plugin-transform-es2015-modules-commonjs-6.26.2.tgz",
260 |       "integrity": "sha1-WKeThjqefKhwvcWogRF/+sJ9tvM=",
261 |       "dev": true,
262 |       "requires": {
263 |         "babel-plugin-transform-strict-mode": "^6.24.1",
264 |         "babel-runtime": "^6.26.0",
265 |         "babel-template": "^6.26.0",
266 |         "babel-types": "^6.26.0"
267 |       }
268 |     },
269 |     "babel-plugin-transform-es2015-modules-systemjs": {
270 |       "version": "6.24.1",
271 |       "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-es2015-modules-systemjs/download/babel-plugin-transform-es2015-modules-systemjs-6.24.1.tgz",
272 |       "integrity": "sha1-/4mhQrkRmpBhlfXxBuzzBdlAfSM=",
273 |       "dev": true,
274 |       "requires": {
275 |         "babel-helper-hoist-variables": "^6.24.1",
276 |         "babel-runtime": "^6.22.0",
277 |         "babel-template": "^6.24.1"
278 |       }
279 |     },
280 |     "babel-plugin-transform-es2015-modules-umd": {
281 |       "version": "6.24.1",
282 |       "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-es2015-modules-umd/download/babel-plugin-transform-es2015-modules-umd-6.24.1.tgz",
283 |       "integrity": "sha1-rJl+YoXNGO1hdq22B9YCNErThGg=",
284 |       "dev": true,
285 |       "requires": {
286 |         "babel-plugin-transform-es2015-modules-amd": "^6.24.1",
287 |         "babel-runtime": "^6.22.0",
288 |         "babel-template": "^6.24.1"
289 |       }
290 |     },
291 |     "babel-plugin-transform-es2015-object-super": {
292 |       "version": "6.24.1",
293 |       "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-es2015-object-super/download/babel-plugin-transform-es2015-object-super-6.24.1.tgz",
294 |       "integrity": "sha1-JM72muIcuDp/hgPa0CH1cusnj40=",
295 |       "dev": true,
296 |       "requires": {
297 |         "babel-helper-replace-supers": "^6.24.1",
298 |         "babel-runtime": "^6.22.0"
299 |       }
300 |     },
301 |     "babel-plugin-transform-es2015-parameters": {
302 |       "version": "6.24.1",
303 |       "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-es2015-parameters/download/babel-plugin-transform-es2015-parameters-6.24.1.tgz",
304 |       "integrity": "sha1-V6w1GrScrxSpfNE7CfZv3wpiXys=",
305 |       "dev": true,
306 |       "requires": {
307 |         "babel-helper-call-delegate": "^6.24.1",
308 |         "babel-helper-get-function-arity": "^6.24.1",
309 |         "babel-runtime": "^6.22.0",
310 |         "babel-template": "^6.24.1",
311 |         "babel-traverse": "^6.24.1",
312 |         "babel-types": "^6.24.1"
313 |       }
314 |     },
315 |     "babel-plugin-transform-es2015-shorthand-properties": {
316 |       "version": "6.24.1",
317 |       "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-es2015-shorthand-properties/download/babel-plugin-transform-es2015-shorthand-properties-6.24.1.tgz",
318 |       "integrity": "sha1-JPh11nIch2YbvZmkYi5R8U3jiqA=",
319 |       "dev": true,
320 |       "requires": {
321 |         "babel-runtime": "^6.22.0",
322 |         "babel-types": "^6.24.1"
323 |       }
324 |     },
325 |     "babel-plugin-transform-es2015-spread": {
326 |       "version": "6.22.0",
327 |       "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-es2015-spread/download/babel-plugin-transform-es2015-spread-6.22.0.tgz",
328 |       "integrity": "sha1-1taKmfia7cRTbIGlQujdnxdG+NE=",
329 |       "dev": true,
330 |       "requires": {
331 |         "babel-runtime": "^6.22.0"
332 |       }
333 |     },
334 |     "babel-plugin-transform-es2015-sticky-regex": {
335 |       "version": "6.24.1",
336 |       "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-es2015-sticky-regex/download/babel-plugin-transform-es2015-sticky-regex-6.24.1.tgz",
337 |       "integrity": "sha1-AMHNsaynERLN8M9hJsLta0V8zbw=",
338 |       "dev": true,
339 |       "requires": {
340 |         "babel-helper-regex": "^6.24.1",
341 |         "babel-runtime": "^6.22.0",
342 |         "babel-types": "^6.24.1"
343 |       }
344 |     },
345 |     "babel-plugin-transform-es2015-template-literals": {
346 |       "version": "6.22.0",
347 |       "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-es2015-template-literals/download/babel-plugin-transform-es2015-template-literals-6.22.0.tgz",
348 |       "integrity": "sha1-qEs0UPfp+PH2g51taH2oS7EjbY0=",
349 |       "dev": true,
350 |       "requires": {
351 |         "babel-runtime": "^6.22.0"
352 |       }
353 |     },
354 |     "babel-plugin-transform-es2015-typeof-symbol": {
355 |       "version": "6.23.0",
356 |       "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-es2015-typeof-symbol/download/babel-plugin-transform-es2015-typeof-symbol-6.23.0.tgz",
357 |       "integrity": "sha1-3sCfHN3/lLUqxz1QXITfWdzOs3I=",
358 |       "dev": true,
359 |       "requires": {
360 |         "babel-runtime": "^6.22.0"
361 |       }
362 |     },
363 |     "babel-plugin-transform-es2015-unicode-regex": {
364 |       "version": "6.24.1",
365 |       "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-es2015-unicode-regex/download/babel-plugin-transform-es2015-unicode-regex-6.24.1.tgz",
366 |       "integrity": "sha1-04sS9C6nMj9yk4fxinxa4frrNek=",
367 |       "dev": true,
368 |       "requires": {
369 |         "babel-helper-regex": "^6.24.1",
370 |         "babel-runtime": "^6.22.0",
371 |         "regexpu-core": "^2.0.0"
372 |       }
373 |     },
374 |     "babel-plugin-transform-regenerator": {
375 |       "version": "6.26.0",
376 |       "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-regenerator/download/babel-plugin-transform-regenerator-6.26.0.tgz",
377 |       "integrity": "sha1-4HA2lvveJ/Cj78rPi03KL3s6jy8=",
378 |       "dev": true,
379 |       "requires": {
380 |         "regenerator-transform": "^0.10.0"
381 |       }
382 |     },
383 |     "babel-plugin-transform-strict-mode": {
384 |       "version": "6.24.1",
385 |       "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-strict-mode/download/babel-plugin-transform-strict-mode-6.24.1.tgz",
386 |       "integrity": "sha1-1fr3qleKZbvlkc9e2uBKDGcCB1g=",
387 |       "dev": true,
388 |       "requires": {
389 |         "babel-runtime": "^6.22.0",
390 |         "babel-types": "^6.24.1"
391 |       }
392 |     },
393 |     "babel-preset-es2015": {
394 |       "version": "6.24.1",
395 |       "resolved": "http://registry.npm.taobao.org/babel-preset-es2015/download/babel-preset-es2015-6.24.1.tgz",
396 |       "integrity": "sha1-1EBQ1rwsn+6nAqrzjXJ6AhBTiTk=",
397 |       "dev": true,
398 |       "requires": {
399 |         "babel-plugin-check-es2015-constants": "^6.22.0",
400 |         "babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
401 |         "babel-plugin-transform-es2015-block-scoped-functions": "^6.22.0",
402 |         "babel-plugin-transform-es2015-block-scoping": "^6.24.1",
403 |         "babel-plugin-transform-es2015-classes": "^6.24.1",
404 |         "babel-plugin-transform-es2015-computed-properties": "^6.24.1",
405 |         "babel-plugin-transform-es2015-destructuring": "^6.22.0",
406 |         "babel-plugin-transform-es2015-duplicate-keys": "^6.24.1",
407 |         "babel-plugin-transform-es2015-for-of": "^6.22.0",
408 |         "babel-plugin-transform-es2015-function-name": "^6.24.1",
409 |         "babel-plugin-transform-es2015-literals": "^6.22.0",
410 |         "babel-plugin-transform-es2015-modules-amd": "^6.24.1",
411 |         "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
412 |         "babel-plugin-transform-es2015-modules-systemjs": "^6.24.1",
413 |         "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
414 |         "babel-plugin-transform-es2015-object-super": "^6.24.1",
415 |         "babel-plugin-transform-es2015-parameters": "^6.24.1",
416 |         "babel-plugin-transform-es2015-shorthand-properties": "^6.24.1",
417 |         "babel-plugin-transform-es2015-spread": "^6.22.0",
418 |         "babel-plugin-transform-es2015-sticky-regex": "^6.24.1",
419 |         "babel-plugin-transform-es2015-template-literals": "^6.22.0",
420 |         "babel-plugin-transform-es2015-typeof-symbol": "^6.22.0",
421 |         "babel-plugin-transform-es2015-unicode-regex": "^6.24.1",
422 |         "babel-plugin-transform-regenerator": "^6.24.1"
423 |       }
424 |     },
425 |     "babel-runtime": {
426 |       "version": "6.26.0",
427 |       "resolved": "http://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.26.0.tgz",
428 |       "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
429 |       "dev": true,
430 |       "requires": {
431 |         "core-js": "^2.4.0",
432 |         "regenerator-runtime": "^0.11.0"
433 |       }
434 |     },
435 |     "babel-template": {
436 |       "version": "6.26.0",
437 |       "resolved": "http://registry.npm.taobao.org/babel-template/download/babel-template-6.26.0.tgz",
438 |       "integrity": "sha1-3gPi0WOWsGn0bdn/+FIfsaDjXgI=",
439 |       "dev": true,
440 |       "requires": {
441 |         "babel-runtime": "^6.26.0",
442 |         "babel-traverse": "^6.26.0",
443 |         "babel-types": "^6.26.0",
444 |         "babylon": "^6.18.0",
445 |         "lodash": "^4.17.4"
446 |       }
447 |     },
448 |     "babel-traverse": {
449 |       "version": "6.26.0",
450 |       "resolved": "http://registry.npm.taobao.org/babel-traverse/download/babel-traverse-6.26.0.tgz",
451 |       "integrity": "sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=",
452 |       "dev": true,
453 |       "requires": {
454 |         "babel-code-frame": "^6.26.0",
455 |         "babel-messages": "^6.23.0",
456 |         "babel-runtime": "^6.26.0",
457 |         "babel-types": "^6.26.0",
458 |         "babylon": "^6.18.0",
459 |         "debug": "^2.6.8",
460 |         "globals": "^9.18.0",
461 |         "invariant": "^2.2.2",
462 |         "lodash": "^4.17.4"
463 |       }
464 |     },
465 |     "babel-types": {
466 |       "version": "6.26.0",
467 |       "resolved": "http://registry.npm.taobao.org/babel-types/download/babel-types-6.26.0.tgz",
468 |       "integrity": "sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=",
469 |       "dev": true,
470 |       "requires": {
471 |         "babel-runtime": "^6.26.0",
472 |         "esutils": "^2.0.2",
473 |         "lodash": "^4.17.4",
474 |         "to-fast-properties": "^1.0.3"
475 |       }
476 |     },
477 |     "babylon": {
478 |       "version": "6.18.0",
479 |       "resolved": "http://registry.npm.taobao.org/babylon/download/babylon-6.18.0.tgz",
480 |       "integrity": "sha1-ry87iPpvXB5MY00aD46sT1WzleM=",
481 |       "dev": true
482 |     },
483 |     "chalk": {
484 |       "version": "1.1.3",
485 |       "resolved": "http://registry.npm.taobao.org/chalk/download/chalk-1.1.3.tgz",
486 |       "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
487 |       "dev": true,
488 |       "requires": {
489 |         "ansi-styles": "^2.2.1",
490 |         "escape-string-regexp": "^1.0.2",
491 |         "has-ansi": "^2.0.0",
492 |         "strip-ansi": "^3.0.0",
493 |         "supports-color": "^2.0.0"
494 |       }
495 |     },
496 |     "core-js": {
497 |       "version": "2.6.0",
498 |       "resolved": "http://registry.npm.taobao.org/core-js/download/core-js-2.6.0.tgz",
499 |       "integrity": "sha1-HjB5Pp7leCswfjf/oi2g6s3dhNQ=",
500 |       "dev": true
501 |     },
502 |     "debug": {
503 |       "version": "2.6.9",
504 |       "resolved": "http://registry.npm.taobao.org/debug/download/debug-2.6.9.tgz",
505 |       "integrity": "sha1-XRKFFd8TT/Mn6QpMk/Tgd6U2NB8=",
506 |       "dev": true,
507 |       "requires": {
508 |         "ms": "2.0.0"
509 |       }
510 |     },
511 |     "escape-string-regexp": {
512 |       "version": "1.0.5",
513 |       "resolved": "http://registry.npm.taobao.org/escape-string-regexp/download/escape-string-regexp-1.0.5.tgz",
514 |       "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
515 |       "dev": true
516 |     },
517 |     "esutils": {
518 |       "version": "2.0.2",
519 |       "resolved": "http://registry.npm.taobao.org/esutils/download/esutils-2.0.2.tgz",
520 |       "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=",
521 |       "dev": true
522 |     },
523 |     "globals": {
524 |       "version": "9.18.0",
525 |       "resolved": "http://registry.npm.taobao.org/globals/download/globals-9.18.0.tgz",
526 |       "integrity": "sha1-qjiWs+abSH8X4x7SFD1pqOMMLYo=",
527 |       "dev": true
528 |     },
529 |     "has-ansi": {
530 |       "version": "2.0.0",
531 |       "resolved": "http://registry.npm.taobao.org/has-ansi/download/has-ansi-2.0.0.tgz",
532 |       "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
533 |       "dev": true,
534 |       "requires": {
535 |         "ansi-regex": "^2.0.0"
536 |       }
537 |     },
538 |     "invariant": {
539 |       "version": "2.2.4",
540 |       "resolved": "http://registry.npm.taobao.org/invariant/download/invariant-2.2.4.tgz",
541 |       "integrity": "sha1-YQ88ksk1nOHbYW5TgAjSP/NRWOY=",
542 |       "dev": true,
543 |       "requires": {
544 |         "loose-envify": "^1.0.0"
545 |       }
546 |     },
547 |     "js-tokens": {
548 |       "version": "3.0.2",
549 |       "resolved": "http://registry.npm.taobao.org/js-tokens/download/js-tokens-3.0.2.tgz",
550 |       "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
551 |       "dev": true
552 |     },
553 |     "jsesc": {
554 |       "version": "0.5.0",
555 |       "resolved": "http://registry.npm.taobao.org/jsesc/download/jsesc-0.5.0.tgz",
556 |       "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=",
557 |       "dev": true
558 |     },
559 |     "lodash": {
560 |       "version": "4.17.11",
561 |       "resolved": "http://registry.npm.taobao.org/lodash/download/lodash-4.17.11.tgz",
562 |       "integrity": "sha1-s56mIp72B+zYniyN8SU2iRysm40=",
563 |       "dev": true
564 |     },
565 |     "loose-envify": {
566 |       "version": "1.4.0",
567 |       "resolved": "http://registry.npm.taobao.org/loose-envify/download/loose-envify-1.4.0.tgz",
568 |       "integrity": "sha1-ce5R+nvkyuwaY4OffmgtgTLTDK8=",
569 |       "dev": true,
570 |       "requires": {
571 |         "js-tokens": "^3.0.0 || ^4.0.0"
572 |       }
573 |     },
574 |     "ms": {
575 |       "version": "2.0.0",
576 |       "resolved": "http://registry.npm.taobao.org/ms/download/ms-2.0.0.tgz",
577 |       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
578 |       "dev": true
579 |     },
580 |     "private": {
581 |       "version": "0.1.8",
582 |       "resolved": "http://registry.npm.taobao.org/private/download/private-0.1.8.tgz",
583 |       "integrity": "sha1-I4Hts2ifelPWUxkAYPz4ItLzaP8=",
584 |       "dev": true
585 |     },
586 |     "regenerate": {
587 |       "version": "1.4.0",
588 |       "resolved": "http://registry.npm.taobao.org/regenerate/download/regenerate-1.4.0.tgz",
589 |       "integrity": "sha1-SoVuxLVuQHfFV1icroXnpMiGmhE=",
590 |       "dev": true
591 |     },
592 |     "regenerator-runtime": {
593 |       "version": "0.11.1",
594 |       "resolved": "http://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.11.1.tgz",
595 |       "integrity": "sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk=",
596 |       "dev": true
597 |     },
598 |     "regenerator-transform": {
599 |       "version": "0.10.1",
600 |       "resolved": "http://registry.npm.taobao.org/regenerator-transform/download/regenerator-transform-0.10.1.tgz",
601 |       "integrity": "sha1-HkmWg3Ix2ot/PPQRTXG1aRoGgN0=",
602 |       "dev": true,
603 |       "requires": {
604 |         "babel-runtime": "^6.18.0",
605 |         "babel-types": "^6.19.0",
606 |         "private": "^0.1.6"
607 |       }
608 |     },
609 |     "regexpu-core": {
610 |       "version": "2.0.0",
611 |       "resolved": "http://registry.npm.taobao.org/regexpu-core/download/regexpu-core-2.0.0.tgz",
612 |       "integrity": "sha1-SdA4g3uNz4v6W5pCE5k45uoq4kA=",
613 |       "dev": true,
614 |       "requires": {
615 |         "regenerate": "^1.2.1",
616 |         "regjsgen": "^0.2.0",
617 |         "regjsparser": "^0.1.4"
618 |       }
619 |     },
620 |     "regjsgen": {
621 |       "version": "0.2.0",
622 |       "resolved": "http://registry.npm.taobao.org/regjsgen/download/regjsgen-0.2.0.tgz",
623 |       "integrity": "sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc=",
624 |       "dev": true
625 |     },
626 |     "regjsparser": {
627 |       "version": "0.1.5",
628 |       "resolved": "http://registry.npm.taobao.org/regjsparser/download/regjsparser-0.1.5.tgz",
629 |       "integrity": "sha1-fuj4Tcb6eS0/0K4ijSS9lJ6tIFw=",
630 |       "dev": true,
631 |       "requires": {
632 |         "jsesc": "~0.5.0"
633 |       }
634 |     },
635 |     "strip-ansi": {
636 |       "version": "3.0.1",
637 |       "resolved": "http://registry.npm.taobao.org/strip-ansi/download/strip-ansi-3.0.1.tgz",
638 |       "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
639 |       "dev": true,
640 |       "requires": {
641 |         "ansi-regex": "^2.0.0"
642 |       }
643 |     },
644 |     "supports-color": {
645 |       "version": "2.0.0",
646 |       "resolved": "http://registry.npm.taobao.org/supports-color/download/supports-color-2.0.0.tgz",
647 |       "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
648 |       "dev": true
649 |     },
650 |     "to-fast-properties": {
651 |       "version": "1.0.3",
652 |       "resolved": "http://registry.npm.taobao.org/to-fast-properties/download/to-fast-properties-1.0.3.tgz",
653 |       "integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=",
654 |       "dev": true
655 |     }
656 |   }
657 | }
658 | 


--------------------------------------------------------------------------------
/模块化/06_ES6_Babel_Browserify/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "es6-babel-browserify",
3 |   "version": "1.0.0",
4 |   "devDependencies": {
5 |     "babel-preset-es2015": "^6.24.1"
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/消除不同的浏览器在默认样式上不同表现reset.css:
--------------------------------------------------------------------------------
 1 | @charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}
 2 | body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}
 3 | body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}
 4 | h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%}
 5 | h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微软雅黑",simsun,sans-serif}
 6 | h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal}
 7 | address,cite,dfn,em,i,optgroup,var{font-style:normal}
 8 | table{border-collapse:collapse;border-spacing:0;text-align:left}
 9 | caption,th{text-align:inherit}
10 | ul,ol,menu{list-style:none}
11 | fieldset,img{border:0}
12 | img,object,input,textarea,button,select{vertical-align:middle}
13 | article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block}
14 | audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
15 | blockquote:before,blockquote:after,q:before,q:after{content:"\0020"}
16 | textarea{overflow:auto;resize:vertical}
17 | input,textarea,button,select,a{outline:0 none;border: none;}
18 | button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
19 | mark{background-color:transparent}
20 | a,ins,s,u,del{text-decoration:none}
21 | sup,sub{vertical-align:baseline}
22 | html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;}
23 | body {font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;}
24 | hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;}
25 | a {color: #25a4bb;text-decoration: none;}
26 | 


--------------------------------------------------------------------------------
/移动端1px像素.css:
--------------------------------------------------------------------------------
  1 | @charset "utf-8";
  2 | .border,
  3 | .border-top,
  4 | .border-right,
  5 | .border-bottom,
  6 | .border-left,
  7 | .border-topbottom,
  8 | .border-rightleft,
  9 | .border-topleft,
 10 | .border-rightbottom,
 11 | .border-topright,
 12 | .border-bottomleft {
 13 |     position: relative;
 14 | }
 15 | .border::before,
 16 | .border-top::before,
 17 | .border-right::before,
 18 | .border-bottom::before,
 19 | .border-left::before,
 20 | .border-topbottom::before,
 21 | .border-topbottom::after,
 22 | .border-rightleft::before,
 23 | .border-rightleft::after,
 24 | .border-topleft::before,
 25 | .border-topleft::after,
 26 | .border-rightbottom::before,
 27 | .border-rightbottom::after,
 28 | .border-topright::before,
 29 | .border-topright::after,
 30 | .border-bottomleft::before,
 31 | .border-bottomleft::after {
 32 |     content: "\0020";
 33 |     overflow: hidden;
 34 |     position: absolute;
 35 | }
 36 | /* border
 37 |  * 因，边框是由伪元素区域遮盖在父级
 38 |  * 故，子级若有交互，需要对子级设置
 39 |  * 定位 及 z轴
 40 |  */
 41 | .border::before {
 42 |     box-sizing: border-box;
 43 |     top: 0;
 44 |     left: 0;
 45 |     height: 100%;
 46 |     width: 100%;
 47 |     border: 1px solid #eaeaea;
 48 |     transform-origin: 0 0;
 49 | }
 50 | .border-top::before,
 51 | .border-bottom::before,
 52 | .border-topbottom::before,
 53 | .border-topbottom::after,
 54 | .border-topleft::before,
 55 | .border-rightbottom::after,
 56 | .border-topright::before,
 57 | .border-bottomleft::before {
 58 |     left: 0;
 59 |     width: 100%;
 60 |     height: 1px;
 61 | }
 62 | .border-right::before,
 63 | .border-left::before,
 64 | .border-rightleft::before,
 65 | .border-rightleft::after,
 66 | .border-topleft::after,
 67 | .border-rightbottom::before,
 68 | .border-topright::after,
 69 | .border-bottomleft::after {
 70 |     top: 0;
 71 |     width: 1px;
 72 |     height: 100%;
 73 | }
 74 | .border-top::before,
 75 | .border-topbottom::before,
 76 | .border-topleft::before,
 77 | .border-topright::before {
 78 |     border-top: 1px solid #eaeaea;
 79 |     transform-origin: 0 0;
 80 | }
 81 | .border-right::before,
 82 | .border-rightbottom::before,
 83 | .border-rightleft::before,
 84 | .border-topright::after {
 85 |     border-right: 1px solid #eaeaea;
 86 |     transform-origin: 100% 0;
 87 | }
 88 | .border-bottom::before,
 89 | .border-topbottom::after,
 90 | .border-rightbottom::after,
 91 | .border-bottomleft::before {
 92 |     border-bottom: 1px solid #eaeaea;
 93 |     transform-origin: 0 100%;
 94 | }
 95 | .border-left::before,
 96 | .border-topleft::after,
 97 | .border-rightleft::after,
 98 | .border-bottomleft::after {
 99 |     border-left: 1px solid #eaeaea;
100 |     transform-origin: 0 0;
101 | }
102 | .border-top::before,
103 | .border-topbottom::before,
104 | .border-topleft::before,
105 | .border-topright::before {
106 |     top: 0;
107 | }
108 | .border-right::before,
109 | .border-rightleft::after,
110 | .border-rightbottom::before,
111 | .border-topright::after {
112 |     right: 0;
113 | }
114 | .border-bottom::before,
115 | .border-topbottom::after,
116 | .border-rightbottom::after,
117 | .border-bottomleft::after {
118 |     bottom: 0;
119 | }
120 | .border-left::before,
121 | .border-rightleft::before,
122 | .border-topleft::after,
123 | .border-bottomleft::before {
124 |     left: 0;
125 | }
126 | @media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {
127 |     /* 默认值，无需重置 */
128 | }
129 | @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
130 |     .border::before {
131 |         width: 200%;
132 |         height: 200%;
133 |         transform: scale(.5);
134 |     }
135 |     .border-top::before,
136 |     .border-bottom::before,
137 |     .border-topbottom::before,
138 |     .border-topbottom::after,
139 |     .border-topleft::before,
140 |     .border-rightbottom::after,
141 |     .border-topright::before,
142 |     .border-bottomleft::before {
143 |         transform: scaleY(.5);
144 |     }
145 |     .border-right::before,
146 |     .border-left::before,
147 |     .border-rightleft::before,
148 |     .border-rightleft::after,
149 |     .border-topleft::after,
150 |     .border-rightbottom::before,
151 |     .border-topright::after,
152 |     .border-bottomleft::after {
153 |         transform: scaleX(.5);
154 |     }
155 | }
156 | @media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) {
157 |     .border::before {
158 |         width: 300%;
159 |         height: 300%;
160 |         transform: scale(.33333);
161 |     }
162 |     .border-top::before,
163 |     .border-bottom::before,
164 |     .border-topbottom::before,
165 |     .border-topbottom::after,
166 |     .border-topleft::before,
167 |     .border-rightbottom::after,
168 |     .border-topright::before,
169 |     .border-bottomleft::before {
170 |         transform: scaleY(.33333);
171 |     }
172 |     .border-right::before,
173 |     .border-left::before,
174 |     .border-rightleft::before,
175 |     .border-rightleft::after,
176 |     .border-topleft::after,
177 |     .border-rightbottom::before,
178 |     .border-topright::after,
179 |     .border-bottomleft::after {
180 |         transform: scaleX(.33333);
181 |     }
182 | }
183 | 


--------------------------------------------------------------------------------