├── codes
    ├── 防抖与节流
    │   ├── index2.html
    │   ├── index.html
    │   └── debounce.html
    ├── MyProj
    │   ├── src
    │   │   ├── foo.js
    │   │   └── index.js
    │   ├── .babelrc
    │   ├── lib
    │   │   ├── index.js
    │   │   └── foo.js
    │   ├── example
    │   │   └── index.html
    │   ├── .eslintrc.js
    │   ├── webpack.config.js
    │   ├── package.json
    │   └── dist
    │   │   └── app.js
    ├── 按钮变色
    │   └── index.html
    ├── 动画序列
    │   └── index.html
    ├── 圆周运动
    │   ├── index.html
    │   └── index2.html
    ├── 树UI
    │   └── index.html
    ├── 交通灯
    │   └── index.html
    ├── 深夜食堂
    │   └── index.html
    ├── 饼图
    │   └── index.html
    ├── 幸运数字
    │   └── index.html
    ├── 弹跳小球
    │   └── index.html
    ├── 异步信号
    │   └── index.html
    ├── 抽象行为
    │   ├── index2.html
    │   ├── index.html
    │   └── index3.html
    ├── 首页轮播图
    │   ├── index.html
    │   ├── index2.html
    │   ├── index3.html
    │   ├── index4.html
    │   └── index5.html
    ├── 打字游戏
    │   └── index.html
    └── 滚动文字
    │   ├── index.html
    │   └── index2.html
├── README.md
└── assets
    ├── 三角形.png
    ├── 下三角.png
    ├── 列表2.jpg
    ├── 列表2.png
    ├── 幸运数字.jpg
    ├── 树UI.jpg
    ├── 深夜食堂.jpg
    ├── 默认列表.png
    ├── api设计.webp
    ├── border.jpg
    ├── border.png
    ├── css图案.jpg
    ├── 模拟交通灯.jpg
    ├── 组件模板化.jpg
    ├── 三角border.gif
    ├── 平行border.jpg
    ├── 深夜食堂-dark.jpg
    ├── 相邻border.jpg
    ├── 宽高为0时border.png
    ├── 正三角border的比例.jpg
    ├── 正三角border的比例.png
    ├── 相邻border的比例.png
    ├── height0_border.jpg
    └── 夜间模式-checkbox.jpg


/codes/防抖与节流/index2.html:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # JsCourse
2 | 前端十日进阶 课程资料
3 | 有问题可以联系小册姐微信：xiaocejie5
4 | 


--------------------------------------------------------------------------------
/assets/三角形.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itcodes/JsCourse/HEAD/assets/三角形.png


--------------------------------------------------------------------------------
/assets/下三角.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itcodes/JsCourse/HEAD/assets/下三角.png


--------------------------------------------------------------------------------
/assets/列表2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itcodes/JsCourse/HEAD/assets/列表2.jpg


--------------------------------------------------------------------------------
/assets/列表2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itcodes/JsCourse/HEAD/assets/列表2.png


--------------------------------------------------------------------------------
/assets/幸运数字.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itcodes/JsCourse/HEAD/assets/幸运数字.jpg


--------------------------------------------------------------------------------
/assets/树UI.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itcodes/JsCourse/HEAD/assets/树UI.jpg


--------------------------------------------------------------------------------
/assets/深夜食堂.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itcodes/JsCourse/HEAD/assets/深夜食堂.jpg


--------------------------------------------------------------------------------
/assets/默认列表.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itcodes/JsCourse/HEAD/assets/默认列表.png


--------------------------------------------------------------------------------
/assets/api设计.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itcodes/JsCourse/HEAD/assets/api设计.webp


--------------------------------------------------------------------------------
/assets/border.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itcodes/JsCourse/HEAD/assets/border.jpg


--------------------------------------------------------------------------------
/assets/border.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itcodes/JsCourse/HEAD/assets/border.png


--------------------------------------------------------------------------------
/assets/css图案.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itcodes/JsCourse/HEAD/assets/css图案.jpg


--------------------------------------------------------------------------------
/assets/模拟交通灯.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itcodes/JsCourse/HEAD/assets/模拟交通灯.jpg


--------------------------------------------------------------------------------
/assets/组件模板化.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itcodes/JsCourse/HEAD/assets/组件模板化.jpg


--------------------------------------------------------------------------------
/assets/三角border.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itcodes/JsCourse/HEAD/assets/三角border.gif


--------------------------------------------------------------------------------
/assets/平行border.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itcodes/JsCourse/HEAD/assets/平行border.jpg


--------------------------------------------------------------------------------
/assets/深夜食堂-dark.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itcodes/JsCourse/HEAD/assets/深夜食堂-dark.jpg


--------------------------------------------------------------------------------
/assets/相邻border.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itcodes/JsCourse/HEAD/assets/相邻border.jpg


--------------------------------------------------------------------------------
/assets/宽高为0时border.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itcodes/JsCourse/HEAD/assets/宽高为0时border.png


--------------------------------------------------------------------------------
/assets/正三角border的比例.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itcodes/JsCourse/HEAD/assets/正三角border的比例.jpg


--------------------------------------------------------------------------------
/assets/正三角border的比例.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itcodes/JsCourse/HEAD/assets/正三角border的比例.png


--------------------------------------------------------------------------------
/assets/相邻border的比例.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itcodes/JsCourse/HEAD/assets/相邻border的比例.png


--------------------------------------------------------------------------------
/assets/height0_border.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itcodes/JsCourse/HEAD/assets/height0_border.jpg


--------------------------------------------------------------------------------
/assets/夜间模式-checkbox.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itcodes/JsCourse/HEAD/assets/夜间模式-checkbox.jpg


--------------------------------------------------------------------------------
/codes/MyProj/src/foo.js:
--------------------------------------------------------------------------------
1 | export default class Foo {
2 |   bar () {
3 |     return 'bar';
4 |   }
5 | };
6 | 


--------------------------------------------------------------------------------
/codes/MyProj/src/index.js:
--------------------------------------------------------------------------------
1 | import Foo from './foo';
2 | 
3 | const f = new Foo();
4 | console.log(f.bar());
5 | 
6 | console.log(20 ** 3);
7 | 


--------------------------------------------------------------------------------
/codes/MyProj/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     [
 4 |       "@babel/env",
 5 |       {
 6 |         "targets": "> 0.25%, not dead",
 7 |         "useBuiltIns": "usage",
 8 |         "corejs": 3
 9 |       }
10 |     ]
11 |   ]
12 | }


--------------------------------------------------------------------------------
/codes/MyProj/lib/index.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | 
3 | var _foo = _interopRequireDefault(require("./foo"));
4 | 
5 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
6 | 
7 | var f = new _foo.default();
8 | console.log(f.bar());
9 | console.log(Math.pow(10, 3));


--------------------------------------------------------------------------------
/codes/MyProj/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <title>Document</title>
 7 | </head>
 8 | <body>
 9 |   <script src="app.js"></script>
10 | </body>
11 | </html>


--------------------------------------------------------------------------------
/codes/MyProj/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   env: {
 3 |     browser: true,
 4 |     es6: true
 5 |   },
 6 |   extends: [
 7 |     'standard'
 8 |   ],
 9 |   globals: {
10 |     Atomics: 'readonly',
11 |     SharedArrayBuffer: 'readonly'
12 |   },
13 |   parserOptions: {
14 |     ecmaVersion: 2018,
15 |     sourceType: 'module'
16 |   },
17 |   rules: {
18 |     semi: ['error', 'always'],
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/codes/按钮变色/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>Document</title>
 8 |   <style>
 9 |     .playBtn {
10 |       font-size: 2rem;
11 |       border-radius: 12px;
12 |       outline: none;
13 |       cursor: pointer;
14 |       transition: all .5s;
15 |     }
16 |     .playBtn:hover {
17 |       background: #333;
18 |       color: #eee;
19 |       transition: all .5s;
20 |     }
21 |   </style>
22 | </head>
23 | <body>
24 |   <button class="playBtn">Click Me</button>
25 | </body>
26 | </html>


--------------------------------------------------------------------------------
/codes/MyProj/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | 
 3 | module.exports = function (env = {}) {
 4 |   return {
 5 |     mode: env.mode,
 6 |     entry: './src/index.js',
 7 |     output: {
 8 |       path: path.resolve(__dirname, 'dist'),
 9 |       filename: 'app.js'
10 |     },
11 |     module: {
12 |       rules: [
13 |         {
14 |           test: /\.js$/,
15 |           exclude: /node_modules/,
16 |           use: {
17 |             loader: 'babel-loader'
18 |           }
19 |         }
20 |       ]
21 |     },
22 |     devServer: {
23 |       contentBase: path.join(__dirname, env.server || '.'),
24 |       compress: true,
25 |       port: 9090,
26 |       hot: true
27 |     }
28 |   };
29 | };
30 | 


--------------------------------------------------------------------------------
/codes/MyProj/lib/foo.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | exports.default = void 0;
 7 | 
 8 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 9 | 
10 | function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
11 | 
12 | function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
13 | 
14 | var Foo =
15 | /*#__PURE__*/
16 | function () {
17 |   function Foo() {
18 |     _classCallCheck(this, Foo);
19 |   }
20 | 
21 |   _createClass(Foo, [{
22 |     key: "bar",
23 |     value: function bar() {
24 |       return 'bar';
25 |     }
26 |   }]);
27 | 
28 |   return Foo;
29 | }();
30 | 
31 | exports.default = Foo;
32 | ;


--------------------------------------------------------------------------------
/codes/动画序列/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>动画序列</title>
 8 |   <style>
 9 |     html, body {
10 |       width: 100%;
11 |       height: 100%;
12 |       padding: 0;
13 |       margin: 0;
14 |     }
15 |     .stage {
16 |       display: inline-block;
17 |       position: relative;
18 |       width: 500px;
19 |       height: 500px;
20 |     }
21 |     #target {
22 |       display: inline-block;
23 |       position: absolute;
24 |       width: 100px;
25 |       height: 100px;
26 |       left: 50%;
27 |       top: 50%;
28 |       background: #73c;
29 |       transform-origin: 50% 50%;
30 |       transform: translate(-50%, -50%);
31 |     }
32 |   </style>
33 | </head>
34 | <body>
35 |   <div class="stage">
36 |     <div id="target"></div>
37 |   </div>
38 |   <script>
39 |     const target = document.getElementById('target');
40 |     let rotate = 45;
41 |     requestAnimationFrame(function update() {
42 |       rotate += 1;
43 |       target.style.transform = `translate(-50%, -50%) rotate(${rotate}deg)`;
44 |       requestAnimationFrame(update);
45 |     });
46 |   </script>
47 | </body>
48 | </html>


--------------------------------------------------------------------------------
/codes/防抖与节流/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>Throttle</title>
 8 |   <style>
 9 |   html, body {
10 |     width: 100%;
11 |     height: 100%;
12 |     padding: 0;
13 |     margin: 0;
14 |   }
15 |   #panel {
16 |     display: inline-block;
17 |     width: 360px;
18 |     height: 360px;
19 |     background: hsl(0, 50%, 50%);
20 |   }
21 |   </style>
22 | </head>
23 | <body>
24 |   <div id="panel"></div>
25 |   <script>
26 |   function throttle(fn, ms = 100) {
27 |     let throttleTimer = null;
28 |     return function(...args) {
29 |       if(!throttleTimer) {
30 |         const ret = fn.apply(this, args);
31 |         throttleTimer = setTimeout(() => {
32 |           throttleTimer = null;
33 |         }, ms);
34 |         return ret;
35 |       }
36 |     }
37 |   }
38 | 
39 |   const panel = document.getElementById('panel');
40 |   panel.addEventListener('mousemove', throttle((e) => {
41 |     const {x, y} = e;
42 |     e.target.style.background = `linear-gradient(${y}deg, 
43 |       hsl(0, 50%, 50%),
44 |       hsl(${0.5 * x}, 50%, 50%))`;
45 |   }));
46 |   </script>
47 | </body>
48 | </html>


--------------------------------------------------------------------------------
/codes/MyProj/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "app",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "src/index.js",
 6 |   "scripts": {
 7 |     "lint:init": "eslint --init",
 8 |     "lint": "eslint './**/*.js'",
 9 |     "lint:fix": "eslint './**/*.js' --fix",
10 |     "compile": "rm -rf lib/* && babel src -d lib",
11 |     "dev": "webpack-dev-server --env.server=example",
12 |     "build": "webpack --env.mode=none",
13 |     "build:dev": "webpack --env.mode=development",
14 |     "build:prod": "webpack --env.mode=production",
15 |     "test": "echo \"Error: no test specified\" && exit 1"
16 |   },
17 |   "keywords": [],
18 |   "author": "",
19 |   "license": "ISC",
20 |   "devDependencies": {
21 |     "@babel/cli": "^7.8.4",
22 |     "@babel/core": "^7.8.4",
23 |     "@babel/preset-env": "^7.8.4",
24 |     "eslint": "^6.8.0",
25 |     "eslint-config-airbnb-base": "^14.0.0",
26 |     "eslint-config-standard": "^14.1.0",
27 |     "eslint-plugin-import": "^2.20.1",
28 |     "eslint-plugin-node": "^11.0.0",
29 |     "eslint-plugin-promise": "^4.2.1",
30 |     "eslint-plugin-standard": "^4.0.1",
31 |     "webpack": "^4.41.6",
32 |     "webpack-cli": "^3.3.11",
33 |     "webpack-dev-server": "^3.10.3",
34 |     "babel-loader": "^8.0.6"
35 |   },
36 |   "dependencies": {
37 |     "core-js": "^3.6.4"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/codes/圆周运动/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>Document</title>
 8 |   <style>
 9 |     .main {
10 |       width: 512px;
11 |       height: 512px;
12 |       position: relative;
13 |     }
14 |     #sun, #earth {
15 |       position: absolute;
16 |       transform: translate(-50%, -50%);
17 |     }
18 |     #sun {
19 |       font-size: 5rem;
20 |       left: 50%;
21 |       top: 50%;
22 |     }
23 |     #earth {
24 |       font-size: 2rem;
25 |     }
26 |   </style>
27 | </head>
28 | <body>
29 |   <div class="main">
30 |     <div id="sun">🌞</div>
31 |     <div id="earth">🌏</div>
32 |   </div>
33 |   <script>
34 |     const earth = document.getElementById('earth');
35 |     const x0 = 256;
36 |     const y0 = 256;
37 |     const radius = 128;
38 |     const T = 5000; // 5秒
39 | 
40 |     function update(t) {
41 |       const alpha = 2 * Math.PI * t / T;
42 |       const x = x0 + radius * Math.cos(alpha);
43 |       const y = y0 + radius * Math.sin(alpha);
44 |       earth.style.left = `${x}px`;
45 |       earth.style.top = `${y}px`;
46 |       requestAnimationFrame(update);
47 |     }
48 |     update(0);
49 |   </script>
50 | </body>
51 | </html>


