前端工程师学习路线 —— JavaScript 1

最新推荐文章于 2024-04-30 23:00:09 发布

大胖小呀

最新推荐文章于 2024-04-30 23:00:09 发布

阅读量344

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/qq_34548699/article/details/104407453

版权

2020.2.20

语法和基本结构
学习DOM操作
学习使用API / Ajax
ES6+ 和模块化JS
理解 Hoisting(提升) Event Bubbling(事件冒泡) Scope(作用域) Prototype(原型) Shadow DOM() Strict() 的含义

一、语法和基本结构

字符串的常用方法：substring(start,end)、slice(start,end)、str.split(separator,limit)等；
数组与字符串之间的相互转换：join(’,’)、split(’,’)；

面向对象编程（OOP）基本思想是，使用对象来建模要在程序中表示的现实世界中的事物。

二、学习DOM操作

https://www.cnblogs.com/fengqiang626/p/11522616.html 在这里插入图片描述

三、学习API/Ajax

Ajax（Asynchronous Javascript And XML），是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
Ajax工作原理：
在这里插入图片描述
常用JQuery库中的ajax方法进行异步交互，即 $.ajax()；
参数主要包括：url、contentType、data（字符串/对象）、type（GET/POST）、success（函数）

Ajax 与 Promise

Promise实际是充当ajax获取后台数据后执行回调的异步执行顺序的一个媒介;
客观来说，就是避免ajax回调地狱（反复嵌套回调），不然代码不够直观。

/*
  定义一个使用promise的ajax请求
*/
const ajaxPromise=  param => {
  return new Promise((resovle, reject) => {
    $.ajax({
      "type":param.type || "get",
      "async":param.async || true,
      "url":param.url,
      "data":param.data || "",
      "success": res => {
        resovle(res);
      },
      "error": err => {
        reject(err);
      }
    })
  })
}
 
/*
   第一个请求
*/
let step1 = () => {
    ajaxPromise({
      "url":"",
    }).then(res => {
        console.log("第一个请求正确返回==>"+res); 
        step2(res); 
    }).catch(err => {
        console.log("第一个请求失败"); 
    })
}
 
/*
   第二个请求
*/
let step2 = (res) => {
    ajaxPromise({
      "type":"get",
      "url":"",
      "data":{"name":res}
    }).then(res => {
        console.log("第二个请求正确返回==>"+res); 
    }).catch(err => {
        console.log("第二个请求失败==>"+err); 
    })
}
 
step1();

应用程序接口（API，Application Programming Interface）
是基于编程语言构建的结构，使开发人员更容易地创建复杂的功能；
它们抽象了复杂的代码，并提供一些简单的接口规则直接使用。

API与JS库的区别

客户端API — 内置于浏览器的结构程序，位于JavaScript语言顶部。
第三方API — 植根于第三方服务器，使您可以在自己的Web页面中使用那些平台的某些功能。
JavaScript库 — 通常是包含具有特定功能的一个或多个JavaScript文件，把这些文件关联到您的Web页以快速或授权编写常见的功能，例如jQuery。

API如何工作？

基于对象
有可识别的入口点
使用事件来处理状态的变化
在适当的地方有额外的安全机制

常用浏览器API

操作文档的API – DOM（文档对象模型）API
从服务器获取数据的API – XMLHttpRequest
用于绘制和操作图形的API – Canvas/WebGL
音视频API – HTMLMediaElement
设备API
客户端存储API

文档对象模型API
document是window的一个对象属性；

客户端存储API
传统方法：cookies；
现代浏览器有比使用 cookies 更简单、更有效的存储客户端数据的 API。

Web Storage API 提供了一种非常简单的语法，用于存储和检索较小的、由名称和相应值组成的数据项。当您只需要存储一些简单的数据时，比如用户的名字，用户是否登录，屏幕背景使用了什么颜色等等，这是非常有用的。
IndexedDB API 为浏览器提供了一个完整的数据库系统来存储复杂的数据。这可以用于存储从完整的用户记录到甚至是复杂的数据类型，如音频或视频文件。
Cache API 存储离线网站文件这样的事情非常有用。