├── assets ├── event-propagation.png ├── async-clipboard-demo.mp4 ├── async-clipboard-demo.webm ├── element-scrollIntoViewIfNeeded-can-i-use.png └── scrollIntoViewIfNeeded-search-on-github.png ├── .github └── FUNDING.yml ├── .gitignore ├── archives ├── 000-why.md ├── 014-dom-level.md ├── 015-dom-attributes-and-properties.md ├── 006-web-scrolling-performance-optimization-passive-event-listeners.md └── 023-clipboardapi.md └── README.md /assets/event-propagation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/justjavac/the-front-end-knowledge-you-may-not-know/HEAD/assets/event-propagation.png -------------------------------------------------------------------------------- /assets/async-clipboard-demo.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/justjavac/the-front-end-knowledge-you-may-not-know/HEAD/assets/async-clipboard-demo.mp4 -------------------------------------------------------------------------------- /assets/async-clipboard-demo.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/justjavac/the-front-end-knowledge-you-may-not-know/HEAD/assets/async-clipboard-demo.webm -------------------------------------------------------------------------------- /assets/element-scrollIntoViewIfNeeded-can-i-use.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/justjavac/the-front-end-knowledge-you-may-not-know/HEAD/assets/element-scrollIntoViewIfNeeded-can-i-use.png -------------------------------------------------------------------------------- /assets/scrollIntoViewIfNeeded-search-on-github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/justjavac/the-front-end-knowledge-you-may-not-know/HEAD/assets/scrollIntoViewIfNeeded-search-on-github.png -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: https://github.com/justjavac/buy-me-a-coffee # Replace with a single custom sponsorship URL 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | -------------------------------------------------------------------------------- /archives/000-why.md: -------------------------------------------------------------------------------- 1 | # 缘起 2 | 3 | 前一阵有人在微信群里面遇到了一个问题： 4 | 5 | > 当输入框在最底部的时候，弹起的虚拟键盘会把输入框挡住。 6 | 7 | 于是我发给他一个 API：`Element.scrollIntoViewIfNeeded(opt_center)`，顾名思义，就是在需要的时候将元素滚动到可视区域。 8 | 9 | 对于前端 API 来说，我们最关心的是它的浏览器兼容性： 10 | 11 | ![scrollIntoViewIfNeeded](../assets/element-scrollIntoViewIfNeeded-can-i-use.png) 12 | 13 | 随后他又问我： 14 | 15 | > 怎么样才能学到这些新的前端技术和API？ 16 | 17 | 首先要知道，这并不是一个新的 API，我们看看它的支持情况: 18 | 19 | - 2010-12-06 发布的 Android 2.3（6年前） 20 | - 2011-06-20 发布的 Safari 5.1 21 | - 2011-09-16 发布的 Chrome 15 22 | - 2012-03-07 发布的 iOS 5.1 23 | - ... 24 | 25 | 这已经是一个有着 6 年历史的 API 了。如果在 GitHub 搜索一下，可以搜索到 38,305 个搜索结果。 26 | 27 | ![scrollIntoViewIfNeeded search on github](../assets/scrollIntoViewIfNeeded-search-on-github.png) 28 | 29 | 这已经是一个被广泛使用的 API 了。 30 | 31 | 所以我创建了这个 repo，整理一些比较实用的但是却不经常见的前端技术。 32 | 33 | ## 建议 34 | 35 | 关于碎片化阅读其实我是持反对意见的，碎片化阅读只能作为自己知识的补充，但是真正想学好前端，还是应该多看书，从头构建自己的**完整知识体系**，然后把碎片化阅读作为自己知识体系中知识点的补充。 36 | 37 | ## 方式 38 | 39 | 最初本 repo 所有的讨论都是以 [issues](https://github.com/justjavac/the-front-end-knowledge-you-may-dont-know/issues) 的形式进行，任何人都可以在 issues 区围观讨论。我先创建了 2 个 issue（须知 [#1](https://github.com/justjavac/the-front-end-knowledge-you-may-dont-know/issues/1) 40 | 、索引 [#2](https://github.com/justjavac/the-front-end-knowledge-you-may-dont-know/issues/2)），于是这个 repo 就建起来了。 41 | 42 | 后来有人提议将文章用 md 格式来写，issue 用于讨论 [#17](https://github.com/justjavac/the-front-end-knowledge-you-may-not-know/issues/17)。 43 | -------------------------------------------------------------------------------- /archives/014-dom-level.md: -------------------------------------------------------------------------------- 1 | # HTML DOM 级别以及一些小坑 2 | 3 | > API (Web 或 XML 页面) = DOM + JavaScript(脚本语言) 4 | 5 | ## 问题 6 | 7 | 问题从一个异常开始。 8 | 9 | 有网友写了如下代码： 10 | 11 | ```javascript 12 | function download() { 13 | console.log(1); 14 | } 15 | ``` 16 | 17 | ```html 18 | 下载 19 | ``` 20 | 21 | 当点击按钮的时候，却报错了： 22 | 23 | `Uncaught TypeError: download is not a function` 24 | 25 | 报错信息很奇怪：`download` 不是一个函数。如果我们在 devtools console 执行 `$0.download` 会得到 `""`，一个空字符串。 26 | 27 | 我们尝试把 `` 换成 `