前端基础学习（1）

前端架构

• 传统架构
• SPA:Single-page-application，单页架构
• 前后端分离
  • Ajax --> 前端应用兴起
  • 智能手机 --> 多终端支持
  • 后端： --> REST形式接口
  • 前端： --> 消费后端提供的数据

  • 通信协议： --> http/https

    
    架构变化.png

---

前端开发

• 前端开发模式的根本变化
  • Node环境下开发
  • 大量使用服务器端工具
  • 引入持续集成等软件工程的标准流程
  • 开发完成后，编译成浏览器可以运行的脚本，放上CDN
• 全栈技能
  • 传统前端技能：HTML、JavaScript、CSS
  • 一门后端语言
  • 移动端开发：ios / android / html5
  • 其他技能：数据库、http等等

---

Node.js概述

• 2009年，Node项目诞生，它是服务器上的JavaScript运行环境。
• Node = JavaScript + 操作系统API

• Node的意义

  • JavaScript成为服务器的脚本语言，与Python和Ruby一样
  • JavaScript成为唯一的浏览器和服务器都支持的语言

  • 前端工程师可以编写后端程序了

    
    node.png

---

js复习

Js的应用场景

1. 网页特效
2. 服务器开发（Node.js）
3. 命令行程序（Node.js）
4. 桌面程序（Electron）
5. App（Cordova）
6. 控制硬件-物联网（Ruff）

Js的组成

js组成.png

• ECMAScript:JavaScript核心，定义看JavaScript的语法规范
• BOM:浏览器对象模型，操作浏览器功能的API集合，通估BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等
• DOM:文档对象模型，操作页面元素的API集合，DOM吧HTML看作是文档树，通过DOM提供的API可以对书上的节点进行操作

数据类型

基本类型.png

函数

• 函数是一种数据类型，是js中的一等公民
• 掌握函数的定义、调用、参数设置、arguments等基础概念
• 理解匿名函数、自调用函数

• 高级应用：函数作为数据类型可以作为参数或返回值

  
  函数定义与执行.png

• 所有函数都是Function的实例对象

  
  函数调用方式.png

JavaScript对象分类

• 内置对象、浏览器对象、文档模型对象、自定义对象
• 内置对象：Math/Array/Number/String/Boolean...
• 浏览器对象BOM：
  • window对象：顶层对象，所有全局Js对象、函数和变量都自动变成了window对象的成员。
  • screen/location/history/navigator/cookies

自定义对象的四种创建方式

创建对象.png

this详解：

• 函数在定义的时候this是不确定的，只有在调用的时候才可以确定
• 一般函数直接执行，内部this执行全局window
• 函数作为一个对象的方法，被该对象所调用，那么this指向的是该对象

• 构造函数中的this是一个隐式对象，类似一个初始化的模型，所有方法和属性都挂载到这个隐式的对象上，后续通过new关键字调用，从而实现实例化

  
  this指向.png

对象的使用

• 遍历对象属性：通过for...in

• 删除对象熟悉：使用delete

  
  image.png