├── .gitignore ├── src_webapp ├── modules │ ├── 014_doc_capability │ │ ├── test_async_2.js │ │ ├── test_derfer_2.js │ │ ├── test_derfer_1.js │ │ ├── img │ │ │ └── 001.png │ │ ├── imgs │ │ │ ├── 1574503845456.png │ │ │ ├── 1574504038912.png │ │ │ └── 1574504064357.png │ │ ├── index.less │ │ ├── index.js │ │ ├── index.html │ │ └── readme.md │ ├── 010_安全类 │ │ ├── img │ │ │ └── 001.png │ │ └── readme.md │ ├── 017_Vue │ │ ├── img │ │ │ └── 001.jpg │ │ ├── index.less │ │ ├── index.html │ │ ├── index.js │ │ └── readme.md │ ├── 011_methods │ │ ├── img │ │ │ ├── 1.jpg │ │ │ ├── 2.jpg │ │ │ ├── 3.jpg │ │ │ └── 4.jpg │ │ ├── readme.md │ │ ├── index.less │ │ ├── index.html │ │ └── index.js │ ├── 000_demo_cc │ │ ├── img │ │ │ └── car.png │ │ ├── index.html │ │ ├── index.less │ │ └── index.js │ ├── 004_HTML_meta │ │ ├── img │ │ │ └── 001.png │ │ └── readme.md │ ├── 006_create_obj │ │ ├── img │ │ │ └── 001.png │ │ ├── index.less │ │ ├── index.html │ │ ├── index.js │ │ └── readme.md │ ├── 008_http_002_cache │ │ ├── img │ │ │ ├── 1.png │ │ │ ├── 2.png │ │ │ └── 3.jpg │ │ └── readme.md │ ├── 006_create_obj_arr │ │ ├── img │ │ │ └── 001.png │ │ ├── index.less │ │ ├── index.html │ │ ├── index.js │ │ └── readme.md │ ├── 012_HTML&CSS_render │ │ ├── img │ │ │ ├── 002.jpg │ │ │ ├── 003.jpg │ │ │ ├── 004.jpg │ │ │ └── 005.jpg │ │ └── readme.md │ ├── 006_create_obj_string │ │ ├── img │ │ │ └── 001.png │ │ ├── index.less │ │ ├── index.html │ │ ├── index.js │ │ └── readme.md │ ├── 004_css_003_移动 │ │ ├── readme.md │ │ ├── index.js │ │ ├── index.html │ │ └── index.less │ ├── 007_class_FN │ │ ├── index.less │ │ ├── index.html │ │ ├── index.js │ │ └── readme.md │ ├── 009_同源_跨域 │ │ ├── index.less │ │ ├── index.html │ │ ├── index.js │ │ └── readme.md │ ├── 013_JS_run │ │ ├── index.less │ │ ├── index.html │ │ ├── index.js │ │ └── readme.md │ ├── 005_JS_001_event │ │ ├── index.less │ │ ├── index.html │ │ ├── index.js │ │ └── readme.md │ ├── 005_JS_002_闭包 │ │ ├── index.less │ │ ├── index.html │ │ ├── index.js │ │ └── readme.md │ ├── 005_JS_003_ES6 │ │ ├── index.less │ │ ├── index.html │ │ ├── index.js │ │ └── readme.md │ ├── 007_class_FN_1Object │ │ ├── index.less │ │ ├── index.html │ │ ├── index.js │ │ └── readme.md │ ├── 007_class_FN_2Mode │ │ ├── index.less │ │ ├── index.html │ │ ├── index.js │ │ └── readme.md │ ├── 015_error_trapping │ │ ├── index.less │ │ ├── index.html │ │ ├── index.js │ │ └── readme.md │ ├── 016_Garbage_collection │ │ ├── index.less │ │ ├── index.html │ │ ├── index.js │ │ └── readme.md │ ├── 003_简历&陈述 │ │ └── readme.md │ ├── 020-deploy │ │ └── readme.md │ ├── 002_业务分析_技术栈和工程化 │ │ └── readme.md │ ├── 004_css_002_box │ │ ├── index.js │ │ ├── index.html │ │ ├── index.less │ │ └── readme.md │ ├── 019_gulp&webpack │ │ ├── readme.md │ │ ├── index.js │ │ └── output.txt │ ├── 001_JD │ │ └── readme.md │ ├── 008_http_001_报文 │ │ └── readme.md │ ├── 098_project_experience │ │ └── readme.md │ ├── 004_css_001_buJu │ │ ├── index.html │ │ ├── readme.md │ │ ├── index.js │ │ └── index.less │ └── 018_node │ │ ├── index.js │ │ ├── output.txt │ │ └── readme.md ├── scripts │ ├── IV_need │ │ └── 胡健的简历_files │ │ │ ├── resume-head.png │ │ │ ├── fontello.min.css │ │ │ ├── zoom.css │ │ │ ├── colordove │ │ │ ├── style.min.css │ │ │ ├── zoom.min.js.下载 │ │ │ └── github-btn.html │ └── common │ │ └── conf.js └── index.html ├── conf.js ├── api_server ├── app_auto.js └── app.js ├── package.json └── gulpfile.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | webapp/ 3 | -------------------------------------------------------------------------------- /src_webapp/modules/014_doc_capability/test_async_2.js: -------------------------------------------------------------------------------- 1 | console.log('ac_2'); -------------------------------------------------------------------------------- /src_webapp/modules/014_doc_capability/test_derfer_2.js: -------------------------------------------------------------------------------- 1 | console.log('df_2'); -------------------------------------------------------------------------------- /src_webapp/modules/014_doc_capability/test_derfer_1.js: -------------------------------------------------------------------------------- 1 | console.log('df_1'); 2 | 3 | -------------------------------------------------------------------------------- /src_webapp/modules/010_安全类/img/001.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zc3hd/Interview/HEAD/src_webapp/modules/010_安全类/img/001.png -------------------------------------------------------------------------------- /src_webapp/modules/017_Vue/img/001.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zc3hd/Interview/HEAD/src_webapp/modules/017_Vue/img/001.jpg -------------------------------------------------------------------------------- /src_webapp/modules/011_methods/img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zc3hd/Interview/HEAD/src_webapp/modules/011_methods/img/1.jpg -------------------------------------------------------------------------------- /src_webapp/modules/011_methods/img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zc3hd/Interview/HEAD/src_webapp/modules/011_methods/img/2.jpg -------------------------------------------------------------------------------- /src_webapp/modules/011_methods/img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zc3hd/Interview/HEAD/src_webapp/modules/011_methods/img/3.jpg -------------------------------------------------------------------------------- /src_webapp/modules/011_methods/img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zc3hd/Interview/HEAD/src_webapp/modules/011_methods/img/4.jpg -------------------------------------------------------------------------------- /src_webapp/modules/000_demo_cc/img/car.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zc3hd/Interview/HEAD/src_webapp/modules/000_demo_cc/img/car.png -------------------------------------------------------------------------------- /src_webapp/modules/004_HTML_meta/img/001.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zc3hd/Interview/HEAD/src_webapp/modules/004_HTML_meta/img/001.png -------------------------------------------------------------------------------- /src_webapp/modules/006_create_obj/img/001.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zc3hd/Interview/HEAD/src_webapp/modules/006_create_obj/img/001.png -------------------------------------------------------------------------------- /src_webapp/modules/008_http_002_cache/img/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zc3hd/Interview/HEAD/src_webapp/modules/008_http_002_cache/img/1.png -------------------------------------------------------------------------------- /src_webapp/modules/008_http_002_cache/img/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zc3hd/Interview/HEAD/src_webapp/modules/008_http_002_cache/img/2.png -------------------------------------------------------------------------------- /src_webapp/modules/008_http_002_cache/img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zc3hd/Interview/HEAD/src_webapp/modules/008_http_002_cache/img/3.jpg -------------------------------------------------------------------------------- /src_webapp/modules/006_create_obj_arr/img/001.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zc3hd/Interview/HEAD/src_webapp/modules/006_create_obj_arr/img/001.png -------------------------------------------------------------------------------- /src_webapp/modules/012_HTML&CSS_render/img/002.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zc3hd/Interview/HEAD/src_webapp/modules/012_HTML&CSS_render/img/002.jpg -------------------------------------------------------------------------------- /src_webapp/modules/012_HTML&CSS_render/img/003.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zc3hd/Interview/HEAD/src_webapp/modules/012_HTML&CSS_render/img/003.jpg -------------------------------------------------------------------------------- /src_webapp/modules/012_HTML&CSS_render/img/004.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zc3hd/Interview/HEAD/src_webapp/modules/012_HTML&CSS_render/img/004.jpg -------------------------------------------------------------------------------- /src_webapp/modules/012_HTML&CSS_render/img/005.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zc3hd/Interview/HEAD/src_webapp/modules/012_HTML&CSS_render/img/005.jpg -------------------------------------------------------------------------------- /src_webapp/modules/014_doc_capability/img/001.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zc3hd/Interview/HEAD/src_webapp/modules/014_doc_capability/img/001.png -------------------------------------------------------------------------------- /src_webapp/modules/006_create_obj_string/img/001.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zc3hd/Interview/HEAD/src_webapp/modules/006_create_obj_string/img/001.png -------------------------------------------------------------------------------- /src_webapp/scripts/IV_need/胡健的简历_files/resume-head.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zc3hd/Interview/HEAD/src_webapp/scripts/IV_need/胡健的简历_files/resume-head.png -------------------------------------------------------------------------------- /conf.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // 数据库名称 3 | db: "test", 4 | 5 | // 测试模式下的端口 6 | dev_port: 1010, 7 | 8 | // 打包后/测试时被代理的端口 9 | api_port: 1011, 10 | } -------------------------------------------------------------------------------- /src_webapp/modules/014_doc_capability/imgs/1574503845456.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zc3hd/Interview/HEAD/src_webapp/modules/014_doc_capability/imgs/1574503845456.png -------------------------------------------------------------------------------- /src_webapp/modules/014_doc_capability/imgs/1574504038912.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zc3hd/Interview/HEAD/src_webapp/modules/014_doc_capability/imgs/1574504038912.png -------------------------------------------------------------------------------- /src_webapp/modules/014_doc_capability/imgs/1574504064357.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zc3hd/Interview/HEAD/src_webapp/modules/014_doc_capability/imgs/1574504064357.png -------------------------------------------------------------------------------- /src_webapp/scripts/common/conf.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by cc on 2017/8/7 3 | */ 4 | (function(win, $) { 5 | var conf = win.conf = win.conf || { 6 | build:false, 7 | }; 8 | })(window, jQuery); 9 | -------------------------------------------------------------------------------- /src_webapp/modules/011_methods/readme.md: -------------------------------------------------------------------------------- 1 | # 算法 2 | 3 | ### 排序算法 4 | ![./img/1.jpg](./img/1.jpg) 5 | 6 | ### 堆栈、队列、链表 7 | ![./img/2.jpg](./img/2.jpg) 8 | 9 | ### 递归 10 | ![./img/3.jpg](./img/3.jpg) 11 | 12 | ### 波兰式和逆波兰式 13 | ![./img/4.jpg](./img/4.jpg) 14 | 15 | -------------------------------------------------------------------------------- /src_webapp/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src_webapp/modules/004_css_003_移动/readme.md: -------------------------------------------------------------------------------- 1 | ### CSS移动 2 | 3 | 4 | * position: relative; transform: translate(30px, 30px);都是相对自己的位置在移动，有什么区别呢？ 5 | 6 | * 从页面布局的角度看效果是一样的。 7 | * 从动画角度来说使用transform时，可以让 GPU 参与运算，动画的 FPS 更高。position时，最小的动画变化的单位是1px，transform参与时，可以做到更小（动画效果更加平滑）position 是为页面布局而生的。transform 是为动画而生的。 8 | 功能都一样。 9 | * 但是translate不会引起浏览器的重绘和重排，这就相当nice了。这点就很牛逼了。页面不会Repaint（没有重新计算render tree） 10 | -------------------------------------------------------------------------------- /api_server/app_auto.js: -------------------------------------------------------------------------------- 1 | var nodemon = require('gulp-nodemon'); 2 | var path = require('path'); 3 | nodemon({ 4 | script: path.join(__dirname, './app.js'), 5 | ignore: [ 6 | path.join(__dirname, '../src_webapp/'), 7 | path.join(__dirname, '../webapp/'), 8 | path.join(__dirname, '../gulpfile.js'), 9 | path.join(__dirname, '../conf.js'), 10 | ], 11 | env: { 'NODE_ENV': 'development' } 12 | }); -------------------------------------------------------------------------------- /src_webapp/modules/017_Vue/index.less: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | white-space: nowrap; 5 | transition: all 0.3s ease-in; 6 | } 7 | 8 | html, 9 | body { 10 | width: 100%; 11 | height: 100%; 12 | font-family: 'Microsoft Yahei'; 13 | overflow: hidden; 14 | } 15 | 16 | .app{ 17 | width: 100%; 18 | height: 100%; 19 | background-color: #333; 20 | position: relative; 21 | text-align: center; 22 | font-size: 200px; 23 | color: #ccc; 24 | } 25 | -------------------------------------------------------------------------------- /src_webapp/modules/010_安全类/readme.md: -------------------------------------------------------------------------------- 1 | # 安全类 2 | 3 | ### CSRF 4 | 5 | * 概念：跨站请求伪造 6 | * 缩写：Cross-site request forgery 7 | * 攻击原理：点击其他网站的，会拿到我的cookie请求一个曾经某网站的有漏洞的API。 8 | * 条件：1.登录过，有cookie。2.有漏洞的API。 9 | ![./img/001.png](./img/001.png) 10 | * 防御： 11 | ``` 12 | 服务器下发给浏览器token。服务端加Token验证 13 | Referer 验证：判断是不是我这个站点下的来源， 14 | 隐藏令牌：隐藏在HTTP请求head中，和token 15 | ``` 16 | 17 | ### XSS 18 | 19 | * 概念：跨域脚本攻击 20 | * cross-site scripting 21 | * 原理：向你页面注入JS运行，比如你的提交区提交。 22 | * 防御：就是让你注入的JS不允许执行。 -------------------------------------------------------------------------------- /src_webapp/modules/007_class_FN/index.less: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | white-space: nowrap; 5 | transition: all 0.3s ease-in; 6 | } 7 | 8 | html, 9 | body { 10 | width: 100%; 11 | height: 100%; 12 | font-family: 'Microsoft Yahei'; 13 | } 14 | 15 | .app { 16 | width: 100%; 17 | height: 100%; 18 | background-color: #333; 19 | >.box { 20 | width: 100px; 21 | height: 100px; 22 | background-color: #fff; 23 | margin-bottom: 20px; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src_webapp/modules/009_同源_跨域/index.less: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | white-space: nowrap; 5 | transition: all 0.3s ease-in; 6 | } 7 | 8 | html, 9 | body { 10 | width: 100%; 11 | height: 100%; 12 | font-family: 'Microsoft Yahei'; 13 | } 14 | 15 | .app { 16 | width: 100%; 17 | height: 100%; 18 | background-color: #333; 19 | >.box { 20 | width: 100px; 21 | height: 100px; 22 | background-color: #fff; 23 | margin-bottom: 20px; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src_webapp/modules/011_methods/index.less: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | white-space: nowrap; 5 | transition: all 0.3s ease-in; 6 | } 7 | 8 | html, 9 | body { 10 | width: 100%; 11 | height: 100%; 12 | font-family: 'Microsoft Yahei'; 13 | } 14 | 15 | .app { 16 | width: 100%; 17 | height: 100%; 18 | background-color: #333; 19 | >.box { 20 | width: 100px; 21 | height: 100px; 22 | background-color: #fff; 23 | margin-bottom: 20px; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src_webapp/modules/013_JS_run/index.less: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | white-space: nowrap; 5 | transition: all 0.3s ease-in; 6 | } 7 | 8 | html, 9 | body { 10 | width: 100%; 11 | height: 100%; 12 | font-family: 'Microsoft Yahei'; 13 | } 14 | 15 | .app { 16 | width: 100%; 17 | height: 100%; 18 | background-color: #333; 19 | >.box { 20 | width: 100px; 21 | height: 100px; 22 | background-color: #fff; 23 | margin-bottom: 20px; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src_webapp/modules/005_JS_001_event/index.less: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | white-space: nowrap; 5 | transition: all 0.3s ease-in; 6 | } 7 | 8 | html, 9 | body { 10 | width: 100%; 11 | height: 100%; 12 | font-family: 'Microsoft Yahei'; 13 | } 14 | 15 | .app { 16 | width: 100%; 17 | height: 100%; 18 | background-color: #333; 19 | >.box { 20 | width: 100px; 21 | height: 100px; 22 | background-color: #fff; 23 | margin-bottom: 20px; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src_webapp/modules/005_JS_002_闭包/index.less: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | white-space: nowrap; 5 | transition: all 0.3s ease-in; 6 | } 7 | 8 | html, 9 | body { 10 | width: 100%; 11 | height: 100%; 12 | font-family: 'Microsoft Yahei'; 13 | } 14 | 15 | .app { 16 | width: 100%; 17 | height: 100%; 18 | background-color: #333; 19 | >.box { 20 | width: 100px; 21 | height: 100px; 22 | background-color: #fff; 23 | margin-bottom: 20px; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src_webapp/modules/005_JS_003_ES6/index.less: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | white-space: nowrap; 5 | transition: all 0.3s ease-in; 6 | } 7 | 8 | html, 9 | body { 10 | width: 100%; 11 | height: 100%; 12 | font-family: 'Microsoft Yahei'; 13 | } 14 | 15 | .app { 16 | width: 100%; 17 | height: 100%; 18 | background-color: #333; 19 | >.box { 20 | width: 100px; 21 | height: 100px; 22 | background-color: #fff; 23 | margin-bottom: 20px; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src_webapp/modules/006_create_obj/index.less: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | white-space: nowrap; 5 | transition: all 0.3s ease-in; 6 | } 7 | 8 | html, 9 | body { 10 | width: 100%; 11 | height: 100%; 12 | font-family: 'Microsoft Yahei'; 13 | } 14 | 15 | .app { 16 | width: 100%; 17 | height: 100%; 18 | background-color: #333; 19 | >.box { 20 | width: 100px; 21 | height: 100px; 22 | background-color: #fff; 23 | margin-bottom: 20px; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src_webapp/modules/006_create_obj_arr/index.less: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | white-space: nowrap; 5 | transition: all 0.3s ease-in; 6 | } 7 | 8 | html, 9 | body { 10 | width: 100%; 11 | height: 100%; 12 | font-family: 'Microsoft Yahei'; 13 | } 14 | 15 | .app { 16 | width: 100%; 17 | height: 100%; 18 | background-color: #333; 19 | >.box { 20 | width: 100px; 21 | height: 100px; 22 | background-color: #fff; 23 | margin-bottom: 20px; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src_webapp/modules/006_create_obj_string/index.less: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | white-space: nowrap; 5 | transition: all 0.3s ease-in; 6 | } 7 | 8 | html, 9 | body { 10 | width: 100%; 11 | height: 100%; 12 | font-family: 'Microsoft Yahei'; 13 | } 14 | 15 | .app { 16 | width: 100%; 17 | height: 100%; 18 | background-color: #333; 19 | >.box { 20 | width: 100px; 21 | height: 100px; 22 | background-color: #fff; 23 | margin-bottom: 20px; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src_webapp/modules/007_class_FN_1Object/index.less: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | white-space: nowrap; 5 | transition: all 0.3s ease-in; 6 | } 7 | 8 | html, 9 | body { 10 | width: 100%; 11 | height: 100%; 12 | font-family: 'Microsoft Yahei'; 13 | } 14 | 15 | .app { 16 | width: 100%; 17 | height: 100%; 18 | background-color: #333; 19 | >.box { 20 | width: 100px; 21 | height: 100px; 22 | background-color: #fff; 23 | margin-bottom: 20px; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src_webapp/modules/007_class_FN_2Mode/index.less: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | white-space: nowrap; 5 | transition: all 0.3s ease-in; 6 | } 7 | 8 | html, 9 | body { 10 | width: 100%; 11 | height: 100%; 12 | font-family: 'Microsoft Yahei'; 13 | } 14 | 15 | .app { 16 | width: 100%; 17 | height: 100%; 18 | background-color: #333; 19 | >.box { 20 | width: 100px; 21 | height: 100px; 22 | background-color: #fff; 23 | margin-bottom: 20px; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src_webapp/modules/014_doc_capability/index.less: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | white-space: nowrap; 5 | transition: all 0.3s ease-in; 6 | } 7 | 8 | html, 9 | body { 10 | width: 100%; 11 | height: 100%; 12 | font-family: 'Microsoft Yahei'; 13 | } 14 | 15 | .app { 16 | width: 100%; 17 | height: 100%; 18 | background-color: #333; 19 | >.box { 20 | width: 100px; 21 | height: 100px; 22 | background-color: #fff; 23 | margin-bottom: 20px; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src_webapp/modules/015_error_trapping/index.less: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | white-space: nowrap; 5 | transition: all 0.3s ease-in; 6 | } 7 | 8 | html, 9 | body { 10 | width: 100%; 11 | height: 100%; 12 | font-family: 'Microsoft Yahei'; 13 | } 14 | 15 | .app { 16 | width: 100%; 17 | height: 100%; 18 | background-color: #333; 19 | >.box { 20 | width: 100px; 21 | height: 100px; 22 | background-color: #fff; 23 | margin-bottom: 20px; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src_webapp/modules/016_Garbage_collection/index.less: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | white-space: nowrap; 5 | transition: all 0.3s ease-in; 6 | } 7 | 8 | html, 9 | body { 10 | width: 100%; 11 | height: 100%; 12 | font-family: 'Microsoft Yahei'; 13 | } 14 | 15 | .app { 16 | width: 100%; 17 | height: 100%; 18 | background-color: #333; 19 | >.box { 20 | width: 100px; 21 | height: 100px; 22 | background-color: #fff; 23 | margin-bottom: 20px; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src_webapp/modules/007_class_FN/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | js-demo 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src_webapp/modules/009_同源_跨域/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | js-demo 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src_webapp/modules/011_methods/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | js-demo 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src_webapp/modules/013_JS_run/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | js-demo 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src_webapp/modules/005_JS_001_event/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | js-demo 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src_webapp/modules/005_JS_002_闭包/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | js-demo 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src_webapp/modules/005_JS_003_ES6/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | js-demo 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src_webapp/modules/006_create_obj/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | js-demo 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src_webapp/modules/006_create_obj_arr/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | js-demo 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src_webapp/modules/006_create_obj_string/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | js-demo 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src_webapp/modules/006_create_obj_string/index.js: -------------------------------------------------------------------------------- 1 | var str='0123456789'; 2 | 3 | 4 | // console.log(str.substring(0,1)); 5 | // console.log(str.substring()); 6 | 7 | 8 | // console.log(str.substring(-1)); 9 | console.log(str.substring(2,-2)); 10 | // console.log(str.substring(3,2)); 11 | // 12 | // console.log(str.substr()); 13 | // console.log(str.substr(10)); 14 | console.log(str.substr(0,5)); 15 | // console.log(str.substr(3,-2)); 16 | 17 | 18 | 19 | 20 | console.log('===============================') 21 | console.log(str); -------------------------------------------------------------------------------- /src_webapp/modules/007_class_FN_2Mode/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | js-demo 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src_webapp/modules/013_JS_run/index.js: -------------------------------------------------------------------------------- 1 | // console.log(1); 2 | 3 | // console.log(2); 4 | 5 | 6 | 7 | // for (var i = 0; i < 4; i++) { 8 | // console.log(i); 9 | // } 10 | 11 | 12 | console.log(1); 13 | 14 | // setTimeout(function () { 15 | // while (1) { 16 | // console.log('st_1') 17 | // } 18 | // },0) 19 | 20 | // $.get('./index.html') 21 | // .then(function(data) { 22 | // console.log(data); 23 | // }); 24 | 25 | for (var i = 0; i < 4; i++) { 26 | setTimeout(function () { 27 | console.log(i); 28 | },1000); 29 | } -------------------------------------------------------------------------------- /src_webapp/modules/003_简历&陈述/readme.md: -------------------------------------------------------------------------------- 1 | ### 说话 2 | 3 | * 会：简历上的东西都要知道，能有条理的说出123 4 | * 慢：压住自己想快点想出来的思想，一定要在语气和节奏上压的住自己； 5 | * 自信：在追求自由的路上，记得，你不能怂； 6 | 7 | ### 简历 8 | 9 | * 基本信息：姓名、年龄、手机、邮箱、籍贯 10 | * 学历：最高学历 11 | * 工作经历：时间，公司，岗位，职责，技术栈，技术收益、业务收益。你的技术方案解决了什么问题。 12 | * 开源项目：github 13 | 14 | ### 陈述 15 | 16 | * 工作风格：就是介绍你负责了什么项目的那块，一定是要自己擅长的地方，也就是引导别人往这个方向上引导。 17 | * 印象分：平时喜欢看什么网站，看到哪些有意思的点，就自己倒腾出一个什么玩意，或什么笔记。 18 | 19 | ### 实例 20 | 21 | * 巧妙地展示实例， 22 | * 不会的地方：我确实没有这个经验，能否指点下。 23 | * 实话实说。节奏放缓。胆子要大。心态要和。不要轻易放弃。 24 | * 核心：追求极致。面试没有标准答案，要谦虚。 25 | * 优化：说项目中要优化的地方，性能，垃圾。 26 | -------------------------------------------------------------------------------- /src_webapp/modules/014_doc_capability/index.js: -------------------------------------------------------------------------------- 1 | // console.log(1); 2 | 3 | // console.log(2); 4 | 5 | 6 | 7 | // for (var i = 0; i < 4; i++) { 8 | // console.log(i); 9 | // } 10 | 11 | 12 | console.log(1); 13 | 14 | // setTimeout(function () { 15 | // while (1) { 16 | // console.log('st_1') 17 | // } 18 | // },0) 19 | 20 | // $.get('./index.html') 21 | // .then(function(data) { 22 | // console.log(data); 23 | // }); 24 | 25 | for (var i = 0; i < 100; i++) { 26 | // setTimeout(function() { 27 | 28 | // },1000); 29 | 30 | console.log(i); 31 | } -------------------------------------------------------------------------------- /src_webapp/modules/016_Garbage_collection/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | js-demo 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /api_server/app.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var path = require('path'); 3 | var conf = require('../conf.js'); 4 | 5 | var app = express(); 6 | app.use(express.static(path.join(__dirname, '../webapp/'))); 7 | 8 | 9 | // 端口 10 | app.post('/api/js_demo/font.do', function(req, res) { 11 | var size = Math.floor(Math.random() * 200); 12 | if (size < 60) { 13 | size = 60; 14 | } 15 | var color = Math.floor(Math.random() * 1000000); 16 | 17 | res.send({ 18 | size: size, 19 | color: color, 20 | }); 21 | }); 22 | 23 | 24 | app.listen(conf.api_port); 25 | console.log("server running at " + conf.api_port); -------------------------------------------------------------------------------- /src_webapp/modules/015_error_trapping/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | js-demo 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | ./img/a.jpg 17 |
18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src_webapp/modules/020-deploy/readme.md: -------------------------------------------------------------------------------- 1 | ### 动态资源与静态资源 2 | 3 | * 静态资源： 当用户多次访问这个资源，资源的源代码永远不会改变的资源。 4 | * 动态资源：当用户多次访问这个资源，资源的源代码可能会发送改变。 5 | 6 | ### 动静分离 7 | 8 | * 动静分离是让动态网站里的动态网页根据一定规则把不变的资源和经常变的资源区分开来，动静资源做好了拆分以后，我们就可以根据静态资源的特点将其做缓存操作，这就是网站静态化处理的核心思路 9 | 10 | ### 为什么要动静分离 11 | 12 | * 在我们的软件开发中，有些请求是需要后台处理的（如：.jsp,.do等等），有些请求是不需要经过后台处理的（如：css、html、jpg、js等等文件），这些不需要经过后台处理的文件称为静态文件，否则动态文件。因此我们后台处理忽略静态文件。这会有人又说那我后台忽略静态文件不就完了吗。当然这是可以的，但是这样后台的请求次数就明显增多了。在我们对资源的响应速度有要求的时候，我们应该使用这种动静分离的策略去解决。 13 | * 动静分离将网站静态资源（HTML，JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。这里我们将静态资源放到nginx中，动态资源转发到tomcat服务器中。 14 | * 因此，动态资源转发到tomcat服务器我们就使用到了前面讲到的反向代理了。 -------------------------------------------------------------------------------- /src_webapp/modules/017_Vue/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | demo 7 | 8 | 9 | 10 | 11 |
12 |
13 | 14 | 15 |
16 |

