studyNotes
studyNotes copied to clipboard
junhey
Learning the various documents and small projects
### 前言 以下场景往往由于事件频繁被触发，因而频繁执行DOM操作、资源加载等重行为，导致UI停顿甚至浏览器崩溃。 1. window对象的resize、scroll事件 2. 拖拽时的mousemove事件 3. 射击游戏中的mousedown、keydown事件 4. 文字输入、自动完成的keyup事件 实际上对于window的resize事件，实际需求大多为停止改变大小n毫秒后执行后续处理；而其他事件大多的需求是以一定的频率执行后续处理。针对这两种需求就出现了debounce和throttle两种解决办法。 ### 作用 throttle和debounce均是通过减少实际逻辑处理过程的执行来提高事件处理函数运行性能的手段，并没有实质上减少事件的触发次数。两者在概念理解上确实比较容易令人混淆，结合各js库的具体实现进行理解效果将会更好。 ### 使用场景 debounce：将触发频繁的事件合并成一次执行。debounce适用于诸如input事件，当用户输入时需要响应ajax请求，多次input只响应一次回调方法 throttle： 设置一个阀值，在阀值内，将触发的事件合并成一次执行；且当到达阀值，必定执行一次事件。throttle适用于resize或者鼠标移动事件，防止浏览器频繁响应事件，严重拉低性能 ### 函数去抖（debounce） 1. 定义 如果用手指一直按住一个弹簧，它将不会弹起直到你松手为止。也就是说当调用动作n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。 2. 简单实现 ```javascript /** *...
怎么启蒙编程？
> 有时候想，怎么让孩子启蒙编程，从哪里学起，想了下我自己学习的历程，其实也就是在大学才真正开始接触电脑，然后再是修计算机，再到编程，整个过程很顺利，可能这时候已经18岁成年了，所以学习起来会很快，但是最近突然想怎么去启蒙编程呢，从孩子开始教，需要教哪些呢，从哪里开始呢，带着一系列的问题，写下了这篇怎么启蒙编程。 首先，编程应该像玩游戏一样，可以通过，类似于这个网站[http://www.codeaha.com/](http://www.codeaha.com/)，然后可以根据你想的和你的思路去完成一项任务，而这个过程中感觉需要的过程如下: 第一要学会键盘打字，熟悉键盘是第一步，首先与计算机进行简单的输入输出的意识。 第二需要英语，这个是启蒙的关键，英语好一些些就对于很多为什么这么写这样用有很大的帮助，比如通过这个网站学习[https://scratch.mit.edu/](https://scratch.mit.edu/) 第三需要学习一门与计算机沟通的语言，这里推荐Python。 第四需要学习一些算法，计算机的高效等等就是算法的关键 第五是应用，可以做些小应用训练自己，增加学习的乐趣，这个应用要符合一万小时定律，每天学一点，每天比前一天进步，输出一些自己得意的作品，这样慢慢的就成就了自己。
1. 安装gulp-eslint ``` npm install -g eslint npm install gulp-eslint --save ``` 2. 新建ESLint配置文件.eslintrc.js .eslintignore 可以直接写`.eslintrc.js`文件在目录，也可以生成，生成方式如下 ``` eslint --init ``` 然后会有很多选项 3. gulp中使用 ``` var eslint = require('gulp-eslint'); gulp.task('validate-eslint',function(){ return...
**管住嘴，迈开腿是血泪教训，得信。** 如下几点如果不做是绝对不可能瘦下来的： ## 1. 关于睡： **12 点前睡觉，7:30 左右起床，保证身体休息好**。休息好了代谢才能跟着好。感觉疲劳了的时候多喝点白开水。每个程序员都在晚睡的道路上越走越远，经过我多年实践证明，除了组织需要的硬性加班，没有什么外部事情能阻止自己 12 点前睡觉。玩手机，看电视什么的，忍一忍还是可以的~ ## 2. 关于吃： **三餐规律，切忌暴饮暴食。** PS: 试过不规律和暴饮暴食，那段日子，感觉整个人很“膨胀”，而且食欲不怎么好。 **油炸食品，膨化食品（零食什么的），碳酸饮料，坚果，巧克力，冰淇淋，这些能不吃就不吃。** 本来上班就没太多时间运动，身体代谢消耗的热量跟不上吃的热量，多余的热量会囤积，而且时间长了可能还会难受（我一直觉得是消化不良和代谢紊乱）。 **吃饭 7 分饱，宁愿加餐多吃一顿，也不要吃撑。** PS: 每次吃撑我都都觉得自己开始“膨胀”了~ **如果有条件吃早餐，一定要多吃一点，吃饱**。早餐只要不油腻，可以吃到 8 分饱。牛奶、鸡蛋、豆浆、包子、蛋炒饭、面条、面包、白粥，随便挑着吃。 **午餐可以随便吃点，正常的工作餐都可以，7 分饱。太油腻的最好不要吃。** **晚餐尽量简单，清淡为主**。6-7 分饱，11...
备忘录模式（Memento） 在不破坏对象的封装性的前提下，在对象之外捕获并保存该对象内部的状态以便日后对象使用或者对象恢复到以前的状态。 比如我们分页数据切换时，上一页下一页数据切换，点击下一页的时候缓存好上一页已经加载的数据。 eg： ```javascript const Page = function()={ let cache = {} //缓存 return function(page, fn){ if(cache[page]){// 判断缓存是否有数据 // 从缓存中读取数据 showPage(page, cache[page]); fn&& fn(); }else{ // 发请求获取数据 $.get(); }...
🤐 哈哈，其实就是分享一个[github仓库:youtube-dl](https://github.com/rg3/youtube-dl) 下面针对使用**mac**的安装和使用，windows和linux看仓库安装方法。 怎么安装呢？ ``` brew install youtube-dl ``` 怎么使用呢？ 具体看这里[https://github.com/rg3/youtube-dl#description](https://github.com/rg3/youtube-dl#description) ``` youtube-dl [OPTIONS] URL [URL...] youtube-dl https://www.youtube.com/watch\?v\=OSSpVLpuVWA ```
前端这个岗位在大学里是没有相应专业，课程方面基本上是延用计算机的课程，所以会有很多非科班出身进入前端这个领域，相对其他技术，入学门槛低是前几年培训机构的宣传语，但是前端因为变化快，涉及广，导致很多初级前端没有学习能力的会慢慢的淘汰及转行，前端已经从以前的pc到现在移动端和所有的显示设备，前端已经是不可缺少的一部分，前端包括哪些呢？看[这里](http://html5ify.com/fks/fks_chart/)，我认为的前端学习历程如下： ## git > 首先学会使用git版本管理，然后注册github，熟悉gitflow的工作流程 [git](https://git-scm.com/)官网 git下载之后可以参考： [git-guide](http://www.bootcss.com/p/git-guide/) [Git 简单使用说明](http://markyun.github.io/2015/instruction-Git/) [github](https://github.com)官网 注册github之后怎么用可以参考： [github使用](https://www.zhihu.com/question/20070065) ## html、css、js > html主要要理解DOM节点，css主要在于样式，而js在于效果，现在延展到后端了。 在学习之前先要学会用chrome浏览器 [基础篇](http://web.jobbole.com/82558/) [进阶篇](http://web.jobbole.com/82562/) [性能篇](http://web.jobbole.com/82576/) [性能进阶篇](http://web.jobbole.com/82590/) [移动篇](http://web.jobbole.com/82612/) [插件篇](http://web.jobbole.com/82701/) 从头介绍如何使用 chrome 进行 web 开发中的调试工作，包括 source、console、性能、profile、移动端调试、常用插件等的介绍，适合想更全面的了解强大的chrome...
WebGL是什么？ WebGL是一项用户在网页上绘制和渲染复杂的三维图形（3D图形），并允许用户与之进行交互的技术。 WebGL的结构？ 包含HTML5、Javascript和GLSL ES。 Canvas 允许Javascript动态的绘制2d图形,但对于绘制3d图形，就必须使用WebGL。WebGL程序包括用 JavaScript 写的控制代码，以及在图形处理单元（GPU, Graphics Processing Unit）中执行的着色代码（GLSL，注：GLSL为OpenGL着色语言）。WebGL 元素可以和其他 HTML 元素混合使用，并且可以和网页其他部分或者网页背景结合起来。 WebGL (Web图形库) 是一种JavaScript API，用于在任何兼容的Web浏览器中呈现交互式3D和2D图形，而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0紧密相符合的API，可以在HTML5 元素中使用。------[来自mozilla MDN web docs](https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API) WebGL图形管线  1. 初始化WebGL环境 进行3d渲染前，首先需要WebGL环境，由于WebGL是画在canvas上的，所以需要一个canvas原生，代码如下：...
# 常用 General 按 Press | 功能 Function -- | -- Ctrl + Shift + P，F1 | 显示命令面板 Show Command Palette Ctrl + P | 快速打开 Quick Open Ctrl +...