前端基础学习(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

你可能感兴趣的:(前端基础学习(1))