APIs

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/



简介:

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

JavaScript,API和其他JavaScript工具之间的关系

  • JavaScript — 内置于浏览器的高级脚本语言,您可以用来实现Web页面/应用中的功能。
  • 浏览器API — 内置于浏览器的结构程序,位于JavaScript语言顶部,可以更容易的实现功能。
  • 第三方API — 置于第三方普通的结构程序(例如Twitter,Facebook),可以在自己的Web页面中使用那些平台的某些功能
  • JavaScript库 — 通常是包含具有特定功能的一个或多个JavaScript文件,把这些文件关联到您的Web页以快速或授权编写常见的功能。例如包含jQuery和Mootools
  • JavaScript框架 — 从库开始的下一步,JavaScript框架视图把HTML、CSS、JavaScript和其他安装的技术打包在一起,然后用来从头编写一个完整的Web应用。 Vue, React前端框架

APIs 能做什么

  • 操作加载在浏览器中的documents的APIs:  DOM API。
  • APIs that fetch data from the server: (无需刷新reload整个页面),如XMLHttpRequest。 术语Ajax。Rails.ajax是用XMLHttpRequest写的。vueresource插件也用了XMLHttPRequest。
  • APIs用于画画和操作图形:如 Canvas ,可以创建2D,3D场景。
  • 音频视频API, HTMLMediaElement.
  • 设备API.系统通知(参见Notifications API)或振动硬件(参见Vibration API
  • 客户端储存API: 让设备在处于脱机状态时可用。例如使用Web Storage API的简单的键/值存储以及使用IndexedDB API的更复杂的表格数据存储。

How do APIs work?

不同的Api通常有共同的特征和相似的主题。

基于对象

它们有可识别的入口点:

比如DOM api, 入口点是Document对象,或者一个HTML元素的实例,var em = document.getElementById('id')

它们使用event to handle changes in state

当事件触发,运行函数的处理程序属性。



Basic Document manipulation

我的codepen案例:https://codepen.io/chentianwei411/pen/EeJwxw?editors=0111

DOM需要基本理解。

现代框架Vue.js是使用数据驱动DOM树结构的。数据有index用于排列顺序结构。当改变数据的index, vue就会监测到data变化,从而自动对DOM树进行改变。

定位:

Document.querySelector()

创建和放置新节点

var sect = document.createElement('p')

sect.appendChild(para)

创建文本节点: document.createTextNode()

  • 这是document对象的方法。
  • textContent: 元素对象的方法,返回/设置 一个文本节点。

移动和删除

对节点移动,方法很多,如appendChild("xxx"), 把某个节点移动到父节点最后。

删除:  父节点.removeChild(子节点)

如果不知道父节点是谁,可以 子节点.parentNode.removeChild(子节点)


Active learning: Getting userful information from the Window object

从window对象获得有用信息

例子:根据浏览器窗口大小调节 网页内容的可用大小

知识点css#boxSizing

设置为border-box,让padding+border-size+width/height的总和等于最开始width/height的设置

目的:布景的调整。

个人理解,把content的宽/高缩减一点,留给padding+border,让总和等于width/height

例子:https://www.w3schools.com/CSSref/tryit.asp?filename=trycss3_js_box-sizing

知识点 HTML DOM event  resize()

when the browser window has been resized。



Fetching data from the server

取回数据 局部加载页面 。

Ajax: 使用XMLHttpRequest技术来请求JSON格式的数据。

现代javascript api都是基于promises的,使用Promise和Fetch代替传统的XHR.

Fetch API

提供了一个 JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应。它还提供了一个全局 fetch()方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。

附加:

Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MessageChannel,如果执行环境不支持,会采用 setTimeout(fn, 0) 代替。


Promise

标签:异步, 扁平化.then

Promise is an object representing the eventual completion or failure of an asynchronous operation.

promise本质上是一个绑定了回调的对象

假设一个函数,异步地生成一个声音文件给一个配置直接和2个回调函数。

//旧的写法
function successCallback(result) {
console.log("Audio file ready at URL: " + result);
} function failureCallback(error) {
console.log("Error generating audio file: " + error);
} createAudioFileAsync(audioSettings, successCallback, failureCallback);

现代函数返回一个可以直接绑定回调函数的promise对象,新的写法:

createAudioFileAsync(audioSettings).then(successCallback, failureCallback);

分解写:												

js-Client-side web APIs的更多相关文章

  1. ECMAScript Web APIs node.js

    https://hacks.mozilla.org/2015/04/es6-in-depth-an-introduction/ What falls under the scope of ECMASc ...

  2. 前端Web APIs 二

    day04 - Web APIs 学习目标: 能够说出常用的3-5个键盘事件 能够知道如何获取当前键盘按下的是哪个键 能够知道浏览器的顶级对象window 能够使用window.onload事件 能够 ...

  3. 前端Web APIS

    day01 - Web APIs 学习目标: 能够通过ID来获取元素能够通过标签名来获取元素能够通过class来获取元素能够通过选择器来获取元素能够获取body和html元素能够给元素注册事件能够修改 ...

  4. 使用 React.js 的渐进式 Web 应用程序:第 1 部分 - 介绍

      使用 React.js 的渐进式 Web 应用程序:第 1 部分 - 介绍 使用 React.js 的渐进式 Web 应用程序:第 1 部分 - 介绍 来自译者 markzhai:大家也知道最近 ...

  5. Claim-based-security for ASP.NET Web APIs using DotNetOpenAuth

    Recently I worked with a customer assisting them in implementing their Web APIs using the new ASP.NE ...

  6. ASP.NET Web APIs 基于令牌TOKEN验证的实现(保存到DB的Token)

    http://www.cnblogs.com/niuww/p/5639637.html 保存到DB的Token 基于.Net Framework 4.0 Web API开发(4):ASP.NET We ...

  7. OS.js – 开源的 Web OS 系统,赶快来体验

    OS.js 是一个开源的 Web OS 系统,可以在浏览器中运行,提供了窗口管理器,应用程序API,用户界面开发套件和抽象的文件系统等.可以部署在 Node 或者 PHP 环境中运行.OS.js is ...

  8. App.js – 用于移动 Web App 开发的 JS 界面库

    App.js 是一个轻量级的 JavaScript UI 库,用于创建像本地应用程序的移动 Web 应用而不牺牲性能和体验.它是跨平台的,特定的UI设计,配置类似原生的过渡效果.App.js 的目的是 ...

  9. 《Node.js+MongoDB+AngularJS Web开发》读书笔记及联想

    总体介绍 <Node.js+MongoDB+AngularJS Web开发>,于2015年6月出版,是一本翻译过来的书,原书名为<Node.js,MongoDB and Angula ...

  10. 通过JS语句判断WEB网站的访问端是电脑还是手机

    通过JS语句判断WEB网站的访问端是电脑还是手机,以显示不同的页面! 目录腾讯网的适配代码如何判断访问网站的机器类型-如何判断ipadJS 判断浏览器客户端类型(ipad,iphone,android ...

随机推荐

  1. JavaScript中hoisting(悬置/置顶解析/预解析) 实例解释,全局对象,隐含的全局概念

    JavaScript中hoisting(悬置/置顶解析/预解析) 实例解释,全局对象,隐含的全局概念 <html> <body> <script type="t ...

  2. Python Web学习笔记之TCP的3次握手与4次挥手过程

    前言 尽管TCP和UDP都使用相同的网络层(IP),TCP却向应用层提供与UDP完全不同的服务.TCP提供一种面向连接的.可靠的字节流服务. 面向连接意味着两个使用TCP的应用(通常是一个客户和一个服 ...

  3. linux内核分析 第5章读书笔记

    第五章 系统调用 一.与内核通信 系统调用在用户控件进程和硬件设备之间添加了一个中间层,作用有: 为用户空间提供了一种硬件的抽象接口 系统调用保证了系统的稳定和安全 每个进程都运行在虚拟系统中,而在用 ...

  4. 20162311 Hash 补分博客

    20162311 Hash 补分博客 一.任务详情 二.解题过程 除留余数法和拉链法都懂了,也都会做,主要是开放寻址法.课下查了一些资料,也问了老师才彻底理解 引用例子 引用网上的一个例子来理解 参考 ...

  5. Program Size

    在Keil中编译工程成功后,在下面的Bulid Ouput窗口中会输出下面这样一段信息: Program Size: Code=6320  RO-data=4864  RW-data=44  ZI-d ...

  6. codevs1001 舒适的路线 - 贪心 - 并查集

    题目描述 Description Z小镇是一个景色宜人的地方,吸引来自各地的观光客来此旅游观光.Z小镇附近共有N(1<N≤500)个景点(编号为1,2,3,…,N),这些景点被M(0<M≤ ...

  7. Spring Boot + thymeleaf 实现文件上传下载

    参考博客:https://juejin.im/post/5a326dcaf265da431048685e 技术选型:spring boot 2.1.1+thymeleaf+maven 码云地址:htt ...

  8. Python3基础 os.path.getsize 获得文件的大小

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  9. Centos7.2 修改网卡名称

    查看ip [root@localhost network-scripts]# ip addr : lo: <LOOPBACK,UP,LOWER_UP> mtu qdisc noqueue ...

  10. JS事件监听器

    JS事件监听器 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Javasc ...