Слияние кода завершено, страница обновится автоматически
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>牢骚太盛防肠断，风物长宜放眼量</title>
<url>/2020/07/16/essay/morining/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>前端测试</title>
<url>/2019/04/12/front-end/advance/fe-test/</url>
<content><![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>
</entry>
<entry>
<title>react-hooks</title>
<url>/2019/04/11/front-end/React/react-hooks/</url>
<content><![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="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="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="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="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="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="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="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>
</entry>
<entry>
<title>Suspense</title>
<url>/2019/04/11/front-end/React/react-suspense/</url>
<content><![CDATA[<p>Suspense<br><a id="more"></a><br><figure class="highlight javascript"><table><tr><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="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>
</entry>
<entry>
<title>REACT生命周期</title>
<url>/2019/04/10/front-end/React/react-life-cycle/</url>
<content><![CDATA[<p>生命周期调用顺序<br><a id="more"></a><br><figure class="highlight javascript"><table><tr><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>
</entry>
<entry>
<title>React设计模式</title>
<url>/2019/04/10/front-end/React/react-design-pattern/</url>
<content><![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="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="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="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>
</entry>
<entry>
<title>Object.defineProperty与</title>
<url>/2019/04/10/front-end/advance/propertyProxy/</url>
<content><![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>
</entry>
<entry>
<title>vue-grammer</title>
<url>/2019/04/09/front-end/Vue/vue-grammer/</url>
<content><![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="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="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="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="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>
</entry>
<entry>
<title>Vue 初步</title>
<url>/2019/04/09/front-end/Vue/start-with-vue/</url>
<content><![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>
</entry>
<entry>
<title>GIT常用命令整理</title>
<url>/2019/04/05/Tec/git/gitCommands/</url>
<content><![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="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="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="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="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="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="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="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="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>
<categories>
<category>Tec</category>
<category>Git</category>
</categories>
<tags>
<tag>Git</tag>
</tags>
</entry>
<entry>
<title>JS事件机制</title>
<url>/2019/04/03/front-end/basic/js/event/</url>
<content><![CDATA[<figure class="highlight javascript"><table><tr><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>
</entry>
<entry>
<title>Cascading Style Sheets</title>
<url>/2019/03/28/front-end/basic/css/css/</url>
<content><![CDATA[<p>CSS也是很重要的<br><a id="more"></a><br><img src="/img/css_priority.jpg" alt="css层叠与继承"></p>
]]></content>
</entry>
<entry>
<title>2019.03.28</title>
<url>/2019/03/28/dailyDiary/2019/2019-03-28/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>面试小结</title>
<url>/2019/03/06/summary/%E9%9D%A2%E8%AF%95%E5%B0%8F%E7%BB%93/</url>
<content><
使用BFC隐藏属性
float + margin
absolute + 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="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>
</entry>
<entry>
<title>JS异步编程</title>
<url>/2019/03/06/front-end/advance/asynchronous/</url>
<content><![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="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="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="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="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="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="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>
</entry>
<entry>
<title>面试常见问题</title>
<url>/2019/03/06/front-end/advance/interview/</url>
<content><![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="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="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="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="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="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>
</entry>
<entry>
<title>新起点</title>
<url>/2018/12/03/Plan/fight/</url>
<content><![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>
<categories>
<category>Plan</category>
</categories>
<tags>
<tag>Plan</tag>
</tags>
</entry>
<entry>
<title>ContextMenu，自定义右键菜单</title>
<url>/2018/09/09/front-end/React/record/ContextMenu/</url>
<content><![CDATA[<p>基本用法:<br><figure class="highlight javascript"><table><tr><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>
<tags>
<tag>React</tag>
</tags>
</entry>
<entry>
<title>createPortal</title>
<url>/2018/09/08/front-end/React/record/createPortal/</url>
<content><![CDATA[<p>基本用法：<br><figure class="highlight javascript"><table><tr><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="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="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="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>
<tags>
<tag>React</tag>
</tags>
</entry>
<entry>
<title>分割线</title>
<url>/2018/09/08/essay/%E5%88%86%E5%89%B2%E7%BA%BF/</url>
<content><![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>
</entry>
<entry>
<title>cssFlex</title>
<url>/2018/05/28/front-end/basic/cssAndHtml/cssFlex/</url>
<content><![CDATA[<p>Flex应用<br><a id="more"></a><br> // text-align: center;<br> width: 100%;<br> display: flex;<br> // justify-content: center;<br> flex-wrap: wrap;<br> flex-shrink: 0.5; // </p>
]]></content>
</entry>
<entry>
<title>虚拟机使用小结</title>
<url>/2018/05/05/work/workExperience/</url>
<content><![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>
</entry>
<entry>
<title>保存(下载)chrome console下的对象</title>
<url>/2018/05/05/front-end/basic/js/saveConsoleParams/</url>
<content><![CDATA[<p>一点小技巧<br><a id="more"></a></p>
<ol>
<li>将对象store as global variable</li>
<li><p>在控制台下输入以下函数</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params">console</span>)</span>{</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.save = <span class="function"><span class="keyword">function</span>(<span class="params">data, filename</span>)</span>{</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span>(!data) {</span><br><span class="line"> <span class="built_in">console</span>.error(<span class="string">'Console.save: No data'</span>)</span><br><span class="line"> <span class="keyword">return</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span>(!filename) filename = <span class="string">'console.json'</span></span><br><span class="line"> </span><br><span class="line"> <span class="keyword">if</span>(<span class="keyword">typeof</span> data === <span class="string">"object"</span>){</span><br><span class="line"> data = <span class="built_in">JSON</span>.stringify(data, <span class="literal">undefined</span>, <span class="number">4</span>)</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">var</span> blob = <span class="keyword">new</span> Blob([data], {<span class="attr">type</span>: <span class="string">'text/json'</span>}),</span><br><span class="line"> e = <span class="built_in">document</span>.createEvent(<span class="string">'MouseEvents'</span>),</span><br><span class="line"> a = <span class="built_in">document</span>.createElement(<span class="string">'a'</span>)</span><br><span class="line"></span><br><span class="line"> a.download = filename</span><br><span class="line"> a.href = <span class="built_in">window</span>.URL.createObjectURL(blob)</span><br><span class="line"> a.dataset.downloadurl = [<span class="string">'text/json'</span>, a.download, a.href].join(<span class="string">':'</span>)</span><br><span class="line"> e.initMouseEvent(<span class="string">'click'</span>, <span class="literal">true</span>, <span class="literal">false</span>, <span class="built_in">window</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="literal">false</span>, <span class="literal">false</span>, <span class="literal">false</span>, <span class="literal">false</span>, <span class="number">0</span>, <span class="literal">null</span>)</span><br><span class="line"> a.dispatchEvent(e)</span><br><span class="line"> }</span><br><span class="line">})(<span class="built_in">console</span>)</span><br></pre></td></tr></table></figure>
</li>
<li><p>之后执行console.save(variableName)</p>
</li>
<li>下载即可看见</li>
</ol>
]]></content>
</entry>
<entry>
<title>180423</title>
<url>/2018/04/23/dailyDiary/2018/180423/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>2018心愿单</title>
<url>/2018/04/23/front-end/wishList/</url>
<content><![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+foc4JQZoHcdMCn1sb7cS028Pxr5QJ8xtL415/E82t5xY9JRYVnVKyf5QKFPA+J81j9yxEYXLImGu3/t89e4PoNHluejQbz8RQ7/agm2JL7CbDaROj+eKUrv05qAfnMvG18SrcPeC+VUn9qhAYt8rJL2ua9D2hHaYJs1xUTd3MyHP2T/MllcoXqfTqmcsVkjhVVtV6hcqs3Xjm/Pu3GSQAh1g9xwsES+Z38wO1L+BM0wrr1ZQ+m1C7XqYI1wMBybnDBI6t4oS97UoRZyg3MHY+63YDmed6ZNbCBChmgV4fTuqY2yaSqHqkUf+iVM3vQsNLYO0VBkIdVPLTFur7mhvcGW9K6NEpur3UCijeAERNU4Q7SnUlfREJ4pHKG4Crs8IxDJi5Itf7lUWOj021sTIl3pfYZouhLaqOxj4DBIbK6mDp7L8eh9IThHpCLg0sXgsf93xTZFEDr8eLO+pUWwhLq992dKlRcqQ3sqfe3rAnLZMppE0fSxyxwNCEKfXezK5ldhpSXiYgzPpYv9DmVM52LNtAcQp8x0BD7iffDJOsgdKPKJ01DV2E+0ZF6VCsdc8KzRdoN99QhloF+mso+Vf78Amjg0Os91CfC7OvnOZkzcSpIe4rls2JBe5z8awjGYgHAVrkjPlYS0ulVBz7uCKT6qYLMu8Oz6na1Hfw6s2XW0Z9gTx87d/eprM5m6dz652Q+j7Ln9zTR8CY1PfAJM++a3U89t8Lx17dgQyc1YSnoHa5nW/a45hLYnU45+fnkrP67Omu6Y3977pxIdjARygpa0bKH5hruszd5ZiEP5QtXDjk22hljWFV0zStgWuetyv2FQDdbxi1hSt4A2Sxz/OC+/bviqKJSOIZm3MHwz/kpIvi8ffNOzFT12lgY4N7rlK7mUUHDpn+5qij+5SOcV/KN9i4XyOClO6TYCoxmY1Zx5nZPpnfm1aQCWFkiDyBEBU7SkwKXi45XqNu7qcm4a6KYL093t4GQpBP6qEMbUKYyyNb12dtzmuvcjTTuZuiWGpVscuPvoNxTzOx8RKr9ijirpFP5dKlr9hMKTtBLQ3nNVeWtkBVzwYTfd8MiW5C1XoCcmYLuXD8hMhO4EgB5VUZFmHOa/q92oVAebRmJS33LwtB5Hk4KyfzdhS3/RLJk836sffgk1eoIpJ4TLkgr8kv8FdaYud+LFVJtyhWIMo02pqDj/s2qXT/GfHDSOM5wY5q14w98cQGDcnH6RsP/51JcxtTAYYnAlL+jg1Hzck7K14aJYxYcj/ZBB9UpZ9+Jfg3JyTCZvEY/GG9QJXLJLCHY6NJkTrKl5lcCqekNHv/N6yR2XDoNo+m9rOULDcuHG8XizfNsrVGJDiMVqgKBISrDPJu+MLGhn0XLDcN8m5qBz/p5NlLM8EH5HC6PS3LjUz30iwwqUwCULlTcbuvSg8CkIxDsci/6WRgnaiXJzctwIWg2586JBVqhdgOEfssD9inUdB2fAA+BVyx+Hi6Gmfml8C0DbYGFQuu3NrB6fzM4zD2IreXH5cCacAM8ZRIGdCcuSyXHknOIEMk/ny72ifMythY87tzADjFGRlvKWJgZiqvkczTl+Z4</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>
</entry>
<entry>
<title>盛夏的果实</title>
<url>/2018/03/19/essay/%E7%9B%9B%E5%A4%8F%E7%9A%84%E6%9E%9C%E5%AE%9E/</url>
<content><![CDATA[]]></content>
</entry>
<entry>
<title>180305</title>
<url>/2018/03/05/dailyDiary/2018/180305/</url>
<content><![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>
<categories>
<category>Plan</category>
</categories>
<tags>
<tag>Plan</tag>
</tags>
</entry>
<entry>
<title>180304</title>
<url>/2018/03/04/dailyDiary/2018/180304/</url>
<content><![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">U2FsdGVkX19ui1gbPmdKRo4k9h7uI16QqA9lHEAFodjdv6qsVBY0vI2xoaPNrEqRnFRJKz4rQYtoyPIESouqw3qN4NJzLlY8A3UzFJIkp/YDeQBBVW2nUuEVwW0aU6gJGugEJILKWMnXLbGknrk71Ls/rTkVpAkmRSy4h40qW8PFCT9TCe/fTV5L4kpXVbl7ft0kj2M5rqRRiRoFLDVf0WcHjdvLNDhSiyeQpbcHMaCfhszkbH6SbFeNaGs0AZOBNloMLh+ClVznDZKzzBVCT+g9s26Gv7Ajj7JtME+GoMLhSHEUiQLJe8qVovLo+pi9knvyYJMT8iihGURDpMG1n3WuIL2qpFvIfDg6H1al2u92T0/QcZivwJkENRPr5GRTxPbkl8K+xANaKPiuySF017kgHCLaV9SKFVmN71FwwHbEbdTZkcw+kxcLxZzjXUkKrcSlxqZ6lwB//7xe3xIW57yhVj34BBFjelMdBwowKUy09cY9+XEg2dmEYmQTa9qienWZf+okdfeQXqS9lfPVmruo0Inlcrzr6f6S/QardaAzAQlPZ7SuvRUF+53fqLPMqNMXBrA0AJ0WwFXgPnUk+Zl9/Sy4nN39XkdiQa8laQXvx4wRiZoNmOkezAl38KS7Vpr2TCeAUCPQ4nFy0phVW1pojV1Xp1UimDOWyMGrWOhQyhiTHn277JmCc5XuRwsTYWd4oehxdcLAyPEH3swSyE8Pqr7GiFM0IkjHViQQ7mDNo/sfxotyJbDMS4diWdBtZdF1XNhKMAqt3uPd9Dlp1S0Ywy3gqWGaOfAdbzdwX9eagKTN5X88FZErIRMeD/ZSb4uRZW4KnuJV6vhGqm4+dIjTyUNZEJSgm4WX5GEBxSOybmH2eSeG5iIbcghd3z3dA7d/M5HHAKKePsyWNdPnqF81InZxLBKTlFnup4gr8ORdQAClGguTCOkFWf+SQ3+Xg7X3bKLzwVCV6ZGcolkFxCnr79GuIaZ2b+5Jjyuq2MzT1RTbZNwVL/JFPa1zw5c7Op3+iXiDe6sXkwxkTeNrmQDlS4VyQ3Kn4ETHA7oeRWvOb7UvPxYOxbC88ptSomZ4KvNrzSCWX9b9vuKiGpB8XqjUHDJbslBv9lC94Bwladp1jVg1rxCZGZfkwjlGOWSMiWTteObnorRakwkSGsPamM5aztWlVyy2BIEg9SmQwsa+f67sjStne+t2rpDlLeTu5DzbpYHMxOq2ih2nmP+OYnoznOzr1SOIfVpnlQgCrmqywBhTdGTFdkSRUC9rR7FaGF2zMve4MMbrzrCQfm2KMK8aNb5OqzJjNrHJS9VrStCUcbaZGJDJVynJbCkUadi2feyBdegajFIw/KAPnoCJvBlGbqmg8YWF5eUNCiU575V3AGXIKtxwl+k8Dw0YkVd5TcMYGJ/Yl1PioSc0FSaLdJ3NM3AoP+rtXeW9qj/anHyTie6axEB/nl+w3IOybNTRIYJl1KIZeGehFB+gWvfjVUCdfxcoyzSzmss9bu4FHVE+tiaD3PLPLi9aW+td3BpO1COJRB+VoiSLI4c8U0oxr20in0h+xLMVacaxoVKotS65FfuHWbyvNPmipWfy+K0M0GxOAMMTK50mIyMMh9nR5JOabxYi2yrsqP7+CIoup14lSvFPvmLcnBwpMz0BNpbxim7l0NPHEaL7sQyr9TbsYjvUsIzCrXd6WZpci4HopYw=</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>
<categories>
<category>Plan</category>
</categories>
<tags>
<tag>Plan</tag>
</tags>
</entry>
<entry>
<title>一点碎碎念</title>
<url>/2018/03/04/dailyDiary/2018/GOODBYE/</url>
<content><![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>
</entry>
<entry>
<title>180222</title>
<url>/2018/02/22/dailyDiary/2018/180222/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>happy 2018</title>
<url>/2018/02/22/essay/happy-2018/</url>
<content><![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/O7o24oIeNUI/gfXHPwx3EuS+kDGbWut9db72x+HEJ4d5A7eQqo6CN5Jd7Vy6EZXfLisPT36w6ge7nD4MeI2rGrX2IVbK2aV/1yqYm9C48sMUeEwdp4u6f9pYi1UkiJX+IR1ICW7bIydkpMGqv7wxuI6AWGAEokwdo8HLzsvD0CC32JZ2JMKW0Fsz5+NvorVC6HVGn1yI3InBIIF7qAC8AF75QK9K4yecnapLxthO68F6tcuc1cwdKn7fu/tZkEGHdmIEufwHjlQ/eOl6vgUdRwcKVVjfrRHFhOm7kBltU7gJldAeCxvL52nRefDJXMc1tbnMpu7Ip/Xwjo8g1YulXVrkQe+Ygy0j3ETFApE+glhrQjV7gmuUGKisnrEXp/v9TPqHSPsn75L2o15y/ZBGtYjLNgw2JE9DMLD0KiFn6wegjXiakOju/rXXokKPwt2FxkgsGPstCYREbpHiRcaJd2cQf3wT6I3B2V3egNUaaiZEOePjBN1Nrrscmwz0IRGlVlyHnzTHlpzfBzhACmqezLQCR5R/d1tc=</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>
</entry>
<entry>
<title>react-virtualized库使用</title>
<url>/2018/01/29/front-end/React/react-virtualized/</url>
<content><![CDATA[<p>主要用于树的大数据展示。<br><a id="more"></a><br>参考库：<br><a href="https://github.com/diogofcunha/react-virtualized-tree" target="_blank" rel="noopener">diogofcunha/react-virtualized-tree</a><br>这个库将树的数据平铺后通过indent来生成树结构(其实还是<li>，只是视觉上不同)<br>TreeContainer将props传来的树形结构datasource使用getFlattenedTree转成list供Tree渲染，注意:<br><strong>当node未expanded的时候不返回node的children的list数据</strong></li></p>
<p><a href="TreeContainer"></a><br><a href="https://fritz-c.github.io/react-sortable-tree/" target="_blank" rel="noopener">React Sortable Tree</a><br>原理与上同<br><a href="https://github.com/Lodin/react-vtree" target="_blank" rel="noopener">react-vtree</a></p>
<p><a href="https://github.com/bvaughn/react-virtualized/issues/980" target="_blank" rel="noopener">Nested Autosizer / List</a>表明react-virtualized不能直接用于嵌套结构之中，必须把内部结构打平铺才能使用。antd的rc-tree在被使用时已经是深层嵌套的结构了，这时候再把TreeNode components打平铺太困难了…决定还是自己另起一棵树吧</p>
]]></content>
</entry>
<entry>
<title>正则记录</title>
<url>/2017/12/21/front-end/basic/%E6%AD%A3%E5%88%99%E8%AE%B0%E5%BD%95/</url>
<content><![CDATA[<p>一些常用正则整理<br><a id="more"></a></p>
<h2 id="中文"><a href="#中文" class="headerlink" title="中文"></a>中文</h2><p>[\u4e00-\u9fa5]+</p>
<p>#<br>双引号内中文</p>
<p>查找:</p>
<ol>
<li>“.*?”,匹配双引号</li>
<li>“.<em>?[\u4e00-\u9fa5]+.</em>?”是否存在中文(必须在1的基础上筛选，否则会匹配到多句子)</li>
<li>替换: </li>
<li>Intl.get(‘system.service.offlineAuth’)</li>
</ol>
<h2 id="8-3系统记录"><a href="#8-3系统记录" class="headerlink" title="8.3系统记录"></a>8.3系统记录</h2><h3 id="定义与使用"><a href="#定义与使用" class="headerlink" title="定义与使用"></a>定义与使用</h3><p>定义: “PRODUCT_LICENSE_NOTICE” => ‘提示：如果您现在无法连接网络，请保存授权申请码：<br>，便于日后登录获取激活码。’<br>使用: $this->view->notice = str_replace(““, $this->view->serial, $this->translate_system->_(‘PRODUCT_LICENSE_NOTICE’));</p>
<p>定义: “SYSTEM_ADMIN_LOG” => “登录名:{username},类型描述:{usertype},姓名:{name},邮件:{email},手机:{mobile},ukey状态:{ukey}”,<br>使用: $dscr = $option . ‘ ‘ .$usertype . ‘ ‘ . str_replace(array(“{username}”, “{usertype}”, “{name}”, “{email}”, “{mobile}”, “{ukey}”), array($paramArray[‘username’], $paramArray[‘usertype’], $paramArray[‘name’], $paramArray[‘email’], $paramArray[‘mobile’], $uksta), $this->t->_(‘SYSTEM_ADMIN_LOG’));</p>
<h3 id="转化使用"><a href="#转化使用" class="headerlink" title="转化使用"></a>转化使用</h3><ol>
<li>array变对象<br>“(.<em>?_.</em>?)”\s=>\s”(.*?)”<br>$1: ‘$2’</li>
<li>连字变驼峰</li>
</ol>
]]></content>
</entry>
<entry>
<title>work1212</title>
<url>/2017/12/12/work/work1212/</url>
<content><![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">U2FsdGVkX19qXGO3zeOj/CdLkbUxsjJbMeR5WOBuFXJI5sa65Zwfgj0otPnPdhxvrpCg4nvWVms27VBNoWEMOpiVVi/AL9wusjFPidiahyP/JTgJBljt0S5ppdeazyMk7FhjUGgdHwVIlq0HjKZH6WjIHufVPhG5k/vaqOML/brdZh8VVE6xf9I0O8iC4QBUpFcpBw2rg3CTFzn9YqwhEOlQ9awr+vx4hBqo3VgGyNjKvYVyecPHeGGlW/meYIBfHCxaNCC6O+WEx4DVUigI/KymBGUsQ1hf/2Cm9oLZ5rIIcANZUCMTPGMBARZMvcy0/qgdmylIj4IJfEcaEezobxk0WTsK33jKRvleaZ97OcIXz5LJiqWo0FJ9LkMmPYhJZnwRb6u2s4JIeOE2z1zhIV5/y7HI+8CMBFF7dCMrm0pUNhD3dMnVo7SSzKLXKn3/qO8cBdzFZXVzLF961k4HuPbldunFrCcB8pjPUwHgmrBlnl0zzW6X5Jw3VdzQY8mJ4cx6y89p4lvA6WOmICL9Bj5hJaRoLwCy/zVKe9uzUSKewqU6jMu+cDgQvbdniFGXemX6U2IUzdzO/uUg/cQ9DlUd3EK+j8Z1OR+4vDg6+t1k97U5b0wP1dCTW9lq1V9/WTAkSeOB1T7nKNUIduVQwbaEeecGNYcgi9Glcsi6lp8bhhxTKWE7u/bF9E529R1vPvdIlLx6Mg+ToDgs5N/Tj8PzicXUtvBsDCtIpYFRz4VyB0Dw4nB/J7TYRKZi7gBepqWoWnOHTt5fibrDTVrVvJxn+0m6skLu90vxW5GhDL/KMseWOjxQl4am29GxKLgXZQUvBiKcf4RK5vBwAZDqslyw2vyKxCyBA8PCeVBqIQ/y3sTQQF3317Alv24w1HkQdH5YuFvhuoFvksY9+e7ooNs5s8Wl7o4bLBQTb8e0ozkbahNlFvy6n5jEgpr14TwCE5FCHoJBGmK4TyfRYFdM3THkiK+CHhA9Hs7nr8eYux+V9Q+DkbXKwhxXsJoQjEe9YekjjhEeJARw0EzBCOrCClh8CvAxsY268KQfdIIihtYMk1iZ3w4nbvvh1ORMpA/6KBkC8nvNPZ2fTcP8A/KEnfauqQbEBa7zczo3mXJXJs6vf8rJxLgS0oilBO+AL3F/JvTx4gLgQGxGxP/HwhPh/1M4wFTm73Gk5Tm6GSbE2onTDgiPgItAJEPetR1hwf8T0hT6WydNCLjU4l6UiFruimfucvXA7K/d1WSkpSUQLXN5foPl1kbng5jmc1GQKF4V+my4YJItBVj/IG9rTUhBLxsh5KHXBseJVATdV/+xv47cEFcu0ISMd8xg5mMU1Q5LnuMRtKHI8y3apDtL2dcyxPuFZ791j1wToJVo1b8ecm6FG4VTdmURaVrdUhJJAl3DsNvLW5BGBJeBNmLaVsBc6g/X12zHGDYthHiq9G8eQmq811eSGYHhrM9FpGk7v9+dPqEkWMJwi3FA5HmlbNc41ZJwtevXbJy82OLie7ufGU3rUgGsPfvHriqEB4D1rkzo8H2gbqSbjLbKkByoV9K7LXvu08zkoa5rT3et5FIVm1fTDc8C3NlWeYZFuxgxiD4Kl3L7L7J43nOr3ojKCAW0/h1BF0JFR9+a4H9tpRxg6nVKgtmgFnCoTKpQ2d87zOel2miIzvRAZY+3y3NWaX6J1TICTiQf+0Wy27ZDfz+FtXSUW4glAfOFaq2gtSlSoWr4OtWiuiaWZx3w+p2IagB382XvuIGmEJevI1hrOTj/KururZmpSupRX5o5omm/KSgVQFPjy162FkOulViKlQgrHF6AinAEdqhcQmC0pcTvJoFIcmzHZm1SYP5HIJACBRjsCmbXQ4nVK6aInJcQS3lTT6i8bmQnYOPnrQorF7pSMMjwrD+uqn9eXoseCoWOVfvCzZyQtRXO2oHXUwu99wnYxYH1IP+xqbIZ+8kUVWblwzhkBcWFlKaCS6LgB1lnMMBm5X58c2D3tkIQsOHCTyXkJovgxHJ/klVREsfMgavV3lzsOVyKlQfhJYODZIKcLbVwGHmtkk9ay2yC1I6uDSZSA6j4C0R6F71S8BqtrzrtB40E5HpV6RIfH4UPVVQu2Ry0Ib7PZbXA2mR2yNtAYkqiPdGSx1O3okWffpdMyFx53hz7xAAeue6KdaCKTl9djH1TJvBtBQfVp4UKxzJJbg7ZIfqm5Lbo/KK6ulzKXCcURthRmsVOvuc22NSjTq9IQwWGsSYjD5vETeTw/623qJakOYApFt54rAVBl+AIksX5d60myJeOuWY8v4jXxnD/y2jm10FbhhoO+tjYJVEiW1sAA7xcfwRr3gIJBZyxSU8a6oCtE2LMCyegmPe+qFGfUjkD+oum6TTlgA7GVlyW/PB5tuN1ltkxwad6yryH8CxGLqstlebgCUdjNekOsmL5qKi+KZKX/jKl0+OmErZyaWzgFN5nF88vrxyDmABOpSJE+C78KRnbim29mkLW+sOBIyQk3ojjapSb2tiDl5lRdcz9f1eIz7YfcVutfD1G01EX3FiLycwWpZGwDNHZkA2d3i8gWXTDGzbYbNwAPqxNdB51L1iFQE7ss6QKLHwG4nr1pouOG/3H+wmk8/DC7IPSri83pa7yfJPSG2jdNy1aPlF8CBNpOn9E19nQpwek0U3wA1rbRva7QXnowYwz3B7hZli82OO/fcsHKFWWrHKjo0A8zHMgBsojwHBpWRfsJ3zS6i/rK9v0bpKDFSm6sN1uLzF+TAKBopNnNv5aWS+WkT1n50yrAhqpxT03wL3hC0xfXvMjmYCoV8LC2e6Sx8L2w4i6aRqv0HMC31a/nqAGPc82mWGDjw6DhvYUC/EhL1cI4vpdv/TRFfc+6zB9JgfQj903RObUJxahock3gBO8GbmRiS/Suj+nOh/kf8IF8PWBdrZb2CvEmdlrYaPWrX924kbp6iT4viSt/5m6/Riv9XKhEwlp8bE+/MNy7YhdH36jT02QNOfLJgc03zmzorRZb7TykqCL8Gc+h8K+1dV9SZDPynTg4+uYiHb+h8RTL3mKR0ygMj8CNJPxDrcLvmKvngqYtzKSuyHft5gR22z5Ur+XKDykiEYaNzv0O/0ntDb7h8DQ6+A/to+L0IONdk1LV6SHaop1o3D7ZGgpbKSWw0yy0agDBAFj/uHMXGfI5+9b//41SFwdL2Ss2wF8pHCjj8wOIs8ulK2SMNmUa0c4QV5w2hj1GDvpEvGeWjKtApQ6B8xjtpPEQQezoZ6qN8F9n1UFuKW2X/p6rCQhRaAwYf91+nnlZwuU5zKM5w/EryAn80gAwocn/VL53lM2Xdf5Ir4aR/mLLcdoFhAlYzs8gIYlopRNzjPItFl7QtfvDjj7b4gUjld9VF9QIChM829g4xdwR2P/v0P9ZSkAOFf9nWW+eoSJpdhqJqoS83dGL0oXLNnaWGFt/0gwpcj0AwVT07zcy21FXvmZ8+7t+xdNf0cYcxBq8QTHlYjPeR1nxQ5xa+E9Np2iEObvmbEUGcOIpEkC86WXCOmxbDtZ/TLhgE8cewGb7dFGVY3xM689TsECaGR3iOIQvTYz0qqcp0H5Pi6RDW8a96m6VBMfPo/PCnYXng==</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>
</entry>
<entry>
<title>171211</title>
<url>/2017/12/11/dailyDiary/2017/171211/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>171206</title>
<url>/2017/12/06/dailyDiary/2017/171206/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>171124</title>
<url>/2017/11/24/dailyDiary/2017/171124/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>Server push技术</title>
<url>/2017/11/17/Tec/accumulation/im/</url>
<content><![CDATA[<ol>
<li>客户端轮询，最为暴力的方案</li>
<li>COMET技术，一般实现为保持长连接+断开重连</li>
<li>Flash插件技术，可以基于Flash实现socket连接，如果是Flex还可以使用BlazeDS的messaging</li>
<li>HTML5/WebSocket，其它浏览器还好，但是IE不支持！<a id="more"></a>
<h2 id="websockt"><a href="#websockt" class="headerlink" title="websockt"></a>websockt</h2>socket.io与之关系?<br>WebSocket是为了HTML5应用方便与服务器双向通讯而设计的协议，HTTP握手然后转TCP协议，用于取代之前的Server Push、Comet、长轮询等老旧实现。</li>
</ol>
<h2 id="MQTT（推送）"><a href="#MQTT（推送）" class="headerlink" title="MQTT（推送）"></a>MQTT（推送）</h2><p>轻量级<br>适合做简单推送<br>MQTT是为了物联网场景设计的基于TCP的Pub/Sub协议，有许多为物联网优化的特性，比如适应不同网络的QoS、层级主题、遗言等等。<br>两者之所有有交集，是因为一个应用场景：如何通过HTML5应用来作为MQTT的客户端，以便接受设备消息或者向设备发送信息，那么MQTT over WebSocket自然成了最合理的途径了。</p>
<h2 id="XMPP"><a href="#XMPP" class="headerlink" title="XMPP"></a>XMPP</h2><p>IM聊天</p>
<h2 id="GCM"><a href="#GCM" class="headerlink" title="GCM"></a>GCM</h2><h2 id="野狗实时云"><a href="#野狗实时云" class="headerlink" title="野狗实时云"></a>野狗实时云</h2><p>许多免费服务，可以一试</p>
]]></content>
</entry>
<entry>
<title>css自适应</title>
<url>/2017/11/16/front-end/basic/cssAndHtml/cssauto/</url>
<content><![CDATA[<p>css自适应</p>
<a id="more"></a>
<h2 id="自适应相关屏幕尺寸"><a href="#自适应相关屏幕尺寸" class="headerlink" title="自适应相关屏幕尺寸"></a>自适应相关屏幕尺寸</h2><figure class="highlight less"><table><tr><td class="code"><pre><span class="line"><span class="comment">// Media queries breakpoints</span></span><br><span class="line"><span class="comment">// Extra small screen / phone</span></span><br><span class="line"><span class="variable">@screen-xs :</span> <span class="number">480px</span>;</span><br><span class="line"><span class="variable">@screen-xs-min :</span> <span class="variable">@screen-xs</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// Small screen / tablet</span></span><br><span class="line"><span class="variable">@screen-sm :</span> <span class="number">768px</span>;</span><br><span class="line"><span class="variable">@screen-sm-min :</span> <span class="variable">@screen-sm</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// Medium screen / desktop</span></span><br><span class="line"><span class="variable">@screen-md :</span> <span class="number">992px</span>;</span><br><span class="line"><span class="variable">@screen-md-min :</span> <span class="variable">@screen-md</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// Large screen / wide desktop</span></span><br><span class="line"><span class="variable">@screen-lg :</span> <span class="number">1200px</span>;</span><br><span class="line"><span class="variable">@screen-lg-min :</span> <span class="variable">@screen-lg</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// Extra Large screen / full hd</span></span><br><span class="line"><span class="variable">@screen-xl :</span> <span class="number">1600px</span>;</span><br><span class="line"><span class="variable">@screen-xl-min :</span> <span class="variable">@screen-xl</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// provide a maximum</span></span><br><span class="line"><span class="variable">@screen-xs-max :</span> (<span class="variable">@screen-sm-min</span> - <span class="number">1px</span>);</span><br><span class="line"><span class="variable">@screen-sm-max :</span> (<span class="variable">@screen-md-min</span> - <span class="number">1px</span>);</span><br><span class="line"><span class="variable">@screen-md-max :</span> (<span class="variable">@screen-lg-min</span> - <span class="number">1px</span>);</span><br><span class="line"><span class="variable">@screen-lg-max :</span> (<span class="variable">@screen-xl-min</span> - <span class="number">1px</span>);</span><br></pre></td></tr></table></figure>
<h2 id="使用示例"><a href="#使用示例" class="headerlink" title="使用示例"></a>使用示例</h2><figure class="highlight less"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">@media</span> screen and (<span class="attribute">max-width</span>: <span class="variable">@screen-xl</span>) and (<span class="attribute">min-width</span>: <span class="variable">@screen-lg</span>) {</span><br><span class="line"> <span class="selector-class">.activeCard</span> {</span><br><span class="line"> <span class="attribute">margin-bottom</span>: <span class="number">24px</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.members</span> {</span><br><span class="line"> <span class="attribute">margin-bottom</span>: <span class="number">0</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.pageHeaderExtra</span> {</span><br><span class="line"> <span class="attribute">margin-left</span>: -<span class="number">44px</span>;</span><br><span class="line"> <span class="selector-tag">&</span> > <span class="selector-tag">div</span> {</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">16px</span>;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> screen and (<span class="attribute">max-width</span>: <span class="variable">@screen-lg</span>) {</span><br><span class="line"> <span class="selector-class">.activeCard</span> {</span><br><span class="line"> <span class="attribute">margin-bottom</span>: <span class="number">24px</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.members</span> {</span><br><span class="line"> <span class="attribute">margin-bottom</span>: <span class="number">0</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.pageHeaderExtra</span> {</span><br><span class="line"> <span class="attribute">float</span>: none;</span><br><span class="line"> <span class="attribute">margin-right</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="selector-tag">&</span> > <span class="selector-tag">div</span> {</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">16px</span>;</span><br><span class="line"> <span class="attribute">text-align</span>: left;</span><br><span class="line"> <span class="selector-tag">&</span><span class="selector-pseudo">:after</span> {</span><br><span class="line"> <span class="attribute">display</span>: none;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> screen and (<span class="attribute">max-width</span>: <span class="variable">@screen-md</span>) {</span><br><span class="line"> <span class="selector-class">.pageHeaderExtra</span> {</span><br><span class="line"> <span class="attribute">margin-left</span>: -<span class="number">16px</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.projectList</span> {</span><br><span class="line"> <span class="selector-class">.projectGrid</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">50%</span>;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> screen and (<span class="attribute">max-width</span>: <span class="variable">@screen-sm</span>) {</span><br><span class="line"> <span class="selector-class">.pageHeaderContent</span> {</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> <span class="selector-class">.content</span> {</span><br><span class="line"> <span class="attribute">margin-left</span>: <span class="number">0</span>;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.pageHeaderExtra</span> {</span><br><span class="line"> <span class="selector-tag">&</span> > <span class="selector-tag">div</span> {</span><br><span class="line"> <span class="attribute">float</span>: none;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> screen and (<span class="attribute">max-width</span>: <span class="variable">@screen-xs</span>) {</span><br><span class="line"> <span class="selector-class">.projectList</span> {</span><br><span class="line"> <span class="selector-class">.projectGrid</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>]]></content>
</entry>
<entry>
<title>171116</title>
<url>/2017/11/16/dailyDiary/2017/171116/</url>
<content><![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+6Na9+P/AGj3HLZzsvIEeMwL0cehENcBrX3Et25jnDql09Bua6wdSwdEaqZuSk3viqjRfss+p8q9NFPUsaSK6vZ5hPLmxSsGHYPy+3FRjhcjzGHH+kx/Wlbd84+CivCWmW+P9v1WbiqYqw1K/2fLBg7sw8MH2OS7mYK5e2CzQvx1zuiuV+6eyzUhoGFcUK+oVy5wBMleRq1TXLuHPdD92Z3CjBmkq08yHKV6m5uyh022ZO1p+fl9gVPBVvbyXgwUW5eDdMv3NtjdyCO82EvwmRYgLKuWaIOQGbyQJahSU3RUJu8j02d0j62LEyHHjAueaJd4GIOqSdvi2lV/TQVvUvkXCrTYh3H1v4VLjRHK5GUcw51CobpBHsKrXaO+wxEaCnxu0xbIRei91kRAh5fYS91aDP8D4JQTL4iIbGYVlIKAlTGTzz60MNcHsG7LZcZIPujeph7QzLD+YimsnuuUEKdHwItthVAiH2moNUTJKM3Z0co9U7/Unesum6QkuN2SPGup3YOcjF5InUX3hOfd1aDJr8nhkOa1ac3hpJ9Z9Cvkn9N4E9DD7t4iVnVffHbOjvxvTRFkOVCOSGU/S0kBcC49AQZEf94U+udLM5YJnZr+4q5PZKcIuj+ndqwH1GkBvCJ68bjheb+DxoelIq7k10+q1vafqeSoSLCbUs4xWLimAZypqyGjZNMQ2Qrv237G7m05rZpWqEktsdt6YQ45Q/gsIvCX+xuh8sDwWZ8j0li+w0ts+UewuroDY1Lfn1tTDH8mktXRMmaaTmftCwiDC770Hok2khTmUgEObOKHujghVL0bJoVEWlNc8+ubWBQAmMjg42P1VA8no91k7CKwoTJte/EUITqD0iFTweUAWvzBjznQhBxWWl37GpX20AFaGTXVEapkn61BBnGnWK4H2xjedP7Ml8r7XH+eGziZIUpKdny1ZoSDX38eUfhxxKgNc3ulMAyLkwatlKF1MsJIkn+qXvJ8xAXtHlYugxQEM05wMWY+AEUDDMekX8PWNlhpcTZj7tirrblvze20gXFoqv0hVi01rBPTF7a2tVgyxFbwXJRlf56r2/o0OlMS0PwXH6TB8eWPElZgGrBmrgQCXV/oK5mlCt+v3hxZRD1YgW46hgVS0rb8BRq5gRtpRNcaf2y0k3fIhCT/C3xQyddTz9qZ3iVWrGHCURFzUtE9QTAVFMutz+KrpcMy2t5Boa4E21wZvpTIA0katzcquIdXWeGeCU5x9DiOd2lX7st2AevxCL8D8xIYE1Z/ZFxnRKWgzYCKBHp/HjKJBEdY82pOVUHx6/8yhC/y4xivukTkdKd0eecXz3qP0YQRUI+qVukiQasseSy4Xl7s5fTXUBYtUk3AdmE+AfYwjqhlM0LTVS/t5ibrqDiM7y1K1XDBsCJ6ONuec+gcb0La4dKW/ZRTgKNarnKj9Kf7VCNKtaTFP7OhQ/qtDg1IJzt99vfGmybDliF7Gm6uoHEAg68MqVBscyYDKUl/wxzVDXlTsQZkIW/JsgC2reY1Q9ynUdJppmC93ZTe0epIhYAy4Ny2jcgW2debhnaopmIOYL/Jj/1j7LCGOVUEDn+apx2zEHd9rpqKETX9ndeAnn93E0Hy9p+84K/E9096XXht4KxihvsOSSAVfi+YDGvcqSoIVtm+SM3D15L7CpKI/EcUQWtPpNaJUrdMiLmTqDlyKgaZQaMq4e/+gS2Affp4m7qxI8R25zmdcgvsF6F5GXAQDFcJaUk8aoYLzZViAmerQr7lNdG5Gbwu8vBj6nmEsF0Nyb7KqcxRCOTTSiNt2ln5jhgbmo5L5KJtf64RAhVLMB7ziIUFYEmObplIO/QZlRhaQU8/h7/Uuu7lxSDsCX1w5fpjqDpGtIeh31j3H4GlUfBf9ZKIxZyT7S2Uj/vDm8KPJISm2fCi1Dq6vM8rQtdmnlFbuyR4cKLiTmW4mnFiBZY2g/H6ligq3s006wVxy/NsfGc0/IQk/4JpxcRKGRVCGJFBf1KqIyw+FSXsO9NZZGmjWubgnbHoxWQvzUOfE7qGz6wLNy53W4ZkZ/d2Fawr1JUnQ7oMffJ5XVj1hJmzsTEAkAMZEic2aewNz+9RUCCsuB7mIZqN+FBGFz1k9WbxBcPO8M5N/68Q9Z0BVIBknLp14wPjrD/saFm7Z1TPlg</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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>Ant Pro源码笔记</title>
<url>/2017/11/10/front-end/React/antd/antpro/</url>
<content><![CDATA[<p>学习一些组件化设计思想<br><a id="more"></a></p>
<h1 id="样式使用"><a href="#样式使用" class="headerlink" title="样式使用"></a>样式使用</h1><ol>
<li>antd组件多用style行内样式</li>
<li>html标签多用less</li>
</ol>
<h1 id="方法定义"><a href="#方法定义" class="headerlink" title="方法定义"></a>方法定义</h1><ol>
<li>不用加bind<br>onChange={e => this.handleFieldChange(e, ‘name’, record.key)}</li>
<li></li>
</ol>
]]></content>
</entry>
<entry>
<title>171110</title>
<url>/2017/11/10/dailyDiary/2017/171110/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>浅谈Ract组件化</title>
<url>/2017/11/09/front-end/React/Componentization/</url>
<content><![CDATA[<p>组件开发和组件复用<br><a id="more"></a><br>定个目录明天写吧</p>
<ul>
<li>什么时候做通用组件，什么时候用高阶组件</li>
<li>组件复用到什么粒度<br>通用组件or高阶组件必然存在耦合，功能or样式的改动如何适配?<br>过于抽象得写很多无用代码<br>过细逻辑上耦合过重</li>
<li>国际化方案</li>
<li>组件样式在什么地方定义</li>
<li>业务中避免使用过多div</li>
<li>组件提供哪些props</li>
<li>组件划分到什么粒度</li>
<li>组件命名、组件文件结构?</li>
<li>工时估计，登登登登</li>
</ul>
<p>想想自己也没入错行~~~~</p>
<p>待学:<br>http协议、chrome调试()、后台<br>说好的5px，多1px、少1px都不是5px</p>
]]></content>
</entry>
<entry>
<title>1109</title>
<url>/2017/11/09/dailyDiary/2017/171109/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>171102</title>
<url>/2017/11/02/dailyDiary/2017/171102/</url>
<content><![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+UYU2qOF7G74OrInYi0VUZicB6g1bPaHeAKj1wyDkceak5pOMpEHo/sCgWmdNJJwtZV4CfOWfWr7LVwVNDiEA4hVdcws2bY8b75PWUeUuDR9w6e3b/ZNZohKzY2sMEkYGSX4VKvyrcq55eu9CuKr5DSLkPcMncZ4HZpljv8WYpmVrQfgxoij3505AW088gn3VRPscwCh1fnME71jdG5aXCpcJb9qYHXvRpg9a0Gw96byM7iyRW4xr0nHce1IOlBqrLlxfVc9OHnrgY1D2HLGiy5oqA6dJ2i1L5rEFnxF4nw/5t6uCJPuyUWKPuAqSo3XTltDUyyAlEgp7AsUrKAVnEf2d7Xp4MU57/EOde0vzIq+4pFNi8W9aR+E7ztUQEI6JrLmzTKvOnBmr7Tm7LidN7u00goZ4ZuBsUjy/dMLnEhgKVWuTyxrvZUeAn5mEw9BrM8rCDuIhXob6mQIwjXIhHrXh4B9k/FKpruH3MWiTDrXVmsNAVHu1bCvetBd4nHwadpsCpYumYGVVXZPQRRzRmynfcQ1iAqQ97sZeg/zHKY3QCfLGsd3KNZh8dx52NwhDbOwdMvKxX2/f5ugVT6emh8KJ4bIsBJ6Ery5Tule1bJASYzR+v9ETAYhkv+2JmaY+KmAO+I9XYnib0YAh5yFEIfyiODmO9mKNuhbq3yevqnTS/pQVhN+ntpPRuZHr54Fw3D3gZDKx3Il+9sp6vZCC3zLG2WGvXh6YQXUKY+XdImOt43utpilb6/IFTcYz8c+M6kAI0uMzdEHpLxLlFpGBV3+6RTycdZ7g5qC566iqETl437LwQdS3CCA+JcmtkgCSI9gqBZuKSr1kxGdDaGOeLIAb5rVGekfA8RxU18iIEKrREf+KVYM66Spz4mOl6Thz5Jw9P1meBTSWHDUCbWfyMptfvwtkbjm7kd+N05YdGddqGQfiAKh+7p8piuSwufbJTb1lFAlmIPXGmC50WGgvuA0aZMCcP9h4mTSfsu8pX2RKZTnuxO13bxytWmIDAhNCX5/Q2DJYAF3PiNjRijwNHpNY1XinDdEzMdfUUA/os9gAoUNlMV5wyOUx5wgxTj/4P7gXglCXCCVsfnbb9MXkr4TpZVoOti6dDdSkIByIYLtVdA+HVw9e9+NCHXwEu1/X/ozf6iDa9vgKtVDH384l6iChm4AOIvA/aOHuLJTJoyCRQ0w5aqO23zv/HDJEzxIx+PE0C4WZy8BjfnFfMkTWWhAL9FDzkIshebUDHi8SpJy8RzBBqlmZ7wAm6gBzr1PrInM4gjwnVkfJ0QPf6bwAJwqBvhdPBZXTUlpXzS3w4cSxoxHBQKqPesl29pdpqznSk3QvfGYhjaThwEPXUOrhETyaFkS+wqKs48t4bixyNTwB+7sMN+SWSs61LO0D38m/hiGsru+B+WJyhTJFg3sNzJOFqcEq8YqbYPv10E2k+/+Z2WThNhe8s/Xxm2s9YqJrV+9zFd03B2X6GE5UoddT4/xMvBMxjPpQxIDQKFdgxUPXbYsgfOVWNXINUY55I1lmCYF4eKtW/XYI4C4hugWzmK6FhD7WvtGU2XF6ydURFBCJHGiVfjS1z2MWMCOIrrqervJOchFHQX46wXDRbVDhKjNb5wUlHi2EJ6zhsAZtCdjTYx9ln02AXYb5FIIxstrazfH2GXedr/uVMCfTSaE7QFIDlBBowEoY5l1S3YcRBZZnFNDegvJuttt/TwppgQRywi4GdFIK392JoXtkdiEsZIkZYSOnq7/du7C8E/ZewVnwH5hzKMKLIptHcQCZjndb7SbKjirH1Fiw7piSiznLrNYuAzqfMmJc+7E61Oq8apl6ss8o61igYX78f+ZtCB1rKlm8B62DgQDgchviQ7a4DZd65yqEr6Qr0nYvwiSMvmkZ+5IGO6lgNFrcLcbQv61EigpggrB/4BUEy3BzF8sx6YdddDTGSztY=</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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>171101</title>
<url>/2017/11/01/dailyDiary/2017/171101/</url>
<content><![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+2DhmgRZ5fwuUYtqEh1aK9YRD37VL0tVM34RvQ9TVX8Wq/t2+c8e+ZoPLuJwpiZsxCz5L/6FPqEMiB7TEeqLbRMMcJOnqZhe+7Gm0gX8VuMHMm8hQtimDhwOc0MFirVSCPZLzBHEpoV56cE9mu1K0uXOAQ5dqAbmFBJkbL8dl7If1PgHku4pZiADsU+b+MshZcSBisd+6w/DyCQjYxcsFxwuI8mwCjujamdvfBFpbRwBrC3hjZecU+2gIki1KQCGNG5vc0F5mWZrt2T5OcjYi5ygqG+i82w3BKf9ME848SiMbW2o7pNCqBquSqdylrcUpHvOPhjHZpYnKfTud1xHJ3Zl5yWWmazTg5c0xfuvTVDkbhWRdl3nbqoHPJqZj3N3p6ZTBZFthbJc2FvIDr2oNQSKOCGNCuDIFlMpq8nOe7FZfwTCNdpHAMCeggMy9PeN3jthg5fe0dpet4HG/DJfqRnx8zbamchA60EFh2J3NjOIEJEpSIfVWBRYcZOhJxuMUqj6tkba66PtuTIXjnZYkw7OI6gkX3puT5ta+eAFASxZ3TxvJt1LASFMuONMY+S/0rhu0s+5ezbjtgOPNjUwsvzvTthCEJB+bJ7RGkmocLM5M219M+aUV3INx5KBFP+CJvYYx7ADYZVlX9gRg2B3N4zQHIy/ygLCyuJkgHpiboGgFREKHydDJPpOUVe1FtKOAhM2ttTQP5FQjzSmiSY/BoYS1A6LFIbBwb2F/l8PzB92u0lfm7DCD/3nqWpeet7t9JSaHxDf/3CVosoc6INzzjcI/w8VUDKkYz+DXQGLNC333Id1FLPj/orydupvOkFLUHJ4AGOkBZwBcSIJiX06V00upqWGwqEqLaCjoIdcCQm8HpoU7GTHy9SwY0seHHUueo3c9c5zPPzlmd3Otyyx6FcaF74JOqwvGm8jaPTcKBt1azNwJsIduMXUP4AehgODE1m0H9MAGRw/ry7tAHXofNGonsi0u1m23ty98QN6feh2+5XERscsuVQGUM90xr0a5fyZH2NkxFP5Xy/2mH4JuPy9FJmZAZusoffd8uHZA5BBHI/Yq/jUMOb/gwQGWqOrXO7tRLDGap0O/vwufDmmaPJus3eUoyvlsAAuj3tjZMoY5dmoeOl+4+J13KnWha6HdiDIrZeCh1Ft0ouR7R9lAMF1f3srOCxnKlHWY09sYS++ZyQfUd3hd3YVJjMOX4kSl3V9mYtVues+8VqH83jTjlVNzBI0J2hd4kYNAk4pi+kTUlWVVkddCyfRmyosafvf/+OLsKMyDwApM0nUBoujgno5s43e0nt5vY5xZgB1EGFOtsLLMs3RVL9JCMLNwKMn4Ku9bghOm2V5gt7/5pK7IyutxfZ6K5UCz3bXYL43i4RjDDvNrmZFtwe2MgVotZD3jCLHpZ9DtFNwz6vmpMNycQIbBi3AMPG3+lih+XZlwZdaoK01xDzOISmCpx21tZIr44tn8GxtTC8L8Nu9Y0kFRP28VCUkM6jyIJOkY0Iscwz+yF29xARcKbBrgguBe7vxXRDX0lZjNjOgHoFRCqm8dtGO7rB2ZcMNUn8ry4HK8z1UOo0ejsg6eI12V5UX+prhyMbp8R5EKgoPzdBrcq2DapGAAnRCWRgBB/XQZ9WX7LLRSf8H2SJGt5V5669UdKil1w9mfJoSA9t8pEbOhJz6rIaHit6X1QBBaMAsoOa7nx676RjsTRv2o225inB4YbMXwStqwR+A0skuU+2Eo1GaWgjL0CmB5xQhqW/t7SFMqwnizT3lYEKATMzkrs//KHsKgyyY0CmziEQHzqdZ0WgH8KBMVrcMxUQ8R1/Eb/9gydPyJB4cyAaWWwgGgXe3M6ZOeT+llJTEq7vDEs+Sb5z1TGXPPumznU2f6MeQUwY56I7pPH1PP/R4pXP2ZCnoTccvf196zK5I2zfbkkokfSs97SVeSL2KsX8zl/de6Alt7xldd1s4j/gzIxFlhZUN3XlGA5bWUbHTcN+i7h2MCA0zWqxfaa37xkOiO8NVKp/AEUADVf59GD9N8BC0lvl3u+qrezo6860UHTMEZJ0u3gO6/sxgv+8A6CF5Ex4SjY2PjMNBz7fIRtoUg/h91h1ElBvSgVZYt9vBZuIhfxWAA+fSey4NjvbhCVrV0l3ikzi1F3nLB6zrigVstCg7kGLd7PLGnLipfuUrqMTc1zIfK7K33lpLChmw+BsQMESL0nOJD5jRydMa2DguD9UrsvsqStzIEj4J1oOyZ7cv+iIL+pmIwR0P/AwOQd9CFyVv4DJKHWiCcdOjIokKswxS1KN+SANq8gx4LrbDrGXmG1bgk1vqsRLnDVgos10mk=</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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>171031</title>
<url>/2017/10/31/dailyDiary/2017/171031/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>171030</title>
<url>/2017/10/30/dailyDiary/2017/171030/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>今天的意识流</title>
<url>/2017/10/29/essay/happynessof1029/</url>
<content><![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>
</entry>
<entry>
<title>数据库常见操作</title>
<url>/2017/10/29/Tec/accumulation/database/</url>
<content><![CDATA[<p>增加(Create)、读取(Retrieve)（重新得到数据）、更新(Update)和删除(Delete)<br><a id="more"></a></p>
]]></content>
</entry>
<entry>
<title>171029</title>
<url>/2017/10/29/dailyDiary/2017/171029/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>171028</title>
<url>/2017/10/28/dailyDiary/2017/171028/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>nodejs实现文件夹遍历输出文件列表(todo)</title>
<url>/2017/10/27/Tec/nodeFile/</url>
<content><![CDATA[<p>源码待解析<br><a id="more"></a></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> fs = <span class="built_in">require</span>(<span class="string">"fs"</span>)</span><br><span class="line"><span class="keyword">const</span> docgen = <span class="built_in">require</span>(<span class="string">'react-docgen'</span>);</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getName</span>(<span class="params">path</span>)</span>{</span><br><span class="line"> <span class="keyword">return</span> path.replace(<span class="regexp">/(.*\/)*([^.]+).*/ig</span>,<span class="string">"$2"</span>)</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 将一个文件夹解析成一个树状结构，只保留组件信息</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">analysisFolder</span> (<span class="params">path</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span>( !fs.existsSync(path)) {</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> error: <span class="string">'此文件夹不存在!!! '</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">const</span> s =fs.statSync(path)</span><br><span class="line"> <span class="keyword">if</span>(!s.isDirectory()){</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> error: <span class="string">'输入不是文件夹!!!'</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">const</span> result = {</span><br><span class="line"> key: path,</span><br><span class="line"> title: getName(path),</span><br><span class="line"> children: [],</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">const</span> files = fs.readdirSync(path)</span><br><span class="line"> files.forEach( <span class="function"><span class="keyword">function</span> (<span class="params">file</span>)</span>{</span><br><span class="line"> <span class="keyword">const</span> filePath = path+<span class="string">'/'</span>+file</span><br><span class="line"> <span class="keyword">const</span> stats = fs.statSync(path+<span class="string">'/'</span>+file)</span><br><span class="line"> <span class="keyword">if</span>(stats.isDirectory()) {</span><br><span class="line"> <span class="keyword">const</span> tmp = analysisFolder(filePath)</span><br><span class="line"> <span class="keyword">if</span>(tmp.children.length >= <span class="number">1</span>)</span><br><span class="line"> result.children.push(tmp)</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">// 判断文件是否为js文件，若是，则进行docgen操作</span></span><br><span class="line"> <span class="keyword">else</span> <span class="keyword">if</span> (stats.isFile()){</span><br><span class="line"> <span class="keyword">var</span> re = <span class="regexp">/^.*?\.(js)x?$/</span></span><br><span class="line"> <span class="keyword">if</span>(file.match(re)) {</span><br><span class="line"> <span class="comment">// console.log( path+'/'+file, 'match' ); </span></span><br><span class="line"> <span class="comment">// 判断是否含有组件</span></span><br><span class="line"> <span class="keyword">try</span> {</span><br><span class="line"> <span class="keyword">let</span> re = docgen.parse(fs.readFileSync(path+<span class="string">'/'</span>+file))</span><br><span class="line"> result.children.push({</span><br><span class="line"> title: file,</span><br><span class="line"> key: path+<span class="string">'/'</span>+file,</span><br><span class="line"> docpath: path+<span class="string">'/'</span>+file,</span><br><span class="line"> })</span><br><span class="line"> } <span class="keyword">catch</span> (error) {</span><br><span class="line"> <span class="comment">// console.log(path+'/'+file+'不是一个组件文件')</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"> <span class="keyword">return</span> result</span><br><span class="line">}</span><br><span class="line"><span class="comment">// file name :test.js</span></span><br><span class="line"><span class="keyword">var</span> express = <span class="built_in">require</span>(<span class="string">'express'</span>);</span><br><span class="line"><span class="keyword">var</span> app = express();</span><br><span class="line"><span class="keyword">var</span> bodyParse = <span class="built_in">require</span>(<span class="string">'body-parser'</span>)</span><br><span class="line"><span class="keyword">var</span> cookieParser = <span class="built_in">require</span>(<span class="string">'cookie-parser'</span>) ;</span><br><span class="line">app.use(cookieParser()) ;</span><br><span class="line">app.use(bodyParse.urlencoded({<span class="attr">extended</span>:<span class="literal">false</span>})) ;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 处理根目录的get请求</span></span><br><span class="line">app.get(<span class="string">'/'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">req,res</span>)</span>{</span><br><span class="line"> <span class="keyword">const</span> path=req.query.path</span><br><span class="line"> res.header(<span class="string">"Access-Control-Allow-Origin"</span>, <span class="string">"*"</span>)</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> path !== <span class="string">'string'</span>)</span><br><span class="line"> {</span><br><span class="line"> res.status(<span class="number">200</span>)</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">const</span> re = analysisFolder(path)</span><br><span class="line"> res.status(<span class="number">200</span>)</span><br><span class="line"> res.json({</span><br><span class="line"> infos: re,</span><br><span class="line"> })</span><br><span class="line">})</span><br><span class="line"><span class="comment">// 处理根目录的get docs请求</span></span><br><span class="line">app.get(<span class="string">'/docs'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">req,res</span>)</span>{</span><br><span class="line"> <span class="keyword">const</span> path=req.query.path</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"获取组件doc"</span>, path)</span><br><span class="line"> res.header(<span class="string">"Access-Control-Allow-Origin"</span>, <span class="string">"*"</span>)</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> path !== <span class="string">'string'</span>){</span><br><span class="line"> res.status(<span class="number">200</span>)</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">let</span> re</span><br><span class="line"> <span class="keyword">try</span> {</span><br><span class="line"> re = docgen.parse(fs.readFileSync(path))</span><br><span class="line"> } <span class="keyword">catch</span> (error) {</span><br><span class="line"> re = {}</span><br><span class="line"> } </span><br><span class="line"> res.status(<span class="number">200</span>)</span><br><span class="line"> res.json({</span><br><span class="line"> docs: re,</span><br><span class="line"> })</span><br><span class="line"> <span class="comment">// res.sendfile('src/public/main.html') ;</span></span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="comment">// 处理/login的post请求</span></span><br><span class="line">app.post(<span class="string">'/login'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">req,res</span>)</span>{</span><br><span class="line"> name=req.body.name ;</span><br><span class="line"> pwd=req.body.pwd ;</span><br><span class="line"> res.status(<span class="number">200</span>).send(name+<span class="string">'--'</span>+pwd) ;</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line"><span class="comment">// 监听3000端口</span></span><br><span class="line"><span class="keyword">var</span> server=app.listen(<span class="number">3000</span>) ;</span><br></pre></td></tr></table></figure>
<h2 id="相关正则"><a href="#相关正则" class="headerlink" title="相关正则"></a>相关正则</h2>]]></content>
</entry>
<entry>
<title>node实现简单后台跨域服务</title>
<url>/2017/10/27/Tec/nodejs/</url>
<content><![CDATA[<p>为返回的header加上Access-Control-Allow-Origin即可<br><a id="more"></a></p>
<h2 id="源码"><a href="#源码" class="headerlink" title="源码"></a>源码</h2><p>res.header(“Access-Control-Allow-Origin”, “*”)<br>项目中的源码<br><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> fs = <span class="built_in">require</span>(<span class="string">"fs"</span>)</span><br><span class="line"><span class="keyword">const</span> docgen = <span class="built_in">require</span>(<span class="string">'react-docgen'</span>);</span><br><span class="line"><span class="comment">// file name :test.js</span></span><br><span class="line"><span class="keyword">var</span> express = <span class="built_in">require</span>(<span class="string">'express'</span>);</span><br><span class="line"><span class="keyword">var</span> app = express();</span><br><span class="line"><span class="keyword">var</span> bodyParse = <span class="built_in">require</span>(<span class="string">'body-parser'</span>)</span><br><span class="line"><span class="keyword">var</span> cookieParser = <span class="built_in">require</span>(<span class="string">'cookie-parser'</span>) ;</span><br><span class="line">app.use(cookieParser()) ;</span><br><span class="line">app.use(bodyParse.urlencoded({<span class="attr">extended</span>:<span class="literal">false</span>})) ;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 处理根目录的get请求</span></span><br><span class="line">app.get(<span class="string">'/'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">req,res</span>)</span>{</span><br><span class="line"> <span class="keyword">const</span> path=req.query.path</span><br><span class="line"> res.header(<span class="string">"Access-Control-Allow-Origin"</span>, <span class="string">"*"</span>)</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> path !== <span class="string">'string'</span>)</span><br><span class="line"> {</span><br><span class="line"> res.status(<span class="number">200</span>)</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">const</span> re = analysisFolder(path)</span><br><span class="line"> res.status(<span class="number">200</span>)</span><br><span class="line"> res.json({</span><br><span class="line"> infos: re,</span><br><span class="line"> })</span><br><span class="line">})</span><br><span class="line"><span class="comment">// 处理根目录的get docs请求</span></span><br><span class="line">app.get(<span class="string">'/docs'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">req,res</span>)</span>{</span><br><span class="line"> <span class="keyword">const</span> path=req.query.path</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"获取组件doc"</span>, path)</span><br><span class="line"> res.header(<span class="string">"Access-Control-Allow-Origin"</span>, <span class="string">"*"</span>)</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> path !== <span class="string">'string'</span>){</span><br><span class="line"> res.status(<span class="number">200</span>)</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">let</span> re</span><br><span class="line"> <span class="keyword">try</span> {</span><br><span class="line"> re = docgen.parse(fs.readFileSync(path))</span><br><span class="line"> } <span class="keyword">catch</span> (error) {</span><br><span class="line"> re = {}</span><br><span class="line"> } </span><br><span class="line"> res.status(<span class="number">200</span>)</span><br><span class="line"> res.json({</span><br><span class="line"> docs: re,</span><br><span class="line"> })</span><br><span class="line"> <span class="comment">// res.sendfile('src/public/main.html') ;</span></span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="comment">// 处理/login的post请求</span></span><br><span class="line">app.post(<span class="string">'/login'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">req,res</span>)</span>{</span><br><span class="line"> name=req.body.name ;</span><br><span class="line"> pwd=req.body.pwd ;</span><br><span class="line"> res.status(<span class="number">200</span>).send(name+<span class="string">'--'</span>+pwd) ;</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line"><span class="comment">// 监听3000端口</span></span><br><span class="line"><span class="keyword">var</span> server=app.listen(<span class="number">3000</span>) ;</span><br></pre></td></tr></table></figure></p>
]]></content>
</entry>
<entry>
<title>171027</title>
<url>/2017/10/27/dailyDiary/2017/171027/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>使用roadhog mock数据基础知识</title>
<url>/2017/10/26/work/mock/</url>
<content><![CDATA[<p>mock<br><a id="more"></a></p>
<h2 id="req的参数"><a href="#req的参数" class="headerlink" title="req的参数"></a>req的参数</h2><p>url代参数时:<br> param<br>post时：<br> body(存储参数的对象，参数数据类型会被保留)<br>get时:<br> query(是个对象，内部的对象参数都会被转化成string)</p>
<h2 id="res返回值"><a href="#res返回值" class="headerlink" title="res返回值"></a>res返回值</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 不带.json的话前端收不到结束信息，then后面无法执行</span></span><br><span class="line">res.status(<span class="number">200</span>).json({</span><br><span class="line"> data: <span class="string">'test'</span>,</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
]]></content>
</entry>
<entry>
<title>171026</title>
<url>/2017/10/26/dailyDiary/2017/171026/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>171025</title>
<url>/2017/10/25/dailyDiary/2017/171025/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>项目开发tips(todo)</title>
<url>/2017/10/24/work/projectTip/</url>
<content><![CDATA[<p>总结开发相关tip<br><a id="more"></a></p>
<h2 id="常用组件"><a href="#常用组件" class="headerlink" title="常用组件"></a>常用组件</h2><ol>
<li><p>questionTip<br>import QuestionTooltip from ‘../../common/Tooltip/Question’</p>
<questiontooltip tip="...">
</questiontooltip></li>
<li></li>
</ol>
<h2 id="时间设置"><a href="#时间设置" class="headerlink" title="时间设置"></a>时间设置</h2><p>使用moment库<br><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> moment <span class="keyword">from</span> <span class="string">'moment'</span></span><br><span class="line"><span class="comment">// 将YYYY-MM-DD HH:mm:ss格式的字符串转化为antd DatePicker能识别的</span></span><br><span class="line">moment(condition.timeRange[<span class="number">0</span>], <span class="string">'YYYY-MM-DD HH:mm:ss'</span>)</span><br></pre></td></tr></table></figure></p>
<ol start="3">
<li>全局样式定义在<br>frontend\src\themes中定义，引用直接使用className=”class名”即可 </li>
</ol>
<h2 id="后台"><a href="#后台" class="headerlink" title="后台"></a>后台</h2><h3 id="GridPanel的增删改查"><a href="#GridPanel的增删改查" class="headerlink" title="GridPanel的增删改查"></a>GridPanel的增删改查</h3><p>修改api即可，注意api的query、create、update、delete后缀不可改变</p>
<pre><code class="javascript"><span class="comment">// api格式 api.js中定义，至少需要query、create、update、delete等4个url</span>
<span class="keyword">const</span> rightManagment = { <span class="attr">query</span>: <span class="string">'/systemSetting/rightsManagment/getList'</span>, <span class="attr">create</span>: <span class="string">'/systemSetting/rightsManagment/add'</span>, <span class="attr">update</span>: <span class="string">'/systemSetting/rightsManagment/setManager/:id'</span>, <span class="attr">delete</span>: <span class="string">'/systemSetting/rightsManagment/delete'</span> }
<span class="comment">// rightsManagment.js内容</span>
<span class="keyword">const</span> Mock = <span class="built_in">require</span>(<span class="string">'mockjs'</span>)
<span class="keyword">const</span> Random = Mock.Random
<span class="keyword">const</span> config = <span class="built_in">require</span>(<span class="string">'../utils/config'</span>)
<span class="keyword">const</span> { apiPrefix } = config
<span class="keyword">const</span> { rightManagment } = <span class="built_in">require</span>(<span class="string">'../utils/api'</span>)
<span class="keyword">let</span> managerList = Mock.mock({
<span class="string">'data|80-100'</span>: [
{
<span class="string">'id|+1'</span>: <span class="number">1</span>,
<span class="string">'priority|+1'</span>: <span class="number">0</span>,
name: <span class="string">`管理员<span class="subst">${Random.name()}</span>`</span>,
description: <span class="string">'@last'</span>,
status: <span class="string">'@boolean'</span>,
email: Random.email(),
phoneNum: Random.pick([<span class="string">'123455'</span>, <span class="string">'123456'</span>]),
type: Random.pick([<span class="string">'审核员'</span>, <span class="string">'超管'</span>]),
rightsList: Random.pick([<span class="string">'哈哈'</span>, <span class="string">'权限'</span>]),
userRange: Random.string(),
ukey: Random.boolean(),
},
],
}).data
<span class="keyword">const</span> NOTFOUND = {
message: <span class="string">'Not Found'</span>,
documentation_url: <span class="string">'http://localhost:8000/request'</span>,
}
<span class="built_in">module</span>.exports = {
<span class="comment">// getList</span>
[<span class="string">`GET <span class="subst">${apiPrefix}</span><span class="subst">${rightManagment.query}</span>`</span>] (req, res) {
<span class="built_in">console</span>.log(<span class="string">'gettttt'</span>)
<span class="keyword">if</span> (managerList) {
res.status(<span class="number">200</span>).json({ <span class="attr">data</span>: managerList })
} <span class="keyword">else</span> {
res.status(<span class="number">404</span>).json(NOTFOUND)
}
},
<span class="comment">// 改</span>
[<span class="string">`PATCH <span class="subst">${apiPrefix}</span><span class="subst">${rightManagment.update}</span>`</span>] (req, res) {
<span class="keyword">const</span> id = <span class="built_in">parseInt</span>(req.params.id, <span class="number">10</span>)
<span class="keyword">const</span> newData = req.body
<span class="built_in">console</span>.log(<span class="string">'update patch1'</span>, id, req.params)
<span class="built_in">console</span>.log(newData)
<span class="comment">// console.log(managerList)</span>
<span class="keyword">let</span> tmpIndex
managerList.forEach(<span class="function">(<span class="params">obj, index</span>) =></span> {
<span class="built_in">console</span>.log(obj.id, id, obj.id === id)
<span class="keyword">if</span> (obj.id === id) {
tmpIndex = index
newData.id = id
}
})
<span class="keyword">if</span> (tmpIndex !== <span class="literal">undefined</span>) {
managerList[tmpIndex] = newData
}
res.status(<span class="number">200</span>).end()
},
[<span class="string">`GET <span class="subst">${apiPrefix}</span><span class="subst">${rightManagment.update}</span>`</span>] (req, res) {
<span class="built_in">console</span>.log(<span class="string">'update'</span>)
<span class="keyword">const</span> { query } = req
<span class="keyword">let</span> { newData } = query
<span class="keyword">let</span> tmpIndex
managerList.forEach(<span class="function">(<span class="params">obj, index</span>) =></span> {
<span class="keyword">if</span> (obj.id === newData.id) {
tmpIndex = index
}
})
<span class="keyword">if</span> (tmpIndex !== <span class="literal">undefined</span>) {
managerList[tmpIndex] = newData
}
res.status(<span class="number">200</span>).end()
},
<span class="comment">// 增</span>
[<span class="string">`POST <span class="subst">${apiPrefix}</span><span class="subst">${rightManagment.create}</span>`</span>] (req, res) {
<span class="built_in">console</span>.log(<span class="string">'update'</span>)
<span class="keyword">const</span> newData = req.body
<span class="built_in">console</span>.log(newData)
<span class="keyword">if</span> (newData) {
newData.id = managerList[managerList.length - <span class="number">1</span>].id + <span class="number">1</span>
managerList.push(newData)
}
res.status(<span class="number">200</span>).end()
},
<span class="comment">// 删除数据</span>
[<span class="string">`DELETE <span class="subst">${apiPrefix}</span><span class="subst">${rightManagment.<span class="keyword">delete</span>}</span>`</span>] (req, res) {
<span class="keyword">const</span> { ids } = req.body
<span class="built_in">console</span>.log(<span class="string">'delete data'</span>)
<span class="comment">// const data = queryArray(database, ids, 'id')</span>
<span class="comment">// if (data) {</span>
managerList = managerList.filter(<span class="function"><span class="params">item</span> =></span> ids.indexOf(item.id) === <span class="number">-1</span>)
res.status(<span class="number">204</span>).end()
<span class="comment">// } else {</span>
<span class="comment">// res.status(404).json(NOTFOUND)</span>
<span class="comment">// }</span>
},
}
</code></pre>
<p>## </p>
]]></content>
</entry>
<entry>
<title>171024</title>
<url>/2017/10/24/dailyDiary/2017/171024/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>antd表单验证及常用正则表达式</title>
<url>/2017/10/23/front-end/React/antd/RegularExpression/</url>
<content><![CDATA[<p>antd的表单验证用options中的rules字段实现，底层是使用的<a href="https://github.com/yiminghe/async-validator" target="_blank" rel="noopener">async-validator</a><br><a id="more"></a></p>
<h2 id="antd表单验证"><a href="#antd表单验证" class="headerlink" title="antd表单验证"></a>antd表单验证</h2><p>antd的表单验证用options中的rules字段实现，底层是使用的<a href="https://github.com/yiminghe/async-validator" target="_blank" rel="noopener">async-validator</a> </p>
<h3 id="表单验证options示例"><a href="#表单验证options示例" class="headerlink" title="表单验证options示例"></a>表单验证options示例</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 方法1 使用async-validator内置type验证(文内附有async-validator内置所有type)</span></span><br><span class="line">options: {</span><br><span class="line"> rules: [{</span><br><span class="line"> type: <span class="string">'email'</span>,</span><br><span class="line"> message: <span class="string">'请输入正确的邮箱'</span>,</span><br><span class="line"> required: <span class="literal">true</span> }],</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 方法2 使用正则表达式自定义验证</span></span><br><span class="line"><span class="keyword">const</span> ipReg = <span class="string">'((25[0-5]|2[0-4]\\d|((1\\d{2})|([1-9]?\\d)))\\.){3}(25[0-5]|2[0-4]\\d|((1\\d{2})|([1-9]?\\d)))'</span></span><br><span class="line">options: {</span><br><span class="line"> rules: [{</span><br><span class="line"> pattern: ipReg,</span><br><span class="line"> message: <span class="string">'请输入正确IP'</span>,</span><br><span class="line"> required: <span class="literal">true</span>,</span><br><span class="line"> }],</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="async-validator内置type"><a href="#async-validator内置type" class="headerlink" title="async-validator内置type:"></a>async-validator内置type:</h3><blockquote>
<p>string: Must be of type string. This is the default type.<br>number: Must be of type number.<br>boolean: Must be of type boolean.<br>method: Must be of type function.<br>regexp: Must be an instance of RegExp or a string that does not generate an exception when creating a new RegExp.<br>integer: Must be of type number and an integer.<br>float: Must be of type number and a floating point number.<br>array: Must be an array as determined by Array.isArray.<br>object: Must be of type object and not Array.isArray.<br>enum: Value must exist in the enum.<br>date: Value must be valid as determined by Date<br>url: Must be of type url.<br>hex: Must be of type hex.<br>email: Must be of type email.</p>
</blockquote>
<h2 id="常用正则"><a href="#常用正则" class="headerlink" title="常用正则"></a>常用正则</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// IP: </span></span><br><span class="line"> <span class="keyword">const</span> ipReg = <span class="string">'((25[0-5]|2[0-4]\\d|((1\\d{2})|([1-9]?\\d)))\\.){3}(25[0-5]|2[0-4]\\d|((1\\d{2})|([1-9]?\\d)))'</span></span><br><span class="line"><span class="comment">// MAC: </span></span><br><span class="line"> <span class="keyword">const</span> macReg = <span class="string">'([a-fA-F0-9]{2}:){5}([a-fA-F0-9]{2})'</span></span><br><span class="line"><span class="comment">// email:</span></span><br><span class="line"> <span class="keyword">const</span> emailReg = <span class="string">'[\\d,a-z]([\\w\\.\\-]+)@([a-z0-9\\-]+).([a-z\\.]+[a-z])'</span></span><br></pre></td></tr></table></figure>]]></content>
</entry>
<entry>
<title>171023</title>
<url>/2017/10/23/dailyDiary/2017/171023/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>MVC、MVP和MVVM等软件架构</title>
<url>/2017/10/21/front-end/basic/mvc/</url>
<content><![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/CYM+oMpvQCmHHQBXNFpG4QOf2JKNK7Eb3p3mF+grFeW09iFgxaNagr26xzYj5+1lox1dWgAzRa++iUsSYvXvKA7T+gUJRaFx9+guJnCm6Zeykcw1e79Ab2O4WUIZ6844C1OHYRGkvlyXZXKVfXoiqy54zOQKKNibPnW8ZIA8GKxHOpDKyQVbaqfPjXhYUCZtrj9FVwYbV0oPfRvpGEoHSXhO17d/WDBT7HWA4BIxUPWEeMQkk4qt5C1UqxlOtlus4WWWcwFInoCUhMMQrsbCM9YmjIPIPHvhzwRC8QYkgCRxiqskwaoV+IfKqPaD94LCtRqY0XRSUOxKymE7tfB9coFNY7ZxKDx4Al8jOKY49QfZxJFLfE0Y3AupBSUu3hwRVrxCENq4Nhgi5P6miHtLqXCEVnc17PdoUjpicmx/8lF/eEBng21KP0k6mjXSUozqD3BGlg5hAf79F1zhFg/BQdUObWlWrOxGy1q/tovRf0EyKyez38vLaw8OvkLd7t+taJoXS4KiEC1UxqZt05kZrz/8fa6xfAKPL1ihHcGilTANZHPDm4GcLily4As2wmXVn8AVdMJYhxvton+oKZWptvqvZcOZZqS0WoIkBNeYfrlh05h20YLbpSS/CMUyEbqlNK1XUVTTuFiaForUm5iPoctNcvRv5GH4EKQn945p/eHQ9ZWkKPemSi3Gg0M+GXhsUzowmiXWrhfa1xgVVTCmCOnMj1JjnxWVoXoeB6pSk3evoam1SNDImL1s6PIU0KJv8wC9IDuz+kQL2C7a0poieDcdjQ5xbBGda/5oWtVEZl4g5ZoKwDK0k7EgSak3U4XwpRrByrUPe5x7JbGgc1PX6/3o2L4rbCT5miq4YWpK1j29abeGDFNSIHa4iCUgpk65ZwKokJ3E+JFwA2bqVBHQuXwwxqr7WO9DSsNn9xXbCIKN7ga82phOJhrNNj6ekparktEP+cJ17ipMfzKfGz9lagZ3CELsoteyhBWDb2v3UBe49UaC8BMOEM74Fp8fUOy9avkwg+BBH8sWqAlji2ooIB2GbVpOu5eA=</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>
</entry>
<entry>
<title>ajax与fetch</title>
<url>/2017/10/21/front-end/advance/httpRequest/</url>
<content><![CDATA[<p>前端发起异步请求我应用得非常少，只使用过jQuery的ajax方法，没自己写过原生的异步请求。是时候做个总结了<br><a id="more"></a></p>
<h2 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h2><p><a href="http://www.jianshu.com/p/373c348737f6" target="_blank" rel="noopener">fetch API 和 Ajax（XMLHttpRequest）的差异</a><br><a href="https://segmentfault.com/a/1190000008950789#articleHeader58" target="_blank" rel="noopener">你不知道的XMLHttpRequest(大而全的ajax起源与使用介绍)</a><br><a href="https://segmentfault.com/a/1190000003810652#articleHeader1" target="_blank" rel="noopener">传统 Ajax 已死，Fetch 永生</a></p>
<h2 id="概念"><a href="#概念" class="headerlink" title="概念"></a>概念</h2><p>ajax: Asynchronous JavaScript and XML（异步JavaScript与XML技术），指的是一套综合了多项技术的浏览器端网页开发技术</p>
<h2 id="先用起来"><a href="#先用起来" class="headerlink" title="先用起来"></a>先用起来</h2><h3 id="ajax"><a href="#ajax" class="headerlink" title="ajax"></a>ajax</h3><p>使用示例: mockjs返回的dataA的格式为:</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> dataA = $.ajax({</span><br><span class="line"> url: <span class="string">'/index'</span>,</span><br><span class="line"> dataType: <span class="string">'json'</span>, </span><br><span class="line"> data: <span class="string">'ajax请求'</span>,</span><br><span class="line"> type:<span class="string">"POST"</span>,</span><br><span class="line"> success: <span class="function"><span class="keyword">function</span>(<span class="params">data</span>) </span>{</span><br><span class="line"> <span class="comment">// 此处的data就是dataA.response的值</span></span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'ajax success，返回值:\n'</span>, data)</span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<h3 id="fetch"><a href="#fetch" class="headerlink" title="fetch"></a>fetch</h3><h2 id="前端跨域"><a href="#前端跨域" class="headerlink" title="前端跨域"></a>前端跨域</h2><p><a href="http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html" target="_blank" rel="noopener">ajax与jsonp(好文章认证)</a></p>
<h2 id="fetch、axios、promise"><a href="#fetch、axios、promise" class="headerlink" title="fetch、axios、promise"></a>fetch、axios、promise</h2><h3 id="Promise"><a href="#Promise" class="headerlink" title="Promise"></a>Promise</h3><p>ES6的一个全新函数</p>
<h3 id="fetch-1"><a href="#fetch-1" class="headerlink" title="fetch"></a>fetch</h3><p>XMLHttpRequest的最新替代技术<br>Fetch API 基于Promise设计<br>Fetch API提供了一个fetch()方法，它被定义在BOM的window对象中，你可以用它来发起对远程资源的请求。 该方法返回的是一个Promise对象，让你能够对请求的返回结果进行检索。</p>
<h3 id="axios"><a href="#axios" class="headerlink" title="axios"></a>axios</h3><p><a href="https://www.kancloud.cn/yunye/axios/234845" target="_blank" rel="noopener">axios使用文档中文</a></p>
<blockquote>
<p>Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。</p>
</blockquote>
]]></content>
<tags>
<tag>Front-end</tag>
</tags>
</entry>
<entry>
<title>171021</title>
<url>/2017/10/21/dailyDiary/2017/171021/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>接下来做什么</title>
<url>/2017/10/20/dailyDiary/2017/Todo/</url>
<content><![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>
</entry>
<entry>
<title>171020</title>
<url>/2017/10/20/dailyDiary/2017/171020/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>171019</title>
<url>/2017/10/19/dailyDiary/2017/171019/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>171018</title>
<url>/2017/10/18/dailyDiary/2017/171018/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>171017</title>
<url>/2017/10/17/dailyDiary/2017/171017/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>171016</title>
<url>/2017/10/16/dailyDiary/2017/171016/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>171013</title>
<url>/2017/10/13/dailyDiary/2017/171013/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>171012</title>
<url>/2017/10/12/dailyDiary/2017/171012/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>使用svnstate统计svn代码量</title>
<url>/2017/10/11/Tec/svn/svncodeanalysis/</url>
<content><![CDATA[<p><a href="https://jingyan.baidu.com/article/6fb756eca4696b241858fbb8.html" target="_blank" rel="noopener">如何用StatSVN统计SVN服务器某项目的代码量</a><br><a id="more"></a><br>具体步骤直接参考上面百度经验<br>一些tips:</p>
<ol>
<li>Apache-Subversion-1.9.7找一个地方解压，bin路径也写到环境变量里边，这样cmd下可以直接使用svn命令</li>
<li>svn按需下载，代码按需分析相应文件夹</li>
</ol>
]]></content>
<categories>
<category>Tec</category>
<category>Svn</category>
</categories>
<tags>
<tag>svn</tag>
</tags>
</entry>
<entry>
<title>171011</title>
<url>/2017/10/11/dailyDiary/2017/171011/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>总有那么些事情</title>
<url>/2017/10/10/essay/something/</url>
<content><![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">U2FsdGVkX187bSdvL9QjSeN5dQzNKAtT3EPpsTG6WgZLg93Pk7KsS15niMSDV4QToEdSELptAfQ8MPUWaWwnUjxB0mL6kP3wLV0Rzrkivrv0kSjglbHZ9RTvohHPMhiiVIXFjYeKoL5cCn9UmSgdVKY/hkADgbshEpjn12G3XJhEv8dotDYTU27CvySH2qd2gVHu+YCSBy/nk+x1eERVzlVK4JWPYmqYlzW/AFDFoxrDO1DN+WGzOVYPqTxsTIEnc7dZvl3zJSIGl3s4OhLhM6NYys76OdqDd+VzCjJ0xQhi+nLBTOwKSLkx36/s+95afAO87a6Kl5QNClvgpjNMaJ4c+TtHdq3wYqq3Vy5RByE/bknF/Rs8+fqHnAup0++0UqBljTCv9nplkQ9/9EBIRo44Sjo4yNs4e0Y8AfBooCo3i1sXHzB6/lY66CfRMKPooNbDbwemwsELDDfQONJMHjO5LXgtDSAsK8LlIfJWfxg1LPI85jTIzVGHGZhphx9z6KW0t7b0aQeQXfuYNQRwyswVU79FEn5B6zYI0x++zLCl4zRSljqFAuiQc2UF0CHbDpgy27Kdke2n6MxPpv+95yUsnOnJ6fAi/UhIzoOVSOjylJHTh1ULcSAz2oGzQiih4K0PQ+W4tGVgyWqkb3335Nud3LvIruFrmUGJuQLAKRhxcqZl8m0mop012r2DPgeDlPdpZivfTZah2lxZBke7zDLnYD7LvikbSfixFQp0Vs7tmBNj4N5kthR+5TEJQ77g7M5S5BIFWYHM90TsjJr1BkCv1F2BGLQwunxMwXiAVqKeGY0QQxPHKyQicVt9Qjg9YHFpL1Lt08qIlMu61PL0OggazZrJVo3se/FoeOYbjSXO9TdMrsdl8fvS3IqqsOrxl5XCGfMxxfG2YIoMN/KFox08PO25FopLOAOS7rNAoTtR9BPCsfufuMEMcLPdN7fSzwTJlAo3o9Ou6S+KEXy8swuNaECZcszmUmsvmpkao1BV8O8hkH65c/2EgfOUQQFrgB/2E98JUQsObF5Qdc7c5gKJfcbjY4fUrVbi71lDrJb2WLRv9R7czs9IwsqwYsX0vBK5KoxH2nVClbZBqEyCWBWU22uWghwI3B9ZMbjrBmwWC0rJKUEloUw3Q1yyNaUVtXGmqFckVCVbnxBPXmrHEosVcKUW0TiGlaopaFDlfNgew2N1X7VkwD5eFofDWnn2FmuL2A/VmaEjus+jhBGWhKRoBc6B9AgzF7NrIkN87Oq3GfUCJvwemHAlsFLxBRbnaKiUtQ7hk0Yo9vEfETxHPc3YQHEeiPE2ZeppQFsc1vGxHHTk+9S6OjFFM2RC6qNTm4wr5a6I/9PPGXwztmS7EaxPlE8TqNNPo8ujNCpwXIyVw8J3UDfvC4+zd6ReYbxxLhogSRl/y0LHYfc/tcCjKlP6knaLsq7wIC9WZoZqks9819jTSiT1hUBSgCGoXDQXlff/zE9GpqMQVqNuhivn1zHI1Fh/DnVYoPvTRMpW8vjA1OHM3VdAoCahtaf4TbQD2lakIiU4GFnepXG3R8we/Zzkot5TcdpF0jXuqb7kLWaK/+03sTr1iIuev+TlEVaimfGw+6acFRJQDIgPY64+RIjWZjflXfAsmqIkddrAtLVvEiR6zO+HCNONr7jKFMzTwBuAslsY9MMDdySp6r0lcP87L0ttKVEKGp8UQNWcyDw6nWw5OEs4ZeHjP/2tM1P4pzazsqqW0SvYGzMKFBkn3iKgsCqE3yse51A1o7W8H5Hq76A2c0/qkLNY7aDciAwXGuVsrgL/HARzxv6NLuZ70bzanexeg2OjFXmnvX2NbaWEDhSSyCb60hJt/Nrk85dgaq5HMd6Rhn3aiMct9waO4nx0qjAbp65o43ziGu22QYk=</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>
<tags>
<tag>mind</tag>
</tags>
</entry>
<entry>
<title>171010</title>
<url>/2017/10/10/dailyDiary/2017/171010/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>171009</title>
<url>/2017/10/09/dailyDiary/2017/171009/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>171008</title>
<url>/2017/10/08/dailyDiary/2017/171008/</url>
<content><![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+p69SOon6pD+lq2Eu216f3AyJpXdi1OkeT0U62xEQ1SHMxaJMEdvT0J1EzdRNB0m5k7S3kZb9lTT2uny/4zHXFpXbBJrlZ2zdP7BZ9qtx/Tgm/FeJf1fI58XaDjqpo1R20ubJ4a5kf2sTztFYqLUVQ89tlixwawuqXkf/U+AK7sC2SySHSKAGxAkEkHO3ZbQsk4Iuylyd5zZZkUdsIpAaTw7XQsWC2wH3QON4SnCcJmkzyKftT3Nh/ewGQoNrLcCT5xYAyQON5WPaRE1hM7PJuM+rGST7DOS0LUtJjw1PkzLqFWxLLUSUtINZu3wesa7AgWlEaFsN3+L33zdbnz9WFsIW4cWHVOy/X/wIZEGWMl96MHPwuxkn+PDBvABm8xeOT4iFEvVRP4p2grQiAgia+kEA/vWnVoEAW/8d7lIlXJqes5eae15fNYW8LIlKPrgHp6Jr6xxY9zJkIkkBY4WOOK94W4fR8UKykAGKN5FRaD5jVXou2Fb8N1xMc5d+1B1DF9iUJygHzK359e+SqKEHeOGERD+JORnOYH3rxnKAZlBiBAA01JiT7MyQ4d4KW50NFFysc+zA9FVVL3s5l15zrz3U5/tdkeG3E7F6igPPp+sQlCagSQvBq3fOwlXoUs3Wg1tyBIRR10PFByZUZNMRFrPE6Yxnmbn8NUPHtLMDJJXzw02LFgeJRbrrUG6FaWmpr8daZntAj/kyRwdXIvTZjvDPzynBcrbh7lBUKrUN3lNh/1I52Wd0W479o+sOmhkz3gqZe9L1zyipkuxOOrEUjGf9Y63LB3+unq9njT5e8LBaNi2XGj4AmVIskbD+zCL8eaWX6cwnCj9ilrrv2HfxubHDB90UTBlDo6QToDfdrKP9POJAel9qK3zkEYy8Yft8C3bILuhdZlh3q07U2rOBau54kxpOfQ4NXbQJCtBISFAKlzaN3JBC6NRUuFEL2yMyjJhnmOxXV+DssxMn5BDMa8CE5kItCRKMRtrf3yY8vMQe8tYMAdA5lnOG8QeP6Qo8vb3k9Ps1Vd+RFXPslD8Ok7lcoZSnLvrnDAIw1w4HwZ2kXU96q/JpRCirNlYKTly8Ea0F5GDRq33O8OiS1KxvoZVEvDMPblwUHl3dJ9N56zr2NwiUx9EtX24i8lvEfmU0XnV807KBuxVMp0poYa0iU4C6KHbtfVKIq8Dk9uqlVVZo+MuSR5d2z0FkwZYIdx4G51LXnVDRf3vPbE+cB6sPLiAeLterAwlsaei58XXZgA4s/ZpAYEvkH9G1EV9AENzKeGvnifhjScU1EIke2B8mciJOSwmz04cQ1LfIimmRj2GTyG/56xVyD4xXWK3gdjU/8C03mZGVnWB5KgQ0kwXVvrBxxg1cGp9gmJmHO1FFS4K0o5IFwsOhXAF6GcM7/gX1GE0mURlx8tqz4SkKgOpdznygni2nCrolDWa+tm0IaffO7fICRUH8Z97GqO9etxDH+ZsCNc4mHK0Qo5E44ROKtlKtwa8SURLCsNjq/Ipz3sG5xGzOjLUDnq2SKxURW/WvrgDZH4uYVvNGxsH9jem2f7RHeSjALopFBGC9YWZc5UIHcqavUGmP5NJZHnuIQpHTrbN5kGzBat+IO66x7zDthMJVFKBqs9SiyWoIZaur1Cuq6xCAPfyXqy9gyQROpB7x0gM9MLX14lpK04csh3q1RBit32m89eSdX0ervFPtM7Hv4cEXiz7CqGl4MKoWLO3lYFsp4TY3g1Q==</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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>170930</title>
<url>/2017/09/30/dailyDiary/2017/170930/</url>
<content><![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+7WKTdX+JRInYhe+Q2XHNs0Kq7dTbfdab60RKaKCT9OBWiFa15WOON9QubTaLjtiWeAToNSXH+7Gx0Xkwy/boTlJFbs0SxBTSDGxdX3HJLIXcgkN26bdkuq25v+7Q1JIztl+nFuQ4YM+5HKs6W886/MyCwwygaX9vkHMzz4a1L5kARVb2MHvgJTwLePTpLdbon+7eBZNfJEqIXkrrw/xMNDSlJsG34QEiuGeYHWrQCh8KlFNJ1XruhsLP3t0vE53WcVqhcEiStxVCssk2EW9yoq5uTFz0G5WHZxKPeAgs9aT7tpHQRxaG1INiAkYn/fZBvZRBZnHwqEgWK/KVTopce7RU9B5WLQqfjzxDC2yztXtOW3khZfrWq6b8g+ew+L02Gk58RHBMN4ciumboDJQDaCgjRiSYgjCBOdR4NydObM013mjrr3Exi/tGaI/76ChpArvInyhN2l6I10uWw02+jWagnwV9TClsrZeHcMK2qlDLoAyVWMLx/b6N8eGYSlxO6DDGqot6H7anlQpZSOIbrBk3mCLY6DVcUcnJ0xum5BzOliP9lTTe/fsGMlNvE8yPxvvygxc1gOaPY+fSkibqEgUa7GS4aYuAeFn3Q/ZRMS1GfF0TGHSpjvpUi5GTKjSw81TP5C9CKJdzrTHDmEKh1TN9u26LrIXKNGKmf/47KyAKUw+VIUzt67lsp7yiY1t0M1+uI2VKR3oCsI2Hdt2cQwNPH3kTIAk/RPGSGMgIp0DeLUKLnxaRJVdB6Fz60gcmfq7Xwrif5Cqs+6lTVc+mMkfTvy6aRhlhhOUO7YeP3DxjQZIrpNRwV9Cn0qCGvWLkIvQnVsTYJ6COoiUdVSw938Zii2i+c18o50dPTcqyl/LJHqlrTnOJmrPcvV4LtGmu4dXRnk6GrAbGplY1+gYggs1txOaUKIv6JZ5S6DW0NP9RHrehMbNGh1P+MavTx7t57ViaV8LYiJhI2C75n6cniQYqdC7UO1egea40w5CgpiLB1HSc0Mno/uGUctK4vRrqaPMpa2tCiGod4FJ022PZlByZbaNb1TCMiblB6dJ7+7BxOIEyP3SQ4r9svZGpXP+PAUM2rvHa/QnpyMsdCTZwf4JGVSFtSaOXjVTbRHJe8XsxIdBFqdEhfdkxTr8LrO5p4CYLEjQ5C56dDXkVNajV5de3/Un0Ho4hhxOpJVblPLSMqb1kIFsAxr3K6w2M0NeLzEy8jy0YhYg2TjZr7Xrae3rdvdHsIetQA1e+W8CW1kb3uO3hToGo0xOR6CZNz9tGonJT3F7mpSiV37As+9a3Fq8geK/SE8k6rHJSY1hZ73C51dGX9XEGxsPtFIJHvlIcbmihqQILb4em/4CTYSRo9ixzRNw3R7WxX6BUoo9zvraC2PUJBGhm9DYx26T3l++OhKDsItf2KPj5G67CsQzdvYCTyFjMzIevOQ3Y0NyDBF1vx2NM1WVqKX+nDKZW06vQhBSqZpms/A2I4EO/WKY4LztFhifWF9Mz98YF0VZqGNlxHr9PLRrJIJYAO8850+qPUB/RAWFKdNqiln5gzltqTZZw5ZIE6SOiIDGOIdMgIhwRj3/qNZzts8AT4ROkFdi5G08mD7miTPGXBhZH0CLamqDXKNY48cltrD3WzZkLC4oF1STGwNj64bnKBMOfJpeULhbHJw0SJFJ1lLkCJdaxKxzyubBLUXcCdspZXLFBqGyeJuEPFNjbMbxX4uDzgpRFvkRkyFTYTUcfbiY4oQmxCfe8FIvYCPovy5Y/AlDioPsEDWtp8rg6XVXkxxLexJgSTkjBp/FkdHDv6rgWRgV3uSe0ZGV73Z2QVEFh9dSqY1CXAs/9/jqzwFw1VpS++iXxtTdRMMWcLrRJ4a9h6DD3ywyqW2bCLLhbTmPXFe/TMZHo/GIZSXJ5j7Hkgmh2hsrQm1+oTpJAY9s1t3DI3Y9pmKrt4g3iqjn5joj0py2+R1IeNbuJUiwwa23+kL408T+74n1zxP2eygaHUPvlTHuE3G3nbSPRgHW5puo6e48I5TqNBwej6vo1DfynIX6/wuUxlAB89O5gA0xYqnktwClOtLULsjQDcu7B1yg4KeRXiJifQ/lXMpxrfKCqkTpBxnrwDUKIOE0JdeX2q1k6hnDTByJ5pJICuQ/xW2iTwipSWOcyxjc/pFTzyuTqFtJC8cpBFh5Qe1CJ2kD9HsoCGWyH1+vBFHSWUT1XIkEguJIubrdW0LT/wUIiDWT4liQXTdaTlODnhRixbEP45fC+NyQJisPBDl9MjfWCTT4YVDcqTBSDa5b2xyuosmzLqdHOMiNWxFvtpiGjJxOX2eTQqbv+7908vkNl6dMRNcarL7iXRU/kDeOS9V6rwnjgsYjoE9T9PFs+63WMHgjg642C9PBrkZJKwJEGIsnIdOBt9ICdpn7kN4sHP9EWLaLWQFG/UdocEs/4HKBQzinA3Jw7PLmme/hp7G4MoHzFZR+EbpDuiGrVuKn6HX9UGXEC1qcDbiwAWJwnyqktcx/y0dij+4BkGr9eTddSQF6EpwTBh+buEZwATKWmOFtDOqqVSfv1MwJ5ptrm86ye5cPrGEkV+vKzJ05duXFUJJ4XFLO+gww0a7OyliP1KTkfO7FRcl8dsCLzX6r7rUJ/tVkmi20SFFRn1B7RnBHPjOGI/psv5qhIQFRsWb7FLzzSEEy3eSr7P4hkC6PV+/7QJuN0s/OfiA/nDTb2sRqiBjAkKBQTt7NGfvdWeX5t5sXca2bpJ303Flmd6hRoq97ciWmLJ9sro8w0B83qQtFaDS9ra8yPHjninRTo7lh/1CxZXyVrjuA5pJm7q7yRRvU5F2BqipZadmFewZo8kl5aEca6H9hFKWbL+CBNGKkQFI3KRsJscZKwjFGjiv/60j0b3T0A+tyqZvC8ZmgAHlnhJaCGE4NiUEAjp4c2jse7eli/xP4Ht/pqmfs+xTR2/55AOBfaVWxTs18k0YXDBgis2NRHVy8TJz6R7jcqARsw/6il6FfsZJUjRPtOv1jWrL/VrKz6Ez0XSUYS1XTw5SZT75ka2ZlGV8/lblklwSb/+GR8/oqDzA7WWWnoUNtH5D7BCNrzgQewhK/9RXQklpPBtpSBoSe4bOWiloj9HXRsOyVVz/zVlEb3+OSPlMcy53KK0ugI+1CM31ZlLrYdbh2b8y6ImP6jvk7Ldff8fjsdkK3cxhSrMvd5ahvkXtQoAOvIkbE/3T91/AByLLWpoCGyImo/zhOnbaMv/7IYgzrr7FOwrmrWLbeKz9ggXJJwD6ZZeHLJvQavhfkftQUGYSSCNePc223IKIeCssVtdI7m9v3CWa7b7I75LeI/76Hh7DzNHpJs7z/AT6duU/RBWIQZUPeI4H7NMGdXfZdwwJFgxJdtyu7xs7K1a+StqU3fPgr55ZAdvA2acG/b5eYDbZ9ccOLGFU0A6gNnlToVrlevRclvyVrOEzoDd6Xhsz/tqhFg3FXl4HO3HKiBttlFzLyP8rYP9CCZtuXkG4oi/KAMX6R0xxGQ46mcf1zEiy1j6uX2mFQwxudmQ8YZKV9qmR3fSQctv25SXcFRm2Z/gP1BU3m5n7Blh8K5m1Nd/3NmNR18G90Y/nt/qbbuMWyIDbfvSk05B2MH0E9FM9nUcyFLixqf8ZCzIRbpm67Zfxsiu6m4WhquLjHE7NLRUCSpTqdzafSRVWVcIECpSEvHVM4wr70eAM4YCNK83cVezx0vIwImg8DWPiuIh3tdrdchvmkNjy0GzIq77GRcKuxQZ5HOb/L7dZsLoPHOaS243FtsRGnNuWo6arYSwRh8iEBb47IkUMekc3fZlrQQgzvP5XGgofC+1VhZcsI248H67rjw9DpQznBcyRtzLx1Ik45m+ViH1l5+6QsHjlE/HirhgxGjbEoB2Tn2Z8UYiQWgd17zLQIXoy93CcSFooTOg0lbVTKryIVzoq+bkxPrDg3h3WRxR0i3J</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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>虚拟机网络配置</title>
<url>/2017/09/29/Tec/network/ipconfig/</url>
<content><![CDATA[<p><a href="http://liyunli0226.blog.51cto.com/10006245/1748181" target="_blank" rel="noopener">VMware虚拟机网络设置——三种方式详解</a><br><a id="more"></a></p>
<blockquote>
<p>1.Vmware的网络连接方式<br>(1)Bridged（桥接）方式<br> 用这种方式虚拟机的IP可设置成与本机在同一网段，虚拟机相当于网络内的一台独立的机器，网络内其他机器可访问虚拟机，虚拟机也可访问网络内其他机器，当然与本机系统的双向访问也不成问题。<br> 这个时候vmware就模拟成一个网桥的功能，就只使用 vmnet1网卡，vmnet8就可以不用；<br>(2)NAT(网络地址转换）方式<br> 这种方式也可以实现本机与虚拟机的双向访问。但网络内其他机器不能访问虚拟机，虚拟机可通过本机用NAT协议访问网络内其他机器。<br> 现在vmware就模拟成了一个具有DHCP功能的路由器，这个时候就要用vmnet8了。<br>(3)host-only方式<br> 这种方式只能进行虚拟机和主机之间的网络通信，即：网络内其他机器不能访问虚拟机，同时虚拟机也不能访问其他机器。</p>
</blockquote>
]]></content>
</entry>
<entry>
<title>170929</title>
<url>/2017/09/29/dailyDiary/2017/170929/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>antdMenu源码(rc-menu)分析(未完成)</title>
<url>/2017/09/28/front-end/React/antd/antd-menu/</url>
<content><![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>
<categories>
<category>Front-end</category>
<category>React</category>
</categories>
<tags>
<tag>React</tag>
</tags>
</entry>
<entry>
<title>170928</title>
<url>/2017/09/28/dailyDiary/2017/170928/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>从antd Form源码分析并学习高阶组件</title>
<url>/2017/09/27/front-end/React/antd/antd-form/</url>
<content><![CDATA[<p>分析Form的源码主要是想看一下Antd是怎么构建Form这个高阶组件的<br><a href="https://github.com/ant-design/ant-design/tree/master/components/form" target="_blank" rel="noopener">ant-design/components/form</a><br><a href="https://github.com/react-component/form" target="_blank" rel="noopener">react-component/form(rc-form)</a><br><a href="https://www.gitbook.com/book/xcatliu/typescript-tutorial/details" target="_blank" rel="noopener">TypeScript 入门教程</a><br><a id="more"></a></p>
<h2 id="Form源码分析"><a href="#Form源码分析" class="headerlink" title="Form源码分析"></a>Form源码分析</h2><p>object.omit 是一个 JavaScript 库，实现从一个对象中排除某些指定属性并返回最新结果<br>mixin就是<br><a href="https://zhuanlan.zhihu.com/purerender/20361937" target="_blank" rel="noopener">React Mixin 的前世今生</a><br><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment"> Form的create方法，返回一个函数</span></span><br><span class="line"><span class="comment"> 返回的函数参数为组件，函数执行的返回值为一个被createDOMForm返回的decorate方法处理过拥有Form方法的组件</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="comment">// typescript语法，约定了继承的接口，可理解为function(options)</span></span><br><span class="line"><span class="keyword">static</span> create = <span class="function"><span class="keyword">function</span><<span class="title">TOwnProps</span>>(<span class="params">options: FormCreateOption<TOwnProps> = {}</span>): <span class="title">ComponentDecorator</span><<span class="title">TOwnProps</span>> </span>{</span><br><span class="line"> <span class="comment">// fromWrapper是createDOMForm返回的一个decorate方法，用于包裹一个组件并为此组件提供Form方法</span></span><br><span class="line"> <span class="keyword">const</span> formWrapper = createDOMForm({</span><br><span class="line"> fieldNameProp: <span class="string">'id'</span>,</span><br><span class="line"> ...options,</span><br><span class="line"> fieldMetaProp: FIELD_META_PROP,</span><br><span class="line"> });</span><br><span class="line"> <span class="comment">/* eslint-disable react/prefer-es6-class */</span></span><br><span class="line"> <span class="keyword">return</span> <span class="function">(<span class="params">Component</span>) =></span> formWrapper(createReactClass({</span><br><span class="line"> propTypes: {</span><br><span class="line"> form: PropTypes.object.isRequired,</span><br><span class="line"> },</span><br><span class="line"> childContextTypes: {</span><br><span class="line"> form: PropTypes.object.isRequired,</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// 主要是给FormItem传递form</span></span><br><span class="line"> getChildContext() {</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> form: <span class="keyword">this</span>.props.form,</span><br><span class="line"> };</span><br><span class="line"> },</span><br><span class="line"> componentWillMount() {</span><br><span class="line"> <span class="keyword">this</span>.__getFieldProps = <span class="keyword">this</span>.props.form.getFieldProps;</span><br><span class="line"> },</span><br><span class="line"> deprecatedGetFieldProps(name, option) {</span><br><span class="line"> warning(</span><br><span class="line"> <span class="literal">false</span>,</span><br><span class="line"> <span class="string">'`getFieldProps` is not recommended, please use `getFieldDecorator` instead, '</span> +</span><br><span class="line"> <span class="string">'see: https://u.ant.design/get-field-decorator'</span>,</span><br><span class="line"> );</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">this</span>.__getFieldProps(name, option);</span><br><span class="line"> },</span><br><span class="line"> render() {</span><br><span class="line"> <span class="keyword">this</span>.props.form.getFieldProps = <span class="keyword">this</span>.deprecatedGetFieldProps;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> withRef: any = {};</span><br><span class="line"> <span class="keyword">if</span> (options.withRef) {</span><br><span class="line"> withRef.ref = <span class="string">'formWrappedComponent'</span>;</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (<span class="keyword">this</span>.props.wrappedComponentRef) {</span><br><span class="line"> withRef.ref = <span class="keyword">this</span>.props.wrappedComponentRef;</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">// Component是传入参数</span></span><br><span class="line"> <span class="keyword">return</span> <span class="xml"><span class="tag"><<span class="name">Component</span> {<span class="attr">...this.props</span>} {<span class="attr">...withRef</span>} /></span>;</span></span><br><span class="line"><span class="xml"> },</span></span><br><span class="line"><span class="xml"> }));</span></span><br><span class="line"><span class="xml">};</span></span><br></pre></td></tr></table></figure></p>
<h3 id="createDOMForm"><a href="#createDOMForm" class="headerlink" title="createDOMForm"></a>createDOMForm</h3><p><a href="https://github.com/react-component/form" target="_blank" rel="noopener">react-component/form(rc-form)</a><br>一个函数，返回一个decorate方法，用于包裹一个组件并为此组件提供Form方法<br><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">一个函数，返回一个decorate方法，用于包裹一个组件并为此组件提供Form方法</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">createBaseForm</span>(<span class="params">option = {}, mixins = []</span>) </span>{</span><br><span class="line"> <span class="keyword">const</span> {</span><br><span class="line"> mapPropsToFields, onFieldsChange, onValuesChange,</span><br><span class="line"> fieldNameProp, fieldMetaProp,</span><br><span class="line"> validateMessages, mapProps = mirror,</span><br><span class="line"> formPropName = <span class="string">'form'</span>, withRef,</span><br><span class="line"> } = option;</span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">decorate</span>(<span class="params">WrappedComponent</span>) </span>{</span><br><span class="line"> <span class="keyword">const</span> Form = createReactClass({</span><br><span class="line"> mixins,</span><br><span class="line"> <span class="comment">//...一些生命周期方法、Form的方法</span></span><br><span class="line"> render() {</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line"> <span class="keyword">return</span> <span class="xml"><span class="tag"><<span class="name">WrappedComponent</span> {<span class="attr">...props</span>}/></span>;</span></span><br><span class="line"><span class="xml"> }</span></span><br><span class="line"><span class="xml"> })</span></span><br><span class="line"><span class="xml"> // argumentContainer具体实现代码在下面</span></span><br><span class="line"><span class="xml"> // 返回已拥有WrappedComponnet静态方法的Form</span></span><br><span class="line"><span class="xml"> return argumentContainer(Form, WrappedComponent);</span></span><br><span class="line"><span class="xml"> }</span></span><br><span class="line"><span class="xml">}</span></span><br><span class="line"><span class="xml">// argumentContainer方法</span></span><br><span class="line"><span class="xml">/**</span></span><br><span class="line"><span class="xml">hoist-non-react-statics库作用:</span></span><br><span class="line"><span class="xml">Copies non-react specific statics from a child component to a parent component. Similar to Object.assign, but with React static keywords blacklisted from being overridden.</span></span><br><span class="line"><span class="xml">类似于Object.assign，作用是将子组件中的 static 方法复制进父组件，但不会覆盖组件中的关键字方法(如 componentDidMount)</span></span><br><span class="line"><span class="xml">使用:</span></span><br><span class="line"><span class="xml">import hoistNonReactStatic from 'hoist-non-react-statics';</span></span><br><span class="line"><span class="xml">hoistNonReactStatic(targetComponent, sourceComponent);</span></span><br><span class="line"><span class="xml">***/</span></span><br><span class="line"><span class="xml">import hoistStatics from 'hoist-non-react-statics';</span></span><br><span class="line"><span class="xml">export function argumentContainer(Container, WrappedComponent) {</span></span><br><span class="line"><span class="xml"> /* eslint no-param-reassign:0 */</span></span><br><span class="line"><span class="xml"> Container.displayName = `Form(${getDisplayName(WrappedComponent)})`;</span></span><br><span class="line"><span class="xml"> Container.WrappedComponent = WrappedComponent;</span></span><br><span class="line"><span class="xml"> return hoistStatics(Container, WrappedComponent);</span></span><br><span class="line"><span class="xml">}</span></span><br></pre></td></tr></table></figure></p>
<h3 id="相关问题"><a href="#相关问题" class="headerlink" title="相关问题"></a>相关问题</h3><ol>
<li>Form是不是高阶组件<br>我的理解中应该不是，高阶组件是个纯函数且返回一个接受组件作为参数的函数，这么定义的话Form.create()这个函数是一个高阶组件</li>
<li>Form.create()(Component)和Component的关系?<br>父子关系，拥有互不干扰的生命周期。这个问题理解了问题3就不存在了</li>
<li>Form组件如何解决两个组件生命周期重叠的问题?<br>答： 不存在重叠，Form和Form.create()(Component)返回的被包裹组件是两个东西<br> Form（返回的是个定义了props和className的原生form）是定义在被包裹组件中的</li>
</ol>
<h2 id="高阶组件"><a href="#高阶组件" class="headerlink" title="高阶组件"></a>高阶组件</h2><p>Higher Order Component，高阶组件<br>高阶组件就是一个 React 组件包裹着另外一个 React 组件<br>组件: 可以是纯函数</p>
<blockquote>
<p>官方定义:<br>高阶组件是一个函数，能够接受一个组件并返回一个新的组件。<br>组件是将props转化成UI，然而高阶组件将一个组价转化成另外一个组件。<br>高阶组件是纯函数，没有副作用。</p>
</blockquote>
<blockquote>
<p>你可以想象在一个大型项目中，订阅DataSource并调用setState的函数(原文举例，大概就是相同逻辑可能在不同类型组件上都会遇到)将会一次次出现。我们需要将其抽象出来，使得我们能够在一个地方定义逻辑并且在我们的组件中共享。这就是高阶组件的优点。</p>
<ol>
<li><a href="https://juejin.im/post/595243d96fb9a06bbd6f5ccd" target="_blank" rel="noopener">React 进阶之高阶组件</a>,感觉这篇文章写得最易懂</li>
<li><a href="https://zhuanlan.zhihu.com/p/24776678" target="_blank" rel="noopener">深入理解 React 高阶组件(译)</a></li>
<li><a href="http://imweb.io/topic/5907038a2739bbed32f60dad" target="_blank" rel="noopener">React高阶组件（译）</a></li>
</ol>
</blockquote>
<p>两个作用:</p>
<blockquote>
<ol>
<li>属性代理Props Proxy： HOC 对传给 WrappedComponent W 的 porps 进行操作</li>
<li>反向继承Inheritance Inversion： HOC 继承 WrappedComponent W。</li>
</ol>
</blockquote>
<p>通俗点讲，属性代理可以对组件的props做一些预处理，再下传porps给被包裹组件<br>反向继承可以通过继承的方式拿到原组件除静态方法外的所有内容(生命周期、state、方法)，一般用于在render中通过super.render()拿到原组件的展示内容，做渲染劫持，比如控制显示，在前后加一些东西等等。借个例子来理解:<br><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="keyword">const</span> hijackRenderHoc = <span class="function"><span class="params">config</span> =></span> <span class="function"><span class="params">WrappedComponent</span> =></span> <span class="class"><span class="keyword">class</span> <span class="keyword">extends</span> <span class="title">WrappedComponent</span> </span>{</span><br><span class="line"> render() {</span><br><span class="line"> <span class="keyword">const</span> { style = {} } = config;</span><br><span class="line"> <span class="keyword">const</span> elementsTree = <span class="keyword">super</span>.render();</span><br><span class="line"> <span class="built_in">console</span>.log(elementsTree, <span class="string">'elementsTree'</span>);</span><br><span class="line"> <span class="keyword">if</span> (config.type === <span class="string">'add-style'</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="xml"><span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">{{...style}}</span>></span></span></span><br><span class="line"><span class="xml"> {elementsTree}</span></span><br><span class="line"><span class="xml"> <span class="tag"></<span class="name">div</span>></span></span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> elementsTree;</span><br><span class="line"> }</span><br><span class="line">};</span><br></pre></td></tr></table></figure></p>
]]></content>
<categories>
<category>Front-end</category>
<category>React</category>
</categories>
</entry>
<entry>
<title>170927</title>
<url>/2017/09/27/dailyDiary/2017/170927/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>react技术栈学习资料</title>
<url>/2017/09/26/front-end/React/reactTechStackDocs/</url>
<content><![CDATA[<p>react+antd+webpack+dva(react-router/redux-saga)+less<br><a id="more"></a></p>
<h1 id="概念学习"><a href="#概念学习" class="headerlink" title="概念学习"></a>概念学习</h1><p>推荐先学React，会用之后再开始用webpack等工具<br><a href="https://github.com/petehunt/react-howto/blob/master/README-zh.md" target="_blank" rel="noopener">如何学习react</a></p>
<h2 id="React是什么"><a href="#React是什么" class="headerlink" title="React是什么"></a>React是什么</h2><p>推荐先看官方文档(1、2)，从hello world开始逐步理解react<br>期间结合下面的React入门教程(3)，加深理解React的几个特性(JSX、组件化思想、单向数据流等等)<br>5里面涉及到技术栈内容，可将里面的React知识讲解部分作为参考，其它之后再学</p>
<ol>
<li><a href="https://react.bootcss.com/react/docs/hello-world.html" target="_blank" rel="noopener">React官方文档(中文翻译)</a></li>
<li><a href="https://facebook.github.io/react/docs/hello-world.html" target="_blank" rel="noopener">React官方文档(英文)</a></li>
<li><a href="https://hulufei.gitbooks.io/react-tutorial/content/introduction.html" target="_blank" rel="noopener">React入门教程(基础概览,简短基础)</a><br>ps: 网页反应慢可直接下载PDF文件阅读<a href="https://www.gitbook.com/download/pdf/book/hulufei/react-tutorial" target="_blank" rel="noopener">点此链接下载</a></li>
<li><a href="http://jartto.wang/2017/02/19/grasp-react-component/#disqus_thread" target="_blank" rel="noopener">React组件创建、生命周期详解</a></li>
<li><a href="https://github.com/blueflylin/reactjs101" target="_blank" rel="noopener">从零开始学React(大而全的入门教程)</a> </li>
</ol>
<h3 id="扩展阅读"><a href="#扩展阅读" class="headerlink" title="扩展阅读"></a>扩展阅读</h3><h4 id="综合类"><a href="#综合类" class="headerlink" title="综合类"></a>综合类</h4><ol>
<li><a href="https://zhuanlan.zhihu.com/purerender" target="_blank" rel="noopener">pure render–分享关于 React 相关经验及发展动态</a></li>
<li><a href="http://taobaofed.org/blog/2016/08/12/optimized-react-components/" target="_blank" rel="noopener">高性能 React 组件</a> </li>
<li><a href="https://zhuanlan.zhihu.com/p/26250968?group_id=834155723037487104" target="_blank" rel="noopener">React v15.5.0更新说明 & v16.0.0更新预告</a><h4 id="React高阶组件"><a href="#React高阶组件" class="headerlink" title="React高阶组件"></a>React高阶组件</h4></li>
<li><a href="https://juejin.im/post/595243d96fb9a06bbd6f5ccd" target="_blank" rel="noopener">React 进阶之高阶组件</a>,感觉这篇文章写得最易懂</li>
<li><a href="https://zhuanlan.zhihu.com/p/24776678" target="_blank" rel="noopener">深入理解 React 高阶组件(译)</a></li>
<li><a href="http://imweb.io/topic/5907038a2739bbed32f60dad" target="_blank" rel="noopener">React高阶组件（译）</a></li>
</ol>
<p>antd源码有应用到，但官网说法是最好别用context，而使用Redux一类的库来做数据流管理，感兴趣可以了解下</p>
<ol>
<li><a href="https://segmentfault.com/a/1190000004636213" target="_blank" rel="noopener">React中的“虫洞”——Context</a></li>
<li><a href="https://github.com/brunoyang/blog/issues/9" target="_blank" rel="noopener">Context，React中隐藏的秘密！</a></li>
</ol>
<h2 id="React相关技术栈"><a href="#React相关技术栈" class="headerlink" title="React相关技术栈"></a>React相关技术栈</h2><ol>
<li><a href="https://github.com/blueflylin/reactjs101" target="_blank" rel="noopener">从零开始学React(大而全的入门教程)</a><br>为了避免碰到许多看不懂的语法，建议先看一下ES6语法</li>
</ol>
<h3 id="ES6"><a href="#ES6" class="headerlink" title="ES6"></a>ES6</h3><p>常用的ES6语法，可重点看一下<br>建议直接看2和3，3里面只用看JS语言部分，2、3中不理解的再查1,1的文档内容实例很多，通看比较耗时，也不太可能一次记得完<br>4是Airbnb的JS编码规范，非基础必须，项目编码时如果不符合规范Eslint会报错，不影响运行，保持好的编码规范就行</p>
<ol>
<li><a href="http://es6.ruanyifeng.com/" target="_blank" rel="noopener">ES6小书-ruanyifeng</a>，书中实例很多</li>
<li><a href="http://luckykun.com/work/2016-05-10/es6-feature.html" target="_blank" rel="noopener">总结ES6常用的新特性</a></li>
<li><a href="https://github.com/dvajs/dva-knowledgemap#%E6%A8%A1%E5%9D%97%E7%9A%84-import-%E5%92%8C-export" target="_blank" rel="noopener">Dva最小知识集</a></li>
<li><a href="https://github.com/yuche/javascript" target="_blank" rel="noopener">ES6编码规范(Airbnb)</a></li>
</ol>
<h3 id="webpack"><a href="#webpack" class="headerlink" title="webpack"></a>webpack</h3><p>对React有一定理解之后，可以根据下面的教程1来了解React技术栈的知识<br>看一下1的1-4章的内容,了解webpack(有相关资料辅助)之后就可以做简单的实战了，根据2的教程完成ToList</p>
<ol>
<li><a href="https://github.com/blueflylin/reactjs101" target="_blank" rel="noopener">从零开始学React(大而全的入门教程)</a></li>
<li><a href="https://juejin.im/post/5850ebf461ff4b006c7f0bb8" target="_blank" rel="noopener">React 入门最好的实例－TodoList</a></li>
</ol>
<h4 id="webpack相关资料"><a href="#webpack相关资料" class="headerlink" title="webpack相关资料"></a>webpack相关资料</h4><ol>
<li><a href="https://fakefish.github.io/react-webpack-cookbook" target="_blank" rel="noopener">react-webpack小书(相当好的实战入门)</a></li>
<li><a href="https://doc.webpack-china.org/concepts/" target="_blank" rel="noopener">webpack中文官网，概念、使用文档，全</a></li>
</ol>
<h3 id="react-router"><a href="#react-router" class="headerlink" title="react-router"></a>react-router</h3><p>看完1的第五章之后，了解react-router是什么，如果不太明白，可查看下面的react-router相关资料</p>
<ol>
<li><a href="https://github.com/blueflylin/reactjs101" target="_blank" rel="noopener">从零开始学React(大而全的入门教程)</a></li>
</ol>
<h4 id="react-router相关资料"><a href="#react-router相关资料" class="headerlink" title="react-router相关资料"></a>react-router相关资料</h4><ol>
<li><a href="http://react-guide.github.io/react-router-cn/index.html" target="_blank" rel="noopener">react-router中文文档，含API</a>，个人感觉这个最易懂</li>
<li><a href="https://github.com/reactjs/react-router-tutorial" target="_blank" rel="noopener">react-router教程(react官方出的，全英文)</a></li>
<li><a href="http://www.ruanyifeng.com/blog/2016/05/react_router.html?utm_source=tool.lu" target="_blank" rel="noopener">React-router入门教程-ruanyifeng</a></li>
<li><a href="https://github.com/ReactTraining/react-router" target="_blank" rel="noopener">react-router项目-github</a></li>
<li><a href="http://blog.csdn.net/future_todo/article/details/53036638" target="_blank" rel="noopener">React Router的一个完整示例</a></li>
</ol>
<h3 id="antd"><a href="#antd" class="headerlink" title="antd"></a>antd</h3><p>Antd组件库是开箱即用的，看一下1中的相关介绍，跑一个官方的项目实战就基本知道怎么使用了<br>之后可以根据2做个实战加深印象</p>
<ol>
<li><a href="https://ant.design/docs/react/introduce-cn" target="_blank" rel="noopener">Antd组件库</a></li>
<li><a href="https://juejin.im/post/581fd8b9bf22ec0068d5fff2" target="_blank" rel="noopener">webpack+react+react-router-antd单页面应用实例</a><h3 id="Dva"><a href="#Dva" class="headerlink" title="Dva"></a>Dva</h3>dva的内容学习可根据相关资料来学，之后在项目开发中去了解深入(Redux内容可以等有一定的实战经验后再学)<h4 id="Dva相关资料"><a href="#Dva相关资料" class="headerlink" title="Dva相关资料"></a>Dva相关资料</h4></li>
<li><a href="https://github.com/dvajs/dva-knowledgemap" target="_blank" rel="noopener">Dva知识导图</a></li>
<li><a href="https://github.com/pigcan/blog/issues/2" target="_blank" rel="noopener">初识Dva</a></li>
<li><a href="https://github.com/dvajs/dva-docs/blob/master/v1/zh-cn/tutorial/01-%E6%A6%82%E8%A6%81.md" target="_blank" rel="noopener">Dva官方入门教程</a></li>
<li><a href="https://github.com/dvajs/dva" target="_blank" rel="noopener">Dva-github</a></li>
<li><a href="https://github.com/dvajs/dva/blob/master/docs/API_zh-CN.md#onstatechangefn" target="_blank" rel="noopener">Dva的API</a></li>
</ol>
<h3 id="redux相关资料"><a href="#redux相关资料" class="headerlink" title="redux相关资料"></a>redux相关资料</h3><p>可以先看Flux内容</p>
<ol>
<li><a href="http://cn.redux.js.org/index.html" target="_blank" rel="noopener">redux中文文档</a></li>
<li><a href="http://leonshi.com/redux-saga-in-chinese/" target="_blank" rel="noopener">redux-saga中文文档</a></li>
<li><a href="http://www.jianshu.com/p/3334467e4b32" target="_blank" rel="noopener">redux核心概念</a></li>
<li><a href="https://github.com/reactjs/redux" target="_blank" rel="noopener">redux项目-github</a></li>
</ol>
<h3 id="Flux入门"><a href="#Flux入门" class="headerlink" title="Flux入门"></a>Flux入门</h3><ol>
<li><a href="http://www.ruanyifeng.com/blog/2016/01/flux.html" target="_blank" rel="noopener">Flux入门</a></li>
</ol>
<h3 id="less"><a href="#less" class="headerlink" title="less"></a>less</h3><ol>
<li><a href="http://www.css88.com/doc/less/features/" target="_blank" rel="noopener">less语言特性、高级用法</a> </li>
<li><a href="http://www.bootcss.com/p/lesscss/#about" target="_blank" rel="noopener">Less入门概览，含简单示例</a></li>
</ol>
<h3 id="mock"><a href="#mock" class="headerlink" title="mock"></a>mock</h3><ol>
<li><a href="http://mockjs.com/0.1/#" target="_blank" rel="noopener">mockjs官方文档,含API详解</a></li>
<li><a href="https://segmentfault.com/a/1190000008839142" target="_blank" rel="noopener">mockjs使用实例，含数据集分类</a></li>
</ol>
<h3 id="其他资料"><a href="#其他资料" class="headerlink" title="其他资料"></a>其他资料</h3><ol>
<li><a href="https://segmentfault.com/a/1190000007491981" target="_blank" rel="noopener">合理的使用纯函数式编程</a></li>
<li><a href="https://github.com/yuche/javascript" target="_blank" rel="noopener">ES6编码规范(Airbnb)</a></li>
</ol>
<h1 id="实战"><a href="#实战" class="headerlink" title="实战"></a>实战</h1><p>学完这么多，可以借助一些简单的实战来加深理解</p>
<h2 id="实战练习"><a href="#实战练习" class="headerlink" title="实战练习"></a>实战练习</h2><p>1、2是前面就有提到的，3跟着做一遍能加深一下技术栈的理解(很详细，最好能跟着走一遍，不能做的话也推荐看看)</p>
<ol>
<li><a href="https://juejin.im/post/5850ebf461ff4b006c7f0bb8" target="_blank" rel="noopener">React 入门最好的实例－TodoList</a></li>
<li><a href="https://juejin.im/post/581fd8b9bf22ec0068d5fff2" target="_blank" rel="noopener">webpack+react+antd单页面应用实例</a></li>
<li><a href="https://github.com/brickspert/blog/issues/1" target="_blank" rel="noopener">从零搭建React全家桶框架教程</a></li>
</ol>
<h2 id="项目实战"><a href="#项目实战" class="headerlink" title="项目实战"></a>项目实战</h2><h3 id="快速开发步骤"><a href="#快速开发步骤" class="headerlink" title="快速开发步骤"></a>快速开发步骤</h3><ol>
<li>到router.js添加path</li>
<li>menu.js中加入本条路由信息</li>
<li>在router文件夹中新建文件夹，在新建文件夹的index.js定义并输出组件</li>
<li>mock.js模拟数据<br> 4.1 mock输出在rodhog（配置信息，不用修改）<br> 4.2 mock引用在index.js（不用管）<br> 4.3 在utils/api.js中定义相关api，设置其各操作的API地址，地址唯一不能重名，一般以组件页面所在文件夹加上操作的方式命名，并export此API<br> 4.4 在mock文件夹中建立同名文件(方便查找)，引用api，定义输出数据格式（与index的dataIndex一一对应）<br> 4.5 在自定义的组件的index.js中导入api，使用api完成数据的处理</li>
<li>调试查错</li>
<li>npm run lint检查代码错误</li>
<li>commit代码</li>
</ol>
]]></content>
</entry>
<entry>
<title>一切都在意料之中</title>
<url>/2017/09/26/essay/onmyownchoose/</url>
<content><![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+8bD9luGoLpVwks81/0MHBFwjljuG/ooyR7av8a/CuW1XeIcJm9MkHL85efVrOBRaB/Dct1NFBM4YjlES+bxm1IRLDfN3gbE8zDTgURIUr6d0TerXWO1Zcs6LG1ZogPtQ/qP8uR+9rfJrhn1eLFYi2zXQrwkFfy8sGdJPLSJjCsVwkdThYngjy6dp6wiDqsZX8dsGBzduxwiMEc44EVhB3V0qd3oRRsM6HxaVYdY6Nr5N0zA9NlbsgbS1084liyNs5L1F4d5hvsUj8DsXxJy7LQq7gar5QzKfBBlU3quln+Cmaf2rfNY2tDEsvgusyH8+n8ARdmFSnfbGMOpNdsiI4uNg4GgtyBsCyFZjuS+5ZGkwjqJgPQbWGRzrOkFZjKT8BVqpvhRzerYCzG7HSWz9Qgdft8zhlJugyeSeVVl5Fsxf6Uxde/rKTrPg7dL4K2iXeoG82Dl7V61bonKMYhYK8b++KfhrQpxg=</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>
<tags>
<tag>mind</tag>
</tags>
</entry>
<entry>
<title>react学习历程记录</title>
<url>/2017/09/26/front-end/React/record/myreact/</url>
<content><![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>
<categories>
<category>Front-end</category>
<category>React</category>
</categories>
<tags>
<tag>Summary</tag>
</tags>
</entry>
<entry>
<title>170926</title>
<url>/2017/09/26/dailyDiary/2017/170926/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>react-redux学习笔记</title>
<url>/2017/09/25/front-end/React/TechStack/redux/</url>
<content><![CDATA[<p>redux相关笔记，,未完成整理<br><a id="more"></a></p>
<h1 id="redux概念"><a href="#redux概念" class="headerlink" title="redux概念"></a>redux概念</h1><p>Array的reduce函数：reduce(function(初始值，当前值，当前索引，调用reduce的数组){}，预设初始值（可选）)<br>Reduce的回调函数即被称为reducer<br>开源Lib，提供可预测的state容量管理器，与react无相依性。<br>Redux 认为，一个应用程序中，所有应用模块之间需要共享访问的数据，都应该放在 State 对象中。State以树形结构保存不同数据。</p>
<h2 id="Flux、Redux区别"><a href="#Flux、Redux区别" class="headerlink" title="Flux、Redux区别"></a>Flux、Redux区别</h2><blockquote>
<p>react - 视图引擎／库。本质上和 flux／redux 都没有依赖关系</p>
</blockquote>
<blockquote>
<p>flux - 和 react 出自于同一家公司（脸书），它是一种思路，一种如何架构应用程序的理念；在这种理念之下，具体用什么来充当视图层／数据层……都不重要——当然，最偏爱的视图层自然是系出同门的 react。<br>简单说，Flux 是一种架构思想，专门解决软件的结构问题。它跟MVC 架构是同一类东西，但是更加简单和清晰。将应用分为四部分:View(视图层)+Action(视图层发出消息)+Dispatchers(接收Action，执行回调函数)+Store(存放状态)</p>
</blockquote>
<blockquote>
<p>redux - 架构上深受 flux 启发，实现上却更接近于 elm，或者说更倾向于函数式编程的一个数据层实现。和 flux 架构对数据层的描述最大的区别就在于 redux 是采用不可变单一状态树来管理应用程序数据的。用 redux 充当数据层也可以完全兼容 flux 架构（但没好处）并且 redux 对视图层也没有倾向性，只是目前用的比较多的还是 react</p>
</blockquote>
<blockquote>
<p>Elm 是一种编程语言，它会被编译为 HTML5: HTML, CSS 和 JavaScript。根据你显示输出结果的不同，它可能是一个内置了对象的 <canvas>，或者一个更传统的网页。让我重复一遍，Elm 是一种语言，它会被编译为 三种语言 来构建 web 应用。而且，它是一个拥有强类型和 不可变（immutable）数据结构的函数式语言。</canvas></p>
</blockquote>
<h1 id="react-redux使用"><a href="#react-redux使用" class="headerlink" title="react-redux使用"></a>react-redux使用</h1><h2 id="actions"><a href="#actions" class="headerlink" title="actions"></a>actions</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">/*action*/</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> INCREMENT = <span class="string">"counter/INCREMENT"</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> DECREMENT = <span class="string">"counter/DECREMENT"</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> RESET = <span class="string">"counter/RESET"</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">increment</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> {<span class="attr">type</span>: INCREMENT}</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">decrement</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> {<span class="attr">type</span>: DECREMENT}</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">reset</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> {<span class="attr">type</span>: RESET}</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="reducer"><a href="#reducer" class="headerlink" title="reducer"></a>reducer</h2><h3 id="FIXME-state直接存储在reducer中"><a href="#FIXME-state直接存储在reducer中" class="headerlink" title="FIXME: state直接存储在reducer中??"></a>FIXME: state直接存储在reducer中??</h3><p>reducer是一个纯函数，接收action和旧的state,生成新的state.<br><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> {INCREMENT, DECREMENT, RESET} <span class="keyword">from</span> <span class="string">'../actions/counter'</span>; </span><br><span class="line"></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">* 初始化state</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> initState = {</span><br><span class="line"> count: <span class="number">0</span></span><br><span class="line">};</span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">* reducer</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> <span class="title">reducer</span>(<span class="params">state = initState, action</span>) </span>{</span><br><span class="line"> <span class="keyword">switch</span> (action.type) {</span><br><span class="line"> <span class="keyword">case</span> INCREMENT:</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> count: state.count + <span class="number">1</span></span><br><span class="line"> };</span><br><span class="line"> <span class="keyword">case</span> DECREMENT:</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> count: state.count - <span class="number">1</span></span><br><span class="line"> };</span><br><span class="line"> <span class="keyword">case</span> RESET:</span><br><span class="line"> <span class="keyword">return</span> {<span class="attr">count</span>: <span class="number">0</span>};</span><br><span class="line"> <span class="keyword">default</span>:</span><br><span class="line"> <span class="keyword">return</span> state</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<h2 id="整合reducer"><a href="#整合reducer" class="headerlink" title="整合reducer"></a>整合reducer</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> counter <span class="keyword">from</span> <span class="string">'./reducers/counter'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> <span class="title">combineReducers</span>(<span class="params">state = {}, action</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> counter: counter(state.counter, action)</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="store-最重要的"><a href="#store-最重要的" class="headerlink" title="store(最重要的!)"></a>store(最重要的!)</h2><p>通过下面代码获取一个store实例<br><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> {createStore} <span class="keyword">from</span> <span class="string">'redux'</span>;</span><br><span class="line"><span class="keyword">import</span> combineReducers <span class="keyword">from</span> <span class="string">'./reducers.js'</span>;<span class="comment">// 可以是任意自定义的reducer</span></span><br><span class="line"><span class="keyword">let</span> store = createStore(combineReducers);</span><br></pre></td></tr></table></figure></p>
<p>作用:</p>
<blockquote>
<ol>
<li>维持应用的 state；</li>
<li>提供 getState() 方法获取 state；</li>
<li>提供 dispatch(action) 触发reducers方法更新 state；</li>
<li>通过subscribe(listener) 注册监听器;</li>
<li>通过 subscribe(listener) 返回的函数注销监听器。<br>实例：<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> {createStore} <span class="keyword">from</span> <span class="string">'redux'</span>;</span><br><span class="line"><span class="keyword">import</span> combineReducers <span class="keyword">from</span> <span class="string">'./reducers.js'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> store = createStore(combineReducers);</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> store;</span><br></pre></td></tr></table></figure>
</li>
</ol>
</blockquote>
<h2 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> {increment, decrement, reset} <span class="keyword">from</span> <span class="string">'./actions/counter'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> store <span class="keyword">from</span> <span class="string">'./store'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 打印初始状态</span></span><br><span class="line"><span class="built_in">console</span>.log(store.getState());</span><br><span class="line"></span><br><span class="line"><span class="comment">// 每次 state 更新时，打印日志</span></span><br><span class="line"><span class="comment">// 注意 subscribe() 返回一个函数用来注销监听器</span></span><br><span class="line"><span class="keyword">let</span> unsubscribe = store.subscribe(<span class="function"><span class="params">()</span> =></span></span><br><span class="line"> <span class="built_in">console</span>.log(store.getState())</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 发起一系列 action</span></span><br><span class="line">store.dispatch(increment());</span><br><span class="line">store.dispatch(decrement());</span><br><span class="line">store.dispatch(reset());</span><br><span class="line"><span class="comment">// 停止监听 state 更新</span></span><br><span class="line">unsubscribe();</span><br></pre></td></tr></table></figure>
<h2 id="connect"><a href="#connect" class="headerlink" title="connect"></a>connect</h2><p>connect接收两个参数，一个mapStateToProps,就是把redux的state，转为组件的Props，还有一个参数是mapDispatchToprops,<br>就是把发射actions的方法，转为Props属性函数。<br>示例<br><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React, {Component} <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="keyword">import</span> {increment, decrement, reset} <span class="keyword">from</span> <span class="string">'actions/counter'</span>;</span><br><span class="line"><span class="keyword">import</span> {connect} <span class="keyword">from</span> <span class="string">'react-redux'</span>;</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Counter</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>{</span><br><span class="line"> ...组件内容</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> mapStateToProps = <span class="function">(<span class="params">state</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> counter: state.counter</span><br><span class="line"> }</span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> mapDispatchToProps = <span class="function">(<span class="params">dispatch</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> increment: <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> dispatch(increment())</span><br><span class="line"> },</span><br><span class="line"> decrement: <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> dispatch(decrement())</span><br><span class="line"> },</span><br><span class="line"> reset: <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> dispatch(reset())</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> connect(mapStateToProps, mapDispatchToProps)(Counter);</span><br></pre></td></tr></table></figure></p>
<h2 id="store"><a href="#store" class="headerlink" title="store"></a>store</h2><p>store定义形式和redux的store相同</p>
<h2 id="使用Provider传入组件"><a href="#使用Provider传入组件" class="headerlink" title="使用Provider传入组件"></a>使用Provider传入组件</h2><blockquote>
<p>所有容器组件都可以访问 Redux store，所以可以手动监听它。一种方式是把它以 props 的形式传入到所有容器组件中。但这太麻烦了，因为必须要用 store 把展示组件包裹一层，仅仅是因为恰好在组件树中渲染了一个容器组件。<br>建议的方式是使用指定的 React Redux 组件来魔法般的让所有容器组件都可以访问 store，而不必显示地传递它。只需要在渲染根组件时使用即可。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="keyword">import</span> ReactDom <span class="keyword">from</span> <span class="string">'react-dom'</span>;</span><br><span class="line"><span class="keyword">import</span> {AppContainer} <span class="keyword">from</span> <span class="string">'react-hot-loader'</span>;</span><br><span class="line"><span class="keyword">import</span> {Provider} <span class="keyword">from</span> <span class="string">'react-redux'</span>;</span><br><span class="line"><span class="keyword">import</span> store <span class="keyword">from</span> <span class="string">'./redux/store'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> getRouter <span class="keyword">from</span> <span class="string">'router/router'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*初始化*/</span></span><br><span class="line">renderWithHotReload(getRouter());</span><br><span class="line"></span><br><span class="line"><span class="comment">/*热更新*/</span></span><br><span class="line"><span class="keyword">if</span> (<span class="built_in">module</span>.hot) {</span><br><span class="line"> <span class="built_in">module</span>.hot.accept(<span class="string">'./router/router'</span>, () => {</span><br><span class="line"> <span class="keyword">const</span> getRouter = <span class="built_in">require</span>(<span class="string">'router/router'</span>).default;</span><br><span class="line"> renderWithHotReload(getRouter());</span><br><span class="line"> });</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">renderWithHotReload</span>(<span class="params">RootElement</span>) </span>{</span><br><span class="line"> ReactDom.render(</span><br><span class="line"> <AppContainer></span><br><span class="line"> <Provider store={store}></span><br><span class="line"> {RootElement}</span><br><span class="line"> <<span class="regexp">/Provider></span></span><br><span class="line"><span class="regexp"> </</span>AppContainer>,</span><br><span class="line"> <span class="built_in">document</span>.getElementById(<span class="string">'app'</span>)</span><br><span class="line"> )</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="redux异步处理库"><a href="#redux异步处理库" class="headerlink" title="redux异步处理库"></a>redux异步处理库</h2><p>参考<a href="https://github.com/sorrycc/blog/issues/6" target="_blank" rel="noopener">支付宝前端应用架构的发展和选择</a></p>
<blockquote>
<p>redux-thunk：支持函数形式的 action，这样在 action 里就可以 dispatch 其他的 action 了。这是最简单应该也是用地最广的方案吧，对于简单项目应该是够的。<br>redux-promise：redux-promise 和上面的类似，支持 promise 形式的 action，这样 action 里就可以通过看似同步的方式来组织代码。<br>redux-saga：</p>
</blockquote>
<h2 id="redux-thunk"><a href="#redux-thunk" class="headerlink" title="redux-thunk"></a>redux-thunk</h2><p>参考<a href="http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_two_async_operations.html" target="_blank" rel="noopener">Redux入门教程-阮一峰</a></p>
<blockquote>
<p>中间件就是一个函数，对store.dispatch方法进行了改造，在发出 Action 和执行 Reducer 这两步之间，添加了其他功能。<br>下面代码中，对store.dispatch进行了重定义，在发送 Action 前后添加了打印功能。这就是中间件的雏形。<br><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> next = store.dispatch;</span><br><span class="line">store.dispatch = <span class="function"><span class="keyword">function</span> <span class="title">dispatchAndLog</span>(<span class="params">action</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'dispatching'</span>, action);</span><br><span class="line"> next(action);</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'next state'</span>, store.getState());</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
</blockquote>
<h2 id="Redux-saga"><a href="#Redux-saga" class="headerlink" title="Redux-saga"></a>Redux-saga</h2><p>用于管理 action，处理异步逻辑的中间件。可测试、可 mock、声明式的指令。<br>redux-saga 通过创建 Sagas 将所有的异步操作逻辑收集在一个地方集中处理，可以用来代替 redux-thunk 中间件。</p>
]]></content>
<categories>
<category>Front-end</category>
<category>React</category>
</categories>
<tags>
<tag>React</tag>
</tags>
</entry>
<entry>
<title>flux学习笔记整理</title>
<url>/2017/09/25/front-end/React/TechStack/flux/</url>
<content><![CDATA[<p>Flux笔记相关,未完成整理<br><a id="more"></a><br>项目逻辑：<br>Action：导入dispacher和actionType，导出一个带action变化处理方法的对象，方法中调用Dispatcher分发action<br>Store：导入dispacher和actionType，先继承EventEmitter实现回调函数绑定与解绑方法，之后实例化对象并在dispacher中注册action回调函数。之后导出此对象<br>Dispatcher：导入Dispatcher继承Dispatcher，重写handleAction方法，实例化并导出<br>View：导入react、component、前面导出的action，在组件中实现，在constructor•中绑定触发事件并初始化state，之后重写触发函数（要有action的变化去触发dispatcher），之后在render返回的组件中将组件的状态与触发函数绑定起来，最后导出此组件。</p>
<h3 id="Dispatcher配置"><a href="#Dispatcher配置" class="headerlink" title="Dispatcher配置"></a>Dispatcher配置</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> {Dispatcher} <span class="keyword">from</span> <span class="string">'flux'</span>;</span><br><span class="line"><span class="comment">//继承API,主要是继承了 dispatch、register 和 subscribe 的方法</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">DispatcherClass</span> <span class="keyword">extends</span> <span class="title">Dispatcher</span>()</span>{<span class="comment">//</span></span><br><span class="line"> handleAction(action){<span class="comment">//重写方法，有Action时会被触发</span></span><br><span class="line"> <span class="keyword">this</span>.dispatch({</span><br><span class="line"> type:action.type,</span><br><span class="line"> payload:action.payload,</span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="keyword">const</span> AppDispatcher =<span class="keyword">new</span> DispatcherClass();<span class="comment">//实例化Class</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> AppDispatcher;<span class="comment">//导出常量（ES6)</span></span><br></pre></td></tr></table></figure>
<h3 id="ACTION配置"><a href="#ACTION配置" class="headerlink" title="ACTION配置"></a>ACTION配置</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">//导入Dispatcher</span></span><br><span class="line"><span class="keyword">import</span> AppDispatcher <span class="keyword">from</span> <span class="string">'../dispatch/AppDispatcher.js'</span>;</span><br><span class="line"><span class="comment">//导入actionTypes</span></span><br><span class="line"><span class="keyword">import</span> {ADD_TODO} <span class="keyword">from</span> <span class="string">'../constants/actionTypes'</span>;</span><br><span class="line"><span class="comment">//???????????</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> TodoActions ={</span><br><span class="line"> addToDO(text){</span><br><span class="line"> AppDispatcher.handleAction({</span><br><span class="line"> type:ADD_TODO,</span><br><span class="line"> payload:{text,},</span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category>Front-end</category>
<category>React</category>
</categories>
<tags>
<tag>React</tag>
</tags>
</entry>
<entry>
<title>dva学习笔记</title>
<url>/2017/09/25/front-end/React/TechStack/dva/</url>
<content><![CDATA[<p><a href="https://github.com/dvajs/dva/blob/master/docs/API_zh-CN.md#onstatechangefn" target="_blank" rel="noopener">dva API</a><br>dva相关笔记,未完成整理<br><a id="more"></a><br>在调用 const app = dva(opt)返回dva实例，并注册了钩子函数; 初始化之后，dva为我们提供了三个参数入口，分别为app.model、app.router、app.start。</p>
<ol>
<li>app.model();<br>1) namespace,字符串，不支持多层<br>2) state：初始值opts.initialState<br>3) reducer：<br>以 key/value 格式定义 reducer。用于处理同步操作，唯一可以修改 state 的地方。由 action 触发。<br>格式为 (state, action) => newState 或 [(state, action) => newState, enhancer]。<br>4) effects<br>以 key/value 格式定义 effect。用于处理异步操作和业务逻辑，不直接修改 state。由 action 触发，可以触发 action，可以和服务器交互，可以获取全局 state 的数据等等。<br>格式为 <em>(action, effects) => void 或 [</em>(action, effects) => void, { type }]。<br>5) subscriptions<br>以 key/value 格式定义 subscription。subscription 是订阅，用于订阅一个数据源，然后根据需要 dispatch 相应的 action。在 app.start() 时被执行，数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。<br>格式为 ({ dispatch, history }, done) => listenFunction。<br>注意：如果要使用 app.unmodel()，subscription 必须返回 unlisten 方法，用于取消数据订阅。</li>
<li>app.unmodel(namespace)<br>取消 model 注册，清理 reducers, effects 和 subscriptions。subscription 如果没有返回 unlisten 函数，使用 app.unmodel 会给予警告。</li>
<li>app.router(({ history, app }) => {RouterConfig(如：return (<router></router>);)})</li>
<li>app.start(selector);</li>
</ol>
<h2 id="roadhog"><a href="#roadhog" class="headerlink" title="roadhog"></a>roadhog</h2><blockquote>
<p>roadhog和webpack DevServer相比较有哪些优势和不足？<br>roadhog 是基于 webpackDevServer 封装的，roadhog server = webpackDevServer + create-react-app 的配置</p>
</blockquote>
<h2 id="实例"><a href="#实例" class="headerlink" title="实例"></a>实例</h2><h1 id="dva使用"><a href="#dva使用" class="headerlink" title="dva使用"></a>dva使用</h1><h2 id="Model的使用"><a href="#Model的使用" class="headerlink" title="Model的使用"></a>Model的使用</h2><ol>
<li><p>新建model 基本示例代码如下</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> {</span><br><span class="line"> namespace: <span class="string">'modelTest'</span>,</span><br><span class="line"> state: {</span><br><span class="line"> cnt: <span class="number">55</span>,</span><br><span class="line"> },</span><br><span class="line"> subscriptions: {</span><br><span class="line"> setup ({ dispatch, history }) {</span><br><span class="line"> history.listen(<span class="function"><span class="params">location</span> =></span> {</span><br><span class="line"> <span class="keyword">if</span> (location.pathname === <span class="string">'/log/query/protectlog'</span>) {</span><br><span class="line"> dispatch({</span><br><span class="line"> type: <span class="string">'set'</span>,</span><br><span class="line"> payload: { <span class="attr">cnt</span>: <span class="number">8</span> },</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> effects: {</span><br><span class="line"> },</span><br><span class="line"> reducers: {</span><br><span class="line"> <span class="keyword">set</span> (state, action) {</span><br><span class="line"> <span class="keyword">const</span> { cnt } = action.payload</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'set'</span>, cnt)</span><br><span class="line"> <span class="keyword">return</span> { cnt }</span><br><span class="line"> },</span><br><span class="line"> add (state) {</span><br><span class="line"> <span class="keyword">const</span> cnt = state.cnt + <span class="number">1</span></span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'add'</span>, cnt)</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> cnt,</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> dec (state) {</span><br><span class="line"> <span class="keyword">const</span> cnt = state.cnt - <span class="number">1</span></span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'dec'</span>, cnt)</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> cnt,</span><br><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>
</li>
<li><p>在router，getComponent中注册model???(why)<br>以下为简单示例</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span></span><br><span class="line"><span class="keyword">import</span> PropTypes <span class="keyword">from</span> <span class="string">'prop-types'</span></span><br><span class="line"><span class="keyword">import</span> { Router } <span class="keyword">from</span> <span class="string">'dva/router'</span></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">'./routes/app'</span></span><br><span class="line"><span class="keyword">const</span> registerModel = <span class="function">(<span class="params">app, model</span>) =></span> {</span><br><span class="line"> <span class="keyword">if</span> (!(app._models.filter(<span class="function"><span class="params">m</span> =></span> m.namespace === model.namespace).length === <span class="number">1</span>)) {</span><br><span class="line"> app.model(model)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="keyword">const</span> Routers = <span class="function"><span class="keyword">function</span> (<span class="params">{ history, app }</span>) </span>{</span><br><span class="line"> <span class="keyword">const</span> routes = [</span><br><span class="line"> {</span><br><span class="line"> path: <span class="string">'/'</span>,</span><br><span class="line"> component: App,</span><br><span class="line"> <span class="comment">// 指定主目录</span></span><br><span class="line"> getIndexRoute (nextState, cb) {</span><br><span class="line"> <span class="comment">// webpack commonjs异步加载语法</span></span><br><span class="line"> <span class="built_in">require</span>.ensure([], (<span class="built_in">require</span>) => {</span><br><span class="line"> registerModel(app, <span class="built_in">require</span>(<span class="string">'./models/dashboard'</span>))</span><br><span class="line"> cb(<span class="literal">null</span>, { <span class="attr">component</span>: <span class="built_in">require</span>(<span class="string">'./routes/dashboard/'</span>) })</span><br><span class="line"> }, <span class="string">'dashboard'</span>)</span><br><span class="line"> },</span><br><span class="line"> childRoutes: [</span><br><span class="line"> {</span><br><span class="line"> path: <span class="string">'dashboard'</span>,</span><br><span class="line"> getComponent (nextState, cb) {</span><br><span class="line"> <span class="built_in">require</span>.ensure([], (<span class="built_in">require</span>) => {</span><br><span class="line"> registerModel(app, <span class="built_in">require</span>(<span class="string">'./models/dashboard'</span>))</span><br><span class="line"> cb(<span class="literal">null</span>, <span class="built_in">require</span>(<span class="string">'./routes/dashboard/'</span>))</span><br><span class="line"> }, <span class="string">'dashboard'</span>)</span><br><span class="line"> },</span><br><span class="line"> }, {</span><br><span class="line"> path: <span class="string">'login'</span>,</span><br><span class="line"> getComponent (nextState, cb) {</span><br><span class="line"> <span class="built_in">require</span>.ensure([], (<span class="built_in">require</span>) => {</span><br><span class="line"> registerModel(app, <span class="built_in">require</span>(<span class="string">'./models/login'</span>))</span><br><span class="line"> cb(<span class="literal">null</span>, <span class="built_in">require</span>(<span class="string">'./routes/login/'</span>))</span><br><span class="line"> }, <span class="string">'login'</span>)</span><br><span class="line"> },</span><br><span class="line"> }, {</span><br><span class="line"> path: <span class="string">'chart/lineChart'</span>,</span><br><span class="line"> getComponent (nextState, cb) {</span><br><span class="line"> <span class="built_in">require</span>.ensure([], (<span class="built_in">require</span>) => {</span><br><span class="line"> cb(<span class="literal">null</span>, <span class="built_in">require</span>(<span class="string">'./routes/chart/lineChart/'</span>))</span><br><span class="line"> }, <span class="string">'chart-lineChart'</span>)</span><br><span class="line"> },</span><br><span class="line"> }, {</span><br><span class="line"> path: <span class="string">'chart/barChart'</span>,</span><br><span class="line"> getComponent (nextState, cb) {</span><br><span class="line"> <span class="built_in">require</span>.ensure([], (<span class="built_in">require</span>) => {</span><br><span class="line"> cb(<span class="literal">null</span>, <span class="built_in">require</span>(<span class="string">'./routes/chart/barChart/'</span>))</span><br><span class="line"> }, <span class="string">'chart-barChart'</span>)</span><br><span class="line"> },</span><br><span class="line"> }, {</span><br><span class="line"> path: <span class="string">'log'</span>,</span><br><span class="line"> childRoutes: [</span><br><span class="line"> {</span><br><span class="line"> path: <span class="string">'query'</span>,</span><br><span class="line"> childRoutes: [</span><br><span class="line"> {</span><br><span class="line"> path: <span class="string">'webvisit'</span>,</span><br><span class="line"> getComponent (nextState, cb) {</span><br><span class="line"> <span class="built_in">require</span>.ensure([], (<span class="built_in">require</span>) => {</span><br><span class="line"> cb(<span class="literal">null</span>, <span class="built_in">require</span>(<span class="string">'./routes/log/query/webvisit'</span>))</span><br><span class="line"> }, <span class="string">'log-query-webvisit'</span>)</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> path: <span class="string">'imchat'</span>,</span><br><span class="line"> getComponent (nextState, cb) {</span><br><span class="line"> <span class="built_in">require</span>.ensure([], (<span class="built_in">require</span>) => {</span><br><span class="line"> cb(<span class="literal">null</span>, <span class="built_in">require</span>(<span class="string">'./routes/log/query/imchat'</span>))</span><br><span class="line"> }, <span class="string">'log-query-imchat'</span>)</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> ],</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> path: <span class="string">'system'</span>,</span><br><span class="line"> childRoutes: [</span><br><span class="line"> {</span><br><span class="line"> path: <span class="string">'alert'</span>,</span><br><span class="line"> getComponent (nextState, cb) {</span><br><span class="line"> <span class="built_in">require</span>.ensure([], (<span class="built_in">require</span>) => {</span><br><span class="line"> cb(<span class="literal">null</span>, <span class="built_in">require</span>(<span class="string">'./routes/log/system/alert'</span>))</span><br><span class="line"> }, <span class="string">'log-system-alert'</span>)</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> path: <span class="string">'tunnel-info'</span>,</span><br><span class="line"> getComponent (nextState, cb) {</span><br><span class="line"> <span class="built_in">require</span>.ensure([], (<span class="built_in">require</span>) => {</span><br><span class="line"> cb(<span class="literal">null</span>, <span class="built_in">require</span>(<span class="string">'./routes/network/vpn/tunnel/Info'</span>))</span><br><span class="line"> }, <span class="string">'network-vpntunnel-info'</span>)</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> path: <span class="string">'cert'</span>,</span><br><span class="line"> getComponent (nextState, cb) {</span><br><span class="line"> <span class="built_in">require</span>.ensure([], (<span class="built_in">require</span>) => {</span><br><span class="line"> cb(<span class="literal">null</span>, <span class="built_in">require</span>(<span class="string">'./routes/network/vpn/cert'</span>))</span><br><span class="line"> }, <span class="string">'network-cert'</span>)</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> ],</span><br><span class="line"> },</span><br><span class="line"> ],</span><br><span class="line"> }, {</span><br><span class="line"> <span class="comment">// 通配符，贪婪匹配，只能放最后（不然可能覆盖所有匹配）</span></span><br><span class="line"> path: <span class="string">'*'</span>,</span><br><span class="line"> getComponent (nextState, cb) {</span><br><span class="line"> <span class="built_in">require</span>.ensure([], (<span class="built_in">require</span>) => {</span><br><span class="line"> cb(<span class="literal">null</span>, <span class="built_in">require</span>(<span class="string">'./routes/error/'</span>))</span><br><span class="line"> }, <span class="string">'error'</span>)</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> ],</span><br><span class="line"> },</span><br><span class="line"> ]</span><br><span class="line"> <span class="keyword">return</span> <span class="xml"><span class="tag"><<span class="name">Router</span> <span class="attr">history</span>=<span class="string">{history}</span> <span class="attr">routes</span>=<span class="string">{routes}</span> /></span></span></span><br><span class="line"><span class="xml">}</span></span><br><span class="line"><span class="xml">Routers.propTypes = {</span></span><br><span class="line"><span class="xml"> history: PropTypes.object,</span></span><br><span class="line"><span class="xml"> app: PropTypes.object,</span></span><br><span class="line"><span class="xml">}</span></span><br><span class="line"><span class="xml">export default Routers</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>在组件中connect Model,dva调用的是<a href="#ReduxConnect">Redux的connect方法</a>,示例如下</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span></span><br><span class="line"><span class="keyword">import</span> PropTypes <span class="keyword">from</span> <span class="string">'prop-types'</span></span><br><span class="line"><span class="keyword">import</span> { connect } <span class="keyword">from</span> <span class="string">'dva'</span></span><br><span class="line"><span class="keyword">import</span> { Button } <span class="keyword">from</span> <span class="string">'antd'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> TestModel = <span class="function">(<span class="params">{ dispatch, cnt }</span>) =></span> {</span><br><span class="line"> <span class="keyword">const</span> onDec = <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> dispatch({</span><br><span class="line"> type: <span class="string">'modelTest/dec'</span>,</span><br><span class="line"> payload: { },</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">const</span> onSet = <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> dispatch({</span><br><span class="line"> type: <span class="string">'modelTest/set'</span>,</span><br><span class="line"> payload: { <span class="attr">cnt</span>: <span class="number">6</span> },</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> onAdd = <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> dispatch({</span><br><span class="line"> type: <span class="string">'modelTest/add'</span>,</span><br><span class="line"> payload: { },</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <div></span><br><span class="line"> <h1>{cnt}<<span class="regexp">/h1></span></span><br><span class="line"><span class="regexp"> <Button onClick={onAdd}>add</</span>Button></span><br><span class="line"> <Button onClick={onDec}>dec<<span class="regexp">/Button></span></span><br><span class="line"><span class="regexp"> <Button onClick={onSet}>set</</span>Button></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><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">TestModel.propTypes = {</span></span><br><span class="line"><span class="regexp"> dispatch: PropTypes.func,</span></span><br><span class="line"><span class="regexp"> cnt: PropTypes.number,</span></span><br><span class="line"><span class="regexp">}</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/ 注： 此处的state为app model的整体state，根据state.namespace值来获取当前所需model</span></span><br><span class="line"><span class="regexp">const mapStateToProps = (state, ownProps) => {</span></span><br><span class="line"><span class="regexp"> console.log('map', state)</span></span><br><span class="line"><span class="regexp"> return {</span></span><br><span class="line"><span class="regexp"> ...ownProps,</span></span><br><span class="line"><span class="regexp"> cnt: state.modelTest.cnt,</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">export default connect(mapStateToProps)(TestModel)</span></span><br></pre></td></tr></table></figure>
</li>
</ol>
<p>注：<br><span id="ReduxConnect"><a href="http://cn.redux.js.org/docs/react-redux/api.html" target="_blank" rel="noopener">Redux</a>的connect方法</span><br><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])(组件)</span><br></pre></td></tr></table></figure></p>
]]></content>
<categories>
<category>Front-end</category>
<category>React</category>
</categories>
<tags>
<tag>React</tag>
</tags>
</entry>
<entry>
<title>es6语法学习笔记</title>
<url>/2017/09/25/front-end/basic/js/es6/</url>
<content><![CDATA[<p>介绍React中常用的ES6高频语法及ES6语法学习笔记。<br><a id="more"></a></p>
<h1 id="React高频语法"><a href="#React高频语法" class="headerlink" title="React高频语法"></a>React高频语法</h1><h2 id="箭头函数arrow-function"><a href="#箭头函数arrow-function" class="headerlink" title="箭头函数arrow function"></a>箭头函数arrow function</h2><!-- 在ES6中开始投入使用，使用的话需要装babel-preset-stage-0来预处理 -->
<p>新特性，可以省略function，直接写参数和执行结果，语法：标识符=>表达式，表达式{}会被解析为块（执行逻辑），若要解析为对象使用({})<br>箭头函数没有自身this值，其this值直接继承自外围作用域<br>示例:<br><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">handleClick = <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"点击操作"</span>)</span><br><span class="line"> <span class="keyword">let</span> { count } = <span class="keyword">this</span>.state</span><br><span class="line"> count++</span><br><span class="line"> <span class="keyword">this</span>.setState({count})</span><br><span class="line">}</span><br><span class="line">render = <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">const</span> count = <span class="keyword">this</span>.state.count</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <button onClick={<span class="keyword">this</span>.handleClick}>点我{count}次<<span class="regexp">/button></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>
<h1 id="ES6语法学习笔记"><a href="#ES6语法学习笔记" class="headerlink" title="ES6语法学习笔记"></a>ES6语法学习笔记</h1><h2 id="Let和const"><a href="#Let和const" class="headerlink" title="Let和const"></a>Let和const</h2><h3 id="Let"><a href="#Let" class="headerlink" title="Let"></a>Let</h3><p>特性：</p>
<ol>
<li>只在所在代码块内有效</li>
<li>不存在变量提升（变量提升：未声明前有undefinded值，且会覆盖外层同名变量）</li>
<li>暂时性死区，temporal dead zone，简称 TDZ（let覆盖var作用域，导致var不可用，且在let声明之前也不可用）</li>
<li>不允许重复声明（包括和const、var）<br>块级作用域</li>
<li>（ES6可在块级作用域中声明函数，最好声明变量式函数）</li>
<li>ES5 只有全局作用域和函数作用域，没有块级作用域</li>
<li>Do方法获取块级作用域返回值<h3 id="Const"><a href="#Const" class="headerlink" title="Const"></a>Const</h3>声明一个只读常量，必须在声明时赋值，否则报错。</li>
<li>不存在变量提升，存在暂时性死区(同样会覆盖同名var作用域)</li>
<li>不能重复声明（包括和let、var）</li>
<li>实现是通过不能修改内存地址。对象const不可控<h3 id="顶层对象属性"><a href="#顶层对象属性" class="headerlink" title="顶层对象属性"></a>顶层对象属性</h3>浏览器：window<br>Node：global<br>ES5的顶层对象属性与全局变量等价<br>let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性</li>
</ol>
<h2 id="变量的解构赋值"><a href="#变量的解构赋值" class="headerlink" title="变量的解构赋值"></a>变量的解构赋值</h2><h3 id="模式匹配"><a href="#模式匹配" class="headerlink" title="模式匹配"></a>模式匹配</h3><ol>
<li>数组、对象均可</li>
<li>等式两边都要是可遍历的结构，如let [x, y, z] = new Set([‘a’, ‘b’, ‘c’]);</li>
<li>允许指定默认值（惰性求值，当匹配项严格等于undefiend时生效）</li>
<li>对象赋值结构{属性：变量}={属性：值}，等号两边属性同名才能得到对应值，无次序影响。</li>
<li>数值对象解构赋值时会被转化成对象</li>
<li>Undefined和NULL不能解构赋值</li>
<li>函数参数也可以解构赋值（eg.:add([x,y]){return x+y}），可以使用默认值（解构失败时使用）</li>
<li>尽量不要放置圆括号<h3 id="用途："><a href="#用途：" class="headerlink" title="用途："></a>用途：</h3></li>
<li>变换变量值</li>
<li>函数返回多个值</li>
<li>函数参数定义，可无序可有序</li>
<li>快速提取JSON数据</li>
<li>函数参数默认值</li>
<li>遍历MAP结构<h2 id="字符串扩展"><a href="#字符串扩展" class="headerlink" title="字符串扩展"></a>字符串扩展</h2></li>
<li>Unicode支持</li>
<li>codePointAT：JavaScript内部，字符以UTF-16的格式储存，每个字符固定为2个字节。对于那些需要4个字节储存的字符（Unicode码点大于0xFFFF的字符），JavaScript会认为它们是两个字符。</li>
<li>fromCodePoint</li>
<li>字符串遍历接口：for(… of …)，可识别大于0xFFFF的码点</li>
<li>at方法（对应charAt）</li>
<li>normalize()</li>
<li>includes(), startsWith(), endsWith()有、在头、在尾，返回bool</li>
<li>repeat(n)重复字符n次并返回</li>
<li>padStart()，padEnd()，补全字符串</li>
<li>模板字符串，可嵌入变量(${}引入，js表达式均可，函数也可)，可多行，`标识<br>正则扩展<br>数值扩展</li>
<li>Number.isFinite(), Number.isNaN()、Number.isInteger()</li>
<li>Number.parseInt(), Number.parseFloat()</li>
<li>Number.EPSILON:可接受的误差范围，常量</li>
<li>安全整数和Number.isSafeInteger()</li>
<li>Math.trunc()去小数取整、Math.sign()判断正负零</li>
<li>…………………………….</li>
<li>指数运算符<strong>，eg：2</strong>3=8</li>
<li><h2 id="函数扩展"><a href="#函数扩展" class="headerlink" title="函数扩展"></a>函数扩展</h2></li>
<li>默认值</li>
<li>与解构赋值配合使用</li>
<li>Length属性，返回未指定默认值的参数个数</li>
<li>设置默认值有参数单独作用域</li>
<li>Rest参数，即…变量，只能是最后一个参数</li>
<li>name属性</li>
<li>箭头函数<br>1) 返回对象得加大括号<br>2) 可与赋值解构、rest…配合使用<br>3) This指向固定化，this对象是其定义时所在的对象的this，箭头函数嵌套时this为外层对象的this<br>4) arguments、super、new.target均指向外层函数对应变量</li>
<li>尾调用（Tail Call）优化（严格模式下有效）。函数f的最后一步是调用函数g（return g()），这就叫尾调用。</li>
<li>尾递归优化（严格模式下有效）</li>
<li>允许函数参数尾逗号<h2 id="数组扩展"><a href="#数组扩展" class="headerlink" title="数组扩展"></a>数组扩展</h2></li>
<li>扩展（spread）运算符…<br>1) 它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。<br>2) 主要用于函数调用（函数参数中…是将多个参数整合为一个数组，函数调用使用…将一个数组展开为多个参数）<br>3) 替代apply方法<br>应用：<br>1) 合并数组<br>2) 和解构赋值结合<br>3) 字符串转换为数组[…’hello’]即 [ “h”, “e”, “l”, “l”, “o” ]，比split精准<br>4) Map、Set、Iterator、Generator</li>
<li>Array.from()<br>Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象</li>
<li>Array.of方法用于将一组值，转换为数组。</li>
<li>数组实例的 copyWithin(target,start,end) </li>
<li>数组实例的 find() 和 findIndex()</li>
<li>fill(定值)，用于初始化or格式化数组</li>
<li>数组实例的 entries()键值对，keys()键 和 values()值 ，用于遍历数组</li>
<li>Includes()，是否包含</li>
<li>数组的空位指定为undefined（尽量避免）<h2 id="对象扩展"><a href="#对象扩展" class="headerlink" title="对象扩展"></a>对象扩展</h2></li>
<li>ES6 允许在对象之中，直接写变量。这时，属性名为变量名, 属性值为变量的值。注：简洁写法的属性名总是字符串</li>
<li>Object.assign：Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。</li>
</ol>
<h2 id="Symbol"><a href="#Symbol" class="headerlink" title="Symbol"></a>Symbol</h2><p>原始数据类型，标识独一无二的值。<br>字符串或数字可以作为属性的键，symbol也可以，它不等同于任何字符串，因而这个以symbol为键的属性可以保证不与任何其它属性产生冲突。<br>原始数据类型（7）：数值（Number）、字符串（String）、Boolean、Object、undefined、Null、Symbol</p>
<h2 id="Set"><a href="#Set" class="headerlink" title="Set"></a>Set</h2><p>成员值唯一，类似数组结构。成员类型不定</p>
<ol>
<li>遍历：keys()、values()、entries()、forEach()</li>
<li>WeakSet：成员只能是对象</li>
</ol>
<h2 id="Map"><a href="#Map" class="headerlink" title="Map"></a>Map</h2><p>Object：键值对集合，字符串作为键值<br>Map: 键值对集合,键值类型不限<br>遍历：同Set<br>WeakMap:只接受对象和null值作为键名<br>Proxy<br>Proxy 实际上重载（overload）了点运算符，即用自己的定义覆盖了语言的原始定义<br>Promise</p>
<h2 id="Iterator"><a href="#Iterator" class="headerlink" title="Iterator"></a>Iterator</h2><p>任意一个对象的Symbol.iterator方法，等于该对象的遍历器生成函数，调用该函数会返回该对象的一个遍历器对象（由next()方法）。<br>Genereator<br>yeild，函数分段执行。</p>
<p>生成器是迭代器。所有的生成器都有内建.next()和<a href>Symbol.iterator</a>方法的实现。你只须编写循环部分的行为。<br>作用：实现异步处理</p>
<h2 id="Thunk函数"><a href="#Thunk函数" class="headerlink" title="Thunk函数"></a>Thunk函数</h2><p>编译器的”传名调用”实现，往往是将参数放到一个临时函数之中，再将这个临时函数传入函数体。这个临时函数就叫做 Thunk 函数。<br>JS的Thunk函数：<br>JavaScript 语言是传值调用，它的 Thunk 函数含义有所不同。在 JavaScript 语言中，Thunk 函数替换的不是表达式，而是多参数函数，Thunk函数将多参带回调的函数替换成单参数的版本，使该函数只接受回调函数作为参数。Thunk函数接收多参数，返回一个只接受回调函数的函数，即返回一开始被替换的函数。<br>for…of<br>for…of：遍历的是值<br>for…in:数组遍历的是index，对象遍历的是键</p>
<h2 id="继承"><a href="#继承" class="headerlink" title="继承"></a>继承</h2><p>【】（<a href="http://keenwon.com/1524.html）" target="_blank" rel="noopener">http://keenwon.com/1524.html）</a></p>
<p>ES6和ES5的继承是一模一样的，只是多了class 和extends ，ES6的子类和父类，子类原型和父类原型，通过<strong>proto</strong> 连接。</p>
<h1 id="dva最小知识集中的ES6"><a href="#dva最小知识集中的ES6" class="headerlink" title="dva最小知识集中的ES6"></a>dva最小知识集中的ES6</h1><p><a href="https://github.com/dvajs/dva-knowledgemap#react-component" target="_blank" rel="noopener">dva最小知识集</a></p>
<ol>
<li>块级作用域，变量let关键字，常量const</li>
<li>对象字面量的属性赋值简写（property value shorthand）这是析构的反向操作，用于重新组织一个 Object 。</li>
<li>赋值解构？？？（需要实践）（let,const实现）析构赋值让我们从 Object 或 Array 里取部分数据存为变量。<br>Import和export会用到<br>export在导出接口的时候，必须与模块内部的变量具有一一对应的关系{}<br><a href="http://imweb.io/topic/582293894067ce9726778be9" target="_blank" rel="noopener">http://imweb.io/topic/582293894067ce9726778be9</a></li>
<li>Spread Operator…<br>函数参数- 默认值、参数打包、数组展开（Default【函数参数可定默认值x=1一类】、Rest【获取数组部分项。函数参数…y是多个值，进入函数被转换为y数组】、Spread【…[1,2,3]】）</li>
<li>箭头函数<br>1) 简化了代码形式，默认return表达式结果。<br>2) 自动绑定语义this，即定义函数时的this。</li>
<li>字符串模板 Template strings</li>
<li>Iterators（迭代器，next）+ for..of</li>
<li>生成器（Generrators）<br>dva 的 effects 是通过 generator 组织的。Generator 返回的是迭代器，通过 yield 关键字实现暂停功能。</li>
<li>Class（语法糖，有constractor、extends、super方法）<br>语法糖: 没有给计算机语言添加新功能，而只是对人类来说更“甜蜜”的语法。语法糖往往给程序员提供了更实用的编码方式，有益于更好的编码风格，更易读。不过其并没有给语言添加什么新东西。糖在不改变其所在位置的语法结构的前提下，实现了运行时等价。</li>
<li>Modules(import and export)（AMD+CommonJs）<br>ES6的内置模块功能借鉴了CommonJS和AMD各自的优点：<br>1) 具有CommonJS的精简语法、唯一导出出口(single exports)和循环依赖(cyclic dependencies)的特点。<br>2) 类似AMD，支持异步加载和可配置的模块加载。</li>
<li>Map + Set + WeakMap + WeakSet<br>四种集合类型，WeakMap、WeakSet作为属性键的对象如果没有别的变量在引用它们，则会被回收释放掉。</li>
<li>新API(Math + Number + String + Array + Object APIs)</li>
<li>Proxies（使用代理（Proxy）监听对象的操作，然后可以做一些相应事情。）</li>
<li>Symbols: Symbol是一种基本类型。Symbol 通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的。</li>
<li>Promises：Promises是处理异步操作的对象，使用了 Promise 对象之后可以用一种链式调用的方式来组织代码，让代码更加直观（类似jQuery的deferred 对象）。</li>
</ol>
]]></content>
<categories>
<category>Front-end</category>
<category>Basic</category>
</categories>
<tags>
<tag>React</tag>
<tag>Javascript</tag>
</tags>
</entry>
<entry>
<title>React实现点击其它地方隐藏组件</title>
<url>/2017/09/25/front-end/React/Practice/React%20click%20hide/</url>
<content><![CDATA[<p>在网上找了一圈，基本都是通过遮罩实现的，但不是那么想用遮罩，没找着想用的方法。看antd就实现得不错，想源码里肯定有，于是分析了一下antd Select的源码，找到了个antd的实现方式，路是绕了些，但看看源码还是能有点收获的。<br><a id="more"></a><br>一点点题外话:</p>
<blockquote>
<p>大清早起来发现antd的Dropdown是有菜单隐藏方式设置的，又是为自己的粗心买了时间帐…好在阅读源码也有点收获，事不过三就好</p>
</blockquote>
<p>详细步骤</p>
<ol>
<li><p>设计为document绑定onmousedown的方法</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"> <span class="comment">// 绑定或解绑点击其他地方隐藏</span></span><br><span class="line">bindOnDocumentClickHide = <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">this</span>.state.dropdownVisible) {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'bind'</span>)</span><br><span class="line"> <span class="keyword">let</span> currentDocument</span><br><span class="line"> <span class="keyword">if</span> (!<span class="keyword">this</span>.clickOutsideHandler) {</span><br><span class="line"> currentDocument = <span class="built_in">window</span>.document</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'currentDocument'</span>, currentDocument)</span><br><span class="line"> <span class="comment">// import addEventListener from 'rc-util/lib/Dom/addEventListener'</span></span><br><span class="line"> <span class="comment">// 可直接用下面语句使用原生js绑定事件(对IE有兼容问题 )</span></span><br><span class="line"> <span class="comment">// this.clickOutsideHandler = currentDocument.addEventListener('mousedown', this.onDocumentClick)</span></span><br><span class="line"> <span class="keyword">this</span>.clickOutsideHandler = addEventListener(currentDocument,</span><br><span class="line"> <span class="string">'mousedown'</span>, <span class="keyword">this</span>.onDocumentClick)</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">// always hide on mobile</span></span><br><span class="line"> <span class="keyword">if</span> (!<span class="keyword">this</span>.touchOutsideHandler) {</span><br><span class="line"> currentDocument = currentDocument || <span class="built_in">window</span>.document</span><br><span class="line"> <span class="keyword">this</span>.touchOutsideHandler = addEventListener(currentDocument,</span><br><span class="line"> <span class="string">'touchstart'</span>, <span class="keyword">this</span>.onDocumentClick)</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">this</span>.clearOutsideHandler()</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
</li>
<li><p>设计实现document的onmousedown事件回调</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> contains <span class="keyword">from</span> <span class="string">'rc-util/lib/Dom/contains'</span></span><br><span class="line"><span class="comment">// ...</span></span><br><span class="line"> onDocumentClick = <span class="function">(<span class="params">event</span>) =></span> {</span><br><span class="line"> <span class="keyword">const</span> target = event.target</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'ondocumentchange'</span>)</span><br><span class="line"> <span class="comment">// ref为声明组件时设置的ref字段</span></span><br><span class="line"> <span class="keyword">const</span> root = findDOMNode(<span class="keyword">this</span>.refs.dropDown)</span><br><span class="line"> <span class="keyword">const</span> popupNode = findDOMNode(<span class="keyword">this</span>.refs.dropDownMenu)</span><br><span class="line"> <span class="comment">// 当点击非本区域内容时隐藏</span></span><br><span class="line"> <span class="keyword">if</span> (!contains(root, target) && !contains(popupNode, target)) {</span><br><span class="line"> <span class="keyword">this</span>.setState({</span><br><span class="line"> dropdownVisible: <span class="literal">false</span>,</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"> }</span><br></pre></td></tr></table></figure>
</li>
<li><p>设计为document解绑的方法，供component不可见或被销毁时调用</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">clearOutsideHandler = <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'clear'</span>)</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">this</span>.clickOutsideHandler) {</span><br><span class="line"> <span class="keyword">this</span>.clickOutsideHandler.remove()</span><br><span class="line"> <span class="keyword">this</span>.clickOutsideHandler = <span class="literal">null</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">this</span>.touchOutsideHandler) {</span><br><span class="line"> <span class="keyword">this</span>.touchOutsideHandler.remove()</span><br><span class="line"> <span class="keyword">this</span>.touchOutsideHandler = <span class="literal">null</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
</li>
<li><p>当弹出框可见时，为document绑定onClick方法，didUpdate中调用bindOnDocumentClickHide方法</p>
</li>
<li>当弹出框不可见时，为document移除onClick方法，didUpdate中调用bindOnDocumentClickHide方法</li>
<li>当当前组件被unmount时,解绑回调<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">componentWillUnmount() {</span><br><span class="line"> <span class="keyword">this</span>.clearOutsideHandler()</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h2><p><a href="http://www.cnblogs.com/wolfocme110/p/4148486.html" target="_blank" rel="noopener">js事件监听机制</a><br><a href="https://www.w3cschool.cn/jsref/dom-obj-event.html" target="_blank" rel="noopener">Html DOM事件对象</a></p>
]]></content>
</entry>
<entry>
<title>antd select(trigger)组件源码分析</title>
<url>/2017/09/25/front-end/React/antd/antd%20select%20sc%20analysis/</url>
<content><![CDATA[<p>源码分析，点击其他地方实现隐藏<br><a id="more"></a></p>
<h1 id="select组件源码分析"><a href="#select组件源码分析" class="headerlink" title="select组件源码分析"></a>select组件源码分析</h1><p>为了找到react组件到底如何做到点击其它地方隐藏的，决定分析一下select组件的源码。一开始是直接查看的项目中跳转查看源码，一堆_interopRequireDefault，还有好多下划线变量，看了好久都看不懂，一搜才发现这是被babel转译过的源码，怪不得这代码看起来如此非人类。<br>在<a href="https://github.com/ant-design/ant-design" target="_blank" rel="noopener">antd reposity</a>找到了源码，clone发现包太大了，最后还是选择了在线看源码，顺藤摸瓜地找到了select的构成</p>
<h2 id="rc-select"><a href="#rc-select" class="headerlink" title="rc-select"></a>rc-select</h2><p>select组件最终返回的是个rc-select组件，rc-select组件最后又返回了一个trigger组件</p>
<h2 id="trigger"><a href="#trigger" class="headerlink" title="trigger"></a>trigger</h2><p>实现了多种popup形式，hover、click，这就应该是最终实现点击其它地方隐藏</p>
<h3 id="HTML-DOM事件"><a href="#HTML-DOM事件" class="headerlink" title="HTML DOM事件"></a>HTML DOM事件</h3><p><a href="https://www.w3cschool.cn/jsref/dom-obj-event.html" target="_blank" rel="noopener">w3cSchool- html dom</a></p>
<blockquote>
<p> onmouseenter 事件类似于onmouseover 事件。 唯一的区别是 onmouseenter 事件不支持冒泡 。<br>1、onmouseleave、onmouseenter，鼠标进入到指定元素区域内触发事件，不支持冒泡，不包含子元素的区域。<br>2、onmouseout、onmouseover、鼠标进入指定元素触发事件，含子元素区域。</p>
</blockquote>
<blockquote>
<p>onmousedown 事件会在鼠标按键被按下时发生。<br>提示： 与 onmousedown 事件相关连得事件发生次序（ 鼠标左侧/中间 按钮）：<br>onmousedown<br>onmouseup<br>onclick<br>与 onmousedown 事件相关连得事件发生次序 (鼠标右侧按钮):<br>onmousedown<br>onmouseup<br>oncontextmenu</p>
</blockquote>
<h3 id="实现逻辑"><a href="#实现逻辑" class="headerlink" title="实现逻辑"></a>实现逻辑</h3><ol>
<li>fireEvent实现事件扩散(先执行children的相关事件回调，再执行自身事件回调)</li>
<li><p>在componentDidMount(直接调用的componentDidUpdate)和conponentDidUpdate中绑定document区域的’mousedown’(电脑)、touchstart(触屏端)事件</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">componentDidUpdate(_, prevState) {</span><br><span class="line"> <span class="keyword">const</span> props = <span class="keyword">this</span>.props;</span><br><span class="line"> <span class="keyword">const</span> state = <span class="keyword">this</span>.state;</span><br><span class="line"> <span class="comment">//...一些其他代码</span></span><br><span class="line"> <span class="comment">// We must listen to `mousedown` or `touchstart`, edge case:</span></span><br><span class="line"> <span class="comment">// https://github.com/ant-design/ant-design/issues/5804</span></span><br><span class="line"> <span class="comment">// https://github.com/react-component/calendar/issues/250</span></span><br><span class="line"> <span class="comment">// https://github.com/react-component/trigger/issues/50</span></span><br><span class="line"> <span class="keyword">if</span> (state.popupVisible) {</span><br><span class="line"> <span class="keyword">let</span> currentDocument;</span><br><span class="line"> <span class="keyword">if</span> (!<span class="keyword">this</span>.clickOutsideHandler && <span class="keyword">this</span>.isClickToHide()) {</span><br><span class="line"> currentDocument = props.getDocument();</span><br><span class="line"> <span class="keyword">this</span>.clickOutsideHandler = addEventListener(currentDocument,</span><br><span class="line"> <span class="string">'mousedown'</span>, <span class="keyword">this</span>.onDocumentClick);</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">// always hide on mobile</span></span><br><span class="line"> <span class="keyword">if</span> (!<span class="keyword">this</span>.touchOutsideHandler) {</span><br><span class="line"> currentDocument = currentDocument || props.getDocument();</span><br><span class="line"> <span class="keyword">this</span>.touchOutsideHandler = addEventListener(currentDocument,</span><br><span class="line"> <span class="string">'touchstart'</span>, <span class="keyword">this</span>.onDocumentClick);</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">this</span>.clearOutsideHandler();</span><br><span class="line"> },</span><br></pre></td></tr></table></figure>
<p>代码分析<br>props.getDocument()由父组件提供，若不存在则默认返回window.document:</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 默认getDocument方法</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">returnDocument</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">window</span>.document;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
</li>
<li><p>在刚才监听的事件回调函数中关闭弹出框</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">onDocumentClick(event) {</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">this</span>.props.mask && !<span class="keyword">this</span>.props.maskClosable) {</span><br><span class="line"> <span class="keyword">return</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">const</span> target = event.target;</span><br><span class="line"> <span class="comment">// 测试中返回的其实是trigger一开始显示的组件，如dropdownButton的button</span></span><br><span class="line"> <span class="comment">// 为什么不是返回整个组件???</span></span><br><span class="line"> <span class="keyword">const</span> root = findDOMNode(<span class="keyword">this</span>);</span><br><span class="line"> <span class="comment">// 返回popup的组件，如dropdown的下拉框内容</span></span><br><span class="line"> <span class="keyword">const</span> popupNode = <span class="keyword">this</span>.getPopupDomNode();<span class="comment">//自定义的函数</span></span><br><span class="line"> <span class="keyword">if</span> (!contains(root, target) && !contains(popupNode, target)) {</span><br><span class="line"> <span class="keyword">this</span>.close();</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">getPopupDomNode() {</span><br><span class="line"> <span class="comment">// for test</span></span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">this</span>._component && <span class="keyword">this</span>._component.getPopupDomNode) {</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">this</span>._component.getPopupDomNode();</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">null</span>;</span><br><span class="line">},</span><br></pre></td></tr></table></figure>
<p>代码分析:<br>findDOMNode为react-dom提供的方法，用于获取真实的DOM节点，参数为组件句柄，本组件的话可直接为this，若要获取子组件真实节点，可指定其ref再获取，示例如下:</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> MyComponent = React.createClass({</span><br><span class="line"> handleClick: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">// 指定ref后可直接通过this.refs.ref名获得其句柄</span></span><br><span class="line"> React.findDOMNode(<span class="keyword">this</span>.refs.myTextInput).focus();</span><br><span class="line"> },</span><br><span class="line"> render: <span class="function"><span class="keyword">function</span>(<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"> <input type=<span class="string">"text"</span> ref=<span class="string">"myTextInput"</span> /></span><br><span class="line"> <input type=<span class="string">"button"</span> value=<span class="string">"Focus the text input"</span> onClick={<span class="keyword">this</span>.handleClick} /></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><span class="line"><span class="regexp">});</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>在render中检查触发事件是否存在于props定义的action中，绑定相应事件</p>
</li>
<li>执行各个事件回调<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">fireEvents(type, e) {</span><br><span class="line"> <span class="keyword">const</span> childCallback = <span class="keyword">this</span>.props.children.props[type];</span><br><span class="line"> <span class="keyword">if</span> (childCallback) {</span><br><span class="line"> childCallback(e);</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">const</span> callback = <span class="keyword">this</span>.props[type];</span><br><span class="line"> <span class="keyword">if</span> (callback) {</span><br><span class="line"> callback(e);</span><br><span class="line"> }</span><br><span class="line">},</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="tips"><a href="#tips" class="headerlink" title="tips"></a>tips</h2><p><a href="https://github.com/react-component?utf8=%E2%9C%93&q=trigger&type=&language=" target="_blank" rel="noopener">antd的底层react componnet</a><br>github也可以直接查看demo效果的！地址如下:</p>
<blockquote>
<p><a href="http://react-component.github.io/badgeboard/" target="_blank" rel="noopener">http://react-component.github.io/badgeboard/</a> 这是整体demo地址，从这里也可以看出，底层的form组件用得最多的还是rc-trigger、rc-align和rc-animation</p>
</blockquote>
<h2 id="自动化构建工具"><a href="#自动化构建工具" class="headerlink" title="自动化构建工具"></a>自动化构建工具</h2><h3 id="webpack"><a href="#webpack" class="headerlink" title="webpack"></a>webpack</h3><h3 id="gulp"><a href="#gulp" class="headerlink" title="gulp"></a>gulp</h3><p>javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。<br>觉得题主应该了解一下构建工具，比如cmake, ant, maven之类的。</p>
<h3 id="GNU-make-co"><a href="#GNU-make-co" class="headerlink" title="GNU make/co"></a>GNU make/co</h3><h2 id="Typescript"><a href="#Typescript" class="headerlink" title="Typescript"></a>Typescript</h2>]]></content>
<categories>
<category>Front-end</category>
<category>React</category>
</categories>
<tags>
<tag>React</tag>
</tags>
</entry>
<entry>
<title>170925</title>
<url>/2017/09/25/dailyDiary/2017/170925/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>morningDiary</tag>
</tags>
</entry>
<entry>
<title>效率，效率，效率</title>
<url>/2017/09/25/dailyDiary/2017/efficiency/</url>
<content><![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>
</entry>
<entry>
<title>函数式编程</title>
<url>/2017/09/25/front-end/elm/elm/</url>
<content><![CDATA[<p>编程<br><a id="more"></a></p>
<h2 id="声明式函数编程"><a href="#声明式函数编程" class="headerlink" title="声明式函数编程"></a>声明式函数编程</h2><blockquote>
<p>告诉“机器”你想要的是什么(what)，让机器想出如何去做(how)。</p>
</blockquote>
<h2 id="命令式函数编程"><a href="#命令式函数编程" class="headerlink" title="命令式函数编程"></a>命令式函数编程</h2><blockquote>
<p>命令“机器”如何去做事情(how)，这样不管你想要的是什么(what)，它都会按照你的命令实现。</p>
</blockquote>
<h1 id="编程"><a href="#编程" class="headerlink" title="编程"></a>编程</h1><h2 id="函数式编程"><a href="#函数式编程" class="headerlink" title="函数式编程"></a>函数式编程</h2><p>对于值的操作不是修改原来的值，而是产生新的值<br>不使用可变的变量、赋值、循环和其它命令式控制结构进行编程<br>引用透明、无副作用</p>
<blockquote>
<p><a href="https://www.zhihu.com/question/28292740" target="_blank" rel="noopener">什么是函数式编程思维-用心阁的回答</a></p>
</blockquote>
<h2 id="命令式编程"><a href="#命令式编程" class="headerlink" title="命令式编程"></a>命令式编程</h2>]]></content>
<categories>
<category>Front-end</category>
<category>elm</category>
</categories>
</entry>
<entry>
<title>在React中使用echarts</title>
<url>/2017/09/24/front-end/advance/echarts%E5%AD%A6%E4%B9%A0%E6%80%BB%E7%BB%93/</url>
<content><![CDATA[<p>echarts已经做过demo了，但没有总结再回头翻还得重新记概念。<br><a id="more"></a><br>echarts的使用主要是其option的配置<br>使用的库为echarts-for-react</p>
<h2 id="常用配置属性"><a href="#常用配置属性" class="headerlink" title="常用配置属性"></a>常用配置属性</h2><p>color: 配色方案，array<br>title: object<br>toolbox: 工具组件，可配置些工具<br>legend: 图例组件,展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。<br>xAxis: 直角坐标系 grid 中的 x 轴array，一般只配置一个，由data指定坐标轴内容<br> > 其元素属性:<br> type<br> data: array,可定义其textStyle</p>
<p>yAxis: 定义y轴格式<br>series: array，定义数据源，每个数组元素的name属性和legend需一一对应才能有legend控制隐藏显示<br> > 数组元素属性: </p>
<pre><code>1. name
2. type
3. data数据源的y轴坐标信息，按x轴坐标排列
4. markLine: 标线，object,常用属性如下
1. label(object,定义显示文本信息，分normal和emphasis)
子项（normal和emphasis）属性:
1. show: bool，是否显示
2. position： string 定义在何处显示，start，middle，end
3. formatter: '{a}{b}{c}{d}'，其中b为data中的name字段
2. data: 标线的name和线条信息(可只定义xAxis or yAxis，默认贯穿坐标轴)
</code></pre><p>visualMap: 可配置按y值分区域显示不同颜色区块</p>
<h2 id="动态加载数据"><a href="#动态加载数据" class="headerlink" title="动态加载数据"></a>动态加载数据</h2><p>只需动态替换xAxis和series的data即可</p>
<h2 id="简单源码"><a href="#简单源码" class="headerlink" title="简单源码"></a>简单源码</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span></span><br><span class="line"><span class="keyword">import</span> ReactEcharts <span class="keyword">from</span> <span class="string">'echarts-for-react'</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">EchartTest</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>{</span><br><span class="line"> <span class="keyword">constructor</span> (props) {</span><br><span class="line"> <span class="keyword">super</span>(props)</span><br><span class="line"> <span class="keyword">this</span>.state = {</span><br><span class="line"> xdata: [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">7</span>],</span><br><span class="line"> seriesData: [<span class="number">100</span>, <span class="number">700</span>, <span class="number">230</span>, <span class="number">370</span>, <span class="number">450</span>, <span class="number">260</span>, <span class="number">70</span>],</span><br><span class="line"> yRange: [<span class="number">392.96</span>, <span class="number">442.08</span>],</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> render () {</span><br><span class="line"> <span class="keyword">let</span> colors = [<span class="string">'#5793f3'</span>]</span><br><span class="line"> <span class="keyword">const</span> { seriesData, xdata, yRange } = <span class="keyword">this</span>.state</span><br><span class="line"> <span class="keyword">const</span> option = {</span><br><span class="line"> color: colors,</span><br><span class="line"> title: {</span><br><span class="line"> text: <span class="string">'存储状态'</span>,</span><br><span class="line"> subtext: <span class="string">'纯属虚构'</span>,</span><br><span class="line"> },</span><br><span class="line"> tooltip: {</span><br><span class="line"> trigger: <span class="string">'axis'</span>,</span><br><span class="line"> axisPointer: {</span><br><span class="line"> type: <span class="string">'cross'</span>,</span><br><span class="line"> label: {</span><br><span class="line"> backgroundColor: <span class="string">'#283b56'</span>,</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> legend: {</span><br><span class="line"> x: <span class="string">'40%'</span>,</span><br><span class="line"> top: <span class="string">'0%'</span>,</span><br><span class="line"> textStyle: {</span><br><span class="line"> color: <span class="string">'#90979c'</span>,</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// 和series中的name一一对应</span></span><br><span class="line"> data: [<span class="string">'存储空间使用'</span>],</span><br><span class="line"> },</span><br><span class="line"> toolbox: {</span><br><span class="line"> show: <span class="literal">true</span>,</span><br><span class="line"> left: <span class="string">'center'</span>,</span><br><span class="line"> feature: {</span><br><span class="line"> magicType: {</span><br><span class="line"> type: [<span class="string">'line'</span>, <span class="string">'bar'</span>],</span><br><span class="line"> },</span><br><span class="line"> restore: {},</span><br><span class="line"> saveAsImage: {},</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> dataZoom: {</span><br><span class="line"> show: <span class="literal">false</span>,</span><br><span class="line"> start: <span class="number">0</span>,</span><br><span class="line"> end: <span class="number">100</span>,</span><br><span class="line"> },</span><br><span class="line"> xAxis: [</span><br><span class="line"> {</span><br><span class="line"> type: <span class="string">'category'</span>,</span><br><span class="line"> boundaryGap: <span class="literal">false</span>,</span><br><span class="line"> data: xdata,</span><br><span class="line"> },</span><br><span class="line"> ],</span><br><span class="line"> yAxis: [</span><br><span class="line"> {</span><br><span class="line"> type: <span class="string">'value'</span>,</span><br><span class="line"> scale: <span class="literal">true</span>,</span><br><span class="line"> name: <span class="string">'存储状态'</span>,</span><br><span class="line"> min: <span class="number">0</span>,</span><br><span class="line"> axisLine: {</span><br><span class="line"> lineStyle: {</span><br><span class="line"> color: colors[<span class="number">0</span>],</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> axisLabel: {</span><br><span class="line"> formatter: <span class="string">'{value} G'</span>,</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> ],</span><br><span class="line"> visualMap: {</span><br><span class="line"> top: <span class="number">10</span>,</span><br><span class="line"> right: <span class="number">10</span>,</span><br><span class="line"> pieces: [{</span><br><span class="line"> min: <span class="number">0</span>,</span><br><span class="line"> max: yRange[<span class="number">0</span>],</span><br><span class="line"> color: <span class="string">'#096'</span>,</span><br><span class="line"> }, {</span><br><span class="line"> min: yRange[<span class="number">0</span>],</span><br><span class="line"> max: yRange[<span class="number">1</span>],</span><br><span class="line"> color: <span class="string">'#e9a11b'</span>,</span><br><span class="line"> }, {</span><br><span class="line"> min: yRange[<span class="number">1</span>],</span><br><span class="line"> color: <span class="string">'#db5019'</span>,</span><br><span class="line"> }],</span><br><span class="line"> outOfRange: {</span><br><span class="line"> color: <span class="string">'#999'</span>,</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> series: [</span><br><span class="line"> {</span><br><span class="line"> name: <span class="string">'存储空间使用'</span>,</span><br><span class="line"> type: <span class="string">'line'</span>,</span><br><span class="line"> xAxisIndex: <span class="number">0</span>,</span><br><span class="line"> yAxisIndex: <span class="number">0</span>,</span><br><span class="line"> areaStyle: {</span><br><span class="line"> normal: {},</span><br><span class="line"> },</span><br><span class="line"> data: seriesData,</span><br><span class="line"> markLine: {</span><br><span class="line"> silent: <span class="literal">false</span>,</span><br><span class="line"> label: {</span><br><span class="line"> normal: {</span><br><span class="line"> show: <span class="literal">false</span>,</span><br><span class="line"> position: <span class="string">'end'</span>,</span><br><span class="line"> formatter: <span class="string">'{b}'</span>,</span><br><span class="line"> },</span><br><span class="line"> emphasis: {</span><br><span class="line"> show: <span class="literal">true</span>,</span><br><span class="line"> position: <span class="string">'middle'</span>,</span><br><span class="line"> formatter: <span class="string">'{b}'</span>,</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> data: [{</span><br><span class="line"> name: <span class="string">'橙色预警'</span>,</span><br><span class="line"> yAxis: yRange[<span class="number">0</span>],</span><br><span class="line"> }, {</span><br><span class="line"> name: <span class="string">'红色预警'</span>,</span><br><span class="line"> yAxis: yRange[<span class="number">1</span>],</span><br><span class="line"> }],</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> ],</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <div></span><br><span class="line"> <ReactEcharts</span><br><span class="line"> option={option}</span><br><span class="line"> /></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><span class="line"><span class="regexp">}</span></span><br><span class="line"><span class="regexp">export default EchartTest</span></span><br></pre></td></tr></table></figure>]]></content>
<tags>
<tag>React</tag>
</tags>
</entry>
<entry>
<title>windows中的SSH终端软件</title>
<url>/2017/09/23/Tec/accumulation/windowsSSH/</url>
<content><![CDATA[<ol>
<li>putty 小巧易用</li>
<li>xshell 分商用和个人</li>
<li>MobaXterm 分个人商用，刚开始用感觉还不错，还可以直接浏览目录结构</li>
<li>SecureCRT付费，有破解版，可用于跑脚本</li>
</ol>
<p>其他</p>
<ol>
<li>WinSCP，文件传输<br>参考: <a href="https://www.zhihu.com/question/24447656" target="_blank" rel="noopener">Xshell比SecureCRT差吗？</a></li>
</ol>
]]></content>
</entry>
<entry>
<title>vscode使用技巧记录</title>
<url>/2017/09/22/Tec/tools/vscode/vscodeTips/</url>
<content><![CDATA[<p>水滴石穿<br><a id="more"></a></p>
<h2 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h2><p>vscode用来写js还是挺不错的，以前用webstorm也挺好用，但搜索老不全，这个的搜索功能很好用</p>
<table>
<thead>
<tr>
<th>特点</th>
<th>描述 </th>
</tr>
</thead>
<tbody>
<tr>
<td>扩展插件</td>
<td>丰富 </td>
</tr>
<tr>
<td>集成终端</td>
<td>方便 </td>
</tr>
<tr>
<td>搜索功能</td>
<td>全面 </td>
</tr>
</tbody>
</table>
<h2 id="扩展插件"><a href="#扩展插件" class="headerlink" title="扩展插件"></a>扩展插件</h2><p>vscode扩展插件也很丰富</p>
<h3 id="ftp-sync"><a href="#ftp-sync" class="headerlink" title="ftp-sync"></a>ftp-sync</h3><p>实现代码同步，注意：<br>若ssh连接失败: Error: Unable to start subsystem: sftp<br>解决方案：</p>
<blockquote>
<p>In order to use sftp and scp you have to insert the following line in the configuration file /etc/ssh/sshd_config(RedHat Linux).<br>Subsystem sftp /usr/libexec/openssh/sftp-server<br>After this modification you must restart sshd. So you could use sftp and scp only to connect to hosts where sshd is running.<br>具体解决步骤<br><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">vi /etc/ssh/sshd_config</span><br><span class="line">插入或解除注释下面一句话</span><br><span class="line"># Subsystem sftp /usr/libexec/openssh/sftp-server</span><br><span class="line">保存并重启ssh服务</span><br><span class="line">/etc/init.d/sshd restart</span><br></pre></td></tr></table></figure></p>
</blockquote>
<h3 id="ESLINT"><a href="#ESLINT" class="headerlink" title="ESLINT"></a>ESLINT</h3><p>eslint是工程用得最多的插件了，用于代码格式纠错，刚开始满屏飘红让人崩溃，现在好多了，但感觉这软件不好的就是不能自动纠错，都知道问题在哪就不能一键纠错么…</p>
<h2 id="使用技巧"><a href="#使用技巧" class="headerlink" title="使用技巧"></a>使用技巧</h2><p>正则替换，相当方便<br>$0为匹配到的最长字符<br>$1开始为正则()含的字符，注意匹配(、)需要转义<br><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">查找：(system\(".*?)\s</span><br><span class="line">替换成: $1","</span><br><span class="line">描述：匹配system("任意内容加空格</span><br><span class="line"></span><br><span class="line">提高：（通过正则取非避免重复匹配）</span><br><span class="line">查找:(system\("[^,]*?)\s</span><br><span class="line">替换：$1","</span><br></pre></td></tr></table></figure></p>
]]></content>
<categories>
<category>Tool</category>
<category>Tools</category>
<category>Vscode</category>
</categories>
</entry>
<entry>
<title>vscode使用代码段</title>
<url>/2017/09/21/Tec/tools/vscode/vscodesnippet/</url>
<content><![CDATA[<p><img src="https://github.com/vonxq/vonxq.github.io/blob/master/img/snippet.gif?raw=true" alt><br><a id="more"></a></p>
<h1 id="使用snippet"><a href="#使用snippet" class="headerlink" title="使用snippet"></a>使用snippet</h1><h2 id="最简单的用法"><a href="#最简单的用法" class="headerlink" title="最简单的用法"></a>最简单的用法</h2><ol>
<li>打开插件库，搜索并下载相应语言的snippet插件</li>
<li>使用插件：在相应的文档中输入快捷prefix就能看到内容了<h2 id="自定义代码段"><a href="#自定义代码段" class="headerlink" title="自定义代码段"></a>自定义代码段</h2>参考网页<a href="http://www.cnblogs.com/summit7ca/p/5225494.html" target="_blank" rel="noopener">Visual Studio Code 添加设置代码段(snippet)</a><br>详细步骤:<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">1. F1打开vscode命令输入框，输入snippet</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></tr></table></figure>
</li>
</ol>
]]></content>
<categories>
<category>Tool</category>
<category>Tools</category>
<category>Vscode</category>
</categories>
</entry>
<entry>
<title>使用react-dnd+antd tree实现两个列表的拖拽数据传递</title>
<url>/2017/09/20/front-end/React/Practice/drag/</url>
<content><![CDATA[<p><img src="https://github.com/vonxq/TreeDragDemo/raw/master/img/dragDemo.gif" alt><br><a id="more"></a></p>
<h1 id="概述"><a href="#概述" class="headerlink" title="概述"></a>概述</h1><p>项目内需要用到将已有Tree形式数据组织排列到新的Tree中，新的Tree可动态增删(现在还没实现删除功能)，还可以动态地改变Tree排序方式<br>主要实现以下功能：<br>DragSource可拖拽到DragTarget中，DragTarget动态添加节点(React-dnd实现)<br>DragTraget可实现拖拽排序功能(antd tree实现)</p>
<h2 id="源码地址"><a href="#源码地址" class="headerlink" title="源码地址"></a>源码地址</h2><p><a href="https://github.com/vonxq/TreeDragDemo" target="_blank" rel="noopener">https://github.com/vonxq/TreeDragDemo</a></p>
<h2 id="使用工具"><a href="#使用工具" class="headerlink" title="使用工具:"></a>使用工具:</h2><ol>
<li>react-dnd + antd(tree组件)</li>
<li>create-react-app</li>
</ol>
<h1 id="实现详解"><a href="#实现详解" class="headerlink" title="实现详解"></a>实现详解</h1><p><a href="https://github.com/react-dnd/react-dnd" target="_blank" rel="noopener">react-dnd</a>是一个开源的拖拽实现源码，之前也调研过<a href="https://github.com/atlassian/react-beautiful-dnd" target="_blank" rel="noopener">react-beautiful-dnd</a>，但这个好像功能较少，最后还是选择了react-dnd</p>
<p>antd是阿里的react组件库，主要是我懒，就用了现成的可拖拽Tree，Tree好像不能实现两个Tree之间的拖拽传递，我试着做了下，但Tree并不能识别不是自己tree的drag节点(key标识)信息，这应该跟底层源码实现有关，估计是被规避了，不想折腾最后两个组件之间的拖拽传递就采用了react-dnd来做</p>
<h2 id="React-dnd的使用"><a href="#React-dnd的使用" class="headerlink" title="React-dnd的使用"></a>React-dnd的使用</h2><p>react-dnd有个官方的实例,效果可以<a href="http://react-dnd.github.io/react-dnd/examples-chessboard-tutorial-app.html" target="_blank" rel="noopener">点击查看</a><br>具体实现过程<a href="http://react-dnd.github.io/react-dnd/docs-tutorial.html" target="_blank" rel="noopener">点击查看</a><br>看官方实例再对照API感觉会清晰很多，官方讲解全是英文，自己看得也很吃力，所以说英语还是很重要啊。反正不管怎样，最后这个功能也实现了，最好的学习方式就是示例源码对照着API，很容易理解。</p>
<h3 id="DragSource"><a href="#DragSource" class="headerlink" title="DragSource"></a>DragSource</h3><p>基础用法:<br><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> { DragSource } <span class="keyword">from</span> <span class="string">'react-dnd'</span>;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyComponent</span> </span>{</span><br><span class="line"> <span class="comment">/* ... */</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> DragSource(type, spec, collect)(MyComponent);</span><br></pre></td></tr></table></figure></p>
<h4 id="参数讲解"><a href="#参数讲解" class="headerlink" title="参数讲解:"></a>参数讲解:</h4><blockquote>
<p>type: Required. Either a string, an ES6 symbol, or a function that returns either given the component’s props. Only the drop targets registered for the same type will react to the items produced by this drag source. Read the overview to learn more about the items and types.</p>
</blockquote>
<blockquote>
<p>spec: Required. A plain JavaScript object with a few allowed methods on it. It describes how the drag source reacts to the drag and drop events. See the drag source specification described in detail in the next section.</p>
</blockquote>
<blockquote>
<p>collect: Required. The collecting function. It should return a plain object of the props to inject into your component. It receives two parameters: connect and monitor. Read the overview for an introduction to the monitors, the connectors, and the collecting function. See the collecting function described in detail after the next section.</p>
</blockquote>
<blockquote>
<p>options: Optional. A plain object. If some of the props to your component are not scalar (that is, are not primitive values or functions), specifying a custom arePropsEqual(props, otherProps) function inside the options object can improve the performance. Unless you have performance problems, don’t worry about it.</p>
</blockquote>
<h4 id="type"><a href="#type" class="headerlink" title="type"></a><span id="type">type</span></h4><p>必要的。很好懂，类似namespace的概念，只有type相同的DragSource和DragTarget能相互识别</p>
<h4 id="spec"><a href="#spec" class="headerlink" title="spec"></a><span id="spec">spec</span></h4><p>必要的。就是一个对象，定义了几个函数，我做的功能只用到了第一个函数</p>
<h5 id="参数讲解："><a href="#参数讲解：" class="headerlink" title="参数讲解："></a>参数讲解：</h5><blockquote>
<p>props: Your component’s current props.<br>monitor: 可以使用getItem()来得到具体的值。<br> An instance of DragSourceMonitor. Use it to query the information about the current drag state, such as the currently dragged item and its type, the current and initial coordinates and offsets, and whether it was dropped yet. Read the DragSourceMonitor documentation for a complete list of monitor methods, or read the overview for an introduction to the monitors.<br>component: 就是组件句柄，相当于this，可以用这个调用其内部函数。<br> When specified, it is the instance of your component. Use it to access the underlying DOM node for position or size measurements, or to call setState, and other component methods. It is purposefully missing from isDragging and canDrag because the instance may not be available by the time they are called. If you want these methods to depend on the component’s state, consider lifting the state to the parent component, so that you can just use props. Generally your code will be cleaner if you rely on props instead whenever possible.</p>
</blockquote>
<h5 id="具体可用方法"><a href="#具体可用方法" class="headerlink" title="具体可用方法:"></a>具体可用方法:</h5><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> spec = {</span><br><span class="line"> <span class="comment">// 此函数返回一个对象，这个对象用于描述此被draf对象，可在DragTarget的spec的drop方法中通过monitor.getItem()得到</span></span><br><span class="line"> beginDrag(props, monitor, component){}<span class="comment">// Required. When the dragging starts, beginDrag is called. You must return a plain JavaScript object describing the data being dragged. What you return is the only information available to the drop targets about the drag source so it's important to pick the minimal data they need to know. You may be tempted to put a reference to the component into it, but you should try very hard to avoid doing this because it couples the drag sources and drop targets. It's a good idea to return something like { id: props.id } from this method.</span></span><br><span class="line"> endDrag(props, monitor, component){}<span class="comment">// Optional. When the dragging stops, endDrag is called. For every beginDrag call, a corresponding endDrag call is guaranteed. You may call monitor.didDrop() to check whether or not the drop was handled by a compatible drop target. If it was handled, and the drop target specified a drop result by returning a plain object from its drop() method, it will be available as monitor.getDropResult(). This method is a good place to fire a Flux action. Note: If the component is unmounted while dragging, component parameter is set to be null.</span></span><br><span class="line"></span><br><span class="line"> canDrag(props, monitor){}<span class="comment">//Optional. Use it to specify whether the dragging is currently allowed. If you want to always allow it, just omit this method. Specifying it is handy if you'd like to disable dragging based on some predicate over props. Note: You may not call monitor.canDrag() inside this method.</span></span><br><span class="line"></span><br><span class="line"> isDragging(props, monitor){}<span class="comment">//Optional. By default, only the drag source that initiated the drag operation is considered to be dragging. You can override this behavior by defining a custom isDragging method. It might return something like props.id === monitor.getItem().id. Do this if the original component may be unmounted during the dragging and later “resurrected” with a different parent. For example, when moving a card across the lists in a Kanban board, you want it to retain the dragged appearance—even though technically, the component gets unmounted and a different one gets mounted every time you move it to another list. Note: You may not call monitor.isDragging() inside this method.</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h4 id="collect"><a href="#collect" class="headerlink" title="collect"></a><span id="collect">collect</span></h4><p>必要的,此方法返回一个对象，这个对象会被注入到组件的props中<br>主要做两件事：</p>
<ol>
<li>connect the React DnD event handlers to some node in the component;</li>
<li>pass some knowledge about the dragging state to our component.<br>至少需要返回connect.dragSource()方法，让组件可以将自己连接起来，从而可以被拖拽及响应拖拽<h5 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h5><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 定义</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">collect</span> (<span class="params">connect, monitor</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> connectDragSource: connect.dragSource(),</span><br><span class="line"> isDragging: monitor.isDragging()</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 组件中应用</span></span><br><span class="line">render () {</span><br><span class="line"> <span class="keyword">const</span> { connectDragSource, isDragging, value } = <span class="keyword">this</span>.props</span><br><span class="line"> <span class="keyword">return</span> connectDragSource(</span><br><span class="line"> <div style={{</span><br><span class="line"> float: <span class="string">"left"</span>,</span><br><span class="line"> opacity: isDragging ? <span class="number">0.5</span> : <span class="number">1</span>,</span><br><span class="line"> cursor: isDragging ? <span class="string">'move'</span>: <span class="string">''</span>,</span><br><span class="line"> }}></span><br><span class="line"> <div><span class="xml"><span class="tag"><<span class="name">Icon</span> <span class="attr">style</span>=<span class="string">{{</span> <span class="attr">marginRight:</span> '<span class="attr">5px</span>' }} <span class="attr">type</span>=<span class="string">"folder-open"</span> /></span>{value.title}<span class="tag"></<span class="name">div</span>></span></span></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>
</li>
</ol>
<h4 id="options"><a href="#options" class="headerlink" title="options"></a>options</h4><p>本项目没具体用到，有需要再看API吧</p>
<h3 id="DropTarget"><a href="#DropTarget" class="headerlink" title="DropTarget"></a>DropTarget</h3><p>老是写成DragTarget…<br>基本用法：<br><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> { DropTarget } <span class="keyword">from</span> <span class="string">'react-dnd'</span>;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyComponent</span> </span>{</span><br><span class="line"> <span class="comment">/* ... */</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> DropTarget(types, spec, collect)(MyComponent);</span><br></pre></td></tr></table></figure></p>
<p>参数讲解:</p>
<blockquote>
<p>types: Required. A string, an ES6 symbol, an array of either, or a function that returns either of those, given component’s props. This drop target will only react to the items produced by the drag sources of the specified type or types. Read the overview to learn more about the items and types.</p>
</blockquote>
<blockquote>
<p>spec: Required. A plain JavaScript object with a few allowed methods on it. It describes how the drop target reacts to the drag and drop events. See the drop target specification described in detail in the next section.</p>
</blockquote>
<blockquote>
<p>collect: Required. The collecting function. It should return a plain object of the props to inject into your component. It receives two parameters: connect and monitor. Read the overview for an introduction to the monitors, the connectors, and the collecting function. See the collecting function described in detail after the next section.</p>
</blockquote>
<blockquote>
<p>options: Optional. A plain object. If some of the props to your component are not scalar (that is, are not primitive values or functions), specifying a custom arePropsEqual(props, otherProps) function inside the options object can improve the performance. Unless you have performance problems, don’t worry about it.</p>
</blockquote>
<h4 id="types"><a href="#types" class="headerlink" title="types"></a>types</h4><p>必要的，基本同<a href="#type">上面的type</a>,只是还可以是多个type的数组，也就是能接收多个来源</p>
<h4 id="spec-1"><a href="#spec-1" class="headerlink" title="spec"></a>spec</h4><p>必要的，就是一些回调<br>参数讲解</p>
<blockquote>
<p>props: Your component’s current props.<br>monitor: 可以使用getItem()来得到刚才在DragSource spec的beginDrag()中返回的对象。An instance of DropTargetMonitor. Use it to query the information about the current drag state, such as the currently dragged item and its type, the current and initial coordinates and offsets, whether it is over the current target, and whether it can be dropped. Read the DropTargetMonitor documentation for a complete list of monitor methods, or read the overview for an introduction to the monitors.<br>component: When specified, it is the instance of your component. Use it to access the underlying DOM node for position or size measurements, or to call setState, and other component methods. It is purposefully missing from canDrop because the instance may not be available by the time it is called. If you want this method to depend on the component’s state, consider lifting the state to the parent component, so that you can just use props. Generally your code will be cleaner if you rely on props instead whenever possible. Do note this is always null when hovering stateless components.</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 可以使用getItem()来得到刚才在DragSource spec的beginDrag()中返回的对象</span></span><br><span class="line"><span class="comment">// component可以调用组件内部方法</span></span><br><span class="line">drop(props, monitor, component){}<span class="comment">// Optional. Called when a compatible item is dropped on the target. You may either return undefined, or a plain object. If you return an object, it is going to become the drop result and will be available to the drag source in its endDrag method as monitor.getDropResult(). This is useful in case you want to perform different actions depending on which target received the drop. If you have nested drop targets, you can test whether a nested target has already handled drop by checking monitor.didDrop() and monitor.getDropResult(). Both this method and the source's endDrag method are good places to fire Flux actions. This method will not be called if canDrop() is defined and returns false.</span></span><br><span class="line">hover(props, monitor, component){}<span class="comment">// Optional. Called when an item is hovered over the component. You can check monitor.isOver({ shallow: true }) to test whether the hover happens over just the current target, or over a nested one. Unlike drop(), this method will be called even if canDrop() is defined and returns false. You can check monitor.canDrop() to test whether this is the case.</span></span><br><span class="line">canDrop(props, monitor){}<span class="comment">// Optional. Use it to specify whether the drop target is able to accept the item. If you want to always allow it, just omit this method. Specifying it is handy if you'd like to disable dropping based on some predicate over props or monitor.getItem(). Note: You may not call monitor.canDrop() inside this method.</span></span><br></pre></td></tr></table></figure>
<h2 id="tips"><a href="#tips" class="headerlink" title="tips"></a>tips</h2><p>react-dnd的dragSource和dropTraget可以是同一个组件，这种情况一般都是针对单个列表进行操作<br>具体实现可参考github上的<a href="https://github.com/MarshalW/react-sortable.git" target="_blank" rel="noopener">react-sortable</a><br><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> DragSource(type, itemSource, collectSource)(DropTarget(type,itemTarget,collectTaget)(Item))</span><br></pre></td></tr></table></figure></p>
<h2 id="Antd-Tree的排序实现"><a href="#Antd-Tree的排序实现" class="headerlink" title="Antd Tree的排序实现"></a>Antd Tree的排序实现</h2><p>这个其实在Antd上有实例代码，我也没做什么大的改动，直接上源码吧,DragT是实现了Tree的动态拖动排序的，具体功能注释中有<br><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span></span><br><span class="line"><span class="keyword">import</span> { Card, Tree, Icon } <span class="keyword">from</span> <span class="string">'antd'</span></span><br><span class="line"><span class="keyword">import</span> { DropTarget } <span class="keyword">from</span> <span class="string">'react-dnd'</span></span><br><span class="line"><span class="keyword">import</span> PropTypes <span class="keyword">from</span> <span class="string">'prop-types'</span></span><br><span class="line"><span class="keyword">const</span> TreeNode = Tree.TreeNode</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">DragT</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>{</span><br><span class="line"> <span class="keyword">constructor</span> (props) {</span><br><span class="line"> <span class="keyword">super</span>(props)</span><br><span class="line"> <span class="keyword">this</span>.state = {</span><br><span class="line"> selectedKey: <span class="string">''</span>,</span><br><span class="line"> treeContent: [],</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> onDragEnter = <span class="function">(<span class="params">info</span>) =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(info)</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">// 遍历数组,找出key值与之相同的对象(节点)，执行callback函数</span></span><br><span class="line"> <span class="comment">// 若key值不匹配且含有children，则循环遍历</span></span><br><span class="line"> <span class="comment">// 否则不执行任何操作</span></span><br><span class="line"> loop = <span class="function">(<span class="params">data, key, callback</span>) =></span> {</span><br><span class="line"> data.forEach(<span class="function">(<span class="params">item, index, arr</span>) =></span> {</span><br><span class="line"> <span class="keyword">if</span> (item.key === key) {</span><br><span class="line"> <span class="keyword">return</span> callback(item, index, arr)</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (item.children) {</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">this</span>.loop(item.children, key, callback)</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"> onDrop = <span class="function">(<span class="params">info</span>) =></span> {</span><br><span class="line"> <span class="comment">// console.log(info)</span></span><br><span class="line"> <span class="keyword">const</span> dropKey = info.node.props.eventKey</span><br><span class="line"> <span class="keyword">const</span> dragKey = info.dragNode.props.eventKey</span><br><span class="line"> <span class="keyword">const</span> data = <span class="keyword">this</span>.state.treeContent</span><br><span class="line"> <span class="keyword">let</span> dragObj</span><br><span class="line"> <span class="comment">// 保存节点信息并删除节点</span></span><br><span class="line"> <span class="keyword">this</span>.loop(data, dragKey, (item, index, arr) => {</span><br><span class="line"> arr.splice(index, <span class="number">1</span>)</span><br><span class="line"> dragObj = item</span><br><span class="line"> })</span><br><span class="line"> <span class="comment">// 将节点插入到正确位置</span></span><br><span class="line"> <span class="keyword">if</span> (info.dropToGap) {</span><br><span class="line"> <span class="keyword">let</span> ar</span><br><span class="line"> <span class="keyword">let</span> i</span><br><span class="line"> <span class="keyword">this</span>.loop(data, dropKey, (item, index, arr) => {</span><br><span class="line"> ar.splice(i, <span class="number">0</span>, dragObj) </span><br><span class="line"> })</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="keyword">this</span>.loop(data, dropKey, (item) => {</span><br><span class="line"> item.children = item.children || []</span><br><span class="line"> <span class="comment">// where to insert 示例添加到尾部，可以是随意位置</span></span><br><span class="line"> item.children.push(dragObj)</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">this</span>.setState({</span><br><span class="line"> treeContent: data,</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"> onNodeSelect = <span class="function">(<span class="params">selectedKeys, e</span>) =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'select'</span>, selectedKeys, e)</span><br><span class="line"> <span class="keyword">this</span>.setState({ <span class="attr">selectedKey</span>: selectedKeys[<span class="number">0</span>] })</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">// 由数组生成Tree</span></span><br><span class="line"> getTreeNode = <span class="function">(<span class="params">treeContent</span>) =></span> {</span><br><span class="line"> <span class="keyword">if</span> (!treeContent || treeContent.length === <span class="number">0</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">null</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">const</span> treeNode = treeContent.map(<span class="function">(<span class="params">value</span>) =></span> {</span><br><span class="line"> <span class="keyword">if</span> (value.id === <span class="string">'all'</span>) {</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <TreeNode</span><br><span class="line"> title={<div><span class="xml"><span class="tag"><<span class="name">Icon</span> <span class="attr">style</span>=<span class="string">{{</span> <span class="attr">marginRight:</span> '<span class="attr">5px</span>' }} <span class="attr">type</span>=<span class="string">"folder-open"</span> /></span>{value.title}<span class="tag"></<span class="name">div</span>></span></span>}</span><br><span class="line"> key={value.key}</span><br><span class="line"> ></span><br><span class="line"> {<span class="keyword">this</span>.getTreeNode(value.children)}</span><br><span class="line"> <<span class="regexp">/TreeNode>)</span></span><br><span class="line"><span class="regexp"> }</span></span><br><span class="line"><span class="regexp"> return (</span></span><br><span class="line"><span class="regexp"> <TreeNode</span></span><br><span class="line"><span class="regexp"> draggable</span></span><br><span class="line"><span class="regexp"> title={ <span>{value.title}</</span>span>}</span><br><span class="line"> key={value.key}</span><br><span class="line"> ></span><br><span class="line"> {<span class="keyword">this</span>.getTreeNode(value.children)}</span><br><span class="line"> <<span class="regexp">/TreeNode></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"> return (</span></span><br><span class="line"><span class="regexp"> treeNode</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"> setItemKeys = (Item) => {</span></span><br><span class="line"><span class="regexp"> Item = Object.assign({}, Item, {key: Item.id + Date.now()})</span></span><br><span class="line"><span class="regexp"> if (!Item.children || Item.children.length === 0) {</span></span><br><span class="line"><span class="regexp"> return Item</span></span><br><span class="line"><span class="regexp"> }</span></span><br><span class="line"><span class="regexp"> const children = Item.children.map((value) => {</span></span><br><span class="line"><span class="regexp"> return this.setItemKeys(value)</span></span><br><span class="line"><span class="regexp"> })</span></span><br><span class="line"><span class="regexp"> const ret = Object.assign({}, Item, {children})</span></span><br><span class="line"><span class="regexp"> return ret</span></span><br><span class="line"><span class="regexp"> }</span></span><br><span class="line"><span class="regexp"> /</span><span class="regexp">/ 新增Item</span></span><br><span class="line"><span class="regexp"> addItem = (Item) => {</span></span><br><span class="line"><span class="regexp"> /</span><span class="regexp">/ 为新加Item设置新的key</span></span><br><span class="line"><span class="regexp"> let { treeContent } = this.state</span></span><br><span class="line"><span class="regexp"> Item= this.setItemKeys(Item)</span></span><br><span class="line"><span class="regexp"> console.log('new key:', Item.key)</span></span><br><span class="line"><span class="regexp"> treeContent.push(Item)</span></span><br><span class="line"><span class="regexp"> this.setState({ treeContent })</span></span><br><span class="line"><span class="regexp"> }</span></span><br><span class="line"><span class="regexp"> render () {</span></span><br><span class="line"><span class="regexp"> const { treeContent } = this.state</span></span><br><span class="line"><span class="regexp"> const treeNodes = this.getTreeNode(treeContent)</span></span><br><span class="line"><span class="regexp"> const { connectDropTarget } = this.props</span></span><br><span class="line"><span class="regexp"> return connectDropTarget(</span></span><br><span class="line"><span class="regexp"> <div</span></span><br><span class="line"><span class="regexp"> style={{</span></span><br><span class="line"><span class="regexp"> float: "left",</span></span><br><span class="line"><span class="regexp"> minHeight: '500px',</span></span><br><span class="line"><span class="regexp"> border: '1px solid red',</span></span><br><span class="line"><span class="regexp"> marginLeft: '50px',</span></span><br><span class="line"><span class="regexp"> marginRight: '100px',</span></span><br><span class="line"><span class="regexp"> padding: '20px',</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"> 我可以接收drag、且本地可以排序的</span></span><br><span class="line"><span class="regexp"> <Tree</span></span><br><span class="line"><span class="regexp"> draggable</span></span><br><span class="line"><span class="regexp"> draggable</span></span><br><span class="line"><span class="regexp"> onDragEnter={this.onDragEnter}</span></span><br><span class="line"><span class="regexp"> onDrop={this.onDrop}</span></span><br><span class="line"><span class="regexp"> onSelect={this.onNodeSelect}</span></span><br><span class="line"><span class="regexp"> ></span></span><br><span class="line"><span class="regexp"> {treeNodes}</span></span><br><span class="line"><span class="regexp"> </</span>Tree></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><span class="line"><span class="regexp">}</span></span><br><span class="line"><span class="regexp">const spec = {</span></span><br><span class="line"><span class="regexp"> /</span><span class="regexp">/ monitor.getItem()可获取之前dragsource在beginDrag中return的Object</span></span><br><span class="line"><span class="regexp"> /</span><span class="regexp">/component可直接调用组件内部方法</span></span><br><span class="line"><span class="regexp"> drop (props, monitor, component) {</span></span><br><span class="line"><span class="regexp"> component.addItem(monitor.getItem())</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">function collect (connect, monitor) {</span></span><br><span class="line"><span class="regexp"> return {</span></span><br><span class="line"><span class="regexp"> connectDropTarget: connect.dropTarget(),</span></span><br><span class="line"><span class="regexp"> isOver: monitor.isOver(),</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">export default DropTarget('hahaha', spec, collect)(DragT)</span></span><br></pre></td></tr></table></figure></p>
]]></content>
<categories>
<category>Front-end</category>
<category>React</category>
<category>Practice</category>
</categories>
<tags>
<tag>React</tag>
<tag>Antd</tag>
<tag>Drag-dnd</tag>
</tags>
</entry>
<entry>
<title>上传项目到github</title>
<url>/2017/09/20/Tec/git/uploadProjectToGithub/</url>
<content><</span><br></pre></td></tr></table></figure></p>
]]></content>
<categories>
<category>Tec</category>
<category>Git</category>
</categories>
<tags>
<tag>Github</tag>
</tags>
</entry>
<entry>
<title>前端事件机制</title>
<url>/2017/09/20/front-end/basic/cssAndHtml/htmlEvent/</url>
<content><![CDATA[<p>前端事件机制一个总结<br><a id="more"></a></p>
<h2 id="HTML-DOM事件"><a href="#HTML-DOM事件" class="headerlink" title="HTML DOM事件"></a>HTML DOM事件</h2><p><a href="http://www.runoob.com/jsref/dom-obj-event.html" target="_blank" rel="noopener">HTML DOM 事件</a><br>oncontextmenu 事件，右键点击</p>
<h2 id="JS相关方法"><a href="#JS相关方法" class="headerlink" title="JS相关方法"></a>JS相关方法</h2><ol>
<li>阻止事件冒泡<br>e.stopPropagation</li>
</ol>
<h2 id="Q-amp-A"><a href="#Q-amp-A" class="headerlink" title="Q&A"></a>Q&A</h2><ol>
<li>浏览器事件实冒泡还是下发如何判断、如何设置?</li>
</ol>
]]></content>
<categories>
<category>Front-end</category>
<category>Basic</category>
</categories>
<tags>
<tag>Front-end</tag>
</tags>
</entry>
<entry>
<title>使用vscode插件ftp-sync实现代码同步到虚拟机</title>
<url>/2017/09/18/Tec/tools/vscode/sftpSync/</url>
<content><![CDATA[<p> <img src="https://camo.githubusercontent.com/068aa97ac2f6532050786b5f459e674210c170a2/687474703a2f2f692e696d6775722e636f6d2f573968347077572e676966" alt="步骤图示"><br><a id="more"></a><br>参考网页：</p>
<ol>
<li><a href="http://blog.csdn.net/dotuian/article/details/51119650" target="_blank" rel="noopener">在vs code中使用ftp-sync插件实现客户端与服务器端代码的同步</a></li>
<li><a href="https://github.com/lukasz-wronski/vscode-ftp-sync" target="_blank" rel="noopener">插件github地址</a>,本文动图来自于此<br>步骤如下：</li>
<li>在vscode搜索并安装此插件<blockquote>
<p>若安装不在插件商店的插件, 则可以放置到用户目录下的 .vscode/extensions 文件夹中。然后重启 VS Code 即可生效</p>
</blockquote>
</li>
<li><p>F1 或ctrl+shift+p,输入：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">>Ftp-sync init</span><br></pre></td></tr></table></figure>
</li>
<li><p>配置文件信息并保存<br>注: 云端的文件夹如果显示不存在的话可能是权限不够，将文件夹权限直接改为7777<br>实例如下：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line"> {</span><br><span class="line"> "remotePath": "/var/www/html/frontend",</span><br><span class="line"> "host": "10.206.136.12",</span><br><span class="line"> "username": "root",</span><br><span class="line"> "password": "root",</span><br><span class="line"> "port": 22,</span><br><span class="line"> "secure": false,</span><br><span class="line"> "protocol": "sftp",</span><br><span class="line"> "uploadOnSave": false,</span><br><span class="line"> "passive": false,</span><br><span class="line"> "debug": false,</span><br><span class="line"> "privateKeyPath": null,</span><br><span class="line"> "passphrase": null,</span><br><span class="line"> "ignore": [</span><br><span class="line"> "\\.vscode",</span><br><span class="line"> "\\.git",</span><br><span class="line"> "\\.DS_Store",</span><br><span class="line"> "node_modules\/\\.cache"</span><br><span class="line"> ],</span><br><span class="line"> "generatedFiles": {</span><br><span class="line"> "uploadOnSave": false,</span><br><span class="line"> "extensionsToInclude": [],</span><br><span class="line"> "path": ""</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
</li>
<li><p>使用命令进行同步吧</p>
</li>
</ol>
<h1 id="错误解决"><a href="#错误解决" class="headerlink" title="错误解决"></a>错误解决</h1><p>若ssh连接失败: Error: Unable to start subsystem: sftp<br>解决方案：</p>
<blockquote>
<p>In order to use sftp and scp you have to insert the following line in the configuration file /etc/ssh/sshd_config(RedHat Linux).<br>Subsystem sftp /usr/libexec/openssh/sftp-server<br>After this modification you must restart sshd. So you could use sftp and scp only to connect to hosts where sshd is running.<br>具体解决步骤<br><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">vi /etc/ssh/sshd_config</span><br><span class="line">插入或解除注释下面一句话</span><br><span class="line"># Subsystem sftp /usr/libexec/openssh/sftp-server</span><br><span class="line">保存并重启ssh服务</span><br><span class="line">/etc/init.d/sshd restart</span><br></pre></td></tr></table></figure></p>
</blockquote>
<h1 id="附录-命令集合"><a href="#附录-命令集合" class="headerlink" title="附录. 命令集合"></a>附录. 命令集合</h1> <figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">>Ftp-sync: init</span><br><span class="line">>Ftp-sync: Local to Remote</span><br><span class="line">>Ftp-sync: Remote to Local</span><br><span class="line">>....</span><br></pre></td></tr></table></figure>
<p>虚拟机:<br>package的dev字段:<br> “dev”: “HOST=0.0.0.0 HTTPS=true roadhog server”,<br>日常显示:<br> cd /var/www/html/frontend<br> npm run dev</p>
]]></content>
<categories>
<category>Tool</category>
<category>Tools</category>
<category>Vscode</category>
</categories>
</entry>
<entry>
<title>单向数据绑定和双向数据绑定</title>
<url>/2017/09/17/front-end/advance/dataFlow/</url>
<content><![CDATA[<p>详解单向数据流和双向数据流的区别与各自特点<br><a id="more"></a><br>非UI控件只有单向，不存在双向。</p>
<h2 id="Links"><a href="#Links" class="headerlink" title="Links"></a>Links</h2><p><a href="https://www.zhihu.com/question/49964363" target="_blank" rel="noopener">知乎——单向数据绑定和双向数据绑定的优缺点，适合什么场景？</a></p>
<h2 id="单向数据绑定"><a href="#单向数据绑定" class="headerlink" title="单向数据绑定"></a>单向数据绑定</h2><p>model到View<br>导致数据流也是单向的<br>单向 + inline event(组件钩子函数)实现数据的修改</p>
<h3 id="单向数据流"><a href="#单向数据流" class="headerlink" title="单向数据流"></a>单向数据流</h3><h3 id="优点"><a href="#优点" class="headerlink" title="优点"></a>优点</h3><p>便于实施统一状态管理(flux、redux)<br>便于维护</p>
<h3 id="缺点"><a href="#缺点" class="headerlink" title="缺点"></a>缺点</h3><p>代码量大，组件通信麻烦些</p>
<h2 id="双向数据绑定"><a href="#双向数据绑定" class="headerlink" title="双向数据绑定"></a>双向数据绑定</h2><p>model和view双向绑定<br>将数据变更的操作隐藏在了框架内部，调用者不会直接感知</p>
<h3 id="优点-1"><a href="#优点-1" class="headerlink" title="优点"></a>优点</h3><p>编写简单</p>
<h3 id="缺点-1"><a href="#缺点-1" class="headerlink" title="缺点"></a>缺点</h3><p>复杂，出错不好追溯</p>
]]></content>
<tags>
<tag>Front-end</tag>
</tags>
</entry>
<entry>
<title>antd Form自定义表单设计</title>
<url>/2017/09/17/front-end/React/Practice/ReactComponnetDivision/</url>
<content><![CDATA[<p><a href="https://ant.design/components/form/#components-form-demo-customized-form-controls" target="_blank" rel="noopener">Antd-自定义表单控件</a><br><a id="more"></a></p>
<h1 id="实现步骤"><a href="#实现步骤" class="headerlink" title="实现步骤"></a>实现步骤</h1><ol>
<li>子组件的值在componnetWillReceiveProps中set</li>
<li>子组件内控件绑定onChange方法，方法内触发triggerChange事件，通过props.onChange({值})回传value值<h2 id="示例源码-子组件value为object"><a href="#示例源码-子组件value为object" class="headerlink" title="示例源码: 子组件value为object"></a>示例源码: 子组件value为object</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span></span><br><span class="line"><span class="keyword">import</span> PropTypes <span class="keyword">from</span> <span class="string">'prop-types'</span></span><br><span class="line"><span class="keyword">import</span> { DatePicker, Select, Checkbox } <span class="keyword">from</span> <span class="string">'antd'</span></span><br><span class="line"><span class="keyword">import</span> moment <span class="keyword">from</span> <span class="string">'moment'</span></span><br><span class="line"><span class="comment">// import { getInitialTimeRange } from '../../../../utils/index'</span></span><br><span class="line"><span class="keyword">const</span> RangePicker = DatePicker.RangePicker</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">DateSelect</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>{</span><br><span class="line"> <span class="keyword">constructor</span> (props) {</span><br><span class="line"> <span class="keyword">super</span>(props)</span><br><span class="line"> <span class="keyword">const</span> value = props.value || {}</span><br><span class="line"> <span class="keyword">this</span>.state = {</span><br><span class="line"> dateType: value.dateType || <span class="string">'day'</span>,</span><br><span class="line"> dateRange: value.dateRange || [moment(), moment()],</span><br><span class="line"> onlyWork: value.onlyWork || <span class="literal">false</span>,</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> componentWillReceiveProps (nextProps) {</span><br><span class="line"> <span class="comment">// Should be a controlled component.</span></span><br><span class="line"> <span class="keyword">if</span> (<span class="string">'value'</span> <span class="keyword">in</span> nextProps) {</span><br><span class="line"> <span class="keyword">const</span> value = nextProps.value</span><br><span class="line"> <span class="keyword">this</span>.setState(value)</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> onCheckChange = <span class="function">(<span class="params">e</span>) =></span> {</span><br><span class="line"> <span class="keyword">const</span> onlyWork = e.target.checked</span><br><span class="line"> <span class="keyword">if</span> (!(<span class="string">'value'</span> <span class="keyword">in</span> <span class="keyword">this</span>.props)) {</span><br><span class="line"> <span class="keyword">this</span>.setState({ onlyWork })</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">this</span>.triggerChange({ onlyWork })</span><br><span class="line"> }</span><br><span class="line"> onPickerChange = <span class="function">(<span class="params">dateRange</span>) =></span> {</span><br><span class="line"> <span class="keyword">if</span> (!(<span class="string">'value'</span> <span class="keyword">in</span> <span class="keyword">this</span>.props)) {</span><br><span class="line"> <span class="keyword">this</span>.setState({ dateRange })</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">this</span>.triggerChange({ dateRange })</span><br><span class="line"> }</span><br><span class="line"> onSelectChange = <span class="function">(<span class="params">dateType</span>) =></span> {</span><br><span class="line"> <span class="keyword">if</span> (!(<span class="string">'value'</span> <span class="keyword">in</span> <span class="keyword">this</span>.props)) {</span><br><span class="line"> <span class="keyword">this</span>.setState({ dateType })</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">this</span>.triggerChange({ dateType })</span><br><span class="line"> }</span><br><span class="line"> triggerChange = <span class="function">(<span class="params">changedValue</span>) =></span> {</span><br><span class="line"> <span class="comment">// Should provide an event to pass value to Form.</span></span><br><span class="line"> <span class="keyword">const</span> onChange = <span class="keyword">this</span>.props.onChange</span><br><span class="line"> <span class="keyword">if</span> (onChange) {</span><br><span class="line"> onChange(<span class="built_in">Object</span>.assign({}, <span class="keyword">this</span>.state, changedValue))</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> render () {</span><br><span class="line"> <span class="keyword">const</span> { dateType, dateRange, onlyWork } = <span class="keyword">this</span>.state</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <div></span><br><span class="line"> <Select</span><br><span class="line"> onSelect={<span class="keyword">this</span>.onSelectChange}</span><br><span class="line"> value={dateType}</span><br><span class="line"> style={{ <span class="attr">width</span>: <span class="string">'100px'</span> }}</span><br><span class="line"> ></span><br><span class="line"> <Select.Option value=<span class="string">"week"</span>>周<<span class="regexp">/Select.Option></span></span><br><span class="line"><span class="regexp"> <Select.Option value="month">月</</span>Select.Option></span><br><span class="line"> <Select.Option value=<span class="string">"day"</span>>日<<span class="regexp">/Select.Option></span></span><br><span class="line"><span class="regexp"> <Select.Option value="customize">自定义</</span>Select.Option></span><br><span class="line"> <<span class="regexp">/Select></span></span><br><span class="line"><span class="regexp"> <RangePicker format</span></span><br><span class="line"><span class="regexp"> value={dateRange}</span></span><br><span class="line"><span class="regexp"> onChange={this.onPickerChange}</span></span><br><span class="line"><span class="regexp"> format="YYYY-MM-DD"</span></span><br><span class="line"><span class="regexp"> allowClear={false}</span></span><br><span class="line"><span class="regexp"> style={{ marginLeft: '10px' }}</span></span><br><span class="line"><span class="regexp"> /</span>></span><br><span class="line"> <Checkbox checked={onlyWork} style={{ <span class="attr">marginLeft</span>: <span class="string">'10px'</span> }} onChange={<span class="keyword">this</span>.onCheckChange} disabled={dateType === <span class="string">'day'</span>}>只选工作日<<span class="regexp">/Checkbox></span></span><br><span class="line"><span class="regexp"> </</span>div></span><br><span class="line"> )</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">DateSelect.propTypes = {</span><br><span class="line"> onChange: PropTypes.func,</span><br><span class="line"> value: PropTypes.object,</span><br><span class="line">}</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> DateSelect</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="示例源码-子组件value为一个单一的值"><a href="#示例源码-子组件value为一个单一的值" class="headerlink" title="示例源码: 子组件value为一个单一的值"></a>示例源码: 子组件value为一个单一的值</h2><p>适用于自定义表单只有一个值但需要有和其它组件联动<br>这时要注意收到的props格式为{ value: ‘一个值’}<br>triggerChange时只需要提交value的值，如 onChange(‘改变的值’)<br><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span></span><br><span class="line"><span class="keyword">import</span> { Select, Button, Icon } <span class="keyword">from</span> <span class="string">'antd'</span></span><br><span class="line"><span class="keyword">import</span> PropTypes <span class="keyword">from</span> <span class="string">'prop-types'</span></span><br><span class="line"><span class="keyword">const</span> Option = Select.Option</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">TimeServer</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>{</span><br><span class="line"> <span class="keyword">constructor</span> (props) {</span><br><span class="line"> <span class="keyword">super</span>(props)</span><br><span class="line"> <span class="keyword">this</span>.state = {</span><br><span class="line"> value: <span class="string">''</span>,</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> componentWillReceiveProps (nextProps) {</span><br><span class="line"> <span class="keyword">if</span> (<span class="string">'value'</span> <span class="keyword">in</span> nextProps) {</span><br><span class="line"> <span class="keyword">const</span> value = nextProps.value</span><br><span class="line"> <span class="built_in">console</span>.log(value)</span><br><span class="line"> <span class="keyword">this</span>.setState({ value })</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> onSelectChange = <span class="function">(<span class="params">value</span>) =></span> {</span><br><span class="line"> <span class="keyword">if</span> (!(<span class="string">'value'</span> <span class="keyword">in</span> <span class="keyword">this</span>.props)) {</span><br><span class="line"> <span class="keyword">this</span>.setState({ value })</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">this</span>.triggerChange(value)</span><br><span class="line"> }</span><br><span class="line"> triggerChange = <span class="function">(<span class="params">changedValue</span>) =></span> {</span><br><span class="line"> <span class="comment">// Should provide an event to pass value to Form.</span></span><br><span class="line"> <span class="keyword">const</span> onChange = <span class="keyword">this</span>.props.onChange</span><br><span class="line"> <span class="keyword">if</span> (onChange) {</span><br><span class="line"> onChange(changedValue)</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> handleSyncTime = <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">`sync<span class="subst">${<span class="keyword">this</span>.state.value}</span>`</span>)</span><br><span class="line"> }</span><br><span class="line"> render = <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">const</span> { value } = <span class="keyword">this</span>.state</span><br><span class="line"> <span class="keyword">const</span> options = [</span><br><span class="line"> {</span><br><span class="line"> optValue: <span class="string">'1'</span>,</span><br><span class="line"> name: <span class="string">'123.com'</span>,</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> optValue: <span class="string">'2'</span>,</span><br><span class="line"> name: <span class="string">'234.com'</span>,</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> optValue: <span class="string">'3'</span>,</span><br><span class="line"> name: <span class="string">'456.com'</span>,</span><br><span class="line"> },</span><br><span class="line"> ]</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'tis:'</span>, value)</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <div></span><br><span class="line"> <div></span><br><span class="line"> <Select style={{ <span class="attr">width</span>: <span class="string">'100px'</span>, <span class="attr">float</span>: <span class="string">'left'</span> }} value={value} onChange={<span class="keyword">this</span>.onSelectChange}></span><br><span class="line"> {options.map(<span class="function">(<span class="params">{ optValue, name }</span>) =></span> <span class="xml"><span class="tag"><<span class="name">Option</span> <span class="attr">value</span>=<span class="string">{optValue}</span>></span>{name}<span class="tag"></<span class="name">Option</span>></span></span>)}</span><br><span class="line"> <<span class="regexp">/Select></span></span><br><span class="line"><span class="regexp"> <Button style={{ marginLeft: '10px' }} onClick={this.handleSyncTime}><Icon type="sync" /</span>>立即同步<<span class="regexp">/Button></span></span><br><span class="line"><span class="regexp"> </</span>div></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><span class="line"><span class="regexp">}</span></span><br><span class="line"><span class="regexp">TimeServer.propTypes = {</span></span><br><span class="line"><span class="regexp"> onChange: PropTypes.func,</span></span><br><span class="line"><span class="regexp">}</span></span><br><span class="line"><span class="regexp">export default TimeServer</span></span><br></pre></td></tr></table></figure></p>
<h1 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h1><p>看api看仔细些，能省很多时间</p>
<h1 id="弯路"><a href="#弯路" class="headerlink" title="弯路"></a>弯路</h1><p>今天本打算做React的总结的(总结说起来容易，做起来真的是千头万绪理不清…)，看着有时间做了会Form表单，没想到一做就半天，效果如下图，做起来也遇到些问题，记录以下吧，今天的总结看来会是得泡汤了…<br><img src="https://github.com/vonxq/vonxq.github.io/blob/master/img/form.png?raw=true" alt><br>Form表单是直接用的Antd插件，</p>
<h2 id="整体布局"><a href="#整体布局" class="headerlink" title="整体布局"></a>整体布局</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">//分割线</span></span><br><span class="line"> <hr style={{ <span class="attr">border</span>: <span class="string">'0.5px dotted #cccccc'</span> }} /></span><br><span class="line"><span class="comment">// 段标题</span></span><br><span class="line"> <span className={styles[<span class="string">'type-intro'</span>]}>过滤条件<<span class="regexp">/span></span></span><br><span class="line"><span class="regexp">.type-intro{</span></span><br><span class="line"><span class="regexp"> position: relative;</span></span><br><span class="line"><span class="regexp"> bottom: -25px;</span></span><br><span class="line"><span class="regexp"> font-weight: bold;</span></span><br><span class="line"><span class="regexp">}</span></span><br></pre></td></tr></table></figure>
<h2 id="Form表单排列"><a href="#Form表单排列" class="headerlink" title="Form表单排列"></a>Form表单排列</h2><p>图中的表单较为复杂</p>
<ol>
<li>时间范围：有三个子表项</li>
<li>指定时段：只有在选择指定时段选项时才会出现时间段1和时间段2的具体设置，否则只显示选择框</li>
</ol>
<p>实现:</p>
<h3 id="时间范围"><a href="#时间范围" class="headerlink" title="时间范围"></a>时间范围</h3><p>FormItem中嵌套一个组件(不能是纯函数组件)，当时间范围中任何一个表项发生变化时，直接通过setFieldsValue改变Form值</p>
<p>组件内表项的值从props中获取，Form组件中在state中存储对应值</p>
<h3 id="指定时段"><a href="#指定时段" class="headerlink" title="指定时段"></a>指定时段</h3><p>原理同上，分三层 Form——》指定时段——》时间段（1,2）</p>
<p>存在的问题:</p>
<ol>
<li>每次改变都需set然后下发，性能不好</li>
<li>form表单内容的组织该以怎样的形式？本文的设计方法会使表单内容有很多嵌套的object</li>
<li>子组件中的每一个小组件的变化都需要写onChange方法（每种组件的onChange的参数不同），有没有简便的做法？？？</li>
</ol>
]]></content>
<categories>
<category>Front-end</category>
<category>React</category>
<category>Practice</category>
</categories>
<tags>
<tag>React</tag>
<tag>Antd</tag>
</tags>
</entry>
<entry>
<title>babel使用小结</title>
<url>/2017/09/17/front-end/React/TechStack/babel/</url>
<content><![CDATA[<p>babel使用小结<br><a id="more"></a></p>
<h1 id="babel"><a href="#babel" class="headerlink" title="babel"></a>babel</h1><blockquote>
<p>Babel 把用最新标准编写的 JavaScript 代码向下编译成可以在今天随处可用的版本。 这一过程叫做“源码到源码”编译， 也被称为转换编译。<br>通俗的说，就是我们可以用ES6, ES7等来编写代码，Babel会把他们统统转为ES5。<br><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0</span><br></pre></td></tr></table></figure></p>
</blockquote>
<h2 id="配置文件"><a href="#配置文件" class="headerlink" title="配置文件"></a>配置文件</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">{</span><br><span class="line"> "presets": [</span><br><span class="line"> "es2015",</span><br><span class="line"> "react",</span><br><span class="line"> "stage-0"</span><br><span class="line"> ],</span><br><span class="line"> "plugins": []</span><br><span class="line">}</span><br></pre></td></tr></table></figure>]]></content>
</entry>
<entry>
<title>immutableJS笔记整理</title>
<url>/2017/09/17/front-end/React/TechStack/immutableJS/</url>
<content><![CDATA[<p>数据不可变会避免很多对象引用的错误。<br><a id="more"></a><br>ImmutableJS 提供了 7 种不可修改的数据类型：List、Map、Stack、OrderedMap、Set、OrderedSet、Record。若是对 Immutable 对象操作都会回传一个新值。其中比较常用的有 List、Map 和 Set：</p>
<ol>
<li>map:键值对对象，可增删更新….与ES6的map对应</li>
<li>List：有序且可以重复值，对应于一般的 Array</li>
<li>Set：没有顺序且不能重复的列表<br>特性</li>
<li>数据一旦被创建就不能被修改，$以示区别</li>
<li>Structural sharing</li>
<li>Support Lazy Operation</li>
<li>fromJS()、toJS()转换，会消耗大量资源</li>
<li>支持函数式编程</li>
<li>容易实现Redo/Undo历史回顾</li>
</ol>
]]></content>
</entry>
<entry>
<title>前端相关术语记录</title>
<url>/2017/09/17/front-end/basic/Terminology/</url>
<content><![CDATA[<p>一些碰到的术语整理。<br><a id="more"></a></p>
<h2 id="前端基础"><a href="#前端基础" class="headerlink" title="前端基础"></a>前端基础</h2><p>BEM规则:<br> css命名规则，格式如下:<br> 模块（Block）-节点名(Element)-节点状态(Modifier)<br>MVVM:<br> Modal-View-ViewModal(Modal Of View) <a href="https://github.com/livoras/blog/issues/11" target="_blank" rel="noopener">参考</a><br>polyfill垫片库:<br> 解决兼容性问题<br>Repl:<br> “读取-求值-输出”循环(Read-Eval-Print Loop）是一个简单的，交互式的编程环境。这也被称做交互式顶层构件（interactive toplevel）。REPL使得探索性的编程和调试更加便捷，因为“读取-求值-输出”循环通常会比经典的“编辑-编译-运行-调试”模式要更快。<br>Hook：<br> 钩子，在已经可以正常运作的程序中额外添加流程控制。可以实现但不限于获取所hook流程中特定时刻的各种数据，修改数据，修改程序流程</p>
<h2 id="React相关"><a href="#React相关" class="headerlink" title="React相关"></a>React相关</h2><p>虚拟DOM: 虚拟DOM使用diff算法做到最小更新，优化性能简化了页面更新维护操作。MVVM视图和状态绑定，双向绑定引擎根据状态自动更新视图。<br><!-- ES: 事件溯源，事件改变状态 --></p>
<h2 id="项目相关"><a href="#项目相关" class="headerlink" title="项目相关"></a>项目相关</h2>]]></content>
<categories>
<category>Front-end</category>
<category>Basic</category>
</categories>
</entry>
<entry>
<title>shells</title>
<url>/2017/09/17/Tec/sql/PostgreSql/</url>
<content><![CDATA[<p>linux shell、bash、windows cmd区别与联系<br>都是命令行解释器,都是一个用户与操作系统的交互接口。<br><a id="more"></a></p>
<h1 id="综述"><a href="#综述" class="headerlink" title="综述"></a>综述</h1><h1 id="shell"><a href="#shell" class="headerlink" title="shell"></a>shell</h1><p>shell是一个命令解释器，处于内核和用户之间，负责把用户的指令传递给内核并且把执行结果回显给用户，同时，shell也可以作为一门强大的编程语言。</p>
<p>shell种类：</p>
<ol>
<li>Bourne Shell（/usr/bin/sh或/bin/sh）</li>
<li>Bourne Again Shell（/bin/bash）</li>
<li>C Shell（/usr/bin/csh）</li>
<li>K Shell（/usr/bin/ksh）</li>
<li>Shell for Root（/sbin/sh）<h2 id="shell脚本-shell-script"><a href="#shell脚本-shell-script" class="headerlink" title="shell脚本(shell script)"></a>shell脚本(shell script)</h2><a href="http://www.runoob.com/linux/linux-shell.html" target="_blank" rel="noopener">shell教程</a><blockquote>
<p>其中有很多条命令,让Shell一次把这些命令执行完,而不必一条一条地敲 命令。Shell脚本和编程语言很相似,也有变量和流程控制语句,包括循环和分支。但Shell脚本是解释执行的,不需 要编译,Shell程序从脚本中一行一行读取并执行这些命令,相当于一个用户把脚本中的命令一行一 行敲到Shell提示符下执行。作为程序设计语言，它虽然不是 Linux系统内核的一部分，但它调用了系统内核的大部分功能来执行程序、创建文档并以并行的方式协调各个程序的运行。</p>
</blockquote>
<h1 id="bash"><a href="#bash" class="headerlink" title="bash"></a>bash</h1>Bourne Again Shell<br>是shell的一种，最常用的shell之一。<h1 id="git-bash"><a href="#git-bash" class="headerlink" title="git bash"></a>git bash</h1>git bash是Windows下的命令行工具。<br>方便你在windows下使用git命令的模拟终端（windows自带的cmd功能太弱）linux、unix可以直接使用git。<br>基于msys GNU环境，有git分布式版本控制工具，也主要用于git。<br>GNU环境，就是说如果你喜欢linux/unix的环境，就可以选择使用git bash。<br>里面有你熟悉的linux工具，tar，grep，awk等，且可以安装编译环境gcc，make等。</li>
</ol>
]]></content>
<categories>
<category>Tec</category>
<category>Shell</category>
</categories>
</entry>
<entry>
<title>shells</title>
<url>/2017/09/17/Tec/shell/shells/</url>
<content><![CDATA[<p>linux shell、bash、windows cmd区别与联系<br>都是命令行解释器,都是一个用户与操作系统的交互接口。<br><a id="more"></a></p>
<h1 id="综述"><a href="#综述" class="headerlink" title="综述"></a>综述</h1><h1 id="shell"><a href="#shell" class="headerlink" title="shell"></a>shell</h1><p>shell是一个命令解释器，处于内核和用户之间，负责把用户的指令传递给内核并且把执行结果回显给用户，同时，shell也可以作为一门强大的编程语言。</p>
<p>shell种类：</p>
<ol>
<li>Bourne Shell（/usr/bin/sh或/bin/sh）</li>
<li>Bourne Again Shell（/bin/bash）</li>
<li>C Shell（/usr/bin/csh）</li>
<li>K Shell（/usr/bin/ksh）</li>
<li>Shell for Root（/sbin/sh）<h2 id="shell脚本-shell-script"><a href="#shell脚本-shell-script" class="headerlink" title="shell脚本(shell script)"></a>shell脚本(shell script)</h2><a href="http://www.runoob.com/linux/linux-shell.html" target="_blank" rel="noopener">shell教程</a><blockquote>
<p>其中有很多条命令,让Shell一次把这些命令执行完,而不必一条一条地敲 命令。Shell脚本和编程语言很相似,也有变量和流程控制语句,包括循环和分支。但Shell脚本是解释执行的,不需 要编译,Shell程序从脚本中一行一行读取并执行这些命令,相当于一个用户把脚本中的命令一行一 行敲到Shell提示符下执行。作为程序设计语言，它虽然不是 Linux系统内核的一部分，但它调用了系统内核的大部分功能来执行程序、创建文档并以并行的方式协调各个程序的运行。</p>
</blockquote>
<h1 id="bash"><a href="#bash" class="headerlink" title="bash"></a>bash</h1>Bourne Again Shell<br>是shell的一种，最常用的shell之一。<h1 id="git-bash"><a href="#git-bash" class="headerlink" title="git bash"></a>git bash</h1>git bash是Windows下的命令行工具。<br>方便你在windows下使用git命令的模拟终端（windows自带的cmd功能太弱）linux、unix可以直接使用git。<br>基于msys GNU环境，有git分布式版本控制工具，也主要用于git。<br>GNU环境，就是说如果你喜欢linux/unix的环境，就可以选择使用git bash。<br>里面有你熟悉的linux工具，tar，grep，awk等，且可以安装编译环境gcc，make等。</li>
</ol>
]]></content>
<categories>
<category>Tec</category>
<category>Shell</category>
</categories>
</entry>
<entry>
<title>svn使用小结</title>
<url>/2017/09/16/Tec/svn/svn/</url>
<content><![CDATA[<a id="more"></a>
<p>从svn删除文件</p>
]]></content>
<categories>
<category>Tec</category>
<category>Svn</category>
</categories>
<tags>
<tag>svn</tag>
</tags>
</entry>
<entry>
<title>Javascript模块化(todo)</title>
<url>/2017/09/16/front-end/advance/JsModular/</url>
<content><![CDATA[<p>前端项目开发的过程中，为了提高效率肯定会涉及到JS模块化，按需加载资源。<br><a id="more"></a><br>本文参考：</p>
<ol>
<li><a href="http://www.cnblogs.com/chenguangliang/p/5856701.html" target="_blank" rel="noopener">js模块化编程之彻底弄懂CommonJS和AMD/CMD</a></li>
</ol>
<h1 id="JS模块规范"><a href="#JS模块规范" class="headerlink" title="JS模块规范"></a>JS模块规范</h1><h2 id="CommonJS"><a href="#CommonJS" class="headerlink" title="CommonJS"></a>CommonJS</h2><h2 id="AMD"><a href="#AMD" class="headerlink" title="AMD"></a>AMD</h2><h2 id="CMD"><a href="#CMD" class="headerlink" title="CMD"></a>CMD</h2>]]></content>
<categories>
<category>Front-end</category>
<category>Engineering</category>
</categories>
<tags>
<tag>JAVASCRIPT</tag>
</tags>
</entry>
<entry>
<title>React开发流程梳理</title>
<url>/2017/09/16/front-end/React/Practice/ReactDemoRecord/</url>
<content><![CDATA[<p>React学习整整两个月了，从看基础文档到理解分析项目源码，然后自己慢慢依葫芦画瓢，到现在能初步地掌握一些基础知识，我学得确实很慢。不总结一番老觉得自己像是只学了Antd，今天周六，抽一天时间把React整个开发流程过一下吧。<br><a id="more"></a><br>参考材料：</p>
<ol>
<li><a href="https://facebook.github.io/react/docs/installation.html#creating-a-new-application" target="_blank" rel="noopener">Facebook-react</a></li>
<li><a href="http://www.runoob.com/react/react-tutorial.html" target="_blank" rel="noopener">菜鸟教程-react</a><h1 id="React程序的运行"><a href="#React程序的运行" class="headerlink" title="React程序的运行"></a>React程序的运行</h1>不得不说一开始就懵了，写程序的时候都是使用的DVA脚手架，但React绝不局限于Dva啊<br>刚看见一篇文章分享也写得不错，比我全:<a href="http://www.w3cplus.com/react/taming-react-setup.html" target="_blank" rel="noopener">React几种基本配置方案</a><h2 id="不使用脚手架"><a href="#不使用脚手架" class="headerlink" title="不使用脚手架"></a>不使用脚手架</h2>先来看看抛弃脚手架之后React如何运行吧<h3 id="在线加载依赖"><a href="#在线加载依赖" class="headerlink" title="在线加载依赖"></a>在线加载依赖</h3><blockquote>
<p>react.min.js - React 的核心库<br>react-dom.min.js - 提供与 DOM 相关的功能<br>babel.min.js-Babel可以将ES6代码转为ES5代码，这样我们就能在目前不支持ES6浏览器上执行React代码。Babel内嵌了对JSX的支持。通过将Babel和babel-sublime包(package)一同使用可以让源码的语法渲染上升到一个全新的水平。</p>
</blockquote>
</li>
</ol>
<p>下面文件加载了react、ract-dom、babel等库，实现了hello world<br><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="meta-keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Hello React!<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.bootcss.com/react/15.4.2/react.min.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"example"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/babel"</span>></span></span><br><span class="line"> ReactDOM.render(</span><br><span class="line"><span class="handlebars"><span class="xml"> <span class="tag"><<span class="name">h1</span>></span>Hello, world!<span class="tag"></<span class="name">h1</span>></span>,</span></span></span><br><span class="line"><span class="javascript"> <span class="built_in">document</span>.getElementById(<span class="string">'example'</span>)</span></span><br><span class="line"> );</span><br><span class="line"> <span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure></p>
<h3 id="本地npm包运行"><a href="#本地npm包运行" class="headerlink" title="本地npm包运行"></a>本地npm包运行</h3><p><a href></a><br><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h2 id="create-react-app脚手架"><a href="#create-react-app脚手架" class="headerlink" title="create-react-app脚手架"></a>create-react-app脚手架</h2><p><a href="https://github.com/facebookincubator/create-react-app" target="_blank" rel="noopener">create-react-app官方文档(github)</a><br>create-react-app来自于Facebook，通过该命令我们无需配置就能快速构建React开发环境。<br>create-react-app自动创建的项目是基于Webpack + ES6 。<br>create-react-app通过react-scripts这个npm module调用webpack及webpack-dev-server,PORT不可定制</p>
<h3 id="特性："><a href="#特性：" class="headerlink" title="特性："></a>特性：</h3><blockquote>
<p>If you’re getting started with React, use create-react-app to automate the build of your app. There is no configuration file, and react-scripts is the only extra build dependency in your package.json. Your environment will have everything you need to build a modern React app:</p>
</blockquote>
<blockquote>
<ol>
<li>React, JSX, ES6, and Flow syntax support.</li>
<li>Language extras beyond ES6 like the object spread operator.</li>
<li>A dev server that lints for common errors.</li>
<li>Import CSS and image files directly from JavaScript.</li>
<li>Autoprefixed CSS, so you don’t need -webkit or other prefixes.</li>
<li>A build script to bundle JS, CSS, and images for production, with sourcemaps.</li>
<li>An offline-first service worker and a web app manifest, meeting all the Progressive Web App criteria.</li>
</ol>
</blockquote>
<p>The feature set is intentionally limited. It doesn’t support advanced features such as server rendering or CSS modules. The tool is also non-configurable because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything.<br>You don’t have to use this. Historically it has been easy to gradually adopt React. However many people create new single-page React apps from scratch every day. We’ve heard loud and clear that this process can be error-prone and tedious, especially if this is your first JavaScript build stack. This project is an attempt to figure out a good way to start developing React apps.</p>
<h3 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install -g create-react-app</span><br><span class="line">create-react-app my-app</span><br><span class="line"></span><br><span class="line">cd my-app</span><br><span class="line">npm start</span><br></pre></td></tr></table></figure>
<h2 id="使用dva脚手架"><a href="#使用dva脚手架" class="headerlink" title="使用dva脚手架"></a>使用dva脚手架</h2><h3 id="dva-cli介绍"><a href="#dva-cli介绍" class="headerlink" title="dva-cli介绍"></a>dva-cli介绍</h3><p>脚手架，命令行工具，可以新建并初始化一个dva项目，为dva安装相关依赖<br>dva项目的运行依赖roadhog，roadhog的介绍可参考<a href="https://github.com/sorrycc/blog/issues/15" target="_blank" rel="noopener">介绍 roadhog —— 让 create-react-app 可配的命令行工具 #15</a>.<br>roadhog依赖webpack</p>
<h3 id="dva介绍"><a href="#dva介绍" class="headerlink" title="dva介绍"></a>dva介绍</h3><p><a href="https://github.com/dvajs/dva/issues/1" target="_blank" rel="noopener">dva简介</a></p>
<blockquote>
<p>dva 是基于现有应用架构 (redux + react-router + redux-saga 等)的一层轻量封装，没有引入任何新概念，全部代码不到 100 行。( Inspired by elm and choo. )<br>dva 是 framework，不是 library，类似 emberjs，会很明确地告诉你每个部件应该怎么写，这对于团队而言，会更可控。另外，除了 react 和 react-dom 是 peerDependencies 以外，dva 封装了所有其他依赖。<br>dva 实现上尽量不创建新语法，而是用依赖库本身的语法，比如 router 的定义还是用 react-router 的 JSX 语法的方式(dynamic config 是性能的考虑层面，之后会支持)。<br>最核心的是提供了 app.model 方法，用于把 reducer, initialState, action, saga 封装到一起</p>
</blockquote>
<h4 id="特性"><a href="#特性" class="headerlink" title="特性"></a>特性</h4><blockquote>
<ol>
<li>易学易用：仅有 6 个 api，对 redux 用户尤其友好</li>
<li>elm 概念：通过 reducers, effects 和 subscriptions 组织 model</li>
<li>支持 mobile 和 react-native：跨平台 (react-native 例子)</li>
<li>支持 HMR：目前基于 babel-plugin-dva-hmr 支持 components、routes 和 models 的 HMR<br>动态加载 Model 和路由：按需加载加快访问速度 (例子)</li>
<li>插件机制：比如 dva-loading 可以自动处理 loading 状态，不用一遍遍地写 showLoading 和 hideLoading</li>
<li>完善的语法分析库 dva-ast：dva-cli 基于此实现了智能创建 model, router 等</li>
<li>支持 TypeScript：通过 d.ts (例子)</li>
</ol>
</blockquote>
<h3 id="使用-1"><a href="#使用-1" class="headerlink" title="使用"></a>使用</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install dva-cli -g</span><br><span class="line"># 版本要 >= 0.8.1(170917最新版本为0.8.1)</span><br><span class="line">dva -v</span><br><span class="line"></span><br><span class="line">dva new dva-quickstart</span><br><span class="line">cd dva-quickstart</span><br><span class="line">npm start</span><br><span class="line"></span><br><span class="line"># 安装 antd 和 babel-plugin-import</span><br><span class="line"># babel-plugin-import 是用来按需加载 antd 的脚本和样式的</span><br><span class="line">npm install antd babel-plugin-import --save</span><br></pre></td></tr></table></figure>
<h2 id="tips"><a href="#tips" class="headerlink" title="tips"></a>tips</h2><h3 id="开发环境配置文档"><a href="#开发环境配置文档" class="headerlink" title="开发环境配置文档"></a>开发环境配置文档</h3><ol>
<li>Package.json<br>项目信息，依赖信息，通过—save-dev安装的插件信息在”devDependencies”项中</li>
<li>Webpack.config.js<br>项目打包入口，打包输出地址，loader(babel)，devSever开放（伺服资源文件，资源服务器,热替换，即时更新）<br>1) devSever<br><a href="http://www.jianshu.com/p/941bfaf13be1" target="_blank" rel="noopener">WEBPACK DEV SERVER</a><br>小型的node.js Express静态文件服务器,它使用webpack-dev-middleware中间件来为通过webpack打包生成的资源文件提供Web服务<br>2) 1<br>Webpack</li>
<li>.babelrc<br>[在node中使用babel6的一些简单分享]<br>(<a href="https://cnodejs.org/topic/56460e0d89b4b49902e7fbd3" target="_blank" rel="noopener">https://cnodejs.org/topic/56460e0d89b4b49902e7fbd3</a>)<br>rc结尾的文件通常代表运行时自动加载的文件，配置等。<br>A. “presets”<br>要启动什么样的预设转码<br>对.babelrc的设置，可以直接存放在package.json中，“babel”字段 <h1 id="使用dva开发自己的程序"><a href="#使用dva开发自己的程序" class="headerlink" title="使用dva开发自己的程序"></a>使用dva开发自己的程序</h1><h2 id="router简单使用"><a href="#router简单使用" class="headerlink" title="router简单使用"></a>router简单使用</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> Test <span class="keyword">from</span> <span class="string">'./routes/test'</span>;</span><br><span class="line">...</span><br><span class="line"><Route path=<span class="string">"/test"</span> exact component={Test} /></span><br></pre></td></tr></table></figure>
</li>
</ol>
<h1 id="克隆antd-admin快速开发"><a href="#克隆antd-admin快速开发" class="headerlink" title="克隆antd-admin快速开发"></a>克隆antd-admin快速开发</h1><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">git clone https://github.com/zuiidea/antd-admin.git</span><br><span class="line">npm i 或者 yarn install</span><br><span class="line"># 开发：</span><br><span class="line">npm run build:dll #第一次npm run dev时需运行此命令，使开发时编译更快</span><br><span class="line">npm run dev</span><br><span class="line">打开 http://localhost:8000</span><br><span class="line"></span><br><span class="line"># 构建</span><br><span class="line">npm run build</span><br><span class="line">将会打包至dist/{version}目录 #package.json里version字段</span><br><span class="line">npm run build:new</span><br><span class="line">将会打包至dist/{version增加1}目录 #package.json里version字段</span><br><span class="line"></span><br><span class="line"># 代码检测</span><br><span class="line">npm run lint</span><br></pre></td></tr></table></figure>
]]></content>
<categories>
<category>Front-end</category>
<category>React</category>
</categories>
<tags>
<tag>React</tag>
</tags>
</entry>
<entry>
<title>yarn和npm、cnpm使用对比小结</title>
<url>/2017/09/16/Tec/tools/node/yarnAndNpm/</url>
<content><![CDATA[<h1 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h1><h2 id="yarn安装"><a href="#yarn安装" class="headerlink" title="yarn安装"></a>yarn安装</h2><a id="more"></a>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">npm install yarn -g</span><br><span class="line">yarn -v </span><br><span class="line">// 注：需要将yarn global路径添加到系统环境变量中</span><br><span class="line">yarn global bin</span><br><span class="line">// 非常重要!!!!!!!!!!! 将bin路径添加到系统环境变量中,保证yarn的global add的东西可用</span><br></pre></td></tr></table></figure>
<h1 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h1><p>yarn的具体使用可查看<a href="https://yarnpkg.com/zh-Hans/docs/cli/install" target="_blank" rel="noopener">官方文档</a></p>
<table>
<thead>
<tr>
<th>命令名</th>
<th>npm</th>
<th>yarn</th>
</tr>
</thead>
<tbody>
<tr>
<td>安装package依赖</td>
<td>npm install</td>
<td>yarn</td>
</tr>
<tr>
<td>安装xxx插件</td>
<td>npm install xxx (–save)</td>
<td>yarn add xxx(包立即被保存到 package.json 中)</td>
</tr>
<tr>
<td>安装xxx插件并添加到开发环境依赖</td>
<td>npm install xxx –save-dev</td>
<td>yarn add xxx –dev</td>
</tr>
<tr>
<td>全局安装xxx插件</td>
<td>npm install xxx -g</td>
<td>yarn global add xxx</td>
</tr>
<tr>
<td>卸载xxx插件</td>
<td>npm uninstall xxx (–save)</td>
<td>yarn remove xxx</td>
</tr>
<tr>
<td>卸载xxx插件</td>
<td>npm uninstall xxx (–save)</td>
<td>yarn remove xxx</td>
</tr>
<tr>
<td>查看xxx插件云端最新版本</td>
<td>npm view xxx version</td>
<td>yarn info xxx version</td>
</tr>
<tr>
<td>查看xxx插件云端全部版本</td>
<td>npm view xxx versions</td>
<td>yarn info xxx versions</td>
</tr>
<tr>
<td>查看xxx插件云端信息</td>
<td>npm info xxx</td>
<td>yarn info xxx(@版本号可查看特定版本信息)</td>
</tr>
</tbody>
</table>
<h2 id="cnpm安装"><a href="#cnpm安装" class="headerlink" title="cnpm安装"></a>cnpm安装</h2><p>国内使用npm速度很慢，可以使用淘宝定制的cnpm(gzip压缩支持)命令行工具代替默认的npm:<br><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install -g cnpm --registry=https://registry.npm.taobao.org</span><br><span class="line"># 注：其他脚手架安装插件时可能使用npm的registry，故需要设置一下</span><br><span class="line">npm config set registry https://registry.npm.taobao.org</span><br><span class="line"></span><br><span class="line"># 使用：</span><br><span class="line">cnpm install [name]</span><br></pre></td></tr></table></figure></p>
<h2 id="问题及解决"><a href="#问题及解决" class="headerlink" title="问题及解决"></a>问题及解决</h2><p>问题: npm ERR! network getaddrinfo ENOTFOUND registry.cnpmjs.org registry.cnpmjs.org<br>换成其他npm源也会这样<br>解决:</p>
<blockquote>
<ol>
<li>先把镜像换回去<br>npm config set registry <a href="http://registry.npmjs.org/" target="_blank" rel="noopener">http://registry.npmjs.org/</a><br>or<br>vi ~/.npmrc<br>registry=<a href="https://registry.npmjs.org/" target="_blank" rel="noopener">https://registry.npmjs.org/</a></li>
<li>npm config delete proxy(这步应该没啥用，先放着了)</li>
<li>参照<a href="https://github.com/npm/npm/issues/6686" target="_blank" rel="noopener">Glavin001的解决办法</a>，最重要的应该是在host里面添加相应registry的host记录，这里是<br>151.101.32.162 registry.npmjs.org<br>$ npm info express –verbose</li>
</ol>
</blockquote>
<h1 id="Error-message-npm-info-retry-will-retry-error-on-last-attempt-Error-getaddrinfo-ENOTFOUND-registry-npmjs-org-registry-npmjs-org-443"><a href="#Error-message-npm-info-retry-will-retry-error-on-last-attempt-Error-getaddrinfo-ENOTFOUND-registry-npmjs-org-registry-npmjs-org-443" class="headerlink" title="Error message: npm info retry will retry, error on last attempt: Error: getaddrinfo ENOTFOUND registry.npmjs.org registry.npmjs.org:443"></a>Error message: npm info retry will retry, error on last attempt: Error: getaddrinfo ENOTFOUND registry.npmjs.org registry.npmjs.org:443</h1><p>$ nslookup registry.npmjs.org<br>Server: 8.8.8.8<br>Address: 8.8.8.8#53<br>Non-authoritative answer:<br>registry.npmjs.org canonical name = a.sni.fastly.net.<br>a.sni.fastly.net canonical name = prod.a.sni.global.fastlylb.net.<br>Name: prod.a.sni.global.fastlylb.net<br>Address: 151.101.32.162<br>$ sudo vim /etc/hosts </p>
<h1 id="Add-“151-101-32-162-registry-npmjs-org-to-hosts-file"><a href="#Add-“151-101-32-162-registry-npmjs-org-to-hosts-file" class="headerlink" title="Add “151.101.32.162 registry.npmjs.org` to hosts file"></a>Add “151.101.32.162 registry.npmjs.org` to hosts file</h1><p>$ npm info express –verbose</p>
<h1 id="Works-now"><a href="#Works-now" class="headerlink" title="Works now!"></a>Works now!</h1>]]></content>
<categories>
<category>Tool</category>
<category>Tools</category>
<category>Node</category>
</categories>
<tags>
<tag>Yarn</tag>
<tag>Npm</tag>
</tags>
</entry>
<entry>
<title>日子一天一天过</title>
<url>/2017/09/08/dailyDiary/2017/cheerup/</url>
<content><![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/LC7Cb1SriPPy9Wd0gaLkqEaoDat8pV9QsqhxVxh8CO/vmlHesvki/i8IfrKV0l0E6UPoT1ltNXL4MpFBf+XsAAOyJrcKOalIEDdWEVywBn++6lzMWtJaDkkodgoObtkezdjO2Xwh+mCM2uF2Ua9ihP6lufkmmtANGzXYLUj/kW67OLnPpBJPcsGjtcyCXdkkm15IlTJEHuPbqrTCBgRjy91yV9GWLVdl9RqgRD4CeHwzIusOOUrCtl/gl6/Gu3YGbbI9hMrWewLQseGpBFI7rsUhB5/csr33Wyg+vliq/UQT77ltkm69O7+kWH1Qnx9udt1/a6pA2W4Qv+Mkgc2kVzT6sMgLT2PfpzBXUfeMT9GgGnErlkK31MmeFIojZBaqbkbA4Gj3XsqZ60NYiPp+jewkWavItUy4EVFixBPQGvSPLwtuWtD3NjBsrYNHuhNEzG1Ky5rhMoTrF1PHfit4mGlHmQ7dq+d51v/6vFk+UpyUD5iY04yi3F3jNWzMVj8qMHyHIjRDggT2SozjmeOrvRu3haiD27S2cw6W28292gO+QI7e2+qkU4xj+KAzrgmXhWqC13bSrMwWBZQuejL+QJ+nMmXih02aHKDskKhshwX/NQJOSJwhEiVm5XluuwlVglhGBg44Dqcl22/SK89CqgfSQ2EaKdTo4q7eYuyiE6P/FGAZ9FB8SaHL7ZpremCDu9THVnRboffSCb32+lo+lCFbYrk8sA7fEm/gu25mZgo4bOwLnuMd43AEoZ9HSB7ivPQ4Tx9iRdDN9wsNFkueU7/VddjRm8+ID2sYVDPEcuQxARPtJt1P3A6DaptrUnUKkOiwglt46rP+oysWsSag/n9r7aSYqhgdbBuEnZXC/mXZ07+k0ICutuSWsjzcrNLa1hUKGyOuL6n2yDjJHOjowBogSpzHAOW48yW+UpmQ1KtlC9OT43ujI3bwBMJZus36mWlhaFjELDmxwhaUVc/TSWMgbj7D4OcRT34omW7v0B4F4Yq1FVi5CzvlobDdo/U8+umsatKviYE90StqeyObz1Zw3DGYdr4Cm/DPye3RL5zwdige2tfEbal5mECbCIjjh/QhOcJbsmVxR44fTlFwiOjB7IC+QzxFdE7sgu4EIAAn50cnZ2nfStjVG/oEjtLQBmyySG/+OliUPlh4ltN92xdTNoYRkJbjeHzVGu52JkGnF6/uymcRIJENywTAhBYfiGb+YdZbkF4ZY9cOGmowEN7U/+1P0EMZzxU32uSePXSgdwfqTBF9QeO2F0U8UrU339DOqSouNaq4gSQjM3OIWk+nYeuAKY1PhinHFm26lxo1SHNXO/LEkMuOFNKhIrvNvQWrQvE90d2f2dcHlTopBjLd2srnaL6O+YwKcxJeVtnZfoczRgqoK2F4PjlAo6BGLE+c9bEiWQEC+kWz2IbZWsATxtNhH2YqB6KKE5HLKOn5FfVhBKRAoD2C2mPwVpZiq6PUU26laGcxK0mKUO4Aw6A5jk5OISPB8km1nwIxQNGPvjdgOHWW1oGVjQq7/6dCUsk38S+1ehjO8xdCNnX+QsSOul/XhMDMiTvILYs26LUwdBfOhY0oX/3fSCVXGMpQVKcw719kwYh0hJhcsz2HSKLQLn194JrGh79UYIGwg4nhJKVQ1LU63ACIJPuRGPgf7ibBVhJMbuz1X091ARQrEmCPho8VPqdISLGYfFxHp8DMx4x8gXzSlFaLPwtIC4xppIsWN712qc19R8AxOJbN6YpgiBDh/SOIkWZlDppxqzg/zIAGbRqHB/YSPdPoFESmsqtDyS6xmgeC6mwFeRXkXd3d7foS+0cHyewP1gQENt+vGVzWPWJuhDp8WGOtMTUF9MEEzGUuv3jFYKTaHmxTvQguXNuiDxUdpMrVCY3r1fSLZxaR5d/Y2cdMtkAb37lF8A+7QctQoXCUMCvbAZAyanZGA0cE0Gx9jqC9fGZrvmwx18j2xK7RD0RxeHxs8uXdLP/OEKw6bsA7XZoLeGyfhK7YSRglQEGI+OMwyZW7pVSnyXAqAflSv57AYIpyKw0CIfqXN/KVkmX4scc5OnbA8dj5A2N6RwZYS1snDeA7zj76ECFNcXOmLmJRr2eCUYSUQlqAMbtl5rUlxNBp00fQb6U7gZlPMOeBT1OqhcUKuLLG8adj2XbyGRtM2YUQUzgHHcO3zzfn76igR8XW8EJ8V92l1xaZ5DRjgV+FmqQpJIiSWbFqg/x/gaIzjAM5hjDEy4r8AlAwVlHblq+Apxel2EOdsTmsiFIalOUcOeN6rfHk2cHHoudi0ud2CkQQEWiT/lyVMfzxUHPZFVU+aTMxikuz9TRcp9ET5sFqQSWVXhE5EQsomT388o7PeOGZ8vW/sO4nb0aj1rLWadkKNDSafFC3DG8ds3feUo4VTaV/CR8sPcPYRlNjXvx2+2XnOeFHEaQ8AA/AAFePhQ/Y/OxHJLYGbK3eEPKT6+JZeYXPKFmkXAsCec1jHncDWvNNUexaJQmD3ulHzj0Od750pOmIfp0RltLiD4QR+mObuH6PA/AJsLoRyb6g6u5z+NJLbIQz3Ed//ZaMWJNLmX9WlzhC+xFNHnZ/EDCZ2zL8OjAkG2lU7Zi3doxD77wo8IrO8QJIg0CDTPhBx2hfjVlGA4c/a//L3Uj1YnwZL16Y7HsUt1A+h8aBS8yads3TXP7scC0q9kYrdEcldQXc/06X+uF8VSE3HrUugnC1lAjnckfvYmPMybENGt+HBnXKbbaFiI5uhWBZPHUcavcePvJB5s0bYhjVxGrNYnJuP1gFqP+F6Vr2t2uLEXwWBt8hH06bWLq4I7AkZzKCOWQqObRiWoVawv+tO6MPGxSXUSpGYW4H6sQmEurpgeiqTff6vf6uoccxucoySnk8bKYy5BtZ65TAsU54Akx0yI9y8+43Ty9XYV8gQP3zlXpSfc5wMuXkXYtvOO8TsD3kHQfH5N8Oc30bve+SR3+n9pV1u6C5LOVjaQAZkk80CAl5nzXBYg8/f3RNR461HoyJRybeT0vKIDGI4qdfUa72FMGbULn9EYqO6W1TDegbUNJNWM582VXDLeagB++V1GhRI8ZHc8BMUB6iryHV1pz+qZlW5bzTANsHiOw56XpFfdaQa5HlMtvLGnjx4MuiZynDF6p/YBJZ+UnAsabaTBovpJW+WoaFth07mr9o4EmpqZ0sacOsQS6oTFL7ubOya455DqQF+IPaPRaJt3r1FGJld/rmaZj6MUuJoYof1xBtIMWum9SMpIs/bO+y6F9kRTinVxu3Jw6mxmtgPG5T/FLQdIih6bPtKNhZjssSuuxpjW0ggwVjb6RQ+YyUJukaGP6Wpm0MYJ0eJSeDcx3E44AH2kQNORQt9t+3GQKumxdZfJ01AvZgEstwQ8AK6iVwrxDyDyjbRR//zIHywzu8FXhUOcOl/bAvDl48A3tMCZtL8d3V9nNobZK3AAZeiKMRpias9yy9xM+DO4JMa9kkbZ7psh2FfwlLHcyz5JcBTB8NKt7EfEliOeGeVe3L1w8Bm0hmaGeHzd0ecMw6DytpkoWSX85lzbj4aKA5CaGw2Ffwdr0hEnAbKTByhZ/LmFW3OiDTY91WlIhy9S7uuISRSmb8fseIjZC6Gad3UZD8e+nShHhOLYmOtVmu10nd8Q1LtAYkZnCorWCAPXQBvym39fiMzUy3HcPh30qLX4tLM9tvr0C9lJFLLICSPlutpo6/vpRvuFHRJrQjRq5G71VbX6ceA3CLl9gjdSiilkhWp1gNGPZ7e</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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>von</tag>
</tags>
</entry>
<entry>
<title>python文件操作</title>
<url>/2017/09/08/Tec/python/pythonMethods/</url>
<content><![CDATA[<p>最近项目要实现国际化方案，很多中文需要替换，现学了python脚本来做些简单替换，一路走来也总结了一些小函数，记录一下吧。<br><a id="more"></a></p>
<h1 id="Python"><a href="#Python" class="headerlink" title="Python"></a>Python</h1><p><a href="http://blog.csdn.net/gatieme/article/details/43235791" target="_blank" rel="noopener">Python正则表达式匹配中文</a>，相当棒的一篇文章,各种语言文字匹配</p>
<h2 id="简单读写文本内容"><a href="#简单读写文本内容" class="headerlink" title="简单读写文本内容"></a>简单读写文本内容</h2><figure class="highlight python"><table><tr><td class="code"><pre><span class="line"><span class="comment">#!/usr/bin/python3</span></span><br><span class="line">print(<span class="string">"Hello, World!"</span>)</span><br><span class="line">f = open(<span class="string">'testx.js'</span>, <span class="string">'rb+'</span>)</span><br><span class="line">f.seek(<span class="number">1</span>)</span><br><span class="line"><span class="comment">#!python2的话只能有一个参数??</span></span><br><span class="line">f.write(bytes(<span class="string">"yyyz"</span>,<span class="string">"UTF-8"</span>))</span><br><span class="line">f.close()</span><br></pre></td></tr></table></figure>
<h2 id="读取文件夹"><a href="#读取文件夹" class="headerlink" title="读取文件夹"></a>读取文件夹</h2><figure class="highlight python"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> os </span><br><span class="line">path = <span class="string">"D:/Python34/news"</span> <span class="comment">#文件夹目录 </span></span><br><span class="line">files= os.listdir(path) <span class="comment">#得到文件夹下的所有文件名称 </span></span><br><span class="line">s = [] </span><br><span class="line"><span class="keyword">for</span> file <span class="keyword">in</span> files: <span class="comment">#遍历文件夹 </span></span><br><span class="line"> <span class="keyword">if</span> <span class="keyword">not</span> os.path.isdir(file): <span class="comment">#判断是否是文件夹，不是文件夹才打开 </span></span><br><span class="line"> f = open(path+<span class="string">"/"</span>+file); <span class="comment">#打开文件 </span></span><br><span class="line"> iter_f = iter(f); <span class="comment">#创建迭代器 </span></span><br><span class="line"> str = <span class="string">""</span> </span><br><span class="line"> <span class="keyword">for</span> line <span class="keyword">in</span> iter_f: <span class="comment">#遍历文件，一行行遍历，读取文本 </span></span><br><span class="line"> str = str + line </span><br><span class="line"> s.append(str) <span class="comment">#每个文件的文本存到list中 </span></span><br><span class="line">print(s) <span class="comment">#打印结果</span></span><br></pre></td></tr></table></figure>
<h2 id="从命令行获取参数并逐行读取文本内容"><a href="#从命令行获取参数并逐行读取文本内容" class="headerlink" title="从命令行获取参数并逐行读取文本内容"></a>从命令行获取参数并逐行读取文本内容</h2><figure class="highlight python"><table><tr><td class="code"><pre><span class="line"><span class="comment"># -*- coding: utf-8 -*-</span></span><br><span class="line"><span class="keyword">import</span> sys</span><br><span class="line"><span class="keyword">import</span> os </span><br><span class="line"><span class="keyword">if</span> (len(sys.argv) <= <span class="number">1</span>):</span><br><span class="line"> print(<span class="string">'arg num is error'</span>)</span><br><span class="line"> exit()</span><br><span class="line">_list_content = []</span><br><span class="line"></span><br><span class="line"><span class="comment">#需要将打开的模式设定为二进制模式，这样就不会更改里面的换行符了。</span></span><br><span class="line"><span class="comment">#脚本的思想：将文件中的每行读取到list中，之后遍历list，对需要修改的某行进行修改</span></span><br><span class="line">fh = open(<span class="string">'./testx.js'</span>, <span class="string">'rb'</span>)</span><br><span class="line"><span class="keyword">for</span> i <span class="keyword">in</span> fh.readlines():</span><br><span class="line"> _list_content.append(i)</span><br><span class="line">fh.close()</span><br><span class="line"></span><br><span class="line">_content = <span class="string">'key1'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> i <span class="keyword">in</span> _list_content:</span><br><span class="line"> <span class="keyword">if</span>(i.find(<span class="string">'key'</span>) >= <span class="number">0</span>):</span><br><span class="line"> <span class="comment"># i = '121 ' + sys.argv[1] + ' -n ' + sys.argv[2] + '\r\n'</span></span><br><span class="line"> i = <span class="string">'121 '</span></span><br><span class="line"> _content = _content + i</span><br><span class="line">open(<span class="string">'./testx.js'</span>, <span class="string">'wb'</span>).writelines(_content)</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>tips: </p>
<blockquote>
<ol>
<li>最短匹配(.)*?</li>
<li>匹配所有字符：(包括换行符) <figure class="highlight python"><table><tr><td class="code"><pre><span class="line">[\s\S]</span><br></pre></td></tr></table></figure>
</li>
</ol>
</blockquote>
<h3 id="具体实现源码"><a href="#具体实现源码" class="headerlink" title="具体实现源码:"></a>具体实现源码:</h3><figure class="highlight python"><table><tr><td class="code"><pre><span class="line"><span class="comment">#!/usr/bin/python</span></span><br><span class="line"><span class="comment"># -*- coding: utf-8 -*-</span></span><br><span class="line"><span class="keyword">import</span> sys</span><br><span class="line"><span class="keyword">import</span> os </span><br><span class="line"><span class="keyword">import</span> re </span><br><span class="line">type = sys.getfilesystemencoding()</span><br><span class="line"><span class="comment"># 定义函数,处理文件，将文件的｛name:'文字', key：'key值'｝替换为｛name:Intl.get('key值'), key：'key值'｝</span></span><br><span class="line"><span class="comment"># 同时将key值追加到lan.js中</span></span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">processFile</span><span class="params">( path )</span>:</span></span><br><span class="line"> dec = <span class="string">'处理文件'</span> + path</span><br><span class="line"> <span class="keyword">print</span> dec.decode(<span class="string">'utf-8'</span>).encode(type)</span><br><span class="line"> f = open(path)</span><br><span class="line"> f_lan = open(<span class="string">'./lan.js'</span>)</span><br><span class="line"> f_lan_w = open(<span class="string">'./lan.js'</span>,<span class="string">'a'</span>)</span><br><span class="line"> iter_f = iter(f)</span><br><span class="line"> iter_f_lan = iter(f_lan)</span><br><span class="line"> str1 = <span class="string">""</span> </span><br><span class="line"> str_lan = <span class="string">""</span> </span><br><span class="line"> tmp = <span class="string">""</span></span><br><span class="line"> <span class="keyword">for</span> line <span class="keyword">in</span> iter_f: <span class="comment">#遍历文件，一行行遍历，读取文本 </span></span><br><span class="line"> str1 = str1 + line </span><br><span class="line"> <span class="keyword">for</span> line <span class="keyword">in</span> iter_f_lan: <span class="comment">#遍历文件，一行行遍历，读取文本 </span></span><br><span class="line"> str_lan = str_lan + line </span><br><span class="line"> matches = re.findall(<span class="string">r'[\s\S]*?({[\s\S]*?title:([\s\S]*?),[\s\S]*?key:\s([\s\S]*?),[\s\S]*?},)'</span>, str1) <span class="comment"># found, match.group() == "iii"</span></span><br><span class="line"> hint = <span class="string">' 匹配到'</span>+str(len(matches))+<span class="string">'项数据，处理中...'</span></span><br><span class="line"> <span class="keyword">print</span> hint.decode(<span class="string">'utf-8'</span>).encode(type)</span><br><span class="line"> <span class="keyword">for</span> match <span class="keyword">in</span> matches:</span><br><span class="line"> <span class="keyword">if</span> <span class="keyword">not</span> match[<span class="number">2</span>] <span class="keyword">in</span> str_lan:</span><br><span class="line"> f_lan_w.write(match[<span class="number">2</span>]+<span class="string">': '</span>+match[<span class="number">2</span>]+<span class="string">'\n'</span>)</span><br><span class="line"> tmp = re.sub(match[<span class="number">1</span>], <span class="string">'Intl.get('</span>+match[<span class="number">2</span>]+<span class="string">')'</span>,match[<span class="number">0</span>])</span><br><span class="line"> tt = re.sub(<span class="string">r'\\'</span>, <span class="string">r'\\\\'</span>,match[<span class="number">0</span>])</span><br><span class="line"> str1=str1.replace(match[<span class="number">0</span>],tmp)</span><br><span class="line"> open(path, <span class="string">'wb'</span>).writelines(str1)</span><br><span class="line"> <span class="keyword">print</span> <span class="string">'成功\n'</span>.decode(<span class="string">'utf-8'</span>).encode(type)</span><br><span class="line"> <span class="comment"># print(str1)</span></span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"></span><br><span class="line"><span class="comment">#check number of arg, if the number is less than 1, exit </span></span><br><span class="line"><span class="keyword">if</span> (len(sys.argv) <= <span class="number">1</span> <span class="keyword">or</span> <span class="keyword">not</span> os.path.exists(sys.argv[<span class="number">1</span>])):</span><br><span class="line"> print(<span class="string">'arg num is error'</span>)</span><br><span class="line"> exit()</span><br><span class="line">path = sys.argv[<span class="number">1</span>] <span class="comment">#文件夹目录 </span></span><br><span class="line">str1 = <span class="string">""</span></span><br><span class="line"><span class="keyword">if</span> os.path.isdir(path):</span><br><span class="line"> <span class="comment"># print('文件夹'.decode('utf-8').encode(type)) #打印结果</span></span><br><span class="line"> files= os.listdir(path) <span class="comment">#得到文件夹下的所有文件名称</span></span><br><span class="line"> <span class="keyword">for</span> file <span class="keyword">in</span> files: <span class="comment">#遍历文件夹 </span></span><br><span class="line"> <span class="keyword">if</span> <span class="keyword">not</span> os.path.isdir(file): <span class="comment">#判断是否是文件夹，不是文件夹才打开 </span></span><br><span class="line"> processFile(path+<span class="string">"/"</span>+file)</span><br><span class="line"><span class="keyword">else</span>:</span><br><span class="line"> processFile(path)</span><br></pre></td></tr></table></figure>
<h2 id="python实现文件拷贝"><a href="#python实现文件拷贝" class="headerlink" title="python实现文件拷贝"></a>python实现文件拷贝</h2><p>以下源码实现从一个文件中读取每行文件地址复制到另一个文件夹中，保存原本目录结构<br><figure class="highlight python"><table><tr><td class="code"><pre><span class="line"><span class="comment">#!/usr/bin/python</span></span><br><span class="line"><span class="comment"># -*- coding: utf-8 -*-</span></span><br><span class="line"><span class="keyword">import</span> sys</span><br><span class="line"><span class="keyword">import</span> os </span><br><span class="line"><span class="keyword">import</span> re </span><br><span class="line"><span class="keyword">import</span> shutil</span><br><span class="line">type = sys.getfilesystemencoding()</span><br><span class="line"><span class="comment"># 定义函数,复制目标文件到copy1下的相同目录结构文件夹中</span></span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">processFile</span><span class="params">( path )</span>:</span></span><br><span class="line"> <span class="keyword">if</span>(<span class="keyword">not</span> os.path.exists(path)):</span><br><span class="line"> dect = path + <span class="string">'不存在'</span></span><br><span class="line"> <span class="keyword">print</span> dect.decode(<span class="string">'utf-8'</span>).encode(type)</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"> dst = <span class="string">'./copy1'</span>+path[<span class="number">1</span>:]</span><br><span class="line"> dst_dir = re.findall(<span class="string">'^.*/'</span>,dst)[<span class="number">0</span>]</span><br><span class="line"> <span class="keyword">print</span> dst_dir</span><br><span class="line"> <span class="comment"># 若文件夹不存在则创建</span></span><br><span class="line"> <span class="keyword">if</span>(<span class="keyword">not</span> os.path.exists(dst_dir)):</span><br><span class="line"> os.makedirs(dst_dir)</span><br><span class="line"> dec = <span class="string">'复制文件'</span> + path + <span class="string">'到'</span> + dst</span><br><span class="line"> <span class="keyword">print</span> dec.decode(<span class="string">'utf-8'</span>).encode(type)</span><br><span class="line"> shutil.copy(path,dst) </span><br><span class="line"> <span class="keyword">print</span> <span class="string">'成功'</span>.decode(<span class="string">'utf-8'</span>).encode(type)</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"><span class="comment">#check number of arg, if the number is less than 1, exit </span></span><br><span class="line"><span class="keyword">if</span> (len(sys.argv) <= <span class="number">1</span> <span class="keyword">or</span> <span class="keyword">not</span> os.path.exists(sys.argv[<span class="number">1</span>])):</span><br><span class="line"> print(<span class="string">'arg num is error'</span>)</span><br><span class="line"> exit()</span><br><span class="line">path = sys.argv[<span class="number">1</span>] <span class="comment">#文件夹目录 </span></span><br><span class="line">f = open(path)</span><br><span class="line">iter_f = iter(f)</span><br><span class="line"><span class="keyword">for</span> line <span class="keyword">in</span> iter_f: <span class="comment">#遍历文件，一行行遍历，读取待处理文本</span></span><br><span class="line"> processFile(line.strip(<span class="string">'\n'</span>))</span><br></pre></td></tr></table></figure></p>
<h2 id="python实现字典文件操作"><a href="#python实现字典文件操作" class="headerlink" title="python实现字典文件操作"></a>python实现字典文件操作</h2><p>字典格式 dict_t = {‘a’:’b’,’c’: {‘d’:’e’}}，可多层嵌套<br>字典格式的读入读出，使用json来控制<br><figure class="highlight python"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> os</span><br><span class="line"><span class="keyword">import</span> codecs</span><br><span class="line"><span class="keyword">import</span> json</span><br><span class="line"><span class="keyword">import</span> types</span><br><span class="line">a={<span class="string">'d'</span>:<span class="string">'dd'</span>,<span class="string">'e'</span>:<span class="string">'ee'</span>,<span class="string">'f'</span>:{<span class="string">'g'</span>:<span class="string">'j'</span>},<span class="string">'h'</span>:{<span class="string">'g'</span>:<span class="string">'i'</span>}}<span class="comment">#获取字典中的objkey对应的值，适用于字典嵌套</span></span><br><span class="line"><span class="comment">#把字典内容存入文件</span></span><br><span class="line">f=codecs.open(<span class="string">'data.txt'</span>,<span class="string">'w'</span>) <span class="comment">#新建文件data.txt</span></span><br><span class="line">a[<span class="string">'f'</span>][<span class="string">'ha'</span>]=<span class="string">'hahah'</span></span><br><span class="line">a[<span class="string">'f'</span>].pop(<span class="string">'g'</span>)</span><br><span class="line">aa = json.dumps(a, indent=<span class="number">4</span>) <span class="comment">#把a序列化存入文件，格式便于观看</span></span><br><span class="line">f.write(aa)</span><br><span class="line">f.close()</span><br><span class="line"><span class="comment">#把内容读入字典</span></span><br><span class="line">ff=codecs.open(<span class="string">'data.txt'</span>,<span class="string">'r'</span>,encoding=<span class="string">'utf-8'</span>) <span class="comment">#打开文件，避免出现中文乱码</span></span><br><span class="line">aaa = ff.read()</span><br><span class="line">aaaa = json.loads(aaa)</span><br><span class="line">aaaa[<span class="string">'a'</span>] = <span class="string">'c'</span></span><br><span class="line">print(aaaa[<span class="string">'a'</span>]) <span class="comment">#输出c</span></span><br><span class="line">print(aaaa[<span class="string">'h'</span>][<span class="string">'g'</span>]) <span class="comment">#输出i</span></span><br></pre></td></tr></table></figure></p>
<h2 id="python实现特殊字符串转义"><a href="#python实现特殊字符串转义" class="headerlink" title="python实现特殊字符串转义"></a>python实现特殊字符串转义</h2><figure class="highlight python"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">zhuanyi</span><span class="params">(keyword)</span>:</span></span><br><span class="line"> fbsArr = [ <span class="string">"\\"</span>, <span class="string">"$"</span>, <span class="string">"("</span>, <span class="string">")"</span>, <span class="string">"*"</span>, <span class="string">"+"</span>, <span class="string">"."</span>, <span class="string">"["</span>, <span class="string">"]"</span>, <span class="string">"?"</span>, <span class="string">"^"</span>, <span class="string">"{"</span>, <span class="string">"}"</span>, <span class="string">"|"</span> ]</span><br><span class="line"> <span class="keyword">for</span> key <span class="keyword">in</span> fbsArr:</span><br><span class="line"> <span class="comment"># keyword.index('q')</span></span><br><span class="line"> <span class="keyword">if</span> (<span class="literal">True</span>):</span><br><span class="line"> keyword = keyword.replace(key, <span class="string">"\\"</span> + key); </span><br><span class="line"> <span class="keyword">return</span> keyword</span><br></pre></td></tr></table></figure>
<h2 id="python实现在线翻译"><a href="#python实现在线翻译" class="headerlink" title="python实现在线翻译"></a>python实现在线翻译</h2><p>参考网址<a href="http://hao.jobbole.com/google-translate-python/" target="_blank" rel="noopener">一个Python在线翻译模块</a><br><a href="https://github.com/terryyin/google-translate-python" target="_blank" rel="noopener">项目github开源地址</a><br>安装：pip install translate<br>使用：<br>命令行：translate “This is a pen.” 或 translate -f zh -t ja 我是谁？<br>程序中使用:<br><figure class="highlight python"><table><tr><td class="code"><pre><span class="line"><span class="keyword">from</span> translate <span class="keyword">import</span> Translator</span><br><span class="line">translator= Translator(to_lang=<span class="string">"zh"</span>)</span><br><span class="line">translation = translator.translate(<span class="string">"This is a pen."</span>)</span><br></pre></td></tr></table></figure></p>
<p>tips:<br>各语言编码如下：<a href="https://en.wikipedia.org/wiki/ISO_639-1" target="_blank" rel="noopener">查看编码</a></p>
]]></content>
<categories>
<category>Tec</category>
<category>Python</category>
</categories>
<tags>
<tag>Python</tag>
</tags>
</entry>
<entry>
<title>在博客中使用本地图片</title>
<url>/2017/09/05/Tec/Blog/useImgInBlog/</url>
<content><</span><br><span class="line">替换称自己的图片地址即可，不用上传自己也应该可以拼出来</span><br></pre></td></tr></table></figure></p>
<a id="more"></a>
<ol>
<li><p>_config.yml:</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">post_asset_folder:true</span><br></pre></td></tr></table></figure>
</li>
<li><p>加载</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install hexo-asset-image --save</span><br></pre></td></tr></table></figure>
</li>
<li><p>hexo new ‘’来新建博客，会自动生成同名文件夹</p>
</li>
<li>在同名文件夹中加入图片</li>
<li>在博客中加入图片<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line"></span><br></pre></td></tr></table></figure></li>
</ol>
]]></content>
<categories>
<category>Tec</category>
<category>Blog</category>
</categories>
<tags>
<tag>Hexo</tag>
</tags>
</entry>
<entry>
<title>解决git上传项目有文件夹无法打开情况</title>
<url>/2017/09/05/Tec/git/gitError/</url>
<content><![CDATA[<p>在码云上传文件夹出现以下情况<br><img src="https://github.com/vonxq/vonxq.github.io/blob/master/img/gitFolderError.png?raw=true" alt="gitFolderError"><br><a id="more"></a><br>git则显示文件夹为灰色</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">错误提示: </span><br><span class="line">1. Assertion failed（删除了.git但未执行后面的代码）</span><br></pre></td></tr></table></figure>
<p>原因是因为文件夹内可能有其他git仓库的代码，里面有.git文件夹<br>解决方案:</p>
<ol>
<li>删除.git文件夹</li>
<li>依次执行下面代码<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">git rm --cached directory</span><br><span class="line">git add directory</span><br></pre></td></tr></table></figure></li>
</ol>
]]></content>
<categories>
<category>Tec</category>
<category>Git</category>
</categories>
<tags>
<tag>Git</tag>
</tags>
</entry>
<entry>
<title>git基本知识</title>
<url>/2017/09/04/Tec/git/gitBasic/</url>
<content><![CDATA[<h2 id="相关概念"><a href="#相关概念" class="headerlink" title="相关概念"></a>相关概念</h2><p>pull request<br>参考<a href="https://www.zhihu.com/question/21682976/answer/20835845" target="_blank" rel="noopener">GitHub 的 Pull Request 是指什么意思？
</a></p>
<blockquote>
<p>有一个仓库，叫Repo A。你如果要往里贡献代码，首先要Fork这个Repo，于是在你的Github账号下有了一个Repo A2,。然后你在这个A2下工作，Commit，push等。然后你希望原始仓库Repo A合并你的工作，你可以在Github上发起一个Pull Request，意思是请求Repo A的所有者从你的A2合并分支。如果被审核通过并正式合并，这样你就为项目A做贡献了</p>
</blockquote>
<h2 id="github单个文件夹下载"><a href="#github单个文件夹下载" class="headerlink" title="github单个文件夹下载"></a>github单个文件夹下载</h2><p><a href="https://minhaskamal.github.io/DownGit/#/home" target="_blank" rel="noopener">DownGit,超好用</a><br><a href="https://www.zhihu.com/question/25369412" target="_blank" rel="noopener">如何在github上下载单个文件夹？-知乎</a><br><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">要下载文件url</span><br><span class="line">https://github.com/reactjs/redux/tree/master/examples/todos</span><br><span class="line">svn下载url:（若不是主分支， /trunk/ 换成 /branches/branchname(分支名)/ ）</span><br><span class="line">https://github.com/reactjs/redux/trunk/examples/todos</span><br></pre></td></tr></table></figure></p>
<h2 id="问题管理"><a href="#问题管理" class="headerlink" title="问题管理"></a>问题管理</h2><ol>
<li><p>git push报错如下</p>
<blockquote>
<p>SSL certificate problem: self signed certificate in certificate chain问题<br>问题解决:<br>git config –global http.sslVerify false</p>
</blockquote>
</li>
<li><p>git pull 冲突<br>在家里和公司同步git项目出现的问题，自己解决方法比较暴力，直接把冲突文件全删了，然后就能pull成功了<br>注: pull命令主要是把云端有改动文件同步过来，不会覆盖本地已改动的文件(若两边都有修改，则是出现冲突，可以像上面一样暴力pull，也可以参照下面的链接进行同分支代码的合并)<br><a href="http://www.01happy.com/git-resolve-conflicts/" target="_blank" rel="noopener">使用git pull文件时和本地文件冲突怎么办？</a></p>
</li>
</ol>
]]></content>
<categories>
<category>Tec</category>
<category>Git</category>
</categories>
<tags>
<tag>Git</tag>
</tags>
</entry>
<entry>
<title>CSS Modules概念及其使用</title>
<url>/2017/09/04/front-end/advance/cssMoudulesAnd/</url>
<content><![CDATA[<h1 id="CSSModules"><a href="#CSSModules" class="headerlink" title="CSSModules"></a>CSSModules</h1><p><a href="https://github.com/camsong/blog/issues/5" target="_blank" rel="noopener">CSS Modules 详解及 React 中实践</a><br><a href="http://www.ruanyifeng.com/blog/2016/06/css_modules.html" target="_blank" rel="noopener">阮一峰CSS Modules用法教程</a><br><a href="http://www.bootcss.com/p/lesscss/#about" target="_blank" rel="noopener">Less详解</a><br><a id="more"></a></p>
<h2 id="基础概念"><a href="#基础概念" class="headerlink" title="基础概念"></a>基础概念</h2><p>目标：实现css模块化，避免全局污染</p>
<blockquote>
<p>CSS Modules 很好的解决了 CSS 目前面临的模块化难题。支持与 Sass/Less/PostCSS 等搭配使用，能充分利用现有技术积累。同时也能和全局样式灵活搭配，便于项目中逐步迁移至 CSS Modules。</p>
</blockquote>
<ol>
<li>在css/less 文件里写 .button {…}，并在组件里通过 className={styles.button} 来引用他。会生成无明明冲突的CSS class名</li>
<li>默认局部作用域，通过:global(.title){}的方式定义全局class，全局的claa组件引用只需class Name=”title”</li>
<li>classnames Package：组件中定义className常量，规定class规则…传入不同的 type 给 App 组件，就会返回不同的 className 组合</li>
</ol>
<h2 id="用法"><a href="#用法" class="headerlink" title="用法"></a>用法</h2><p><a href="https://github.com/camsong/blog/issues/5" target="_blank" rel="noopener">CSS Modules 详解及 React 中实践</a></p>
<h3 id="方法一"><a href="#方法一" class="headerlink" title="方法一"></a>方法一</h3><p>import export…（一般不用）</p>
<h3 id="方法二"><a href="#方法二" class="headerlink" title="方法二"></a>方法二</h3><p>结合webpack,定义好css相关文件解析规则<br>在css中定义样式，之后在js文件中用className=styles[‘样式名’]来使用</p>
<h2 id="命名规范"><a href="#命名规范" class="headerlink" title="命名规范"></a>命名规范</h2><p>BEM规则，模块（Block）-节点名(Element)-节点状态(Modifier)</p>
<h2 id="使用规范"><a href="#使用规范" class="headerlink" title="使用规范"></a>使用规范</h2><blockquote>
<ol>
<li>不使用选择器，只使用 class 名来定义样式</li>
<li>不层叠多个 class，只使用一个 class 把所有样式定义好</li>
<li>所有样式通过 composes 组合来实现复用</li>
<li>不嵌套</li>
</ol>
</blockquote>
<h2 id="一些常用知识"><a href="#一些常用知识" class="headerlink" title="一些常用知识"></a>一些常用知识</h2><figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">minHeight</span>: <span class="selector-tag">calc</span>(100<span class="selector-tag">vh</span> <span class="selector-tag">-</span> 120<span class="selector-tag">px</span>)</span><br></pre></td></tr></table></figure>
<h2 id="一些小坑"><a href="#一些小坑" class="headerlink" title="一些小坑"></a>一些小坑</h2><p>width : calc(100% - 25px) 会被识别为75%,修改:<br>width : calc(~”100% - 25px”);</p>
]]></content>
<categories>
<category>Frontend</category>
<category>Advance</category>
</categories>
<tags>
<tag>CSS</tag>
</tags>
</entry>
<entry>
<title>常见网络攻击</title>
<url>/2017/09/04/front-end/advance/webSafe/</url>
<content><![CDATA[<p><a href="http://www.bingdun.com/support/tech/1092.htm" target="_blank" rel="noopener">网络攻击常见手段及终端防护方法</a><br> <a id="more"></a></p>
<ol>
<li>DoS（Denail of service）: 拒绝服务攻击</li>
<li>DDoS（Distirbuted …）: 分布式拒绝服务攻击</li>
<li>ARP攻击(只能在局域网内攻击)<blockquote>
<p>ARP攻击就是通过伪造IP地址和MAC地址实现ARP欺骗，能够在网络中产生大量的ARP通信量使网络阻塞，攻击者只要持续不断的发出伪造的ARP响应包就能更改目标主机ARP缓存中的IP-MAC条目，造成网络中断或中间人攻击。 </p>
</blockquote>
</li>
</ol>
<p>注：ARP（Address Resolution Protocol，地址解析协议）是一个位于TCP/IP协议栈中的网络层，负责将某个IP地址解析成对应的MAC地址。</p>
<ol start="4">
<li>脚本攻击<br>如SQL注入攻击</li>
</ol>
]]></content>
<categories>
<category>Front-end</category>
<category>Advance</category>
</categories>
<tags>
<tag>WebSafe</tag>
</tags>
</entry>
<entry>
<title>linux</title>
<url>/2017/09/04/Tec/linux/linux/</url>
<content><![CDATA[<h1 id="linux常用命令"><a href="#linux常用命令" class="headerlink" title="linux常用命令"></a>linux常用命令</h1><h2 id="文件操作"><a href="#文件操作" class="headerlink" title="文件操作"></a>文件操作</h2><p>解压:<br>tar -zxvf 文件.tgz(.gz) -C 目的文件夹 （默认解压到当前目录）<br>unzip 文件.zip -d 目的文件夹</p>
<h2 id="网络相关"><a href="#网络相关" class="headerlink" title="网络相关"></a>网络相关</h2><p><a href="http://blog.csdn.net/doiido/article/details/42495709" target="_blank" rel="noopener">Linux 网卡设置 IP地址配置</a><br>增加IP: ifconfig eth0:1 192.168.10.198 netmask 255.255.255.0(非永久)<br> route -p add 172.124.111.187 mask 255.255.255.0 172.24.111.1(永久有效，好像不能运行…)<br>删除IP:<br>配置网关: GATEWAY=192.168.1.1<br>修改DNS: nameserver 192.168.1.1<br>重新加载: /etc/init.d/network restart<br>重启路由网络配置： service restart network<br>新增路由： route add -net 某ip netmask 掩码 gw 网管 dev 设备(bri0)</p>
<h3 id="为虚拟机增加IP"><a href="#为虚拟机增加IP" class="headerlink" title="为虚拟机增加IP"></a>为虚拟机增加IP</h3><p><a href="http://blog.sina.com.cn/s/blog_7880d33501019axl.html" target="_blank" rel="noopener">浅谈集线器、路由器、交换机、网关、网桥、网卡的作用与区别</a></p>
<blockquote>
<p>2、网络适配器（网卡）工作在OSI参考模型中的第二层数据链路层，是连接计算机和网络的硬件设备，网卡的功能有两个：一是将电脑的数据封装为帧，并通过网线或无线网将数据送到网络上去；二是接受网络上传来的帧，将帧重新组成数据，发送到电脑中，网卡接收所有在网络上传输的信号，但只接收发送到刚电脑上的帧和广播帧，其余的帧丢弃。<br> 6、网桥，当两种相同类型但又使用不同通信协议的网络进行互连时，就需要使用桥接器，也就是网桥，网桥的工作原理：当网桥刚安装时，它对网络中的各工作站一无所知。在工作站开始传送数据时，网桥会自动记下其地址，直到建立起一张完整的网络地址表为止，一旦地址表建完，信息数据在通过网桥时，网桥就根据信息包比较其目的地址的网络号与源地址的网络号是否相同，若不同，则进行格式转换，将信息包传过“桥”，否则，不转换也不过“桥”。网桥对应参考模型的第二层（包括物理层与数据链路层），没有路径选择能力，因此网桥只能连接同一类型的网络（如以太网与以太网）</p>
</blockquote>
<blockquote>
<p>eth0代表网卡一，以此类推<br><a href="http://benjr.tw/20497" target="_blank" rel="noopener">Linux – Bridge</a>,文章不错只是还是一大堆不知道的问题<br> <figure class="highlight plain"><table><tr><td class="code"><pre><span class="line"># 查看网桥信息</span><br><span class="line">brictl show</span><br></pre></td></tr></table></figure></p>
</blockquote>
<p>静态方法<br><strong>/etc/sysconfig/network文件内容</strong><br><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">NETWORKING=yes</span><br><span class="line">HOSTNAME=NS</span><br><span class="line">GATEWAY=10.206.0.254</span><br><span class="line">NETWORKING_IPV6=yes</span><br></pre></td></tr></table></figure></p>
<p><strong>/etc/sysconfig/network-scripts/ifcfg-eth0文件内容</strong><br><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">DEVICE=eth0</span><br><span class="line">ONBOOT=yes</span><br><span class="line">TYPE=Ethernet</span><br><span class="line">BRIDGE=bri0</span><br><span class="line">NSDEVTYPE=out</span><br></pre></td></tr></table></figure></p>
<p><strong>/etc/sysconfig/network-scripts/ifcfg-bri0文件内容</strong>，配完后可ping通同网段主机<br><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">DEVICE=bri0</span><br><span class="line">IPADDR=10.206.136.12</span><br><span class="line">NETMASK=255.255.0.0</span><br><span class="line">STP=off</span><br><span class="line">TYPE=Bridge</span><br></pre></td></tr></table></figure></p>
<h2 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h2><p>在不能ctrl+c关闭npm启动的服务时，可用killall node暴力关闭所有服务<br>查看正在运行的服务信息netstat -ntpl | grep 22</p>
<h2 id="ssh登陆-access-denied"><a href="#ssh登陆-access-denied" class="headerlink" title="ssh登陆 access denied"></a>ssh登陆 access denied</h2><p>vi /etc/ssh/sshd_config,改PermitRootLogin 为yes，AllowUsers 加上root</p>
<h2 id="版本"><a href="#版本" class="headerlink" title="版本"></a>版本</h2><p>查看版本信息<br>$cat /proc/version<br>Linux version 2.6.32-358.NSOS5.0.x86_64 (<a href="mailto:ruijuan_zhang@localhost.localdomain" target="_blank" rel="noopener">ruijuan_zhang@localhost.localdomain</a>) (gcc version 4.4.7 20120313 (Red Hat 4.4.7-3) (GCC) ) #1 SMP Tue Aug 30 13:41:31 CST 2016<br>$cat /etc/issue<br>Netentsec OS 3.0<br>$cat /etc/redhat-release<br>Netentsec OS 3.0<br>$file /bin/bash<br>/bin/bash: ELF 64-bit LSB executable, x86-64, version 1 (SYSV), dynamically linked (uses shared libs), for GNU/Linux 2.6.18, stripped</p>
]]></content>
<categories>
<category>Tec</category>
<category>Linux</category>
</categories>
</entry>
<entry>
<title>路漫漫到底有多远</title>
<url>/2017/09/03/dailyDiary/2017/how-to-learn/</url>
<content><![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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>von</tag>
</tags>
</entry>
<entry>
<title>小总结</title>
<url>/2017/09/01/summary/summary/</url>
<content><![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>
<categories>
<category>Summary</category>
</categories>
<tags>
<tag>Summery</tag>
</tags>
</entry>
<entry>
<title>脚本实现批量文件操作</title>
<url>/2017/08/31/Tec/accumulation/fileOperate/</url>
<content><![CDATA[<h1 id="Node-JS"><a href="#Node-JS" class="headerlink" title="Node.JS"></a>Node.JS</h1><p><a href="http://www.runoob.com/nodejs/nodejs-fs.html" target="_blank" rel="noopener">NodeJS文件系统</a><br><a id="more"></a></p>
<h2 id="入门-读取文件内容"><a href="#入门-读取文件内容" class="headerlink" title="入门:读取文件内容"></a>入门:读取文件内容</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> fs = <span class="built_in">require</span>(<span class="string">"fs"</span>);</span><br><span class="line"><span class="comment">// 异步读取</span></span><br><span class="line"><span class="comment">// fs.readFile('input.txt', function (err, data) {</span></span><br><span class="line"><span class="comment">// if (err) {</span></span><br><span class="line"><span class="comment">// return console.error(err);</span></span><br><span class="line"><span class="comment">// }</span></span><br><span class="line"><span class="comment">// console.log("异步读取: " + data.toString());</span></span><br><span class="line"><span class="comment">// });</span></span><br><span class="line"><span class="comment">// // 同步读取</span></span><br><span class="line"><span class="comment">// var data = fs.readFileSync('input.txt');</span></span><br><span class="line"><span class="comment">// console.log("同步读取: " + data.toString());</span></span><br><span class="line"><span class="keyword">var</span> glob = <span class="built_in">require</span>(<span class="string">"glob"</span>)</span><br><span class="line"><span class="comment">// options is optional</span></span><br><span class="line">glob(<span class="string">"user/*"</span>, <span class="function"><span class="keyword">function</span> (<span class="params">err, files</span>) </span>{</span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">let</span> file <span class="keyword">of</span> files) {</span><br><span class="line"> fs.readFile(file, <span class="function"><span class="keyword">function</span> (<span class="params">err, data</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (err) {</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">console</span>.error(err);</span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"异步读取: "</span> + data.toString()); </span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">console</span>.log(files)</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<h1 id="shell"><a href="#shell" class="headerlink" title="shell"></a>shell</h1><h1 id="Python"><a href="#Python" class="headerlink" title="Python"></a>Python</h1><p><a href="http://blog.csdn.net/gatieme/article/details/43235791" target="_blank" rel="noopener">Python正则表达式匹配中文</a>，相当棒的一篇文章,各种语言文字匹配</p>
<h2 id="简单读写文本内容"><a href="#简单读写文本内容" class="headerlink" title="简单读写文本内容"></a>简单读写文本内容</h2><figure class="highlight python"><table><tr><td class="code"><pre><span class="line"><span class="comment">#!/usr/bin/python3</span></span><br><span class="line">print(<span class="string">"Hello, World!"</span>)</span><br><span class="line">f = open(<span class="string">'testx.js'</span>, <span class="string">'rb+'</span>)</span><br><span class="line">f.seek(<span class="number">1</span>)</span><br><span class="line"><span class="comment">#!python2的话只能有一个参数??</span></span><br><span class="line">f.write(bytes(<span class="string">"yyyz"</span>,<span class="string">"UTF-8"</span>))</span><br><span class="line">f.close()</span><br></pre></td></tr></table></figure>
<h2 id="读取文件夹"><a href="#读取文件夹" class="headerlink" title="读取文件夹"></a>读取文件夹</h2><figure class="highlight python"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> os </span><br><span class="line">path = <span class="string">"D:/Python34/news"</span> <span class="comment">#文件夹目录 </span></span><br><span class="line">files= os.listdir(path) <span class="comment">#得到文件夹下的所有文件名称 </span></span><br><span class="line">s = [] </span><br><span class="line"><span class="keyword">for</span> file <span class="keyword">in</span> files: <span class="comment">#遍历文件夹 </span></span><br><span class="line"> <span class="keyword">if</span> <span class="keyword">not</span> os.path.isdir(file): <span class="comment">#判断是否是文件夹，不是文件夹才打开 </span></span><br><span class="line"> f = open(path+<span class="string">"/"</span>+file); <span class="comment">#打开文件 </span></span><br><span class="line"> iter_f = iter(f); <span class="comment">#创建迭代器 </span></span><br><span class="line"> str = <span class="string">""</span> </span><br><span class="line"> <span class="keyword">for</span> line <span class="keyword">in</span> iter_f: <span class="comment">#遍历文件，一行行遍历，读取文本 </span></span><br><span class="line"> str = str + line </span><br><span class="line"> s.append(str) <span class="comment">#每个文件的文本存到list中 </span></span><br><span class="line">print(s) <span class="comment">#打印结果</span></span><br></pre></td></tr></table></figure>
<h2 id="从命令行获取参数并逐行读取文本内容"><a href="#从命令行获取参数并逐行读取文本内容" class="headerlink" title="从命令行获取参数并逐行读取文本内容"></a>从命令行获取参数并逐行读取文本内容</h2><figure class="highlight python"><table><tr><td class="code"><pre><span class="line"><span class="comment"># -*- coding: utf-8 -*-</span></span><br><span class="line"><span class="keyword">import</span> sys</span><br><span class="line"><span class="keyword">import</span> os </span><br><span class="line"><span class="keyword">if</span> (len(sys.argv) <= <span class="number">1</span>):</span><br><span class="line"> print(<span class="string">'arg num is error'</span>)</span><br><span class="line"> exit()</span><br><span class="line">_list_content = []</span><br><span class="line"></span><br><span class="line"><span class="comment">#需要将打开的模式设定为二进制模式，这样就不会更改里面的换行符了。</span></span><br><span class="line"><span class="comment">#脚本的思想：将文件中的每行读取到list中，之后遍历list，对需要修改的某行进行修改</span></span><br><span class="line">fh = open(<span class="string">'./testx.js'</span>, <span class="string">'rb'</span>)</span><br><span class="line"><span class="keyword">for</span> i <span class="keyword">in</span> fh.readlines():</span><br><span class="line"> _list_content.append(i)</span><br><span class="line">fh.close()</span><br><span class="line"></span><br><span class="line">_content = <span class="string">'key1'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> i <span class="keyword">in</span> _list_content:</span><br><span class="line"> <span class="keyword">if</span>(i.find(<span class="string">'key'</span>) >= <span class="number">0</span>):</span><br><span class="line"> <span class="comment"># i = '121 ' + sys.argv[1] + ' -n ' + sys.argv[2] + '\r\n'</span></span><br><span class="line"> i = <span class="string">'121 '</span></span><br><span class="line"> _content = _content + i</span><br><span class="line">open(<span class="string">'./testx.js'</span>, <span class="string">'wb'</span>).writelines(_content)</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>tips: </p>
<blockquote>
<ol>
<li>最短匹配(.)*?</li>
<li>匹配所有字符：(包括换行符) <figure class="highlight python"><table><tr><td class="code"><pre><span class="line">[\s\S]</span><br></pre></td></tr></table></figure>
</li>
</ol>
</blockquote>
<h3 id="具体实现源码"><a href="#具体实现源码" class="headerlink" title="具体实现源码:"></a>具体实现源码:</h3><figure class="highlight python"><table><tr><td class="code"><pre><span class="line"><span class="comment">#!/usr/bin/python</span></span><br><span class="line"><span class="comment"># -*- coding: utf-8 -*-</span></span><br><span class="line"><span class="keyword">import</span> sys</span><br><span class="line"><span class="keyword">import</span> os </span><br><span class="line"><span class="keyword">import</span> re </span><br><span class="line">type = sys.getfilesystemencoding()</span><br><span class="line"><span class="comment"># 定义函数,处理文件，将文件的｛name:'文字', key：'key值'｝替换为｛name:Intl.get('key值'), key：'key值'｝</span></span><br><span class="line"><span class="comment"># 同时将key值追加到lan.js中</span></span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">processFile</span><span class="params">( path )</span>:</span></span><br><span class="line"> dec = <span class="string">'处理文件'</span> + path</span><br><span class="line"> <span class="keyword">print</span> dec.decode(<span class="string">'utf-8'</span>).encode(type)</span><br><span class="line"> f = open(path)</span><br><span class="line"> f_lan = open(<span class="string">'./lan.js'</span>)</span><br><span class="line"> f_lan_w = open(<span class="string">'./lan.js'</span>,<span class="string">'a'</span>)</span><br><span class="line"> iter_f = iter(f)</span><br><span class="line"> iter_f_lan = iter(f_lan)</span><br><span class="line"> str1 = <span class="string">""</span> </span><br><span class="line"> str_lan = <span class="string">""</span> </span><br><span class="line"> tmp = <span class="string">""</span></span><br><span class="line"> <span class="keyword">for</span> line <span class="keyword">in</span> iter_f: <span class="comment">#遍历文件，一行行遍历，读取文本 </span></span><br><span class="line"> str1 = str1 + line </span><br><span class="line"> <span class="keyword">for</span> line <span class="keyword">in</span> iter_f_lan: <span class="comment">#遍历文件，一行行遍历，读取文本 </span></span><br><span class="line"> str_lan = str_lan + line </span><br><span class="line"> matches = re.findall(<span class="string">r'[\s\S]*?({[\s\S]*?title:([\s\S]*?),[\s\S]*?key:\s([\s\S]*?),[\s\S]*?},)'</span>, str1) <span class="comment"># found, match.group() == "iii"</span></span><br><span class="line"> hint = <span class="string">' 匹配到'</span>+str(len(matches))+<span class="string">'项数据，处理中...'</span></span><br><span class="line"> <span class="keyword">print</span> hint.decode(<span class="string">'utf-8'</span>).encode(type)</span><br><span class="line"> <span class="keyword">for</span> match <span class="keyword">in</span> matches:</span><br><span class="line"> <span class="keyword">if</span> <span class="keyword">not</span> match[<span class="number">2</span>] <span class="keyword">in</span> str_lan:</span><br><span class="line"> f_lan_w.write(match[<span class="number">2</span>]+<span class="string">': '</span>+match[<span class="number">2</span>]+<span class="string">'\n'</span>)</span><br><span class="line"> tmp = re.sub(match[<span class="number">1</span>], <span class="string">'Intl.get('</span>+match[<span class="number">2</span>]+<span class="string">')'</span>,match[<span class="number">0</span>])</span><br><span class="line"> tt = re.sub(<span class="string">r'\\'</span>, <span class="string">r'\\\\'</span>,match[<span class="number">0</span>])</span><br><span class="line"> str1=str1.replace(match[<span class="number">0</span>],tmp)</span><br><span class="line"> open(path, <span class="string">'wb'</span>).writelines(str1)</span><br><span class="line"> <span class="keyword">print</span> <span class="string">'成功\n'</span>.decode(<span class="string">'utf-8'</span>).encode(type)</span><br><span class="line"> <span class="comment"># print(str1)</span></span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"></span><br><span class="line"><span class="comment">#check number of arg, if the number is less than 1, exit </span></span><br><span class="line"><span class="keyword">if</span> (len(sys.argv) <= <span class="number">1</span> <span class="keyword">or</span> <span class="keyword">not</span> os.path.exists(sys.argv[<span class="number">1</span>])):</span><br><span class="line"> print(<span class="string">'arg num is error'</span>)</span><br><span class="line"> exit()</span><br><span class="line">path = sys.argv[<span class="number">1</span>] <span class="comment">#文件夹目录 </span></span><br><span class="line">str1 = <span class="string">""</span></span><br><span class="line"><span class="keyword">if</span> os.path.isdir(path):</span><br><span class="line"> <span class="comment"># print('文件夹'.decode('utf-8').encode(type)) #打印结果</span></span><br><span class="line"> files= os.listdir(path) <span class="comment">#得到文件夹下的所有文件名称</span></span><br><span class="line"> <span class="keyword">for</span> file <span class="keyword">in</span> files: <span class="comment">#遍历文件夹 </span></span><br><span class="line"> <span class="keyword">if</span> <span class="keyword">not</span> os.path.isdir(file): <span class="comment">#判断是否是文件夹，不是文件夹才打开 </span></span><br><span class="line"> processFile(path+<span class="string">"/"</span>+file)</span><br><span class="line"><span class="keyword">else</span>:</span><br><span class="line"> processFile(path)</span><br></pre></td></tr></table></figure>
<h2 id="python实现文件拷贝"><a href="#python实现文件拷贝" class="headerlink" title="python实现文件拷贝"></a>python实现文件拷贝</h2><p>以下源码实现从一个文件中读取每行文件地址复制到另一个文件夹中，保存原本目录结构<br><figure class="highlight python"><table><tr><td class="code"><pre><span class="line"><span class="comment">#!/usr/bin/python</span></span><br><span class="line"><span class="comment"># -*- coding: utf-8 -*-</span></span><br><span class="line"><span class="keyword">import</span> sys</span><br><span class="line"><span class="keyword">import</span> os </span><br><span class="line"><span class="keyword">import</span> re </span><br><span class="line"><span class="keyword">import</span> shutil</span><br><span class="line">type = sys.getfilesystemencoding()</span><br><span class="line"><span class="comment"># 定义函数,复制目标文件到copy1下的相同目录结构文件夹中</span></span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">processFile</span><span class="params">( path )</span>:</span></span><br><span class="line"> <span class="keyword">if</span>(<span class="keyword">not</span> os.path.exists(path)):</span><br><span class="line"> dect = path + <span class="string">'不存在'</span></span><br><span class="line"> <span class="keyword">print</span> dect.decode(<span class="string">'utf-8'</span>).encode(type)</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"> dst = <span class="string">'./copy1'</span>+path[<span class="number">1</span>:]</span><br><span class="line"> dst_dir = re.findall(<span class="string">'^.*/'</span>,dst)[<span class="number">0</span>]</span><br><span class="line"> <span class="keyword">print</span> dst_dir</span><br><span class="line"> <span class="comment"># 若文件夹不存在则创建</span></span><br><span class="line"> <span class="keyword">if</span>(<span class="keyword">not</span> os.path.exists(dst_dir)):</span><br><span class="line"> os.makedirs(dst_dir)</span><br><span class="line"> dec = <span class="string">'复制文件'</span> + path + <span class="string">'到'</span> + dst</span><br><span class="line"> <span class="keyword">print</span> dec.decode(<span class="string">'utf-8'</span>).encode(type)</span><br><span class="line"> shutil.copy(path,dst) </span><br><span class="line"> <span class="keyword">print</span> <span class="string">'成功'</span>.decode(<span class="string">'utf-8'</span>).encode(type)</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"><span class="comment">#check number of arg, if the number is less than 1, exit </span></span><br><span class="line"><span class="keyword">if</span> (len(sys.argv) <= <span class="number">1</span> <span class="keyword">or</span> <span class="keyword">not</span> os.path.exists(sys.argv[<span class="number">1</span>])):</span><br><span class="line"> print(<span class="string">'arg num is error'</span>)</span><br><span class="line"> exit()</span><br><span class="line">path = sys.argv[<span class="number">1</span>] <span class="comment">#文件夹目录 </span></span><br><span class="line">f = open(path)</span><br><span class="line">iter_f = iter(f)</span><br><span class="line"><span class="keyword">for</span> line <span class="keyword">in</span> iter_f: <span class="comment">#遍历文件，一行行遍历，读取待处理文本</span></span><br><span class="line"> processFile(line.strip(<span class="string">'\n'</span>))</span><br></pre></td></tr></table></figure></p>
<h2 id="python实现字典文件操作"><a href="#python实现字典文件操作" class="headerlink" title="python实现字典文件操作"></a>python实现字典文件操作</h2><p>字典格式 dict_t = {‘a’:’b’,’c’: {‘d’:’e’}}，可多层嵌套<br>字典格式的读入读出，使用json来控制<br><figure class="highlight python"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> os</span><br><span class="line"><span class="keyword">import</span> codecs</span><br><span class="line"><span class="keyword">import</span> json</span><br><span class="line"><span class="keyword">import</span> types</span><br><span class="line">a={<span class="string">'d'</span>:<span class="string">'dd'</span>,<span class="string">'e'</span>:<span class="string">'ee'</span>,<span class="string">'f'</span>:{<span class="string">'g'</span>:<span class="string">'j'</span>},<span class="string">'h'</span>:{<span class="string">'g'</span>:<span class="string">'i'</span>}}<span class="comment">#获取字典中的objkey对应的值，适用于字典嵌套</span></span><br><span class="line"><span class="comment">#把字典内容存入文件</span></span><br><span class="line">f=codecs.open(<span class="string">'data.txt'</span>,<span class="string">'w'</span>) <span class="comment">#新建文件data.txt</span></span><br><span class="line">a[<span class="string">'f'</span>][<span class="string">'ha'</span>]=<span class="string">'hahah'</span></span><br><span class="line">a[<span class="string">'f'</span>].pop(<span class="string">'g'</span>)</span><br><span class="line">aa = json.dumps(a, indent=<span class="number">4</span>) <span class="comment">#把a序列化存入文件，格式便于观看</span></span><br><span class="line">f.write(aa)</span><br><span class="line">f.close()</span><br><span class="line"><span class="comment">#把内容读入字典</span></span><br><span class="line">ff=codecs.open(<span class="string">'data.txt'</span>,<span class="string">'r'</span>,encoding=<span class="string">'utf-8'</span>) <span class="comment">#打开文件，避免出现中文乱码</span></span><br><span class="line">aaa = ff.read()</span><br><span class="line">aaaa = json.loads(aaa)</span><br><span class="line">aaaa[<span class="string">'a'</span>] = <span class="string">'c'</span></span><br><span class="line">print(aaaa[<span class="string">'a'</span>]) <span class="comment">#输出c</span></span><br><span class="line">print(aaaa[<span class="string">'h'</span>][<span class="string">'g'</span>]) <span class="comment">#输出i</span></span><br></pre></td></tr></table></figure></p>
<h2 id="python实现特殊字符串转义"><a href="#python实现特殊字符串转义" class="headerlink" title="python实现特殊字符串转义"></a>python实现特殊字符串转义</h2><figure class="highlight python"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">zhuanyi</span><span class="params">(keyword)</span>:</span></span><br><span class="line"> fbsArr = [ <span class="string">"\\"</span>, <span class="string">"$"</span>, <span class="string">"("</span>, <span class="string">")"</span>, <span class="string">"*"</span>, <span class="string">"+"</span>, <span class="string">"."</span>, <span class="string">"["</span>, <span class="string">"]"</span>, <span class="string">"?"</span>, <span class="string">"^"</span>, <span class="string">"{"</span>, <span class="string">"}"</span>, <span class="string">"|"</span> ]</span><br><span class="line"> <span class="keyword">for</span> key <span class="keyword">in</span> fbsArr:</span><br><span class="line"> <span class="comment"># keyword.index('q')</span></span><br><span class="line"> <span class="keyword">if</span> (<span class="literal">True</span>):</span><br><span class="line"> keyword = keyword.replace(key, <span class="string">"\\"</span> + key); </span><br><span class="line"> <span class="keyword">return</span> keyword</span><br></pre></td></tr></table></figure>
<h2 id="python实现在线翻译"><a href="#python实现在线翻译" class="headerlink" title="python实现在线翻译"></a>python实现在线翻译</h2><p>参考网址<a href="http://hao.jobbole.com/google-translate-python/" target="_blank" rel="noopener">一个Python在线翻译模块</a><br><a href="https://github.com/terryyin/google-translate-python" target="_blank" rel="noopener">项目github开源地址</a><br>安装：pip install translate<br>使用：<br>命令行：translate “This is a pen.” 或 translate -f zh -t ja 我是谁？<br>程序中使用:<br><figure class="highlight python"><table><tr><td class="code"><pre><span class="line"><span class="keyword">from</span> translate <span class="keyword">import</span> Translator</span><br><span class="line">translator= Translator(to_lang=<span class="string">"zh"</span>)</span><br><span class="line">translation = translator.translate(<span class="string">"This is a pen."</span>)</span><br></pre></td></tr></table></figure></p>
<p>tips:<br>各语言编码如下：<a href="https://en.wikipedia.org/wiki/ISO_639-1" target="_blank" rel="noopener">查看编码</a></p>
]]></content>
<categories>
<category>Tec</category>
<category>Accumulation</category>
</categories>
<tags>
<tag>Python</tag>
</tags>
</entry>
<entry>
<title>产品相关(todo)</title>
<url>/2017/08/28/work/ims3/</url>
<content><![CDATA[<p>hub: 集线器<br>NAT: 网络地址转换（Network Address Translation，缩写为NAT），是一种在IP数据包通过路由器或防火墙时重写来源IP地址或目的IP地址的技术。这种技术被普遍使用在有多台主机但只通过一个公有IP地址访问因特网的私有网络中。根据规范，路由器是不能这样工作的，但它的确是一个方便并得到了广泛应用的技术。当然，NAT也让主机之间的通信变得复杂，导致通信效率的降低。</p>
<p>SSL： 安全套接层 </p>
<p>必备技能:<br>react<br>js<br>布局<br>linux<br>网络相关<br>svn</p>
]]></content>
<categories>
<category>Work</category>
</categories>
<tags>
<tag>Work</tag>
</tags>
</entry>
<entry>
<title>前端跨域实现(todo)</title>
<url>/2017/08/27/front-end/advance/cross/</url>
<content><![CDATA[<p>res.header(“Access-Control-Allow-Origin”, “*”)<br><a id="more"></a></p>
<h2 id="服务器方法"><a href="#服务器方法" class="headerlink" title="服务器方法"></a>服务器方法</h2><p>date: 2017-10-27 18:19:49<br>res.header(“Access-Control-Allow-Origin”, “*”)</p>
]]></content>
</entry>
<entry>
<title>笔记整理及问题记录</title>
<url>/2017/08/19/front-end/React/record/mypen/</url>
<content><![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">U2FsdGVkX19nhfgSOk8lsJvqAcQxWgA43xIf3Njby0cdfjw7g490hoHWcL4E9xDHBOoz0gT/VntY63Cu2jcQu7bBFtLxcGy4072o6sdOmlOhgGks12sFuerFPy7y9hDGT8qNPUVVMMf+FHnTrxctkZYdR8yZn4STUQIJVpeybsO9R0RaY7wSV6wxYRjGPumB3CWUTDUiMDQR9kew8LyPo94QxxSmtsKHLn8LV/e+/8yPBODvnNooPWEthBjGzPAnw1WCy1YW/3V5B9wvEpXGjtjbwmgCXwBEuSG17EcmYPPbTXvKnlH+De9qqjwS4Dcc8koibcIIqNixiJUgUZ9eFF0yhfHmqcYQhWRKEoSbszUdoqWvKND5aKviGBf3NxRDYQeaJfmZZIK4lhfWnWFEUNHpRrhlS0CKE38dD8TClxR/Y6xtPTkjoNl1GQVwiWij4GQz1Rkadyll24WnFWxa5uFxX3l3yA6Um+Bz5SUprc1l8K1eqsCKTyJKhJlwjyYvtDX0+OxUqG387Vs49dUSQogYBGpCJCCRtoSanBQ6i+KxoT/FAhtYAti2/nwHhBBERywiP+azxmY18O/hnFgoaY0tnaovm0WWEkotmwYsb1BhjgKyM8ojba9E24YlPaheakS6hrByi2yOOqDaGYBH3eEjVT2B8coiWhwYSosjOb3zHNgDVmVtAcigHcliJ14+y6NmlCgUkJUdzeF0dMb951qRNUQqntwz0DntIzltZZ7Z0ImllaiLtJHgpjLFewWVERG9Mibmw6gYgitnEr7d/RoKgbzw4yhbVYwOjxqz/BZNc0GEhUWBQW9YTofYdwOT17S1LgqmnCA/847TsHhTJSvS/ZgbYeNJ6UsuvUZQ+G0LoGsK7Z5qGQF6BvCJYatAjW0eYhPF/5KVaXed7i4P7sdJHszwqshZKHEx/AMR0gTOIz92mWZwBlro97YQgOXRwVEYtEuPpN618cEW1PyDjfO2QSBCe02rg0mXV6UcvnBLvItzx0yVdxA+9pzA4efPKeoPFuoat+l5E9CGvZAxyy4aVHzH0fA3CixnqDOeWrVgZe8arcPx9t2DnNwVORHMWSMtonH3l659iWAFrzjnbW8IEiwLHxOp9ErEdrUyv37vkEGqDY1ZVHW3RIvfzEaDcpjipQDCThcTl3A0N+oh9jOCeDhDxqytmySbMfvNbCoBneInyE6QiPpDJy1D3xQ+Av51AowsAyH28IfTtQnkFV9GiEcigmCyxPdkOhAIz1iIvAUqoRwZuk9VliDgiMgSmdHBlxisbbgguSKJwEOvRmZJqfj/0bSS8hLCRxrPrvfFl8HoAnPzzClu8Y0wCM1a3FP+/c5rfg18nxMxATM9j+TPHuT0p8QLwVTX5JEvWZZL+TW8cZ9uRaVz407kw7fqwPP/MiltaZDAztcvtn+AK0+lecaKbUXhsGhbJrb1ADwviMSsCoP6pMYuc6mJV+ysbwMhBw62XZX6OtnSjM9/KwkMkM7AhgU0tRNV+UuI0k9fToNlwpohj3sIMiXo1qVsHOOhYYIam08QS5tk3QH6X0sLWlggUStWXCXPB56YzjCZrdJ2J+sIYE+zUg1CD9ocPIUXI/iy5caKe4K0RkKSo1gy6temgVpqTepz8iOJAQaSuhMcaO1kUBON0w5q23ukM56dGIc+GsDM3VwBj/rWdQRVPkO2/wYPKE4cmXp5mSUtMmORM/iike+V0sWOXMfBrVYa+zbmNTK5d11EP9u98bHfjVqyU4R1mGNkI2su9xAgMODQkjyTdAnfOVmJBUxjye0lYic9DNMLBgMWV2LiIs6mprJbpzaWe/YYqnNErXshnJTBo4TL6cezP15H/rimKgV7jsMDntYgaat1YFwT/NkrGVN7lhKhB5SmKukF8iS/GDYbv4NxV+cSRAcb3EVWbjHVfo2W1wPw+RK/bMI9i24IvZrLttI2dDx/nHM774D8+mMqoO2TAiIqtwbA6X+6DAn3/l+S/jyaALFOebr0AUrECx5Y6siQQ63u8OhVl3bmVMRPmEyWxXLAjDDdU5/WjTTG29ivqptp5mEQgd1hNwTrDrUWEamNpx71CVRFV9g82vrS+GTlCf6utE5d0hW6yLn3XjPhUHBTDULpifIQj3S/Hu9hhIDSU+p0EM0K+Dqu18tnF/h1q5l5LPvJG61QgppSATXvBJyyPouuHe/zS3fI0j4NRbLRDuvtIgd7aojmPk+wlTB23V2WcvQtMmvXK7PNHe7JSScA8NgPUV3q3w3m0eEFeqJewMhuQhUw2j1AfMjs4zt7vc5jKJWM/iH4T2tkqPO2zwVqk1IT18ePNFmUzSBT9Eot27kcmN74CksuPvegneVez3zTLWzihoaa+2XJjMgS12Yiq4qZitU8W9VZjUAahEKtfq7c7JjGNBs=</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>
<categories>
<category>Summary</category>
</categories>
<tags>
<tag>Summary</tag>
</tags>
</entry>
<entry>
<title>HTML/css实现网页布局基础知识</title>
<url>/2017/08/19/front-end/basic/cssAndHtml/html-css-layout/</url>
<content><![CDATA[<h1 id="基础知识"><a href="#基础知识" class="headerlink" title="基础知识"></a>基础知识</h1><p>BFC: 块级格式化上下文，具体内容查看的前端基础知识一篇文章<br><a id="more"></a></p>
<h2 id="CSS盒模型"><a href="#CSS盒模型" class="headerlink" title="CSS盒模型"></a>CSS盒模型</h2><h2 id="相关属性"><a href="#相关属性" class="headerlink" title="相关属性"></a>相关属性</h2><p>参考<a href="http://www.cnblogs.com/coffeedeveloper/p/3145790.html#html" target="_blank" rel="noopener">对CSS中的Position、Float属性的一些深入探讨</a></p>
<h3 id="position"><a href="#position" class="headerlink" title="position"></a>position</h3><p>Position的属性值共有四个</p>
<ol>
<li>static<br>默认，属于普通流，元素在默认位置</li>
<li>relative<br>在默认位置下偏移，视觉上偏移，仍在普通流中，不改变display属性</li>
<li>absolute<ol>
<li>相对根节点偏移</li>
<li>根节点为其祖先节点中第一个position属性为relative或者absolute的节点，若无则为body</li>
<li>会脱离普通流，改变display属性(display:block)</li>
</ol>
</li>
<li>fixed<ol>
<li>特点基本与absolute相同</li>
<li>fixed其”根元素“固定为浏览器窗口<h3 id="float"><a href="#float" class="headerlink" title="float"></a>float</h3>为了实现文字环绕效果<br>特点：</li>
</ol>
</li>
<li>脱离普通流</li>
<li>display变为block</li>
<li>后一个元素会围绕着浮动元素，不会被覆盖</li>
<li>前一个元素不会受到任何影响</li>
<li>影响元素宽度：<blockquote>
<p>首先div的默认宽度是width:auto意思是自动调整宽度<br>无float,div的宽度会自动调整至最大化<br>有float,它会自动调整至最小化</p>
</blockquote>
</li>
</ol>
<p>属性： none、left、right</p>
<h3 id="display"><a href="#display" class="headerlink" title="display"></a>display</h3><p>具体参考<a href="https://segmentfault.com/a/1190000006047872#articleHeader11" target="_blank" rel="noopener">CSS display 属性详解</a></p>
<p>属性较多，列几个常用的</p>
<ol>
<li>none</li>
<li>block<br>设置元素为块状元素，如果不指定宽高，默认会继承父元素的宽度，并且独占一行，即使宽度有剩余也会独占一行，高度一般以子元素撑开的高度为准，当然也可以自己设置宽度和高度。</li>
<li>inline<br>它主要用来设置行内元素属性，设置了该属性之后设置高度、宽度都无效，同时text-align属性设置也无效，但是设置了line-height会让inline元素居中</li>
<li>inline-block<br>inline-block既具有block的宽高特性又具有inline的同行元素特性</li>
</ol>
<h3 id="z-index"><a href="#z-index" class="headerlink" title="z-index"></a>z-index</h3><p>属性设置元素的堆叠顺序,值大的在前，可为负值</p>
<h3 id="特性"><a href="#特性" class="headerlink" title="特性"></a>特性</h3><h4 id="包裹"><a href="#包裹" class="headerlink" title="包裹"></a>包裹</h4><ol>
<li>收缩：类似inline-block</li>
<li>坚挺</li>
<li>隔绝(即BFC)<h4 id="破坏"><a href="#破坏" class="headerlink" title="破坏"></a>破坏</h4></li>
<li>父元素高度塌陷<h3 id="清除浮动"><a href="#清除浮动" class="headerlink" title="清除浮动"></a>清除浮动</h3><h4 id="clear"><a href="#clear" class="headerlink" title="clear"></a>clear</h4></li>
<li>HTML水平元素底部走起</li>
<li>CSS after 伪类底部生成(IE6/IE7不能识别)<br>只能用在包含浮动元素的父级元素上<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.clearfix</span><span class="selector-pseudo">:after</span>{</span><br><span class="line"> <span class="attribute">clear</span>:both</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
</li>
</ol>
<p>IE6/IE7可使用：<br><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">.clearfix{</span><br><span class="line"> *zoom:1;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<h4 id="BFC-haslayout通用声明"><a href="#BFC-haslayout通用声明" class="headerlink" title="BFC/haslayout通用声明"></a>BFC/haslayout通用声明</h4><p>display:none<br>position:absolute/fixed/sticky</p>
<p>display:block/inline-block<br>position:absolute/fixed/<br>overflow:hidden/scroll</p>
<h1 id="基础技巧"><a href="#基础技巧" class="headerlink" title="基础技巧"></a>基础技巧</h1><h2 id="清除默认样式"><a href="#清除默认样式" class="headerlink" title="清除默认样式"></a>清除默认样式</h2><figure class="highlight css"><table><tr><td class="code"><pre><span class="line">{</span><br><span class="line"><span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line"><span class="attribute">padding</span>:<span class="number">0</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="div居中"><a href="#div居中" class="headerlink" title="div居中"></a>div居中</h2><figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">margin</span>: 0 <span class="selector-tag">auto</span>,</span><br></pre></td></tr></table></figure>
<h2 id="float及其清除"><a href="#float及其清除" class="headerlink" title="float及其清除"></a>float及其清除</h2><figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">clear</span><span class="selector-pseudo">:both</span>;</span><br></pre></td></tr></table></figure>
<h2 id="定位实现布局"><a href="#定位实现布局" class="headerlink" title="定位实现布局"></a>定位实现布局</h2><p>绝对定位<br>相对定位<br>混合布局实现：<br><img src="http://img.mukewang.com/536707a800012d2005580536.jpg" alt="效果图"><br>代码：<br><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="meta-keyword">html</span> <span class="meta-keyword">PUBLIC</span> <span class="meta-string">"-//W3C//DTD XHTML 1.0 Transitional//EN"</span> <span class="meta-string">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">xmlns</span>=<span class="string">"http://www.w3.org/1999/xhtml"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"Content-Type"</span> <span class="attr">content</span>=<span class="string">"text/html; charset=utf-8"</span> /></span></span><br><span class="line"><span class="tag"><<span class="name">title</span>></span>混合布局编程挑战<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span></span><br><span class="line"><span class="css"><span class="selector-tag">body</span>{ <span class="attribute">margin</span>:<span class="number">0</span>; <span class="attribute">padding</span>:<span class="number">0</span>; <span class="attribute">font-size</span>:<span class="number">30px</span>; <span class="attribute">color</span>:<span class="number">#fff</span>}</span></span><br><span class="line"><span class="css"><span class="selector-class">.top</span>{<span class="attribute">background-color</span>:<span class="number">#cccccc</span>;<span class="attribute">width</span>:<span class="number">100%</span>;<span class="attribute">height</span>:<span class="number">50px</span>;}</span></span><br><span class="line"><span class="css"><span class="selector-class">.main</span>{<span class="attribute">background-color</span>:red;</span></span><br><span class="line"><span class="css"> <span class="selector-tag">height</span><span class="selector-pseudo">:300px</span>;</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="css"><span class="selector-class">.left</span>{<span class="attribute">height</span>:<span class="number">300px</span>;<span class="attribute">background-color</span>:blue;<span class="attribute">width</span>:<span class="number">200px</span>;<span class="attribute">position</span>:absolute;<span class="attribute">top</span>:<span class="number">50px</span>;}</span></span><br><span class="line"><span class="css"><span class="selector-class">.right</span>{<span class="attribute">height</span>:<span class="number">100%</span>;<span class="attribute">background-color</span>:green;<span class="attribute">margin-left</span>:<span class="number">210px</span>;}</span></span><br><span class="line"><span class="css"><span class="selector-class">.foot</span>{<span class="attribute">background-color</span>:orange;}</span></span><br><span class="line"><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"top"</span>></span>top<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"main"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"right"</span>></span>right<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"left"</span>></span>left<span class="tag"></<span class="name">div</span>></span></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">div</span> <span class="attr">class</span>=<span class="string">"foot"</span>></span>foot<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure></p>
<h2 id="实现内容垂直居中"><a href="#实现内容垂直居中" class="headerlink" title="实现内容垂直居中"></a>实现内容垂直居中</h2><ol>
<li>内容为文本(包括Icon)<br>height与inline-height设为相同值<br>or<br>verticalAlign设置为middle</li>
</ol>
<p>注意: antd Icon的line-height必须重设以覆盖之前的(之前的为line-height: 1，可重设为line-height: unset)</p>
<ol start="2">
<li>div垂直居中</li>
</ol>
<p><a href="http://blog.163.com/koala8211@126/blog/static/4115925320104410590431/" target="_blank" rel="noopener">float后如何居中</a><br>更简单的方法: 将div元素设置为inline-block</p>
]]></content>
<categories>
<category>Front-end</category>
<category>Basic</category>
</categories>
<tags>
<tag>CSS</tag>
<tag>HTML</tag>
</tags>
</entry>
<entry>
<title>css基础知识</title>
<url>/2017/08/17/front-end/basic/cssAndHtml/css/</url>
<content><![CDATA[<p>一些css使用上的常用属性<br><a id="more"></a></p>
<h2 id="基础"><a href="#基础" class="headerlink" title="基础"></a>基础</h2><h3 id="盒模型"><a href="#盒模型" class="headerlink" title="盒模型"></a>盒模型</h3><p>W3C:box-sizing=width+border+padding+margin<br>IE: =width+margin<br>border相关：border-style(solid/dotted/dashed)、border-color、border-collapse(collapse)</p>
<h3 id="margin"><a href="#margin" class="headerlink" title="margin"></a>margin</h3><blockquote>
<p>外边距合并：垂直方向的margin合并max。<br>外边距塌陷：子元素的margin应用到了父元素身上.解决：1. 给父盒子设置边框 2. 父盒子设置overflow:hidden（会触发BFC）</p>
</blockquote>
<h4 id="BFC与IFC"><a href="#BFC与IFC" class="headerlink" title="BFC与IFC"></a>BFC与IFC</h4><p>参考<a href="http://www.cnblogs.com/todayhappy/p/4608476.html" target="_blank" rel="noopener">BFC与IFC</a><br>BFC: 块级格式化上下文，应用于块级元素上的规则</p>
<blockquote>
<p>1.如果给一个元素创建了一个BFC，就相当于创建了一个新的容器，容器内和容器外中的元素不会相互影响。外边的BFC规则，不会对容器里的BFC产生影响，而容器里面的BFC也不会对容器外的BFC产生影响，也就是相互隔绝，互不影响。<br>2.盒子的布局开始是从包含容器的顶部开始的。<br>3.同一个BFC中，在两个相邻的块级元素中，垂直margin会发生折叠<br>4.每个盒子的左边界都要紧靠包含容器的左边界（这也就解释了为什么块级元素都是单独成一行的，如果不单独成行，第二个盒子的左边界怎么紧靠包含容器的左边界）</p>
</blockquote>
<p>能产生新的BFC的属性：</p>
<blockquote>
<ol>
<li>float的值不为none。</li>
<li>overflow的值不为visible。</li>
<li>display的值为table-cell, table-caption, inline-block中的任何一个。</li>
<li>position的值不为relative和static。<br>IFC：内联格式化上下文，应用于内联元素上的规则</li>
<li>盒子是水平一个接一个的排列，水平的margin，内边距，边框是可以有的。</li>
<li>垂直方向的对齐，可能是底部对齐，顶部对齐，也可能是基线对齐（这个是默认的）；ps.这里的盒子应该是指的内联元素的盒子（span，strong等）和匿名内联盒子(只有文本，没有内联元素包含，自动创建的)，他们合称内联盒子，一个或者多个内联盒子组成一个行框，行框的宽度由包含块和出现的浮动决定的（为什么有浮动呢，后面解释）；行框的高度决定看我的这篇文章（css之line-height）；一定要分清楚，行框和内联盒子的关系，要不然我所说的你就不太可能理解</li>
<li>行框中的内联盒子的高度小于行框的高度时，内联盒子的垂直方向的对齐方式取决于vertical-align属性</li>
<li>当一个行框水平不能容纳内联盒子时，他们将会在垂直方向上产生多个行框，他们上下一个挨着一个，但是不会重叠</li>
<li>一般来说，行框的左边界紧挨着包含容器的左边界，行框的右边界紧挨着包含容器的右边界，（是两个边都紧挨着）。然而，浮动盒子可能存在于包含边框边界和行框边界之间（后面解释这种情况）；</li>
<li>多个内联盒子的宽度小于包含他们的行框时，他们在水平方向的分布取决于text-align属性（默认是left）</li>
</ol>
</blockquote>
<h3 id="CSS动画"><a href="#CSS动画" class="headerlink" title="CSS动画"></a>CSS动画</h3><p>transition<br>用法: </p>
<blockquote>
<p>transition: property duration timing-function delay;<br>transition-property: 指定CSS属性的name，transition效果(eg: width)<br>transition-duration: transition效果需要指定多少秒或毫秒才能完成(eg: 2s)<br>transition-timing-function: 指定transition效果的转速曲线(<a href="http://www.runoob.com/cssref/css3-pr-transition-timing-function.html" target="_blank" rel="noopener">用法</a>: transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);)<br>transition-delay: 定义transition效果开始的时候</p>
</blockquote>
<p>实例:<br><figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">font</span>: 18<span class="selector-tag">px</span> <span class="selector-tag">arial</span>,<span class="selector-tag">sans-serif</span>;</span><br><span class="line"><span class="selector-class">.card</span>{</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">0px</span> <span class="number">10px</span> <span class="number">20px</span> <span class="number">0px</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">20px</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#E1E2E2</span>;</span><br><span class="line"> <span class="attribute">transition</span>: <span class="number">0.4s</span> ease;</span><br><span class="line"> <span class="attribute">-webkit-transition</span>: <span class="number">0.4s</span> ease;</span><br><span class="line"> <span class="attribute">-o-transition</span>: <span class="number">0.4s</span> ease;</span><br><span class="line"> <span class="attribute">-moz-transition</span>: <span class="number">0.4s</span> ease;</span><br><span class="line"> <span class="attribute">-ms-transition</span>: <span class="number">0.4s</span> ease;</span><br><span class="line"> &:hover{</span><br><span class="line"> <span class="selector-tag">border-color</span>: <span class="selector-id">#0086e8</span>;</span><br><span class="line"> <span class="selector-tag">box-shadow</span>: 2<span class="selector-tag">px</span> 2<span class="selector-tag">px</span> 2<span class="selector-tag">px</span> <span class="selector-id">#E6E4E4</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<h3 id="box-shadow"><a href="#box-shadow" class="headerlink" title="box-shadow"></a>box-shadow</h3><figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">box-shadow</span>: <span class="selector-tag">h-shadow</span> <span class="selector-tag">v-shadow</span> <span class="selector-tag">blur</span> <span class="selector-tag">spread</span> <span class="selector-tag">color</span> <span class="selector-tag">inset</span>;</span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment"> h-shadow: 水平阴影的位置。允许负值</span></span><br><span class="line"><span class="comment"> v-shadow: 必需的。垂直阴影的位置。允许负值</span></span><br><span class="line"><span class="comment"> blur: 可选。模糊距离(px)</span></span><br><span class="line"><span class="comment"> spread: 可选。阴影的大小(px)，模糊层在其四周(模糊层长度由blur决定)</span></span><br><span class="line"><span class="comment"> color: 可选。阴影的颜色</span></span><br><span class="line"><span class="comment"> inset: 可选。加上inset后阴影置于box内侧(左&上，不加时阴影在右下)，不会占用其它空间</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="comment">/* example */</span></span><br><span class="line"><span class="selector-tag">box-shadow</span>: 10<span class="selector-tag">px</span> 10<span class="selector-tag">px</span> 5<span class="selector-tag">px</span> <span class="selector-id">#888888</span>;</span><br></pre></td></tr></table></figure>
<h3 id="font"><a href="#font" class="headerlink" title="font"></a>font</h3><p><a href="http://www.runoob.com/css/css-font.html" target="_blank" rel="noopener">CSS字体详解</a><br>font 简写属性在一个声明中设置所有字体属性。<br>用法:<br>font: font-style font-variant font-weight font-size/line-height font-family;(/是正常字符)<br>font-size和font-family的值是必需的。如果缺少了其他值，如果有默认值的话,默认值将被插入。</p>
<h3 id="tips"><a href="#tips" class="headerlink" title="tips"></a>tips</h3><ol>
<li><p>div数字or英文不换行,css设置:<br>word-wrap:break-word/break-all;（两种截断模式）</p>
</li>
<li><p>保持div宽高比<br><a href="https://my.oschina.net/u/1169894/blog/761037" target="_blank" rel="noopener">https://my.oschina.net/u/1169894/blog/761037</a> ， 亲测可行</p>
</li>
<li><p>less设置动态width： width : calc(~”100% - 25px”);</p>
</li>
</ol>
]]></content>
</entry>
<entry>
<title>antd组件应用记录</title>
<url>/2017/08/17/front-end/React/antd/antd/</url>
<content><![CDATA[<p>主要是记录antd组件使用过程中遇到的问题，参考性不大。<br><a id="more"></a></p>
<h1 id="Antd组件应用"><a href="#Antd组件应用" class="headerlink" title="Antd组件应用"></a>Antd组件应用</h1><p>各个组件的实现及应用场景，如modal套form，(form的同步初始化)<br>做的项目实战用到最多的Antd组件就是Form、Table、Modal了<br>组件的API在<a href="https://ant.design/docs/react/introduce-cn" target="_blank" rel="noopener">antd官网</a>看到，这里主要讲些组件应用。</p>
<h2 id="Modal"><a href="#Modal" class="headerlink" title="Modal"></a>Modal</h2><p>modal对话框主要用于一些操作的确认或者一些配置项的设置，内部组件去完成相应逻辑，Modal主要做最后的确认或取消的回调，Modal的显示与否用visible控制，visible的改变不会引起Modal内部组件的重绘，要想每次打开Modal都重绘，可使用以下方法清空旧状态<br><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 1. 在 Modal 关闭事件里调用 Form 的 resetFields，打开modal的时候使用componentWillReceiveProps进行重绘</span></span><br><span class="line"><span class="comment">// 2.给一个全新的key，每次render'出新modal</span></span><br><span class="line"><Modal key={<span class="keyword">this</span>.state.newKey} visible={<span class="keyword">this</span>.state.visible} /></span><br><span class="line"><span class="comment">// 3.或者按条件加载</span></span><br><span class="line">{<span class="keyword">this</span>.state.visible && <span class="xml"><span class="tag"><<span class="name">Modal</span> <span class="attr">visible</span>=<span class="string">{true}</span> /></span>}</span></span><br></pre></td></tr></table></figure></p>
<h2 id="Form"><a href="#Form" class="headerlink" title="Form"></a>Form</h2><p>componentWillReceiveProps: 在这个生命周期函数内调用this.setState()方法不会增加一次新的render，但在此处调用Antd Form的setFieldsValue会进入死循环<br>现在我所使用到的Form组件都是嵌套在Modal中的，用于完成一些配置或者修改，Form的创建方式有几种，如下：</p>
<h3 id="Form组件创建"><a href="#Form组件创建" class="headerlink" title="Form组件创建"></a>Form组件创建</h3><p>语法：Form.create({ options })(组件（class/const）)</p>
<ol>
<li>经 Form.create() 包装过的组件会自带 this.props.form 属性，form提供一系列常用表单处理的API</li>
<li>使用 Form.create 处理后的表单具有自动收集数据并校验的功能，可以选择不使用 Form.create 并自行处理数据。<br>最后Form.create({ options })(相应组件)<h3 id="Form嵌套"><a href="#Form嵌套" class="headerlink" title="Form嵌套"></a>Form嵌套</h3>不允许，但可以通过向子组件传递此form，然后在子组件中创建FormItem，并使用form.getFieldDecorator声明Field实现嵌套<h3 id="Form表单赋值"><a href="#Form表单赋值" class="headerlink" title="Form表单赋值"></a>Form表单赋值</h3><h4 id="setFieldsValue方法"><a href="#setFieldsValue方法" class="headerlink" title="setFieldsValue方法"></a>setFieldsValue方法</h4>代码如下，源码分析: <blockquote>
<p>create提供一个高阶组件(组件1，组件2)生成一个组件1中含组件2form参数的组件，组件2已在此函数中被封装了add、submit、update等函数，其实就是对form组件（组件2）做一些简单处理<br>table columns上的一些操作通过switch column.key给其绑定事件及render一些简单的事件<br>setFieldsValue由form的父组件控制，通过saveref获得其控制权<br>form中子form弹出框也是form，handleOk中调用父form的setFieldsValue({refname:value})</p>
</blockquote>
</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">GridPanel</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>{</span><br><span class="line"> <span class="keyword">static</span> create () {</span><br><span class="line"> <span class="keyword">return</span> <span class="function">(<span class="params">WrappedComponent, FormWrappedComponent</span>) =></span> {</span><br><span class="line"> <span class="comment">/* eslint-disable react/no-multi-comp */</span></span><br><span class="line"> <span class="class"><span class="keyword">class</span> <span class="title">PanelWrappedComponent</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>{</span><br><span class="line"> setFormRef = <span class="function">(<span class="params">form</span>) =></span> {</span><br><span class="line"> <span class="keyword">this</span>.form = form</span><br><span class="line"> }</span><br><span class="line"> handleSubmit = <span class="function">(<span class="params">callback</span>) =></span> {</span><br><span class="line"> <span class="keyword">this</span>.form.validateFieldsAndScroll(callback)</span><br><span class="line"> }</span><br><span class="line"> addItem = <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">this</span>.form.resetFields()</span><br><span class="line"> }</span><br><span class="line"> updateItem = <span class="function">(<span class="params">record</span>) =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="keyword">this</span>.form)</span><br><span class="line"> <span class="keyword">this</span>.form.setFieldsValue(record)</span><br><span class="line"> }</span><br><span class="line"> render () {</span><br><span class="line"> <span class="keyword">const</span> form = <span class="xml"><span class="tag"><<span class="name">FormWrappedComponent</span> <span class="attr">ref</span>=<span class="string">{this.setFormRef}</span> /></span></span></span><br><span class="line"><span class="xml"> return (</span></span><br><span class="line"> <WrappedComponent {...this.props}</span><br><span class="line"> handleSubmit={this.handleSubmit}</span><br><span class="line"> addItem={this.addItem}</span><br><span class="line"> updateItem={this.updateItem}</span><br><span class="line"> form={form}</span><br><span class="line"> /></span><br><span class="line"> )</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> return PanelWrappedComponent</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> ...组件其他信息</span><br><span class="line"> 使用：</span><br><span class="line"> handleOk = () => {</span><br><span class="line"> const { onSubmit, refName } = this.props</span><br><span class="line"> onSubmit({ [refName]: this.state.selectedRows })</span><br><span class="line"> this.setState({ visible: false })</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h4 id="mapPropsToFields方法"><a href="#mapPropsToFields方法" class="headerlink" title="mapPropsToFields方法"></a>mapPropsToFields方法</h4><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> UserQueryLogForm = Form.create({</span><br><span class="line"> mapPropsToFields (props) {</span><br><span class="line"> <span class="keyword">let</span> { condition } = props</span><br><span class="line"> <span class="keyword">if</span> (condition === <span class="literal">undefined</span>) {</span><br><span class="line"> condition = {}</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (condition.timeRange) {</span><br><span class="line"> <span class="keyword">let</span> tmp</span><br><span class="line"> tmp = [moment(condition.timeRange[<span class="number">0</span>], <span class="string">'YYYY-MM-DD HH:mm:ss'</span>), moment(condition.timeRange[<span class="number">1</span>], <span class="string">'YYYY-MM-DD HH:mm:ss'</span>)]</span><br><span class="line"> condition.timeRange = tmp</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> condition.timeRange = getInitialTimeRange()</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">// 需map的form字段（Fields）</span></span><br><span class="line"> <span class="keyword">const</span> arr = [<span class="string">'ip'</span>, <span class="string">'mac'</span>, <span class="string">'timeRange'</span>, <span class="string">'user'</span>, <span class="string">'location'</span>, <span class="string">'tool'</span>, <span class="string">'alarmLevel'</span>, <span class="string">'alarmType'</span>, <span class="string">'display'</span>]</span><br><span class="line"> <span class="keyword">let</span> fiieldsValue = {}</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> str <span class="keyword">of</span> arr) {</span><br><span class="line"> fiieldsValue[str] = { <span class="attr">value</span>: condition[str] }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> fiieldsValue</span><br><span class="line"> },</span><br><span class="line">})(组件信息)</span><br></pre></td></tr></table></figure>
<h3 id="动态添加删除表单"><a href="#动态添加删除表单" class="headerlink" title="动态添加删除表单"></a>动态添加删除表单</h3><p>示例如下<br><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span></span><br><span class="line"><span class="keyword">import</span> { Modal, Radio, Input, Form, Icon, Button, message } <span class="keyword">from</span> <span class="string">'antd'</span></span><br><span class="line"><span class="keyword">import</span> PropTypes <span class="keyword">from</span> <span class="string">'prop-types'</span></span><br><span class="line"><span class="keyword">import</span> { remove } <span class="keyword">from</span> <span class="string">'../../../services/crud'</span></span><br><span class="line"><span class="keyword">import</span> { request } <span class="keyword">from</span> <span class="string">'../../../utils'</span></span><br><span class="line"><span class="keyword">const</span> RadioGroup = Radio.Group</span><br><span class="line"><span class="keyword">const</span> FormItem = Form.Item</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">ConfirmFormModal</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>{</span><br><span class="line"> <span class="keyword">constructor</span> (props) {</span><br><span class="line"> <span class="keyword">super</span>(props)</span><br><span class="line"> <span class="keyword">this</span>.state = {</span><br><span class="line"> keyCount: <span class="number">0</span>,</span><br><span class="line"> keys: [<span class="number">0</span>],</span><br><span class="line"> visible: <span class="literal">false</span>,</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> showModal = <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">const</span> { selectedAll, info, selectedRowKeys, ModalType } = <span class="keyword">this</span>.props</span><br><span class="line"> <span class="keyword">if</span> (selectedRowKeys.length < <span class="number">1</span>) {</span><br><span class="line"> message.warning(<span class="string">'请选择数据'</span>)</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (selectedAll || info.input) {</span><br><span class="line"> <span class="keyword">this</span>.setState({ <span class="attr">visible</span>: <span class="literal">true</span> })</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"> }</span><br><span class="line"> Modal.confirm({</span><br><span class="line"> title: <span class="string">`确认<span class="subst">${info.buttonText}</span>？`</span>,</span><br><span class="line"> onOk: <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">const</span> values = { <span class="attr">select</span>: <span class="string">'current'</span> }</span><br><span class="line"> <span class="keyword">switch</span> (ModalType) {</span><br><span class="line"> <span class="keyword">case</span> <span class="string">'export'</span>:</span><br><span class="line"> <span class="keyword">this</span>.exportItem(values)</span><br><span class="line"> <span class="keyword">break</span></span><br><span class="line"> <span class="keyword">case</span> <span class="string">'delete'</span>:</span><br><span class="line"> <span class="keyword">this</span>.deleteItem(values)</span><br><span class="line"> <span class="keyword">break</span></span><br><span class="line"> <span class="keyword">case</span> <span class="string">'send'</span>:</span><br><span class="line"> <span class="keyword">this</span>.sendItem(values)</span><br><span class="line"> <span class="keyword">break</span></span><br><span class="line"> <span class="keyword">default</span>:</span><br><span class="line"> message.info(<span class="string">'操作失败'</span>)</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> onCancel: <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> },</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"> hideModal = <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">this</span>.setState({</span><br><span class="line"> visible: <span class="literal">false</span>,</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"> handleCancel = <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">this</span>.hideModal()</span><br><span class="line"> }</span><br><span class="line"> add = <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">let</span> { keys, keyCount } = <span class="keyword">this</span>.state</span><br><span class="line"> <span class="keyword">if</span> (keys.length >= <span class="number">100</span>) {</span><br><span class="line"> message.error(<span class="string">'超过最大发送邮箱数'</span>)</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"> }</span><br><span class="line"> keyCount++</span><br><span class="line"> keys = keys.concat(keyCount)</span><br><span class="line"> <span class="keyword">this</span>.setState({ keys, keyCount })</span><br><span class="line"> }</span><br><span class="line"> remove = <span class="function">(<span class="params">k</span>) =></span> {</span><br><span class="line"> <span class="keyword">const</span> { keys } = <span class="keyword">this</span>.state</span><br><span class="line"> <span class="keyword">if</span> (keys.length === <span class="number">1</span>) {</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">this</span>.setState({</span><br><span class="line"> keys: keys.filter(<span class="function"><span class="params">key</span> =></span> key !== k),</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"> deleteItem = <span class="function">(<span class="params">values</span>) =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'delete'</span>, values.select)</span><br><span class="line"> <span class="keyword">const</span> { selectedRowKeys, api } = <span class="keyword">this</span>.props</span><br><span class="line"> remove(api.delete, { <span class="attr">ids</span>: [...selectedRowKeys], <span class="attr">type</span>: values.select }).then(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">this</span>.setState({ <span class="attr">loading</span>: <span class="literal">false</span>, <span class="attr">selectedRowKeys</span>: [] }, () => {</span><br><span class="line"> message.info(<span class="string">'删除成功'</span>)</span><br><span class="line"> <span class="keyword">this</span>.props.handleModalConfirm()</span><br><span class="line"> })</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"> exportItem = <span class="function">(<span class="params">values</span>) =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'export'</span>, values.select)</span><br><span class="line"> <span class="keyword">let</span> { selectedRowKeys, api } = <span class="keyword">this</span>.props</span><br><span class="line"> request({</span><br><span class="line"> url: api.export,</span><br><span class="line"> method: <span class="string">'post'</span>,</span><br><span class="line"> data: { <span class="attr">ids</span>: [...selectedRowKeys], <span class="attr">selection</span>: values.select },</span><br><span class="line"> }).then(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">this</span>.setState({ <span class="attr">loading</span>: <span class="literal">false</span>, <span class="attr">selectedRowKeys</span>: [] }, () => {</span><br><span class="line"> message.info(<span class="string">'导出成功'</span>)</span><br><span class="line"> <span class="keyword">this</span>.props.handleModalConfirm()</span><br><span class="line"> })</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"> sendItem = <span class="function">(<span class="params">values</span>) =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'send'</span>, values.select)</span><br><span class="line"> <span class="keyword">const</span> { selectedRowKeys, api } = <span class="keyword">this</span>.props</span><br><span class="line"> request({</span><br><span class="line"> url: api.send,</span><br><span class="line"> method: <span class="string">'post'</span>,</span><br><span class="line"> data: { <span class="attr">ids</span>: [...selectedRowKeys],</span><br><span class="line"> type: values.select,</span><br><span class="line"> },</span><br><span class="line"> }).then(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">this</span>.setState({ <span class="attr">loading</span>: <span class="literal">false</span>, <span class="attr">selectedRowKeys</span>: [] }, () => {</span><br><span class="line"> message.info(<span class="string">'发送成功'</span>)</span><br><span class="line"> <span class="keyword">this</span>.props.handleModalConfirm()</span><br><span class="line"> })</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"> handleOk = <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">const</span> { ModalType, form } = <span class="keyword">this</span>.props</span><br><span class="line"> form.validateFieldsAndScroll(<span class="function">(<span class="params">err, values</span>) =></span> {</span><br><span class="line"> <span class="keyword">if</span> (err) {</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'收集数据：'</span>)</span><br><span class="line"> <span class="built_in">console</span>.log(values)</span><br><span class="line"> <span class="comment">// 处理数据</span></span><br><span class="line"> <span class="keyword">switch</span> (ModalType) {</span><br><span class="line"> <span class="keyword">case</span> <span class="string">'export'</span>:</span><br><span class="line"> <span class="keyword">this</span>.exportItem(values)</span><br><span class="line"> <span class="keyword">break</span></span><br><span class="line"> <span class="keyword">case</span> <span class="string">'delete'</span>:</span><br><span class="line"> <span class="keyword">this</span>.deleteItem(values)</span><br><span class="line"> <span class="keyword">break</span></span><br><span class="line"> <span class="keyword">case</span> <span class="string">'send'</span>:</span><br><span class="line"> <span class="keyword">this</span>.sendItem(values)</span><br><span class="line"> <span class="keyword">break</span></span><br><span class="line"> <span class="keyword">default</span>:</span><br><span class="line"> message.info(<span class="string">'操作失败'</span>)</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">this</span>.setState({</span><br><span class="line"> visible: <span class="literal">false</span>,</span><br><span class="line"> })</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"> render = <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">const</span> { info, form } = <span class="keyword">this</span>.props</span><br><span class="line"> <span class="keyword">const</span> { buttonText, buttonIconType } = info</span><br><span class="line"> <span class="keyword">const</span> { visible } = <span class="keyword">this</span>.state</span><br><span class="line"> <span class="keyword">const</span> { getFieldDecorator } = form</span><br><span class="line"> <span class="keyword">const</span> { keys } = <span class="keyword">this</span>.state</span><br><span class="line"> <span class="keyword">const</span> radioStyle = {</span><br><span class="line"> display: <span class="string">'block'</span>,</span><br><span class="line"> height: <span class="string">'30px'</span>,</span><br><span class="line"> lineHeight: <span class="string">'30px'</span>,</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">const</span> formInputItems = info.input && keys.map(<span class="function">(<span class="params">k, index</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <FormItem</span><br><span class="line"> label={index === <span class="number">0</span> ? <span class="string">'请输入收件邮箱，最多100个'</span> : <span class="string">''</span>}</span><br><span class="line"> key={k}</span><br><span class="line"> ></span><br><span class="line"> {getFieldDecorator((<span class="string">`Emails-<span class="subst">${k}</span>`</span>), {</span><br><span class="line"> rules: [{</span><br><span class="line"> type: <span class="string">'email'</span>,</span><br><span class="line"> message: <span class="string">'请输入正确的邮箱'</span>,</span><br><span class="line"> required: <span class="literal">true</span> }],</span><br><span class="line"> })(</span><br><span class="line"> <Input placeholder=<span class="string">"请输入收件人邮箱"</span> style={{ <span class="attr">width</span>: <span class="string">'80%'</span>, <span class="attr">marginRight</span>: <span class="number">8</span> }} /></span><br><span class="line"> )}</span><br><span class="line"> {keys.length > <span class="number">1</span> ? (</span><br><span class="line"> <Icon</span><br><span class="line"> className=<span class="string">"dynamic-delete-button"</span></span><br><span class="line"> type=<span class="string">"minus-circle-o"</span></span><br><span class="line"> disabled={keys.length === <span class="number">1</span>}</span><br><span class="line"> onClick={() => <span class="keyword">this</span>.remove(k)}</span><br><span class="line"> /></span><br><span class="line"> ) : <span class="literal">null</span>}</span><br><span class="line"> <<span class="regexp">/FormItem></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"> return (</span></span><br><span class="line"><span class="regexp"> <div></span></span><br><span class="line"><span class="regexp"> <Button onClick={this.showModal} type="ghost" style={{ marginRight: '10px', float: 'left' }} ><Icon type={buttonIconType} /</span>>{buttonText}<<span class="regexp">/Button></span></span><br><span class="line"><span class="regexp"> <Modal</span></span><br><span class="line"><span class="regexp"> title={`确认${buttonText}信息`}</span></span><br><span class="line"><span class="regexp"> visible={visible}</span></span><br><span class="line"><span class="regexp"> onOk={this.handleOk}</span></span><br><span class="line"><span class="regexp"> onCancel={this.handleCancel}</span></span><br><span class="line"><span class="regexp"> wrapClassName={info.input ? 'vertical-center-modal' : ''}</span></span><br><span class="line"><span class="regexp"> okText={`确认${buttonText}`}</span></span><br><span class="line"><span class="regexp"> cancelText={'取消'}</span></span><br><span class="line"><span class="regexp"> maskClosable={false}</span></span><br><span class="line"><span class="regexp"> width={info.input ? 400 : 320}</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"> <Form></span></span><br><span class="line"><span class="regexp"> {<FormItem label={'请选择'}></span></span><br><span class="line"><span class="regexp"> {getFieldDecorator('select', {</span></span><br><span class="line"><span class="regexp"> rules: [{ required: true }],</span></span><br><span class="line"><span class="regexp"> initialValue: info.initialValue,</span></span><br><span class="line"><span class="regexp"> })(</span></span><br><span class="line"><span class="regexp"> <RadioGroup></span></span><br><span class="line"><span class="regexp"> <Radio style={radioStyle} value={'all'}>{`${buttonText}所有项目`}</</span>Radio></span><br><span class="line"> <Radio style={radioStyle} value={<span class="string">'current'</span>}>{<span class="string">`<span class="subst">${buttonText}</span>当前项目`</span>}<<span class="regexp">/Radio></span></span><br><span class="line"><span class="regexp"> </</span>RadioGroup></span><br><span class="line"> )}</span><br><span class="line"> <<span class="regexp">/FormItem>}</span></span><br><span class="line"><span class="regexp"> {{formInputItems}}</span></span><br><span class="line"><span class="regexp"> {info.input && <FormItem></span></span><br><span class="line"><span class="regexp"> <Button type="dashed" onClick={this.add} style={{ width: '80%' }}></span></span><br><span class="line"><span class="regexp"> <Icon type="plus" /</span>> Add Email</span><br><span class="line"> <<span class="regexp">/Button></span></span><br><span class="line"><span class="regexp"> </</span>FormItem></span><br><span class="line"> }</span><br><span class="line"> <<span class="regexp">/Form>}</span></span><br><span class="line"><span class="regexp"> </</span>Modal></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><span class="line"><span class="regexp"> }</span></span><br><span class="line"><span class="regexp">}</span></span><br><span class="line"><span class="regexp">ConfirmFormModal.propTypes = {</span></span><br><span class="line"><span class="regexp"> info: PropTypes.object,</span></span><br><span class="line"><span class="regexp"> form: PropTypes.any,</span></span><br><span class="line"><span class="regexp"> selectedAll: PropTypes.bool,</span></span><br><span class="line"><span class="regexp"> handleModalOk: PropTypes.func,</span></span><br><span class="line"><span class="regexp"> handleModalCancle: PropTypes.func,</span></span><br><span class="line"><span class="regexp"> onSelectChange: PropTypes.func,</span></span><br><span class="line"><span class="regexp"> selectedRowKeys: PropTypes.array,</span></span><br><span class="line"><span class="regexp"> api: PropTypes.object,</span></span><br><span class="line"><span class="regexp"> ModalType: PropTypes.string,</span></span><br><span class="line"><span class="regexp"> handleModalConfirm: PropTypes.func,</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">const ConfirmFormModalWrapper = Form.create()(ConfirmFormModal)</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">export default ConfirmFormModalWrapper</span></span><br></pre></td></tr></table></figure></p>
<h3 id="常用API"><a href="#常用API" class="headerlink" title="常用API"></a>常用API</h3><ol>
<li>getFieldDecorator<br>使用：getFieldDecorator(id, options)(component)，每个FormItem中最好一个<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 示例</span></span><br><span class="line"><FormItem {...formItemLayout} label=<span class="string">"日期范围"</span>></span><br><span class="line"> {getFieldDecorator(<span class="string">'template'</span>, {</span><br><span class="line"> initialValue: <span class="string">'today'</span>,</span><br><span class="line"> })(</span><br><span class="line"> <RadioGroup disabled={<span class="keyword">this</span>.state.disabled}></span><br><span class="line"> <Radio value=<span class="string">"today"</span>>当前日<<span class="regexp">/Radio></span></span><br><span class="line"><span class="regexp"> <Radio value="branch">指定日期</</span>Radio></span><br><span class="line"> <<span class="regexp">/RadioGroup></span></span><br><span class="line"><span class="regexp"> )}</span></span><br><span class="line"><span class="regexp"></</span>FormItem></span><br><span class="line"></span><br><span class="line"><span class="comment">// 示例2，使用formConfig简化代码</span></span><br><span class="line"> <span class="keyword">let</span> formConfig = [</span><br><span class="line"> {</span><br><span class="line"> label: <span class="string">'sad'</span>,</span><br><span class="line"> index: <span class="string">'test'</span>,</span><br><span class="line"> component: <span class="xml"><span class="tag"><<span class="name">Checkbox</span>></span>sda<span class="tag"></<span class="name">Checkbox</span>></span></span>,</span><br><span class="line"> key: <span class="string">'test'</span>,</span><br><span class="line"> options: {</span><br><span class="line"> valuePropName: <span class="string">'checked'</span>,</span><br><span class="line"> initialValue: <span class="literal">false</span>,</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// ...其他表单项</span></span><br><span class="line"> ]</span><br><span class="line"><span class="comment">// 使用:</span></span><br><span class="line"> <Form></span><br><span class="line"> <ConditionFormHeader</span><br><span class="line"> form={form}</span><br><span class="line"> IpMacType=<span class="string">"oneIp"</span></span><br><span class="line"> /></span><br><span class="line"> {formConfig.map(<span class="function">(<span class="params">pane, i</span>) =></span> {</span><br><span class="line"> <span class="keyword">const</span> { index, options, component, layout, ...itemProps } = pane</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <FormItem {...formItemLayout} {...layout} {...itemProps} className={i === formConfig.length - <span class="number">1</span> ? <span class="string">'collection-create-form_last-form-item'</span> : <span class="string">''</span>}></span><br><span class="line"> {form.getFieldDecorator(index, options)(component)}</span><br><span class="line"> <<span class="regexp">/FormItem></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>Form></span><br></pre></td></tr></table></figure>
</li>
</ol>
<p>tips: </p>
<blockquote>
<p>使用valuePropName: ‘checked’，可指定mapPropsToFields和setFieldsValue时改变的变量名</p>
</blockquote>
<ol start="2">
<li>getFieldsValue<br>获取表单项值，按index查找</li>
<li>validateFieldsAndScroll<br>使用：form.validateFieldsAndScroll((err,val)=>{…})<br>校验并处理表单数据,获取form数据,与 validateFields 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围</li>
<li>resetFields<br>重置表单项为默认值(无默认值则为空)</li>
</ol>
<h3 id="Form表单初始化"><a href="#Form表单初始化" class="headerlink" title="Form表单初始化"></a>Form表单初始化</h3><h4 id="方法："><a href="#方法：" class="headerlink" title="方法："></a>方法：</h4><p>具体参考前面Form表单赋值</p>
<ol>
<li>mapPropsToFields</li>
<li><p>在上层组件setFieldsValue</p>
<h4 id="tips"><a href="#tips" class="headerlink" title="tips"></a>tips</h4><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="string">``</span><span class="string">`</span></span><br><span class="line"><span class="string">注意事项：</span></span><br><span class="line"><span class="string">> 1. form表单首次初始化可直接在componentDidMount中调用</span></span><br><span class="line"><span class="string">2. 不可以在componentWillReceiveProps中调用setFieldsValue，会引起死循环</span></span><br><span class="line"><span class="string">3. 多次使用不同数据进行初始化：每次重新载入一个新的Form，具体方法看Modal（新key or 按条件加载）</span></span><br><span class="line"><span class="string">4. 未尝试（？）直接在render中利用initialValue进行初始化</span></span><br><span class="line"><span class="string">4. (待实践)可以选择使用dva提供的mapPropsToFields方法，通过使用 `</span>onFieldsChange<span class="string">` 与 `</span>mapPropsToFields<span class="string">`，可以把表单的数据存储到上层组件或者 [Redux](https://github.com/reactjs/redux)、[dva](https://github.com/dvajs/dva) 中</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">### Form嵌套使用</span></span><br><span class="line"><span class="string">1. FormItem中可嵌套其他组件，最好自行定义出组件之后直接索引使用，组件内定义好在handleOk中调用回调函数传入组件值，然后在Form页设置好handleSubmit时setFieldsValue即可</span></span><br><span class="line"><span class="string">`</span><span class="string">``</span>javascript</span><br><span class="line"><span class="comment">// 存在问题：组件返回多个值的情况如何setFields？？？数组？对象？</span></span><br><span class="line"><span class="keyword">const</span> timeObjectProps = {</span><br><span class="line">...modalOpts,</span><br><span class="line">modalTitle: <span class="string">'时间对象列表'</span>,</span><br><span class="line">content: TimeObject,</span><br><span class="line">onSubmit: setFieldsValue,<span class="comment">// 来自form</span></span><br><span class="line">refName: timeObject,</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 定义：</span></span><br><span class="line">{</span><br><span class="line"> label: <span class="string">'时间对象'</span>,</span><br><span class="line"> index: timeObject,</span><br><span class="line"> component: <span class="xml"><span class="tag"><<span class="name">CollectionsObject</span> {<span class="attr">...timeObjectProps</span>} /></span>,</span></span><br><span class="line"><span class="xml"> key: 'timeObject',</span></span><br><span class="line"><span class="xml">},</span></span><br><span class="line"><span class="xml">// 回调：</span></span><br><span class="line"><span class="xml">handleOk = () => {</span></span><br><span class="line"><span class="xml">const { onSubmit, refName } = this.props</span></span><br><span class="line"><span class="xml">onSubmit({ [refName]: this.state.selectedRows })</span></span><br><span class="line"><span class="xml">this.setState({ visible: false })</span></span><br><span class="line"><span class="xml">}</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>未解决，(???FormItem是否可嵌套？嵌套用法)</p>
<h2 id="Table"><a href="#Table" class="headerlink" title="Table"></a>Table</h2><h3 id="配置项"><a href="#配置项" class="headerlink" title="配置项"></a>配置项</h3><p>参考<a href="https://ant.design/components/table-cn/#components-table-demo-head" target="_blank" rel="noopener">Antd<br>官方文档-Table</a></p>
<h3 id="收集选择的Table表项"><a href="#收集选择的Table表项" class="headerlink" title="收集选择的Table表项"></a>收集选择的Table表项</h3><p>配置rowSelection</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> rowSelection = {</span><br><span class="line"> selectedRowKeys,</span><br><span class="line"> onChange: <span class="keyword">this</span>.onSelectChange,</span><br><span class="line">}</span><br><span class="line"><Table</span><br><span class="line"> ref=<span class="string">"DataTable"</span></span><br><span class="line"> rowSelection={rowSelection}</span><br><span class="line">/></span><br><span class="line"><span class="comment">// 在handler中处理</span></span><br><span class="line"> onSelectChange = <span class="function">(<span class="params">selectedRowKeys, selectedRows</span>) =></span> {</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line"> <span class="comment">// selectedRowKeys为选中的key数组</span></span><br><span class="line"> <span class="comment">// selectedRows</span></span><br><span class="line"> }</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h3 id="实现排序"><a href="#实现排序" class="headerlink" title="实现排序"></a>实现排序</h3><p>参考antd官方文档<a href="https://ant.design/components/table-cn/#components-table-demo-ajax" target="_blank" rel="noopener">Table-远程加载数据</a>可实现后台筛选排序前端展示<br>实现步骤：</p>
<ol>
<li>columns的sorter置为true</li>
<li>在Table的onChange回调中进行处理<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 示例代码</span></span><br><span class="line"> <span class="keyword">const</span> columns = [</span><br><span class="line"> {</span><br><span class="line"> title: <span class="string">'时间'</span>,</span><br><span class="line"> dataIndex: <span class="string">'tstamp'</span>,</span><br><span class="line"> key: <span class="string">'tstamp'</span>,</span><br><span class="line"> sorter: <span class="literal">true</span>,</span><br><span class="line"> width: <span class="number">150</span>,</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// ...其他表项</span></span><br><span class="line"> }</span><br><span class="line"> <span class="comment">// 声明回调</span></span><br><span class="line"> <SelectTable</span><br><span class="line"> ref=<span class="string">"DataTable"</span></span><br><span class="line"> onChange={<span class="keyword">this</span>.handleTableChange}</span><br><span class="line"> loading={loading}</span><br><span class="line"> columns={columns}</span><br><span class="line"> /></span><br><span class="line"> <span class="comment">// 处理</span></span><br><span class="line"> handleTableChange = <span class="function">(<span class="params">pagination, filters, sorter</span>) =></span> {</span><br><span class="line"> <span class="keyword">const</span> pager = { ...this.state.pagination }</span><br><span class="line"> pager.current = pagination.current</span><br><span class="line"> <span class="keyword">this</span>.setState({</span><br><span class="line"> pagination: pager,</span><br><span class="line"> fetchData: {</span><br><span class="line"> pageSize: pagination.pageSize,</span><br><span class="line"> page: pagination.current,</span><br><span class="line"> sortField: sorter.field,</span><br><span class="line"> sortOrder: sorter.order,</span><br><span class="line"> ...filters,</span><br><span class="line"> },</span><br><span class="line"> }, () => {</span><br><span class="line"> <span class="keyword">this</span>.fetchData()</span><br><span class="line"> })</span><br><span class="line"> }</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="Tabs"><a href="#Tabs" class="headerlink" title="Tabs"></a>Tabs</h2><p>提供平级的区域将大块内容进行收纳和展现，保持界面整洁。这个功能是项目中常用到的功能，刚才发现antd有提供这一组件，自己好像经常做只顾低头赶路的傻事，磨刀不误砍柴工，学习成长这种事也急不得，越急越容易遗漏知识点。先博后渊这句话，用在学习上好像一直都不会错，博，先知知识之大概内容，渊则是要知知识的原理及其使用了，现在正处于第一阶段，还是急不得。</p>
<h2 id="Collapse"><a href="#Collapse" class="headerlink" title="Collapse"></a>Collapse</h2><p>可以折叠/展开的内容区域，手风琴效果。教训同上</p>
<h2 id="Steps"><a href="#Steps" class="headerlink" title="Steps"></a>Steps</h2><p>引导用户按照流程完成任务的导航条。</p>
<h2 id="项目中遇到的问题"><a href="#项目中遇到的问题" class="headerlink" title="项目中遇到的问题"></a>项目中遇到的问题</h2><h3 id="引导式next实现"><a href="#引导式next实现" class="headerlink" title="引导式next实现"></a>引导式next实现</h3><p>参考网络配置——》网络模式</p>
<h4 id="实现策略：redux实现界面跳转"><a href="#实现策略：redux实现界面跳转" class="headerlink" title="实现策略：redux实现界面跳转"></a>实现策略：redux实现界面跳转</h4><p>类似路由一样在多个界面(组件)中跳转，主要利用dva的model进行redux系列操作实现，model在router.js中注册,注册语法有待研究，如下：(???)<br><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">{</span><br><span class="line">path: <span class="string">'portmapping'</span>,</span><br><span class="line">getComponent (nextState, cb) {</span><br><span class="line"> <span class="built_in">require</span>.ensure([], (<span class="built_in">require</span>) => {</span><br><span class="line"> cb(<span class="literal">null</span>, <span class="built_in">require</span>(<span class="string">'./routes/firewall/portmapping'</span>))</span><br><span class="line"> }, <span class="string">'firewall-portmapping'</span>)</span><br><span class="line">},</span><br><span class="line">},</span><br></pre></td></tr></table></figure></p>
]]></content>
</entry>
<entry>
<title>npm常用命令</title>
<url>/2017/08/17/Tec/tools/node/npm/</url>
<content><![CDATA[<p>一些命令记录<br><a id="more"></a><br><a href="http://www.cnblogs.com/PeunZhang/p/5553574.html" target="_blank" rel="noopener">npm 常用命令详解</a></p>
<ol>
<li>–save安装包信息将加入到dependencies（生产阶段的依赖）</li>
<li>–save-dev 安装包信息将加入到devDependencies（开发阶段的依赖），所以开发阶段一般使用它</li>
<li>-E, –save-exact 精确安装指定模块版本<br>模块的依赖都被写入了package.json文件后，他人打开项目的根目录（项目开源、内部团队合作），使用npm install命令可以根据dependencies配置安装所有的依赖包</li>
<li>全局安装（global）,使用 -g 或 –global(不加默认本地安装)<br>本地安装：将安装包放在 ./node_modules 下（运行npm时所在的目录），可以通过 require() 来引入本地安装的包<br> 全局安装：将安装包放在 /usr/local下（windows平台在c:/用户/用户名/node_modules下），可以直接在命令行里使用</li>
<li>npm uninstall 卸载模块</li>
<li>npm update 更新模块</li>
<li>npm outdated 检查模块是否已经过时</li>
<li>npm ls 查看安装的模块</li>
<li>npm init 在项目中引导创建一个package.json文件</li>
<li>npm help 查看某条命令的详细帮助</li>
<li>npm config 管理npm的配置路径</li>
</ol>
]]></content>
</entry>
<entry>
<title>React组件及其生命周期(React核心概念介绍)</title>
<url>/2017/08/17/front-end/React/TechStack/reactComponent/</url>
<content><![CDATA[<p>单说React的话，组件的构建与使用基本就是React的全部内容了，所以此文也可以叫React使用介绍。<br><a id="more"></a> </p>
<h2 id="相关资料"><a href="#相关资料" class="headerlink" title="相关资料"></a>相关资料</h2><p><a href="http://jartto.wang/2017/02/19/grasp-react-component/#disqus_thread" target="_blank" rel="noopener">掌握 React 组件 Component</a>对组件创建方式、生命周期都有详细的介绍。<br><a href="https://fraserxu.me/2014/08/31/react-component-lifecycle/" target="_blank" rel="noopener">React入门教程 - 组件生命周期</a>比较详细的介绍了生命周期函数的执行过程，可结合上面链接中的图一起看 </p>
<h2 id="React五大核心概念"><a href="#React五大核心概念" class="headerlink" title="React五大核心概念"></a>React五大核心概念</h2><p>包含JSX、组件、组件的props&state、组件API、组件类型，可以看出React的核心都在组件化上了 </p>
<h3 id="JSX"><a href="#JSX" class="headerlink" title="JSX"></a>JSX</h3><p>React是通过JSX语法扩展来实现的 </p>
<h4 id="基本JSX语法"><a href="#基本JSX语法" class="headerlink" title="基本JSX语法"></a>基本JSX语法</h4><ol>
<li>Component可以嵌套</li>
<li>className代替class</li>
<li>JavaScript 表达式需要用 {} 括起来，会执行并返回结果。</li>
<li>Mapping Arrays to JSX,可以把数组映射为 JSX 元素列表 <figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"> <ul></span><br><span class="line"> { <span class="keyword">this</span>.props.todos.map(<span class="function">(<span class="params">todo, i</span>) =></span> <span class="xml"><span class="tag"><<span class="name">li</span> <span class="attr">key</span>=<span class="string">{i}</span>></span>{todo}<span class="tag"></<span class="name">li</span>></span></span>) }</span><br><span class="line"> <<span class="regexp">/ul></span></span><br><span class="line"><span class="regexp"> ``` </span></span><br><span class="line"><span class="regexp">5. Spread Attribute：这是 JSX 从 ECMAScript6 借鉴过来的很有用的特性，用于扩充组件 props 。 </span></span><br><span class="line"><span class="regexp"> ```javascript</span></span><br><span class="line"><span class="regexp"> const testProp = {</span></span><br><span class="line"><span class="regexp"> att1: 'a',</span></span><br><span class="line"><span class="regexp"> prop2: '2',</span></span><br><span class="line"><span class="regexp"> }</span></span><br><span class="line"><span class="regexp"> renturn (</span></span><br><span class="line"><span class="regexp"> <TestNode {...testProps}>ha</</span>TestNode></span><br><span class="line"> )</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h3 id="组件"><a href="#组件" class="headerlink" title="组件"></a>组件</h3><p>React组件能够像原生的HTML标签一样输出特定的界面元素，并且也能包括一些元素相关逻辑功能的代码。<br>组件是一个由具有特定外观特定功能与数据集合的前端页面组成单位。 </p>
<h3 id="组件的Props-amp-state（属性与状态）"><a href="#组件的Props-amp-state（属性与状态）" class="headerlink" title="组件的Props&state（属性与状态）"></a>组件的Props&state（属性与状态）</h3><p>props是一个组件暴露给使用者(父组件)的一些属性，父组件可通过props的配置对组件进行一些初始化，如对一个Table传入dataSource进行展示<br>State是组件内部状态，组件内部自己维护状态变化。外部使用者(父组件)不会关心这些状态<br>注意:<br> props和state的变化都会引起组件的重绘(render) </p>
<h3 id="组件API"><a href="#组件API" class="headerlink" title="组件API"></a>组件API</h3><p>一些方法。常用如下：<br>1) render、setState、constructor </p>
<ol>
<li>render中返回将要被渲染的组件内容，纯函数组件不用render，直接return组件内容即可</li>
<li>setState用于更新组件状态，会引起组件重绘(render被执行)</li>
<li>constructor为当用ES6方式构建组件时的构造函数，主要进行state的初始化操作<br>2) 生命周期函数，如图所示<br>常用生命周期函数: <ol>
<li>componentDidMount: 组件刚mount上后执行，可在此函数中进行一些组件的初始化操作</li>
<li>componentWillReceiveProps: 组件接收到新的props后执行，参数为nextProps,可在此进行一些组件更新操作<br><img src="http://7xvi3w.com1.z0.glb.clouddn.com/react-component.jpeg" alt="生命周期图示"> <h3 id="组件类型"><a href="#组件类型" class="headerlink" title="组件类型"></a>组件类型</h3>组件分类：<br>1) 容器组件：关注数据交互，如加载服务器端数据<br>2) 展示组件：关注UI逻辑，用来展示或隐藏内容<br>高阶组件（higher-order components，HOCs）：可以把它理解为一个工厂方法，你可以传入一个组件并得到一个HOC返回的附加了更多功能的新组件。HOC不能直接在render方法中调用。 <h2 id="组件定义与使用"><a href="#组件定义与使用" class="headerlink" title="组件定义与使用"></a>组件定义与使用</h2>定义组件方式：<br>1) React.createClass 最早，兼容最好<br>2) ES6 Class<br>3) 函数式组件（无状态组件，没state） <h3 id="纯函数方式定义组件"><a href="#纯函数方式定义组件" class="headerlink" title="纯函数方式定义组件"></a>纯函数方式定义组件</h3><h4 id="特点"><a href="#特点" class="headerlink" title="特点"></a>特点</h4>与函数创建方式相同，props作为函数参数，return组件布局,每次调用从头执行到尾<br>使用 Functional Component 的写法，单纯渲染 UI<br>A. 组件不能被实例化，节约内存，提升一定的性能<br>B. 组件不能访问this对象<br>C. 组件无法访问生命周期方法<br>D. 只能访问props<br>E. 无状态组件内部其实是可以使用ref功能的，虽然不能通过this.refs访问到，但是可以通过将ref内容保存到无状态组件内部的一个本地变量中获取到。 <h4 id="示例代码"><a href="#示例代码" class="headerlink" title="示例代码"></a>示例代码</h4>一个hello组件<pre><code class="javascript"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span>
<span class="keyword">import</span> { render } <span class="keyword">from</span> <span class="string">'react-dom'</span>
<span class="keyword">const</span> Hello = <span class="function"><span class="params">()</span> =></span> (
<div>
hello {name}
<<span class="regexp">/div></span>
<span class="regexp">)</span>
<span class="regexp">render(<Hello name="world"/</span>>, <span class="built_in">document</span>.getElementById(<span class="string">"app"</span>))
</code></pre>
<h3 id="ES5原生方式定义组件"><a href="#ES5原生方式定义组件" class="headerlink" title="ES5原生方式定义组件"></a>ES5原生方式定义组件</h3>如果是最新版16.0中createClass已经被废除了，可以使用es6的class替代。<br>现在基本上不用此方式了，之前一些旧代码组件定义方式基本是ES5原生方式，看懂即可。现在项目中一般用ES6的构建方式 <h4 id="构建出的组件特点"><a href="#构建出的组件特点" class="headerlink" title="构建出的组件特点"></a>构建出的组件特点</h4>React.createClass定义的组件 <blockquote>
<ol>
<li>This自绑定，自动获取当前组件实例对象</li>
</ol>
</blockquote>
</li>
</ol>
</li>
<li>React.createClass在创建组件时，有关组件props的属性类型及组件默认的属性会作为组件实例的属性来配置，其中defaultProps是使用getDefaultProps的方法来获取默认组件属性的</li>
<li>React.createClass创建的组件，其状态state是通过getInitialState方法来配置组件相关的状态 <h4 id="示例代码-1"><a href="#示例代码-1" class="headerlink" title="示例代码"></a>示例代码</h4><pre><code class="javascript"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span>
<span class="keyword">const</span> MyComponent = React.createClass({
getInitialState: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{
<span class="keyword">return</span> { <span class="attr">count</span>: [] };
},
getDefaultProps() {
<span class="keyword">return</span> {
name: <span class="string">'default'</span>
}
},
onClick: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{
<span class="keyword">let</span> { count } =<span class="keyword">this</span>.state
count++
<span class="keyword">this</span>.setState({count})
},
render: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{
<span class="keyword">const</span> { name } = <span class="keyword">this</span>.props
<span class="keyword">const</span> { count } = <span class="keyword">this</span>.state
<span class="keyword">return</span> (
<button onClick={<span class="keyword">this</span>.onClick}>{name},您点击了{count}次<<span class="regexp">/button></span>
<span class="regexp">)</span>
<span class="regexp">}</span>
<span class="regexp">}) </span>
<span class="regexp">export default MyComponent</span>
</code></pre>
<h3 id="ES6方式定义组件"><a href="#ES6方式定义组件" class="headerlink" title="ES6方式定义组件"></a>ES6方式定义组件</h3>有状态组件的定义多用ES6方式。<br>Class xx extends React.Components<blockquote>
<ol>
<li>React.Component在创建组件时配置这两个对应信息时，他们是作为组件类的属性，不是组件实例的属性，也就是所谓的类的静态属性来配置的。</li>
<li>React.Component创建的组件，其状态state是在constructor中像初始化组件属性一样声明的。 </li>
</ol>
</blockquote>
<h4 id="示例代码-2"><a href="#示例代码-2" class="headerlink" title="示例代码"></a>示例代码</h4>下面代码完成了一个可记录点击次数的组件<pre><code class="javascript"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span>
<span class="keyword">import</span> { render } <span class="keyword">from</span> <span class="string">'react-dom'</span>
<span class="class"><span class="keyword">class</span> <span class="title">Hello</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>{
<span class="keyword">constructor</span> (props) {
<span class="keyword">super</span>(props)
<span class="keyword">this</span>.state = { <span class="attr">count</span>: <span class="number">0</span> }
}
onClick = <span class="function"><span class="params">()</span> =></span> {
<span class="keyword">let</span> { count } =<span class="keyword">this</span>.state
count++
<span class="keyword">this</span>.setState({count})
}
render () {
<span class="keyword">const</span> { count } = <span class="keyword">this</span>.state
<span class="keyword">const</span> { name } = <span class="keyword">this</span>.props
<span class="keyword">return</span> (
<button onClick={<span class="keyword">this</span>.onClick}>{name},您点击了{count}次<<span class="regexp">/button></span>
<span class="regexp">)</span>
<span class="regexp">}</span>
<span class="regexp">} </span>
<span class="regexp">render(<Hello name="Anne"/</span>>, <span class="built_in">document</span>.getElementById(<span class="string">"app"</span>))
</code></pre>
<h3 id="组件使用相关tips"><a href="#组件使用相关tips" class="headerlink" title="组件使用相关tips"></a>组件使用相关tips</h3><ol>
<li>组件使用时首字母必须大写，否则无法识别</li>
<li>有状态组件才能用生命周期钩子函数</li>
<li>组件更新时机：props/state的变化都会触发render()更新界面，同时也可以在生命周期函数中对界面进行处理</li>
<li>shouldComponentUpdate默认返回true，重写可避免不必要的更新 <h2 id="组件设计"><a href="#组件设计" class="headerlink" title="组件设计"></a>组件设计</h2>尽量无状态，交由父组件维护自身状态并通过props传值<br>状态state： 状态需要包含那些仅与自身有关(不需要父组件决定)并且在组件的回调函数中会发生变化（用户行为改变状态），并且会体现在 UI上的信息。 <h3 id="组件划分思想"><a href="#组件划分思想" class="headerlink" title="组件划分思想"></a>组件划分思想</h3>单一职责原则<br>好的组件特性:<br>（1）可组合（Composeable）：一个组件易于和其它组件一起使用，或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件，那么说父组件拥有（own）它创建的子组件，通过这个特性，一个复杂的UI可以拆分成多个简单的UI组件；<br>（2）可重用（Reusable）：每个组件都是具有独立功能的，它可以被使用在多个UI场景；<br>（3）可维护（Maintainable）：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护；<br>（4）可测试（Testable）：因为每个组件都是独立的，那么对于各个组件分别测试显然要比对于整个UI进行测试容易的多。 <h3 id="建议大型可复用组件的开发步骤"><a href="#建议大型可复用组件的开发步骤" class="headerlink" title="建议大型可复用组件的开发步骤"></a>建议大型可复用组件的开发步骤</h3></li>
<li>先按具体做出一个Demo组件，组件内的一些变化的值(将来要作为props提供的)用一个对象提供</li>
<li>对象定义好后const取出对象内部属性值，在return的内容中使用</li>
<li>及时修改不合理的props,若组件过于复杂需进一步拆分组件</li>
<li>在父组件中使用此组件，提供对象相同的一些props属性</li>
<li>将const来源替换成props，并为组件定义propTypes <h4 id="tips"><a href="#tips" class="headerlink" title="tips"></a>tips</h4>button+复杂modal(含子内容)肯定是要拆分的</li>
</ol>
</li>
</ol>
]]></content>
</entry>
<entry>
<title>React技术栈简介</title>
<url>/2017/08/16/front-end/React/TechStack/ReactTechnologyStack/</url>
<content><![CDATA[<p>项目所用到的React技术栈如下:</p>
<ol>
<li>语法: React语法、ES6语法、Less语法</li>
<li>相关lib: React、Dva、react-router、redux、redux-saga、Mock.js、ant-design</li>
<li>工具：Webpack、webpack-dev-server、roadhog、Bable、dva-cli<a id="more"></a>
<h2 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h2>React语法： jsx语法，就是在js中写html代码<br>ES6语法: 即ES2015，增加一些新特性，如箭头函数、class继承(语法糖)、Generator函数等<br>Less语法: 用于css的编写，LESS将CSS赋予了动态语言的特性，如变量、继承、运算、函数。LESS既可以在客户端上运行(支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行，点击查看<a href="http://www.bootcss.com/p/lesscss/#about" target="_blank" rel="noopener">less语法简介</a><h2 id="相关lib"><a href="#相关lib" class="headerlink" title="相关lib"></a>相关lib</h2><h3 id="React"><a href="#React" class="headerlink" title="React"></a>React</h3>官方对React的定义为用于构建用户界面的js库。利用官方提供的组件生命周期钩子函数设计不同功能不同外观的可复用组件，界面由数据驱动，不用自己再重写了。<br>react主要特点：</li>
<li>组件化</li>
<li>高效DOM操作，Virtual DOM机制，Diff算法</li>
<li>单项数据流(Model->View)</li>
<li>组件生命周期</li>
<li>声明式UI设计 <a href="http://www.oschina.net/news/41789/imperative-vs-declarative" target="_blank" rel="noopener">声明式编程和命令式编程的比较</a></li>
</ol>
<h3 id="react-router"><a href="#react-router" class="headerlink" title="react-router"></a>react-router</h3><p>React只解决了数据与界面的关联问题，对于一个单页面程序，路由必不可少，react-router主要用于界面路由，页面的跳转<br>分为HashRouter、BrowserRouter</p>
<h3 id="redux"><a href="#redux" class="headerlink" title="redux"></a>redux</h3><p>React的组件间通信规则基本如下:<br>父到子: 通过传给子组件的props传递数据<br>子到父: 通过父组件提供的回调函数传递数据<br>兄弟组件: 用父组件作为媒介通信<br>可以看出，当一个界面较为复杂，组件间嵌套层级深时，组件间数据传递非常困难，所以官方提供了redux库来进行大项目中的数据分发。基本原理与flux相同</p>
<h3 id="redux-saga"><a href="#redux-saga" class="headerlink" title="redux-saga"></a>redux-saga</h3><p>redux的异步解决方案</p>
<h3 id="Dva"><a href="#Dva" class="headerlink" title="Dva"></a>Dva</h3><p>基于 redux、redux-saga 和 react-router 的轻量级前端框架。</p>
<h3 id="Mock-js"><a href="#Mock-js" class="headerlink" title="Mock.js"></a>Mock.js</h3><p>用于数据的mock，伪造一些数据供前端测试，下面示例造了一个含20条数据的数组<br><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> usersListData = Mock.mock({</span><br><span class="line"> <span class="string">'data|20'</span>: [</span><br><span class="line"> {</span><br><span class="line"> <span class="string">'id|+1'</span>: <span class="number">0</span>,</span><br><span class="line"> tstamp: Random.datetime(<span class="string">'yyyy-MM-dd HH:mm:ss'</span>),</span><br><span class="line"> ip: <span class="string">'@ip'</span>,</span><br><span class="line"> target_name: <span class="string">'@cname'</span>,</span><br><span class="line"> <span class="string">'system_type|1'</span>: [<span class="string">'Android'</span>, <span class="string">'ios'</span>, <span class="string">'windows'</span>],</span><br><span class="line"> link: <span class="string">'@url'</span>,</span><br><span class="line"> },</span><br><span class="line"> ],</span><br><span class="line">})</span><br></pre></td></tr></table></figure></p>
<h3 id="ant-design"><a href="#ant-design" class="headerlink" title="ant-design"></a>ant-design</h3><p>蚂蚁金服提供的React组件库，包含了大部分日常前端开发的常见组件，设计简洁，开箱即用</p>
<h2 id="工具"><a href="#工具" class="headerlink" title="工具"></a>工具</h2><h3 id="Bable"><a href="#Bable" class="headerlink" title="Bable"></a>Bable</h3><p>浏览器对ES6的支持不全，且不能识别React语法写得程序，造成写好的程序在浏览器无法成功运行。<br>为了让我们提前用上浏览器的新特性切不用考虑浏览器支持的问题，babel就诞生了。<br>babel使用相关的preset插件对我们的文件进行预处理，使之能够被浏览器识别</p>
<p>babel-cli和babel-core:<br> 如果你想要在CLI(终端或REPL)使用babel就下载babel-cli，如果想要在node中使用就下载babel-core。<br>最常用的babel preset插件:<br> babel-preset-react: 预处理react语法<br> babel-preset-es2015: 预处理ES6语法<br> babel-preset-stage-0： 预处理ES7语法 </p>
<h3 id="Webpack"><a href="#Webpack" class="headerlink" title="Webpack"></a>Webpack</h3><p>webpack是一个前端模块化构建工具，它能把整个工程通过用户配置的module resolver进行预处理并输出。<br>官方介绍如下:</p>
<blockquote>
<p>webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成少量的 bundle - 通常只有一个，由浏览器加载。<br>它是高度可配置的，但是，在开始前你需要先理解四个核心概念：入口(entry)、输出(output)、loader、插件(plugins)。<br>一个简单的react+babel+webpack的示例:<br><a href="https://github.com/vonxq/react-hello-world" target="_blank" rel="noopener">react-hello-world</a></p>
</blockquote>
<h3 id="webpack-dev-server"><a href="#webpack-dev-server" class="headerlink" title="webpack-dev-server"></a>webpack-dev-server</h3><p>webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack的包,除此自外，它还有一个通过Sock.js来连接到服务器的微型运行时。<br><a href="https://segmentfault.com/a/1190000006964335" target="_blank" rel="noopener">详解webpack-dev-server的使用</a></p>
<h3 id="dva-cli"><a href="#dva-cli" class="headerlink" title="dva-cli"></a>dva-cli</h3><p>dva官方提供的一个命令行工具，用于快速构建一个dva程序，使用户不用为项目环境的搭建费心。</p>
<h3 id="roadhog"><a href="#roadhog" class="headerlink" title="roadhog"></a>roadhog</h3><p>用json格式进行配置的cli工具,提供了mock功能，可配置webpack(有些接口未开放)<br>官方介绍如下:</p>
<blockquote>
<p>roadhog 是一个 cli 工具，提供 server、 build 和 test 三个命令，分别用于本地调试和构建，并且提供了特别易用的 mock 功能。命令行体验和 create-react-app 一致，配置略有不同，比如默认开启 css modules，然后还提供了 JSON 格式的配置方式。<br>本地开发:<br>$ roadhog server<br>打包发布:<br>$ roadhog build<br>测试，默认会跑 ./test 目录下的所有文件:<br>$ roadhog test</p>
</blockquote>
]]></content>
<categories>
<category>Front-end</category>
<category>React</category>
</categories>
<tags>
<tag>React</tag>
</tags>
</entry>
<entry>
<title>项目源码分析</title>
<url>/2017/08/15/front-end/React/Practice/code%20analyze/</url>
<content><![CDATA[<p>本文主要对项目源码的构成做一个简要分析，同时也通过实战在此基础上体验一下一个完整工程的实现过程<br><a id="more"></a><br>软件架构借鉴了<a href="https://github.com/zuiidea/antd-admin" target="_blank" rel="noopener">antd-admin</a></p>
<h1 id="开发步骤："><a href="#开发步骤：" class="headerlink" title="开发步骤："></a>开发步骤：</h1><ol>
<li>到router添加path</li>
<li>menu.js中加入本条路由信息</li>
<li>新建model（state、reducer等）和routers（组件，页面显示信息，dispatch）</li>
<li>mock.js模拟数据<br> 4.1 mock输出在rodhog（配置信息，不用修改）<br> 4.2 mock引用在index.js（不用管）<br> 4.3 在utils/api.js中定义变量，设置其操作组件页面所在文件夹（？），并export<br> 4.4 在mock中建立同名文件，引用api，定义输出数据格式（与index的dataIndex一一对应）<br> 4.5 在页面的index.js中导入api，使用api完成组件导出</li>
<li>调试查错</li>
<li>npm run lint检查代码错误</li>
<li>commit代码(加上 <a href="https://jira.b.360.cn/browse/ICG-332?bug%3F%3F%3F" target="_blank" rel="noopener">https://jira.b.360.cn/browse/ICG-332?bug%3F%3F%3F</a> 的bug号)</li>
<li>可能需要在jira上log？<h1 id="目录结构"><a href="#目录结构" class="headerlink" title="目录结构"></a>目录结构</h1>// 目录树摘自<a href="https://github.com/zuiidea/antd-admin" target="_blank" rel="noopener">antd-admin</a><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">├── /dist/ <span class="comment"># 项目输出目录</span></span><br><span class="line">├── /src/ <span class="comment"># 项目源码目录</span></span><br><span class="line">│ ├── /components/ <span class="comment"># UI组件及UI相关方法</span></span><br><span class="line">│ │ ├── skin.less <span class="comment"># 全局样式</span></span><br><span class="line">│ │ └── vars.less <span class="comment"># 全局样式变量</span></span><br><span class="line">│ ├── /routes/ <span class="comment"># 路由组件</span></span><br><span class="line">│ │ └── app.js <span class="comment"># 路由入口</span></span><br><span class="line">│ ├── /models/ <span class="comment"># 数据模型</span></span><br><span class="line">│ ├── /services/ <span class="comment"># 数据接口</span></span><br><span class="line">│ ├── /themes/ <span class="comment"># 项目样式</span></span><br><span class="line">│ ├── /mock/ <span class="comment"># 数据mock</span></span><br><span class="line">│ ├── /utils/ <span class="comment"># 工具函数</span></span><br><span class="line">│ │ ├── config.js <span class="comment"># 项目常规配置</span></span><br><span class="line">│ │ ├── menu.js <span class="comment"># 菜单及面包屑配置</span></span><br><span class="line">│ │ ├── config.js <span class="comment"># 项目常规配置</span></span><br><span class="line">│ │ ├── request.js <span class="comment"># 异步请求函数</span></span><br><span class="line">│ │ └── theme.js <span class="comment"># 项目需要在js中使用到样式变量</span></span><br><span class="line">│ ├── route.js <span class="comment"># 路由配置</span></span><br><span class="line">│ ├── index.js <span class="comment"># 入口文件</span></span><br><span class="line">│ └── index.html </span><br><span class="line">├── package.json <span class="comment"># 项目信息</span></span><br><span class="line">├── .eslintrc <span class="comment"># Eslint配置</span></span><br><span class="line">└── .roadhogrc.js <span class="comment"># roadhog配置</span></span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="src"><a href="#src" class="headerlink" title="src"></a>src</h2><h3 id="Index-html"><a href="#Index-html" class="headerlink" title="Index.html"></a>Index.html</h3><p>主页面</p>
<h3 id="Index-js"><a href="#Index-js" class="headerlink" title="Index.js"></a>Index.js</h3><ol>
<li>工程入口文件</li>
<li>初始化</li>
<li>设置model</li>
<li>设置router</li>
<li>Start</li>
</ol>
<h3 id="router-js"><a href="#router-js" class="headerlink" title="router.js"></a>router.js</h3><ol>
<li>路由配置文件，导出一个Router组件</li>
<li>Path与页面一一对应</li>
<li>指定webpack需加载的依赖文件</li>
<li>注册model</li>
<li>指定path指向页面</li>
<li>Route分级，childRoutes</li>
</ol>
<h3 id="Routes"><a href="#Routes" class="headerlink" title="Routes"></a>Routes</h3><ol>
<li>app.js为整体界面路由入口，menu为siderProps、breadProps、tabProps的props</li>
<li>各文件夹为各界面组件</li>
</ol>
<h3 id="Components"><a href="#Components" class="headerlink" title="Components"></a>Components</h3><p>通用组件</p>
<h4 id="Common"><a href="#Common" class="headerlink" title="Common"></a>Common</h4><p>通过index.js集中导入并导出组件</p>
<h5 id="Layout为布局组件"><a href="#Layout为布局组件" class="headerlink" title="Layout为布局组件"></a>Layout为布局组件</h5><p>header、sider、Tab等等等等！！！！布局学习重点</p>
<h4 id="specific"><a href="#specific" class="headerlink" title="specific"></a>specific</h4><p>一些界面专用组件</p>
<h3 id="Mock"><a href="#Mock" class="headerlink" title="Mock"></a>Mock</h3><p>各页面mock数据，简单后台逻辑</p>
<h3 id="Models"><a href="#Models" class="headerlink" title="Models"></a>Models</h3><p>各页面model组件，<br>dva 通过 model 的概念把一个领域的模型管理起来，包含同步更新 state 的 reducers，处理异步逻辑的 effects，订阅数据源的 subscriptions 。</p>
<h4 id="modal数据解析"><a href="#modal数据解析" class="headerlink" title="modal数据解析"></a>modal数据解析</h4><p>这个 model 里：</p>
<ol>
<li>namespace 表示在全局 state 上的 key</li>
<li>state 是初始值</li>
<li>subscriptions是一些</li>
<li>effects是一些异步处理逻辑，用生成函数写，yeild语句，和action相互触发（action的type名和effects函数名相同？）</li>
<li>reducers 等同于 redux 里的 reducer，接收 action，同步更新 state（action的type名和reducers函数名相同？）</li>
<li>connect的model由router.js传入？？？？？？？？？？？？？？<br>触发：<br>通过已经connect的组件dispatch相关action实现</li>
</ol>
<h3 id="Services"><a href="#Services" class="headerlink" title="Services"></a>Services</h3><ol>
<li>一些异步请求工具函数，按作用分类</li>
</ol>
<h3 id="Themes"><a href="#Themes" class="headerlink" title="Themes"></a>Themes</h3><p>主题</p>
<h3 id="Utils"><a href="#Utils" class="headerlink" title="Utils"></a>Utils</h3><p>api为整个工程各组件API配置<br>request通用工具函数<br>menu.js左侧栏显示信息及路由配置<br>config.js配置<br>theme.js样式变量<br>Locale</p>
<h1 id="开发思路梳理"><a href="#开发思路梳理" class="headerlink" title="开发思路梳理"></a>开发思路梳理</h1><h2 id="建立目录树"><a href="#建立目录树" class="headerlink" title="建立目录树"></a>建立目录树</h2><h2 id="dva初始化"><a href="#dva初始化" class="headerlink" title="dva初始化"></a>dva初始化</h2><p>在程序入口文件引入model和router,初始化并渲染dva<br><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="string">'./index.html'</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">'babel-polyfill'</span></span><br><span class="line"><span class="keyword">import</span> dva <span class="keyword">from</span> <span class="string">'dva'</span></span><br><span class="line"><span class="keyword">import</span> createLoading <span class="keyword">from</span> <span class="string">'dva-loading'</span></span><br><span class="line"><span class="keyword">import</span> { browserHistory } <span class="keyword">from</span> <span class="string">'dva/router'</span></span><br><span class="line"><span class="keyword">import</span> { message } <span class="keyword">from</span> <span class="string">'antd'</span></span><br><span class="line"><span class="comment">/* 1. Initialize</span></span><br><span class="line"><span class="comment">返回dva实例，opt包括history、hook函数、初始化state</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">const</span> app = dva({</span><br><span class="line"><span class="comment">// 自动加载dva插件？？一般用法app.use(createLoading(opt))</span></span><br><span class="line"><span class="comment">// 不理解...</span></span><br><span class="line"> ...createLoading({</span><br><span class="line"> effects: <span class="literal">true</span>,</span><br><span class="line"> }),</span><br><span class="line"> history: browserHistory,</span><br><span class="line"> onError (error) {</span><br><span class="line"> message.error(error.message)</span><br><span class="line"> },</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. Model，包括namespace、state、reducer、effect、subscriptions</span></span><br><span class="line"><span class="comment">// require提醒webpack预加载</span></span><br><span class="line">app.model(<span class="built_in">require</span>(<span class="string">'./models/app'</span>))</span><br><span class="line"></span><br><span class="line"><span class="comment">// 3. Router注册路由表</span></span><br><span class="line"><span class="comment">// 格式：app.router(({ history, app } => RouterConfig)</span></span><br><span class="line">app.router(<span class="built_in">require</span>(<span class="string">'./router'</span>))</span><br><span class="line"></span><br><span class="line"><span class="comment">// 4. Start</span></span><br><span class="line">app.start(<span class="string">'#root'</span>)</span><br></pre></td></tr></table></figure></p>
<h2 id="routers建立"><a href="#routers建立" class="headerlink" title="routers建立"></a>routers建立</h2><p>结合<a href="http://react-guide.github.io/react-router-cn/docs/API.html" target="_blank" rel="noopener">React官方文档-API</a>理解以下代码<br><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span></span><br><span class="line"><span class="keyword">import</span> PropTypes <span class="keyword">from</span> <span class="string">'prop-types'</span></span><br><span class="line"><span class="keyword">import</span> { Router } <span class="keyword">from</span> <span class="string">'dva/router'</span></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">'./routes/app'</span></span><br><span class="line"><span class="keyword">const</span> registerModel = <span class="function">(<span class="params">app, model</span>) =></span> {</span><br><span class="line"> <span class="keyword">if</span> (!(app._models.filter(<span class="function"><span class="params">m</span> =></span> m.namespace === model.namespace).length === <span class="number">1</span>)) {</span><br><span class="line"> app.model(model)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> Routers = <span class="function"><span class="keyword">function</span> (<span class="params">{ history, app }</span>) </span>{</span><br><span class="line"> <span class="keyword">const</span> routes = [</span><br><span class="line"> {</span><br><span class="line"> path: <span class="string">'/'</span>,</span><br><span class="line"> component: App,</span><br><span class="line"> <span class="comment">// 指定主目录</span></span><br><span class="line"> getIndexRoute (nextState, cb) {</span><br><span class="line"> <span class="comment">// webpack commonjs异步加载语法</span></span><br><span class="line"> <span class="built_in">require</span>.ensure([], (<span class="built_in">require</span>) => {</span><br><span class="line"> registerModel(app, <span class="built_in">require</span>(<span class="string">'./models/dashboard'</span>))</span><br><span class="line"> cb(<span class="literal">null</span>, { <span class="attr">component</span>: <span class="built_in">require</span>(<span class="string">'./routes/dashboard/'</span>) })</span><br><span class="line"> }, <span class="string">'dashboard'</span>)</span><br><span class="line"> },</span><br><span class="line"> childRoutes: [</span><br><span class="line"> {</span><br><span class="line"> path: <span class="string">'chart/lineChart'</span>,</span><br><span class="line"> getComponent (nextState, cb) {</span><br><span class="line"> <span class="built_in">require</span>.ensure([], (<span class="built_in">require</span>) => {</span><br><span class="line"> cb(<span class="literal">null</span>, <span class="built_in">require</span>(<span class="string">'./routes/chart/lineChart/'</span>))</span><br><span class="line"> }, <span class="string">'chart-lineChart'</span>)</span><br><span class="line"> },</span><br><span class="line"> }, {</span><br><span class="line"> <span class="comment">// 通配符，贪婪匹配，只能放最后（不然可能覆盖所有匹配）</span></span><br><span class="line"> path: <span class="string">'*'</span>,</span><br><span class="line"> getComponent (nextState, cb) {</span><br><span class="line"> <span class="built_in">require</span>.ensure([], (<span class="built_in">require</span>) => {</span><br><span class="line"> cb(<span class="literal">null</span>, <span class="built_in">require</span>(<span class="string">'./routes/error/'</span>))</span><br><span class="line"> }, <span class="string">'error'</span>)</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> ],</span><br><span class="line"> },</span><br><span class="line"> ]</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> <span class="xml"><span class="tag"><<span class="name">Router</span> <span class="attr">history</span>=<span class="string">{history}</span> <span class="attr">routes</span>=<span class="string">{routes}</span> /></span></span></span><br><span class="line"><span class="xml">}</span></span><br><span class="line"></span><br><span class="line"><span class="xml">Routers.propTypes = {</span></span><br><span class="line"><span class="xml"> history: PropTypes.object,</span></span><br><span class="line"><span class="xml"> app: PropTypes.object,</span></span><br><span class="line"><span class="xml">}</span></span><br><span class="line"></span><br><span class="line"><span class="xml">export default Routers</span></span><br></pre></td></tr></table></figure></p>
<h2 id="主页面设计"><a href="#主页面设计" class="headerlink" title="主页面设计"></a>主页面设计</h2><p><img src="http://res.cloudinary.com/dqvk5dpno/image/upload/v1503041432/Image_3_xulctd.png" alt="dva对象属性"></p>
<h3 id="app-js"><a href="#app-js" class="headerlink" title="app.js"></a>app.js</h3><p>以下为app.js设计，类似于搭积木讲页面各个模块(sider、header、Tab…)摆在同一界面</p>
<blockquote>
<p>// FIXME: </p>
<ol>
<li>界面是如何布局的，各文件单独设置还是一起？</li>
<li>界面内多个组件的通信通过app Model联系在一起，组件均为无状态组件，设计方式可以多学习学习</li>
</ol>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span></span><br><span class="line"><span class="keyword">import</span> PropTypes <span class="keyword">from</span> <span class="string">'prop-types'</span></span><br><span class="line"><span class="keyword">import</span> { connect } <span class="keyword">from</span> <span class="string">'dva'</span></span><br><span class="line"><span class="keyword">import</span> { Common } <span class="keyword">from</span> <span class="string">'../components'</span></span><br><span class="line"><span class="keyword">import</span> { classnames, config, menu } <span class="keyword">from</span> <span class="string">'../utils'</span></span><br><span class="line"><span class="keyword">import</span> { Helmet } <span class="keyword">from</span> <span class="string">'react-helmet'</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">'../themes/index.less'</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">'./app.less'</span></span><br><span class="line"><span class="keyword">import</span> NProgress <span class="keyword">from</span> <span class="string">'nprogress'</span></span><br><span class="line"><span class="keyword">const</span> { prefix } = config</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> { Header, Bread, Tab, Sider, styles } = Common.Layout</span><br><span class="line"><span class="keyword">let</span> lastHref</span><br><span class="line"><span class="comment">// childern、location、dispatch怎么传的？？？</span></span><br><span class="line"><span class="comment">// 前两个可能来自router，dispatch和store有关系，但app什么时候绑定的store？</span></span><br><span class="line"><span class="comment">// app、loading通过connect传入model</span></span><br><span class="line"><span class="comment">//children为最终需显示的页面信息</span></span><br><span class="line"><span class="keyword">const</span> App = <span class="function">(<span class="params">{ children, location, dispatch, app, loading }</span>) =></span> {</span><br><span class="line"> <span class="keyword">const</span> { user, siderFold, darkTheme, isNavbar, menuPopoverVisible, navOpenKeys } = app</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> href = <span class="built_in">window</span>.location.href</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (lastHref !== href) {</span><br><span class="line"> NProgress.start()</span><br><span class="line"> <span class="keyword">if</span> (!loading.global) {</span><br><span class="line"> NProgress.done()</span><br><span class="line"> lastHref = href</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> headerProps = {</span><br><span class="line"> menu,</span><br><span class="line"> user,</span><br><span class="line"> siderFold,</span><br><span class="line"> location,</span><br><span class="line"> isNavbar,</span><br><span class="line"> menuPopoverVisible,</span><br><span class="line"> navOpenKeys,</span><br><span class="line"> switchMenuPopover () {</span><br><span class="line"> dispatch({ <span class="attr">type</span>: <span class="string">'app/switchMenuPopver'</span> })</span><br><span class="line"> },</span><br><span class="line"> logout () {</span><br><span class="line"> dispatch({ <span class="attr">type</span>: <span class="string">'app/logout'</span> })</span><br><span class="line"> },</span><br><span class="line"> switchSider () {</span><br><span class="line"> dispatch({ <span class="attr">type</span>: <span class="string">'app/switchSider'</span> })</span><br><span class="line"> },</span><br><span class="line"> changeOpenKeys (openKeys) {</span><br><span class="line"> dispatch({ <span class="attr">type</span>: <span class="string">'app/handleNavOpenKeys'</span>, <span class="attr">payload</span>: { <span class="attr">navOpenKeys</span>: openKeys } })</span><br><span class="line"> },</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> siderProps = {</span><br><span class="line"> menu,</span><br><span class="line"> siderFold,</span><br><span class="line"> darkTheme,</span><br><span class="line"> location,</span><br><span class="line"> navOpenKeys,</span><br><span class="line"> changeTheme () {</span><br><span class="line"> dispatch({ <span class="attr">type</span>: <span class="string">'app/switchTheme'</span> })</span><br><span class="line"> },</span><br><span class="line"> changeOpenKeys (openKeys) {</span><br><span class="line"> localStorage.setItem(<span class="string">`<span class="subst">${prefix}</span>navOpenKeys`</span>, <span class="built_in">JSON</span>.stringify(openKeys))</span><br><span class="line"> dispatch({ <span class="attr">type</span>: <span class="string">'app/handleNavOpenKeys'</span>, <span class="attr">payload</span>: { <span class="attr">navOpenKeys</span>: openKeys } })</span><br><span class="line"> },</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> breadProps = {</span><br><span class="line"> menu,</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">const</span> tabProps = {</span><br><span class="line"> menu,</span><br><span class="line"> children,</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">// config为一个工程配置对象，openPages为其一个属性，指定开始界面（本工程为/login）</span></span><br><span class="line"> <span class="comment">// 当且仅当对象属性存在且在router的location中已定义才能加载，此处为加载一个单一页面</span></span><br><span class="line"> <span class="keyword">if</span> (config.openPages && config.openPages.indexOf(location.pathname) > <span class="number">-1</span>) {</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <div></span><br><span class="line"> <Helmet></span><br><span class="line"> <title>网康科技<<span class="regexp">/title></span></span><br><span class="line"><span class="regexp"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /</span>></span><br><span class="line"> <link rel=<span class="string">"icon"</span> href={config.logoSrc} type=<span class="string">"image/x-icon"</span> /></span><br><span class="line"> <<span class="regexp">/Helmet></span></span><br><span class="line"><span class="regexp"> {children}</span></span><br><span class="line"><span class="regexp"> </</span>div></span><br><span class="line"> )</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> { iconFontJS, iconFontCSS } = config</span><br><span class="line"><span class="comment">// 更多时候加载的是一个单页面app，有导航等</span></span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <div></span><br><span class="line"> {<span class="comment">/*react-helmet这个可重复使用的组件将会管理所有更改的文档标题，包括文档题目，meta，link，样式，script，noscript和基础标签。*/</span>}</span><br><span class="line"> <Helmet></span><br><span class="line"> <title>网康科技<<span class="regexp">/title></span></span><br><span class="line"><span class="regexp"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /</span>></span><br><span class="line"> <link rel=<span class="string">"icon"</span> href={config.logoSrc} type=<span class="string">"image/x-icon"</span> /></span><br><span class="line"> {iconFontJS && <span class="xml"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">{iconFontJS}</span> /></span>}</span></span><br><span class="line"> {iconFontCSS && <link rel="stylesheet" href={iconFontCSS} />}</span><br><span class="line"><span class="xml"> <span class="tag"></<span class="name">Helmet</span>></span></span></span><br><span class="line"> <div className={classnames(styles.layout, { [styles.fold]: isNavbar ? false : siderFold }, { [styles.withnavbar]: isNavbar })}></span><br><span class="line"> {!isNavbar ? <aside className={classnames(styles.sider, { [styles.light]: !darkTheme })}></span><br><span class="line"> <Sider {...siderProps} /></span><br><span class="line"> </aside> : ''}</span><br><span class="line"> <Header {...headerProps} /></span><br><span class="line"> <div className={styles.main}></span><br><span class="line"> {/*此处的Tab是已经封装好的Tabs组件*/}</span><br><span class="line"> {config.tabMode ? <Tab {...tabProps} location={location} /> :</span><br><span class="line"> <div></span><br><span class="line"> <Bread {...breadProps} location={location} /></span><br><span class="line"> <div className={styles.container}></span><br><span class="line"> <div className={styles.content}></span><br><span class="line"> {children}</span><br><span class="line"> </div></span><br><span class="line"> </div></span><br><span class="line"> </div></span><br><span class="line"> }</span><br><span class="line"> {/* <Footer /> */}</span><br><span class="line"> </div></span><br><span class="line"> </div></span><br><span class="line"> </div></span><br><span class="line"> )</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">App.propTypes = {</span><br><span class="line"> children: PropTypes.element.isRequired,</span><br><span class="line"> location: PropTypes.object,</span><br><span class="line"> dispatch: PropTypes.func,</span><br><span class="line"> app: PropTypes.object,</span><br><span class="line"> loading: PropTypes.object,</span><br><span class="line">}</span><br><span class="line">// 如果说你的ui里面需要用到model里面的数据的话 那么就可以直接Connect将model里面的元素 当做props的方式 传递进来</span><br><span class="line">// 这里的app、loading都会model</span><br><span class="line">export default connect(({ app, loading }) => ({ app, loading }))(App)</span><br></pre></td></tr></table></figure>
<h3 id="Tab-js"><a href="#Tab-js" class="headerlink" title="Tab.js"></a>Tab.js</h3><p>完成主界面内容的加载与切换<br>以下为Tab组件设计：<br><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React, { PropTypes } <span class="keyword">from</span> <span class="string">'react'</span></span><br><span class="line"><span class="keyword">import</span> { Tabs, message } <span class="keyword">from</span> <span class="string">'antd'</span></span><br><span class="line"><span class="keyword">import</span> { Link } <span class="keyword">from</span> <span class="string">'dva/router'</span></span><br><span class="line"><span class="keyword">import</span> pathToRegexp <span class="keyword">from</span> <span class="string">'path-to-regexp'</span></span><br><span class="line"><span class="keyword">import</span> styles <span class="keyword">from</span> <span class="string">'./Tab.less'</span></span><br><span class="line"><span class="keyword">import</span> classnames <span class="keyword">from</span> <span class="string">'classnames'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> TabPane = Tabs.TabPane</span><br><span class="line"><span class="comment">// 一开始只有一个，动态地增删panes，pane的content为props传来的children，</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Tab</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>{</span><br><span class="line"> <span class="keyword">constructor</span> (props) {</span><br><span class="line"> <span class="keyword">super</span>(props)</span><br><span class="line"> <span class="keyword">const</span> current = <span class="keyword">this</span>.getCurrent(props)</span><br><span class="line"> <span class="keyword">const</span> panes = [</span><br><span class="line"> <span class="keyword">this</span>.genPane(current),</span><br><span class="line"> ]</span><br><span class="line"> <span class="keyword">this</span>.state = {</span><br><span class="line"> activeKey: panes[<span class="number">0</span>].key,</span><br><span class="line"> panes,</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> componentWillReceiveProps (nextProps) {</span><br><span class="line"> <span class="keyword">this</span>.update(nextProps)</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> onChange = <span class="function">(<span class="params">activeKey</span>) =></span> {</span><br><span class="line"> <span class="keyword">this</span>.setState({ activeKey })</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> onEdit = <span class="function">(<span class="params">targetKey, action</span>) =></span> {</span><br><span class="line"> <span class="keyword">this</span>[action](targetKey)</span><br><span class="line"> }</span><br><span class="line"> getCurrent (props) {</span><br><span class="line"> <span class="comment">// 匹配当前路由</span></span><br><span class="line"> <span class="keyword">let</span> current</span><br><span class="line"> <span class="keyword">const</span> menu = props.menu</span><br><span class="line"> <span class="keyword">const</span> pathname = props.location.pathname</span><br><span class="line"> <span class="keyword">const</span> children = props.children</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> index <span class="keyword">in</span> menu) {</span><br><span class="line"> <span class="keyword">if</span> (menu[index].router && pathToRegexp(menu[index].router).exec(pathname)) {</span><br><span class="line"> current = menu[index]</span><br><span class="line"> <span class="keyword">break</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (!current) {</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> router: <span class="string">'*'</span>,</span><br><span class="line"> icon: <span class="string">'error'</span>,</span><br><span class="line"> name: <span class="string">'error'</span>,</span><br><span class="line"> id: <span class="string">'error'</span>,</span><br><span class="line"> children,</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> { children, ...current }</span><br><span class="line"> }</span><br><span class="line"><span class="comment">// 加入一个pane到panes，panes.content即显示的children</span></span><br><span class="line"><span class="comment">// current由props得到={props.children,...menu数组中的当前页面值}</span></span><br><span class="line"><span class="comment">// genpan根据current（即此处props）得到当前pane信息(作为TabPane的配置信息，名字内容等)</span></span><br><span class="line"> genPane (props) {</span><br><span class="line"> <span class="keyword">return</span> { <span class="attr">title</span>: <span class="xml"><span class="tag"><<span class="name">Link</span> <span class="attr">to</span>=<span class="string">{props.router}</span>></span>{props.name}<span class="tag"></<span class="name">Link</span>></span></span>, <span class="attr">key</span>: props.id.toString(), <span class="attr">content</span>: props.children, <span class="attr">outer</span>: props.outer }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> update = <span class="function">(<span class="params">props</span>) =></span> {</span><br><span class="line"> <span class="keyword">const</span> panes = <span class="keyword">this</span>.state.panes</span><br><span class="line"> <span class="keyword">const</span> current = <span class="keyword">this</span>.getCurrent(props)</span><br><span class="line"> <span class="keyword">const</span> activeKey = current.id.toString()</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 当前key对应的tab是否已经在显示了?</span></span><br><span class="line"> <span class="keyword">let</span> exist = <span class="literal">false</span></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> pane <span class="keyword">of</span> panes) {</span><br><span class="line"> <span class="keyword">if</span> (pane.key === activeKey) {</span><br><span class="line"> exist = <span class="literal">true</span></span><br><span class="line"> <span class="keyword">break</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 如果key不存在就要新增一个tabPane</span></span><br><span class="line"> <span class="keyword">if</span> (!exist) {</span><br><span class="line"> panes.push(<span class="keyword">this</span>.genPane(current))</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">this</span>.setState({ panes, activeKey })</span><br><span class="line"> }</span><br><span class="line"> add = <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">const</span> panes = <span class="keyword">this</span>.state.panes</span><br><span class="line"> <span class="keyword">const</span> current = <span class="keyword">this</span>.getCurrent(<span class="keyword">this</span>.props)</span><br><span class="line"> <span class="keyword">const</span> activeKey = current.id.toString()</span><br><span class="line"> <span class="comment">// 当前key对应的tab是否已经在显示了?</span></span><br><span class="line"> <span class="keyword">let</span> exist = <span class="literal">false</span></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> pane <span class="keyword">of</span> panes) {</span><br><span class="line"> <span class="keyword">if</span> (pane.key === activeKey) {</span><br><span class="line"> exist = <span class="literal">true</span></span><br><span class="line"> <span class="keyword">break</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 如果key不存在就要新增一个tabPane</span></span><br><span class="line"> <span class="keyword">if</span> (!exist) {</span><br><span class="line"> panes.push(<span class="keyword">this</span>.genPane(current))</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">this</span>.setState({ panes, activeKey })</span><br><span class="line"> }</span><br><span class="line"> remove = <span class="function">(<span class="params">targetKey</span>) =></span> {</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">this</span>.state.panes.length <= <span class="number">1</span>) {</span><br><span class="line"> message.warning(<span class="string">'不能关闭最后一个标签'</span>)</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">let</span> activeKey = <span class="keyword">this</span>.state.activeKey</span><br><span class="line"> <span class="keyword">let</span> targetIndex = <span class="number">0</span></span><br><span class="line"> <span class="keyword">this</span>.state.panes.forEach(<span class="function">(<span class="params">pane, i</span>) =></span> {</span><br><span class="line"> <span class="keyword">if</span> (pane.key === targetKey) {</span><br><span class="line"> targetIndex = i</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"> <span class="keyword">const</span> panes = <span class="keyword">this</span>.state.panes.filter(<span class="function"><span class="params">pane</span> =></span> pane.key !== targetKey)</span><br><span class="line"> <span class="keyword">if</span> (activeKey === targetKey) {</span><br><span class="line"> <span class="keyword">if</span> (targetIndex > <span class="number">0</span>) {</span><br><span class="line"> activeKey = panes[targetIndex - <span class="number">1</span>].key</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> activeKey = panes[targetIndex].key</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">this</span>.setState({ panes, activeKey })</span><br><span class="line"> }</span><br><span class="line"> render () {</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <div className={styles.tab}></span><br><span class="line"> <Tabs</span><br><span class="line"> animated={<span class="literal">false</span>}</span><br><span class="line"> hideAdd</span><br><span class="line"> onChange={<span class="keyword">this</span>.onChange}</span><br><span class="line"> activeKey={<span class="keyword">this</span>.state.activeKey}</span><br><span class="line"> type=<span class="string">"editable-card"</span></span><br><span class="line"> onEdit={<span class="keyword">this</span>.onEdit}</span><br><span class="line"> ></span><br><span class="line"> {<span class="keyword">this</span>.state.panes.map(<span class="function"><span class="params">pane</span> =></span> <span class="xml"><span class="tag"><<span class="name">TabPane</span> <span class="attr">tab</span>=<span class="string">{pane.title}</span> <span class="attr">key</span>=<span class="string">{pane.key}</span> ></span><span class="tag"><<span class="name">div</span> <span class="attr">className</span>=<span class="string">{classnames({</span> '<span class="attr">content-inner</span>'<span class="attr">:</span> !<span class="attr">pane.outer</span> })}></span>{pane.content}<span class="tag"></<span class="name">div</span>></span><span class="tag"></<span class="name">TabPane</span>></span></span>)}</span><br><span class="line"> <<span class="regexp">/Tabs></span></span><br><span class="line"><span class="regexp"> </</span>div></span><br><span class="line"> )</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">Tab.propTypes = {</span><br><span class="line"> menu: PropTypes.array,</span><br><span class="line"> location: PropTypes.object,</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> Tab</span><br></pre></td></tr></table></figure></p>
<h3 id="menu对象"><a href="#menu对象" class="headerlink" title="menu对象"></a>menu对象</h3><p>即Tab里用到的menu，由app.js导入并传入子组件，定义了menu内容,供Tab和Sider使用<br>Sider中使用的Menus组件其实就是一个Antd的Menu组件的封装<br><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = [</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">1</span>, <span class="attr">icon</span>: <span class="string">'laptop'</span>, <span class="attr">name</span>: <span class="string">'首页'</span>, <span class="attr">router</span>: <span class="string">'/dashboard'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">2</span>, <span class="attr">icon</span>: <span class="string">'user'</span>, <span class="attr">name</span>: <span class="string">'系统监控'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">201</span>, <span class="attr">bpid</span>: <span class="number">2</span>, <span class="attr">mpid</span>: <span class="number">2</span>, <span class="attr">name</span>: <span class="string">'网络活动'</span>, <span class="attr">router</span>: <span class="string">'/monitor/networkactivity'</span>, <span class="attr">outer</span>: <span class="literal">true</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">3</span>, <span class="attr">name</span>: <span class="string">'共享接入'</span>, <span class="attr">icon</span>: <span class="string">'api'</span>, <span class="attr">router</span>: <span class="string">'/request'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">4</span>, <span class="attr">name</span>: <span class="string">'全局配置'</span>, <span class="attr">icon</span>: <span class="string">'camera-o'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">401</span>, <span class="attr">bpid</span>: <span class="number">4</span>, <span class="attr">mpid</span>: <span class="number">4</span>, <span class="attr">name</span>: <span class="string">'iconfont'</span>, <span class="attr">icon</span>: <span class="string">'heart-o'</span>, <span class="attr">router</span>: <span class="string">'/UIElement/iconfont'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">402</span>, <span class="attr">bpid</span>: <span class="number">4</span>, <span class="attr">mpid</span>: <span class="number">4</span>, <span class="attr">name</span>: <span class="string">'DataTable'</span>, <span class="attr">icon</span>: <span class="string">'database'</span>, <span class="attr">router</span>: <span class="string">'/UIElement/dataTable'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">403</span>, <span class="attr">bpid</span>: <span class="number">4</span>, <span class="attr">mpid</span>: <span class="number">4</span>, <span class="attr">name</span>: <span class="string">'DropOption'</span>, <span class="attr">icon</span>: <span class="string">'bars'</span>, <span class="attr">router</span>: <span class="string">'/UIElement/dropOption'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">404</span>, <span class="attr">bpid</span>: <span class="number">4</span>, <span class="attr">mpid</span>: <span class="number">4</span>, <span class="attr">name</span>: <span class="string">'Search'</span>, <span class="attr">icon</span>: <span class="string">'search'</span>, <span class="attr">router</span>: <span class="string">'/UIElement/search'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">405</span>, <span class="attr">bpid</span>: <span class="number">4</span>, <span class="attr">mpid</span>: <span class="number">4</span>, <span class="attr">name</span>: <span class="string">'Editor'</span>, <span class="attr">icon</span>: <span class="string">'edit'</span>, <span class="attr">router</span>: <span class="string">'/UIElement/editor'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">406</span>, <span class="attr">bpid</span>: <span class="number">4</span>, <span class="attr">mpid</span>: <span class="number">4</span>, <span class="attr">name</span>: <span class="string">'layer (Function)'</span>, <span class="attr">icon</span>: <span class="string">'credit-card'</span>, <span class="attr">router</span>: <span class="string">'/UIElement/layer'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">407</span>, <span class="attr">bpid</span>: <span class="number">4</span>, <span class="attr">mpid</span>: <span class="number">4</span>, <span class="attr">name</span>: <span class="string">'对象配置'</span>, <span class="attr">icon</span>: <span class="string">'credit-card'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">40701</span>, <span class="attr">bpid</span>: <span class="number">407</span>, <span class="attr">mpid</span>: <span class="number">407</span>, <span class="attr">name</span>: <span class="string">'IP对象'</span>, <span class="attr">icon</span>: <span class="string">'credit-card'</span>, <span class="attr">router</span>: <span class="string">'/object/ip'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">40702</span>, <span class="attr">bpid</span>: <span class="number">407</span>, <span class="attr">mpid</span>: <span class="number">407</span>, <span class="attr">name</span>: <span class="string">'服务对象'</span>, <span class="attr">icon</span>: <span class="string">'credit-card'</span>, <span class="attr">router</span>: <span class="string">'/object/service'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">40703</span>, <span class="attr">bpid</span>: <span class="number">407</span>, <span class="attr">mpid</span>: <span class="number">407</span>, <span class="attr">name</span>: <span class="string">'时间对象'</span>, <span class="attr">icon</span>: <span class="string">'credit-card'</span>, <span class="attr">router</span>: <span class="string">'/object/time'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">5</span>, <span class="attr">name</span>: <span class="string">'SSL解密'</span>, <span class="attr">icon</span>: <span class="string">'code-o'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">501</span>, <span class="attr">bpid</span>: <span class="number">5</span>, <span class="attr">mpid</span>: <span class="number">5</span>, <span class="attr">name</span>: <span class="string">'LineChart'</span>, <span class="attr">icon</span>: <span class="string">'line-chart'</span>, <span class="attr">router</span>: <span class="string">'/chart/lineChart'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">502</span>, <span class="attr">bpid</span>: <span class="number">5</span>, <span class="attr">mpid</span>: <span class="number">5</span>, <span class="attr">name</span>: <span class="string">'BarChart'</span>, <span class="attr">icon</span>: <span class="string">'bar-chart'</span>, <span class="attr">router</span>: <span class="string">'/chart/barChart'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">503</span>, <span class="attr">bpid</span>: <span class="number">5</span>, <span class="attr">mpid</span>: <span class="number">5</span>, <span class="attr">name</span>: <span class="string">'AreaChart'</span>, <span class="attr">icon</span>: <span class="string">'area-chart'</span>, <span class="attr">router</span>: <span class="string">'/chart/areaChart'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">6</span>, <span class="attr">name</span>: <span class="string">'上网管理'</span>, <span class="attr">icon</span>: <span class="string">'setting'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">601</span>, <span class="attr">bpid</span>: <span class="number">6</span>, <span class="attr">mpid</span>: <span class="number">6</span>, <span class="attr">name</span>: <span class="string">'Test Navigation1'</span>, <span class="attr">router</span>: <span class="string">'/navigation/navigation1'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">602</span>, <span class="attr">bpid</span>: <span class="number">6</span>, <span class="attr">mpid</span>: <span class="number">6</span>, <span class="attr">name</span>: <span class="string">'Test Navigation2'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">60201</span>, <span class="attr">bpid</span>: <span class="number">602</span>, <span class="attr">mpid</span>: <span class="number">602</span>, <span class="attr">name</span>: <span class="string">'Test Navigation21'</span>, <span class="attr">router</span>: <span class="string">'/navigation/navigation2/navigation1'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">60202</span>, <span class="attr">bpid</span>: <span class="number">602</span>, <span class="attr">mpid</span>: <span class="number">602</span>, <span class="attr">name</span>: <span class="string">'Test Navigation22'</span>, <span class="attr">router</span>: <span class="string">'/navigation/navigation2/navigation2'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">7</span>, <span class="attr">name</span>: <span class="string">'流量管理'</span>, <span class="attr">icon</span>: <span class="string">'setting'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">8</span>, <span class="attr">name</span>: <span class="string">'防火墙'</span>, <span class="attr">icon</span>: <span class="string">'setting'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">801</span>, <span class="attr">bpid</span>: <span class="number">8</span>, <span class="attr">mpid</span>: <span class="number">8</span>, <span class="attr">name</span>: <span class="string">'ACL规则'</span>, <span class="attr">router</span>: <span class="string">'/firewall/aclrule'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">802</span>, <span class="attr">bpid</span>: <span class="number">8</span>, <span class="attr">mpid</span>: <span class="number">8</span>, <span class="attr">name</span>: <span class="string">'NAT规则'</span>, <span class="attr">router</span>: <span class="string">'/firewall/natproxy'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">803</span>, <span class="attr">bpid</span>: <span class="number">8</span>, <span class="attr">mpid</span>: <span class="number">8</span>, <span class="attr">name</span>: <span class="string">'端口映射'</span>, <span class="attr">router</span>: <span class="string">'/firewall/portmapping'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">9</span>, <span class="attr">name</span>: <span class="string">'用户管理'</span>, <span class="attr">icon</span>: <span class="string">'setting'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">10</span>, <span class="attr">name</span>: <span class="string">'网络配置'</span>, <span class="attr">icon</span>: <span class="string">'setting'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">1001</span>, <span class="attr">bpid</span>: <span class="number">10</span>, <span class="attr">mpid</span>: <span class="number">10</span>, <span class="attr">name</span>: <span class="string">'网络模式'</span>, <span class="attr">router</span>: <span class="string">'/network/mode'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">1002</span>, <span class="attr">bpid</span>: <span class="number">10</span>, <span class="attr">mpid</span>: <span class="number">10</span>, <span class="attr">name</span>: <span class="string">'网口配置'</span>, <span class="attr">router</span>: <span class="string">'/network/port'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">1003</span>, <span class="attr">bpid</span>: <span class="number">10</span>, <span class="attr">mpid</span>: <span class="number">10</span>, <span class="attr">name</span>: <span class="string">'路由配置'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">100301</span>, <span class="attr">bpid</span>: <span class="number">1003</span>, <span class="attr">mpid</span>: <span class="number">1003</span>, <span class="attr">name</span>: <span class="string">'静态路由'</span>, <span class="attr">router</span>: <span class="string">'/network/staticrouting'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">100302</span>, <span class="attr">bpid</span>: <span class="number">1003</span>, <span class="attr">mpid</span>: <span class="number">1003</span>, <span class="attr">name</span>: <span class="string">'策略路由'</span>, <span class="attr">router</span>: <span class="string">'/network/policyrouting'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">1004</span>, <span class="attr">bpid</span>: <span class="number">10</span>, <span class="attr">mpid</span>: <span class="number">10</span>, <span class="attr">name</span>: <span class="string">'虚拟专用网络（VPN）'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">100401</span>, <span class="attr">bpid</span>: <span class="number">1004</span>, <span class="attr">mpid</span>: <span class="number">1004</span>, <span class="attr">name</span>: <span class="string">'隧道配置'</span>, <span class="attr">router</span>: <span class="string">'/network/vpn/tunnel'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">100402</span>, <span class="attr">bpid</span>: <span class="number">1004</span>, <span class="attr">mpid</span>: <span class="number">1004</span>, <span class="attr">name</span>: <span class="string">'隧道信息'</span>, <span class="attr">router</span>: <span class="string">'/network/vpn/tunnel-info'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">100403</span>, <span class="attr">bpid</span>: <span class="number">1004</span>, <span class="attr">mpid</span>: <span class="number">1004</span>, <span class="attr">name</span>: <span class="string">'证书管理'</span>, <span class="attr">router</span>: <span class="string">'/network/vpn/cert'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">1005</span>, <span class="attr">bpid</span>: <span class="number">10</span>, <span class="attr">mpid</span>: <span class="number">10</span>, <span class="attr">name</span>: <span class="string">'域名解析'</span>, <span class="attr">icon</span>: <span class="string">'setting'</span>, <span class="attr">router</span>: <span class="string">'/network/dns'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">11</span>, <span class="attr">name</span>: <span class="string">'日志查询'</span>, <span class="attr">icon</span>: <span class="string">'setting'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">1101</span>, <span class="attr">bpid</span>: <span class="number">11</span>, <span class="attr">mpid</span>: <span class="number">11</span>, <span class="attr">name</span>: <span class="string">'审计日志'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">110101</span>, <span class="attr">bpid</span>: <span class="number">1101</span>, <span class="attr">mpid</span>: <span class="number">1101</span>, <span class="attr">name</span>: <span class="string">'查询中心'</span>, <span class="attr">router</span>: <span class="string">'/log/query/querycenter'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">110102</span>, <span class="attr">bpid</span>: <span class="number">1101</span>, <span class="attr">mpid</span>: <span class="number">1101</span>, <span class="attr">name</span>: <span class="string">'用户查询'</span>, <span class="attr">router</span>: <span class="string">'/log/query/user'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">110103</span>, <span class="attr">bpid</span>: <span class="number">1101</span>, <span class="attr">mpid</span>: <span class="number">1101</span>, <span class="attr">name</span>: <span class="string">'网址访问'</span>, <span class="attr">router</span>: <span class="string">'/log/query/webvisit'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">110104</span>, <span class="attr">bpid</span>: <span class="number">1101</span>, <span class="attr">mpid</span>: <span class="number">1101</span>, <span class="attr">name</span>: <span class="string">'搜索关键字'</span>, <span class="attr">router</span>: <span class="string">'/log/query/searchkeywords'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">110105</span>, <span class="attr">bpid</span>: <span class="number">1101</span>, <span class="attr">mpid</span>: <span class="number">1101</span>, <span class="attr">name</span>: <span class="string">'论坛发帖'</span>, <span class="attr">router</span>: <span class="string">'/log/query/forumpost'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">110106</span>, <span class="attr">bpid</span>: <span class="number">1101</span>, <span class="attr">mpid</span>: <span class="number">1101</span>, <span class="attr">name</span>: <span class="string">'应用活动'</span>, <span class="attr">router</span>: <span class="string">'/log/query/appactivity'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">110107</span>, <span class="attr">bpid</span>: <span class="number">1101</span>, <span class="attr">mpid</span>: <span class="number">1101</span>, <span class="attr">name</span>: <span class="string">'邮件收发'</span>, <span class="attr">router</span>: <span class="string">'/log/query/email'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">110108</span>, <span class="attr">bpid</span>: <span class="number">1101</span>, <span class="attr">mpid</span>: <span class="number">1101</span>, <span class="attr">name</span>: <span class="string">'IM聊天'</span>, <span class="attr">router</span>: <span class="string">'/log/query/imchat'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">110109</span>, <span class="attr">bpid</span>: <span class="number">1101</span>, <span class="attr">mpid</span>: <span class="number">1101</span>, <span class="attr">name</span>: <span class="string">'上线记录'</span>, <span class="attr">router</span>: <span class="string">'/log/query/onlinerecord'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">110110</span>, <span class="attr">bpid</span>: <span class="number">1101</span>, <span class="attr">mpid</span>: <span class="number">1101</span>, <span class="attr">name</span>: <span class="string">'文件审计'</span>, <span class="attr">router</span>: <span class="string">'/log/query/fileaudit'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">110111</span>, <span class="attr">bpid</span>: <span class="number">1101</span>, <span class="attr">mpid</span>: <span class="number">1101</span>, <span class="attr">name</span>: <span class="string">'数据库审计'</span>, <span class="attr">router</span>: <span class="string">'/log/query/databaseaudit'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">110112</span>, <span class="attr">bpid</span>: <span class="number">1101</span>, <span class="attr">mpid</span>: <span class="number">1101</span>, <span class="attr">name</span>: <span class="string">'协议审计'</span>, <span class="attr">router</span>: <span class="string">'/log/query/protocolaudit'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">110113</span>, <span class="attr">bpid</span>: <span class="number">1101</span>, <span class="attr">mpid</span>: <span class="number">1101</span>, <span class="attr">name</span>: <span class="string">'告警记录'</span>, <span class="attr">router</span>: <span class="string">'/log/query/alarmrecord'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">110114</span>, <span class="attr">bpid</span>: <span class="number">1101</span>, <span class="attr">mpid</span>: <span class="number">1101</span>, <span class="attr">name</span>: <span class="string">'上网时长'</span>, <span class="attr">router</span>: <span class="string">'/log/query/surftime'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">110115</span>, <span class="attr">bpid</span>: <span class="number">1101</span>, <span class="attr">mpid</span>: <span class="number">1101</span>, <span class="attr">name</span>: <span class="string">'短信认证'</span>, <span class="attr">router</span>: <span class="string">'/log/query/smsauthentication'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">110116</span>, <span class="attr">bpid</span>: <span class="number">1101</span>, <span class="attr">mpid</span>: <span class="number">1101</span>, <span class="attr">name</span>: <span class="string">'页面推送'</span>, <span class="attr">router</span>: <span class="string">'/log/query/pagepush'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">110117</span>, <span class="attr">bpid</span>: <span class="number">1101</span>, <span class="attr">mpid</span>: <span class="number">1101</span>, <span class="attr">name</span>: <span class="string">'终端访问'</span>, <span class="attr">router</span>: <span class="string">'/log/query/terminalvisit'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">110118</span>, <span class="attr">bpid</span>: <span class="number">1101</span>, <span class="attr">mpid</span>: <span class="number">1101</span>, <span class="attr">name</span>: <span class="string">'App下载'</span>, <span class="attr">router</span>: <span class="string">'/log/query/appdownload'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">110119</span>, <span class="attr">bpid</span>: <span class="number">1101</span>, <span class="attr">mpid</span>: <span class="number">1101</span>, <span class="attr">name</span>: <span class="string">'360云安全防护日志'</span>, <span class="attr">router</span>: <span class="string">'/log/query/protectlog'</span> },</span><br><span class="line"></span><br><span class="line"> { <span class="attr">id</span>: <span class="number">1102</span>, <span class="attr">bpid</span>: <span class="number">11</span>, <span class="attr">mpid</span>: <span class="number">11</span>, <span class="attr">name</span>: <span class="string">'系统日志'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">110202</span>, <span class="attr">bpid</span>: <span class="number">1102</span>, <span class="attr">mpid</span>: <span class="number">1102</span>, <span class="attr">name</span>: <span class="string">'系统报警日志'</span>, <span class="attr">router</span>: <span class="string">'/log/system/alert'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">12</span>, <span class="attr">name</span>: <span class="string">'统计报表'</span>, <span class="attr">icon</span>: <span class="string">'setting'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">13</span>, <span class="attr">name</span>: <span class="string">'系统管理'</span>, <span class="attr">icon</span>: <span class="string">'setting'</span> },</span><br><span class="line">]</span><br></pre></td></tr></table></figure></p>
<h3 id="menus组件"><a href="#menus组件" class="headerlink" title="menus组件"></a>menus组件</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span></span><br><span class="line"><span class="keyword">import</span> PropTypes <span class="keyword">from</span> <span class="string">'prop-types'</span></span><br><span class="line"><span class="keyword">import</span> { Menu, Icon } <span class="keyword">from</span> <span class="string">'antd'</span></span><br><span class="line"><span class="keyword">import</span> { Link } <span class="keyword">from</span> <span class="string">'dva/router'</span></span><br><span class="line"><span class="keyword">import</span> { arrayToTree, queryArray } <span class="keyword">from</span> <span class="string">'../../../utils'</span></span><br><span class="line"><span class="keyword">import</span> pathToRegexp <span class="keyword">from</span> <span class="string">'path-to-regexp'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> Menus = <span class="function">(<span class="params">{ siderFold, darkTheme, location, handleClickNavMenu, navOpenKeys, changeOpenKeys, menu }</span>) =></span> {</span><br><span class="line"> <span class="comment">// 生成树状</span></span><br><span class="line"> <span class="keyword">const</span> menuTree = arrayToTree(menu.filter(<span class="function"><span class="params">_</span> =></span> _.mpid !== <span class="number">-1</span>), <span class="string">'id'</span>, <span class="string">'mpid'</span>)</span><br><span class="line"> <span class="keyword">const</span> levelMap = {}</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 递归生成菜单</span></span><br><span class="line"> <span class="keyword">const</span> getMenus = <span class="function">(<span class="params">menuTreeN, siderFoldN</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> menuTreeN.map(<span class="function">(<span class="params">item</span>) =></span> {</span><br><span class="line"> <span class="keyword">if</span> (item.children) {</span><br><span class="line"> <span class="keyword">if</span> (item.mpid) {</span><br><span class="line"> levelMap[item.id] = item.mpid</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <Menu.SubMenu</span><br><span class="line"> key={item.id}</span><br><span class="line"> title={<span></span><br><span class="line"> {item.icon && <span class="xml"><span class="tag"><<span class="name">Icon</span> <span class="attr">type</span>=<span class="string">{item.icon}</span> /></span>}</span></span><br><span class="line"><span class="xml"> {(!siderFoldN || menuTree.indexOf(item) <span class="tag">< <span class="attr">0</span>) && <span class="attr">item.name</span>}</span></span></span><br><span class="line"><span class="xml"> <span class="tag"></<span class="name">span</span>></span></span>}</span><br><span class="line"> ></span><br><span class="line"> {getMenus(item.children, siderFoldN)}</span><br><span class="line"> <<span class="regexp">/Menu.SubMenu></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"> return (</span></span><br><span class="line"><span class="regexp"> <Menu.Item key={item.id}></span></span><br><span class="line"><span class="regexp"> <Link to={item.router}></span></span><br><span class="line"><span class="regexp"> {item.icon && <Icon type={item.icon} /</span>>}</span><br><span class="line"> {(!siderFoldN || menuTree.indexOf(item) < <span class="number">0</span>) && item.name}</span><br><span class="line"> <<span class="regexp">/Link></span></span><br><span class="line"><span class="regexp"> </</span>Menu.Item></span><br><span class="line"> )</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">const</span> menuItems = getMenus(menuTree, siderFold)</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 保持选中</span></span><br><span class="line"> <span class="keyword">const</span> getAncestorKeys = <span class="function">(<span class="params">key</span>) =></span> {</span><br><span class="line"> <span class="keyword">let</span> map = {}</span><br><span class="line"> <span class="keyword">const</span> getParent = <span class="function">(<span class="params">index</span>) =></span> {</span><br><span class="line"> <span class="keyword">const</span> result = [<span class="built_in">String</span>(levelMap[index])]</span><br><span class="line"> <span class="keyword">if</span> (levelMap[result[<span class="number">0</span>]]) {</span><br><span class="line"> result.unshift(getParent(result[<span class="number">0</span>])[<span class="number">0</span>])</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> result</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> index <span class="keyword">in</span> levelMap) {</span><br><span class="line"> <span class="keyword">if</span> ({}.hasOwnProperty.call(levelMap, index)) {</span><br><span class="line"> map[index] = getParent(index)</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> map[key] || []</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> onOpenChange = <span class="function">(<span class="params">openKeys</span>) =></span> {</span><br><span class="line"> <span class="keyword">const</span> latestOpenKey = openKeys.find(<span class="function"><span class="params">key</span> =></span> !(navOpenKeys.indexOf(key) > <span class="number">-1</span>))</span><br><span class="line"> <span class="keyword">const</span> latestCloseKey = navOpenKeys.find(<span class="function"><span class="params">key</span> =></span> !(openKeys.indexOf(key) > <span class="number">-1</span>))</span><br><span class="line"> <span class="keyword">let</span> nextOpenKeys = []</span><br><span class="line"> <span class="keyword">if</span> (latestOpenKey) {</span><br><span class="line"> nextOpenKeys = getAncestorKeys(latestOpenKey).concat(latestOpenKey)</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (latestCloseKey) {</span><br><span class="line"> nextOpenKeys = getAncestorKeys(latestCloseKey)</span><br><span class="line"> }</span><br><span class="line"> changeOpenKeys(nextOpenKeys)</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">let</span> menuProps = !siderFold ? {</span><br><span class="line"> onOpenChange,</span><br><span class="line"> openKeys: navOpenKeys,</span><br><span class="line"> } : {}</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"> <span class="comment">// 寻找选中路由</span></span><br><span class="line"> <span class="keyword">let</span> currentMenu</span><br><span class="line"> <span class="keyword">let</span> defaultSelectedKeys</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> item <span class="keyword">of</span> menu) {</span><br><span class="line"> <span class="keyword">if</span> (item.router && pathToRegexp(item.router).exec(location.pathname)) {</span><br><span class="line"> currentMenu = item</span><br><span class="line"> <span class="keyword">break</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">const</span> getPathArray = <span class="function">(<span class="params">array, current, pid, id</span>) =></span> {</span><br><span class="line"> <span class="keyword">let</span> result = [<span class="built_in">String</span>(current[id])]</span><br><span class="line"> <span class="keyword">const</span> getPath = <span class="function">(<span class="params">item</span>) =></span> {</span><br><span class="line"> <span class="keyword">if</span> (item && item[pid]) {</span><br><span class="line"> result.unshift(<span class="built_in">String</span>(item[pid]))</span><br><span class="line"> getPath(queryArray(array, item[pid], id))</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> getPath(current)</span><br><span class="line"> <span class="keyword">return</span> result</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (currentMenu) {</span><br><span class="line"> defaultSelectedKeys = getPathArray(menu, currentMenu, <span class="string">'mpid'</span>, <span class="string">'id'</span>)</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <Menu</span><br><span class="line"> {...menuProps}</span><br><span class="line"> mode={siderFold ? <span class="string">'vertical'</span> : <span class="string">'inline'</span>}</span><br><span class="line"> theme={darkTheme ? <span class="string">'dark'</span> : <span class="string">'light'</span>}</span><br><span class="line"> onClick={handleClickNavMenu}</span><br><span class="line"> defaultSelectedKeys={defaultSelectedKeys}</span><br><span class="line"> ></span><br><span class="line"> {menuItems}</span><br><span class="line"> <<span class="regexp">/Menu></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></span><br><span class="line"><span class="regexp">Menus.propTypes = {</span></span><br><span class="line"><span class="regexp"> menu: PropTypes.array,</span></span><br><span class="line"><span class="regexp"> siderFold: PropTypes.bool,</span></span><br><span class="line"><span class="regexp"> darkTheme: PropTypes.bool,</span></span><br><span class="line"><span class="regexp"> location: PropTypes.object,</span></span><br><span class="line"><span class="regexp"> isNavbar: PropTypes.bool,</span></span><br><span class="line"><span class="regexp"> handleClickNavMenu: PropTypes.func,</span></span><br><span class="line"><span class="regexp"> navOpenKeys: PropTypes.array,</span></span><br><span class="line"><span class="regexp"> changeOpenKeys: PropTypes.func,</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">export default Menus</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>//FIXME<br>utils里的arrayToTree没看懂</p>
</blockquote>
]]></content>
<categories>
<category>Front-end</category>
<category>React</category>
<category>Practice</category>
</categories>
<tags>
<tag>React</tag>
</tags>
</entry>
<entry>
<title>工作中的常用软件使用</title>
<url>/2017/08/15/work/work/</url>
<content><![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>
<categories>
<category>Work</category>
</categories>
<tags>
<tag>Tool</tag>
</tags>
</entry>
<entry>
<title>react-router学习笔记(未完成整理)</title>
<url>/2017/08/14/front-end/React/TechStack/react-router/</url>
<content><![CDATA[<p><a href="http://react-guide.github.io/react-router-cn/docs/API.html" target="_blank" rel="noopener">React中文文档——API</a></p>
<h2 id="概念简介"><a href="#概念简介" class="headerlink" title="概念简介"></a>概念简介</h2><p><a href="http://www.jianshu.com/p/e3adc9b5f75c" target="_blank" rel="noopener">初探 React Router 4.0</a><br>上面链接详细讲解了React-router相关npm包的区别与联系</p>
<blockquote>
<p>react-router React Router 核心<br>react-router-dom 用于 DOM 绑定的 React Router(包含react-router)<br>react-router-native 用于 React Native 的 React Router<br>react-router-redux React Router 和 Redux 的集成<br>react-router-config 静态路由配置的小助手</p>
</blockquote>
<p>由上可知，若需要对dom操作，我们可以只导入react-router-dom<br>FIXME: dva使用的是ract-router，但<link> <browserrouter>这些组件也可以用,why???<br><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install --save react-router-dom</span><br></pre></td></tr></table></figure></browserrouter></p>
<h2 id="react-router内部组件介绍"><a href="#react-router内部组件介绍" class="headerlink" title="react-router内部组件介绍"></a>react-router内部组件介绍</h2><p>推荐<a href="http://www.ruanyifeng.com/blog/2016/05/react_router.html?utm_source=tool.lu" target="_blank" rel="noopener">阮一峰React-router教程</a>，简单明了介绍了ROUTER组件的用法及相关参数配置</p>
<h3 id="Router"><a href="#Router" class="headerlink" title="Router"></a>Router</h3><p>放置Route的容器，也可以嵌套其他组件，按序摆置，也可被嵌套进其他组件<br>要Routing的组件必须在Router中，可与Route同级也可包含route<br>示例：<hashrouter history="{hashHistory}"><br>History:Router 中有一个属性 history 的规则，这边使用我们使用 hashHistory，使用 routing 将由 hash（#）变化决定。例如：当使用者拜访 <a href="http://www.github.com/，实际看到的会是" target="_blank" rel="noopener">http://www.github.com/，实际看到的会是</a> <a href="http://www.github.com/#/。" target="_blank" rel="noopener">http://www.github.com/#/。</a><br> A. hashHistory会通过 hash 进行对应。好处是简单易用，不用多余设定。<br> B. browserHistory<br> 适用于伺服器端渲染，但需要设定伺服器端避免处理错误，这部份我们会在后面的章节详细说明。注意的是若是使用 Webpack 开发用伺服器需加上 –history-api-fallback<br> C. createMemoryHistory 主要用于伺服器渲染，使用上会建立一个存在记忆体的 history 物件，不会修改浏览器的网址位置。</hashrouter></p>
<h3 id="Route负责URL和对应的组件关系，可有多个"><a href="#Route负责URL和对应的组件关系，可有多个" class="headerlink" title="Route负责URL和对应的组件关系，可有多个"></a>Route负责URL和对应的组件关系，可有多个</h3><p>示例：<route path="/inbox" component="{Inbox}"><br>一般嵌套在Router中，也可嵌套于其他组件中，相当于添加到组件末端<br>path: Route的一个属性,是对应 URL 的规则。和Link组件的to属性中的路径相互对应<br>component:属性,指定此路由目的组件</route></p>
<h3 id="IndexRoute"><a href="#IndexRoute" class="headerlink" title="IndexRoute"></a>IndexRoute</h3><p>由于 / 情况下 App 组件对应的 this.props.children会是undefinded，所以使用 IndexRoute 来解决对应问题。这样当 URL 为 / 时将会对应到 Home 组件。不过要注意的是 IndexRoute 没有 path 属性。</p>
<h3 id="Link"><a href="#Link" class="headerlink" title="Link"></a>Link</h3><p>Link 组件主要用于点击后连接转换，可以想成是 <a> 超连接的 React 版本。若是希望当点击时候有对应的 css style，可以使用 activeStyle、activeClassName 去做设定。to属性用于指定链接地址</a></p>
<h3 id="IndexLink"><a href="#IndexLink" class="headerlink" title="IndexLink"></a>IndexLink</h3><p>IndexLink 主要是了处理 index 用途，特别注意当 child route actived 时，parent route 也会 actived。所以我们回首页的连接使用 <indexlink> 内部的 onlyActiveOnIndex 属性来解决这个问题。</indexlink></p>
<h3 id="Redirect、IndexRedirect"><a href="#Redirect、IndexRedirect" class="headerlink" title="Redirect、IndexRedirect"></a>Redirect、IndexRedirect</h3><p>这边虽然没有用到，但若读者有需要使用到连接跳转的话可以参考这两个组件，用法类似于 Route 和 IndexRedirect。</p>
<h2 id="组件间参数传递"><a href="#组件间参数传递" class="headerlink" title="组件间参数传递"></a>组件间参数传递</h2><p><a href="http://blog.csdn.net/qq_23158083/article/details/68488831" target="_blank" rel="noopener">react router页面传值的三种方法</a><br>tips: </p>
<blockquote>
<p>path对应router定义的components中可以取到this.props.location</p>
</blockquote>
<h2 id="组件使用实例"><a href="#组件使用实例" class="headerlink" title="组件使用实例"></a>组件使用实例</h2><h3 id="代码"><a href="#代码" class="headerlink" title="代码"></a>代码</h3><p><a href="https://github.com/vonxq/react-router-demo" target="_blank" rel="noopener">react-router-demo github仓库</a></p>
<h3 id="代码片段"><a href="#代码片段" class="headerlink" title="代码片段"></a>代码片段</h3><p>推荐<a href="http://www.ruanyifeng.com/blog/2016/05/react_router.html?utm_source=tool.lu" target="_blank" rel="noopener">阮一峰React-router教程</a>，简单明了介绍了ROUTER组件的用法及相关参数配置<br><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 组件本身可直接被渲染</span></span><br><span class="line"><span class="comment">// ROuter为容器，路由由Route定义，path可匹配通配符</span></span><br><span class="line"><span class="comment">// 路由嵌套1</span></span><br><span class="line"><Router history={hashHistory}></span><br><span class="line"> <Route path=<span class="string">"/"</span> component={App}></span><br><span class="line"> <Route path=<span class="string">"/repos"</span> component={Repos}/></span><br><span class="line"> <Route path=<span class="string">"/about"</span> component={About}/></span><br><span class="line"> <<span class="regexp">/Route></span></span><br><span class="line"><span class="regexp"></</span>Router></span><br><span class="line"><span class="comment">//路由嵌套2（在routes中传入）</span></span><br><span class="line"><span class="keyword">let</span> routes = <span class="xml"><span class="tag"><<span class="name">Route</span> <span class="attr">path</span>=<span class="string">"/"</span> <span class="attr">component</span>=<span class="string">{App}</span>></span></span></span><br><span class="line"> <Route path="/repos" component={Repos}/></span><br><span class="line"> <Route path="/about" component={About}/></span><br><span class="line"></Route>;</span><br><span class="line"><Router routes={routes} history={browserHistory}/></span><br><span class="line">// App定义，必须的</span><br><span class="line">export default React.createClass({</span><br><span class="line"> render() {</span><br><span class="line"> // this.props.children子组件</span><br><span class="line"> return <div></span><br><span class="line"> {this.props.children}</span><br><span class="line"> </div></span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure></p>
]]></content>
<categories>
<category>Front-end</category>
<category>React</category>
</categories>
<tags>
<tag>React</tag>
</tags>
</entry>
<entry>
<title>学习过程问题记录</title>
<url>/2017/08/14/front-end/React/record/ReactProject/</url>
<content><![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+WQSsBoYavCc37/IzCh9YA5CHHjfe08AglDP54yAKPrq6yDJkZkgm/dRzjfAU39BD7PwAbN2eesJ6THtmihAQ/hTbgjQz4jPjai1TkIBlsOPefitL/2oodq5qAWrl/3iEDOOja+CcqEUGK5ESYjq9gt06REMz9B+C+LLSyHkLkHinrGaHP0iXm1eRZl+nfq6BgwvaAa59l9jCsMfng+sS6zdQrW/4vlKipNfTsMuL2JJNjtQH3CUL3gCJPOsDOoA09JA4dMhpl2wDROKPln7RmrrFoxsdAVjmo3xqiPYACZ4B0f98wc2/i/RiGkhVp0ASdCXFo8tDCC1zEZIw0DZRROPMmhz4OloG2z3QCtT/G/jGVrrwjMQUNARJPZxP7LPI2QK/KZ13NzbWgQDcCX8fYvIM6MdSFqv61UOxBXYlK8Qe7SoxriBf2OD1/u/evX5fkDB8o0dHOB19VijmkJuofTskqo05wEJNV5EzRt0GPjpdCiYTiWqRXJIMP91uptrunBrv1w5SHpfPzOGpJcvlWsQWy2SzdyTfkwQGOlfFmiZ5l4ki2pewQ1nIv8XNSuPuLnrNA//bpG6dFXOECCGyDNrjRhXgxhgSs15XqGeMLpZzXPv1bG6aWPCTXUMjjpEQK/tbCvGW99L2Y5agrjymWVCO4ZxI25c2je1Rug0JaA0Cgru8ONN+pv0af3I53/io20AP3SYwaKrwhMDCMDcp43DV9tnq3hkugkM/81wtgz5OJ7kN99/XopMbkexBVakd4DD7jox21qMrL4wnT221vMRcLkOxRIHV3qttmdohZCSR4ICBEnPaBUawyLbYSkFSAjLjY9rRm83v635H9KDEXyVqpKueQBJ4xqUAp0fAELSK78HXmtEfXEVlB1ybChPzBVVLy7Uf7eoO0aIUeSOK4/27svixEJP8dp16oGQ1yDNG7VfddCamHAn1TvCI5xjdevTam3cPqOMpIuNBGNueIXNnBy8wSKMqfaMavzW3DbJqLtE8mFy6tE10FiVuSk9qw9HhPPnHtKMyfLHWkXczukqegR2cavOq8qh5Cs2gORLm90ivfIUurmYaxvqetZ5Vy+ALWGYnB8EbhEEaWWHQYmKwBR4XwzMJnSOdCRxE5zs5ufZKR/ePNa42SNBcDoR8R+dOe1KvoOQZBrMKQnj2yZTH2x7AAoIm8pU0DW5IujeAEWyQ0LdKuLrcYc06gBdYW7yVXwxHQxJ4YGW/DPG7tz8iN2qJ5L19m6r+GOxMFgtfyXKRGglLsMEhT2tv/q8BtClxMldK5esM2Q5j3ZfGdyZLDhnb//WhiOGzi4SBFTapcjPP03eOd6vwSu4+YDr7076GdWDdXwDey8yyOOF+BVeSu+sww9DEGxCLSzP8HlNas5cNfAMxDM4ZPlRt8VBdVrj8IQZ9cMeOxA/hQ8DA5a/DFzOTQer70bO8sgLED/Cr2OOiE3YopMNafomHW+JZNU0RLgmm0olC0M7DGnEAumFbKnNIUleX4a93arrTOW9GMD7AFzj8uNiLe8obR24IiiZrvkFPj6Q99+P0fICFC4gctiMSusBFopXTdabnG2ep3FKI0LQVTP59j8ZG3RZt4qpv3gmtiFmnSnHLQQL78I0hyYM8YS7ylNyHUAZ+mwsDNNvdY5Es+VNwiN20Kdzbk0fr+DsPgHpwGZGqQAIv30PNE68fxdLMZ55fl2kcs6TG7GyntdWLdAnn02QZ0T0Bd8EZmyZsbRcnbOl+eTdoZci1JPxwq1g2YA5wvETxtLJMQKYe9x2+e6HsOnVyRkP1cDOdYVrgp3CFFpinN9YF6cU8rsXvWCtjaq35WLAbqOwA7UL/Yr13jwux2KU5xeF9pBqnGlJ1Vb3MV7kGMkcndidP0v7B/vW/jKGdOi5aSWjGLkz026juLlrI3aByclOhtUYUD/PPEMHfq7QhkDhC4mDqbsvChDWrJ1D6zypLTB8Vm9b4t98CyJbpA8FD5xQH09gsfpWnFjvi7TzKvuBzKmGdcpmUAg4+kNL3L7Ad1zK09qur3BnXoMbhQhigz4w4QlPJ3LekUvPmW+rWhsoseb7Hr8QKCfTQfFsN3E+LHULdhrZJwKjF+qXtf8WS2OPGk0Mk080RLRgCVzl0NHvTiZLemqyi9f1rKNK10gPsHrW+Sf//N2ZoMinMGxOQRg+WpIir66xdsZmCjcPfXyfYes+oJGKrmuJ9BmOM4xnV9ikHs3B16Hhkfn+h8d+s52efbQBpPFNTvrrJtlmAv+EjIYjolCfMpebqns9fhdgYDwrMitoypsrIp89mD/FTZLw6qv9NpkMwrOpgvhcy0shvsWGzl0zIGmMRGUVlJ+kuDCJrinKtXHzQydbWHIenI0Txbm1eHXPV+EXbu6x8KPy4XU6lp5RZxyHPGEjl88BjRSWFFvz55rWyS0tV/kf8Roup99xkNYU2vbORJ9ZM6MbAjkPGZvQmH3cH2TJuEnU/Q4NjjKRGflIqTU52hScvHPfQrhTStEmO6udr6+jkbdTowt5HvOyRr9pEimFld4ck24JCnoXWYDaDGFbaCSsMMVWVYKePmPr4bkOfA7UN5x/oSTMpv795xGrF5mxrMyuqwX0rWhH64ngzdYtEtEKBLPN07k/1LlbjPwwiVTslWPFMxT41y+WhnUtYraK3ow6Oii/lJI+u24RNDL1uBos4RrPSfX+o1G00YKAMevEvy3PDc1qGnuHjNUtdBABcT8Ade+dC9BznTFbS0DlkoqZKvoUDprt+MpigowBig3XaGGYeiGEpvmeCyzs22G68n93qrhPLsa0qLhm3SqM130/eR7+I8SK3X7aux7K09PO/vVALnrseOWnPEIc4ybGctRVlcScSgUCwyAYjJDQLsXrrBa55KGBi0hvB57vE2/An1La9M29jMs4QEi5A8QS4g5GTjxWklaXEJCbey5Lz/+o8h9iHe1V3iQGJbEAE0W8Q4QodkXA8AvzqeIowH9qR9CfIFhwqKmSQLT2Uqdq0b4VLtwBK0gEUGcWsnL9Zf6BCSa93xNmI5VVdokE5H9pvKbVDXhFEnn1r8XM7LwUcTJBvGaRUQ3n2XbFU/nJsvBfoSvs1/rRnQk/lvMcaCfZDg5M4K+SJ0QZiISEYYcYNe8Gf1AFE+j4qTp8zFO43EPPQSfdwSnzyjhzHirwB39L37vKLxxhIWcDCURq/1y8SdS0qzVlHgWFXiu5m67Eduo4umhendWbLibst04tpFUAMVcrx9dTobB72fofByfc1ThiUiIz/7wiU/i1AJNFiDC5wWMFoyX5SRoZv7+UixxmhS7ol0ceZQrkshf64WUKXHH0LtkVCwCNTJS6+3NH+ZazpbNOwc3dobhpucms/77z5HSSX5Qkp6BAUk+8/EysblLPDub8AyVgzJLggPYGPkE07qolfmpRCCL4/MHJNdhPDH9/4f3PuvkHNdpdTblijj4a6oxTUGUrCk92Df2sqfgedbHggdecHhAD5SSA8hSUczSFCNl4ZOrNCx837EIFf8unnH1fr9HURB55uwN1ZHMUvg7qafUfDIpHJR2/mcPDhCqCzz2zGVacatVxWid4eTm1D50rPiABXv/jdJtO/PGpckz59dOErbGigcn0iaXDi2ySU6u6UlmfB4jLvkQMml2toHoK+6hSOX6bqh9rvKOGTML4T92X6z2fgl6ughuobfVzvO4sWJhtUTpIZtnyQo2v8KO0f3rzHjPVMWqg==</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>
<categories>
<category>Front-end</category>
<category>Record</category>
</categories>
<tags>
<tag>Summary</tag>
</tags>
</entry>
<entry>
<title>webpack及webpack-dev-server使用小结</title>
<url>/2017/08/11/front-end/React/TechStack/webpackAndWebpack-dev-server/</url>
<content><![CDATA[<p>webpack相关整理<br><a id="more"></a></p>
<h2 id="webpack介绍"><a href="#webpack介绍" class="headerlink" title="webpack介绍"></a>webpack介绍</h2><p>注意： 需全局+本地安装，只用在开发环境的依赖</p>
<h3 id="配置文件"><a href="#配置文件" class="headerlink" title="配置文件"></a>配置文件</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = {</span><br><span class="line"> <span class="comment">/*入口*/</span></span><br><span class="line"> entry: path.join(__dirname, <span class="string">'src/index.js'</span>),</span><br><span class="line"> </span><br><span class="line"> <span class="comment">/*输出到dist文件夹，输出文件名字为bundle.js*/</span></span><br><span class="line"> output: {</span><br><span class="line"> path: path.join(__dirname, <span class="string">'./dist'</span>),</span><br><span class="line"> filename: <span class="string">'bundle.js'</span></span><br><span class="line"> }</span><br><span class="line"> <span class="comment">/*src文件夹下面的以.js结尾的文件，要使用babel解析*/</span></span><br><span class="line"> <span class="comment">/*cacheDirectory是用来缓存编译结果，下次编译加速*/</span></span><br><span class="line"> <span class="comment">/*当有文件需要loader处理时加上*/</span></span><br><span class="line"> <span class="built_in">module</span>: {</span><br><span class="line"> rules: [{</span><br><span class="line"> test: <span class="regexp">/\.js$/</span>,</span><br><span class="line"> use: [<span class="string">'babel-loader?cacheDirectory=true'</span>],</span><br><span class="line"> include: path.join(__dirname, <span class="string">'src'</span>)</span><br><span class="line"> }]</span><br><span class="line">};</span><br></pre></td></tr></table></figure>
<h2 id="webpack使用"><a href="#webpack使用" class="headerlink" title="webpack使用"></a>webpack使用</h2><p>webpack中可以写commonjs格式的require同步语法，可以写AMD格式的require回调语法，还有一个require.ensure，以及webpack自己定义的require.include，再加上ES6的import语法<br>具体加载不同解析：<br><a href="http://www.cnblogs.com/lan eyfu/p/6262321.html" target="_blank" rel="noopener">webpack解惑：require的五种用法</a><br>用法如下： </p>
<blockquote>
<p>// <a href="http://www.jianshu.com/p/dcb28b582318" target="_blank" rel="noopener">http://www.jianshu.com/p/dcb28b582318</a><br>方式1:<br>// 全局模式安装webpack<br>npm install webpack –g<br>// 在终端输入<br>$ webpack // <–使用webpack.config.js生成bundle<br>方式 2 :<br>// 费全局模式安装webpack然后添加到package.json依赖里边<br>npm install webpack –save<br>// 添加build命令到package.json的scripts配置项<br>“scripts”: {<br> “build”: “webpack –config webpack.config.prod.js -p”,<br> …<br> }<br>// 用法：<br>“npm run build”</p>
</blockquote>
<h2 id="webpack别名设置"><a href="#webpack别名设置" class="headerlink" title="webpack别名设置"></a>webpack别名设置</h2><p>给绝对路径取个别名，之后可以在文件中使用绝对路径来导入相应内容，就不用点点点的相对路径了<br>webpack中增加如下字段：<br><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">resolve: {</span><br><span class="line"> alias: {</span><br><span class="line"> pages: path.join(__dirname, <span class="string">'src/pages'</span>),</span><br><span class="line"> component: path.join(__dirname, <span class="string">'src/component'</span>),</span><br><span class="line"> router: path.join(__dirname, <span class="string">'src/router'</span>)</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p>之后再文件中import的路径就可以用绝对路径啦</p>
<h3 id="webpack模块加载与ES6-import"><a href="#webpack模块加载与ES6-import" class="headerlink" title="webpack模块加载与ES6 import"></a>webpack模块加载与ES6 import</h3><p>参考<a href="http://www.jianshu.com/p/37c644db7707" target="_blank" rel="noopener">React开发中的疑问：require和import的区别</a></p>
<h2 id="webpack-devserver"><a href="#webpack-devserver" class="headerlink" title="webpack devserver"></a>webpack devserver</h2><p>一个Node.js服务器（需要开发者从npm自行安装，有利于在开发模式下编译）<br>这是一个基于Express.js框架开发的web server，默认监听8080端口。server内部调用Webpack，这样做的好处是提供了额外的功能如热更新“Live Reload”以及热替换“Hot Module Replacement”（即HMR）。<br>用法如下：</p>
<blockquote>
<p>// <a href="http://www.jianshu.com/p/dcb28b582318" target="_blank" rel="noopener">http://www.jianshu.com/p/dcb28b582318</a><br>方式 1:<br>// 全局安装<br>npm install webpack-dev-server –save<br>// 终端输入<br>$ webpack-dev-server –inline –hot<br>用法 2:<br>// 添加到package.json scripts<br>“scripts”: {<br> “start”: “webpack-dev-server –inline –hot”,<br> …<br> }<br>// 运行：<br>$ npm start<br>// 浏览器预览：<br><a href="http://localhost:8080" target="_blank" rel="noopener">http://localhost:8080</a></p>
</blockquote>
]]></content>
<categories>
<category>Front-end</category>
<category>React</category>
</categories>
<tags>
<tag>React</tag>
</tags>
</entry>
<entry>
<title>hexo工程同步</title>
<url>/2017/04/09/Tec/Blog/hexo-project-sync/</url>
<content><![CDATA[<p>参考：<br><a href="http://blog.csdn.net/arkblue/article/details/9568249/" target="_blank" rel="noopener">git远程本地分支操作</a><br><a href="https://www.zhihu.com/question/21193762" target="_blank" rel="noopener">使用hexo，换电脑怎么更新博客–知乎</a><br><a id="more"></a></p>
<h1 id="新方法"><a href="#新方法" class="headerlink" title="新方法"></a>新方法</h1><p>试了个新的同步策略，可以避免github开源项目泄露密码，具体操作:</p>
<ol>
<li>把hexo工程代码放到码云平台，私有</li>
<li>在此工程中deploy博客到github</li>
<li>想要加快响应速度，可以将github pages同步到码云的pages，pages命名最好和用户名一样，不然可能会出现界面样式加载不完整，404错误等</li>
<li>从云端同步到本地：git pull<h5 id="本地hexo同步到github"><a href="#本地hexo同步到github" class="headerlink" title="本地hexo同步到github"></a>本地hexo同步到github</h5>我的hexo博客一开始只通过deploy和github联系，但要同步的话必须先把云端的工程pull下来<br>具体实现：</li>
<li>把已经deploy的repository pull下来，在repository中新建分支hexo，并切换到hexo分支</li>
<li>删除掉pull下来的文件夹中所有内容</li>
<li>把电脑上的hexo文件夹内容全部拷贝到pull下来的文件夹中</li>
<li><p>依次执行以下命令将改动推送到GitHub（此时当前分支应为hexo）</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">git add .</span><br><span class="line">git commit -m "..."</span><br><span class="line">git push origin hexo</span><br></pre></td></tr></table></figure>
</li>
<li><p>以后可直接在此文件夹中进行hexo s、g、d操作,不用切换分支<br>注： 最好在deploy前先执行步骤4，否则工程不是最新的，换电脑有些deply的内容会消失</p>
</li>
</ol>
<p>到此，便实现了hexo工程的云端同步</p>
<h4 id="云端hexo同步到本地（换电脑）"><a href="#云端hexo同步到本地（换电脑）" class="headerlink" title="云端hexo同步到本地（换电脑）"></a>云端hexo同步到本地（换电脑）</h4><p>1、先安装git，node.js(可直接在官网现在，安装包很小，npm包含在其中)<br>2、git clone云端代码库<br>3、git bash下执行：(不需要执行hexo init)<br>// 用yarn也可，记得使用<strong>yarn global bin</strong>得到yarn全局安装目录并添加到环境变量中<br><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install hexo -g</span><br><span class="line">npm install // 在项目目录下执行</span><br><span class="line">npm install hexo-deployer-git -g</span><br></pre></td></tr></table></figure></p>
<p>注：第一第二句不能反，否则需多执行一遍npm install</p>
<h4 id="本地在deploy到云端"><a href="#本地在deploy到云端" class="headerlink" title="本地在deploy到云端"></a>本地在deploy到云端</h4><ol>
<li><p>先通过以下代码设置用户邮箱和名字</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">git config --global user.email "vonxq@foxmail.com"</span><br><span class="line"> git config --global user.name "anne:ws2012"</span><br></pre></td></tr></table></figure>
</li>
<li><p>一开始我的博客设置的就是github通过SSH进行安全通信，换了电脑rsa值也会变，必须重新配置，当然也可以直接复制旧电脑的.ssh文件夹到新电脑</p>
</li>
<li>执行hexo同步代码即可</li>
</ol>
<p>tips:hexo d后我的master分支直接和hexo分支内容相同，也就是说我整个工程都被同步上去了，目前还不知道原因，但将.deploy_git文件夹删除后再重新同步问题就消失了。</p>
<h4 id="其他办法"><a href="#其他办法" class="headerlink" title="其他办法"></a>其他办法</h4><p>有一个插件<a href="https://github.com/coneycode/hexo-git-backup" target="_blank" rel="noopener">hexo-git-backup</a>可以同步hexo和其主题，使用也很方便，但现在仅支持master分支，不想折腾所以先这样了</p>
<h4 id="git放弃本地修改，强制更新"><a href="#git放弃本地修改，强制更新" class="headerlink" title="git放弃本地修改，强制更新"></a>git放弃本地修改，强制更新</h4><p>pull = fetch + merge<br><a href="https://stackoverflow.com/questions/15745045/how-do-i-resolve-git-saying-commit-your-changes-or-stash-them-before-you-can-me/30637048" target="_blank" rel="noopener">直接pull失败的解决方案</a><br><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">git fetch --all</span><br><span class="line">git reset --hard origin/master</span><br></pre></td></tr></table></figure></p>
<p>注：Git fetch 只是下载远程的库的内容，不做任何的合并 git reset 把HEAD指向刚刚下载的最新的版本</p>
]]></content>
<categories>
<category>Tec</category>
<category>Blog</category>
</categories>
<tags>
<tag>Hexo</tag>
<tag>Git</tag>
</tags>
</entry>
<entry>
<title>胡思乱想</title>
<url>/2017/04/04/dailyDiary/2017/these%20days/</url>
<content><![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/TYZEFMMEXv5Q6i6ROMNFjMZGEejLhYN2plnx9utovyscLS6kN9Y1yfwJob/S1J0h769TbCx/lgnBzGUE4nvlsyxfvD/TiUagwAZhf5BKnBviUFn2z1IY4rW6S8y/eZpjOhHhnQ5/QbckurRCgzAJ/34E/KTvJv3OEqzlQF4ajig8wmvTh6PvzlJ5W+DB+R88yuUL/49Y8JnrusSxc9JeHt6mUkxbr4i0eD6miM149EWTvOBtXsMBlqVsw4Kk8081FbKKtROwq0JAzcIa1A5Y7zmUvwDP3Z7P+Av1756sinBNUoMFj/k7WeP4SbrMVY5OvfWJK9K+yqzSXW59fHMYmWmQNKEXRl2w/euQrtD0mbwb/WhTqCV0lLswZ/VNP46FwOebL2QjrHdzRmSUQPndgYxzohK4UTD9pUzzE3Uo0YUTP49IKsa66tKnxhBWS1hRzz3NY4XgNMtZIkNboIx51JxyeVq7dCuJyMLnozB0L68HBPsJLcmk6</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>
<categories>
<category>dailyDiary</category>
</categories>
<tags>
<tag>von</tag>
</tags>
</entry>
<entry>
<title>服务器搭建问题汇总</title>
<url>/2017/03/19/Tec/server/Sever-Building%20Q&A/</url>
<content><![CDATA[<h3 id="搭建过程"><a href="#搭建过程" class="headerlink" title="搭建过程"></a>搭建过程</h3><p><a href="http://blog.csdn.net/csdnhyp/article/details/51930878" target="_blank" rel="noopener">腾讯云服务器linux系统下apache php mysql安装</a><br><a href="http://www.centoscn.com/CentosBug/softbug/2016/0115/6660.html" target="_blank" rel="noopener">解决CentOS7 无法启动mysql 的解决办法</a><br><a href="http://xbwcc.com.cn/2016/01/13/%E8%85%BE%E8%AE%AF%E4%BA%91%E5%85%AC%E7%BD%91ip%E8%AE%BF%E9%97%AE%E4%B8%8D%E9%80%9A%E7%9A%84%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3/" target="_blank" rel="noopener">腾讯云公网IP访问不通的问题解决</a><br>ps:访问时需注意公网ip和内网IP<br><a id="more"></a></p>
<p>传输文件到linux服务器：电脑软件winscp<br>navicat可以在两个连接中传输数据库数据<br>5.配置好LAMP后，进入var/www/html下，这个目录里的文件就是外网所能访问到内容。</p>
<p>php页面打开就自动下载，解析不成功</p>
<p>1.loadmoudle(一直报错)<br><a href="http://www.cnblogs.com/52php/p/5668826.html" target="_blank" rel="noopener">Linux下Apache、PHP、MySQL默认安装路径</a><br>尝试2.重装php(参考<a href="http://www.cnblogs.com/liulun/p/3535346.html" target="_blank" rel="noopener">在centos上安装lamp环境</a>)<br>yum install php php-devel<br>重启apache使php生效<br>service httpd restart<br>此时可以在目录：/var/www/html/下建立一个PHP文件<br>代码：<br><?php phpinfo(); ?><br>然后访问这个文件，就能看到PHP的一些信息，php.ini配置文件的路径可以在这个页面上看到</p>
<p><a href="http://blog.csdn.net/howlaa/article/details/46707159" target="_blank" rel="noopener"> Android使用sqlliteOpenhelper更改数据库的存储路径放到SD卡上</a></p>
<p>php的分号害人不浅…..</p>
<h3 id="mysql"><a href="#mysql" class="headerlink" title="mysql"></a>mysql</h3><h4 id="忘记密码："><a href="#忘记密码：" class="headerlink" title="忘记密码："></a>忘记密码：</h4><p><a href="http://www.2cto.com/database/201411/353328.html" target="_blank" rel="noopener">windows下mysql忘记root密码</a><br><a href="http://blog.csdn.net/u010603691/article/details/50379282" target="_blank" rel="noopener">MySQL5.7更改密码时出现ERROR 1054 (42S22): Unknown column ‘password’ in ‘field list’</a><br>注：一定得先关服务（名字可能不同）</p>
<p><a href="http://jingyan.baidu.com/article/046a7b3ed85f3ef9c27fa9dc.html" target="_blank" rel="noopener">mysql开启远程连接服务</a><br>具体步骤：</p>
<blockquote>
<p>1、登录mysql，use mysql<br>2、GRANT ALL PRIVILEGES ON <em>.</em> TO ‘root‘@’%’ IDENTIFIED BY ‘root’ WITH GRANT OPTION;修改权限<br>3、刷新：flush privileges;<br>4、使用“select host,user from user;”查看修改是否成功。</p>
</blockquote>
<p>ps：远程连接改表有时会报权限不够，不知道怎么回事，我过了一天再看就自己好了</p>
<h4 id="表中无法插入中文字符"><a href="#表中无法插入中文字符" class="headerlink" title="表中无法插入中文字符"></a>表中无法插入中文字符</h4><p><a href="http://www.cnblogs.com/codeplus/archive/2011/08/02/2125546.html" target="_blank" rel="noopener">java 向 mysql 插入汉字 Incorrect string value 解决办法</a><br>具体步骤：</p>
<blockquote>
<p>1、查看编码： show variables like ‘character%’ ；<br>2、修改编码：set 变量=utf8;或alter database 数据库名 character set utf8;（第二个不一定有效 ）</p>
</blockquote>
<h3 id="Apache"><a href="#Apache" class="headerlink" title="Apache"></a>Apache</h3><h4 id="服务无法启动"><a href="#服务无法启动" class="headerlink" title="服务无法启动"></a>服务无法启动</h4><p>step1：在命令行里，apache主目录中bin目录下，执行httpd看有什么提示<br>step2: 端口是否被占用，or直接在httpd.conf中修改listen的端口号（修改后访问需加端口号）<br>ps:在命令行用httpd启动apache服务后，不能同时在windows服务中启动该服务</p>
<p>打开apache服务器，配置得好，浏览器中输入，127.0.0.1（即localhost，改了端口号的话请加端口号）就可以看到效果了。<br>这时候你就可以在浏览器中查看编写好的程序了（程序目录由httpd.conf的DocumentRoot指定）。</p>
<h3 id="PHP"><a href="#PHP" class="headerlink" title="PHP"></a>PHP</h3><h4 id="apache无法连接php解析php文件"><a href="#apache无法连接php解析php文件" class="headerlink" title="apache无法连接php解析php文件"></a>apache无法连接php解析php文件</h4><p>指定httpd.conf中的PHPIniDir参数<br> 如:PHPIniDir “D:/shenghuo/php/php.ini” (需要要指定php.ini的绝对路径)<br>参考：<br><a href="http://blog.163.com/wf_shunqiziran/blog/static/176307209201332102259182/" target="_blank" rel="noopener">PHP :Call to undefined function mysql_connect()</a><br><a href="http://jingyan.baidu.com/article/1709ad808caf9d4634c4f0f8.html" target="_blank" rel="noopener">JSP环境搭建</a></p>
<p>tips:<br>购买服务器：<br>腾讯云：<br><a href="https://www.ihewro.com/archives/619/" target="_blank" rel="noopener">腾讯云“云+校园计划”学生机自动抢购脚本</a><br><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var getThread = null;</span><br><span class="line"> var timeInterval = 20;</span><br><span class="line"> var getCount = 0;</span><br><span class="line"> if (!getThread) {</span><br><span class="line"> getThread = setInterval(() => {</span><br><span class="line"> if ($("button[hotrep='qcact.campus.getVoucherBtn']")[0].disabled) {</span><br><span class="line"> $("button[hotrep='qcact.campus.getVoucherBtn']").attr("disabled",false);</span><br><span class="line"> }</span><br><span class="line"> $("button[hotrep='qcact.campus.getVoucherBtn']").click();</span><br><span class="line"> if ($(".J-close")) {</span><br><span class="line"> $(".J-close").click();</span><br><span class="line"> }</span><br><span class="line"> console.log("Already Tried: " + (++getCount) + " Times.");</span><br><span class="line"> }, timeInterval);</span><br><span class="line"> }</span><br></pre></td></tr></table></figure></p>
]]></content>
<categories>
<category>Tec</category>
<category>Server</category>
</categories>
<tags>
<tag>Mysql</tag>
</tags>
</entry>
<entry>
<title>软件使用技巧简记</title>
<url>/2017/03/14/Tec/accumulation/Software%20skills/</url>
<content><![CDATA[<h3 id="WebStorm"><a href="#WebStorm" class="headerlink" title="WebStorm"></a>WebStorm</h3><p>1、软换行<br> 左侧行标出右键，选择soft-wrap<br> ps：写markdown不换行真真不行</p>
]]></content>
<categories>
<category>Tec</category>
<category>Accumulation</category>
</categories>
</entry>
<entry>
<title>移动通信</title>
<url>/2017/03/14/Tec/accumulation/Mobile%20communication/</url>
<content><![CDATA[<p>一直有个问题困惑了我好久，总是在有条件的时候忘记了查，今天总算记住了，大概记一下查询结果吧。<br>问题：手机是怎么上传和接收数据的？它没有固定IP，并且一直在移动，很可能现在管它的“路由器”（我以为…）就完全联系不上它了呢？<br>或者说也有可能其他手机收到相同的消息，如何取舍？<br>简答：蜂窝数据通信，基站分区，按区通信，移动实时切换小区。收到相同消息应该和路由相同，有一套协议决定手机是处理还是丢弃这些数据。<br><a id="more"></a><br>参考信息：<br><a href="https://wenku.baidu.com/view/b1ad1787856a561252d36ffc.html" target="_blank" rel="noopener">蜂窝通信原理</a><br><a href="http://www.docin.com/p-1762104253.html" target="_blank" rel="noopener">蜂窝通信中的小区切换</a><br><a href="http://www.knowsky.com/12467.html" target="_blank" rel="noopener">蜂窝IP技术</a><br>衍生问题：通信怎么在路由层面保证安全性？上层可以加密，但路由在一个小的局域网里应该是通过广播来找到目标的吧？网线上又没有主机信息…<br>答案容我回去看看书先。</p>
<p>PS:当初学数据网络通信也算是被折磨得不行，书那么厚，考点那么多也记不进去。结果不上课了倒是有点兴趣了，好读书不求甚解，主要是看了详解我也不一定记得住，当初考过的那么多课程也是遗忘居多，记个大概吧，就当知识扩展了，主次要分明。</p>
]]></content>
<categories>
<category>Tec</category>
<category>Accumulation</category>
</categories>
<tags>
<tag>Network</tag>
</tags>
</entry>
<entry>
<title>Android使用高德地图API</title>
<url>/2017/03/06/Tec/accumulation/Android%20use%20map%20API/</url>
<content><![CDATA[<p>毕设需要用到室内定位，在网上找到了高德地图的Api，记录一下使用中遇到的问题及解决办法。<br>高德地图创建应用之后需要新建一个key，需要输入app的SHA1值，找到这个值的办法：<br>（参考自<a href="http://blog.csdn.net/kezhongke/article/details/42678077" target="_blank" rel="noopener">Android Studio中获取sha1证书指纹数据的方法</a>）</p>
<blockquote>
<p>为了避免注册时弄错签名，建议直接用打包出来的apk查看签名，具体如下：<br> 1） 将apk修改后缀为 .rar文件后解压；<br> 2） 进入解压后的META-INF目录，该目录下会存在文件CERT.RSA<br> 3） 在该目录下打开cmd，输入命令 ：keytool -printcert -file CERT.RSA<br> 这里将会显示出MD5和SHA1签名。(此处也可以直接在git bash中输入命令，亲测有效)<br> <a id="more"></a><br> <a href="http://lbs.amap.com/api/android-location-sdk/guide/create-project/android-studio-create-project" target="_blank" rel="noopener">Android Studio 配置工程</a></p>
</blockquote>
]]></content>
<categories>
<category>Tec</category>
<category>Accumulation</category>
</categories>
<tags>
<tag>Android</tag>
</tags>
</entry>
<entry>
<title>恢复Android工程</title>
<url>/2017/03/01/Tec/accumulation/Recover%20Android%20PROS/</url>
<content><![CDATA[<p><a href="http://blog.csdn.net/itluochen/article/details/52816059" target="_blank" rel="noopener">导入android studio的正确姿势</a><br>如上所示，只要新建工程，再把工程里的几个gradle相关文件覆盖到徐导入文件里就行了<br><img src="http://img.blog.csdn.net/20141115095209446?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZWNsaXBzZXh5cw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="需复制的文件"><br>要是老是报错，还是建议下载一下适配sdk吧，毕竟有些新功能也许是自己的sdk版本没有的<br><a id="more"></a><br>尝试1.直接打开工程<br>报错：Error:Failed to find Build Tools revision 24.0.3 Install Build Tools 24.0.3 and sync project<br>是build Tools版本不一致，查看自己版本号：<br>方法1.Android SDK Manager–>Tools–>就可以看到,若未显示可直接打开sdk目录下的buildtools文件夹即可看到<br>方法2.可以右键项目名称，选择open module setting，在properties里选择build tools version，可选的即存在的版本号</p>
<p>打开app中的build.gradle修改<br>修改Application Id可以将同一个应用（Application Id不同）同时安装在同一个手机上<br>修改了version之后一直报乱码错误，心累…然后我就直接把version字段删除了，奇妙地停止了报错，开始安装，又报错，不过手机上显示安装好了</p>
<p>尝试2.新建工程<br>。。。</p>
]]></content>
<categories>
<category>Tec</category>
<category>Accumulation</category>
</categories>
<tags>
<tag>Android</tag>
</tags>
</entry>
<entry>
<title>前端轮子</title>
<url>/2017/02/27/front-end/basic/Web%20wheels/</url>
<content><![CDATA[<h1 id="前端小轮子"><a href="#前端小轮子" class="headerlink" title="前端小轮子"></a>前端小轮子</h1><p>最近发现了一个不错的网站<a href="http://www.jq22.com/" target="_blank" rel="noopener">jQuery插件库</a>，里面有不少可以参考的小轮子，源码演示都有<br><a id="more"></a></p>
<h2 id="js库"><a href="#js库" class="headerlink" title="js库"></a>js库</h2><h3 id="Lodash"><a href="#Lodash" class="headerlink" title="Lodash"></a>Lodash</h3><p><a href="http://www.jianshu.com/p/7436e40ac5d1" target="_blank" rel="noopener">Lodash介绍</a><br><a href="http://lodashjs.com/docs/" target="_blank" rel="noopener">API文档</a></p>
]]></content>
<categories>
<category>Front-end</category>
<category>Basic</category>
</categories>
<tags>
<tag>Plugins</tag>
</tags>
</entry>
<entry>
<title>jdk安装配置记录</title>
<url>/2017/02/27/Tec/java/jdk%20install%20and%20configure/</url>
<content><![CDATA[<h1 id="JDK安装配置记录"><a href="#JDK安装配置记录" class="headerlink" title="JDK安装配置记录"></a>JDK安装配置记录</h1><p>参考[ Java环境变量设置]（<a href="http://blog.csdn.net/badboy2008/article/details/41316253" target="_blank" rel="noopener">http://blog.csdn.net/badboy2008/article/details/41316253）</a><br><a id="more"></a></p>
<ol>
<li>安装JDK<br>我的默认安装位置是C:\Program Files\Java</li>
<li>设置JAVA_HOME，指向jdk的安装目录这一级即可<br>系统——>更改设置——>高级——>环境变量<br>新建变量JAVA_HOME,我的值为C:\Program Files\Java\jdk1.8.0_71<br>3.设置Path变量(path变量是操作系统查找命令的目录)<br>在Path值后面加上;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin</li>
<li>设置CLASSPATH（是java执行.class文件查找源文件的目录，可不设，只用当下目录）<br>新建环境变量CLASSPATH，设置值为.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar注意值前面的两个符号.;</li>
</ol>
]]></content>
<categories>
<category>Tec</category>
<category>Java</category>
</categories>
<tags>
<tag>Java</tag>
</tags>
</entry>
<entry>
<title>ise仿真小结</title>
<url>/2017/02/27/Tec/accumulation/ise%20simulation/</url>
<content><![CDATA[<h1 id="ISE仿真小结"><a href="#ISE仿真小结" class="headerlink" title="ISE仿真小结"></a>ISE仿真小结</h1><p>1.上升沿下降沿啥的一定记得把要判断的时钟放入process的敏感元件中<br>2.signal有延时问题，信号量过多的时序仿真容易出错，最好把常变化的量用variable来做<br><a id="more"></a><br>3.仿真步骤：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">>1.新建test ben文件，绑定到某一module文件上</span><br><span class="line">2.修改tb文件内容，为输入量赋值并保证一定时序</span><br><span class="line">3.点击仿真即可（注：module绑定错了可能没输出）</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category>Tec</category>
<category>Accumulation</category>
</categories>
</entry>
<entry>
<title>网络小常识</title>
<url>/2017/02/27/Tec/accumulation/Network%20commen%20sense/</url>
<content><![CDATA[<header class="article-header">
<h1 id="电脑小常识"><a href="#电脑小常识" class="headerlink" title="电脑小常识"></a>电脑小常识</h1><h3 id="电脑host文件修改办法"><a href="#电脑host文件修改办法" class="headerlink" title="电脑host文件修改办法"></a>电脑host文件修改办法</h3><p>经常会遇到网站打不开或者打开慢的情况，这有跟DNS服务器解析地址的快慢有关，好的DNS可以更快解析到IP地址，提供最快连接线路，网页也就能更快访问到。<br>为了更快地解析到IP地址，我们可以自己设置电脑对一些站点的解析,这样不用走DNS服务器,能够更快地获取网页信息<br>具体办法：修改hosts文件</p>
<ol>
<li>先在<a href="http://tool.chinaz.com/dns?type=1&host=&ip=" target="_blank" rel="noopener">DNS查询</a>上查到网页的相应IP</li>
<li><p>找到C:\Windows\System32\drivers\etc下的hosts文件，用记事本打开，然后再文件最后添加解析即可，格式如下：</p>
<blockquote>
<p>IP localhost(如104.25.15.31 codepen.io）</p>
</blockquote>
</li>
<li><p>最后刷新DNS</p>
<pre><code>ipconfig /flushdns
</code></pre></li>
</ol>
<h2 id="IP地址网段"><a href="#IP地址网段" class="headerlink" title="IP地址网段"></a>IP地址网段</h2><blockquote>
</blockquote>
<p>IPv4地址分为A、B、C、D、E五类，出去特殊作用的D、E两类，剩下的A、B、C三类地址是我们常见的IP地址段。<br>在这三类地址中，绝大多数的IP地址都是公有地址，需要向国际互联网信息中心申请注册。但是在IPv4地址协议中预留了3个IP地址段，作为私有地址，供组织机构内部使用。<br>这三个地址段分别位于A、B、C三类地址内：<br>A类地址：10.0.0.0–10.255.255.255<br>B类地址：172.16.0.0–172.31.255.255<br>C类地址：192.168.0.0–192.168.255.255<br>所以局域网在选取使用私有地址时，一般会按照实际需要容纳的主机数来选择私有地址段。常见的局域网由于容量小，一般选择C类的192.168.0.0作为地址段使用，一些大型企业就需要使用B类甚至A类地址段作为内部网络的地址段。<br>最后需要补充说明的是，由于NAT和子网掩码的存在，实际在使用中，一个C类大小的局域网也可以选择A类的10.0.0.0网段作为自己的IP地址段。<br>子网掩码: </p>
</header>]]></content>
<categories>
<category>Tec</category>
<category>Accumulation</category>
</categories>
<tags>
<tag>Network</tag>
<tag>dns</tag>
</tags>
</entry>
<entry>
<title>html基础知识</title>
<url>/2017/02/27/front-end/basic/cssAndHtml/html/</url>
<content><![CDATA[<p>把之前的前端基础知识拆成三部分，方便查阅<br><a id="more"></a></p>
<h3 id="HTML常用标签"><a href="#HTML常用标签" class="headerlink" title="HTML常用标签"></a>HTML常用标签</h3><p><strong>标签分类：</strong></p>
<blockquote>
<p>块级元素：div p li h1`h6等，独占一行，若未设置高度则充满父元素</p>
<ol>
<li>行内元素：span a strong等，不能直接设置宽高</li>
<li>行内块元素：img input等，可以直接设置宽高</li>
</ol>
</blockquote>
<ol>
<li><p><meta>元数据，自关闭标签，常用属性：</p>
<blockquote>
<p>1.1. charset=”utf-8” /ASCII/ANSI/UNICODE/GBK/GB2312/BIG5<br>1.2. name=”” content=””用于描述页面信息<br>name取值：keyword/description…<br>1.3. http-equiv=””content=””相当于http的文件头作用，它可以向浏览器传回一些有用的信息。<br>http-equiv取值：content-type/refresh/…</p>
</blockquote>
</li>
<li><p>input标签，自关闭,常用属性：(label for=”id”)</p>
<blockquote>
<p>2.1. type=”” text/password/radio/checkbox/file/submit/button/reset/image<br>2.2. maxlengh=”数字”<br>2.3. readonly=”readonly”<br>2.4. disabled=”disable”(非活动状态)<br>2.5. name=””(常与form或checkbox配合使用)<br>2.6. value=””<br>2.7. checked=”checked”</p>
</blockquote>
</li>
<li><p>form表单，用于收集数据</p>
<blockquote>
<p>3.1. action=””处理用户数据信息的页面<br>3.2. method=” “ get(地址栏显式提交)/post(数据后台提交)<br>3.3.</p>
<fieldset><legend>名</legend>内容表单分组控件</fieldset>
</blockquote>
</li>
<li><p>select<br>属性：multiple=”multiple”<br>用法；(select)(optgroup label=””)(option selected=”selected”)(/option)(/optgroup)(/select)</p>
</li>
<li><p>textarea多行文本输入框</p>
</li>
</ol>
<p>6.table</p>
<blockquote>
<p>tr、td、caption、thead、tbody、tfoot<br>常用属性：border/align/width/height/cellspacing/cellpading<br>td属性：colspan=”n”,rowspan=”n”合并n个单元格</p>
</blockquote>
<h3 id="HTML5新标签"><a href="#HTML5新标签" class="headerlink" title="HTML5新标签"></a>HTML5新标签</h3><p>详情可见<a href="http://www.cnblogs.com/yuzhongwusan/archive/2011/11/17/2252208.html" target="_blank" rel="noopener">Html5新标签解释及用法</a><br>1.(embed src=”” hidden=”true/false”)(/embed)</p>
<ol>
<li>canvas</li>
<li><p><code><marquee>内容</marquee></code>滚动效果 属性:</p>
<blockquote>
<p>3.1. behaviour:alternate/scroll/slide<br>direction:down/up/..<br>width、height、bfcolor</p>
</blockquote>
</li>
<li><p>语义化标签 footer、header、article、aside、nav、summary…</p>
</li>
<li><p>audio、vedio…</p>
</li>
</ol>
]]></content>
<categories>
<category>Front-end</category>
<category>Basic</category>
</categories>
<tags>
<tag>HTML</tag>
</tags>
</entry>
<entry>
<title>JS、ES6基础知识</title>
<url>/2017/02/27/front-end/basic/js/js/</url>
<content><![CDATA[<p>把之前的前端基础知识拆成三部分，方便查阅</p>
<a id="more"></a>
<p>参考<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects" target="_blank" rel="noopener">JavaScript标准库</a></p>
<h2 id="常用判断及运算操作"><a href="#常用判断及运算操作" class="headerlink" title="常用判断及运算操作"></a>常用判断及运算操作</h2><ul>
<li>类型判断<br>typeof 操作值，返回一个其类型的字符串名<br>-NaN是number,null是object</li>
<li>判断是否相等<br>Object.is() 方法确定两个值是否是相同的值。<br>=== 严格相等，+0和-0相等，NaN和NaN不等,字符串判断内容是否相等(‘key’ === ‘key’)，其余与上同<br>== 会先做类型转换后再比较</li>
</ul>
<h2 id="ES6"><a href="#ES6" class="headerlink" title="ES6"></a>ES6</h2><h3 id="箭头函数"><a href="#箭头函数" class="headerlink" title="箭头函数"></a>箭头函数</h3><p>this为被创建时的环境的this<br>() => {}</p>
<h3 id="Promise异步逻辑"><a href="#Promise异步逻辑" class="headerlink" title="Promise异步逻辑"></a>Promise异步逻辑</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">new Promise((resolve) => {</span><br><span class="line"> // 异步处理的东西</span><br><span class="line"> resolve();</span><br><span class="line">}).then((前面resolve带的值) => {</span><br><span class="line"> // ...处理</span><br><span class="line">})</span><br><span class="line">// 若函数返回一个Promise，可直接后接then</span><br><span class="line">function lala () {</span><br><span class="line"> return new Promise((resolve, reject) => {</span><br><span class="line"> jsonp(url, {</span><br><span class="line"> param: `${qs.stringify(data)}&callback`,</span><br><span class="line"> name: `jsonp_${new Date().getTime()}`,</span><br><span class="line"> timeout: 4000,</span><br><span class="line"> }, (error, result) => {</span><br><span class="line"> if (error) {</span><br><span class="line"> reject(error)</span><br><span class="line"> }</span><br><span class="line"> resolve({ statusText: 'OK', status: 200, data: result })</span><br><span class="line"> })</span><br><span class="line">})</span><br><span class="line">}</span><br><span class="line">lala.then((res) => {</span><br><span class="line"> res.data // result</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<h3 id="Generator生成函数"><a href="#Generator生成函数" class="headerlink" title="Generator生成函数"></a>Generator生成函数</h3><p>yeild<br>* 函数名(){</p>
<p>}</p>
<p>Promise，generator/yield，async/await </p>
]]></content>
<categories>
<category>Front-end</category>
<category>Basic</category>
</categories>
<tags>
<tag>Javascript</tag>
</tags>
</entry>
<entry>
<title>JS对象常见操作(todo)</title>
<url>/2017/02/27/front-end/basic/js/object/</url>
<content><![CDATA[<h1 id="对象常用操作"><a href="#对象常用操作" class="headerlink" title="对象常用操作"></a>对象常用操作</h1><a id="more"></a>
<h3 id="对象的遍历"><a href="#对象的遍历" class="headerlink" title="对象的遍历"></a>对象的遍历</h3><p><a href="http://www.jb51.net/article/112064.htm" target="_blank" rel="noopener">js八种对象遍历的性能分析</a></p>
<ol>
<li><p>for(let … in …)<br>会枚举原型链上的属性key值<br><strong>注</strong>: 对象不能使用for of，会报错</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = {</span><br><span class="line"> a: <span class="string">'b'</span>,</span><br><span class="line"> b: <span class="string">'c'</span>,</span><br><span class="line"> c: <span class="string">'d'</span></span><br><span class="line">}</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i <span class="keyword">in</span> obj) {</span><br><span class="line"> <span class="built_in">console</span>.log(i)<span class="comment">// a b c</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
</li>
<li><p>Object.keys(obj)<br>得到属性名数组，之后遍历数组即可，不包括原型链</p>
</li>
<li>Object.getOwnPropertyNames(obj)，同上，包括原型链</li>
</ol>
<ul>
<li>复制<br>Object.assign(target,源1,源2…)，将多个对象复制到一个target中，后面的源会覆盖前面源的同名属性，只拷贝属性值，若为引用则target该属性值引用与源相同</li>
<li>判断是否为空<br>Object.keys(obj)返回的数组长度是否为空</li>
<li>删除某一属性</li>
</ul>
<h2 id="数组与对象的深度复制"><a href="#数组与对象的深度复制" class="headerlink" title="数组与对象的深度复制"></a>数组与对象的深度复制</h2><p>工具库: lodash</p>
]]></content>
<categories>
<category>Front-end</category>
<category>Basic</category>
</categories>
<tags>
<tag>Javascript</tag>
</tags>
</entry>
<entry>
<title>常用正则表达式记录(todo)</title>
<url>/2017/02/27/front-end/basic/js/regexp/</url>
<content><![CDATA[<p>知识积累<br><a id="more"></a></p>
<h1 id="正则表达式"><a href="#正则表达式" class="headerlink" title="正则表达式"></a>正则表达式</h1><h2 id="定义与使用"><a href="#定义与使用" class="headerlink" title="定义与使用"></a>定义与使用</h2><h3 id="常用正则"><a href="#常用正则" class="headerlink" title="常用正则"></a>常用正则</h3><p>//获取文件名，不带后缀<br>var file_name=file_path.replace(/(.<em>\/)</em>([^.]+).*/ig,”$2”);</p>
<p>//获取文件后缀<br>1.var FileExt=file_path.replace(/.+./,””);</p>
<p>2.var fileExtension = file_path.substring(file_path.lastIndexOf(‘.’) + 1);</p>
<p>//截取文件后缀<br>var reg = /.\w+$/;<br>var file_name = file_path.replace(reg,’’);</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// IP: </span></span><br><span class="line"> <span class="keyword">const</span> ipReg = <span class="string">'((25[0-5]|2[0-4]\\d|((1\\d{2})|([1-9]?\\d)))\\.){3}(25[0-5]|2[0-4]\\d|((1\\d{2})|([1-9]?\\d)))'</span></span><br><span class="line"><span class="comment">// MAC: </span></span><br><span class="line"> <span class="keyword">const</span> macReg = <span class="string">'([a-fA-F0-9]{2}:){5}([a-fA-F0-9]{2})'</span></span><br><span class="line"><span class="comment">// email:</span></span><br><span class="line"> <span class="keyword">const</span> emailReg = <span class="string">'[\\d,a-z]([\\w\\.\\-]+)@([a-z0-9\\-]+).([a-z\\.]+[a-z])'</span></span><br></pre></td></tr></table></figure>
<p>多行邮箱判断(英文逗号分隔)<br><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 邮箱</span></span><br><span class="line"><span class="comment">// 注：字符串中\也是转义字符，所以\需写成\\</span></span><br><span class="line"><span class="keyword">const</span> emailReg = <span class="string">'[\\d,a-z]([\\w\\.\\-]+)@([a-z0-9\\-]+).([a-z\\.]+[a-z])'</span></span><br><span class="line"><span class="keyword">const</span> reg = <span class="keyword">new</span> <span class="built_in">RegExp</span>(<span class="string">`^<span class="subst">${emailReg}</span>(,(\\n)*<span class="subst">${emailReg}</span>)*(,){0,1}(\\n)*$`</span>,<span class="string">'g'</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 取输入数据（先去掉多余换行）</span></span><br><span class="line"> <span class="keyword">let</span> tmp = values.emails.replace(<span class="regexp">/<\/?.+?>/g</span>, <span class="string">''</span>)</span><br><span class="line"> tmp = tmp.replace(<span class="regexp">/[\r\n]/g</span>, <span class="string">''</span>)</span><br><span class="line"> <span class="keyword">let</span> emails = tmp.split(<span class="string">','</span>)</span><br></pre></td></tr></table></figure></p>
]]></content>
<categories>
<category>Front-end</category>
<category>Basic</category>
</categories>
<tags>
<tag>Javascript</tag>
</tags>
</entry>
<entry>
<title>JS字符串常见操作(todo)</title>
<url>/2017/02/27/front-end/basic/js/string/</url>
<content><![CDATA[<h1 id="字符串常见操作"><a href="#字符串常见操作" class="headerlink" title="字符串常见操作"></a>字符串常见操作</h1><a id="more"></a>]]></content>
<categories>
<category>Front-end</category>
<category>Basic</category>
</categories>
<tags>
<tag>Javascript</tag>
</tags>
</entry>
<entry>
<title>JS数组常见操作(todo)</title>
<url>/2017/02/27/front-end/basic/js/array/</url>
<content><![CDATA[<h1 id="JS数组常见操作"><a href="#JS数组常见操作" class="headerlink" title="JS数组常见操作"></a>JS数组常见操作</h1><h2 id="数组遍历"><a href="#数组遍历" class="headerlink" title="数组遍历"></a>数组遍历</h2><p>主要有for in 、for of、map、filter、forEach、every</p>
<ul>
<li><p>for(let … of …)和for (let … in …)</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="string">'a'</span>, <span class="string">'b'</span>]</span><br><span class="line"><span class="keyword">for</span>( <span class="keyword">let</span> i <span class="keyword">of</span> arr) {</span><br><span class="line"> <span class="built_in">console</span>.log(i) <span class="comment">// 输出a b</span></span><br><span class="line">}</span><br><span class="line"><span class="keyword">for</span>( <span class="keyword">let</span> i <span class="keyword">in</span> arr) {</span><br><span class="line"> <span class="built_in">console</span>.log(i)<span class="comment">// 输出0 1</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
</li>
<li><p>forEach<br>((item, index) => {})</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="string">'a'</span>, <span class="string">'b'</span>]</span><br><span class="line"><span class="keyword">let</span> brr = arr.forEach(<span class="function">(<span class="params">item,index,arr</span>) =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(item,index)</span><br><span class="line"> arr[<span class="number">0</span>] = <span class="number">1</span><span class="comment">// arr的值被改变</span></span><br><span class="line">})</span><br><span class="line"><span class="built_in">console</span>.log(arr, brr) <span class="comment">// [1, 'b'] undefined，说明无返回值</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>every<br>((item, index) => {})<br>return true继续，retrun false终止循环</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>]</span><br><span class="line"><span class="keyword">let</span> brr = arr.every(<span class="function">(<span class="params">item,index,arr</span>) =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(item,index, arr) <span class="comment">// a 0 [ 'a', 'b', 'c' ] ，第二次b 1 [ 'a1', 'b', 'c' ]</span></span><br><span class="line"> arr[index] = item +<span class="string">'1'</span></span><br><span class="line"> <span class="keyword">if</span>(index === <span class="number">1</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line">})</span><br><span class="line"><span class="built_in">console</span>.log(arr, brr) <span class="comment">// [ 'a1', 'b1', 'c' ] false</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>filter<br>return true则被记录，返回新数组，不影响原数组</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>]</span><br><span class="line"><span class="keyword">let</span> brr = arr.filter(<span class="function">(<span class="params">item,index,arr</span>) =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(item,index, arr) </span><br><span class="line"> <span class="comment">/**</span></span><br><span class="line"><span class="comment"> * a 0 [ 'a', 'b', 'c' ]</span></span><br><span class="line"><span class="comment"> b 1 [ 'a1', 'b', 'c' ]</span></span><br><span class="line"><span class="comment"> c 2 [ 'a1', 'b1', 'c' ]</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"> arr[index] = item +<span class="string">'1'</span><span class="comment">// 会影响arr值，不影响brr值</span></span><br><span class="line"> <span class="keyword">if</span>(index === <span class="number">1</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line">})</span><br><span class="line"><span class="built_in">console</span>.log(arr, brr) <span class="comment">//[ 'a1', 'b1', 'c1' ] [ 'a', 'c' ]</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>map<br>返回由返回值组成的新数组，不影响原数组<br>里面对数组的操作会影响原数组，参数arr是原数组的索引，操作影响后面</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>]</span><br><span class="line"><span class="keyword">let</span> brr = arr.map(<span class="function">(<span class="params">item,index,arr</span>) =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(item,index, arr) </span><br><span class="line"> <span class="comment">/**</span></span><br><span class="line"><span class="comment"> * a 0 [ 'a', 'b', 'c' ]</span></span><br><span class="line"><span class="comment"> b 1 [ 'a1', 'b', 'c' ]</span></span><br><span class="line"><span class="comment"> c 2 [ 'a1', 'b1', 'c' ]</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"> arr[index] = item +<span class="string">'1'</span></span><br><span class="line"> <span class="keyword">return</span> item+index</span><br><span class="line">})</span><br><span class="line"><span class="built_in">console</span>.log(arr, brr) <span class="comment">//[ 'a1', 'b1', 'c1' ] [ true, false, true ]</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>累加器reduce<br>arr.reduce(function(total, currentValue, currentIndex, arr), initialValue)<br>对数组所有数据执行进行reduce得到一个值<br>reduceRight() （从右到左）将其减少为单个值。</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>]</span><br><span class="line"><span class="keyword">let</span> brr = arr.reduce(<span class="function">(<span class="params">previousValue,currentValue,currentIndex, arr</span>) =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(previousValue,currentValue,currentIndex, arr) </span><br><span class="line"> <span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 0 'a' 0 [ 'a', 'b', 'c' ]</span></span><br><span class="line"><span class="comment"> 0a b 1 [ 'a1', 'b', 'c' ]</span></span><br><span class="line"><span class="comment"> 0ab c 2 [ 'a1', 'b1', 'c' ]</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"> arr[currentIndex] = currentValue +<span class="string">'1'</span></span><br><span class="line"> <span class="keyword">return</span> previousValue+currentValue</span><br><span class="line">}, <span class="number">0</span>)</span><br><span class="line"><span class="built_in">console</span>.log(arr, brr) <span class="comment">// [ 'a1', 'b1', 'c1' ] '0abc'</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<h2 id="数组增删改查、截取操作"><a href="#数组增删改查、截取操作" class="headerlink" title="数组增删改查、截取操作"></a>数组增删改查、截取操作</h2><p>### 增<br>有些在改章节</p>
<ul>
<li><p>push</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">arr = [<span class="string">'a'</span>,<span class="string">'b'</span>,<span class="string">'c'</span>]</span><br><span class="line">brr = arr.push(<span class="string">'d'</span>)</span><br><span class="line"><span class="built_in">console</span>.log(arr, arr.length, brr)<span class="comment">// [ 'a', 'b', 'c', 'd' ] 4 4</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>unshift<br>unshift() 方法将一个或多个元素添加到数组的开头，并返回新数组的长度。</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="string">'is'</span>, <span class="string">'a'</span>, <span class="string">'girl'</span>]</span><br><span class="line"><span class="keyword">let</span> re = arr.unshift(<span class="string">'I'</span>, <span class="string">'think'</span>, <span class="number">7</span>)</span><br><span class="line"><span class="built_in">console</span>.log(arr) <span class="comment">// [ 'I', 'think', 7, 'is', 'a', 'girl' ]</span></span><br><span class="line"><span class="built_in">console</span>.log(re) <span class="comment">// 6</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="删除"><a href="#删除" class="headerlink" title="删除"></a>删除</h3><p>有些在改章节</p>
<ul>
<li><p>pop<br>pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">arr = [<span class="string">'a'</span>,<span class="string">'b'</span>,<span class="string">'c'</span>]</span><br><span class="line">brr = arr.pop()</span><br><span class="line"><span class="built_in">console</span>.log(arr, arr.length, brr)<span class="comment">// [ 'a', 'b' ] 2 'c'</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>shift<br>shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="string">'my'</span>,<span class="string">'name'</span>,<span class="string">'is'</span>, <span class="string">'anne'</span>]</span><br><span class="line"><span class="keyword">let</span> re = arr.shift()</span><br><span class="line"><span class="built_in">console</span>.log(arr) <span class="comment">// [ 'name', 'is', 'anne' ]</span></span><br><span class="line"><span class="built_in">console</span>.log(re) <span class="comment">// my</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="改-插入or里面的元素，可增可删"><a href="#改-插入or里面的元素，可增可删" class="headerlink" title="改(插入or里面的元素，可增可删)"></a>改(插入or里面的元素，可增可删)</h3><ul>
<li><p>fill<br>arr.fill(value, start, end)<br>fill 方法是个可变方法, 它会改变调用它的 this 对象本身, 然后返回它, 而并不是返回一个副本.</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">arr = <span class="built_in">Array</span>(<span class="number">7</span>)</span><br><span class="line"><span class="built_in">console</span>.log(arr)<span class="comment">// [ , , , , , , ]</span></span><br><span class="line">arr.fill(<span class="number">0</span>)</span><br><span class="line"><span class="built_in">console</span>.log(arr)<span class="comment">// [ 0, 0, 0, 0, 0, 0, 0 ]</span></span><br><span class="line">arr.fill(<span class="number">1</span>,<span class="number">1</span>)</span><br><span class="line"><span class="built_in">console</span>.log(arr)<span class="comment">// [ 0, 1, 1, 1, 1, 1, 1 ]</span></span><br><span class="line">arr.fill(<span class="number">2</span>,<span class="number">2</span>,<span class="number">3</span>)</span><br><span class="line"><span class="built_in">console</span>.log(arr)<span class="comment">// [ 0, 1, 2, 1, 1, 1, 1 ]</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>splice<br>splice() 方法通过删除现有元素和/或添加新元素来更改一个数组的内容。<br>参数: (开始元素index(包括), 删除元素个数，要插入的元素1，要插入的元素2….)<br>返回值: 被删除元素组成的数组<br>数组值被改变</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="string">'0'</span>, <span class="string">'1'</span>, <span class="string">'2'</span>, <span class="string">'3'</span>, <span class="string">'4'</span>,<span class="string">'5'</span>]</span><br><span class="line"><span class="keyword">let</span> brr = arr.splice(<span class="number">1</span>, <span class="number">3</span>, <span class="number">8</span>, <span class="number">9</span>, <span class="string">'10'</span>)</span><br><span class="line"><span class="built_in">console</span>.log(arr)<span class="comment">// [ '0', 8, 9, '10', '4', '5' ]</span></span><br><span class="line"><span class="comment">// 返回被删除的值</span></span><br><span class="line"><span class="built_in">console</span>.log(brr)<span class="comment">// [ '1', '2', '3' ]</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="查"><a href="#查" class="headerlink" title="查"></a>查</h3><ul>
<li><p>indexOf<br>indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。<br>参数: (带查找元素，搜索起始index(含))</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="string">'a'</span>,<span class="string">'b'</span>,<span class="string">'c'</span>, <span class="string">'d'</span>, <span class="string">'e'</span>]</span><br><span class="line"><span class="keyword">let</span> r0 = arr.indexOf(<span class="string">'f'</span>)<span class="comment">//-1</span></span><br><span class="line"><span class="keyword">let</span> r1 = arr.indexOf(<span class="string">'b'</span>)<span class="comment">// 1</span></span><br><span class="line"><span class="keyword">let</span> r2 = arr.indexOf(<span class="string">'b'</span>, <span class="number">1</span>)<span class="comment">// 1</span></span><br><span class="line"><span class="keyword">let</span> r3 = arr.indexOf(<span class="string">'b'</span>, <span class="number">2</span>)<span class="comment">// -1</span></span><br><span class="line"><span class="built_in">console</span>.log(r0, r1, r2, r3)<span class="comment">// -1 1 1 -1</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>filter<br>前面有介绍。</p>
</li>
<li>find<br>ES6<br>find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。<br>arr.find((item,index,arr, ) => {return false/true})</li>
<li>findIndex<br>ES6<br>findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。<br>除返回值与find基本同</li>
</ul>
<h3 id="截取"><a href="#截取" class="headerlink" title="截取"></a>截取</h3><ul>
<li><p>slice<br>slice() 方法返回一个从开始到结束（不包括结束）选择的数组的一部分<strong><em>浅拷贝</em></strong>到一个新数组对象。原始数组不会被修改。</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="string">'0'</span>, <span class="string">'1'</span>, <span class="string">'2'</span>, <span class="string">'3'</span>, <span class="string">'4'</span>,<span class="string">'5'</span>]</span><br><span class="line"><span class="keyword">let</span> brr = arr.slice(<span class="number">2</span>, <span class="number">4</span>)</span><br><span class="line"><span class="built_in">console</span>.log(arr) <span class="comment">// [ '0', '1', '2', '3', '4', '5' ]</span></span><br><span class="line"><span class="built_in">console</span>.log(brr) <span class="comment">// [ '2', '3' ]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 浅拷贝，对象操作会影响原数组</span></span><br><span class="line"><span class="keyword">let</span> arr = [<span class="string">'0'</span>, <span class="string">'1'</span>, <span class="string">'2'</span>, {<span class="attr">a</span>: <span class="string">'a3'</span>}, <span class="string">'4'</span>,<span class="string">'5'</span>]</span><br><span class="line"><span class="keyword">let</span> brr = arr.slice(<span class="number">2</span>, <span class="number">4</span>)</span><br><span class="line">brr[<span class="number">1</span>].a = <span class="string">'b3'</span></span><br><span class="line"><span class="built_in">console</span>.log(arr) <span class="comment">// [ '0', '1', '2', { a: 'b3' }, '4', '5' ]</span></span><br><span class="line"><span class="built_in">console</span>.log(brr) <span class="comment">// [ '2', { a: 'b3' } ]</span></span><br></pre></td></tr></table></figure>
</li>
<li></li>
</ul>
<h2 id="数组排序"><a href="#数组排序" class="headerlink" title="数组排序"></a>数组排序</h2><ul>
<li>sort<br>sort() 方法在适当的位置对数组的元素进行排序，并返回数组。 sort 排序不一定是稳定的。默认排序顺序是根据字符串Unicode码点（0-9，a-z）。<br>参数: 比较函数(a, b) => {}，可无<br> 比较函数: <blockquote>
<ol>
<li>如果 compareFunction(a, b)小于0,那么 a 会被排列到b之前</li>
</ol>
</blockquote>
</li>
</ul>
<ol start="2">
<li>如果 compareFunction(a, b) 大于0，b会被排列到a之前</li>
<li>如果compareFunction(a, b)等于0, a和b的相对位置不变。备注：ECMAScript 标准并不保证这一行为，而且也不是所有浏览器都会遵守（例如 Mozilla 在 2003 年之前的版本）</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// a-z</span></span><br><span class="line"><span class="keyword">let</span> arr = [<span class="string">'my'</span>, <span class="string">'name'</span>, <span class="string">'is'</span>, <span class="string">'anne'</span>]</span><br><span class="line"><span class="keyword">let</span> re = arr.sort()</span><br><span class="line"><span class="built_in">console</span>.log(arr) <span class="comment">// [ 'anne', 'is', 'my', 'name' ]</span></span><br><span class="line"><span class="built_in">console</span>.log(re) <span class="comment">// [ 'anne', 'is', 'my', 'name' ]</span></span><br><span class="line"><span class="comment">// z-a</span></span><br><span class="line"><span class="keyword">const</span> compare = <span class="function">(<span class="params">a, b</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> a<b;</span><br><span class="line">}</span><br><span class="line"><span class="keyword">let</span> arr = [<span class="string">'my'</span>,<span class="string">'name'</span>,<span class="string">'is'</span>, <span class="string">'anne'</span>]</span><br><span class="line"><span class="keyword">let</span> re = arr.sort(compare)</span><br><span class="line"><span class="built_in">console</span>.log(arr) <span class="comment">// [ 'name', 'my', 'is', 'anne' ]</span></span><br><span class="line"><span class="built_in">console</span>.log(re) <span class="comment">// [ 'name', 'my', 'is', 'anne' ]</span></span><br><span class="line"><span class="comment">// 0-9</span></span><br><span class="line"><span class="keyword">let</span> arr = [<span class="number">4</span>, <span class="number">6</span>, <span class="number">3</span>, <span class="number">5</span>, <span class="number">2</span>]</span><br><span class="line"><span class="keyword">let</span> re = arr.sort()</span><br><span class="line"><span class="built_in">console</span>.log(arr) <span class="comment">// [ 2, 3, 4, 5, 6 ]</span></span><br><span class="line"><span class="built_in">console</span>.log(re) <span class="comment">// [ 2, 3, 4, 5, 6 ]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 9-0</span></span><br><span class="line"><span class="keyword">const</span> compare = <span class="function">(<span class="params">a, b</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> b-a;</span><br><span class="line">}</span><br><span class="line"><span class="keyword">let</span> arr = [<span class="number">4</span>, <span class="number">6</span>, <span class="number">3</span>, <span class="number">5</span>, <span class="number">2</span>]</span><br><span class="line"><span class="keyword">let</span> re = arr.sort(compare)</span><br><span class="line"><span class="built_in">console</span>.log(arr) <span class="comment">// [ 6, 5, 4, 3, 2 ]</span></span><br><span class="line"><span class="built_in">console</span>.log(re) <span class="comment">// [ 6, 5, 4, 3, 2 ]</span></span><br></pre></td></tr></table></figure>
<p>-reverse<br>reverse() 方法将数组中元素的位置颠倒。<br>倒转，也不是排序，返回数组索引，其实是一个对象<br><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="string">'1'</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="string">'4'</span>]</span><br><span class="line"><span class="keyword">let</span> re = arr.reverse()</span><br><span class="line"><span class="built_in">console</span>.log(arr)<span class="comment">// [ '4', 3, 2, '1' ]</span></span><br><span class="line"><span class="built_in">console</span>.log(re)<span class="comment">// [ '4', 3, 2, '1' ]</span></span><br></pre></td></tr></table></figure></p>
<h2 id="与字符串相关操作"><a href="#与字符串相关操作" class="headerlink" title="与字符串相关操作"></a>与字符串相关操作</h2><ul>
<li><p>toString</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="string">'1'</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="string">'4'</span>]</span><br><span class="line"><span class="keyword">let</span> re = arr.toString()</span><br><span class="line"><span class="built_in">console</span>.log(arr) <span class="comment">// [ '1', 2, 3, '4' ]</span></span><br><span class="line"><span class="built_in">console</span>.log(re)<span class="comment">// 1,2,3,4</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>join<br>join() 方法将数组（或一个类数组对象）的所有元素连接到一个字符串中。<br>参数: 连接字符串（默认,）</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="string">'my'</span>,<span class="string">'name'</span>,<span class="string">'is'</span>, <span class="string">'anne'</span>]</span><br><span class="line"><span class="keyword">let</span> re = arr.join() <span class="comment">// my,name,is,anne</span></span><br><span class="line"><span class="keyword">let</span> re2 = arr.join(<span class="string">''</span>) <span class="comment">// mynameisanne</span></span><br><span class="line"><span class="keyword">let</span> re3 = arr.join(<span class="string">' '</span>)<span class="comment">// my name is anne</span></span><br><span class="line"><span class="built_in">console</span>.log(arr)<span class="comment">// [ 'my', 'name', 'is', 'anne' ]</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>toLocaleString<br>toLocaleString() 返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString(Object、Number、Date)方法转成字符串，这些字符串将使用一个特定语言环境的字符串（例如一个逗号 “,”）隔开。</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> date = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line"><span class="keyword">let</span> arr = [<span class="string">'1'</span>, <span class="number">23456</span>, date]</span><br><span class="line"><span class="built_in">console</span>.log(arr) <span class="comment">// [ '1', 23456, 2017-10-29T15:26:00.535Z ]</span></span><br><span class="line"><span class="keyword">let</span> re = arr.toString()<span class="comment">// 1,23456,Sun Oct 29 2017 23:26:00 GMT+0800 (中国标准时间)</span></span><br><span class="line"><span class="keyword">let</span> rel = arr.toLocaleString()<span class="comment">// 1,23,456,2017-10-29 23:26:00</span></span><br><span class="line"><span class="built_in">console</span>.log(arr) <span class="comment">// [ '1', 23456, 2017-10-29T15:26:00.535Z ]</span></span><br><span class="line"><span class="built_in">console</span>.log(re)<span class="comment">// 1,23456,Sun Oct 29 2017 23:26:00 GMT+0800 (中国标准时间)</span></span><br><span class="line"><span class="built_in">console</span>.log(rel)<span class="comment">// 1,23,456,2017-10-29 23:26:00</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<h2 id="其他数组操作"><a href="#其他数组操作" class="headerlink" title="其他数组操作"></a>其他数组操作</h2><p>合并数组</p>
<ul>
<li>concat<br>concat() 方法用于合并<strong>两个或多个</strong>数组。此方法不会更改现有数组，而是返回一个新数组。<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="string">'my'</span>,<span class="string">'name'</span>]</span><br><span class="line"><span class="keyword">let</span> brr = [<span class="string">'is'</span>, <span class="string">'anne'</span>, {<span class="attr">b</span>: <span class="string">'hi'</span>}]</span><br><span class="line"><span class="keyword">let</span> crr = arr.concat(brr)</span><br><span class="line">crr[<span class="number">4</span>].b = <span class="string">'hello'</span></span><br><span class="line"><span class="built_in">console</span>.log(arr)<span class="comment">// 不变</span></span><br><span class="line"><span class="built_in">console</span>.log(brr) <span class="comment">// 改变了，说明是浅复制[ 'is', 'anne', { b: 'hello' } ]</span></span><br><span class="line"><span class="built_in">console</span>.log(crr) <span class="comment">// [ 'my', 'name', 'is', 'anne', { b: 'hello' } ]</span></span><br></pre></td></tr></table></figure></li>
</ul>
]]></content>
<categories>
<category>Front-end</category>
<category>Basic</category>
</categories>
<tags>
<tag>Javascript</tag>
</tags>
</entry>
<entry>
<title>git同步</title>
<url>/2017/02/27/Tec/git/git%20synchronization/</url>
<content><![CDATA[<p><a href="http://www.ruanyifeng.com/blog/2014/06/git_remote.html" target="_blank" rel="noopener">git远程操作详解——阮一峰</a></p>
<h1 id="git同步问题"><a href="#git同步问题" class="headerlink" title="git同步问题"></a>git同步问题</h1><h3 id="代码回滚到某一指定版本"><a href="#代码回滚到某一指定版本" class="headerlink" title="代码回滚到某一指定版本"></a>代码回滚到某一指定版本</h3><ol>
<li>git reflog查看版本代号</li>
<li>git reset –hard 版本号，回滚<a id="more"></a></li>
<li><p>git push,显示everything up-to-date，又做了以下尝试：</p>
<blockquote>
<p>一开始git服务器仓库是完全空的，不包含任何一个分支(branch)，因此刚开始Push时需要指定一个。<br>执行git remote -v后看到自己的remote端名字为origin:<br>$ git remote -v<br>origin <a href="https://code.google.com/p/micolog2" target="_blank" rel="noopener">https://code.google.com/p/micolog2</a> (fetch)<br>origin <a href="https://code.google.com/p/micolog2" target="_blank" rel="noopener">https://code.google.com/p/micolog2</a> (push)<br>执行git branch后看到自己当下用的分支是master<br>$ git branch<br>master<br>因此在本地commit后，再执行<br>git push origin master<br>但最终失败</p>
</blockquote>
</li>
</ol>
]]></content>
<categories>
<category>Tec</category>
<category>Git</category>
</categories>
<tags>
<tag>Git</tag>
</tags>
</entry>
<entry>
<title>github域名绑定</title>
<url>/2017/02/27/Tec/Blog/github%20AND%20domain%20name/</url>
<content><![CDATA[<h1 id="github域名绑定"><a href="#github域名绑定" class="headerlink" title="github域名绑定"></a>github域名绑定</h1><h2 id="域名相关概念"><a href="#域名相关概念" class="headerlink" title="域名相关概念"></a>域名相关概念</h2><a id="more"></a>
<h3 id="A记录"><a href="#A记录" class="headerlink" title="A记录"></a>A记录</h3><p>是用来指定主机名(或域名)对应的IP地址记录。用户可以将该域名下的网站服务器指向到自己的web server上。同时也可以设置您域名的二级域名。<br><a id="more"></a></p>
<h3 id="CNAME-别名"><a href="#CNAME-别名" class="headerlink" title="CNAME(别名)"></a>CNAME(别名)</h3><p>也被称为规范名字。这种记录允许您将多个名字映射到同一台计算机。通常用于同时提供WWW和MAIL服务的计算机。例如，有一个A记录为host.mydomain.com。 它同时提供WWW和MAIL服务，为了便于用户访问服务。可以为该计算机设置两个别名（CNAME）：WWW和MAIL。 这两个别名的全称就是<a href="http://www.mydomain.com和mail.mydomain.com，将他们都指向host.mydomain.com：" target="_blank" rel="noopener">www.mydomain.com和mail.mydomain.com，将他们都指向host.mydomain.com：</a></p>
<blockquote>
<p>A<br>host.mydomain.com -> IPAddress<br>CNAME<br><a href="http://www.mydomain.com" target="_blank" rel="noopener">www.mydomain.com</a> -> host.mydomain.com<br>mail.mydomain.com -> host.mydomain.com</p>
</blockquote>
<p>同样的方法可以用于当您拥有多个域名需要指向同一服务器IP，此时您就可以将一个域名做A记录指向服务器IP然后将其他的域名做别名到之前做A记录的域名上，那么当您的服务器IP地址变更时您就可以不必麻烦的一个一个域名更改指向了 只需要更改做A记录的那个域名其他做别名的那些域名的指向也将自动更改到新的IP地址上了。CNAME还广泛用于需要CDN加速的场景下，因为这个时候，域名到IP地址的映射是事先不知道的，需要根据访问者的地理位置来确定镜像服务器的IP地址。</p>
<h3 id="TTL-Time-To-Live生存时间"><a href="#TTL-Time-To-Live生存时间" class="headerlink" title="TTL(Time To Live生存时间)"></a>TTL(Time To Live生存时间)</h3><p>它表示DNS记录在DNS服务器上缓存时间。应用实例：</p>
<blockquote>
<p>假设，有这样一个域名myhost.cnMonkey.com（其实，这就是一条DNS记录，通常表示在abc.com域中有一台名为myhost的主机）对应IP地 址为1.1.1.1，它的TTL为10分钟。这个域名或称这条记录存储在一台名为dns.cnMonkey.com的DNS服务器上。 现在有一个用户键入一下地址（又称URL）：<a href="http://myhost.cnMonkey.com" target="_blank" rel="noopener">http://myhost.cnMonkey.com</a> 这时会发生什么呢？</p>
<blockquote>
<p>该访问者指定的DNS服务器（或是他的ISP,互联网服务商, 动态分配给他的)8.8.8.8就会试图为他解释myhost.cnMonkey.com，当然8.8.8.8这台DNS服务器由于没有包含 myhost.cnMonkey.com这条信息，因此无法立即解析，但是通过全球DNS的递归查询后，最终定位到dns.cnMonkey.com这台DNS服务器， dns.cnMonkey.com这台DNS服务器将myhost.cnMonkey.com对应的IP地址1.1.1.1告诉8.8.8.8这台DNS服务器，然有再由 8.8.8.8告诉用户结果。8.8.8.8为了以后加快对myhost.cnMonkey.com这条记录的解析，就将刚才的1.1.1.1结果保留一段时间，这 就是TTL时间，在这段时间内如果用户又有对myhost.cnMonkey.com这条记录的解析请求，它就直接告诉用户1.1.1.1，当TTL到期则又会重复 上面的过程。</p>
</blockquote>
</blockquote>
<h3 id="域名分级"><a href="#域名分级" class="headerlink" title="域名分级"></a>域名分级</h3><p>子域名是个相对的概念，是相对父域名来说的。域名有很多级，中间用点分开。例如中国国家顶级域名CN，所有以 CN 结尾的域名便都是它的子域。例如：<a href="http://www.zzy.cn" target="_blank" rel="noopener">www.zzy.cn</a> 便是 zzy.cn 的子域，而 zzy.cn 是 cn 的子域。<br>“二级域名”：目前有很多用户认为“二级域名”是自己所注册域名的下一级域名，实际上这里所谓的“二级域名”并非真正的“二级”，而应该称为“次级”(相对次级)</p>
<h3 id="绑定域名到GitHub-Page"><a href="#绑定域名到GitHub-Page" class="headerlink" title="绑定域名到GitHub-Page"></a>绑定域名到GitHub-Page</h3><ol>
<li>购买域名</li>
<li>域名解析<blockquote>
<p>添加如下解析：<br>@ A 192.30.252.153<br>@ A 192.30.252.154<br>www CNAME username.github.io.</p>
</blockquote>
</li>
<li>source文件夹添加CNAME文件：<blockquote>
<p>example.com</p>
</blockquote>
</li>
</ol>
<blockquote>
<ol>
<li>A记录：域名直接映射IP，但是这个IP换成了192.30.252.153或192.30.252.154。</li>
<li>如果域名提供商支持ALIAS或ANAME，将域名指向username.github.io，这样可以在域名解析的时候得到一个动态的IP，这个IP是一台离你最近的镜像主机</li>
<li>CNMAE：如果你希望使用二级域名访问，将一个二级域名配置成CNAME，指向username.github.io，这样可以在域名解析的时候得到一个动态的IP，这个IP是一台离你最近的镜像主机<br>其中2、3两种方式能够享受CDN加速，因为域名不是直接与IP地址映射的，github就有机会帮用户选择最近的镜像主机提供服务。<br>我的解析结果如下图所示，供参考：<br><img src="http://ww2.sinaimg.cn/mw690/c5202edfjw1f8l4vbz55qj20ur0bbtc6.jpg" alt="dns"><br>3 在hexo的<strong>source根目录</strong>中添加CNAME文件，内容为自己的域名地址<pre><code>注意CNAME是文件，不是文本文档，可通过git bash的touch CNAME命令添加
</code></pre><img src="http://ww4.sinaimg.cn/mw690/c5202edfjw1f8l4vbc2gdj20cx060wez.jpg" alt="CNAME"></li>
</ol>
</blockquote>
<p>再等上几分钟，就可以用域名访问自己的github博客啦</p>
<h2 id="遇到的问题"><a href="#遇到的问题" class="headerlink" title="遇到的问题"></a>遇到的问题</h2><p>在绑定域名之后，我在本地hexo deploy一直出错，git bash提示：</p>
<blockquote>
<p>Please make sure you have the correct access rights and the repository exists.</p>
</blockquote>
<p>因为这个问题，我做了以下尝试：<br>方法1.重置SSH key，可成功连接到github<br>结果：仍旧报错<br>方法2.删除github内容，重建仓库，使用git将public文件夹上传到github</p>
<blockquote>
<p>过程中发现github和用户可以通过https和ssh两种方式传递信息，ssh可以不用输入用户名和密码，https则需要</p>
</blockquote>
<p><strong>git同步步骤</strong></p>
<blockquote>
<ol>
<li>在某文件夹中，鼠标右键，选择git init here，然后将需上传文件都放到此处</li>
<li>add，输入仓库名和仓库地址(https)</li>
<li><p>先git pull 仓库名 分支名，然后git push<br><strong>注意：push的文件过大会报错</strong></p>
<blockquote>
<p>Error: fatal: The remote end hung up unexpectedly</p>
</blockquote>
</li>
</ol>
</blockquote>
<p>执行下面命令扩大缓存</p>
<blockquote>
<blockquote>
<p>git config http.postBuffer 524288000</p>
</blockquote>
</blockquote>
<ol>
<li>success后就可以查看啦</li>
</ol>
<p>方法3.<br>重建hexo文件夹，按init,new,g,(deploy前先安装hexo：<code>npm install hexo-deployer-git --save</code>),d</p>
<blockquote>
<p>deploy由于文件里有主题，需扩大git上传最大值</p>
<blockquote>
<p>git config http.postBuffer 524288000</p>
</blockquote>
</blockquote>
<p>若上传很慢还报错，请翻墙后重试（血泪的教训啊）</p>
]]></content>
<categories>
<category>Tec</category>
<category>Blog</category>
</categories>
<tags>
<tag>Github</tag>
<tag>Network</tag>
</tags>
</entry>
<entry>
<title>hexo nexT主题配置与修改</title>
<url>/2017/02/27/Tec/Blog/hexo-nexT%20theme%20configuration%20and%20modification/</url>
<content><![CDATA[<h3 id="修改主题配色"><a href="#修改主题配色" class="headerlink" title="修改主题配色"></a>修改主题配色</h3><p>可通过修改css中的_variables颜色变量来修改颜色，或者直接在css中的main.styl中重写覆盖以前的css文件(地址：themes\next-mine\source\css_variables)</p>
<h3 id="添加搜索功能"><a href="#添加搜索功能" class="headerlink" title="添加搜索功能"></a>添加搜索功能</h3><h4 id="方法一-添加algolia搜索"><a href="#方法一-添加algolia搜索" class="headerlink" title="方法一 添加algolia搜索"></a>方法一 添加algolia搜索</h4><p>具体请参阅<a href="http://www.cnblogs.com/doublezcc/p/6140788.html" target="_blank" rel="noopener">hexo+next博客添加搜索</a><br>注意：若未安装algolia，请先执行npm install hexo-algolia –save<br>输入appID等信息时都没有引号<br><a id="more"></a><br>添加完搜索功能后github网页就404了，忧伤…<br>尝试1· 网上让添加nojekyll文件禁用vendors，无效</p>
<p>最终发现被自己摆了一道，deploy了之后CNAME文件被自动删除了，无法和域名对应起来自然就报错了…<br>当我们在本地使用hexo deploy命令再一次部署博客时，会发现博客网页的css样式丢失或是404错误，这是因为本地的博客工程里面还没有CNAME，当我们重新部署后，远程的博客工程会和本地保持同步，将CNAME文件删除，所以我们要在本地添加CNAME文件：<br>这里我们需要注意的是：CNAME文件添加的目录是在根目录下的source文件夹，完成添加后重新部署，博客网站又会恢复正常。</p>
<p>tips:<br>webstorm可以使用双击shift进行全局搜索，配合chrome的审查功能可以快速定位元素的样式设置位置。</p>
<h4 id="方法2-使用自带搜索"><a href="#方法2-使用自带搜索" class="headerlink" title="方法2 使用自带搜索"></a>方法2 使用自带搜索</h4><p>具体可参阅<a href="http://www.ezlippi.com/blog/2017/02/hexo-search.html" target="_blank" rel="noopener">Hexo博客添加站内搜索</a><br>注：配置好后记得到next的配置文档中打开local search。<br>上面文档还包含添加rss和站点地图插件的方法</p>
<h4 id="添加分类"><a href="#添加分类" class="headerlink" title="添加分类"></a>添加分类</h4><p><a href="https://github.com/iissnan/hexo-theme-next/wiki/%E5%88%9B%E5%BB%BA%E5%88%86%E7%B1%BB%E9%A1%B5%E9%9D%A2" target="_blank" rel="noopener">hexo创建分类页面</a><br>使用时在博客上面加入categories: [分类1，分类2]即可<br>注：这是hexo的官方帮助文档，有问题都可在上面找找答案</p>
<h4 id="添加不蒜子统计"><a href="#添加不蒜子统计" class="headerlink" title="添加不蒜子统计"></a>添加不蒜子统计</h4><p>其实貌似只用next中打开此项就可以了，上传到github的统计计数基本准确。<br>下面是尝试用leanCloud服务器来做的，没太懂…<br><a href="http://www.jeyzhang.com/hexo-next-add-post-views.html#" target="_blank" rel="noopener">hexo添加统计</a><br>注意：上面的参考我并没有做出来，(添加语言里post字段一直报错)结合帮助文档一起看吧:<br><a href="http://theme-next.iissnan.com/third-party-services.html#analytics-busuanzi" target="_blank" rel="noopener"> 第三方服务集成</a></p>
<h4 id="百度谷歌收录"><a href="#百度谷歌收录" class="headerlink" title="百度谷歌收录"></a>百度谷歌收录</h4><ol>
<li>在<a href="http://zhanzhang.baidu.com/dashboard/index" target="_blank" rel="noopener">百度站长平台</a>添加站点</li>
<li><p>一步步按提示操作，选择HTML标签验证,记录百度提供的需加载信息，大概如下：</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"baidu-site-verification"</span> <span class="attr">content</span>=<span class="string">"你的key"</span> /></span></span><br></pre></td></tr></table></figure>
</li>
<li><p>在next主题配置文件中输入：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">baidu-site-verification:</span> <span class="string">你的key</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>deploy完成验证即可</p>
</li>
</ol>
]]></content>
<categories>
<category>Tec</category>
<category>Blog</category>
</categories>
<tags>
<tag>Hexo</tag>
</tags>
</entry>
<entry>
<title>hexo建站过程</title>
<url>/2017/02/27/Tec/Blog/Hexo-blog%20building/</url>
<content><![CDATA[<h1 id="用hexo搭建博客全过程"><a href="#用hexo搭建博客全过程" class="headerlink" title="用hexo搭建博客全过程"></a>用hexo搭建博客全过程</h1><blockquote>
<p>注：本文主要参考以下页面加上自己的经历整理而成：</p>
<ol>
<li><a href="http://www.jianshu.com/p/44a1be815400" target="_blank" rel="noopener">手把手教你用Hexo在GitHub上搭建个人博客</a></li>
<li><a href="http://www.cnblogs.com/zhcncn/p/4097881.html" target="_blank" rel="noopener">Hexo搭建Github静态博客 - 金石开 - 博客园</a><a id="more"></a>
</li>
</ol>
</blockquote>
<h2 id="1-环境准备"><a href="#1-环境准备" class="headerlink" title="1 环境准备"></a>1 环境准备</h2><ul>
<li><p>node.js npm和git安装，</p>
<blockquote>
<p>npm是随同nodejs一起安装的包管理工具，能解决nodejs代码部署上的许多问题（下载、上传程序or第三方包），这里通过npm安装hexo</p>
</blockquote>
</li>
<li><p>hexo安装<br>打开命令行工具，执行：<br><code>$npm install -g hexo</code></p>
</li>
</ul>
<p>若一直没有反应，可根据<a href="http://www.jianshu.com/p/cce30447fc35" target="_blank" rel="noopener">npm 安装 hexo 卡住问题解决</a>解决问题</p>
<h2 id="2-hexo使用"><a href="#2-hexo使用" class="headerlink" title="2 hexo使用"></a>2 hexo使用</h2><ul>
<li>建立hexo文件夹</li>
<li>在hexo目录下打开git bash，执行<br><code>hexo init</code></li>
<li>第一次启用需多执行<br><code>npm install</code></li>
<li><p>此时执行下列命令，便可以看大初始博客内容啦：<br><code>hexo sever</code></p>
<h2 id="3-文章编写"><a href="#3-文章编写" class="headerlink" title="3 文章编写"></a>3 文章编写</h2></li>
<li><p>在hexo目录下，执行：<br><code>hexo new "title"</code></p>
</li>
<li>之后可以在source/_posts/目录下的md文档进行编写</li>
<li><p>编写完后执行下列命令,会自动生成相应文章<br><code>hexo generate</code></p>
<blockquote>
<p>若出现错误，可先执行<br><code>hexo clean</code></p>
</blockquote>
</li>
</ul>
<p>Tips：</p>
<ul>
<li>more折叠文章，加入<br><code><!-- more --></code></li>
<li><p>tags配置正确写法：</p>
<blockquote>
<p>tags:[hexo,123]</p>
</blockquote>
</li>
</ul>
<h2 id="4-个性化设置"><a href="#4-个性化设置" class="headerlink" title="4 个性化设置"></a>4 个性化设置</h2><p>对自己的hexo博客进行个性化配置，主要从_config.yml入手。建议先备份该文件，再进行修改的尝试。</p>
<p>在hexo目录下找到_config.yml文件。使用文本编辑器打开，所有的配置选项都在这里，可以查阅文档了解每个配置项的意思，如title代表你博客的名称，author是你的名字，subtitle是副标题等，这些配置项会反应在博客的界面上，不同的主题（Theme，后文会提到）中，这些字段的表现形式是不一样的。<br>我们主要关心三个部分：</p>
<ul>
<li>基本信息，如 title、subtitle、description、author等。基本信息的修改依照主题的不同会有不同的表现方式，按照自己选择的主题来尝试并观察变化即可。</li>
<li>主题 theme。</li>
<li>部署 deploy ，后文会已发布到Github为例说明。deploy章节的修改见4.3章节。</li>
</ul>
<h3 id="4-1基本信息"><a href="#4-1基本信息" class="headerlink" title="4.1基本信息"></a>4.1基本信息</h3><p>可自行按需修改，注意：</p>
<blockquote>
<p>每一个值的冒号后面都有一个半角空格！</p>
</blockquote>
<h3 id="4-2主题"><a href="#4-2主题" class="headerlink" title="4.2主题"></a>4.2主题</h3><h4 id="4-2-1下载主题"><a href="#4-2-1下载主题" class="headerlink" title="4.2.1下载主题"></a>4.2.1下载主题</h4><ul>
<li><p>可参考知乎文章</p>
<blockquote>
<p><a href="http://www.zhihu.com/question/24422335" target="_blank" rel="noopener">有哪些好看的hexo主题</a></p>
</blockquote>
</li>
<li><p>主题下载方式<br>在hexo目录下，git命令行中输入：<br><code>git clone 主题地址 本地存储地址(themes/name)</code><br>也可直接在themes目录下clone，不用指定存储位置，自动存</p>
<h4 id="配置主题"><a href="#配置主题" class="headerlink" title="配置主题"></a>配置主题</h4><blockquote>
<p>在_config.yml中进行配置</p>
</blockquote>
</li>
</ul>
<h4 id="4-2-2使用主题"><a href="#4-2-2使用主题" class="headerlink" title="4.2.2使用主题"></a>4.2.2使用主题</h4><p>在_config.yml中修改其theme字段为</p>
<blockquote>
<h2 id="Themes-http-hexo-io-themes"><a href="#Themes-http-hexo-io-themes" class="headerlink" title="Themes: http://hexo.io/themes/"></a>Themes: <a href="http://hexo.io/themes/" target="_blank" rel="noopener">http://hexo.io/themes/</a></h2><p>theme: yilia</p>
</blockquote>
<p><strong>注意：冒号后有个半角空格</strong><br>配置完毕后，依次执行以下命令：</p>
<blockquote>
<p>hexo clean<br>hexo generate<br>hexo server</p>
</blockquote>
<h2 id="5-连接到github"><a href="#5-连接到github" class="headerlink" title="5 连接到github"></a>5 连接到github</h2><h3 id="5-1前期准备"><a href="#5-1前期准备" class="headerlink" title="5.1前期准备"></a>5.1前期准备</h3><p>1.github注册，创建一个仓库，命名为:用户名.github.io<br>2.description选填，选public,点击create repository<br>3.现在你就可以通过<a href="http://name.github.io访问你的页面了（空页面可能会报错）" target="_blank" rel="noopener">http://name.github.io访问你的页面了（空页面可能会报错）</a><br><strong>注意：若需要和github通过SSH进行安全通信，请参考：</strong></p>
<blockquote>
<p><a href="http://blog.csdn.net/binyao02123202/article/details/20130891" target="_blank" rel="noopener">github设置添加SSH</a></p>
</blockquote>
<h3 id="5-2配置deploy"><a href="#5-2配置deploy" class="headerlink" title="5.2配置deploy"></a>5.2配置deploy</h3><p>打开hexo的_config.yml文件，找到deployment章节,将type改为git，repository改为你的GitHubPages地址。这个地址应该长这样：</p>
<blockquote>
<p><a href="mailto:git@github.com" target="_blank" rel="noopener">git@github.com</a>:[你的GitHub用户名]/[你的GitHub用户名].github.io.git</p>
</blockquote>
<p>branch用来指向分支，如果没有特定的分支配置，可以使用默认的master。<br>最终我的deployment部分如下，供参考</p>
<blockquote>
<h1 id="Deployment"><a href="#Deployment" class="headerlink" title="Deployment"></a>Deployment</h1><h2 id="Docs-http-hexo-io-docs-deployment-html"><a href="#Docs-http-hexo-io-docs-deployment-html" class="headerlink" title="Docs: http://hexo.io/docs/deployment.html"></a>Docs: <a href="http://hexo.io/docs/deployment.html" target="_blank" rel="noopener">http://hexo.io/docs/deployment.html</a></h2><p>deploy:<br>type: git<br>repository: <a href="mailto:git@github.com" target="_blank" rel="noopener">git@github.com</a>:vonxq/vonxq.github.io.git<br>branch: master<br><strong>注意：第一次deploy前需执行：</strong><br><code>npm install hexo-deployer-git --save</code><br>最后执行如下命令将博客发布到自己的github首页上<br><code>hexo deploy</code><br>之后可自行查看首页内容</p>
</blockquote>
<p>deploy成功网页却404解决办法：</p>
<blockquote>
<p><a href="http://awhisper.github.io/2016/11/21/GitPage-Next%E7%9A%84CSS-JS%E9%94%99%E8%AF%AF/?" target="_blank" rel="noopener">GitPage部署Hexo NexT主题的CSS/JS错误</a><br>注意：</p>
</blockquote>
<blockquote>
<h2 id="6-日常维护"><a href="#6-日常维护" class="headerlink" title="6 日常维护"></a>6 日常维护</h2><ol>
<li>当部署成功后，我们日常只需要：</li>
<li>新建文章(new)</li>
<li>找到生成的.md然后编辑并保存</li>
<li>生成博客(generate)</li>
<li>部署(deploy)<br>就可以完成新文章的发布。</li>
</ol>
</blockquote>
<p>日常使用命令整理如下：</p>
<blockquote>
<p>hexo new “文章标题名称” //新建文章<br>hexo clean //清理（非必须），在遇到问题时可尝试先clean再generate<br>hexo generate //将文章生成为博客的一部分<br>hexo g //同上，generate的简写<br>hexo server //本地预览（非必须）<br>hexo deploy //推送到GitHub<br>hexo d //同上，deploy的简写</p>
</blockquote>
<h2 id="tips"><a href="#tips" class="headerlink" title="tips"></a>tips</h2><h3 id="字数、阅读时间统计"><a href="#字数、阅读时间统计" class="headerlink" title="字数、阅读时间统计"></a>字数、阅读时间统计</h3><ol>
<li><p>安装插件</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install hexo-wordcount@2 --save</span><br><span class="line">(Node 版本 7.6.0 之前,安装 2.x 版本)</span><br></pre></td></tr></table></figure>
</li>
<li><p>开启统计</p>
<blockquote>
<p>post_wordcount:<br>item_text: true<br>wordcount: true<br>min2read: true<br>separated_meta: true</p>
</blockquote>
</li>
</ol>
<h3 id="使用hexo模板scaffold"><a href="#使用hexo模板scaffold" class="headerlink" title="使用hexo模板scaffold"></a>使用hexo模板scaffold</h3><p>hexo根目录下scaffold文件夹下可自定义模板，之后再hexo new时会被调用<br>post.md为普通文章模板</p>
<h3 id="hexo博客评论功能"><a href="#hexo博客评论功能" class="headerlink" title="hexo博客评论功能"></a>hexo博客评论功能</h3><p><a href="https://imsun.net/posts/gitment-introduction/" target="_blank" rel="noopener">Gitment：使用 GitHub Issues 搭建评论系统</a></p>
]]></content>
<categories>
<category>Tec</category>
<category>Blog</category>
</categories>
<tags>
<tag>Hexo</tag>
<tag>GitHub</tag>
</tags>
</entry>
<entry>
<title>markdown基础</title>
<url>/2017/02/14/Tec/Blog/markdown%20basic%20knowledge/</url>
<content><<br>链接为：[链接名](链接地址)<br>例子如下：<br>图片：<br><img src="http://img4.imgtn.bdimg.com/it/u=1344213028,140587812&fm=11&gp=0.jpg" alt="玫瑰花"><br>链接：<br><a href="https://www.baidu.com" target="_blank" rel="noopener">百度</a></p>
<h2 id="当页跳转"><a href="#当页跳转" class="headerlink" title="当页跳转"></a>当页跳转</h2><blockquote>
<ol>
<li>先定义一个锚(id)<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span id=<span class="string">"jump"</span>>Hello World<<span class="regexp">/span></span></span><br></pre></td></tr></table></figure>
</li>
</ol>
</blockquote>
<ol start="2">
<li>然后使用markdown的语法<figure class="highlight"><table><tr><td class="code"><pre><span class="line">[XXXX](#jump)</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h1 id="粗体与斜体"><a href="#粗体与斜体" class="headerlink" title="粗体与斜体"></a>粗体与斜体</h1><p>Markdown 的粗体和斜体也非常简单，用两个 <em> 包含一段文本就是粗体的语法，用一个 </em> 包含一段文本就是斜体的语法，不用空格隔开。<br>如下：<br><strong>我是粗体</strong><br><em>我是斜体</em></p>
<h1 id="表格"><a href="#表格" class="headerlink" title="表格"></a>表格</h1><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">| 默认左对齐 | 居中 | 右对齐 |</span><br><span class="line">| ------------- |:-------------:| -----:|</span><br><span class="line">| col 3 is | right-aligned | $1600 |</span><br><span class="line">| col 2 is | centered | $12 |</span><br><span class="line">| zebra stripes | are neat | $1 |</span><br></pre></td></tr></table></figure>
<p>生成效果：(Table前最好换行，不然可能不显示)</p>
<table>
<thead>
<tr>
<th>默认左对齐</th>
<th style="text-align:center">居中</th>
<th style="text-align:right">右对齐</th>
</tr>
</thead>
<tbody>
<tr>
<td>col 3 is</td>
<td style="text-align:center">right-aligned</td>
<td style="text-align:right">$1600</td>
</tr>
<tr>
<td>col 2 is</td>
<td style="text-align:center">centered</td>
<td style="text-align:right">$12</td>
</tr>
<tr>
<td>zebra stripes</td>
<td style="text-align:center">are neat</td>
<td style="text-align:right">$1</td>
</tr>
</tbody>
</table>
<h1 id="代码框"><a href="#代码框" class="headerlink" title="代码框"></a>代码框</h1><p>行内代码(inline code)：`\<code>`,效果：<code><code></code></p>
<p>块代码(block code)：代码每一行的前面都加4个空格或一个tab，效果：<br> code1<br> code2</p>
<p>Fenced Code Block：第一行和最后一行都是3个 “ ` “，中间的行是代码，如下</p>
<p>```<br>\<code><br>```<br>效果：<br><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line"><code> </span><br><span class="line">haha</span><br></pre></td></tr></table></figure></p>
]]></content>
<categories>
<category>Tec</category>
<category>Blog</category>
</categories>
<tags>
<tag>Markdown</tag>
</tags>
</entry>
</search>
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарий ( 0 )