-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
15 lines (15 loc) · 9.63 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="X-UA-Compatible" content="IE=edge"><title> Who am i?</title><meta name="description" content="A Blog Powered By Hexo"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="baidu-site-verification" content="A1EmTvTFQ6"><link rel="icon" href="/favicon.png"><link rel="stylesheet" href="/css/apollo.css"><link rel="search" type="application/opensearchdescription+xml" href="http://topgrd.me/atom.xml" title="Who am i?"></head><body><div class="wrap"><header><a href="/" class="logo-link"><img src="/favicon.png" alt="logo"></a><ul class="nav nav-list"><li class="nav-list-item"><a href="/" target="_self" class="nav-list-link active">BLOG</a></li><li class="nav-list-item"><a href="/archives/" target="_self" class="nav-list-link">ARCHIVE</a></li><li class="nav-list-item"><a href="http://weibo.com/leezhuo" target="_blank" class="nav-list-link">WEIBO</a></li><li class="nav-list-item"><a href="https://github.com/topgrd" target="_blank" class="nav-list-link">GITHUB</a></li><li class="nav-list-item"><a href="/atom.xml" target="_self" class="nav-list-link">RSS</a></li></ul></header><main class="container"><ul class="home post-list"><li class="post-list-item"><article class="post-block"><h2 class="post-title"><a href="/2017/12/04/tracking/" class="post-title-link">Tracking.js Javascript的计算机视觉库</a></h2><div class="post-info">Dec 4, 2017</div><div class="post-content"><p>惭愧惭愧，距离上次写博客已经很久很久了。 </p>
<h2 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h2><p>tracking.js库将不同的计算机视觉算法和技术带入浏览器环境。通过使用现代HTML5规范，让你能够进行实时的颜色跟踪，人脸检测等等。所有这些都使用轻量级核心（〜7 KB）和直观的界面。<br></div><a href="/2017/12/04/tracking/" class="read-more">...more</a></article></li><li class="post-list-item"><article class="post-block"><h2 class="post-title"><a href="/2017/05/17/virtualdom/" class="post-title-link">手动实现一个VirtualDom</a></h2><div class="post-info">May 17, 2017</div><div class="post-content"><h2 id="什么是virtualdom"><a href="#什么是virtualdom" class="headerlink" title="什么是virtualdom"></a>什么是virtualdom</h2><p>virtualdom 中文翻译过来是虚拟Dom，它的意思是指使用 JavaScript 实现一个dom树的结构，即用 JavaScript对象标识Dom结构，插到文档中。有什么用呢，在我们过去更新一个dom节点时，我们会使用JS的dom相关api去操作浏览器元素节点，这样无疑对性能是有一定的负担的，但是使用虚拟Dom后，我们只需要在浏览器内存中维护一颗JavaScript树结构对象，当Dom需要更新时，在内存中重新建立一颗新的树，记录2个树的差异得到patch，然后将这个patch更新到页面的树结构对象上，从而更新视图。<br>在React，Vue等框架中都实现了 VirtualDom，以为它比操作原生Dom要快，对于VirtualDom而言，树上的节点不是元素节点，而是Components。 </p></div><a href="/2017/05/17/virtualdom/" class="read-more">...more</a></article></li><li class="post-list-item"><article class="post-block"><h2 class="post-title"><a href="/2017/04/26/headless-Chrome/" class="post-title-link">Windows下使用Headless Chrome</a></h2><div class="post-info">Apr 26, 2017</div><div class="post-content"><p>google在4月的时候宣布他们将在chrome 59中支持headless模式，headless模式即chrome会以一种静默的模式启动，他不会启用界面，但是他在后台的行为与正常浏览器一样。 </p>
<h2 id="准备"><a href="#准备" class="headerlink" title="准备"></a>准备</h2><p>安装一个支持headless的chrome版本，我使用的是chrome canary，是chrome的实验版本，新的特性一版都会最新添加在里面。 </p>
<h2 id="启动"><a href="#启动" class="headerlink" title="启动"></a>启动</h2><p>最简单的启动方式是在桌面上右键chrome，然后在目标后面添加<code>--headless --remote-debugging-port=9222 --disable-gpu https://chromium.org</code>,然后右键，这样chrome就在后台以headless模式运行了，并且监听的9222端口。或者使用命令行的方式打开 在后面添加刚才的参数 </p>
<h2 id="使用chrome-remote-interface"><a href="#使用chrome-remote-interface" class="headerlink" title="使用chrome-remote-interface"></a>使用chrome-remote-interface</h2><p>使用npm的包<a href="https://github.com/cyrus-and/chrome-remote-interface">chrome-remote-interface</a>会让我们更方便的完成想要的操作，它允许使用配置远程链接chrome，然后调用api（chrome debugger-protocol）去操作。<br></div><a href="/2017/04/26/headless-Chrome/" class="read-more">...more</a></article></li><li class="post-list-item"><article class="post-block"><h2 class="post-title"><a href="/2017/04/17/svnhook/" class="post-title-link">曲线救国之SVN客户端钩子</a></h2><div class="post-info">Apr 17, 2017</div><div class="post-content"><p>此方法使用于没有权限到SVN仓库服务器设置钩子。 </p>
<h2 id="How-to-do"><a href="#How-to-do" class="headerlink" title="How to do"></a>How to do</h2><p>首先客户端的hook是在TortoiseSVN里支持的，所以得先安装TortoiseSVN，我相信使用SVN的大部分人都安装了这个软件。然后在TortoiseSVN的设置里找到hook script。<br><img src="/img/setting.png" alt="set"><br>然后点击add添加自己的脚本 </p></div><a href="/2017/04/17/svnhook/" class="read-more">...more</a></article></li><li class="post-list-item"><article class="post-block"><h2 class="post-title"><a href="/2016/12/22/vue/" class="post-title-link">Vue总结</a></h2><div class="post-info">Dec 22, 2016</div><div class="post-content"><h1 id="在使用Vue-ElementUI-Vuex-Vue-Router中遇到的问题以及解决"><a href="#在使用Vue-ElementUI-Vuex-Vue-Router中遇到的问题以及解决" class="headerlink" title="在使用Vue+ElementUI+Vuex+Vue-Router中遇到的问题以及解决"></a>在使用Vue+ElementUI+Vuex+Vue-Router中遇到的问题以及解决</h1><p>初学Vue，直接实战，目前为止遇到一些问题总结。 </p>
<ul>
<li>使用vue-cli最新版本时，执行<code>npm run dev</code>出现错误，执行<code>npm run build</code>无错。研究cmd的错误提示以及源码中build文件夹下的代码，最后在其中的<code>dev-server.js</code>中打印了<code>process.env.NODE_ENV</code>信息，结果显示<code>production</code>。修改<code>package.json</code>文件scripts中的配置<code>"dev": "set NODE_ENV=development&&node build/dev-server.js",</code> 开发模式正常执行。 </li>
<li>使用v-for时，不能在一个组件template的根元素上绑定。 </li>
<li><p>做IE兼容，Vuex在IE下需要ES6的promoise的polyfill。 执行<code>npm i babel-polyfill -D</code>，修改webpack.base.conf.js </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">entry: {</div><div class="line"> <span class="attr">app</span>: [<span class="string">'babel-polyfill'</span>, <span class="string">'./src/main.js'</span>]</div><div class="line">}</div></pre></td></tr></table></figure>
</li>
<li><p>Vue2中props不能设置双向绑定，防止对父组件产生反向影响，所以要是子组件的数据变化影响父组件中的数据，可以使用Vue自带的自定义事件来解决，使用v-on来绑定，使用$emit触发，在v-on绑定自定义事件时，可以将$event作为最后一个参数传入。 </p>
</li>
</ul></div><a href="/2016/12/22/vue/" class="read-more">...more</a></article></li><li class="post-list-item"><article class="post-block"><h2 class="post-title"><a href="/2016/12/01/FP2/" class="post-title-link">Functional Programing（二)</a></h2><div class="post-info">Dec 1, 2016</div><div class="post-content"><h2 id="Functor"><a href="#Functor" class="headerlink" title="Functor"></a>Functor</h2><h3 id="Container"><a href="#Container" class="headerlink" title="Container"></a>Container</h3><p>创建一个容器Container,里面可以存储任意值<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">Container</span>(<span class="params">x</span>) </span>{</div><div class="line"> <span class="keyword">this</span>.__value = x</div><div class="line">}</div></pre></td></tr></table></figure></p></div><a href="/2016/12/01/FP2/" class="read-more">...more</a></article></li></ul></main><footer><div class="paginator"><a href="/page/2/" class="next">NEXT</a></div><div class="copyright"><p>© 2014 - 2017 <a href="http://topgrd.me">topgrd</a>, powered by <a href="https://hexo.io/" target="_blank">Hexo</a> and <a href="https://github.com/pinggod/hexo-theme-apollo" target="_blank">hexo-theme-apollo</a>.</p></div></footer></div><script async src="//cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML" integrity="sha384-crwIf/BuaWM9rM65iM+dWFldgQ1Un8jWZMuh3puxb8TOY9+linwLoI7ZHZT+aekW" crossorigin="anonymous"></script><script>(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;e=o.createElement(i);r=o.getElementsByTagName(i)[0];e.src='//www.google-analytics.com/analytics.js';r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));ga('create',"UA-65933410-1",'auto');ga('send','pageview');</script></body></html>