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. wkhtmtopdf--高分辨率HTML转PDF(二)

    命令行 wkhtmtopdf有一些很实用的命令,平时如果不用代码,可以直接使用命令行来把你喜欢的任意网页转换为PDF, 命令行参考网址:http://madalgo.au.dk/~jakobt/wkh ...

  2. iOS 绘图 (UIImage的一些操作)

    UIGraphicsBeginImageContextWithOptions,本文主要在图片类型上下文中对图片进行操作,具体实现的功能:  - 1.生成图片  - 2.绘制图片到视图 - 3.添加水印 ...

  3. Linux其他: GitBash

    git bash是Windows下的命令行工具 安装后在任何一个文件夹下右键GitBash,打开一个窗口,ssh root@xx.xxx.xxx.xx登陆到服务器,输入yes,和登陆密码可以使用敲命令 ...

  4. 在HTML中实现和使用遮罩层

    Web页面中使用遮罩层,可防止重复操作,提示loading:也可以模拟弹出模态窗口. 实现思路:一个DIV作为遮罩层,一个DIV显示loading动态GIF图片.在下面的示例代码中,同时展示了如何在i ...

  5. nginx 总结

    本文转自:http://freeloda.blog.51cto.com/2033581/1288553 ,感谢大神的辛勤付出! 大纲 一.前言 二.环境准备 三.安装与配置Nginx 四.Nginx之 ...

  6. Linux服务器配置---ftp限制ip

    ftp限制IP 1.通过vsftpd的配置文件以及“hosts.deny”和“hosts.allow”文件设置允许某个ip地址访问 1)修改配置文件“/etc/vsftpd/vsftpd.conf”中 ...

  7. MySQL Crash Course #14# Chapter 22. Using Views

    索引 视图是啥 为什么需要视图 使用视图的规则 如何使用视图 视图应用实例 别用视图更新数据! 视图是啥 理解视图的最佳方式就是看下面这个例子. SELECT cust_name, cust_cont ...

  8. 20145122 《Java程序设计》第8周学习总结

    教材学习内容总结 1.NIO使用频道(channel)来衔接数据节点,对数据区的标记提供了clear(),rewind(),flip(),compact()等高级操作. 2.想要取得channel的操 ...

  9. 20145303刘俊谦《网络攻防》Exp4 Msf基础

    20145303刘俊谦<网络攻防>Exp4 Msf基础 实验目标 • 掌握metasploit的基本应用方式,掌握常用的三种攻击方式的思路. • 一个主动攻击,如ms08_067: • 一 ...

  10. c/c++ 动态申请数组(转载)

    转载:http://blog.csdn.net/hondely/article/details/6779887 转载:http://bbs.csdn.net/topics/390721031 转载:h ...