Слияние кода завершено, страница обновится автоматически
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>闲话小阁</title>
<subtitle>开开心心走一回</subtitle>
<link href="/atom.xml" rel="self"/>
<link href="/"/>
<updated>2020-11-15T08:34:38.703Z</updated>
<id>/</id>
<author>
<name>冯雪芹</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>牢骚太盛防肠断，风物长宜放眼量</title>
<link href="/2020/07/16/essay/morining/"/>
<id>/2020/07/16/essay/morining/</id>
<published>2020-07-16T05:07:14.000Z</published>
<updated>2020-11-15T08:34:38.703Z</updated>
<content type="html"><![CDATA[<script src=/js/crypto-js.js></script><script>function doDecrypt (pwd, onError) {console.log('in doDecrypt');const txt = document.getElementById('enc_content').innerHTML;let plantext;try {const bytes = CryptoJS.AES.decrypt(txt, pwd);var plaintext = bytes.toString(CryptoJS.enc.Utf8);} catch(err) {if(onError) {onError(err);}return;}document.getElementById('enc_content').innerHTML = plaintext;document.getElementById('enc_content').style.display = 'block';document.getElementById('enc_passwd').style.display = 'none';if(typeof MathJax !== 'undefined') {MathJax.Hub.Queue(['resetEquationNumbers', MathJax.InputJax.TeX],['PreProcess', MathJax.Hub],['Reprocess', MathJax.Hub]);}}</script><div id="enc_content" style="display:none">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</div><div id="enc_passwd"> <input id="enc_pwd_input" type="password" style="border-radius: 5px;border-style: groove;height: 30px;width: 50%;cursor: auto;font-size: 102%;color: currentColor;outline: none;text-overflow: initial;padding-left: 5px;" onkeydown="if (event.keyCode == 13) { decrypt(); return false;}"> <input type="submit" value="解 密" onclick="decrypt()" style="width: 58px;height: 34px;border-radius: 5px;background-color: white;border-style: solid;color: currentColor;"><div id="enc_error" style="display: inline-block;color: #d84527;margin-left: 10px"></div><script>var onError = function(error) {document.getElementById("enc_error").innerHTML = "password error!"};function decrypt() {var passwd = document.getElementById("enc_pwd_input").value;console.log(passwd);doDecrypt(passwd, onError);}</script></div>]]></content>
<summary type="html">
<p>自信人生二百年，会当击水三千里。<br>
</summary>
<category term="dailyDiary" scheme="/categories/dailyDiary/"/>
<category term="morningDiary" scheme="/tags/morningDiary/"/>
</entry>
<entry>
<title>前端测试</title>
<link href="/2019/04/12/front-end/advance/fe-test/"/>
<id>/2019/04/12/front-end/advance/fe-test/</id>
<published>2019-04-12T03:58:01.000Z</published>
<updated>2020-01-06T06:42:49.290Z</updated>
<content type="html"><![CDATA[<a id="more"></a><h2 id="React单元测试"><a href="#React单元测试" class="headerlink" title="React单元测试"></a>React单元测试</h2><ol><li><p>Jest</p><p>JS测试</p></li><li>Enzyme</li></ol>]]></content>
<summary type="html">
<a id="more"></a>
<h2 id="React单元测试"><a href="#React单元测试" class="headerlink" title="React单元测试"></a>React单元测试</h2><ol>
<li><p>Jest</p>
<p>JS测
</summary>
</entry>
<entry>
<title>react-hooks</title>
<link href="/2019/04/11/front-end/React/react-hooks/"/>
<id>/2019/04/11/front-end/React/react-hooks/</id>
<published>2019-04-11T12:49:50.000Z</published>
<updated>2020-01-06T06:42:49.286Z</updated>
<content type="html"><![CDATA[<p>Hook 使你在无需修改组件结构的情况下复用状态逻辑<br>Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），而并非强制按照生命周期划分。</p><p>只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。（React根据调用顺序来取值）<br>只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。（还有一个地方可以调用 Hook —— 就是自定义的 Hook 中，我们稍后会学习到。）<br><a id="more"></a></p><h2 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h2><h3 id="useState"><a href="#useState" class="headerlink" title="useState"></a>useState</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> [count, setCount] = useState(<span class="number">0</span>);</span><br></pre></td></tr></table></figure><h3 id="useRef"><a href="#useRef" class="headerlink" title="useRef"></a>useRef</h3><p>类似this<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> demoRef = useRef(<span class="literal">null</span>);</span><br><span class="line">demoRef.current = <span class="string">'12'</span>;<span class="comment">// 赋值</span></span><br><span class="line">demoRef.current<span class="comment">// 取值</span></span><br><span class="line"><input ref={demoRef } /><span class="comment">// 赋值</span></span><br></pre></td></tr></table></figure></p><h3 id="useEffect"><a href="#useEffect" class="headerlink" title="useEffect"></a>useEffect</h3><p>useEffect 就是一个 Effect Hook，给函数组件增加了操作副作用的能力。它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途，只不过被合并成了一个 API。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">useEffect(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);</span><br><span class="line"> <span class="keyword">return</span> <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);</span><br><span class="line"> };</span><br><span class="line">}, [props.friend.id]);<span class="comment">// 只在props.friend.id变化时更新</span></span><br></pre></td></tr></table></figure></p><h3 id="useCallback"><a href="#useCallback" class="headerlink" title="useCallback"></a>useCallback</h3><p>返回一个 memoized 回调函数<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// useCallback(fn, deps) 相当于 useMemo(() => fn, deps)。</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> memoizedCallback = useCallback(</span><br><span class="line"> () => {</span><br><span class="line"> doSomething(a, b);</span><br><span class="line"> },</span><br><span class="line"> [a, b],</span><br><span class="line">);</span><br></pre></td></tr></table></figure></p><h3 id="useMemo"><a href="#useMemo" class="headerlink" title="useMemo"></a>useMemo</h3><p>返回一个 memoized 值<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> memoizedValue = useMemo(<span class="function"><span class="params">()</span> =></span> computeExpensiveValue(a, b), [a, b]);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">React.memo(<span class="function">(<span class="params">props</span>) =></span> <span class="function">(<span class="params"><comp <span class="regexp">/>), (props) => sholudUpdate() )</span></span></span></span><br></pre></td></tr></table></figure></p><h3 id="自定义-Hook"><a href="#自定义-Hook" class="headerlink" title="自定义 Hook"></a>自定义 Hook</h3><p>自定义 Hook 更像是一种约定而不是功能。</p><h3 id="useContext"><a href="#useContext" class="headerlink" title="useContext"></a>useContext</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> value = useContext(MyContext);<span class="comment">// （MyContext为React.createContext 的返回值）</span></span><br></pre></td></tr></table></figure><h3 id="useReducer"><a href="#useReducer" class="headerlink" title="useReducer"></a>useReducer</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"> <span class="keyword">const</span> reducer = <span class="function">(<span class="params">state, action</span>) =></span> newState</span><br><span class="line"> <span class="keyword">const</span> init = <span class="function">(<span class="params">initialArg</span>) =></span> initialState</span><br><span class="line"><span class="keyword">const</span> [state, dispatch] = useReducer(reducer, initialArg, init);<span class="comment">//</span></span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<p>Hook 使你在无需修改组件结构的情况下复用状态逻辑<br>Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），而并非强制按照生命周期划分。</p>
<p>只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。（React根据调用顺序来取值）<br>只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。（还有一个地方可以调用 Hook —— 就是自定义的 Hook 中，我们稍后会学习到。）<br>
</summary>
</entry>
<entry>
<title>Suspense</title>
<link href="/2019/04/11/front-end/React/react-suspense/"/>
<id>/2019/04/11/front-end/React/react-suspense/</id>
<published>2019-04-11T12:49:50.000Z</published>
<updated>2020-01-06T06:42:49.287Z</updated>
<content type="html"><![CDATA[<p>Suspense<br><a id="more"></a><br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> getName = <span class="function"><span class="params">()</span> =></span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve</span>) =></span> {</span><br><span class="line"> setTimeout(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> resolve(<span class="string">'Morgan'</span>);</span><br><span class="line"> }, <span class="number">1000</span>);</span><br><span class="line">})</span><br><span class="line"> </span><br><span class="line"><span class="keyword">const</span> fetcher = createFetcher(getName);</span><br><span class="line"> </span><br><span class="line"><span class="keyword">const</span> Greeting = <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">return</span> <span class="xml"><span class="tag"><<span class="name">div</span>></span>Hello {fetcher()}<span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line">};</span><br><span class="line"> </span><br><span class="line"><span class="keyword">const</span> SuspenseDemo = <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <Suspense></span><br><span class="line"> <Greeting /></span><br><span class="line"> <<span class="regexp">/Suspense></span></span><br><span class="line"><span class="regexp"> );</span></span><br></pre></td></tr></table></figure></p><p>可与lazy连用</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> { Suspense, lazy } <span class="keyword">from</span> <span class="string">'react'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> DemoA = lazy(<span class="function"><span class="params">()</span> =></span> <span class="keyword">import</span>(<span class="string">'./demo/a'</span>))</span><br><span class="line"><span class="keyword">const</span> DemoB = lazy(<span class="function"><span class="params">()</span> =></span> <span class="keyword">import</span>(<span class="string">'./demo/b'</span>))</span><br><span class="line"></span><br><span class="line"><Suspense></span><br><span class="line"> <NavLink to=<span class="string">"/demoA"</span>>DemoA<<span class="regexp">/NavLink></span></span><br><span class="line"><span class="regexp"> <NavLink to="/</span>demoB<span class="string">">DemoB</NavLink></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <Router></span></span><br><span class="line"><span class="string"> <DemoA path="</span>/demoA<span class="string">" /></span></span><br><span class="line"><span class="string"> <DemoB path="</span>/demoB<span class="string">" /></span></span><br><span class="line"><span class="string"> </Router></span></span><br><span class="line"><span class="string"></Suspense></span></span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<p>Suspense<br>
</summary>
</entry>
<entry>
<title>REACT生命周期</title>
<link href="/2019/04/10/front-end/React/react-life-cycle/"/>
<id>/2019/04/10/front-end/React/react-life-cycle/</id>
<published>2019-04-10T09:45:50.000Z</published>
<updated>2020-01-06T06:42:49.287Z</updated>
<content type="html"><![CDATA[<p>生命周期调用顺序<br><a id="more"></a><br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 第一次mount，顺序调用</span></span><br><span class="line"><span class="keyword">constructor</span>(props)</span><br><span class="line">componentWillMount()// unsafe</span><br><span class="line">static getDerivedStateFromProps(props, state)// state,props变化均会调用</span><br><span class="line">render()</span><br><span class="line">componentDidMount()</span><br><span class="line">// update</span><br><span class="line">componentWillReceiveProps()// unsafe,props变化时调用</span><br><span class="line">static getDerivedStateFromProps(props, state)// state,props变化均会调用</span><br><span class="line">shouldComponentUpdate(nextProps, nextState)</span><br><span class="line">render()</span><br><span class="line">getSnapshotBeforeUpdate(prevProps, prevState)</span><br><span class="line">componentDidUpdate(prevProps, prevState, snapshot)</span><br><span class="line">// unmount</span><br><span class="line">componentWillUnmount()</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">// error handler</span><br><span class="line">static getDerivedStateFromError(error)</span><br><span class="line">componentDidCatch(error, info)</span><br><span class="line"></span><br><span class="line">// other API</span><br><span class="line">setState(updater[, callback])</span><br><span class="line">forceUpdate(callback)</span><br></pre></td></tr></table></figure></p>]]></content>
<summary type="html">
<p>生命周期调用顺序<br>
</summary>
</entry>
<entry>
<title>React设计模式</title>
<link href="/2019/04/10/front-end/React/react-design-pattern/"/>
<id>/2019/04/10/front-end/React/react-design-pattern/</id>
<published>2019-04-10T09:13:44.000Z</published>
<updated>2020-01-06T06:42:49.286Z</updated>
<content type="html"><![CDATA[<p>一些好的代码风格<br><a id="more"></a><br><a href="https://overreacted.io/" target="_blank" rel="noopener">Overreacted By Dan Abramov</a><br><a href="https://overreacted.io/zh-hans/writing-resilient-components/" target="_blank" rel="noopener">编写有弹性的组件</a><br><a href="https://github.com/dt-fe/weekly" target="_blank" rel="noopener">前端精读</a><br><a href="https://juejin.im/post/5cad39b3f265da03502b1c0a" target="_blank" rel="noopener">【React深入】从Mixin到HOC再到Hook</a><br><a href="https://juejin.im/book/5ba42844f265da0a8a6aa5e9" target="_blank" rel="noopener">React 实战：设计模式和最佳实践</a></p><h2 id="容器组件和展示组件"><a href="#容器组件和展示组件" class="headerlink" title="容器组件和展示组件"></a>容器组件和展示组件</h2><p>一个专注逻辑<br>一个专注UI</p><h2 id="高阶组件"><a href="#高阶组件" class="headerlink" title="高阶组件"></a>高阶组件</h2><p>接受>=1个组件作为参数，返回一个新的组件<br> 属性代理<br> 渲染劫持</p><h2 id="render-props"><a href="#render-props" class="headerlink" title="render props"></a>render props</h2><p>依赖注入<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure></p><h2 id="提供者模式"><a href="#提供者模式" class="headerlink" title="提供者模式"></a>提供者模式</h2><p>Provider、Consumer<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> DemoContext = React.createContext()</span><br><span class="line"><span class="keyword">const</span> Provider = DemoContext.Provider</span><br><span class="line"><span class="keyword">const</span> Consumer = DemoContext.Consumer</span><br><span class="line"></span><br><span class="line"><span class="comment">// 父组件</span></span><br><span class="line"><Provider value={{ <span class="attr">la</span>: <span class="string">'la'</span>, <span class="attr">ha</span>: <span class="string">'ha'</span> }}><span class="xml"><span class="tag"><<span class="name">Page</span> /></span><span class="tag"></<span class="name">Provider</span>></span></span></span><br><span class="line"><span class="comment">// 子组件</span></span><br><span class="line"><Consumer></span><br><span class="line">{</span><br><span class="line"> (context) => (</span><br><span class="line"> <div>{context.la}{context.ha}<<span class="regexp">/div></span></span><br><span class="line"><span class="regexp"> )</span></span><br><span class="line"><span class="regexp">}</span></span><br><span class="line"><span class="regexp"></</span>Consumer></span><br></pre></td></tr></table></figure></p><p>new代码格式<br>old代码格式</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 祖先</span></span><br><span class="line">getChildContext() { <span class="keyword">return</span> {} }</span><br><span class="line">childContextType = {}</span><br><span class="line"><span class="comment">// 子</span></span><br><span class="line"><span class="keyword">static</span> contextType = {}</span><br></pre></td></tr></table></figure><h2 id="组合设计模式"><a href="#组合设计模式" class="headerlink" title="组合设计模式"></a>组合设计模式</h2><p>如 Radio，RadioGroup(只暴露value和onChange事件，内部Item使用map映射)</p>]]></content>
<summary type="html">
<p>一些好的代码风格<br>
</summary>
</entry>
<entry>
<title>Object.defineProperty与</title>
<link href="/2019/04/10/front-end/advance/propertyProxy/"/>
<id>/2019/04/10/front-end/advance/propertyProxy/</id>
<published>2019-04-10T08:14:58.000Z</published>
<updated>2020-01-06T06:42:49.290Z</updated>
<content type="html"><![CDATA[<p>Object.defineProperty()</p><a id="more"></a><h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h2><p><a href="https://www.jianshu.com/p/2df6dcddb0d7" target="_blank" rel="noopener">实现双向绑定Proxy比defineproperty优劣如何</a></p>]]></content>
<summary type="html">
<p>Object.defineProperty()</p>
</summary>
</entry>
<entry>
<title>vue-grammer</title>
<link href="/2019/04/09/front-end/Vue/vue-grammer/"/>
<id>/2019/04/09/front-end/Vue/vue-grammer/</id>
<published>2019-04-09T10:56:52.000Z</published>
<updated>2020-01-06T06:42:49.288Z</updated>
<content type="html"><![CDATA[<p><a href="https://cn.vuejs.org/v2/guide/events.html" target="_blank" rel="noopener">vue官方文档</a><br><a id="more"></a></p><h1 id="vue总结"><a href="#vue总结" class="headerlink" title="vue总结"></a>vue总结</h1><p>渐进式JavaScript 框架</p><h2 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h2><h3 id="模板渲染"><a href="#模板渲染" class="headerlink" title="- 模板渲染"></a>- 模板渲染</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> {{ message }}</span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="actionscript"> <span class="keyword">var</span> app = <span class="keyword">new</span> Vue({</span></span><br><span class="line"><span class="actionscript"> el: <span class="string">'#app'</span>,</span></span><br><span class="line"> data: {</span><br><span class="line"><span class="actionscript"> message: <span class="string">'Hello Vue!'</span></span></span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h3 id="指令"><a href="#指令" class="headerlink" title="- 指令"></a>- 指令</h3><p>等号右边为data<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">v-bind:title=<span class="string">"message"</span></span><br><span class="line"></span><br><span class="line">v-model=<span class="string">"message"</span><span class="comment">// 实现与data的双向绑定</span></span><br><span class="line"></span><br><span class="line">v-<span class="keyword">if</span>=<span class="string">"seen"</span></span><br><span class="line"></span><br><span class="line">v-<span class="keyword">for</span>=<span class="string">"todo in todos"</span></span><br><span class="line"><li>{{ todo.text }}<<span class="regexp">/li></span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp"><todo-item</span></span><br><span class="line"><span class="regexp"> v-for="item in groceryList"</span></span><br><span class="line"><span class="regexp"> v-bind:todo="item"</span></span><br><span class="line"><span class="regexp"> v-bind:key="item.id"</span></span><br><span class="line"><span class="regexp">></</span>todo-item></span><br><span class="line"></span><br><span class="line">v-on:click=<span class="string">"reverseMessage"</span><span class="comment">// reverseMessage为method</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 自定义事件也可以用于创建支持 v-model 的自定义输入组件。记住：</span></span><br><span class="line"><input v-model=<span class="string">"searchText"</span> /></span><br><span class="line"><span class="comment">// 等价于：</span></span><br><span class="line"><input</span><br><span class="line"> v-bind:value=<span class="string">"searchText"</span></span><br><span class="line"> v-on:input=<span class="string">"searchText = $event.target.value"</span></span><br><span class="line">/></span><br></pre></td></tr></table></figure></p><h4 id="指令缩写"><a href="#指令缩写" class="headerlink" title="指令缩写"></a>指令缩写</h4><p><a href="https://blog.csdn.net/gaoxiaoba/article/details/52756280" target="_blank" rel="noopener">v-bind,v-on的缩写</a><br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- 完整语法 --></span></span><br><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">v-bind:href</span>=<span class="string">"url"</span>></span><span class="tag"></<span class="name">a</span>></span></span><br><span class="line"> </span><br><span class="line"><span class="comment"><!-- 缩写 --></span></span><br><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">:href</span>=<span class="string">"url"</span>></span><span class="tag"></<span class="name">a</span>></span></span><br><span class="line"> </span><br><span class="line"><span class="comment"><!-- 完整语法 --></span></span><br><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">v-bind:disabled</span>=<span class="string">"someDynamicCondition"</span>></span>Button<span class="tag"></<span class="name">button</span>></span></span><br><span class="line"> </span><br><span class="line"><span class="comment"><!-- 缩写 --></span></span><br><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">:disabled</span>=<span class="string">"someDynamicCondition"</span>></span>Button<span class="tag"></<span class="name">button</span>></span></span><br><span class="line"></span><br><span class="line"><span class="comment"><!-- 完整语法 --></span></span><br><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">v-on:click</span>=<span class="string">"doSomething"</span>></span><span class="tag"></<span class="name">a</span>></span></span><br><span class="line"> </span><br><span class="line"><span class="comment"><!-- 缩写 --></span></span><br><span class="line"><span class="tag"><<span class="name">a</span> @<span class="attr">click</span>=<span class="string">"doSomething"</span>></span><span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure></p><h2 id="组件"><a href="#组件" class="headerlink" title="组件"></a>组件</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 新建vue实例</span></span><br><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue({</span><br><span class="line"> <span class="comment">// 选项</span></span><br><span class="line"> data,<span class="comment">// object | function(vm),function参数为当前vue实例,可访问到其它属性，如props等，若非箭头函数则this指向当前vue实例</span></span><br><span class="line"> props,<span class="comment">// Array<string> | Object 对象允许配置高级选项，如类型检测、自定义校验和设置默认值</span></span><br><span class="line"> computed,<span class="comment">// { [key: string]: Function | { get: Function, set: Function } }</span></span><br><span class="line"> methods,<span class="comment">// { [key: string]: Function },方法中的 this 自动绑定为 Vue 实例。不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。</span></span><br><span class="line"> watch,<span class="comment">// { [key: string]: string | Function(val, oldVal) | Object | Array },回调函数，值也可以是方法名，或者包含选项的对象。</span></span><br><span class="line"></span><br><span class="line"> el,<span class="comment">// string | Element , 在实例挂载之后，元素可以用 vm.$el 访问。</span></span><br><span class="line"> template,<span class="comment">// string</span></span><br><span class="line"> render,<span class="comment">// (createElement: () => VNode) => VNode。 Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数</span></span><br><span class="line"> renderError,</span><br><span class="line"></span><br><span class="line"> beforeCreate,</span><br><span class="line"> created,</span><br><span class="line"> beforeMount,</span><br><span class="line"> mounted,<span class="comment">// 注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted：</span></span><br><span class="line"> beforeUpdate,</span><br><span class="line"> updated,</span><br><span class="line"> activated,<span class="comment">// keep-alive 组件激活时调用。</span></span><br><span class="line"> deactivated,<span class="comment">// keep-alive 组件停用时调用。</span></span><br><span class="line"> beforeDestroy,</span><br><span class="line"> destroyed,</span><br><span class="line"> errorCaptured,<span class="comment">// (err: Error, vm: Component, info: string) => ?boolean当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。</span></span><br><span class="line"></span><br><span class="line"> components,<span class="comment">// 包含 Vue 实例可用组件的哈希表。</span></span><br><span class="line"> directives,<span class="comment">// 包含 Vue 实例可用指令的哈希表。</span></span><br><span class="line"></span><br><span class="line"> <span class="comment">// 指定已创建的实例之父实例，在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例，子实例被推入父实例的 $children 数组中。</span></span><br><span class="line"> mixins, <span class="comment">// Array<Object> mixins 选项接受一个混入对象的数组。这些混入实例对象可以像正常的实例对象一样包含选项，他们将在 Vue.extend() 里最终选择使用相同的选项合并逻辑合并。举例：如果你的混入包含一个钩子而创建组件本身也有一个，两个函数将被调用。Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用</span></span><br><span class="line"></span><br><span class="line">})</span><br><span class="line">vm.$data<span class="comment">// 访问原始数据对象，访问 vm.a(代理, 以 _ 或 $ 开头的属性**不会**被Vue实例代理) 等价于访问 vm.$data.a</span></span><br><span class="line"></span><br><span class="line">Vue.component(<span class="string">'todo-item'</span>, {</span><br><span class="line"> <span class="comment">// todo-item 组件现在接受一个</span></span><br><span class="line"> <span class="comment">// "prop"，类似于一个自定义特性。</span></span><br><span class="line"> <span class="comment">// 这个 prop 名为 todo。</span></span><br><span class="line"> <span class="comment">// props: ['todo'],</span></span><br><span class="line"> props: {</span><br><span class="line"> <span class="comment">// 检测类型</span></span><br><span class="line"> height: <span class="built_in">Number</span>,</span><br><span class="line"> <span class="comment">// 检测类型 + 其他验证</span></span><br><span class="line"> age: {</span><br><span class="line"> type: <span class="built_in">Number</span>,</span><br><span class="line"> <span class="keyword">default</span>: <span class="number">0</span>,</span><br><span class="line"> required: <span class="literal">true</span>,</span><br><span class="line"> validator: <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> value >= <span class="number">0</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> template: <span class="string">'<li>{{ todo.text }}</li>'</span>,</span><br><span class="line"> mounted: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">this</span>.$nextTick(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">// Code that will run only after the</span></span><br><span class="line"> <span class="comment">// entire view has been rendered</span></span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure><h2 id="数据流"><a href="#数据流" class="headerlink" title="数据流"></a>数据流</h2><h3 id="数据绑定实现"><a href="#数据绑定实现" class="headerlink" title="数据绑定实现"></a>数据绑定实现</h3><p>???服务器端渲染</p>]]></content>
<summary type="html">
<p><a href="https://cn.vuejs.org/v2/guide/events.html" target="_blank" rel="noopener">vue官方文档</a><br>
</summary>
</entry>
<entry>
<title>Vue 初步</title>
<link href="/2019/04/09/front-end/Vue/start-with-vue/"/>
<id>/2019/04/09/front-end/Vue/start-with-vue/</id>
<published>2019-04-09T10:08:53.000Z</published>
<updated>2020-01-06T06:42:49.288Z</updated>
<content type="html"><![CDATA[<p><a href="https://cn.vuejs.org/v2/style-guide/" target="_blank" rel="noopener">Vue 风格指南</a><br><a id="more"></a><br>Vue三要素</p><p>响应式: 例如如何监听数据变化,其中的实现方法就是我们提到的双向绑定<br>模板引擎: 如何解析模板<br>渲染: Vue如何将监听到的数据变化和解析后的HTML进行渲染</p>]]></content>
<summary type="html">
<p><a href="https://cn.vuejs.org/v2/style-guide/" target="_blank" rel="noopener">Vue 风格指南</a><br>
</summary>
</entry>
<entry>
<title>GIT常用命令整理</title>
<link href="/2019/04/05/Tec/git/gitCommands/"/>
<id>/2019/04/05/Tec/git/gitCommands/</id>
<published>2019-04-05T12:07:10.000Z</published>
<updated>2020-01-06T06:42:49.267Z</updated>
<content type="html"><![CDATA[<h3 id="概念"><a href="#概念" class="headerlink" title="概念"></a>概念</h3><p>工作目录–add–》暂存区–commit–》本地repository–push–》远端repository<br><a id="more"></a></p><h3 id="参考文档"><a href="#参考文档" class="headerlink" title="参考文档"></a>参考文档</h3><p><a href="https://git-scm.com/book/zh/v2" target="_blank" rel="noopener">GIT中文文档</a></p><p><a href="http://www.runoob.com/manual/git-guide/" target="_blank" rel="noopener">GIT简明指南</a></p><h3 id="基础操作"><a href="#基础操作" class="headerlink" title="基础操作"></a>基础操作</h3><figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">git clone ... <span class="comment">#克隆git repository到本地</span></span><br><span class="line">git config -<span class="literal">-global</span> user.name <span class="string">"张三"</span></span><br><span class="line">git config -<span class="literal">-global</span> user.email <span class="string">"zhangsan@asd.com"</span></span><br><span class="line">git add . <span class="comment">#添加文件到缓存区(待commit)</span></span><br><span class="line">git commit <span class="literal">-m</span> <span class="string">"提交说明"</span> <span class="comment">#将缓存区文件加到git repository</span></span><br><span class="line">git push [<span class="type">remote</span>-<span class="type">name</span>] [<span class="type">branch</span>-<span class="type">name</span>] <span class="comment">#推送master分支的commit内容到remote服务器，如:</span></span><br><span class="line">git push origin master</span><br><span class="line"></span><br><span class="line">git pull (<远程主机名> <远程分支名>:<本地分支名>)<span class="comment"># 从最初克隆的服务器上抓取数据并自动尝试合并到当前所在的分支</span></span><br><span class="line">git fetch (<远程主机名> <远程分支名>:<本地分支名>)<span class="comment"># 从远端仓库中获得数据（不会自动合并或修改你当前的工作，需手动merge）</span></span><br></pre></td></tr></table></figure><h3 id="Reset操作"><a href="#Reset操作" class="headerlink" title="Reset操作"></a>Reset操作</h3><figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">git reset -<span class="literal">-hard</span> origin/master <span class="comment">#回退到某一版本origin/master</span></span><br><span class="line">git reset -<span class="literal">-hard</span> commitID <span class="comment">#回退到某一commit状态，commitID可以使用git log 看到，很长的hash字符串</span></span><br><span class="line">git rest HEAD file <span class="comment">#file路径(支持正则),取消文件的暂存(add) </span></span><br><span class="line">git checkout -- file <span class="comment">#file路径(支持正则),放弃对文件的修改，类似revert(danger:你对那个文件做的任何修改都会消失 - 你只是拷贝了另一个文件来覆盖它)</span></span><br></pre></td></tr></table></figure><h3 id="查看当前更改"><a href="#查看当前更改" class="headerlink" title="查看当前更改"></a>查看当前更改</h3><figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">git status <span class="comment">#查看是否有更改， -s查看简要</span></span><br><span class="line">git diff <span class="comment">#查看更改，只显示尚未暂存（add）的改动</span></span><br><span class="line">git diff <source_branch> <target_branch> <span class="comment">#比较两个分支(target_branch默认为当前分支) </span></span><br><span class="line">git diff -<span class="literal">-cached</span> <source_branch> <target_branch> <span class="comment"># (同--staged)查看已暂存(add)的将要添加到下次提交里的内容</span></span><br></pre></td></tr></table></figure><h3 id="日志相关"><a href="#日志相关" class="headerlink" title="日志相关"></a>日志相关</h3><figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">git show <span class="comment">#默认查看上一次commit内容</span></span><br><span class="line">git log <span class="comment">#查看commit记录，-p显示详细diff，-2显示最近两条，--state显示提交文件详情，--shortstate显示增删改条数，--pretty=online在一行显示</span></span><br><span class="line">git log -<span class="literal">-oneline</span> -<span class="literal">-decorate</span> <span class="comment">#查看各个分支当前所指的对象</span></span><br><span class="line">git log -<span class="literal">-pretty</span>=format:<span class="string">"%an %ad %cn %cd %s"</span>查看提交记录，只显示作者、修改日期、提交者、提交日期和提交说明</span><br></pre></td></tr></table></figure><h3 id="分支操作"><a href="#分支操作" class="headerlink" title="分支操作:"></a>分支操作:</h3><figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">git branch <span class="comment">#查看当前本地所有分支， --merged查看已合并到当前分支的分支，--no-merged查看未合并到当前分支的分支</span></span><br><span class="line">git branch <span class="literal">-v</span> <span class="comment">#查看当前所有分支及最后一次提交记录</span></span><br><span class="line">git branch <span class="literal">-r</span> <span class="comment">#查看远端分支</span></span><br><span class="line">git branch a <span class="comment">#创建a分支</span></span><br><span class="line">git checkout a <span class="comment">#切换到master分支</span></span><br><span class="line">git checkout <span class="literal">-b</span> a <span class="comment">#创建aaa并切换到aaa </span></span><br><span class="line">git branch <span class="literal">-d</span> aaa <span class="comment">#删除aaa分支，如有未处理的更改将会失败</span></span><br><span class="line">git branch <span class="literal">-D</span> aaa <span class="comment">#强制删除aaa分支</span></span><br><span class="line">git push origin mybranch <span class="comment">#推送分支到远端(可供协同工作)</span></span><br></pre></td></tr></table></figure><h3 id="Remot操作"><a href="#Remot操作" class="headerlink" title="Remot操作"></a>Remot操作</h3><figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">git remote <span class="comment">#查看远端名称(默认为orign)</span></span><br><span class="line">git remote <span class="literal">-v</span> <span class="comment">#查看remote名及对应url</span></span><br><span class="line">git remote add test https://url.com <span class="comment">#添加一个远端仓库,test为仓库名，后面为仓库地址</span></span><br><span class="line">git remote show [<span class="type">remote</span>-<span class="type">name</span>] <span class="comment">#显示远端仓库详情</span></span><br><span class="line">git remote rename oldName newName <span class="comment">#重命名</span></span><br><span class="line">git remote rm name <span class="comment">#移除远端仓库</span></span><br></pre></td></tr></table></figure><h3 id="变基操作"><a href="#变基操作" class="headerlink" title="变基操作"></a>变基操作</h3><p><strong>只对尚未推送或分享给别人的本地修改执行变基操作清理历史，从不对已推送至别处的提交执行变基操作，这样，你才能享受到两种方式带来的便利</strong><br><figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">#将 targetBranch的基改为baseBranch(会merge修改)，若baseBranch为 targetBranch的祖先，则无变化，targetBranch默认为当前分支</span></span><br><span class="line">git rebase baseBranch targetBranch</span><br></pre></td></tr></table></figure></p><h3 id="标签操作"><a href="#标签操作" class="headerlink" title="标签操作"></a>标签操作</h3><figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">git tag <span class="comment">#查看已有标签</span></span><br><span class="line">git tag v1.<span class="number">1</span> <span class="comment">#打标签</span></span><br><span class="line">git show v1.<span class="number">1</span> <span class="comment">#查看标签详情</span></span><br></pre></td></tr></table></figure><h3 id="Q-amp-A"><a href="#Q-amp-A" class="headerlink" title="Q&A"></a>Q&A</h3><h4 id="fetch和pull区别"><a href="#fetch和pull区别" class="headerlink" title="fetch和pull区别"></a>fetch和pull区别</h4><p><a href="https://blog.csdn.net/riddle1981/article/details/74938111" target="_blank" rel="noopener">详解git fetch与git pull的区别</a><br>git fetch 命令会将远端数据拉取到你的本地仓库，它并不会自动合并。<br>基本情况下git pull = git fetch + git merge<br>如果需要有选择的合并git fetch是更好的选择。效果相同时git pull将更为快捷。</p>]]></content>
<summary type="html">
<h3 id="概念"><a href="#概念" class="headerlink" title="概念"></a>概念</h3><p>工作目录–add–》暂存区–commit–》本地repository–push–》远端repository<br>
</summary>
<category term="Tec" scheme="/categories/Tec/"/>
<category term="Git" scheme="/categories/Tec/Git/"/>
<category term="Git" scheme="/tags/Git/"/>
</entry>
<entry>
<title>JS事件机制</title>
<link href="/2019/04/03/front-end/basic/js/event/"/>
<id>/2019/04/03/front-end/basic/js/event/</id>
<published>2019-04-03T07:32:29.000Z</published>
<updated>2020-01-06T06:42:49.294Z</updated>
<content type="html"><![CDATA[<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 监听subscribe，可有多个listener</span></span><br><span class="line"><span class="built_in">window</span>.addEventListener(<span class="string">'needReload'</span>, (event) => {</span><br><span class="line"> <span class="comment">// event.detail可得到传参</span></span><br><span class="line"> <span class="comment">// 相应处理</span></span><br><span class="line">})</span><br><span class="line"><span class="comment">// dispatch一个event， detail字段用于传参</span></span><br><span class="line"><span class="built_in">window</span>.dispatchEvent(<span class="keyword">new</span> CustomEvent(<span class="string">'needReload'</span>, { <span class="attr">detail</span>: <span class="string">'123'</span> }))</span><br><span class="line"><span class="comment">// remove一个listener</span></span><br><span class="line"> <span class="built_in">window</span>.removeEventListener(<span class="string">'needReload'</span>, <span class="keyword">this</span>.needReload)</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span
</summary>
</entry>
<entry>
<title>Cascading Style Sheets</title>
<link href="/2019/03/28/front-end/basic/css/css/"/>
<id>/2019/03/28/front-end/basic/css/css/</id>
<published>2019-03-28T02:37:36.000Z</published>
<updated>2020-01-06T06:42:49.291Z</updated>
<content type="html"><![CDATA[<p>CSS也是很重要的<br><a id="more"></a><br><img src="/img/css_priority.jpg" alt="css层叠与继承"></p>]]></content>
<summary type="html">
<p>CSS也是很重要的<br>
</summary>
</entry>
<entry>
<title>2019.03.28</title>
<link href="/2019/03/28/dailyDiary/2019/2019-03-28/"/>
<id>/2019/03/28/dailyDiary/2019/2019-03-28/</id>
<published>2019-03-28T02:28:18.000Z</published>
<updated>2020-01-06T06:42:49.281Z</updated>
<content type="html"><![CDATA[<script src=/js/crypto-js.js></script><script>function doDecrypt (pwd, onError) {console.log('in doDecrypt');const txt = document.getElementById('enc_content').innerHTML;let plantext;try {const bytes = CryptoJS.AES.decrypt(txt, pwd);var plaintext = bytes.toString(CryptoJS.enc.Utf8);} catch(err) {if(onError) {onError(err);}return;}document.getElementById('enc_content').innerHTML = plaintext;document.getElementById('enc_content').style.display = 'block';document.getElementById('enc_passwd').style.display = 'none';if(typeof MathJax !== 'undefined') {MathJax.Hub.Queue(['resetEquationNumbers', MathJax.InputJax.TeX],['PreProcess', MathJax.Hub],['Reprocess', MathJax.Hub]);}}</script><div id="enc_content" style="display:none">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</div><div id="enc_passwd"> <input id="enc_pwd_input" type="password" style="border-radius: 5px;border-style: groove;height: 30px;width: 50%;cursor: auto;font-size: 102%;color: currentColor;outline: none;text-overflow: initial;padding-left: 5px;" onkeydown="if (event.keyCode == 13) { decrypt(); return false;}"> <input type="submit" value="解 密" onclick="decrypt()" style="width: 58px;height: 34px;border-radius: 5px;background-color: white;border-style: solid;color: currentColor;"><div id="enc_error" style="display: inline-block;color: #d84527;margin-left: 10px"></div><script>var onError = function(error) {document.getElementById("enc_error").innerHTML = "password error!"};function decrypt() {var passwd = document.getElementById("enc_pwd_input").value;console.log(passwd);doDecrypt(passwd, onError);}</script></div>]]></content>
<summary type="html">
<p>青春须早为，岂能长少年。<br>
</summary>
<category term="dailyDiary" scheme="/categories/dailyDiary/"/>
<category term="morningDiary" scheme="/tags/morningDiary/"/>
</entry>
<entry>
<title>面试小结</title>
<link href="/2019/03/06/summary/%E9%9D%A2%E8%AF%95%E5%B0%8F%E7%BB%93/"/>
<id>/2019/03/06/summary/面试小结/</id>
<published>2019-03-06T14:39:46.000Z</published>
<updated>2020-01-06T06:42:49.297Z</updated>
<content type="html"><使用BFC隐藏属性float + marginabsolute + margin圣杯布局双飞翼布局flex布局</code></pre><p> 以上5种方式都可以实现两栏或三栏布局</p><h3 id="CSS-命名冲突如何解决？"><a href="#CSS-命名冲突如何解决？" class="headerlink" title="CSS 命名冲突如何解决？"></a>CSS 命名冲突如何解决？</h3><p>css-module</p><h3 id="介绍下-ES-里的-Generator-是怎么运行的？和-async-await-有何区别？"><a href="#介绍下-ES-里的-Generator-是怎么运行的？和-async-await-有何区别？" class="headerlink" title="介绍下 ES 里的 Generator 是怎么运行的？和 async + await 有何区别？"></a>介绍下 ES 里的 Generator 是怎么运行的？和 async + await 有何区别？</h3><p><a href="https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143450083887673122b45a4414333ac366c3c935125e7000" target="_blank" rel="noopener">generator</a></p><p> > 从计算机角度看，生成器是一种类协程或半协程，它提供了一种可以通过特定语句或方法使其执行对象暂停的功能。<br> Generator函数，返回一个部署了Iterator接口的遍历器对象，用来操作内部指针。以后，每次调用遍历器对象的next方法，就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值，是yield语句后面那个表达式的值；done属性是一个布尔值，表示是否遍历结束。</p><p>await的语义是:必须等到await后面跟的Promise有了返回值，才能继续执行await的下一行代码<br>generator由function<em>定义（注意多出的</em>号），并且，除了return语句，还可以用yield返回多次。<br>调用generator对象有两个方法</p><pre><code>1. 一是不断地调用generator对象的next()方法（得到{value, done}）</code></pre><ol><li>for … of循环迭代generator对象</li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">logAfterSeconds</span> (<span class="params">seconds = <span class="number">1</span>, content</span>) </span>{</span><br><span class="line"> setTimeOut(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(content)</span><br><span class="line"> }, seconds * <span class="number">1000</span>)</span><br><span class="line">}</span><br><span class="line"><span class="function"><span class="keyword">function</span> *<span class="title">nextId</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">let</span> count = <span class="number">1</span>;</span><br><span class="line"> <span class="keyword">while</span>(<span class="literal">true</span>) {</span><br><span class="line"> <span class="keyword">yield</span> count ++</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="React-里的-key-有什么用？"><a href="#React-里的-key-有什么用？" class="headerlink" title="React 里的 key 有什么用？"></a>React 里的 key 有什么用？</h3><pre><code>组件的唯一标示，用于virtual dom判断</code></pre><h3 id="React-里什么时候用-Context？"><a href="#React-里什么时候用-Context？" class="headerlink" title="React 里什么时候用 Context？"></a>React 里什么时候用 Context？</h3><pre><code>组件嵌套层级深且有数据共享情况时</code></pre><h3 id="render-props-是什么？什么时候用？和Hoc的异同"><a href="#render-props-是什么？什么时候用？和Hoc的异同" class="headerlink" title="render props 是什么？什么时候用？和Hoc的异同"></a>render props 是什么？什么时候用？和Hoc的异同</h3><h3 id="路由如何做权限校验？"><a href="#路由如何做权限校验？" class="headerlink" title="路由如何做权限校验？"></a>路由如何做权限校验？</h3><h3 id="SSR-的原理是什么？"><a href="#SSR-的原理是什么？" class="headerlink" title="SSR 的原理是什么？"></a>SSR 的原理是什么？</h3>]]></content>
<summary type="html">
<p>啦啦啦<br>
</summary>
</entry>
<entry>
<title>JS异步编程</title>
<link href="/2019/03/06/front-end/advance/asynchronous/"/>
<id>/2019/03/06/front-end/advance/asynchronous/</id>
<published>2019-03-06T14:28:48.000Z</published>
<updated>2020-01-06T06:42:49.289Z</updated>
<content type="html"><![CDATA[<p>Promise Generator async await<br><a id="more"></a></p><h2 id="Promise"><a href="#Promise" class="headerlink" title="Promise"></a>Promise</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">test</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">const</span> p = <span class="keyword">new</span> <span class="built_in">Promise</span> (<span class="function">(<span class="params">resolve, reject</span>) =></span> {</span><br><span class="line"> setTimeout(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">let</span> i =<span class="number">0</span>;</span><br><span class="line"> <span class="built_in">console</span>.log(i++)</span><br><span class="line"> resolve(i)</span><br><span class="line"> reject(<span class="string">'I am error after resolve'</span>)</span><br><span class="line"> }, <span class="number">1000</span>)</span><br><span class="line"> }).then(<span class="function">(<span class="params">value</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =></span> {</span><br><span class="line"> setTimeout(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(value++)</span><br><span class="line"> resolve(value)</span><br><span class="line"> }, <span class="number">1000</span>)</span><br><span class="line"> })</span><br><span class="line"> }).then(<span class="function">(<span class="params">value</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =></span> {</span><br><span class="line"> setTimeout(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(value++)</span><br><span class="line"> reject(<span class="string">'I am error'</span>)</span><br><span class="line"> resolve(<span class="string">'I am value after error'</span>)<span class="comment">// 不会执行</span></span><br><span class="line"> }, <span class="number">1000</span>)</span><br><span class="line"> })</span><br><span class="line"> }).then(<span class="function">(<span class="params">value</span>) =></span> {<span class="comment">// 不会执行到此处</span></span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'skip me'</span>)</span><br><span class="line"> <span class="built_in">console</span>.log(value)</span><br><span class="line"> }).catch(<span class="function">(<span class="params">error</span>) =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'error'</span>)</span><br><span class="line"> <span class="built_in">console</span>.log(error)</span><br><span class="line"> })</span><br><span class="line"> <span class="built_in">console</span>.log(p)</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="async-await"><a href="#async-await" class="headerlink" title="async await"></a>async await</h2><h2 id="Generator"><a href="#Generator" class="headerlink" title="Generator"></a>Generator</h2><ol><li>介绍下 ES 里的 Generator 是怎么运行的？和 async + await 有何区别？</li></ol><p><a href="https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143450083887673122b45a4414333ac366c3c935125e7000" target="_blank" rel="noopener">generator</a></p><p> > 从计算机角度看，生成器是一种类协程或半协程，它提供了一种可以通过特定语句或方法使其执行对象暂停的功能。<br> Generator函数，返回一个部署了Iterator接口的遍历器对象，用来操作内部指针。以后，每次调用遍历器对象的next方法，就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值，是yield语句后面那个表达式的值；done属性是一个布尔值，表示是否遍历结束。</p><p>await的语义是:必须等到await后面跟的Promise有了返回值，才能继续执行await的下一行代码<br>generator由function<em>定义（注意多出的</em>号），并且，除了return语句，还可以用yield返回多次。<br>调用generator对象有两个方法</p><pre><code>1. 一是不断地调用generator对象的next()方法（得到{value, done}）</code></pre><ol><li>for … of循环迭代generator对象</li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">logAfterSeconds</span> (<span class="params">seconds = <span class="number">1</span>, content</span>) </span>{</span><br><span class="line"> setTimeOut(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(content)</span><br><span class="line"> }, seconds * <span class="number">1000</span>)</span><br><span class="line">}</span><br><span class="line"><span class="function"><span class="keyword">function</span> *<span class="title">nextId</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">let</span> count = <span class="number">1</span>;</span><br><span class="line"> <span class="keyword">while</span>(<span class="literal">true</span>) {</span><br><span class="line"> <span class="keyword">yield</span> count ++</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><ul><li>自己写一个Promise</li><li>异步实现<h3 id="JS实现倒计时"><a href="#JS实现倒计时" class="headerlink" title="JS实现倒计时"></a>JS实现倒计时</h3>实现倒计时的几种方式:<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// setInterval</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">countDown</span> (<span class="params">counter</span>) </span>{</span><br><span class="line"> <span class="keyword">const</span> clear = setInterval(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(counter--)</span><br><span class="line"> <span class="keyword">if</span> (counter < <span class="number">0</span>) {</span><br><span class="line"> clearInterval(clear)</span><br><span class="line"> }</span><br><span class="line"> }, <span class="number">1000</span>)</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Generator + setTimeOut +递归</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> *<span class="title">nextId</span> (<span class="params">maxId = <span class="number">-1</span></span>) </span>{</span><br><span class="line"> <span class="keyword">let</span> count = <span class="number">1</span>;</span><br><span class="line"> <span class="keyword">while</span>(count <= maxId) {</span><br><span class="line"> <span class="keyword">yield</span> count ++</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">countDownWithLogger</span> (<span class="params">logger</span>) </span>{</span><br><span class="line"> <span class="keyword">let</span> next = logger.next()</span><br><span class="line"> setTimeout(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">if</span> (!next.done) {</span><br><span class="line"> <span class="built_in">console</span>.log(next.value)</span><br><span class="line"> countDownWithLogger(logger)</span><br><span class="line"> }</span><br><span class="line"> }, <span class="number">1000</span>)</span><br><span class="line">}</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">countDown</span> (<span class="params">counter</span>) </span>{</span><br><span class="line"> countDownWithLogger(nextId(counter))</span><br><span class="line">}</span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// promise</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">countDown</span> (<span class="params">max</span>) </span>{</span><br><span class="line"> <span class="keyword">let</span> p = <span class="built_in">Promise</span>.resolve(max - <span class="number">1</span>)</span><br><span class="line"> <span class="keyword">let</span> i = <span class="number">0</span></span><br><span class="line"> <span class="keyword">while</span>(i <= max - <span class="number">1</span>) {</span><br><span class="line"> i++</span><br><span class="line"> p = p.then(<span class="function">(<span class="params">count</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =></span> {</span><br><span class="line"> setTimeout(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(count--)</span><br><span class="line"> resolve(count)</span><br><span class="line"> }, <span class="number">1000</span>)</span><br><span class="line"> })</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">console</span>.log(max) <span class="comment">// 第一个值立即输出</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// async await</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">logCount</span> (<span class="params">count</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve</span>) =></span> {</span><br><span class="line"> setTimeout(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(count--)</span><br><span class="line"> resolve(count);</span><br><span class="line"> }, <span class="number">1000</span>)</span><br><span class="line"> })</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">countDown</span> (<span class="params">count</span>) </span>{</span><br><span class="line"> <span class="keyword">while</span>(count >= <span class="number">0</span>) {</span><br><span class="line"> count = <span class="keyword">await</span> logCount(count) </span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">countDown(<span class="number">4</span>)</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<p>Promise Generator async await<br>
</summary>
</entry>
<entry>
<title>面试常见问题</title>
<link href="/2019/03/06/front-end/advance/interview/"/>
<id>/2019/03/06/front-end/advance/interview/</id>
<published>2019-03-06T14:28:48.000Z</published>
<updated>2020-01-06T06:42:49.290Z</updated>
<content type="html"><![CDATA[<p>几个问题<br><a id="more"></a></p><ol><li>闭包作用，缺点？<br>带环境的函数，可以访问到定义环境作用域的内容<br>缺点：受环境影响函数执行结果不同，环境作用域不会被垃圾回收机制回收，内存浪费</li><li>深浅拷贝的区别和用途？<br>简单数据结构都是值拷贝，复杂数据区别:<br>深拷贝：值拷贝，不会相互影响<br>浅拷贝: 引用拷贝，操作同一块内存区域，相互影响</li><li><p>CSS 有哪些实现布局的方式？<br> <a href="http://baijiahao.baidu.com/s?id=1580578435186877828&wfr=spider&for=pc" target="_blank" rel="noopener">CSS常见布局方式</a><br> 使用BFC隐藏属性<br> float + margin<br> absolute + margin<br> 圣杯布局<br> 双飞翼布局<br> flex布局<br>以上5种方式都可以实现两栏或三栏布局</p></li><li><p>CSS 命名冲突如何解决？<br>css-module</p></li><li><p>介绍下 ES 里的 Generator 是怎么运行的？和 async + await 有何区别？</p></li></ol><p><a href="https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143450083887673122b45a4414333ac366c3c935125e7000" target="_blank" rel="noopener">generator</a></p><p> > 从计算机角度看，生成器是一种类协程或半协程，它提供了一种可以通过特定语句或方法使其执行对象暂停的功能。<br> Generator函数，返回一个部署了Iterator接口的遍历器对象，用来操作内部指针。以后，每次调用遍历器对象的next方法，就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值，是yield语句后面那个表达式的值；done属性是一个布尔值，表示是否遍历结束。</p><p>await的语义是:必须等到await后面跟的Promise有了返回值，才能继续执行await的下一行代码<br>generator由function<em>定义（注意多出的</em>号），并且，除了return语句，还可以用yield返回多次。<br>调用generator对象有两个方法</p><pre><code>1. 一是不断地调用generator对象的next()方法（得到{value, done}）</code></pre><ol><li>for … of循环迭代generator对象</li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">logAfterSeconds</span> (<span class="params">seconds = <span class="number">1</span>, content</span>) </span>{</span><br><span class="line"> setTimeOut(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(content)</span><br><span class="line"> }, seconds * <span class="number">1000</span>)</span><br><span class="line">}</span><br><span class="line"><span class="function"><span class="keyword">function</span> *<span class="title">nextId</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">let</span> count = <span class="number">1</span>;</span><br><span class="line"> <span class="keyword">while</span>(<span class="literal">true</span>) {</span><br><span class="line"> <span class="keyword">yield</span> count ++</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><ol start="6"><li>React 里的 key 有什么用？<br> 组件的唯一标示，用于virtual dom判断</li><li>React 里什么时候用 Context？<br> 组件嵌套层级深且有数据共享情况时</li><li><p>render props 是什么？什么时候用？和Hoc的异同</p></li><li><p>路由如何做权限校验？</p></li><li><p>SSR 的原理是什么？</p></li></ol><p>实现倒计时的几种方式:<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// setInterval</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">countDown</span> (<span class="params">counter</span>) </span>{</span><br><span class="line"> <span class="keyword">const</span> clear = setInterval(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(counter--)</span><br><span class="line"> <span class="keyword">if</span> (counter < <span class="number">0</span>) {</span><br><span class="line"> clearInterval(clear)</span><br><span class="line"> }</span><br><span class="line"> }, <span class="number">1000</span>)</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Generator + setTimeOut +递归</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> *<span class="title">nextId</span> (<span class="params">maxId = <span class="number">-1</span></span>) </span>{</span><br><span class="line"> <span class="keyword">let</span> count = <span class="number">1</span>;</span><br><span class="line"> <span class="keyword">while</span>(count <= maxId) {</span><br><span class="line"> <span class="keyword">yield</span> count ++</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">countDownWithLogger</span> (<span class="params">logger</span>) </span>{</span><br><span class="line"> <span class="keyword">let</span> next = logger.next()</span><br><span class="line"> setTimeout(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">if</span> (!next.done) {</span><br><span class="line"> <span class="built_in">console</span>.log(next.value)</span><br><span class="line"> countDownWithLogger(logger)</span><br><span class="line"> }</span><br><span class="line"> }, <span class="number">1000</span>)</span><br><span class="line">}</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">countDown</span> (<span class="params">counter</span>) </span>{</span><br><span class="line"> countDownWithLogger(nextId(counter))</span><br><span class="line">}</span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// promise</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">countDown</span> (<span class="params">max</span>) </span>{</span><br><span class="line"> <span class="keyword">let</span> p = <span class="built_in">Promise</span>.resolve(max - <span class="number">1</span>)</span><br><span class="line"> <span class="keyword">let</span> i = <span class="number">0</span></span><br><span class="line"> <span class="keyword">while</span>(i <= max - <span class="number">1</span>) {</span><br><span class="line"> i++</span><br><span class="line"> p = p.then(<span class="function">(<span class="params">count</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =></span> {</span><br><span class="line"> setTimeout(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(count--)</span><br><span class="line"> resolve(count)</span><br><span class="line"> }, <span class="number">1000</span>)</span><br><span class="line"> })</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">console</span>.log(max) <span class="comment">// 第一个值立即输出</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// async await</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">logCount</span> (<span class="params">count</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve</span>) =></span> {</span><br><span class="line"> setTimeout(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(count--)</span><br><span class="line"> resolve(count);</span><br><span class="line"> }, <span class="number">1000</span>)</span><br><span class="line"> })</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">countDown</span> (<span class="params">count</span>) </span>{</span><br><span class="line"> <span class="keyword">while</span>(count >= <span class="number">0</span>) {</span><br><span class="line"> count = <span class="keyword">await</span> logCount(count) </span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">countDown(<span class="number">4</span>)</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<p>几个问题<br>
</summary>
</entry>
<entry>
<title>新起点</title>
<link href="/2018/12/03/Plan/fight/"/>
<id>/2018/12/03/Plan/fight/</id>
<published>2018-12-03T14:58:55.000Z</published>
<updated>2020-01-06T06:42:49.263Z</updated>
<content type="html"><![CDATA[<script src=/js/crypto-js.js></script><script>function doDecrypt (pwd, onError) {console.log('in doDecrypt');const txt = document.getElementById('enc_content').innerHTML;let plantext;try {const bytes = CryptoJS.AES.decrypt(txt, pwd);var plaintext = bytes.toString(CryptoJS.enc.Utf8);} catch(err) {if(onError) {onError(err);}return;}document.getElementById('enc_content').innerHTML = plaintext;document.getElementById('enc_content').style.display = 'block';document.getElementById('enc_passwd').style.display = 'none';if(typeof MathJax !== 'undefined') {MathJax.Hub.Queue(['resetEquationNumbers', MathJax.InputJax.TeX],['PreProcess', MathJax.Hub],['Reprocess', MathJax.Hub]);}}</script><div id="enc_content" style="display:none">U2FsdGVkX1+2aKuumE6ET1wptuSWtm305Cq0WKL9lLoVJA+na9PrU8gm0haLETGADFCi1bVYp5gTkw09q6bYQ+83VW00JIxs7WZLwj9xXFxGyxJFroyHhUvdesxcZm6JRccONa20Rffl5+Gs8SAgnXolgoOopwrJPuX0ruJDI0AlfIts8NWAx+v+tzhM0IpCVzkAnTtlZ9A1xrD9ZaDG1Ud0zHaQXBtedLVycbWRXWY8YIS/PbJnFBuW8ioIGsbY7FAtD5gSxdrR/iISLxi8zrDzz7IyFbFAEpvn5ed3cCQ5ziv0KNSPGDENESzQnRuYlX/RQIMp//3sqlhcAQhhj71YBMtk7cAUAMnqHH7qz6nMy9kVSLgghYjj/oBEr09G</div><div id="enc_passwd"> <input id="enc_pwd_input" type="password" style="border-radius: 5px;border-style: groove;height: 30px;width: 50%;cursor: auto;font-size: 102%;color: currentColor;outline: none;text-overflow: initial;padding-left: 5px;" onkeydown="if (event.keyCode == 13) { decrypt(); return false;}"> <input type="submit" value="解 密" onclick="decrypt()" style="width: 58px;height: 34px;border-radius: 5px;background-color: white;border-style: solid;color: currentColor;"><div id="enc_error" style="display: inline-block;color: #d84527;margin-left: 10px"></div><script>var onError = function(error) {document.getElementById("enc_error").innerHTML = "password error!"};function decrypt() {var passwd = document.getElementById("enc_pwd_input").value;console.log(passwd);doDecrypt(passwd, onError);}</script></div>]]></content>
<summary type="html">
<p>欲穷千里目，更上一层楼。<br>
</summary>
<category term="Plan" scheme="/categories/Plan/"/>
<category term="Plan" scheme="/tags/Plan/"/>
</entry>
<entry>
<title>ContextMenu，自定义右键菜单</title>
<link href="/2018/09/09/front-end/React/record/ContextMenu/"/>
<id>/2018/09/09/front-end/React/record/ContextMenu/</id>
<published>2018-09-08T16:07:08.000Z</published>
<updated>2020-01-06T06:42:49.287Z</updated>
<content type="html"><![CDATA[<p>基本用法:<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span onContextMenu={contextHandler}></span><br><span class="line">contextHandler = <span class="function">(<span class="params">e</span>) =></span> {</span><br><span class="line"> event.preventDefault();<span class="comment">// 可禁用掉默认右键菜单</span></span><br><span class="line"> ...一系列处理</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><a id="more"></a><p>具体示例:<br><a href="http://react-component.github.io/tree/examples/contextmenu.html" target="_blank" rel="noopener">rc-tree onRightClick实例</a></p><p>如示例，右键点击之后我们可以在当前点击点动态加载一个组件，位置绝对定位即可。<br>组件的显示隐藏逻辑不想自己写的话可以直接用antd的Tooltip/Popover一类的<br>注意在组件销毁的时候需要同时unmount刚才动态加载的组件</p>]]></content>
<summary type="html">
<p>基本用法:<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;span onContextMenu=&#123;contextHandler&#125;&gt;</span><br><span class="line">contextHandler = <span class="function">(<span class="params">e</span>) =&gt;</span> &#123;</span><br><span class="line"> event.preventDefault();<span class="comment">// 可禁用掉默认右键菜单</span></span><br><span class="line"> ...一系列处理</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
</summary>
<category term="React" scheme="/tags/React/"/>
</entry>
<entry>
<title>createPortal</title>
<link href="/2018/09/08/front-end/React/record/createPortal/"/>
<id>/2018/09/08/front-end/React/record/createPortal/</id>
<published>2018-09-08T15:53:10.000Z</published>
<updated>2020-01-06T06:42:49.288Z</updated>
<content type="html"><![CDATA[<p>基本用法：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ReactDOM.createPortal(child, container)</span><br></pre></td></tr></table></figure></p><p><a href="https://reactjs.org/docs/portals.html" target="_blank" rel="noopener">Portals-React官方文档</a><br><a id="more"></a><br>穿梭框，一般用于将子组件内容render到父组件里。<br>大概实现就是父组件给子组件预留一个dom接口(指定个id方便子组件找到)，一般是个空span或空div<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> Parent = <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <div></span><br><span class="line"> 我是父组件,我的子组件名字是：</span><br><span class="line"> <div id=<span class="string">"childContainer"</span> /></span><br><span class="line"> 下面请我的子组件讲话:</span><br><span class="line"> <Child /></span><br><span class="line"> <<span class="regexp">/div></span></span><br><span class="line"><span class="regexp"> )</span></span><br><span class="line"><span class="regexp">}</span></span><br></pre></td></tr></table></figure></p><p>然后子组件找到这个childContainer的dom节点，把想要渲染的东西渲染上去即可<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> Child = <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">const</span> name = <span class="string">'啊哈哈哈'</span></span><br><span class="line"> <span class="keyword">const</span> container = <span class="built_in">document</span>.getElementById(<span class="string">'childContainer'</span>);</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <div></span><br><span class="line"> 我是音痴啊哈哈哈哈哈</span><br><span class="line"> {ReactDOM.createPortal(name, container)}</span><br><span class="line"> <<span class="regexp">/div></span></span><br><span class="line"><span class="regexp"> )</span></span><br><span class="line"><span class="regexp">}</span></span><br></pre></td></tr></table></figure></p><p>这样渲染出来的效果大概如下<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">我是父组件,我的子组件名字是：</span><br><span class="line">啊哈哈哈</span><br><span class="line">下面请我的子组件讲话:</span><br><span class="line">我是音痴啊哈哈哈哈哈</span><br></pre></td></tr></table></figure></p><p>完结撒花</p>]]></content>
<summary type="html">
<p>基本用法：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ReactDOM.createPortal(child, container)</span><br></pre></td></tr></table></figure></p>
<p><a href="https://reactjs.org/docs/portals.html" target="_blank" rel="noopener">Portals-React官方文档</a><br>
</summary>
<category term="React" scheme="/tags/React/"/>
</entry>
<entry>
<title>分割线</title>
<link href="/2018/09/08/essay/%E5%88%86%E5%89%B2%E7%BA%BF/"/>
<id>/2018/09/08/essay/分割线/</id>
<published>2018-09-08T15:27:17.000Z</published>
<updated>2020-01-06T06:42:49.282Z</updated>
<content type="html"><![CDATA[<script src=/js/crypto-js.js></script><script>function doDecrypt (pwd, onError) {console.log('in doDecrypt');const txt = document.getElementById('enc_content').innerHTML;let plantext;try {const bytes = CryptoJS.AES.decrypt(txt, pwd);var plaintext = bytes.toString(CryptoJS.enc.Utf8);} catch(err) {if(onError) {onError(err);}return;}document.getElementById('enc_content').innerHTML = plaintext;document.getElementById('enc_content').style.display = 'block';document.getElementById('enc_passwd').style.display = 'none';if(typeof MathJax !== 'undefined') {MathJax.Hub.Queue(['resetEquationNumbers', MathJax.InputJax.TeX],['PreProcess', MathJax.Hub],['Reprocess', MathJax.Hub]);}}</script><div id="enc_content" style="display:none">U2FsdGVkX19ollcXkeOAdkr/vXIOKeu2pzwsdMVLV3SNP7LZy87Dxmc1l1lYiPLP//IBOiUbxrwlwufhrBALhPmPnkRb80nrJnbl7zWbPGy6bunlW1mnKWgHT0Vh9PgaB0DQzXXIIsI9IK2MXChgcGTIhZOQb0reqG8AtSLnT5GR+gDKVOKvkT85xwG1KjaGHAzIaliPcmfIttZcINeE1uzIgJNZTqxSrd7tBdui91aHDrUIdYigAVMgYL+A8omEecIbrmhOnf+JhXhhuh0G+rVvybaXJPOnTWWLV1fBRqJtPRDJM4BMTg4gxzuJ15IH6nve2D8UIqZ2MIoblDOTyGhjAB2UVn/dwKo7ixb3JvWKm4dPWgnzWHPjWg5+Qq0OGRODkghu8hkkKFxwPkp4dOm/Lo00q2KjUl50UIqeh6YajwjdMPxqY+Z2L6/GyhQF5qYQp0CUdDfjLcLG6OFjCtSoqP0zBcq3G3XlbCsPrckbfdycByH7oyjMZJqclujxRobhHvrkYu49SBYl/qqPirMQnMHGvtft0atsAZ/Nv0MztxdjAJ2sUaU/6cknsbphiRF3fichoyNjtSH1TozDfntxTeiFJjPhw5Kf4uznkVo=</div><div id="enc_passwd"> <input id="enc_pwd_input" type="password" style="border-radius: 5px;border-style: groove;height: 30px;width: 50%;cursor: auto;font-size: 102%;color: currentColor;outline: none;text-overflow: initial;padding-left: 5px;" onkeydown="if (event.keyCode == 13) { decrypt(); return false;}"> <input type="submit" value="解 密" onclick="decrypt()" style="width: 58px;height: 34px;border-radius: 5px;background-color: white;border-style: solid;color: currentColor;"><div id="enc_error" style="display: inline-block;color: #d84527;margin-left: 10px"></div><script>var onError = function(error) {document.getElementById("enc_error").innerHTML = "password error!"};function decrypt() {var passwd = document.getElementById("enc_pwd_input").value;console.log(passwd);doDecrypt(passwd, onError);}</script></div>]]></content>
<summary type="html">
<p>感觉到了个十字路口了<br>
</summary>
</entry>
</feed>
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )