Skip to content

Contributors Forks Issues MIT License Stargazers

前端技术

基本概念

前端技术指的是一系列允许开发人员实现用户界面和用户体验的技术。它覆盖了从传统的Web开发到移动应用、桌面程序、游戏开发界面甚至是物联网设备界面的一切技术和方法。

前端技术的发展是快速的，也是多元化的。它不仅限于传统的网页设计，而是已经成为一系列广泛平台和设备上用户交互体验的核心。前端开发者可能需要理解设计原则、用户体验(UX)、无障碍性、设备兼容性，同时可能还需要涉足性能优化、安全性等一系列专业领域。随着技术的发展，前端的定义也在不断扩展和重塑，带来全新的职业机会和挑战。

Web前端技术

  • 核心语言技术：HTML、CSS、JavaScript
  • 框架与库：React, Vue.js, Angular, Svelte
  • 预处理器：Sass, LESS, Stylus（针对CSS），TypeScript, Babel（针对JavaScript）
  • 构建工具与模块化：webpack, Rollup, Parcel，npm, Yarn
  • 代码版本控制：Git
  • 测试框架：Jest, Mocha, Jasmine, Cypress
  • 响应式设计与自适应布局
  • 接入API服务：RESTful APIs, GraphQL, WebSocket
  • 性能优化与安全性

移动应用前端

  • 原生开发工具和语言：Swift(iOS), Kotlin(Android)
  • 跨平台框架：React Native, Flutter, Xamarin
  • UI组件库和设计系统：Material Design，Ant Design Mobile
  • 移动端特有的性能优化和测试
  • 与本地硬件集成（如GPS、相机和传感器）的技术
  • 离线支持与数据同步

桌面应用前端

  • 框架：Electron, NW.js（用于构建跨平台桌面应用的Web技术）
  • 系统原生框架：.NET (WPF), Cocoa (macOS)
  • UI组件库：React Desktop, Photon

游戏UI开发

  • 游戏引擎：Unity 3D, Unreal Engine
  • 脚本语言：C#, C++
  • 游戏用户界面设计工具：Unity UI, Unreal Motion Graphics UI Designer (UMG)
  • 物理引擎和动画技术

物联网（IoT）界面

  • 嵌入式系统界面（对存储和性能要求较低的界面）
  • 物联网平台前端界面（如AWS IoT, Microsoft Azure IoT）
  • 可视化库：D3.js, three.js

增强/虚拟现实（AR/VR）

  • WebXR API和框架：A-Frame, Amazon Sumerian
  • ARKit(iOS), ARCore(Android)用于移动应用的增强现实开发

微信小程序和类似平台

  • 专有的标记语言和API
  • 小程序框架：如微信官方的WXML/WXSS, Taro, uni-app

传统前端

参考文档

HTML

JS

CSS

Vue官方文档

Vue全家桶_pdf

WebPack

笔记教程

HTML

CSS

JS

Vue3.0速成笔记

Web-Api

WebPack

京东案例

开发规范

基本介绍

用于开发和构建网站或移动应用程序用户界面的技术。以下是一些常见的前端技术

入门知识

  • HTML（超文本标记语言）：
    • HTML 是用于构建网页结构的标记语言，描述了网页上的内容和组织结构。
  • CSS（层叠样式表）：
    • CSS 用于定义网页的样式和布局，可以控制网页中元素的外观、大小、位置等。
  • JavaScript：
    • JavaScript 是一种脚本语言，用于实现网页的交互功能和动态效果。它可以修改网页的内容、响应用户的操作，并与后端进行数据交互。
  • React：
    • React 是一个由 Facebook 开发的 JavaScript 库，用于构建用户界面。它采用组件化的开发模式，使得界面的开发更加模块化和可复用。
  • Vue：
    • Vue 是一个流行的 JavaScript 框架，也用于构建用户界面。它具有轻量级、易学易用的特点，支持响应式数据绑定和组件化开发。
  • Angular：
    • Angular 是由 Google 开发的一个完整的前端框架，用于构建大型、复杂的 Web 应用程序。它提供了丰富的功能和工具，包括数据绑定、路由、表单验证等。
  • Sass/Less：
    • Sass 和 Less 是两种 CSS 预处理器，它们扩展了 CSS 的功能，提供了变量、嵌套、混合等特性，使得样式表的编写更加灵活和易于维护。
  • Webpack：
    • Webpack 是一个模块打包工具，用于将前端项目中的各种资源（如 HTML、CSS、JavaScript、图片等）打包成静态文件，以便在浏览器中加载和运行。

广义前端

跨平台开发框架，它们在不同领域的应用都非常广泛。

Flutter

参考文档

官方文档

Flutter_课件_pdf

基本介绍

快速构建高质量、跨平台的移动应用程序

Flutter 是一个由 Google 开发的开源移动应用开发框架，可以用于快速构建高质量、跨平台的移动应用程序。使用 Flutter，开发者只需编写一套代码就可以同时在 iOS 和 Android 两个平台上运行，减少了开发和维护多个平台的成本。