17 |

{{number}}

18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /src_webapp/modules/002_业务分析_技术栈和工程化/readme.md: -------------------------------------------------------------------------------- 1 | # 业务分析 技术栈准备 2 | 3 | ### 京东金融 4 | 5 | * 导航的组件。怎么写？ 6 | * 布局：响应式 7 | * 动画效果 8 | * meta标签：http-equiv='x-ua-compatible' content="ie=edge,chrome=1" 9 | * meta标签：name=render content=webkit(双核浏览器优先用webkit渲染) 10 | * link:rel=dns-prefetch DNS预解析？提供页面性能？ 11 | * local storage 12 | * 字体：怎么引。 13 | * JQ：事件委托，选择器 14 | * VUE 15 | * es6语法 16 | * webpack 17 | 18 | ### elong 19 | 20 | * meta标签 21 | * JS异步加载的方式 22 | * 传统的模块化有几种，require.js sea.js 23 | * ES6如何处理模块化？ 24 | 25 | * 技术栈 26 | * JQ:框架核心，事件委托，插件机制，找源码问题高的文章看。 27 | * vue:同理。遇见什么问题，怎么解决的。 28 | * node:特性。遇见什么问题，怎么架构。 29 | 30 | * 工程化 31 | * less语法，怎么用 32 | * gulp工作原理和webpack的区别 33 | * npm常见的命令和scripts怎么用 34 | * browserify 如何使用 -------------------------------------------------------------------------------- /src_webapp/modules/007_class_FN_1Object/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | js-demo 7 | 8 | 9 | 10 | 11 |
12 |

