原型与原型链原型（prototype）函数的prototype属性每个函数都有一个prototype属性，它默认指向一个Object空对象（即为原型对象） 原型对象中有一个属性constructor，它指向函数对象 给原型对象添加属性（一般都是方法）函数的所有实例对象自动拥有原型中的属性（方法） 1234567891011121314151617181920<script> // 每个函数都有一个prototype属性，它默认指向一个Object空对象（即为原型对象） console.log(Date.prototype, typeof Date.prototype) function Fun() { } console.log(Fun.prototype) //默认指向一个Object空对象（没有我们的属性） // 原型对象中有一个属性constructor，它指向函数对象 console.log(Date.prototype.constructor === Date) console.log( ...

PromiseJavaScript 中存在很多异步操作,Promise 将异步操作队列化，按照期望的顺序执行，返回符合预期的结果。可以通过链式调用多个 Promise 达到我们的目的 含义：Promise 对象用于一个异步操作的最终完成（或失败）及其结果值的表示。简单点说，它就是用于处理异步操作的，异步处理成功了就执行成功的操作，异步处理失败了就捕获错误或者停止后续操作 发展经历：Promise 是异步编程的一种解决方案，比传统的解决方案，回调函数和事件，更合理和更强大，它是由社区最早提出和实现，ES6 将其写进了语言标准，统一了语法，原生提供了 Promise Promise 在各种开源库中已经实现，现在标准化后被浏览器默认支持 Promise 是一个拥有 then 方法的对象或函数 resolve 作用是，将 Promise 对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去 reject 作用是，将 Promise 对象的状态从“未完成”变为“失败”（即从 pending 变为 rej ...

什么是 DOM文档对象模型 (DOM) 是HTML和XML文档的编程接口DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合 尽管通常会使用 JS 来访问 DOM， 但它并不是JS的一部分，它也可以被其他语言使用 DOM 解析我们常见的HTML元素，在浏览器中会被解析成节点 DOM树 文档：一个页面就是一个文档，DOM 中使用 document 表示 元素：页面中的所有标签都是元素，DOM 中使用 element 表示 节点：网页中的所有内容都是节点(标签、属性、文本、注释等)，DOM 中使用 node 表示 DOM节点节点对象JS 中操作 DOM 的内容称为 节点对象 （node)，既然是对象就包括操作 node 的属性和方法 包括12种类型的节点对象 常用的节点为 document、标签元素节点、文本节点、注释节点 节点均继承自 node 类型，所以拥有相同的属性或方法 document 是 DOM 操作的起始节点 1234567891011121314151617// document节点 nodeType为9console.log(documen ...

BOM概述什么是 BOMBOM是Browser Object Model，浏览器对象模型。主要处理浏览器窗口和框架，不过通常浏览器特定的JS扩展都被看做BOM的一部分。BOM是各个浏览器厂商根据DOM在各自浏览器上的实现，表现为不同浏览器定义有差别，实现方式不同 JS是通过访问 BOM 对象来访问、控制、修改客户端(浏览器) 浏览器对象模型（BOM）可以使我们通过 JS 来操作浏览器，在 BOM 中为我们提供了一组对象，用来完成对浏览器的操作 常见的 BOM 对象如下(下面会详细介绍)： Window：代表的是 整个浏览器的窗口，同时 window 也是网页中的全局对象Navigator：代表的是 当前浏览器的信息，通过该对象可以来识别不同的浏览器Location：代表的是 当前浏览器的地址栏信息，通过该对象可以获取地址栏信息，或者操作浏览器跳转页面History：代表的是 浏览器的历史记录，可以通过该对象来操作浏览器的历史记录，由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问时有效Screen：代表的是 用户的屏幕的信息，通过该对象 ...

简介ajax 全名 async javascript and XML(异步JavaScript和XML) 是前后台交互的能⼒ 也就是我们客户端给服务端发送消息的⼯具，以及接受响应的⼯具 AJAX 不是新的编程语言，而是一种使用现有标准的新方法 AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下 是⼀个 默认异步执⾏机制的功能,AJAX分为同步（async = false）和异步（async = true） AJAX特点优点 不需要插件的⽀持，原⽣ js 就可以使⽤ ⽤户体验好（不需要刷新⻚⾯就可以更新数据） 减轻服务端和带宽的负担 缺点 搜索引擎的⽀持度不够，因为数据都不在⻚⾯上，搜索引擎搜索不到 没有浏览历史，不能回退 存在跨域问题 对SEO(搜素引擎优化)不友好 浏览器天生具发送HTTP请求的能力，比如在在址栏输入内容，提交FORM表单等 使用JS脚本发送HTTP请求，不会带来页面的刷新，所以用户体验非常好 跨域问题当一个请求url的协议,域名,端口三者之间任意一个与当前的url不同都即为跨域 当前页面url 被请求页面ur ...

