浅析JS中的自定义事件

./images/js-event-target.png
在 JS 中事件是与浏览器进行交互的主要途径,事件与 DOM 进行交互是最常见的方式,但是也可以用于非 DOM 代码中,实现自定义的事件。自定义事件的主要概念是创建一个管理事件的对象,用来删除,增加,触发事件等。事件是瞬间触发的,所以自定义事件也一样,当程序执行到某处时,触发了用户注册的事件处理程序完成这个过程。

js4agls | 数据结构 JavaScript 描述 - 链表篇

之前我们用数组的方式来实现了队列,是否还记得在出队列后有这样一段代码:

for (i = 0; i < this.length - 1; i++) {
  this.dataStore[i] = this.dataStore[i + 1];
}

我们为了删除一个元素,导致了整个数组元素的前移,显然这是非常低效的!尤其是当元素很多时。我们可以使用链表这种数据结构,来删除元素的时候而不必让后面的元素向前移动。

优雅的清除浮动

为何要清除浮动?

直接看代码

<div class="container">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</div>
.container {
  background-color: yellow;
}
.a,
.b,
.c {
  width: 200px;
  height: 100px;
  background-color: red;
  margin: 10px;
  float: left;
}
JS 事件分层及性能优化

HTML 事件处理程序

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script>
      function clickHander() {
        alert('click');
      }
    </script>
  </head>
  <body>
    <p onclick="alert(event.type)">hi jiavan</p>
    <p onclick="clickHander()">handler</p>
  </body>
</html>

html 事件处理程序的主要缺点 0. 可能会出现事件被触发了而事件处理程序还没有被加载

  1. 文档行为与文档结构耦合程度高
JavaScript 模块化编程及编写加载遵循 AMD 规范的代码

最原始的写法

模块就是实现一组特定功能的方法,把不同的函数简单的放在一起就是一个模块。

对象写法

把模块写成一个对象,所有的模块成员都放到这个对象里面。

var module1 = new Object({
  _count: 10,
  func1: function () {
    console.log('this is fun1');
  },
  func2: function () {
    console.log('this is func2');
  },
});

module1.func1();
ES 中理解原型以及对象创建方式

工厂模式

function createObj(name, age) {
  var o = {};
  o.name = name;
  o.age = age;
  o.sayName = function () {
    console.log(this.name);
  };
  return o;
}
var p1 = createObj('hi', 21);
var p2 = createObj('jiavan', 20);

问题:没有解决对象识别的问题。

NoSQL 与 CAP 定理简介

NoSQL 简介

NoSQL is “Not Only SQL”,意为不仅仅是 SQL。

NoSQL 是指非关系型数据库,是对不同于传统的关系型数据库管理系统的统称。它常用于超大规模的数据存储,这些类型的数据存储不需要固定的模式,无需多余操作即可横向扩展。

Basics.Chrome App的生命周期

应用程序运行时和事件页面是负责管理应用的生命周期, 应用程序运行时管理应用程序安装,控制活动页面,可以随时关闭应用程序. 事件页面监听程序在运行时触发的一些事件和管理程序什么时候启动如何启动.

生命周期是如何工作的

应用程序从用户的桌面加载事件页面, onLaunch 事件将会被触发. 这个事件告诉事件页面那个窗口将会被启动和窗口的大小. 这里的生命周期图并不是最好的,但它是实用的(我们很快就会使它更好的)。
chrome-app-lifecircle.png