├── starwars ├── readme.md └── base.html ├── README.md ├── reverse_str ├── reamme.md ├── 3.js ├── 1.js ├── index.html └── reg.html ├── weapp ├── mycar │ ├── pages │ │ ├── stories │ │ │ ├── index.json │ │ │ ├── index.wxss │ │ │ ├── index.js │ │ │ └── index.wxml │ │ ├── vehicles │ │ │ ├── show.wxml │ │ │ ├── show.wxss │ │ │ ├── show.json │ │ │ └── show.js │ │ ├── index │ │ │ ├── index.json │ │ │ ├── index.wxml │ │ │ └── index.js │ │ └── logs │ │ │ ├── logs.json │ │ │ ├── logs.wxss │ │ │ ├── logs.wxml │ │ │ └── logs.js │ ├── assets │ │ └── icons │ │ │ ├── home.png │ │ │ ├── event.png │ │ │ ├── event-active.png │ │ │ └── home-active.png │ ├── styles │ │ ├── action.wxss │ │ ├── reset.wxss │ │ ├── button.wxss │ │ └── hero.wxss │ ├── sitemap.json │ ├── project.private.config.json │ ├── app.wxss │ ├── app.js │ ├── readme.md │ ├── utils │ │ └── util.js │ ├── app.json │ └── project.config.json ├── discovery │ ├── pages │ │ ├── detail │ │ │ ├── index.wxss │ │ │ ├── index.json │ │ │ ├── index.wxml │ │ │ └── index.js │ │ ├── index │ │ │ ├── index.json │ │ │ ├── index.wxml │ │ │ ├── index.wxss │ │ │ └── index.js │ │ └── logs │ │ │ ├── logs.json │ │ │ ├── logs.wxss │ │ │ ├── logs.wxml │ │ │ └── logs.js │ ├── sitemap.json │ ├── app.wxss │ ├── project.private.config.json │ ├── app.json │ ├── app.js │ ├── utils │ │ └── util.js │ └── project.config.json ├── didi-bike │ ├── home │ │ ├── index.wxss │ │ ├── index.json │ │ ├── index.wxml │ │ └── index.js │ ├── pages │ │ ├── home │ │ │ ├── index.json │ │ │ ├── index.wxml │ │ │ ├── index.wxss │ │ │ └── index.js │ │ ├── index │ │ │ ├── index.json │ │ │ ├── index.wxml │ │ │ └── index.wxss │ │ └── logs │ │ │ ├── logs.json │ │ │ ├── logs.wxss │ │ │ ├── logs.wxml │ │ │ └── logs.js │ ├── images │ │ ├── i.png │ │ ├── coupon.png │ │ ├── repair.png │ │ ├── reset.png │ │ ├── stroke.png │ │ ├── wechat.png │ │ ├── icon-msg.png │ │ ├── icon-user.png │ │ ├── no-record.png │ │ ├── success.png │ │ ├── top-tip.png │ │ ├── warning.png │ │ ├── arrow-right.png │ │ ├── map-bicycle.png │ │ ├── ridingCard.png │ │ ├── map-shadow-btm.png │ │ ├── map-shadow-top.png │ │ ├── point_in_map.png │ │ ├── unlock_loading.png │ │ └── icon_none_msg@2x.png │ ├── sitemap.json │ ├── project.private.config.json │ ├── app.wxss │ ├── app.js │ ├── readme.md │ ├── app.json │ ├── utils │ │ └── util.js │ └── project.config.json ├── wangzhe │ ├── pages │ │ ├── index │ │ │ ├── index.json │ │ │ ├── index.wxml │ │ │ ├── index.wxss │ │ │ └── index.js │ │ └── logs │ │ │ ├── logs.json │ │ │ ├── logs.wxss │ │ │ ├── logs.wxml │ │ │ └── logs.js │ ├── app.wxss │ ├── sitemap.json │ ├── project.private.config.json │ ├── app.json │ ├── app.js │ ├── utils │ │ └── util.js │ ├── readme.md │ └── project.config.json └── readme.md ├── js ├── newFunction │ ├── reame.md │ ├── index.html │ └── 1.js ├── shouxie- │ ├── readme.md │ ├── index.html │ ├── 1.js │ └── 2.js ├── gainian │ ├── 4.js │ ├── 6.js │ ├── 7.js │ ├── 5.js │ ├── 2.js │ ├── 1.js │ ├── 1.html │ ├── 2.html │ └── readme.md ├── new_func │ ├── 2.js │ ├── demo.html │ ├── 1.js │ ├── this.html │ ├── readme.md │ ├── call.html │ ├── arrow_function.html │ └── index.html ├── shouxie │ └── push │ │ ├── 3.js │ │ ├── 1.js │ │ ├── 2.js │ │ └── readme.md ├── router │ ├── demo.html │ ├── a.html │ ├── b.html │ ├── readme.md │ ├── hash │ │ ├── hash.html │ │ ├── readme.md │ │ └── index.html │ ├── shouxie │ │ ├── history.html │ │ └── 1.html │ └── index.html ├── arr_func │ ├── readme.md │ └── 1.html ├── function_demo │ ├── 3.js │ ├── 1.js │ ├── 2.js │ └── readme.md ├── bigData │ ├── readme.md │ ├── index.html │ ├── 2.html │ └── 3.html ├── getTypeof │ ├── 4.html │ ├── 2.html │ ├── 1.html │ ├── 5.html │ ├── 3.html │ └── readme.md ├── index.md ├── debounce │ ├── readme.md │ ├── resize.html │ ├── scroll.html │ └── 2.html ├── salary │ ├── readme.md │ └── index.html ├── coffee │ ├── readme.md │ ├── index.html │ └── demo.html ├── closuer │ ├── 2.html │ └── readme.md └── index.html ├── codewars ├── phone_number │ ├── readme.md │ └── 1.js └── api │ ├── 1.js │ ├── 2.js │ ├── readme.md │ └── 3.js ├── ryf └── object │ ├── 5.js │ ├── 4.js │ ├── 2.js │ ├── index.html │ ├── 1.js │ ├── 6.js │ ├── 3.js │ └── readme.md ├── yayu ├── 3.js ├── 4.js ├── 1.js ├── debounce │ ├── debounce.js │ ├── readme.md │ └── demo.html ├── readme.md ├── 2.js ├── 5.js └── 6.js ├── algorithm └── sort │ ├── 3.js │ ├── 1.js │ ├── 2.js │ ├── 7.js │ ├── readme.md │ ├── 5.js │ └── 4.js ├── alibaba ├── rem-8.png └── readme.md ├── css ├── music_summary │ ├── bgm.mp3 │ ├── assert │ │ ├── close.png │ │ ├── music.png │ │ ├── mine │ │ │ ├── edit.png │ │ │ ├── crown1.png │ │ │ ├── leida.png │ │ │ ├── suggest.png │ │ │ ├── superMe.png │ │ │ ├── customer.png │ │ │ ├── tutorial.png │ │ │ └── find-group.png │ │ └── cat │ │ │ ├── maowei.png │ │ │ ├── maoyan1.png │ │ │ ├── maoyan2.png │ │ │ ├── maozhua.png │ │ │ ├── maozui.png │ │ │ ├── maoshenti.png │ │ │ └── cat-animation.mp4 │ └── readme.md ├── center │ ├── calc.css │ ├── flex.css │ ├── rel_abs.css │ ├── base.css │ ├── index.html │ └── readme.md ├── flexdemo │ ├── readme.md │ └── flex.css ├── 3column │ ├── 1.html │ ├── readme.md │ ├── clone.html │ └── index.html ├── bfc │ ├── demo.html │ ├── readme.md │ └── index.html └── flex │ ├── flex-2col.html │ ├── index.html │ └── flex-col.html ├── tecent └── weui │ ├── common.css │ ├── index.html │ └── btn.css ├── interview ├── html5 │ └── file_api │ │ └── readme.md ├── js │ ├── 8.js │ ├── 3.js │ ├── 2.js │ ├── 6.js │ ├── 5.js │ ├── 7.js │ ├── promise_3_methods │ │ ├── readme.md │ │ ├── index.js │ │ ├── index.html │ │ ├── 3.html │ │ └── 4.html │ ├── 4.js │ ├── 1.js │ └── readme.md ├── let _var_const │ ├── readme.md │ └── index.html └── css │ └── css_variable │ └── readme.md ├── git └── readme.md ├── leetcode ├── readme.md ├── 1.js ├── 1.html └── 2.js ├── data-vision └── demo1 │ ├── barchart │ └── canvas │ │ ├── svg.html │ │ └── index.js │ ├── echarts-demo │ ├── package.json │ ├── index.html │ ├── README.md │ ├── src │ │ └── App.vue │ └── public │ │ └── vite.svg │ └── echarts │ └── index.html ├── design_pattern ├── pubSub │ └── readme.md ├── readme.md └── index.html ├── king ├── readme.md └── index.html ├── vue3 ├── todos │ ├── readme.md │ ├── 2.html │ └── 1.html ├── api │ ├── readme.md │ ├── demo4.html │ ├── demo.html │ └── demo2.html └── readme.md ├── drag_n_drop ├── index.html ├── bz.html ├── common.css ├── readme.md └── script.js └── sql └── readme.md /starwars/readme.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # lesson_my 2 | 全栈学习 3 | -------------------------------------------------------------------------------- /reverse_str/reamme.md: -------------------------------------------------------------------------------- 1 | # 反转字符串 2 | -------------------------------------------------------------------------------- /weapp/mycar/pages/stories/index.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /weapp/mycar/pages/stories/index.wxss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /js/newFunction/reame.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /weapp/discovery/pages/detail/index.wxss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /codewars/phone_number/readme.md: -------------------------------------------------------------------------------- 1 | 一堆数字， 返回电话号码格式 2 | -------------------------------------------------------------------------------- /weapp/didi-bike/home/index.wxss: -------------------------------------------------------------------------------- 1 | /* home/index.wxss */ -------------------------------------------------------------------------------- /weapp/mycar/pages/stories/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | 3 | }) -------------------------------------------------------------------------------- /weapp/mycar/pages/stories/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /weapp/didi-bike/home/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | } -------------------------------------------------------------------------------- /weapp/mycar/pages/vehicles/show.wxml: -------------------------------------------------------------------------------- 1 | 2 | show 3 | -------------------------------------------------------------------------------- /weapp/mycar/pages/vehicles/show.wxss: -------------------------------------------------------------------------------- 1 | /* pages/vehicles/show.wxss */ -------------------------------------------------------------------------------- /js/shouxie-/readme.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /ryf/object/5.js: -------------------------------------------------------------------------------- 1 | const obj = { 2 | name: 'Edison' 3 | } 4 | 5 | -------------------------------------------------------------------------------- /weapp/didi-bike/pages/home/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | } -------------------------------------------------------------------------------- /weapp/didi-bike/pages/index/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | } -------------------------------------------------------------------------------- /weapp/mycar/pages/index/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | } -------------------------------------------------------------------------------- /weapp/mycar/pages/vehicles/show.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | } -------------------------------------------------------------------------------- /weapp/wangzhe/pages/index/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | } -------------------------------------------------------------------------------- /yayu/3.js: -------------------------------------------------------------------------------- 1 | // 全局作用域 执行的低端是全局 2 | let a = 1; 3 | let b = 2; 4 | let c = a + b; -------------------------------------------------------------------------------- /algorithm/sort/3.js: -------------------------------------------------------------------------------- 1 | let x = 1, y = 2; 2 | // es6 快速交换 3 | [x,y] = [y,x]; 4 | -------------------------------------------------------------------------------- /weapp/discovery/pages/detail/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "详情页" 3 | } -------------------------------------------------------------------------------- /weapp/discovery/pages/detail/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 汽车详情页 3 | -------------------------------------------------------------------------------- /alibaba/rem-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/alibaba/rem-8.png -------------------------------------------------------------------------------- /js/gainian/4.js: -------------------------------------------------------------------------------- 1 | var arr = [1,2,3,4]; 2 | var index = arr.indexOf(3) 3 | console.log(index); -------------------------------------------------------------------------------- /weapp/didi-bike/home/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | home/index.wxml 3 | -------------------------------------------------------------------------------- /codewars/api/1.js: -------------------------------------------------------------------------------- 1 | const arr = ['a','b','c','d','e','f']; 2 | console.log(arr.slice(2,4),arr); 3 | -------------------------------------------------------------------------------- /js/gainian/6.js: -------------------------------------------------------------------------------- 1 | var arr = [1,2,3,4]; 2 | var result = arr.find(i => i == 5) 3 | console.log(result); -------------------------------------------------------------------------------- /css/music_summary/bgm.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/css/music_summary/bgm.mp3 -------------------------------------------------------------------------------- /js/gainian/7.js: -------------------------------------------------------------------------------- 1 | var arr = [1,2,3,4]; 2 | var result = arr.findIndex(i => i == 4) 3 | console.log(result); -------------------------------------------------------------------------------- /weapp/didi-bike/images/i.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/weapp/didi-bike/images/i.png -------------------------------------------------------------------------------- /weapp/didi-bike/pages/logs/logs.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "查看启动日志", 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /weapp/discovery/pages/index/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "navigationBarTitleText": "首页" 4 | } -------------------------------------------------------------------------------- /weapp/discovery/pages/logs/logs.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "查看启动日志", 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /weapp/mycar/pages/logs/logs.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "查看启动日志", 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /weapp/wangzhe/pages/logs/logs.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "查看启动日志", 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /weapp/didi-bike/images/coupon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/weapp/didi-bike/images/coupon.png -------------------------------------------------------------------------------- /weapp/didi-bike/images/repair.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/weapp/didi-bike/images/repair.png -------------------------------------------------------------------------------- /weapp/didi-bike/images/reset.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/weapp/didi-bike/images/reset.png -------------------------------------------------------------------------------- /weapp/didi-bike/images/stroke.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/weapp/didi-bike/images/stroke.png -------------------------------------------------------------------------------- /weapp/didi-bike/images/wechat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/weapp/didi-bike/images/wechat.png -------------------------------------------------------------------------------- /weapp/mycar/assets/icons/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/weapp/mycar/assets/icons/home.png -------------------------------------------------------------------------------- /css/music_summary/assert/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/css/music_summary/assert/close.png -------------------------------------------------------------------------------- /css/music_summary/assert/music.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/css/music_summary/assert/music.png -------------------------------------------------------------------------------- /js/new_func/2.js: -------------------------------------------------------------------------------- 1 | // 立即运行函数 2 | // window 3 | // this来自外层 4 | (() => { 5 | // 不会分配this 6 | console.log(this); 7 | })() -------------------------------------------------------------------------------- /tecent/weui/common.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | a { 7 | text-decoration: none; 8 | } -------------------------------------------------------------------------------- /weapp/didi-bike/images/icon-msg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/weapp/didi-bike/images/icon-msg.png -------------------------------------------------------------------------------- /weapp/didi-bike/images/icon-user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/weapp/didi-bike/images/icon-user.png -------------------------------------------------------------------------------- /weapp/didi-bike/images/no-record.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/weapp/didi-bike/images/no-record.png -------------------------------------------------------------------------------- /weapp/didi-bike/images/success.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/weapp/didi-bike/images/success.png -------------------------------------------------------------------------------- /weapp/didi-bike/images/top-tip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/weapp/didi-bike/images/top-tip.png -------------------------------------------------------------------------------- /weapp/didi-bike/images/warning.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/weapp/didi-bike/images/warning.png -------------------------------------------------------------------------------- /weapp/mycar/assets/icons/event.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/weapp/mycar/assets/icons/event.png -------------------------------------------------------------------------------- /css/music_summary/assert/mine/edit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/css/music_summary/assert/mine/edit.png -------------------------------------------------------------------------------- /weapp/didi-bike/images/arrow-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/weapp/didi-bike/images/arrow-right.png -------------------------------------------------------------------------------- /weapp/didi-bike/images/map-bicycle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/weapp/didi-bike/images/map-bicycle.png -------------------------------------------------------------------------------- /weapp/didi-bike/images/ridingCard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/weapp/didi-bike/images/ridingCard.png -------------------------------------------------------------------------------- /css/music_summary/assert/cat/maowei.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/css/music_summary/assert/cat/maowei.png -------------------------------------------------------------------------------- /css/music_summary/assert/cat/maoyan1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/css/music_summary/assert/cat/maoyan1.png -------------------------------------------------------------------------------- /css/music_summary/assert/cat/maoyan2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/css/music_summary/assert/cat/maoyan2.png -------------------------------------------------------------------------------- /css/music_summary/assert/cat/maozhua.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/css/music_summary/assert/cat/maozhua.png -------------------------------------------------------------------------------- /css/music_summary/assert/cat/maozui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/css/music_summary/assert/cat/maozui.png -------------------------------------------------------------------------------- /css/music_summary/assert/mine/crown1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/css/music_summary/assert/mine/crown1.png -------------------------------------------------------------------------------- /css/music_summary/assert/mine/leida.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/css/music_summary/assert/mine/leida.png -------------------------------------------------------------------------------- /css/music_summary/assert/mine/suggest.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/css/music_summary/assert/mine/suggest.png -------------------------------------------------------------------------------- /css/music_summary/assert/mine/superMe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/css/music_summary/assert/mine/superMe.png -------------------------------------------------------------------------------- /weapp/didi-bike/images/map-shadow-btm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/weapp/didi-bike/images/map-shadow-btm.png -------------------------------------------------------------------------------- /weapp/didi-bike/images/map-shadow-top.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/weapp/didi-bike/images/map-shadow-top.png -------------------------------------------------------------------------------- /weapp/didi-bike/images/point_in_map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/weapp/didi-bike/images/point_in_map.png -------------------------------------------------------------------------------- /weapp/didi-bike/images/unlock_loading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/weapp/didi-bike/images/unlock_loading.png -------------------------------------------------------------------------------- /weapp/mycar/assets/icons/event-active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/weapp/mycar/assets/icons/event-active.png -------------------------------------------------------------------------------- /weapp/mycar/assets/icons/home-active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/weapp/mycar/assets/icons/home-active.png -------------------------------------------------------------------------------- /weapp/mycar/pages/vehicles/show.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | onLoad(options) { 3 | let id = options.id 4 | console.log(id) 5 | } 6 | }) -------------------------------------------------------------------------------- /css/music_summary/assert/cat/maoshenti.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/css/music_summary/assert/cat/maoshenti.png -------------------------------------------------------------------------------- /css/music_summary/assert/mine/customer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/css/music_summary/assert/mine/customer.png -------------------------------------------------------------------------------- /css/music_summary/assert/mine/tutorial.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/css/music_summary/assert/mine/tutorial.png -------------------------------------------------------------------------------- /js/gainian/5.js: -------------------------------------------------------------------------------- 1 | var arr = [1,2,3,4,5]; 2 | if(arr.includes(8)) { 3 | console.log('存在'); 4 | }else { 5 | console.log('不存在'); 6 | } -------------------------------------------------------------------------------- /weapp/didi-bike/images/icon_none_msg@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/weapp/didi-bike/images/icon_none_msg@2x.png -------------------------------------------------------------------------------- /codewars/api/2.js: -------------------------------------------------------------------------------- 1 | var arr1 = ['a','b','c','d','e','f']; 2 | // console.log(arr1.splice(1),arr1); 3 | console.log(arr1.splice(2,3,'js','vue'),arr1); -------------------------------------------------------------------------------- /css/music_summary/assert/cat/cat-animation.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/css/music_summary/assert/cat/cat-animation.mp4 -------------------------------------------------------------------------------- /css/music_summary/assert/mine/find-group.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WEDISON123/lesson_my/HEAD/css/music_summary/assert/mine/find-group.png -------------------------------------------------------------------------------- /interview/html5/file_api/readme.md: -------------------------------------------------------------------------------- 1 | # html5 文件能力 2 | 3 | - js前端 宿主环境是？ 4 | - 浏览器 5 | - 跳出浏览器(Interner proxy)束缚，访问用户的操作系统(OS)文件系统 FileSystem 6 | -------------------------------------------------------------------------------- /ryf/object/4.js: -------------------------------------------------------------------------------- 1 | function Cat(name,color) { 2 | return { 3 | name:name, 4 | color:color 5 | } 6 | } 7 | var cat1 = Cat("大毛","黄色"); -------------------------------------------------------------------------------- /weapp/mycar/styles/action.wxss: -------------------------------------------------------------------------------- 1 | .action { 2 | text-align: center; 3 | padding: 80rpx; 4 | } 5 | 6 | .action.description { 7 | margin-bottom: 48rpx; 8 | } -------------------------------------------------------------------------------- /yayu/4.js: -------------------------------------------------------------------------------- 1 | function a() { 2 | let c = 1; 3 | return function b() { 4 | 5 | } 6 | } 7 | const funcB = a(); 8 | funcB();// 运行时可以找到定义时的上下文环境的变量 9 | -------------------------------------------------------------------------------- /weapp/mycar/pages/logs/logs.wxss: -------------------------------------------------------------------------------- 1 | .log-list { 2 | display: flex; 3 | flex-direction: column; 4 | padding: 40rpx; 5 | } 6 | .log-item { 7 | margin: 10rpx; 8 | } 9 | -------------------------------------------------------------------------------- /weapp/wangzhe/pages/logs/logs.wxss: -------------------------------------------------------------------------------- 1 | .log-list { 2 | display: flex; 3 | flex-direction: column; 4 | padding: 40rpx; 5 | } 6 | .log-item { 7 | margin: 10rpx; 8 | } 9 | -------------------------------------------------------------------------------- /css/center/calc.css: -------------------------------------------------------------------------------- 1 | .wp { 2 | position: relative; 3 | } 4 | 5 | .box { 6 | position: absolute; 7 | top:calc(50% - 50px); 8 | left: calc(50% - 50px); 9 | } -------------------------------------------------------------------------------- /weapp/didi-bike/pages/logs/logs.wxss: -------------------------------------------------------------------------------- 1 | .log-list { 2 | display: flex; 3 | flex-direction: column; 4 | padding: 40rpx; 5 | } 6 | .log-item { 7 | margin: 10rpx; 8 | } 9 | -------------------------------------------------------------------------------- /weapp/discovery/pages/logs/logs.wxss: -------------------------------------------------------------------------------- 1 | .log-list { 2 | display: flex; 3 | flex-direction: column; 4 | padding: 40rpx; 5 | } 6 | .log-item { 7 | margin: 10rpx; 8 | } 9 | -------------------------------------------------------------------------------- /algorithm/sort/1.js: -------------------------------------------------------------------------------- 1 | // 算法题目 先排序 再计算 2 | // 冒泡 堆排序 快排序 选择排序 插入排序 3 | const arr = [4,2,4,8,0,1,6,5]; 4 | arr.sort((a,b) => { 5 | return a - b 6 | }) 7 | console.log(arr); 8 | -------------------------------------------------------------------------------- /yayu/1.js: -------------------------------------------------------------------------------- 1 | function add(a,b) { 2 | return a + b; 3 | } 4 | // 假设memorize 可以实现函数记忆 5 | // memorize 函数 () add -> 6 | var memorizedAdd = memorize(add); 7 | memorizedAdd(1,1); -------------------------------------------------------------------------------- /weapp/mycar/sitemap.json: -------------------------------------------------------------------------------- 1 | { 2 | "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", 3 | "rules": [{ 4 | "action": "allow", 5 | "page": "*" 6 | }] 7 | } -------------------------------------------------------------------------------- /weapp/wangzhe/app.wxss: -------------------------------------------------------------------------------- 1 | /* 全局样式 */ 2 | .container { 3 | height: 100%; 4 | padding: 0; 5 | } 6 | 7 | page { 8 | width: 100%; 9 | overflow-x: hidden; 10 | background-color: #12203c; 11 | } -------------------------------------------------------------------------------- /weapp/didi-bike/sitemap.json: -------------------------------------------------------------------------------- 1 | { 2 | "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", 3 | "rules": [{ 4 | "action": "allow", 5 | "page": "*" 6 | }] 7 | } -------------------------------------------------------------------------------- /weapp/discovery/sitemap.json: -------------------------------------------------------------------------------- 1 | { 2 | "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", 3 | "rules": [{ 4 | "action": "allow", 5 | "page": "*" 6 | }] 7 | } -------------------------------------------------------------------------------- /weapp/wangzhe/sitemap.json: -------------------------------------------------------------------------------- 1 | { 2 | "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", 3 | "rules": [{ 4 | "action": "allow", 5 | "page": "*" 6 | }] 7 | } -------------------------------------------------------------------------------- /codewars/api/readme.md: -------------------------------------------------------------------------------- 1 | - silce 2 | - 从数组中截取任意个元素， 返回结果为新的数组 3 | - 不改变原来的数组 4 | 5 | - splice 6 | - 从数组删除任意个元素 7 | - 返回结果为被删除元素组成的新数组 8 | - 该方法会改变原数组，会将指定元素从数组中删除 9 | 10 | - split 11 | - 字符串方法 -------------------------------------------------------------------------------- /yayu/debounce/debounce.js: -------------------------------------------------------------------------------- 1 | var count = 1; 2 | var container = document.getElementById('container'); 3 | 4 | function getUserAction() { 5 | container.innerHTML = count++; 6 | }; 7 | 8 | container.onmousemove = getUserAction; -------------------------------------------------------------------------------- /yayu/debounce/readme.md: -------------------------------------------------------------------------------- 1 | - 你是怎么理解js 事件的 2 | 1. 事件的类型 3 | 2. addEventListener('') 4 | 第三个参数，默认false,可省略 冒泡机制 5 | true 捕获机制 6 | 两个阶段 冒泡阶段 捕获阶段 7 | 3. 事件到底怎么发生 8 | 事件类型 target 处理函数 9 | -------------------------------------------------------------------------------- /weapp/mycar/pages/logs/logs.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{index + 1}}. {{log.date}} 5 | 6 | 7 | -------------------------------------------------------------------------------- /interview/js/8.js: -------------------------------------------------------------------------------- 1 | let obj = { name: 'sy', age: 18, homeTown: { name: 'bbb' } } 2 | const obj2 = Object.assign( {}, obj, { name: 'aaa' }) // 浅拷贝 3 | console.log(obj, obj2); 4 | obj2.homeTown.name = 'ccc' 5 | obj2.name = 'eee' 6 | console.log(obj, obj2); -------------------------------------------------------------------------------- /weapp/didi-bike/pages/logs/logs.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{index + 1}}. {{log.date}} 5 | 6 | 7 | -------------------------------------------------------------------------------- /weapp/discovery/pages/logs/logs.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{index + 1}}. {{log.date}} 5 | 6 | 7 | -------------------------------------------------------------------------------- /weapp/mycar/styles/reset.wxss: -------------------------------------------------------------------------------- 1 | image { 2 | display: block; 3 | width: 100%; 4 | } 5 | 6 | video { 7 | width: 100%; 8 | } 9 | 10 | page { 11 | line-height: 1.5; 12 | /* 小程序独有， rpx 适配所有手机 750 */ 13 | font-size: 32rpx; 14 | } -------------------------------------------------------------------------------- /weapp/wangzhe/pages/logs/logs.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{index + 1}}. {{log.date}} 5 | 6 | 7 | -------------------------------------------------------------------------------- /css/flexdemo/readme.md: -------------------------------------------------------------------------------- 1 | # 界面构建能力 2 | - 栅格系统 3 | 页面布局的基础 4 | - 先做布局， 不要急于做样式 5 | BFC 块级元素从上到下 6 | 从外到内 7 | 1. 先写html结构 8 | 2. 再写样式 9 | 取类名 10 | 类名词汇量 简单 贴切 11 | 3. 行列布局 12 | 4. 样式只是体力活 13 | - 从块级改变布局 -------------------------------------------------------------------------------- /interview/js/3.js: -------------------------------------------------------------------------------- 1 | // 手写map 2 | let nums = [1,2,3] 3 | let obj = { val: 5 } // map 回调函数 绑定它的this 4 | let newNums = nums.map(function(item, index, array) { 5 | return item + index + array[index] + this.val 6 | },obj) 7 | console.log(newNums); 8 | 9 | -------------------------------------------------------------------------------- /css/center/flex.css: -------------------------------------------------------------------------------- 1 | .wp { 2 | /* display: block; 3 | display: inline; 4 | display: inline-block; */ 5 | /* 新的布局可能 弹性布局 */ 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | } 10 | .box { 11 | 12 | } -------------------------------------------------------------------------------- /css/center/rel_abs.css: -------------------------------------------------------------------------------- 1 | .wp{ 2 | position: relative; 3 | } 4 | 5 | .box{ 6 | position: absolute; 7 | top: 50%; 8 | left: 50%; 9 | transform: translate(-50%,-50%); 10 | /* margin-left: -50px; 11 | margin-top: -50px; */ 12 | } -------------------------------------------------------------------------------- /weapp/discovery/app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | .container { 3 | height: 100%; 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | justify-content: space-between; 8 | padding: 200rpx 0; 9 | box-sizing: border-box; 10 | } 11 | -------------------------------------------------------------------------------- /codewars/api/3.js: -------------------------------------------------------------------------------- 1 | let word = 'how are you doing ee oday'; 2 | const arr = word.split(' '); 3 | 4 | 5 | var x = arr[0].length; 6 | for(var i = 0; i < arr.length; i ++) { 7 | if(x >= arr[i].length) { 8 | x =arr[i].length; 9 | } 10 | } 11 | console.log(x); -------------------------------------------------------------------------------- /git/readme.md: -------------------------------------------------------------------------------- 1 | - git init 2 | - git add readme.me(相应的文件)多次添加到暂存区 3 | - git commit -m 'reason' 一次性提交 4 | - git log --oneline 查看提交记录 5 | - git reset --hard HEAD^ 回到上一个版本/ 版本号 回到该版本 6 | - git ststus 当前仓库情况 7 | - git pull origin master 拉下来 8 | - git push origin master 提交到远程仓库 9 | - git diff 有什么不一样的地方 -------------------------------------------------------------------------------- /ryf/object/2.js: -------------------------------------------------------------------------------- 1 | // 构造函数 2 | // js 没有class， 不是传统的面向对象字面量 3 | // constructor 4 | // js function 代替 class 类的封装 5 | // 基于对象 6 | function Person (name, age) { 7 | this.name = name; 8 | this.age = age; 9 | } 10 | // 实例化 11 | const wzz = new Person('温正中',20) 12 | console.log(wzz.name); -------------------------------------------------------------------------------- /weapp/discovery/pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {{title}} 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /weapp/mycar/project.private.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html", 3 | "projectname": "mycar", 4 | "setting": { 5 | "compileHotReLoad": true 6 | } 7 | } -------------------------------------------------------------------------------- /weapp/discovery/project.private.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html", 3 | "projectname": "discovery", 4 | "setting": { 5 | "compileHotReLoad": true 6 | } 7 | } -------------------------------------------------------------------------------- /weapp/mycar/app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss 2 | 统一设置每个页面 3 | **/ 4 | /* 引入外部样式 */ 5 | @import "styles/reset.wxss"; 6 | @import "styles/hero.wxss"; 7 | @import "styles/button.wxss"; 8 | @import "styles/action.wxss"; 9 | page { 10 | background-color: #f8f8f8; 11 | } 12 | 13 | .section { 14 | height: 100vh; 15 | } 16 | -------------------------------------------------------------------------------- /weapp/wangzhe/project.private.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html", 3 | "projectname": "wangzhe", 4 | "setting": { 5 | "compileHotReLoad": true, 6 | "urlCheck": false 7 | } 8 | } -------------------------------------------------------------------------------- /algorithm/sort/2.js: -------------------------------------------------------------------------------- 1 | // 内存分配 放在栈内存 stack 2 | let x = 1,y = 2; // 简单 3 | let c = x; // 值的拷贝 4 | c = 3; 5 | console.log(x); 6 | // 内存分配 对象放在堆内存中 heap 7 | let o = {name: 'wen'};// 对象 8 | let b = o; // 指针的引用 9 | b.name = '飞飞'; 10 | console.log(o.name); 11 | let z; 12 | z = x; 13 | x = y; 14 | y = z; 15 | console.log(x,y); -------------------------------------------------------------------------------- /reverse_str/3.js: -------------------------------------------------------------------------------- 1 | function isPalindrome(str) { 2 | // 缓存字符长度 3 | const len = str.length; 4 | for (let i = 0; i 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /js/shouxie-/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /js/router/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 首页 11 | 12 | -------------------------------------------------------------------------------- /js/new_func/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 12 | 13 | -------------------------------------------------------------------------------- /ryf/object/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /weapp/didi-bike/app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | image { 3 | max-width: 100%; 4 | } 5 | .container { 6 | height: 100vh; 7 | background-color: #f2f2f2; 8 | } 9 | 10 | .flex { 11 | display: flex; 12 | } 13 | 14 | .wp_cell { 15 | display:flex; 16 | } 17 | .wp_cell__hd { 18 | } 19 | .wp_cell__bd { 20 | /* 主要元素 */ 21 | flex: 1; 22 | } 23 | .wp_cell__ft { 24 | } 25 | -------------------------------------------------------------------------------- /weapp/wangzhe/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "pages/index/index", 4 | "pages/logs/logs" 5 | ], 6 | "window":{ 7 | "backgroundTextStyle":"light", 8 | "navigationBarBackgroundColor": "#fff", 9 | "navigationBarTitleText": "Weixin", 10 | "navigationBarTextStyle":"black" 11 | }, 12 | "style": "v2", 13 | "sitemapLocation": "sitemap.json" 14 | } 15 | -------------------------------------------------------------------------------- /js/gainian/2.js: -------------------------------------------------------------------------------- 1 | function sum(a, b) { 2 | let args = Array.prototype.concat.apply([],arguments); 3 | console.log(args); 4 | // const result = 0 5 | // for(let item of args) { 6 | // result += item 7 | // } 8 | // return result 9 | // reduce pre + cur 10 | return args.reduce( (sum, cur) => sum + cur,0) 11 | } 12 | 13 | console.log(sum(7,9)); -------------------------------------------------------------------------------- /js/shouxie-/1.js: -------------------------------------------------------------------------------- 1 | // 构造函数 2 | // 哪一站？ Function -> Object 3 | function Person(name, age) { 4 | // 构造 5 | // 基于原型的封装 {} 6 | this.name = name; 7 | this.age = age; 8 | } 9 | Person.prototype.sayHi = function() { 10 | console.log(`你好，${this.name}`); 11 | } 12 | const tao = new Person('taot',20); 13 | console.log(tao instanceof Person); 14 | console.log(tao instanceof Object); -------------------------------------------------------------------------------- /leetcode/readme.md: -------------------------------------------------------------------------------- 1 | # 如何刷leetcode 2 | - 题型 3 | 高考做题，熟练度 4 | 套路 5 | 6 | # 栈 的操作 7 | 8 | ## 0.1 + 0.2 !== 0.3 计算机组成原理 9 | 1. JS Number 整数和浮点数？ 不太适合做计算 10 | CPU 加法指令 二进制 十进制 -》 二进制 11 | 2. 大数相加 12 | 13 | - js 数据类新 String 是简单数据类型 14 | padStrat('1234',10,0) python java 15 | '1234'.padStrat(10,0) js 面向对象 16 | Strin（'1234') 包装类 类型转换 17 | -------------------------------------------------------------------------------- /weapp/discovery/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "pages/index/index", 4 | "pages/detail/index", 5 | "pages/logs/logs" 6 | ], 7 | "window":{ 8 | "backgroundTextStyle":"light", 9 | "navigationBarBackgroundColor": "#fff", 10 | "navigationBarTitleText": "Weixin", 11 | "navigationBarTextStyle":"black" 12 | }, 13 | "style": "v2", 14 | "sitemapLocation": "sitemap.json" 15 | } 16 | -------------------------------------------------------------------------------- /js/arr_func/readme.md: -------------------------------------------------------------------------------- 1 | - json 数组 放置到页面上？ 2 | ajax/fetch 异步任务 3 | 4 | - fetch 新一代（上一代XMLHttpRequsest)接口请求的方法 5 | promise 实例 then 6 | 7 | - promise 链， 当我们有多个异步任务 并且后面的异步任务 依赖前面的任务 8 | 9 | - map 10 | es6 array 最重要的方法 11 | 从一个数组,变成一个新的数组，在每次遍历的时候的返回值 12 | 13 | - 异步任务找 promise 封装耗时任务在它内部， 使用 resolve 解决 14 | then() 得执行，程序流程顺序控制 15 | 使用reject 执行 catch 16 | 如果有多个异步任务怎么执行？ 17 | -------------------------------------------------------------------------------- /weapp/mycar/pages/logs/logs.js: -------------------------------------------------------------------------------- 1 | // logs.js 2 | const util = require('../../utils/util.js') 3 | 4 | Page({ 5 | data: { 6 | logs: [] 7 | }, 8 | onLoad() { 9 | this.setData({ 10 | logs: (wx.getStorageSync('logs') || []).map(log => { 11 | return { 12 | date: util.formatTime(new Date(log)), 13 | timeStamp: log 14 | } 15 | }) 16 | }) 17 | } 18 | }) 19 | -------------------------------------------------------------------------------- /weapp/wangzhe/pages/logs/logs.js: -------------------------------------------------------------------------------- 1 | // logs.js 2 | const util = require('../../utils/util.js') 3 | 4 | Page({ 5 | data: { 6 | logs: [] 7 | }, 8 | onLoad() { 9 | this.setData({ 10 | logs: (wx.getStorageSync('logs') || []).map(log => { 11 | return { 12 | date: util.formatTime(new Date(log)), 13 | timeStamp: log 14 | } 15 | }) 16 | }) 17 | } 18 | }) 19 | -------------------------------------------------------------------------------- /js/function_demo/3.js: -------------------------------------------------------------------------------- 1 | // 变量的作用域 2 | 'use strict'; 3 | var name = 'edi'// 全局 window 4 | // this 指向 调用方式 5 | // js 变量属于 作用域 6 | function func() { 7 | y = 2;// 不加 var 全局 ，不好 8 | var name = 'jay' // func 内部 局部变量 9 | {// 块级作用域 10 | let z =1; 11 | var x = 1;// es5 不支持块级作用域 12 | let name = 'ikun'// 块级作用域 13 | } 14 | console.log(x, y); 15 | } 16 | 17 | func(); 18 | console.log(y); -------------------------------------------------------------------------------- /js/shouxie/push/1.js: -------------------------------------------------------------------------------- 1 | // 数组 优势是 以o(1)的时间访问到 第i个元素 2 | const arr = [1,2,3]; 3 | const arr2 = ['a','b','c']; 4 | // arr.push(4); 5 | // console.log(arr); 6 | // console.log(arr.push); 7 | Array.prototype.push2 = function(n) { 8 | this[this.length] = n; 9 | return this .length; 10 | } 11 | arr.push2(4); 12 | // 返回的是数组的length 13 | console.log(arr.push2(5), '/////'); 14 | 15 | // arr2.push2('d'); 16 | console.log(arr); -------------------------------------------------------------------------------- /weapp/didi-bike/pages/logs/logs.js: -------------------------------------------------------------------------------- 1 | // logs.js 2 | const util = require('../../utils/util.js') 3 | 4 | Page({ 5 | data: { 6 | logs: [] 7 | }, 8 | onLoad() { 9 | this.setData({ 10 | logs: (wx.getStorageSync('logs') || []).map(log => { 11 | return { 12 | date: util.formatTime(new Date(log)), 13 | timeStamp: log 14 | } 15 | }) 16 | }) 17 | } 18 | }) 19 | -------------------------------------------------------------------------------- /weapp/discovery/pages/logs/logs.js: -------------------------------------------------------------------------------- 1 | // logs.js 2 | const util = require('../../utils/util.js') 3 | 4 | Page({ 5 | data: { 6 | logs: [] 7 | }, 8 | onLoad() { 9 | this.setData({ 10 | logs: (wx.getStorageSync('logs') || []).map(log => { 11 | return { 12 | date: util.formatTime(new Date(log)), 13 | timeStamp: log 14 | } 15 | }) 16 | }) 17 | } 18 | }) 19 | -------------------------------------------------------------------------------- /data-vision/demo1/barchart/canvas/svg.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /data-vision/demo1/echarts-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "echarts-demo", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "vue": "^3.2.45" 13 | }, 14 | "devDependencies": { 15 | "@vitejs/plugin-vue": "^4.0.0", 16 | "vite": "^4.0.0" 17 | } 18 | } -------------------------------------------------------------------------------- /js/bigData/readme.md: -------------------------------------------------------------------------------- 1 | # 十万条 2 | - 分页 3 | - 性能优化相关 4 | 5 | - setTimeout setInterval 不一定准确 6 | 如果在setTimeout到点了， js 线程或渲染线程没有清空， 只有等 7 | JS执行栈 》微任务 》渲染线程 》宏任务 8 | 9 | - 又快又好的渲染十万条数据 10 | 1. JS 能优化的地方优化 11 | 页面失败的 CPU 轮转 unit time 最大可运行时间 12 | 1000 + 立马渲染一次 最快看到页面 13 | 2. 渲染时间 14 | 分片 15 | - 性能瓶颈在渲染 16 | 其它线程得不到执行机会， 卡死 17 | 滚轮滚动 页面很卡 重新绘制页面 18 | idle 状态 渲染线程 -------------------------------------------------------------------------------- /weapp/didi-bike/app.js: -------------------------------------------------------------------------------- 1 | // app.js 2 | App({ 3 | onLaunch() { 4 | // 展示本地存储能力 5 | const logs = wx.getStorageSync('logs') || [] 6 | logs.unshift(Date.now()) 7 | wx.setStorageSync('logs', logs) 8 | 9 | // 登录 10 | wx.login({ 11 | success: res => { 12 | // 发送 res.code 到后台换取 openId, sessionKey, unionId 13 | } 14 | }) 15 | }, 16 | globalData: { 17 | userInfo: null 18 | } 19 | }) 20 | -------------------------------------------------------------------------------- /weapp/discovery/app.js: -------------------------------------------------------------------------------- 1 | // app.js 2 | App({ 3 | onLaunch() { 4 | // 展示本地存储能力 5 | const logs = wx.getStorageSync('logs') || [] 6 | logs.unshift(Date.now()) 7 | wx.setStorageSync('logs', logs) 8 | 9 | // 登录 10 | wx.login({ 11 | success: res => { 12 | // 发送 res.code 到后台换取 openId, sessionKey, unionId 13 | } 14 | }) 15 | }, 16 | globalData: { 17 | userInfo: null 18 | } 19 | }) 20 | -------------------------------------------------------------------------------- /weapp/mycar/app.js: -------------------------------------------------------------------------------- 1 | // app.js 2 | App({ 3 | onLaunch() { 4 | // 展示本地存储能力 5 | const logs = wx.getStorageSync('logs') || [] 6 | logs.unshift(Date.now()) 7 | wx.setStorageSync('logs', logs) 8 | 9 | // 登录 10 | wx.login({ 11 | success: res => { 12 | // 发送 res.code 到后台换取 openId, sessionKey, unionId 13 | } 14 | }) 15 | }, 16 | globalData: { 17 | userInfo: null 18 | } 19 | }) 20 | -------------------------------------------------------------------------------- /weapp/wangzhe/app.js: -------------------------------------------------------------------------------- 1 | // app.js 2 | App({ 3 | onLaunch() { 4 | // 展示本地存储能力 5 | const logs = wx.getStorageSync('logs') || [] 6 | logs.unshift(Date.now()) 7 | wx.setStorageSync('logs', logs) 8 | 9 | // 登录 10 | wx.login({ 11 | success: res => { 12 | // 发送 res.code 到后台换取 openId, sessionKey, unionId 13 | } 14 | }) 15 | }, 16 | globalData: { 17 | userInfo: null 18 | } 19 | }) 20 | -------------------------------------------------------------------------------- /css/center/base.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | .wp{ 7 | width: 300px; 8 | height: 300px; 9 | /* css调试技巧 */ 10 | background-color: aquamarine; 11 | /* 盒子模型 */ 12 | /* border: 1px solid black; */ 13 | 14 | } 15 | 16 | .box{ 17 | background-color: pink; 18 | } 19 | 20 | .box.size{ 21 | height: 100px; 22 | width: 100px; 23 | background-color: brown; 24 | } -------------------------------------------------------------------------------- /yayu/readme.md: -------------------------------------------------------------------------------- 1 | # 函数篇 2 | - 函数记忆功能 3 | 1. 函数的参数或函数的返回值也是函数， 我们称之为高阶函数 4 | memorize 高阶函数 5 | 2. 闭包 6 | 3. 巧妙地利用缓存，提升性能的关键 7 | 8 | - 闭包是如何形成的？ 9 | 1. 函数嵌套函数，且运行 10 | 2. 11 | 12 | - 记忆函数 13 | 1. 用空间换时间 cache{ } 14 | 2. 使用key 15 | arguements.length + Array.prototype.join.call(this,arguements) 16 | 不能处理参数是对象这种情况 17 | 原因时[object Object] join 本质， 会先toString 18 | 3. memorize 函数需要优化 -------------------------------------------------------------------------------- /interview/let _var_const/readme.md: -------------------------------------------------------------------------------- 1 | - 请介绍下 var let const 2 | 1. eas6 以前 用 var 声明变量， 那时候没有常量 3 | let const 是 es6（2015） 的变量和常量 4 | 2. var let 变量声明 5 | const 常量 如果是复杂数据类型， 值还是能变得 6 | 3. let 支持块级作用域 7 | 4. var 声明的变量会挂载在windows 全局对象上， 会污染 8 | 5. var 声明的变量会提升到所在作用域的最上面（声明提升，undefined）不会报错 9 | 影响代码的可读性 10 | let 不会提升 11 | function 声明的函数，会提升， 值也会提升 12 | const func = function （） {} 13 | -------------------------------------------------------------------------------- /weapp/mycar/styles/button.wxss: -------------------------------------------------------------------------------- 1 | /* 一个文件，一件事 模块化 */ 2 | .button { 3 | display: inline-block; 4 | margin: 8rpx; 5 | background-color: #e0e1e2; 6 | padding: 20rpx 48rpx; 7 | font-weight: bold; 8 | border-radius: 25rpx; 9 | font-size: 32rpx; 10 | transition: 0.3s all; 11 | } 12 | 13 | .button.primary { 14 | background-color: #000; 15 | color: rgba(255, 255, 255, 0.9); 16 | } 17 | 18 | .button-hover { 19 | opacity: 0.75; 20 | } -------------------------------------------------------------------------------- /design_pattern/pubSub/readme.md: -------------------------------------------------------------------------------- 1 | # 订阅发布者模式 2 | - vue 响应式使用的模式 3 | - 涛哥买房开始 4 | 编码实现？ 5 | 售楼部 发布者 发些消息给他的观察者 6 | 1：n 7 | - vue 8 | {{ count }} 订阅了一下 订阅者 9 | const count = ref(0) 发布者 10 | 11 | const len = computed(() => count * 2) // 订阅者 12 | 订阅者 13 | count.value = 2 14 | 15 | - 订阅发布者模式 16 | 首先给发布者维护一个订阅者数组 listen 17 | clientList 数组 18 | 如果有消息，怎么通知他响应呢？ 放一个函数 19 | 20 | trigger 方法 通知订阅者响应 -------------------------------------------------------------------------------- /reverse_str/1.js: -------------------------------------------------------------------------------- 1 | // 匿名函数 2 | // js 变量或常量的类型有由值确定 3 | // 函数表达式 4 | // 回文 具有对称性 5 | const reverse = function (str) { 6 | // let recerseStr = ''; 7 | // for (let i = str.length - 1; i >= 0 ; i--) { 8 | // recerseStr += str[i] 9 | // } 10 | // return recerseStr 11 | 12 | return str.split('').reverse().join('') 13 | } 14 | console.log(reverse('hello')); 15 | console.log(reverse('aba')); 16 | // 函数 17 | // function reverse() { 18 | 19 | // } -------------------------------------------------------------------------------- /js/function_demo/1.js: -------------------------------------------------------------------------------- 1 | // 封装 普通的相加函数 2 | // add 函数声明在window 3 | 'use strict'; 4 | function Test() { 5 | // this 由运行的方式决定 6 | this.x = 1; 7 | } 8 | // 函数可以被new ，被new的函数也叫构造函数 9 | const o = new Test(); 10 | console.log(o.x); 11 | 12 | function add(x, y) { 13 | // 检验参数 this,arguments 14 | console.log(this,arguments); 15 | return x + y; 16 | } 17 | 18 | let obj = { 19 | add: add 20 | } 21 | 22 | console.log(add(1,2)); 23 | obj.add();// 作为对象的方法调用的时候 24 | 25 | 26 | -------------------------------------------------------------------------------- /interview/js/6.js: -------------------------------------------------------------------------------- 1 | // let arr = [1,2,3] 2 | // let newArr = arr // 赋值不是拷贝 同一个内存地址引用 3 | // newArr[0] = 100 4 | 5 | // console.log(arr); 6 | 7 | let arr = [1, 2, {val: 4}] 8 | // 浅拷贝 复杂数据类型任然是原地址 9 | // let newArr = arr.slice() 10 | // newArr[0] = 100 11 | // newArr[2].val = 5 12 | // console.log(arr, newArr); 13 | 14 | // 深拷贝 15 | // 循环引用 内存溢出 16 | // 函数等 不支持序列化 直接忽略 17 | let newArr = JSON.parse(JSON.stringify(arr)); 18 | newArr[2].val = 5 19 | console.log(arr, newArr); 20 | -------------------------------------------------------------------------------- /weapp/mycar/readme.md: -------------------------------------------------------------------------------- 1 | - 内置很多很好的组件 2 | 复用 3 | swiper > swiper-item 组件 4 | 5 | - wxml 里 {{}} 模板 6 | 在页面上显示出来 7 | 页面上如果有多个循环片段需要输出的话 8 | wx:for 指令 slides wx:key 唯一值 9 | 每次遍历时 item 10 | 11 | - css 在哪写？ 12 | page/xxx.wxss 业务样式， 和具体页面相关 13 | 如果有些通用样式呢？ app.wxss上 14 | 15 | - 模块化 面向对象思想 16 | 17 | - 事件绑定 bind + tap 移动端tap 事件、、 18 | 事件处理函数在 Page({ 19 | 20 | })声明就可以了 21 | 22 | - wx.navigateTo( { 23 | 24 | }) 25 | wx 命名空间 源源不断的微信查克拉能量 -------------------------------------------------------------------------------- /ryf/object/1.js: -------------------------------------------------------------------------------- 1 | // 对象就是属性和方法的结合 2 | // OOP object oriented programming 3 | // class Person { 4 | 5 | // } 6 | // const wzz = new Person(); 7 | let obj = { 8 | name: 'ling', 9 | sayHi() { 10 | console.log('hello'); 11 | } 12 | } 13 | obj.name 14 | // 对象 15 | const wzz = new Object();// js Object 函数 也是一切对象的原型 16 | // 对象字面量都是基于Object 来构造， 原型式面向对象 17 | 18 | wzz.name = '温正中'; 19 | wzz.sayHi = function() { 20 | console.log('hello'); 21 | } 22 | console.log(wzz); -------------------------------------------------------------------------------- /js/gainian/1.js: -------------------------------------------------------------------------------- 1 | function sum(a, b) { 2 | // 展开运算符 3 | let args = [...arguments]; 4 | // es6 5 | // let args = Array.from(arguments); 6 | // 借用数组的slice 方法 7 | // let args = Array.prototype.slice.call(arguments); 8 | // console.log(Array.prototype.toString.call(args)); 9 | // console.log(Array.prototype.toString.call(arguments)); 10 | // console.log(Array.prototype.toString.call(arguments, args)); 11 | console.log(args); 12 | } 13 | 14 | sum(1,2) 15 | // console.log(); -------------------------------------------------------------------------------- /weapp/didi-bike/readme.md: -------------------------------------------------------------------------------- 1 | - 地图功能 定位 标点 2 | 1. 组件 3 | view div UI 组件 4 | 2. wx. 微信给我们强大能力 5 | 坐标 东华 6 | 3. swiper scroll-view 功能组件 7 | map 组件 显示在页面上的 8 | 9 | - 在开发哪个页面，app.json 中把相应的页面提前 10 | - 能够 wx.request 请求 url？ fastmock 接口请求模拟 11 | success[{ 12 | img: , 13 | title: , 14 | anthor: , 15 | score: , 16 | action: '' 17 | }] 18 | 19 | - 移动端界面开发， 多用弹性布局， 关键 20 | 1. display：flex；文档流之中，开启了一个BFC区域 独立的绘制上下文不受外界影响 21 | 2. 父容器与子元素们的布局方式 22 | 子元素 默认块级能力会丢失， -------------------------------------------------------------------------------- /algorithm/sort/7.js: -------------------------------------------------------------------------------- 1 | const insertSort = (arr) => { 2 | // 缓存数组长度 3 | const len = arr.length 4 | // 用来保存当前需要插入的元素 5 | let temp 6 | // i 用于标识每次被插入的元素的索引 待插入 7 | for(let i = 1; i < len; i ++) { 8 | let j = i; 9 | temp = arr[i]; // 待插入的值arr[i] 空出来 10 | while(j > 0 && arr[j-1] > temp) { 11 | arr[j] = arr[j-1] 12 | j --; 13 | } 14 | arr[j] = temp 15 | } 16 | return arr 17 | } 18 | 19 | console.log(insertSort([4,5,6,1,3,2])); -------------------------------------------------------------------------------- /js/getTypeof/4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 15 | 16 | -------------------------------------------------------------------------------- /weapp/didi-bike/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/home/index", 4 | "pages/index/index", 5 | "pages/logs/logs", 6 | "home/index" 7 | ], 8 | "window": { 9 | "backgroundTextStyle": "light", 10 | "navigationBarBackgroundColor": "#fff", 11 | "navigationBarTitleText": "青桔单车", 12 | "navigationBarTextStyle": "black" 13 | }, 14 | "permission": { 15 | "scope.userLocation": { 16 | "desc": "你的位置信息将用于小程序位置接口的效果展示" 17 | } 18 | }, 19 | "style": "v2", 20 | "sitemapLocation": "sitemap.json" 21 | } -------------------------------------------------------------------------------- /data-vision/demo1/echarts-demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Vue 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /algorithm/sort/readme.md: -------------------------------------------------------------------------------- 1 | [什么是冒泡排序]() 2 | 3 | - markdown 4 | - 冒泡排序 Bubble Sort 5 | 交换位置(位置,从大到小,从小到大) 6 | 1. 排序 7 | 很多种, 8 | 2. 交换 9 | 3. 相邻 i i+1 不换, 否则换? 10 | 4. 有序区域 j < length-i-1 第一波优化 length-i-1 11 | 5. 稳定排序 算法的可靠性 12 | 6. 边界? 最后交换的位置 13 | 14 | 15 | - 最小值和最大值,不能传整个数组,使用es6的展开运算符 ... 16 | Math.min() 17 | Math.Max() 18 | sort? js 内置的排序方法 19 | 20 | - 如何写一个高质量的冒泡排序 21 | 1. 当在一次泡泡的内层循环中,一次交换都没有发送 22 | 通过检测本轮是否有交换?如果没有,待排序区域已经有序可以退出, isSorted = true 23 | 2. 基于 -------------------------------------------------------------------------------- /js/shouxie/push/2.js: -------------------------------------------------------------------------------- 1 | const arr = [1,2,3]; 2 | // 在末尾添加多个元素 3 | Array.prototype.push = function() { 4 | // 覆盖原有方法 5 | // 如何得到所有的参数 [] arguments 6 | // console.log(arguments); 7 | 8 | // console.log(typeof arguments, Object.prototype.toString.call(arguments)) 9 | // console.log(arguments.length) 10 | 11 | // for( var i = 0; i < arguments.length; i ++) { 12 | // this[this.length] = arguments[i]; 13 | // } 14 | 15 | for(this[this.length] of arguments){ 16 | } 17 | } 18 | arr.push(4,5); 19 | console.log(arr); -------------------------------------------------------------------------------- /js/new_func/1.js: -------------------------------------------------------------------------------- 1 | var stuA = { 2 | name: 'cai' 3 | } 4 | 5 | var stuB = { 6 | name: 'liu' 7 | } 8 | 9 | function sayHi(...args) { 10 | console.log(arguments,...args); 11 | console.log(`你好我是${this.name}`); 12 | } 13 | 14 | // stuA,stuB 都能sayHi 15 | // call 改天换地，手动指定this 的指向 16 | // this -> 调用对象stuA，stuB 17 | // sayHi.call(stuA); 18 | // // sayHi.call(stuB); 19 | // Object.prototype.sayHi = sayHi; 20 | // stuA.sayHi(); 21 | 22 | sayHi.apply(stuB,[1,2]); 23 | sayHi.call(stuB,1,2); 24 | 25 | 26 | // var func = sayHi.bind(stuB); 27 | // func(); -------------------------------------------------------------------------------- /weapp/discovery/pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | page { 3 | position: relative; 4 | width: 100vw; /*相对单位 viewport width*/ 5 | height: 100vh;/* 相对单位 viewport height */ 6 | } 7 | 8 | .container { 9 | position: absolute; 10 | top: 50%; 11 | left: 50%; 12 | transform: translate(-50%, -50%); 13 | width: 80%; 14 | height: 60%; 15 | border: 1px solid red; 16 | /* margin: 0px auto; */ 17 | overflow: hidden; 18 | border-radius: 5px; 19 | text-align: center; 20 | } 21 | .title { 22 | color: red; 23 | font-size: 20px; 24 | } 25 | -------------------------------------------------------------------------------- /js/index.md: -------------------------------------------------------------------------------- 1 | #设计模式之代理模式 2 | 3 | -编程素养 4 |   1.Git社区，写了代码一定提交 5 |   2.快捷工具 6 |    !+tab inedx.html的输入 7 |    !? HTML5的文档头 申明方式 8 |    3. vscode最好的编译器 9 |    live_server 10 |    http://192.168.56.1:5555 11 |    html 12 |    4.使用Chrome浏览器 13 |    5.live-server 14 |    6.markdown格式 15 |     #

