{"id":15627343,"url":"https://github.com/iamjoel/front-end-note","last_synced_at":"2025-04-12T19:41:14.135Z","repository":{"id":23915651,"uuid":"27295983","full_name":"iamjoel/front-end-note","owner":"iamjoel","description":":memo: Web前端洞见。有深度的Web 前端内容。","archived":false,"fork":false,"pushed_at":"2024-12-11T01:03:21.000Z","size":15013,"stargazers_count":372,"open_issues_count":6,"forks_count":122,"subscribers_count":29,"default_branch":"master","last_synced_at":"2025-04-05T18:04:10.694Z","etag":null,"topics":["front-end","note"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iamjoel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":"roadmap/junior.md","authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-11-29T08:25:36.000Z","updated_at":"2025-03-12T09:02:03.000Z","dependencies_parsed_at":"2025-02-04T18:42:40.773Z","dependency_job_id":"d83eec2e-8e5c-4eec-80ca-a4f7f180e455","html_url":"https://github.com/iamjoel/front-end-note","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamjoel%2Ffront-end-note","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamjoel%2Ffront-end-note/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamjoel%2Ffront-end-note/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamjoel%2Ffront-end-note/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iamjoel","download_url":"https://codeload.github.com/iamjoel/front-end-note/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248624891,"owners_count":21135509,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["front-end","note"],"created_at":"2024-10-03T10:16:26.304Z","updated_at":"2025-04-12T19:41:14.114Z","avatar_url":"https://github.com/iamjoel.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eWeb前端洞见\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://gitter.im/iamjoel/front-end-note\"\u003e\n    \u003cimg src=\"https://badges.gitter.im/Join Chat.svg\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/prettier/prettier\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square\" alt=\"code style: prettier\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n有深度的Web 前端内容。\n\n## 四大关注点\nWeb 前端的四大关注点：代码质量，开发效率，性能和安全。\n\n* 代码质量\u0026稳定性\n  * [Web前端进阶之路: 提升代码质量篇](focus-point/quality)\n  * [层级很深的组件 获取 最外层组件的数据 - React 和 Vue 的解决方案](focus-point/quality/resolve-prop-drilling)\n  * 用 TS 来提高代码质量\n  * 组件设计的思考\n    * 组合VS继承\n    * 职责分离的利弊：以容器组件和展示组件为例。\n    * 全局管理状态数据的利弊。\n  * 前端监控\n  * 工具\n    * eslint\n    * git的 merge 和 rebase\n* 开发效率\n  * [Web前端进阶之路：提升前端开发效率篇](focus-point/effective)\n  * 工具\n    * 熟练使用IDE 之 VSCode和Sublime\n* 性能\n  * [Web 前端性能优化](focus-point/performance)\n  * [截流函数和防抖函数](focus-point/performance/throttle.md)\n* 安全\n\n## 技术雷达\n* 原则\n  * 如何选择框架？\n* 框架测评\n  * Vue，React，Angular\n  * 服务器端渲染\n  * Deno和Node该选哪个？\n\n## 核心知识\n* CSS\n  * [17个场景，带你掌握CSS布局](key-point/css/layout)\n  * 浏览器兼容性\n  * 样式\n    * [图片处理](key-point/css/style/img)\n* JavaScript\n  * [正则表达式好难学!9个易懂的例子，轻松入门JavaScript正则](key-point/js/reg)\n  * [闭包](key-point/js/closure.md)\n  * this\n  * 异步流程\n  * 事件处理之传值\n* HTTP\n  * 接口跨域的处理\n* Vue\n  * 主要版本功能概览\n  * 组件通信\n  * 状态管理\n  * 响应式原理\n  * Virtual Dom\n* React\n  * [React 最佳实践](key-point/react/best-practice.md)\n  * [Hooks](key-point/react/hooks)\n  * 组件通信\n  * 状态管理\n* 代码测试\n  * 单元测试\n  * 端到端测试\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamjoel%2Ffront-end-note","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiamjoel%2Ffront-end-note","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamjoel%2Ffront-end-note/lists"}