├── .DS_Store ├── .gitattributes ├── .github ├── .DS_Store ├── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── custom.md │ └── feature_request.md └── META │ ├── ABOUT.md │ ├── ROADMAP.md │ ├── SUMMARY.md │ └── meta.yml ├── .gitignore ├── .nojekyll ├── 00~前端展望 └── 2021 前端展望.md ├── 01~开发基础 ├── .DS_Store ├── 00~快速开始 │ ├── .DS_Store │ ├── 99~参考资料 │ │ ├── 2015~A Study Plan To Cure JavaScript Fatigue.md │ │ ├── 2015~从路人甲到英雄无敌的前端开发指南.md │ │ └── 2018~HTML 与 CSS 简史.md │ ├── 开发环境 │ │ ├── OnlineIDE │ │ │ └── README.md │ │ └── VSCode │ │ │ ├── README.md │ │ │ └── 断点调试.md │ ├── 开发环境与工具链.md │ └── 脚手架 │ │ └── README.md ├── 01~HTML │ ├── README.md │ ├── 元素标签 │ │ ├── README.md │ │ ├── a.md │ │ ├── iframe.md │ │ ├── input.md │ │ ├── 列表.md │ │ ├── 图片.md │ │ ├── 控件.md │ │ └── 脚本标签.md │ ├── 规范与模板.md │ └── 语义化与头标签.md ├── 02~CSS │ ├── .DS_Store │ ├── 99~参考资料 │ │ └── 2023-Rebuilding a featured news section with modern CSS: Vox news.md │ ├── CSS Reset │ │ └── README.md │ ├── CSS 处理器 │ │ ├── Less.md │ │ ├── PostCSS.md │ │ └── SCSS.md │ ├── CSS 选择器 │ │ ├── 99~参考资料 │ │ │ └── 2023~CSS Selectors: A Visual Guide.md │ │ └── 选择器.md │ ├── README.md │ ├── 元素样式 │ │ ├── 变量与自定义属性.md │ │ ├── 字体.md │ │ └── 边属性与图形绘制.md │ ├── 变换与动画 │ │ ├── CSS 变换与动画.md │ │ ├── JavaScript 动画.md │ │ └── README.md │ ├── 布局 │ │ ├── CSS Grid │ │ │ ├── 99~参考资料 │ │ │ │ ├── 2019~阮一峰~CSS Grid 网格布局教程.md │ │ │ │ ├── 2020~最强大的 CSS 布局：Grid 布局.md │ │ │ │ ├── 2021~简明 CSS Grid 布局教程.md │ │ │ │ ├── 2023~An Interactive Guide to CSS Grid.md │ │ │ │ └── 2024~CSS Grid Areas.md │ │ │ └── README.md │ │ ├── Flexbox.md │ │ └── JavaScript 动态布局.md │ └── 盒模型与文档流 │ │ ├── 文档流与元素定位.md │ │ └── 盒模型.md ├── 03~DOM │ ├── .DS_Store │ ├── 99~参考资料 │ │ ├── 2020-DOM API 详解.md │ │ └── 2024~HTML attributes vs DOM properties.md │ ├── README.md │ ├── 事件响应 │ │ ├── 事件绑定与传递.md │ │ ├── 交互事件.md │ │ ├── 手势识别 │ │ │ ├── README.md │ │ │ └── ZingTouch.md │ │ ├── 拖拽事件.md │ │ ├── 文档与元素事件.md │ │ └── 设备事件.md │ ├── 对象 │ │ ├── 元素对象.md │ │ └── 浏览器对象.md │ └── 选择与操作 │ │ ├── 元素操作.md │ │ └── 元素选择.md ├── 04~BOM │ ├── .DS_Store │ ├── History │ │ ├── History.md │ │ ├── README.md │ │ └── URLPattern.md │ ├── Observer │ │ ├── ComputePressureObserver.md │ │ ├── IntersectionObserver.md │ │ ├── MutationObserver.md │ │ ├── PerformanceObserver.md │ │ ├── README.md │ │ └── ResizeObserver.md │ ├── WebWorker │ │ ├── README.md │ │ ├── SharedWorker.md │ │ ├── Worker 使用.md │ │ └── 第三方库.md │ ├── 数据存储 │ │ ├── Cookie.md │ │ ├── IndexedDB.md │ │ ├── README.md │ │ ├── 剪贴板.md │ │ ├── 数据检索.md │ │ ├── 文件.md │ │ └── 缓存 │ │ │ └── README.md │ ├── 网络请求 │ │ ├── README.md │ │ ├── 数据加载 │ │ │ └── SWR.md │ │ ├── 文件处理 │ │ │ ├── Blob.md │ │ │ ├── FileSaver.md │ │ │ ├── 文件上传 │ │ │ │ ├── README.md │ │ │ │ └── 大文件分片上传.md │ │ │ ├── 文件下载 │ │ │ │ ├── README.md │ │ │ │ ├── Range 并发下载.md │ │ │ │ ├── 基于 fetch 的下载.md │ │ │ │ └── 纯前端下载.md │ │ │ └── 文件读写.md │ │ ├── 请求库 │ │ │ ├── Axios │ │ │ │ ├── README.md │ │ │ │ ├── 基础使用.md │ │ │ │ └── 拦截器.md │ │ │ ├── Fetch.md │ │ │ └── XMLHttpRequest.md │ │ └── 跨域通信 │ │ │ ├── CORS.md │ │ │ ├── README.md │ │ │ └── 跨域请求.md │ └── 网页打印.md ├── 99~参考资料 │ └── 2024~《Plain Vanilla Web》 │ │ └── README.md └── README.md ├── 02~前端框架 ├── .DS_Store ├── 00~框架对比 │ ├── 框架对比.md │ └── 框架范式.md ├── 01~Alpinejs │ ├── 99~参考资料 │ │ └── 2021-alpine.js 使用及原理简介.md │ └── README.md ├── 01~jQuery │ ├── README.md │ ├── jQuery 实践技巧.md │ ├── 事件处理与网络交互.md │ ├── 元素操作.md │ └── 插件.md ├── 10~React │ ├── .DS_Store │ └── README.link ├── 10~SolidJs │ └── README.md ├── 10~Svelte │ ├── README.md │ ├── 事件处理.md │ ├── 响应式绑定.md │ ├── 状态管理.md │ ├── 组件基础.md │ ├── 组件样式.md │ └── 语法编译.md ├── 10~Vue │ ├── .DS_Store │ └── README.link └── README.md ├── 03~工程化架构 ├── .DS_Store └── README.md ├── 04~跨端开发 ├── .DS_Store ├── 99~参考资料 │ └── 2023-Web to Desktop framework comparison.md ├── Chrome Extension │ ├── README.md │ ├── 应用配置与界面.md │ ├── 网络请求与存储.md │ └── 脚本执行与交互.md ├── Electron │ ├── .DS_Store │ └── README.link ├── README.md └── 小程序开发 │ └── README.link ├── 05~性能与体验优化 └── README.md ├── 09~Web 组件范式 ├── .DS_Store ├── 控件开发 │ ├── .DS_Store │ ├── README.md │ └── 表单 │ │ ├── Formilk.md │ │ ├── README.md │ │ └── 表单属性域.md ├── 组件系统 │ └── 99~参考资料 │ │ └── 2023-Modern CSS For Dynamic Component-Based Architecture.md └── 编辑器 │ └── README.md ├── 10~WebAssembly ├── .DS_Store └── README.link ├── 99~参考资料 └── README.md ├── INTRODUCTION.md ├── LICENSE ├── README.md ├── _sidebar.md ├── header.svg └── index.html /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wx-chevalier/Web-Notes/92cf21a16d0d1fe48d06f66d23a759a91e984526/.DS_Store -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.xmind filter=lfs diff=lfs merge=lfs -text 2 | *.zip filter=lfs diff=lfs merge=lfs -text 3 | *.pdf filter=lfs diff=lfs merge=lfs -text 4 | -------------------------------------------------------------------------------- /.github/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wx-chevalier/Web-Notes/92cf21a16d0d1fe48d06f66d23a759a91e984526/.github/.DS_Store -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: "" 5 | labels: "" 6 | assignees: "" 7 | --- 8 | 9 | **Describe the bug** 10 | A clear and concise description of what the bug is. 11 | 12 | **To Reproduce** 13 | Steps to reproduce the behavior: 14 | 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | 28 | - OS: [e.g. iOS] 29 | - Browser [e.g. chrome, safari] 30 | - Version [e.g. 22] 31 | 32 | **Smartphone (please complete the following information):** 33 | 34 | - Device: [e.g. iPhone6] 35 | - OS: [e.g. iOS8.1] 36 | - Browser [e.g. stock browser, safari] 37 | - Version [e.g. 22] 38 | 39 | **Additional context** 40 | Add any other context about the problem here. 41 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/custom.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Custom issue template 3 | about: Describe this issue template's purpose here. 4 | title: "" 5 | labels: "" 6 | assignees: "" 7 | --- 8 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: "" 5 | labels: "" 6 | assignees: "" 7 | --- 8 | 9 | **Is your feature request related to a problem? Please describe.** 10 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 11 | 12 | **Describe the solution you'd like** 13 | A clear and concise description of what you want to happen. 14 | 15 | **Describe alternatives you've considered** 16 | A clear and concise description of any alternative solutions or features you've considered. 17 | 18 | **Additional context** 19 | Add any other context or screenshots about the feature request here. 20 | -------------------------------------------------------------------------------- /.github/META/ABOUT.md: -------------------------------------------------------------------------------- 1 | # 关于 2 | 3 | ## 规划 4 | 5 | ## 致谢 6 | 7 | 由于笔者平日忙于工作，几乎所有线上的文档都是我夫人帮忙整理，在此特别致谢；同时也感谢我家的布丁安静的趴在脚边，不再那么粪发涂墙。 8 | -------------------------------------------------------------------------------- /.github/META/ROADMAP.md: -------------------------------------------------------------------------------- 1 | # Web Series Roadmap 2 | 3 | # MileStone V1 4 | 5 | ## 导论 6 | 7 | - [ ] 数据流驱动的界面：[from-imperative-to-functional-javascript](https://codeburst.io/from-imperative-to-functional-javascript-5dc9e16d9184), [imperative-vs-declarative-programming](https://tylermcginnis.com/imperative-vs-declarative-programming/) 8 | 9 | ## 工程实践 10 | 11 | - [ ] 重新整理当前目录中的文档，重新划分文档结构与内容。 12 | 13 | - [ ] 调试 14 | 15 | - [ ] JavaScript 代码调试 https://parg.co/Upj 这篇文章中的性能调试的图片合并到 Chrome DevTools 文档中 https://parg.co/Uvo 16 | 17 | - [ ] Web 性能优化 18 | 19 | - [ ] 整理 http://harttle.land/2017/04/04/using-http-cache.html 这篇文章中的 HTTP 缓存相关内容 20 | - [ ] 完成基于 IntersectionObserver 的图片加载优化一文 21 | 22 | ## React 23 | 24 | - [ ] React 数据流 25 | 26 | - [ ] React Context https://parg.co/UXl https://github.com/thejameskyle/unstated https://parg.co/UX4 https://parg.co/YG6 27 | 28 | - [ ] React 性能优化 29 | 30 | - [ ] 优先完成 React 应用性能优化：render 函数优化 31 | 32 | - [ ] 异步 React 33 | 34 | - [ ] React Suspense https://parg.co/UWE https://parg.co/UWr https://codesandbox.io/s/github/jaredpalmer/react-suspense-playground https://www.zhihu.com/question/268028123 https://parg.co/Ugq 35 | -------------------------------------------------------------------------------- /.github/META/meta.yml: -------------------------------------------------------------------------------- 1 | - permlink: [现代 Web 全栈开发与工程架构 https://github.com/wx-chevalier/Web-Series](https://github.com/wx-chevalier/Web-Series) -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore all 2 | * 3 | 4 | # Unignore all with extensions 5 | !*.* 6 | 7 | # Unignore all dirs 8 | !*/ 9 | 10 | .DS_Store 11 | 12 | # Logs 13 | logs 14 | *.log 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | # Runtime data 20 | pids 21 | *.pid 22 | *.seed 23 | *.pid.lock 24 | 25 | # Directory for instrumented libs generated by jscoverage/JSCover 26 | lib-cov 27 | 28 | # Coverage directory used by tools like istanbul 29 | coverage 30 | 31 | # nyc test coverage 32 | .nyc_output 33 | 34 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 35 | .grunt 36 | 37 | # Bower dependency directory (https://bower.io/) 38 | bower_components 39 | 40 | # node-waf configuration 41 | .lock-wscript 42 | 43 | # Compiled binary addons (https://nodejs.org/api/addons.html) 44 | build/Release 45 | 46 | # Dependency directories 47 | node_modules/ 48 | jspm_packages/ 49 | 50 | # TypeScript v1 declaration files 51 | typings/ 52 | 53 | # Optional npm cache directory 54 | .npm 55 | 56 | # Optional eslint cache 57 | .eslintcache 58 | 59 | # Optional REPL history 60 | .node_repl_history 61 | 62 | # Output of 'npm pack' 63 | *.tgz 64 | 65 | # Yarn Integrity file 66 | .yarn-integrity 67 | 68 | # dotenv environment variables file 69 | .env 70 | 71 | # next.js build output 72 | .next 73 | -------------------------------------------------------------------------------- /.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wx-chevalier/Web-Notes/92cf21a16d0d1fe48d06f66d23a759a91e984526/.nojekyll -------------------------------------------------------------------------------- /00~前端展望/2021 前端展望.md: -------------------------------------------------------------------------------- 1 | ## TypeScript 是当下的政治正确但前端终将语言无关 2 | 3 | 毫无疑问 TypeScript 将成为很长一段时间的主流，大型前端开源项目大都已经或正在全面拥抱 TypeScript，他能让我们拥有很多面向对象语言、强类型语言才具备的先进特性，能帮助我们提升代码质量，降低团队协作上的成本和风险，如果我们的项目还未转过来，是时候动手了。 4 | 但一个开源项目的质量跟语言本身并无直接关系，更别说 TypeScript 本身依旧还只是带静态类型检查的弱类型语言，OO 并不是必须的，用原生 JS 也一样能写出优雅的封装与继承，更让人期待的是 WebAssembly（https://www.zhihu.com/question/362893829） 的潜力被真正开发出来后，前端终将语言无关，前端在研发的是人机交互界面上的产物。 5 | 6 | ## 浏览器技术和云计算的进化将加速前端构建和资源加载的变革 7 | 8 | Webpack 5 正式版发布，通过物理缓存大幅提升构建性能，在短期内还会是主流构建工具；但随着 ES Modules 成为主流，CJS 淡出，ESM CDN 大范围使用后构建工具将转向 Bundless，Webpack 不可避免也会逐渐退出历史舞台。特别是当 HTTP/2 到来，支持请求与响应的多路复用来，HTTP 首部字段被大大压缩，传输效率会得到极大的提升，届时我们将不再需要对资源文件进行合并操作，构建工具也会随之加速进化。 9 | 10 | ## C/S 到 B/S 再到 C/S 11 | 12 | 历史总在不断重复轮回中循环上升，互联网，特别是云的出现让软件从 C/S 走向了 B/S，甚至如 WebAssembly 技术的出现，我们能更低成本的将原先的客户端软件移植到浏览器上去，一切看上去都是朝着 B/S 发展。然而我们也要看到另外一个趋势，自成生态的巨型应用如微信、支付宝、Facebook 等正在收敛浏览器上软件至他们的客户端上，背后的典型技术是小程序、PWA，我们甚至已经看到了出现在 PC 客户端上小程序。而借助如 Electron 这类项目，很多 B/S 模式的软件服务在推出自己的客户端以谋求用户更专注的使用体验，特别是很多传统以 C/S 模式提供服务的软件推出客户端会更贴合用户的心智。这是我们看到的历史轮回，但接下来的这段 C/S 历程跟过去的 C/S 所用到的技术已经完全不一样了，不管是小程序、PWA 还是 Service Worker、Electron、这 Client 端上开源项目会迎来一个春天。 13 | 14 | ## 新兴交互场景将唤起 Micro UI 15 | 16 | Micro Frontends （https://micro-frontends.org/） 正风生水起，然而它不过是已经风靡多年但仍备受争议的 Microservice Architecture（https://microservices.io/） 在前端的应用，可以帮我们更好地去解决复杂应用的开发和维护问题。在人机交互，用户如何在一个复杂的产品中找到此时此刻最需要的一个 UI，仍然是一个未被很好地解决的问题。用户常常迷失在一个个大型 APP 复杂的 UI 中，然而很多时候我们只是需要一个能高效完成某项工作的 UI，姑且称为 Micro UI 吧。在银河帝国等科幻小说及科幻电影中，常常能看到一种叫“信息窗”的黑科技，这样的每个信息窗就是一个 Micro UI。随着 AI、AR、VR、IOT 持续推进话，设备将越来越懂人，信息和数据的呈现也将越来越生动化，这些在科幻中才出现的东西在未来 10 年一定有一些会变成现实 ，这种 UI 的开发方式也将为前端的开发方式带来质的变化。 17 | 18 | ## RPA & Marchine Driven UI 19 | 20 | 在 AI 和 IOT 时代，如果你然坚持认为应用一定是一个需要由专业人士设计开发，并且由用户通过手机主动使用 Web 产品的话，那么你将有较大概率过未来。 21 | RPA 这个远古时代活跃在游戏外挂的古老的技术在 AI、标准化产品飞速发展的正在焕发着升级，UiPath（https://www.uipath.com/）、Zapier（https://zapier.com/）、Microsoft Power Platform（https://flow.microsoft.com/zh-cn/）、UI Bot（https://www.uibot.com.cn/） 等工具正在改变很多行业的工作方式，而以 Google Assistant 为代表的智能助理正在改变人们使用电脑的方式。作为前端，我们要考虑是：UI 不仅是被人消费的，还可以被机器消费，甚至只需要描述你的意图，这些非常需要一种高效的方式让你的应用可以被机器人来驱动。甚至应用已经不再是一个当下我们能看到的，而是一个个机器人了，而我们提供的则是：RPA 机器人制作工具、可以被 RPA 来驱动的标准 UI。如何设计与实现可以被机器人、人同时使用的 UI 是我们面临的一大挑战。 22 | 23 | ## 图形技术依旧会是界面上的热点 24 | 25 | 尽管脑机交互已经在实验室里孵化，但未来十年眼睛依旧还是人类获取外界信息最主要的通道，图形化可以比文字快十倍甚至万倍的速度清晰有效地传达信息，这是人类经历漫长进化习得的强大视觉化思考本能。在数据愈加丰富、使用场景愈加多样的下一个十年，如何高效的从数据中获得洞察依旧会有强烈的诉求，前端这个最接近数据可视化能力模型要求的工种依旧会是这个领域的主力。而另一方面，未来会出现新的屏，不管是 IOT 下的实屏还是 VR、AR 下的虚屏，当下已经相当完备和标准化的绘图 API 最有机会被新屏优先支持和采用，在这基础上利用图形技术实现一套新的 UI 基础设施甚至语言都是有可能的。 26 | 27 | ## 前端智能化 28 | 29 | 前端近年来一直尝试提升效率，可视化研发、搭建体系、工程&工具、端多解决方案等等都是为了解决效率，但天花板已然出现，下一步必然会引入智能化能力，在原来的技术体系&产品上，注入自然语言识别、图像识别的能力，使得效能的发生一系列质的变化，来突破这个天花板。更大层面上，运用智能化能力来解决工作中的问题，会逐步成为前端的必备能力和思考方式。 30 | 就算不想去蹭人工智能的热，事实上是你不得不接受并开始学习人工智能，大量简单如千人千面的 Banner、营销活动页已经纯粹通过人工智能自动化生产，并不需要前端去参与研发，复杂如中后台的表单、表格、图表展现也已经可以通过提供接口智能推导出最佳的页面实现，只需要一行代码输入数据就能出可视化图表，甚至从设计稿直接生成页面也将变成现实。前端智能化的项目将会越来越多，任何时候开始都不晚，但不开始就晚了。 31 | 32 | ## 端到端的研发 33 | 34 | 随着云原生和业务平台能力逐步完备，前端运用 Serverless 能力来完成端到端的研发工作会逐步成为一种趋势，在这个趋势的背后，会面临两个挑战，一方面是需要将现有的工具和平台延展到 Serverless 上，在支持 Serverless 的同时，必须将端到端一体化的来看待，包括：研发工具、监控体系、质量体系等等；另一方面对人员自身能力和意识有了新的要求。前端这个岗位的职能边界和能力范围的会发现变化。 35 | 36 | 基于前端智能化与端到端的研发方向上，是未来前端开源上的最具吸引力的项目；而在整体的层面上，前端具备吸引力的项目会有两个方面的特征： 37 | 38 | 在现有相关体系上提出新的理念和思想；随着框架、构建库等基础设施收敛，类似的重复性的开源项目会减少，但创新并不会停止，等到更多关注和认可的一定是能力在基础设施上提出新的理念和思想的项目。 39 | 在现有相关体系上与其他领域产生链接；有些技术未必是刚刚出现，但今天重新受到前端业内的关注，比如 WebAssembly，因为大家发现了新的运用场景。未来将现有前端技术与其他技术领域相结合的项目和设计，会受到开源社区的更多关注。 40 | -------------------------------------------------------------------------------- /01~开发基础/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wx-chevalier/Web-Notes/92cf21a16d0d1fe48d06f66d23a759a91e984526/01~开发基础/.DS_Store -------------------------------------------------------------------------------- /01~开发基础/00~快速开始/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wx-chevalier/Web-Notes/92cf21a16d0d1fe48d06f66d23a759a91e984526/01~开发基础/00~快速开始/.DS_Store -------------------------------------------------------------------------------- /01~开发基础/00~快速开始/99~参考资料/2015~A Study Plan To Cure JavaScript Fatigue.md: -------------------------------------------------------------------------------- 1 | > 本文翻译自[A-Study-Plan-To-Cure-JavaScript-Fatigue](https://medium.com/@sachagreif/a-study-plan-to-cure-javascript-fatigue-8ad3a54f2eb1#.gfap70pkh)。笔者看到里面的几张配图着实漂亮，顺手翻译了一波。本文从属于笔者的[Web Frontend Introduction And Best Practices: 前端入门与最佳实践](https://github.com/wx-chevalier/Web-Develop-Introduction-And-Best-Practices/tree/master/Frontend)。 2 | 3 | 最近我也读了 Jose Aguinaga 的博文[2016 年里做前端是怎样一种体验](https://segmentfault.com/a/1190000007083024)。这篇博客引发了广泛的关注与讨论，无论是在 Hacker News 还是 Reddit 还是 Medium 上，都有很多人参与到了它的讨论中。我也是很早之前就感觉到了目前 JavaScript 生态圈中的群雄逐鹿，并且我还特地对目前[JavaScript 库流行现状](http://stateofjs.com/)进行了调查，希望能够在异彩纷呈的各式各样的库中寻找到真正的为大众所接受的。不过今天我希望能够更进一步，不仅仅再抱怨现状，而是从我个人的角度来给出一个逐步深入学习 JavaScript 生态圈的方案。(如果你尚对 HTML/CSS/JavaScript 并不了解，那么可以阅读[前端攻略：从路人甲到英雄无敌](https://github.com/wx-chevalier/Web-Develop-Introduction-And-Best-Practices/blob/master/Frontend/Introduction/Frontend-From-Zero-To-Hero.md))。而在文本中我们会涉及以下几个方面 4 | 5 | - 一个现代的 JavaScript Web 应用会包含哪些部分 6 | - 为什么不推荐使用 jQuery？ 7 | - 为什么 React 是个不错的选择 8 | - 为什么并不需要你首先学透 JavaScript？ 9 | - 如何学习 ES6 语法 10 | - 缘何与如何学习 Redux? 11 | - GraphQL 到底解决了什么问题？ 12 | - 下一步又会走向何方 13 | 14 | # Background 15 | 16 | ## JavaScript vs JavaScript 17 | 18 | 在正式开始之前，我们先要搞清楚我所要说的和你目前理解的是不是同一个东西。如果你在 Google 中搜索 ‘Learn JavaScript’ 或者 ‘JavaScript study plan’，你能得到一坨一坨的资料与教程指导你如何学习。不过实际上在我们的真实项目中，我们只会用到一些相对简单的语法。换言之，可能你在学习 Web 应用编写中所需要的 80% 的知识点都包含在了任何一本 JavaScript 书籍的前几章。另一个角度来说，真正麻烦的点在于如何掌握整个 JavaScript 生态圈，这里包含了数不尽的框架与库。不过我相信本文可以给你一点启示。 19 | 20 | ## Building Blocks Of JavaScript Apps 21 | 22 | > 23 | 24 | - [State Of JavaScript：前端框架现状调查](https://segmentfault.com/a/1190000006728971) 25 | 26 | 为了便于理解现代 JavaScript 为啥看起来如何复杂，我们首先要明白其工作原理。我们首先来看下 2008 年左右流行的所谓传统 Web 应用的架构 : 1. 服务端从数据库中获取数据。2. 服务端读取这些数据然后渲染到 HTML 中。3.HTML 文件被发送到浏览器，浏览器将 HTML 转化为 DOM 树并且展示出来。 27 | 28 | 现在很多的应用会在客户端使用 JavaScript 来保证应用的可交互性，不过本质上浏览器还是从收到 HTML 文件开始。下面我们再比较下 2016 年流行的所谓现代 Web 应用，典型的就是所谓的单页应用 : 注意到区别了吗？与传统的 Web 应用相比，现在的服务端更多的承担起是提供数据的功能，而渲染 HTML 文件这一步交由客户端进行处理。这一个根本性的变化也会导致很多或好或坏的结果，好的一方面呢 29 | 30 | - 对于某一块内容，仅仅发送数据会比发送整个 HTML 文件快很多 31 | - 以单页应用为例，客户端可以刷新局部数据而不需要刷新整个浏览器窗口 32 | 33 | 坏的方面 34 | 35 | - 由于现在数据的加载与渲染放在了客户端，初始加载与渲染会耗费更长的时间 36 | - 现在需要在客户端提供一个存储与管理数据的地方，也就是我们目前所熟悉的状态管理工具 37 | 38 | 恶心的地方 39 | 40 | - 随着客户端应用逻辑与交互的日渐复杂，你需要掌握像服务端技术栈一样复杂的前端技术栈 41 | 42 | ## The Client-Server Spectrum 43 | 44 | 实际上很多才接触现代前端开发技术栈的同学，特别是才从后端转前端的同学都会有个疑问，既然这么麻烦为何还要进行转变？举个例子，如果用户希望得到 2+2 的结果，肯定不需要我们将这个计算发送到服务端然后等待结果，浏览器完全能够支持这种简单的计算。换言之，如果你是打算构建一个纯粹的静态内容站，譬如博客这样的，那么在服务端直接生成最终的 HTML 文件是个不错的选择。不过实际上很多 Web 应用中我们并不能很好地界定这个分割点，并且整个光谱并不是连续的，你并不能先构建一个纯粹的服务端应用然后慢慢地向客户端迁移。当到达某个分割点时，你不得不停止这种迁移过程而去重构大量的代码，或者你就会面对一个庞杂无序难以维护的垃圾代码库。 45 | 46 | 这一点与不建议使用 jQuery 不谋而合，你可以将 jQuery 看做胶带一类的存在。对于房子的修修补补很是不错，但是如果你想不断地增加内容与功能，你就会发现你的房子歪歪扭扭，到处都是狗皮膏药，越看越丑。而大部分的现代 JavaScript 框架则是更像 3D 打印技术，可能在开始之前需要大量的准备时间，但是它能还你一个更整洁稳定的房屋。 47 | 48 | # Week 0:JavaScript Basics 49 | 50 | 除非你是一个纯粹的服务端应用程序开发者，你肯定知道些 JavaScript 基础的内容。如果你还不是很了解的话那么也不需要担心，这里推荐个不错的教程[Codecademy’s JavaScript lessons](https://www.codecademy.com/learn/javascript)。 51 | 52 | # Week 1:Start With React 53 | 54 | 在你了解了 JavaScript 基础语法知识之后，我推荐你下一步开始学习[React](https://facebook.github.io/react/)。React 是由 Facebook 开发并且开源的 UI 库，换言之，其专注于完成将数据渲染到 HTML 这一步骤，也就是所谓的 View 层。不过需要注意的是，我在这里并不是安利 React 为最优秀的库，这个是因项目而定的，不过我觉得 React 是个挺不错的合适初学者的库： 55 | 56 | - React 不一定就是最受欢迎的库，不过其受欢迎程度相当高 57 | - React 不一定是最轻量级的库，不过其谈不上是一个重量级的库 58 | - React 不一定是最简单易学的库，不过其并不难学 59 | - React 不一定是最优雅的库，不过其看上去还是很舒心的 60 | 61 | 总而言之，React 并不一定适用于所有的场景，但是我觉得它是所谓最安全的，学了不吃亏。React 还会引导你去了解一些像组件、应用状态与无状态函数等等现代 Web 应用框架的概念。最后，React 的整个生态圈非常繁荣，你可以从 Github 上有关 React 的项目中找到很多可用的组件，或者在 Stack Overflow 上找到很多关于 React 的答疑解惑。我个人是比较推荐[Wes Bos 的 React for Beginners](https://reactforbeginners.com/friend/STATEOFJS)这一课程。这课程包含了 React 从入门到最佳实践的全部知识。 62 | 63 | # Week 2:Your First React Project 64 | 65 | > 66 | 67 | - [使用 Facebook 的 create-react-app 快速构建 React 开发环境](https://segmentfault.com/a/1190000006055973) 68 | > 69 | - [在重构脚手架中掌握 React/Redux/Webpack2 基本套路](https://segmentfault.com/a/1190000007166607) 70 | 71 | 到了这里我假设你已经完成了 React 的基础课程，如果你跟我差不多的话，那么我估计你现在的状态可能是 72 | 73 | - 估摸着你已经忘了一大半学过的知识点 74 | - 你很想能够尽快付诸实践 75 | 76 | 众所周知，实践是学习某个框架的不二法诀，并且开始一个简单的个人项目也是学习新技术的不错的试验点。一个个人项目可以是简单的单页应用，也可能是像 Github 客户端这样复杂的 Web 应用。这里我推荐你可以尝试着去做一个简单的个人主页。不过还是要补充一句，如果你打算用 React 做一个简单的静态内容页就有点大材小用了，这里推荐一个不错的工具[Gatsby](https://github.com/gatsbyjs/gatsby)，这是一个 React 静态网站生成器。 77 | 78 | 这里我把 Gatsby 推荐为你可以在初步实践 React 阶段一个不错的参考项目，主要是因为 79 | 80 | - 其提供了配置好的 Webpack，可以省去你很多学习配置的烦恼 81 | - 能够基于你目录结构动态设置路由 82 | - 所有的 HTML 内容同样可以服务端渲染 83 | - 生成的静态内容页意味着你可以简单地就可以部署在 Github 主页上 84 | 85 | # Week 3:Mastering ES6 86 | 87 | 随着我学习 React 的深入，我很快就感觉到了现在能够看得懂简单的代码示例，不过还有很多语法尚不能完全理解。举例来说，我还不熟悉[ES6](http://es6-features.org/#Constants)中的一些常见特性 88 | 89 | - Arrow functions 90 | - Object destructing 91 | - Classes 92 | - Spread Operator 93 | 94 | 如果你跟我一样也不是很熟悉，那么建议可以花个几天时间来认真学习下 ES6 的特性。如果你喜欢上面推荐的 React 基础课程，那么你也可以看下[ES6 for Everybody](https://es6.io/friend/stateofjs)系列教程。不过如果你想找点免费的资源，那么这里推荐[Nicolas Bevacqua’s book, Practical ES6.](https://ponyfoo.com/books/practical-es6/chapters)。最后，我还是想提到下对于 ES6 的好的学习方法就是回顾参照各种各样的代码库，学习人家的用法与实践。 95 | 96 | # Week 4:Taking On State Management 97 | 98 | > 99 | 100 | - [思考 : 我需要怎样的前端状态管理工具 ?](https://segmentfault.com/a/1190000007103433) 101 | > 102 | - [你不一定需要 Redux](https://segmentfault.com/a/1190000006966262) 103 | 104 | > 105 | 106 | - [深入理解 Redux:10 个来自专家的 Redux 实践建议](https://segmentfault.com/a/1190000006769471) 107 | 108 | 到这里我们已经能够构建基于静态内容的简单的 React 的前端项目，不过真实的 Web 应用项目不可能全是静态内容，他们需要从服务端获取数据然后交与 React 进行动态渲染。最直观的做法就是将数据一层一层地传递给组件，不过这很容易引发整个系统的混乱。譬如当两个组件需要去展示同样的数据时候，它们应该如何交互呢？这也就是所谓状态管理工具的用武之处，不同于将你的数据存放到组件内，你可以创建一个独立的全局单例 Store 来为组件树存放状态 : 。 109 | 110 | # Week 5: Building APIs With GraphQL 111 | 112 | > 113 | 114 | - [GraphQL 初探 : 从 REST 到 GraphQL，更完善的数据查询定义](https://segmentfault.com/a/1190000005766732) 115 | 116 | 现在我们已经讨论了很多客户端开发中所需要的知识栈，不过对于有追求的前端开发者而言这远远不够。不谈整个 Node 生态社区，我们还需要注意这个服务端的数据是如何传递到客户端的。这里要着重介绍下[GraphQL](http://graphql.org/)，一个由 Facebook 出品的可以替代传统的 REST API 的标准。传统的 REST API 会通过暴露多个 REST 路由来允许用户访问些数据集，譬如`/api/posts,/api/comments`。而 GraphQL 将多个后端的 REST 接口整合为单个端点，允许用户从单个端点获取所需要的数据。 117 | 118 | # Beyond & Next Steps 119 | 120 | 章节所限，在我的调查里也提到[Vue](http://vuejs.org/)与[Elm](http://elm-lang.org/)都是很优秀的框架，推荐有兴趣的朋友可以了解下。另外，在学完了这些基础知识，你还可以了解以下几个方面 121 | 122 | - JavaScript on the server (Node, [Express](https://expressjs.com/)…) 123 | - JavaScript testing ([Jest](https://facebook.github.io/jest/), [Enzyme](https://github.com/airbnb/enzyme)…) 124 | - Build tools ([Webpack](https://webpack.github.io/)…) 125 | - Type systems ([TypeScript](https://www.typescriptlang.org/), [Flow](https://flowtype.org/)…) 126 | - Dealing with CSS in your JavaScript apps ([CSS Modules](https://github.com/css-modules/css-modules), [Styled Components](https://github.com/styled-components/styled-components)…) 127 | - JavaScript for mobile apps ([React Native](https://facebook.github.io/react-native/)…) 128 | - JavaScript for desktop apps ([Electron](http://electron.atom.io/)…) 129 | -------------------------------------------------------------------------------- /01~开发基础/00~快速开始/99~参考资料/2018~HTML 与 CSS 简史.md: -------------------------------------------------------------------------------- 1 | # HTML 与 CSS 简史 2 | 3 | # Links 4 | 5 | - https://mp.weixin.qq.com/s/JuctRBR9GsrNsIwxwsH-DQ 6 | -------------------------------------------------------------------------------- /01~开发基础/00~快速开始/开发环境/OnlineIDE/README.md: -------------------------------------------------------------------------------- 1 | # Online IDE 2 | 3 | 其实 IDE 本身不是一个新兴的概念，在维基百科上能找到第一款的 IDE 是来自 55 年前为 BASIC 语言提供研发能力的一款 软件工具，而最近的一到两年时间内，IDE 的业内动态突然呈上涨趋势。从外部视角来看，可以看到有两个趋势浮出水面，一个是 IDE 领域相关的创业公司逐渐浮现出来，出现了许多相关的创业明星公司：起初由前端脚本编译项目到现阶段容器化能力支撑编译服务能力、不断突破倍受好评的 codesandbox 平台、出自 Eclipse 研发老牌团队研发，目前被各大公司、厂商，包括谷歌计算服务(GCP)采用 theia-ide 解决方案、以及号称兼容 VSCode 程度最高的 coder 项目 4 | 除此之外还有很多小而美的 IDE 落地场景，如 RN 研发明星产品 expo 的配套云端工具，发展成 npm 官方配套的 runkit 平台。 5 | 6 | ## 起因与意义 7 | 8 | Online IDE 也是未来的趋势之一，我们可以从不同的角度去探讨其意义： 9 | 10 | - 业务链路承接: 针对许多与研发强相关相关的如小程序、函数计算等场景，技术产品链路背后都有一个完整的体系需要一个承接主体来完成对产品功能、信息、能力的传达。通过日常研发人员熟悉的 IDE 形式，将各个研发体系中的关联功能进行集成，向用户透出。一方面完成了产品本身技术细节的传达，另一方面用户在实际编辑过程中也完成对产品细节的切身体会。整体更高效率地完成对技术产品的推广与落地。 11 | 12 | - 体验效率升级: 随着工程化的发展，代码研发模式也从较单一的编辑工具编辑延展到 终端命令、本地工具、线上研发平台 相互穿插交织的方式。而 IDE 刚好能作为研发编辑工具与研发工具服务的结合平台，提高工具、服务之间的串联效率，提升链路的完成性和交互体验，最终完成研发链路的效率升级。 13 | 14 | - 技术的保障：微软在 2015 年 Build 大会发布的开源编辑器 VSCode 以及相关的底层模块的开放，技术规范、协议(LSP、DAP)的建立，都大大降低了编辑器研发的技术门槛，开发者能很快的借助相关的开源模块、规范完成编辑器 IDE 的搭建。同时也较以往 Ace、codemirror 等老牌开源编辑器有较大的编辑体验提升。并且随着容器化 Docker 技术的成熟、得到业界的认可和验证，成为快速搭建线上统一环境的最佳实践。通过封装镜像的方式，能快速完成线上统一环境的复制与启用，搭建统一完整的研发环境。 15 | -------------------------------------------------------------------------------- /01~开发基础/00~快速开始/开发环境/VSCode/README.md: -------------------------------------------------------------------------------- 1 | # VSCode 使用与架构解析 2 | -------------------------------------------------------------------------------- /01~开发基础/00~快速开始/开发环境/VSCode/断点调试.md: -------------------------------------------------------------------------------- 1 | # 断点调试 2 | 3 | 本篇主要讨论 VSCode 中的断点调试是如何实现的，最简单的方式自然是直接调试 VSCode 源码，在安装依赖后点击调试按钮，先点击 Launch VS Code，待 VSCode-OSS 启动后打开一个简单的调试项目，再点击 Attach to Extension Host 对 ExtensionHost 进程进行调试，此时便可针对调试的核心代码进行调试了。 4 | 5 | ![VSCode 断点调试流程](https://s2.ax1x.com/2019/09/11/nwguTO.png) 6 | 7 | 从时序图我们可以看出，整个调试的流程无非就是简单的视图层到调试进程间的通讯，调试的核心在于在多个调试器中实现了统一的数据传输协议，即 DAP(Debug Adapter Protocol) 协议。 8 | 9 | # DAP 10 | 11 | 调试适配器协议（DAP）背后的想法是抽象开发工具的调试支持与调试器或运行时通信协议的方式。对于现有的调试器想要去快速去实现这套协议是不现实的，故我们宁愿去实现一个调试的中间层，即一个调试适配器，去使现有的调试器去适应这套调试适配器协议。调试适配器协议让开发工具实现通用调试器成为可能，同时对应的调试器也可以通过调试适配器与不同的调试器通信。调试适配器可以在多个开发工具中重复使用，这大大减少了在不同工具中支持新调试器的工作量。 12 | 13 | 通过实现适配器，让不同的调试器实现在工具端上的接入达到统一，即由适配器负责去管理上下游消息通信时的数据处理及转换工作，从多个 IDE 工具自己去适配调试器，逐渐演变为多个 IDE 工具去适配同一套调试协议，如下图所示： 14 | 15 | ![调试模式的演化](https://s2.ax1x.com/2019/09/11/nwg81A.md.png) 16 | 17 | 图右可以看出，从左侧调试 UI 消息到达对应调试器（Debugger）中间通过 Adaptor 层统一进行消息的转换，一旦调试相关的消息通讯协议达到一定完成度，工具侧便可无需进行任何修改支持多个调试器中的调试逻辑。 18 | -------------------------------------------------------------------------------- /01~开发基础/00~快速开始/开发环境与工具链.md: -------------------------------------------------------------------------------- 1 | # Visual Studio Code 2 | 3 | ## 快速编辑 4 | 5 | ## 代码调试 6 | 7 | # Tool 8 | 9 | ## Prettier 10 | 11 | ## ESLint 12 | 13 | ## SASS 14 | -------------------------------------------------------------------------------- /01~开发基础/00~快速开始/脚手架/README.md: -------------------------------------------------------------------------------- 1 | # 脚手架 2 | 3 | # Links 4 | 5 | - https://zhuanlan.zhihu.com/p/390022214?hmsr=toutiao.io 前端工程化实战 - 企业级 CLI 开发 6 | -------------------------------------------------------------------------------- /01~开发基础/01~HTML/README.md: -------------------------------------------------------------------------------- 1 | # HTML 2 | -------------------------------------------------------------------------------- /01~开发基础/01~HTML/元素标签/README.md: -------------------------------------------------------------------------------- 1 | # HTML 常见元素 2 | 3 | | 值 | 描述 | 4 | | -------------- | -------------------------------------------------------------- | 5 | | button | 定义可点击的按钮(大多与 JavaScript 使用来启动脚本) | 6 | | checkbox | 定义复选框 | 7 | | color | 定义拾色器， | 8 | | date | 定义日期字段(带有 calendar 控件) | 9 | | datetime | 定义日期字段(带有 calendar 和 time 控件) | 10 | | datetime-local | 定义日期字段(带有 calendar 和 time 控件) | 11 | | month | 定义日期字段的月(带有 calendar 控件) | 12 | | week | 定义日期字段的周(带有 calendar 控件) | 13 | | time | 定义日期字段的时、分、秒(带有 time 控件) | 14 | | email | 定义用于 e-mail 地址的文本字段 | 15 | | file | 定义输入字段和 "浏览..." 按钮，供文件上传 | 16 | | hidden | 定义隐藏输入字段 | 17 | | image | 定义图像作为提交按钮 | 18 | | number | 定义带有 spinner 控件的数字字段 | 19 | | password | 定义密码字段。字段中的字符会被遮蔽， | 20 | | radio | 定义单选按钮， | 21 | | range | 定义带有 slider 控件的数字字段， | 22 | | reset | 定义重置按钮。重置按钮会将所有表单字段重置为初始值， | 23 | | search | 定义用于搜索的文本字段， | 24 | | submit | 定义提交按钮。提交按钮向服务器发送数据， | 25 | | tel | 定义用于电话号码的文本字段， | 26 | | text | 默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符 | 27 | | url | 定义用于 URL 的文本字段， | 28 | -------------------------------------------------------------------------------- /01~开发基础/01~HTML/元素标签/a.md: -------------------------------------------------------------------------------- 1 | # a 2 | 3 | # 打开新页面 4 | 5 | 用 `target="_blank"` 打开的页面允许新的页面访问原来的 window.opener。这可能会产生安全和性能问题。包括 rel="noopener "或 rel="noreferrer" 来防止这种情况。 6 | 7 | ```html 8 | 9 | Marko's website 10 | 11 | ``` 12 | 13 | 如果你想在一个新的标签页中打开文档中的所有链接，你可以使用 `` 元素。 14 | 15 | ![Base 元素](https://z3.ax1x.com/2021/05/06/glAJc6.md.png) 16 | 17 | # 邮件、SMS 等 18 | 19 | ```html 20 | Send us an email 21 | 22 | Call us 23 | 24 | Send us a message 25 | ``` 26 | 27 | # download 28 | 29 | 你可以在你的链接中使用下载属性来下载文件，而不是导航到它。 30 | 31 | ```html 32 | Download 33 | ``` 34 | -------------------------------------------------------------------------------- /01~开发基础/01~HTML/元素标签/iframe.md: -------------------------------------------------------------------------------- 1 | # iframe 2 | 3 | # 元素操作 4 | 5 | 在 web 开发中，经常会用到 iframe，难免会碰到需要在父窗口中使用 iframe 中的元素、或者在 iframe 框架中使用父窗口的元素。 6 | 7 | - 在父窗口中获取 iframe 中的元素 8 | 9 | ```js 10 | window.frames["iframe的name值"].document 11 | .getElementById("iframe中控件的ID") 12 | .click(); 13 | window.frames["ifm"].document.getElementById("btnOk").click(); 14 | ``` 15 | 16 | ```js 17 | var obj = document.getElementById("iframe的name").contentWindow; 18 | var ifmObj = obj.document.getElementById("iframe中控件的ID"); 19 | ifmObj.click(); 20 | 21 | var obj = document.getElementById("ifm").contentWindow; 22 | var ifmObj = obj.document.getElementById("btnOk"); 23 | ifmObj.click(); 24 | ``` 25 | 26 | 在 iframe 中获取父窗口的元素： 27 | 28 | ```js 29 | window.parent.document.getElementById("父窗口的元素 ID").click(); 30 | window.parent.document.getElementById("btnOk").click(); 31 | ``` 32 | -------------------------------------------------------------------------------- /01~开发基础/01~HTML/元素标签/input.md: -------------------------------------------------------------------------------- 1 | # input 2 | 3 | # range 4 | 5 | ![Native HTML sliders](https://z3.ax1x.com/2021/05/06/glAhNj.png) 6 | -------------------------------------------------------------------------------- /01~开发基础/01~HTML/元素标签/列表.md: -------------------------------------------------------------------------------- 1 | # ol 2 | 3 | 可以使用 start 标签来控制序号起至： 4 | 5 | ![ol 序列](https://z3.ax1x.com/2021/05/06/glFfsS.png) 6 | -------------------------------------------------------------------------------- /01~开发基础/01~HTML/元素标签/图片.md: -------------------------------------------------------------------------------- 1 | # image 2 | 3 | 可以使用 loading 属性来控制图片的延迟加载： 4 | 5 | ```html 6 | Alternative Text 7 | ``` 8 | 9 | # picture 10 | 11 | 使用.webp 图像格式，使图像更小，并提高你的网站性能。 12 | 13 | ```html 14 | 15 | 16 | 17 | 18 | 22 | logo 23 | 24 | ``` 25 | -------------------------------------------------------------------------------- /01~开发基础/01~HTML/元素标签/控件.md: -------------------------------------------------------------------------------- 1 | # label 2 | 3 | # meter 4 | 5 | ![meter 演示](https://z3.ax1x.com/2021/05/06/glk8OS.png) 6 | 7 | # 选择 8 | 9 | ![HTML Native Search](https://z3.ax1x.com/2021/05/06/glkRYR.png) 10 | 11 | 你可以使用 `
` 元素将几个控件以及标签（`