前端学习结束总结

Posted 2021-06-18 紫色烟云

前端学习结束

学习时间：2019/5/21 - 2021/5/21

学习内容:

• html5 结构（HTML5文档）
  • 语义化标签
• CSS3 样式（CSS3文档）
  • 样式表
  • 元素hover状态
  • CSS变量
  • 定位
  • 动画
  • Flex弹性块
• javascript 前端核心语言(JavaScript菜鸟教程文档 | JavaScript 标准参考教程文档)

  • 基本数据类型

    • 对象(Object)
    • 数值(Number)
    • 字符串(String)
    • 布尔值(Boolean)
    • null
    • undefined

  • if…else if…else条件语句

    • if(布尔表达式){}
    • if(布尔表达式){}else{}
    • if(布尔表达式1){}else if(布尔表达式2){}else if(布尔表达式n){}else{}

  • 数组的三大高阶函数

    • 过滤函数 : arr.filter(function(item){return 表达式})
    • 映射函数 : arr.map(function(item){return 映射处理结果})
    • 汇总函数 : arr.reduce(function(item){return 每次结合结果},PreValue)

  • V8引擎任务执行原理

    • 同步任务先执行，所有的异步任务先挂起到异步任务列表，所有同步任务完成，则依次查看任务列表，有异步任务达到执行条件，则转为同步任务开始执行，完成后再到任务列表查看，如此往复，直到所有的同步任务和异步任务完成，则执行完毕。

  • ES6 高阶语法(EcamScript 6 参考文档)

    • 模块化作用域
    • 对象属性和函数增强写法
    • 新增API
      • 条件查找项 : arr.find(function(item){return 表达式})
      • 条件查找索引 : arr.findIndex(function(item){return 表达式})
      • 箭头函数 : (abc)=>{} 相当于 function (abc){}

  • Vue 前端大框架（Vue 官方API文档）

    • MVVM模式
    • vue模板语法
      • vue-on 绑定事件(简写为 @)
      • vue-bind 绑定属性(简写为 : )
      • v-if_v-else-if_v-else 元素控制语法
      • v-for="(item,key,index) in obj" {{item}} 遍历数组或对象
      • v-model 1,v-bind绑定一个value属性 2，v-on指令给当前元素绑定input事件
    • el 挂载对象
    • data 数据
    • computed 计算属性
    • watch 监听
    • filters 过滤器
    • components 组件
    • 组件化开发思想
      • 父子组件之间的通信
      • 组件模板的抽离写法
    • 模块化开发思想
      • 模块化导出和导入
    • 插槽slot
      • 普通插槽
      • 具名插槽
      • 跨作用域插槽
    • webpack 打包工具
    • vuecli 脚手架
    • vue-router vue路由容器
    • vuex 公共数据大管家
    • axios 网络请求封装

  • AJAX 前端请求（AJAX 参考文档）

    • 前端内容:
    • 服务端内容 :

  • Node.js 后端JavaScript运行环境 (Node.js 参考教程)

    • Node.js核心模块
      • fs 文件操作模块
      • http 服务器搭建模块
      • os 系统信息模块
      • path 路径操作模块
        • __dirname 模块内置变量，其值为当前模块所属目录路径(文件夹,动态获取,字符串)
        • __ filename 模块内置变量，其值为当前模块的路径(文件,动态获取，字符串)
        • 拼接路径方法: path.join(__dirname,"./name.js")
    • 原生服务器的创建(http核心模块)
    • Express (http服务框架) 创建服务器（Express 官方参考文档）
      • req.query GET型请求体参数对象
      • 安装并配置 body-parser 第三方包 ( body-parser 配置使用参考文档)
        • req.body POST型请求体参数对象
      • Express中间件
    • Node中的模块化系统
      • module.exports 模块接口对象,模块内置对象，自动导出的一个对象
      • require() 模块系统内置函数，专门接收指定模块导出的module.exports对象
    • Node中自行封装针对某个文件操作的API(增删改查)
    • MongoDB 数据库服务
      • ”mongod“ 开启数据库服务
      • "ctrl + C"终止数据库服务
      • mongoose 第三方包创建MongoDB数据表模型
      • express-session 第三方包, 数据加密（express-session 配置使用参考文档）
        • 1，写Session : req.session.XXX=xx
        • 2，读Session : req.session.XXX
        • 3，删除Session : req.session.XXX=null 或delete(req.session.XXX)
      • express-art-template 和 art-template 模板语法及中间件配置（express-art-template 官方参考使用文档）
        • {{ 属性名 }} 变量替换
        • {{each arr}} {{$value}}{{/each}} 遍历数组
        • {{includ “文件路径”}} 包含内容
        • {{block “name”}} 默认内容或替换内容{{/block}} 替换域
        • {{extend “文件路径”}} 继承模板
        • 此中间件配置:app.engine('html', require("express-art-template")); /* 引入express-art-template模板引擎,默认模板库为主目录的"./views"文件夹，其中的.html将视作模板 */app.set("views", __dirname); /*设置模板库路径 */
          *

  • 其它内容

    • jQuery 前端大框架(已过时)（jQuery 参考使用文档）
    • Java 后端编程基础 (JAVA 8 参考使用文档)
    • Python 后端编程基础（Python 官方参考使用文档）

习以为常

• 变量
• 数组
• 函数
• 方法
• 声明
• 删除
• 替换
• 查找
• API
• 框架
• 基础语法
• 插件
• 第三包
• 自定义API
• 封装
• 万物皆对象
• 类
• 继承
• 多态-
• 筛选，过滤
• 映射
• 汇总
• 排序
• 数据结构
• 基本数据类型
• 数据表
• 数据模型
• 数据库
• 路由
• 请求
• GET
• POST
• 内核
• 配置
• 环境
• 执行顺序
• 引擎
• 任务
• 同步任务
• 异步任务
• 异步API

结论

• 如何才能完美地自行编写程序:
  • 第一奥义：个人的前端内容掌握量十分重要
  • 第二奥义就是: 查文档的速度
    • 文档不可避免地作为我们储存前端知识的第二大脑,这时要训练的是:匹配查找内容对应的文档 => 文档内查找指定内容 => 解析这段文档内容 => 正确使用。这时才能加快我们使用第二大脑的速度，才能更好地完成程序的编写。

个人整个前端内容掌握程度: 40%

名字:沉木,Link,Link05,Java_53,JS_53

@沉木