摘要：
最近调试douUI库，发现出现了死循环问题，本来打算使用Chrome来定位，但是Chrome进入死循环后并没有任何提示可以参考，只是一直处于卡死状态，最后使用FireFox成功定位。 在FireFox中，如果出现死循环后，会出现下面的提示： 这里我们选择 Stop It 之后，可以在 Console 阅读全文
随笔分类 - Web前端
关于H5项目开发中TS（或JS）文件按照顺序编译成一个文件的记录
2019-07-29 19:29 by 阿诚de窝, 2234 阅读, 收藏, 编辑
摘要：
由于js的执行特性，多个js文件合成一个文件或者进行多个js文件加载时，时需要按照指定的顺序进行的，否则会出现报错的情况。 我们看一下目前几个主流H5引擎的做法。 白鹭的做法 当前版本的做法 在tsconfig.json中，使用的是outDir而不是outFile，这么设置ts只会讲单个的ts文件直 阅读全文
WebGL第一步
2019-05-31 19:23 by 阿诚de窝, 734 阅读, 收藏, 编辑
摘要：
什么是WebGL？ WebGL使用了GLSL ES(OpenGL ES)着色器语言，通过配合调用js相关的绘制接口来实现3D效果。 采用页面中的<canvas>元素来定义绘图区域，canvas支持三维图形的绘制，但它不直接提供绘图方法，而是提供一种叫上下文(context)机制来绘制图形。 绘制流程 阅读全文
远程调试Android手机上网页的记录
2018-03-07 13:57 by 阿诚de窝, 767 阅读, 收藏, 编辑
摘要：
1.手机需要开启USB调试模式； 2.电脑和手机上都要安装最新的Chrome浏览器； 3.手机连接电脑，会出现下载安装驱动的提示并安装成功（并不是所有的手机都会这么顺利，比如我的魅族就无法安装驱动，公司的小米5C非常顺利，连接就安装成功了，再次重新连接就可以了），不需要下载手机助手啥的； 4.手机弹 阅读全文
Electron初探
2017-12-17 16:21 by 阿诚de窝, 666 阅读, 收藏, 编辑
摘要：
H5开发桌面应用？ 没错，H5现在也可以开发跨平台的桌面应用了，这意味着我们可以用网页来设计和制作桌面应用。 基于Node.js的Electron框架就可以实现桌面应用，比较有名的Electron框架实现的桌面应用就是微软的VS Code了，下面给出Electron的官网地址： https://el 阅读全文
HTML5学习笔记（二十九）：Cookie和Session
2017-12-11 20:46 by 阿诚de窝, 5196 阅读, 收藏, 编辑
摘要：
HTTP协议本身是无状态的，这和HTTP最初的设计是相符的，每次请求都是创建一个短连接，发送请求，得到数据后就关闭连接。即每次连接都是独立的一次连接。 这样的话，导致的问题就是当我在一个页面登陆了账号之后，点击连接打开的新界面或者关闭后再打开我都需要再次登陆账号，所以我们需要借助Cookie和Ses 阅读全文
Base标签小记：更改当前页面的地址
2017-09-14 11:22 by 阿诚de窝, 1410 阅读, 收藏, 编辑
摘要：
一般来说，H5游戏的部署，index.html和代码资源都会放在同一个地址下然后使用iFrame导入到需要加载游戏的页面即可。 但是今天游戏项目部署遇到了一个问题，游戏自己的访问页面（index.html）的地址（a.com）和游戏代码资源的地址（b.com）不在一个地方，这就导致在index中加载 阅读全文
HTML5学习笔记（二十八）：跨域
2017-04-22 15:50 by 阿诚de窝, 1716 阅读, 收藏, 编辑
摘要：
在跨域安全性方面，有多个地方会有限制，主要是XMLHttpRequest对象的跨域限制和iFrame的跨域限制，下面我们分别来看一下。 Ajax跨域（CORS） CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。 它允许浏览器向跨源服务器 阅读全文
HTML5学习笔记（二十七）：Ajax
2017-04-19 12:53 by 阿诚de窝, 688 阅读, 收藏, 编辑
摘要：
在Ajax出现之前，网页页面加载后，需要请求服务端数据刷新页面时，整个页面都需要重新加载一次，对于只有一小个区域的数据更新也必须刷新整个页面。 这个窘境在出现XMLHttpRequest对象之后得到了改善，而后人们统称不刷新整个页面的情况下请求服务端数据的技术为“Ajax”，即“Asynchromo 阅读全文
HTML5学习笔记（二十六）：JavaScript的错误处理
2017-04-17 19:55 by 阿诚de窝, 1264 阅读, 收藏, 编辑
摘要：
错误相关的调试和处理在开发中是特别重要的一种技能。 try-catch 我们来看下面的情况： 为了避免不继续执行后续代码的情况，可以对可能抛出错误的代码使用try-catch命令包围。 这里要注意error对象有多个属性，但是message属性是所有浏览器都支持的属性。 finally 在try-c 阅读全文
HTML5学习笔记（二十五）：事件
2017-04-06 16:07 by 阿诚de窝, 320 阅读, 收藏, 编辑
摘要：
在浏览器或文档某个元素发生某个特定情况的瞬间，会作为一个事件进行广播，我们可以对其添加监听来处理特定的事件。 事件流 事件流描述了页面中接收事件的顺序。 整个事件流包含了三个阶段：事件捕获阶段、事件目标阶段和事件冒泡阶段。 如果我们点击了上面代码中的div元素，实际的事件流如下： 事件处理 在HTM 阅读全文
HTML5学习笔记（二十四）：DOM扩展
2017-04-06 16:05 by 阿诚de窝, 332 阅读, 收藏, 编辑
摘要：
DOM扩展 DOM标准扩展最开始都是来自各个浏览器的自定义扩展DOM的功能，后被收录为标准的DOM相关API。 本笔记只记录被各大浏览器支持的标准扩展，对于特定浏览器的专有扩展不讨论。 选择符API 我们知道，在JS获取一个元素时一般通过id查找（使用getElementById方法），或者通过标签 阅读全文
HTML5学习笔记（二十三）：DOM应用之动态加载脚本
2017-04-05 17:55 by 阿诚de窝, 1870 阅读, 收藏, 编辑
摘要：
同步加载和执行JS的情况 在HTML页面的</body>表情之前添加的所有<script>标签，无论是直接嵌入JS代码还是引入外部js代码都是同步执行的，这里的同步执行指的是在加载好和执行完JS代码之前整个浏览器的界面都是阻塞的。 静态加载时 内嵌代码和引入js代码都是同步加载。 动态加载时 通过d 阅读全文
HTML5学习笔记（二十二）：DOM
2017-02-28 20:47 by 阿诚de窝, 464 阅读, 收藏, 编辑
摘要：
DOM即文档对象模型（Document Object Model），其定义了访问和操作 HTML 文档的标准方法。 DOM 将 HTML 文档表达为树结构，如下： 通过DOM，开发人员可以动态的添加、移除和修改页面的某一部分。 由于HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就 阅读全文
HTML5学习笔记（二十一）：BOM
2017-02-27 17:58 by 阿诚de窝, 890 阅读, 收藏, 编辑
摘要：
BOM(Browser Object Model) 是指浏览器对象模型。 由于最初JavaScript就是设计在浏览器中执行的脚本语言，所以BOM是浏览器提供给JavaScript操作自身的接口。 window BOM的核心对象是window对象，window对象表示一个浏览器的一个页面窗口对象。 阅读全文
HTML5学习笔记（二十）：JavaScript中的标准对象
2017-02-24 20:11 by 阿诚de窝, 730 阅读, 收藏, 编辑
摘要：
这里提到的标准对象指ECMAScript中定义的对象，无论JavaScript运行那种环境（浏览器、Node.js）下都存在的对象。 typeof 在JavaScript的世界里，一切都是对象。 但是某些对象还是和其他对象不太一样。为了区分对象的类型，我们用typeof操作符获取对象的类型，它总是返 阅读全文
HTML5学习笔记（十九）：Lambda和Promise
2017-02-24 13:28 by 阿诚de窝, 1130 阅读, 收藏, 编辑
摘要：
Lambda 在ES6的标准中称为Arrow Function（箭头函数）。下面是一个简单的箭头函数： 上面的定义和下面的代码定义效果一样： 箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种像上面的，只包含一个表达式，连{ ... }和return都省略掉了。还有一种可以包含多条 阅读全文
HTML5学习笔记（十八）：闭包
2017-02-23 13:16 by 阿诚de窝, 1075 阅读, 收藏, 编辑
摘要：
高阶函数 JavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，也可以返回一个函数，这种函数就称之为高阶函数。 函数作为参数 示例如下： 函数作为参数的好处是我们可以通过修改参数就可以改变函数的行为。 函数作为返回值 示例 阅读全文
HTML5学习笔记（十七）：访问器和class关键字
2017-02-22 13:25 by 阿诚de窝, 539 阅读, 收藏, 编辑
摘要：
访问器 在ECMAScript5中，提供了Object.defineProperty的方法，我们可以通过该方法来控制属性的更多权限。 属性类型 我们先看一段定义属性的代码： 我们为person定义了一个名为name的属性，这是最简单的设定，那么当我希望这个属性是一个只读属性，或者该属性不会在for 阅读全文
HTML5学习笔记（十六）：原型、类和继承【JS核心知识点】
2017-02-21 18:48 by 阿诚de窝, 881 阅读, 收藏, 编辑
摘要：
理解原型 在JavaScript中，只要声明了一个函数，就会为该函数创建一个名为prototype的属性，该属性指向当前函数的原型对象。 而函数的原型对象有一个constructor属性，该属性指向刚声明的函数。 需要注意的是：只有通过声明创建的函数对象才会具有原型对象和prototype属性，其它 阅读全文