Ayu's Study Blog

求求你给我一份工作吧，我什么都会做的`orz

Hello Front-end

Welcome to my study blog! This is my continuously make up a main post. If you get any problems when using my blog, you can send the email to hariijico@outlook.com

Study Guide

Here provide you some study sources and study route.
This is main tech

Guide Docs

Tools

Necessary Tech

Main Line

  1. 前端三剑客基础 HTML5 – CSS3 – JS5/ES5

    H5引入了许多新特性和API，如语义化元素、表单控件、图形和多媒体元素，以及各种Web API等等
    CSS3的新特性：如圆角(border-radius)、阴影(box-shadow、text-shadow)、渐变(gradient)、动画(animation)、过渡(transition)、弹性布局(flex)等

    黑马JS最新教程 (2023.1.31 | 60:10:24)
    Pink老师最新版JS课程，主要讲解JS核心知识，包含最新ES6语法、API、js高级等
    https://www.bilibili.com/video/BV1Y84y1L7Nn

  2. 三剑客进阶 移动Web/web API – Less – Sass – ES6

    移动web要学习一些web API、布局来更好的适配页面，如Flex 或是em vw vh等

    Less、Sass可以说是css的超类

    Sass是css预处理器，提供了类似编程语言的功能，包括变量、嵌套规则、混合、继承、函数等。帮助开发者更高效的编写和组织样式表
    Sass并不能直接在浏览器执行，所以好需要配置IDE插件或者专门工具来将Sass文件编译成css文件才能使用

    Less受Sass的启发，为开发人员提供更加高效便捷的样式表编写方式

    ES6对JS进行了语法改进，还增加了类和继承、Promise等特性，最重要的是制定了模块化标准，为开发者提供了更好的开发工具和语言特性，使得JS变的更加现代化、强大灵活
    黑马ES6教程 (19.7.31 | 91-122p)
    阮一峰es6教程 – 官方 | 网道镜像

  3. 前端库/工具 jQuery – bootStrap – ajax

    bootStrap开始是用jQuery库 + less 来实现的，后来慢慢移除了对jQuery的依赖，改用原生js来实现，也从less转成了sass

  4. 版本管理工具 git

    不过一开始应该不会用到，可以在学过node之后再学更好些

  5. JS运行环境 ———— Node.js

    Node.js是一个基于Chrome V8引擎的JS运行时环境，用于构建快速、可扩展的网络应用程序。之后，开发者就可以用JS来写服务端程序。

    node主要学习npm包管理器及各种包(工具)的使用
    学习node之后会让你更顺利的学习各种框架以及git
    学习node也会加深你对前后端交互以及后端的理解
    Node.js采用非阻塞I/O模型，能够高效处理大量并发请求，从响应效率上比同时代PHP更有优势

    • KoaJS(2013)

      Koa是Express的下一代框架，旨在解决Express中一些设计上的限制和缺陷，使得异步编程更加优雅、代码更加清晰、应用更急啊灵活

  6. 目前主流框架 Vue(2014 尤雨溪) / React(2013 Facebook) / Angular(2009 Google)

    1. Angular（不必要学，很多银行国企在用）(2009)
      2009年 由Google发布，引入了许多新概念，如双向数据绑定、依赖注入和模板化，为Web开发带来了革命性的变化，也为后续的SPA框架(单页面应用程序)发展奠定了基础。
      然而AngularJS是典型的“精英”框架，用后端思维设计的前端框架，直接沿用了MVC思想，加上很多首创的概念，比较晦涩难懂，因此不怎么流行
      angularjs和.net在国内同等命运，先进但无人问津，招人困难所以转vue+java
    1. Vue(2014)
      Vue结合了Angular和React的优点，同时提供了更简洁的API和更灵活的设计，Vue的开发方式更像之前的套模版，使得开发者无缝过度，深受喜爱。
      Vue极为接地气，组件了活跃的社区，由社区编写了各语种的开发文档，每项说明都配上实例，还提供了各种应用场景的代码 DEMO

      Vue支持Webpack构建工具的使用
      原生Vue组件在js文件中的使用、Vue Cli脚手架、Element UI
      vue的核心原理（MVVM）、了解vue生命周期、组件传值、路由、vuex

    2.1 Nuxt.js(2016)
    在Next.js的启发下，Vue阵营出现了Nuxt，功能和Next几乎一模一样，给Vue提供了开箱即用的丰富功能和工具，使得Vue开发应用更加高效便捷
    2.2 Uni-App(2018)（uni,unique,是统一的意思）
    是一款 使用Vue.js开发所有前端应用的 跨平台应用开发框架，开发者编写一套代码 基于Vue开发应用，可发布到iOS、Android、Web（响应式）/H5、以及各种小程序、快应用等多个平台。
    2.3 Vue3(2020)
    Vue3增加了组合式开发模式、增加了TS支持、引入了全新的Composition API，更加适应现代化前端的开发模式。同时，尤雨溪还推出了现代化前端构建工具Vite。
    2.4 Vite(2020)
    Vite利用模块 热更新、按需编译等特性，为开发者提供了一种快速、轻量级、现代化的前端构建工具，填补了Webpack的性能瓶颈。

    1. React(2013)
      React引入了虚拟DOM的概念、组件化开发、单向数据流、使用JSX语法等等，极大的改变了前端的开发方式，推动了前端开发向组件化、高性能、高效率的方向发展。

    3.1 React Native(2015)
    基于React开发的框架，使用JS和React的语法来构建原生移动应用。通过它，开发者可以使用相同的代码库构建同时运行在ios和Android平台上的原生应用。
    3.2 Next.JS(2016)
    Next.JS是一个基于React的轻量级框架，提供了服务器端渲染、静态导出等功能，简化了React应用的开发和部署，使得React应用更易于优化和扩展，同时提供了更好的性能和SEO支持，成为构建现代Web应用的流行选择。

    3.2.1 Server Actions(2023)
    2023年，Next.js14版本推出Server Actions，允许开发者直接在组件编写服务端代码,这张图被称作“科技圈最讨厌图片”，不少开发者困惑，这不就是PHP吗，因此Next.js也被戏称为Next.php

    3.3 Taro（2018）
    Taro除了是基于react之外，其他的功能与UniApp一模一样
    2019年疫情爆发，人员统计、表单收集、健康码等等都是临时性、紧迫性的业务需求，没有现成的产品使用，过去呢种动辄上月甚至数年的开发周期显然不能满足，此时小程序承载了这一巨任，经常会有数天开发周期的小程序出现供防疫工作使用。在这里头UniApp和Taro充分发挥了它们的作用，尽管小程序是畸形发展的产物、UniApp和Taro开发会出现数不尽的兼容问题，但不可否认，这三年，它们对防疫工作的贡献是巨大的。

    1. React与Vue的对比
      1. 国内比较推崇vue，而国外则比较偏爱React。目前国内中小公司仍以vue为主，不过部分也开始转向React，大公司则比较倾向React。
      2. Vue使用模版语法，对元素实行绑定，是传统的HTML、CSS、JS分离式编程
      3. React将用户界面抽象为组件的集合，强调组件之间的高度重用性，采用了反直觉的将HTML、CSS、JS封装在一起

PC or 408 or ELSE

  • 理解 OSI 模型和 TCP/IP 协议族

  • 学习 SSL/TLS 协议和加密通信技术，保障网络通信的安全性。

  • 掌握常见的安全协议如 HTTPS、SSH 等的原理和使用方法。

  • XXS 跨站脚本

    学习 XSS 攻击的基本原理，包括攻击者向网站注入恶意脚本代码，以及受害者浏览网站时执行恶意脚本的过程。

    学习如何发现网站中的 XSS 漏洞，包括手动审查源代码、使用自动化工具进行漏洞扫描等方法。

    学习反射型 XSS、存储型 XSS 和 DOM 型 XSS 等不同类型的 XSS 攻击，了解它们的区别和特点。

    了解攻击者利用 XSS 漏洞进行的一些常见攻击，如窃取用户信息、会话劫持、网站篡改等。

  • DDOS 分布式拒绝服务攻击

    网络攻击，旨在使目标系统或网络资源不可用，通常是通过使目标系统或网络过载或崩溃来实现的。攻击者利用大量的合法或非法的网络流量向目标系统发送请求，导致目标系统无法处理正常的用户请求，从而使其服务不可用。

Else Tech

一些分支以及完全不是前端的技术

  • 构建工具 Webpack(2012)、Parcel

    在2016年，在ES6/ES 2015的一剂强心丸的影响下，Webpack支持ES Module，Webpack开始在前端社区迅速流行。特别是在React和Vue等流行框架的支持下，Webpack的使用逐渐成为前端开发的标配

  • 包管理器npm、Yarn

  • TypeScript（TS）(2012)

    2012年问世，由于JS是动态语言，意味着JS基本与大型项目无缘，或者需要承担巨大的维护代价，而TS的出现，使得JS可以像静态语言一样开发项目，赋予JS无限的可能。

  • Electron(2013 GitHub)

    基于Chromium和Node.js的跨平台桌面应用程序开发框架，允许开发者使用Web技术来构建原生桌面应用

  • Svelte(2016)

    Svelte 和 Vue、React一样都是现代化前端框架。
    不同的是，Svelte没有采用虚拟DOM技术，使得其更加轻巧。近年来，随着开发者对其性能优势和开发体验的认可，Svelte逐渐成为前端开发中备受推崇的框架之一。

    SvelteKit(2021 Svelte官方)

    和Next、Nuxt相同功能的框架，极大丰富了Svelte生态系统

  • Tailwind CSS(2017)

    在React和Vue等组件化开发框架的发展下，DOM的复用不再是难题，在大型项目下，CSS的复用已经名存实亡，于是Tailwind CSS出现了。
    Tailwind CSS的设计理念是提供一组原子类，以快速构建样式，而不需要编写自定义的CSS，这一开发方式深受开发者喜爱，并成为Next框架的默认组件。至此，Sass、Less完成了它们的历史使命。

  • Flutter(2017 Google)

    Flutter是一种用于构建跨平台移动应用的框架。可以同时在IOS、Android、Web和桌面平台运行。

  • NestJS(2017)

    NestJS设计灵感来源于 Angular 框架，借鉴了其模块化、依赖注入和装饰器等概念，用于构建高效且可扩展的服务端应用程序，弥补了Node生态中的一些框架空白，加上对TS的支持，为JS开发大型后端应用打下基础

  • ArkTS语言(2022 华为)

    华为确定改语言用于鸿蒙APP开发。是基于TS扩展的语言，意味着如果会Web前端，也就会鸿蒙应用开发。
    华为使用ArkTS语言，意味着瞬间拥有了大量的开发者基础，同时很可能促进所有的终端开发都采用JS，而那时前端技术将迎来大一统

  • PHP(后端服务器)

    PHP是世界上最好的语言。

  • Python(爬虫、脚本、大数据分析)

  • Java – Java框架 –Spring、SpringMVC、MyBatis、SpringBoot、SpringCloud//Sprint家族

0%