--------------------------------------------------------------------------------
/codes/圆周运动/index2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>Document</title>
 8 |   <style>
 9 |   .main {
10 |     width: 512px;
11 |     height: 512px;
12 |     position: relative;
13 |   }
14 |   #sun, #earth {
15 |     position: absolute;
16 |   }
17 |   #sun {
18 |     transform: translate(-50%, -50%);
19 |     font-size: 5rem;
20 |     left: 50%;
21 |     top: 50%;
22 |   }
23 |   #earth {
24 |     left: 50%;
25 |     top: calc(50% - 128px);
26 |     transform: translate(-50%, -50%) rotate(.0turn);
27 |     transform-origin: 50% calc(50% + 128px);
28 |     font-size: 2rem;
29 |     //animation: rotate 5s linear infinite;
30 |   }
31 | 
32 |   @keyframes rotate {
33 |     to {transform: translate(-50%, -50%) rotate(1turn)}
34 |   }
35 |   </style>
36 | </head>
37 | <body>
38 |   <div class="main">
39 |     <div id="sun">🌞</div>
40 |     <div id="earth">🌏</div>
41 |   </div>
42 |   <script>
43 |     const earth = document.getElementById('earth');
44 |     const T = 5000; // 5秒
45 | 
46 |     function update(t) {
47 |       earth.style.transform = `translate(-50%, -50%) rotate3d(0, 0, 1, ${t / T}turn)`;
48 |       requestAnimationFrame(update);
49 |     }
50 |     update(0);
51 |   </script>
52 | </body>
53 | </html>


--------------------------------------------------------------------------------
/codes/树UI/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>树UI</title>
 8 |   <style>
 9 |   html, body {
10 |     width: 100%;
11 |     height: 100%;
12 |     padding: 0;
13 |     margin: 0;
14 |   }
15 | 
16 |   .tree, .tree ul {
17 |     list-style: none;
18 |   }
19 | 
20 |   .tree li::before {
21 |     color: #999;
22 |     content: '';
23 |     display: inline-block;
24 |     width: 0;
25 |     height: 0;
26 |     border-style: solid;
27 |     border-width: 6px 10.4px;
28 |     border-color: transparent;
29 |     border-left-color: currentColor;
30 |     transform: translateX(6px);
31 |   }
32 | 
33 |   .tree li.expand::before {
34 |     transform: rotate(90deg) translateX(6px) ;
35 |   }
36 | 
37 |   .tree li > ul {
38 |     display: none;
39 |   }
40 | 
41 |   .tree li.expand > ul {
42 |     display: block;
43 |   }
44 |   </style>
45 | </head>
46 | <body>
47 |   <ul class="tree">
48 |     <li>项目1</li>
49 |     <li>项目2</li>
50 |     <li class="expand">项目3
51 |       <ul>
52 |         <li>子项3.1</li>
53 |         <li>子项3.2</li>
54 |         <li>子项3.3</li>
55 |       </ul>
56 |     </li>
57 |     <li>项目4
58 |       <ul>
59 |         <li>子项4.1</li>
60 |         <li>子项4.2</li>
61 |       </ul>
62 |     </li>
63 |     <li>项目5</li>
64 |   </ul>
65 | </body>
66 | </html>


--------------------------------------------------------------------------------
/codes/交通灯/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>模拟交通灯</title>
 8 |   <style>
 9 |     html, body {
10 |       width: 100%;
11 |       height: 100%;
12 |       padding: 0;
13 |       margin: 0;
14 |       overflow: hidden;
15 |       display: flex;
16 |       flex-direction: column;
17 |       justify-content: center;
18 |       align-items: center;
19 |     }
20 |     header {
21 |       line-height: 2rem;
22 |       font-size: 1.2rem;
23 |       margin-bottom: 20px;
24 |     }
25 |     .traffic {
26 |       padding: 10px;
27 |       display: flex;
28 |       flex-direction: column;
29 |     }
30 |     .traffic .light {
31 |       width: 100px;
32 |       height: 100px;
33 |       background-color: #999;
34 |       border-radius: 50%;
35 |     }
36 |     .traffic.pass .light:nth-child(1) {
37 |       background-color: #0a6;
38 |     }
39 |     .traffic.wait .light:nth-child(2) {
40 |       background-color: #cc0;
41 |     }
42 |     .traffic.stop .light:nth-child(3) {
43 |       background-color: #c00;
44 |     }
45 |   </style>
46 | </head>
47 | <body>
48 |   <header>模拟交通灯</header>
49 |   <main>
50 |     <div class="traffic pass">
51 |       <div class="light"></div>
52 |       <div class="light"></div>
53 |       <div class="light"></div>
54 |     </div>
55 |   </main>
56 | </body>
57 | </html>


--------------------------------------------------------------------------------
/codes/深夜食堂/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>深夜食堂</title>
 8 |   <style>
 9 |     body, html {
10 |       width: 100%;
11 |       height: 100%;
12 |       padding: 0;
13 |       margin: 0;
14 |       overflow: hidden;
15 |     }
16 |     body {
17 |       padding: 10px;
18 |       box-sizing: border-box;
19 |     }
20 |     body.night {
21 |       background-color: black;
22 |       color: white;
23 |     }
24 |     div.pic img {
25 |       width: 100%;
26 |     }
27 |     #modeBtn {
28 |       font-size: 2rem;
29 |       float: right;
30 |     }
31 |     #modeBtn::after {
32 |       content: '🌞';
33 |     }
34 |     body.night #modeBtn::after {
35 |       content: '🌜';
36 |     }
37 |   </style>
38 | </head>
39 | <body>
40 |   <header>
41 |     <button id="modeBtn"></button>
42 |     <h1>深夜食堂</h1>
43 |   </header>
44 |   <main>
45 |     <div class="pic">
46 |       <img src="https://p2.ssl.qhimg.com/t0120cc20854dc91c1e.jpg">
47 |     </div>
48 |     <div class="description">
49 |       <p>
50 |           这是一间营业时间从午夜十二点到早上七点的特殊食堂。这里的老板，不太爱说话，却总叫人吃得热泪盈
51 |           眶。在这里，自卑的舞蹈演员偶遇隐退多年舞界前辈，前辈不惜讲述自己不堪回首的经历不断鼓舞年轻人，最终令其重拾自信；轻言绝交的闺蜜因为吃到共同喜爱的美食，回忆起从前的友谊，重归于好；乐观的绝症患者遇到同命相连的女孩，两人相爱并相互给予力量，陪伴彼此完美地走过了最后一程；一味追求事业成功的白领，在这里结交了真正暖心的朋友，发现真情比成功更有意义。食物、故事、真情，汇聚了整部剧的主题，教会人们坦然面对得失，对生活充满期许和热情。每一个故事背后都饱含深情，情节跌宕起伏，令人流连忘返 [6]  。
52 |       </p>
53 |     </div>
54 |   </main>
55 | </body>
56 | </html>


--------------------------------------------------------------------------------
/codes/饼图/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>JS Bin</title>
 7 |   <style>
 8 |   .pie,
 9 |   .pie::before {
10 |     --bg-color: #37c;
11 |     --fg-color: #3c7;
12 |     display: inline-block;
13 |     border-radius: 50%;
14 |     width: 150px;
15 |     height: 150px;
16 |   }
17 |   .pie {
18 |     position: relative;
19 |     text-align: center;
20 |     line-height: 150px;
21 |     background: linear-gradient(90deg, var(--bg-color) 50%, transparent 0);
22 |     color: #fff;
23 |     animation: spin-convex 2s linear infinite;
24 |     animation-play-state: paused;
25 |     animation-delay: -0s;
26 |   }
27 |   .pie::before {
28 |     content: '';
29 |     position: absolute;
30 |     left: 0;
31 |     top: 0;
32 |     background: linear-gradient(90deg, var(--fg-color) 50%, var(--bg-color) 0);
33 |     z-index: -1;
34 |     animation: spin 1s linear infinite;
35 |     animation-play-state: paused;
36 |     animation-delay: inherit;
37 |   }
38 |   @keyframes spin{
39 |     to {transform: rotate(1turn)}
40 |   }
41 |   @keyframes spin-convex{
42 |     50% {background: linear-gradient(90deg, transparent 50%, var(--fg-color) 0);}
43 |   }
44 |   </style>
45 | </head>
46 | <body>
47 |   <div class="pie" style="animation-delay: -0.25s;">25%</div>
48 |   <div class="pie" style="animation-delay: -0.3s;">30%</div>
49 |   <div class="pie" style="animation-delay: -0.65s;">65%</div>
50 |   <div class="pie" style="animation-delay: -0.85s;">85%</div>
51 | </body>
52 | </html>


--------------------------------------------------------------------------------
/codes/幸运数字/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>幸运数字</title>
 8 |   <style>
 9 |     html, body {
10 |       width: 100%;
11 |       height: 100%;
12 |       padding: 0;
13 |       margin: 0;
14 |       overflow: hidden;
15 |       display: flex;
16 |       justify-content: center;
17 |       align-items: center;
18 |     }
19 |     .lucky {
20 |       position: fixed;
21 |       margin-top: -180px;
22 |     }
23 |     .panel {
24 |       display: grid;
25 |       grid-template-columns: 100px 100px 100px;
26 |       grid-template-rows: 100px 100px 100px;
27 |     }
28 |     .card {
29 |       font-size: 2.5rem;
30 |       line-height: 100px;
31 |       text-align: center;
32 |       color: #999;
33 |       border: solid 1px;
34 |       cursor: pointer;
35 |     }
36 |     .card.bingo {
37 |       color: #a00;
38 |     }
39 |   </style>
40 | </head>
41 | <body>
42 |   <div class="lucky">今日幸运数字：<span id="lucky-number">6</span></div>
43 |   <div class="panel">
44 |     <div class="card" data-idx="0">?</div>
45 |     <div class="card" data-idx="1">?</div>
46 |     <div class="card" data-idx="2">?</div>
47 |     <div class="card" data-idx="3">?</div>
48 |     <div class="card" data-idx="4">?</div>
49 |     <div class="card" data-idx="5">?</div>
50 |     <div class="card" data-idx="6">?</div>
51 |     <div class="card" data-idx="7">?</div>
52 |     <div class="card" data-idx="8">?</div>
53 |   </div>
54 | </body>
55 | </html>


--------------------------------------------------------------------------------
/codes/防抖与节流/debounce.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>Debounce</title>
 8 |   <style>
 9 |   html, body {
10 |     width: 100%;
11 |     height: 100%;
12 |     padding: 0;
13 |     margin: 0;
14 |   }
15 |   #panel {
16 |     width: 100%;
17 |     height: 0;
18 |     padding-bottom: 100%;
19 |   }
20 |   </style>
21 | </head>
22 | <body>
23 |   <div id="panel">
24 |     <canvas></canvas>
25 |   </div>
26 |   <script>
27 |     function debounce(fn, ms = 100) {
28 |       let debounceTimer = null;
29 |       return function(...args) {
30 |         if(debounceTimer) clearTimeout(debounceTimer);
31 | 
32 |         debounceTimer = setTimeout(() => {
33 |           fn.apply(this, args);
34 |         }, ms);
35 |       }
36 |     }
37 | 
38 |     const panel = document.getElementById('panel');
39 |     const canvas = document.querySelector('canvas');
40 |     function resize() {
41 |       canvas.width = panel.clientWidth;
42 |       canvas.height = panel.clientHeight;
43 |     }
44 |     function draw() {
45 |       const context = canvas.getContext('2d');
46 |       const radius = canvas.width / 2;
47 |       context.save();
48 |       context.translate(radius, radius);
49 |       for(let i = radius; i >= 0; i -= 5) {
50 |         context.fillStyle = `hsl(${i % 360}, 50%, 50%)`;
51 |         context.beginPath();
52 |         context.arc(0, 0, i, i, 0, Math.PI * 2);
53 |         context.fill();
54 |       }
55 |       context.restore();
56 |     }
57 | 
58 |     resize();
59 |     draw();
60 | 
61 |     window.addEventListener('resize', debounce(() => {
62 |       resize();
63 |       draw();
64 |     }, 500));
65 |   </script>
66 | </body>
67 | </html>


--------------------------------------------------------------------------------
/codes/弹跳小球/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>Document</title>
 8 |   <style>
 9 |     #sphere {
10 |       position: absolute;
11 |       left: 100px;
12 |       top: 100px;
13 |       width: 20px;
14 |       height: 20px;
15 |       border-radius: 50%;
16 |       background-color: #0af;
17 |     }
18 | 
19 |     #ground {
20 |       position: absolute;
21 |       top: 420px;
22 |       width: 600px;
23 |       height: 10px;
24 |       background: black;
25 |     }
26 |   </style>
27 | </head>
28 | <body>
29 |   <div id="sphere"></div>
30 |   <div id="ground"></div>
31 |   <script>
32 |     function animate(target, duration, progress) {
33 |       const startTime = Date.now();
34 |       return new Promise((resolve) => {
35 |         function update() {
36 |           const t = Date.now() - startTime;
37 |           const p = Math.min(t / duration, 1);
38 |           progress(target, p);
39 |           if(p < 1) {
40 |             requestAnimationFrame(update);
41 |           } else {
42 |             resolve(p);
43 |           }
44 |         }
45 |         update();
46 |       });
47 |     }
48 | 
49 |     const sphere = document.getElementById('sphere');
50 | 
51 |     (async function() {
52 |       let height = 400;
53 |       let duration = 1000;
54 |       //noprotect
55 |       while(1) {
56 |         await animate(sphere, duration, (target, p) => {
57 |           const top = (400 - height) + height * p ** 2;
58 |           target.style.top = `${top}px`;
59 |         });
60 |         height *= 0.7;
61 |         duration *= Math.sqrt(0.7);
62 |         await animate(sphere, duration, (target, p) => {
63 |           // 起点是400，反向运动，所以要用400减
64 |           const top = 400 - height * p * (2 - p);
65 |           target.style.top = `${top}px`;
66 |         });
67 |       }
68 |     }());  
69 |   </script>
70 | </body>
71 | </html>


--------------------------------------------------------------------------------
/codes/异步信号/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <title>Document</title>
 7 | </head>
 8 | <body>
 9 |   <script>
