js-Client-side web APIs
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树进行改变。
定位:
创建和放置新节点
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
A 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的更多相关文章
- ECMAScript Web APIs node.js
https://hacks.mozilla.org/2015/04/es6-in-depth-an-introduction/ What falls under the scope of ECMASc ...
- 前端Web APIs 二
day04 - Web APIs 学习目标: 能够说出常用的3-5个键盘事件 能够知道如何获取当前键盘按下的是哪个键 能够知道浏览器的顶级对象window 能够使用window.onload事件 能够 ...
- 前端Web APIS
day01 - Web APIs 学习目标: 能够通过ID来获取元素能够通过标签名来获取元素能够通过class来获取元素能够通过选择器来获取元素能够获取body和html元素能够给元素注册事件能够修改 ...
- 使用 React.js 的渐进式 Web 应用程序:第 1 部分 - 介绍
使用 React.js 的渐进式 Web 应用程序:第 1 部分 - 介绍 使用 React.js 的渐进式 Web 应用程序:第 1 部分 - 介绍 来自译者 markzhai:大家也知道最近 ...
- 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 ...
- 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 ...
- OS.js – 开源的 Web OS 系统,赶快来体验
OS.js 是一个开源的 Web OS 系统,可以在浏览器中运行,提供了窗口管理器,应用程序API,用户界面开发套件和抽象的文件系统等.可以部署在 Node 或者 PHP 环境中运行.OS.js is ...
- App.js – 用于移动 Web App 开发的 JS 界面库
App.js 是一个轻量级的 JavaScript UI 库,用于创建像本地应用程序的移动 Web 应用而不牺牲性能和体验.它是跨平台的,特定的UI设计,配置类似原生的过渡效果.App.js 的目的是 ...
- 《Node.js+MongoDB+AngularJS Web开发》读书笔记及联想
总体介绍 <Node.js+MongoDB+AngularJS Web开发>,于2015年6月出版,是一本翻译过来的书,原书名为<Node.js,MongoDB and Angula ...
- 通过JS语句判断WEB网站的访问端是电脑还是手机
通过JS语句判断WEB网站的访问端是电脑还是手机,以显示不同的页面! 目录腾讯网的适配代码如何判断访问网站的机器类型-如何判断ipadJS 判断浏览器客户端类型(ipad,iphone,android ...
随机推荐
- wkhtmtopdf--高分辨率HTML转PDF(二)
命令行 wkhtmtopdf有一些很实用的命令,平时如果不用代码,可以直接使用命令行来把你喜欢的任意网页转换为PDF, 命令行参考网址:http://madalgo.au.dk/~jakobt/wkh ...
- iOS 绘图 (UIImage的一些操作)
UIGraphicsBeginImageContextWithOptions,本文主要在图片类型上下文中对图片进行操作,具体实现的功能: - 1.生成图片 - 2.绘制图片到视图 - 3.添加水印 ...
- Linux其他: GitBash
git bash是Windows下的命令行工具 安装后在任何一个文件夹下右键GitBash,打开一个窗口,ssh root@xx.xxx.xxx.xx登陆到服务器,输入yes,和登陆密码可以使用敲命令 ...
- 在HTML中实现和使用遮罩层
Web页面中使用遮罩层,可防止重复操作,提示loading:也可以模拟弹出模态窗口. 实现思路:一个DIV作为遮罩层,一个DIV显示loading动态GIF图片.在下面的示例代码中,同时展示了如何在i ...
- nginx 总结
本文转自:http://freeloda.blog.51cto.com/2033581/1288553 ,感谢大神的辛勤付出! 大纲 一.前言 二.环境准备 三.安装与配置Nginx 四.Nginx之 ...
- Linux服务器配置---ftp限制ip
ftp限制IP 1.通过vsftpd的配置文件以及“hosts.deny”和“hosts.allow”文件设置允许某个ip地址访问 1)修改配置文件“/etc/vsftpd/vsftpd.conf”中 ...
- MySQL Crash Course #14# Chapter 22. Using Views
索引 视图是啥 为什么需要视图 使用视图的规则 如何使用视图 视图应用实例 别用视图更新数据! 视图是啥 理解视图的最佳方式就是看下面这个例子. SELECT cust_name, cust_cont ...
- 20145122 《Java程序设计》第8周学习总结
教材学习内容总结 1.NIO使用频道(channel)来衔接数据节点,对数据区的标记提供了clear(),rewind(),flip(),compact()等高级操作. 2.想要取得channel的操 ...
- 20145303刘俊谦《网络攻防》Exp4 Msf基础
20145303刘俊谦<网络攻防>Exp4 Msf基础 实验目标 • 掌握metasploit的基本应用方式,掌握常用的三种攻击方式的思路. • 一个主动攻击,如ms08_067: • 一 ...
- c/c++ 动态申请数组(转载)
转载:http://blog.csdn.net/hondely/article/details/6779887 转载:http://bbs.csdn.net/topics/390721031 转载:h ...