record | chenfx

HTML标签，除了a标签还有哪些标签叫链接

发表于 2019-06-10 | 阅读次数:

链接这种元素可以在整个互联网上无处不在，咩有了超链接的 HTML 文档最多可以称得上是富文本，没法叫超文本了。
不过，除了这些肉眼可以看见的跳转超链接之外，在 HTML 里面还规定了一些不可见链接的类型，这里对链接家族进行一个学习，在 HTML 中，链接有两种类型：一种是超链接型标签；另一种是外部资源链接。其中包括 a 标签、area 标签、link 标签，基本结构如下如(来自winter老师的图)：

阅读全文 »

你知道HTML的节点有哪几类吗

发表于 2019-05-28 | 阅读次数:

浏览器在前端开发中无时无刻不在接触，但是浏览器里面的DOM对象及其DOM API真正的了解吗？
DOM API 是最早被设计出来的一批 API，也是用途最广的一批 API，而这里要学习的 DOM，指的是狭义的文档对象模型。

DOM API 介绍

在学习 DOM API 前先了解一下文档对象模型，顾名思义，文档对象模型是用来描述文档，这里的文档特指的是 HTML 文档(也用于 XML 文档)；同时，它又是一个“对象模型”，这意味着它使用的是对象这样的概念来描述 HTML 文档。
而 HTML 文档是一个由标签嵌套而成的树形结构，因此，DOM 也是使用树形的对象模型来描述一个 HTML 文档。
DOM API 大致包含四个部分：

节点：DOM 树形结构中的节点相关 API
事件：触发和监听事件相关 API
Range：操作文字范围相关 API
遍历：遍历 DOM 需要的相关 API

下面对节点进行学习。

阅读全文 »

根据观察者模式学习结果实现一个数据双向绑定功能

发表于 2019-05-09 | 阅读次数:

在上一篇学习的时候对观察者模式和发布-订阅者模式进行了更深层次的学习；这里通过一个 input 模拟VUE双向绑定(正好学习)的功能来加深对观察者模式的记忆，这个例子只对 v-model 指令及显示文本的模板语法进行处理来进行学习(Vue中有很多其它指令等，不做处理)。

<div id="app">
  <input v-model="test">
  \{\{test\}\}
</div>

<script src="*****/observer.js"></script>
<script src="*****/dep.js"></script>
<script src="*****/watcher.js"></script>
<script src="*****/compile.js"></script>
<script src="*****/mvvm.js"></script>

<script>
  const vm = new MVVM({
    el: 'app',
    data() {
      return {
        test: 'mvvm数据双向绑定demo'
      }
    }
  });
</script>

注意：下文中 \{\{\}\} 这个符号标识的是 Mustache 语法

阅读全文 »

观察者模式-发布订阅者模式的不同

发表于 2019-05-07 | 阅读次数:

在之前的学习过程中，一直对观察者模式、发布-订阅者模式的概念模棱两可，今天找到了机会好好的补习了一下。
首先，什么是观察者模式？什么是发布-订阅者模式呢？

观察者模式中主体(Subject)和观察者(Observer)是互相感知的；
发布(Publisher)-订阅者(Subscriber)模式是借助第三方来实现调度的，发布者(Publisher)和订阅者(Subscriber)之间互不感知。

这里对概念进行了了解，但是其具体的实现究竟是个什么样的呢？看如下代码：

const pubSub = (() => {
  const eventChannelTopics = {};

  function subscribe(topic, fn) {
    if (!eventChannelTopics[topic]) {
      // 当前订阅topic不存在则创建一个对应的topic数组
      eventChannelTopics[topic] = [];
    }
    // 将当前订阅topic存入对应的topic数组
    eventChannelTopics[topic].push(fn);
  }

  function publish(topic, ...args) {
    // 没订阅的topic在进行发布时直接忽略
    if (!eventChannelTopics[topic]) return false;

    // 发布当前topic时，把对应的(eventChannelTopics[topic])topic数组
    // 中的订阅topic依次全部执行
    for (let fn of eventChannelTopics[topic]) {
      fn(...args);
    }
  }

  return {
    subscribe,
    publish
  }
})();

// 订阅者 A
pubSub.subscribe('test', function(a, b) {
  console.log('这里是第一个subscribe订阅了test事件', a, b);
});
// 订阅者 B
pubSub.subscribe('test', function(a, b) {
  console.log('这里是第二个subscribe订阅了test事件', a, b);
});
// 这两个订阅的 test 事件在 publish 执行后会依次将订阅事件全部执行

// 发布者 P
pubSub.publish('test', '12', 'hh');