Blog
0%

前端发展

发表于

前端到底是个啥？

针对 web 开发的前端而言

  • 针对浏览器的开发，浏览器呈现出来的页面就是前端
  • 它的实质是前端代码在浏览器端被编译、运行、渲染
  • 前端代码主要由三个部分构成：HTML + CSS + JavaScript

前后端分工

前端开发发展史

  1. 多页面项目

    • 一个页面对应一个 html 页面，html 页面内显式地引入 js、css 文件

    • 通过模版引擎将 js 数据动态地渲染到页面上

    • 各页面的切换由 a 链接或 location.href 实现

    • 切换页面时，会刷新界面，重新发起请求

      src

      |—— images

      |—— js

      |—— css

      |—— index.html

      |—— about.html

      |—— list.html

  2. SPA

    • 利用 Vue、 React 框架生成的项目
    • 只有一个主界面，各个页面由组件实现，页面间的切换由路由实现
    • 路由切换时，不会刷新界面，用户体验好

前端项目的产出

前端项目最终打包上线的都是 html+CSS + JS 的静态资源包

  • 因为前端项目依赖于浏览器运行
  • 而浏览器只认识 html、css、js 代码

也就是说前端开发中用到的各种技术都是对 html、css、js 的一些预处理操作，是对程序员友好的一些技术手段

处理技术

技术名词 作用
HTML 模版引擎 (art-template、EJS) 把 js 数据传到 html 中展示出来，动态生成 html 结构
CSS less、stylus 扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展
JS ES6+ 是 JavaScript 的下一个版本标准，扩展了 ES5 的语法
HTML + JS React 前端框架，混合了 HTML 和 JS 语法，实现虚拟 DOM 来构建用户界面
HTML + JS + CSS Vue 前端框架，混合了 HTML、CSS 和 JS 语法，实现虚拟 DOM 来构建用户界面