{"id":13694375,"url":"https://github.com/phodal/fe","last_synced_at":"2025-04-07T17:07:16.993Z","repository":{"id":41092933,"uuid":"79350645","full_name":"phodal/fe","owner":"phodal","description":"《我的职业是前端工程师》 - Ebook：I'm a FrontEnd Developer","archived":false,"fork":false,"pushed_at":"2020-09-16T02:53:23.000Z","size":15393,"stargazers_count":2012,"open_issues_count":2,"forks_count":246,"subscribers_count":116,"default_branch":"master","last_synced_at":"2025-03-31T16:13:44.071Z","etag":null,"topics":["ebook","fe","frontend","frontend-webdevelopment","github-books","guide","phodal","ued"],"latest_commit_sha":null,"homepage":"https://ued.party/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/phodal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":"https://book.douban.com/subject/33477112/"}},"created_at":"2017-01-18T14:58:10.000Z","updated_at":"2025-03-30T12:32:25.000Z","dependencies_parsed_at":"2022-07-30T21:07:56.631Z","dependency_job_id":null,"html_url":"https://github.com/phodal/fe","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/phodal%2Ffe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phodal%2Ffe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phodal%2Ffe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phodal%2Ffe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phodal","download_url":"https://codeload.github.com/phodal/fe/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247694875,"owners_count":20980733,"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":["ebook","fe","frontend","frontend-webdevelopment","github-books","guide","phodal","ued"],"created_at":"2024-08-02T17:01:30.442Z","updated_at":"2025-04-07T17:07:16.956Z","avatar_url":"https://github.com/phodal.png","language":"HTML","readme":"我的职业是前端工程师\n===\n\n2017 年 1 月份，看完村上春树的新书《我的职业是一个小说家》，我便萌发了写一个《我的职业是前端工程师》系列文章的想法——以个人视角来看前端领域的各种技术。整个系列的文章大概有 15 篇左右，从我是如何成为一个前端工程师，到各种前端框架的知识。\n\n在线阅读地址：[http://ued.party/](http://ued.party/)\n\n关注我的微信公众号（扫描下面的二维码或搜索 Phodal)，回复书籍，可下载电子书版本\n\n![QRCode](http://articles.phodal.com/qrcode.jpg)\n\n目录\n---\n\n*   [关于作者](#关于作者)\n*   [序](#序)\n    *   [为什么不应该写一本前端书籍？](#为什么不应该写一本前端书籍)\n    *   [本书在讲些什么](#本书在讲些什么)\n    *   [关于《我的职业是前端工程师》](#关于我的职业是前端工程师)\n*   [我要成为一个前端设计师](#我要成为一个前端设计师)\n    *   [漂亮的前台](#漂亮的前台)\n    *   [我要成为一个前端设计师](#我要成为一个前端设计师-1)\n*   [入门不是应该很简单吗？](#入门不是应该很简单吗)\n    *   [前端之路](#前端之路)\n    *   [我的前端入门](#我的前端入门)\n        *   [我的第一个网站](#我的第一个网站)\n        *   [Copy/Paste from Cookbook](#copypaste-from-cookbook)\n        *   [开发工具](#开发工具)\n        *   [jQuery 是最好用的](#jquery-是最好用的)\n*   [如何选择合适的前端语言](#如何选择合适的前端语言)\n    *   [JavaScript 语言的变化](#javascript-语言的变化)\n        *   [JavaScript](#javascript)\n        *   [ES6+](#es6)\n        *   [TypeScript](#typescript)\n    *   [小结](#小结)\n*   [如何选择合适的前端框架](#如何选择合适的前端框架)\n    *   [前端的选择恐惧症](#前端的选择恐惧症)\n        *   [技术选型：不仅仅受技术影响](#技术选型不仅仅受技术影响)\n        *   [上线时间影响框架](#上线时间影响框架)\n        *   [锤子定律：你需要更大的视野](#锤子定律你需要更大的视野)\n    *   [前端框架一览](#前端框架一览)\n        *   [jQuery, 使用生态解决问题](#jquery-使用生态解决问题)\n        *   [Backbone.js，脊椎连接框架](#backbone.js脊椎连接框架)\n        *   [Angular，一站式提高生产力](#angular一站式提高生产力)\n        *   [React，组件化提高复用](#react组件化提高复用)\n        *   [Vue.js，简单也是提高效率](#vue.js简单也是提高效率)\n        *   [小结](#小结-1)\n    *   [总结](#总结)\n*   [必会的六个调试技能](#必会的六个调试技能)\n    *   [我的调试入门](#我的调试入门)\n    *   [基本调试技巧：实时调试](#基本调试技巧实时调试)\n        *   [实时调试样式](#实时调试样式)\n        *   [实时调试代码](#实时调试代码)\n    *   [移动设备调试](#移动设备调试)\n        *   [模拟真机：设备模拟器](#模拟真机设备模拟器)\n        *   [真机调试：Device Inspect](#真机调试device-inspect)\n    *   [网络调试](#网络调试)\n        *   [网络调试](#网络调试-1)\n        *   [使用插件](#使用插件)\n    *   [小结](#小结-2)\n*   [如何以正确的姿势练习](#如何以正确的姿势练习)\n    *   [前端项目的练习过程](#前端项目的练习过程)\n        *   [Output is Input](#output-is-input)\n        *   [练习框架、技术的时机](#练习框架技术的时机)\n    *   [练习的过程](#练习的过程)\n    *   [练习框架、技术的技巧](#练习框架技术的技巧)\n        *   [使用模板](#使用模板)\n        *   [做点什么应用](#做点什么应用)\n        *   [编写一个博客应用](#编写一个博客应用)\n        *   [输入和总结](#输入和总结)\n    *   [其它](#其它)\n        *   [关于练手项目](#关于练手项目)\n*   [前后端分离，你应该知道的八件事](#前后端分离你应该知道的八件事)\n    *   [前后端分离](#前后端分离)\n        *   [什么是前后端分离？](#什么是前后端分离)\n        *   [真的需要前后端分离吗？](#真的需要前后端分离吗)\n        *   [前后端分离将遇到的那些挑战](#前后端分离将遇到的那些挑战)\n    *   [前后端分离的核心：后台提供数据，前端负责显示](#前后端分离的核心后台提供数据前端负责显示)\n        *   [输出逻辑：数据显示](#输出逻辑数据显示)\n        *   [不可避免的前端逻辑：表单](#不可避免的前端逻辑表单)\n*   [SEO 优化技巧](#seo-优化技巧)\n    *   [搜索引擎优化都是前端的活](#搜索引擎优化都是前端的活)\n    *   [如何设计一个高质量的 URL](#如何设计一个高质量的-url)\n        *   [受 RESTful API 影响 的 URL 设计](#受-restful-api-影响-的-url-设计)\n        *   [手动自定义 URL](#手动自定义-url)\n        *   [详情页 ：简单的 URL 生成规则](#详情页-简单的-url-生成规则)\n        *   [自动化 URL：分类与多级目录](#自动化-url分类与多级目录)\n        *   [搜索结果页：将参数融入 URL](#搜索结果页将参数融入-url)\n    *   [自动生成高质量的站点标题](#自动生成高质量的站点标题)\n        *   [什么是站点标题？](#什么是站点标题)\n        *   [什么才算一个高质量的站点标题？](#什么才算一个高质量的站点标题)\n*   [单页面应用的核心知识](#单页面应用的核心知识)\n    *   [单页面应用的演进](#单页面应用的演进)\n    *   [路由：页面跳转与模块关系](#路由页面跳转与模块关系)\n    *   [数据：获取与鉴权](#数据获取与鉴权)\n    *   [数据展示：模板引擎](#数据展示模板引擎)\n    *   [交互：事件与状态管理](#交互事件与状态管理)\n        *   [组件交互：状态管理](#组件交互状态管理)\n        *   [用户交互：事件](#用户交互事件)\n*   [客户端存储与模型的艺术](#客户端存储与模型的艺术)\n    *   [模型与存储](#模型与存储)\n    *   [存储](#存储)\n    *   [模型的变化](#模型的变化)\n*   [如何优化前端应用性能](#如何优化前端应用性能)\n    *   [博客优化经验：速度优化](#博客优化经验速度优化)\n        *   [TTFB 优化](#ttfb-优化)\n        *   [服务器优化](#服务器优化)\n    *   [项目优化经验：缓存优化](#项目优化经验缓存优化)\n    *   [移动优化经验：用户体验优化](#移动优化经验用户体验优化)\n        *   [缓存 API 结果](#缓存-api-结果)\n        *   [生命周期优化](#生命周期优化)\n    *   [优化中的反最佳实践](#优化中的反最佳实践)\n*   [移动应用选型指南](#移动应用选型指南)\n    *   [Web 应用与混合应用](#web-应用与混合应用)\n        *   [性能](#性能)\n        *   [选型指南](#选型指南)\n    *   [React Native](#react-native)\n        *   [选型指南](#选型指南-1)\n    *   [NativeScript](#nativescript)\n    *   [Weex及其他](#weex及其他)\n*   [如何处理好前后端分离的 API 问题](#如何处理好前后端分离的-api-问题)\n    *   [前后端分离 API 的演进史](#前后端分离-api-的演进史)\n    *   [瀑布式开发的 API 设计](#瀑布式开发的-api-设计)\n    *   [API 的协作设计](#api-的协作设计)\n        *   [使用文档规范 API](#使用文档规范-api)\n        *   [契约测试：基于持续集成与自动化测试](#契约测试基于持续集成与自动化测试)\n        *   [前端测试与 API 适配器](#前端测试与-api-适配器)\n    *   [小结](#小结-3)\n*   [如何从头开发一个前端应用](#如何从头开发一个前端应用)\n    *   [前端应用的生命周期](#前端应用的生命周期)\n    *   [项目准备](#项目准备)\n        *   [技术选型](#技术选型)\n        *   [构建系统](#构建系统)\n        *   [前后端分离设计](#前后端分离设计)\n    *   [实现功能](#实现功能)\n        *   [分析设计图](#分析设计图)\n        *   [实现功能](#实现功能-1)\n        *   [编写测试](#编写测试)\n    *   [上线](#上线)\n\n前端技能\n---\n\n来源：[https://github.com/phodal/awesome-growth](https://github.com/phodal/awesome-growth)\n\n - 基础\n   * HTML / CSS\n   * JavaScript\n   * DOM\n - 中级篇 \n   * 数据格式（如JSON、XML）\n   * RESTful API交互（如jQuery Ajax，Fetch API，ReactiveX）\n   * 正则表达式\n   * HTML语义化\n   * 命令行\n   * Node.js\n   * DIV / CSS\n   * SCSS / SASS \n   * 矢量图形 / 矢量图形动画（如SVG）\n   * 单页面应用\n - 高级篇\n   * ES6 / TypeScript \n   * CSS3\n   * 面向对象编程\n   * 函数式编程\n   * MVC / MVVM / MV*\n   * 安全性（如跨域）\n   * 授权（如HTTP Basic、JWT等等）\n - 工程化\n   * 代码质量（如JSLint / ESLint / TSLint / CSLint）\n   * 代码分析（如Code Climate）\n   * 测试覆盖率\n   * 构建系统（gulp、grunt、webpack等等）\n   * 自动构建（脚本）\n - 兼容性\n   *  跨浏览器测试 （Chrome，IE，Firefox，Safari等等）\n   *  跨平台测试（Windows、GNU/Linux，Mac OS等等）\n   *  跨设备测试（Desktop，Android，iOS，Windows Phone）\n   *  跨版本测试（同一个浏览器的不同版本）\n - 前端特定\n   * CSS / CSS3 动画\n   * JavaScript 动画\n   * Web字体嵌入\n   * Icon 字体\n   * 图形和图表\n   *  CSS Sprite（如glue）\n   * DOM操作（如jQuery、React等等）\n   * 模板引擎（如JSX、Handlebars、JSP、Mustache等等）\n - 软件工程\n   * 版本管理（如git、svn） \n   * 包管理（如npm、bower）\n   * 依赖管理\n   * 模块化（如CommonJS、WebPack）\n - 调试\n   * 浏览器调试\n   * Debug工具\n   * Wireshark / Charles抓包\n   * 远程设备调试（如Chrome Inspect Devices）\n - 测试\n   * 单元测试\n   * 服务测试\n   * UI测试\n   * 集成测试\n - 性能与优化\n   * PageSpeed / Yslow 优化\n   * 加载优化（如gzip压缩、缓存等等）\n   * 性能测试（特别是移动Web）\n   * 可用性\n   * 压缩（如Minify、Uglify、CleanCSS等等）\n - 设计\n   * 切页面\n   * 线框图（Wireframe）\n   * 响应式设计\n   * 网格布局（Grid Layout）\n   * Flexbox布局\n - SEO\n   * Sitemap（站点地图）\n   * 内部链接建设\n   * MicroData / MicroFormat\n   * 页面静态内容生成\n   * H1、H2、H3和strong使用\n   * Title、Description优化\n   * 页面静态内容生成\n\nLICENSE\n---\n\n[![Phodal's Article](http://brand.phodal.com/shields/article-small.svg)](https://www.phodal.com/) [![Phodal's Book](http://brand.phodal.com/shields/book-small.svg)](https://www.phodal.com/)\n\n\n© 2017 [Phodal Huang](https://www.phodal.com). This code is distributed under the Creative Commons Attribution-Noncommercial-No Derivative Works 3.0  License. See `LICENSE` in this directory.\n\n[待我代码编成，娶你为妻可好](http://www.xuntayizhan.com/blog/ji-ke-ai-qing-zhi-er-shi-dai-wo-dai-ma-bian-cheng-qu-ni-wei-qi-ke-hao-wan/)\n","funding_links":["https://book.douban.com/subject/33477112/"],"categories":["HTML","HTML (177)"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphodal%2Ffe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphodal%2Ffe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphodal%2Ffe/lists"}