16 | 17 |     -面向对象的世界 18 |     1.js提供对象字面量{}，边描述边把对象在内存中创建了 19 |     key:value, 20 |     2.对象由方法和属性构成(现实到代码的虚拟) 21 |     3.参数 形参和实参 22 |     4，接口的概念 interface 23 |     不同的对象具有相同的方法可以互换使用 24 |     小红代替小美收花，替我送花给小美，代理模式 25 |     5.this 指代当前对象 26 |     6`${}`字符串模板             -------------------------------------------------------------------------------- /weapp/mycar/utils/util.js: -------------------------------------------------------------------------------- 1 | const formatTime = date => { 2 | const year = date.getFullYear() 3 | const month = date.getMonth() + 1 4 | const day = date.getDate() 5 | const hour = date.getHours() 6 | const minute = date.getMinutes() 7 | const second = date.getSeconds() 8 | 9 | return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}` 10 | } 11 | 12 | const formatNumber = n => { 13 | n = n.toString() 14 | return n[1] ? n : `0${n}` 15 | } 16 | 17 | module.exports = { 18 | formatTime 19 | } 20 | -------------------------------------------------------------------------------- /weapp/wangzhe/utils/util.js: -------------------------------------------------------------------------------- 1 | const formatTime = date => { 2 | const year = date.getFullYear() 3 | const month = date.getMonth() + 1 4 | const day = date.getDate() 5 | const hour = date.getHours() 6 | const minute = date.getMinutes() 7 | const second = date.getSeconds() 8 | 9 | return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}` 10 | } 11 | 12 | const formatNumber = n => { 13 | n = n.toString() 14 | return n[1] ? n : `0${n}` 15 | } 16 | 17 | module.exports = { 18 | formatTime 19 | } 20 | -------------------------------------------------------------------------------- /weapp/didi-bike/utils/util.js: -------------------------------------------------------------------------------- 1 | const formatTime = date => { 2 | const year = date.getFullYear() 3 | const month = date.getMonth() + 1 4 | const day = date.getDate() 5 | const hour = date.getHours() 6 | const minute = date.getMinutes() 7 | const second = date.getSeconds() 8 | 9 | return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}` 10 | } 11 | 12 | const formatNumber = n => { 13 | n = n.toString() 14 | return n[1] ? n : `0${n}` 15 | } 16 | 17 | module.exports = { 18 | formatTime 19 | } 20 | -------------------------------------------------------------------------------- /weapp/discovery/utils/util.js: -------------------------------------------------------------------------------- 1 | const formatTime = date => { 2 | const year = date.getFullYear() 3 | const month = date.getMonth() + 1 4 | const day = date.getDate() 5 | const hour = date.getHours() 6 | const minute = date.getMinutes() 7 | const second = date.getSeconds() 8 | 9 | return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}` 10 | } 11 | 12 | const formatNumber = n => { 13 | n = n.toString() 14 | return n[1] ? n : `0${n}` 15 | } 16 | 17 | module.exports = { 18 | formatTime 19 | } 20 | -------------------------------------------------------------------------------- /js/getTypeof/2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 17 | 18 | -------------------------------------------------------------------------------- /js/router/a.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 页面a 8 | 9 | 10 |
11 | 首页 12 | a页面 13 | b页面 14 |
15 |
16 |
页面a
17 |
18 | 19 | -------------------------------------------------------------------------------- /king/readme.md: -------------------------------------------------------------------------------- 1 | # 鸭子模型 Duck Typing 2 | 3 | 国王 喜欢听鸭子嘎嘎叫， 鸭子合唱团， 1000只鸭子 4 | 5 | - 1000 只 鸭子 6 | - 对象字面量 7 | { 8 | 9 | } 10 | 11 | ## es6 let const 12 | let 声明变量 13 | const 声明常量 必须赋初值 14 | 15 | - const arr = [1.2.3] 16 | - 在头部和尾部 17 | - unshift + shift 18 | - push + pop 19 | 常量能变吗？ 20 | - 简单数据类型 常量值不能改 21 | - 复杂数据类新 值可以改，但是类型不可以改 22 | - es6 之前没有常量 23 | var 常量的意义 24 | var PI 25 | - var let 有什么区别？ 26 | let 支持块级作用域 27 | var 不支持 -------------------------------------------------------------------------------- /vue3/todos/readme.md: -------------------------------------------------------------------------------- 1 | - vue 之前，js DOM 编程思想为主 2 | 1. 查找DOM 元素 document.querySelector 3 | 2. 对DOM元素进行一些操作... 4 | 性能差 jQuery 优化了DOM api 仅此而已 5 | - vue 6 | 1. MVVM 设计模式 7 | data() { 8 | // model 9 | return { 10 | 11 | } 12 | }, 13 | // view 14 | template: `{{}}` 15 | vue vm 16 | 2. 组件思维 17 | 3. 数据驱动思想 18 | 19 | - todos 显示 所有和待完成数量 20 | {{todos.length}} {{....}} bad code 21 | 实现了功能，数据的驱动 22 | 可读性不好 可维护性 排第一位 23 | {{all}} 模板里view 因该尽量减少js逻辑 24 | -------------------------------------------------------------------------------- /data-vision/demo1/echarts-demo/README.md: -------------------------------------------------------------------------------- 1 | # Vue 3 + Vite 2 | 3 | This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 ` 18 | 19 | 20 | -------------------------------------------------------------------------------- /interview/js/5.js: -------------------------------------------------------------------------------- 1 | // 手写call, es6 比老版本优雅 2 | Function.prototype.call = function(context, ...args) { 3 | context = context || globalThis 4 | let fn = Symbol('fn') 5 | // 给context 动态添加了fn属性 6 | context.fn = this // 绝对不会覆盖context上的属性 7 | // 返回值？ 8 | // 只有读源码， 写源码才会用到eval 9 | const result = eval('context.fn(...args)') // ??? 10 | delete context // 让context干净 代码洁癖 11 | return result 12 | } 13 | 14 | const me = { name: 'Jack' } 15 | function say(a,b,c) { 16 | console.log(`My name is ${this.name || 'default'}`,a + b + c); 17 | } 18 | say.call(me, 1, 2, 3) -------------------------------------------------------------------------------- /ryf/object/6.js: -------------------------------------------------------------------------------- 1 | function Cat(name,color){ 2 | this.name = name; 3 | this.color = color; 4 | // this.type = "猫科动物"; 5 | // this.eat = function(){console.log("吃老鼠");}; 6 | } 7 | // prototype 8 | // 拿到构造函数prototype对象属性 9 | // 构造函数的prototype对象是用来提供所有实列共享的属性或方法的 10 | Cat.prototype.type = "猫科动物"; 11 | Cat.prototype.eat = function(){console.log("吃老鼠")}; 12 | 13 | var cat1 = new Cat("大毛","黄色"); 14 | console.log(cat1.name, cat1.color, cat1.type); 15 | cat1.eat(); 16 | 17 | var cat2 = new Cat("二毛","灰色"); 18 | console.log(cat2.name, cat2.color, cat2.type); 19 | cat2.eat(); -------------------------------------------------------------------------------- /interview/js/7.js: -------------------------------------------------------------------------------- 1 | // shallow 浅 2 | const shallowClone = (target) => { 3 | // 排除 null 4 | if(typeof target === 'object' && target != null) { 5 | const cloneTarget = Array.isArray(target) ? [] : {} // 新的拷贝 6 | for(let prop in target) { // 不管是 object 还是 array 都可以 for in 遍历 性能不如 计数循环 7 | if(target.hasOwnProperty(prop)) { // 自己的不是原型链上的 8 | cloneTarget[prop] = target[prop] // 拷贝 9 | } 10 | } 11 | return cloneTarget 12 | }else { 13 | // null 或简单数据类型 14 | return target 15 | } 16 | } 17 | 18 | -------------------------------------------------------------------------------- /reverse_str/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 18 | 19 | -------------------------------------------------------------------------------- /js/router/readme.md: -------------------------------------------------------------------------------- 1 | # 网站的核心 2 | 1. 内容 3 | a 4 | 5 | - 传统的网站开发 6 | - 使用MVVM 代替DOM 编程 7 | 数据驱动开发 8 | - 多个页面 + a Multiple Page Application 9 | 1. 每个页面都是重复的完整html 结构 10 | 2. 用户体验不太好，需要优化 11 | 每个页面的请求过程都是一次http的请求响应过程 12 | 完整的html，没有必要 13 | 请求响应需要时间 页面会清空，页面加载慢 14 | 有什么技术方案 去优化 15 | SPA Singer Page Application 16 | 单页应用开发思维 17 | ajax 不跳转页面 vue data 18 | - SPA 19 | - ajax js 动态的更新内容，后台去向服务器通信，获取新的内容 20 | 不应单纯的借助url 的切换，http向服务器重新请求 -------------------------------------------------------------------------------- /css/3column/1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 20 | 21 | -------------------------------------------------------------------------------- /weapp/wangzhe/readme.md: -------------------------------------------------------------------------------- 1 | - 小程序运行在哪？ 2 | 微信里， 手机 > 客户端 服务端 cs 开发 3 | 4 | - 数据驱动的页面 5 | 1. 先取数据 6 | 2. 模板由数据驱动 7 | 8 | - 小程序请求接口数据 9 | 1. wx.request({ 10 | url:'' 11 | }) js 主动去请求接口 12 | 2. 先让页面加载，加载完成后 13 | onLoad 生命周期， 放松请求 14 | 3. 安全性高，详情 -> 不校验合法域名 15 | 4. 请求是一个http的过程，使用协议 http 16 | 基于请求响应的协议 17 | 5. success 回调 statusCode 200 18 | 解析 res 19 | 6. fail 失败 20 | 7. this。setData({}) 21 | 设置数据，并且自动更新页面 22 | 23 | - 样式 24 | 25 | - 可滚动导航 26 | scroll-view 小程序组件 scroll-x="{{ture}}" 27 | white-space:nowrap 空白符不换行 28 | wx:for inlinr-block wx:key="text" -------------------------------------------------------------------------------- /js/router/hash/hash.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 电梯直达 11 | 12 |
13 | 14 | 电梯直达 15 | 16 |
17 | 18 | -------------------------------------------------------------------------------- /js/debounce/readme.md: -------------------------------------------------------------------------------- 1 | # 防抖 节流 2 | 3 | 函数？ 4 | 1. 箭头函数 5 | 2. 函数 类 + prototype 基于对象的原型式面向对象 6 | 3. 异步问题，回调函数 promise thenable 7 | 4. 匿名函数 函数表达式 8 | (function() { // 立即执行函数 9 | 10 | })() 11 | 5. 闭包 12 | 函数嵌套函数，内部函数在外部可以调用 13 | 可以使用到自由变量的函数 14 | 应用场景 15 | - 防抖 16 | 6. 高阶函数 17 | bind call apply 18 | 7. 函数是一等对象 19 | 20 | - 防抖 21 | - 因为函数需要防抖优化，不可以直接去执行原本功能的函数 22 | - 使用debounce 通用函数去包装一下原函数 23 | debounce(ajax,500); 24 | - 依赖的是闭包能力 25 | - 本要执行的函数 ，闭包到一个函数里 debounceAjax 26 | - 上次的定时器id 交给闭包空间 27 | -------------------------------------------------------------------------------- /js/shouxie/push/readme.md: -------------------------------------------------------------------------------- 1 | # JS 考试重点之手写代码 2 | 3 | - push 4 | 数组的功能？ 5 | 哪两种数据结构的什么操作？ 6 | 线性和非线性 7 | [] 或链表 队列FIFO / 栈 FILO 8 | [{value: 1, next: },{value: 2, next: }] 不连续的 9 | 10 | [1,2,3] 初始地址， arr[0] arr[1] arr[2] 连续的， new Array(100000) 11 | 浪费 内存溢出 12 | 物理地址？ 13 | arr[i] = &arr(起始地址) + (i - 1)*2 14 | 15 | - JS和其他语言不同的地方 16 | 原型的概念 prototype 17 | [1,2,3](实例) Array(类) 18 | 1. 声明数组 再js里有多种方法 19 | [1,2,3] new Array(1,2,3) 20 | 2. 数组对象实例添加一个公有方法 21 | js里面，Array 类 prototype 对象 添加自定义函数 22 | 3. 在对象的方法中， this 关键字指向谁？ 23 | 指向调用它的对象 24 | 4. arguments 代表 函数的参数对象 -------------------------------------------------------------------------------- /ryf/object/3.js: -------------------------------------------------------------------------------- 1 | // 生成一个对象 2 | 3 | // var cat = { 4 | // name: '', 5 | // color: '' 6 | // } 7 | 8 | // var cat1 = {}; // 创建一个空对象 9 | // cat1.name = "大毛"; // 按照原型对象的属性赋值 10 | // cat1.color = "黄色"; 11 | // var cat2 = {}; 12 | // cat2.name = "二毛"; 13 | // cat2.color = "黑色"; 14 | 15 | // function Cat(name,color) { 16 | // return { 17 | // name:name, 18 | // color:color 19 | // } 20 | // } 21 | 22 | function Cat(name,color){ 23 | this.name=name; 24 | this.color=color; 25 | } 26 | 27 | var cat1 = new Cat("大毛","黄色"); 28 | alert(cat1.name); // 大毛 29 | var cat2 = new Cat("二毛","黑色"); -------------------------------------------------------------------------------- /interview/js/promise_3_methods/readme.md: -------------------------------------------------------------------------------- 1 | - 任务流 Promise序列 2 | [upload(),upload(),...] 3 | - 随机定时器值 任务完成的时间和索引没有关系 4 | - 一半成功，一半失败 5 | - setTimeout 第三个参数会在定时器到达时触发 6 | - promise then 最后 catch rejected 时候 触发 7 | - async await 8 | rejected 9 | try{ 10 | 11 | }catch(err){ 12 | 13 | } 14 | - 是否运行了 15 | 16 | - promise.all 17 | 全部执行通过才认为时成功， 否则认为失败 18 | 有失败并不会停下来 19 | 结果 20 | 并发 21 | - promise.race 22 | - 第一个完成的 result 23 | - 所有的都会运行 24 | - 并行 25 | - promise.any 26 | - 只要有一个成功 27 | - 返回第一个成功 -------------------------------------------------------------------------------- /js/new_func/this.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /weapp/didi-bike/pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 12 | 13 | 14 | 青桔单车 15 | 16 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /tecent/weui/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 按钮 16 | 警告 17 | 18 | -------------------------------------------------------------------------------- /css/3column/readme.md: -------------------------------------------------------------------------------- 1 | # 三列布局 2 | 3 | - PC端布局方案 4 | 如何判断哪种设备？ window BOM 5 | www.taobao.com -> 301/302 200(http 状态码) -> https://main.m.taobao.com/？sprefer=sypc00 6 | 7 | 8 | - userAgent 9 | 用户代理 包含了浏览器的信息 10 | www.taobao.com 11 | iphone 301 m.taobao.com 12 | window.navigator BOM Browser Object Model 13 | - 定位功能 14 | - userAgent 15 | 16 | - 三栏式布局 flex（PC 兼容性），float 17 | 语义化标签 header + footer + section + aside + article + main SEO 18 | 中间优先加载并渲染 19 | 20 | - 经典圣杯布局 21 | 1. main内容自适应且优先 22 | padding 左右留白 23 | 2. aside margin-left 负值 -100% -100px 一左一右 24 | relative 相对位置 -------------------------------------------------------------------------------- /weapp/mycar/styles/hero.wxss: -------------------------------------------------------------------------------- 1 | .heron image,.hero video { 2 | height: 38.2vh; 3 | } 4 | 5 | .hero.white { 6 | background-color: #ffff; 7 | } 8 | 9 | .hero .content { 10 | padding-top: 5%; 11 | } 12 | 13 | .hero .content.centered{ 14 | text-align: center; 15 | } 16 | 17 | .hero .sub-header { 18 | font-size: 32rpx; 19 | text-transform: uppercase; 20 | letter-spacing: 3px; 21 | margin-bottom: 8px; 22 | color: rgba(0, 0, 0, 0.85); 23 | } 24 | 25 | .hero .header { 26 | font-size: 72rpx; 27 | font-weight: bold; 28 | margin: 0 12% 8px; 29 | } 30 | 31 | .hero .description { 32 | padding: 0 12%; 33 | margin-bottom: 32rpx; 34 | } -------------------------------------------------------------------------------- /js/function_demo/2.js: -------------------------------------------------------------------------------- 1 | // class Person { 2 | // constructor(name, age) { 3 | // this.name = name; 4 | // this.age = age; 5 | // } 6 | // sayHello() { 7 | 8 | // } 9 | // } 10 | // 构造函数 对象添加属性 11 | // 共享 类的方法 12 | // 'use strict'; 13 | var name = '正中'; 14 | var age = 20; 15 | function Person(name,age) { 16 | this.name = name; 17 | this.age = age; 18 | } 19 | Person.prototype.sayHello = function() { 20 | console.log(`hi,我是${this.name},今年${this.age}`) 21 | console.log('hi,我是' + this.name + ',今年' + this.age); 22 | } 23 | // 24 | const jay = new Person('温',21);//构造函数 25 | jay.sayHello();//对象的方法被运行 26 | // console.log(jay.name + ' ' + jay.age); 27 | 28 | const fn = jay.sayHello; 29 | fn(); -------------------------------------------------------------------------------- /weapp/mycar/pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {{item.sub_header}} 7 | {{item.header}} 8 | {{item.description}} 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /alibaba/readme.md: -------------------------------------------------------------------------------- 1 | # 阿里巴巴双11界面开发 2 | 3 | - 设计稿件 4 | 750px 像素 尺寸 移动页面 5 | iphone 的小尺寸357pt retina 屏幕 设计的标准 6 | - 前端使命 7 | html+css+js 一像素不差的还原设计稿 8 | 1. 交互 9 | 2. css 实现视觉效果 css 动画 10 | 3. 设计稿是静态的， 我们要做动态的 11 | 4. 兼1容性 alley 兼容性达到恐怖的 99.99% 12 | 13 | - css reset 14 | 1. 抹平不同浏览器的预设样式，从0出发，在所有浏览器上表现一致 15 | 2. 利用css inherit 继承属性 body font-size font-family ... 16 | 默认 16px 17 | 18 | - rem 19 | 1. 在移动端，为了兼容 少用甚至不用px 20 | 2. 先给html标签设置font-size 21 | 37.5px 固定? 22 | 等比例 1/10 方便的去做栅格系统 布局 23 | 如何在不同的设备上， 让rem = 设备宽度/10 24 | 3. html 的font-size 要动态设置 25 | window.innerwidth 拿到设备宽度 26 | document.documentElement.style.fontSize = + 'px' -------------------------------------------------------------------------------- /css/center/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 十种方法水平垂直居中 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 |
19 |
20 | 21 | -------------------------------------------------------------------------------- /drag_n_drop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | 22 | -------------------------------------------------------------------------------- /js/function_demo/readme.md: -------------------------------------------------------------------------------- 1 | # 函数 2 | 3 | - 函数的地位 4 | 1. 被执行 5 | - 封装的能力 6 | function add(a,b) { 7 | return a + b; 8 | } 9 | 10 | 2. this 11 | 函数运行时创建的一个指针 指向谁呢？ 12 | 1. 指向是不固定的，运行的方式决定 13 | 2. add作为普通函数被调用的时候，this 指向？ 14 | 没有被谁调用，返回的就是 运算环境 window 15 | 严格模式 'use strict'; 16 | undefined 17 | 3. 作为对象的方法调用的时候，this 指向对象 18 | 4. 作为构造函数调用，this 指代new 出的对象 19 | 5. 函数作为事件回调函数来执行的时候 this 指向事件发生的元素 20 | 21 | - 严格模式，让我们使用js好的一面 22 | js 语言早期 开发的很快 有些语言的糟粕， 避开他？ 23 | - 普通函数运行时 this 指向全局。 24 | - 定义变量的时候 射门也不用， 指向全局 25 | 26 | - 作用域 27 | 1. 全局 28 | 2. 函数 29 | 3. 块级（es6 + let const） 30 | 变量一定会属于某个作用域 -------------------------------------------------------------------------------- /interview/css/css_variable/readme.md: -------------------------------------------------------------------------------- 1 | - 你知道CSS变量吗？ 2 | - css 4（next） 新功能 3 | - 复用一些变量，全局修改一次，所有地方都相应修改 4 | - :root 根选择器 5 | - --blur 命名风格 -- 6 | - var(--blur) 使用它 7 | - js 来修改 docu,ent.documentElement.style.setProperty('---blur','') 8 | - HTML5 考点 9 | - 本地存储 localStorage 10 | - 语义化 section footer header article SEO 11 | - FORM 的新控件 12 | 使用更丰富的标摊控件，通过type的设置， 更加方便手机用户信息 13 | input type="text | number | range | color" 14 | - 拖拽能力 html5 15 | 16 | - 消息提醒组件的样式逻辑 17 | css变量 好处可以自身解决 样式逻辑 18 | 1. 0 sup 隐藏 19 | 2. > 0 显示 20 | 3. sup 宽度是变量 21 | 4. 99+ 怎么做？ 22 | 23 | - 不依赖js css 变量独自解决了样式逻辑 24 | 性能 25 | - .style.setProperty('var_name',value) 26 | 可以创造更加丰富的界面特效 -------------------------------------------------------------------------------- /js/router/hash/readme.md: -------------------------------------------------------------------------------- 1 | # SPA 优质的现代用户体验 2 | 1. 不要通过a 标签跳转页面清空html 3 | click event.prevenDefault() 默认行为 4 | index.html#page1 5 | index.html#page2 6 | index.html#page3 7 | url hash 部分 不会刷新页面 8 | 不同的url来匹配不同的资源 9 | url 会变 10 | 2. url 的hash 部分改变 请求新的内容 11 | 并且页面不会重复刷新 12 | 13 | 3. url 分成以下几部分 14 | js url 属于 BOM location对象 15 | 'http://127.0.0.1:5555/lesson_my/js/router/hash/index.html#page1' 16 | location.protocol http： -》 https 17 | location.host 127.0.0.1:5555 domain/hostname:port 18 | location.hostname 19 | location.port 20 | location.pathname /lesson_my/js/router/hash/index.html 21 | location.seach ?a=1 22 | location.hash #page1 23 | 改变时 不去刷新页面 -------------------------------------------------------------------------------- /js/salary/readme.md: -------------------------------------------------------------------------------- 1 | # 抖音工资 2 | 3 | - baseSalary 22k 24k 12 4 | - ABCDS 四档 5 | A 2 6 | B 3 7 | C 4 8 | D 5 9 | S 10 10 | ## js 数据类型 11 | 简单数据类型 12 | - number 不分长整 短整 浮点 都是数值类型 13 | - string 14 | - boolean 15 | - null 空 定义了，但值为空 16 | 值为空 17 | - undefine 声明了变量（只声明），但未赋值 18 | 内存空间（undifine 有地址，但是地址长度不定 ） 弱类型语言 19 | 20 | 复杂数据类型 21 | - object 22 | 除了简单数据类型 都是对象 23 | arry[] 可遍历的对象 24 | object{} 对象字面量 25 | function 可执行的对象 26 | 27 | - 自学作业 typeof 28 | 可以获得自变量类型，但是不准确 29 | 30 | ## 函数编程素养 31 | - 写注释 代码即注释，即文档 32 | - 参数校验 代码得健壮性 33 | - 条例清晰 34 | - 用户体验 level = 'C' 35 | 36 | -------------------------------------------------------------------------------- /interview/js/promise_3_methods/index.js: -------------------------------------------------------------------------------- 1 | const upload = function (blob) { 2 | let time = Math.round(100 + 500 * Math.random()); 3 | return new Promise((resolve, reject) => { 4 | // 是否执行测试 5 | console.log(`run ${time}ms`); 6 | // 成功失败概率50% 7 | if (Math.random() > 0.5) { 8 | setTimeout(resolve, time, 'promise resolved ' + time + 'ms'); 9 | } else { 10 | setTimeout(reject, time, 'promise rejected ' + time + 'ms'); 11 | } 12 | }); 13 | }; 14 | (async () => { 15 | try { 16 | let result = await Promise.race([upload(0), upload(1), upload(2)]); 17 | console.log(result); 18 | } catch (err) { 19 | console.error(err); 20 | } 21 | })(); -------------------------------------------------------------------------------- /js/coffee/readme.md: -------------------------------------------------------------------------------- 1 | # 泡一杯coffee 2 | 3 | 1. 把水煮沸 4 | 2. 用沸水冲泡coffee 5 | 3. 把coffee倒进杯子 6 | 4. 加糖加奶 7 | 8 | 传统的面向对象 9 | coffee 类 10 | kpcn instance 11 | 12 | - JS 面向对象的实现方式 13 | 1. 对象字面量 表达性强 独一无二 14 | { 15 | name: 'kk'， 16 | } 17 | 2. 模板批量生产的 18 | class + constructor new 19 | 3. 函数生产 20 | 21 | - 类构建的过程 22 | 1. 定义一个类 Coffee 模板 23 | 2. 在构造函数（constructor）中，传了 24 | type属性 25 | this.type this 是实例后的对象 26 | 我们要的实例对象构建出来 27 | 3. 添加一些方法， public 共有方法 28 | cof.boilWater(); 29 | 30 | - 面向对象的语法总结 31 | 1. class 类的抽象 coffee or tea 抽象了一下 父类 32 | 2. extends 继承 33 | 子类就拥有了父类的模板 34 | 3. 多个子类 细节略有不同 35 | 重写父类（同样的方法名）的方法。。。 36 | super 调用父类的方法 -------------------------------------------------------------------------------- /weapp/readme.md: -------------------------------------------------------------------------------- 1 | # 小程序 云开发 2 | 3 | ## 现代开发方式 4 | 1. 小程序 界面直接手机打开 4s店做一款卖车试驾应用 5 | 2. 选择技术方案 6 | Android IOS 7 | 小程序 8 | 3. 数据库不需要安装 云端 9 | 4. 不需要部署 一键发布到腾讯 10 | 11 | ## 小程序开发知识点 12 | 1. 开发一个个page 13 | /pages 14 | 2. page结构 15 | wxml 结构 16 | wxss 样式 17 | vm 适配所有手机 18 | vh 19 | 绝对居中 20 | page 每个页面隐藏的 标签选择 1 21 | .container {} 类选择器 10 22 | page 相对定位 relative 100vw 100vh 23 | container absolute 24 | t 50% l 50% 中心点 25 | transform：translate（-50%， -50%） 26 | 27 | js 逻辑 28 | page({ 29 | date:{ // 可以绑定数据 30 | title: '', 31 | car: '' 32 | } 33 | }) -------------------------------------------------------------------------------- /css/flexdemo/flex.css: -------------------------------------------------------------------------------- 1 | /* css reset 样式重置 */ 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | .row { 8 | display: flex; 9 | height: 20vh; 10 | background-color: green; 11 | margin: 10px 0; 12 | } 13 | 14 | .col { 15 | /* 不会把兄弟元素挤下去 16 | inline-block 可以设置宽高 17 | bug 有间隙 18 | 列式布局 19 | */ 20 | /* display: inline-block; */ 21 | width: 10%; 22 | background-color: #80ACCF; 23 | text-align: center; 24 | line-height: 100vh; 25 | } 26 | 27 | .col:nth-child(2n) { 28 | background-color:#CD38CD; 29 | } 30 | 31 | .col-7 { 32 | width: 70%; 33 | } 34 | .col-3 { 35 | width: 30%; 36 | } 37 | 38 | .container { 39 | width: 300px; 40 | margin:auto auto; 41 | } -------------------------------------------------------------------------------- /js/debounce/resize.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 20 | 21 | -------------------------------------------------------------------------------- /js/gainian/1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 22 | 23 | -------------------------------------------------------------------------------- /vue3/api/readme.md: -------------------------------------------------------------------------------- 1 | # 为什么喜欢vue ？ 2 | 3 | - 丰富的指令 4 | v-if(unmounted) v-show(display:none) 5 | v-model 双向绑定 6 | v-on:click 7 | v-bind: 8 | v-html 输出含有html的内容 9 | vue 默认会把html转为字符来显示，而不会转译成真正的html 10 | 肯定有原因？ 11 | - 修饰符，真的爽 12 | @click.prevent 13 | @submit.prevent 14 | @keydown.enter 15 | - 计算级属性 computed 16 | view 更纯粹，可读性更好 17 | 帮助我们缓存计算结果，当data 发送改变的时候， 18 | 如果，我们不要计算属性，用的是表达式的化， 19 | 就算是无关的数据，也会重新计算渲染 20 | 21 | - v-model 确实好用 22 | input 开销 性能不好 change? 23 | - computed 与watch 区别 24 | 1. computer属性 一定要有返回值 25 | 2. watch 只是监听， 26 | 3. computed 在mounted 自动执行一次 27 | 而watch只有在数据改变的时候才会执行 -------------------------------------------------------------------------------- /drag_n_drop/bz.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 24 | 25 | 26 |
27 |
1
28 |
2
29 |
30 | 31 | -------------------------------------------------------------------------------- /vue3/todos/2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | todos 8 | 9 | 10 | 11 |
12 | 26 | 27 | -------------------------------------------------------------------------------- /tecent/weui/btn.css: -------------------------------------------------------------------------------- 1 | /* 复用的样式 */ 2 | .weui-btn { 3 | /* 内部元素定位 */ 4 | position: relative; 5 | /* 行内->块级 */ 6 | display: block; 7 | width: 184px; 8 | margin-left: auto; 9 | margin-right: auto; 10 | padding: 8px 24px; 11 | font-weight: 700; 12 | font-size: 17px; 13 | text-align: center; 14 | color: #fff; 15 | line-height: 1.88235294; 16 | border-radius: 8px; 17 | /* margin-top: 10px; */ 18 | } 19 | 20 | .weui-btn_primary { 21 | background-color: #07c160; 22 | } 23 | 24 | .weui-btn_primary:active { 25 | background-color: yellow; 26 | } 27 | 28 | .weui-btn_warm { 29 | background-color: #f2f2f2; 30 | color: #fa5151; 31 | } 32 | 33 | /* 兄弟选择器 ‘+’ */ 34 | .weui-btn + .weui-btn { 35 | margin-top: 10px; 36 | } -------------------------------------------------------------------------------- /drag_n_drop/common.css: -------------------------------------------------------------------------------- 1 | * { 2 | /* 盒子大小的计算， 启动新的计算公式 */ 3 | box-sizing: border-box; 4 | } 5 | body { 6 | background-color: steelblue; 7 | display: flex; 8 | align-items: center; 9 | justify-content: center; 10 | height: 100vh; 11 | overflow: hidden; 12 | margin: 0; 13 | } 14 | .empty { 15 | height: 150px; 16 | width: 150px; 17 | margin: 10px; 18 | border: 3px solid black; 19 | background-color: white; 20 | } 21 | .fill { 22 | background-image: url('https://source.unsplash.com/random/150x150'); 23 | height:145px; 24 | width: 145px; 25 | cursor: pointer; 26 | } 27 | .hold { 28 | border: solid 5px #ccc; 29 | } 30 | .hovered { 31 | background-color: #333; 32 | border-color: white; 33 | border-style: dashed; 34 | } -------------------------------------------------------------------------------- /js/new_func/readme.md: -------------------------------------------------------------------------------- 1 | - git log 2 | 由于提交记录过多， 自动进入到vi 的编辑状态 3 | j 上移 4 | k 下移 5 | :q 退出 6 | o 新行 7 | :w 保存 8 | :i 进入到编辑状态 9 | esc 推出当前状态 10 | 11 | - 变量提升和暂时性死区 12 | 编译阶段 早于运行阶段 13 | var let（不可以在声明前使用，暂时性死区） 走两条不同的路 14 | js 语言的特点，在代码运行前确立作用域 15 | 所有的变量属于作用域管理的 16 | js 里面的变量 是有作用域的 VO{name} 17 | 变量提升 不好的 18 | 19 | - this 终极话术 20 | this 永远指向最后调用的它的那个对象 21 | 22 | - this 指向谁？ 23 | 1. 普通函数 window 24 | 2. 严格模式 undefined 25 | 3. 对象的方法 对象 26 | 4. new 实例 27 | 5. 事件处理函数 事件发生的对象 28 | 29 | - 如何指定this 30 | 6. call apply 手动指定 this 指向第一个参数 31 | 借用方法 除了指定this 还可以传参 32 | call 展开来 apply [] 立即运行 33 | 7. bind 返回一个指定的this 的函数 34 | 未来被调用时 this 指向那个对象 35 | 8. that = this 作用域链 专业的前端 36 | 9. 箭头函数 内部没有this 找外层的this -------------------------------------------------------------------------------- /js/new_func/call.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 27 | 28 | -------------------------------------------------------------------------------- /weapp/didi-bike/home/index.js: -------------------------------------------------------------------------------- 1 | // home/index.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad(options) { 15 | 16 | }, 17 | 18 | /** 19 | * 生命周期函数--监听页面初次渲染完成 20 | */ 21 | onReady() { 22 | 23 | }, 24 | 25 | /** 26 | * 生命周期函数--监听页面显示 27 | */ 28 | onShow() { 29 | 30 | }, 31 | 32 | /** 33 | * 生命周期函数--监听页面隐藏 34 | */ 35 | onHide() { 36 | 37 | }, 38 | 39 | /** 40 | * 生命周期函数--监听页面卸载 41 | */ 42 | onUnload() { 43 | 44 | }, 45 | 46 | /** 47 | * 页面相关事件处理函数--监听用户下拉动作 48 | */ 49 | onPullDownRefresh() { 50 | 51 | }, 52 | 53 | /** 54 | * 页面上拉触底事件的处理函数 55 | */ 56 | onReachBottom() { 57 | 58 | }, 59 | 60 | /** 61 | * 用户点击右上角分享 62 | */ 63 | onShareAppMessage() { 64 | 65 | } 66 | }) -------------------------------------------------------------------------------- /css/bfc/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 23 | 24 | 25 |
26 |
27 |
28 |
29 |
30 |
31 | 32 | -------------------------------------------------------------------------------- /leetcode/1.js: -------------------------------------------------------------------------------- 1 | // JS Number 64位 52位 存放数据的二进制 2 | // 表达的最大值？ 3 | let a = '1234567898765432100000012345678901'; // 64 位 2^52-1l 溢出 4 | let b = '9876543210123456789000000000123'; 5 | function add(str1,str2) { 6 | let maxLength = Math.max(str1.length,str2.length) 7 | str1 = str1.padStart(maxLength,'0'); 8 | str2 = str2.padStart(maxLength,'0'); 9 | console.log(maxLength); 10 | let temp = 0; // 相加之和 %10 11 | let flag = 0; // 进位 12 | let result = ''; 13 | // 低位到高位 14 | for(let i = maxLength-1; i > 0;i --){ 15 | temp = parseInt(str1[i])+parseInt(str2[i])+flag;// 16 | flag = Math.floor(temp/10); // 进位 17 | result = temp % 10 + result 18 | } 19 | if(flag === 1) { 20 | result = '1' + result 21 | } 22 | return result 23 | } 24 | const result = add(a,b) 25 | console.log(result); -------------------------------------------------------------------------------- /weapp/wangzhe/pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 10 | {{item.text}} 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /interview/let _var_const/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 31 | 32 | -------------------------------------------------------------------------------- /algorithm/sort/5.js: -------------------------------------------------------------------------------- 1 | const bubblsSort = arr => { 2 | console.time('时间:'); 3 | // 多声明变量,可以让我们放下一些思想 4 | let tmp = 0; // 记录最后一次交换的位置 5 | let lastExchangeIndex = 0; // 无序数列的边界 6 | let len = arr.length; 7 | let sortBorder = arr.length - 1; // 已排好序的边界 8 | for(let i = 0; i < len; i ++) { 9 | let isSorted = true; // 是否可以直接退出? 10 | // 0 -> sortBorder swap 11 | for(let j = 0; j < sortBorder; j ++) { 12 | if(arr[j] > arr[j+1]) { 13 | [arr[j],arr[j+1]] = [arr[j+1],arr[j]] 14 | isSorted = false 15 | lastExchangeIndex = j; 16 | } 17 | } 18 | sortBorder = lastExchangeIndex 19 | if(isSorted) { 20 | break; 21 | } 22 | } 23 | console.timeEnd('时间:') 24 | console.log(arr); 25 | } 26 | bubblsSort([3,4,2,1,5,6,7,8]) -------------------------------------------------------------------------------- /css/bfc/readme.md: -------------------------------------------------------------------------------- 1 | # css 必考题 2 | Block Formating Context 3 | Block 占据一行 4 | Flex Formating context 5 | row 不会换行 6 | 我们看到的页面 哪些规则决定的呢？ 7 | - 文档流 8 | 正常文档流 9 | 脱离文档流 10 | none 11 | position 不为 static 12 | float 元素离开了文档流 13 | 父元素拿不到子元素的高度 14 | 15 | 弹性布局 子元素在一行上显示， float 在一行上显示 16 | 17 | - 在正常文档流中 18 | float 会让元素，离开文档流 19 | 父元素不能知晓子元素的大小 20 | 更严重的问题 文档流出问题， 下面的盒子会盖到float 元素 21 | 一定要让父元素拿到高度， 22 | 在正常的文档流中，可以开启新的BFC 23 | html 是最大的BFC 由浏览器自动创建给予 24 | - 在BFC 环境中，父元素高度会将浮动元素参与计算 25 | - 创建BFC 的方法 26 | - overflow: hidden 27 | - display: inline-block 28 | - position: absolute fixed 29 | - float 30 | - flex 31 | - dispaly: cable 32 | 33 | - 在同一个BFC里，垂直方向的距离，由margin决定 34 | 相邻两个margin 会重叠 -------------------------------------------------------------------------------- /js/router/hash/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | SPA 8 | 9 | 10 | 17 |
18 | 19 |
20 | 28 | 29 | -------------------------------------------------------------------------------- /css/center/readme.md: -------------------------------------------------------------------------------- 1 | # 2 | 3 | - css Rule 4 | 1. 盒子模型 content+padding+border+margin 快递 5 | 2. 背景颜色调试大法 6 | 3. css 布局方式的一种 7 | - 离他最近的position relative 元素定位 8 | - 如果没有，就一直往外查找 body 9 | 4. block 块级元素 盒子能力 占整个一行， 设置宽高 把兄弟元素挤下去 10 | inline 行内元素 没有盒子能力 自身内容撑起来的 不能设置宽高 11 | inline-block 既能设置宽高 又不会把兄弟元素挤下去 12 | 5. display： flex; 弹性布局 13 | 14 | 15 | - 垂直居中 16 | 1. 父子元素 17 | 父元素 relative(不是必须的) 18 | 子元素 absolute 19 | 2. 要不要确定子元素大小 20 | transfrom rotate | ranslate | scale 21 | 变基 22 | 23 | - 方法 24 | - 定位 + margin负值 25 | 父元素 一定要得到大小 26 | - 定位 + tranform 27 | 相对于自身移动 28 | - calc 将父元素的一半 - 子元素的一半 29 | 缺点是性能不好 30 | - 弹性布局 31 | 不用定位 32 | 缺点是太新了， 兼容性不好 -------------------------------------------------------------------------------- /weapp/didi-bike/pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | .map { 3 | width: 100%; 4 | height: 100%; 5 | } 6 | 7 | .top-tips { 8 | position: absolute; 9 | width: 710rpx; 10 | height: 108rpx; 11 | left: 50%; 12 | z-index: 999; 13 | transform: translateX(-50%); 14 | top: 12rpx; 15 | /* 内部成为一个弹性布局方式 16 | 原来的块级能力会消失 inline-block；两列式布局 17 | 18 | */ 19 | display: flex; 20 | background-color: #fff; 21 | align-items:center; 22 | padding-left: 20rpx; 23 | font-size: 14pt; 24 | color: #666; 25 | } 26 | 27 | .top-icon { 28 | width: 74rpx; 29 | height: 74rpx; 30 | margin-right: 24rpx; 31 | border-radius: 50%; 32 | } 33 | 34 | .top-text { 35 | flex: 1; /* 弹性布局中的主元素 */ 36 | /* background-color: pink; */ 37 | } 38 | 39 | .map-icon { 40 | position: absolute; 41 | right: 20rpx; 42 | width: 76rpx; 43 | height: 76rpx; 44 | } 45 | 46 | .map-icon_reset { 47 | bottom: 42rpx; 48 | } -------------------------------------------------------------------------------- /vue3/todos/1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 12 | 13 | 25 | 26 | -------------------------------------------------------------------------------- /js/getTypeof/1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 32 | 33 | -------------------------------------------------------------------------------- /js/new_func/arrow_function.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 31 | 32 | -------------------------------------------------------------------------------- /codewars/phone_number/1.js: -------------------------------------------------------------------------------- 1 | function creatPhoneNumber(numbers) { 2 | // var x = ''; 3 | // for(var i = 0; i<3; i++){ 4 | // x = x + numbers[i]; 5 | // } 6 | // var y = ''; 7 | // for(var i = 3; i<6; i++){ 8 | // y = y + numbers[i]; 9 | // } 10 | // var z = ''; 11 | // for(var i = 6; i<=9; i++){ 12 | // z = z + numbers[i]; 13 | // } 14 | // console.log('(' + x +') ' + y + '-' +z); 15 | 16 | //字符串 (123) 456-798 17 | // 字符串拼接 18 | // return `(${numbers[0]}${numbers[1]}${numbers[2]}${numbers[3]}${numbers[4]})` 19 | 20 | const nums = numbers.join (''); 21 | const a = nums.substr(0,3); 22 | const b = nums.substr(3,3); 23 | const c = nums.substr(6,4); 24 | console.log('(' + a +') ' + b + '-' +c); 25 | } 26 | // (123) 456-798 27 | creatPhoneNumber([1,2,3,4,5,6,7,8,9,0]); 28 | 29 | let name = `liu` 30 | let word = `hellow, ${name}。` 31 | console.log(word); 32 | 33 | -------------------------------------------------------------------------------- /algorithm/sort/4.js: -------------------------------------------------------------------------------- 1 | const bubbleSort = arr => { 2 | // 函数的局部变量 3 | console.time('冒泡排序耗时');// 时间计算 4 | const length = arr.length; // 缓存数组长度 变量 5 | // 相邻 一趟循环一位置的顺序是对的交换? 最右侧一定是最大值 6 | 7 | for(let i = 0; i < length - 1; i ++) { // 8 | // 所有元素排序 位置放置正确的数字 9 | let isSorted = true; // 本轮有序吗? 10 | for(let j =0; j < length - i - 1; j ++) {// 内循环 排号一个位置后 11 | if(arr[j] > arr[j + 1]) { 12 | // const temp = arr[j]; 13 | // arr[j] = arr [j+1]; 14 | // arr[j] = temp; 15 | [arr[j],arr[j+1]] = [arr[j+1],arr[j]]; 16 | isSorted = false; 17 | } 18 | } 19 | if(isSorted){ 20 | // 一次都没发生 21 | break; 22 | } 23 | } 24 | console.timeEnd('冒泡排序耗时'); 25 | } 26 | // 全局中 27 | const arr = [5,8,6,3,9,2,1,7]; // 引用是赋值 堆内存 值决定 28 | 29 | bubbleSort(arr); 30 | console.log(arr); -------------------------------------------------------------------------------- /weapp/mycar/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "pages/index/index", 4 | "pages/logs/logs", 5 | "pages/stories/index", 6 | "pages/vehicles/show" 7 | ], 8 | "window":{ 9 | "backgroundTextStyle":"light", 10 | "navigationBarBackgroundColor": "#fff", 11 | "navigationBarTitleText": "旅梦4S店", 12 | "navigationBarTextStyle":"black" 13 | }, 14 | "tabBar": { 15 | "selectedColor": "#000", 16 | "borderStyle": "white", 17 | "backgroundColor": "#ededed", 18 | "list": [ 19 | { 20 | "text": "首页", 21 | "pagePath": "pages/index/index", 22 | "iconPath": "assets/icons/home.png", 23 | "selectedIconPath": "assets/icons/home-active.png" 24 | }, 25 | { 26 | "text": "故事", 27 | "pagePath": "pages/stories/index", 28 | "iconPath": "assets/icons/event.png", 29 | "selectedIconPath": "assets/icons/event-active.png" 30 | } 31 | ] 32 | }, 33 | "style": "v2", 34 | "sitemapLocation": "sitemap.json" 35 | } 36 | -------------------------------------------------------------------------------- /weapp/discovery/pages/detail/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | 3 | /** 4 | * 页面的初始数据 5 | */ 6 | data: { 7 | 8 | }, 9 | 10 | /** 11 | * 生命周期函数--监听页面加载 12 | */ 13 | onLoad: function (options) { 14 | 15 | }, 16 | 17 | /** 18 | * 生命周期函数--监听页面初次渲染完成 19 | */ 20 | onReady: function () { 21 | 22 | }, 23 | 24 | /** 25 | * 生命周期函数--监听页面显示 26 | */ 27 | onShow: function () { 28 | 29 | }, 30 | 31 | /** 32 | * 生命周期函数--监听页面隐藏 33 | */ 34 | onHide: function () { 35 | 36 | }, 37 | 38 | /** 39 | * 生命周期函数--监听页面卸载 40 | */ 41 | onUnload: function () { 42 | 43 | }, 44 | 45 | /** 46 | * 页面相关事件处理函数--监听用户下拉动作 47 | */ 48 | onPullDownRefresh: function () { 49 | 50 | }, 51 | 52 | /** 53 | * 页面上拉触底事件的处理函数 54 | */ 55 | onReachBottom: function () { 56 | 57 | }, 58 | 59 | /** 60 | * 用户点击右上角分享 61 | */ 62 | onShareAppMessage: function () { 63 | 64 | } 65 | }) -------------------------------------------------------------------------------- /drag_n_drop/readme.md: -------------------------------------------------------------------------------- 1 | # html5 拖拽效果 2 | 3 | - github 提供了 拖拽提交代码, 4 | drag 文件 5 | drag over 元素区域的上空 6 | drag end 放开 7 | 8 | - 资源加载的顺序 9 | 1. css 放在头部 ,js放在尾部 10 | DOM树 +cssO M 下载并执行 生成渲染树 ,快速显示页面 11 | 优先 12 | 2. js 执行会修改 DOM document.write 13 | 下载和执行 堵塞 document.createElment 14 | 3. script 又可以放在 head defer/async 15 | 16 | - 浏览器(c++和java) 不是js js只是浏览器的一部分 17 | js 是单线程 18 | defer 后台加载js 启动多线程 不会阻塞文档下载 19 | async 推迟 20 | - js 要尽快执行,页面可以最快速度的进入交互状态 21 | DOMContentLoaded 比 onload 更合适 img video 资源下载 onload 22 | async 和defer 都不会影响静态页面的渲染, 但是 defer 会很好的解决 执行顺序的问题,以来问题 23 | async 如果不依赖,文件的交互会更快实现 24 | 25 | - 盒子模型计算公式 26 | box-sizing 更改计算方式 IE盒子模型 标准盒子模型 27 | box-sizing:border-box; 切换到IE盒模型的方式 w= 内容+padding+ border 28 | 29 | 现代浏览器默认使用标准盒模型 30 | 360 如果本地安装了Chrome webkit ,IE老版本 ,ie 31 | edge 不再是老的IE 仍然使用标准柜盒模型 32 | IE6/7/8 老的,已经退出了历史舞台 33 | 34 | IE盒模型 移动端动态分配内容,padding border 的列布局中 35 | 相当简单 36 | 37 | 没有小数点px 物理元器件 ,发光源1px=1个发光源 38 | -------------------------------------------------------------------------------- /css/music_summary/readme.md: -------------------------------------------------------------------------------- 1 | # 大厂Html5 作品赏析 2 | 3 | - html5 标签 4 | audio 网易云音乐 5 | video 爱奇艺 B站 6 | 7 | - background-size 8 | 1. 移动端rem w h 是多变的 而pc端没有这个问题 9 | 2. 移动端 retina 3倍retina 10 | 40×40 80x80 120x120 200x200 11 | 3. background-size: cover 背景图片大小 12 | 等比例缩放背景图片填满容器 13 | 超出则剪裁 14 | contain 15 | 16 | - 库文件引入位置 17 | 1. css 放到head 里 18 | css 应该尽早参与网页的渲染 19 | 20 | 2. JS放在body最下面， 会阻塞页面渲染 21 | 22 | - swiper 滑动组件库的使用 23 | 1. 引入组件库 24 | js css 25 | 2. 固定的html结构 26 | .swiper-container(滑动区域的大小)>.swiper-warpper>.swiper-slide 27 | 3. new Swiper(Selector,{ 28 | direction: '' 29 | }) 30 | 31 | - translate3d(-50%,0,0) 3d 启动3d加速器 GPU渲染 32 | translate(-50%,0) 2d 33 | 效果一样 34 | 35 | - 使用linear-gradient生成背景图片 36 | 1. 颜色渐变图片 #f8ddd1,#faece5 73%,#fad2c0 37 | colorStop 38 | 2. 性能优化， 图片下载较大 39 | css 写的， 40 | img src 下载 + 显示 41 | 3. 下载越多，http 并发数就越多，卡顿越明显 42 | 马路 43 | -------------------------------------------------------------------------------- /css/bfc/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 26 | 27 | 28 | 29 |
30 | 31 |
32 |
33 |
34 | 35 | -------------------------------------------------------------------------------- /vue3/readme.md: -------------------------------------------------------------------------------- 1 | # Vue 的世界 2 | 可以从小程序迁移 3 | - 组件思想 components 4 | wxml + wxss + js 可复用的组件 5 | 页面由组件构成，比标签搞一个级别 6 | - 数据驱动思想 不需要找DOM节点，setData() 自动更新 ？ 7 | 8 | - wx:for 指令 v-for 9 | - 路由 10 | /pages + app.json tabbar 目录下就是路由 11 | wx.navigation({ 12 | url; '' 13 | }) 14 | vue ? vue-router 15 | 16 | - 现代 web App单页应用 10年实现 6年成熟 17 | vue https://unpkg.com/vue@next 18 | - 根节点 启动web App 19 | 20 | - Vue 21 | 1. 现代当红的前端框架：好学，简单 22 | 2. 组件化，数据驱动 思想 23 | 3. Vue 是命名空间 24 | Vue. 25 | 4. Vue.version vue 最新版 vue3 26 | 5. 对照小程序，迁移学习 27 | - template wxml 28 | 模板 {{}} 组件 指令 ... 29 | - js data() { 30 | 31 | } 32 | - v-on:click @click 代替 33 | this.content = '' this直接引用data 里的数据 34 | this.$data.content = '' 35 | vue 比 react 更友好，方便入门，学习成本低 36 | API设计人性化 37 | 38 | - vue 底层源码 39 | 1. data {} 如何被监听，重新编译模板？ proxy es6 40 | 2. vue 世界为什么要杜绝DOM 编程 #app ? 41 | DOM 编程慢... -------------------------------------------------------------------------------- /weapp/didi-bike/pages/home/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | {{item.title}} 11 | 12 | 13 | {{item.subTitle}} 14 | 15 | 16 | {{item.author}} 17 | 18 | 19 | 20 | 21 | {{item.score}} 22 | 23 | 24 | {{item.action}} 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /js/bigData/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 34 | 35 | -------------------------------------------------------------------------------- /js/getTypeof/5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 31 | 32 | -------------------------------------------------------------------------------- /css/flex/flex-2col.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 30 | 31 | 32 |
33 |
34 |
35 |
36 | 37 | -------------------------------------------------------------------------------- /drag_n_drop/script.js: -------------------------------------------------------------------------------- 1 | const fill = document.querySelector('.fill'); 2 | const empties = document.querySelectorAll('.empty'); 3 | 4 | for (const empty of empties) { 5 | empty.addEventListener('dragover', dragOver); 6 | empty.addEventListener('dragenter', dragEnter); 7 | empty.addEventListener('dragleave', dragLeave); 8 | empty.addEventListener('drop', dragDrop); 9 | } 10 | 11 | // 被拖拽元素上 12 | fill.addEventListener('dragstart', dragStart) 13 | fill.addEventListener('dragend', dragEnd) 14 | // 到释放目标的上空触发 15 | 16 | function dragStart() { 17 | this.className += ' hold'; // 同步 18 | setTimeout(() => this.className = 'invisible', 0); 19 | } 20 | 21 | function dragEnd() { 22 | this.className = 'fill' 23 | } 24 | 25 | function dragOver(e) { 26 | e.preventDefault(); 27 | } 28 | 29 | function dragEnter(e) { 30 | e.preventDefault(); 31 | this.className += ' hovered'; 32 | } 33 | 34 | function dragLeave() { 35 | this.className = 'empty'; 36 | } 37 | 38 | function dragDrop() { 39 | this.className = 'empty'; 40 | this.append(fill); 41 | } -------------------------------------------------------------------------------- /reverse_str/reg.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |
12 | 13 | 14 |
15 |
16 | 17 |
18 |
19 | 32 | 33 | -------------------------------------------------------------------------------- /weapp/wangzhe/pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | /* 当前页面样式 */ 2 | 3 | .page-section-spacing { 4 | background-color: rgba(0, 0, 0, 0.3); 5 | width: 100%; 6 | color: #fff; 7 | /* 立体感 */ 8 | box-shadow:0 0.01rem 0.18rem rgba(0, 0, 0, 0.6); 9 | } 10 | 11 | .scroll-view_H { 12 | /* 空白符 nowrap 不要换行 */ 13 | white-space: nowrap; 14 | } 15 | 16 | .scroll-view-item_H { 17 | display: inline-block; 18 | height: 70rpx; 19 | line-height: 70rpx; 20 | font-size: 10pt;/* 字体 用pt*/ 21 | } 22 | 23 | .navItem { 24 | padding: 0 10px; 25 | width: 100%; 26 | height: 100%; 27 | display: block; 28 | text-align: center; 29 | } 30 | 31 | /* 英雄列表 */ 32 | .heroList { 33 | width: 100%; 34 | } 35 | 36 | .heroItrm { 37 | width: 100%; 38 | box-sizing: border-box; 39 | padding: 10rpx 10rpx; 40 | } 41 | 42 | .heroItem .hItem { 43 | width: 45%; 44 | height: 360rpx; 45 | background: transparent; 46 | margin: 10rpx; 47 | } 48 | 49 | .heroItem .hItem:nth-child(2n) { 50 | float: right; 51 | } 52 | .heroItem .hItem:nth-child(2n-1) { 53 | float: left; 54 | } 55 | 56 | .hItemimg { 57 | width: 100%; 58 | height: 100%; 59 | } -------------------------------------------------------------------------------- /js/newFunction/1.js: -------------------------------------------------------------------------------- 1 | function Person(name, age) { 2 | // 构造 3 | // 基于原型的封装 {} 4 | this.name = name; 5 | this.age = age; 6 | } 7 | Person.prototype.sayHi = function() { 8 | console.log(`你好，${this.name}`); 9 | } 10 | const tao = new Person('taot',20); 11 | 12 | /** 13 | * @func new 的过程 14 | * @params constructor ... 15 | * 1. js 是基于对象的 {} 16 | * 2. Person this 构造的过程 17 | * 3. 手动返回 实例对象 18 | */ 19 | function myNew(constructors, ...args) { 20 | console.log(args, '///'); 21 | const obj = {}; // 基于对象 22 | // 借 23 | const constructor = Array.prototype.shift.call(arguments); 24 | // arguments 能用下标访问 但是没有数组的方法 25 | // 伪数组 26 | // console.log(typeof arguments, Object.prototype.toString.call(arguments)); 27 | // console.log(arguments[0]); 28 | // {} 29 | // Person 属性？ 30 | // console.log(arguments); 31 | // 展开 ... 32 | // call apply 手动指定函数内部的 this 33 | // constructor.call(obj, ...arguments); 34 | // console.log(constructor); 35 | constructor.apply(obj, args); 36 | console.log(obj); 37 | obj.__proto__ = constructor.prototype; 38 | return obj; 39 | } 40 | let lu = myNew(Person,'xman', 21); 41 | // console.log(lu); -------------------------------------------------------------------------------- /weapp/discovery/pages/index/index.js: -------------------------------------------------------------------------------- 1 | // index.js 2 | // 获取应用实例 3 | const app = getApp() 4 | 5 | Page({ 6 | data: { 7 | title:'布加迪', 8 | car:'https://p3.dcarimg.com/img/mosaic-legacy/bef600002ee75271a725~332x0.webp' 9 | }, 10 | // 事件处理函数 11 | bindViewTap() { 12 | wx.navigateTo({ 13 | url: '../logs/logs' 14 | }) 15 | }, 16 | onLoad() { 17 | setTimeout(() => { 18 | title:'aaa'; 19 | car:'https://p3.dcarimg.com/img/mosaic-legacy/bef500005c1ff4a095cd~332x0.webp' 20 | }, 3000); 21 | }, 22 | getUserProfile(e) { 23 | // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗 24 | wx.getUserProfile({ 25 | desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写 26 | success: (res) => { 27 | console.log(res) 28 | this.setData({ 29 | userInfo: res.userInfo, 30 | hasUserInfo: true 31 | }) 32 | } 33 | }) 34 | }, 35 | getUserInfo(e) { 36 | // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息 37 | console.log(e) 38 | this.setData({ 39 | userInfo: e.detail.userInfo, 40 | hasUserInfo: true 41 | }) 42 | } 43 | }) 44 | -------------------------------------------------------------------------------- /interview/js/4.js: -------------------------------------------------------------------------------- 1 | // 手写Map 2 | // thisArg 指定 callbackFn 内部的this 指向 3 | Array.prototype.map = function(callbackFn, thisArg) { 4 | // this -> [1,2,3] 5 | // obj? 6 | if(this == null || this == undefined) { 7 | throw new TypeError('cannot read porety map of null or undefined') 8 | } 9 | if(Object.prototype.toString.call(callbackFn) != '[object Function]') { 10 | throw new TypeError(callbackFn + ' is not a function') 11 | } 12 | // 显示类型转换 this 对象 13 | let O = Object(this) 14 | let T = thisArg 15 | 16 | let len = O.length 17 | let A = new Array(len); // 和以前的数组没有影响，全新内存分配 18 | for(let k = 0; k < len; k ++) { 19 | // this[k] 遍历的每一项 20 | // 下标 21 | // this 第三个参数 22 | if(k in O) { 23 | let kValue = O[k] 24 | let mappedValue = callbackFn.call(T, kValue, k, O); 25 | A[k] = mappedValue 26 | } 27 | } 28 | return A 29 | } 30 | 31 | let nums = [1,2,3] 32 | let obj = { val: 5 } // map 回调函数 绑定它的this 33 | let newNums = nums.map(function(item, index, array) { 34 | return item + index + array[index] + this.val 35 | },obj) 36 | console.log(newNums); -------------------------------------------------------------------------------- /data-vision/demo1/echarts-demo/src/App.vue: -------------------------------------------------------------------------------- 1 | 43 | 44 | 47 | 48 | 54 | -------------------------------------------------------------------------------- /js/debounce/scroll.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 22 | 23 | 24 |
25 |
26 |
27 | 28 | 38 | 39 | -------------------------------------------------------------------------------- /css/flex/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 25 | 26 | 27 | 28 | 29 | 30 |
31 | 32 |
1
33 |
34 | 2 35 |
36 | 2.2 37 |
38 |
3
39 |
40 | 41 | -------------------------------------------------------------------------------- /js/closuer/2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 37 | 38 | -------------------------------------------------------------------------------- /js/bigData/2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 42 | 43 | -------------------------------------------------------------------------------- /ryf/object/readme.md: -------------------------------------------------------------------------------- 1 | # 一起读技术文章， 提升我们的认知 2 | 3 | 1. c 语言 过程式 函数 main() 4 | JS 基于（面向）对象 5 | 面向 对象 6 | boject-based 7 | 8 | 2. js 原来没有 class 关键字， 9 | var es5 let const es6 以后 10 | es6 2015 才有了class 关键字 11 | js 不是一种真正的面向对象编程语言,基于对象的语言 12 | 13 | 3. 除了简单的数据类新，都是对象 14 | 任何一个对象都有一个__peoto__私有属性去说明它是基于哪个对象实现的 15 | 16 | 4. js 本没有类， 早期 class 关键字都没有 17 | 但是内置了一个object 对象 18 | 其它所欲对象都基于这个对象进行创建 19 | 在把这个对象的构建过程（属性和方法集合），用一个函数来封装 20 | new Person（） 得到了 基于对象的新对象 21 | 22 | 5. 基于对象，生成实例对象的原始模式 一步步创建的 23 | 缺点是慢 重复 24 | 25 | 6. 函数封装对象的时候 26 | 27 | 7. js 使用构造函数的方式来创建类 28 | 以new 的方式连接 29 | 对象构建过程的封装 this 指向 实列 30 | 另外class 有的instanceof 也有 31 | 并且兄弟对象之间基于对象一致 32 | 33 | 8. js 基于对象 34 | - __proto__ object 35 | - instanseof 36 | - constructor 37 | 38 | 9. js 中创建一个类 写个构造函数就完成了 39 | 40 | 10. js 构建类的流程 41 | - 类就是属性和方法的模板，抽象的 42 | - 使用构造函数 定义实例属性的构造过程， 每个对象的属性是不一样的， 43 | 归实例自己所有 this 具象的 44 | - 由于 实例们的公有属性没有必要放在构造函数内，会消耗没有必要的内存 45 | - 每个函数都有一个prototype 属性，专门用来设计共享的属性和方法 46 | 原型对象 47 | js 类 = 构造函数（constructor） + prototype 48 | new 构造函数 （constructor）实例对象 49 | 50 | - 实例是怎么拿到构造函数的prototype 里的属性或方法的 51 | 52 | -------------------------------------------------------------------------------- /data-vision/demo1/echarts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 37 | 38 | -------------------------------------------------------------------------------- /js/gainian/2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 32 | 33 | -------------------------------------------------------------------------------- /js/gainian/readme.md: -------------------------------------------------------------------------------- 1 | - 类数组 2 | 有length属性 可以遍历 但是不具备数组的很多方法的对象子类型 3 | 如 arguments NodeList 4 | 5 | 有length属性， 可以遍历 的对象类型， 不是真正的数组 6 | 不能调用数组方法 7 | 对象的子类型 8 | - 举例类数组 9 | arguments 函数的内置对象 this 10 | - es6 设计箭头函数的原因？ 11 | 1. this 增加了代码的复杂性， 对其他语言开发者不友好 12 | 2. es6 设计的指导原则 -- 简洁优雅 13 | - 如何把类数组转成真正的数组 14 | 可以使用数组的方法 15 | NodeList div html js runtime Node 对象 16 | map html 字符串数组 .join() 17 | - 遍历一下{} push [] 18 | for(let i = 0; i < length; i ++) 19 | - 切割 slice 20 | - Array.from 21 | - 展开运算符 22 | - concat + apply 23 | concat 返回值也是数组 24 | 25 | - 如何理解reduce 26 | 1. es6 map 外 最高频数组api考点 27 | 2. for of 或技术循环太机械 命令式编程 28 | 3. map reduce filter every some 函数式编程 29 | useReducer() reduce 把数组推掉 30 | ((prev,cur) => { 31 | return prev + cur 32 | },0) 33 | 4. 可读性更强 34 | 35 | - JS 判断数组包含某个值 36 | 蹦出api来是不友好的， 专业， 准确且全面 37 | - indexOf 38 | 返回元素在数组中第一次出现的下标， 从0开始 39 | 否则 -1 40 | - includes 41 | 数组中是否存在这个值， 42 | - find reduce map 43 | 满足条件的第一个元素的值 44 | - findIndex 45 | 46 | 47 | -------------------------------------------------------------------------------- /weapp/didi-bike/pages/home/index.wxss: -------------------------------------------------------------------------------- 1 | /* pages/home/index.wxss */ 2 | .movie-list { 3 | padding: 20rpx; 4 | background-color: #fff; 5 | color: #787878; 6 | border-top: 1px solid #eaeaea; 7 | border-bottom: 1px solid #eaeaea; 8 | } 9 | 10 | .movie-list .wp_cell__hd image { 11 | display: block; 12 | width: 130rpx; 13 | height: 190rpx; 14 | } 15 | 16 | .movie-list .wp_cell__bd { 17 | margin-left: 20rpx; 18 | padding-top: 10rpx; 19 | overflow: hidden; 20 | } 21 | 22 | .movie-list .wp_cell__bd .title { 23 | font-size: 16pt; 24 | color: #333333; 25 | } 26 | .movie-list .wp_cell__bd .sub_title { 27 | font-size: 14pt; 28 | color: #666666; 29 | margin: 4rpx 0px; 30 | white-space: nowrap; 31 | } 32 | .movie-list .wp_cell__bd .actor { 33 | font-size: 14pt; 34 | color: plum; 35 | margin: 4pt 0px; 36 | white-space: nowrap; 37 | } 38 | .movie-list .wp_cell__ft .score { 39 | font-size: 12pt; 40 | color: #cf616a; 41 | } 42 | .movie-list .wp_cell__ft .action{ 43 | margin-top: 60rpx; 44 | border: 1px solid #29cc6d; 45 | border-radius: 15%; 46 | color: #29cc6d; 47 | display: inline-block; 48 | padding: 4rpx 8rpx; 49 | font-size: 12pt; 50 | line-height: 16pt; 51 | text-align: center; 52 | } 53 | -------------------------------------------------------------------------------- /yayu/2.js: -------------------------------------------------------------------------------- 1 | // 本分 2 | function add(a, b) { 3 | return a + b; 4 | } 5 | // fn 是等待着被优化的函数 6 | // 闭包 函数内部还有函数 7 | function memorize(f) { 8 | var cache = { 9 | // 'kun': '及你太美' 10 | }; 11 | // 作用域 12 | return function() { 13 | // console.log('innerFunction',cache.kun); 14 | // console.log(Array.prototype.join.call(arguments, ","),'///'); 15 | // key 字符串 16 | var key = arguments.length + Array.prototype.join.call(arguments, ","); 17 | // var key = arguments.length + arguments; 18 | // console.log(key); 19 | if (key in cache) { 20 | console.log('缓存了'); 21 | return cache[key] // 没有运行 f 22 | } else { 23 | // return cache[key] = f(...arguments); 24 | // apply 传数组集合，作为 f 的参数 25 | // return cache[key] = f.call(this, ...arguments) 26 | console.log('add'); 27 | return cache[key] = f.apply(this, arguments) 28 | } 29 | // else return cache[key] = f.apply(this, arguments) 30 | } 31 | } 32 | // 函数运行完后就销毁 33 | // 函数将会进入执行栈 创建函数作用域 34 | var memorizeAdd = memorize(add);// 运行才会生成闭包函数 35 | // 出栈 ？ 内存的回收 cache 没有了 cache 被接下来的函数引用着 36 | memorizeAdd(1,2); // 运行时可以找到生成时上下文环境中的变量 37 | console.log(memorizeAdd(1,2)); -------------------------------------------------------------------------------- /js/salary/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 43 | 44 | -------------------------------------------------------------------------------- /starwars/base.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 36 | 37 | 38 |
39 | 11111 40 |
41 | 49 | 50 | -------------------------------------------------------------------------------- /interview/js/promise_3_methods/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /sql/readme.md: -------------------------------------------------------------------------------- 1 | - sqlsever MySQL 关系型数据库 2 | - mongodb NOSQL 非关系型数据库 储存JSON文件 杂乱无章 3 | 4 | - blog 5 | - 用户表 6 | 登录 鉴权 + role（角色） 分配 7 | id（自增） username（varchar 255） password（varchar 不能明文，hash加密） 8 | 索引？ Primary KEY（`id`） 查询更快 9 | 10 | 1.密码不能存明文， jaca/nade mvc 用户表单传过来的 passworde 123456 11 | md5 单词加密方式 先加密再存到数据库。 12 | 数据库被攻击，解密的的话 13 | md5（12345） == password 14 | 2. CREATE TABLE `user` { 15 | field int(11) AUTO_INCREMENT NOT NULL, 16 | varchar(255) 17 | longtext 18 | PRIMARY KEY (`id`), 主键 19 | UNIQUE KEY `name` (`name`) 除了主键索引，其它索引 取索引名字 唯一 20 | } ENGINE = 21 | 22 | web http 默认服务器 80 23 | 24 | select * from user where id = 1; 0(1) 25 | 26 | - create database blog; 新建blog 项目对应的数据库 27 | MySQL port：3306 启动数据服务 28 | java/node/go port:3000 http服务 sql请求 29 | 30 | - 文章的列表 select 索引 index 查询更快 查询利用上索引 31 | primary ksy （`id`） 32 | 33 | 文章表 主表 34 | 用户表 附属表 35 | 36 | 文章的列表（包含用户的信息） 37 | 38 | - select post.id, post.title, post.content, user.id as userId,user.name as userName from post LEFT JOIN user ON user.id=post.userId; 39 | 联合查询的一种 JOIN 40 | LEFT JOIN 左边的是主表 41 | ON 条件 user.id = post.id -------------------------------------------------------------------------------- /data-vision/demo1/barchart/canvas/index.js: -------------------------------------------------------------------------------- 1 | const data = [ 2 | { name: "questions", value: 17 }, 3 | { name: "schools", value: 25 }, 4 | { name: "philosophers", value: 35 }, 5 | ] 6 | 7 | const chartWidth = 480 // 条形图宽度 8 | const chartHeight = 300 // 条形码高度 9 | const margin = 15 // 条形图的外间距 10 | // canvas 画布的大小 11 | const containerWidth = chartWidth + margin * 2 12 | const containerHeight = chartHeight + margin * 2 13 | // 取出所有的name x 坐标 14 | // 生成数组 [] new Array(10) Array.from 15 | const names = Array.from(data, (d) => d.name) 16 | const values = Array.from(data, (d) => d.value) 17 | // 不需要item _来占位 18 | const indices = Array.from(data, (_, i) => i) 19 | console.log(names, values, indices) 20 | 21 | const step = chartWidth / names.length 22 | const barWidth = step * .8 // x 轴的偏移 23 | console.log(step, barWidth); 24 | // 横坐标每个name 的绘制起始位置 25 | const xs = Array.from(indices, (i) => i * step) 26 | console.log(xs) 27 | 28 | const y = chartHeight 29 | const vmax = Math.max(...values) 30 | const barHeights = Array.from(values, (v) => chartHeight * (v / vmax)) 31 | console.log(barHeights); 32 | 33 | const nameColor = { 34 | questions: '#588ff9', 35 | schools: '#657898', 36 | philosophers: '#61ddaa', 37 | } 38 | 39 | const colors = Array.from(names, (name) => nameColor[name]) 40 | console.log(colors); 41 | -------------------------------------------------------------------------------- /vue3/api/demo4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |
13 | 47 | 48 | -------------------------------------------------------------------------------- /js/debounce/2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 41 | 42 | -------------------------------------------------------------------------------- /yayu/5.js: -------------------------------------------------------------------------------- 1 | var add = function(a, b, c) { 2 | return a + b + c 3 | } 4 | function memorize(f) { 5 | var cache = { 6 | // 'kun': '及你太美' 7 | }; 8 | // 作用域 9 | return function() { 10 | // console.log('innerFunction',cache.kun); 11 | // console.log(Array.prototype.join.call(arguments, ","),'///'); 12 | // key 字符串 13 | var key = arguments.length + Array.prototype.join.call(arguments, ","); 14 | // var key = arguments.length + arguments; 15 | // console.log(key); 16 | if (key in cache) { 17 | // console.log('缓存了'); 18 | return cache[key] // 没有运行 f 19 | } else { 20 | // return cache[key] = f(...arguments); 21 | // apply 传数组集合，作为 f 的参数 22 | // return cache[key] = f.call(this, ...arguments) 23 | // console.log('add'); 24 | return cache[key] = f.apply(this, arguments) 25 | } 26 | // else return cache[key] = f.apply(this, arguments) 27 | } 28 | } 29 | // 高阶函数 30 | // memorize 内部生成了闭包函数，并且return 给 memorizeAdd 31 | var memorizeAdd = memorize(add); 32 | // memorizeAdd(1,2,3); 33 | console.time('usememorize'); // 计时开始 34 | var x = ''; 35 | for(let i = 0; i < 100000; i ++) { 36 | memorizeAdd(1,2,3); 37 | // add(1,2,3); 38 | // x = x + '123'; 39 | } 40 | console.timeEnd('usememorize');// 计时结束 -------------------------------------------------------------------------------- /vue3/api/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |
13 | 40 | 41 | -------------------------------------------------------------------------------- /weapp/didi-bike/pages/home/index.js: -------------------------------------------------------------------------------- 1 | // home/index.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | movies: [] 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad(options) { 15 | wx.showLoading({ 16 | title: '加载中...', 17 | }) 18 | this.loadData(); 19 | }, 20 | 21 | loadData() { 22 | wx.request({ 23 | url: 'https://www.fastmock.site/mock/9566c4ae3446c22d171119a97bb11412/weipiao/home', 24 | success:(res) => { 25 | // console.log(res); 26 | if(res.statusCode === 200) { 27 | // es6 解构 28 | let { movies } = res.data.data 29 | this.setData({ 30 | movies: movies 31 | }) 32 | wx.hideLoading(); 33 | } 34 | } 35 | }) 36 | 37 | }, 38 | 39 | /** 40 | * 生命周期函数--监听页面初次渲染完成 41 | */ 42 | onReady() { 43 | 44 | }, 45 | 46 | /** 47 | * 生命周期函数--监听页面显示 48 | */ 49 | onShow() { 50 | 51 | }, 52 | 53 | /** 54 | * 生命周期函数--监听页面隐藏 55 | */ 56 | onHide() { 57 | 58 | }, 59 | 60 | /** 61 | * 生命周期函数--监听页面卸载 62 | */ 63 | onUnload() { 64 | 65 | }, 66 | 67 | /** 68 | * 页面相关事件处理函数--监听用户下拉动作 69 | */ 70 | onPullDownRefresh() { 71 | 72 | }, 73 | 74 | /** 75 | * 页面上拉触底事件的处理函数 76 | */ 77 | onReachBottom() { 78 | 79 | }, 80 | 81 | /** 82 | * 用户点击右上角分享 83 | */ 84 | onShareAppMessage() { 85 | 86 | } 87 | }) -------------------------------------------------------------------------------- /vue3/api/demo2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |
13 | 45 | 46 | -------------------------------------------------------------------------------- /design_pattern/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 单例模式 8 | 9 | 10 | 40 | 41 | -------------------------------------------------------------------------------- /interview/js/1.js: -------------------------------------------------------------------------------- 1 | let ary = [1,[2,[3,[4,5]]],6] 2 | let str = JSON.stringify(ary)// 序列化 3 | // let o = {a: 1, b: 2, c: 3} 4 | 5 | // es10 内置 flat API，es6 2015 6 | // ary = ary.flat(Infinity); // es10(2019) 提供的flat API 兼容性问题 7 | 8 | // console.log(str); 9 | 10 | // '//'正则的格式 字符串匹配规则 11 | // g 正则修饰符 全局， 不停 一直匹配 12 | // （）分组 匹配的各种可能放到这个分组里 13 | // | 或则 正则式按照字符匹配的，[a-z] 匹配一个小写字母 [a-z]{3,5} 匹配3~5次 14 | // [] 本身式正则的运算符号 \[ \] 转译 匹配其本身 15 | // ary = str.replace(/(\[|])/g,'').split(',').map(item => parseInt(item)) 16 | // const ary1 = str.replace(/(\[|])/g,'').split(',').map(item => +item) 17 | // console.log(ary,ary1); 18 | 19 | // str = str.replace(/(\[|\])/g,'') 20 | // str = '[' + str + ']' 21 | // console.log(JSON.parse(str)); 22 | 23 | // 递归 24 | // let result = [] 25 | // let fn = function(ary) { 26 | // for(let i = 0; i < ary.length; i ++) { 27 | // let item = ary[i] 28 | // if(Array.isArray(ary[i])) { 29 | // fn(item) 30 | // }else { 31 | // result.push(item) 32 | // } 33 | // } 34 | // } 35 | // fn(ary); 36 | // console.log(result); 37 | 38 | // function flatten(ary) { 39 | // return ary.reduce((pre, cur) => { 40 | // return pre.concat(Array.isArray(cur) ? flatten(cur): cur) 41 | // },[]) 42 | // } 43 | // console.log(flatten(ary)); 44 | 45 | while(ary.some(Array.isArray)) { 46 | ary = [].concat(...ary) 47 | }2 48 | console.log(ary); -------------------------------------------------------------------------------- /weapp/mycar/project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件", 3 | "packOptions": { 4 | "ignore": [], 5 | "include": [] 6 | }, 7 | "setting": { 8 | "bundle": false, 9 | "userConfirmedBundleSwitch": false, 10 | "urlCheck": true, 11 | "scopeDataCheck": false, 12 | "coverView": true, 13 | "es6": true, 14 | "postcss": true, 15 | "compileHotReLoad": false, 16 | "lazyloadPlaceholderEnable": false, 17 | "preloadBackgroundData": false, 18 | "minified": true, 19 | "autoAudits": false, 20 | "newFeature": false, 21 | "uglifyFileName": false, 22 | "uploadWithSourceMap": true, 23 | "useIsolateContext": true, 24 | "nodeModules": false, 25 | "enhance": true, 26 | "useMultiFrameRuntime": true, 27 | "useApiHook": true, 28 | "useApiHostProcess": true, 29 | "showShadowRootInWxmlPanel": true, 30 | "packNpmManually": false, 31 | "enableEngineNative": false, 32 | "packNpmRelationList": [], 33 | "minifyWXSS": true, 34 | "showES6CompileOption": false, 35 | "minifyWXML": true, 36 | "babelSetting": { 37 | "ignore": [], 38 | "disablePlugins": [], 39 | "outputPath": "" 40 | } 41 | }, 42 | "compileType": "miniprogram", 43 | "libVersion": "2.19.4", 44 | "appid": "wx7a147b8e7637c4f1", 45 | "projectname": "miniprogram-92", 46 | "condition": {}, 47 | "editorSetting": { 48 | "tabIndent": "insertSpaces", 49 | "tabSize": 2 50 | } 51 | } -------------------------------------------------------------------------------- /weapp/didi-bike/project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件", 3 | "packOptions": { 4 | "ignore": [], 5 | "include": [] 6 | }, 7 | "setting": { 8 | "bundle": false, 9 | "userConfirmedBundleSwitch": false, 10 | "urlCheck": true, 11 | "scopeDataCheck": false, 12 | "coverView": true, 13 | "es6": true, 14 | "postcss": true, 15 | "compileHotReLoad": false, 16 | "lazyloadPlaceholderEnable": false, 17 | "preloadBackgroundData": false, 18 | "minified": true, 19 | "autoAudits": false, 20 | "newFeature": false, 21 | "uglifyFileName": false, 22 | "uploadWithSourceMap": true, 23 | "useIsolateContext": true, 24 | "nodeModules": false, 25 | "enhance": true, 26 | "useMultiFrameRuntime": true, 27 | "useApiHook": true, 28 | "useApiHostProcess": true, 29 | "showShadowRootInWxmlPanel": true, 30 | "packNpmManually": false, 31 | "enableEngineNative": false, 32 | "packNpmRelationList": [], 33 | "minifyWXSS": true, 34 | "showES6CompileOption": false, 35 | "minifyWXML": true, 36 | "babelSetting": { 37 | "ignore": [], 38 | "disablePlugins": [], 39 | "outputPath": "" 40 | } 41 | }, 42 | "compileType": "miniprogram", 43 | "libVersion": "2.19.4", 44 | "appid": "wx7a147b8e7637c4f1", 45 | "projectname": "miniprogram-92", 46 | "condition": {}, 47 | "editorSetting": { 48 | "tabIndent": "insertSpaces", 49 | "tabSize": 2 50 | } 51 | } -------------------------------------------------------------------------------- /weapp/discovery/project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件", 3 | "packOptions": { 4 | "ignore": [], 5 | "include": [] 6 | }, 7 | "setting": { 8 | "bundle": false, 9 | "userConfirmedBundleSwitch": false, 10 | "urlCheck": true, 11 | "scopeDataCheck": false, 12 | "coverView": true, 13 | "es6": true, 14 | "postcss": true, 15 | "compileHotReLoad": false, 16 | "lazyloadPlaceholderEnable": false, 17 | "preloadBackgroundData": false, 18 | "minified": true, 19 | "autoAudits": false, 20 | "newFeature": false, 21 | "uglifyFileName": false, 22 | "uploadWithSourceMap": true, 23 | "useIsolateContext": true, 24 | "nodeModules": false, 25 | "enhance": true, 26 | "useMultiFrameRuntime": true, 27 | "useApiHook": true, 28 | "useApiHostProcess": true, 29 | "showShadowRootInWxmlPanel": true, 30 | "packNpmManually": false, 31 | "enableEngineNative": false, 32 | "packNpmRelationList": [], 33 | "minifyWXSS": true, 34 | "showES6CompileOption": false, 35 | "minifyWXML": true, 36 | "babelSetting": { 37 | "ignore": [], 38 | "disablePlugins": [], 39 | "outputPath": "" 40 | } 41 | }, 42 | "compileType": "miniprogram", 43 | "libVersion": "2.19.4", 44 | "appid": "wx7a147b8e7637c4f1", 45 | "projectname": "miniprogram-92", 46 | "condition": {}, 47 | "editorSetting": { 48 | "tabIndent": "insertSpaces", 49 | "tabSize": 2 50 | } 51 | } -------------------------------------------------------------------------------- /weapp/wangzhe/project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件", 3 | "packOptions": { 4 | "ignore": [], 5 | "include": [] 6 | }, 7 | "setting": { 8 | "bundle": false, 9 | "userConfirmedBundleSwitch": false, 10 | "urlCheck": true, 11 | "scopeDataCheck": false, 12 | "coverView": true, 13 | "es6": true, 14 | "postcss": true, 15 | "compileHotReLoad": false, 16 | "lazyloadPlaceholderEnable": false, 17 | "preloadBackgroundData": false, 18 | "minified": true, 19 | "autoAudits": false, 20 | "newFeature": false, 21 | "uglifyFileName": false, 22 | "uploadWithSourceMap": true, 23 | "useIsolateContext": true, 24 | "nodeModules": false, 25 | "enhance": true, 26 | "useMultiFrameRuntime": true, 27 | "useApiHook": true, 28 | "useApiHostProcess": true, 29 | "showShadowRootInWxmlPanel": true, 30 | "packNpmManually": false, 31 | "enableEngineNative": false, 32 | "packNpmRelationList": [], 33 | "minifyWXSS": true, 34 | "showES6CompileOption": false, 35 | "minifyWXML": true, 36 | "babelSetting": { 37 | "ignore": [], 38 | "disablePlugins": [], 39 | "outputPath": "" 40 | } 41 | }, 42 | "compileType": "miniprogram", 43 | "libVersion": "2.19.4", 44 | "appid": "wx7a147b8e7637c4f1", 45 | "projectname": "miniprogram-92", 46 | "condition": {}, 47 | "editorSetting": { 48 | "tabIndent": "insertSpaces", 49 | "tabSize": 2 50 | } 51 | } -------------------------------------------------------------------------------- /data-vision/demo1/echarts-demo/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /leetcode/1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 13 | 40 | 41 | -------------------------------------------------------------------------------- /js/bigData/3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 49 | 50 | -------------------------------------------------------------------------------- /king/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 54 | 55 | -------------------------------------------------------------------------------- /css/3column/clone.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 浅拷贝 8 | 9 | 10 | 50 | 51 | -------------------------------------------------------------------------------- /js/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

代码设计模式之代理模式

11 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /js/closuer/readme.md: -------------------------------------------------------------------------------- 1 | # 闭包 2 | - 无障碍访问 3 | - html5 的input 新属性 4 | es6 const let arrow function Promise 5 | ... 6 | html5 7 | input readonly placeholder type number requried 8 | localstorage.getItem() setItem 9 | ... 10 | - js 对象-> html 标签 11 | html 标签 -> 对应于js对象 12 | html DOM 树(数据结构) -> JS DOM 对象 转化过程 13 | Object.prototype.toString.call(inputa)子类型 14 | MDN 子类型 去查询,就可以看文档办事. 15 | 16 | - Ajax 的流程 17 | 1. 实例化一个XMLHttpRequest 对象 18 | http://127.0.0.1:5555/lesson_my/js/closuer/1.html 请求的式 html,css,js 空闲状态 为了界面(后端控制 1次) 19 | 拥有js 主动发出http请求的能力 为了数据(前端 n次) 20 | 2. xhr.readyState 0 状态 UNSENT 21 | 3. 打开http链接, 定义Method URL open() 22 | 4. xhr,readyState 0 OPENED 23 | 5 send() 发送请求 24 | 6. xhr.readyState 2 HEADERS_RECEIVED 服务器端 25 | 7. onreadystatechange 数据到达监听事件 26 | 8. xhr.readyState 3 LOADING 数据到达过程中 27 | 9. xhr.readyState 4 DONE 拿到完整数据 28 | 10. xhr.responseText 数据 29 | 30 | - search suggest 用户体验优化功能 31 | 1. 用户完整的搜索 32 | 降低用户的使用门槛(把用户当小白看), 33 | 34 | - 异步问题 35 | 1. 事件keyup 36 | 处理函数内部拿到返回的数据 37 | 不可以通过return拿 38 | 2. ajax 是异步的,js 主线会把它放入event loop 39 | 所以 res undifind,不等了 40 | 3. 提出的方案是? 41 | 回调函数 cb 42 | 解决异步问题 43 | 44 | - Promise 45 | 1. 解决异步问题而来 46 | Promise {pending} 问题没有开始解决 放入 event loop 47 | 2. new Promise((reslove,reject) => { 48 | reslove 49 | p fulfilled reslove(传值) 50 | }) 51 | 4. p.then((res) => { 52 | 53 | }) 54 | p reslove后运行res 是调用reslove后的结果 -------------------------------------------------------------------------------- /yayu/6.js: -------------------------------------------------------------------------------- 1 | var propValue = function(obj){ 2 | return obj.value 3 | } 4 | var add = function(a, b, c) { 5 | return a + b + c 6 | } 7 | // function memorize(f) { 8 | // var cache = { 9 | // // 'kun': '及你太美' 10 | // }; 11 | // // 作用域 12 | // return function() { 13 | 14 | // var key = arguments.length + Array.prototype.join.call(arguments, ","); 15 | // // var key = arguments.length + arguments; 16 | // console.log(key); 17 | // if (key in cache) { 18 | // return cache[key] 19 | // } else { 20 | // return cache[key] = f.apply(this, arguments) 21 | // } 22 | // } 23 | // } 24 | // hasher JSON.stringify 25 | var memorize = function(func, hasher) { 26 | var memoize = function(key) { 27 | console.log(key); 28 | var cache = memoize.cache; 29 | // key? 30 | var address = '' + (hasher ? hasher.apply(this, arguments) : key); 31 | console.log(address); 32 | if (!cache[address]) { 33 | cache[address] = func.apply(this, arguments); 34 | } 35 | return cache[address]; 36 | }; 37 | // cache 挂载函数对象上 38 | memoize.cache = {}; 39 | return memoize; 40 | }; 41 | 42 | // var memorizeAdd = memorize(propValue,JSON.stringify); 43 | // console.log(memorizeAdd({value: 1})) // 1 44 | // console.log(memorizeAdd({value: 2})) // 1 45 | var memorizeAdd = memorize(add, function(){ 46 | var args = Array.prototype.slice.call(arguments) 47 | return JSON.stringify(args) 48 | }); 49 | console.log(memorizeAdd(1,2,3)) // 1 50 | console.log(memorizeAdd(1,5,3)) // 1 51 | // console.log(propValue({value:1})); 52 | 53 | -------------------------------------------------------------------------------- /js/router/shouxie/history.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 13 | 20 |
21 | 40 | 41 | -------------------------------------------------------------------------------- /js/getTypeof/3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Symbol 8 | 9 | 10 | 11 | 52 | 53 | -------------------------------------------------------------------------------- /leetcode/2.js: -------------------------------------------------------------------------------- 1 | // 数据结构 栈 FILO Stack 2 | // 队列 FIFO Queue 3 | function MinStack () { // 构造函数 类 4 | this.stack = []; // 数据存储 数组 5 | this.stack2 = []; // 空间 6 | // 单调栈 打辅助 比当前栈顶元素小于等于的数才入栈 7 | } 8 | // JS 基于对象的面向对象 9 | MinStack.prototype.push = function(x) { 10 | this.stack.push(x) 11 | if (this.stack2.length === 0 || 12 | this.stack2[this.stack2.length - 1] >= x) { 13 | this.stack2.push(x) 14 | } 15 | } 16 | 17 | MinStack.prototype.pop = function() { 18 | // stack 出栈的元素是否和stack1的栈顶元素一样 19 | if(this.stack.pop() == this.stack2[this.stack2.length-1]) { 20 | this.stack2.pop(); 21 | } 22 | } 23 | MinStack.prototype.top = function() { 24 | if (!this.stack || !this.stack.length) { 25 | return; 26 | } 27 | return this.stack[this.stack.length - 1] 28 | } 29 | // 时间复杂度O(n) -> O(1) 常数 30 | // 栈 单调栈 用空间换时间， 31 | 32 | MinStack.prototype.getMin = function() { 33 | // 栈里的最小值 34 | // js 35 | // let minValue = Infinity; // 36 | // // this.stack 37 | // const { stack } = this; // es6 38 | // for (let i = 0; i < stack.length; i++) { 39 | // if (stack[i] < minValue) { 40 | // minValue = stack[i] 41 | // } 42 | // } 43 | // return minValue 44 | return this.stack2[this.stack2.length - 1]; 45 | } 46 | 47 | const minStack = new MinStack(); 48 | minStack.push(-2); 49 | minStack.push(0); 50 | minStack.push(-3); 51 | console.log(minStack.getMin()); 52 | minStack.pop(); 53 | minStack.top(); // 54 | // console.log(minStack.__proto__) 55 | // minStack.push(1); 56 | 57 | console.log(minStack.top()); 58 | console.log(minStack); 59 | console.log(minStack.getMin()); 60 | 61 | // console.log(minStack.__proto__); -------------------------------------------------------------------------------- /interview/js/promise_3_methods/3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 51 | 52 | -------------------------------------------------------------------------------- /js/getTypeof/readme.md: -------------------------------------------------------------------------------- 1 | 本周slogan 2 | 3 | - 每天一题leetcode 4 | 每周一篇文章 5 | 年前写出小程序 6 | 7 | - js 数据类型？ 8 | 7 种简单数据类型，1种复杂数据类型 共8种 9 | let a = 1 值的拷贝 10 | 简单数据类型 11 | 数值 Number 12 | 字符串 String 13 | 布尔值 Boolean 14 | undifined 15 | null 16 | BigInt 大数类型 17 | Symble 18 | 19 | let b = {} 地址的拷贝 20 | 复杂数据类型 21 | 都是对象 22 | 23 | - 引用式赋值考点 24 | 1. 复杂数据类型在内存中存在哪里？ 25 | 栈内存 存放 简单数据 + 函数栈 26 | 堆内存 存放 复杂数据类型 {name： 'wen', age: 20} 地址 -》 变量 27 | 2. let a = b = {name： 'wen', age: 20} a b 不是简单的数据类型的值的拷贝，a b 指向同一个地址 28 | 3. 将对象 传递给函数的时候，引用式赋值 不太好的写法，因为，在函数内部，有可能修改这个对象 导致理解出错 29 | 4. person 重新赋值 指向的地址就改变了 30 | 31 | - JS es6 提供了两种新的数据类型 Symbol 唯一值 32 | BigInt 大数 解决特定问题 33 | - 函数来创建 BigInt(1n) Symbol('name') 34 | 不是构造函数 不能new 35 | - Symbol.for('name') 36 | - 作为对象的属性，当一个复杂对象中含有多个属性的时候 被多个人维护时 37 | 38 | - 类的私有方法 39 | 40 | - js 声明一个字符串有两种方法 41 | Number String Boolean 时三种简单数据类型（值本身），同时js也内置了这三种类（new Number() 值和值上的操作的集合） 42 | '' 43 | new String('') 44 | 数组 [1,2,3] new Array(1,2,3) 45 | 46 | 包装类 47 | let str = 'hello world' 48 | str.length -> new String(str) length ? 隐式组包 49 | str 拆包 50 | 51 | js 语言 弱类型， 变量 赋值不同类型的值 52 | 隐式转换，很难？ 53 | str.length 先组包 new String('hello world') String 包装类; 54 | 55 | 为什么要提供组装类？ 为了统一面向对象风格的写法 56 | len(str) str.length 57 | 58 | - getTypeof 功能函数 59 | 1. typeof 运算不靠谱 60 | - typeof null --object 简单数据类型 61 | js 早期bug，一直都在 62 | null 32位存值 000 最高位是 类型 63 | 0000000000000000000000000000000 null 64 | object 前三位 000 也是 65 | - 复杂数据类型 -------------------------------------------------------------------------------- /css/3column/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 圣杯布局 语义化标签下的三栏式布局 SEO 搜索引擎优化 8 | 44 | 45 | 46 |
header
47 |
48 | 49 |
main
50 | 51 | 52 |
53 |
footer
54 | 59 | 60 | -------------------------------------------------------------------------------- /weapp/wangzhe/pages/index/index.js: -------------------------------------------------------------------------------- 1 | // index.js 2 | // 获取应用实例 3 | const app = getApp() 4 | 5 | Page({ 6 | // 数据，{{}} 驱动模板显示 7 | data: { 8 | nav: [], 9 | heroList: [] 10 | }, 11 | // 生命周期事件 12 | onLoad() { 13 | // 从客户端 去到 服务器端取数据 14 | // url https://www.fastmock.site/mock/3ddf189404196ed14cb6531bf3596081/vue/hero 15 | // js 主动得向api 发送请求， 把数据请求到本地来 16 | // 微信 request 17 | wx.showLoading({ 18 | title: '加载中...', 19 | }) 20 | wx.request({ // api 21 | // 服务器数据url 22 | url: 'https://www.fastmock.site/mock/3ddf189404196ed14cb6531bf3596081/vue/hero', 23 | // 成功请求后 24 | // 数据给 res 25 | success: (res) => { 26 | // console.log(res) 27 | wx.hideLoading() 28 | // http statusCode 200 服务器端没有任何错误发生 29 | // if (res.statusCode === 200) { 30 | if (res.errMsg === "request:ok") { 31 | // 解析res 数据 32 | // let nav = res.data.nav; 33 | // console.log(nav); 34 | // let heroList = res.data.heroList; 35 | // console.log(heroList) 36 | 37 | // es6 语法 解构 38 | let data = res.data; 39 | // 解构 40 | let { nav, heroList } = data // json 41 | // console.log(nav, heroList) 42 | // console.log(this, '////'); 43 | 44 | // API 设置数据 45 | // this 指向Page对象 46 | // setData 方法 47 | // this.data.nav = nav; 48 | 49 | // 设置 data 数据， 必须调用 50 | // 小程序 this.setData({}) 51 | // 设置同时 自动重新渲染模板 52 | this.setData({ 53 | nav: nav, 54 | heroList: heroList 55 | }) 56 | } 57 | }, 58 | // 失败后的回调 59 | // 箭头函数 es6 函数的新写法 60 | fail: () => { 61 | console.log('error') 62 | } 63 | }) 64 | } 65 | }) 66 | -------------------------------------------------------------------------------- /interview/js/readme.md: -------------------------------------------------------------------------------- 1 | - js 面试准备思路 2 | 1. 覆盖高频考点 3 | 2. 全面 准确 深度的介绍 4 | 5 | - 扁平化 flatten 6 | 将多层级数组转化为一维数组 7 | 8 | 1. 递归思想 9 | 2. API 10 | 3. 业务需求 11 | 多维数组 -> 一维数组 12 | 13 | - localStorage 本地存储 html5 重要功能 14 | - cookie 身份状态 随着http每次发送 15 | HTTP 无状态协议 Stateless cookie 弥补这个缺憾 16 | 1. 每次请求响应是独立的 17 | 快 服务器响应简单 18 | 2. 没有事务记忆能力 19 | 基于请求响应 公平 20 | 登入 购物车 评论 点赞 cookie 字符串 a=1;b=2 21 | domain 22 | 23 | HTTP 头部的信息 更小 < ？kb 24 | url长度 25 | 域名 同一个域名下的所有请求都会带上相同的 cookie 服务器端解析cookie 26 | 请求的性能有影响 27 | 28 | - localStorage 不需要每次http 请求都发送 29 | 本地存储 domain 30 | 大小也有限制 5M 用户的设置 草稿箱 首页列表 31 | 32 | 33 | JSON.stringfy() 序列化 34 | JSON.parse() 反序列化 35 | 36 | 37 | - 扁平化 38 | js开发中经常需要把一个多维数组一维化， flatten 39 | 40 | 1. 遍历Array.isArray + 递归 ，传统解决 41 | 2. reduce 可以优化命令， 解决更优美 42 | [] result pre 已经扁平化的部分数组，cur Array.isArray 递归 43 | 3. 将数组序列化后（JSON.stringfy），得到字符串，正则替换掉[] 44 | 接着使用 Split（）切割 或 最外层加[] 45 | 反序列化(JSON.parse) 得到一维数组 46 | 4. es10 Array.flat(Infinity) 47 | 5. 为了兼容性，不重复造轮子， lodash库 48 | 49 | - reduce map some filter find 高阶函数 50 | 如果函数的参数式函数 51 | 返回值是函数 52 | - 闭包 高阶函数 返回值是函数 53 | - map ... 参数是函数 54 | - map 55 | es6数组的API，基于一个数组每一项执行一个函数，返回值组成一个新的数组 56 | 1. 数组中的每一项都调用一个提供的函数，返回的结果组成新的数组。 57 | 2. 全新的函数式编程，更好理解 58 | 3. 原来的数组不会受到影响 59 | 60 | - call 手写 61 | 核心是把原来的方法 62 | 作为待指定的this对象的方法来执行 63 | 64 | 1. 方法作为指定this对象的方法来调用， 动态添加方法 65 | 2. Symbol 唯一值，动态添加方法，不会覆盖 66 | 3. delete 删除 symbol ，不修改对象 67 | 4. 参数类数组 数组化，展开交给函数 68 | 5. 函数运行拿到返回值， 返回 69 | 70 | - 拷贝 71 | 拷贝 -> 浅拷贝 -> 深拷贝 72 | 73 | JS 对象 赋值 不是拷贝 74 | 75 | -------------------------------------------------------------------------------- /js/router/shouxie/1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 59 | 60 | -------------------------------------------------------------------------------- /js/new_func/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 57 | 58 | -------------------------------------------------------------------------------- /interview/js/promise_3_methods/4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 45 | 46 | -------------------------------------------------------------------------------- /js/coffee/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | coffee or tea 8 | 9 | 10 | 61 | 62 | -------------------------------------------------------------------------------- /js/router/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 首页 8 | 9 | 10 |
11 | 首页 12 | a页面 13 | b页面 14 |
15 |
16 |
首页
17 |
18 | 47 | 48 | -------------------------------------------------------------------------------- /css/flex/flex-col.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 34 | 35 | 36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 | 63 | -------------------------------------------------------------------------------- /weapp/mycar/pages/index/index.js: -------------------------------------------------------------------------------- 1 | // index.js 2 | // 获取应用实例 3 | const app = getApp() 4 | 5 | Page({ 6 | data: { 7 | slides:[ 8 | { 9 | "id": 5, 10 | "header": "全新一代发现", 11 | "sub_header": "Discovery", 12 | "description": "全尺寸七座 SUV，现已接受预订。", 13 | "image": "https://resources.ninghao.net/landrover/discover-1.jpg" 14 | }, 15 | { 16 | "id": 3, 17 | "header": "全新揽胜星脉", 18 | "sub_header": "Range Rover", 19 | "description": "标新立异的前卫揽胜。", 20 | "image": "https://resources.ninghao.net/landrover/velar-1.jpg" 21 | }, 22 | { 23 | "id": 6, 24 | "header": "发现神行", 25 | "sub_header": "Discovery", 26 | "description": "发现的绝佳时刻。", 27 | "image": "https://resources.ninghao.net/landrover/discovery-sport-1.jpg" 28 | } 29 | ] 30 | }, 31 | testDrive() { 32 | console.log('试驾一下，百公里2.9s') 33 | }, 34 | readMore(event) { 35 | let id = event.target.dataset.id 36 | // console.log(id) 37 | wx.navigateTo({ 38 | url: `/pages/vehicles/show?id=${id}` 39 | }) 40 | }, 41 | // 事件处理函数 42 | bindViewTap() { 43 | wx.navigateTo({ 44 | url: '../logs/logs' 45 | }) 46 | }, 47 | onLoad() { 48 | if (wx.getUserProfile) { 49 | this.setData({ 50 | canIUseGetUserProfile: true 51 | }) 52 | } 53 | }, 54 | getUserProfile(e) { 55 | // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗 56 | wx.getUserProfile({ 57 | desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写 58 | success: (res) => { 59 | console.log(res) 60 | this.setData({ 61 | userInfo: res.userInfo, 62 | hasUserInfo: true 63 | }) 64 | } 65 | }) 66 | }, 67 | getUserInfo(e) { 68 | // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息 69 | console.log(e) 70 | this.setData({ 71 | userInfo: e.detail.userInfo, 72 | hasUserInfo: true 73 | }) 74 | } 75 | }) 76 | -------------------------------------------------------------------------------- /js/coffee/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 73 | 74 | -------------------------------------------------------------------------------- /js/arr_func/1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
    11 | 57 | 58 | --------------------------------------------------------------------------------