以下是 Flutter 的一些主要特点

  • 快速开发：
    • Flutter 提供了丰富的组件库和开发工具，使得开发者可以快速构建出漂亮、流畅的用户界面。通过热重载功能，开发者可以实时查看和调试应用程序的变化，提高开发效率。
  • 跨平台支持：
    • Flutter 使用自己的渲染引擎来绘制应用程序的界面，不依赖于操作系统的原生控件。这意味着 Flutter 应用程序可以在 iOS 和 Android 平台上以相同的方式运行，而不需要针对每个平台进行单独的开发。
  • 响应式框架：
    • Flutter 使用一种称为“响应式”的编程模式，通过将界面视为状态的函数来构建应用程序。当应用程序的状态发生变化时，Flutter 可以自动更新界面，使开发者能够更轻松地实现交互和动画效果。
  • 自定义UI：
    • Flutter 允许开发者完全自定义应用程序的用户界面，从布局到动画效果都可以自行实现。通过使用强大的绘图和动画功能，开发者可以创建出独特且具有吸引力的用户体验。
  • 优秀的性能：
    • 由于 Flutter 使用自己的渲染引擎，它可以直接与设备硬件交互，提供更高效的性能。Flutter 还支持 Ahead-of-Time（AOT）编译和即时编译（JIT），使得应用程序在运行速度和内存占用方面表现出色。

Flutter 是一个强大的移动应用开发框架，具有快速开发、跨平台支持、响应式框架、自定义UI和优秀的性能等特点。它在开发者社区中得到了广泛的认可和采用，并且已经被用于构建许多知名的应用程序。

公共开放平台

参考文档

微信公众号 官方文档

微信小程序 官方文档

支付宝小程序 官方文档

基本介绍

公共开放平台为开发者提供了一系列接口、工具和文档，使得第三方应用可以与微信和支付宝这样的主要平台进行集成，并利用其庞大的用户基础和功能生态系统。通过开放平台，开发者能够借助微信和支付宝的社交网络、支付能力等，快速搭建自己的应用服务，并与用户进行交互和商业合作。

开放性

公共开放平台是为第三方开发者提供的开放接口和服务，允许他们构建应用程序并与平台进行集成。这种开放性意味着开发者可以自由地使用平台的功能和数据，并根据自己的需求进行定制和扩展。

生态系统

公共开放平台通常拥有庞大的用户基础和丰富的功能生态系统。这些平台已经积累了大量的用户和资源，开发者可以利用平台的生态系统来快速推广和获取用户，同时也可以与其他开发者和合作伙伴进行合作，实现更多的商业机会。

接口和工具

公共开放平台提供了一系列的API接口、SDK和工具，用于开发者与平台的集成和应用开发。通过这些接口和工具，开发者可以实现对平台的访问、数据交互、功能扩展等操作，简化了开发过程并加快了应用的上线速度。

安全和隐私保护

公共开放平台注重安全性和隐私保护。它们通常会采取一系列措施来确保第三方应用的安全性，如身份认证、访问权限管理、数据加密等。同时，为了保护用户的隐私，开放平台会限制开发者对用户数据的访问和使用，并要求开发者遵守相关的隐私政策和法规。

文档和支持

公共开放平台提供详细的文档、示例代码和技术支持，以帮助开发者快速上手和解决问题。这些支持资源可以指导开发者正确地使用平台的接口和工具，确保应用程序的稳定性和良好的用户体验。

游戏引擎

参考文档

Unity 手册

Unity 技术栈索引

Unreal 手册

Unreal 案例

基本介绍

游戏引擎是一种为游戏开发提供关键功能的软件平台。它们包含一系列用于游戏开发的核心技术组件，比如图形渲染引擎、物理引擎、音频处理、输入处理、网络通信以及场景管理等。游戏引擎允许开发者重用大量复杂的编程工作，这样他们可以将更多精力专注于游戏的独特创意和内容上。

游戏引擎的主要特性

  • 图形引擎：负责渲染3D或2D图形，控制光照效果，纹理映射，阴影生成等。
  • 物理引擎：模拟真实世界的物理效应，如碰撞检测，刚体动力学，流体动力学，软体物理等。
  • 声音引擎：处理音频播放，包括环境声、背景音乐、特效声等，支持多声道输出和立体声处理。
  • 输入处理：捕获和处理来自玩家输入设备的信息，如键盘、鼠标、游戏手柄等。
  • AI引擎：提供非玩家角色的行为智能，比如路径规划，决策制作等。
  • 网络引擎：支持多玩家游戏中的网络互连，包括局域网或互联网通信。
  • 工具链：提供各种支持工具帮助开发者设计、测试和优化游戏。
  • 资源管理：高效管理游戏中的资源，如模型，纹理，声音文件等。
  • 脚本支持：允许开发者使用脚本语言（如Lua、Python等）来快速迭代游戏逻辑和我们内容。

常见的游戏引擎：

  • Unity：支持2D和3D游戏的制作，广泛用于手机游戏、桌面游戏甚至是VR内容的开发。
  • Unreal Engine：强大的3D图形渲染能力，广泛用于高端游戏和实时渲染领域，如独立游戏到AAA级别的大型游戏项目。
  • Godot：开源引擎，通过其独特的场景和节点系统提供广泛的游戏开发功能。
  • CryEngine：着重于图形质量，适合制作视觉效果要求高的游戏。
  • GameMaker Studio：以2D游戏开发为主，对游戏开发新手友好。
  • RPG Maker：专注于角色扮演游戏的开发，提供了大量预设的角色、故事和战斗系统。