前端的一些了解

前端知识体系

前端三要素

1. HTML
2. CSS
3. JavaScript
   • Native原生JS开发
   • TypeScript微软的标准
     需要编译成JS
   • JavaScript框架
     • jQuery - 频繁的DOM操作，影响前端性能
     • Angular - Google、模块化、TypeScript语法
     • React - Facebook、虚拟DOM、JSX语言
     • Vue - 渐进式JavaScript框架，综合模块化、虚拟DOM，仅视图层的处理
     • Axios - 前端通信框架，类jQuery的AJAX通信功能
   • UI框架
     • Ant-Design： 基于React的UI框架 - 彩蛋？？？
     • ElementUI： 基于Vue的UI框架
     • iview： 基于Vue
     • 飞冰： 基于Vue
     • Bootstrap： Twitter推出
     • AmazeUI： “妹子UI”
   • JavaScript构建工具
     • Babel
     • WebPack

三端统一

混合开发（Hybrid App）

PC、Android、IOS

Android->.apk IOS->.ipa

• 云打包：HBuild
• 本地打包：Cordova

后端技术

• NodeJS：为了方便前端人员开发后台应用，临时处理
  • Koa：主流框架（类似spring）
  • NPM：类似Maven
  • Yarn： 类似Maven和Gradle的关系，打包效率高
• deno?

前后分离演变

为什么？

• MVC
  • 前端开发重度依赖开发环境
  • 前后端职责纠缠不清，数据展示不正确，谁的错？
  • 前端发挥局限，优化-经常要和后端合作

什么是前后分离

基于AJAX带来的SPA时代

Asynchronous JavaScript And XML，正是提出并开始使用CDN作为静态资源存储

• 谷歌 - Web2.0时代
• 缺点：前后端接口的约定

前端为主的MV*时代

• MVC（同步通信为主）
• MVP（最早：安卓、ios端，一步通信为主）：过度
• MVVM（异步通信为主）：Model、View、ViewModel
  • 缺点：全异步，对 SEO 不利。往往还需要服务端做同步渲染的降级方案；URL Design需要后端配合

NodeJS带来的全栈时代

Soc 关注度分离

前端MVVM模式

Model-View-ViewModel

• 核心：ViewModel
  • 该层向上与视图层进行双向数据绑定
  • 向下与 Model 层通过接口请求进行数据交互
• 为什么要用MVVM
  • 低耦合
  • 可复用
  • 独立开发
  • 可测试

学习路线