10 | function defer() {
11 |   const deferred = {};
12 |   deferred.promise = new Promise((resolve, reject) => {
13 |     deferred.resolve = resolve;
14 |     deferred.reject = reject;
15 |   });
16 |   return deferred;
17 | }
18 | 
19 | const _state = Symbol('state');
20 | const _checkers = Symbol('checker');
21 | 
22 | class Signal {
23 |   constructor(initState) {
24 |     this[_state] = initState;
25 |     this[_checkers] = new Map();
26 |   }
27 |   
28 |   get state() {
29 |     return this[_state];
30 |   }
31 | 
32 |   set state(value) {
33 |     // 每次状态变化时，检查未结束的 defer 对象
34 |     [...this[_checkers]].forEach(([promise, {type, deferred, state}]) => {
35 |       if(type === 'while' && value !== state // 当信号状态改变的时，while 信号结束
36 |         || type === 'until' && value === state // 当信号状态改变为对应的 state 时，until 信号结束
37 |       ) {
38 |         deferred.resolve(value); 
39 |         this[_checkers].delete(promise);
40 |       }
41 |     });
42 |     this[_state] = value;
43 |   }
44 |   
45 |   while(state) {
46 |     const deferred = defer();
47 |     if(state !== this[_state]) {
48 |       // 如果当前状态不是 while 状态， while 的 deferred 结束
49 |       deferred.resolve(this[_state]);
50 |     }
51 |     else {
52 |       // 否则将它添加到 checkers 列表中等待后续检查
53 |       this[_checkers].set(deferred.promise, {type: 'while', deferred, state});
54 |     }
55 |     return deferred.promise;
56 |   }
57 |   
58 |   until(state) {
59 |     const deferred = defer();
60 |     if(state === this[_state]) {
61 |       // 如果当前状态就是 until 状态， until 的 deferred 结束
62 |       deferred.resolve(this[_state]);
63 |     }
64 |     else {
65 |        // 否则将它添加到 checkers 列表中等待后续检查
66 |       this[_checkers].set(deferred.promise, {type: 'until', deferred, state});
67 |     }
68 |     return deferred.promise;
69 |   }
70 |   
71 |   delete(promise) {
72 |     this[_checkers].delete(promise);
73 |   }
74 | }
75 | 
76 | const lucky = new Signal();
77 | 
78 | const timerID = setInterval(() => {
79 |   const num = Math.floor(Math.random() * 10);
80 |   console.log(`luck number: ${num}`);
81 |   lucky.state = num;
82 | }, 1000);
83 | 
84 | async function addLuckyBoy(name, num) {
85 |   await lucky.until(num);
86 |   console.log(`${name} is lucky boy!`);
87 |   clearInterval(timerID);
88 | }
89 | 
90 | addLuckyBoy('张三', 3);
91 | addLuckyBoy('李四', 5);
92 | addLuckyBoy('王五', 7);
93 |   </script>
94 | </body>
95 | </html>


--------------------------------------------------------------------------------
/codes/抽象行为/index2.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7 |   <title>抽象行为</title>
  8 |   <style>
  9 |     #list {
 10 |       list-style-type: none;
 11 |       justify-content: flex-start;
 12 |       display: flex;
 13 |       flex-wrap: wrap;
 14 |     }
 15 | 
 16 |     #list li {
 17 |       padding: 10px;
 18 |       margin: 0;
 19 |     }
 20 |     #list img {
 21 |       height: 200px;
 22 |       cursor: pointer;
 23 |       box-sizing: border-box;
 24 |       padding: 5px;
 25 |     }
 26 | 
 27 |     #list img.selected {
 28 |       border: solid 5px #37c;
 29 |       padding: 0;
 30 |     }
 31 |   </style>
 32 | </head>
 33 | <body>
 34 |   <ul id="list">
 35 |     <li>
 36 |       <img src="https://p4.ssl.qhimg.com/t01713d89cfdb45cdf5.jpg">
 37 |     </li>
 38 |     <li>
 39 |       <img src="https://p4.ssl.qhimg.com/t01e456146c8f8a639a.jpg">
 40 |     </li>
 41 |     <li>
 42 |       <img src="https://p1.ssl.qhimg.com/t015f613e2205b573d8.jpg">
 43 |     </li>
 44 |     <li>
 45 |       <img src="https://p0.ssl.qhimg.com/t01290338a28018d404.jpg">
 46 |     </li>
 47 |     <li>
 48 |       <img src="https://p3.ssl.qhimg.com/t01d9aa5ae469c8862e.jpg">
 49 |     </li>
 50 |     <li>
 51 |       <img src="https://p3.ssl.qhimg.com/t01cb20d35fc4aa3c0d.jpg">
 52 |     </li>
 53 |     <li>
 54 |       <img src="https://p5.ssl.qhimg.com/t0110b30256941b9611.jpg">
 55 |     </li>
 56 |   </ul>
 57 |   <script>
 58 |   function useBehavior(context) {
 59 |     const {type, getDetail} = context;
 60 |     return function(subject, target) {
 61 |       const event = new CustomEvent(type, {bubbles: true, detail: getDetail.call(context, subject, target)});
 62 |       target.dispatchEvent(event);
 63 |     }
 64 |   }
 65 | 
 66 |   const select = useBehavior({
 67 |     type: 'select',
 68 |     data: {
 69 |       picked: new Set(),
 70 |     },
 71 |     getDetail(subject, target) {
 72 |       const picked = this.data.picked;
 73 | 
 74 |       if(picked.has(target)) {
 75 |         target.className = '';
 76 |         picked.delete(target);
 77 |       } else {
 78 |         target.className = 'selected';
 79 |         picked.add(target);
 80 |       }
 81 | 
 82 |       return {
 83 |         changed: target,
 84 |         picked,
 85 |       };
 86 |     },
 87 |   });
 88 | 
 89 |   const list = document.getElementById('list');
 90 |   list.addEventListener('click', (evt) => {
 91 |     const target = evt.target;
 92 |     if(target.tagName === 'IMG') {
 93 |       select(list, target);
 94 |     }
 95 |   });
 96 | 
 97 |   list.addEventListener('select', ({detail}) => {
 98 | 
 99 |   });
100 |   </script>
101 | </body>
102 | </html>


--------------------------------------------------------------------------------
/codes/首页轮播图/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>首页轮播图</title>
 8 |   <style>
 9 |     .slider {
10 |       position: relative;
11 |       width: 790px;
12 |       height: 340px;
13 |     }
14 | 
15 |     .slider ul {
16 |       list-style-type:none;
17 |       position: relative;
18 |       width: 100%;
19 |       height: 100%;
20 |       padding: 0;
21 |       margin: 0;
22 |     }
23 | 
24 |     .slider__item,
25 |     .slider__item--selected {
26 |       position: absolute;
27 |       transition: opacity 1s;
28 |       opacity: 0;
29 |       text-align: center;
30 |     }
31 | 
32 |     .slider__item--selected {
33 |       transition: opacity 1s;
34 |       opacity: 1;
35 |     }  
36 |   </style>
37 | </head>
38 | <body>
39 |   <div class="slider">
40 |     <ul>
41 |       <li class="slider__item--selected">
42 |         <img src="https://p5.ssl.qhimg.com/t0119c74624763dd070.png"/>
43 |       </li>
44 |       <li class="slider__item">
45 |         <img src="https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg"/>
46 |       </li>
47 |       <li class="slider__item">
48 |         <img src="https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg"/>
49 |       </li>
50 |       <li class="slider__item">
51 |         <img src="https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg"/>
52 |       </li>
53 |     </ul>
54 |   </div>
55 |   <script>
56 |     class Slider {
57 |       constructor({container}) {
58 |         this.container = container;
59 |         this.items = Array.from(container.querySelectorAll('.slider__item, .slider__item--selected'));
60 |       }
61 |       getSelectedItem(){
62 |         const selected = this.container.querySelector('.slider__item--selected');
63 |         return selected
64 |       }
65 |       getSelectedItemIndex(){
66 |         return this.items.indexOf(this.getSelectedItem());
67 |       }
68 |       slideTo(idx){
69 |         const selected = this.getSelectedItem();
70 |         if(selected){ 
71 |           selected.className = 'slider__item';
72 |         }
73 |         const item = this.items[idx];
74 |         if(item){
75 |           item.className = 'slider__item--selected';
76 |         }
77 |       }
78 |       slideNext(){
79 |         const currentIdx = this.getSelectedItemIndex();
80 |         const nextIdx = (currentIdx + 1) % this.items.length;
81 |         this.slideTo(nextIdx);
82 |       }
83 |       slidePrevious(){
84 |         const currentIdx = this.getSelectedItemIndex();
85 |         const previousIdx = (this.items.length + currentIdx - 1) % this.items.length;
86 |         this.slideTo(previousIdx);  
87 |       }
88 |     }
89 |     const container = document.querySelector('.slider');
90 |     const slider = new Slider({container});
91 |     setInterval(() => {
92 |       slider.slideNext();
93 |     }, 3000);
94 |   </script>
95 | </body>
96 | </html>


--------------------------------------------------------------------------------
/codes/抽象行为/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7 |   <title>抽象行为</title>
  8 |   <style>
  9 |     #list {
 10 |       list-style-type: none;
 11 |       justify-content: flex-start;
 12 |       display: flex;
 13 |       flex-wrap: wrap;
 14 |     }
 15 | 
 16 |     #list li {
 17 |       padding: 10px;
 18 |       margin: 0;
 19 |     }
 20 |     #list img {
 21 |       height: 200px;
 22 |       cursor: pointer;
 23 |     }
 24 |   </style>
 25 | </head>
 26 | <body>
 27 |   <ul id="list">
 28 |     <li>
 29 |       <img src="https://p4.ssl.qhimg.com/t01713d89cfdb45cdf5.jpg">
 30 |     </li>
 31 |     <li>
 32 |       <img src="https://p4.ssl.qhimg.com/t01e456146c8f8a639a.jpg">
 33 |     </li>
 34 |     <li>
 35 |       <img src="https://p1.ssl.qhimg.com/t015f613e2205b573d8.jpg">
 36 |     </li>
 37 |     <li>
 38 |       <img src="https://p0.ssl.qhimg.com/t01290338a28018d404.jpg">
 39 |     </li>
 40 |     <li>
 41 |       <img src="https://p3.ssl.qhimg.com/t01d9aa5ae469c8862e.jpg">
 42 |     </li>
 43 |     <li>
 44 |       <img src="https://p3.ssl.qhimg.com/t01cb20d35fc4aa3c0d.jpg">
 45 |     </li>
 46 |     <li>
 47 |       <img src="https://p5.ssl.qhimg.com/t0110b30256941b9611.jpg">
 48 |     </li>
 49 |   </ul>
 50 |   <script>
 51 |   function useBehavior(context) {
 52 |     const {type, getDetail} = context;
 53 |     return function(subject, target) {
 54 |       const event = new CustomEvent(type, {bubbles: true, detail: getDetail.call(context, subject, target)});
 55 |       target.dispatchEvent(event);
 56 |     }
 57 |   }
 58 | 
 59 |   const preview = useBehavior({
 60 |     type: 'preview',
 61 |     getDetail(subject, target) {
 62 |       const imgs = Array.from(subject.querySelectorAll('img'));
 63 |       const selected = imgs.indexOf(target);
 64 |       let mask = document.getElementById('mask');
 65 | 
 66 |       if(!mask) {
 67 |         mask = document.createElement('div');
 68 |         mask.id = "mask";
 69 |         mask.innerHTML = `
 70 |           <a class="previous" href="###">&lt;</a>
 71 |           <img src="${imgs[selected].src}">
 72 |           <a class="next" href="###">&gt;</a>    
 73 |         `
 74 |         Object.assign(mask.style, {
 75 |           position: 'absolute',
 76 |           left: 0,
 77 |           top: 0,
 78 |           width: '100%',
 79 |           height: '100%',
 80 |           backgroundColor: 'rgba(0,0,0,0.8)',
 81 |           display: 'none',
 82 |           alignItems: 'center',
 83 |           justifyContent: 'space-between',
 84 |         });
 85 |         mask.querySelectorAll('a').forEach((a) => {
 86 |           Object.assign(a.style, {
 87 |             width: '30px',
 88 |             textAlign: 'center',
 89 |             fontSize: '2rem',
 90 |             color: '#fff',
 91 |             textDecoration: 'none',
 92 |           });
 93 |         });
 94 |         document.body.appendChild(mask);
 95 |         let idx = selected;
 96 |         mask.addEventListener('click', (evt) => {
 97 |           const target = evt.target;
 98 |           if(target === mask) {
 99 |             mask.style.display = 'none';
100 |           } else if(target.className === 'previous') {
101 |             updateButton(--idx);
102 |           } else if(target.className === 'next') {
103 |             updateButton(++idx);
104 |           }
105 |         });
106 |       }
107 | 
108 |       function updateButton(idx) {
109 |         const [previous, next] = [...mask.querySelectorAll('a')];
110 |         previous.style.visibility = idx ? 'visible' : 'hidden';
111 |         next.style.visibility = idx < imgs.length - 1 ? 'visible' : 'hidden';
112 |         const img = mask.querySelector('img');
113 |         img.src = imgs[idx].src;
114 |       }
115 | 
116 |       return {
117 |         showMask(){
118 |           mask.style.display = 'flex';
119 |           updateButton(selected);
120 |         },
121 |       };
122 |     },
123 |   });
124 | 
125 |   const list = document.getElementById('list');
126 |   list.addEventListener('click', (evt) => {
127 |     const target = evt.target;
128 |     if(target.tagName === 'IMG') {
129 |       preview(list, target);
130 |     }
131 |   });
132 | 
133 |   list.addEventListener('preview', ({detail}) => {
134 |     const {showMask} = detail;
135 |     showMask();
136 |   });
137 |   </script>
138 | </body>
139 | </html>


--------------------------------------------------------------------------------
/codes/打字游戏/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |   <title>Document</title>
  7 |   <style>
  8 |   html, body {
  9 |     width: 100%;
 10 |     height: 100%;
 11 |     padding: 6px;
 12 |     margin: 0;
 13 |     overflow: hidden;
 14 |   }
 15 | 
 16 |   #main {
 17 |     position: relative;
 18 |     display: inline-block;
 19 |   }
 20 | 
 21 |   #panel, #typed {
 22 |     border: solid 1px #000;
 23 |     line-height: 1.5;
 24 |     white-space: pre-wrap;
 25 |     margin: 0;
 26 |     padding: 18px 6px 6px 6px;
 27 |     color: #0006;
 28 |   }
 29 | 
 30 |   #panel {
 31 |     width: 600px;
 32 |     min-height: 400px;
 33 |   }
 34 |   #panel:empty {
 35 |     cursor: pointer;
 36 |   }
 37 |   #panel:empty::after {
 38 |     content: '鼠标点击后开始';
 39 |   }
 40 | 
 41 |   #typed {
 42 |     max-width: 600px;
 43 |     position: absolute;
 44 |     top: 0;
 45 |     border-color: transparent;
 46 |     color: #008;
 47 |     background-color: #eea6;
 48 |     background-clip: content-box;
 49 |     overflow: hidden;
 50 |   }
 51 |   #typed:empty {
 52 |     background-color: transparent;
 53 |   }
 54 | 
 55 |   #starting {
 56 |     position: absolute;
 57 |     top: 50%;
 58 |     left: 50%;
 59 |     transform: translate(-50%, -50%);
 60 |     font-size: 3rem;
 61 |   }
 62 | 
 63 |   #countdown {
 64 |     position: absolute;
 65 |     top: 0;
 66 |     right: 10px;
 67 |     opacity: 0.3;
 68 |   }
 69 |   </style>
 70 | </head>
 71 | <body>
 72 |   <div id="main">
 73 |     <div id="panel"></div>
 74 |     <div id="typed"></div>
 75 |     <div id="starting"></div>
 76 |     <div id="countdown">00:00</div>
 77 |   </div>
 78 | <script>
 79 |   const text = `If you already have experience making drawings with computers, you know that in that process you draw a circle, then a rectangle, a line, some triangles until you compose the image you want. That process is very similar to writing a letter or a book by hand - it is a set of instructions that do one task after another.
 80 | 
 81 | Shaders are also a set of instructions, but the instructions are executed all at once for every single pixel on the screen. That means the code you write has to behave differently depending on the position of the pixel on the screen. Like a type press, your program will work as a function that receives a position and returns a color, and when it's compiled it will run extraordinarily fast. 
 82 | 
 83 | Why are shaders fast? To answer this, I present the wonders of parallel processing.
 84 | 
 85 | Imagine the CPU of your computer as a big industrial pipe, and every task as something that passes through it - like a factory line. Some tasks are bigger than others, which means they require more time and energy to deal with. We say they require more processing power. Because of the architecture of computers the jobs are forced to run in a series; each job has to be finished one at a time. Modern computers usually have groups of four processors that work like these pipes, completing tasks one after another to keeping things running smoothly. Each pipe is also known as a thread.`
 86 | 
 87 |   function wait(ms) {
 88 |     return new Promise((resolve) => {
 89 |       setTimeout(resolve, ms);
 90 |     });
 91 |   }
 92 | 
 93 |   async function starting(el, count = 3) {
 94 |     el.innerText = count;
 95 |     while(count--) {
 96 |       await wait(1000);
 97 |       el.innerText = count;
 98 |     }
 99 |     el.innerText = '';
100 |   }
101 | 
102 |   function * typings(text) {
103 |     for(let i = 0; i < text.length; i++) {
104 |       const char = text[i];
105 |       yield new Promise((resolve) => {
106 |         document.addEventListener('keydown', function f({key}) {
107 |           if(key ===  char) {
108 |             document.removeEventListener('keydown', f);
109 |             resolve(key);
110 |           }
111 |         });
112 |       });
113 |     }
114 |   }
115 | 
116 |   async function countDown(el, sec) {
117 |     while(sec--) {
118 |       const minute = Math.floor(sec / 60);
119 |       const second = sec % 60;
120 |       const time = `${minute > 10 ? minute: `0${minute}`}:${second > 10 ? second: `0${second}`}`;
121 |       el.innerText = time;
122 |       await wait(1000);
123 |     }
124 |   }
125 | 
126 |   const typedEl = document.getElementById('typed');
127 |   const startingEl = document.getElementById('starting');
128 |   const countdownEl = document.getElementById('countdown');
129 | 
130 |   const panel = document.getElementById('panel');
131 |   panel.addEventListener('click', start);
132 |   
133 |   async function start() {
134 |     panel.innerText = text;
135 |     await starting(startingEl);
136 |     const countDownPromise = countDown(countdownEl, 10);
137 |     typedEl.innerText = '_';
138 |     for(let typing of typings(text)) {
139 |       const key = await Promise.race([countDownPromise, typing]);
140 |       if(key) {
141 |         typedEl.innerText = typedEl.innerText.slice(0, -1) + key + '_';
142 |       } else {
143 |         break;
144 |       }
145 |     }
146 |     console.log('结束');
147 |   }
148 | </script>
149 | </body>
150 | </html>