13 | input1=> 14 | 15 |

16 |

17 | input2=> 18 | 19 |

20 |
21 | 我每次比input2的值加1=> 22 | 23 |
24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /src_webapp/modules/006_create_obj_string/readme.md: -------------------------------------------------------------------------------- 1 | # 字符操作的常用方法 2 | 3 | ### substring(start,stop) 4 | 5 | * start,stop为下标 6 | * 产生新的字符串，不改变原字符串； 7 | * 截取出来的字符串，为包左不包右 8 | ``` 9 | var str='0123456789'; 10 | 11 | str.substring(0,0) //''; 12 | str.substring(0,1) // a 13 | 14 | str.substring() //复制 15 | str.substring(-1) //-1转为0，复制 16 | str.substring(3) //从下标为3一直向后截取出 17 | 18 | str.substring(3,2) // start>stop,会换位 19 | str.substring(2,-2) // 换位，截取 20 | ``` 21 | 22 | ### substr(start [, length ]) 23 | 24 | * start 下标 25 | * length 截取长度 26 | ``` 27 | str.substr() //复制 28 | str.substr(1) // 从1往后截取 29 | 30 | str.substr(10) //'' 31 | 32 | str.substr(-1) //9 从后截取一个 33 | 34 | str.substr(0,5) // 从下标0开始，往后5个截取 35 | str.substr(0,0) // 从下标0开始，往后0个截取 不截取 36 | ``` 37 | -------------------------------------------------------------------------------- /src_webapp/modules/016_Garbage_collection/index.js: -------------------------------------------------------------------------------- 1 | // function fn(obj) { 2 | // obj = obj||{}; 3 | 4 | 5 | 6 | 7 | // } 8 | 9 | 10 | // setInterval(function () { 11 | // // console.log(1); 12 | // // return { 13 | // // a:$, 14 | // // b:$, 15 | // // c:$, 16 | // // f:$, 17 | // // g:$, 18 | // // h:$, 19 | // // j:$, 20 | // // }; 21 | // // a = null; 22 | // },1); 23 | 24 | 25 | var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; 26 | // var index = 2; 27 | // var sliced = arr.slice(3); 28 | // console.log(sliced); 29 | 30 | // // ; 31 | // console.log(arr.push.apply(arr, sliced)) 32 | 33 | // console.log(arr); 34 | // // ; 35 | 36 | // console.log(arr.push(10)) 37 | // arr.length = arr.length-1; 38 | console.log(arr.push(9)); 39 | 40 | // console.log(arr.pop()) -------------------------------------------------------------------------------- /src_webapp/modules/004_css_003_移动/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | function App() {} 4 | App.prototype = { 5 | init: function() { 6 | var me = this; 7 | 8 | document.getElementById("box").style.height 9 | console.log(document.getElementById("box").style.height); 10 | 11 | 12 | // console.log(document.getElementById("box").currentStyle.height); 13 | 14 | 15 | 16 | 17 | 18 | console.log(window.getComputedStyle(document.getElementById("box")).height) 19 | console.log(document.getElementById("box").getBoundingClientRect().height) 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | console.log($('#box').width()) 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | }, 52 | }; 53 | new App().init(); 54 | -------------------------------------------------------------------------------- /src_webapp/modules/004_css_002_box/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | function App() {} 4 | App.prototype = { 5 | init: function() { 6 | var me = this; 7 | 8 | document.getElementById("box").style.height 9 | console.log(document.getElementById("box").style.height); 10 | 11 | 12 | // console.log(document.getElementById("box").currentStyle.height); 13 | 14 | 15 | 16 | 17 | 18 | console.log(window.getComputedStyle(document.getElementById("box")).height) 19 | console.log(document.getElementById("box").getBoundingClientRect().height) 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | console.log($('#box').width()) 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | }, 52 | }; 53 | new App().init(); 54 | -------------------------------------------------------------------------------- /src_webapp/modules/014_doc_capability/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | js-demo 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src_webapp/scripts/IV_need/胡健的简历_files/fontello.min.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8";@font-face{font-family:fontello;src:url(../../font/fontello.eot?32003456);src:url(../../font/fontello.eot?32003456#iefix) format("embedded-opentype"),url(../../font/fontello.woff?32003456) format("woff"),url(../../font/fontello.ttf?32003456) format("truetype"),url(../../font/fontello.svg?32003456#fontello) format("svg");font-weight:400;font-style:normal}[class*=" icon-"]:before,[class^=icon-]:before{font-family:fontello;font-style:normal;font-weight:400;speak:none;display:inline-block;text-decoration:inherit;width:1em;margin-right:.2em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;margin-left:.2em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-wechat:before{content:'\e800'}.icon-qq:before{content:'\e801'}.icon-bookmark:before{content:'\e802'}.icon-heart:before{content:'\e803'}.icon-mail-alt:before{content:'\e804'}.icon-link:before{content:'\e805'}.icon-phone-1:before{content:'\e806'} -------------------------------------------------------------------------------- /src_webapp/scripts/IV_need/胡健的简历_files/zoom.css: -------------------------------------------------------------------------------- 1 | img[data-action="zoom"] { 2 | cursor: pointer; 3 | cursor: -webkit-zoom-in; 4 | cursor: -moz-zoom-in; 5 | } 6 | .zoom-img, 7 | .zoom-img-wrap { 8 | position: relative; 9 | z-index: 666; 10 | -webkit-transition: all 300ms; 11 | -o-transition: all 300ms; 12 | transition: all 300ms; 13 | } 14 | img.zoom-img { 15 | cursor: pointer; 16 | cursor: -webkit-zoom-out; 17 | cursor: -moz-zoom-out; 18 | } 19 | .zoom-overlay { 20 | z-index: 420; 21 | background: #fff; 22 | position: fixed; 23 | top: 0; 24 | left: 0; 25 | right: 0; 26 | bottom: 0; 27 | pointer-events: none; 28 | filter: "alpha(opacity=0)"; 29 | opacity: 0; 30 | -webkit-transition: opacity 300ms; 31 | -o-transition: opacity 300ms; 32 | transition: opacity 300ms; 33 | } 34 | .zoom-overlay-open .zoom-overlay { 35 | filter: "alpha(opacity=100)"; 36 | opacity: 1; 37 | } 38 | .zoom-overlay-open, 39 | .zoom-overlay-transitioning { 40 | cursor: default; 41 | } 42 | -------------------------------------------------------------------------------- /src_webapp/modules/019_gulp&webpack/readme.md: -------------------------------------------------------------------------------- 1 | # gulp 2 | 3 | * 流处理：Gulp是一个基于流的构建系统 4 | * 没有产生中间文件：使用Gulp的优势就是利用流的方式进行文件的处理，通过管道将多个任务和操作连接起来，因此只有一次I/O的过程，流程更清晰，更纯粹。 5 | * Gulp去除了中间文件，只将最后的输出写入磁盘，整个过程因此变得更快。 6 | 7 | * 常用插件： 8 | ``` 9 | gulp-autoprefixer:css前缀 10 | gulp-cssnano：压缩 11 | gulp-less：less 12 | 13 | gulp-uglify：压缩JS 14 | gulp-babel：语法转换 15 | ``` 16 | 17 | # webpack 18 | 19 | * 打包原理：所有的依赖被打包为一个JS文件，通过代码分割成单元片段并按需加载。 20 | * 引入： 以 commonJS 的形式来书写脚本，但对 AMD/CMD 的支持也很全面， 21 | * 所有静态资源模块化； 22 | * 扩展性强，插件机制完善 23 | 24 | * 【loader】用于加载某些资源文件。因为webpack本身只能打包common.js规范的js文件，对于其他资源如css，img等，是没有办法加载的，这时就需要对应的loader将资源转化，从而进行加载。 25 | * 【plugin】用于扩展webpack的功能。不同于loader，plugin的功能更加丰富，比如压缩打包，优化，不只局限于资源的加载。 26 | * css-loader: 加载.css文件 27 | * style-loader:使用` Follow @colordove 3 -------------------------------------------------------------------------------- /src_webapp/modules/018_node/readme.md: -------------------------------------------------------------------------------- 1 | # node 2 | 3 | ### 1.特性 4 | 5 | ##### 1.1 同步异步 6 | * 单线程、非阻塞IO、事假环机制 7 | * V8是node虚拟机，js运行环境； 8 | * node是单线程的，异步是通过一次次的循环事件队列来实现的．同步则是说阻塞式的IO,这在高并发环境会是一个很大的性能问题，所以同步一般只在基础框架的启动时使用，用来加载配置文件，初始化程序什么的． 9 | * node是没有web容器。根据访问的路径做出相应地址的文件读取，适合做路由设计 10 | 11 | ##### 1.2 异步流程控制 12 | * 多层嵌套回调 13 | * 为每一个回调写单独的函数，函数里边再回调 14 | * 用第三方框架比方async, q, promise等 15 | 16 | ##### 1.3 express 17 | 18 | * 路由设计 19 | ``` 20 | // 配置前缀 21 | me.api_pro = '/api/plan'; 22 | me.router = require('express').Router(); 路由组件 23 | me.router.post('/list.do', function(req, res) { 24 | }); 25 | // 生成 26 | me.app.use(me.api_pro, me.router); 27 | ``` 28 | 29 | * 路由参数获取 30 | ``` 31 | /users/:name 使用req.params.name获取 32 | ``` 33 | 34 | * express response有哪些常用方法 35 | ``` 36 | res.download() 弹出文件下载 37 | res.end() 结束response 38 | 39 | res.json() 返回json 40 | res.jsonp() 返回jsonp 41 | 42 | res.redirect() 重定向请求 43 | res.render() 渲染模板 44 | 45 | res.send() 返回多种形式数据 46 | res.sendFile 返回文件 47 | res.sendStatus() 返回状态 48 | ``` 49 | 50 | ##### 1.3 mongoDB && mongoose 51 | * mongoDB 非结构性数据库。mongoose对象化操作数据库 52 | * mongoose：文档模式-->model模型--->实例；model模型方法 和 实例 方法 53 | ``` 54 | 【文档模型】 55 | var animalSchema = new mongoose.Schema({ 56 | "name" : String, 57 | "type" : String 58 | }); 59 | 60 | 定义【实例（文档、对象）】方法： 61 | animalSchema.methods.zhaotonglei = function(callback){ 62 | this.model('Animal').find({"type":this.type},callback); 63 | } 64 | 65 | 【model模型】 66 | var Animal = mongoose.model('Animal', animalSchema); 67 | 68 | 【model模型】的方法 69 | Animal 70 | .findOne({"name":"小白"},function(err,dog){ 71 | 可以使用新定义的 【实例】方法 72 | dog.zhaotonglei(function(err,result){ 73 | console.log(result); 74 | }); 75 | }); 76 | ``` 77 | 78 | ### 2.全局对象 79 | 80 | * process, console, Buffer和exports 81 | 82 | ### 3.核心模块 83 | 84 | * EventEmitter, Stream, FS, Net和全局对象 85 | 86 | ### 3.EventEmitter 87 | 88 | * 如何实现EventEmitter？ 89 | * 主要分三步：定义一个子类，调用构造函数，继承EventEmitter 90 | ``` 91 | var util = require('util'); 92 | var EventEmitter = require('events').EventEmitter; 93 | 94 | // 构造函数 95 | function MyEmitter() { 96 | EventEmitter.call(this); 97 | } 98 | // 继承 99 | util.inherits(MyEmitter, EventEmitter); 100 | 101 | var em = new MyEmitter(); 102 | em.on('hello', function(data) { 103 | console.log('收到事件hello的数据:', data); 104 | }); 105 | setTimeout(function(argument) { 106 | // 接收事件，并打印到控制台 107 | em.emit('hello', 'EventEmitter传递消息真方便!'); 108 | },200); 109 | ``` 110 | 111 | * 应用： 112 | ``` 113 | 1) 模块间传递消息 114 | 2) 回调函数内外传递消息 115 | 3) 处理流数据，因为流是在EventEmitter基础上实现的. 116 | ``` 117 | 118 | * EventEmitter中的newListenser事件有什么用处? 119 | * newListener可以用来做事件机制的反射，特殊应用，事件管理等．当任何on事件添加到EventEmitter时，就会触发newListener事件，基于这种模式，我们可以做很多自定义处理； 120 | ``` 121 | var emitter3 = new MyEmitter(); 122 | 123 | 新注册的事件，都会被这个监听到 124 | emitter3.on('newListener', function(name, listener) { 125 | console.log("新事件的名字:", name); 126 | console.log("新事件的代码:", listener); 127 | setTimeout(function(){ console.log("我是自定义延时处理机制"); }, 1000); 128 | }); 129 | 130 | emitter3.on('hello', function(){ 131 | console.log('hello　node'); 132 | }); 133 | ``` 134 | 135 | ### 4.node的错误捕获 136 | 137 | * domain来统一处理错误事件 138 | ``` 139 | var domain = require('domain'); 140 | var myDomain = domain.create(); 141 | 142 | // 接收事件并打印 143 | myDomain.on('error', function(err) { 144 | console.log('domain接收到的错误事件:', err); 145 | }); 146 | 147 | // 开始运行下面的函数 148 | myDomain.run(function() { 149 | var emitter1 = new MyEmitter(); 150 | emitter1.emit('error', '错误事件来自emitter1'); 151 | var emitter2 = new MyEmitter(); 152 | emitter2.emit('error', '错误事件来自emitter2'); 153 | }); 154 | ``` 155 | 156 | ### 5.Stream 157 | 158 | ###### 1.什么是Stream? 159 | * stream是基于事件EventEmitter的数据管理模式．由各种不同的抽象接口组成，主要包括可写，可读，可读写，可转换等几种类型． 160 | 161 | ###### 2.Stream有什么好处? 162 | * 非阻塞式数据处理提升效率，片断处理，节省内存，管道处理方便可扩展等. 163 | 164 | ###### 3.demo:读取流 165 | ``` 166 | const fs = require('fs') 167 | 168 | //流的方式读取文件 169 | var readStream = fs.createReadStream('readme.md'); 170 | 171 | var str = ''; /*保存数据*/ 172 | var count = 0;  /*次数*/ 173 | readStream.on('data', function(chunk) {    174 | str += chunk;    175 | count++; 176 | 177 | }) 178 | 179 | //读取完成 180 | readStream.on('end', function(chunk) {    181 | console.log(count);    182 | console.log(str); 183 | }) 184 | 185 | //读取失败 186 | readStream.on('error', function(err) {    187 | console.log(err); 188 | }); 189 | ``` 190 | 191 | ##### 4.demo:流写入 192 | ``` 193 | var fs = require("fs"); 194 | var data = '我是从数据库获取的数据，我要保存起来11\n'; 195 | 196 | // 创建一个可以写入的流，写入到文件 output.txt 中 197 | var writerStream = fs.createWriteStream('output.txt'); 198 | 199 | for(var i=0;i<100;i++){ 200 |     writerStream.write(data,'utf8'); 201 | } 202 | 203 | //标记写入完成 204 | writerStream.end(); 205 | 206 | // 接受完成 207 | writerStream.on('finish',function(){ 208 |     console.log('写入完成'); 209 | }); 210 | 211 | //失败 212 | writerStream.on('error',function(){ 213 |     console.log('写入失败'); 214 | }); 215 | ``` 216 | 217 | ##### 5.demo:可读流---->可写流 218 | ``` 219 | var fs = require("fs"); 220 | // 创建一个可读流 221 | var readerStream = fs.createReadStream('readme.md'); 222 | // 创建一个可写流 223 | var writerStream = fs.createWriteStream('output.txt'); 224 | 225 | // 管道读写操作 226 | // 读取 input.txt 文件内容，并将内容写入到 output.txt 文件中 227 | readerStream.pipe(writerStream); 228 | console.log("程序执行完毕"); 229 | ``` 230 | 231 | ### 6.文件系统 232 | 233 | ##### 6.1.读取文件的方式 234 | ``` 235 | 1) POSIX式低层读写 236 | 2) 流式读写 237 | 3) 同步文件读写 238 | 4) 异步文件读写 239 | ``` 240 | 241 | ##### 6.2.如何读取JSON文件 242 | * require('data.json')：直接得到js对象。如果多个模块都加载了同一个json文件，那么其中一个改变了js对象，其它跟着改变，这是由node模块的缓存机制造成的，只有一个js模块对象 243 | * 第二种是读入文件入内容，然后用JSON.parse(content)转换成js对象。而且各模块互不影响，因为他们都是独立的，是多个js对象. 244 | 245 | ### 7.网络系统 246 | 247 | ``` 248 | var http = require('http'); // 加载http模块 249 | 250 | http.createServer(function(req, res) { 251 | // 200代表状态成功, 文档类型是给浏览器识别用的 252 | res.writeHead(200, {'Content-Type': 'text/html'}); 253 | 254 | // 返回给客户端的html数据 255 | res.write('hw'); 256 | res.end(); 257 | }).listen(3000); 258 | ``` 259 | 260 | ### 8.child-process 261 | 262 | ##### 1.什么？ 263 | * ode是异步非阻塞的，这对高并发非常有效．可是我们还有其它一些常用需求，比如和操作系统shell命令交互，调用可执行文件，创建子进程进行阻塞式访问或高CPU计算等，child-process就是为满足这些需求而生的．child-process顾名思义，就是把node阻塞的工作交给子进程去做． 264 | 265 | ##### 2. exec,execFile,spawn和fork都是做什么用的? 266 | * exec可以用操作系统原生的方式执行各种命令 267 | * execFile是执行一个文件 268 | * spawn是流式和操作系统进行交互 269 | * fork是两个node程序(javascript)之间时行交互. 270 | 271 | ##### 3. 实现简单的命令行交互程序 272 | ``` 273 | var cp = require('child_process'); 274 | 275 | // 执行命令 276 | var child = cp.spawn('ls'); 277 | 278 | // 把执行的命令的后的返回拿到这里 279 | child.stdout.on('data', (data) => { 280 | console.log(data.toString()); 281 | }); 282 | 283 | // 这句的意思是将子进程的输出(我们要执行这个命令)作为当前程序的输入流，然后重定向到当前程序的标准输出，即控制台 284 | child.stdout.pipe(process.stdout); 285 | ``` 286 | 287 | ##### 4.两个node程序之间怎样交互? 288 | 289 | ``` 290 | 1) fork-parent.js 291 | var cp = require('child_process'); 292 | var child = cp.fork('./fork-child.js'); 293 | // 接收儿子来的信息注册的事件 294 | child.on('message', function(msg){ 295 | console.log('老爸从儿子接受到数据:', msg); 296 | }); 297 | 298 | // 给儿子发送信息 299 | child.send('我是你爸爸，送关怀来了!'); 300 | 301 | 2) fork-child.js 302 | 303 | // 外面注册的事件 304 | process.on('message', function(msg){ 305 | console.log("儿子从老爸接收到的数据:", msg); 306 | 307 | // 向外发送 308 | process.send("我不要关怀，我要银民币！"); 309 | }); 310 | ``` 311 | -------------------------------------------------------------------------------- /src_webapp/modules/005_JS_003_ES6/readme.md: -------------------------------------------------------------------------------- 1 | # ES6 2 | 3 | ### 变量 4 | * let:块级变量，形成作用域，闭包。不允许在域内重新赋值。使用在for循环内的异步，闭包实现。 5 | * const：定义常量,初始化必须赋值，以后不允许改变。也是不允许重复声明。 6 | 7 | ### 解构赋值 8 | 9 | * 解构的变量需要和后面数据的key进行对应 10 | * 需要对解构前，被解构的对象有key:val； 11 | * 目的就是快速声明一个解构形式，把变量进行赋值； 12 | ``` 13 | let node = { 14 | type: "Identifier", 15 | name: "foo" 16 | }; 17 | const { type, name } = node; 18 | type = 1; 19 | ``` 20 | 21 | * 提前赋值的话，需要进行小括号包裹进行赋值； 22 | ``` 23 | let node = { 24 | type: "Identifier", 25 | name: "foo" 26 | }, 27 | type = "Literal", 28 | name = 5; 29 | 单独赋值：就是前面没有对内部变量类型的声明； 30 | ({ type, name } = node); 31 | 32 | console.log(type); // "Identifier" 33 | console.log(name); // "foo" 34 | ``` 35 | 36 | * 解构赋值既是对变量赋值，又是返回一个对象，可以作为参数传入。 37 | ``` 38 | let node = { 39 | type: "Identifier", 40 | name: "foo" 41 | }; 42 | function outputInfo(value) { 43 | console.log(value === node); // true 44 | } 45 | var { type, name } = {}; 46 | outputInfo({ type, name } = node); 47 | ``` 48 | 49 | * 也可以设置默认值 50 | ``` 51 | var {time=12,id=0}={}; 52 | console.log(time); // 12 53 | ``` 54 | 55 | * 多层嵌套就是看你解构到哪层 56 | ``` 57 | let obj = { 58 | a: { 59 | aa: 'aa', 60 | bb: 'bb' 61 | } 62 | }; 63 | let { a } = obj; 64 | console.log(a); // {aa: 'aa',bb: 'bb'} 65 | ``` 66 | 67 | * 数组解构，就是通过位置标识来确认要解构的值是在哪里 68 | ``` 69 | let colors = [ "red", "green", "blue" ]; 70 | let [ , , thirdColor ] = colors; 71 | console.log(thirdColor); // "blue" 72 | ``` 73 | 74 | * 如果有对应的变量声明，那就按照变量进行找 75 | ``` 76 | let a = 1, 77 | b = 2; 78 | [ a, b ] = [ b, a ]; 79 | console.log(a); // 2 80 | console.log(b); // 1 81 | ``` 82 | 83 | * 同样，数组嵌套的话，也是看解构到哪里了。 84 | ``` 85 | let colors = [ "red", [ "green", "lightgreen" ], "blue" ]; 86 | let [ firstColor, [ secondColor ] ] = colors; 87 | 88 | console.log(firstColor); // "red" 89 | console.log(secondColor); // "green" 90 | ``` 91 | 92 | ### Map 93 | 94 | * map对象上有多个方法，极其方便的操作数据 95 | ``` 96 | var map = new Map(); 97 | map.set('one', 1); 98 | ---------------------------------------------- 99 | var map = new Map([['one',1], ['two', 2], ['three', 3]]); 100 | for(var name of map){ 101 | console.log(name); 102 | } 103 | one,1 104 | two,2 105 | three,3 106 | ---------------------------------------------- 107 | console.log(map.size); 3 108 | map.clear(); 109 | console.log(map.size); 0 110 | ---------------------------------------------- 111 | console.log(map.has("one")); //true 112 | map.delete("one"); 113 | console.log(map.has("one")); //false 114 | ---------------------------------------------- 115 | for(var [a,b] of map.entries()){ 116 | console.log(a,b); 117 | } 118 | 119 | ---------------------------------------------- 120 | map.forEach(function(value, key, mapObj) { 121 | console.log(value + '---' + key + '---' + mapObj); 122 | //value - Map对象里每一个键值对的值 123 | //key - Map对象里每一个键值对的键 124 | //mapObj - Map对象本身 125 | console.log(this); //this === window 126 | }); 127 | map.forEach(function(value, key, mapObj) { 128 | console.log(value + '---' + key + '---' + mapObj); 129 | console.log(this); //this === map 130 | }, map) 131 | ---------------------------------------------- 132 | map.get(1); //'one' 133 | 134 | for(var name of map.keys()){ 135 | console.log(name); 136 | } 137 | 138 | for(var val of map.values()){ 139 | console.log(val); 140 | } 141 | ``` 142 | 143 | ### 箭头函数 144 | 145 | * 简化函数 146 | ``` 147 | var f = () => 5; 148 | == 149 | var f = function() { return 5}; 150 | ------------------------------------------------- 151 | 【有参数】 152 | var sum = ( a, b) => a + b; 153 | == 154 | var sum = function( a, b) { 155 | return a +b; 156 | } 157 | ------------------------------------------------- 158 | 多行代码，需要用{}包起来 159 | var sum = (a, b) => { 160 | console.log(a,b); 161 | return a+b; 162 | } 163 | ------------------------------------------------- 164 | 返回对象 165 | var get_obj = id => ({id: id, anme: "Temp"}); 166 | ``` 167 | 168 | * 用处： 169 | ``` 170 | [1,2,3].map(function(x){ 171 | return x*x; 172 | }); 173 | [1,2,3].map(x => x*x); 174 | -------------------------------------------- 175 | var arr = []; 176 | [1, 2, 3].map(x => arr.push(x * x)); 177 | 178 | -------------------------------------------- 179 | 配合解构赋值，把变量进行数组话 180 | const numbers = (...nums) => nums; 181 | numbers(1,2,3,4,5,6,7,8,9); //[1,2,3,4,5,6,7,8,9] 182 | ``` 183 | 184 | ### this指向问题 185 | 186 | * 涉及到箭头函数在哪里的问题，箭头函数内部的this,永远为定义箭头时，所在函数的this.任何方法改变不了。 187 | * 这个this指person 188 | ``` 189 | let person = { 190 | name: 'jike', 191 | init: function() { 192 | console.log(this); // 调用时的对象(函数) 193 | document.body.onclick = () => { 194 | alert(this.name); 195 | } 196 | } 197 | } 198 | person.init(); //this-->person对象 199 | person.init.call(this); //this-->windows 200 | -------------------------------------------------------- 201 | var person = { 202 | name:'jike', 203 | init:()=>{ 204 | console.log(this); // 创建时所在函数的this，就是window 205 | document.body.onclick = ()=>{ 206 | alert(this.name); 207 | } 208 | } 209 | } 210 | person.init(); //this-->window 211 | person.init.call({}); //this-->window 212 | -------------------------------------------------------- 213 | function foo() { 214 | console.log(this); //外面函数的this,直接调用就是widow 215 | setTimeout(() => { 216 | console.log('id:', this.id); //创建时的this,就是外面函数的this 217 | }, 100); 218 | } 219 | 220 | var id = 21; 221 | foo.call({ id: 42 }); // 被指向其他对象，所以打印是{ id: 42 }；打印为42 222 | ------------------------------------------------------- 223 | function foo() { 224 | setTimeout(function() { 225 | console.log('id:', this.id); // 就是调用setTimeout函数的this,就是window 226 | }, 100); 227 | } 228 | 229 | var id = 21; 230 | foo.call({ id: 42 }); 231 | //虽然foo的this发生改变，但是setTimeout的this还是window；var id = 21;全局变量，打印为21 232 | -------------------------------------------------------- 233 | function Timer() { 234 | this.s1 = 0; 235 | this.s2 = 0; 236 | // 箭头函数 237 | setInterval(() => this.s1++, 1000); //this就是Timer对象 238 | // 普通函数 239 | setInterval(function () { //this就是window 240 | this.s2++; 241 | }, 1000); 242 | } 243 | var timer = new Timer(); 244 | setTimeout(() => console.log('s1: ', timer.s1), 3100); //3 245 | setTimeout(() => console.log('s2: ', timer.s2), 3100); //0 246 | 247 | 3s后 248 | ** 249 | setInterval(() => this.s1++, 1000); 已经执行三次，this为timer对象 250 | ** 251 | setInterval(function () { this.s2++;}, 1000); 尽管执行三次，但是window上没有这个值。也就是说，setInterval改变的是window上s2的值，不是timer的s2，所以打印是最后打印的是timer对象上的s2值。 252 | ``` 253 | 254 | * 到这，知道function的this就是谁调用它，就是谁。()=>{}就是一直往上找所在函数的this; 255 | * 除了this，以下三个变量在箭头函数之中也是不存在的，指向外层函数的对应变量：arguments、super、new.target。 256 | * 由于箭头函数没有自己的this，所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。 257 | * 箭头函数没有原型属性，所以就不能做构造函数。 258 | 259 | ### 类 260 | 261 | ``` 262 | class Person { 263 | constructor(name = 'aa', age = 0) { 264 | this.name = name; 265 | this.age = age; 266 | } 267 | showName() { 268 | console.log(this.name); 269 | return this.name; 270 | } 271 | showAge() { 272 | return this.age; 273 | } 274 | } 275 | var p1=new Person('aaa',10); 276 | var p2=new Person('bbb',20); 277 | console.log(p2.showName==p1.showName); 278 | console.log(p1.constructor==Person); 279 | 280 | --------------------------------------------- 281 | class Worker extends Person { 282 | constructor(name, age, job = '扫地的') { 283 | super(name, age); 284 | this.job = job; 285 | } 286 | showJob() { 287 | return this.job; 288 | } 289 | } 290 | var w1 = new Worker('mmm', 56); 291 | w1.showName() 292 | ``` 293 | 294 | -------------------------------------------------------------------------------- /src_webapp/modules/017_Vue/readme.md: -------------------------------------------------------------------------------- 1 | # vue 2 | 3 | ### less(css的预编译) 4 | ``` 5 | style-loader!css-loader!less-loader 6 | 7 |