基础概念

• 单页应用
  • 理念
    • 前端路由
    • 前端渲染
    • 后端只提供api获取数据
  • webpack
  • react.js
  • vue.js
  • backbone.js纯骨架，功能自己实现，类似于flask
• 多页应用
  • python
  • java
• HTTP 协议基于请求与响应模式 无状态的
  • GET
  • POST
  • DELETE
  • PUT
• 异步编程
  • 回调函数
• 框架
  • 前端框架
    • MVC框架
    • React技术栈
  • 后端框架ThinkJS
  • 服务器进程管理Tmux + node
  • UI

设计流程

• 拆分组件
  • 拆分界面，抽取组件
  • 在外面的app根组件
• 实现静态组件
• 实现动态组件
  • 动态显示初始化数据
    • 数据放在哪个组件
    • 某个组件需要，放在该组件
    • 某些组件需要，放在共同的父类
  • 交互功能，事件绑定监听

三大标准：html、样式 CSS、JavaScript

• html

• 样式 CSS

  • 布局设计flex弹性盒子
  • 设计稿尺寸iph
  • one6：750px*1334px rpx会根据屏幕放大缩小 px是固定尺寸

• JavaScript： 是面向对象object的编程语言

  • 所有的数据都可以被视为对象，继承靠原型链，多态靠弱类型
  • 对象：就是一系列属性的集合，一个属性包含一个名字和值。即key：value。
  • 一个属性的值可以是函数，这种情况下属性也被成为方法

• DOM

• es6：js的版本标准，新一代的javascript语音标准

  • use strict 开启严格模式
  • 类、继承、静态方法
  • 单例模式

• promise

• art-template

• typescript

javascript构建工具

构建工具：流程化，标准化，最终指向较高的自动化

• 代码的兼容性（js版本）
• 抹平框架之间的差异性，生成统一可以在浏览器跑的代码（vue,react,ng）
• CSS前缀补全/预处理器，JS压缩混淆，图片压缩
• 前端部署（如+ hash,静态文件路径问题）
• 模块化方案npm + Webpack

前端目录结构

• src：存放前端工程项目的源代码目录
  • api
    • ajax.js：异步的网络请求
    • index.js：后端请求数据的所有接口
  • common
  • components
  • filters
  • mock
  • pages
    • Login
    • Profile
  • router：路由
  • store：app中的数据集中处理
  • App.react
  • main.js
• build：是指定的项目编译目录，该项目的编译配置相关的操作，都在该目录中进行配置和指定
• config：主要是对项目全局进行相关的配置，以及测试或者发布版本进行配置
• dist：编译后文件的存放目录。如：所有的.vue页面编译后成为的js文件，都会输出到该目录中
• node_modules：该目录是nodejs项目所需要依赖的第三方库的代码目录。由于该目录体积大，在进行项目迁移时，可以删除，在项目中执行npm install命令重新生成并下载所需要的第三方的代码库
• static：该目录用于存放静态文件。如：js、css文件等
• package.json：执行npm init命令会生成该文件，记录了项目所依赖的第三方库的信息
• Lock-Free 无锁技术
• 联合文件系统 Union FS

📌 大纲

📝 主题描述

🗂️ 目标

🎯 目标和任务分解

🧠 思考的维度

🎉 总结

📖 参考文献