--------------------------------------------------------------------------------
/codes/抽象行为/index3.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7 |   <title>抽象行为</title>
  8 |   <style>
  9 |     #list {
 10 |       list-style-type: none;
 11 |       justify-content: flex-start;
 12 |       display: flex;
 13 |       flex-wrap: wrap;
 14 |     }
 15 | 
 16 |     #list li {
 17 |       padding: 10px;
 18 |       margin: 0;
 19 |     }
 20 |     #list img {
 21 |       height: 200px;
 22 |       cursor: pointer;
 23 |       box-sizing: border-box;
 24 |       padding: 5px;
 25 |     }
 26 | 
 27 |     #list img.selected {
 28 |       border: solid 5px #37c;
 29 |       padding: 0;
 30 |     }
 31 |   </style>
 32 | </head>
 33 | <body>
 34 |   <ul id="list">
 35 |     <li>
 36 |       <img src="https://p4.ssl.qhimg.com/t01713d89cfdb45cdf5.jpg">
 37 |     </li>
 38 |     <li>
 39 |       <img src="https://p4.ssl.qhimg.com/t01e456146c8f8a639a.jpg">
 40 |     </li>
 41 |     <li>
 42 |       <img src="https://p1.ssl.qhimg.com/t015f613e2205b573d8.jpg">
 43 |     </li>
 44 |     <li>
 45 |       <img src="https://p0.ssl.qhimg.com/t01290338a28018d404.jpg">
 46 |     </li>
 47 |     <li>
 48 |       <img src="https://p3.ssl.qhimg.com/t01d9aa5ae469c8862e.jpg">
 49 |     </li>
 50 |     <li>
 51 |       <img src="https://p3.ssl.qhimg.com/t01cb20d35fc4aa3c0d.jpg">
 52 |     </li>
 53 |     <li>
 54 |       <img src="https://p5.ssl.qhimg.com/t0110b30256941b9611.jpg">
 55 |     </li>
 56 |   </ul>
 57 |   <script>
 58 |   function useBehavior(context) {
 59 |     const {type, getDetail} = context;
 60 |     return function(subject, target) {
 61 |       const event = new CustomEvent(type, {bubbles: true, detail: getDetail.call(context, subject, target)});
 62 |       target.dispatchEvent(event);
 63 |     }
 64 |   }
 65 | 
 66 |   const preview = useBehavior({
 67 |     type: 'preview',
 68 |     getDetail(subject, target) {
 69 |       const imgs = Array.from(subject.querySelectorAll('img'));
 70 |       const selected = imgs.indexOf(target);
 71 |       let mask = document.getElementById('mask');
 72 | 
 73 |       if(!mask) {
 74 |         mask = document.createElement('div');
 75 |         mask.id = "mask";
 76 |         mask.innerHTML = `
 77 |           <a class="previous" href="###">&lt;</a>
 78 |           <img src="${imgs[selected].src}">
 79 |           <a class="next" href="###">&gt;</a>    
 80 |         `
 81 |         Object.assign(mask.style, {
 82 |           position: 'absolute',
 83 |           left: 0,
 84 |           top: 0,
 85 |           width: '100%',
 86 |           height: '100%',
 87 |           backgroundColor: 'rgba(0,0,0,0.8)',
 88 |           display: 'none',
 89 |           alignItems: 'center',
 90 |           justifyContent: 'space-between',
 91 |         });
 92 |         mask.querySelectorAll('a').forEach((a) => {
 93 |           Object.assign(a.style, {
 94 |             width: '30px',
 95 |             textAlign: 'center',
 96 |             fontSize: '2rem',
 97 |             color: '#fff',
 98 |             textDecoration: 'none',
 99 |           });
100 |         });
101 |         document.body.appendChild(mask);
102 |         let idx = selected;
103 |         mask.addEventListener('click', (evt) => {
104 |           const target = evt.target;
105 |           if(target === mask) {
106 |             mask.style.display = 'none';
107 |           } else if(target.className === 'previous') {
108 |             updateButton(--idx);
109 |           } else if(target.className === 'next') {
110 |             updateButton(++idx);
111 |           }
112 |         });
113 |       }
114 | 
115 |       function updateButton(idx) {
116 |         const [previous, next] = [...mask.querySelectorAll('a')];
117 |         previous.style.visibility = idx ? 'visible' : 'hidden';
118 |         next.style.visibility = idx < imgs.length - 1 ? 'visible' : 'hidden';
119 |         const img = mask.querySelector('img');
120 |         img.src = imgs[idx].src;
121 |       }
122 | 
123 |       return {
124 |         showMask(){
125 |           mask.style.display = 'flex';
126 |           updateButton(selected);
127 |         },
128 |       };
129 |     },
130 |   });
131 | 
132 |   const select = useBehavior({
133 |     type: 'select',
134 |     data: {
135 |       picked: new Set(),
136 |     },
137 |     getDetail(subject, target) {
138 |       const picked = this.data.picked;
139 |       if(picked.has(target)) {
140 |         target.className = '';
141 |         picked.delete(target);
142 |       } else {
143 |         target.className = 'selected';
144 |         picked.add(target);
145 |       }
146 | 
147 |       return {
148 |         changed: target,
149 |         picked,
150 |       };
151 |     },
152 |   });
153 | 
154 |   const list = document.getElementById('list');
155 |   list.addEventListener('click', (evt) => {
156 |     const target = evt.target;
157 |     if(target.tagName === 'IMG') {
158 |       if(evt.altKey) {
159 |         select(list, target);
160 |       } else {
161 |         preview(list, target);
162 |       }
163 |     }
164 |   });
165 | 
166 |   list.addEventListener('preview', ({detail}) => {
167 |     const {showMask} = detail;
168 |     showMask();
169 |   });
170 |   </script>
171 | </body>
172 | </html>


--------------------------------------------------------------------------------
/codes/MyProj/dist/app.js:
--------------------------------------------------------------------------------
  1 | /******/ (function(modules) { // webpackBootstrap
  2 | /******/ 	// The module cache
  3 | /******/ 	var installedModules = {};
  4 | /******/
  5 | /******/ 	// The require function
  6 | /******/ 	function __webpack_require__(moduleId) {
  7 | /******/
  8 | /******/ 		// Check if module is in cache
  9 | /******/ 		if(installedModules[moduleId]) {
 10 | /******/ 			return installedModules[moduleId].exports;
 11 | /******/ 		}
 12 | /******/ 		// Create a new module (and put it into the cache)
 13 | /******/ 		var module = installedModules[moduleId] = {
 14 | /******/ 			i: moduleId,
 15 | /******/ 			l: false,
 16 | /******/ 			exports: {}
 17 | /******/ 		};
 18 | /******/
 19 | /******/ 		// Execute the module function
 20 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 21 | /******/
 22 | /******/ 		// Flag the module as loaded
 23 | /******/ 		module.l = true;
 24 | /******/
 25 | /******/ 		// Return the exports of the module
 26 | /******/ 		return module.exports;
 27 | /******/ 	}
 28 | /******/
 29 | /******/
 30 | /******/ 	// expose the modules object (__webpack_modules__)
 31 | /******/ 	__webpack_require__.m = modules;
 32 | /******/
 33 | /******/ 	// expose the module cache
 34 | /******/ 	__webpack_require__.c = installedModules;
 35 | /******/
 36 | /******/ 	// define getter function for harmony exports
 37 | /******/ 	__webpack_require__.d = function(exports, name, getter) {
 38 | /******/ 		if(!__webpack_require__.o(exports, name)) {
 39 | /******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
 40 | /******/ 		}
 41 | /******/ 	};
 42 | /******/
 43 | /******/ 	// define __esModule on exports
 44 | /******/ 	__webpack_require__.r = function(exports) {
 45 | /******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
 46 | /******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 47 | /******/ 		}
 48 | /******/ 		Object.defineProperty(exports, '__esModule', { value: true });
 49 | /******/ 	};
 50 | /******/
 51 | /******/ 	// create a fake namespace object
 52 | /******/ 	// mode & 1: value is a module id, require it
 53 | /******/ 	// mode & 2: merge all properties of value into the ns
 54 | /******/ 	// mode & 4: return value when already ns object
 55 | /******/ 	// mode & 8|1: behave like require
 56 | /******/ 	__webpack_require__.t = function(value, mode) {
 57 | /******/ 		if(mode & 1) value = __webpack_require__(value);
 58 | /******/ 		if(mode & 8) return value;
 59 | /******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
 60 | /******/ 		var ns = Object.create(null);
 61 | /******/ 		__webpack_require__.r(ns);
 62 | /******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
 63 | /******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
 64 | /******/ 		return ns;
 65 | /******/ 	};
 66 | /******/
 67 | /******/ 	// getDefaultExport function for compatibility with non-harmony modules
 68 | /******/ 	__webpack_require__.n = function(module) {
 69 | /******/ 		var getter = module && module.__esModule ?
 70 | /******/ 			function getDefault() { return module['default']; } :
 71 | /******/ 			function getModuleExports() { return module; };
 72 | /******/ 		__webpack_require__.d(getter, 'a', getter);
 73 | /******/ 		return getter;
 74 | /******/ 	};
 75 | /******/
 76 | /******/ 	// Object.prototype.hasOwnProperty.call
 77 | /******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
 78 | /******/
 79 | /******/ 	// __webpack_public_path__
 80 | /******/ 	__webpack_require__.p = "";
 81 | /******/
 82 | /******/
 83 | /******/ 	// Load entry module and return exports
 84 | /******/ 	return __webpack_require__(__webpack_require__.s = 0);
 85 | /******/ })
 86 | /************************************************************************/
 87 | /******/ ([
 88 | /* 0 */
 89 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 90 | 
 91 | "use strict";
 92 | __webpack_require__.r(__webpack_exports__);
 93 | /* harmony import */ var _foo__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
 94 | 
 95 | var f = new _foo__WEBPACK_IMPORTED_MODULE_0__["default"]();
 96 | console.log(f.bar());
 97 | console.log(Math.pow(10, 3));
 98 | 
 99 | /***/ }),
100 | /* 1 */
101 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
102 | 
103 | "use strict";
104 | __webpack_require__.r(__webpack_exports__);
105 | /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return Foo; });
106 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
107 | 
108 | function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
109 | 
110 | function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
111 | 
112 | var Foo =
113 | /*#__PURE__*/
114 | function () {
115 |   function Foo() {
116 |     _classCallCheck(this, Foo);
117 |   }
118 | 
119 |   _createClass(Foo, [{
120 |     key: "bar",
121 |     value: function bar() {
122 |       return 'bar';
123 |     }
124 |   }]);
125 | 
126 |   return Foo;
127 | }();
128 | 
129 | 
130 | ;
131 | 
132 | /***/ })
133 | /******/ ]);