对象的创建模式Object构造函数模式套路：先创建空Object对象，再动态添加属性/方法 使用场景：起始时不确定对象内部数据 问题：代码量多 123456789101112<script> var p = new Object() p.name = "思懿" p.age = 18 p.setName = function (name) { this.name = name } // 测试 p.setName("陈若") console.log(p.name, p.age) // 陈若 18</script> 对象字面量模式套路：使用{}创建对象，同时指定属性和方法 适用场景：起始时对象内部数据时确定的 问题：如果创建多个对象，有重复代码 1234567891011121314<script> var p = { name: "陈若", age: ...

简介JavaScript 官方名称是 ECMAScript 是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果 1995年2月Netscape的布兰登.艾奇开发了针对网景公司的 Netscape Navigator浏览器的脚本语言LiveScript。之后Netscape与Sun公司联盟后LiveScript更名为JavaScript 微软在javascript发布后为了抢占市场推出了JScript。为了让脚本语言规范不在混乱，根据javascript 1.1版本推出了 ECMA-262的脚本语言标准 ECMA是欧洲计算机制造商协会由Sum、微软、NetScape公司的程序员组成 使用场景 浏览器网页端开发 做为服务器后台语言使用Node.js 移动端手机APP开发，如Facebook的 React Native (opens new window)、uniapp、PhoneGap、IONIC 跨平台的桌面应用程序，如使用 electronjs 运行流程所有内容需要在特定的环境中运行，就像PSD需要在类似PS的软 ...

模块化项目变大时需要把不同的业务分割成多个文件，这就是模块的思想。模块是比对象与函数更大的单元，使用模块组织程序便于维护与扩展 生产环境中一般使用打包工具如 webpack 构建，他提供更多的功能。但学习完本章节后会再学习打包工具会变得简单 模块就是一个独立的文件，里面是函数或者类库 虽然JS没有命名空间的概念，使用模块可以解决全局变量冲突 模块需要隐藏内部实现，只对外开发接口 模块可以避免滥用全局变量，造成代码不可控 模块可以被不同的应用使用，提高编码效率 实现原理在过去JS不支持模块时我们使用AMD/CMD（浏览器端使用）、CommonJS（Node.js使用）、UMD(两者都支持)等形式定义模块。 AMD代表性的是 require.js，CMD 代表是淘宝的 seaJS 框架。 下面通过定义一个类似 require.js 的 AMD 模块管理引擎，来体验模块的工作原理 123456789101112131415161718192021222324252627let module = (function () { //模块列表集合 const module ...

视口与文档首先理解视口（窗口）与文档的含义 网页很多都是多屏（通过滚动条显示看不见的内容），所以文档尺寸一般大于视口尺寸 视口尺寸不包括浏览器工具条、菜单、标签、状态栏等 当你打开控制台后，视口尺寸就相应变小了 position使用文档定位，fixed使用视口定位 文档坐标在页面滚动时不发生改变 视口坐标的操作需要考虑滚动条的位置 视口与文档尺寸视口坐标需要知道滚动条位置才可以进行计算，有以下几种方式获取滚动位置 方法 作用 注意 window.innerWidth 视口宽度 包括滚动条（不常用） window.innerHeight 视口高度 包括滚动条（不常用） document.documentElement.clientWidth 视口宽度 document.documentElement.clientHeight 视口高度 几何尺寸元素在页面中拥有多个描述几何数值的尺寸，下面截图进行了形象的描述 坐标都是从左上角计算，这与CSS中的right/bottom等不同 方法列表获取尺寸的方法或属性 方法 作用 备注 ...

哈哈哈，在前几天，偶尔在应用商店中，发现了这款游戏，虽早有耳闻，便决定体验一下游戏禅师陈星汉的作品《光遇》 初入光遇，无论是游戏理念还是设计，都透露出一个字“绝”，震撼 在一步步的新手指导中，学习到了，收集光翼，先祖，点蜡烛，更重要的是感受到社交功能的巧妙设计和游戏向用户传达的理念 过完指导，自己便定下了一个目标，就是收集所有图的光翼和先祖，在找寻光翼和先祖的过程中，无不被其场景和过程中传达的设计思想所折服 在晨岛的预言山谷中接受“水土气火”四项试炼，了解试炼游戏要表达出来的设计理念，但唯独火之试炼，难度异常艰难，导致在B站搜索攻略，才勉强过关获得光翼，但在该试炼中，我收获到了另一个人，我们彼此互不相识，甚至要蜡烛点亮才知对方的样貌，一起过火之试炼，可能这就是光…..遇吧 在圣岛收集光翼时，一个桌前中，认识了蕾，跟她的交谈过程中，我便讲起我的目标是实际所有的光翼，她便好心的说，要不我带你去寻找光翼，于是，开始全图找光翼(有一说一，霞谷的一个先祖是真的难拿),到暮土，决定自己开始探索，结果途中遇到一个大佬，她自作主张决定带我驯龙，导致我损失16个光翼，损失惨重，为了及时止损，我中断了 ...