Showing preview only (889K chars total). Download the full file or copy to clipboard to get everything.
Repository: ljianshu/Blog
Branch: master
Commit: 03bf481a21e8
Files: 183
Total size: 839.3 KB
Directory structure:
gitextract_rrozzaby/
├── .history/
│ ├── oop继承六种方式_20210128110542.html
│ ├── oop继承六种方式_20210128111343.html
│ └── oop继承六种方式_20210128111530.html
├── README.md
├── Web Workers/
│ ├── 06_Web Workers_测试.html
│ ├── 06_Web Workers_测试2.html
│ └── worker.js
├── oop继承六种方式.html
├── vue2.0学习/
│ ├── 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接口封装/
│ │ ├── README.md
│ │ ├── babel.config.js
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── index.html
│ │ └── src/
│ │ ├── App.vue
│ │ ├── api/
│ │ │ ├── api.js
│ │ │ ├── http.js
│ │ │ ├── personal.js
│ │ │ ├── request.js
│ │ │ └── vote.js
│ │ └── 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组件三大核心概念.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.json
├── 消除不同的浏览器在默认样式上不同表现reset.css
└── 移动端1px像素.css
================================================
FILE CONTENTS
================================================
================================================
FILE: .history/oop继承六种方式_20210128110542.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript继承</title>
</head>
<body>
<script>
// 原型链继承
// function Person(name, age) {
// this.name = name,
// this.age = age,
// this.setName = function () { }
// }
// Person.prototype.setAge = function () { }
// function Student(name, age, price) {
// Person.call(this, name, age)
// this.price = price
// }
// var s1 = new Student('Tom', 20, 15000)
// console.log(s1)
// 借用构造函数继承
// function Person(name, age) {
// this.name = name,
// this.age = age
// }
// Person.prototype.setAge = function () {
// console.log("111")
// }
// function Student(price) {
// this.price = price
// this.setScore = function () { }
// }
// Student.prototype.sayHello = function () { }
// Student.prototype = new Person
// Student.prototype.sayHello = function () { }
// var s1 = new Student(15000)
// var s2 = new Student(14000)
// console.log(s1, s2)
// s1.play.push(4)
// console.log(s1.setAge, s2.setAge)
// console.log(s1.__proto__ === s2.__proto__)
// console.log(s1.__proto__.__proto__ === s2.__proto__.__proto__)
// console.log(s1.__proto__.__proto__.__proto__ === Object.prototype)
// 原型链+借用构造函数的组合继承
// function Person(name, age) {
// this.name = name,
// this.age = age,
// this.setAge = function () { }
// }
// Person.prototype.setAge = function () {
// console.log("111")
// }
// var p1 = new Person('jack', 15)
// function Student(name, age, price) {
// Person.call(this, name, age)
// this.price = price
// this.setScore = function () { }
// }
// Student.prototype = new Person()
// Student.prototype.constructor = Student//组合继承也是需要修复构造函数指向的
// Student.prototype.sayHello = function () { }
// var s1 = new Student('Tom', 20, 15000)
// var s2 = new Student('Jack', 22, 14000)
// console.log(s1.constructor) //Student
// console.log(p1.constructor) //Person
// 组合继承优化1
// function Person(name, age) {
// this.name = name,
// this.age = age,
// this.setAge = function () { }
// }
// Person.prototype.setAge = function () {
// console.log("111")
// }
// function Student(name, age, price) {
// Person.call(this, name, age)
// this.price = price
// this.setScore = function () { }
// }
// Student.prototype = Person.prototype
// Student.prototype.sayHello = function () { }
// var s1 = new Student('Tom', 20, 15000)
// console.log(s1)
// console.log(s1 instanceof Student, s1 instanceof Person)//true true
// console.log(s1.constructor)//Person
//组合继承优化2
function Person(name, age) {
this.name = name,
this.age = age
}
Person.prototype.setAge = function () {
console.log("111")
}
function Student(name, age, price) {
Person.call(this, name, age)
this.price = price
this.setScore = function () {}
}
Student.prototype = Object.create(Person.prototype)
Student.prototype.constructor = Student
var s1 = new Student('Tom', 20, 15000)
console.log(s1 instanceof Student, s1 instanceof Person) // true true
console.log(s1.constructor) //Student
console.log(s1)
//ES6 class继承
// class Person {
// //调用类的构造方法
// constructor(name, age) {
// this.name = name
// this.age = age
// }
// //定义一般的方法
// showName() {
// console.log("调用父类的方法")
// console.log(this.name, this.age);
// }
// }
// let p1 = new Person('kobe', 39)
// console.log(p1)
// //定义一个子类
// class Student extends Person {
// constructor(name, age, salary) {
// super(name, age)
// this.salary = salary
// }
// showName() { //在子类自身定义方法
// console.log("调用子类的方法")
// console.log(this.name, this.age, this.salary);
// }
// }
// let s1 = new Student('wade', 38, 1000000000)
// let s2 = new Student('kobe', 40, 3000000000)
// console.log(s1.showName === s2.showName)//true
// console.log(s1)
// s1.showName()
</script>
</body>
</html>
================================================
FILE: .history/oop继承六种方式_20210128111343.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script>
// 原型链继承
// function Person(name, age) {
// this.name = name,
// this.age = age,
// this.setName = function () { }
// }
// Person.prototype.setAge = function () { }
// function Student(name, age, price) {
// Person.call(this, name, age)
// this.price = price
// }
// var s1 = new Student('Tom', 20, 15000)
// console.log(s1)
// 借用构造函数继承
// function Person(name, age) {
// this.name = name,
// this.age = age
// }
// Person.prototype.setAge = function () {
// console.log("111")
// }
// function Student(price) {
// this.price = price
// this.setScore = function () { }
// }
// Student.prototype.sayHello = function () { }
// Student.prototype = new Person
// Student.prototype.sayHello = function () { }
// var s1 = new Student(15000)
// var s2 = new Student(14000)
// console.log(s1, s2)
// s1.play.push(4)
// console.log(s1.setAge, s2.setAge)
// console.log(s1.__proto__ === s2.__proto__)
// console.log(s1.__proto__.__proto__ === s2.__proto__.__proto__)
// console.log(s1.__proto__.__proto__.__proto__ === Object.prototype)
// 原型链+借用构造函数的组合继承
// function Person(name, age) {
// this.name = name,
// this.age = age,
// this.setAge = function () { }
// }
// Person.prototype.setAge = function () {
// console.log("111")
// }
// var p1 = new Person('jack', 15)
// function Student(name, age, price) {
// Person.call(this, name, age)
// this.price = price
// this.setScore = function () { }
// }
// Student.prototype = new Person()
// Student.prototype.constructor = Student//组合继承也是需要修复构造函数指向的
// Student.prototype.sayHello = function () { }
// var s1 = new Student('Tom', 20, 15000)
// var s2 = new Student('Jack', 22, 14000)
// console.log(s1.constructor) //Student
// console.log(p1.constructor) //Person
// 组合继承优化1
// function Person(name, age) {
// this.name = name,
// this.age = age,
// this.setAge = function () { }
// }
// Person.prototype.setAge = function () {
// console.log("111")
// }
// function Student(name, age, price) {
// Person.call(this, name, age)
// this.price = price
// this.setScore = function () { }
// }
// Student.prototype = Person.prototype
// Student.prototype.sayHello = function () { }
// var s1 = new Student('Tom', 20, 15000)
// console.log(s1)
// console.log(s1 instanceof Student, s1 instanceof Person)//true true
// console.log(s1.constructor)//Person
//组合继承优化2
function Person(name, age) {
this.name = name,
this.age = age
}
Person.prototype.setAge = function () {
console.log("111")
}
function Student(name, age, price) {
Person.call(this, name, age)
this.price = price
this.setScore = function () { }
}
Student.prototype = Object.create(Person.prototype)
Student.prototype.constructor = Student
var s1 = new Student('Tom', 20, 15000)
console.log(s1 instanceof Student, s1 instanceof Person) // true true
console.log(s1.constructor) //Student
console.log(s1)
//ES6 class继承
// class Person {
// //调用类的构造方法
// constructor(name, age) {
// this.name = name
// this.age = age
// }
// //定义一般的方法
// showName() {
// console.log("调用父类的方法")
// console.log(this.name, this.age);
// }
// }
// let p1 = new Person('kobe', 39)
// console.log(p1)
// //定义一个子类
// class Student extends Person {
// constructor(name, age, salary) {
// super(name, age)
// this.salary = salary
// }
// showName() { //在子类自身定义方法
// console.log("调用子类的方法")
// console.log(this.name, this.age, this.salary);
// }
// }
// let s1 = new Student('wade', 38, 1000000000)
// let s2 = new Student('kobe', 40, 3000000000)
// console.log(s1.showName === s2.showName)//true
// console.log(s1)
// s1.showName()
</script>
</body>
</html>
================================================
FILE: .history/oop继承六种方式_20210128111530.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript继承例子</title>
</head>
<body>
<script>
// 原型链继承
// function Person(name, age) {
// this.name = name,
// this.age = age,
// this.setName = function () { }
// }
// Person.prototype.setAge = function () { }
// function Student(name, age, price) {
// Person.call(this, name, age)
// this.price = price
// }
// var s1 = new Student('Tom', 20, 15000)
// console.log(s1)
// 借用构造函数继承
// function Person(name, age) {
// this.name = name,
// this.age = age
// }
// Person.prototype.setAge = function () {
// console.log("111")
// }
// function Student(price) {
// this.price = price
// this.setScore = function () { }
// }
// Student.prototype.sayHello = function () { }
// Student.prototype = new Person
// Student.prototype.sayHello = function () { }
// var s1 = new Student(15000)
// var s2 = new Student(14000)
// console.log(s1, s2)
// s1.play.push(4)
// console.log(s1.setAge, s2.setAge)
// console.log(s1.__proto__ === s2.__proto__)
// console.log(s1.__proto__.__proto__ === s2.__proto__.__proto__)
// console.log(s1.__proto__.__proto__.__proto__ === Object.prototype)
// 原型链+借用构造函数的组合继承
// function Person(name, age) {
// this.name = name,
// this.age = age,
// this.setAge = function () { }
// }
// Person.prototype.setAge = function () {
// console.log("111")
// }
// var p1 = new Person('jack', 15)
// function Student(name, age, price) {
// Person.call(this, name, age)
// this.price = price
// this.setScore = function () { }
// }
// Student.prototype = new Person()
// Student.prototype.constructor = Student//组合继承也是需要修复构造函数指向的
// Student.prototype.sayHello = function () { }
// var s1 = new Student('Tom', 20, 15000)
// var s2 = new Student('Jack', 22, 14000)
// console.log(s1.constructor) //Student
// console.log(p1.constructor) //Person
// 组合继承优化1
// function Person(name, age) {
// this.name = name,
// this.age = age,
// this.setAge = function () { }
// }
// Person.prototype.setAge = function () {
// console.log("111")
// }
// function Student(name, age, price) {
// Person.call(this, name, age)
// this.price = price
// this.setScore = function () { }
// }
// Student.prototype = Person.prototype
// Student.prototype.sayHello = function () { }
// var s1 = new Student('Tom', 20, 15000)
// console.log(s1)
// console.log(s1 instanceof Student, s1 instanceof Person)//true true
// console.log(s1.constructor)//Person
//组合继承优化2
function Person(name, age) {
this.name = name,
this.age = age
}
Person.prototype.setAge = function () {
console.log("111")
}
function Student(name, age, price) {
Person.call(this, name, age)
this.price = price
this.setScore = function () { }
}
Student.prototype = Object.create(Person.prototype)
Student.prototype.constructor = Student
var s1 = new Student('Tom', 20, 15000)
console.log(s1 instanceof Student, s1 instanceof Person) // true true
console.log(s1.constructor) //Student
console.log(s1)
//ES6 class继承
// class Person {
// //调用类的构造方法
// constructor(name, age) {
// this.name = name
// this.age = age
// }
// //定义一般的方法
// showName() {
// console.log("调用父类的方法")
// console.log(this.name, this.age);
// }
// }
// let p1 = new Person('kobe', 39)
// console.log(p1)
// //定义一个子类
// class Student extends Person {
// constructor(name, age, salary) {
// super(name, age)
// this.salary = salary
// }
// showName() { //在子类自身定义方法
// console.log("调用子类的方法")
// console.log(this.name, this.age, this.salary);
// }
// }
// let s1 = new Student('wade', 38, 1000000000)
// let s2 = new Student('kobe', 40, 3000000000)
// console.log(s1.showName === s2.showName)//true
// console.log(s1)
// s1.showName()
</script>
</body>
</html>
================================================
FILE: README.md
================================================
# 博客目录
努力打造一系列适合初中级工程师能够看得懂的优质文章，今年博客侧重于框架、TS和构建工具等底层原理分析，如果想第一时间获取文章，欢迎关注**我的公众号：前端工匠，接下去的路我们一起走！** 欢迎添加我的个人微信frontJS，**获取大厂面试题及其答案**
### 版权声明：本文为博主原创文章，未经博主允许不得转载。
- [掘金博客(全集)](https://juejin.im/user/5a9a9cdcf265da238b7d771c)
- [segmentFault博客(精华)](https://segmentfault.com/u/langlixingzhou/articles)
- 想加入**前端交流群**，跟诸多一线大厂的大佬交流学习，先关注「前端工匠」公众号👉点击“进群交流”，备注git,我拉你入群
### | 浏览器相关
#### 1.[深入浅出浏览器渲染原理](https://github.com/ljianshu/Blog/issues/51)
#### 2.[深入了解浏览器存储](https://github.com/ljianshu/Blog/issues/25)
#### 3.[深入理解浏览器的缓存机制](https://github.com/ljianshu/Blog/issues/23)
#### 4.[从URL输入到页面展现到底发生什么？](https://github.com/ljianshu/Blog/issues/24)
### | Javascript
#### 1.[前端模块化详解(完整版)](https://github.com/ljianshu/Blog/issues/48)
#### 2.[九种跨域方式实现原理（完整版）](https://github.com/ljianshu/Blog/issues/55)
#### 3.[JavaScript的数据类型及其检测](https://github.com/ljianshu/Blog/issues/4)
#### 4.[JavaScript数据类型转换](https://github.com/ljianshu/Blog/issues/1)
#### 5.[深入理解JavaScript作用域和作用域链](https://github.com/ljianshu/Blog/issues/59)
#### 6.[深入理解JavaScript执行上下文和执行栈](https://github.com/ljianshu/Blog/issues/60)
#### 7.[细说数组常用遍历的方法](https://github.com/ljianshu/Blog/issues/31)
#### 8.[浅拷贝与深拷贝](https://github.com/ljianshu/Blog/issues/5)
#### 9.[深入浅出Javascript闭包](https://github.com/ljianshu/Blog/issues/6)
#### 10.[你还没搞懂this？](https://github.com/ljianshu/Blog/issues/7)
#### 11.[原型与原型链详解](https://github.com/ljianshu/Blog/issues/18)
#### 12.[Dom事件机制](https://github.com/ljianshu/Blog/issues/44)
#### 13.[JavaScript常见的六种继承方式](https://github.com/ljianshu/Blog/issues/20)
#### 14.[浏览器与Node的事件循环(Event Loop)有何区别?](https://github.com/ljianshu/Blog/issues/54)
#### 15.[JavaScript中的垃圾回收和内存泄漏](https://github.com/ljianshu/Blog/issues/65)
#### 16.[javascript函数式编程](https://github.com/ljianshu/Blog/issues/72)
#### 17.[慎用Number.toFixed()](https://github.com/ljianshu/Blog/issues/95)
#### 18.[你会用JSON.stringify()?](https://github.com/ljianshu/Blog/issues/97)
### | ES6+
#### 1.[ES6核心特性](https://github.com/ljianshu/Blog/issues/10)
#### 2.[ES7、ES8、ES9、ES10新特性](https://github.com/ljianshu/Blog/issues/76)
#### 3.[ES2020新特性](https://github.com/ljianshu/Blog/issues/79)
#### 4.[ES2021新特性](https://github.com/ljianshu/Blog/issues/92)
#### 5.[7个令人兴奋的 JavaScript 新特性](https://github.com/ljianshu/Blog/issues/78)
#### 6.[你真的懂Promise吗](https://github.com/ljianshu/Blog/issues/81)
#### 7.[异步解决方案--Promise与Await](https://github.com/ljianshu/Blog/issues/13)
#### 8.[JS 异步编程六种方案](https://github.com/ljianshu/Blog/issues/53)
#### 9.[ES6迭代器和生成器](https://github.com/ljianshu/Blog/issues/42)
### | CSS
#### 1.[如何居中一个元素（终结版)](https://github.com/ljianshu/Blog/issues/29)
#### 2.[关于响应式布局，你必须要知道的](https://github.com/ljianshu/Blog/issues/38)
#### 3.[深入理解BFC](https://github.com/ljianshu/Blog/issues/15)
#### 4.[如何清除浮动](https://github.com/ljianshu/Blog/issues/16)
#### 5.[LESS即学即用](https://github.com/ljianshu/Blog/issues/19)
#### 6.[几种常见的CSS布局](https://github.com/ljianshu/Blog/issues/40)
#### 7.[实现三栏布局的几种方法](https://github.com/ljianshu/Blog/issues/14)
### | Http协议与数据请求
#### 1.[关于Http协议，你必须要知道的](https://github.com/ljianshu/Blog/issues/22)
#### 2.[深入理解HTTPS工作原理](https://github.com/ljianshu/Blog/issues/50)
#### 3.[解读HTTP/2 及 HTTP/3特性](https://github.com/ljianshu/Blog/issues/57)
#### 4.[Web 实时推送技术的总结](https://github.com/ljianshu/Blog/issues/58)
#### 5.[TCP和UDP比较](https://github.com/ljianshu/Blog/issues/61)
#### 6.[Ajax原理一篇就够了](https://github.com/ljianshu/Blog/issues/45)
#### 7.[Ajax请求后台数据](https://github.com/ljianshu/Blog/issues/46)
#### 8.[fetch 如何请求数据](https://github.com/ljianshu/Blog/issues/47)
### | 页面性能优化与安全
#### 1.[页面性能优化办法有哪些](https://github.com/ljianshu/Blog/issues/9)
#### 2.[懒加载和预加载](https://github.com/ljianshu/Blog/issues/8)
#### 3.[函数节流和防抖](https://github.com/ljianshu/Blog/issues/43).
#### 4.[常见六大Web安全攻防解析](https://github.com/ljianshu/Blog/issues/56)
### | Vue全家桶
#### 1.[Vue3.2 有哪些新变化？](https://github.com/ljianshu/Blog/issues/109)
#### 2.[从头开始学习Vuex](https://github.com/ljianshu/Blog/issues/36)
#### 3.[从头开始学习vue-router](https://github.com/ljianshu/Blog/issues/39)
#### 4.[vue组件三大核心概念](https://github.com/ljianshu/Blog/issues/67)
#### 5.[vue组件间通信六种方式（完整版）](https://github.com/ljianshu/Blog/issues/66)
#### 6.[vue计算属性和watch的区别](https://github.com/ljianshu/Blog/issues/68)
#### 7.[揭秘Vue中的Virtual Dom](https://github.com/ljianshu/Blog/issues/69)
#### 8.[深入理解vue响应式原理](https://github.com/ljianshu/Blog/issues/70)
#### 9.[令人眼前一亮的Vue实战技巧](https://github.com/ljianshu/Blog/issues/71)
### | 工具
#### 1.[团队如何统一代码规范？](https://github.com/ljianshu/Blog/issues/114)
#### 2.[让开发效率“飞起”的VS Code 插件](https://github.com/ljianshu/Blog/issues/80)
### | 面试
#### 1.[Javascript 面试核心考点(基础版)](https://github.com/ljianshu/Blog/issues/63)
### | 其他
#### 1.[写技术博客那点事](https://github.com/ljianshu/Blog/issues/62)
### | 备战大厂面试
- 大厂面试题及其答案（四份PDF囊括上千经典题）
- vue/react/webpack源码视频深度讲解
- JavaScript/vue 常见面试题视频讲解
- JavaScript版数据结构与算法视频资料
- 简历模版等等
感兴趣的扫描下方微信二维码（frontJS）免费找我领取，备注：git,希望对你们有些许帮助！有时候图片显示不出来，直接加frontJS
================================================
FILE: Web Workers/06_Web Workers_测试.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06_Web Workers_测试</title>
</head>
<body>
<!--
1. H5规范提供了js分线程的实现, 取名为: Web Workers
2. 相关API
* Worker: 构造函数, 加载分线程执行的js文件
* Worker.prototype.onmessage: 用于接收另一个线程的回调函数
* Worker.prototype.postMessage: 向另一个线程发送消息
3. 不足
* worker内代码不能操作DOM(更新UI)
* 不能跨域加载JS
* 不是每个浏览器都支持这个新特性
-->
<input type="text" placeholder="数值" id="number">
<button id="btn">计算</button>
<script type="text/javascript">
// 1 1 2 3 5 8 f(n) = f(n-1) + f(n-2)
function fibonacci(n) {
return n<=2 ? 1 : fibonacci(n-1) + fibonacci(n-2) //递归调用
}
// console.log(fibonacci(7))
var input = document.getElementById('number')
document.getElementById('btn').onclick = function () {
var number = input.value
var result = fibonacci(number)
alert(result)
}
</script>
</body>
</html>
================================================
FILE: Web Workers/06_Web Workers_测试2.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06_Web Workers_测试</title>
</head>
<body>
<!--
1. H5规范提供了js分线程的实现, 取名为: Web Workers
2. 相关API
* Worker: 构造函数, 加载分线程执行的js文件
* Worker.prototype.onmessage: 用于接收另一个线程的回调函数
* Worker.prototype.postMessage: 向另一个线程发送消息
3. 不足
* worker内代码不能操作DOM(更新UI)
* 不能跨域加载JS
* 不是每个浏览器都支持这个新特性
-->
<input type="text" placeholder="数值" id="number">
<button id="btn">计算</button>
<script type="text/javascript">
var input = document.getElementById('number')
document.getElementById('btn').onclick = function () {
var number = input.value
//创建一个Worker对象
var worker = new Worker('worker.js')
// 绑定接收消息的监听
worker.onmessage = function (event) {
console.log('主线程接收分线程返回的数据: '+event.data)
alert(event.data)
}
// 向分线程发送消息
worker.postMessage(number)
console.log('主线程向分线程发送数据: '+number)
}
// console.log(this) // window
</script>
</body>
</html>
================================================
FILE: Web Workers/worker.js
================================================
function fibonacci(n) {
return n<=2 ? 1 : fibonacci(n-1) + fibonacci(n-2) //递归调用
}
console.log(this)
this.onmessage = function (event) {
var number = event.data
console.log('分线程接收到主线程发送的数据: '+number)
//计算
var result = fibonacci(number)
postMessage(result)
console.log('分线程向主线程返回数据: '+result)
// alert(result) alert是window的方法, 在分线程不能调用
// 分线程中的全局对象不再是window, 所以在分线程中不可能更新界面
}
================================================
FILE: oop继承六种方式.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript继承例子</title>
</head>
<body>
<script>
// 原型链继承
// function Person(name, age) {
// this.name = name,
// this.age = age,
// this.setName = function () { }
// }
// Person.prototype.setAge = function () { }
// function Student(name, age, price) {
// Person.call(this, name, age)
// this.price = price
// }
// var s1 = new Student('Tom', 20, 15000)
// console.log(s1)
// 借用构造函数继承
// function Person(name, age) {
// this.name = name,
// this.age = age
// }
// Person.prototype.setAge = function () {
// console.log("111")
// }
// function Student(price) {
// this.price = price
// this.setScore = function () { }
// }
// Student.prototype.sayHello = function () { }
// Student.prototype = new Person
// Student.prototype.sayHello = function () { }
// var s1 = new Student(15000)
// var s2 = new Student(14000)
// console.log(s1, s2)
// s1.play.push(4)
// console.log(s1.setAge, s2.setAge)
// console.log(s1.__proto__ === s2.__proto__)
// console.log(s1.__proto__.__proto__ === s2.__proto__.__proto__)
// console.log(s1.__proto__.__proto__.__proto__ === Object.prototype)
// 原型链+借用构造函数的组合继承
// function Person(name, age) {
// this.name = name,
// this.age = age,
// this.setAge = function () { }
// }
// Person.prototype.setAge = function () {
// console.log("111")
// }
// var p1 = new Person('jack', 15)
// function Student(name, age, price) {
// Person.call(this, name, age)
// this.price = price
// this.setScore = function () { }
// }
// Student.prototype = new Person()
// Student.prototype.constructor = Student//组合继承也是需要修复构造函数指向的
// Student.prototype.sayHello = function () { }
// var s1 = new Student('Tom', 20, 15000)
// var s2 = new Student('Jack', 22, 14000)
// console.log(s1.constructor) //Student
// console.log(p1.constructor) //Person
// 组合继承优化1
// function Person(name, age) {
// this.name = name,
// this.age = age,
// this.setAge = function () { }
// }
// Person.prototype.setAge = function () {
// console.log("111")
// }
// function Student(name, age, price) {
// Person.call(this, name, age)
// this.price = price
// this.setScore = function () { }
// }
// Student.prototype = Person.prototype
// Student.prototype.sayHello = function () { }
// var s1 = new Student('Tom', 20, 15000)
// console.log(s1)
// console.log(s1 instanceof Student, s1 instanceof Person)//true true
// console.log(s1.constructor)//Person
//组合继承优化2
function Person(name, age) {
this.name = name,
this.age = age
}
Person.prototype.setAge = function () {
console.log("111")
}
function Student(name, age, price) {
Person.call(this, name, age)
this.price = price
this.setScore = function () { }
}
Student.prototype = Object.create(Person.prototype)
Student.prototype.constructor = Student
var s1 = new Student('Tom', 20, 15000)
console.log(s1 instanceof Student, s1 instanceof Person) // true true
console.log(s1.constructor) //Student
console.log(s1)
//ES6 class继承
// class Person {
// //调用类的构造方法
// constructor(name, age) {
// this.name = name
// this.age = age
// }
// //定义一般的方法
// showName() {
// console.log("调用父类的方法")
// console.log(this.name, this.age);
// }
// }
// let p1 = new Person('kobe', 39)
// console.log(p1)
// //定义一个子类
// class Student extends Person {
// constructor(name, age, salary) {
// super(name, age)
// this.salary = salary
// }
// showName() { //在子类自身定义方法
// console.log("调用子类的方法")
// console.log(this.name, this.age, this.salary);
// }
// }
// let s1 = new Student('wade', 38, 1000000000)
// let s2 = new Student('kobe', 40, 3000000000)
// console.log(s1.showName === s2.showName)//true
// console.log(s1)
// s1.showName()
</script>
</body>
</html>
================================================
FILE: vue2.0学习/demo/$emit如何获取返回值/demo.vue
================================================
<template>
<div>
name: {{ name || "--" }}
<br />
<input :value="name" @change="handleChange" />
<br />
</div>
</template>
<script>
export default {
props: {
name: String
},
methods: {
handleChange(e) {
const res = this.$emit("change", e.target.value, val => {
console.log("父组件callback传递过来", val);
});
console.log(res, res === this); // 实例 true
}
}
};
</script>
================================================
FILE: vue2.0学习/demo/$emit如何获取返回值/index.vue
================================================
// this.$emit的返回值是什么？ this // 如果需要返回值可以使用回调参数
<template>
<div class="hello">
<div>
<Demo :name="name" @change="handleEventChange" />
</div>
<br />
</div>
</template>
<script>
import Demo from "./demo.vue";
export default {
components: {
Demo
},
data() {
return {
name: ""
};
},
methods: {
handleEventChange(val, callback) {
console.log("子组件传递过来", val, callback);
this.name = val;
callback("helloWorld");
return "hello";
}
}
};
</script>
<style>
.hello {
margin: 30px;
}
</style>
================================================
FILE: vue2.0学习/demo/filter.vue
================================================
<template>
<div class="hello">
<div>
<h2>显示格式化的日期时间</h2>
<p>{{ date }}</p>
<p>{{ date | filterDate }}</p>
<p>年月日: {{ date | filterDate("YYYY-MM-DD") }}</p>
</div>
</div>
</template>
<script>
import moment from "moment";
export default {
filters: {
filterDate(value, format = "YYYY-MM-DD HH:mm:ss") {
return moment(value).format(format);// format如果没传值，就是以“YYYY-MM-DD HH:mm:ss”格式
}
},
data() {
return {
date: new Date()
};
}
};
</script>
<style>
.hello {
margin: 30px;
}
</style>
================================================
FILE: vue2.0学习/slot与slot-scope用法/TodoItem.vue
================================================
<template>
<div>
<li class="item">
<input v-model="checked" type="checkbox" />
<slot name="item" :checked="checked"></slot>
</li>
</div>
</template>
<script>
export default {
data() {
return {
checked: false
};
}
};
</script>
<style scoped>
.item {
color: red;
}
</style>
================================================
FILE: vue2.0学习/slot与slot-scope用法/index.vue
================================================
<template>
<div class="toList">
<input v-model="info" type="text" /> <button @click="addItem">添加</button>
<ul>
<TodoItem v-for="(item, index) in listData" :key="index">
<template v-slot:item="itemProps">
<span
:style="{
fontSize: '20px',
color: itemProps.checked ? 'yellow' : 'blue'
}"
>{{ item }}</span
>
</template>
</TodoItem>
</ul>
</div>
</template>
<script>
import TodoItem from "./TodoItem";
export default {
components: {
TodoItem
},
data() {
return {
info: "",
listData: []
};
},
methods: {
addItem() {
this.listData.push(this.info);
this.info = "";
}
}
};
</script>
<style scoped>
.toList {
margin: 20px;
}
</style>
================================================
FILE: vue2.0学习/slot与slot-scope用法/slot新语法/index.vue
================================================
<template>
<div class="helloSlot">
<h2>2.6 新语法</h2>
<SlotDemo>
<p>默认插槽：default slot</p>
<template v-slot:title>
<p>具名插槽：title slot1</p>
<p>具名插槽：title slot2</p>
</template>
<template v-slot:title>
<p>new具名插槽：title slot1</p>
<p>new具名插槽：title slot2</p>
</template>
<template v-slot:item="props">
<p>作用域插槽：item slot-scope {{ props }}</p>
</template>
</SlotDemo>
</div>
</template>
<script>
import Slot from "./slot";
export default {
components: {
SlotDemo: Slot
}
};
</script>
<style>
.helloSlot {
margin: 20px;
}
</style>
================================================
FILE: vue2.0学习/slot与slot-scope用法/slot新语法/slot.vue
================================================
<template>
<div>
<slot />
<slot name="title" />
<slot name="item" :propData="propData" />
</div>
</template>
<script>
export default {
data() {
return {
propData: {
value: "浪里行舟"
}
};
}
};
</script>
================================================
FILE: vue2.0学习/vue组件间通信/attrs listeners/childCom1.vue
================================================
// childCom1.vue
<template class="border">
<div>
<p>foo: {{ foo }}</p>
<p>childCom1的$attrs: {{ $attrs }}</p>
<child-com2 v-bind="$attrs"></child-com2>
</div>
</template>
<script>
const childCom2 = () => import("./childCom2.vue");
export default {
components: {
childCom2
},
inheritAttrs: false, // 可以关闭自动挂载到组件根元素上的没有在props声明的属性
props: {
foo: String // foo作为props属性绑定
},
created() {
console.log(this.$attrs); // { "boo": "Html", "coo": "CSS", "doo": "Vue", "title": "前端工匠" }
}
};
</script>
<style scoped>
.border {
border: 1px solid red;
}
</style>
================================================
FILE: vue2.0学习/vue组件间通信/attrs listeners/childCom2.vue
================================================
<template>
<div class="border">
<p>boo: {{ boo }}</p>
<p>childCom2: {{ $attrs }}</p>
<child-com3 v-bind="$attrs"></child-com3>
</div>
</template>
<script>
const childCom3 = () => import("./childCom3.vue");
export default {
components: {
childCom3
},
inheritAttrs: false,
props: {
boo: String
},
created() {
console.log(this.$attrs); // {"coo": "CSS", "doo": "Vue", "title": "前端工匠" }
}
};
</script>
<style scoped>
.border {
border: 1px solid red;
}
</style>
================================================
FILE: vue2.0学习/vue组件间通信/attrs listeners/childCom3.vue
================================================
<template>
<div class="border">
<p>childCom3: {{ $attrs }}</p>
</div>
</template>
<script>
export default {
props: {
coo: String,
title: String
}
};
</script>
<style scoped>
.border {
border: 1px solid;
}
</style>
================================================
FILE: vue2.0学习/vue组件间通信/attrs listeners/index.vue
================================================
<template>
<div>
<h2>浪里行舟</h2>
<child-com1
:foo="foo"
:boo="boo"
:coo="coo"
:doo="doo"
title="前端工匠"
></child-com1>
</div>
</template>
<script>
const childCom1 = () => import("./childCom1.vue");
export default {
components: { childCom1 },
data() {
return {
foo: "Javascript",
boo: "Html",
coo: "CSS",
doo: "Vue"
};
}
};
</script>
================================================
FILE: vue2.0学习/vue组件间通信/attrs listeners/listeners/child1.vue
================================================
<template>
<div>
<p class="title" @click="$listeners.other">父组件</p>
<child2 v-on="$listeners"></child2>
</div>
</template>
<script>
import Child2 from "./child2.vue";
export default {
components: {
Child2
},
data() {
return {};
},
created() {
console.log("child1", this.$listeners); // {changeData: ƒ, another: ƒ, other: ƒ}
}
};
</script>
<style>
.title {
margin-left: 10px;
font-size: 16px;
}
</style>
================================================
FILE: vue2.0学习/vue组件间通信/attrs listeners/listeners/child2.vue
================================================
<template>
<div class="hello">
<p @click="$listeners.changeData('change')">孙子组件</p>
<p @click="$listeners.another()">触发祖组件的another事件</p>
<p @click="$listeners.other()">触发祖组件的other事件</p>
</div>
</template>
<script>
export default {
created() {
console.log("child2", this.$listeners); // {changeData: ƒ, another: ƒ, other: ƒ}
}
};
</script>
================================================
FILE: vue2.0学习/vue组件间通信/attrs listeners/listeners/index.vue
================================================
<template>
<div class="hello">
<div class="msg">{{ firstMsg }}</div>
<child1
@changeData="changeData"
@another="anotherEvent"
@other="otherEvent"
></child1>
</div>
</template>
<script>
import Child1 from "./child1.vue";
export default {
components: {
Child1
},
data() {
return {
firstMsg: "祖组件"
};
},
methods: {
changeData(params) {
this.firstMsg = params;
},
anotherEvent() {
alert("another");
},
otherEvent() {
alert("other");
}
}
};
</script>
<style>
.hello {
margin: 20px;
}
.msg {
font-size: 20px;
font-weight: bold;
}
</style>
================================================
FILE: vue2.0学习/vue组件间通信/eventBus/eventBus.html
================================================
// 用于跨组件通知(不复杂的项目可以使用这种方式)
// Vue.prototype.$bus = new Vue();
// Son2组件和Grandson1相互通信
// mounted() {
// this.$bus.$on("my", data => {
// console.log(data);
// });
// },
// mounted() {
// this.$nextTick(() => {
// this.$bus.$emit("my", "我是Grandson1");
// });
// },
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="app">
<brother1></brother1>
<brother2></brother2>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
// 评级组件通信 可以通过共同的父亲传参
// 一个全局的发布订阅的方式
// eventBus 比较适合 简单的数据流
Vue.prototype.$bus = new Vue()
Vue.component('brother1', {
template: `<div>brother1</div>`,
mounted() {
this.$bus.$on('吃', food => {
console.log(food)
})
}
})
Vue.component('brother2', {
template: `<div>brother2</div>`,
mounted() {
this.$bus.$emit('吃', '苹果')
}
})
let vm = new Vue({
el: '#app'
})
</script>
</body>
</html>
================================================
FILE: vue2.0学习/vue组件间通信/props传递一个函数/Props.vue
================================================
<template>
<div>
name: {{ name }}
<br />
type: {{ type }}
<br />
list: {{ list }}
<br />
isVisible: {{ isVisible }}
<br />
<button @click="handleClick">change type</button>
</div>
</template>
<script>
export default {
name: "PropsDemo",
// inheritAttrs: false,
// props: ['name', 'type', 'list', 'isVisible'],
props: {
name: String,
type: {
validator: function(value) {
// 这个值必须匹配下列字符串中的一个
return ["success", "warning", "danger"].includes(value);
}
},
list: {
type: Array,
// 对象或数组默认值必须从一个工厂函数获取
default: () => []
},
isVisible: {
type: Boolean,
default: false
},
onChange: {
type: Function,
default: () => {}
}
},
methods: {
handleClick() {
// 不要这么做、不要这么做、不要这么做
// this.type = "warning";
// 可以，还可以更好
this.onChange(this.type === "success" ? "warning" : "success");
}
}
};
</script>
================================================
FILE: vue2.0学习/vue组件间通信/props传递一个函数/index.vue
================================================
<template>
<div>
<Props
name="Hello Vue！"
:type="type"
:is-visible="false"
:on-change="handlePropChange" // 通过一般属性实现父向子通信；通过函数属性实现子向父通信
title="属性Demo"
class="test1"
:class="['test2']"
:style="{ marginTop: '20px' }"
style="margin-top: 10px"
/>
</div>
</template>
<script>
import Props from "./Props";
export default {
components: {
Props
},
data: () => {
return {
name: "",
type: "success",
bigPropsName: "Hello world!"
};
},
methods: {
handlePropChange(val) {
this.type = val;
}
}
};
</script>
================================================
FILE: vue2.0学习/vue组件间通信/provide inject/ChildrenA.vue
================================================
<template>
<div>
<div>
<h1>A 结点</h1>
<button @click="() => changeColor()">改变color</button>
<ChildrenB />
<ChildrenC />
</div>
</div>
</template>
<script>
import Vue from "vue";
import ChildrenB from "./ChildrenB";
import ChildrenC from "./ChildrenC";
export default {
components: {
ChildrenB,
ChildrenC
},
data() {
return {
color: "blue"
};
},
// provide() {
// return {
// theme: {
// color: this.color //绑定并不是可响应的
// }
// };
// },
provide() {
return {
theme: this
};
},
methods: {
changeColor(color) {
if (color) {
this.color = color;
} else {
this.color = this.color === "blue" ? "red" : "blue";
}
}
}
};
</script>
<style scoped></style>
================================================
FILE: vue2.0学习/vue组件间通信/provide inject/ChildrenA_a.vue
================================================
<template>
<div>
<div>
<h1>A 结点</h1>
<button @click="() => changeColor()">改变color</button>
<ChildrenB />
<ChildrenC />
</div>
</div>
</template>
<script>
import Vue from "vue";
import ChildrenB from "./ChildrenB";
import ChildrenC from "./ChildrenC";
export default {
components: {
ChildrenB,
ChildrenC
},
// provide() {
// return {
// theme: {
// color: this.color //绑定并不是可响应的
// }
// };
// },
// 使用2.6最新API Vue.observable 优化响应式 provide
provide() {
this.theme = Vue.observable({
color: "blue"
});
return {
theme: this.theme
};
},
methods: {
changeColor(color) {
if (color) {
this.theme.color = color;
} else {
this.theme.color = this.theme.color === "blue" ? "red" : "blue";
}
}
}
};
</script>
<style scoped></style>
================================================
FILE: vue2.0学习/vue组件间通信/provide inject/ChildrenB.vue
================================================
<template>
<div class="border1">
<h2>B 结点</h2>
<ChildrenD />
<ChildrenE />
</div>
</template>
<script>
import ChildrenD from "./ChildrenD";
import ChildrenE from "./ChildrenE";
export default {
components: {
ChildrenD,
ChildrenE
}
};
</script>
================================================
FILE: vue2.0学习/vue组件间通信/provide inject/ChildrenC.vue
================================================
<template>
<div class="border1">
<h2>C 结点</h2>
<ChildrenF />
</div>
</template>
<script>
import ChildrenF from "./ChildrenF";
export default {
components: {
ChildrenF
}
};
</script>
================================================
FILE: vue2.0学习/vue组件间通信/provide inject/ChildrenD.vue
================================================
<template>
<div class="border2">
<h3 :style="{ color: theme.color }">D 结点</h3>
<button @click="handleClick">改变color为green</button>
</div>
</template>
<script>
export default {
inject: {
theme: {
default: () => ({})
}
},
methods: {
handleClick() {
if (this.theme.changeColor) {
this.theme.changeColor("green");
}
}
}
};
</script>
================================================
FILE: vue2.0学习/vue组件间通信/provide inject/ChildrenE.vue
================================================
<template>
<div class="border2">
<h3 :style="{ color: theme1.color }">E 结点</h3>
</div>
</template>
<script>
export default {
inject: {
theme1: {
from: "theme",
default: () => ({})
}
}
};
</script>
================================================
FILE: vue2.0学习/vue组件间通信/provide inject/ChildrenF.vue
================================================
<template functional>
<div class="border2">
<h3 :style="{ color: injections.theme.color }">F 结点</h3>
</div>
</template>
<script>
export default {
inject: {
theme: {
//函数式组件取值不一样
default: () => ({})
}
}
};
</script>
================================================
FILE: vue2.0学习/vue组件间通信/provide inject/index.vue
================================================
<template>
<div>
<ChildrenA />
<!-- <ChildrenA1 /> -->
</div>
</template>
<script>
import ChildrenA from "./ChildrenA";
// import ChildrenA1 from "./ChildrenA_a";
export default {
components: {
ChildrenA
// ChildrenA1
}
};
</script>
<style>
.border,
.border1,
.border2 {
border: 1px solid #000;
padding: 10px 0;
margin: 10px 10px 0;
}
.border1 {
border-color: #ccc;
}
.border2 {
border-color: #eee;
}
</style>
================================================
FILE: vue2.0学习/watch和computed/computed.vue
================================================
<template>
<div>
{{ fullName }}
<div>firstName: <input v-model="firstName" /></div>
<div>lastName: <input v-model="lastName" /></div>
</div>
</template>
<script>
export default {
data: function() {
return {
firstName: "Foo",
lastName: "Bar"
};
},
computed: {
fullName: function() {
return this.firstName + " " + this.lastName;
}
},
watch: {
fullName: function(val, oldVal) {
console.log("new: %s, old: %s", val, oldVal);
}
}
};
</script>
================================================
FILE: vue2.0学习/watch和computed/index.vue
================================================
<template>
<div class="attr">
<h1>watch属性</h1>
<h2>{{ $data }}</h2>
<button @click="() => (a += 1)">修改a的值</button>
<br />
<br />
<Watch />
</div>
</template>
<script>
import Watch from "./watch";
export default {
components: {
Watch
},
data() {
return {
a: 1,
b: { c: 2, d: 3 },
e: {
f: {
g: 4
}
},
h: []
};
},
watch: {
a: function(val, oldVal) {
this.b.c += 1;
console.log("new: %s, old: %s", val, oldVal);
},
"b.c": function(val, oldVal) {
this.b.d += 1;
console.log("new: %s, old: %s", val, oldVal);
},
"b.d": function(val, oldVal) {
this.e.f.g += 1;
console.log("new: %s, old: %s", val, oldVal);
},
e: {
handler: function(val, oldVal) {
this.h.push("浪里行舟");
console.log("new: %s, old: %s", val, oldVal);
},
deep: true
}
}
};
</script>
<style scoped>
.attr {
margin: 20px;
}
</style>
================================================
FILE: vue2.0学习/watch和computed/watch.vue
================================================
<template>
<div>
{{ fullName }}
<div>firstName: <input v-model="firstName" /></div>
<div>lastName: <input v-model="lastName" /></div>
</div>
</template>
<script>
import { setTimeout } from "timers";
export default {
data: function() {
return {
firstName: "浪里行舟",
lastName: "前端工匠",
fullName: "浪里行舟 前端工匠"
};
},
watch: {
firstName: function(val) {
clearTimeout(this.firstTimeout);
this.firstTimeOut = setTimeout(() => {
this.fullName = val + " " + this.lastName;
}, 1000);
},
lastName: function(val) {
clearTimeout(this.lastTimeout);
this.lastTimeOut = setTimeout(() => {
this.fullName = this.firstName + " " + val;
}, 1000);
}
}
};
</script>
================================================
FILE: vue2.0学习/内部运行机制/virtual dom/diff算法/createElement.js
================================================
function createElement(vnode) {
var tag = vnode.tag // 'ul'
var attrs = vnode.attrs || {}
var children = vnode.children || []
if (!tag) {
return null
}
// 创建真实的 DOM 元素
var elem = document.createElement(tag)
// 属性
var attrName
for (attrName in attrs) {
if (attrs.hasOwnProperty(attrName)) {
// 给 elem 添加属性
elem.setAttribute(attrName, attrs[attrName])
}
}
// 子元素
children.forEach(function (childVnode) {
// 给 elem 添加子元素
elem.appendChild(createElement(childVnode)) // 递归
})
// 返回真实的 DOM 元素
return elem
}
================================================
FILE: vue2.0学习/内部运行机制/virtual dom/diff算法/updateChildren.js
================================================
function updateChildren(vnode, newVnode) {
var children = vnode.children || []
var newChildren = newVnode.children || []
children.forEach(function (childVnode, index) {
var newChildVnode = newChildren[index]
if (childVnode.tag === newChildVnode.tag) {
// 深层次对比，递归
updateChildren(childVnode, newChildVnode)
} else {
// 替换
replaceNode(childVnode, newChildVnode)
}
})
}
function replaceNode(vnode, newVnode) {
var elem = vnode.elem // 真实的 DOM 节点
var newElem = createElement(newVnode)
// 替换
}
================================================
FILE: vue2.0学习/内部运行机制/virtual dom/snabbdom/demo.html
================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="container"></div>
<button id="btn-change">change</button>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-class.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-props.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-style.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-eventlisteners.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/h.js"></script>
<script type="text/javascript">
var snabbdom = window.snabbdom
// snabbdom核心API:h函数、patch函数
// h（'<标签名>',{..属性..},[..子元素..]）
// h（'<标签名>',{..属性..},'...'）
// patch（container，vnode）
// patch（vnode，newVnode）
// 定义 patch
var patch = snabbdom.init([
snabbdom_class,
snabbdom_props,
snabbdom_style,
snabbdom_eventlisteners
])
// 定义 h
var h = snabbdom.h
var container = document.getElementById('container')
// h函数生成 vnode
var vnode = h('ul#list', {}, [
h('li.item', {}, 'Item 1'),
h('li.item', {}, 'Item 2')
])
patch(container, vnode)
document
.getElementById('btn-change')
.addEventListener('click', function() {
// 生成 newVnode
var newVnode = h('ul#list', {}, [
h('li.item', {}, 'Item 1'),
h('li.item', {}, 'Item B'),
h('li.item', {}, 'Item 3')
])
patch(vnode, newVnode)
})
</script>
<script>
var element = {
tag: 'ul', // 节点标签名
attrs: {
// DOM的属性
id: 'list'
},
children: [
// 该节点的子节点
{
tag: 'li',
attrs: {
className: 'item'
},
children: ['item1']
},
{
tag: 'li',
attrs: {
className: 'item'
},
children: ['item2']
}
]
}
</script>
</body>
</html>
================================================
FILE: vue2.0学习/内部运行机制/响应式原理/Array.js
================================================
// Object.defineProperty 只能适用于对象
// 如果是数组，通过重写函数的方式解决了这个问题
function render() {
console.log('模拟视图渲染')
}
let obj = [1, 2, 3]
let methods = ['pop', 'shift', 'unshift', 'sort', 'reverse', 'splice', 'push']
// 先获取到原来的原型上的方法
let arrayProto = Array.prototype
// 创建一个自己的原型 并且重写methods这些方法
let proto = Object.create(arrayProto)
methods.forEach(method => {
proto[method] = function() {
// AOP
arrayProto[method].call(this, ...arguments)
render()
}
})
function observer(obj) {
// 把所有的属性定义成set/get的方式
if (Array.isArray(obj)) {
obj.__proto__ = proto
return
}
if (typeof obj == 'object') {
for (let key in obj) {
defineReactive(obj, key, obj[key])
}
}
}
function defineReactive(data, key, value) {
observer(value)
Object.defineProperty(data, key, {
get() {
return value
},
set(newValue) {
observer(newValue)
if (newValue !== value) {
render()
value = newValue
}
}
})
}
observer(obj)
function $set(data, key, value) {
defineReactive(data, key, value)
}
obj.push(123, 55)
console.log(obj)
// 一些注意点
// $set如何更新数组
// function $set(data, key, value) {
// if (Array.isArray(data)) {
// return data.splice(key, 1, value) // 当前用户调用了splice方法
// }
// defineReactive(data, key, value)
// }
// $set(obj, 0, 100) // 不支持数组的长度变化 也不支持数组的内容发生变化 必须通过上面的方法来触发更新 或者替换成一个新的数组比如obj.length--或者 obj[1]=2都是无效的
================================================
FILE: vue2.0学习/内部运行机制/响应式原理/Object.js
================================================
// Object.defineProperty如何实现对象响应式变化
function render() {
console.log('模拟视图渲染')
}
let data = {
name: '浪里行舟',
location: { x: 100, y: 100 }
}
observe(data)
function observe(obj) {
// 判断类型
if (!obj || typeof obj !== 'object') {
return
}
Object.keys(obj).forEach(key => {
defineReactive(obj, key, obj[key])
})
function defineReactive(obj, key, value) {
// 递归子属性
observe(value)
Object.defineProperty(obj, key, {
enumerable: true, //可枚举
configurable: true, //可配置
get: function reactiveGetter() {
console.log('get', value) // 监听
return value
},
set: function reactiveSetter(newVal) {
observe(newVal) //如果赋值是一个对象，也要递归子属性
if (newVal !== value) {
console.log('set', newVal) // 监听
render()
value = newVal
}
}
})
}
}
data.location = {
x: 1000,
y: 1000
} //set {x: 1000,y: 1000} 模拟视图渲染
data.name // get 浪里行舟
================================================
FILE: vue2.0学习/内部运行机制/响应式原理/Proxy.js
================================================
// 使用proxy来实现数据的响应式变化
// 可以支持数组，而且不用区分是对象还是数组
// 兼容性 vue 3.0 会采用如果支持proxy 就使用proxy 不支持就还是Object.defineProperty
function render() {
console.log('模拟视图的更新')
}
let obj = {
name: '前端工匠',
age: { age: 100 },
arr: [1, 2, 3]
}
let handler = {
get(target, key) {
// 如果取的值是对象就在对这个对象进行数据劫持
if (typeof target[key] == 'object' && target[key] !== null) {
return new Proxy(target[key], handler)
}
return Reflect.get(target, key)
},
set(target, key, value) {
if (key === 'length') return true
render()
return Reflect.set(target, key, value)
}
}
let proxy = new Proxy(obj, handler)
proxy.age.name = '浪里行舟' // 支持新增属性
console.log(proxy.age.name) // 模拟视图的更新 浪里行舟
proxy.arr[0] = '浪里行舟' //支持数组的内容发生变化
console.log(proxy.arr) // 模拟视图的更新 ['浪里行舟', 2, 3 ]
proxy.arr.length-- // 无效
================================================
FILE: vue2.0学习/基于axios接口封装/README.md
================================================
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
## api接口的模块化管理规范（基于axios）
单独模块管理接口，其中http.js文件就是封装好的接口请求库
```
// personal.js文件
import axios from './http';
export default {
login() {
return axios.post('/login');
},
// ...
};
```
定义统一接口请求的入口 api.js
```
// api.js文件
import personal from './personal';
export default {
personal
};
```
最后注入到vue的原型上
```
// main.js
import api from './api/api.js';
Vue.prototype.$api=api;
```
这样就可以在组件中使用了
```
//=>在组件中使用
methods: {
login() {
this.$api.personal.login().then(result => {
console.log(result) // 直接就可以调用api,无需再引入api.js文件
// 业务逻辑
})
}
}
```
**本代码中提供了两种封装方式：axios和fetch，分别对应http.js和request.js文件**，项目中主要以前者为主
================================================
FILE: vue2.0学习/基于axios接口封装/babel.config.js
================================================
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
================================================
FILE: vue2.0学习/基于axios接口封装/package.json
================================================
{
"name": "demo",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.19.2",
"core-js": "^3.6.4",
"qs": "^6.9.1",
"vue": "^2.6.11"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.2.0",
"@vue/cli-plugin-eslint": "~4.2.0",
"@vue/cli-service": "~4.2.0",
"babel-eslint": "^10.0.3",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.1.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
================================================
FILE: vue2.0学习/基于axios接口封装/public/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
================================================
FILE: vue2.0学习/基于axios接口封装/src/App.vue
================================================
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<div>浪里行舟</div>
</div>
</template>
<script>
export default {
name: 'App',
methods: {
add() {
this.$api.vote.voteAdd() // 直接就可以调用api,无需再引入api.js文件
}
}
}
</script>
<style></style>
================================================
FILE: vue2.0学习/基于axios接口封装/src/api/api.js
================================================
// 这里数据请求的唯一入口
import personal from './personal'
import vote from './vote'
export default{
personal,
vote
}
================================================
FILE: vue2.0学习/基于axios接口封装/src/api/http.js
================================================
// 基于axios实现接口请求库的封装
import axios from 'axios'
import qs from 'qs' // 引入qs模块，用来序列化post类型的数据
// 根据环境变量区分接口的默认地址
switch (process.env.NODE_ENV) {
case 'production':
axios.defaults.baseURL = 'http://api.zhufengpeixun.cn'
break
case 'test':
axios.defaults.baseURL = 'http://192.168.20.12:8080'
break
default:
axios.defaults.baseURL = 'http://127.0.0.1:3000'
}
// 设置超时请求时间
axios.defaults.timeout = 10000
// 设置CORS跨域允许携带资源凭证
axios.defaults.withCredentials = true
// 设置POST请求头：告知服务器请求主体的数据格式
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.transformRequest = data => qs.stringify(data)
// 设置请求拦截器
axios.interceptors.request.use(
config => {
// TOKEN校验（JWT）,接收服务器返回的token，存储到 vuex本地存储中，每一次向服务器发请求，我们应该把token带上
const token = localStorage.getItem('token')
token && (config.headers.Authorization = token)
return config
},
error => {
return Promise.reject(error)
}
)
// 设置响应拦截器
axios.defaults.validateStatus = status => {
// 自定义响应成功的HTTP状态码
return /^(2|3)\d{2}$/.test(status)
}
axios.interceptors.response.use(
response => {
// 只返回响应主体中的信息（部分公司根据需求会进一步完善，例如指定服务器返回的CODE值来指定成功还是失败）
return response.data
},
error => {
if (error.response) {
switch (error.response.status) {
case 400:
error.message = '请求错误(400)'
break
case 401: // 当前请求需要用户验证（一般是未登录）
error.message = '未授权，请登录(401)'
break
case 403: // 服务器已经理解请求，但是拒绝执行它（一般是TOKEN过期）
error.message = '拒绝访问(403)'
localStorage.removeItem('token')
// 跳转到登录页
break
}
return Promise.reject(error.response)
} else {
// 断网处理
if (!window.navigator.onLine) {
// 断开网络了，可以让其跳转到断网页面
return
}
return Promise.reject(error)
}
}
)
export default axios
================================================
FILE: vue2.0学习/基于axios接口封装/src/api/personal.js
================================================
// 接口模块一
import axios from './http'
function login(){
return axios.post('/login');
}
export default {login}
================================================
FILE: vue2.0学习/基于axios接口封装/src/api/request.js
================================================
// 基于fetch实现接口请求库的封装
import qs from 'qs';
/*
* 根据环境变量进行接口区分
*/
let baseURL = '';
let baseURLArr = [{
type: 'development',
url: 'http://127.0.0.1:9000'
}, {
type: 'test',
url: 'http://192.168.20.15:9000'
}, {
type: 'production',
url: 'http://api.zhufengpeixun.cn'
}];
baseURLArr.forEach(item => {
if (process.env.NODE_ENV === item.type) {
baseURL = item.url;
}
});
export default function request(url, options = {}) {
url = baseURL + url;
/*
* GET系列请求的处理
*/
!options.method ? options.method = 'GET' : null;
if (options.hasOwnProperty('params')) {
if (/^(GET|DELETE|HEAD|OPTIONS)$/i.test(options.method)) {
const ask = url.includes('?') ? '&' : '?';
url += `${ask}${qs.stringify(params)}`;
}
delete options.params;
}
/*
* 合并配置项
*/
options = Object.assign({
// 允许跨域携带资源凭证
credentials: 'include',// 如果是same-origin则同源可以 omit都拒绝
// 设置请求头
headers: {}
}, options);
options.headers.Accept = 'application/json';
/*
* token的校验
*/
const token = localStorage.getItem('token');
token && (options.headers.Authorization = token);
/*
* POST请求的处理
*/
if (/^(POST|PUT)$/i.test(options.method)) {
!options.type ? options.type = 'urlencoded' : null;
if (options.type === 'urlencoded') {
options.headers['Content-Type'] = 'application/x-www-form-urlencoded';
options.body = qs.stringify(options.body);
}
if (options.type === 'json') {
options.headers['Content-Type'] = 'application/json';
options.body = JSON.stringify(options.body);
}
}
return fetch(url, options).then(response => {
// 返回的结果可能是非200状态码 这边返回也有可能是失败的状态码
if (!/^(2|3)\d{2}$/.test(response.status)) {
switch (response.status) {
case 401: // 当前请求需要用户验证（一般是未登录）
break;
case 403: // 服务器已经理解请求，但是拒绝执行它（一般是TOKEN过期）
localStorage.removeItem('token');
// 跳转到登录页
break;
case 404: // 请求失败，请求所希望得到的资源未被在服务器上发现
break;
}
return Promise.reject(response);
}
return response.json();
}).catch(error => {
// 断网处理
if (!window.navigator.onLine) {
// 断开网络了，可以让其跳转到断网页面
return;
}
return Promise.reject(error);
});
}
================================================
FILE: vue2.0学习/基于axios接口封装/src/api/vote.js
================================================
// 接口模块二
import axios from './http'
function voteAdd() {
return axios.post('/insertVote', {
xxx: 'xxx'
})
}
export default {voteAdd}
================================================
FILE: vue2.0学习/基于axios接口封装/src/main.js
================================================
import Vue from 'vue'
import App from './App.vue'
import api from './api/api'
Vue.config.productionTip = false
Vue.prototype.$api = api
new Vue({
render: h => h(App),
}).$mount('#app')
================================================
FILE: vue2.0学习/实现模态框/sync/demo.vue
================================================
<template>
<div v-if="show" class="border">
<div>子组件msg：{{ msg }}</div>
<div>子组件数组：{{ arr }}</div>
<p>子组件对象：{{ obj.name }}</p>
<button @click="closeModel">关闭model框</button>
<button @click="$emit('update:msg', '浪里行舟')">
改变文字
</button>
<button @click="arr.push('前端工匠')">改变数组</button>
<button @click="changeText">改变对象</button>
</div>
</template>
<script>
export default {
props: {
msg: {
type: String
},
show: {
type: Boolean
},
arr: {
type: Array //在子组件中改变传递过来数组将会影响到父组件的状态
},
obj: {
type: Object
}
},
methods: {
closeModel() {
this.$emit("update:show", false);
},
changeText() {
this.obj.name === "前端"
? (this.obj.name = "浪里行舟")
: (this.obj.name = "前端");
}
}
};
</script>
================================================
FILE: vue2.0学习/实现模态框/sync/index.vue
================================================
//v-model 毕竟不是给组件与组件之间通信而设计的双向绑定，无论从语意上和代码写法上都没有 .sync 直观和方便。
<template>
<div class="hello">
<div>
<p>父组件msg：{{ msg }}</p>
<p>父组件数组：{{ arr }}</p>
<p>父组件对象：{{ obj.name }}</p>
</div>
<button @click="show = true">打开model框</button>
<br />
<demo :show.sync="show" :msg.sync="msg" :arr="arr" :obj="obj"></demo>
</div>
</template>
<script>
import Demo from "./demo.vue";
export default {
name: "Hello",
components: {
Demo
},
data() {
return {
show: false,
msg: "模拟一个model框",
arr: [1, 2, 3],
obj: {
name: "厦门"
}
};
}
};
</script>
================================================
FILE: vue2.0学习/实现模态框/v-model/demo.vue
================================================
<template>
<div v-if="value">
<p>这是一个Model框</p>
<div>子组件value：{{ value }}</div>
<button @click="closeModel">关闭model框</button>
</div>
</template>
<script>
export default {
props: {
value: {
type: Boolean
}
},
methods: {
closeModel() {
this.$emit("input", false);
}
}
};
</script>
================================================
FILE: vue2.0学习/实现模态框/v-model/index.vue
================================================
//这是一个模态框的基本雏形，可以在父组件通过 v-model 来进行 model 框和父组件之间的显示交互。
//通过子组件看出通过props接收了value值，当点击关闭的时候还是通过$emit事件触发input事件，然后通过传入 false 参数。
<template>
<div class="hello">
<div>
<p>父组件msg：{{ msg }}</p>
</div>
<button @click="show = true">打开model框</button>
<br />
<demo v-model="show"></demo>
</div>
</template>
<script>
import Demo from "./demo.vue";
export default {
name: "Hello",
components: {
Demo
},
data() {
return {
show: false,
msg: "模拟一个model框"
};
}
};
</script>
================================================
FILE: vuex-demo/HelloWorld.vue
================================================
<template>
<div class="hello">
<p>click {{count}} times,count is {{evenOrOdd}}</p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
<button @click="incrementIfOdd">increment if odd</button>
<button @click="incrementAsync">increment async</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
computed: {
count() {
return this.$store.state.count;
},
evenOrOdd() {
return this.$store.getters.evenOrOdd;
}
},
methods: {
increment() {
this.$store.commit("INCREMENT");
},
decrement() {
this.$store.commit("DECREMENT");
},
// 只有是奇数才加1
incrementIfOdd() {
this.$store.dispatch("incrementIfOdd"); //触发store中对应的action调用
},
// 过两秒才加1
incrementAsync() {
this.$store.dispatch("incrementAsync");
}
}
};
</script>
<style scoped>
</style>
================================================
FILE: vuex-demo/main.js
================================================
import Vue from 'vue'
import store from './store'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,//注册上vuex的store: 所有组件对象都多一个属性$store
components: { App },
template: '<App/>'
})
================================================
FILE: vuex-demo/store.js
================================================
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {// 包含了多个直接更新state函数的对象
INCREMENT(state) {
state.count = state.count + 1;
},
DECREMENT(state) {
state.count = state.count - 1;
}
},
getters: { // 当读取属性值时自动调用并返回属性值
evenOrOdd(state) {
return state.count % 2 === 0 ? "偶数" : "奇数";
}
},
actions: { // 包含了多个对应事件回调函数的对象
incrementIfOdd({ commit, state }) { // 带条件的action
if (state.count % 2 === 1) {
commit('INCREMENT')
}
},
incrementAsync({ commit }) { //异步的action
setInterval(() => {
commit('INCREMENT')
}, 2000);
}
}
})
export default store //用export default 封装代码，让外部可以引用
================================================
FILE: vuex-demo/优化后HelloWorld.vue
================================================
<template>
<div class="hello">
<p>click {{count}} times,count is {{evenOrOdd}}</p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
<button @click="incrementIfOdd">increment if odd</button>
<button @click="incrementAsync">increment async</button>
</div>
</template>
<script>
import { mapActions, mapGetters, mapState, mapMutations } from "vuex";
export default {
name: "HelloWorld",
computed: {
...mapState(["count"]),
...mapGetters(["evenOrOdd"])
// count() {
// return this.$store.state.count;
// },
// evenOrOdd() {
// return this.$store.getters.evenOrOdd;
// }
},
methods: {
...mapActions(["incrementIfOdd", "incrementAsync"]),
...mapMutations(["increment", "decrement"])
// increment() {// 函数名称要跟mutations中一致才可以
// 写成 ...mapMutations(["increment", "decrement"])
// this.$store.commit("INCREMENT");
// },
// decrement() {
// this.$store.commit("DECREMENT");
// },
// // 只有是奇数才加1
// incrementIfOdd() {
// this.$store.dispatch("incrementIfOdd"); //触发store中对应的action调用
// },
// // 过两秒才加1
// incrementAsync() {
// this.$store.dispatch("incrementAsync");// 函数名称要跟action中一致才可以
// 写成 ...mapActions(["incrementIfOdd", "incrementAsync"])
// }
}
};
</script>
<style scoped>
</style>
================================================
FILE: vuex-demo/优化后store.js
================================================
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {// 包含了多个直接更新state函数的对象
increment(state) {
state.count = state.count + 1;
},
decrement(state) {
state.count = state.count - 1;
}
},
getters: { // 当读取属性值时自动调用并返回属性值
evenOrOdd(state) {
return state.count % 2 === 0 ? "偶数" : "奇数";
}
},
actions: { // 包含了多个对应事件回调函数的对象
incrementIfOdd({ commit, state }) { // 带条件的action
if (state.count % 2 === 1) {
commit('increment')
}
},
incrementAsync({ commit }) { //异步的action
setInterval(() => {
commit('increment')
}, 2000);
}
}
})
export default store //用export default 封装代码，让外部可以引用
================================================
FILE: websocket/iframe流.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="clock"></div>
<iframe src="/clock" style="display:none"></iframe>
</body>
</html>
================================================
FILE: websocket/iframe流.js
================================================
//iframe流
let express = require('express')
let app = express()
app.use(express.static(__dirname))
app.get('/clock', function(req, res) {
setInterval(function() {
let date = new Date().toLocaleString()
res.write(`
<script type="text/javascript">
parent.document.getElementById('clock').innerHTML = "${date}";
</script>
`)
}, 1000)
})
app.listen(8080)
================================================
FILE: websocket/websocket.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>websocket</title>
</head>
<body>
<div id="clock"></div>
<script>
let clockDiv = document.getElementById('clock')
let socket = new WebSocket('ws://localhost:9999')
//当连接成功之后就会执行回调函数
socket.onopen = function() {
console.log('客户端连接成功')
//再向服务 器发送一个消息
socket.send('hello') //客户端发的消息内容 为hello
}
//绑定事件是用加属性的方式
socket.onmessage = function(event) {
clockDiv.innerHTML = event.data
console.log('收到服务器端的响应', event.data)
}
</script>
</body>
</html>
================================================
FILE: websocket/websocket.js
================================================
let express = require('express')
let app = express()
app.use(express.static(__dirname))
//http服务器
app.listen(3000)
let WebSocketServer = require('ws').Server
//用ws模块启动一个websocket服务器,监听了9999端口
let wsServer = new WebSocketServer({ port: 9999 })
//监听客户端的连接请求 当客户端连接服务器的时候，就会触发connection事件
//socket代表一个客户端,不是所有客户端共享的，而是每个客户端都有一个socket
wsServer.on('connection', function(socket) {
//每一个socket都有一个唯一的ID属性
console.log(socket)
console.log('客户端连接成功')
//监听对方发过来的消息
socket.on('message', function(message) {
console.log('接收到客户端的消息', message)
socket.send('服务器回应:' + message)
})
})
================================================
FILE: websocket/轮询.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="clock"></div>
<script>
let clockDiv = document.getElementById('clock');
setInterval(function(){
let xhr = new XMLHttpRequest;
xhr.open('GET','/clock',true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText);
clockDiv.innerHTML = xhr.responseText;
}
}
xhr.send();
},1000);
</script>
</body>
</html>
================================================
FILE: websocket/轮询.js
================================================
//轮训
let express = require('express')
let app = express()
app.use(express.static(__dirname))
app.get('/clock', function(req, res) {
res.end(new Date().toLocaleString())
})
app.listen(8080)
================================================
FILE: websocket/长轮询.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="clock"></div>
<script>
let clockDiv = document.getElementById('clock')
function send() {
let xhr = new XMLHttpRequest()
xhr.open('GET', '/clock', true)
xhr.timeout = 2000 // 超时时间，单位是毫秒
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
//如果返回成功了，则显示结果
clockDiv.innerHTML = xhr.responseText
}
//不管成功还是失败都会发下一次请求
send()
}
}
xhr.ontimeout = function() {
send()
}
xhr.send()
}
send()
</script>
</body>
</html>
================================================
FILE: websocket/长轮询.js
================================================
//长轮训
let express = require('express')
let app = express()
app.use(express.static(__dirname))
app.get('/clock', function(req, res) {
res.end(new Date().toLocaleString())
})
app.listen(8080)
================================================
FILE: 三栏布局/三栏布局--flexbox布局.html
================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layout</title>
<style media="screen">
html * {
padding: 0;
margin: 0;
}
.layout article div {
min-height: 150px;
}
</style>
</head>
<body>
<!--flexbox -->
<section class="layout flexbox">
<style>
.layout.flexbox .left-center-right{
display: flex;
}
.layout.flexbox .left {
width: 300px;
background: red;
}
.layout.flexbox .center {
background: yellow;
flex: 1;
}
.layout.flexbox .right {
width: 300px;
background: blue;
}
</style>
<h1>三栏布局</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>flexbox解决方案</h2>
1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
</div>
<div class="right"></div>
</article>
</section>
</body>
</html>
================================================
FILE: 三栏布局/三栏布局--grid布局.html
================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layout</title>
<style media="screen">
html * {
padding: 0;
margin: 0;
}
.layout article div {
min-height: 150px;
}
</style>
</head>
<body>
<!--网格布局-->
<section class="layout grid">
<style>
.layout.grid .left-center-right {
display: grid;
width: 100%;
grid-template-columns: 300px auto 300px;
grid-template-rows: 150px;
}
.layout.grid .left {
background: red;
}
.layout.grid .center {
background: yellow;
}
.layout.grid .right {
background: blue;
}
</style>
<h1>三栏布局</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>网格布局解决方案</h2>
1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
</div>
<div class="right"></div>
</article>
</section>
</body>
</html>
================================================
FILE: 三栏布局/三栏布局--浮动布局.html
================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layout</title>
<style media="screen">
html * {
padding: 0;
margin: 0;
}
.layout article div {
min-height: 150px;
}
</style>
</head>
<body>
<!--浮动布局 -->
<section class="layout float">
<style media="screen">
.layout.float .left {
float: left;
width: 300px;
background: red;
}
.layout.float .center {
background: yellow;
}
.layout.float .right {
float: right;
width: 300px;
background: blue;
}
</style>
<h1>三栏布局</h1>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h2>浮动解决方案</h2>
1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
</div>
</article>
</section>
</body>
</html>
================================================
FILE: 三栏布局/三栏布局--绝对布局.html
================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layout</title>
<style media="screen">
html * {
padding: 0;
margin: 0;
}
.layout article div {
min-height: 150px;
}
</style>
</head>
<body>
<!--绝对布局 -->
<section class="layout absolute">
<style>
.layout.absolute .left-center-right>div{
position: absolute;
}
.layout.absolute .left {
left:0;
width: 300px;
background: red;
}
.layout.absolute .center {
left: 300px;
right: 300px;
background: yellow;
}
.layout.absolute .right {
right: 0;
width: 300px;
background: blue;
}
</style>
<h1>三栏布局</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>绝对定位解决方案</h2>
1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
</div>
<div class="right"> 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案</div>
</article>
</section>
</body>
</html>
================================================
FILE: 三栏布局/三栏布局--表格布局.html
================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layout</title>
<style media="screen">
html * {
padding: 0;
margin: 0;
}
.layout article div {
min-height: 150px;
}
</style>
</head>
<body>
<!--表格布局-->
<section class="layout table">
<style>
.layout.table .left-center-right {
display: table;
height: 150px;
width: 100%;
}
.layout.table .left-center-right>div {
display: table-cell;
}
.layout.table .left {
width: 300px;
background: red;
}
.layout.table .center {
background: yellow;
}
.layout.table .right {
width: 300px;
background: blue;
}
</style>
<h1>三栏布局</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>表格布局解决方案</h2>
1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
</div>
<div class="right"></div>
</article>
</section>
</body>
</html>
================================================
FILE: 三栏布局/双飞翼布局.html
================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layout</title>
<style media="screen">
html * {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<style>
.container {
min-width: 600px;
}
.left {
float: left;
width: 200px;
height: 400px;
background: red;
margin-left: -100%;
}
.center {
float: left;
width: 100%;
height: 500px;
background: yellow;
}
.center .inner {
margin: 0 200px;
}
.right {
float: left;
width: 200px;
height: 400px;
background: blue;
margin-left: -200px;
}
</style>
<article class="container">
<div class="center">
<div class="inner">双飞翼布局</div>
</div>
<div class="left"></div>
<div class="right"></div>
</article>
</body>
</html>
================================================
FILE: 三栏布局/圣杯布局.html
================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layout</title>
<style media="screen">
html * {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<style>
.container {
padding-left: 220px;
padding-right: 220px;
}
.left {
float: left;
width: 200px;
height: 400px;
background: red;
margin-left: -100%;
position: relative;
left: -220px;
}
.center {
float: left;
width: 100%;
height: 500px;
background: yellow;
}
.right {
float: left;
width: 200px;
height: 400px;
background: blue;
margin-left: -200px;
position: relative;
right: -220px;
}
</style>
<article class="container">
<div class="center">
<h2>圣杯布局</h2>
</div>
<div class="left"></div>
<div class="right"></div>
</article>
</body>
</html>
================================================
FILE: 多种跨域方式/1.jsonp/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
function jsonp({ url, params, callback }) {
return new Promise((resolve, reject) => {
let script = document.createElement('script')
window[callback] = function(data) {
resolve(data)
document.body.removeChild(script)
}
params = { ...params, callback } // wd=b&callback=show
let arrs = []
for (let key in params) {
arrs.push(`${key}=${params[key]}`)
}
script.src = `${url}?${arrs.join('&')}`
document.body.appendChild(script)
})
}
jsonp({
url: 'http://localhost:3000/say',
params: { wd: 'Iloveyou' },
callback: 'show'
}).then(data => {
console.log(data)
})
</script>
</body>
</html>
================================================
FILE: 多种跨域方式/1.jsonp/server.js
================================================
let express = require('express')
let app = express()
app.get('/say', function(req, res) {
let { wd, callback } = req.query
console.log(wd)
console.log(callback)
res.end(`${callback}('我不爱你')`)
})
app.listen(3000)
================================================
FILE: 多种跨域方式/2.cors/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
let xhr = new XMLHttpRequest()
document.cookie = 'name=xiamen'// cookie不能跨域
xhr.withCredentials = true // 前端设置是否带cookie
xhr.open('PUT', 'http://localhost:4000/getData', true)
xhr.setRequestHeader('name', 'xiamen')
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
console.log(xhr.response)
console.log(xhr.getResponseHeader('name'))
}
}
}
xhr.send()
</script>
</body>
</html>
================================================
FILE: 多种跨域方式/2.cors/server1.js
================================================
let express = require('express');
let app = express();
app.use(express.static(__dirname));
app.listen(3000);
================================================
FILE: 多种跨域方式/2.cors/server2.js
================================================
let express = require('express')
let app = express()
let whitList = ['http://localhost:3000'] //设置白名单
app.use(function(req, res, next) {
let origin = req.headers.origin
if (whitList.includes(origin)) {
// 设置哪个源可以访问我
res.setHeader('Access-Control-Allow-Origin', origin)
// 允许携带哪个头访问我
res.setHeader('Access-Control-Allow-Headers', 'name')
// 允许哪个方法访问我
res.setHeader('Access-Control-Allow-Methods', 'PUT')
// 允许携带cookie
res.setHeader('Access-Control-Allow-Credentials', true)
// 预检的存活时间
res.setHeader('Access-Control-Max-Age', 6)
// 允许返回的头
res.setHeader('Access-Control-Expose-Headers', 'name')
if (req.method === 'OPTIONS') {
res.end() // OPTIONS请求不做任何处理
}
}
next()
})
app.put('/getData', function(req, res) {
console.log(req.headers)
res.setHeader('name', 'jw')
res.end('我不爱你')
})
app.get('/getData', function(req, res) {
console.log(req.headers)
res.end('我不爱你')
})
app.use(express.static(__dirname))
app.listen(4000)
================================================
FILE: 多种跨域方式/3.postMesssage/a.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<iframe src="http://localhost:4000/b.html" frameborder="0" id="frame" onload="load()"></iframe>
<script>
function load() {
let frame = document.getElementById('frame');
frame.contentWindow.postMessage('我爱你','http://localhost:4000');
window.onmessage = function (e) {
console.log(e.data);
}
}
</script>
</body>
</html>
================================================
FILE: 多种跨域方式/3.postMesssage/a.js
================================================
let express = require('express');
let app = express();
app.use(express.static(__dirname));
app.listen(3000);
================================================
FILE: 多种跨域方式/3.postMesssage/b.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
window.onmessage = function (e) {
console.log(e.data);
e.source.postMessage('我不爱你',e.origin)
}
</script>
</body>
</html>
================================================
FILE: 多种跨域方式/3.postMesssage/b.js
================================================
let express = require('express');
let app = express();
app.use(express.static(__dirname));
app.listen(4000);
================================================
FILE: 多种跨域方式/4.name/a.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
a和b是同域的 http://localhost:3000
c是独立的 http://localhost:4000
a获取c的数据
a先引用c c把值放到window.name,把a引用的地址改到b
<iframe src="http://localhost:4000/c.html" frameborder="0" onload="load()" id="iframe"></iframe>
<script>
let first = true
function load() {
if(first){
let iframe = document.getElementById('iframe');
iframe.src = 'http://localhost:3000/b.html';
first = false;
}else{
console.log(iframe.contentWindow.name);
}
}
</script>
</body>
</html>
================================================
FILE: 多种跨域方式/4.name/a.js
================================================
let express = require('express');
let app = express();
app.use(express.static(__dirname));
app.listen(3000);
================================================
FILE: 多种跨域方式/4.name/b.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
================================================
FILE: 多种跨域方式/4.name/b.js
================================================
let express = require('express');
let app = express();
app.use(express.static(__dirname));
app.listen(4000);
================================================
FILE: 多种跨域方式/4.name/c.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
window.name = '我不爱你'
</script>
</body>
</html>
================================================
FILE: 多种跨域方式/5.hash/a.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 路径后面的hash值可以用来通信 -->
<!-- 目的a想访问c -->
<!-- a给c传一个hash值 c收到hash值后 c把hash值传递给b b将结果放到a的hash值中-->
<iframe src="http://localhost:4000/c.html#iloveyou"></iframe>
<script>
window.onhashchange = function () {
console.log(location.hash);
}
</script>
</body>
</html>
================================================
FILE: 多种跨域方式/5.hash/a.js
================================================
let express = require('express');
let app = express();
app.use(express.static(__dirname));
app.listen(3000);
================================================
FILE: 多种跨域方式/5.hash/b.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
window.parent.parent.location.hash = location.hash
</script>
</body>
</html>
================================================
FILE: 多种跨域方式/5.hash/b.js
================================================
let express = require('express');
let app = express();
app.use(express.static(__dirname));
app.listen(4000);
================================================
FILE: 多种跨域方式/5.hash/c.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
console.log(location.hash);
let iframe = document.createElement('iframe');
iframe.src = 'http://localhost:3000/b.html#idontloveyou';
document.body.appendChild(iframe);
</script>
</body>
</html>
================================================
FILE: 多种跨域方式/6.domain/a.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 域名 一级域名二级域名 -->
<!-- www.baidu.com -->
<!-- viode.baidu.com -->
<!-- a是通过 http://a.zf1.cn:3000/a.html -->
helloa
<iframe src="http://b.zf1.cn:3000/b.html" frameborder="0" onload="load()" id="frame"></iframe>
<script>
document.domain = 'zf1.cn'
function load() {
console.log(frame.contentWindow.a);
}
</script>
</body>
</html>
================================================
FILE: 多种跨域方式/6.domain/a.js
================================================
let express = require('express');
let app = express();
app.use(express.static(__dirname));
app.listen(3000);
================================================
FILE: 多种跨域方式/6.domain/b.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
hellob
<script>
document.domain = 'zf1.cn'
var a = 100;
</script>
</body>
</html>
================================================
FILE: 多种跨域方式/6.domain/b.js
================================================
let express = require('express');
let app = express();
app.use(express.static(__dirname));
app.listen(4000);
================================================
FILE: 多种跨域方式/7.websocket/server.js
================================================
let express = require('express');
let app = express();
let WebSocket = require('ws');
let wss = new WebSocket.Server({port:3000});
wss.on('connection',function(ws) {
ws.on('message', function (data) {
console.log(data);
ws.send('我不爱你')
});
})
================================================
FILE: 多种跨域方式/7.websocket/socket.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 高级api 不兼容 socket.io(一般使用它)
let socket = new WebSocket('ws://localhost:3000');
socket.onopen = function () {
socket.send('我爱你');
}
socket.onmessage = function (e) {
console.log(e.data);
}
</script>
</body>
</html>
================================================
FILE: 多种跨域方式/8.nginx/a.js
================================================
var http = require('http');
var server = http.createServer();
var qs = require('querystring');
server.on('request', function(req, res) {
var params = qs.parse(req.url.substring(2));
// 向前台写cookie
res.writeHead(200, {
'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly' // HttpOnly:脚本无法读取
});
res.write(JSON.stringify(params));
res.end();
});
server.listen('8080');
console.log('Server is running at port 8080...');
================================================
FILE: 多种跨域方式/8.nginx/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
var xhr = new XMLHttpRequest();
// 前端开关：浏览器是否读写cookie
xhr.withCredentials = true;
// 访问nginx中的代理服务器
xhr.open('get', 'http://www.domain1.com:81/?user=admin', true);
xhr.send();
</script>
</body>
</html>
================================================
FILE: 多种跨域方式/9.node中间件代理/index.html
================================================
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Node中间件代理</title>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$.ajax({
url: 'http://localhost:3000',
type: 'post',
data: { name: 'xiamen', password: '123456' },
contentType: 'application/json;charset=utf-8',
success: function(result) {
console.log('result', result)
},
error: function(msg) {
console.log(msg)
}
})
</script>
</body>
</html>
================================================
FILE: 多种跨域方式/9.node中间件代理/server1.js
================================================
const http = require('http')
// 第一步：接受客户端请求
const server = http.createServer((request, response) => {
// 代理服务器，直接和浏览器直接交互，需要设置CORS 的首部字段
response.writeHead(200, {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': '*',
'Access-Control-Allow-Headers': 'Content-Type'
})
// 第二步：将请求转发给服务器
const proxyRequest = http
.request(
{
host: '127.0.0.1',
port: 4000,
url: '/',
method: request.method,
headers: request.headers
},
serverResponse => {
// 第三步：收到服务器的响应
var body = ''
serverResponse.on('data', chunk => {
body += chunk
})
serverResponse.on('end', () => {
console.log('The data is ' + body)
// 第四步：将响应结果转发给浏览器
response.end(body)
})
}
)
.end()
})
server.listen(3000, () => {
console.log('The proxyServer is running at http://localhost:3000')
})
================================================
FILE: 多种跨域方式/9.node中间件代理/server2.js
================================================
const http = require('http')
const data = { title: 'fontend', password: '123456' }
const server = http.createServer((request, response) => {
if (request.url === '/') {
response.end(JSON.stringify(data))
}
})
server.listen(4000, () => {
console.log('The server is running at http://localhost:4000')
})
================================================
FILE: 模块化/01_modular/01_全局function模式/module1.js
================================================
/**
* 全局函数模式: 将不同的功能封装成不同的全局函数
* 问题: Global被污染了, 很容易引起命名冲突
*/
//数据
let data = 'atguigu.com'
function foo() {
console.log('foo()')
}
function bar() {
console.log('bar()')
}
================================================
FILE: 模块化/01_modular/01_全局function模式/module2.js
================================================
let data2 = 'other data'
function foo() { //与另一个模块中的函数冲突了
console.log(`foo() ${data2}`)
}
================================================
FILE: 模块化/01_modular/01_全局function模式/test1.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01_全局function模式</title>
</head>
<body>
<script type="text/javascript" src="module1.js"></script>
<script type="text/javascript" src="module2.js"></script>
<script type="text/javascript">
foo()
bar()
</script>
</body>
</html>
================================================
FILE: 模块化/01_modular/02_namespace模式/module1.js
================================================
/**
* namespace模式: 简单对象封装
* 作用: 减少了全局变量
* 问题: 不安全(数据不是私有的, 外部可以直接修改)
*/
let myModule = {
data: 'atguigu.com',
foo() {
console.log(`foo() ${this.data}`)
},
bar() {
console.log(`bar() ${this.data}`)
}
}
================================================
FILE: 模块化/01_modular/02_namespace模式/module2.js
================================================
/**
* namespace模式: 简单对象封装
* 作用: 减少了全局变量
* 问题: 不安全(数据不是私有的)
*/
let myModule2 = {
data: 'atguigu.com2222',
foo() {
console.log(`foo() ${this.data}`)
},
bar() {
console.log(`bar() ${this.data}`)
}
}
================================================
FILE: 模块化/01_modular/02_namespace模式/test2.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02_namespace模式</title>
</head>
<body>
<script type="text/javascript" src="module2.js"></script>
<script type="text/javascript" src="module22.js"></script>
<script type="text/javascript">
myModule.foo()
myModule.bar()
myModule2.foo()
myModule2.bar()
myModule.data = 'other data' //能直接修改模块内部的数据
myModule.foo()
</script>
</body>
</html>
================================================
FILE: 模块化/01_modular/03_IIFE模式/module3.js
================================================
/**
* IIFE模式: 匿名函数自调用(闭包)
* IIFE : immediately-invoked function expression(立即调用函数表达式)
* 作用: 数据是私有的, 外部只能通过暴露的方法操作
* 问题: 如果当前这个模块依赖另一个模块怎么办?
*/
;(function(window) {
let data = 'www.baidu.com'
//操作数据的函数
function foo() {
//用于暴露有函数
console.log(`foo() ${data}`)
}
function bar() {
//用于暴露有函数
console.log(`bar() ${data}`)
otherFun() //内部调用
}
function otherFun() {
//内部私有的函数
console.log('otherFun()')
}
//暴露行为
window.myModule = { foo, bar }
})(window)
================================================
FILE: 模块化/01_modular/03_IIFE模式/test3.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>03_IIFE模式</title>
</head>
<body>
<script type="text/javascript" src="module3.js"></script>
<script type="text/javascript">
myModule.foo()
myModule.bar()
console.log(myModule.data) //undefined 不能访问模块内部数据
myModule.data = 'xxxx' //不是修改的模块内部的data
myModule.foo() //没有改变
</script>
</body>
</html>
================================================
FILE: 模块化/01_modular/04_IIFE模式增强/jquery-1.10.1.js
================================================
/*!
* jQuery JavaScript Library v1.10.1
* http://jquery.com/
*
* Includes Sizzle.js
* http://sizzlejs.com/
*
* Copyright 2005, 2013 jQuery Foundation, Inc. and other contributors
* Released under the MIT license
* http://jquery.org/license
*
* Date: 2013-05-30T21:49Z
*/
(function( window, undefined ) {
// Can't do this because several apps including ASP.NET trace
// the stack via arguments.caller.callee and Firefox dies if
// you try to trace through "use strict" call chains. (#13335)
// Support: Firefox 18+
//"use strict";
var
// The deferred used on DOM ready
readyList,
// A central reference to the root jQuery(document)
rootjQuery,
// Support: IE<10
// For `typeof xmlNode.method` instead of `xmlNode.method !== undefined`
core_strundefined = typeof undefined,
// Use the correct document accordingly with window argument (sandbox)
location = window.location,
document = window.document,
docElem = document.documentElement,
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,
// [[Class]] -> type pairs
class2type = {},
// List of deleted data cache ids, so we can reuse them
core_deletedIds = [],
core_version = "1.10.1",
// Save a reference to some core methods
core_concat = core_deletedIds.concat,
core_push = core_deletedIds.push,
core_slice = core_deletedIds.slice,
core_indexOf = core_deletedIds.indexOf,
core_toString = class2type.toString,
core_hasOwn = class2type.hasOwnProperty,
core_trim = core_version.trim,
// Define a local copy of jQuery
jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
},
// Used for matching numbers
core_pnum = /[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,
// Used for splitting on whitespace
core_rnotwhite = /\S+/g,
// Make sure we trim BOM and NBSP (here's looking at you, Safari 5.0 and IE)
rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,
// A simple way to check for HTML strings
// Prioritize #id over <tag> to avoid XSS via location.hash (#9521)
// Strict HTML recognition (#11290: must start with <)
rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,
// Match a standalone tag
rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>|)$/,
// JSON RegExp
rvalidchars = /^[\],:{}\s]*$/,
rvalidbraces = /(?:^|:|,)(?:\s*\[)+/g,
rvalidescape = /\\(?:["\\\/bfnrt]|u[\da-fA-F]{4})/g,
rvalidtokens = /"[^"\\\r\n]*"|true|false|null|-?(?:\d+\.|)\d+(?:[eE][+-]?\d+|)/g,
// Matches dashed string for camelizing
rmsPrefix = /^-ms-/,
rdashAlpha = /-([\da-z])/gi,
// Used by jQuery.camelCase as callback to replace()
fcamelCase = function( all, letter ) {
return letter.toUpperCase();
},
// The ready event handler
completed = function( event ) {
// readyState === "complete" is good enough for us to call the dom ready in oldIE
if ( document.addEventListener || event.type === "load" || document.readyState === "complete" ) {
detach();
jQuery.ready();
}
},
// Clean-up method for dom ready events
detach = function() {
if ( document.addEventListener ) {
document.removeEventListener( "DOMContentLoaded", completed, false );
window.removeEventListener( "load", completed, false );
} else {
document.detachEvent( "onreadystatechange", completed );
window.detachEvent( "onload", completed );
}
};
jQuery.fn = jQuery.prototype = {
// The current version of jQuery being used
jquery: core_version,
constructor: jQuery,
init: function( selector, context, rootjQuery ) {
var match, elem;
// HANDLE: $(""), $(null), $(undefined), $(false)
if ( !selector ) {
return this;
}
// Handle HTML strings
if ( typeof selector === "string" ) {
if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
// Assume that strings that start and end with <> are HTML and skip the regex check
match = [ null, selector, null ];
} else {
match = rquickExpr.exec( selector );
}
// Match html or make sure no context is specified for #id
if ( match && (match[1] || !context) ) {
// HANDLE: $(html) -> $(array)
if ( match[1] ) {
context = context instanceof jQuery ? context[0] : context;
// scripts is true for back-compat
jQuery.merge( this, jQuery.parseHTML(
match[1],
context && context.nodeType ? context.ownerDocument || context : document,
true
) );
// HANDLE: $(html, props)
if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
for ( match in context ) {
// Properties of context are called as methods if possible
if ( jQuery.isFunction( this[ match ] ) ) {
this[ match ]( context[ match ] );
// ...and otherwise set as attributes
} else {
this.attr( match, context[ match ] );
}
}
}
return this;
// HANDLE: $(#id)
} else {
elem = document.getElementById( match[2] );
// Check parentNode to catch when Blackberry 4.6 returns
// nodes that are no longer in the document #6963
if ( elem && elem.parentNode ) {
// Handle the case where IE and Opera return items
// by name instead of ID
if ( elem.id !== match[2] ) {
return rootjQuery.find( selector );
}
// Otherwise, we inject the element directly into the jQuery object
this.length = 1;
this[0] = elem;
}
this.context = document;
this.selector = selector;
return this;
}
// HANDLE: $(expr, $(...))
} else if ( !context || context.jquery ) {
return ( context || rootjQuery ).find( selector );
// HANDLE: $(expr, context)
// (which is just equivalent to: $(context).find(expr)
} else {
return this.constructor( context ).find( selector );
}
// HANDLE: $(DOMElement)
} else if ( selector.nodeType ) {
this.context = this[0] = selector;
this.length = 1;
return this;
// HANDLE: $(function)
// Shortcut for document ready
} else if ( jQuery.isFunction( selector ) ) {
return rootjQuery.ready( selector );
}
if ( selector.selector !== undefined ) {
this.selector = selector.selector;
this.context = selector.context;
}
return jQuery.makeArray( selector, this );
},
// Start with an empty selector
selector: "",
// The default length of a jQuery object is 0
length: 0,
toArray: function() {
return core_slice.call( this );
},
// Get the Nth element in the matched element set OR
// Get the whole matched element set as a clean array
get: function( num ) {
return num == null ?
// Return a 'clean' array
this.toArray() :
// Return just the object
( num < 0 ? this[ this.length + num ] : this[ num ] );
},
// Take an array of elements and push it onto the stack
// (returning the new matched element set)
pushStack: function( elems ) {
// Build a new jQuery matched element set
var ret = jQuery.merge( this.constructor(), elems );
// Add the old object onto the stack (as a reference)
ret.prevObject = this;
ret.context = this.context;
// Return the newly-formed element set
return ret;
},
// Execute a callback for every element in the matched set.
// (You can seed the arguments with an array of args, but this is
// only used internally.)
each: function( callback, args ) {
return jQuery.each( this, callback, args );
},
ready: function( fn ) {
// Add the callback
jQuery.ready.promise().done( fn );
return this;
},
slice: function() {
return this.pushStack( core_slice.apply( this, arguments ) );
},
first: function() {
return this.eq( 0 );
},
last: function() {
return this.eq( -1 );
},
eq: function( i ) {
var len = this.length,
j = +i + ( i < 0 ? len : 0 );
return this.pushStack( j >= 0 && j < len ? [ this[j] ] : [] );
},
map: function( callback ) {
return this.pushStack( jQuery.map(this, function( elem, i ) {
return callback.call( elem, i, elem );
}));
},
end: function() {
return this.prevObject || this.constructor(null);
},
// For internal use only.
// Behaves like an Array's method, not like a jQuery method.
push: core_push,
sort: [].sort,
splice: [].splice
};
// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;
jQuery.extend = jQuery.fn.extend = function() {
var src, copyIsArray, copy, name, options, clone,
target = arguments[0] || {},
i = 1,
length = arguments.length,
deep = false;
// Handle a deep copy situation
if ( typeof target === "boolean" ) {
deep = target;
target = arguments[1] || {};
// skip the boolean and the target
i = 2;
}
// Handle case when target is a string or something (possible in deep copy)
if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
target = {};
}
// extend jQuery itself if only one argument is passed
if ( length === i ) {
target = this;
--i;
}
for ( ; i < length; i++ ) {
// Only deal with non-null/undefined values
if ( (options = arguments[ i ]) != null ) {
// Extend the base object
for ( name in options ) {
src = target[ name ];
copy = options[ name ];
// Prevent never-ending loop
if ( target === copy ) {
continue;
}
// Recurse if we're merging plain objects or arrays
if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
if ( copyIsArray ) {
copyIsArray = false;
clone = src && jQuery.isArray(src) ? src : [];
} else {
clone = src && jQuery.isPlainObject(src) ? src : {};
}
// Never move original objects, clone them
target[ name ] = jQuery.extend( deep, clone, copy );
// Don't bring in undefined values
} else if ( copy !== undefined ) {
target[ name ] = copy;
}
}
}
}
// Return the modified object
return target;
};
jQuery.extend({
// Unique for each copy of jQuery on the page
// Non-digits removed to match rinlinejQuery
expando: "jQuery" + ( core_version + Math.random() ).replace( /\D/g, "" ),
noConflict: function( deep ) {
if ( window.$ === jQuery ) {
window.$ = _$;
}
if ( deep && window.jQuery === jQuery ) {
window.jQuery = _jQuery;
}
return jQuery;
},
// Is the DOM ready to be used? Set to true once it occurs.
isReady: false,
// A counter to track how many items to wait for before
// the ready event fires. See #6781
readyWait: 1,
// Hold (or release) the ready event
holdReady: function( hold ) {
if ( hold ) {
jQuery.readyWait++;
} else {
jQuery.ready( true );
}
},
// Handle when the DOM is ready
ready: function( wait ) {
// Abort if there are pending holds or we're already ready
if ( wait === true ? --jQuery.readyWait : jQuery.isReady ) {
return;
}
// Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
if ( !document.body ) {
return setTimeout( jQuery.ready );
}
// Remember that the DOM is ready
jQuery.isReady = true;
// If a normal DOM Ready event fired, decrement, and wait if need be
if ( wait !== true && --jQuery.readyWait > 0 ) {
return;
}
// If there are functions bound, to execute
readyList.resolveWith( document, [ jQuery ] );
// Trigger any bound ready events
if ( jQuery.fn.trigger ) {
jQuery( document ).trigger("ready").off("ready");
}
},
// See test/unit/core.js for details concerning isFunction.
// Since version 1.3, DOM methods and functions like alert
// aren't supported. They return false on IE (#2968).
isFunction: function( obj ) {
return jQuery.type(obj) === "function";
},
isArray: Array.isArray || function( obj ) {
return jQuery.type(obj) === "array";
},
isWindow: function( obj ) {
/* jshint eqeqeq: false */
return obj != null && obj == obj.window;
},
isNumeric: function( obj ) {
return !isNaN( parseFloat(obj) ) && isFinite( obj );
},
type: function( obj ) {
if ( obj == null ) {
return String( obj );
}
return typeof obj === "object" || typeof obj === "function" ?
class2type[ core_toString.call(obj) ] || "object" :
typeof obj;
},
isPlainObject: function( obj ) {
var key;
// Must be an Object.
// Because of IE, we also have to check the presence of the constructor property.
// Make sure that DOM nodes and window objects don't pass through, as well
if ( !obj || jQuery.type(obj) !== "object" || obj.nodeType || jQuery.isWindow( obj ) ) {
return false;
}
try {
// Not own constructor property must be Object
if ( obj.constructor &&
!core_hasOwn.call(obj, "constructor") &&
!core_hasOwn.call(obj.constructor.prototype, "isPrototypeOf") ) {
return false;
}
} catch ( e ) {
// IE8,9 Will throw exceptions on certain host objects #9897
return false;
}
// Support: IE<9
// Handle iteration over inherited properties before own properties.
if ( jQuery.support.ownLast ) {
for ( key in obj ) {
return core_hasOwn.call( obj, key );
}
}
// Own properties are enumerated firstly, so to speed up,
// if last one is own, then all properties are own.
for ( key in obj ) {}
return key === undefined || core_hasOwn.call( obj, key );
},
isEmptyObject: function( obj ) {
var name;
for ( name in obj ) {
return false;
}
return true;
},
error: function( msg ) {
throw new Error( msg );
},
// data: string of html
// context (optional): If specified, the fragment will be created in this context, defaults to document
// keepScripts (optional): If true, will include scripts passed in the html string
parseHTML: function( data, context, keepScripts ) {
if ( !data || typeof data !== "string" ) {
return null;
}
if ( typeof context === "boolean" ) {
keepScripts = context;
context = false;
}
context = context || document;
var parsed = rsingleTag.exec( data ),
scripts = !keepScripts && [];
// Single tag
if ( parsed ) {
return [ context.createElement( parsed[1] ) ];
}
parsed = jQuery.buildFragment( [ data ], context, scripts );
if ( scripts ) {
jQuery( scripts ).remove();
}
return jQuery.merge( [], parsed.childNodes );
},
parseJSON: function( data ) {
// Attempt to parse using the native JSON parser first
if ( window.JSON && window.JSON.parse ) {
return window.JSON.parse( data );
}
if ( data === null ) {
return data;
}
if ( typeof data === "string" ) {
// Make sure leading/trailing whitespace is removed (IE can't handle it)
data = jQuery.trim( data );
if ( data ) {
// Make sure the incoming data is actual JSON
// Logic borrowed from http://json.org/json2.js
if ( rvalidchars.test( data.replace( rvalidescape, "@" )
.replace( rvalidtokens, "]" )
.replace( rvalidbraces, "")) ) {
return ( new Function( "return " + data ) )();
}
}
}
jQuery.error( "Invalid JSON: " + data );
},
// Cross-browser xml parsing
parseXML: function( data ) {
var xml, tmp;
if ( !data || typeof data !== "string" ) {
return null;
}
try {
if ( window.DOMParser ) { // Standard
tmp = new DOMParser();
xml = tmp.parseFromString( data , "text/xml" );
} else { // IE
xml = new ActiveXObject( "Microsoft.XMLDOM" );
xml.async = "false";
xml.loadXML( data );
}
} catch( e ) {
xml = undefined;
}
if ( !xml || !xml.documentElement || xml.getElementsByTagName( "parsererror" ).length ) {
jQuery.error( "Invalid XML: " + data );
}
return xml;
},
noop: function() {},
// Evaluates a script in a global context
// Workarounds based on findings by Jim Driscoll
// http://weblogs.java.net/blog/driscoll/archive/2009/09/08/eval-javascript-global-context
globalEval: function( data ) {
if ( data && jQuery.trim( data ) ) {
// We use execScript on Internet Explorer
// We use an anonymous function so that context is window
// rather than jQuery in Firefox
( window.execScript || function( data ) {
window[ "eval" ].call( window, data );
} )( data );
}
},
// Convert dashed to camelCase; used by the css and data modules
// Microsoft forgot to hump their vendor prefix (#9572)
camelCase: function( string ) {
return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
},
nodeName: function( elem, name ) {
return elem.nodeName && elem.nodeName.toLowerCase() === name.toLowerCase();
},
// args is for internal usage only
each: function( obj, callback, args ) {
var value,
i = 0,
length = obj.length,
isArray = isArraylike( obj );
if ( args ) {
if ( isArray ) {
for ( ; i < length; i++ ) {
value = callback.apply( obj[ i ], args );
if ( value === false ) {
break;
}
}
} else {
for ( i in obj ) {
value = callback.apply( obj[ i ], args );
if ( value === false ) {
break;
}
}
}
// A special, fast, case for the most common use of each
} else {
if ( isArray ) {
for ( ; i < length; i++ ) {
value = callback.call( obj[ i ], i, obj[ i ] );
if ( value === false ) {
break;
}
}
} else {
for ( i in obj ) {
value = callback.call( obj[ i ], i, obj[ i ] );
if ( value === false ) {
break;
}
}
}
}
return obj;
},
// Use native String.trim function wherever possible
trim: core_trim && !core_trim.call("\uFEFF\xA0") ?
function( text ) {
return text == null ?
"" :
core_trim.call( text );
} :
// Otherwise use our own trimming functionality
function( text ) {
return text == null ?
"" :
( text + "" ).replace( rtrim, "" );
},
// results is for internal usage only
makeArray: function( arr, results ) {
var ret = results || [];
if ( arr != null ) {
if ( isArraylike( Object(arr) ) ) {
jQuery.merge( ret,
typeof arr === "string" ?
[ arr ] : arr
);
} else {
core_push.call( ret, arr );
}
}
return ret;
},
inArray: function( elem, arr, i ) {
var len;
if ( arr ) {
if ( core_indexOf ) {
return core_indexOf.call( arr, elem, i );
}
len = arr.length;
i = i ? i < 0 ? Math.max( 0, len + i ) : i : 0;
for ( ; i < len; i++ ) {
// Skip accessing in sparse arrays
if ( i in arr && arr[ i ] === elem ) {
return i;
}
}
}
return -1;
},
merge: function( first, second ) {
var l = second.length,
i = first.length,
j = 0;
if ( typeof l === "number" ) {
for ( ; j < l; j++ ) {
first[ i++ ] = second[ j ];
}
} else {
while ( second[j] !== undefined ) {
first[ i++ ] = second[ j++ ];
}
}
first.length = i;
return first;
},
grep: function( elems, callback, inv ) {
var retVal,
ret = [],
i = 0,
length = elems.length;
inv = !!inv;
// Go through the array, only saving the items
// that pass the validator function
for ( ; i < length; i++ ) {
retVal = !!callback( elems[ i ], i );
if ( inv !== retVal ) {
ret.push( elems[ i ] );
}
}
return ret;
},
// arg is for internal usage only
map: function( elems, callback, arg ) {
var value,
i = 0,
length = elems.length,
isArray = isArraylike( elems ),
ret = [];
// Go through the array, translating each of the items to their
if ( isArray ) {
for ( ; i < length; i++ ) {
value = callback( elems[ i ], i, arg );
if ( value != null ) {
ret[ ret.length ] = value;
}
}
// Go through every key on the object,
} else {
for ( i in elems ) {
value = callback( elems[ i ], i, arg );
if ( value != null ) {
ret[ ret.length ] = value;
}
}
}
// Flatten any nested arrays
return core_concat.apply( [], ret );
},
// A global GUID counter for objects
guid: 1,
// Bind a function to a context, optionally partially applying any
// arguments.
proxy: function( fn, context ) {
var args, proxy, tmp;
if ( typeof context === "string" ) {
tmp = fn[ context ];
context = fn;
fn = tmp;
}
// Quick check to determine if target is callable, in the spec
// this throws a TypeError, but we will just return undefined.
if ( !jQuery.isFunction( fn ) ) {
return undefined;
}
// Simulated bind
args = core_slice.call( arguments, 2 );
proxy = function() {
return fn.apply( context || this, args.concat( core_slice.call( arguments ) ) );
};
// Set the guid of unique handler to the same of original handler, so it can be removed
proxy.guid = fn.guid = fn.guid || jQuery.guid++;
return proxy;
},
// Multifunctional method to get and set values of a collection
// The value/s can optionally be executed if it's a function
access: function( elems, fn, key, value, chainable, emptyGet, raw ) {
var i = 0,
length = elems.length,
bulk = key == null;
// Sets many values
if ( jQuery.type( key ) === "object" ) {
chainable = true;
for ( i in key ) {
jQuery.access( elems, fn, i, key[i], true, emptyGet, raw );
}
// Sets one value
} else if ( value !== undefined ) {
chainable = true;
if ( !jQuery.isFunction( value ) ) {
raw = true;
}
if ( bulk ) {
// Bulk operations run against the entire set
if ( raw ) {
fn.call( elems, value );
fn = null;
// ...except when executing function values
} else {
bulk = fn;
fn = function( elem, key, value ) {
return bulk.call( jQuery( elem ), value );
};
}
}
if ( fn ) {
for ( ; i < length; i++ ) {
fn( elems[i], key, raw ? value : value.call( elems[i], i, fn( elems[i], key ) ) );
}
}
}
return chainable ?
elems :
// Gets
bulk ?
fn.call( elems ) :
length ? fn( elems[0], key ) : emptyGet;
},
now: function() {
return ( new Date() ).getTime();
},
// A method for quickly swapping in/out CSS properties to get correct calculations.
// Note: this method belongs to the css module but it's needed here for the support module.
// If support gets modularized, this method should be moved back to the css module.
swap: function( elem, options, callback, args ) {
var ret, name,
old = {};
// Remember the old values, and insert the new ones
for ( name in options ) {
old[ name ] = elem.style[ name ];
elem.style[ name ] = options[ name ];
}
ret = callback.apply( elem, args || [] );
// Revert the old values
for ( name in options ) {
elem.style[ name ] = old[ name ];
}
return ret;
}
});
jQuery.ready.promise = function( obj ) {
if ( !readyList ) {
readyList = jQuery.Deferred();
// Catch cases where $(document).ready() is called after the browser event has already occurred.
// we once tried to use readyState "interactive" here, but it caused issues like the one
// discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
if ( document.readyState === "complete" ) {
// Handle it asynchronously to allow scripts the opportunity to delay ready
setTimeout( jQuery.ready );
// Standards-based browsers support DOMContentLoaded
} else if ( document.addEventListener ) {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", completed, false );
// A fallback to window.onload, that will always work
window.addEventListener( "load", completed, false );
// If IE event model is used
} else {
// Ensure firing before onload, maybe late but safe also for iframes
document.attachEvent( "onreadystatechange", completed );
// A fallback to window.onload, that will always work
window.attachEvent( "onload", completed );
// If IE and not a frame
// continually check to see if the document is ready
var top = false;
try {
top = window.frameElement == null && document.documentElement;
} catch(e) {}
if ( top && top.doScroll ) {
(function doScrollCheck() {
if ( !jQuery.isReady ) {
try {
// Use the trick by Diego Perini
// http://javascript.nwbox.com/IEContentLoaded/
top.doScroll("left");
} catch(e) {
return setTimeout( doScrollCheck, 50 );
}
// detach all dom ready events
detach();
// and execute any waiting functions
jQuery.ready();
}
})();
}
}
}
return readyList.promise( obj );
};
// Populate the class2type map
jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
class2type[ "[object " + name + "]" ] = name.toLowerCase();
});
function isArraylike( obj ) {
var length = obj.length,
type = jQuery.type( obj );
if ( jQuery.isWindow( obj ) ) {
return false;
}
if ( obj.nodeType === 1 && length ) {
return true;
}
return type === "array" || type !== "function" &&
( length === 0 ||
typeof length === "number" && length > 0 && ( length - 1 ) in obj );
}
// All jQuery objects should point back to these
rootjQuery = jQuery(document);
/*!
* Sizzle CSS Selector Engine v1.9.4-pre
* http://sizzlejs.com/
*
* Copyright 2013 jQuery Foundation, Inc. and other contributors
* Released under the MIT license
* http://jquery.org/license
*
* Date: 2013-05-27
*/
(function( window, undefined ) {
var i,
support,
cachedruns,
Expr,
getText,
isXML,
compile,
outermostContext,
sortInput,
// Local document vars
setDocument,
document,
docElem,
documentIsHTML,
rbuggyQSA,
rbuggyMatches,
matches,
contains,
// Instance-specific data
expando = "sizzle" + -(new Date()),
preferredDoc = window.document,
dirruns = 0,
done = 0,
classCache = createCache(),
tokenCache = createCache(),
compilerCache = createCache(),
hasDuplicate = false,
sortOrder = function() { return 0; },
// General-purpose constants
strundefined = typeof undefined,
MAX_NEGATIVE = 1 << 31,
// Instance methods
hasOwn = ({}).hasOwnProperty,
arr = [],
pop = arr.pop,
push_native = arr.push,
push = arr.push,
slice = arr.slice,
// Use a stripped-down indexOf if we can't use a native one
indexOf = arr.indexOf || function( elem ) {
var i = 0,
len = this.length;
for ( ; i < len; i++ ) {
if ( this[i] === elem ) {
return i;
}
}
return -1;
},
booleans = "checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",
// Regular expressions
// Whitespace characters http://www.w3.org/TR/css3-selectors/#whitespace
whitespace = "[\\x20\\t\\r\\n\\f]",
// http://www.w3.org/TR/css3-syntax/#characters
characterEncoding = "(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+",
// Loosely modeled on CSS identifier characters
// An unquoted value should be a CSS identifier http://www.w3.org/TR/css3-selectors/#attribute-selectors
// Proper syntax: http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier
identifier = characterEncoding.replace( "w", "w#" ),
// Acceptable operators http://www.w3.org/TR/selectors/#attribute-selectors
attributes = "\\[" + whitespace + "*(" + characterEncoding + ")" + whitespace +
"*(?:([*^$|!~]?=)" + whitespace + "*(?:(['\"])((?:\\\\.|[^\\\\])*?)\\3|(" + identifier + ")|)|)" + whitespace + "*\\]",
// Prefer arguments quoted,
// then not containing pseudos/brackets,
// then attribute selectors/non-parenthetical expressions,
// then anything else
// These preferences are here to reduce the number of selectors
// needing tokenize in the PSEUDO preFilter
pseudos = ":(" + characterEncoding + ")(?:\\(((['\"])((?:\\\\.|[^\\\\])*?)\\3|((?:\\\\.|[^\\\\()[\\]]|" + attributes.replace( 3, 8 ) + ")*)|.*)\\)|)",
// Leading and non-escaped trailing whitespace, capturing some non-whitespace characters preceding the latter
rtrim = new RegExp( "^" + whitespace + "+|((?:^|[^\\\\])(?:\\\\.)*)" + whitespace + "+$", "g" ),
rcomma = new RegExp( "^" + whitespace + "*," + whitespace + "*" ),
rcombinators = new RegExp( "^" + whitespace + "*([>+~]|" + whitespace + ")" + whitespace + "*" ),
rsibling = new RegExp( whitespace + "*[+~]" ),
rattributeQuotes = new RegExp( "=" + whitespace + "*([^\\]'\"]*)" + whitespace + "*\\]", "g" ),
rpseudo = new RegExp( pseudos ),
ridentifier = new RegExp( "^" + identifier + "$" ),
matchExpr = {
"ID": new RegExp( "^#(" + characterEncoding + ")" ),
"CLASS": new RegExp( "^\\.(" + characterEncoding + ")" ),
"TAG": new RegExp( "^(" + characterEncoding.replace( "w", "w*" ) + ")" ),
"ATTR": new RegExp( "^" + attributes ),
"PSEUDO": new RegExp( "^" + pseudos ),
"CHILD": new RegExp( "^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\(" + whitespace +
"*(even|odd|(([+-]|)(\\d*)n|)" + whitespace + "*(?:([+-]|)" + whitespace +
"*(\\d+)|))" + whitespace + "*\\)|)", "i" ),
"bool": new RegExp( "^(?:" + booleans + ")$", "i" ),
// For use in libraries implementing .is()
// We use this for POS matching in `select`
"needsContext": new RegExp( "^" + whitespace + "*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\(" +
whitespace + "*((?:-\\d)?\\d*)" + whitespace + "*\\)|)(?=[^-]|$)", "i" )
},
rnative = /^[^{]+\{\s*\[native \w/,
// Easily-parseable/retrievable ID or TAG or CLASS selectors
rquickExpr = /^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,
rinputs = /^(?:input|select|textarea|button)$/i,
rheader = /^h\d$/i,
rescape = /'|\\/g,
// CSS escapes http://www.w3.org/TR/CSS21/syndata.html#escaped-characters
runescape = new RegExp( "\\\\([\\da-f]{1,6}" + whitespace + "?|(" + whitespace + ")|.)", "ig" ),
funescape = function( _, escaped, escapedWhitespace ) {
var high = "0x" + escaped - 0x10000;
// NaN means non-codepoint
// Support: Firefox
// Workaround erroneous numeric interpretation of +"0x"
return high !== high || escapedWhitespace ?
escaped :
// BMP codepoint
high < 0 ?
String.fromCharCode( high + 0x10000 ) :
// Supplemental Plane codepoint (surrogate pair)
String.fromCharCode( high >> 10 | 0xD800, high & 0x3FF | 0xDC00 );
};
// Optimize for push.apply( _, NodeList )
try {
push.apply(
(arr = slice.call( preferredDoc.childNodes )),
preferredDoc.childNodes
);
// Support: Android<4.0
// Detect silently failing push.apply
arr[ preferredDoc.childNodes.length ].nodeType;
} catch ( e ) {
push = { apply: arr.length ?
// Leverage slice if possible
function( target, els ) {
push_native.apply( target, slice.call(els) );
} :
// Support: IE<9
// Otherwise append directly
function( target, els ) {
var j = target.length,
i = 0;
// Can't trust NodeList.length
while ( (target[j++] = els[i++]) ) {}
target.length = j - 1;
}
};
}
function Sizzle( selector, context, results, seed ) {
var match, elem, m, nodeType,
// QSA vars
i, groups, old, nid, newContext, newSelector;
if ( ( context ? context.ownerDocument || context : preferredDoc ) !== document ) {
setDocument( context );
}
context = context || document;
results = results || [];
if ( !selector || typeof selector !== "string" ) {
return results;
}
if ( (nodeType = context.nodeType) !== 1 && nodeType !== 9 ) {
return [];
}
if ( documentIsHTML && !seed ) {
// Shortcuts
if ( (match = rquickExpr.exec( selector )) ) {
// Speed-up: Sizzle("#ID")
if ( (m = match[1]) ) {
if ( nodeType === 9 ) {
elem = context.getElementById( m );
// Check parentNode to catch when Blackberry 4.6 returns
// nodes that are no longer in the document #6963
if ( elem && elem.parentNode ) {
// Handle the case where IE, Opera, and Webkit return items
// by name instead of ID
if ( elem.id === m ) {
results.push( elem );
return results;
}
} else {
return results;
}
} else {
// Context is not a document
if ( context.ownerDocument && (elem = context.ownerDocument.getElementById( m )) &&
contains( context, elem ) && elem.id === m ) {
results.push( elem );
return results;
}
}
// Speed-up: Sizzle("TAG")
} else if ( match[2] ) {
push.apply( results, context.getElementsByTagName( selector ) );
return results;
// Speed-up: Sizzle(".CLASS")
} else if ( (m = match[3]) && support.getElementsByClassName && context.getElementsByClassName ) {
push.apply( results, context.getElementsByClassName( m ) );
return results;
}
}
// QSA path
if ( support.qsa && (!rbuggyQSA || !rbuggyQSA.test( selector )) ) {
nid = old = expando;
newContext = context;
newSelector = nodeType === 9 && selector;
// qSA works strangely on Element-rooted queries
// We can work around this by specifying an extra ID on the root
// and working up from there (Thanks to Andrew Dupont for the technique)
// IE 8 doesn't work on object elements
if ( nodeType === 1 && context.nodeName.toLowerCase() !== "object" ) {
groups = tokenize( selector );
if ( (old = context.getAttribute("id")) ) {
nid = old.replace( rescape, "\\$&" );
} else {
context.setAttribute( "id", nid );
}
nid = "[id='" + nid + "'] ";
i = groups.length;
while ( i-- ) {
groups[i] = nid + toSelector( groups[i] );
}
newContext = rsibling.test( selector ) && context.parentNode || context;
newSelector = groups.join(",");
}
if ( newSelector ) {
try {
push.apply( results,
newContext.querySelectorAll( newSelector )
);
return results;
} catch(qsaError) {
} finally {
if ( !old ) {
context.removeAttribute("id");
}
}
}
}
}
// All others
return select( selector.replace( rtrim, "$1" ), context, results, seed );
}
/**
* For feature detection
* @param {Function} fn The function to test for native support
*/
function isNative( fn ) {
return rnative.test( fn + "" );
}
/**
* Create key-value caches of limited size
* @returns {Function(string, Object)} Returns the Object data after storing it on itself with
* property name the (space-suffixed) string and (if the cache is larger than Expr.cacheLength)
* deleting the oldest entry
*/
function createCache() {
var keys = [];
function cache( key, value ) {
// Use (key + " ") to avoid collision with native prototype properties (see Issue #157)
if ( keys.push( key += " " ) > Expr.cacheLength ) {
// Only keep the most recent entries
delete cache[ keys.shift() ];
}
return (cache[ key ] = value);
}
return cache;
}
/**
* Mark a function for special use by Sizzle
* @param {Function} fn The function to mark
*/
function markFunction( fn ) {
fn[ expando ] = true;
return fn;
}
/**
* Support testing using an element
* @param {Function} fn Passed the created div and expects a boolean result
*/
function assert( fn ) {
var div = document.createElement("div");
try {
return !!fn( div );
} catch (e) {
return false;
} finally {
// Remove from its parent by default
if ( div.parentNode ) {
div.parentNode.removeChild( div );
}
// release memory in IE
div = null;
}
}
/**
* Adds the same handler for all of the specified attrs
* @param {String} attrs Pipe-separated list of attributes
* @param {Function} handler The method that will be applied if the test fails
* @param {Boolean} test The result of a test. If true, null will be set as the handler in leiu of the specified handler
*/
function addHandle( attrs, handler, test ) {
attrs = attrs.split("|");
var current,
i = attrs.length,
setHandle = test ? null : handler;
while ( i-- ) {
// Don't override a user's handler
if ( !(current = Expr.attrHandle[ attrs[i] ]) || current === handler ) {
Expr.attrHandle[ attrs[i] ] = setHandle;
}
}
}
/**
* Fetches boolean attributes by node
* @param {Element} elem
* @param {String} name
*/
function boolHandler( elem, name ) {
// XML does not need to be checked as this will not be assigned for XML documents
var val = elem.getAttributeNode( name );
return val && val.specified ?
val.value :
elem[ name ] === true ? name.toLowerCase() : null;
}
/**
* Fetches attributes without interpolation
* http://msdn.microsoft.com/en-us/library/ms536429%28VS.85%29.aspx
* @param {Element} elem
* @param {String} name
*/
function interpolationHandler( elem, name ) {
// XML does not need to be checked as this will not be assigned for XML documents
return elem.getAttribute( name, name.toLowerCase() === "type" ? 1 : 2 );
}
/**
* Uses defaultValue to retrieve value in IE6/7
* @param {Element} elem
* @param {String} name
*/
function valueHandler( elem ) {
// Ignore the value *property* on inputs by using defaultValue
// Fallback to Sizzle.attr by returning undefined where appropriate
// XML does not need to be checked as this will not be assigned for XML documents
if ( elem.nodeName.toLowerCase() === "input" ) {
return elem.defaultValue;
}
}
/**
* Checks document order of two siblings
* @param {Element} a
* @param {Element} b
* @returns Returns -1 if a precedes b, 1 if a follows b
*/
function siblingCheck( a, b ) {
var cur = b && a,
diff = cur && a.nodeType === 1 && b.nodeType === 1 &&
( ~b.sourceIndex || MAX_NEGATIVE ) -
( ~a.sourceIndex || MAX_NEGATIVE );
// Use IE sourceIndex if available on both nodes
if ( diff ) {
return diff;
}
// Check if b follows a
if ( cur ) {
while ( (cur = cur.nextSibling) ) {
if ( cur === b ) {
return -1;
}
}
}
return a ? 1 : -1;
}
/**
* Returns a function to use in pseudos for input types
* @param {String} type
*/
function createInputPseudo( type ) {
return function( elem ) {
var name = elem.nodeName.toLowerCase();
return name === "input" && elem.type === type;
};
}
/**
* Returns a function to use in pseudos for buttons
* @param {String} type
*/
function createButtonPseudo( type ) {
return function( elem ) {
var name = elem.nodeName.toLowerCase();
return (name === "input" || name === "button") && elem.type === type;
};
}
/**
* Returns a function to use in pseudos for positionals
* @param {Function} fn
*/
function createPositionalPseudo( fn ) {
return markFunction(function( argument ) {
argument = +argument;
return markFunction(function( seed, matches ) {
var j,
matchIndexes = fn( [], seed.length, argument ),
i = matchIndexes.length;
// Match elements found at the specified indexes
while ( i-- ) {
if ( seed[ (j = matchIndexes[i]) ] ) {
seed[j] = !(matches[j] = seed[j]);
}
}
});
});
}
/**
* Detect xml
* @param {Element|Object} elem An element or a document
*/
isXML = Sizzle.isXML = function( elem ) {
// documentElement is verified for cases where it doesn't yet exist
// (such as loading iframes in IE - #4833)
var documentElement = elem && (elem.ownerDocument || elem).documentElement;
return documentElement ? documentElement.nodeName !== "HTML" : false;
};
// Expose support vars for convenience
support = Sizzle.support = {};
/**
* Sets document-related variables once based on the current document
* @param {Element|Object} [doc] An element or document object to use to set the document
* @returns {Object} Returns the current document
*/
setDocument = Sizzle.setDocument = function( node ) {
var doc = node ? node.ownerDocument || node : preferredDoc,
parent = doc.parentWindow;
// If no document and documentElement is available, return
if ( doc === document || doc.nodeType !== 9 || !doc.documentElement ) {
return document;
}
// Set our document
document = doc;
docElem = doc.documentElement;
// Support tests
documentIsHTML = !isXML( doc );
// Support: IE>8
// If iframe document is assigned to "document" variable and if iframe has been reloaded,
// IE will throw "permission denied" error when accessing "document" variable, see jQuery #13936
if ( parent && parent.frameElement ) {
parent.attachEvent( "onbeforeunload", function() {
setDocument();
});
}
/* Attributes
---------------------------------------------------------------------- */
// Support: IE<8
// Verify that getAttribute really returns attributes and not properties (excepting IE8 booleans)
support.attributes = assert(function( div ) {
// Support: IE<8
// Prevent attribute/property "interpolation"
div.innerHTML = "<a href='#'></a>";
addHandle( "type|href|height|width", interpolationHandler, div.firstChild.getAttribute("href") === "#" );
// Support: IE<9
// Use getAttributeNode to fetch booleans when getAttribute lies
addHandle( booleans, boolHandler, div.getAttribute("disabled") == null );
div.className = "i";
return !div.getAttribute("className");
});
// Support: IE<9
// Retrieving value should defer to defaultValue
support.input = assert(function( div ) {
div.innerHTML = "<input>";
div.firstChild.setAttribute( "value", "" );
return div.firstChild.getAttribute( "value" ) === "";
});
// IE6/7 still return empty string for value,
// but are actually retrieving the property
addHandle( "value", valueHandler, support.attributes && support.input );
/* getElement(s)By*
---------------------------------------------------------------------- */
// Check if getElementsByTagName("*") returns only elements
support.getElementsByTagName = assert(function( div ) {
div.appendChild( doc.createComment("") );
return !div.getElementsByTagName("*").length;
});
// Check if getElementsByClassName can be trusted
support.getElementsByClassName = assert(function( div ) {
div.innerHTML = "<div class='a'></div><div class='a i'></div>";
// Support: Safari<4
// Catch class over-caching
div.firstChild.className = "i";
// Support: Opera<10
// Catch gEBCN failure to find non-leading classes
return div.getElementsByClassName("i").length === 2;
});
// Support: IE<10
// Check if getElementById returns elements by name
// The broken getElementById methods don't pick up programatically-set names,
// so use a roundabout getElementsByName test
support.getById = assert(function( div ) {
docElem.appendChild( div ).id = expando;
return !doc.getElementsByName || !doc.getElementsByName( expando ).length;
});
// ID find and filter
if ( support.getById ) {
Expr.find["ID"] = function( id, context ) {
if ( typeof context.getElementById !== strundefined && documentIsHTML ) {
var m = context.getElementById( id );
// Check parentNode to catch when Blackberry 4.6 returns
// nodes that are no longer in the document #6963
return m && m.parentNode ? [m] : [];
}
};
Expr.filter["ID"] = function( id ) {
var attrId = id.replace( runescape, funescape );
return function( elem ) {
return elem.getAttribute("id") === attrId;
};
};
} else {
// Support: IE6/7
// getElementById is not reliable as a find shortcut
delete Expr.find["ID"];
Expr.filter["ID"] = function( id ) {
var attrId = id.replace( runescape, funescape );
return function( elem ) {
var node = typeof elem.getAttributeNode !== strundefined && elem.getAttributeNode("id");
return node && node.value === attrId;
};
};
}
// Tag
Expr.find["TAG"] = support.getElementsByTagName ?
function( tag, context ) {
if ( typeof context.getElementsByTagName !== strundefined ) {
return context.getElementsByTagName( tag );
}
} :
function( tag, context ) {
var elem,
tmp = [],
i = 0,
results = context.getElementsByTagName( tag );
// Filter out possible comments
if ( tag === "*" ) {
while ( (elem = results[i++]) ) {
if ( elem.nodeType === 1 ) {
tmp.push( elem );
}
}
return tmp;
}
return results;
};
// Class
Expr.find["CLASS"] = support.getElementsByClassName && function( className, context ) {
if ( typeof context.getElementsByClassName !== strundefined && documentIsHTML ) {
return context.getElementsByClassName( className );
}
};
/* QSA/matchesSelector
---------------------------------------------------------------------- */
// QSA and matchesSelector support
// matchesSelector(:active) reports false when true (IE9/Opera 11.5)
rbuggyMatches = [];
// qSa(:focus) reports false when true (Chrome 21)
// We allow this because of a bug in IE8/9 that throws an error
// whenever `document.activeElement` is accessed on an iframe
// So, we allow :focus to pass through QSA all the time to avoid the IE error
// See http://bugs.jquery.com/ticket/13378
rbuggyQSA = [];
if ( (support.qsa = isNative(doc.querySelectorAll)) ) {
// Build QSA regex
// Regex strategy adopted from Diego Perini
assert(function( div ) {
// Select is set to empty string on purpose
// This is to test IE's treatment of not explicitly
// setting a boolean content attribute,
// since its presence should be enough
// http://bugs.jquery.com/ticket/12359
div.innerHTML = "<select><option selected=''></option></select>";
// Support: IE8
// Boolean attributes and "value" are not treated correctly
if ( !div.querySelectorAll("[selected]").length ) {
rbuggyQSA.push( "\\[" + whitespace + "*(?:value|" + booleans + ")" );
}
// Webkit/Opera - :checked should return selected option elements
// http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#checked
// IE8 throws error here and will not see later tests
if ( !div.querySelectorAll(":checked").length ) {
rbuggyQSA.push(":checked");
}
});
assert(function( div ) {
// Support: Opera 10-12/IE8
// ^= $= *= and empty values
// Should not select anything
// Support: Windows 8 Native Apps
// The type attribute is restricted during .innerHTML assignment
var input = doc.createElement("input");
input.setAttribute( "type", "hidden" );
div.appendChild( input ).setAttribute( "t", "" );
if ( div.querySelectorAll("[t^='']").length ) {
rbuggyQSA.push( "[*^$]=" + whitespace + "*(?:''|\"\")" );
}
// FF 3.5 - :enabled/:disabled and hidden elements (hidden elements are still enabled)
// IE8 throws error here and will not see later tests
if ( !div.querySelectorAll(":enabled").length ) {
rbuggyQSA.push( ":enabled", ":disabled" );
}
// Opera 10-11 does not throw on post-comma invalid pseudos
div.querySelectorAll("*,:x");
rbuggyQSA.push(",.*:");
});
}
if ( (support.matchesSelector = isNative( (matches = docElem.webkitMatchesSelector ||
docElem.mozMatchesSelector ||
docElem.oMatchesSelector ||
docElem.msMatchesSelector) )) ) {
assert(function( div ) {
// Check to see if it's possible to do matchesSelector
// on a disconnected node (IE 9)
support.disconnectedMatch = matches.call( div, "div" );
// This should fail with an exception
// Gecko does not error, returns false instead
matches.call( div, "[s!='']:x" );
rbuggyMatches.push( "!=", pseudos );
});
}
rbuggyQSA = rbuggyQSA.length && new RegExp( rbuggyQSA.join("|") );
rbuggyMatches = rbuggyMatches.length && new RegExp( rbuggyMatches.join("|") );
/* Contains
---------------------------------------------------------------------- */
// Element contains another
// Purposefully does not implement inclusive descendent
// As in, an element does not contain itself
contains = isNative(docElem.contains) || docElem.compareDocumentPosition ?
function( a, b ) {
var adown = a.nodeType === 9 ? a.documentElement : a,
bup = b && b.parentNode;
return a === bup || !!( bup && bup.nodeType === 1 && (
adown.contains ?
adown.contains( bup ) :
a.compareDocumentPosition && a.compareDocumentPosition( bup ) & 16
));
} :
function( a, b ) {
if ( b ) {
while ( (b = b.parentNode) ) {
if ( b === a ) {
return true;
}
}
}
return false;
};
/* Sorting
---------------------------------------------------------------------- */
// Support: Webkit<537.32 - Safari 6.0.3/Chrome 25 (fixed in Chrome 27)
// Detached nodes confoundingly follow *each other*
support.sortDetached = assert(function( div1 ) {
// Should return 1, but returns 4 (following)
return div1.compareDocumentPosition( doc.createElement("div") ) & 1;
});
// Document order sorting
sortOrder = docElem.compareDocumentPosition ?
function( a, b ) {
// Flag for duplicate removal
if ( a === b ) {
hasDuplicate = true;
return 0;
}
var compare = b.compareDocumentPosition && a.compareDocumentPosition && a.compareDocumentPosition( b );
if ( compare ) {
// Disconnected nodes
if ( compare & 1 ||
(!support.sortDetached && b.compareDocumentPosition( a ) === compare) ) {
// Choose the first element that is related to our preferred document
if ( a === doc || contains(preferredDoc, a) ) {
return -1;
}
if ( b === doc || contains(preferredDoc, b) ) {
return 1;
}
// Maintain original order
return sortInput ?
( indexOf.call( sortInput, a ) - indexOf.call( sortInput, b ) ) :
0;
}
return compare & 4 ? -1 : 1;
}
// Not directly comparable, sort on existence of method
return a.compareDocumentPosition ? -1 : 1;
} :
function( a, b ) {
var cur,
i = 0,
aup = a.parentNode,
bup = b.parentNode,
ap = [ a ],
bp = [ b ];
// Exit early if the nodes are identical
if ( a === b ) {
hasDuplicate = true;
return 0;
// Parentless nodes are either documents or disconnected
} else if ( !aup || !bup ) {
return a === doc ? -1 :
b === doc ? 1 :
aup ? -1 :
bup ? 1 :
sortInput ?
( indexOf.call( sortInput, a ) - indexOf.call( sortInput, b ) ) :
0;
// If the nodes are siblings, we can do a quick check
} else if ( aup === bup ) {
return siblingCheck( a, b );
}
// Otherwise we need full lists of their ancestors for comparison
cur = a;
while ( (cur = cur.parentNode) ) {
ap.unshift( cur );
}
cur = b;
while ( (cur = cur.parentNode) ) {
bp.unshift( cur );
}
// Walk down the tree looking for a discrepancy
while ( ap[i] === bp[i] ) {
i++;
}
return i ?
// Do a sibling check if the nodes have a common ancestor
siblingCheck( ap[i], bp[i] ) :
// Otherwise nodes in our document sort first
ap[i] === preferredDoc ? -1 :
bp[i] === preferredDoc ? 1 :
0;
};
return doc;
};
Sizzle.matches = function( expr, elements ) {
return Sizzle( expr, null, null, elements );
};
Sizzle.matchesSelector = function( elem, expr ) {
// Set document vars if needed
if ( ( elem.ownerDocument || elem ) !== document ) {
setDocument( elem );
}
// Make sure that attribute selectors are quoted
expr = expr.replace( rattributeQuotes, "='$1']" );
if ( support.matchesSelector && documentIsHTML &&
( !rbuggyMatches || !rbuggyMatches.test( expr ) ) &&
( !rbuggyQSA || !rbuggyQSA.test( expr ) ) ) {
try {
var ret = matches.call( elem, expr );
// IE 9's matchesSelector returns false on disconnected nodes
if ( ret || support.disconnectedMatch ||
// As well, disconnected nodes are said to be in a document
// fragment in IE 9
elem.document && elem.document.nodeType !== 11 ) {
return ret;
}
} catch(e) {}
}
return Sizzle( expr, document, null, [elem] ).length > 0;
};
Sizzle.contains = function( context, elem ) {
// Set document vars if needed
if ( ( context.ownerDocument || context ) !== document ) {
setDocument( context );
}
return contains( context, elem );
};
Sizzle.attr = function( elem, name ) {
// Set document vars if needed
if ( ( elem.ownerDocument || elem ) !== document ) {
setDocument( elem );
}
var fn = Expr.attrHandle[ name.toLowerCase() ],
// Don't get fooled by Object.prototype properties (jQuery #13807)
val = ( fn && hasOwn.call( Expr.attrHandle, name.toLowerCase() ) ?
fn( elem, name, !documentIsHTML ) :
undefined );
return val === undefined ?
support.attributes || !documentIsHTML ?
elem.getAttribute( name ) :
(val = elem.getAttributeNode(name)) && val.specified ?
val.value :
null :
val;
};
Sizzle.error = function( msg ) {
throw new Error( "Syntax error, unrecognized expression: " + msg );
};
/**
* Document sorting and removing duplicates
* @param {ArrayLike} results
*/
Sizzle.uniqueSort = function( results ) {
var elem,
duplicates = [],
j = 0,
i = 0;
// Unless we *know* we can detect duplicates, assume their presence
hasDuplicate = !support.detectDuplicates;
sortInput = !support.sortStable && results.slice( 0 );
results.sort( sortOrder );
if ( hasDuplicate ) {
while ( (elem = results[i++]) ) {
if ( elem === results[ i ] ) {
j = duplicates.push( i );
}
}
while ( j-- ) {
results.splice( duplicates[ j ], 1 );
}
}
return results;
};
/**
* Utility function for retrieving the text value of an array of DOM nodes
* @param {Array|Element} elem
*/
getText = Sizzle.getText = function( elem ) {
var node,
ret = "",
i = 0,
nodeType = elem.nodeType;
if ( !nodeType ) {
// If no nodeType, this is expected to be an array
for ( ; (node = elem[i]); i++ ) {
// Do not traverse comment nodes
ret += getText( node );
}
} else if ( nodeType === 1 || nodeType === 9 || nodeType === 11 ) {
// Use textContent for elements
// innerText usage removed for consistency of new lines (see #11153)
if ( typeof elem.textContent === "string" ) {
return elem.textContent;
} else {
// Traverse its children
for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
ret += getText( elem );
}
}
} else if ( nodeType === 3 || nodeType === 4 ) {
return elem.nodeValue;
}
// Do not include comment or processing instruction nodes
return ret;
};
Expr = Sizzle.selectors = {
// Can be adjusted by the user
cacheLength: 50,
createPseudo: markFunction,
match: matchExpr,
attrHandle: {},
find: {},
relative: {
">": { dir: "parentNode", first: true },
" ": { dir: "parentNode" },
"+": { dir: "previousSibling", first: true },
"~": { dir: "previousSibling" }
},
preFilter: {
"ATTR": function( match ) {
match[1] = match[1].replace( runescape, funescape );
// Move the given value to match[3] whether quoted or unquoted
match[3] = ( match[4] || match[5] || "" ).replace( runescape, funescape );
if ( match[2] === "~=" ) {
match[3] = " " + match[3] + " ";
}
return match.slice( 0, 4 );
},
"CHILD": function( match ) {
/* matches from matchExpr["CHILD"]
1 type (only|nth|...)
2 what (child|of-type)
3 argument (even|odd|\d*|\d*n([+-]\d+)?|...)
4 xn-component of xn+y argument ([+-]?\d*n|)
5 sign of xn-component
6 x of xn-component
7 sign of y-component
8 y of y-component
*/
match[1] = match[1].toLowerCase();
if ( match[1].slice( 0, 3 ) === "nth" ) {
// nth-* requires argument
if ( !match[3] ) {
Sizzle.error( match[0] );
}
// numeric x and y parameters for Expr.filter.CHILD
// remember that false/true cast respectively to 0/1
match[4] = +( match[4] ? match[5] + (match[6] || 1) : 2 * ( match[3] === "even" || match[3] === "odd" ) );
match[5] = +( ( match[7] + match[8] ) || match[3] === "odd" );
// other types prohibit arguments
} else if ( match[3] ) {
Sizzle.error( match[0] );
}
return match;
},
"PSEUDO": function( match ) {
var excess,
unquoted = !match[5] && match[2];
if ( matchExpr["CHILD"].test( match[0] ) ) {
return null;
}
// Accept quoted arguments as-is
if ( match[3] && match[4] !== undefined ) {
match[2] = match[4];
// Strip excess characters from unquoted arguments
} else if ( unquoted && rpseudo.test( unquoted ) &&
// Get excess from tokenize (recursively)
(excess = tokenize( unquoted, true )) &&
// advance to the next closing parenthesis
(excess = unquoted.indexOf( ")", unquoted.length - excess ) - unquoted.length) ) {
// excess is a negative index
match[0] = match[0].slice( 0, excess );
match[2] = unquoted.slice( 0, excess );
}
// Return only captures needed by the pseudo filter method (type and argument)
return match.slice( 0, 3 );
}
},
filter: {
"TAG": function( nodeNameSelector ) {
var nodeName = nodeNameSelector.replace( runescape, funescape ).toLowerCase();
return nodeNameSelector === "*" ?
function() { return true; } :
function( elem ) {
return elem.nodeName && elem.nodeName.toLowerCase() === nodeName;
};
},
"CLASS": function( className ) {
var pattern = classCache[ className + " " ];
return pattern ||
(pattern = new RegExp( "(^|" + whitespace + ")" + className + "(" + whitespace + "|$)" )) &&
classCache( className, function( elem ) {
return pattern.test( typeof elem.className === "string" && elem.className || typeof elem.getAttribute !== strundefined && elem.getAttribute("class") || "" );
});
},
"ATTR": function( name, operator, check ) {
return function( elem ) {
var result = Sizzle.attr( elem, name );
if ( result == null ) {
return operator === "!=";
}
if ( !operator ) {
return true;
}
result += "";
return operator === "=" ? result === check :
operator === "!=" ? result !== check :
operator === "^=" ? check && result.indexOf( check ) === 0 :
operator === "*=" ? check && result.indexOf( check ) > -1 :
operator === "$=" ? check && result.slice( -check.length ) === check :
operator === "~=" ? ( " " + result + " " ).indexOf( check ) > -1 :
operator === "|=" ? result === check || result.slice( 0, check.length + 1 ) === check + "-" :
false;
};
},
"CHILD": function( type, what, argument, first, last ) {
var simple = type.slice( 0, 3 ) !== "nth",
forward = type.slice( -4 ) !== "last",
ofType = what === "of-type";
return first === 1 && last === 0 ?
// Shortcut for :nth-*(n)
function( elem ) {
return !!elem.parentNode;
} :
function( elem, context, xml ) {
var cache, outerCache, node, diff, nodeIndex, start,
dir = simple !== forward ? "nextSibling" : "previousSibling",
parent = elem.parentNode,
name = ofType && elem.nodeName.toLowerCase(),
useCache = !xml && !ofType;
if ( parent ) {
// :(first|last|only)-(child|of-type)
if ( simple ) {
while ( dir ) {
node = elem;
while ( (node = node[ dir ]) ) {
if ( ofType ? node.nodeName.toLowerCase() === name : node.nodeType === 1 ) {
return false;
}
}
// Reverse direction for :only-* (if we haven't yet done so)
start = dir = type === "only" && !start && "nextSibling";
}
return true;
}
start = [ forward ? parent.firstChild : parent.lastChild ];
// non-xml :nth-child(...) stores cache data on `parent`
if ( forward && useCache ) {
// Seek `elem` from a previously-cached index
outerCache = parent[ expando ] || (parent[ expando ] = {});
cache = outerCache[ type ] || [];
nodeIndex = cache[0] === dirruns && cache[1];
diff = cache[0] === dirruns && cache[2];
node = nodeIndex && parent.childNodes[ nodeIndex ];
while ( (node = ++nodeIndex && node && node[ dir ] ||
// Fallback to seeking `elem` from the start
(diff = nodeIndex = 0) || start.pop()) ) {
// When found, cache indexes on `parent` and break
if ( node.nodeType === 1 && ++diff && node === elem ) {
outerCache[ type ] = [ dirruns, nodeIndex, diff ];
break;
}
}
// Use previously-cached element index if available
} else if ( useCache && (cache = (elem[ expando ] || (elem[ expando ] = {}))[ type ]) && cache[0] === dirruns ) {
diff = cache[1];
// xml :nth-child(...) or :nth-last-child(...) or :nth(-last)?-of-type(...)
} else {
// Use the same loop as above to seek `elem` from the start
while ( (node = ++nodeIndex && node && node[ dir ] ||
(diff = nodeIndex = 0) || start.pop()) ) {
if ( ( ofType ? node.nodeName.toLowerCase() === name : node.nodeType === 1 ) && ++diff ) {
// Cache the index of each encountered element
if ( useCache ) {
(node[ expando ] || (node[ expando ] = {}))[ type ] = [ dirruns, diff ];
}
if ( node === elem ) {
break;
}
}
}
}
// Incorporate the offset, then check against cycle size
diff -= last;
return diff === first || ( diff % first === 0 && diff / first >= 0 );
}
};
},
"PSEUDO": function( pseudo, argument ) {
// pseudo-class names are case-insensitive
// http://www.w3.org/TR/selectors/#pseudo-classes
// Prioritize by case sensitivity in case custom pseudos are added with uppercase letters
// Remember that setFilters inherits from pseudos
var args,
fn = Expr.pseudos[ pseudo ] || Expr.setFilters[ pseudo.toLowerCase() ] ||
Sizzle.error( "unsupported pseudo: " + pseudo );
// The user may use createPseudo to indicate that
// arguments are needed to create the filter function
// just as Sizzle does
if ( fn[ expando ] ) {
return fn( argument );
}
// But maintain support for old signatures
if ( fn.length > 1 ) {
args = [ pseudo, pseudo, "", argument ];
return Expr.setFilters.hasOwnProperty( pseudo.toLowerCase() ) ?
markFunction(function( seed, matches ) {
var idx,
matched = fn( seed, argument ),
i = matched.length;
while ( i-- ) {
idx = indexOf.call( seed, matched[i] );
seed[ idx ] = !( matches[ idx ] = matched[i] );
}
}) :
function( elem ) {
return fn( elem, 0, args );
};
}
return fn;
}
},
pseudos: {
// Potentially complex pseudos
"not": markFunction(function( selector ) {
// Trim the selector passed to compile
// to avoid treating leading and trailing
// spaces as combinators
var input = [],
results = [],
matcher = compile( selector.replace( rtrim, "$1" ) );
return matcher[ expando ] ?
markFunction(function( seed, matches, context, xml ) {
var elem,
unmatched = matcher( seed, null, xml, [] ),
i = seed.length;
// Match elements unmatched by `matcher`
while ( i-- ) {
if ( (elem = unmatched[i]) ) {
seed[i] = !(matches[i] = elem);
}
}
}) :
function( elem, context, xml ) {
input[0] = elem;
matcher( input, null, xml, results );
return !results.pop();
};
}),
"has": markFunction(function( selector ) {
return function( elem ) {
return Sizzle( selector, elem ).length > 0;
};
}),
"contains": markFunction(function( text ) {
return function( elem ) {
return ( elem.textContent || elem.innerText || getText( elem ) ).indexOf( text ) > -1;
};
}),
// "Whether an element is represented by a :lang() selector
// is based solely on the element's language value
// being equal to the identifier C,
// or beginning with the identifier C immediately followed by "-".
// The matching of C against the element's language value is performed case-insensitively.
// The identifier C does not have to be a valid language name."
// http://www.w3.org/TR/selectors/#lang-pseudo
"lang": markFunction( function( lang ) {
// lang value must be a valid identifier
if ( !ridentifier.test(lang || "") ) {
Sizzle.error( "unsupported lang: " + lang );
}
lang = lang.replace( runescape, funescape ).toLowerCase();
return function( elem ) {
var elemLang;
do {
if ( (elemLang = documentIsHTML ?
elem.lang :
elem.getAttribute("xml:lang") || elem.getAttribute("lang")) ) {
elemLang = elemLang.toLowerCase();
return elemLang === lang || elemLang.indexOf( lang + "-" ) === 0;
}
} while ( (elem = elem.parentNode) && elem.nodeType === 1 );
return false;
};
}),
// Miscellaneous
"target": function( elem ) {
var hash = window.location && window.location.hash;
return hash && hash.slice( 1 ) === elem.id;
},
"root": function( elem ) {
return elem === docElem;
},
"focus": function( elem ) {
return elem === document.activeElement && (!document.hasFocus || document.hasFocus()) && !!(elem.type || elem.href || ~elem.tabIndex);
},
// Boolean properties
"enabled": function( elem ) {
return elem.disabled === false;
},
"disabled": function( elem ) {
return elem.disabled === true;
},
"checked": function( elem ) {
// In CSS3, :checked should return both checked and selected elements
// http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#checked
var nodeName = elem.nodeName.toLowerCase();
return (nodeName === "input" && !!elem.checked) || (nodeName === "option" && !!elem.selected);
},
"selected": function( elem ) {
// Accessing this property makes selected-by-default
// options in Safari work properly
if ( elem.parentNode ) {
elem.parentNode.selectedIndex;
}
return elem.selected === true;
},
// Contents
"empty": function( elem ) {
// http://www.w3.org/TR/selectors/#empty-pseudo
// :empty is only affected by element nodes and content nodes(including text(3), cdata(4)),
// not comment, processing instructions, or others
// Thanks to Diego Perini for the nodeName shortcut
// Greater than "@" means alpha characters (specifically not starting with "#" or "?")
for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
if ( elem.nodeName > "@" || elem.nodeType === 3 || elem.nodeType === 4 ) {
return false;
}
}
return true;
},
"parent": function( elem ) {
return !Expr.pseudos["empty"]( elem );
},
// Element/input types
"header": function( elem ) {
return rheader.test( elem.nodeName );
},
"input": function( elem ) {
return rinputs.test( elem.nodeName );
},
"button": function( elem ) {
var name = elem.nodeName.toLowerCase();
return name === "input" && elem.type === "button" || name === "button";
},
"text": function( elem ) {
var attr;
// IE6 and 7 will map elem.type to 'text' for new HTML5 types (search, etc)
// use getAttribute instead to test this case
return elem.nodeName.toLowerCase() === "input" &&
elem.type === "text" &&
( (attr = elem.getAttribute("type")) == null || attr.toLowerCase() === elem.type );
},
// Position-in-collection
"first": createPositionalPseudo(function() {
return [ 0 ];
}),
"last": createPositionalPseudo(function( matchIndexes, length ) {
return [ length - 1 ];
}),
"eq": createPositionalPseudo(function( matchIndexes, length, argument ) {
return [ argument < 0 ? argument + length : argument ];
}),
"even": createPositionalPseudo(function( matchIndexes, length ) {
var i = 0;
for ( ; i < length; i += 2 ) {
matchIndexes.push( i );
}
return matchIndexes;
}),
"odd": createPositionalPseudo(function( matchIndexes, length ) {
var i = 1;
for ( ; i < length; i += 2 ) {
matchIndexes.push( i );
}
return matchIndexes;
}),
"lt": createPositionalPseudo(function( matchIndexes, length, argument ) {
var i = argument < 0 ? argument + length : argument;
for ( ; --i >= 0; ) {
matchIndexes.push( i );
}
return matchIndexes;
}),
"gt": createPositionalPseudo(function( matchIndexes, length, argument ) {
var i = argument < 0 ? argument + length : argument;
for ( ; ++i < length; ) {
matchIndexes.push( i );
}
return matchIndexes;
})
}
};
// Add button/input type pseudos
for ( i in { radio: true, checkbox: true, file: true, password: true, image: true } ) {
Expr.pseudos[ i ] = createInputPseudo( i );
}
for ( i in { submit: true, reset: true } ) {
Expr.pseudos[ i ] = createButtonPseudo( i );
}
function tokenize( selector, parseOnly ) {
var matched, match, tokens, type,
soFar, groups, preFilters,
cached = tokenCache[ selector + " " ];
if ( cached ) {
return parseOnly ? 0 : cached.slice( 0 );
}
soFar = selector;
groups = [];
preFilters = Expr.preFilter;
while ( soFar ) {
// Comma and first run
if ( !matched || (match = rcomma.exec( soFar )) ) {
if ( match ) {
// Don't consume trailing commas as valid
soFar = soFar.slice( match[0].length ) || soFar;
}
groups.push( tokens = [] );
}
matched = false;
// Combinators
if ( (match = rcombinators.exec( soFar )) ) {
matched = match.shift();
tokens.push({
value: matched,
// Cast descendant combinators to space
type: match[0].replace( rtrim, " " )
});
soFar = soFar.slice( matched.length );
}
// Filters
for ( type in Expr.filter ) {
if ( (match = matchExpr[ type ].exec( soFar )) && (!preFilters[ type ] ||
(match = preFilters[ type ]( match ))) ) {
matched = match.shift();
tokens.push({
value: matched,
type: type,
matches: match
});
soFar = soFar.slice( matched.length );
}
}
if ( !matched ) {
break;
}
}
// Return the length of the invalid excess
// if we're just parsing
// Otherwise, throw an error or return tokens
return parseOnly ?
soFar.length :
soFar ?
Sizzle.error( selector ) :
// Cache the tokens
tokenCache( selector, groups ).slice( 0 );
}
function toSelector( tokens ) {
var i = 0,
len = tokens.length,
selector = "";
for ( ; i < len; i++ ) {
selector += tokens[i].value;
}
return selector;
}
function addCombinator( matcher, combinator, base ) {
var dir = combinator.dir,
checkNonElements = base && dir === "parentNode",
doneName = done++;
return combinator.first ?
// Check against closest ancestor/preceding element
function( elem, context, xml ) {
while ( (elem = elem[ dir ]) ) {
if ( elem.nodeType === 1 || checkNonElements ) {
return matcher( elem, context, xml );
}
}
} :
// Check against all ancestor/preceding elements
function( elem, context, xml ) {
var data, cache, outerCache,
dirkey = dirruns + " " + doneName;
// We can't set arbitrary data on XML nodes, so they don't benefit from dir caching
if ( xml ) {
while ( (elem = elem[ dir ]) ) {
if ( elem.nodeType === 1 || checkNonElements ) {
if ( matcher( elem, context, xml ) ) {
return true;
}
}
}
} else {
while ( (elem = elem[ dir ]) ) {
if ( elem.nodeType === 1 || checkNonElements ) {
outerCache = elem[ expando ] || (elem[ expando ] = {});
if ( (cache = outerCache[ dir ]) && cache[0] === dirkey ) {
if ( (data = cache[1]) === true || data === cachedruns ) {
return data === true;
}
} else {
cache = outerCache[ dir ] = [ dirkey ];
cache[1] = matcher( elem, context, xml ) || cachedruns;
if ( cache[1] === true ) {
return true;
}
}
}
}
}
};
}
function elementMatcher( matchers ) {
return matchers.length > 1 ?
function( elem, context, xml ) {
var i = matchers.length;
while ( i-- ) {
if ( !matchers[i]( elem, context, xml ) ) {
return false;
}
}
return true;
} :
matchers[0];
}
function condense( unmatched, map, filter, context, xml ) {
var elem,
newUnmatched = [],
i = 0,
len = unmatched.length,
mapped = map != null;
for ( ; i < len; i++ ) {
if ( (elem = unmatched[i]) ) {
if ( !filter || filter( elem, context, xml ) ) {
newUnmatched.push( elem );
if ( mapped ) {
map.push( i );
}
}
}
}
return newUnmatched;
}
function setMatcher( preFilter, selector, matcher, postFilter, postFinder, postSelector ) {
if ( postFilter && !postFilter[ expando ] ) {
postFilter = setMatcher( postFilter );
}
if ( postFinder && !postFinder[ expando ] ) {
postFinder = setMatcher( postFinder, postSelector );
}
return markFunction(function( seed, results, context, xml ) {
var temp, i, elem,
preMap = [],
postMap = [],
preexisting = results.length,
// Get initial elements from seed or context
elems = seed || multipleContexts( selector || "*", context.nodeType ? [ context ] : context, [] ),
// Prefilter to get matcher input, preserving a map for seed-results synchronization
matcherIn = preFilter && ( seed || !selector ) ?
condense( elems, preMap, preFilter, context, xml ) :
elems,
matcherOut = matcher ?
// If we have a postFinder, or filtered seed, or non-seed postFilter or preexisting results,
postFinder || ( seed ? preFilter : preexisting || postFilter ) ?
// ...intermediate processing is necessary
[] :
// ...otherwise use results directly
results :
matcherIn;
// Find primary matches
if ( matcher ) {
matcher( matcherIn, matcherOut, context, xml );
}
// Apply postFilter
if ( postFilter ) {
temp = condense( matcherOut, postMap );
postFilter( temp, [], context, xml );
// Un-match failing elements by moving them back to matcherIn
i = temp.length;
while ( i-- ) {
if ( (elem = temp[i]) ) {
matcherOut[ postMap[i] ] = !(matcherIn[ postMap[i] ] = elem);
}
}
}
if ( seed ) {
if ( postFinder || preFilter ) {
if ( postFinder ) {
// Get the final matcherOut by condensing this intermediate into postFinder contexts
temp = [];
i = matcherOut.length;
while ( i-- ) {
if ( (elem = matcherOut[i]) ) {
// Restore matcherIn since elem is not yet a final match
temp.push( (matcherIn[i] = elem) );
}
}
postFinder( null, (matcherOut = []), temp, xml );
}
// Move matched elements from seed to results to keep them synchronized
i = matcherOut.length;
while ( i-- ) {
if ( (elem = matcherOut[i]) &&
(temp = postFinder ? indexOf.call( seed, elem ) : preMap[i]) > -1 ) {
seed[temp] = !(results[temp] = elem);
}
}
}
// Add elements to results, through postFinder if defined
} else {
matcherOut = condense(
matcherOut === results ?
matcherOut.splice( preexisting, matcherOut.length ) :
matcherOut
);
if ( postFinder ) {
postFinder( null, results, matcherOut, xml );
} else {
push.apply( results, matcherOut );
}
}
});
}
function matcherFromTokens( tokens ) {
var checkContext, matcher, j,
len = tokens.length,
leadingRelative = Expr.relative[ tokens[0].type ],
implicitRelative = leadingRelative || Expr.relative[" "],
i = leadingRelative ? 1 : 0,
// The foundational matcher ensures that elements are reachable from top-level context(s)
matchContext = addCombinator( function( elem ) {
return elem === checkContext;
}, implicitRelative, true ),
matchAnyContext = addCombinator( function( elem ) {
return indexOf.call( checkContext, elem ) > -1;
}, implicitRelative, true ),
matchers = [ function( elem, context, xml ) {
return ( !leadingRelative && ( xml || context !== outermostContext ) ) || (
(checkContext = context).nodeType ?
matchContext( elem, context, xml ) :
matchAnyContext( elem, context, xml ) );
} ];
for ( ; i < len; i++ ) {
if ( (matcher = Expr.relative[ tokens[i].type ]) ) {
matchers = [ addCombinator(elementMatcher( matchers ), matcher) ];
} else {
matcher = Expr.filter[ tokens[i].type ].apply( null, tokens[i].matches );
// Return special upon seeing a positional matcher
if ( matcher[ expando ] ) {
// Find the next relative operator (if any) for proper handling
j = ++i;
for ( ; j < len; j++ ) {
if ( Expr.relative[ tokens[j].type ] ) {
break;
}
}
return setMatcher(
i > 1 && elementMatcher( matchers ),
i > 1 && toSelector(
// If the preceding token was a descendant combinator, insert an implicit any-element `*`
tokens.slice( 0, i - 1 ).concat({ value: tokens[ i - 2 ].type === " " ? "*" : "" })
).replace( rtrim, "$1" ),
matcher,
i < j && matcherFromTokens( tokens.slice( i, j ) ),
j < len && matcherFromTokens( (tokens = tokens.slice( j )) ),
j < len && toSelector( tokens )
);
}
matchers.push( matcher );
}
}
return elementMatcher( matchers );
}
function matcherFromGroupMatchers( elementMatchers, setMatchers ) {
// A counter to specify which element is currently being matched
var matcherCachedRuns = 0,
bySet = setMatchers.length > 0,
byElement = elementMatchers.length > 0,
superMatcher = function( seed, context, xml, results, expandContext ) {
var elem, j, matcher,
setMatched = [],
matchedCount = 0,
i = "0",
unmatched = seed && [],
outermost = expandContext != null,
contextBackup = outermostContext,
// We must always have either seed elements or context
elems = seed || byElement && Expr.find["TAG"]( "*", expandContext && context.parentNode || context ),
// Use integer dirruns iff this is the outermost matcher
dirrunsUnique = (dirruns += contextBackup == null ? 1 : Math.random() || 0.1);
if ( outermost ) {
outermostContext = context !== document && context;
cachedruns = matcherCachedRuns;
}
// Add elements passing elementMatchers directly to results
// Keep `i` a string if there are no elements so `matchedCount` will be "00" below
for ( ; (elem = elems[i]) != null; i++ ) {
if ( byElement && elem ) {
j = 0;
while ( (matcher = elementMatchers[j++]) ) {
if ( matcher( elem, context, xml ) ) {
results.push( elem );
break;
}
}
if ( outermost ) {
dirruns = dirrunsUnique;
cachedruns = ++matcherCachedRuns;
}
}
// Track unmatched elements for set filters
if ( bySet ) {
// They will have gone through all possible matchers
if ( (elem = !matcher && elem) ) {
matchedCount--;
}
// Lengthen the array for every element, matched or not
if ( seed ) {
unmatched.push( elem );
}
}
}
// Apply set filters to unmatched elements
matchedCount += i;
if ( bySet && i !== matchedCount ) {
j = 0;
while ( (matcher = setMatchers[j++]) ) {
matcher( unmatched, setMatched, context, xml );
}
if ( seed ) {
// Reintegrate element matches to eliminate the need for sorting
if ( matchedCount > 0 ) {
while ( i-- ) {
if ( !(unmatched[i] || setMatched[i]) ) {
setMatched[i] = pop.call( results );
}
}
}
// Discard index placeholder values to get only actual matches
setMatched = condense( setMatched );
}
// Add matches to results
push.apply( results, setMatched );
// Seedless set matches succeeding multiple successful matchers stipulate sorting
if ( outermost && !seed && setMatched.length > 0 &&
( matchedCount + setMatchers.length ) > 1 ) {
Sizzle.uniqueSort( results );
}
}
// Override manipulation of globals by nested matchers
if ( outermost ) {
dirruns = dirrunsUnique;
outermostContext = contextBackup;
}
return unmatched;
};
return bySet ?
markFunction( superMatcher ) :
superMatcher;
}
compile = Sizzle.compile = function( selector, group /* Internal Use Only */ ) {
var i,
setMatchers = [],
elementMatchers = [],
cached = compilerCache[ selector + " " ];
if ( !cached ) {
// Generate a function of recursive functions that can be used to check each element
if ( !group ) {
group = tokenize( selector );
}
i = group.length;
while ( i-- ) {
cached = matcherFromTokens( group[i] );
if ( cached[ expando ] ) {
setMatchers.push( cached );
} else {
elementMatchers.push( cached );
}
}
// Cache the compiled function
cached = compilerCache( selector, matcherFromGroupMatchers( elementMatchers, setMatchers ) );
}
return cached;
};
function multipleContexts( selector, contexts, results ) {
var i = 0,
len = contexts.length;
for ( ; i < len; i++ ) {
Sizzle( selector, contexts[i], results );
}
return results;
}
function select( selector, context, results, seed ) {
var i, tokens, token, type, find,
match = tokenize( selector );
if ( !seed ) {
// Try to minimize operations if there is only one group
if ( match.length === 1 ) {
// Take a shortcut and set the context if the root selector is an ID
tokens = match[0] = match[0].slice( 0 );
if ( tokens.length > 2 && (token = tokens[0]).type === "ID" &&
support.getById && context.nodeType === 9 && documentIsHTML &&
Expr.relative[ tokens[1].type ] ) {
context = ( Expr.find["ID"]( token.matches[0].replace(runescape, funescape), context ) || [] )[0];
if ( !context ) {
return results;
}
selector = selector.slice( tokens.shift().value.length );
}
// Fetch a seed set for right-to-left matching
i = matchExpr["needsContext"].test( selector ) ? 0 : tokens.length;
while ( i-- ) {
token = tokens[i];
// Abort if we hit a combinator
if ( Expr.relative[ (type = token.type) ] ) {
break;
}
if ( (find = Expr.find[ type ]) ) {
// Search, expanding context for leading sibling combinators
if ( (seed = find(
token.matches[0].replace( runescape, funescape ),
rsibling.test( tokens[0].type ) && context.parentNode || context
)) ) {
// If seed is empty or no tokens remain, we can return early
tokens.splice( i, 1 );
selector = seed.length && toSelector( tokens );
if ( !selector ) {
push.apply( results, seed );
return results;
}
break;
}
}
}
}
}
// Compile and execute a filtering function
// Provide `match` to avoid retokenization if we modified the selector above
compile( selector, match )(
seed,
context,
!documentIsHTML,
results,
rsibling.test( selector )
);
return results;
}
// Deprecated
Expr.pseudos["nth"] = Expr.pseudos["eq"];
// Easy API for creating new setFilters
function setFilters() {}
setFilters.prototype = Expr.filters = Expr.pseudos;
Expr.setFilters = new setFilters();
// One-time assignments
// Sort stability
support.sortStable = expando.split("").sort( sortOrder ).join("") === expando;
// Initialize against the default document
setDocument();
// Support: Chrome<<14
// Always assume duplicates if they aren't passed to the comparison function
[0, 0].sort( sortOrder );
support.detectDuplicates = hasDuplicate;
jQuery.find = Sizzle;
jQuery.expr = Sizzle.selectors;
jQuery.expr[":"] = jQuery.expr.pseudos;
jQuery.unique = Sizzle.uniqueSort;
jQuery.text = Sizzle.getText;
jQuery.isXMLDoc = Sizzle.isXML;
jQuery.contains = Sizzle.contains;
})( window );
// String to Object options format cache
var optionsCache = {};
// Convert String-formatted options into Object-formatted ones and store in cache
function createOptions( options ) {
var object = optionsCache[ options ] = {};
jQuery.each( options.match( core_rnotwhite ) || [], function( _, flag ) {
object[ flag ] = true;
});
return object;
}
/*
* Create a callback list using the following parameters:
*
* options: an optional list of space-separated options that will change how
* the callback list behaves or a more traditional option object
*
* By default a callback list will act like an event callback list and can be
* "fired" multiple times.
*
* Possible options:
*
* once: will ensure the callback list can only be fired once (like a Deferred)
*
* memory: will keep track of previous values and will call any callback added
* after the list has been fired right away with the latest "memorized"
* values (like a Deferred)
*
* unique: will ensure a callback can only be added once (no duplicate in the list)
*
* stopOnFalse: interrupt callings when a callback returns false
*
*/
jQuery.Callbacks = function( options ) {
// Convert options from String-formatted to Object-formatted if needed
// (we check in cache first)
options = typeof options === "string" ?
( optionsCache[ options ] || createOptions( options ) ) :
jQuery.extend( {}, options );
var // Flag to know if list is currently firing
firing,
// Last fire value (for non-forgettable lists)
memory,
// Flag to know if list was already fired
fired,
// End of the loop when firing
firingLength,
// Index of currently firing callback (modified by remove if needed)
firingIndex,
// First callback to fire (used internally by add and fireWith)
firingStart,
// Actual callback list
list = [],
// Stack of fire calls for repeatable lists
stack = !options.once && [],
// Fire callbacks
fire = function( data ) {
memory = options.memory && data;
fired = true;
firingIndex = firingStart || 0;
firingStart = 0;
firingLength = list.length;
firing = true;
for ( ; list && firingIndex < firingLength; firingIndex++ ) {
if ( list[ firingIndex ].apply( data[ 0 ], data[ 1 ] ) === false && options.stopOnFalse ) {
memory = false; // To prevent further calls using add
break;
}
}
firing = false;
if ( list ) {
if ( stack ) {
if ( stack.length ) {
fire( stack.shift() );
}
} else if ( memory ) {
list = [];
} else {
self.disable();
}
}
},
// Actual Callbacks object
self = {
// Add a callback or a collection of callbacks to the list
add: function() {
if ( list ) {
// First, we save the current length
var start = list.length;
(function add( args ) {
jQuery.each( args, function( _, arg ) {
var type = jQuery.type( arg );
if ( type === "function" ) {
if ( !options.unique || !self.has( arg ) ) {
list.push( arg );
}
} else if ( arg && arg.length && type !== "string" ) {
// Inspect recursively
add( arg );
}
});
})( arguments );
// Do we need to add the callbacks to the
// current firing batch?
if ( firing ) {
firingLength = list.length;
// With memory, if we're not firing then
// we should call right away
} else if ( memory ) {
firingStart = start;
fire( memory );
}
}
return this;
},
// Remove a callback from the list
remove: function() {
if ( list ) {
jQuery.each( arguments, function( _, arg ) {
var index;
while( ( index = jQuery.inArray( arg, list, index ) ) > -1 ) {
list.splice( index, 1 );
// Handle firing indexes
if ( firing ) {
if ( index <= firingLength ) {
firingLength--;
}
if ( index <= firingIndex ) {
firingIndex--;
}
}
}
});
}
return this;
},
// Check if a given callback is in the list.
// If no argument is given, return whether or not list has callbacks attached.
has: function( fn ) {
return fn ? jQuery.inArray( fn, list ) > -1 : !!( list && list.length );
},
// Remove all callbacks from the list
empty: function() {
list = [];
firingLength = 0;
return this;
},
// Have the list do nothing anymore
disable: function() {
list = stack = memory = undefined;
return this;
},
// Is it disabled?
disabled: function() {
return !list;
},
// Lock the list in its current state
lock: function() {
stack = undefined;
if ( !memory ) {
self.disable();
}
return this;
},
// Is it locked?
locked: function() {
return !stack;
},
// Call all callbacks with the given context and arguments
fireWith: function( context, args ) {
args = args || [];
args = [ context, args.slice ? args.slice() : args ];
if ( list && ( !fired || stack ) ) {
if ( firing ) {
stack.push( args );
} else {
fire( args );
}
}
return this;
},
// Call all the callbacks with the given arguments
fire: function() {
self.fireWith( this, arguments );
return this;
},
// To know if the callbacks have already been called at least once
fired: function() {
return !!fired;
}
};
return self;
};
jQuery.extend({
Deferred: function( func ) {
var tuples = [
// action, add listener, listener list, final state
[ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ],
[ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ],
[ "notify", "progress", jQuery.Callbacks("memory") ]
],
state = "pending",
promise = {
state: function() {
gitextract_rrozzaby/ ├── .history/ │ ├── oop继承六种方式_20210128110542.html │ ├── oop继承六种方式_20210128111343.html │ └── oop继承六种方式_20210128111530.html ├── README.md ├── Web Workers/ │ ├── 06_Web Workers_测试.html │ ├── 06_Web Workers_测试2.html │ └── worker.js ├── oop继承六种方式.html ├── vue2.0学习/ │ ├── 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接口封装/ │ │ ├── README.md │ │ ├── babel.config.js │ │ ├── package.json │ │ ├── public/ │ │ │ └── index.html │ │ └── src/ │ │ ├── App.vue │ │ ├── api/ │ │ │ ├── api.js │ │ │ ├── http.js │ │ │ ├── personal.js │ │ │ ├── request.js │ │ │ └── vote.js │ │ └── 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组件三大核心概念.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.json ├── 消除不同的浏览器在默认样式上不同表现reset.css └── 移动端1px像素.css
SYMBOL INDEX (260 symbols across 39 files)
FILE: Web Workers/worker.js
function fibonacci (line 1) | function fibonacci(n) {
FILE: vue2.0学习/内部运行机制/virtual dom/diff算法/createElement.js
function createElement (line 1) | function createElement(vnode) {
FILE: vue2.0学习/内部运行机制/virtual dom/diff算法/updateChildren.js
function updateChildren (line 1) | function updateChildren(vnode, newVnode) {
function replaceNode (line 17) | function replaceNode(vnode, newVnode) {
FILE: vue2.0学习/内部运行机制/响应式原理/Array.js
function render (line 4) | function render() {
function observer (line 24) | function observer(obj) {
function defineReactive (line 36) | function defineReactive(data, key, value) {
function $set (line 52) | function $set(data, key, value) {
FILE: vue2.0学习/内部运行机制/响应式原理/Object.js
function render (line 2) | function render() {
function observe (line 10) | function observe(obj) {
FILE: vue2.0学习/内部运行机制/响应式原理/Proxy.js
function render (line 4) | function render() {
method get (line 13) | get(target, key) {
method set (line 20) | set(target, key, value) {
FILE: vue2.0学习/基于axios接口封装/src/api/personal.js
function login (line 4) | function login(){
FILE: vue2.0学习/基于axios接口封装/src/api/request.js
function request (line 23) | function request(url, options = {}) {
FILE: vue2.0学习/基于axios接口封装/src/api/vote.js
function voteAdd (line 4) | function voteAdd() {
FILE: vuex-demo/store.js
method INCREMENT (line 9) | INCREMENT(state) {
method DECREMENT (line 12) | DECREMENT(state) {
method evenOrOdd (line 17) | evenOrOdd(state) {
method incrementIfOdd (line 22) | incrementIfOdd({ commit, state }) { // 带条件的action
method incrementAsync (line 27) | incrementAsync({ commit }) { //异步的action
FILE: vuex-demo/优化后store.js
method increment (line 9) | increment(state) {
method decrement (line 12) | decrement(state) {
method evenOrOdd (line 17) | evenOrOdd(state) {
method incrementIfOdd (line 22) | incrementIfOdd({ commit, state }) { // 带条件的action
method incrementAsync (line 27) | incrementAsync({ commit }) { //异步的action
FILE: 模块化/01_modular/01_全局function模式/module1.js
function foo (line 7) | function foo() {
function bar (line 10) | function bar() {
FILE: 模块化/01_modular/01_全局function模式/module2.js
function foo (line 3) | function foo() { //与另一个模块中的函数冲突了
FILE: 模块化/01_modular/02_namespace模式/module1.js
method foo (line 8) | foo() {
method bar (line 11) | bar() {
FILE: 模块化/01_modular/02_namespace模式/module2.js
method foo (line 8) | foo() {
method bar (line 11) | bar() {
FILE: 模块化/01_modular/03_IIFE模式/module3.js
function foo (line 10) | function foo() {
function bar (line 14) | function bar() {
function otherFun (line 19) | function otherFun() {
FILE: 模块化/01_modular/04_IIFE模式增强/jquery-1.10.1.js
function isArraylike (line 983) | function isArraylike( obj ) {
function Sizzle (line 1177) | function Sizzle( selector, context, results, seed ) {
function isNative (line 1290) | function isNative( fn ) {
function createCache (line 1300) | function createCache() {
function markFunction (line 1318) | function markFunction( fn ) {
function assert (line 1327) | function assert( fn ) {
function addHandle (line 1350) | function addHandle( attrs, handler, test ) {
function boolHandler (line 1369) | function boolHandler( elem, name ) {
function interpolationHandler (line 1383) | function interpolationHandler( elem, name ) {
function valueHandler (line 1393) | function valueHandler( elem ) {
function siblingCheck (line 1408) | function siblingCheck( a, b ) {
function createInputPseudo (line 1435) | function createInputPseudo( type ) {
function createButtonPseudo (line 1446) | function createButtonPseudo( type ) {
function createPositionalPseudo (line 1457) | function createPositionalPseudo( fn ) {
function tokenize (line 2465) | function tokenize( selector, parseOnly ) {
function toSelector (line 2532) | function toSelector( tokens ) {
function addCombinator (line 2542) | function addCombinator( matcher, combinator, base ) {
function elementMatcher (line 2592) | function elementMatcher( matchers ) {
function condense (line 2606) | function condense( unmatched, map, filter, context, xml ) {
function setMatcher (line 2627) | function setMatcher( preFilter, selector, matcher, postFilter, postFinde...
function matcherFromTokens (line 2720) | function matcherFromTokens( tokens ) {
function matcherFromGroupMatchers (line 2775) | function matcherFromGroupMatchers( elementMatchers, setMatchers ) {
function multipleContexts (line 2903) | function multipleContexts( selector, contexts, results ) {
function select (line 2912) | function select( selector, context, results, seed ) {
function setFilters (line 2980) | function setFilters() {}
function createOptions (line 3011) | function createOptions( options ) {
function internalData (line 3594) | function internalData( elem, name, data, pvt /* Internal Use Only */ ){
function internalRemoveData (line 3683) | function internalRemoveData( elem, name, pvt ) {
function dataAttr (line 3880) | function dataAttr( elem, key, data ) {
function isEmptyDataObject (line 3912) | function isEmptyDataObject( obj ) {
function returnTrue (line 4733) | function returnTrue() {
function returnFalse (line 4737) | function returnFalse() {
function safeActiveElement (line 4741) | function safeActiveElement() {
function sibling (line 5859) | function sibling( cur, dir ) {
function winnow (line 5977) | function winnow( elements, qualifier, not ) {
function createSafeFragment (line 6005) | function createSafeFragment( document ) {
function manipulationTarget (line 6319) | function manipulationTarget( elem, content ) {
function disableScript (line 6329) | function disableScript( elem ) {
function restoreScript (line 6333) | function restoreScript( elem ) {
function setGlobalEval (line 6344) | function setGlobalEval( elems, refElements ) {
function cloneCopyEvent (line 6352) | function cloneCopyEvent( src, dest ) {
function fixCloneNodeIssues (line 6380) | function fixCloneNodeIssues( src, dest ) {
function getAll (line 6473) | function getAll( context, tag ) {
function fixDefaultChecked (line 6496) | function fixDefaultChecked( elem ) {
function vendorPropName (line 6838) | function vendorPropName( style, name ) {
function isHidden (line 6860) | function isHidden( elem, el ) {
function showHide (line 6867) | function showHide( elements, show ) {
function setPositiveNumber (line 7193) | function setPositiveNumber( elem, value, subtract ) {
function augmentWidthOrHeight (line 7201) | function augmentWidthOrHeight( elem, name, extra, isBorderBox, styles ) {
function getWidthOrHeight (line 7240) | function getWidthOrHeight( elem, name, extra ) {
function css_defaultDisplay (line 7284) | function css_defaultDisplay( nodeName ) {
function actualDisplay (line 7316) | function actualDisplay( name, doc ) {
function buildParams (line 7545) | function buildParams( prefix, obj, traditional, add ) {
function addToPrefiltersOrTransports (line 7660) | function addToPrefiltersOrTransports( structure ) {
function inspectPrefiltersOrTransports (line 7692) | function inspectPrefiltersOrTransports( structure, options, originalOpti...
function ajaxExtend (line 7719) | function ajaxExtend( target, src ) {
function done (line 8167) | function done( status, nativeStatusText, responses, headers ) {
function ajaxHandleResponses (line 8314) | function ajaxHandleResponses( s, jqXHR, responses ) {
function ajaxConvert (line 8369) | function ajaxConvert( s, response, jqXHR, isSuccess ) {
function createStandardXHR (line 8637) | function createStandardXHR() {
function createActiveXHR (line 8643) | function createActiveXHR() {
function createFxNow (line 8889) | function createFxNow() {
function createTween (line 8896) | function createTween( value, prop, animation ) {
function Animation (line 8910) | function Animation( elem, properties, options ) {
function propFilter (line 9014) | function propFilter( props, specialEasing ) {
function defaultPrefilter (line 9081) | function defaultPrefilter( elem, props, opts ) {
function Tween (line 9206) | function Tween( elem, options, prop, end, easing ) {
function genFx (line 9430) | function genFx( type, includeWidth ) {
function getWindow (line 9726) | function getWindow( elem ) {
FILE: 模块化/01_modular/04_IIFE模式增强/module4.js
function foo (line 9) | function foo() {
function bar (line 14) | function bar() {
function otherFun (line 19) | function otherFun() {
FILE: 模块化/02_CommonJS-Node/modules/module1.js
method foo (line 6) | foo() {
FILE: 模块化/03_CommonJS-Browserify/js/dist/bundle.js
function s (line 1) | function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&re...
method foo (line 31) | foo() {
function unique_pred (line 58) | function unique_pred(list, compare) {
function unique_eq (line 77) | function unique_eq(list) {
function unique (line 96) | function unique(list, compare, sorted) {
FILE: 模块化/03_CommonJS-Browserify/js/src/module1.js
method foo (line 5) | foo() {
FILE: 模块化/04_AMD-RequireJS/01_NoAMD/js/modules/alerter.js
function showMsg (line 4) | function showMsg() {
FILE: 模块化/04_AMD-RequireJS/01_NoAMD/js/modules/dataService.js
function getMsg (line 4) | function getMsg() {
FILE: 模块化/04_AMD-RequireJS/02_RequireJS/js/libs/require.js
function commentReplace (line 39) | function commentReplace(match, singlePrefix) {
function isFunction (line 43) | function isFunction(it) {
function isArray (line 47) | function isArray(it) {
function each (line 55) | function each(ary, func) {
function eachReverse (line 70) | function eachReverse(ary, func) {
function hasProp (line 81) | function hasProp(obj, prop) {
function getOwn (line 85) | function getOwn(obj, prop) {
function eachProp (line 94) | function eachProp(obj, func) {
function mixin (line 109) | function mixin(target, source, force, deepStringMixin) {
function bind (line 132) | function bind(obj, fn) {
function scripts (line 138) | function scripts() {
function defaultOnError (line 142) | function defaultOnError(err) {
function getGlobal (line 148) | function getGlobal(value) {
function makeError (line 167) | function makeError(id, msg, err, requireModules) {
function newContext (line 199) | function newContext(contextName) {
function getInteractiveScript (line 1990) | function getInteractiveScript() {
FILE: 模块化/04_AMD-RequireJS/02_RequireJS/js/modules/alerter.js
function showMsg (line 4) | function showMsg() {
FILE: 模块化/04_AMD-RequireJS/02_RequireJS/js/modules/dataService.js
function getMsg (line 4) | function getMsg() {
FILE: 模块化/04_AMD-RequireJS/03_RequireJS2/js/libs/jquery-1.10.1.js
function isArraylike (line 983) | function isArraylike( obj ) {
function Sizzle (line 1177) | function Sizzle( selector, context, results, seed ) {
function isNative (line 1290) | function isNative( fn ) {
function createCache (line 1300) | function createCache() {
function markFunction (line 1318) | function markFunction( fn ) {
function assert (line 1327) | function assert( fn ) {
function addHandle (line 1350) | function addHandle( attrs, handler, test ) {
function boolHandler (line 1369) | function boolHandler( elem, name ) {
function interpolationHandler (line 1383) | function interpolationHandler( elem, name ) {
function valueHandler (line 1393) | function valueHandler( elem ) {
function siblingCheck (line 1408) | function siblingCheck( a, b ) {
function createInputPseudo (line 1435) | function createInputPseudo( type ) {
function createButtonPseudo (line 1446) | function createButtonPseudo( type ) {
function createPositionalPseudo (line 1457) | function createPositionalPseudo( fn ) {
function tokenize (line 2465) | function tokenize( selector, parseOnly ) {
function toSelector (line 2532) | function toSelector( tokens ) {
function addCombinator (line 2542) | function addCombinator( matcher, combinator, base ) {
function elementMatcher (line 2592) | function elementMatcher( matchers ) {
function condense (line 2606) | function condense( unmatched, map, filter, context, xml ) {
function setMatcher (line 2627) | function setMatcher( preFilter, selector, matcher, postFilter, postFinde...
function matcherFromTokens (line 2720) | function matcherFromTokens( tokens ) {
function matcherFromGroupMatchers (line 2775) | function matcherFromGroupMatchers( elementMatchers, setMatchers ) {
function multipleContexts (line 2903) | function multipleContexts( selector, contexts, results ) {
function select (line 2912) | function select( selector, context, results, seed ) {
function setFilters (line 2980) | function setFilters() {}
function createOptions (line 3011) | function createOptions( options ) {
function internalData (line 3594) | function internalData( elem, name, data, pvt /* Internal Use Only */ ){
function internalRemoveData (line 3683) | function internalRemoveData( elem, name, pvt ) {
function dataAttr (line 3880) | function dataAttr( elem, key, data ) {
function isEmptyDataObject (line 3912) | function isEmptyDataObject( obj ) {
function returnTrue (line 4733) | function returnTrue() {
function returnFalse (line 4737) | function returnFalse() {
function safeActiveElement (line 4741) | function safeActiveElement() {
function sibling (line 5859) | function sibling( cur, dir ) {
function winnow (line 5977) | function winnow( elements, qualifier, not ) {
function createSafeFragment (line 6005) | function createSafeFragment( document ) {
function manipulationTarget (line 6319) | function manipulationTarget( elem, content ) {
function disableScript (line 6329) | function disableScript( elem ) {
function restoreScript (line 6333) | function restoreScript( elem ) {
function setGlobalEval (line 6344) | function setGlobalEval( elems, refElements ) {
function cloneCopyEvent (line 6352) | function cloneCopyEvent( src, dest ) {
function fixCloneNodeIssues (line 6380) | function fixCloneNodeIssues( src, dest ) {
function getAll (line 6473) | function getAll( context, tag ) {
function fixDefaultChecked (line 6496) | function fixDefaultChecked( elem ) {
function vendorPropName (line 6838) | function vendorPropName( style, name ) {
function isHidden (line 6860) | function isHidden( elem, el ) {
function showHide (line 6867) | function showHide( elements, show ) {
function setPositiveNumber (line 7193) | function setPositiveNumber( elem, value, subtract ) {
function augmentWidthOrHeight (line 7201) | function augmentWidthOrHeight( elem, name, extra, isBorderBox, styles ) {
function getWidthOrHeight (line 7240) | function getWidthOrHeight( elem, name, extra ) {
function css_defaultDisplay (line 7284) | function css_defaultDisplay( nodeName ) {
function actualDisplay (line 7316) | function actualDisplay( name, doc ) {
function buildParams (line 7545) | function buildParams( prefix, obj, traditional, add ) {
function addToPrefiltersOrTransports (line 7660) | function addToPrefiltersOrTransports( structure ) {
function inspectPrefiltersOrTransports (line 7692) | function inspectPrefiltersOrTransports( structure, options, originalOpti...
function ajaxExtend (line 7719) | function ajaxExtend( target, src ) {
function done (line 8167) | function done( status, nativeStatusText, responses, headers ) {
function ajaxHandleResponses (line 8314) | function ajaxHandleResponses( s, jqXHR, responses ) {
function ajaxConvert (line 8369) | function ajaxConvert( s, response, jqXHR, isSuccess ) {
function createStandardXHR (line 8637) | function createStandardXHR() {
function createActiveXHR (line 8643) | function createActiveXHR() {
function createFxNow (line 8889) | function createFxNow() {
function createTween (line 8896) | function createTween( value, prop, animation ) {
function Animation (line 8910) | function Animation( elem, properties, options ) {
function propFilter (line 9014) | function propFilter( props, specialEasing ) {
function defaultPrefilter (line 9081) | function defaultPrefilter( elem, props, opts ) {
function Tween (line 9206) | function Tween( elem, options, prop, end, easing ) {
function genFx (line 9430) | function genFx( type, includeWidth ) {
function getWindow (line 9726) | function getWindow( elem ) {
FILE: 模块化/04_AMD-RequireJS/03_RequireJS2/js/libs/require.js
function commentReplace (line 39) | function commentReplace(match, singlePrefix) {
function isFunction (line 43) | function isFunction(it) {
function isArray (line 47) | function isArray(it) {
function each (line 55) | function each(ary, func) {
function eachReverse (line 70) | function eachReverse(ary, func) {
function hasProp (line 81) | function hasProp(obj, prop) {
function getOwn (line 85) | function getOwn(obj, prop) {
function eachProp (line 94) | function eachProp(obj, func) {
function mixin (line 109) | function mixin(target, source, force, deepStringMixin) {
function bind (line 132) | function bind(obj, fn) {
function scripts (line 138) | function scripts() {
function defaultOnError (line 142) | function defaultOnError(err) {
function getGlobal (line 148) | function getGlobal(value) {
function makeError (line 167) | function makeError(id, msg, err, requireModules) {
function newContext (line 199) | function newContext(contextName) {
function getInteractiveScript (line 1990) | function getInteractiveScript() {
FILE: 模块化/04_AMD-RequireJS/03_RequireJS2/js/modules/alerter.js
function showMsg (line 4) | function showMsg() {
FILE: 模块化/04_AMD-RequireJS/03_RequireJS2/js/modules/dataService.js
function getMsg (line 4) | function getMsg() {
FILE: 模块化/05_CMD-SeaJS/js/libs/sea.js
function c (line 2) | function c(a){return function(b){return{}.toString.call(b)=="[object "+a...
function d (line 2) | function d(){return B++}
function e (line 2) | function e(a){return a.match(E)[0]}
function f (line 2) | function f(a){for(a=a.replace(F,"/");a.match(G);)a=a.replace(G,"/");retu...
function g (line 2) | function g(a){var b=a.length-1,c=a.charAt(b);return"#"===c?a.substring(0...
function h (line 2) | function h(a){var b=v.alias;return b&&x(b[a])?b[a]:a}
function i (line 2) | function i(a){var b=v.paths,c;return b&&(c=a.match(I))&&x(b[c[1]])&&(a=b...
function j (line 2) | function j(a){var b=v.vars;return b&&a.indexOf("{")>-1&&(a=a.replace(J,f...
function k (line 2) | function k(a){var b=v.map,c=a;if(b)for(var d=0,e=b.length;e>d;d++){var f...
function l (line 2) | function l(a,b){var c,d=a.charAt(0);if(K.test(a))c=a;else if("."===d)c=f...
function m (line 2) | function m(a,b){if(!a)return"";a=h(a),a=i(a),a=j(a),a=g(a);var c=l(a,b);...
function n (line 2) | function n(a){return a.hasAttribute?a.src:a.getAttribute("src",4)}
function o (line 2) | function o(a,b,c,d){var e=T.test(a),f=M.createElement(e?"link":"script")...
function p (line 2) | function p(a,c,d,e){function f(){a.onload=a.onerror=a.onreadystatechange...
function q (line 2) | function q(a,b){var c=a.sheet,d;if(W)c&&(d=!0);else if(c)try{c.cssRules&...
function r (line 2) | function r(){if(U)return U;if(V&&"interactive"===V.readyState)return V;f...
function s (line 2) | function s(a){var b=[];return a.replace(Y,"").replace(X,function(a,c,d){...
function t (line 2) | function t(a,b){this.uri=a,this.dependencies=b||[],this.exports=null,thi...
function c (line 2) | function c(){u.request(g.requestUri,g.onRequest,g.charset,g.crossorigin)}
function d (line 2) | function d(){delete _[h],ab[h]=!0,$&&(t.save(f,$),$=null);var a,b=bb[h];...
function a (line 2) | function a(b){return t.get(a.resolve(b)).exec()}
FILE: 模块化/05_CMD-SeaJS/js/modules/module1.js
function show (line 5) | function show() {
FILE: 模块化/05_CMD-SeaJS/js/modules/module4.js
function show (line 5) | function show() {
FILE: 模块化/06_ES6_Babel_Browserify/js/lib/app.js
function _interopRequireDefault (line 11) | function _interopRequireDefault(obj) { return obj && obj.__esModule ? ob...
FILE: 模块化/06_ES6_Babel_Browserify/js/lib/bundle.js
function r (line 1) | function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==...
function _interopRequireDefault (line 12) | function _interopRequireDefault(obj) { return obj && obj.__esModule ? ob...
function foo (line 28) | function foo() {
function bar (line 31) | function bar() {
function fun1 (line 41) | function fun1() {
function fun2 (line 44) | function fun2() {
FILE: 模块化/06_ES6_Babel_Browserify/js/lib/module1.js
function foo (line 9) | function foo() {
function bar (line 12) | function bar() {
FILE: 模块化/06_ES6_Babel_Browserify/js/lib/module2.js
function fun1 (line 7) | function fun1() {
function fun2 (line 10) | function fun2() {
FILE: 模块化/06_ES6_Babel_Browserify/js/src/module1.js
function foo (line 2) | function foo() {
function bar (line 5) | function bar() {
FILE: 模块化/06_ES6_Babel_Browserify/js/src/module2.js
function fun1 (line 2) | function fun1() {
function fun2 (line 5) | function fun2() {
Condensed preview — 183 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (972K chars).
[
{
"path": ".history/oop继承六种方式_20210128110542.html",
"chars": 5081,
"preview": "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>JavaScript继承</title>\r\n</head>\r\n\r\n<bo"
},
{
"path": ".history/oop继承六种方式_20210128111343.html",
"chars": 4674,
"preview": "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>JavaScript</title>\r\n</head>\r\n\r\n<body>\r\n "
},
{
"path": ".history/oop继承六种方式_20210128111530.html",
"chars": 4678,
"preview": "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>JavaScript继承例子</title>\r\n</head>\r\n\r\n<body"
},
{
"path": "README.md",
"chars": 5115,
"preview": "# 博客目录\n努力打造一系列适合初中级工程师能够看得懂的优质文章，今年博客侧重于框架、TS和构建工具等底层原理分析，如果想第一时间获取文章，欢迎关注**我的公众号：前端工匠，接下去的路我们一起走！** 欢迎添加我的个人微信frontJS，"
},
{
"path": "Web Workers/06_Web Workers_测试.html",
"chars": 889,
"preview": "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>06_Web Workers_测试</title>\r\n</head>\r\n<body>"
},
{
"path": "Web Workers/06_Web Workers_测试2.html",
"chars": 995,
"preview": "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>06_Web Workers_测试</title>\r\n</head>\r\n<body>"
},
{
"path": "Web Workers/worker.js",
"chars": 409,
"preview": "function fibonacci(n) {\r\n return n<=2 ? 1 : fibonacci(n-1) + fibonacci(n-2) //递归调用\r\n}\r\n\r\nconsole.log(this)\r\nthis.onmes"
},
{
"path": "oop继承六种方式.html",
"chars": 4678,
"preview": "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>JavaScript继承例子</title>\r\n</head>\r\n\r\n<body"
},
{
"path": "vue2.0学习/demo/$emit如何获取返回值/demo.vue",
"chars": 515,
"preview": "<template>\r\n <div>\r\n name: {{ name || \"--\" }}\r\n <br />\r\n <input :value=\"name\" @change=\"handleCha"
},
{
"path": "vue2.0学习/demo/$emit如何获取返回值/index.vue",
"chars": 600,
"preview": "// this.$emit的返回值是什么？ this // 如果需要返回值可以使用回调参数\r\n<template>\r\n <div class=\"hello\">\r\n <div>\r\n <Demo :name=\"name\" @c"
},
{
"path": "vue2.0学习/demo/filter.vue",
"chars": 582,
"preview": "<template>\r\n <div class=\"hello\">\r\n <div>\r\n <h2>显示格式化的日期时间</h2>\r\n <p>{{ date }}</p>\r\n <p>{{ date | fil"
},
{
"path": "vue2.0学习/slot与slot-scope用法/TodoItem.vue",
"chars": 338,
"preview": "<template>\r\n <div>\r\n <li class=\"item\">\r\n <input v-model=\"checked\" type=\"checkbox\" />\r\n <slot name=\"item\" :"
},
{
"path": "vue2.0学习/slot与slot-scope用法/index.vue",
"chars": 855,
"preview": "<template>\r\n <div class=\"toList\">\r\n <input v-model=\"info\" type=\"text\" /> <button @click=\"addItem\">添加</button>\r\n <"
},
{
"path": "vue2.0学习/slot与slot-scope用法/slot新语法/index.vue",
"chars": 660,
"preview": "<template>\r\n <div class=\"helloSlot\">\r\n <h2>2.6 新语法</h2>\r\n <SlotDemo>\r\n <p>默认插槽：default slot</p>\r\n <temp"
},
{
"path": "vue2.0学习/slot与slot-scope用法/slot新语法/slot.vue",
"chars": 265,
"preview": "<template>\r\n <div>\r\n <slot />\r\n <slot name=\"title\" />\r\n <slot name=\"item\" :propData=\"propData\" />\r\n </div>\r\n<"
},
{
"path": "vue2.0学习/vue组件间通信/attrs listeners/childCom1.vue",
"chars": 620,
"preview": "// childCom1.vue\r\n<template class=\"border\">\r\n <div>\r\n <p>foo: {{ foo }}</p>\r\n <p>childCom1的$attrs: {{ $attrs }}</"
},
{
"path": "vue2.0学习/vue组件间通信/attrs listeners/childCom2.vue",
"chars": 528,
"preview": "<template>\r\n <div class=\"border\">\r\n <p>boo: {{ boo }}</p>\r\n <p>childCom2: {{ $attrs }}</p>\r\n <child-com3 v-bin"
},
{
"path": "vue2.0学习/vue组件间通信/attrs listeners/childCom3.vue",
"chars": 254,
"preview": "<template>\r\n <div class=\"border\">\r\n <p>childCom3: {{ $attrs }}</p>\r\n </div>\r\n</template>\r\n<script>\r\nexport default "
},
{
"path": "vue2.0学习/vue组件间通信/attrs listeners/index.vue",
"chars": 439,
"preview": "<template>\r\n <div>\r\n <h2>浪里行舟</h2>\r\n <child-com1\r\n :foo=\"foo\"\r\n :boo=\"boo\"\r\n :coo=\"coo\"\r\n :do"
},
{
"path": "vue2.0学习/vue组件间通信/attrs listeners/listeners/child1.vue",
"chars": 469,
"preview": "<template>\r\n <div>\r\n <p class=\"title\" @click=\"$listeners.other\">父组件</p>\r\n <child2 v-on=\"$listeners\"></child2>\r\n "
},
{
"path": "vue2.0学习/vue组件间通信/attrs listeners/listeners/child2.vue",
"chars": 377,
"preview": "<template>\r\n <div class=\"hello\">\r\n <p @click=\"$listeners.changeData('change')\">孙子组件</p>\r\n <p @click=\"$listeners.a"
},
{
"path": "vue2.0学习/vue组件间通信/attrs listeners/listeners/index.vue",
"chars": 690,
"preview": "<template>\r\n <div class=\"hello\">\r\n <div class=\"msg\">{{ firstMsg }}</div>\r\n <child1\r\n @changeData=\"changeData"
},
{
"path": "vue2.0学习/vue组件间通信/eventBus/eventBus.html",
"chars": 1296,
"preview": "// 用于跨组件通知(不复杂的项目可以使用这种方式)\r\n// Vue.prototype.$bus = new Vue();\r\n\r\n// Son2组件和Grandson1相互通信\r\n\r\n// mounted() {\r\n// this.$b"
},
{
"path": "vue2.0学习/vue组件间通信/props传递一个函数/Props.vue",
"chars": 1027,
"preview": "<template>\r\n <div>\r\n name: {{ name }}\r\n <br />\r\n type: {{ type }}\r\n <br />\r\n list: {{ list }}\r\n <br /"
},
{
"path": "vue2.0学习/vue组件间通信/props传递一个函数/index.vue",
"chars": 651,
"preview": "<template>\r\n <div>\r\n <Props\r\n name=\"Hello Vue！\"\r\n :type=\"type\"\r\n :is-visible=\"false\"\r\n :on-chang"
},
{
"path": "vue2.0学习/vue组件间通信/provide inject/ChildrenA.vue",
"chars": 851,
"preview": "<template>\r\n <div>\r\n <div>\r\n <h1>A 结点</h1>\r\n <button @click=\"() => changeColor()\">改变color</button>\r\n "
},
{
"path": "vue2.0学习/vue组件间通信/provide inject/ChildrenA_a.vue",
"chars": 925,
"preview": "<template>\r\n <div>\r\n <div>\r\n <h1>A 结点</h1>\r\n <button @click=\"() => changeColor()\">改变color</button>\r\n "
},
{
"path": "vue2.0学习/vue组件间通信/provide inject/ChildrenB.vue",
"chars": 289,
"preview": "<template>\r\n <div class=\"border1\">\r\n <h2>B 结点</h2>\r\n <ChildrenD />\r\n <ChildrenE />\r\n </div>\r\n</template>\r\n<sc"
},
{
"path": "vue2.0学习/vue组件间通信/provide inject/ChildrenC.vue",
"chars": 216,
"preview": "<template>\r\n <div class=\"border1\">\r\n <h2>C 结点</h2>\r\n <ChildrenF />\r\n </div>\r\n</template>\r\n<script>\r\nimport Child"
},
{
"path": "vue2.0学习/vue组件间通信/provide inject/ChildrenD.vue",
"chars": 413,
"preview": "<template>\r\n <div class=\"border2\">\r\n <h3 :style=\"{ color: theme.color }\">D 结点</h3>\r\n <button @click=\"handleClick\""
},
{
"path": "vue2.0学习/vue组件间通信/provide inject/ChildrenE.vue",
"chars": 244,
"preview": "<template>\r\n <div class=\"border2\">\r\n <h3 :style=\"{ color: theme1.color }\">E 结点</h3>\r\n </div>\r\n</template>\r\n<script>"
},
{
"path": "vue2.0学习/vue组件间通信/provide inject/ChildrenF.vue",
"chars": 262,
"preview": "<template functional>\r\n <div class=\"border2\">\r\n <h3 :style=\"{ color: injections.theme.color }\">F 结点</h3>\r\n </div>\r\n"
},
{
"path": "vue2.0学习/vue组件间通信/provide inject/index.vue",
"chars": 475,
"preview": "<template>\r\n <div>\r\n <ChildrenA />\r\n <!-- <ChildrenA1 /> -->\r\n </div>\r\n</template>\r\n<script>\r\nimport ChildrenA f"
},
{
"path": "vue2.0学习/watch和computed/computed.vue",
"chars": 543,
"preview": "<template>\r\n <div>\r\n {{ fullName }}\r\n\r\n <div>firstName: <input v-model=\"firstName\" /></div>\r\n <div>lastName: <"
},
{
"path": "vue2.0学习/watch和computed/index.vue",
"chars": 1055,
"preview": "<template>\r\n <div class=\"attr\">\r\n <h1>watch属性</h1>\r\n <h2>{{ $data }}</h2>\r\n <button @click=\"() => (a += 1)\">修改"
},
{
"path": "vue2.0学习/watch和computed/watch.vue",
"chars": 793,
"preview": "<template>\r\n <div>\r\n {{ fullName }}\r\n\r\n <div>firstName: <input v-model=\"firstName\" /></div>\r\n <div>lastName: <"
},
{
"path": "vue2.0学习/内部运行机制/virtual dom/diff算法/createElement.js",
"chars": 632,
"preview": "function createElement(vnode) {\n var tag = vnode.tag // 'ul'\n var attrs = vnode.attrs || {}\n var children = vn"
},
{
"path": "vue2.0学习/内部运行机制/virtual dom/diff算法/updateChildren.js",
"chars": 600,
"preview": "function updateChildren(vnode, newVnode) {\n var children = vnode.children || []\n var newChildren = newVnode.childr"
},
{
"path": "vue2.0学习/内部运行机制/virtual dom/snabbdom/demo.html",
"chars": 2277,
"preview": "<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\"UTF-8\" />\n <title>Document</title>\n</head>\n\n<body>\n <div id=\"con"
},
{
"path": "vue2.0学习/内部运行机制/响应式原理/Array.js",
"chars": 1467,
"preview": "// Object.defineProperty 只能适用于对象\r\n// 如果是数组，通过重写函数的方式解决了这个问题\r\n\r\nfunction render() {\r\n console.log('模拟视图渲染')\r\n}\r\n\r\nlet ob"
},
{
"path": "vue2.0学习/内部运行机制/响应式原理/Object.js",
"chars": 990,
"preview": "// Object.defineProperty如何实现对象响应式变化\r\nfunction render() {\r\n console.log('模拟视图渲染')\r\n}\r\nlet data = {\r\n name: '浪里行舟',\r\n l"
},
{
"path": "vue2.0学习/内部运行机制/响应式原理/Proxy.js",
"chars": 837,
"preview": "// 使用proxy来实现数据的响应式变化\r\n// 可以支持数组，而且不用区分是对象还是数组\r\n// 兼容性 vue 3.0 会采用如果支持proxy 就使用proxy 不支持就还是Object.defineProperty\r\nfunct"
},
{
"path": "vue2.0学习/基于axios接口封装/README.md",
"chars": 767,
"preview": "\n## Project setup\n```\nnpm install\n```\n\n### Compiles and hot-reloads for development\n```\nnpm run serve\n```\n## api接口的模块化管理"
},
{
"path": "vue2.0学习/基于axios接口封装/babel.config.js",
"chars": 73,
"preview": "module.exports = {\n presets: [\n '@vue/cli-plugin-babel/preset'\n ]\n}\n"
},
{
"path": "vue2.0学习/基于axios接口封装/package.json",
"chars": 877,
"preview": "{\n \"name\": \"demo\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"serve\": \"vue-cli-service serve\",\n \"b"
},
{
"path": "vue2.0学习/基于axios接口封装/public/index.html",
"chars": 613,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE="
},
{
"path": "vue2.0学习/基于axios接口封装/src/App.vue",
"chars": 284,
"preview": "<template>\n <div id=\"app\">\n <img alt=\"Vue logo\" src=\"./assets/logo.png\" />\n <div>浪里行舟</div>\n </div>\n</template>\n"
},
{
"path": "vue2.0学习/基于axios接口封装/src/api/api.js",
"chars": 126,
"preview": "// 这里数据请求的唯一入口 \r\nimport personal from './personal'\r\nimport vote from './vote'\r\n\r\nexport default{\r\n personal,\r\n vot"
},
{
"path": "vue2.0学习/基于axios接口封装/src/api/http.js",
"chars": 1929,
"preview": "// 基于axios实现接口请求库的封装\r\nimport axios from 'axios'\r\nimport qs from 'qs' // 引入qs模块，用来序列化post类型的数据\r\n// 根据环境变量区分接口的默认地址\r\nswitc"
},
{
"path": "vue2.0学习/基于axios接口封装/src/api/personal.js",
"chars": 120,
"preview": "// 接口模块一\r\nimport axios from './http'\r\n\r\nfunction login(){\r\n return axios.post('/login');\r\n}\r\n\r\nexport default {login}"
},
{
"path": "vue2.0学习/基于axios接口封装/src/api/request.js",
"chars": 2188,
"preview": "// 基于fetch实现接口请求库的封装\r\nimport qs from 'qs';\r\n/*\r\n * 根据环境变量进行接口区分\r\n */\r\nlet baseURL = '';\r\nlet baseURLArr = [{\r\n\ttype: 'de"
},
{
"path": "vue2.0学习/基于axios接口封装/src/api/vote.js",
"chars": 151,
"preview": "// 接口模块二\r\nimport axios from './http'\r\n\r\nfunction voteAdd() {\r\n return axios.post('/insertVote', {\r\n xxx: 'xxx'\r\n })"
},
{
"path": "vue2.0学习/基于axios接口封装/src/main.js",
"chars": 189,
"preview": "import Vue from 'vue'\nimport App from './App.vue'\nimport api from './api/api'\n\nVue.config.productionTip = false\nVue.prot"
},
{
"path": "vue2.0学习/实现模态框/sync/demo.vue",
"chars": 862,
"preview": "<template>\r\n <div v-if=\"show\" class=\"border\">\r\n <div>子组件msg：{{ msg }}</div>\r\n <div>子组件数组：{{ arr }}</div>\r\n <p>"
},
{
"path": "vue2.0学习/实现模态框/sync/index.vue",
"chars": 658,
"preview": "//v-model 毕竟不是给组件与组件之间通信而设计的双向绑定，无论从语意上和代码写法上都没有 .sync 直观和方便。\r\n<template>\r\n <div class=\"hello\">\r\n <div>\r\n <p>父组"
},
{
"path": "vue2.0学习/实现模态框/v-model/demo.vue",
"chars": 352,
"preview": "<template>\r\n <div v-if=\"value\">\r\n <p>这是一个Model框</p>\r\n <div>子组件value：{{ value }}</div>\r\n <button @click=\"closeM"
},
{
"path": "vue2.0学习/实现模态框/v-model/index.vue",
"chars": 552,
"preview": "//这是一个模态框的基本雏形，可以在父组件通过 v-model 来进行 model 框和父组件之间的显示交互。\r\n//通过子组件看出通过props接收了value值，当点击关闭的时候还是通过$emit事件触发input事件，然后通过传入 f"
},
{
"path": "vuex-demo/HelloWorld.vue",
"chars": 899,
"preview": "<template>\n <div class=\"hello\">\n <p>click {{count}} times,count is {{evenOrOdd}}</p>\n <button @click=\"increment\">"
},
{
"path": "vuex-demo/main.js",
"chars": 293,
"preview": "import Vue from 'vue'\nimport store from './store'\nimport App from './App'\nimport router from './router'\n\nVue.config.prod"
},
{
"path": "vuex-demo/store.js",
"chars": 879,
"preview": "import Vue from 'vue'\nimport Vuex from 'vuex'\nVue.use(Vuex)\nconst store = new Vuex.Store({\n state: {\n count: 0"
},
{
"path": "vuex-demo/优化后HelloWorld.vue",
"chars": 1382,
"preview": "<template>\n <div class=\"hello\">\n <p>click {{count}} times,count is {{evenOrOdd}}</p>\n <button @click=\"increment\">"
},
{
"path": "vuex-demo/优化后store.js",
"chars": 912,
"preview": "import Vue from 'vue'\r\nimport Vuex from 'vuex'\r\nVue.use(Vuex)\r\nconst store = new Vuex.Store({\r\n state: {\r\n cou"
},
{
"path": "websocket/iframe流.html",
"chars": 353,
"preview": "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "websocket/iframe流.js",
"chars": 405,
"preview": "//iframe流\r\nlet express = require('express')\r\nlet app = express()\r\napp.use(express.static(__dirname))\r\napp.get('/clock', "
},
{
"path": "websocket/websocket.html",
"chars": 791,
"preview": "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n <head>\r\n <meta charset=\"UTF-8\" />\r\n <meta name=\"viewport\" content=\"width=devi"
},
{
"path": "websocket/websocket.js",
"chars": 611,
"preview": "let express = require('express')\r\nlet app = express()\r\napp.use(express.static(__dirname))\r\n//http服务器\r\napp.listen(3000)\r\n"
},
{
"path": "websocket/轮询.html",
"chars": 749,
"preview": "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "websocket/轮询.js",
"chars": 199,
"preview": "//轮训\r\nlet express = require('express')\r\nlet app = express()\r\napp.use(express.static(__dirname))\r\napp.get('/clock', funct"
},
{
"path": "websocket/长轮询.html",
"chars": 952,
"preview": "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n <head>\r\n <meta charset=\"UTF-8\" />\r\n <meta name=\"viewport\" content=\"width=devi"
},
{
"path": "websocket/长轮询.js",
"chars": 200,
"preview": "//长轮训\r\nlet express = require('express')\r\nlet app = express()\r\napp.use(express.static(__dirname))\r\napp.get('/clock', func"
},
{
"path": "三栏布局/三栏布局--flexbox布局.html",
"chars": 1967,
"preview": "<!DOCTYPE html>\r\n<html>\r\n\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <title>Layout</title>\r\n <style media=\"screen\">\r\n "
},
{
"path": "三栏布局/三栏布局--grid布局.html",
"chars": 1281,
"preview": "<!DOCTYPE html>\r\n<html>\r\n\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <title>Layout</title>\r\n <style media=\"screen\">\r\n "
},
{
"path": "三栏布局/三栏布局--浮动布局.html",
"chars": 1195,
"preview": "<!DOCTYPE html>\r\n<html>\r\n\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <title>Layout</title>\r\n <style media=\"screen\">\r\n "
},
{
"path": "三栏布局/三栏布局--绝对布局.html",
"chars": 1452,
"preview": "<!DOCTYPE html>\r\n<html>\r\n\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <title>Layout</title>\r\n <style media=\"screen\">\r\n "
},
{
"path": "三栏布局/三栏布局--表格布局.html",
"chars": 2225,
"preview": "<!DOCTYPE html>\r\n<html>\r\n\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <title>Layout</title>\r\n <style media=\"screen\">\r\n "
},
{
"path": "三栏布局/双飞翼布局.html",
"chars": 936,
"preview": "<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\"utf-8\">\n <title>Layout</title>\n <style media=\"screen\">\n html "
},
{
"path": "三栏布局/圣杯布局.html",
"chars": 856,
"preview": "<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\"utf-8\">\n <title>Layout</title>\n <style media=\"screen\">\n html * {\n "
},
{
"path": "多种跨域方式/1.jsonp/index.html",
"chars": 1059,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "多种跨域方式/1.jsonp/server.js",
"chars": 221,
"preview": "let express = require('express')\nlet app = express()\n\napp.get('/say', function(req, res) {\n let { wd, callback } = req."
},
{
"path": "多种跨域方式/2.cors/index.html",
"chars": 870,
"preview": "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n <head>\r\n <meta charset=\"UTF-8\" />\r\n <meta name=\"viewport\" content=\"width=devi"
},
{
"path": "多种跨域方式/2.cors/server1.js",
"chars": 108,
"preview": "let express = require('express');\nlet app = express();\napp.use(express.static(__dirname));\napp.listen(3000);"
},
{
"path": "多种跨域方式/2.cors/server2.js",
"chars": 1032,
"preview": "let express = require('express')\r\nlet app = express()\r\nlet whitList = ['http://localhost:3000'] //设置白名单\r\napp.use(functio"
},
{
"path": "多种跨域方式/3.postMesssage/a.html",
"chars": 601,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, in"
},
{
"path": "多种跨域方式/3.postMesssage/a.js",
"chars": 108,
"preview": "let express = require('express');\nlet app = express();\napp.use(express.static(__dirname));\napp.listen(3000);"
},
{
"path": "多种跨域方式/3.postMesssage/b.html",
"chars": 388,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, in"
},
{
"path": "多种跨域方式/3.postMesssage/b.js",
"chars": 108,
"preview": "let express = require('express');\nlet app = express();\napp.use(express.static(__dirname));\napp.listen(4000);"
},
{
"path": "多种跨域方式/4.name/a.html",
"chars": 748,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, in"
},
{
"path": "多种跨域方式/4.name/a.js",
"chars": 108,
"preview": "let express = require('express');\nlet app = express();\napp.use(express.static(__dirname));\napp.listen(3000);"
},
{
"path": "多种跨域方式/4.name/b.html",
"chars": 253,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, in"
},
{
"path": "多种跨域方式/4.name/b.js",
"chars": 108,
"preview": "let express = require('express');\nlet app = express();\napp.use(express.static(__dirname));\napp.listen(4000);"
},
{
"path": "多种跨域方式/4.name/c.html",
"chars": 300,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, in"
},
{
"path": "多种跨域方式/5.hash/a.html",
"chars": 525,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, in"
},
{
"path": "多种跨域方式/5.hash/a.js",
"chars": 108,
"preview": "let express = require('express');\nlet app = express();\napp.use(express.static(__dirname));\napp.listen(3000);"
},
{
"path": "多种跨域方式/5.hash/b.html",
"chars": 332,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, i"
},
{
"path": "多种跨域方式/5.hash/b.js",
"chars": 108,
"preview": "let express = require('express');\nlet app = express();\napp.use(express.static(__dirname));\napp.listen(4000);"
},
{
"path": "多种跨域方式/5.hash/c.html",
"chars": 448,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, i"
},
{
"path": "多种跨域方式/6.domain/a.html",
"chars": 600,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, in"
},
{
"path": "多种跨域方式/6.domain/a.js",
"chars": 108,
"preview": "let express = require('express');\nlet app = express();\napp.use(express.static(__dirname));\napp.listen(3000);"
},
{
"path": "多种跨域方式/6.domain/b.html",
"chars": 336,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, in"
},
{
"path": "多种跨域方式/6.domain/b.js",
"chars": 108,
"preview": "let express = require('express');\nlet app = express();\napp.use(express.static(__dirname));\napp.listen(4000);"
},
{
"path": "多种跨域方式/7.websocket/server.js",
"chars": 258,
"preview": "let express = require('express');\nlet app = express();\nlet WebSocket = require('ws');\nlet wss = new WebSocket.Server({po"
},
{
"path": "多种跨域方式/7.websocket/socket.html",
"chars": 499,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, in"
},
{
"path": "多种跨域方式/8.nginx/a.js",
"chars": 466,
"preview": "var http = require('http');\nvar server = http.createServer();\nvar qs = require('querystring');\n\nserver.on('request', fun"
},
{
"path": "多种跨域方式/8.nginx/index.html",
"chars": 470,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, in"
},
{
"path": "多种跨域方式/9.node中间件代理/index.html",
"chars": 759,
"preview": "<!DOCTYPE html>\r\n<html lang=\"zh-CN\">\r\n <head>\r\n <meta charset=\"UTF-8\" />\r\n <meta name=\"viewport\" content=\"width=d"
},
{
"path": "多种跨域方式/9.node中间件代理/server1.js",
"chars": 984,
"preview": "const http = require('http')\r\n// 第一步：接受客户端请求\r\nconst server = http.createServer((request, response) => {\r\n // 代理服务器，直接和浏"
},
{
"path": "多种跨域方式/9.node中间件代理/server2.js",
"chars": 321,
"preview": "const http = require('http')\r\nconst data = { title: 'fontend', password: '123456' }\r\nconst server = http.createServer((r"
},
{
"path": "模块化/01_modular/01_全局function模式/module1.js",
"chars": 195,
"preview": "/**\r\n * 全局函数模式: 将不同的功能封装成不同的全局函数\r\n * 问题: Global被污染了, 很容易引起命名冲突\r\n */\r\n//数据\r\nlet data = 'atguigu.com'\r\nfunction foo() {\r\n "
},
{
"path": "模块化/01_modular/01_全局function模式/module2.js",
"chars": 99,
"preview": "let data2 = 'other data'\r\n\r\nfunction foo() { //与另一个模块中的函数冲突了\r\n console.log(`foo() ${data2}`)\r\n}\r\n"
},
{
"path": "模块化/01_modular/01_全局function模式/test1.html",
"chars": 318,
"preview": "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>01_全局function模式</title>\r\n</head>\r\n<body>\r\n"
},
{
"path": "模块化/01_modular/02_namespace模式/module1.js",
"chars": 239,
"preview": "/**\r\n * namespace模式: 简单对象封装\r\n * 作用: 减少了全局变量\r\n * 问题: 不安全(数据不是私有的, 外部可以直接修改)\r\n */\r\nlet myModule = {\r\n data: 'atguigu.com'"
},
{
"path": "模块化/01_modular/02_namespace模式/module2.js",
"chars": 234,
"preview": "/**\r\n * namespace模式: 简单对象封装\r\n * 作用: 减少了全局变量\r\n * 问题: 不安全(数据不是私有的)\r\n */\r\nlet myModule2 = {\r\n data: 'atguigu.com2222',\r\n "
},
{
"path": "模块化/01_modular/02_namespace模式/test2.html",
"chars": 443,
"preview": "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>02_namespace模式</title>\r\n</head>\r\n<body>\r\n<"
},
{
"path": "模块化/01_modular/03_IIFE模式/module3.js",
"chars": 522,
"preview": "/**\r\n * IIFE模式: 匿名函数自调用(闭包)\r\n * IIFE : immediately-invoked function expression(立即调用函数表达式)\r\n * 作用: 数据是私有的, 外部只能通过暴露的方法操作\r"
},
{
"path": "模块化/01_modular/03_IIFE模式/test3.html",
"chars": 438,
"preview": "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n <head>\r\n <meta charset=\"UTF-8\" />\r\n <title>03_IIFE模式</title>\r\n </head>\r\n <b"
},
{
"path": "模块化/01_modular/04_IIFE模式增强/jquery-1.10.1.js",
"chars": 283885,
"preview": "/*!\r\n * jQuery JavaScript Library v1.10.1\r\n * http://jquery.com/\r\n *\r\n * Includes Sizzle.js\r\n * http://sizzlejs.com/\r\n *"
},
{
"path": "模块化/01_modular/04_IIFE模式增强/module4.js",
"chars": 474,
"preview": "/**\r\n * IIFE模式增强 : 引入依赖\r\n * 这就是现代模块实现的基石\r\n */\r\n;(function(window, $) {\r\n //数据\r\n let data = 'www.baidu.com'\r\n //操作数据的函"
},
{
"path": "模块化/01_modular/04_IIFE模式增强/test4.html",
"chars": 381,
"preview": "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n <head>\r\n <meta charset=\"UTF-8\" />\r\n <title>04_IIFE模式增强</title>\r\n </head>\r\n "
},
{
"path": "模块化/02_CommonJS-Node/app.js",
"chars": 526,
"preview": "/**\r\n 1. 定义暴露模块:\r\n module.exports = value;\r\n exports.xxx = value;\r\n 2. 引入模块:\r\n var module = require(模块名或模块路径)"
},
{
"path": "模块化/02_CommonJS-Node/modules/module1.js",
"chars": 132,
"preview": "/**\r\n * 使用module.exports = value向外暴露一个对象\r\n */\r\n\"use strict\"\r\nmodule.exports = {\r\n foo() {\r\n console.log('moudle1 foo"
},
{
"path": "模块化/02_CommonJS-Node/modules/module2.js",
"chars": 122,
"preview": "/**\r\n * 使用module.exports = value向外暴露一个函数\r\n */\r\n\"use strict\"\r\nmodule.exports = function () {\r\n console.log('module2()')\r"
},
{
"path": "模块化/02_CommonJS-Node/modules/module3.js",
"chars": 186,
"preview": "/**\r\n * 使用exports.xxx = value向外暴露一个对象\r\n */\r\n\"use strict\"\r\nexports.foo = function () {\r\n console.log('module3 foo()')\r\n}"
},
{
"path": "模块化/02_CommonJS-Node/package.json",
"chars": 52,
"preview": "{\n \"name\": \"commonjs-node\",\n \"version\": \"1.0.0\"\n}\n"
},
{
"path": "模块化/03_CommonJS-Browserify/index.html",
"chars": 273,
"preview": "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>Title</title>\r\n</head>\r\n<body>\r\n <!"
},
{
"path": "模块化/03_CommonJS-Browserify/js/dist/bundle.js",
"chars": 2474,
"preview": "(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)"
},
{
"path": "模块化/03_CommonJS-Browserify/js/src/app.js",
"chars": 377,
"preview": "/**\r\n 1. 定义暴露模块:\r\n module.exports = value;\r\n exports.xxx = value;\r\n 2. 引入模块:\r\n var module = require(模块名或模块路径)"
},
{
"path": "模块化/03_CommonJS-Browserify/js/src/module1.js",
"chars": 118,
"preview": "/**\r\n * 使用module.exports = value向外暴露一个对象\r\n */\r\nmodule.exports = {\r\n foo() {\r\n console.log('moudle1 foo()')\r\n }\r\n}"
},
{
"path": "模块化/03_CommonJS-Browserify/js/src/module2.js",
"chars": 108,
"preview": "/**\r\n * 使用module.exports = value向外暴露一个函数\r\n */\r\nmodule.exports = function () {\r\n console.log('module2()')\r\n}"
},
{
"path": "模块化/03_CommonJS-Browserify/js/src/module3.js",
"chars": 172,
"preview": "/**\r\n * 使用exports.xxx = value向外暴露一个对象\r\n */\r\nexports.foo = function () {\r\n console.log('module3 foo()')\r\n}\r\n\r\nexports.ba"
},
{
"path": "模块化/03_CommonJS-Browserify/package.json",
"chars": 104,
"preview": "{\n \"name\": \"commonjs-browserify\",\n \"version\": \"1.0.0\",\n \"dependencies\": {\n \"uniq\": \"^1.0.1\"\n }\n}\n"
},
{
"path": "模块化/04_AMD-RequireJS/01_NoAMD/js/main.js",
"chars": 55,
"preview": "(function (alerter) {\r\n alerter.showMsg()\r\n})(alerter)"
},
{
"path": "模块化/04_AMD-RequireJS/01_NoAMD/js/modules/alerter.js",
"chars": 188,
"preview": "(function (window, dataService) {\r\n let name = 'Tom'\r\n\r\n function showMsg() {\r\n alert(dataService.getMsg() + ', ' +"
},
{
"path": "模块化/04_AMD-RequireJS/01_NoAMD/js/modules/dataService.js",
"chars": 160,
"preview": ";(function(window) {\r\n let msg = 'www.baidu.com'\r\n\r\n function getMsg() {\r\n return msg.toUpperCase()\r\n }\r\n\r\n windo"
},
{
"path": "模块化/04_AMD-RequireJS/01_NoAMD/test1.html",
"chars": 375,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <title>Modular Demo 1</title>\n </head>\n <body>\n <div><h1>Modular Demo 1: 未使用AM"
},
{
"path": "模块化/04_AMD-RequireJS/02_RequireJS/index2.html",
"chars": 206,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <title>Modular Demo</title>\n </head>\n <body>\n <!-- 引入require.js并指定js主文件的入口 -->"
},
{
"path": "模块化/04_AMD-RequireJS/02_RequireJS/js/libs/require.js",
"chars": 86330,
"preview": "/** vim: et:ts=4:sw=4:sts=4\n * @license RequireJS 2.3.1+ Copyright jQuery Foundation and other contributors.\n * Released"
},
{
"path": "模块化/04_AMD-RequireJS/02_RequireJS/js/main.js",
"chars": 306,
"preview": ";(function() {\r\n require.config({\r\n baseUrl: 'js/', //基本路径 出发点在根目录下\r\n paths: {\r\n //映射: 模块标识名: 路径\r\n aler"
},
{
"path": "模块化/04_AMD-RequireJS/02_RequireJS/js/modules/alerter.js",
"chars": 195,
"preview": "// 定义有依赖的模块\r\ndefine(['dataService'], function(dataService) {\r\n let name = 'Tom'\r\n function showMsg() {\r\n alert(data"
},
{
"path": "模块化/04_AMD-RequireJS/02_RequireJS/js/modules/dataService.js",
"chars": 155,
"preview": "// 定义没有依赖的模块\r\ndefine(function() {\r\n let msg = 'www.baidu.com'\r\n function getMsg() {\r\n return msg.toUpperCase()\r\n }"
},
{
"path": "模块化/04_AMD-RequireJS/03_RequireJS2/index2.html",
"chars": 206,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <title>Modular Demo</title>\n </head>\n <body>\n <!-- 引入require.js并指定js主文件的入口 -->"
},
{
"path": "模块化/04_AMD-RequireJS/03_RequireJS2/js/libs/jquery-1.10.1.js",
"chars": 283885,
"preview": "/*!\r\n * jQuery JavaScript Library v1.10.1\r\n * http://jquery.com/\r\n *\r\n * Includes Sizzle.js\r\n * http://sizzlejs.com/\r\n *"
},
{
"path": "模块化/04_AMD-RequireJS/03_RequireJS2/js/libs/require.js",
"chars": 86330,
"preview": "/** vim: et:ts=4:sw=4:sts=4\n * @license RequireJS 2.3.1+ Copyright jQuery Foundation and other contributors.\n * Released"
},
{
"path": "模块化/04_AMD-RequireJS/03_RequireJS2/js/main.js",
"chars": 371,
"preview": ";(function() {\r\n require.config({\r\n baseUrl: 'js/', //基本路径 出发点在根目录下\r\n paths: {\r\n //自定义模块\r\n alerter: './"
},
{
"path": "模块化/04_AMD-RequireJS/03_RequireJS2/js/modules/alerter.js",
"chars": 248,
"preview": "// 定义有依赖的模块\r\ndefine(['dataService', 'jquery'], function(dataService, $) {\r\n let name = 'Tom'\r\n function showMsg() {\r\n "
},
{
"path": "模块化/04_AMD-RequireJS/03_RequireJS2/js/modules/dataService.js",
"chars": 155,
"preview": "// 定义没有依赖的模块\r\ndefine(function() {\r\n let msg = 'www.baidu.com'\r\n function getMsg() {\r\n return msg.toUpperCase()\r\n }"
},
{
"path": "模块化/05_CMD-SeaJS/index.html",
"chars": 428,
"preview": "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>Title</title>\r\n</head>\r\n<body>\r\n<!--\r\n使用se"
},
{
"path": "模块化/05_CMD-SeaJS/js/libs/sea.js",
"chars": 6922,
"preview": "/*! Sea.js 2.2.3 | seajs.org/LICENSE.md */\n!function(a,b){function c(a){return function(b){return{}.toString.call(b)==\"["
},
{
"path": "模块化/05_CMD-SeaJS/js/modules/main.js",
"chars": 123,
"preview": "define(function (require) {\r\n var m1 = require('./module1')\r\n var m4 = require('./module4')\r\n m1.show()\r\n m4.show()\r"
},
{
"path": "模块化/05_CMD-SeaJS/js/modules/module1.js",
"chars": 202,
"preview": "define(function (require, exports, module) {\r\n //内部变量数据\r\n var data = 'atguigu.com'\r\n //内部函数\r\n function show() {\r\n "
},
{
"path": "模块化/05_CMD-SeaJS/js/modules/module2.js",
"chars": 99,
"preview": "define(function (require, exports, module) {\r\n module.exports = {\r\n msg: 'I Will Back'\r\n }\r\n})"
},
{
"path": "模块化/05_CMD-SeaJS/js/modules/module3.js",
"chars": 106,
"preview": "define(function(require, exports, module) {\r\n const API_KEY = 'abc123'\r\n exports.API_KEY = API_KEY\r\n})\r\n"
},
{
"path": "模块化/05_CMD-SeaJS/js/modules/module4.js",
"chars": 318,
"preview": "define(function (require, exports, module) {\r\n //引入依赖模块(同步)\r\n var module2 = require('./module2')\r\n\r\n function show() "
},
{
"path": "模块化/06_ES6_Babel_Browserify/index.html",
"chars": 229,
"preview": "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n <head>\r\n <meta charset=\"UTF-8\" />\r\n <title>06_ES6_Babel_Browserify</title>\r\n "
},
{
"path": "模块化/06_ES6_Babel_Browserify/js/lib/app.js",
"chars": 383,
"preview": "'use strict';\n\nvar _module = require('./module1');\n\nvar _module2 = require('./module2');\n\nvar _module3 = require('./modu"
},
{
"path": "模块化/06_ES6_Babel_Browserify/js/lib/bundle.js",
"chars": 1707,
"preview": "(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)ret"
},
{
"path": "模块化/06_ES6_Babel_Browserify/js/lib/module1.js",
"chars": 227,
"preview": "'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.foo = foo;\nexports.bar = bar;\n//"
},
{
"path": "模块化/06_ES6_Babel_Browserify/js/lib/module2.js",
"chars": 235,
"preview": "'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n// 统一暴露\nfunction fun1() {\n console.log("
},
{
"path": "模块化/06_ES6_Babel_Browserify/js/lib/module3.js",
"chars": 174,
"preview": "'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\n// 默认暴露 可以暴露任意数据类项，暴露什么数据，接收到就是什么数据\nexp"
},
{
"path": "模块化/06_ES6_Babel_Browserify/js/src/app.js",
"chars": 154,
"preview": "import { foo, bar } from './module1'\r\nimport { fun1, fun2 } from './module2'\r\nimport module3 from './module3'\r\n\r\nfoo()\r\n"
},
{
"path": "模块化/06_ES6_Babel_Browserify/js/src/module1.js",
"chars": 129,
"preview": "// 分别暴露\r\nexport function foo() {\r\n console.log('foo() module1')\r\n}\r\nexport function bar() {\r\n console.log('bar() modul"
},
{
"path": "模块化/06_ES6_Babel_Browserify/js/src/module2.js",
"chars": 142,
"preview": "// 统一暴露\r\nfunction fun1() {\r\n console.log('fun1() module2')\r\n}\r\nfunction fun2() {\r\n console.log('fun2() module2')\r\n}\r\ne"
},
{
"path": "模块化/06_ES6_Babel_Browserify/js/src/module3.js",
"chars": 87,
"preview": "// 默认暴露 可以暴露任意数据类项，暴露什么数据，接收到就是什么数据\r\nexport default () => {\r\n console.log('默认暴露')\r\n}\r\n"
},
{
"path": "模块化/06_ES6_Babel_Browserify/package.json",
"chars": 131,
"preview": "{\r\n \"name\": \"es6-babel-browserify\",\r\n \"version\": \"1.0.0\",\r\n \"devDependencies\": {\r\n \"babel-preset-es2015\": \"^6.24.1"
},
{
"path": "消除不同的浏览器在默认样式上不同表现reset.css",
"chars": 1705,
"preview": "@charset \"utf-8\";html{background-color:#fff;color:#000;font-size:12px}\nbody,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fi"
},
{
"path": "移动端1px像素.css",
"chars": 4632,
"preview": "@charset \"utf-8\";\n.border,\n.border-top,\n.border-right,\n.border-bottom,\n.border-left,\n.border-topbottom,\n.border-rightlef"
}
]
// ... and 18 more files (download for full content)
About this extraction
This page contains the full source code of the ljianshu/Blog GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 183 files (839.3 KB), approximately 229.5k tokens, and a symbol index with 260 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.