antd文档系统解析

antd的文档系统是基于bisheng开源框架来做的，本文主要简单介绍下文档系统中几个关键点，重点理解其思路
1、google Analytics
作用：跟踪用户数据，形成分析报告
使用方法：在文档中添加如下代码

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

代码解析：
第一段：balabla。。。。。。没仔细看
第二段：ga('create', 'UA-XXXXX-Y', 'auto');
    创建追踪器：和远程谷歌分析建立连接，可以创建多个，也可以指定名字，比如：
        ga('create', 'UA-XXXXX-Y', 'auto', 'myTracker');
            create：创建追踪器
            'UA-XXXXX-Y'：跟踪ID，对应谷歌分析的媒体资源
            auto：cookie网域，指定如何存储cookie
第三段：ga('send', 'pageview');
        send：发送数据指令
        'pageview'：发送的匹配类型，还有screenview、event等
        other：添加具体发送的字段参数
比如说在追踪路由中：
this.context.router.listen((loc) => {
    window.ga('send', 'pageview', loc.pathname + loc.search);
  });

工作原理：
JavaScript 跟踪代码段定义了一个称为“命令队列”的全局函数 ga。之所以称其为命令队列，是因为该函数不会立即执行其中的命令，而是将这些命令加入到队列中，将这些命令的执行被延迟 analytics.js 库加载完成后进行。
注意事项：
在某些情况下，您需要在匹配已发送到 Google Analytics（分析）时获得通知，这样才能立即采取后续措施。当您需要记录导致用户离开当前页面的特定互动时，这种需要很常见。许多浏览器会在网页开始卸载时立即停止执行 JavaScript，这意味着您用于发送匹配的 analytics.js 命令可能没有机会执行。

例如，您要向 Google Analytics 发送事件以记录用户点击了表单的提交按钮。但在大多数情况下，点击提交按钮会立即开始加载下一个页面，不会再执行任何 ga(‘send’, …) 命令。
解决方法是拦截该事件以阻止页面卸载。然后按通常方式向 Google Analytics（分析）发送匹配，发送完成后，立即以程序化方式重新提交表单。
关于Google Analytics的具体使用，请参考Google Analytics
2、文档内搜索
是一个下拉框，支持自动输入，如果不是select选项，默认使用google搜索
如果相应的值，就进行路由跳转
3、bisheng
功能：将markdown转化为html
效果：
Support browserHistory, even in GitHub Pages.
Lazy load for Markdown data.
Plugin system to extend default behaviour.
Server-side render for SEO.
详细参考：bisheng

4、路由
使用了react-router，关于react路由这个就不需要详细说了
5、框架特点
框架中使用了

static contextTypes = {
    router: PropTypes.object.isRequired,
    intl: PropTypes.object.isRequired,
  }

这个是react中，在组件树中无障碍传递数据的方法，有点类似发布订阅的方式，在父组件中定义了相应的属性，子组件中只要“订阅“就可以获取相应的属性，react是不提倡的
详细参考：contextTypes

猜你喜欢