--------------------------------------------------------------------------------
/codes/首页轮播图/index2.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7 |   <title>首页轮播图</title>
  8 |   <style>
  9 |     .slider {
 10 |       position: relative;
 11 |       width: 790px;
 12 |       height: 340px;
 13 |     }
 14 | 
 15 |     .slider ul {
 16 |       list-style-type:none;
 17 |       position: relative;
 18 |       width: 100%;
 19 |       height: 100%;
 20 |       padding: 0;
 21 |       margin: 0;
 22 |     }
 23 | 
 24 |     .slider__item,
 25 |     .slider__item--selected {
 26 |       position: absolute;
 27 |       transition: opacity 1s;
 28 |       opacity: 0;
 29 |       text-align: center;
 30 |     }
 31 | 
 32 |     .slider__item--selected {
 33 |       transition: opacity 1s;
 34 |       opacity: 1;
 35 |     }
 36 | 
 37 |     .slider__next,
 38 |     .slider__previous{
 39 |       display: inline-block;
 40 |       position: absolute;
 41 |       top: 50%;
 42 |       margin-top: -25px;
 43 |       width: 30px;
 44 |       height:50px;
 45 |       text-align: center;
 46 |       font-size: 24px;
 47 |       line-height: 50px;
 48 |       overflow: hidden;
 49 |       border: none;
 50 |       background: transparent;
 51 |       color: white;
 52 |       background: rgba(0,0,0,0.2);
 53 |       cursor: pointer;
 54 |       opacity: 0;
 55 |       transition: opacity .5s;
 56 |     }
 57 | 
 58 |     .slider__previous {
 59 |       left: 0;
 60 |     }
 61 | 
 62 |     .slider__next {
 63 |       right: 0;
 64 |     }
 65 | 
 66 |     .slider:hover .slider__previous {
 67 |       opacity: 1;
 68 |     }
 69 | 
 70 | 
 71 |     .slider:hover .slider__next {
 72 |       opacity: 1;
 73 |     }
 74 | 
 75 |     .slider__previous:after {
 76 |       content: '<';
 77 |     }
 78 | 
 79 |     .slider__next:after {
 80 |       content: '>';
 81 |     }
 82 | 
 83 |     .slider__control{
 84 |       position: relative;
 85 |       display: table;
 86 |       background-color: rgba(255, 255, 255, 0.5);
 87 |       padding: 5px;
 88 |       border-radius: 12px;
 89 |       bottom: 30px;
 90 |       margin: auto;
 91 |     }
 92 | 
 93 |     .slider__control-buttons,
 94 |     .slider__control-buttons--selected{
 95 |       display: inline-block;
 96 |       width: 15px;
 97 |       height: 15px;
 98 |       border-radius: 50%;
 99 |       margin: 0 5px;
100 |       background-color: white;
101 |       cursor: pointer;
102 |     }
103 | 
104 |     .slider__control-buttons--selected {
105 |       background-color: red;
106 |     }
107 | 
108 |   </style>
109 | </head>
110 | <body>
111 |   <div class="slider">
112 |     <ul>
113 |       <li class="slider__item--selected">
114 |         <img src="https://p5.ssl.qhimg.com/t0119c74624763dd070.png"/>
115 |       </li>
116 |       <li class="slider__item">
117 |         <img src="https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg"/>
118 |       </li>
119 |       <li class="slider__item">
120 |         <img src="https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg"/>
121 |       </li>
122 |       <li class="slider__item">
123 |         <img src="https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg"/>
124 |       </li>
125 |     </ul>
126 |     <a class="slider__next"></a>
127 |     <a class="slider__previous"></a>
128 |     <div class="slider__control">
129 |       <span class="slider__control-buttons--selected"></span>
130 |       <span class="slider__control-buttons"></span>
131 |       <span class="slider__control-buttons"></span>
132 |       <span class="slider__control-buttons"></span>
133 |     </div>
134 |   </div>
135 |   <script>
136 |     class Slider {
137 |       constructor({container, cycle = 3000} = {}) {
138 |         this.container = container;
139 |         this.items = Array.from(container.querySelectorAll('.slider__item, .slider__item--selected'));
140 |         this.cycle = cycle;
141 | 
142 |         const controller = this.container.querySelector('.slider__control');
143 |         const buttons = Array.from(controller.querySelectorAll('.slider__control-buttons, .slider__control-buttons--selected'));
144 | 
145 |         controller.addEventListener('mouseover', evt=>{
146 |           const idx = buttons.indexOf(evt.target);
147 |           if(idx >= 0){
148 |             this.slideTo(idx);
149 |             this.stop();
150 |           }
151 |         });
152 |         
153 |         controller.addEventListener('mouseout', evt=>{
154 |           this.start();
155 |         });
156 |         
157 |         this.container.addEventListener('slide', evt => {
158 |           const idx = evt.detail.index
159 |           const selected = controller.querySelector('.slider__control-buttons--selected');
160 |           if(selected) selected.className = 'slider__control-buttons';
161 |           buttons[idx].className = 'slider__control-buttons--selected';
162 |         });
163 | 
164 |         const previous = this.container.querySelector('.slider__previous');
165 |         previous.addEventListener('click', evt => {
166 |           this.stop();
167 |           this.slidePrevious();
168 |           this.start();
169 |           evt.preventDefault();
170 |         });
171 | 
172 |         const next = this.container.querySelector('.slider__next');
173 |         next.addEventListener('click', evt => {
174 |           this.stop();
175 |           this.slideNext();
176 |           this.start();
177 |           evt.preventDefault();
178 |         });
179 |       }
180 |       getSelectedItem(){
181 |         const selected = this.container.querySelector('.slider__item--selected');
182 |         return selected
183 |       }
184 |       getSelectedItemIndex(){
185 |         return this.items.indexOf(this.getSelectedItem());
186 |       }
187 |       slideTo(idx){
188 |         const selected = this.getSelectedItem();
189 |         if(selected){ 
190 |           selected.className = 'slider__item';
191 |         }
192 |         const item = this.items[idx];
193 |         if(item){
194 |           item.className = 'slider__item--selected';
195 |         }
196 | 
197 |         const detail = {index: idx};
198 |         const event = new CustomEvent('slide', {bubbles:true, detail});
199 |         this.container.dispatchEvent(event);
200 |       }
201 |       slideNext(){
202 |         const currentIdx = this.getSelectedItemIndex();
203 |         const nextIdx = (currentIdx + 1) % this.items.length;
204 |         this.slideTo(nextIdx);
205 |       }
206 |       slidePrevious(){
207 |         const currentIdx = this.getSelectedItemIndex();
208 |         const previousIdx = (this.items.length + currentIdx - 1) % this.items.length;
209 |         this.slideTo(previousIdx);  
210 |       }
211 |       start(){
212 |         this.stop();
213 |         this._timer = setInterval(()=>this.slideNext(), this.cycle);
214 |       }
215 |       stop(){
216 |         clearInterval(this._timer);
217 |       }
218 |     }
219 | 
220 |     const container = document.querySelector('.slider');
221 |     const slider = new Slider({container});
222 |     slider.start();
223 |   </script>
224 | </body>
225 | </html>


--------------------------------------------------------------------------------
/codes/首页轮播图/index3.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7 |   <title>首页轮播图</title>
  8 |   <style>
  9 |     .slider {
 10 |       position: relative;
 11 |       width: 790px;
 12 |       height: 340px;
 13 |     }
 14 | 
 15 |     .slider ul {
 16 |       list-style-type:none;
 17 |       position: relative;
 18 |       width: 100%;
 19 |       height: 100%;
 20 |       padding: 0;
 21 |       margin: 0;
 22 |     }
 23 | 
 24 |     .slider__item,
 25 |     .slider__item--selected {
 26 |       position: absolute;
 27 |       transition: opacity 1s;
 28 |       opacity: 0;
 29 |       text-align: center;
 30 |     }
 31 | 
 32 |     .slider__item--selected {
 33 |       transition: opacity 1s;
 34 |       opacity: 1;
 35 |     }
 36 | 
 37 |     .slider__next,
 38 |     .slider__previous{
 39 |       display: inline-block;
 40 |       position: absolute;
 41 |       top: 50%;
 42 |       margin-top: -25px;
 43 |       width: 30px;
 44 |       height:50px;
 45 |       text-align: center;
 46 |       font-size: 24px;
 47 |       line-height: 50px;
 48 |       overflow: hidden;
 49 |       border: none;
 50 |       background: transparent;
 51 |       color: white;
 52 |       background: rgba(0,0,0,0.2);
 53 |       cursor: pointer;
 54 |       opacity: 0;
 55 |       transition: opacity .5s;
 56 |     }
 57 | 
 58 |     .slider__previous {
 59 |       left: 0;
 60 |     }
 61 | 
 62 |     .slider__next {
 63 |       right: 0;
 64 |     }
 65 | 
 66 |     .slider:hover .slider__previous {
 67 |       opacity: 1;
 68 |     }
 69 | 
 70 | 
 71 |     .slider:hover .slider__next {
 72 |       opacity: 1;
 73 |     }
 74 | 
 75 |     .slider__previous:after {
 76 |       content: '<';
 77 |     }
 78 | 
 79 |     .slider__next:after {
 80 |       content: '>';
 81 |     }
 82 | 
 83 |     .slider__control{
 84 |       position: relative;
 85 |       display: table;
 86 |       background-color: rgba(255, 255, 255, 0.5);
 87 |       padding: 5px;
 88 |       border-radius: 12px;
 89 |       bottom: 30px;
 90 |       margin: auto;
 91 |     }
 92 | 
 93 |     .slider__control-buttons,
 94 |     .slider__control-buttons--selected{
 95 |       display: inline-block;
 96 |       width: 15px;
 97 |       height: 15px;
 98 |       border-radius: 50%;
 99 |       margin: 0 5px;
100 |       background-color: white;
101 |       cursor: pointer;
102 |     }
103 | 
104 |     .slider__control-buttons--selected {
105 |       background-color: red;
106 |     }
107 | 
108 |   </style>
109 | </head>
110 | <body>
111 |   <div class="slider">
112 |     <ul>
113 |       <li class="slider__item--selected">
114 |         <img src="https://p5.ssl.qhimg.com/t0119c74624763dd070.png"/>
115 |       </li>
116 |       <li class="slider__item">
117 |         <img src="https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg"/>
118 |       </li>
119 |       <li class="slider__item">
120 |         <img src="https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg"/>
121 |       </li>
122 |       <li class="slider__item">
123 |         <img src="https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg"/>
124 |       </li>
125 |     </ul>
126 |     <a class="slider__next"></a>
127 |     <a class="slider__previous"></a>
128 |     <div class="slider__control">
129 |       <span class="slider__control-buttons--selected"></span>
130 |       <span class="slider__control-buttons"></span>
131 |       <span class="slider__control-buttons"></span>
132 |       <span class="slider__control-buttons"></span>
133 |     </div>
134 |   </div>
135 |   <button class="lucky">试试手气</button>
136 |   <script>
137 |     class Slider {
138 |       constructor({container, cycle = 3000} = {}) {
139 |         this.container = container;
140 |         this.items = Array.from(container.querySelectorAll('.slider__item, .slider__item--selected'));
141 |         this.cycle = cycle;
142 |       }
143 |       registerPlugins(...plugins){
144 |         plugins.forEach(plugin => plugin(this));
145 |       }
146 |       getSelectedItem(){
147 |         const selected = this.container.querySelector('.slider__item--selected');
148 |         return selected
149 |       }
150 |       getSelectedItemIndex(){
151 |         return this.items.indexOf(this.getSelectedItem());
152 |       }
153 |       slideTo(idx){
154 |         const selected = this.getSelectedItem();
155 |         if(selected){ 
156 |           selected.className = 'slider__item';
157 |         }
158 |         const item = this.items[idx];
159 |         if(item){
160 |           item.className = 'slider__item--selected';
161 |         }
162 | 
163 |         const detail = {index: idx};
164 |         const event = new CustomEvent('slide', {bubbles:true, detail});
165 |         this.container.dispatchEvent(event);
166 |       }
167 |       slideNext(){
168 |         const currentIdx = this.getSelectedItemIndex();
169 |         const nextIdx = (currentIdx + 1) % this.items.length;
170 |         this.slideTo(nextIdx);
171 |       }
172 |       slidePrevious(){
173 |         const currentIdx = this.getSelectedItemIndex();
174 |         const previousIdx = (this.items.length + currentIdx - 1) % this.items.length;
175 |         this.slideTo(previousIdx);  
176 |       }
177 |       start(){
178 |         this.stop();
179 |         this._timer = setInterval(()=>this.slideNext(), this.cycle);
180 |       }
181 |       stop(){
182 |         clearInterval(this._timer);
183 |       }
184 |     }
185 | 
186 |     function pluginController(slider){
187 |       const controller = slider.container.querySelector('.slider__control');
188 |       if(controller){
189 |         const buttons = controller.querySelectorAll('.slider__control-buttons, .slider__control-buttons--selected');
190 |         controller.addEventListener('mouseover', evt=>{
191 |           const idx = Array.from(buttons).indexOf(evt.target);
192 |           if(idx >= 0){
193 |             slider.slideTo(idx);
194 |             slider.stop();
195 |           }
196 |         });
197 | 
198 |         controller.addEventListener('mouseout', evt=>{
199 |           slider.start();
200 |         });
201 | 
202 |         slider.container.addEventListener('slide', evt => {
203 |           const idx = evt.detail.index
204 |           const selected = controller.querySelector('.slider__control-buttons--selected');
205 |           if(selected) selected.className = 'slider__control-buttons';
206 |           buttons[idx].className = 'slider__control-buttons--selected';
207 |         });
208 |       }  
209 |     }
210 | 
211 |     function pluginPrevious(slider){
212 |       const previous = slider.container.querySelector('.slider__previous');
213 |       if(previous){
214 |         previous.addEventListener('click', evt => {
215 |           slider.stop();
216 |           slider.slidePrevious();
217 |           slider.start();
218 |           evt.preventDefault();
219 |         });
220 |       }  
221 |     }
222 | 
223 |     function pluginNext(slider){
224 |       const next = slider.container.querySelector('.slider__next');
225 |       if(next){
226 |         next.addEventListener('click', evt => {
227 |           slider.stop();
228 |           slider.slideNext();
229 |           slider.start();
230 |           evt.preventDefault();
231 |         });
232 |       }  
233 |     }
234 | 
235 |     function  pluginLucky(slider) {
236 |       const luckyBtn = document.querySelector('.lucky');
237 |       if(luckyBtn) {
238 |         luckyBtn.addEventListener('click', evt => {
239 |           slider.stop();
240 |           slider.slideTo(Math.floor(Math.random() * slider.items.length));
241 |           slider.start();
242 |           evt.preventDefault();
243 |         });
244 |       }
245 |     }
246 | 
247 |     const container = document.querySelector('.slider');
248 |     const slider = new Slider({container});
249 |     slider.registerPlugins(pluginController, pluginPrevious, pluginNext, pluginLucky);
250 |     slider.start();
251 |   </script>
252 | </body>
253 | </html>


--------------------------------------------------------------------------------
/codes/首页轮播图/index4.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7 |   <title>首页轮播图</title>
  8 |   <style>
  9 |     .slider {
 10 |       position: relative;
 11 |       width: 790px;
 12 |       height: 340px;
 13 |     }
 14 | 
 15 |     .slider ul {
 16 |       list-style-type:none;
 17 |       position: relative;
 18 |       width: 100%;
 19 |       height: 100%;
 20 |       padding: 0;
 21 |       margin: 0;
 22 |     }
 23 | 
 24 |     .slider__item,
 25 |     .slider__item--selected {
 26 |       position: absolute;
 27 |       transition: opacity 1s;
 28 |       opacity: 0;
 29 |       text-align: center;
 30 |     }
 31 | 
 32 |     .slider__item--selected {
 33 |       transition: opacity 1s;
 34 |       opacity: 1;
 35 |     }
 36 | 
 37 |     .slider__next,
 38 |     .slider__previous{
 39 |       display: inline-block;
 40 |       position: absolute;
 41 |       top: 50%;
 42 |       margin-top: -25px;
 43 |       width: 30px;
 44 |       height:50px;
 45 |       text-align: center;
 46 |       font-size: 24px;
 47 |       line-height: 50px;
 48 |       overflow: hidden;
 49 |       border: none;
 50 |       background: transparent;
 51 |       color: white;
 52 |       background: rgba(0,0,0,0.2);
 53 |       cursor: pointer;
 54 |       opacity: 0;
 55 |       transition: opacity .5s;
 56 |     }
 57 | 
 58 |     .slider__previous {
 59 |       left: 0;
 60 |     }
 61 | 
 62 |     .slider__next {
 63 |       right: 0;
 64 |     }
 65 | 
 66 |     .slider:hover .slider__previous {
 67 |       opacity: 1;
 68 |     }
 69 | 
 70 | 
 71 |     .slider:hover .slider__next {
 72 |       opacity: 1;
 73 |     }
 74 | 
 75 |     .slider__previous:after {
 76 |       content: '<';
 77 |     }
 78 | 
 79 |     .slider__next:after {
 80 |       content: '>';
 81 |     }
 82 | 
 83 |     .slider__control{
 84 |       position: relative;
 85 |       display: table;
 86 |       background-color: rgba(255, 255, 255, 0.5);
 87 |       padding: 5px;
 88 |       border-radius: 12px;
 89 |       bottom: 30px;
 90 |       margin: auto;
 91 |     }
 92 | 
 93 |     .slider__control-buttons,
 94 |     .slider__control-buttons--selected{
 95 |       display: inline-block;
 96 |       width: 15px;
 97 |       height: 15px;
 98 |       border-radius: 50%;
 99 |       margin: 0 5px;
100 |       background-color: white;
101 |       cursor: pointer;
102 |     }
103 | 
104 |     .slider__control-buttons--selected {
105 |       background-color: red;
106 |     }
107 | 
108 |   </style>
109 | </head>
110 | <body>
111 |   <div class="slider"></div>
112 |   <script>
113 |     class Slider {
114 |       constructor({container, images = [], cycle = 3000} = {}){
115 |         this.container = container;
116 |         this.data = images;
117 |         this.container.innerHTML = this.render(this.data);
118 |         this.items = Array.from(this.container.querySelectorAll('.slider__item, .slider__item--selected'));
119 |         this.cycle = cycle;
120 |         this.slideTo(0);
121 |       }
122 |       render(images){
123 |         const content = images.map(image => `
124 |           <li class="slider__item">
125 |             <img src="${image}"/>
126 |           </li>    
127 |         `.trim());
128 |         
129 |         return `<ul>${content.join('')}</ul>`;
130 |       }
131 |       registerPlugins(...plugins){
132 |         plugins.forEach(plugin => {
133 |           const pluginContainer = document.createElement('div');
134 |           pluginContainer.className = 'slider__plugin';
135 |           pluginContainer.innerHTML = plugin.render(this.data);
136 |           this.container.appendChild(pluginContainer);
137 |           
138 |           plugin.initialize(this);
139 |         });
140 |       }
141 |       getSelectedItem(){
142 |         const selected = this.container.querySelector('.slider__item--selected');
143 |         return selected
144 |       }
145 |       getSelectedItemIndex(){
146 |         return this.items.indexOf(this.getSelectedItem());
147 |       }
148 |       slideTo(idx){
149 |         const selected = this.getSelectedItem();
150 |         if(selected){ 
151 |           selected.className = 'slider__item';
152 |         }
153 |         const item = this.items[idx];
154 |         if(item){
155 |           item.className = 'slider__item--selected';
156 |         }
157 | 
158 |         const detail = {index: idx};
159 |         const event = new CustomEvent('slide', {bubbles:true, detail});
160 |         this.container.dispatchEvent(event);
161 |       }
162 |       slideNext(){
163 |         const currentIdx = this.getSelectedItemIndex();
164 |         const nextIdx = (currentIdx + 1) % this.items.length;
165 |         this.slideTo(nextIdx);
166 |       }
167 |       slidePrevious(){
168 |         const currentIdx = this.getSelectedItemIndex();
169 |         const previousIdx = (this.items.length + currentIdx - 1) % this.items.length;
170 |         this.slideTo(previousIdx);  
171 |       }
172 |       start(){
173 |         this.stop();
174 |         this._timer = setInterval(()=>this.slideNext(), this.cycle);
175 |       }
176 |       stop(){
177 |         clearInterval(this._timer);
178 |       }
179 |     }
180 | 
181 |     const pluginController = {
182 |       render(images){
183 |         return `
184 |           <div class="slider__control">
185 |             ${images.map((image, i) => `
186 |                 <span class="slider__control-buttons${i===0?'--selected':''}"></span>
187 |             `).join('')}
188 |           </div>    
189 |         `.trim();
190 |       },
191 |       initialize(slider){
192 |         const controller = slider.container.querySelector('.slider__control');
193 |         
194 |         if(controller){
195 |           const buttons = controller.querySelectorAll('.slider__control-buttons, .slider__control-buttons--selected');
196 |           controller.addEventListener('mouseover', evt => {
197 |             const idx = Array.from(buttons).indexOf(evt.target);
198 |             if(idx >= 0){
199 |               slider.slideTo(idx);
200 |               slider.stop();
201 |             }
202 |           });
203 | 
204 |           controller.addEventListener('mouseout', evt => {
205 |             slider.start();
206 |           });
207 | 
208 |           slider.container.addEventListener('slide', evt => {
209 |             const idx = evt.detail.index
210 |             const selected = controller.querySelector('.slider__control-buttons--selected');
211 |             if(selected) selected.className = 'slider__control-buttons';
212 |             buttons[idx].className = 'slider__control-buttons--selected';
213 |           });
214 |         }    
215 |       }
216 |     };
217 | 
218 |     const pluginPrevious = {
219 |       render(){
220 |         return `<a class="slider__previous"></a>`;
221 |       },
222 |       initialize(slider){
223 |         const previous = slider.container.querySelector('.slider__previous');
224 |         if(previous){
225 |           previous.addEventListener('click', evt => {
226 |             slider.stop();
227 |             slider.slidePrevious();
228 |             slider.start();
229 |             evt.preventDefault();
230 |           });
231 |         }  
232 |       }
233 |     };
234 | 
235 |     const pluginNext = {
236 |       render(){
237 |         return `<a class="slider__next"></a>`;
238 |       },
239 |       initialize(slider){
240 |         const previous = slider.container.querySelector('.slider__next');
241 |         if(previous){
242 |           previous.addEventListener('click', evt => {
243 |             slider.stop();
244 |             slider.slideNext();
245 |             slider.start();
246 |             evt.preventDefault();
247 |           });
248 |         }  
249 |       }
250 |     };
251 | 
252 |     const images = ['https://p5.ssl.qhimg.com/t0119c74624763dd070.png',
253 |      'https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg',
254 |      'https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg',
255 |      'https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg'];
256 | 
257 |     const container = document.querySelector('.slider');
258 |     const slider = new Slider({container, images});
259 |     slider.registerPlugins(pluginController, pluginPrevious, pluginNext);
260 |     slider.start();
261 |   </script>
262 | </body>
263 | </html>


--------------------------------------------------------------------------------
/codes/滚动文字/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7 |   <title>Document</title>
  8 |   <style>
  9 |     body{
 10 |       display: flex;
 11 |     }
 12 | 
 13 |     #editor {
 14 |       width: 45%;
 15 |       height: 350px;
 16 |       margin-right: 10px;
 17 |     }
 18 | 
 19 |     #preview {
 20 |       width: 45%;
 21 |       height: 350px;
 22 |       overflow: scroll;
 23 |     }
 24 | 
 25 |     #hintbar {
 26 |       position: absolute;
 27 |       right: 10px;
 28 |     }  
 29 |   </style>
 30 | </head>
 31 | <body>
 32 |   <textarea id="editor" oninput="this.editor.update()"
 33 |             rows="6" cols="60">
 34 | 在 2001 到 2003 年间，Judith Miller 在纽约时报上发表了一批文章，宣称伊拉克有能力和野心生产大规模杀伤性武器。这是假新闻。
 35 | 
 36 | 回顾当年，我们无法确定 Miller 写的这些故事在美国 2013 年做出发动伊拉克战争的决定中扮演了怎样的角色；与 Miller 相同来源的消息与小布什政府的对外政策团队有很大关联。但是，纽约时报仍然起到了为这一政策背书的作用，尤其是对民主党人，本来他们应该会更坚定地反对小布什的政策。毕竟，纽约时报可不是一些无人问津的地方小报，它是整个美国影响力最大的报刊，它一般被认为具有左倾倾向。Miller 的故事某种程度上吻合报纸的政治倾向。
 37 | 
 38 | 我们可以把 Miller 的错误和最近关于 Facebook 的假新闻问题联系起来看；Facebook 用自己的故事告诫我们“假新闻是坏的”。然而，我持有不同的观点：**新闻假不假没那么重要，由谁来决定什么是新闻才是第一重要的**。
 39 | 
 40 | <!--more-->
 41 | 
 42 | #### Facebook 的媒体商业化
 43 | 
 44 | 在[聚集理论](https://stratechery.com/2015/aggregation-theory/)中，我描述了基于分配的经济权利的消亡导致强势中介的崛起，它们掌控客户体验并将它们的供应商商品化。[在 Facebook 的例子里](https://stratechery.com/2016/the-fang-playbook/)，社交网络之所以兴起，是因为之前存在的线下社会网络在往线上网络转变。考虑到人类本质是社会化的，用户开始将时间花在 Facebook 上阅读、发表观点和获取新闻。
 45 | 
 46 | 随后，Facebook 吸引了媒体、商业公司以及其他希望获得用户注意的公司进驻。这对于 Facebook 来说很棒：Facebook 提供越多的好内容给用户，用户就花越多的时间上 Facebook，Facebook 将广告展现给用户的机会就越多。而反过来，用户花越多时间上 Facebook，他们阅读其他资讯的时间就越少，这进一步加速了媒体（以及商业公司和其他公司）将内容搬到 Facebook 上，产生 Facebook 受欢迎的良性循环：通过获得用户，Facebook 吸引了内容供应商，内容供应商间接帮助 Facebook 进一步深化运营用户，增加的用户也带给内容供应商更多的收益。
 47 | 
 48 | 这个过程让 Facebook 的内容供应商，即媒体公司，简化了它们的角色，成为纯粹的供货商。Facebook 根据内容的用户参与度计算出重要程度，让每个角色都各取所需：媒体公司获得了广告，Facebook 获得了分享，而用户从庞大的信息数据库中得到他们想看的内容。当然不是所有内容都能吸引所有用户；这就是算法要做的事情：给用户展现他们感兴趣的内容，不论是婴儿图片、征婚启示、喵星人图片、小测验还是政治新闻。根据 Facebook 的观点，或者坦白说，根据 Facebook 用户的观点，这些内容没什么区别。当然其中也包含有假新闻，顺便提一下：在 Facebook 看来，[来自马其顿的新闻](https://www.buzzfeed.com/craigsilverman/how-macedonia-became-a-global-hub-for-pro-trump-misinfo)和其它内容一样，并没什么特别的，对于推荐算法来说，它们都是内容，仅根据参与程度影响它的推荐量。
 49 | 
 50 | #### 媒体和特朗普
 51 | 
 52 | 现在在媒体上有许多讨论，关于特朗普的当选。观点是如果媒体没有给特朗普[价值数十亿美元的免费报道](http://www.nytimes.com/2016/03/16/upshot/measuring-donald-trumps-mammoth-advantage-in-free-media.html) —— 基本上是媒体报道（而不是付费报道，那种是广告）—— 特朗普永远也当选不了，因此媒体要为特朗普的当选负责。这一看似合理的自我反思，让行业拒绝承认一个更令人不安的现实：如果他们不想要如此的话，媒体不可能做成这件该死的事。
 53 | 
 54 | **媒体广泛报道特朗普的理由非常简单：这是用户想看到的内容。在媒体商品化的今天，如果像以前那样有编辑特权来决定不报道潜在用户想要看到的内容，就得面对被用户打脸的现实，点击量下降是媒体所不愿承受的。**
 55 | 
 56 | 事实上，假新闻大行其道也是因为同样的原因：因为用户喜闻乐见。这些网站获得流量，因为用户点击并分享它们的文章，因为用户想确认他们心中已经相信是真实的内容（尽管实际上是假的）。确认偏差（即人们更容易相信他们愿意相信的内容 —— 译者注）是一种毒品 —— 正如 Techcrunch 的记者 Kim-Mai Cutler [在 twitter 上如此贴切地说](https://twitter.com/kimmaicutler/status/796560990854905857)，这是一种商业模式的原罪。
 57 | 
 58 | #### 为什么 Facebook 应该删除假新闻
 59 | 
 60 | 所以现在我们回到关于如何处理假新闻的问题。也许[纽约时报 的 Zeynep Tufekci](http://www.nytimes.com/2016/11/15/opinion/mark-zuckerberg-is-in-denial.html) 的观点最能代表一般大众的情绪：Facebook 应当消除假新闻以及取消给人们推荐他们心中已经认同的观点的新闻的倾向。Tufekci 写道：
 61 | 
 62 | > Mark Zuckerberg, Facebook 的老板，认为Facebook 的假新闻影响选举是个疯狂的想法，因为那些是非常少量的内容，对选举几乎没有影响。他的这种不过脑的坚持，认为他的公司对人们做出决定没有影响的行为，实际上已经对美国和全世界的民主带来了真正的损害……
 63 | 
 64 | > Facebook 影响政治话语的问题的问题不仅限于传播假新闻。它还有回音室效应。它的推荐算法选择哪些资讯更新出现在用户阅读列表的前面以及哪些被顶到后面去。人类已经倾向于聚集在志同道合的人之中，寻找证实他们偏见的消息。Facebook 的研究显示这家公司的算法通过优先更新用户更愿意看到的内容而鼓励了这一行为。
 65 | 
 66 | Tufekci 给 Facebook 提供了一些建议，包括与外部研究人员分享数据从而更好地理解错误消息如何传播，以及应该如何对付过虑气泡（即智能推荐算法根据你的兴趣推荐内容，像一个泡泡将你包裹起来，把你和其他未推荐内容隔离起来——译者注），以更积极地行动，消除假新闻，就像处理作弊和其他垃圾内容那样，还包括重新启用人类编辑以及重新调整算法来有利于新闻平衡而不是一味通过参与度来推荐。
 67 | 
 68 | #### 为什么 Facebook 不应该这么做
 69 | 
 70 | 
 71 | 从表面上看，这一切都很合理，但是实际上，Tufekci 的建议有点自以为是。
 72 | 
 73 | 首先，Facebook 没有动机去做这些事；当时 Facebook [否决](http://www.slate.com/blogs/future_tense/2016/11/14/did_facebook_really_tolerate_fake_news_to_appease_conservatives.html)了这些提议，[根据 Gizmodo 的报道](http://gizmodo.com/facebooks-fight-against-fake-news-was-undercut-by-fear-1788808204)，Facebook 搁置了对新闻推荐算法的改变，这一改变本可能消除假消息，Facebook 的解释是如果那么做，会对右翼站点造成不公平的影响，事实上 Facebook 非常重视在各方观点中保持中立；其他任何行为都会导致用户流失，而这对社交网络来说是不能承受之重。
 74 | 
 75 | 此外，除了聚焦于参与度之外，任何偏离这一准则的行为都一定会减少用户在 Facebook 上所花费的时间，而在这里 Tufekci 错误地认为这是可接受的，因为他完全没有考虑“竞争对手”。事实上，Facebook 在很长一段时间内处于被挑战的地位上：Snapchat 正在从 Facebook 最有价值的人群中获取关注，尽管新闻资讯的广告变现能力已经接近饱和，Snapchat 依然在最具有价值的科技消费领域威胁着 Facebook：那是以电视为中心的品牌广告领域。
 76 | 
 77 | 而且，还有更根本的问题：你如何决定哪些新闻是假新闻？准则是什么？而也许最关键的是，谁来决定？认为一些假新闻存在于其他海量内容中，从而得对 Facebook 内容进行编辑并不仅是一个简单的后勤噩梦，而且，至少当涉及到潜在的不良后果时，这个问题远没有它表面上看来那么简单。
 78 | 
 79 | 实际情况比过滤气泡问题要复杂得多：从指责 Facebook 通过参与度驱动的二阶效应来影响它的用户的信息流，到坚持由于政治原因让平台积极干预用户看到的内容，这两者之间存在巨大的鸿沟。这不是关于建设更好社会的目标和两党争斗的对立，毕竟，支持者认为他们的目标也是建设更好的社会。事实上，如果整个值得关注的点是，Facebook 在其用户的新闻消费中扮演的重要角色，那么更大的恐惧应该是如果坚持人工干预的话，如何防止有人积极地滥用干预者这一角色为自己的利益服务。
 80 | 
 81 | 我明白为什么自上而下的解决方案是诱人的：假新闻和过滤气泡是摆在我们眼前的问题，如果让 Facebook 修复它们难道不是更好吗？问题是这得假设动用自上而下的权力来做这一切的某人会正好与我的观点相同。那么，如果他们不呢？只要看一下我们现在的政治处境：那些担心特朗普的人，也必须承认的一个事实是，行政部门的权力在过去几十年里已经急剧扩大；我们将巨大的责任和权力交到一个人手中，而忘记了**权力和责任交出容易，收回难**。
 82 | 
 83 | 因此，如果 Facebook 真的开始主动干预新闻内容，我会更加担忧；正如我[上周指出的](https://stratechery.com/2016/why-twitter-must-be-saved/)，我越来越担心 Zuckerberg 的乌托邦式的观点，要知道，从影响世界到控制世界只有一步之遥。正如政府监管有坏处：当谈到暴政的时候，我们最重要的自由是言论自由，而把一个官员 —— 向总统汇报的人 —— 置于负责监管人们所见内容的位置上，是与这种自由精神背道而驰的。
 84 | 
 85 | 要牢记的关键一点是假新闻的实际影响是取决于谁传播它：当然，那些马其顿的新闻故事不好，但是它们起作用了，尽管不怎么好，有些人却愿意相信。对比 Miller 在纽约时报的故事：由于纽约时报具有公信力，许多人因此改变了他们的观点，导致了一场到今天影响还没能完全消除的灾难。考虑到这一点，让 Facebook 人工干预新闻结果的潜在风险几乎无法想象。
 86 | 
 87 | #### 自由和懒惰
 88 | 
 89 | 也许有一些折衷方案：对于有些明显是假的新闻来源，Facebook 可以简单地将它们拉黑，更理想的情况，Facebook 可以透明地给出它们做了什么，以及为什么被拉黑的理由。而更进一步，Facebook 在不损害其竞争地位的情况下，可以将部分数据共享给外部研究者，它应该这样做。Facebook 也应该提供更多的配置选项给用户来控制他们的信息流，如果希望避免过滤起泡，可以通过修改配置来做到。
 90 | 
 91 | 其实，你和我都知道，很少有用户会困扰。而且，表面上看，让许多 Facebook 的批评者最困扰的是，他们觉得如果用户不寻求“正确的”新闻来源，那么，应该有人让他们看到。这听起来很伟大 —— 而且毫无问题，是赢得选举的一个更方便的解决方案，而不必实际做出必要的改变 —— 直到你想起来，你刚刚给了委托人如此大的权力，而他可能不同意你的意见，而人为控制人们所看到的内容是极权主义的标志。
 92 | 
 93 | 让我总结一下：我很清楚 Facebook 的影响有一定的问题；我特别担心的是，我们为了偷懒，用部落的思路来解决这一问题，影响选举的部分原因是由于如上所述的过滤气泡效应所致（这是为什么 [Twitter 必须存在](https://stratechery.com/2016/why-twitter-must-be-saved/)的原因之一）。但是解决办法不是在互联网添加人为把关；要解决这一问题必须要通过互联网的力量，而事实上，我们每一个人，如果我们想要，是可以获得比以前任何时候更多的信息和资源真相的。如果我们想要，我们也可以有更多的方法来接触、理解和说服那些与我们意见相左的人。是的，这比要求 Zuckerberg 改变人们看到的内容有更多的工作要做，但是**因为懒惰而放弃自由从未有过好结果**。
 94 |                      
 95 |   </textarea>
 96 |   <div id="preview"> </div>
 97 |   <div id="hintbar"> 0% </div>
 98 |   <script src="https://s3.ssl.qhres.com/!67fc024a/markdown.min.js"></script>
 99 |   <script>
100 |     function Editor(input, preview) {
101 |       this.update = function () {
102 |         preview.innerHTML = markdown.toHTML(input.value);
103 |       };
104 |       input.editor = this;
105 |       this.update();
106 |     }
107 |     new Editor(editor, preview);
108 |     
109 |     //三部分 UI 耦合在一起的 update 方法
110 |     function update(src, dest, hint) {
111 |       var scrollRange = src.scrollHeight - src.clientHeight,
112 |           p = src.scrollTop / scrollRange;  
113 |       
114 |       dest.scrollTop = p * (dest.scrollHeight - dest.clientHeight);
115 |       hint.innerHTML = Math.round(100 * p) + '%';
116 |     }
117 |     
118 |     
119 |     update(editor, preview, hintbar);
120 |     
121 |     // editor.addEventListener('scroll', function(evt) {
122 |     //   update(editor, preview, hintbar);
123 |     // });
124 | 
125 |     // preview.addEventListener('scroll', function(evt) {  
126 |     //   update(preview, editor, hintbar);
127 |     // });
128 | 
129 |     function debounce(fn, ms = 100) {
130 |       let debounceTimer = null;
131 |       return function(...args) {
132 |         if(debounceTimer) clearTimeout(debounceTimer);
133 | 
134 |         debounceTimer = setTimeout(() => {
135 |           fn.apply(this, args);
136 |         }, ms);
137 |       }
138 |     }
139 |     
140 |     let scrollingTarget = null;
141 |     editor.addEventListener('scroll', function(evt){
142 |       if(!scrollingTarget) scrollingTarget = editor;
143 |       if(scrollingTarget === editor) update(editor, preview, hintbar);
144 |     });
145 | 
146 |     editor.addEventListener('scroll', debounce(function(evt){
147 |       scrollingTarget = null;
148 |     }));
149 | 
150 |     preview.addEventListener('scroll', function(evt){  
151 |       if(!scrollingTarget) scrollingTarget = preview;
152 |       if(scrollingTarget === preview) update(preview, editor, hintbar);
153 |     });
154 |   </script>
155 | </body>
156 | </html>


--------------------------------------------------------------------------------
/codes/滚动文字/index2.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7 |   <title>Document</title>
  8 |   <style>
  9 |     body{
 10 |       display: flex;
 11 |     }
 12 | 
 13 |     #editor {
 14 |       width: 45%;
 15 |       height: 350px;
 16 |       margin-right: 10px;
 17 |     }
 18 | 
 19 |     #preview {
 20 |       width: 45%;
 21 |       height: 350px;
 22 |       overflow: scroll;
 23 |     }
 24 | 
 25 |     #hintbar {
 26 |       position: absolute;
 27 |       right: 10px;
 28 |     }  
 29 |   </style>
 30 | </head>
 31 | <body>
 32 |   <textarea id="editor" oninput="this.editor.update()"
 33 |             rows="6" cols="60">
 34 | 在 2001 到 2003 年间，Judith Miller 在纽约时报上发表了一批文章，宣称伊拉克有能力和野心生产大规模杀伤性武器。这是假新闻。
 35 | 
 36 | 回顾当年，我们无法确定 Miller 写的这些故事在美国 2013 年做出发动伊拉克战争的决定中扮演了怎样的角色；与 Miller 相同来源的消息与小布什政府的对外政策团队有很大关联。但是，纽约时报仍然起到了为这一政策背书的作用，尤其是对民主党人，本来他们应该会更坚定地反对小布什的政策。毕竟，纽约时报可不是一些无人问津的地方小报，它是整个美国影响力最大的报刊，它一般被认为具有左倾倾向。Miller 的故事某种程度上吻合报纸的政治倾向。
 37 | 
 38 | 我们可以把 Miller 的错误和最近关于 Facebook 的假新闻问题联系起来看；Facebook 用自己的故事告诫我们“假新闻是坏的”。然而，我持有不同的观点：**新闻假不假没那么重要，由谁来决定什么是新闻才是第一重要的**。
 39 | 
 40 | <!--more-->
 41 | 
 42 | #### Facebook 的媒体商业化
 43 | 
 44 | 在[聚集理论](https://stratechery.com/2015/aggregation-theory/)中，我描述了基于分配的经济权利的消亡导致强势中介的崛起，它们掌控客户体验并将它们的供应商商品化。[在 Facebook 的例子里](https://stratechery.com/2016/the-fang-playbook/)，社交网络之所以兴起，是因为之前存在的线下社会网络在往线上网络转变。考虑到人类本质是社会化的，用户开始将时间花在 Facebook 上阅读、发表观点和获取新闻。
 45 | 
 46 | 随后，Facebook 吸引了媒体、商业公司以及其他希望获得用户注意的公司进驻。这对于 Facebook 来说很棒：Facebook 提供越多的好内容给用户，用户就花越多的时间上 Facebook，Facebook 将广告展现给用户的机会就越多。而反过来，用户花越多时间上 Facebook，他们阅读其他资讯的时间就越少，这进一步加速了媒体（以及商业公司和其他公司）将内容搬到 Facebook 上，产生 Facebook 受欢迎的良性循环：通过获得用户，Facebook 吸引了内容供应商，内容供应商间接帮助 Facebook 进一步深化运营用户，增加的用户也带给内容供应商更多的收益。
 47 | 
 48 | 这个过程让 Facebook 的内容供应商，即媒体公司，简化了它们的角色，成为纯粹的供货商。Facebook 根据内容的用户参与度计算出重要程度，让每个角色都各取所需：媒体公司获得了广告，Facebook 获得了分享，而用户从庞大的信息数据库中得到他们想看的内容。当然不是所有内容都能吸引所有用户；这就是算法要做的事情：给用户展现他们感兴趣的内容，不论是婴儿图片、征婚启示、喵星人图片、小测验还是政治新闻。根据 Facebook 的观点，或者坦白说，根据 Facebook 用户的观点，这些内容没什么区别。当然其中也包含有假新闻，顺便提一下：在 Facebook 看来，[来自马其顿的新闻](https://www.buzzfeed.com/craigsilverman/how-macedonia-became-a-global-hub-for-pro-trump-misinfo)和其它内容一样，并没什么特别的，对于推荐算法来说，它们都是内容，仅根据参与程度影响它的推荐量。
 49 | 
 50 | #### 媒体和特朗普
 51 | 
 52 | 现在在媒体上有许多讨论，关于特朗普的当选。观点是如果媒体没有给特朗普[价值数十亿美元的免费报道](http://www.nytimes.com/2016/03/16/upshot/measuring-donald-trumps-mammoth-advantage-in-free-media.html) —— 基本上是媒体报道（而不是付费报道，那种是广告）—— 特朗普永远也当选不了，因此媒体要为特朗普的当选负责。这一看似合理的自我反思，让行业拒绝承认一个更令人不安的现实：如果他们不想要如此的话，媒体不可能做成这件该死的事。
 53 | 
 54 | **媒体广泛报道特朗普的理由非常简单：这是用户想看到的内容。在媒体商品化的今天，如果像以前那样有编辑特权来决定不报道潜在用户想要看到的内容，就得面对被用户打脸的现实，点击量下降是媒体所不愿承受的。**
 55 | 
 56 | 事实上，假新闻大行其道也是因为同样的原因：因为用户喜闻乐见。这些网站获得流量，因为用户点击并分享它们的文章，因为用户想确认他们心中已经相信是真实的内容（尽管实际上是假的）。确认偏差（即人们更容易相信他们愿意相信的内容 —— 译者注）是一种毒品 —— 正如 Techcrunch 的记者 Kim-Mai Cutler [在 twitter 上如此贴切地说](https://twitter.com/kimmaicutler/status/796560990854905857)，这是一种商业模式的原罪。
 57 | 
 58 | #### 为什么 Facebook 应该删除假新闻
 59 | 
 60 | 所以现在我们回到关于如何处理假新闻的问题。也许[纽约时报 的 Zeynep Tufekci](http://www.nytimes.com/2016/11/15/opinion/mark-zuckerberg-is-in-denial.html) 的观点最能代表一般大众的情绪：Facebook 应当消除假新闻以及取消给人们推荐他们心中已经认同的观点的新闻的倾向。Tufekci 写道：
 61 | 
 62 | > Mark Zuckerberg, Facebook 的老板，认为Facebook 的假新闻影响选举是个疯狂的想法，因为那些是非常少量的内容，对选举几乎没有影响。他的这种不过脑的坚持，认为他的公司对人们做出决定没有影响的行为，实际上已经对美国和全世界的民主带来了真正的损害……
 63 | 
 64 | > Facebook 影响政治话语的问题的问题不仅限于传播假新闻。它还有回音室效应。它的推荐算法选择哪些资讯更新出现在用户阅读列表的前面以及哪些被顶到后面去。人类已经倾向于聚集在志同道合的人之中，寻找证实他们偏见的消息。Facebook 的研究显示这家公司的算法通过优先更新用户更愿意看到的内容而鼓励了这一行为。
 65 | 
 66 | Tufekci 给 Facebook 提供了一些建议，包括与外部研究人员分享数据从而更好地理解错误消息如何传播，以及应该如何对付过虑气泡（即智能推荐算法根据你的兴趣推荐内容，像一个泡泡将你包裹起来，把你和其他未推荐内容隔离起来——译者注），以更积极地行动，消除假新闻，就像处理作弊和其他垃圾内容那样，还包括重新启用人类编辑以及重新调整算法来有利于新闻平衡而不是一味通过参与度来推荐。
 67 | 
 68 | #### 为什么 Facebook 不应该这么做
 69 | 
 70 | 
 71 | 从表面上看，这一切都很合理，但是实际上，Tufekci 的建议有点自以为是。
 72 | 
 73 | 首先，Facebook 没有动机去做这些事；当时 Facebook [否决](http://www.slate.com/blogs/future_tense/2016/11/14/did_facebook_really_tolerate_fake_news_to_appease_conservatives.html)了这些提议，[根据 Gizmodo 的报道](http://gizmodo.com/facebooks-fight-against-fake-news-was-undercut-by-fear-1788808204)，Facebook 搁置了对新闻推荐算法的改变，这一改变本可能消除假消息，Facebook 的解释是如果那么做，会对右翼站点造成不公平的影响，事实上 Facebook 非常重视在各方观点中保持中立；其他任何行为都会导致用户流失，而这对社交网络来说是不能承受之重。
 74 | 
 75 | 此外，除了聚焦于参与度之外，任何偏离这一准则的行为都一定会减少用户在 Facebook 上所花费的时间，而在这里 Tufekci 错误地认为这是可接受的，因为他完全没有考虑“竞争对手”。事实上，Facebook 在很长一段时间内处于被挑战的地位上：Snapchat 正在从 Facebook 最有价值的人群中获取关注，尽管新闻资讯的广告变现能力已经接近饱和，Snapchat 依然在最具有价值的科技消费领域威胁着 Facebook：那是以电视为中心的品牌广告领域。
 76 | 
 77 | 而且，还有更根本的问题：你如何决定哪些新闻是假新闻？准则是什么？而也许最关键的是，谁来决定？认为一些假新闻存在于其他海量内容中，从而得对 Facebook 内容进行编辑并不仅是一个简单的后勤噩梦，而且，至少当涉及到潜在的不良后果时，这个问题远没有它表面上看来那么简单。
 78 | 
 79 | 实际情况比过滤气泡问题要复杂得多：从指责 Facebook 通过参与度驱动的二阶效应来影响它的用户的信息流，到坚持由于政治原因让平台积极干预用户看到的内容，这两者之间存在巨大的鸿沟。这不是关于建设更好社会的目标和两党争斗的对立，毕竟，支持者认为他们的目标也是建设更好的社会。事实上，如果整个值得关注的点是，Facebook 在其用户的新闻消费中扮演的重要角色，那么更大的恐惧应该是如果坚持人工干预的话，如何防止有人积极地滥用干预者这一角色为自己的利益服务。
 80 | 
 81 | 我明白为什么自上而下的解决方案是诱人的：假新闻和过滤气泡是摆在我们眼前的问题，如果让 Facebook 修复它们难道不是更好吗？问题是这得假设动用自上而下的权力来做这一切的某人会正好与我的观点相同。那么，如果他们不呢？只要看一下我们现在的政治处境：那些担心特朗普的人，也必须承认的一个事实是，行政部门的权力在过去几十年里已经急剧扩大；我们将巨大的责任和权力交到一个人手中，而忘记了**权力和责任交出容易，收回难**。
 82 | 
 83 | 因此，如果 Facebook 真的开始主动干预新闻内容，我会更加担忧；正如我[上周指出的](https://stratechery.com/2016/why-twitter-must-be-saved/)，我越来越担心 Zuckerberg 的乌托邦式的观点，要知道，从影响世界到控制世界只有一步之遥。正如政府监管有坏处：当谈到暴政的时候，我们最重要的自由是言论自由，而把一个官员 —— 向总统汇报的人 —— 置于负责监管人们所见内容的位置上，是与这种自由精神背道而驰的。
 84 | 
 85 | 要牢记的关键一点是假新闻的实际影响是取决于谁传播它：当然，那些马其顿的新闻故事不好，但是它们起作用了，尽管不怎么好，有些人却愿意相信。对比 Miller 在纽约时报的故事：由于纽约时报具有公信力，许多人因此改变了他们的观点，导致了一场到今天影响还没能完全消除的灾难。考虑到这一点，让 Facebook 人工干预新闻结果的潜在风险几乎无法想象。
 86 | 
 87 | #### 自由和懒惰
 88 | 
 89 | 也许有一些折衷方案：对于有些明显是假的新闻来源，Facebook 可以简单地将它们拉黑，更理想的情况，Facebook 可以透明地给出它们做了什么，以及为什么被拉黑的理由。而更进一步，Facebook 在不损害其竞争地位的情况下，可以将部分数据共享给外部研究者，它应该这样做。Facebook 也应该提供更多的配置选项给用户来控制他们的信息流，如果希望避免过滤起泡，可以通过修改配置来做到。
 90 | 
 91 | 其实，你和我都知道，很少有用户会困扰。而且，表面上看，让许多 Facebook 的批评者最困扰的是，他们觉得如果用户不寻求“正确的”新闻来源，那么，应该有人让他们看到。这听起来很伟大 —— 而且毫无问题，是赢得选举的一个更方便的解决方案，而不必实际做出必要的改变 —— 直到你想起来，你刚刚给了委托人如此大的权力，而他可能不同意你的意见，而人为控制人们所看到的内容是极权主义的标志。
 92 | 
 93 | 让我总结一下：我很清楚 Facebook 的影响有一定的问题；我特别担心的是，我们为了偷懒，用部落的思路来解决这一问题，影响选举的部分原因是由于如上所述的过滤气泡效应所致（这是为什么 [Twitter 必须存在](https://stratechery.com/2016/why-twitter-must-be-saved/)的原因之一）。但是解决办法不是在互联网添加人为把关；要解决这一问题必须要通过互联网的力量，而事实上，我们每一个人，如果我们想要，是可以获得比以前任何时候更多的信息和资源真相的。如果我们想要，我们也可以有更多的方法来接触、理解和说服那些与我们意见相左的人。是的，这比要求 Zuckerberg 改变人们看到的内容有更多的工作要做，但是**因为懒惰而放弃自由从未有过好结果**。
 94 |                      
 95 |   </textarea>
 96 |   <div id="preview"> </div>
 97 |   <div id="hintbar"> 0% </div>
 98 |   <script src="https://s3.ssl.qhres.com/!67fc024a/markdown.min.js"></script>
 99 |   <script>
100 |     function Editor(input, preview) {
101 |       this.update = function () {
102 |         preview.innerHTML = markdown.toHTML(input.value);
103 |       };
104 |       input.editor = this;
105 |       this.update();
106 |     }
107 |     new Editor(editor, preview);
108 |     
109 |     class PubSub {
110 |       constructor() {
111 |         this.subscribers = {};
112 |       }
113 |       pub(type, sender, data){
114 |         var subscribers = this.subscribers[type];
115 |         subscribers.forEach(function(subscriber){
116 |           subscriber({type, sender, data});
117 |         });
118 |       }
119 |       sub(type, receiver, fn){
120 |         this.subscribers[type] = this.subscribers[type] || [];
121 |         this.subscribers[type].push(fn.bind(receiver));
122 |       }
123 |     }
124 | 
125 |     function scrollTo({data:p}){
126 |       this.scrollTop = p * (this.scrollHeight - this.clientHeight);
127 |     }
128 | 
129 |     var mediator = new PubSub();
130 |     mediator.sub('scroll', preview, scrollTo);
131 |     mediator.sub('scroll', editor, scrollTo);
132 |     mediator.sub('scroll', hintbar, function({data:p}){
133 |       this.innerHTML = Math.round(p * 100) + '%';
134 |     });
135 | 
136 |     function debounce(fn, ms = 100) {
137 |       let debounceTimer = null;
138 |       return function(...args) {
139 |         if(debounceTimer) clearTimeout(debounceTimer);
140 | 
141 |         debounceTimer = setTimeout(() => {
142 |           fn.apply(this, args);
143 |         }, ms);
144 |       }
145 |     }
146 | 
147 |     let scrollingTarget = null;
148 |     editor.addEventListener('scroll', debounce(function(evt){
149 |       scrollingTarget = null;
150 |     }));
151 | 
152 |     function updateScroll(evt) {
153 |       var target = evt.target;
154 |       if(!scrollingTarget) scrollingTarget = target;
155 |       if(scrollingTarget === target) {
156 |         var scrollRange = target.scrollHeight - target.clientHeight,
157 |           p = target.scrollTop / scrollRange;
158 |         mediator.pub('scroll', target, p);
159 |       }
160 |     }
161 |     editor.addEventListener('scroll', updateScroll);
162 |     preview.addEventListener('scroll', updateScroll);
163 |   </script>
164 | </body>
165 | </html>


--------------------------------------------------------------------------------
/codes/首页轮播图/index5.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7 |   <title>首页轮播图</title>
  8 |   <style>
  9 |     .slider {
 10 |       position: relative;
 11 |       width: 790px;
 12 |       height: 340px;
 13 |     }
 14 | 
 15 |     .slider ul {
 16 |       list-style-type:none;
 17 |       position: relative;
 18 |       width: 100%;
 19 |       height: 100%;
 20 |       padding: 0;
 21 |       margin: 0;
 22 |     }
 23 | 
 24 |     .slider__item,
 25 |     .slider__item--selected {
 26 |       position: absolute;
 27 |       transition: opacity 1s;
 28 |       opacity: 0;
 29 |       text-align: center;
 30 |     }
 31 | 
 32 |     .slider__item--selected {
 33 |       transition: opacity 1s;
 34 |       opacity: 1;
 35 |     }
 36 | 
 37 |     .slider__next,
 38 |     .slider__previous{
 39 |       display: inline-block;
 40 |       position: absolute;
 41 |       top: 50%;
 42 |       margin-top: -25px;
 43 |       width: 30px;
 44 |       height:50px;
 45 |       text-align: center;
 46 |       font-size: 24px;
 47 |       line-height: 50px;
 48 |       overflow: hidden;
 49 |       border: none;
 50 |       background: transparent;
 51 |       color: white;
 52 |       background: rgba(0,0,0,0.2);
 53 |       cursor: pointer;
 54 |       opacity: 0;
 55 |       transition: opacity .5s;
 56 |     }
 57 | 
 58 |     .slider__previous {
 59 |       left: 0;
 60 |     }
 61 | 
 62 |     .slider__next {
 63 |       right: 0;
 64 |     }
 65 | 
 66 |     .slider:hover .slider__previous {
 67 |       opacity: 1;
 68 |     }
 69 | 
 70 | 
 71 |     .slider:hover .slider__next {
 72 |       opacity: 1;
 73 |     }
 74 | 
 75 |     .slider__previous:after {
 76 |       content: '<';
 77 |     }
 78 | 
 79 |     .slider__next:after {
 80 |       content: '>';
 81 |     }
 82 | 
 83 |     .slider__control{
 84 |       position: relative;
 85 |       display: table;
 86 |       background-color: rgba(255, 255, 255, 0.5);
 87 |       padding: 5px;
 88 |       border-radius: 12px;
 89 |       bottom: 30px;
 90 |       margin: auto;
 91 |     }
 92 | 
 93 |     .slider__control-buttons,
 94 |     .slider__control-buttons--selected{
 95 |       display: inline-block;
 96 |       width: 15px;
 97 |       height: 15px;
 98 |       border-radius: 50%;
 99 |       margin: 0 5px;
100 |       background-color: white;
101 |       cursor: pointer;
102 |     }
103 | 
104 |     .slider__control-buttons--selected {
105 |       background-color: red;
106 |     }
107 | 
108 |   </style>
109 | </head>
110 | <body>
111 |   <div class="slider"></div>
112 |   <script>
113 |     class Component {
114 |       static name = 'component';
115 |       constructor({container, data, parent = null} = {}) {
116 |         this.data = data;
117 |         this.container = container;
118 |         this.container.innerHTML = this.render(this.data);
119 |       }
120 |       registerSubComponents(...Comps) {
121 |         const data = this.data;
122 |         const container = this.container;
123 |         this.children = this.children || [];
124 |         Comps.forEach((Comp) => {
125 |           const subContainer = document.createElement('div');
126 |           const sub = new Comp({container: subContainer, data, parent: this});
127 |           this.container.appendChild(subContainer);
128 |           this.children.push(sub);
129 |         });
130 |       }
131 |       render(data) {
132 |         /* abstract */
133 |         return '';
134 |       }
135 |     }
136 | 
137 |     class Slider extends Component {
138 |       static name = 'slider';
139 |       constructor({container, images = [], cycle = 3000} = {}){
140 |         super({container, data: images});
141 |         this.items = Array.from(this.container.querySelectorAll('.slider__item, .slider__item--selected'));
142 |         this.cycle = cycle;
143 |         this.slideTo(0);
144 |       }
145 |       render(images){
146 |         const content = images.map(image => `
147 |           <li class="slider__item">
148 |             <img src="${image}"/>
149 |           </li>    
150 |         `.trim());
151 |         
152 |         return `<ul>${content.join('')}</ul>`;
153 |       }
154 |       getSelectedItem(){
155 |         const selected = this.container.querySelector('.slider__item--selected');
156 |         return selected
157 |       }
158 |       getSelectedItemIndex(){
159 |         return this.items.indexOf(this.getSelectedItem());
160 |       }
161 |       slideTo(idx){
162 |         const selected = this.getSelectedItem();
163 |         if(selected){ 
164 |           selected.className = 'slider__item';
165 |         }
166 |         const item = this.items[idx];
167 |         if(item){
168 |           item.className = 'slider__item--selected';
169 |         }
170 | 
171 |         const detail = {index: idx};
172 |         const event = new CustomEvent('slide', {bubbles:true, detail});
173 |         this.container.dispatchEvent(event);
174 |       }
175 |       slideNext(){
176 |         const currentIdx = this.getSelectedItemIndex();
177 |         const nextIdx = (currentIdx + 1) % this.items.length;
178 |         this.slideTo(nextIdx);
179 |       }
180 |       slidePrevious(){
181 |         const currentIdx = this.getSelectedItemIndex();
182 |         const previousIdx = (this.items.length + currentIdx - 1) % this.items.length;
183 |         this.slideTo(previousIdx);  
184 |       }
185 |       start(){
186 |         this.stop();
187 |         this._timer = setInterval(()=>this.slideNext(), this.cycle);
188 |       }
189 |       stop(){
190 |         clearInterval(this._timer);
191 |       }
192 |     }
193 | 
194 |     class SliderController extends Component {
195 |       static name = 'slider__control';
196 | 
197 |       constructor({container, data, parent}) {
198 |         super({container, data});
199 | 
200 |         const buttons = container.querySelectorAll('.slider__control-buttons, .slider__control-buttons--selected');
201 |         container.addEventListener('mouseover', evt => {
202 |           const idx = Array.from(buttons).indexOf(evt.target);
203 |           if(idx >= 0){
204 |             slider.slideTo(idx);
205 |             slider.stop();
206 |           }
207 |         });
208 | 
209 |         container.addEventListener('mouseout', evt => {
210 |           slider.start();
211 |         });
212 | 
213 |         parent.container.addEventListener('slide', evt => {
214 |           const idx = evt.detail.index
215 |           const selected = container.querySelector('.slider__control-buttons--selected');
216 |           if(selected) selected.className = 'slider__control-buttons';
217 |           buttons[idx].className = 'slider__control-buttons--selected';
218 |         });
219 |       }
220 |       render(images){
221 |         return `
222 |           <div class="slider__control">
223 |             ${images.map((image, i) => `
224 |                 <span class="slider__control-buttons${i===0?'--selected':''}"></span>
225 |             `).join('')}
226 |           </div>    
227 |         `.trim();
228 |       }
229 |     }
230 | 
231 |     class SliderPrevious extends Component {
232 |       constructor({container, parent: slider}) {
233 |         super({container});
234 |         const previous = container.querySelector('.slider__previous');
235 |         previous.addEventListener('click', evt => {
236 |           slider.stop();
237 |           slider.slidePrevious();
238 |           slider.start();
239 |           evt.preventDefault();
240 |         });
241 |       }
242 |       render(){
243 |         return `<a class="slider__previous"></a>`;
244 |       }
245 |     }
246 | 
247 |     class SliderNext extends Component {
248 |       constructor({container, parent: slider}) {
249 |         super({container});
250 |         const previous = container.querySelector('.slider__next');
251 |         previous.addEventListener('click', evt => {
252 |           slider.stop();
253 |           slider.slidePrevious();
254 |           slider.start();
255 |           evt.preventDefault();
256 |         });
257 |       }
258 |       render(){
259 |         return `<a class="slider__next"></a>`;
260 |       }
261 |     }
262 | 
263 |     const images = ['https://p5.ssl.qhimg.com/t0119c74624763dd070.png',
264 |      'https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg',
265 |      'https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg',
266 |      'https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg'];
267 | 
268 |     const container = document.querySelector('.slider');
269 |     const slider = new Slider({container, images});
270 |     slider.registerSubComponents(SliderController, SliderPrevious, SliderNext);
271 |     slider.start();
272 |   </script>
273 | </body>
274 | </html>


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