-
Notifications
You must be signed in to change notification settings - Fork 3
/
content.json
1 lines (1 loc) · 181 KB
/
content.json
1
{"meta":{"title":"I am Oliver","subtitle":null,"description":"这是我的博客。会记录平时遇到的技术问题~","author":"Oliver Wang","url":"https://ochukai.github.io","root":"/"},"pages":[{"title":"tags","date":"2023-07-16T05:19:55.000Z","updated":"2023-07-16T05:20:21.462Z","comments":true,"path":"tags/index.html","permalink":"https://ochukai.github.io/tags/index.html","excerpt":"","text":""}],"posts":[{"title":"Clearfix 的正确写法~","slug":"wrong-clearfix-make-me-crazy","date":"2019-06-06T02:23:45.000Z","updated":"2023-07-16T05:40:56.177Z","comments":true,"path":"/wrong-clearfix-make-me-crazy/","link":"","permalink":"https://ochukai.github.io/wrong-clearfix-make-me-crazy/","excerpt":"","text":"Clearfix 就是这么简单！ 123456789.clearfix:after,.clearfix:before { display: table; content: " "}.clearfix:after { clear: both}","categories":[{"name":"css","slug":"css","permalink":"https://ochukai.github.io/categories/css/"}],"tags":[{"name":"css","slug":"css","permalink":"https://ochukai.github.io/tags/css/"},{"name":"html","slug":"html","permalink":"https://ochukai.github.io/tags/html/"},{"name":"clearfix","slug":"clearfix","permalink":"https://ochukai.github.io/tags/clearfix/"}]},{"title":"我的第三个纹身 - 小死神 💀","slug":"my-third-tattoo","date":"2019-05-06T09:54:06.000Z","updated":"2023-07-16T03:46:17.423Z","comments":true,"path":"/my-third-tattoo/","link":"","permalink":"https://ochukai.github.io/my-third-tattoo/","excerpt":"","text":"其实很早之前就有第三个了，拖延症最近一直很严重，整整三个月才治好，哈哈~ 这次手稿我搞丢了，就直接上图吧，咳咳，不该显示的我都已经屏蔽掉了，现在只剩下愉悦~ 😄 这次纹身还是大众点评送的，不过纹身师水平还凑活，关键是力气大，男的，压得我喘不过气，因为他的手正好按住了我的肩膀，纹身的针在我胸前游走，又痒又疼，骨头也嗡嗡的，动又不敢动，简直酸爽。 介个纹身也还算喜欢吧，下次准备在左胸前来个图腾，或者字母，或者水墨来一团，总之就是还没有想好~ 假奶~","categories":[],"tags":[{"name":"TATTOO","slug":"tattoo","permalink":"https://ochukai.github.io/tags/tattoo/"},{"name":"纹身","slug":"纹身","permalink":"https://ochukai.github.io/tags/%E7%BA%B9%E8%BA%AB/"},{"name":"死神","slug":"死神","permalink":"https://ochukai.github.io/tags/%E6%AD%BB%E7%A5%9E/"}]},{"title":"千字文","slug":"qian-zi-wen","date":"2019-04-30T07:32:12.000Z","updated":"2023-07-16T03:46:17.424Z","comments":true,"path":"/qian-zi-wen/","link":"","permalink":"https://ochukai.github.io/qian-zi-wen/","excerpt":"","text":"天地玄黄 宇宙洪荒 日月盈昃(zè) 辰宿列张 寒来暑往 秋收冬藏(cáng) 闰馀(yú)成岁 律吕调阳 云腾致雨 露结为霜 金生丽水 玉出昆冈 剑号巨阙(què) 珠称夜光 果珍李柰 菜重芥姜 海咸河淡 鳞潜羽翔 龙师火帝 鸟官人皇 始制文字 乃服衣裳 推位让国 有虞陶唐 吊民伐罪 周发殷汤 坐朝(cháo)问道 垂拱平章 爱育黎首 臣伏戎羌(qiāng) 遐迩一体 率宾归王 鸣凤在竹 白驹食场 化被草木 赖及万方 盖此身发 四大五常 恭惟鞠养 岂敢毁伤 女慕贞洁 男效才良 知过必改 得能莫忘 罔谈彼短 靡(mí)恃己长 信使可复 器欲难量 墨悲丝染 诗赞羔羊 景行维贤 克念作圣 德建名立 形端表正 空谷传声 虚堂习听 祸因恶积 福缘善庆 尺璧非宝 寸阴是竞 资父事君 曰(yuē)严与敬 孝当竭力 忠则尽命 临深履薄 夙兴温凊 似兰斯馨 如松之盛 川流不息 渊澄取映 容止若思 言辞安定 笃初诚美 慎终宜令 荣业所基 籍甚无竟 学优登仕 摄职从政 存以甘棠 去而益咏 乐殊贵贱 礼别尊卑 上和下睦 夫唱妇随 外受傅训 入奉母仪 诸姑伯叔 犹子比儿 孔怀兄弟 同气连枝 交友投分 切磨箴(zhēn)规 仁慈隐恻 造次弗离 节义廉退 颠沛匪亏 性静情逸 心动神疲 守真志满 逐物意移 坚持雅操 好爵自縻 都邑华夏 东西二京 背邙(máng)面洛 浮渭据泾 宫殿盘郁 楼观飞惊 图写禽兽 画彩仙灵 丙舍傍启 甲帐对楹(yíng) 肆筵设席 鼓瑟吹笙 升阶纳陛 弁(biàn)转疑星 右通广内 左达承明 既集坟典 亦聚群英 杜稿钟隶 漆书壁经 府罗将相 路侠槐卿 户封八县 家给(jǐ)千兵 高冠陪辇(niǎn) 驱毂(gǔ)振缨 世禄侈富 车驾肥轻 策功茂实 勒碑刻铭 磻溪伊尹 佐时阿衡 奄(yǎn)宅曲阜 微旦孰营 桓公匡合 济弱扶倾 绮回汉惠 说感武丁 俊乂(yì)密勿 多士寔(shí)宁 晋楚更霸 赵魏困横 假途灭虢(guó) 践土会盟 何遵约法 韩弊烦刑 起翦颇牧 用军最精 宣威沙漠 驰誉丹青 九州禹迹 百郡秦并 岳宗泰岱 禅主云亭 雁门紫塞 鸡田赤城 昆池碣石 巨野洞庭 旷远绵邈 岩岫(xiù)杳冥 治本于农 务兹稼穑(sè) 俶(chù)载南亩 我艺黍(shǔ)稷 税熟贡新 劝赏黜陟(chù zhì) 孟轲敦素 史鱼秉直 庶几中庸 劳谦谨敕 聆音察理 鉴貌辨色 贻厥嘉猷(yóu) 勉其祗植 省躬讥诫 宠增抗极 殆辱近耻 林皋幸即 两疏见机 解组谁逼 索居闲处 沉默寂寥 求古寻论 散虑逍遥 欣奏累遣 戚谢欢招 渠荷的(dì)历 园莽抽条 枇杷晚翠 梧桐蚤凋 陈根委翳(yì) 落叶飘摇 游鹍(kūn)独运 凌摩绛霄 耽(dān)读玩市 寓目囊箱 易輶(yóu)攸畏 属耳垣(yuán)墙 具膳餐饭 适口充肠 饱饫烹宰 饥厌糟糠 亲戚故旧 老少异粮 妾御绩纺 侍巾帷房 纨扇圆絜(jié) 银烛炜煌 昼眠夕寐 蓝笋象床 弦歌酒宴 接杯举觞 矫手顿足 悦豫且康 嫡后嗣续 祭祀烝尝 稽颡(sǎng)再拜 悚惧恐惶 笺牒简要 顾答审详 骸垢想浴 执热愿凉 驴骡犊特 骇跃超骧(xiāng) 诛斩贼盗 捕获叛亡 布射僚丸 嵇琴阮啸 恬笔伦纸 钧巧任钓 释纷利俗 竝(bìng)皆佳妙 毛施淑姿 工颦(pín)妍笑 年矢每催 曦晖朗曜 璇玑悬斡 晦魄环照 指薪修祜(hù) 永绥(suí)吉劭 矩步引领 俯仰廊庙 束带矜(jīn)庄 徘徊瞻眺 孤陋寡闻 愚蒙等诮(qiào) 谓语助者 焉哉乎也","categories":[],"tags":[{"name":"练字","slug":"练字","permalink":"https://ochukai.github.io/tags/%E7%BB%83%E5%AD%97/"},{"name":"千字文","slug":"千字文","permalink":"https://ochukai.github.io/tags/%E5%8D%83%E5%AD%97%E6%96%87/"}]},{"title":"❤ 如何支持 MathJax~","slug":"mathjax-support-guide","date":"2019-04-22T07:49:39.000Z","updated":"2023-07-16T03:46:17.423Z","comments":true,"path":"/mathjax-support-guide/","link":"","permalink":"https://ochukai.github.io/mathjax-support-guide/","excerpt":"","text":"好久好久之前就有一个 issue 提出来要支持 MathJax，结果到现在我都没有实现，直到昨天看到有人又要这个，所以我觉得还是写写吧，毕竟不是太复杂的东西。 是这个 MathJax， 但是这个 repo clone 到本地之后，我发现他有 50m + 的大小，于是找了一个 cdn: 1http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML 想要页面支持 MathJax，只要这个页面引入他的 js，然后按照 MathJax 的语法来写公式就 ok 了。 mathjax: true当然作为一个主题，我就帮你们把 js 引入了，你们只要写公式就好了，但是因为 MathJax 的 js 还是挺大的，所以我在页头加了一个属性：mathjax，就是来标加，如果当前文章需要 MathJax 的支持，就把 mathjax 设置为 true。 就像这样： 1234567title: ❤ 如何支持 MathJax~tags: - mathjaxdate: 2019-04-22 15:49:39mathjax: true---# 文章内容 其他页面就不用添加这个属性了，自动就不会引入 MathJax 的 js。 开始写公式下面就是写公式了，之前我都没有接触过这个东西，所以随便从网上找了一个 1$$\\sum_{i=0}^n i^2 = \\frac{(n^2+n)(2n+1)}{6}$$ new post -> 复制代码 -> yarn start -> 打开 localhost:4000 发现公式没有出来，于是我又去 bing 查了一下，原来还需要改一个东西， 大概就在 ~/node_modules/marked/lib/marked.js 的第 464 行，如果找不到，就搜索 escape。 然后照图，把 escape， em 修改为下面的值: 1234567891011121314151617var inline = { // escape: /^\\\\([\\\\`*{}\\[\\]()#+\\-.!_>])/, escape: /^\\\\([`*\\[\\]()# +\\-.!_>])/, autolink: /^<(scheme:[^\\s\\x00-\\x1f<>]*|email)>/, url: noop, tag: /^<!--[\\s\\S]*?-->|^<\\/?[a-zA-Z0-9\\-]+(?:"[^"]*"|'[^']*'|\\s[^<'">\\/\\s]*)*?\\/?>/, link: /^!?\\[(inside)\\]\\(href\\)/, reflink: /^!?\\[(inside)\\]\\s*\\[([^\\]]*)\\]/, nolink: /^!?\\[((?:\\[[^\\[\\]]*\\]|\\\\[\\[\\]]|[^\\[\\]])*)\\]/, strong: /^__([\\s\\S]+?)__(?!_)|^\\*\\*([\\s\\S]+?)\\*\\*(?!\\*)/, // em: /^_([^\\s_](?:[^_]|__)+?[^\\s_])_\\b|^\\*((?:\\*\\*|[^*])+?)\\*(?!\\*)/, em:/^\\*((?:\\*\\*|[\\s\\S])+?)\\*(?!\\*)/, code: /^(`+)\\s*([\\s\\S]*?[^`]?)\\s*\\1(?!`)/, br: /^ {2,}\\n(?!\\s*$)/, del: noop, text: /^[\\s\\S]+?(?=[\\\\<!\\[`*]|\\b_| {2,}\\n|$)/}; 然后再次 yarn start，发现公式出来了~ $$\\sum_{i=0}^n i^2 = \\frac{(n^2+n)(2n+1)}{6}$$","categories":[],"tags":[{"name":"mathjax","slug":"mathjax","permalink":"https://ochukai.github.io/tags/mathjax/"}]},{"title":"Mathjax Test","slug":"mathjax-test","date":"2019-04-22T06:41:27.000Z","updated":"2023-07-16T03:46:17.423Z","comments":true,"path":"/mathjax-test/","link":"","permalink":"https://ochukai.github.io/mathjax-test/","excerpt":"","text":"MathJax basic tutorial and quick reference 1234567$$f(n) =\\begin{cases}n/2, & \\text{if $n$ is even} \\\\3n+1, & \\text{if $n$ is odd}\\end{cases}$$ $$f(n) =\\begin{cases}n/2, & \\text{if $n$ is even} \\3n+1, & \\text{if $n$ is odd}\\end{cases}$$ 行内公式$x_mu$ $x_mu$ $\\sigma$ $\\sigma$ $x_mu$ $x_mu$ $y=ax+b$ $y=ax+b$ 行间公式$$\\cos 2\\theta = \\cos^2 \\theta - \\sin^2 \\theta = 2 \\cos^2 \\theta$$$$\\cos 2\\theta = \\cos^2 \\theta - \\sin^2 \\theta = 2 \\cos^2 \\theta$$ $$M(\\beta^{\\ast}(D),D) \\subseteq C$$$$M(\\beta^{\\ast}(D),D) \\subseteq C$$ $$ \\sum_{i=0}^n i^2 = \\frac{(n^2+n)(2n+1)}{6} $$ $$ x = \\dfrac{-b \\pm \\sqrt{b^2 - 4ac}}{2a} $$ 自动编号$$\\begin{equation}\\sum_{i=0}^n F_i \\cdot \\phi (H, p_i) - \\sum_{i=1}^n a_i \\cdot ( \\tilde{x_i}, \\tilde{y_i}) + b_i \\cdot ( \\tilde{x_i}^2 , \\tilde{y_i}^2 )\\end{equation}$$ $$\\begin{equation}\\beta^*(D) = \\mathop{argmin} \\limits_{\\beta} \\lambda {||\\beta||}^2 + \\sum_{i=1}^n max(0, 1 - y_i f_{\\beta}(x_i))\\end{equation}$$","categories":[],"tags":[{"name":"mathjax","slug":"mathjax","permalink":"https://ochukai.github.io/tags/mathjax/"}]},{"title":"🐷用 js 判断某元素进入视窗区域以及图片的懒加载~","slug":"js-is-in-sight","date":"2019-04-18T01:43:00.000Z","updated":"2023-07-16T03:46:17.423Z","comments":true,"path":"/js-is-in-sight/","link":"","permalink":"https://ochukai.github.io/js-is-in-sight/","excerpt":"","text":"一直很想写这个的，一直很想些 html 的某个元素滚动到视窗的判断，感觉还是很有用的。前段时间在写一个企业 IM，要写用户已读了某条信息的操作，如果加上这个进入视窗的判断，就会很准确的知道了用户看消息的过程，但是之前没有判断，只要用户打开这个聊天窗口，我就默认他把所有未读信息全读了，哪怕有四百条未读信息，看吧，那个人有超能力~ getBoundingClientRectgetBoundingClientRect 这个方法可以获取元素的大小以及相对于视窗的位置，于是我们可以用。 拿我的博客里面的评论框来举例子，输出结果在下面： 1234567891011> $('.comment_trigger')[0].getBoundingClientRect()> DOMRect {x: 179.5, y: 745, width: 664, height: 114, top: 745, …} bottom: 859 height: 114 left: 179.5 right: 843.5 top: 745 width: 664 x: 179.5 y: 745 __proto__: DOMRect getBoundingClientRect 返回了一个 DOMRect 这个东西，我也不知道是啥，但是里面的几个属性还是很容易懂的，其中， top 是元素距离窗口顶端的距离 bottom 是元素距离窗口底端的距离 left 是元素距离窗口左侧的距离 right 是元素距离窗口右侧的距离 于是用这个方法来判断是否进入视窗的写法，大概像这样 123456789101112131415function isInSight(el) { const $el = typeof el === 'string' ? document.querySelector(el) : el; // left, top, right, bottom const rect = $el.getBoundingClientRect(); return !( rect.top > window.innerHeight // top 不在视窗 || rect.bottom < 0 // bottom 也不在 || rect.left > window.innerWidth // 同理 || rect.right < 0 );} 到这里我们可以判断页面上任意一个元素在不在当前的视窗了，前提是它静止不动的时候，要动起来的话，比如滚动的时候，我们就要添加一些事件来触发这个判断，然后再做一些操作。 lazyload页面中所有的图片，我们滚动它的位置的时候再去加载它，可以提高页面的加载速度吧。 下面的 loadImg 是概念方法，具体实现怎么都可以咯~ 1234567window.addEventListener("scroll", () => { document.querySelectorAll("img").forEach(img => { if (isInSight(img)) { loadImg(img); } }))}); 就像这样，滚动窗口的时候遇到图片就会加载了，但是效果可能不是那么好看，要处理一下的话，可以在进入页面的时候，把所有图片的 src 都暂存到 data-src 上面，然后给每个图片的 src 都设置同一个路径，比如’loading.png’, 这样就会好看很多了。 当然最重要的是，isInSight 方法已经实现了。","categories":[],"tags":[{"name":"js","slug":"js","permalink":"https://ochukai.github.io/tags/js/"},{"name":"lazyload","slug":"lazyload","permalink":"https://ochukai.github.io/tags/lazyload/"},{"name":"inSight","slug":"insight","permalink":"https://ochukai.github.io/tags/insight/"}]},{"title":"我的第二个纹身 - 键盘 🎹","slug":"my-second-tattoo","date":"2019-03-23T05:05:03.000Z","updated":"2023-07-16T03:46:17.423Z","comments":true,"path":"/my-second-tattoo/","link":"","permalink":"https://ochukai.github.io/my-second-tattoo/","excerpt":"","text":"第二个纹身，这次是在左侧的肚子上，也是巨疼。 师傅问我为什么总是选肚子，我笑笑不说话，因为我也不知道~ 这次看起来很简单的图案，耗时三个半小时，受罪俩小时。简直生不如死，但是好像我没叫出声~ 纹身师傅的手稿 这次还是不放文完之后的图了，肚子太大，影响视觉效果。 持续健身中。。。。","categories":[],"tags":[{"name":"TATTOO","slug":"tattoo","permalink":"https://ochukai.github.io/tags/tattoo/"},{"name":"纹身","slug":"纹身","permalink":"https://ochukai.github.io/tags/%E7%BA%B9%E8%BA%AB/"},{"name":"键盘","slug":"键盘","permalink":"https://ochukai.github.io/tags/%E9%94%AE%E7%9B%98/"}]},{"title":"使用 SVN 的 branch 功能 😂","slug":"svn-branch","date":"2018-12-14T09:18:08.000Z","updated":"2023-07-16T03:46:17.424Z","comments":true,"path":"/svn-branch/","link":"","permalink":"https://ochukai.github.io/svn-branch/","excerpt":"","text":"前言来到目前这个公司就一直再用 svn，工作之余可能会用 git 管理一些自己的项目。 目前这个项目写了一年，基本都是流水线似的开发，写完一个功能发布一个功能，一共两个人，就做在一起，沟通基本靠吼。 现在项目基本稳定了，但是要解决一些小 bug 之类的，解决之后当天直接就打包上线了，于是矛盾就出现了，功能稳定了，之前立下的 flag 要开始实现了，“发布之后这个就升级一下” 之类的话，现在要开始做了。 所以呢，如果在主分支上面升级新功能，当天解决的 bug 要打包就不愉快了，因为新代码把之前的代码搞乱了。 现在就需要分支了，其实早就需要分支了。 前几天我还在用 git 做分支，改 bug 的话， 就切换到 master，改完 bug svn 提交，打包。之后再 切回之前的 git 分支，但是 git 和 svn 的合作并不是特别融洽，麻烦。 所以今天学了一下 svn 的分支，真的，自从我听说 svn，就从来没用过他的分支功能，想来也不会太好用。 开始学习 svn 的分支之前这些知识是我看到 svn 的 branch 之后才知道的，但是要写在前面，我也不知道为啥，就写在这里吧。 svn 的目录结构在 svn server 的管理界面创建新的 repo 的时候，会有两种选项 empty repo trunk，branches，tags 第二种的意思是，创建一个 repo 文件夹，并且新建 trunk（主分支），branches（分支），tags（标签） 这三个文件夹。 第二种应该算是标准的 svn 项目结构，服务器使用 trunk 部署，平时开发在各自的分支上面做开发，做好了合并到 trunk。 创建分支svn 创建分支的命令是 copy，是不是很神奇。 svn 创建分支的意思大概是，把这个文件夹复制到别的地方，你随便搞吧。因为是两个文件夹，所以肯定没关系。 所以要创建分支，可以直接执行， svn copy trunk/ branches/branch_name, svn 会原封不动的 把 trunk 文件夹的内容复制到 branches 下面的 branch_name 文件夹，真的一模一样。 12345678910ochukai@DESKTOP-IMK2E44 MINGW64 /e/dev/svn/***-pc$ lsbranches tags trunkochukai@DESKTOP-IMK2E44 MINGW64 /e/dev/svn/***-pc$ svn copy trunk/ branches/branch_nameA branches/branch_name# 提交ochukai@DESKTOP-IMK2E44 MINGW64 /e/dev/svn/***-pc$ svn commit -m "add branch_name" 切换分支切换分支就是打开文件夹， cd branches/branch_name 合并跟 git 差不多。 svn merge ../branches/branch_name/ 123456ochukai@DESKTOP-IMK2E44 MINGW64 /e/dev/svn/***-pc/trunk$ svn merge ../branches/branch_name/# ...ochukai@DESKTOP-IMK2E44 MINGW64 /e/dev/svn/***-pc$ svn commit -m "merge" 好了。","categories":[],"tags":[{"name":"svn","slug":"svn","permalink":"https://ochukai.github.io/tags/svn/"},{"name":"branch","slug":"branch","permalink":"https://ochukai.github.io/tags/branch/"}]},{"title":"《心经》","slug":"the-hrdaya","date":"2018-12-14T06:52:16.000Z","updated":"2023-07-16T03:46:17.424Z","comments":true,"path":"/the-hrdaya/","link":"","permalink":"https://ochukai.github.io/the-hrdaya/","excerpt":"","text":"前言其实我不是复制过来直接就发布了，最近我写代码之余，慢慢开始抄经了~ 字虽不好看，但是在坚持，今年喜欢上了钢笔，买了几只网红笔，像贵妃，78G 之类便宜好用极具性价比的。 没想到，上一篇文章发布在去年九月，那个时候刚刚开始写现在的一个用 electron 包裹的前端小程序，也不算小，但是持续到今天十一月，好像很大了。 就是这个不大不小的程序，整整一年零三个月，我没有写过文章了，手生，脑也生，我是不是要组织一下代码，哦不，我要组织一下语言。 本年度第一篇文章就在这个凄凄惨惨的下午诞生了，这一篇更像是一篇总结，前一段事件我发现，我的网站访问不了了，可能是因为一年多没有提交代码，所以 git 把我的 page 服务停了吧，同样是上个月，我收到了阿里云给我的信息，ochukai.me 要续费了，这个域名已经三年了，但是因为去年一年的懒惰，这里变得极为萧条，ochuunn 这个主题的星星数量一直在 120 附近徘徊，看了十分心痛，可我又抽不出时间来完善升级一下。 说到抽不出时间，年初我两次阿里云的电话面试没过。因为他们问我业余时间做什么，我说我没有业余时间。 我想起，四个月前，我卸载了王者农药，真的是农药，七个赛季王者也玩腻了，加上越来越大的肚腩，于是狠心，卸载。顺便开始撸铁，睡觉时间也在慢慢变长，从日均 5.7，到现在 7.5 了，肩膀不怎么疼了，胳膊也粗了，腹肌正在酝酿中，已经可以摸到了，很开心，找到了人生的一大毒瘤，并把它消灭的成就感促使我开心。 我买了好多自动铅笔，买了一个二手画板，有事没事画一幅，很丑，但是我很善良，哈哈。 简介《般若经》《般若经》共有九部： 《放光般若》、《光明般若》、《道行般若》、《胜天般若》、《胜天王般若》、《文殊问般若》、《金刚般若》、《大品般若》、《小品般若》 玄奘版 《般若波罗蜜多心经》 观自在菩萨，行深般若波罗蜜多时。照见五蕴皆空，度一切苦厄。 舍利子，色不异空，空不异色，色即是空，空即是色，受想行识，亦复如是。舍利子，是诸法空相，不生不灭，不垢不净，不增不减。 是故空中无色，无受想行识，无眼耳鼻舌身意，无色声香味触法，无眼界，乃至无意识界。无无明，亦无无明尽，乃至无老死，亦无老死尽。无苦集灭道，无智亦无得，以无所得故。菩提萨埵，依般若波罗蜜多故，心无挂碍，无挂碍故，无有恐怖，远离颠倒梦想，究竟涅槃。三世诸佛，依般若波罗蜜多故，得阿耨多罗三藐三菩提。 故知般若波罗蜜多，是大神咒，是大明咒，是无上咒，是无等等咒，能除一切苦，真实不虚。 故说般若波罗蜜多咒，即说咒曰：揭谛揭谛，波罗揭谛，波罗僧揭谛，菩提萨婆诃。 鸠摩罗什版 《摩诃般若波罗蜜大明咒经》 观世音菩萨，行深般若波罗蜜时，照见五阴空，度一切苦厄。 舍利弗，色空，故无恼坏相；受空，故无受相；想空，故无知相；行空，故无作相；识空，故无觉相。何以故？ 舍利弗，非色异空，非空异色，色即是空，空即是色，受、想、行、识，亦如是。 舍利弗，是诸法空相，不生不灭，不垢不净，不增不减。是空法，非过去、非未来、非现在。 是故空中无色，无受、想、行、识，无眼、耳、鼻、舌、身、意，无色、声、香、味、触、法，无眼界，乃至无意识界；无无明，亦无无明尽；乃至无老死，亦无老死尽；无苦集灭道，无智亦无得，以无所得故。 菩萨依般若波罗蜜故，心无挂碍。无挂碍故，无有恐怖，离颠倒梦想苦恼，究竟涅盘。三世诸佛，依般若波罗蜜故。得阿耨多罗三藐三菩提。故知般若波罗蜜是大明咒、无上明咒、无等等明咒，能除一切苦，真实不虚。 故说般若波罗蜜咒。即说咒曰：“竭帝竭帝 波罗竭帝波 罗僧竭帝 菩提僧莎呵。” 回向偈 愿以此功德。庄严佛净土。 上报四重恩。下济三途苦。 若有见闻者。悉发菩提心。 尽此一报身。同生极乐国。","categories":[],"tags":[{"name":"佛","slug":"佛","permalink":"https://ochukai.github.io/tags/%E4%BD%9B/"},{"name":"佛经","slug":"佛经","permalink":"https://ochukai.github.io/tags/%E4%BD%9B%E7%BB%8F/"}]},{"title":"我的第一个纹身 - 鲸鱼 🐬","slug":"my-first-tattoo","date":"2018-11-03T09:49:00.000Z","updated":"2023-07-16T03:46:17.423Z","comments":true,"path":"/my-first-tattoo/","link":"","permalink":"https://ochukai.github.io/my-first-tattoo/","excerpt":"","text":"在我跟她预约的时候就说了： 头不能太尖，不能太圆，身子要立体，皮肤要有质感。 除此之外，没有别的要求了。 为什么我觉得这个纹身师牛逼呢，因为她给我画的图让我很满意~ 纹身师傅的手稿 纹身之后的图片就不发了，身材不好。 纹在左侧肋骨胸下，巨疼，我是男的~","categories":[],"tags":[{"name":"TATTOO","slug":"tattoo","permalink":"https://ochukai.github.io/tags/tattoo/"},{"name":"纹身","slug":"纹身","permalink":"https://ochukai.github.io/tags/%E7%BA%B9%E8%BA%AB/"},{"name":"鲸鱼","slug":"鲸鱼","permalink":"https://ochukai.github.io/tags/%E9%B2%B8%E9%B1%BC/"}]},{"title":"SVN 的备份与还原","slug":"svn-backup-and-restore","date":"2017-09-06T03:09:56.000Z","updated":"2023-07-16T03:46:17.424Z","comments":true,"path":"/svn-backup-and-restore/","link":"","permalink":"https://ochukai.github.io/svn-backup-and-restore/","excerpt":"","text":"其实很早之前就做了这个，但是最近公司要搬家所以又重新整理了一下 准备拿出来用上的，不过要用的那一天内网突然断了，所以也没有正式用，但是测试表明，十几个 svn 库，总体积三个多 g 备份的时候，只需要五分钟，超级快，保存了所有的提交记录。 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657@echo offtitle SVN Backup by oli:: ---------------------------------------:: ---------------------------------------:: ---------------------------------------set SVN_HOME="C:\\Program Files\\VisualSVN Server":: 设置根目录set SVN_ROOT=C:\\Repositories:: 设置要备份到的位置set SVN_BACKUP_ROOT=C:\\Backupset TIME_DIR=%date:~,4%%date:~5,2%%date:~8,2%_%time:~,2%%time:~3,2%%time:~6,2%%time:~9,2%set BACKUP_DIRECTORY=%SVN_BACKUP_ROOT%\\%TIME_DIR%set LOG=%BACKUP_DIRECTORY%\\backup.log:: ---------------------------------------:: ---------------------------------------:: ---------------------------------------if not exist %SVN_HOME% goto errorgoto start:startfor /r %SVN_BACKUP_ROOT% %%I in (backup.log) do ( if %%~zI GEQ 1048576 ren %LOG% backup_%TIME%.log)mkdir %BACKUP_DIRECTORY%@echo [info] create new directory: %BACKUP_DIRECTORY%@echo [info] %date:~,10% %time:~,2%:%time:~3,2%:%time:~6,2% create backup category: %BACKUP_DIRECTORY% >>%LOG%for /d %%i in (%SVN_ROOT%\\*) do ( @echo [info] backup %%~ni >>%LOG% @echo [info] backup %%~ni :: --incremental %SVN_HOME%\\bin\\svnadmin dump %SVN_ROOT%\\%%~ni > %BACKUP_DIRECTORY%\\%%~ni.dmp 2>>%LOG%)@echo [info] %date:~,10% %time:~,2%:%time:~3,2%:%time:~6,2% finish: %errorlevel%@echo [info] %date:~,10% %time:~,2%:%time:~3,2%:%time:~6,2% finish: %errorlevel% >>%LOG%:errorecho [error] %date:~,10% %time:~,2%:%time:~3,2%:%time:~6,2% directory not exist，please check: %SVN_HOME%>>%LOG%goto end:end@echo. >>%LOG%:: exitPAUSE 下面这一段是还原，就是把备份好的 dmp 文件，还原成文件夹。 还原的时候要根据自己是不是全新还原来考虑是否注释掉代码中的那一行~ 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849echo offtitle SVN Backup by oli:: ---------------------------------------:: ---------------------------------------:: ---------------------------------------set SVN_HOME="C:\\Program Files\\VisualSVN Server":: 要还原到的目录set SVN_ROOT=C:\\testLoad:: 之前备份的目录set SVN_BACKUP_DIR=C:\\Backup\\20170831_11282822:: ---------------------------------------:: ---------------------------------------:: ---------------------------------------if not exist %SVN_HOME% goto errorgoto start:startfor %%i in (%SVN_BACKUP_DIR%\\*.dmp) do ( @echo [info] backup %%~ni >>%LOG% @echo [info] backup %%~ni :: 目录不存在就新建一个否则会报错的， :: 如果全新还原这个目录必须新建，否则可以注释这一行 %SVN_HOME%\\bin\\svnadmin create %SVN_ROOT%\\%%~ni :: --incremental %SVN_HOME%\\bin\\svnadmin load %SVN_ROOT%\\%%~ni < %SVN_BACKUP_DIR%\\%%~ni.dmp)@echo [info] %date:~,10% %time:~,2%:%time:~3,2%:%time:~6,2% finish: %errorlevel%@echo [info] %date:~,10% %time:~,2%:%time:~3,2%:%time:~6,2% finish: %errorlevel% >>%LOG%:errorecho [error] %date:~,10% %time:~,2%:%time:~3,2%:%time:~6,2% SVNADMIN not exist, lease check: %SVN_HOME%>>%LOG%goto end:end@echo. >>%LOG%:: exitPAUSE","categories":[],"tags":[{"name":"svn","slug":"svn","permalink":"https://ochukai.github.io/tags/svn/"},{"name":"svn backup","slug":"svn-backup","permalink":"https://ochukai.github.io/tags/svn-backup/"},{"name":"svn 备份","slug":"svn-备份","permalink":"https://ochukai.github.io/tags/svn-%E5%A4%87%E4%BB%BD/"},{"name":"svn 还原","slug":"svn-还原","permalink":"https://ochukai.github.io/tags/svn-%E8%BF%98%E5%8E%9F/"}]},{"title":"flex shrink 的用处","slug":"flex-shrink","date":"2017-08-08T07:38:17.000Z","updated":"2023-07-16T03:46:17.422Z","comments":true,"path":"/flex-shrink/","link":"","permalink":"https://ochukai.github.io/flex-shrink/","excerpt":"","text":"flex grow 和 shrink 这两兄弟我经常遇见，不过目前为止，grow 还没有帮过我什么忙， shrink 很不错，帮过我几次了。 1flex-shrink: 0 每当别的元素位置不够了，要来挤压我的空间时， flex-shrink 就会帮我把别的元素挡在门外，是一个很有原则的人。 flex-shrink 定义收缩比率。不允许负值","categories":[],"tags":[{"name":"flex","slug":"flex","permalink":"https://ochukai.github.io/tags/flex/"},{"name":"flex shrink","slug":"flex-shrink","permalink":"https://ochukai.github.io/tags/flex-shrink/"}]},{"title":"Django 项目部署在 nginx + uwsgi","slug":"nginx-uwsgi-django","date":"2017-06-27T06:28:31.000Z","updated":"2023-07-16T03:46:17.423Z","comments":true,"path":"/nginx-uwsgi-django/","link":"","permalink":"https://ochukai.github.io/nginx-uwsgi-django/","excerpt":"","text":"好久不写博客了，最近一直在忙一个私活，一个问卷类的项目，用 django 写的，说实话，之前除了在公司厘米用，都没有用过 python，还好我有一些好同事，有问题可以直接问，方便了很多。 为了避免长时间不写文章的尴尬，我急匆匆的新键了一个 md，开始写。 一般来说，本地运行 django 项目是很简单， 1python manage.py runserver UWSGI总感觉这个单词全部大写的话，很别扭，使用 uwsgi 启动项目的话也不是太难， 12345678910111213141516# docon.ini# uwsgi abc.ini# uwsgi --reload /tmp/***.pid# uwsgi --stop /tmp/***.pid[uwsgi]chdir=/home/doconmodule=docon.wsgi:applicationmaster=Trueprocesses=2threads=2socket=:8000# http=:80daemonize=/var/log/uwsgi-docon.logpidfile=/tmp/docon.pidvacuum=True 有一点要注意的就是， 如果单独使用 uwsgi，需要写 http=:80, 如果配合 nginx 的话，就改成 socket=:8000, 8000 随便写。 NGINX一般初装 ubuntu 的 nginx 之后，有一个默认的配置，在 /etc/nginx/sites-enabled/default 这个位置，需要修改成自己项目的配置。 1vi /etc/nginx/sites-enabled/default 然后修改成自己的配置 1234567891011121314151617server { listen 80; server_name ***.com; charset utf-8; client_max_body_size 75M; location / { include uwsgi_params; uwsgi_pass localhost:8000; } location /static/ { alias /var/www/html/docon/static/; }} 重启 nginx 1/etc/init.d/nginx restart 哦，对了，在启动之前，要把静态文件，放到上面配置的 /var/www/html/docon/static 中去，这个路径是自己配置的，随便写吧，首先要在项目的 setting.py 里面设置 STATIC_ROOT, 1STATIC_ROOT = /var/www/html/docon/static 然后在执行下面的命令，把所有的静态文件转移过去。 1python manage.py collectstatic 如果启动的过程中报错了, 查看占用的端口, 然后 kill 就好了。 12netstat -ntplkill -9 ***","categories":[],"tags":[{"name":"django","slug":"django","permalink":"https://ochukai.github.io/tags/django/"},{"name":"nginx","slug":"nginx","permalink":"https://ochukai.github.io/tags/nginx/"},{"name":"uwsgi","slug":"uwsgi","permalink":"https://ochukai.github.io/tags/uwsgi/"}]},{"title":"直播写代码要去那个平台呢?","slug":"live-code","date":"2017-06-01T10:51:49.000Z","updated":"2023-07-16T03:46:17.423Z","comments":true,"path":"/live-code/","link":"","permalink":"https://ochukai.github.io/live-code/","excerpt":"","text":"现在我在 虎牙-代码痴汉umi, 有谁推荐新的直播平台吗 ?","categories":[],"tags":[{"name":"直播","slug":"直播","permalink":"https://ochukai.github.io/tags/%E7%9B%B4%E6%92%AD/"},{"name":"直播写代码","slug":"直播写代码","permalink":"https://ochukai.github.io/tags/%E7%9B%B4%E6%92%AD%E5%86%99%E4%BB%A3%E7%A0%81/"}]},{"title":"给 Git Bash 设置好看的配色~ 😜","slug":"beautiful-color-git-bash","date":"2017-05-31T22:06:06.000Z","updated":"2023-07-16T03:46:17.421Z","comments":true,"path":"/beautiful-color-git-bash/","link":"","permalink":"https://ochukai.github.io/beautiful-color-git-bash/","excerpt":"","text":"window 上面的命令行一直都非常丑陋 (看我用词多么强烈)~ 今天上午终于因为看 Git Bash 配色而双眼变得模糊了, 于是上网搜了一下有没有结局方案, 然后就发现了这个 github/mintty-colors-solarized, 但这个项目是好几年前的了, 我还是怀着试试看的态度尝试了一下. 我发现了, 干程序员别的可能不行, 但是尝试的能力还是有的, 经常为了找一个新的框架, 或者要写一个组件而去把所有相关的项目全看一边, 然后才发现不行~ 但是今天老天并没有调戏我, 先说一下修改的过程吧~ 在 Git Bash 里面输入, 12cd ~vi .minttyrc 开始编辑它的配置文件, 不妨输入这些东西, 这些配色就是我从上面的项目里面找来的~ 123456789101112131415161718192021222324...Font=Consolas# 后面是颜色的配置ForegroundColour=131,148,150BackgroundColour=0,43,54CursorColour=220,50,47Black=7,54,66BoldBlack=0,43,54Red=220,50,47BoldRed=203,75,22Green=133,153,0BoldGreen=88,110,117Yellow=181,137,0BoldYellow=101,123,131Blue=38,139,210BoldBlue=131,148,150Magenta=211,54,130BoldMagenta=108,113,196Cyan=42,161,152BoldCyan=147,161,161White=238,232,213BoldWhite=253,246,227 保存之后, 重启一下, 效果就像下面这样了~","categories":[],"tags":[{"name":"git bash","slug":"git-bash","permalink":"https://ochukai.github.io/tags/git-bash/"},{"name":"terminal","slug":"terminal","permalink":"https://ochukai.github.io/tags/terminal/"},{"name":"配色","slug":"配色","permalink":"https://ochukai.github.io/tags/%E9%85%8D%E8%89%B2/"}]},{"title":"写了一个 Vue 的图片预览插件~😜","slug":"vue-image-preview","date":"2017-05-31T22:01:01.000Z","updated":"2023-07-16T03:46:17.425Z","comments":true,"path":"/vue-image-preview/","link":"","permalink":"https://ochukai.github.io/vue-image-preview/","excerpt":"","text":"最近的项目里面需要一个图片点击放大预览的插件~ 项目是 vue 写的 SPA ~ 找了好久，没有现成的，有一个，但是写的我很不喜欢，需要手动传入图片地址，宽度和高度，都这样了，还写什么程序~ 然后我打算自己写一个~ 思路基本思路的话，就是点击图片的时候，产生一个遮罩层（或者遮罩层本来就有），然后在遮罩层添加一个图片，居中什么的样式到时随便了。点击事件很简单， @click 就好了，点击图片之后可以获取到图片的路径，因为点击的是已经显示出来的图片，所以当前图片的 meta 信息肯定包含了该图片的长和宽。 生成一个遮罩层也很简单，然后根据图片的长宽和屏幕的长宽（或者浏览窗口的大小）可以计算图片的居中位置。 然后添加到 body 上面就好了，但是添加的话，因为 vue 有自己的生命周期，document.body.appendChild() 的话事件都不能用 vue 的了，于是如果 **append 一个 vue 的插件到 dom **算是第一个问题。 简单的思路就这样，只要实现了动态添加 vue 组件到 body，那么这个插件就可以实现了。 实现我先去看了一个 element-ui 的代码，好复杂，有一个很大的 mixin， 看来看去没明白，后来我想起之前看到的那个图片预览的插件，github/vue-fancybox，顺便帮作者宣传一下吧，虽然不符合我的价值观~ 这个插件有一个插入的操作，大概是这么写的， 123456const FancyBoxConstructor = Vue.extend(fancyBox);let instance = new FancyBoxConstructor({ el: document.createElement('div')});document.body.appendChild(instance.$el); 他还写了好多别的代码，但是主要逻辑应该是这个，首先初始化组件之后，再 append 到 body，不错。 然后我就借用了， 123456789101112131415const ImagePreviewConstructor = Vue.extend(ImagePreview);export default (el) => { let instance = new ImagePreviewConstructor({ el: document.createElement('div'), data: { img: el, imgSrc: el.src } }); document.body.appendChild(instance.$el);}; 初始化的时候顺便传入 props, 这个文件算是组件的入口文件了，调用这个组件的方式是这样的： 12345678910111213handleContentClick(e) { const el = e.target; if (el.localName === 'img') { e.preventDefault(); const imageSrc = el.src; if (imageSrc) { showImagePreview(el); } } return false;} 这样的话，组件便可以开始了，或者说已经结束了，因为只要在 template 里面写个 div， 再写个 img 就好了， 剩下的就是样式问题： 123456789101112131415161718<template> <transition name="image-fade"> <div class="image-preview__wrapper" style="z-index: 2003;" ref="wrapper" @click.self="handleClick" @mousewheel.stop="handleMouseWheel" v-if="imgSrc"> <img :src="imgSrc"/> <div class="toolbar"> <el-button icon="minus" @click="handleZoomIn">缩小</el-button> <el-button icon="plus" @click="handleZoomOut">放大</el-button> <el-button icon="close" @click="handleClose">关闭</el-button> </div> </div> </transition></template> 这里我加了一个 transition 标签，是 vue 里面很方便写出入场动画的标签，文档在这里vue/transition, 里面就是 div 和 img，或许这样的结构有点简陋，但是能用啊，而且公司不给太多时间（咦，这个心态不对呀~） 组件 mounted 之后，要初始化图片的位置和事件， 12345678mounted() { document.querySelector('html').style.overflow = 'hidden'; Vue.nextTick(() => { this.initImagePosition(); this.initHammer(); });}, 哦对了，图片的手势处理，拖拽我用的 hammerjs 来做的。 然后就是 handleClick，点击图片之后的操作了，加了 .self 是为了事件只在 div 标签触发，用过 vue 的人都知道，好用~ 效果是这样的~","categories":[],"tags":[{"name":"vue","slug":"vue","permalink":"https://ochukai.github.io/tags/vue/"},{"name":"image-preview","slug":"image-preview","permalink":"https://ochukai.github.io/tags/image-preview/"}]},{"title":"VUE 总结一下~","slug":"vue-summary","date":"2017-05-24T03:27:55.000Z","updated":"2023-07-16T03:46:17.425Z","comments":true,"path":"/vue-summary/","link":"","permalink":"https://ochukai.github.io/vue-summary/","excerpt":"","text":"最近开始接触 vue, 写了一个算是前端小论坛的公司内部项目, 算是一个知识库, 可添加一些常见的问题供别人查阅~ 现在做个总结吧, 项目写完一个多星期, 现在想想差不多都忘记了~ 真是老了~ 生命周期 其中 created 和 mounted 的顺序要确定好~ 比较重要的就像下面这三个吧, 其他的像是 updated, beforeUpdate 我几乎没有用过, 暂时不说~ created实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。 mountedel 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。这个时候可以获取到 template 里面的标签元素了, 如果要修改大小样式之类的在这里面写~ destroyedVue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。 动画使用过 vue 的 transition 标签之后最大的感慨便是, 做动画比 react 简单好多啊, 可能是我之前用 react 并没有写过动画的缘故吧, 但不可否认 vue 的动画很简单~ 我之前写的一个小组件 1234567<template> <transition name="back-top-fade"> <div v-if="show" class="back-to-top hidden-xs" @click="handleBackTopClick"> <i class="el-icon-caret-top"></i> </div> </transition></template> 这是一个简单的返回顶部的按钮, 当页面滚动到 一定距离的时候 show 变为 true, (对了, 为什么我的网址没有返回顶部的按钮呢~ 打开控制台就知道了~) 1234handleScroll() { let scrollTop = getScrollTop(); this.show = scrollTop > 400;}, transition 下面的元素通过 v-if v-show 来控制隐藏和消失~ 然后会有几个状态类~ v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。 v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。 v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。 v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在 transition/animation 完成之后移除。 我只写了一个样式, 这样的话 按钮进出场的效果都是一样的~ 12345.back-top-fade-enter,.back-top-fade-leave-active { transform: translateY(-30px); opacity: 0} 事件下面这几个比较有用 普通的 @click 事件 @click.self 这样很有用, 只是点击自己的时候有用 @click.stop 阻止单击事件冒泡 @click.prevent 阻止默认行为 Vue RouterbeforeRouteUpdate 这个方法很好用 12345678910111213141516171819beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不！能！获取组件实例 `this` // 因为当钩子执行前，组件实例还没被创建},beforeRouteUpdate (to, from, next) { // 在当前路由改变，但是该组件被复用时调用 // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候， // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 可以访问组件实例 `this`},beforeRouteLeave (to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this`} 还有一个就是 12<!-- 命名的路由 --><router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link> watchwatch 很好用~","categories":[],"tags":[{"name":"vue","slug":"vue","permalink":"https://ochukai.github.io/tags/vue/"},{"name":"image-preview","slug":"image-preview","permalink":"https://ochukai.github.io/tags/image-preview/"}]},{"title":"升级到 React 15.5.0 之后遇到的问题。","slug":"react-15-5-0","date":"2017-04-17T08:43:52.000Z","updated":"2023-07-16T03:46:17.424Z","comments":true,"path":"/react-15-5-0/","link":"","permalink":"https://ochukai.github.io/react-15-5-0/","excerpt":"","text":"propTypes 被从 react 包里面分离出来了，如果要用到 propTypes, 则必须要自己安装 prop-types 1npm install prop-types --save 那么，对于之前项目里面已经存在的 propTypes 呢，可以使用 facebook 的这个工具 jscodeshift^1 和 codemod^2, 其中 codemod 最好 clone 在当前项目文件夹。 用法像这样： 123456789101112131415161718192021jscodeshift --extensions=js,jsx -t ./react-codemod/transforms/React-PropTypes-to-prop-types.js srcProcessing 310 files...Spawning 3 workers...Sending 50 files to free worker...Sending 50 files to free worker...Sending 50 files to free worker...Sending 50 files to free worker...Sending 50 files to free worker...Sending 50 files to free worker...Sending 10 files to free worker...All done.Results: 0 errors 0 unmodified 310 skipped 0 okTime elapsed: 4.758seconds 执行完之后，代码会变成这样： 12345678910111213141516import PropTypes from 'prop-types';import React from 'react';import { Form, Card, Modal, Spin } from 'antd';// ...UserAnswerModal.propTypes = { item: PropTypes.object, visible: PropTypes.bool, loading: PropTypes.bool, type: PropTypes.string, form: PropTypes.object, onOk: PropTypes.func, onCancel: PropTypes.func,}; 于是问题就解决了，但是因为你引用的包可能会有这个问题，所以 warning 应该不会消失。","categories":[],"tags":[{"name":"react","slug":"react","permalink":"https://ochukai.github.io/tags/react/"},{"name":"jscodeshift","slug":"jscodeshift","permalink":"https://ochukai.github.io/tags/jscodeshift/"},{"name":"proptypes","slug":"proptypes","permalink":"https://ochukai.github.io/tags/proptypes/"},{"name":"react-codemod","slug":"react-codemod","permalink":"https://ochukai.github.io/tags/react-codemod/"}]},{"title":"详解 Promise","slug":"promise-in-action","date":"2017-03-08T08:54:54.000Z","updated":"2023-07-16T03:46:17.424Z","comments":true,"path":"/promise-in-action/","link":"","permalink":"https://ochukai.github.io/promise-in-action/","excerpt":"","text":"偶然看到一篇介绍 Promise 的文章，这个概念也出现好久了，之前一直用着 whenjs, 但是一直没有时间自己写一个。 于是下定决心，自己写一个吧~ 毕竟别人都能写出来的东西，而且工作的时候都是在写一些业务型的代码，感觉非常没有创造性~ Promise 用起来挺简单的，可以很好的解决 js callback 多的时候，缩进很烦的问题。而且线性的写代码也更容易理解~ 现在写这篇文章，就是高中的时候写作文一样，看到题目就开始辗转反侧，脑子里面想好多内容，理清了思路，但是拿起笔就全忘了。 今天在开始写之前我也下了好大的决心，在代码上面写了大片的注释，感觉写这一篇应该会很顺利吧，结果还是事与愿违，写了些乱七八糟的东西。 这篇文章主要是介绍 Promise 的用法以及我是怎么实现这么一个库的，但是该怎么开始写呢？于是我列了几个要点，概念，原理，实现，感觉填充起来会比较容易吧，嗯，就这么办吧~ 规范Promise/A+ 规范ES6 Promise — 加载比较慢~ 想看就耐心等~ 两个规范在这了，其实现在用的多的是 Promise/A+ 规范，看起来还是很简单的。 概念Promise 就是承诺，会按照 then 的顺序做些事情，出了问题会在 catch 里面。像这样： 12345678910111213var p = new Promise(function (resolve) { setTimeout(function () { resolve(true); }, 1000); }) .then(function (result) { console.log('result:', result); }) .catch(function(err) { console.log('error:', err); }); 原理要说 Promise 的原理，我就假设大家都会用了，要不然看这个干什么~ 当然每个人的想法是不一样的，我开始了~ 以前面试的时候经常会被问到这个问题，你知道 Promise 是怎么实现的吗？ 我说不知道，大概就是有一个数组，for 循环执行吧。2333333333333~ 现在看来是不能用 for 循环来实现 Promise 了，假如好多 Promise 都是耗时间的操作，每个 Promise 的结束时间就不能控制，要等到前一个 Promise 结束之后，主动通知下一个 Promise 执行。所以就要求 Promise 里要保存下一个 Promise 的引用，方便在执行完当前 Promise 的时候调用下一个。 什么时候才是 Promise 执行结束的标志呢？就是在 then 的回调函数里面调用了 resolve(value) 或者 reject(err)的时候。所以调用下一个 Promise 的地方就在这两个方法里面。 这样看起来，Promise 的调用过程，一个结束调用另外一个，有点像链表~ 实现链式调用首先考虑两种 Promise 的调用方式 1234567891011// 1.chainnew Promise(noop) .then(function fn1() {}) .then(function fn2() {}) .then(function fn3() {});// 2.var p = new Promise(noop);p.then(function fn1() {});p.then(function fn2() {});p.then(function fn3() {}); 第一种链式的调用方法是按照顺序执行 fn1, fn2, fn3 的意思~ （then 方法会返回新的 Promise 对象，这句话放在这里好像很奇怪~），每一次 .then 都像是连接着一个新的 Promise。 而第二种写法，fn1, fn2, fn3 是同时开始执行的~ 一个 Promise 连着三个不同的 Promise 形成了三条 Promise 调用链~ 构造函数然后说到构造函数，毕竟初始化 Promise 是在这里面进行的。 123456789101112131415161718192021222324252627282930function Promise(resolver) { if (!util.isFunction(resolver)) { throw new TypeError('resolver must be a function'); } // 默认是 pending 状态 this.state = PENDING; // resolve 的值 this.value = 0; // 保存接下来要执行的 promise 的数组，数组里面的元素是 Executor， // 包装了 Promise 及其onReject, onResolve 方法 // then 方法可能会添加 Executor 到这个数组，也只有 then 方法会添加元素到这个数组 this.queue = []; if (resolver !== util.noop) { this.__callThen(resolver); // call thenable. }}Promise.prototype.then = function (onResolved, onRejected) { ... }Promise.prototype.catch = function (onResolved, onRejected) { ... }/* * 上面提到的 Executor */function Executor(promise, onResolved, onRejected) { this.promise = promise; this.onRejected = onRejected; this.onResolved = onResolved;} Promise 大概是这三个函数使用的比较多，当然还有几个静态方法，或者 delay 方法 。 这里应该写点什么呢，代码里面稍微有点注释，Promise 的数据结构就像构造函数里面写的，初始化 Promise 的函数 function (onResolved, onReject) {} 与 then 方法的参数 function (onResolved, onReject) {} 形式是一样的，被称为 thenable 参数被传递进构造函数之后，稍做休息，便直接开始执行了（放在 timeout 里面执行，还是要稍等一下的）。就是在 __callThen 方法里面执行，这个方法也很重要，就是对 thenable 函数 try-catch 一下~ 出现异常当然要拒绝。 1234567891011121314151617181920212223242526272829303132/** * 调用 then 方法，同时会 try catch 一下， * 如果出错，就 doReject（err） * 如果没错，就 doResolve（value） */Promise.prototype.__callThen = function (then) { var called = false; var self = this; function resolve(value) { if (!called) { called = true; self.doResolve(value); } } function reject(e) { if (!called) { called = true; self.doReject(e); } } try { then(resolve, reject); } catch (e) { if (!called) { called = true; this.doReject(e); } }}; 好了，到现在为止，then 方法之前的内容就会执行到这里。 这一段的 主要内容就是，够造了一个 Promise（会执行传入的 thenable 函数）， 还没有涉及到 then。 Then 函数在 then 方法里面，queue 数组终于派上了用场，因为可能会添加 Executor 到 queue 里面去，当构造 Promise 的 thenable 执行很慢的话~ 如果当前 promise 已经被 RESOLVED 或者 REJECTED，那就直接执行 onResolved 或者 onRejected。 12345678910111213141516171819202122232425262728293031323334353637Promise.prototype.then = function (onResolved, onRejected) { var promise2 = new Promise(util.noop); // state 默认就是 PENDING，如果完成 或者失败会改变 // 如果在 then 方法里面还是 PENDING 的话，说明前一个过程还没有结束 if (this.state !== PENDING) { var dummy = this.state === FULFILLED ? onResolved : onRejected; promise2.__runInOrder(dummy, this.value); } else { this.queue.push(new Executor(promise2, onResolved, onRejected)); } return promise2;};// 为什么叫 run in order 呢，我实在是词穷，不过 fn 传递到此函数之后，// 会在下一个 tick 按顺序执行，仅此而已~Promise.prototype.__runInOrder = function (fn, value) { var self = this; setTimeout(function () { var ret; try { ret = fn(value); } catch (e) { return self.doReject(e); } if (ret === self) { self.doReject(new TypeError('Cannot resolve promise with itself.')); } else { self.doResolve(ret); } });}; 接下来的两个方法比较最重要，上面可能看到过很多次他们的身影，但我都没有说过，最开始的时候我说前一个 promise 完成的时候要通知下一个 promise，这个通知的过程就在这两个方法里进行的。 有一点不同的是：doResolve 方法要检查前一个 promise 返回的值，如果前一个 promise 完成时返回了一个新的 promise，那么肯定要等这个返回的 promise 执行完成之后再 doResolve，而 doReject 就很直截了当了，反正你出错了，不要再执行了，然后就报错了~ doResolve前面说了太多这里没什么好写的了，看看代码吧~ 12345678910111213141516171819202122232425262728Promise.prototype.doResolve = function (value) { try { var then = util.getThen(value); if (then) { this.__callThen(then); } else { this.state = FULFILLED; this.value = value; // Executor 的 doResolve this.queue.forEach(function (item) { item.doResolve(value); }); } return this; } catch (e) { return this.doReject(e); }};// 如果 onResolved 不是函数就继续执行下一个 promise， 这是规定~Executor.prototype.doResolve = function (value) { if (util.isFunction(this.onResolved)) { this.promise.__runInOrder(this.onResolved, value); } else { this.promise.doResolve(value); }}; doReject123456789101112131415161718Promise.prototype.doReject = function (err) { this.state = REJECTED; this.value = err; this.queue.forEach(function (item) { item.doReject(err); }); return this;};// 同上Executor.prototype.doReject = function (err) { if (util.isFunction(this.onRejected)) { this.promise.__runInOrder(this.onRejected, err); } else { this.promise.doReject(err); }}; 好像概念都写完了。 Github： ochukai/promise","categories":[],"tags":[{"name":"js","slug":"js","permalink":"https://ochukai.github.io/tags/js/"},{"name":"promise","slug":"promise","permalink":"https://ochukai.github.io/tags/promise/"}]},{"title":"(**) 的 IE 👽","slug":"ie-css-hack","date":"2017-02-17T08:17:14.000Z","updated":"2023-07-16T03:46:17.422Z","comments":true,"path":"/ie-css-hack/","link":"","permalink":"https://ochukai.github.io/ie-css-hack/","excerpt":"","text":"以前都说前端坑，或者前端入坑了，为什么呢？ 因为 IE 啊。 我做前端以来，一直都是很幸福的，因为还几乎咩有处理过 ie 的兼容问题。 但是最近要处理，以前应付面试背过的兼容方案都忘掉了，所以还是要查。 忽略 IE6，IE7 的情况下，规则就这几条： 123\\9 IE6/IE7/IE8/IE9/IE10都生效 \\0 IE8/IE9/IE10都生效\\9\\0 只对IE9/IE10生效 当然还有这个东西 1<!--[if lt IE 9]><![endif]-->","categories":[{"name":"IE","slug":"ie","permalink":"https://ochukai.github.io/categories/ie/"}],"tags":[{"name":"ie","slug":"ie","permalink":"https://ochukai.github.io/tags/ie/"},{"name":"css hack","slug":"css-hack","permalink":"https://ochukai.github.io/tags/css-hack/"}]},{"title":"下载 window 聚焦壁纸 😜","slug":"window-focus-wallpaper","date":"2017-02-17T01:29:58.000Z","updated":"2023-07-16T03:46:17.425Z","comments":true,"path":"/window-focus-wallpaper/","link":"","permalink":"https://ochukai.github.io/window-focus-wallpaper/","excerpt":"","text":"一直觉得 window 聚焦的壁纸很好看~今天终于找到了壁纸存放的路径，就是下面这个 1%localappdata%\\Packages\\Microsoft.Windows.ContentDeliveryManager_cw5n1h2txyewy\\LocalState\\Assets Win + s 打开Cortana，复制这个网址打开就行了，里面都是没有扩展名的文件，重命名为 jpg 就可以看了~ 这是一个批量重命名文件的工具，挺好用。 百度云（ww30）","categories":[{"name":"Window","slug":"window","permalink":"https://ochukai.github.io/categories/window/"}],"tags":[{"name":"wallpaper","slug":"wallpaper","permalink":"https://ochukai.github.io/tags/wallpaper/"},{"name":"window","slug":"window","permalink":"https://ochukai.github.io/tags/window/"}]},{"title":"更换 window 命令行字体","slug":"change-window-terminal-terminal-font","date":"2017-02-15T02:16:08.000Z","updated":"2023-07-16T03:46:17.421Z","comments":true,"path":"/change-window-terminal-terminal-font/","link":"","permalink":"https://ochukai.github.io/change-window-terminal-terminal-font/","excerpt":"","text":"我一直觉得 window 命令行下面的字体非常丑陋，因为有时会用 git bash， 有时也会直接使用编译器自带的控制台，这些都是可以设置字体的，所以 window 自带的命令行用的不是太多。 今天刚好看到一篇文章是写关于修改命令行字体的，哈哈。 首先打开一个命令行窗口，输入 1chcp 437 然后设置字体，这个时候你就发现多了好多等宽字体。 选择想要的字体保存之后，把命令行窗口先关闭，然后再打开，输入 1chcp 936 chcp 是切换 cmd 程序的当前代码页，936 是中文环境，437 是英文环境 然后命令行的字体就改变了。","categories":[{"name":"Window","slug":"window","permalink":"https://ochukai.github.io/categories/window/"}],"tags":[{"name":"terminal","slug":"terminal","permalink":"https://ochukai.github.io/tags/terminal/"},{"name":"font","slug":"font","permalink":"https://ochukai.github.io/tags/font/"}]},{"title":"稍微总结一下 dva 😜","slug":"dva-in-action","date":"2017-01-23T01:28:20.000Z","updated":"2023-07-16T03:46:17.422Z","comments":true,"path":"/dva-in-action/","link":"","permalink":"https://ochukai.github.io/dva-in-action/","excerpt":"","text":"使用 dva 已经四个月了吧，陆陆续续做了两三个项目，之前在非常恶心的傻逼公司 Kyligence，算是我的 dva 的启蒙地，那一天傍晚，不小心看到了 ant-tool，然后又看到了 antd，于是感觉我的前端有了一次不小的改变~ 😇 几个概念 上面是一张 dva 的图，component，state，dispatch，connect 都是与 redux 一样的概念，不过，dva 把 action -> reducer 拆分成了，**action -> model(reducer, effect,subscription)**，这一部分改变的还是很多的，让 dispatch 的写法方便了一万倍。 Model一个简单的 model 是这样的: 1234567891011121314151617export default { namespace: 'example', // 这里是命名空间 state: {}, subscriptions: {}, effects: { * query({ payload }, { select, call, put }) { // } }, reducers: { querySuccess(state, { payload }) { // } },} namespace可以简单的理解为 comboReducer 使用这个值作为 key，而且 namespace 最重要的地方是用在 dispatch（put）的时候 12345678// 假如 example 的 model 定义了 query 这个 effect 或者 reducer。dispatch({ type: 'example/query' })// 当前 model 中存在名为 querySuccess 的 reducer// 然后在 effect 中这样访问 reduceryield put({ type: 'querySuccess' }) // 在组件中当然可以直接 dispatch({ type: 'example/someReducer' }) state就是一个对象 subscriptions顾名思义可以订阅一些事件，待续😆 effects异步操作，这里使用了 redux-sagas，先举个例子吧，其实就是异步的action， 但是是使用 sagas 实现的，很好（niu）看（bi）。 12345678910111213// ...* update({ payload }, { call, put }) { yield put({ type: 'showModalLoading' }); const { data } = yield call(saveTenants, payload); if (data.status === 'success') { yield put({ type: 'hideModal' }); yield put({ type: 'query' }); // 刷新一下列表 } else { yield put({ type: 'hideModalLoading' }); }},// ... （感觉丝毫不需要我用文字描述，顺着读完就知道是什么意思了，还是特么异步的） select, put, call 这些概念是 sagas 里面的 reducer修改 state 的地方 dvadva 会对 dispatch 做一些处理，比如他要把 example/query 分成 example 下面的 query （effect/reducer）。 所以肯定要注册这个 model，才能让 dva 知道 example 的存在， 1234import dva from 'dva';const app = dva();app.model(require('./models/example')); 其实 dva 出了 model 这个方法，还有其他的几个 123456789101112131415161718192021222324// 1. Initimport dva from 'dva';const app = dva();// 2. Pluginsapp.use({/*** called when an effect or subscription emit an error.** @param {string} err Exception* @param {function} action the effect or subscription*/// onError : (err, action) => {}});// 3. Modelapp.model(require('./models/example'));// 4. Routerapp.router(require('./router'));// 5. Startapp.start('#root'); dev-cli比较好用的东西，解决了新建 router，component，model 还要添加 dva 的配置的问题，生成 router， component 的同时会直接在 dva 配置中更新。 例子： 12345$ dva g route product-list$ dva g model products$ dva g component Editor$ dva g component Users/UserModal$ dva g component Header --no-css","categories":[{"name":"React","slug":"react","permalink":"https://ochukai.github.io/categories/react/"},{"name":"JavaScript","slug":"react/javascript","permalink":"https://ochukai.github.io/categories/react/javascript/"}],"tags":[{"name":"js","slug":"js","permalink":"https://ochukai.github.io/tags/js/"},{"name":"dva","slug":"dva","permalink":"https://ochukai.github.io/tags/dva/"},{"name":"react","slug":"react","permalink":"https://ochukai.github.io/tags/react/"}]},{"title":"删除 .svn 文件夹","slug":"remove-svn-folder","date":"2017-01-22T02:09:47.000Z","updated":"2023-07-16T03:46:17.424Z","comments":true,"path":"/remove-svn-folder/","link":"","permalink":"https://ochukai.github.io/remove-svn-folder/","excerpt":"","text":"新建 remove-svn.bat, 放到项目根目录执行就好了。（本来以为 svn 会提供这样的功能，结果还要自己写，😒） 123@echo on@for /r . %%a in (.) do @if exist "%%a\\.svn" rd /s /q "%%a\\.svn"@pause","categories":[{"name":"SVN","slug":"svn","permalink":"https://ochukai.github.io/categories/svn/"}],"tags":[{"name":"svn","slug":"svn","permalink":"https://ochukai.github.io/tags/svn/"}]},{"title":"Textarea 的高度自动增长","slug":"textarea-height-auto-increase","date":"2017-01-20T03:48:10.000Z","updated":"2023-07-16T03:46:17.424Z","comments":true,"path":"/textarea-height-auto-increase/","link":"","permalink":"https://ochukai.github.io/textarea-height-auto-increase/","excerpt":"","text":"一般情况下，textarea 的高度是定死的，rows 指定了之后，高度就不变了，内容多了之后会出现滚动条，这样的设定在大部分的场景下面是够用的， 但是有时就会很丑陋（废话😊）。 我们都知道 HTML 的元素都有一个 scrollHeight 这个属性，就是当该元素出现滚动条的时候，内容的高度。 那就方便了： 123$(".weui-textarea").on('input propertychange keyup',function () { $(this).height(this.scrollHeight);}); 这样就实现了高度自动增加的 Textarea，但当我试着删掉几行，想让它自动降低高度的时候不禁菊花一紧，他不动~ 这就尴尬,,ԾㅂԾ,,了，于是我就找了另外一种方法: 123456789101112131415161718192021222324252627282930313233343536$('.weui-textarea').on('input keyup', function () { // 尝试滚动一段距离，如果没有滚动条，scrollTop 还是 0 if (this.scrollTop == 0) { this.scrollTop = 1; } while (this.scrollTop == 0) { if (this.rows > minRows) { this.rows--; } else { break; } this.scrollTop = 1; if (this.rows < maxRows) { this.style.overflowY = "hidden"; } if (this.scrollTop > 0) { this.rows++; break; } } while (this.scrollTop > 0) { if (this.rows < maxRows) { this.rows++; if (this.scrollTop == 0) { this.scrollTop = 1; } } else { this.style.overflowY = "auto"; break; } }}); 这是一个例子~ （换行试试~😏） $(function () { var minRows = 3; var maxRows = 10; $('.weui-textarea').on('input keyup', function () { // 尝试滚动一段距离，如果没有滚动条，scrollTop 还是 0 if (this.scrollTop == 0) { this.scrollTop = 1; } while (this.scrollTop == 0) { if (this.rows > minRows) { this.rows--; } else { break; } this.scrollTop = 1; if (this.rows < maxRows) { this.style.overflowY = \"hidden\"; } if (this.scrollTop > 0) { this.rows++; break; } } while (this.scrollTop > 0) { if (this.rows < maxRows) { this.rows++; if (this.scrollTop == 0) { this.scrollTop = 1; } } else { this.style.overflowY = \"auto\"; break; } } }); });","categories":[],"tags":[{"name":"textarea","slug":"textarea","permalink":"https://ochukai.github.io/tags/textarea/"},{"name":"html","slug":"html","permalink":"https://ochukai.github.io/tags/html/"}]},{"title":"JavaScript 绑定 this","slug":"js-bind-this","date":"2016-12-30T02:28:20.000Z","updated":"2023-07-16T03:46:17.423Z","comments":true,"path":"/js-bind-this/","link":"","permalink":"https://ochukai.github.io/js-bind-this/","excerpt":"","text":"其实这篇文章主要是介绍这个东西 Proposal Bind Operator 或者 bind_operator。 也是在一个很偶然的机会看到了，git 上面的一个项目用到了这个用法，为什么自己发现不了这些东西呢？ 传统的 this 绑定在函数外面暂存一个变量12345// 别名var self = this;setTimeout(function() { this.doSomething();}, 1000); 使用 bind 函数 & 箭头函数在使用 class *** extends React.Component {} 的写法声明 React 组件的时候，组件的方法都不会被自动绑定 this 了，下面的两种方法比较常见： 1234567// bindsetTimeout( function() { this.doSomething(); }.bind(this), 1000); 使用 bind 方法显得稍微有点长，不太好看，不过很好用。 12345678910// var _this = this;// bindsetTimeout( () => { // _this.doSomething(); this.doSomething(); }, 1000); 箭头函数在经过babel编译后， 差不多就是注释的部分了， 还是用的暂存的办法保存了 this，但是写法就简单了太多。 ::看到这种语法之后，感觉其他的都弱爆了。 在 React 里面，可以这么写 1234// { title: '******************', onConfirm: this.handleSave.bind(this) },<Popconfirm title="确定要保存吗？" onConfirm={::this.handleSave}> <Button type="ghost" >保存</Button></Popconfirm> 可以看到，注释部分表示的编译后的代码，就是用 bind 实现的。 双冒号前面的对象就是 bind 的参数， 如果没有就是当前的 this, 毕竟这种做法就是用来做绑定的。 但是有一个问题，就是像这样的需求不好实现， 12345<Button type="ghost" icon="edit" onClick={this.handleEdit.bind(this, item)}/> 然后就是黑人问号脸，我试了几种形式 (当然不能用 bind 方法，否则这 :: 没有意义了) (this, item)::this.handleEdit // hhh this::this.handleEdit(item) // hhh 感觉唯一靠谱的就是第一种写法了， 编译之后 123456789_react2.default.createElement( _button2.default, { type: 'ghost', icon: 'edit', onClick: (_context = [this, item], this.handleEdit).bind(_context) }, '') 这样 bind 之后的方法内的 this 是一个数组，要想获取到真正的 this, 在 handleEdit 中还需要做 123456function handleEdit () { // this: [this, item] // 感觉好尴尬~ console.log(this[0]); // const [ _this, item ] = this;} 所以呢 在需要绑定 this 并且要添加额外参数的时候，就不要用 :: 了。老老实实用 bind 就好了。 箭头函数声明在 class 里面1234567891011121314151617181920class Example extends React.Component { handleButtonClick = (e) => { this.setState({ loading: true }); }; render() { return <Button onClick={this.handleButtonClick}>; }}// var Example = React.createClass({//// handleButtonClick: function(e) {// this.setState({ loading: true });// },// ...// }); 这样应该是最简单的方式了，因为是自动绑定 this 的（与注释中的代码效果是一样的）。 以上。","categories":[{"name":"JavaScript","slug":"javascript","permalink":"https://ochukai.github.io/categories/javascript/"}],"tags":[{"name":"js","slug":"js","permalink":"https://ochukai.github.io/tags/js/"},{"name":"this","slug":"this","permalink":"https://ochukai.github.io/tags/this/"}]},{"title":"修改 WebStorm 里面丑陋的 Markdown 样式","slug":"correct-ugly-markdown-css-in-webstorm","date":"2016-12-23T07:27:27.000Z","updated":"2023-07-16T03:46:17.421Z","comments":true,"path":"/correct-ugly-markdown-css-in-webstorm/","link":"","permalink":"https://ochukai.github.io/correct-ugly-markdown-css-in-webstorm/","excerpt":"","text":"一直觉得在 webstrom 里面看 markdown 是一种折磨，尤其是有 table 的情况下，很不爽！！！ 今天突然发现有一个设置项可以自定义 markdown 的样式， 就是右边方框里面的选项，取消 webstorm 默认的， 然后添加自己的 css，下面的css 是我找来的，还可以看： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403body { font-family: Helvetica, "微软雅黑", arial, sans-serif; font-size: 14px; line-height: 1.6; padding-top: 10px; padding-bottom: 10px; background-color: white; padding: 30px;}body > *:first-child { margin-top: 0 !important;}body > *:last-child { margin-bottom: 0 !important;}a { color: #4183C4;}a.absent { color: #cc0000;}a.anchor { display: block; padding-left: 30px; margin-left: -30px; cursor: pointer; position: absolute; top: 0; left: 0; bottom: 0;}h1, h2, h3, h4, h5, h6 { margin: 20px 0 10px; padding: 0; font-weight: bold; -webkit-font-smoothing: antialiased; cursor: text; position: relative;}h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA09pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoMTMuMCAyMDEyMDMwNS5tLjQxNSAyMDEyLzAzLzA1OjIxOjAwOjAwKSAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUM2NjlDQjI4ODBGMTFFMTg1ODlEODNERDJBRjUwQTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUM2NjlDQjM4ODBGMTFFMTg1ODlEODNERDJBRjUwQTQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QzY2OUNCMDg4MEYxMUUxODU4OUQ4M0REMkFGNTBBNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QzY2OUNCMTg4MEYxMUUxODU4OUQ4M0REMkFGNTBBNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsQhXeAAAABfSURBVHjaYvz//z8DJYCRUgMYQAbAMBQIAvEqkBQWXI6sHqwHiwG70TTBxGaiWwjCTGgOUgJiF1J8wMRAIUA34B4Q76HUBelAfJYSA0CuMIEaRP8wGIkGMA54bgQIMACAmkXJi0hKJQAAAABJRU5ErkJggg==) no-repeat 10px center; text-decoration: none;}h1 tt, h1 code { font-size: inherit;}h2 tt, h2 code { font-size: inherit;}h3 tt, h3 code { font-size: inherit;}h4 tt, h4 code { font-size: inherit;}h5 tt, h5 code { font-size: inherit;}h6 tt, h6 code { font-size: inherit;}h1 { font-size: 28px; color: black;}h2 { font-size: 24px; border-bottom: 1px solid #cccccc; color: black;}h3 { font-size: 18px;}h4 { font-size: 16px;}h5 { font-size: 14px;}h6 { color: #777777; font-size: 14px;}p, blockquote, ul, ol, dl, li, table, pre { margin: 5px 0;}hr { background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OENDRjNBN0E2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OENDRjNBN0I2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4Q0NGM0E3ODY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0NGM0E3OTY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqqezsUAAAAfSURBVHjaYmRABcYwBiM2QSA4y4hNEKYDQxAEAAIMAHNGAzhkPOlYAAAAAElFTkSuQmCC) repeat-x 0 0; border: 0 none; color: #cccccc; height: 4px; padding: 0;}body > h2:first-child { margin-top: 0; padding-top: 0;}body > h1:first-child { margin-top: 0; padding-top: 0;}body > h1:first-child + h2 { margin-top: 0; padding-top: 0;}body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child { margin-top: 0; padding-top: 0;}a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 { margin-top: 0; padding-top: 0;}h1 p, h2 p, h3 p, h4 p, h5 p, h6 p { margin-top: 0;}li p.first { display: inline-block;}li { margin: 0;}ul, ol { padding-left: 30px;}ul :first-child, ol :first-child { margin-top: 0;}dl { padding: 0;}dl dt { font-size: 14px; font-weight: bold; font-style: italic; padding: 0; margin: 15px 0 5px;}dl dt:first-child { padding: 0;}dl dt > :first-child { margin-top: 0;}dl dt > :last-child { margin-bottom: 0;}dl dd { margin: 0 0 15px; padding: 0 15px;}dl dd > :first-child { margin-top: 0;}dl dd > :last-child { margin-bottom: 0;}blockquote { border-left: 4px solid #dddddd; padding: 0 15px; color: #777777;}blockquote > :first-child { margin-top: 0;}blockquote > :last-child { margin-bottom: 0;}table { padding: 0; border-collapse: collapse;}table tr { border-top: 1px solid #cccccc; background-color: white; margin: 0; padding: 0;}table tr:nth-child(2n) { background-color: #f8f8f8;}table tr th { font-weight: bold; border: 1px solid #cccccc; margin: 0; padding: 6px 13px;}table tr td { border: 1px solid #cccccc; margin: 0; padding: 6px 13px;}table tr th :first-child, table tr td :first-child { margin-top: 0;}table tr th :last-child, table tr td :last-child { margin-bottom: 0;}img { max-width: 100%;}span.frame { display: block; overflow: hidden;}span.frame > span { border: 1px solid #dddddd; display: block; float: left; overflow: hidden; margin: 13px 0 0; padding: 7px; width: auto;}span.frame span img { display: block; float: left;}span.frame span span { clear: both; color: #333333; display: block; padding: 5px 0 0;}span.align-center { display: block; overflow: hidden; clear: both;}span.align-center > span { display: block; overflow: hidden; margin: 13px auto 0; text-align: center;}span.align-center span img { margin: 0 auto; text-align: center;}span.align-right { display: block; overflow: hidden; clear: both;}span.align-right > span { display: block; overflow: hidden; margin: 13px 0 0; text-align: right;}span.align-right span img { margin: 0; text-align: right;}span.float-left { display: block; margin-right: 13px; overflow: hidden; float: left;}span.float-left span { margin: 13px 0 0;}span.float-right { display: block; margin-left: 13px; overflow: hidden; float: right;}span.float-right > span { display: block; overflow: hidden; margin: 13px auto 0; text-align: right;}code, tt { margin: 0 2px; padding: 0 5px; white-space: nowrap; border: 1px solid #eaeaea; background-color: #f8f8f8; border-radius: 3px;}pre code { margin: 0; padding: 0; white-space: pre; border: none; background: transparent;}.highlight pre { background-color: #f8f8f8; border: 1px solid #cccccc; font-size: 13px; line-height: 19px; overflow: auto; padding: 6px 10px; border-radius: 3px;}pre { background-color: #f8f8f8; border: 1px solid #cccccc; font-size: 13px; line-height: 19px; overflow: auto; padding: 6px 10px; border-radius: 3px;}pre code, pre tt { background-color: transparent; border: none;}@media screen and (min-width: 914px) { body { width: 854px; margin: 0 auto; }}@media print { table, pre { page-break-inside: avoid; } pre { word-wrap: break-word; }}","categories":[{"name":"WebStorm","slug":"webstorm","permalink":"https://ochukai.github.io/categories/webstorm/"}],"tags":[{"name":"markdown","slug":"markdown","permalink":"https://ochukai.github.io/tags/markdown/"},{"name":"webstrom","slug":"webstrom","permalink":"https://ochukai.github.io/tags/webstrom/"}]},{"title":"JavaScript 中的 Decorator","slug":"decorator-in-js","date":"2016-12-21T01:33:38.000Z","updated":"2023-07-16T03:46:17.421Z","comments":true,"path":"/decorator-in-js/","link":"","permalink":"https://ochukai.github.io/decorator-in-js/","excerpt":"","text":"昨天在看一个拖拽库的时候，遇到了这么一段代码，感觉很有意思： 123456789101112@sortableclass DemoHOCItem extends React.Component { render() { return ( <div { ...this.props }> { this.props.children } </div> ); } } 查了一下之后发现这是 es7 的新语法，叫 Decorator。 语法如果要定义一个 Decorator 的话，不难，其实每一个 decorator 就是一个 function，有三个参数，像这样 123456789let log = (target, name, descriptor) => { console.log(target, name, descriptor); const method = descriptor.value; descriptor.value = (...args) => { logger.info(`before function execute: ${name}(${args}) = ?`); return method.apply(target, args); }} 三个参数还是比较好理解的 然后要用这个 decorator 的时候 1234567891011class Example { @log add(a, b) { return a + b; } }let my = new Example();my.add(2, 3); 这好像跟 Java 的 Annotation 形式差不多。 但是功能却跟 Python 的 Decorator 一样。 下面是运行时的输出 所以呢，decorator 的三个参数分别是 target 目标方法所在的类 name 方法名 descriptor 该方法的一些描述， 其中 value 就是方法本身，这一点在上一个例子中已经看到了。 用在 class 上面因为我最开始见到 decorator 是看到 12@sortableclass DemoHOCItem extends React.Component {/*...*/} 这时， decorator 是用在 class 上面的，当 decorator 用在 class 上面的时候只有第一个参数有值，比如 1234@logclass Example { add(a, b) { return a + b; }} 只会输出 1234# 也就是 name, descriptor 都是 undefined2016-12-21 10:28:26.617 function Example() { _classCallCheck(this, Example); } undefined undefined","categories":[{"name":"JavaScript","slug":"javascript","permalink":"https://ochukai.github.io/categories/javascript/"}],"tags":[{"name":"js","slug":"js","permalink":"https://ochukai.github.io/tags/js/"},{"name":"decorator","slug":"decorator","permalink":"https://ochukai.github.io/tags/decorator/"}]},{"title":"使用命令行更新 Win10 的密钥","slug":"use-terminal-to-update-win10-key","date":"2016-12-16T05:02:13.000Z","updated":"2023-07-16T03:46:17.425Z","comments":true,"path":"/use-terminal-to-update-win10-key/","link":"","permalink":"https://ochukai.github.io/use-terminal-to-update-win10-key/","excerpt":"","text":"今天在公司装了 win10，但是点击更换密钥的时候老是卡死，然后就搜了一下发现可以用命令行设置 12345# 设置密钥slmgr /ipk DDCGG-9N3QJ-2B23T-C***V-XD72F# 检查是否已激活slmgr.vbs -ato","categories":[],"tags":[{"name":"win10","slug":"win10","permalink":"https://ochukai.github.io/tags/win10/"},{"name":"win10-key","slug":"win10-key","permalink":"https://ochukai.github.io/tags/win10-key/"},{"name":"slmgr","slug":"slmgr","permalink":"https://ochukai.github.io/tags/slmgr/"}]},{"title":"webpack-dev-server 在 webstorm 中失效的问题","slug":"webpack-dev-server-vs-webstorm","date":"2016-12-08T11:32:09.000Z","updated":"2023-07-16T03:46:17.425Z","comments":true,"path":"/webpack-dev-server-vs-webstorm/","link":"","permalink":"https://ochukai.github.io/webpack-dev-server-vs-webstorm/","excerpt":"","text":"最近换了公司 ！！！ 重新用上了高大上的 win7 系统，还是熟悉的画面，然后又装上了 WebStorm，准备开始我的性福人生。 但天有不测风云，在使用一个基于 webpack 构建的项目中，每次修改代码之后，webpack-dev-server 总是不能够自动重新编译，很烦！！！ 这可急坏了宝宝！！！ 但是我非常冷静的分析了一下原因，可能是因为webstorm有自动保存的机制， 是不是很机智，一下子就命中了要害（但其实这中间的过程可复杂了） 如上图， 在 File -> Settings -> Appearance & Behavior -> System Settings 里面，取消勾选上面红框的两项。 每次修改之后，ctrl + s 就可以了。","categories":[{"name":"WebStorm","slug":"webstorm","permalink":"https://ochukai.github.io/categories/webstorm/"}],"tags":[{"name":"webpack-dev-server","slug":"webpack-dev-server","permalink":"https://ochukai.github.io/tags/webpack-dev-server/"},{"name":"webpack","slug":"webpack","permalink":"https://ochukai.github.io/tags/webpack/"},{"name":"webstorm","slug":"webstorm","permalink":"https://ochukai.github.io/tags/webstorm/"}]},{"title":"在 window 里面杀死某个进程","slug":"kill-process-in-window","date":"2016-11-22T01:49:57.000Z","updated":"2023-07-16T03:46:17.423Z","comments":true,"path":"/kill-process-in-window/","link":"","permalink":"https://ochukai.github.io/kill-process-in-window/","excerpt":"","text":"查看被谁占用123456789101112131415161718192021netstat -ano | findstr 8989 # C:\\Users\\Administrator>netstat -ano | findstr 8989# TCP 0.0.0.0:8989 0.0.0.0:0 LISTENING 6360# TCP [::]:8989 [::]:0 LISTENING 6360# TCP [::1]:8989 [::1]:53638 ESTABLISHED 6360# TCP [::1]:8989 [::1]:53640 ESTABLISHED 6360# TCP [::1]:8989 [::1]:53641 ESTABLISHED 6360# TCP [::1]:8989 [::1]:53645 ESTABLISHED 6360# TCP [::1]:8989 [::1]:53646 ESTABLISHED 6360# TCP [::1]:8989 [::1]:53652 ESTABLISHED 6360# TCP [::1]:8989 [::1]:53653 ESTABLISHED 6360# TCP [::1]:8989 [::1]:53654 ESTABLISHED 6360# TCP [::1]:53638 [::1]:8989 ESTABLISHED 5440# TCP [::1]:53640 [::1]:8989 ESTABLISHED 5440# TCP [::1]:53641 [::1]:8989 ESTABLISHED 5440# TCP [::1]:53645 [::1]:8989 ESTABLISHED 5440# TCP [::1]:53646 [::1]:8989 ESTABLISHED 5440# TCP [::1]:53652 [::1]:8989 ESTABLISHED 5440# TCP [::1]:53653 [::1]:8989 ESTABLISHED 5440# TCP [::1]:53654 [::1]:8989 ESTABLISHED 5440 1tasklist | findstr 8989//查看pid为3036的是什么程序在用 杀死某进程1234# /T 包括子进程# /F 强制 taskkill /T /F /PID 8989","categories":[{"name":"Window","slug":"window","permalink":"https://ochukai.github.io/categories/window/"}],"tags":[{"name":"端口占用","slug":"端口占用","permalink":"https://ochukai.github.io/tags/%E7%AB%AF%E5%8F%A3%E5%8D%A0%E7%94%A8/"}]},{"title":"东野圭吾(Higashino Keigo)的全集","slug":"higashino-keigo","date":"2016-07-26T08:38:44.000Z","updated":"2023-07-16T03:46:17.422Z","comments":true,"path":"/higashino-keigo/","link":"","permalink":"https://ochukai.github.io/higashino-keigo/","excerpt":"","text":"最近看了几篇 东野圭吾 的小说, 都还蛮有意思的。 像 《嫌疑人X的献身》, 《流星之绊》,《毕业》啊 等等,好多都记不住名字了。 于是决定把他的全集整理一下,留着有空都看一遍~ 加贺恭一郎系列 《毕业——雪月花杀人游戏》（《毕业前杀人游戏》）<卒业―雪月花杀人ゲーム> 《沉睡的森林》<眠りの森> 《谁杀了她》<どちらかが彼女を杀した> 《恶意》 《我杀了他》<私が彼を杀した> 《又一个谎言》 <嘘をもうひとつだけ> 刊载于推理杂志220-224期 《红手指》 <赤い指>（2011年冬季档日剧SP，阿部宽、黑木明纱主演） 《新参者》（2010年拍摄日剧，阿部宽、黑木明纱主演） 《麒麟之翼》<麒麟の翼> 神探伽利略 (按列表顺序) 《侦探伽利略》<探侦ガリレオ> 《预知梦》<予知梦> 《嫌疑犯X的献身》<容疑者Xの献身> 《伽利略的苦恼》<ガリレオの苦悩> 《圣女的救济》<圣女の救済> 《盛夏的方程式》<真夏の方程式> 《虚像的小丑》<虚像の道化师> 《禁断的魔术》<禁断の魔术> 毒舌三部曲 怪笑小说 毒笑小说 黑笑小说 获奖作品 1983年《人偶之家》第29届江戸川乱歩赏二次予选通过 1984年《魔球》第30届江戸川乱歩赏最终候补 1985年《放学后》夺得第31届江户川乱步奖，开始专职写作。 1988年《学生街杀人事件》第9届吉川英治文学新人赏候补・第41回日本推理作家协会赏（长编）候补 1990年《鸟人计划》第11届吉川英治文学新人赏候补 1991年《天使之耳》第44届日本推理作家协会赏（短编集）候补 1992年《镜之中》第45届日本推理作家协会赏（短编集）候补 1993年《雪地杀机》第46届日本推理作家协会赏（长编部）候补 1993年《交通警察之夜》第46届日本推理作家协会赏（短编集）候补 1996年《天空之蜂》第17届吉川英治文学新人赏候补 1997年《名侦探的守则》第18届吉川英治文学新人赏候补 1999年《秘密》第120届直木奖三十五赏候补，第20回吉川英治文学新人赏候补，第52回日本推理作家协会奖 2000年《白夜行》第122届直木奖三十五赏候补 2001年《单恋》第125届直木奖三十五赏候补 2003年《信》第129届直木奖三十五赏候补 2004年《幻夜》第131届直木三奖十五赏候补 2006年《嫌疑人X的献身》将第134届直木奖、第6届本格推理小说 大奖及当年度日本三大推理小说排行榜（“这本推理小说了不起！”、“周刊文春推理小说BEST10”、“本格推理小说 BEST10”）第1名一并收入囊中。 2008年《流星之绊》荣获第43届新风奖。 2009年《新参者》获“这本推理小说了不起！”、“周刊文春推理小说BEST10”年度第1名。 2012年《嫌疑犯X的献身》美国图书馆协会最推荐图书（推理部门）、爱伦·坡奖最优秀长编奖候补、巴瑞奖新人赏奖候补 2012年《浪矢杂货店的奇迹》第7届中央公论文艺奖 上面的作品今年都看完应该就不错了~ 毕竟做人都是要有目标的嘛,那么更远大的目标呢,就是下面的全部列表了。 作品列表1985年 《放学后》<放课後> （第31 届江户川乱步奖） 1986年 《毕业——雪月花杀人游戏》（加贺恭一郎系列）（《毕业前杀人游戏》）<卒业―雪月花杀人ゲーム> 《白马山庄杀人事件》<白马山荘杀人事件> 1987年 《学生街里的杀人事件》<学生街の杀人>（入围第41届日本推理作家协会赏） 《十一字杀人》（11文字の杀人） 1988年 《魔球》 《以眨眼干杯》<ウインクで乾杯> 原名<香子の梦―コンパニオン杀人事件> / 《香子之梦——夥伴杀人事件》 《浪花少年侦探团》<浪花少年探侦団> 1989年 《十字豪宅的小丑》<十字屋敷のピエロ> 《沉睡的森林》<眠りの森>（加贺恭一郎系列）（特别说明：并不是木村拓哉主演的那部电视剧） 《鸟人计划》<鸟人计画>（入围第11届吉川英治文学新人奖） 《杀人现场在云端》<杀人现场は云の上> 《布鲁特斯的心脏——完全犯罪杀人接力》<ブルータスの心臓―完全犯罪杀人リレー> 1990年 《侦探俱乐部》<探侦倶楽部> 原名 <依頼人の娘>《负责人的女儿》本短篇集包括： 伪装之夜 / 伪装の夜 疯狂的电击 / 罠の中 少女委托人 / 依頼人の娘 伊豆旅馆的神秘案 / 探侦の使い方 玫瑰与匕首 / 蔷薇とナイフ 《宿命》（2004年拍摄日剧SP，柏原崇、藤木直人主演） 《没有凶手的杀人夜》<犯人のいない杀人の夜>（曾刊载于推理杂志） 小小的恶作剧故事 / 小さな故意の物语（2012年日剧《东野圭吾推理系列》第八集，三浦春马主演） 黑暗中的两个人 / 闇の中の二人 舞女 / 踊り子 无尽之夜 / エンドレス·ナイト（2012年日剧《东野圭吾推理系列》第三集，松下奈绪主演） 白色凶器 / 白い凶器（2012年日剧《东野圭吾推理系列》第七集，户田惠梨香主演） 别了，教练 / さよならコーチ（2012年日剧《东野圭吾推理系列》第一集，唐泽寿明主演） 没有凶手的杀人夜 / 犯人のいない杀人の夜（2012年日剧《东野圭吾推理系列》第二集，坂口宪二主演） 《面具山庄杀人事件》<仮面山荘杀人事件> 1991年 《变身》<变身>（2005年拍摄电影，玉木宏、苍井优主演） 《回廊亭杀人事件》<回廊亭杀人事件>（2012年06月24日播出日剧SP，主演：常盘贵子） 《天使之耳》<交通警察の夜> 天使之耳/ 天使の耳 隔离带/ 分离帯 危险的新叶/ 危険な若叶 请通过/ 通りゃんせ 请勿弃物/ 舍てないで 镜之中/ 镜の中で 1992年 《雪地杀机》<ある闭ざされた雪の山荘で> 《美丽的凶器》<美しき凶器> 1993年 《同班同学》<同级生> 《分身》（2012年2月12日播出日剧，主演：长泽雅美） 《和阿忍老师说再见——浪花少年侦探团·独立篇》<しのぶセンセにサヨナラ―浪花少年探侦団·独立编> 1994年 《怪人们》 / 怪しい人びと 沉睡的女人 / 寝ていた女 让我再听一次你的判罚 / もう一度コールしてくれ 至死方休 / 死んだら働けない 蜜月之旅 / 甘いはずなのに 新婚照之谜 / 结婚报告（2012年日剧《东野圭吾推理系列》第九集，广末凉子主演） 灯塔之上 / 灯台にて 哥斯达黎加的冷雨 / コスタリカの雨は冷たい 《我以前死去的家》<むかし仆が死んだ家> 《操纵彩虹的少年》<虹を操る少年> 1995年 《平行世界·爱情故事》<パラレルワールド·ラブストーリー> 《那个时候我们是傻瓜》（散文集）<あの顷ぼくらはアホでした> 《怪笑小说》 郁积电车 / 郁积电车 追星阿婆 / おっかけバアさん 一彻老爸 / 一彻おやじ 逆转同学会 / 逆転同窓会 超狸理论 / 超たぬき理论 无人岛大相扑转播 / 无人岛大相扑中継 尸台社区 / しかばね台分譲住宅 献给某位老爷爷的线香 / あるジーサンに线香を 动物家庭 / 动物家族 《天空之蜂》<天空の蜂>（入围第17届吉川英治文学新人奖） 1996年 《名侦探的守则》<名探侦の掟>（2009春季日剧，松田翔太主演） 《谁杀了她》（加贺恭一郎系列）<どちらかが彼女を杀した> 《毒笑小说》 绑架天国 / 诱拐天国 Angel / エンジェル 手工贵妇 / 手作りマダム 程序警察 / マニュアル警察（世界奇妙物语 2000秋季sp，玉置浩二主演，又名《准则警察》） 爷爷当家 / ホームアローンじいさん 新郎人偶 / 花婿人形 女作家 / 女流作家 杀意使用说明书 / 杀意取扱说明书（世界奇妙物语 2010秋季sp，玉木宏、冢本高史主演） 补偿 / つぐない 光荣的证言 / 栄光の证言 本格推理周边鉴定秀 / 本格推理関连グッズ鉴定ショー 绑架电话网 / 诱拐电话网 《恶意》（加贺恭一郎系列） 《名侦探的诅咒》<名探侦の呪缚> 1998年 《侦探伽利略》（神探伽利略系列第1部）<探侦ガリレオ> 《秘密》（第52届日本推理作家协会奖、第120 届直木奖入围） 1999年 《我杀了他》（加贺恭一郎系列）<私が彼を杀した> 《白夜行》（第122 届直木奖入围） 2000年 《又一个谎言》 （加贺恭一郎系列） <嘘をもうひとつだけ> 刊载于推理杂志220-224期 又一个谎言 / 嘘をもうひとつだけ 寒冷的灼热 / 冷たい灼热 第二个希望 / 第二の希望 疯狂计算 / 狂った计算 朋友的忠告 / 友の助言 《预知梦》（神探伽利略系列第2部）<予知梦>（2007年拍摄日剧《神探伽利略》6-10集，福山雅治、柴崎幸主演） 2001年 《单恋》<片想い> （第125 届直木奖入围） 《超·杀人事件》<超·杀人事件 推理作家の苦悩>（「2003年世界奇妙物语春季篇」拍摄其中一个单元故事<超税金对策杀人事件>，西村雅彦、大冢宁宁主演） 超税金对策杀人事件 / 超税金対策杀人事件 超理科杀人事件 / 超理系杀人事件 超猜凶手小说杀人事件 / 超犯人当て小说杀人事件（问题篇·解决篇） 超高龄化社会杀人事件 / 超高齢化社会杀人事件 超预告小说杀人事件 / 超予告小说杀人事件 超长篇小说杀人事件 / 超长编小说杀人事件 魔风馆杀人事件 / 魔风馆杀人事件（超最终回·ラスト五枚） 超读书机器杀人事件 / 超読书机械杀人事件 《圣诞阿姨》 /サンタのおばさん（絵本：絵は杉田比吕美） 2002年 《湖畔》<レイクサイド>（2002年拍摄电影，药师丸博子、丰川悦司、役所广司主演） 《时生》<トキオ>（2004年拍摄日剧，樱井翔主演，剧名为「给父亲的口信」） 《绑架游戏》<ゲームの名は诱拐>（2003年拍摄电影、藤木直人、仲间由纪惠主演） 2003年 《信》<手纸>（第129 届直木奖入围）（2005年拍摄电影，山田孝之、泽尻英龙华主演） 《我是非常勤》<おれは非情勤> （注：本书书名和「 非常勤」（中文意为兼任）同音，是创作者特别设定的双关语趣味） 《杀人之门》<杀人の门> 2004年 《幻夜》（第131 届直木奖入围）（2010年秋季档日剧，深田恭子、冢本高史主演） 《挑战？》（散文集）<ちゃれんじ>（散文集） 《彷徨之刃》<さまよう刃>（2009年改编为电影，竹野内丰主演） 2005年 《黑笑小说》 又一次助跑 / もうひとつの助走 线香花火 / 线香花火 过去的人 / 过去の人 评审会 / 选考会 巨乳妄想综合征 / 巨乳妄想症候群 无能药 / インポグラ 显微眼 / みえすぎ 钟情喷雾 / モテモテ·スプレー 灰姑娘白夜行 / シンデレラ白夜行 跟踪狂入门 / ストーカー入门 临界家族 / 临界家族 不笑的人 / 笑わない男 奇迹之照 / 奇迹の一枚 《嫌疑犯X的献身》（神探伽利略系列第3部）<容疑者Xの献身> 《科学》（散文集）<さいえんす> 2006年 《梦回都灵》（散文集）<梦はトリノをかけめぐる> 《红手指》（加贺恭一郎系列） <赤い指>（2011年冬季档日剧SP，阿部宽、黑木明纱主演） 《使命与心的极限》<使命と魂のリミット> （2011秋季档日剧SP，石原里美、速水重道主演） 2007年 《也许是最后的寒暄》<たぶん最後の御挨拶>（散文集） 《黎明之街》<夜明けの街で>（2011年拍摄电影，深田恭子、岸谷五朗主演） 《濒死之眼》<ダイイング·アイイ> 2008年 《流星之绊》<流星の绊>（2008年拍摄日剧，二宫和也、锦户亮、户田惠梨香主演） 《伽利略的苦恼》（神探伽利略系列第4部）<ガリレオの苦悩> 《圣女的救济》（神探伽利略系列第5部）<圣女の救済> 2009年 《悖论13》台版译《异变13秒》<パラドックス13> 《新参者》（加贺恭一郎系列）（2010年拍摄日剧，阿部宽、黑木明纱主演） 《美丽的凶器》 2010年 《布谷鸟的蛋是谁的》<カッコウの卵は谁のもの> 在《小说宝石》上连载时原题《フェイク》 《白金数据》<プラチナデータ>（2012年拍摄电影，二宫和也主演） 《白银杰克》< 白银ジャック> 2011年 《你旁边是谁》<あの顷の谁か> 全是字谜 / シャレードがいっぱい（2012年日剧《东野圭吾推理系列》第六集，长泽雅美主演） Reiko和玲子 / 玲子とレイコ（2012年日剧《东野圭吾推理系列》第四集，观月阿丽莎主演） 再生魔术之女 / 再生魔术の女 （2012年日剧《东野圭吾推理系列》第十一集，铃木京香主演） 再见，“爸爸” / さよなら『お父さん』 名侦探退场 / 名探侦退场 母老虎 / 女も虎も 好困，我不想死 / りたい死にたくない 20年的约定 / 二十年目の约束（2012年日剧《东野圭吾推理系列》第十集，筱原凉子主演） 《麒麟之翼》（加贺恭一郎系列）<麒麟の翼>（加贺恭一郎系列） 《牛奶箱的回答》<回答は牛乳箱に>（短篇 出自《小说 野性时代》 第89号） 《听心》<心聴>（短篇 出自《オール读物》2011年04月号） 《盛夏的方程式》（神探伽利略系列第6部）<真夏の方程式> 《假面舞馆》<マスカレード·ホテル> 暂定2012年9月9日出版 《歪笑小说》 2012年 《虚像的小丑》（神探伽利略系列第7部）<虚像の道化师 ガリレオ 7> 《杂货店的奇迹》 《那个时候的谁》 《禁断的魔术》（神探伽利略系列第8部）<禁断の魔术 ガリレオ8> 2013年 《梦幻花》（むげんばな）","categories":[{"name":"文学","slug":"文学","permalink":"https://ochukai.github.io/categories/%E6%96%87%E5%AD%A6/"}],"tags":[{"name":"文学","slug":"文学","permalink":"https://ochukai.github.io/tags/%E6%96%87%E5%AD%A6/"},{"name":"日本文学","slug":"日本文学","permalink":"https://ochukai.github.io/tags/%E6%97%A5%E6%9C%AC%E6%96%87%E5%AD%A6/"},{"name":"东野圭吾","slug":"东野圭吾","permalink":"https://ochukai.github.io/tags/%E4%B8%9C%E9%87%8E%E5%9C%AD%E5%90%BE/"},{"name":"东野圭吾作品全集","slug":"东野圭吾作品全集","permalink":"https://ochukai.github.io/tags/%E4%B8%9C%E9%87%8E%E5%9C%AD%E5%90%BE%E4%BD%9C%E5%93%81%E5%85%A8%E9%9B%86/"}]},{"title":"Splice 和 Slice 的区别","slug":"ths-difference-between-splice-and-slice","date":"2016-07-11T02:52:16.000Z","updated":"2023-07-16T03:46:17.424Z","comments":true,"path":"/ths-difference-between-splice-and-slice/","link":"","permalink":"https://ochukai.github.io/ths-difference-between-splice-and-slice/","excerpt":"","text":"之前写过一遍介绍 splice() 方法的，这一次又遇到了 slice(), 这两个太像了, 首先看这两个意思吧： splice [splais]n. 接合；结婚vt. 拼接；接合；使结婚 和 slice [slais]n. 薄片；部分；菜刀，火铲vt. 切下；把…分成部分；将…切成薄片vi. 切开；割破 区别slice() 方法可从已有的数组中返回选定的元素。这个函数有两个参数 slice(start, end) 会返回一个从 start 到 end 之前元素的新数组， 如果 end 是负数，就从数组末尾倒着数, 如果 end 没有设置，就返回从 start 到数组末尾组成的新数组咯~ 总之这是一个返回新数组的函数，知识返回而已，不会改变原来的数组，而 splice 方法则会改变原来的数组. 例子12345678910var arr = new Array(3)arr[0] = "George"arr[1] = "John"arr[2] = "Thomas"arr[3] = "James"arr[4] = "Adrew"arr[5] = "Martin"console.log(arr.slice(4)) // ["Adrew", "Martin"] == arr.slice(4, 6)console.log(arr.slice(0, -4)) // ["George", "John"] == arr.slice(0, 2)","categories":[],"tags":[{"name":"js","slug":"js","permalink":"https://ochukai.github.io/tags/js/"},{"name":"splice","slug":"splice","permalink":"https://ochukai.github.io/tags/splice/"},{"name":"slice","slug":"slice","permalink":"https://ochukai.github.io/tags/slice/"}]},{"title":"上层滚动 下层不摇滚","slug":"prevent-deep-div-scroll-with-the-top-element","date":"2016-06-23T03:12:27.000Z","updated":"2023-07-16T03:46:17.423Z","comments":true,"path":"/prevent-deep-div-scroll-with-the-top-element/","link":"","permalink":"https://ochukai.github.io/prevent-deep-div-scroll-with-the-top-element/","excerpt":"","text":"最近写手机页面颇多, 经常有弹出框, 或者下拉列表, 如果弹框或者下拉列表的内容太多,出现了滚动条, 恰好外面的内容也很多,也有滚动条的话,就会出现一种情况: 比如上图, 当用力划一下屏幕, 下拉框滚到底了之后, body 随之也开始滚, 很讨厌。出现过好多次了, 而且测试逼我太紧~ 我要解决这个问题啊其实很简单, 只要弹出下拉列表的时候让下层的元素不能滚动就好了。 123.modal-open { overflow: hidden;} js 的话就这么写: 123456789function show($div) { $('body').addClass('modal-open'); // ...}function hide($div) { $('body').removeClass('modal-open'); // ...} 以上。","categories":[],"tags":[]},{"title":"Zepto 插件写法","slug":"zepto-plugin","date":"2016-06-20T06:32:33.000Z","updated":"2023-07-16T03:46:17.425Z","comments":true,"path":"/zepto-plugin/","link":"","permalink":"https://ochukai.github.io/zepto-plugin/","excerpt":"","text":"一般是这样的… 比较水, 并没有怎么写过. 我只是把 bootstrap 的 button 组件改了一下, 删掉了 data-api 部分, 感觉这样该够用了。 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061+function ($) { 'use strict'; // BUTTON PUBLIC CLASS DEFINITION // ============================== var Button = function (element, options) { this.$element = $(element); this.options = $.extend({}, Button.DEFAULTS, options); } Button.DEFAULTS = { loadingText: 'loading...'; } Button.prototype.setState = function (state) {}; Button.prototype.toggle = function () {}; // BUTTON PLUGIN DEFINITION // ======================== function Plugin(option) { return this.each(function () { var $this = $(this), lookup = $.fn.button.lookup, instance = lookup[$this.data('bs.button')]; if (!instance) { lookup[++lookup.i] = (instance = new Button(this, options)); $this.data('bs.button', lookup.i); } // button method // if (option == 'toggle') { // data.toggle(); // } else if (option) { // data.setState(option); // } }); } var old = $.fn.button; $.fn.button = Plugin; $.fn.button.lookup = { i: 0 }; $.fn.button.Constructor = Button; // BUTTON NO CONFLICT // ================== $.fn.button.noConflict = function () { $.fn.button = old; return this; };} (Zepto);","categories":[{"name":"JavaScript","slug":"javascript","permalink":"https://ochukai.github.io/categories/javascript/"}],"tags":[{"name":"zepto","slug":"zepto","permalink":"https://ochukai.github.io/tags/zepto/"}]},{"title":"使用 formData 提交表单和上传图片","slug":"formdata-in-action","date":"2016-04-11T07:34:57.000Z","updated":"2023-07-16T03:46:17.422Z","comments":true,"path":"/formdata-in-action/","link":"","permalink":"https://ochukai.github.io/formdata-in-action/","excerpt":"","text":"最近做了一个表单，需要提交好多信息和一些图片，后台的同学说要图片随着表单一起提交。那就不能用 ajax 单张上传了~ 图片的话，最多可以选8张，选中了的也可以取消掉，因为并没有传到服务器，所以删除很easy。 然后我就想到了可以用 FormData 来做，因为之前好像用过，感觉很方便。 FormData The FormData interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest.send() method. It uses the same format a form would use if the encoding type were set to “multipart/form-data”. 如果使用 jQuery 提交 formData 的话，大致像这样： 1234567891011121314$.ajax({ url : url, type : 'POST', data : formData, // 下面这两条需要特别注意 processData: false, contentType: false, success(data) { // ... }, error(xhr) { // ... }}); 就是把 formData 作为 data 发送到后台就好了，如果要构造一个 formData 对象的话，也很简单呢 1234var formdata = new FormData();formData.append('ticket_id', 1); 如果放文件在 formData 里面的话呢，也没有太复杂的地方： 1234567891011121314151617181920212223242526272829303132// html// <input// ref="input-image"// accept="image/*"// onChange={ this.onImageSelected }// type="file"// />// ....isImage: function (file) { // (!src.type.match(/image.*/) var type = '|' + file.type.slice(file.type.lastIndexOf('/') + 1) + '|'; return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;},onImageSelected(e) { var file = e.target.files[0]; console.log('select image', file); if (!this.isImage(file)) { Modal.error({ title: '请选择一张图片' }); return; } this.props.onImageSelected(file);}// ...// 放多个也可以~formData.append('file1', file1)formData.append('file2', file2) 对了，因为我把上传文件的 input 隐藏掉了，显示出来了是一个 加号 的图标，所以如果要触发 input 的点击事件的话： 1234onItemClick() { const input = findDOMNode(this.refs['input-image']); input.click();}, 生成 formData一个一个的 append 可能速度太慢了，而且需要每个都写一遍，其实生成的 formData 的方式还是蛮多的： 1234567// 1var form = document.getElementById("form");var formdata = new FormData(form);// 2var form = document.getElementById("form");var formdata = form.getFormData(); 好了，没了。","categories":[{"name":"form","slug":"form","permalink":"https://ochukai.github.io/categories/form/"},{"name":"JavaScript","slug":"form/javascript","permalink":"https://ochukai.github.io/categories/form/javascript/"}],"tags":[{"name":"formData","slug":"formdata","permalink":"https://ochukai.github.io/tags/formdata/"},{"name":"ajax","slug":"ajax","permalink":"https://ochukai.github.io/tags/ajax/"},{"name":"image upload","slug":"image-upload","permalink":"https://ochukai.github.io/tags/image-upload/"}]},{"title":"菜单下面的小精灵","slug":"menu-with-moved-elfish","date":"2016-03-21T08:05:51.000Z","updated":"2023-07-16T03:46:17.423Z","comments":true,"path":"/menu-with-moved-elfish/","link":"","permalink":"https://ochukai.github.io/menu-with-moved-elfish/","excerpt":"","text":"有些网站的导航下面会有一到杠，鼠标在各个导航之间移动的时候，这一道杠也会跟着动，很好看，就像这个 See the Pen ooo-nav by Oliver (@ochukai) on CodePen. 我把她叫做小精灵。 原理实现这个其实不难，当鼠标移动到某一个菜单上面时，小精灵滑入（至于方向，如果鼠标从右边进入菜单，那就从右向左滑），然后当鼠标移出时，小精灵跟着也移出菜单， 同时如果鼠标恰好移进了另一个菜单，下一个菜单的进入动画也开始播放，连续起来的话就像是小精灵跟着过来了。 实现菜单菜单的话当然是用 ul 来实现了 123456<ul class="nav"> <li>我的</li> <li>导航栏</li> <li>非常</li> <li>牛逼</li></ul> 小精灵这个小精灵该怎么实现呢, 开始时我打算用 border 来实现，试了一下之后才发现，并不理想，因为当鼠标 hover 时，border 变化，内容也会随着动，很丑。 于是我就想用 after 这个伪元素来实现，因为之前并没用过，感觉蛮新鲜的。 使用 after 最重要的地方也是前提，就是 content: ''，如果没有这一句，不管怎么修饰 after 的样式，都是徒劳。 写完之后的样子大概是这样 123456789101112131415> li { float:left; display: inline-block; padding: 10px 20px; cursor: pointer; position: relative; overflow: hidden; &:after { content: ''; height: 3px; position: absolute; bottom: 0; }} 动画根据上面的原理，如果想实现的话，大概只需要写四个动画 小精灵从右向左进入菜单 小精灵从右向左移出菜单 小精灵从左向右进入菜单 小精灵从左向右移出菜单 我打算使用 width 的变化来模拟小精灵的滑动效果，假如是从左向右， css 就像下面这样： 12345678910111213141516@keyframes slide-in { from { width: 0; } to { width: 100%; }}.slide-in-from-left:after,.slide-out-from-left:after { left: 0; // 初始位置在左边，宽度为 0，宽度逐渐变大}.slide-in-from-left:after,.slide-in-from-right:after { animation-name: slide-in; animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);} JScss 写完了，不过我要识别鼠标进入或离开的方向，也就是要判断鼠标是从左边进入还是从右边进入，是从左边移出还是从右边移出。 于是， 要写一些 js 来判断 12345678910111213141516171819202122232425262728293031$(function() { var classList = [ 'slide-in-from-left', 'slide-in-from-right', 'slide-out-from-right', 'slide-out-from-left' ].join(' '); $('ul.nav') .on('mouseenter', 'li', function(e) { var $this = $(this); var width = $this.outerWidth(); var xx = e.offsetX; var className = (xx < (width / 2)) ? 'slide-in-from-left' : 'slide-in-from-right'; $this.removeClass(classList).addClass(className); }) .on('mouseleave', 'li', function(e) { var $this = $(this); var width = $this.outerWidth(); var xx = e.offsetX; var className = (xx < (width / 2)) ? 'slide-out-from-left' : 'slide-out-from-right'; $this.removeClass(classList).addClass(className); });}); 这样就写完了，再把开头的例子放上吧。 See the Pen ooo-nav by Oliver (@ochukai) on CodePen. 谢谢。","categories":[{"name":"CSS Animation","slug":"css-animation","permalink":"https://ochukai.github.io/categories/css-animation/"},{"name":"CSS","slug":"css-animation/css","permalink":"https://ochukai.github.io/categories/css-animation/css/"}],"tags":[{"name":"nav","slug":"nav","permalink":"https://ochukai.github.io/tags/nav/"}]},{"title":"Javascript 中的 splice 方法","slug":"splice-in-javascript","date":"2016-03-16T06:25:53.000Z","updated":"2023-07-16T03:46:17.424Z","comments":true,"path":"/splice-in-javascript/","link":"","permalink":"https://ochukai.github.io/splice-in-javascript/","excerpt":"","text":"splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。(会改变原始数组) 语法1arrayObject.splice(index, how-many, item1, item2, ...itemX) 参数 描述 index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。 how-many 必需。要删除的项目数量。如果设置为 0，则不会删除项目。 item1, …, itemX 可选。向数组添加的新项目。 用法举例在数组最开始插入一个元素 12var arrr = [1, 2, 3, 4]; // arrr: [1, 2, 3, 4]arrr.splice(0, 0, 0); // arrr: [0, 1, 2, 3, 4] 删除第三个 123// arrr: [0, 1, 2, 3, 4]arrr.splice(3, 1) // return [3] 删除的元素会做为返回返回值 // arrr: [0, 1, 2, 4] 删除后面两个 123// arrr: [0, 1, 2, 4]arrr.splice(2, 2) // return [2， 4] // arrr: [0, 1] 替换 123// 把第二个元素变成 5// arrr: [0, 1, 2, 4]arrr.splice(2, 1, 5); // [0, 1, 5, 4] 交换位置 12345678function swapArrayItemPosition(arr, one, another) { var dummy = arr.splice(one, 1, arr[another])[0]; arr.splice(another, 1, dummy); return arr;}// arrr = [0, 1, 5, 4]swapArrayItemPosition(arrr, 1, 2); // [0, 5, 1, 4]","categories":[],"tags":[{"name":"js","slug":"js","permalink":"https://ochukai.github.io/tags/js/"},{"name":"splice","slug":"splice","permalink":"https://ochukai.github.io/tags/splice/"},{"name":"array","slug":"array","permalink":"https://ochukai.github.io/tags/array/"}]},{"title":"Queue Anim 列表","slug":"css-animation-queue-list","date":"2016-03-03T09:45:24.000Z","updated":"2023-07-16T03:46:17.421Z","comments":true,"path":"/css-animation-queue-list/","link":"","permalink":"https://ochukai.github.io/css-animation-queue-list/","excerpt":"","text":"@keyframes基本写法是一个开始状态和一个结束状态： 12345678@keyframes demo-anim { from { opacity: 1; } to { opacity: 0; }} See the Pen QNbBOy by Oliver (@ochukai) on CodePen. 其中 animation-iteration-count: number or infinite; 可以设置循环次数，infinite为无限次 还可以定义的很详细： 123456789101112131415161718192021@keyframes demo-anim { from { transform: translate(0, 0); } 20% { transform: translate(20, 20); } 40% { transform: translate(40, 0); } 60% { transform: translate(60, 20); } 80% { transform: translate(80, 0); } to { transform: translate(100, 20); }} animation-fill-mode animation-fill-mode : none | forwards | backwards | both; 值 描述 none 不改变默认行为。 forward 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。 backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。 both 向前和向后填充模式都被应用。 用到的知识点就是上面两个，下面开始写。 Queue-in List我要写的效果是一个列表，当列表显示时，其子项逐个出现，从右向左滑入，透明度也由浅变深。 思路先写一个使 li 从左向右滑入的效果，然后再给需要稍晚滑入的 li 加上 animation-delay 就好了。 css123456789101112131415161718192021222324252627282930/* 定义 li 样式 */li { width: 200px; height: 30px; background-color: #ccc; margin-top: 2px; opacity: 0; /* 默认是隐藏的 */}/* 定义动画 */@keyframes queue-in { from { /* 开始时 在左边 */ transform: translateX(40px); } to { opacity: 1; transform: translateX(0); }}/* 调用动画 */.list-queue-in > li { animation-name: queue-in; animation-duration: .3s; /* 这一行就表示动画结束时元素的状态就是动画的最后一帧 */ animation-fill-mode: forwards; animation-timing-function: ease-in;} html这是 进入状态时的 html 1234567<ul class="list-queue-in"> <li class="list-ad-0" key="0">1</li> <li class="list-ad-1" key="1">2</li> <li class="list-ad-2" key="2">3</li> <li class="list-ad-3" key="2">4</li> <li class="list-ad-4" key="2">5</li></ul> 这样的话，li 已经可以从右向左滑入了，但是，是在一起滑入的，我需要他们分开~ animation-delaylist-ad-0 这个东西就是提前定义好的 animation-delay，比如： 123456789.list-ad-0 { -webkit-animation-delay: 0s; animation-delay: 0s;}.list-ad-1 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s;} 然后，他们就可以一个接一个的滑了~ 最后所有的代码都在这里，就是这样的效果： See the Pen zqYgxb by Oliver (@ochukai) on CodePen.","categories":[{"name":"CSS","slug":"css","permalink":"https://ochukai.github.io/categories/css/"}],"tags":[{"name":"css","slug":"css","permalink":"https://ochukai.github.io/tags/css/"},{"name":"animation","slug":"animation","permalink":"https://ochukai.github.io/tags/animation/"}]},{"title":"戦艦の女の子 の 航母 - 诶塞克斯","slug":"esekesu-senkanno-onnanoko","date":"2016-03-03T05:49:03.000Z","updated":"2023-07-16T03:46:17.422Z","comments":true,"path":"/esekesu-senkanno-onnanoko/","link":"","permalink":"https://ochukai.github.io/esekesu-senkanno-onnanoko/","excerpt":"","text":"战舰少女首先让我们认识一下这个游戏的名字： 戦艦の女の子 【せんかんのおんなのこ】【senkannoonnanoko】 航空母舰还有航空母舰这个单词 航空母艦日【こうくうぼかん】【koukuubokann】 航空母舰。（航空機を搭載し、これを発着させるための飛行甲板および格納庫・修理設備などを備えた軍艦。今日、水上兵力の中核。略称、空母。） 埃塞克斯下面进入正题，就是我很喜欢但是还咩有得到的 - 埃塞克斯 建造公式 标准航母公式：400,600,600,400（基本上赌航母都用这个） 低费航母公式：300,30,400,300（当资源不足时可用） 常用玄学公式：400 600 650 430（目前出货率极高的公式） 500 130 600 400（据说出货率更高~） 建造时间4 个小时","categories":[{"name":"戦艦の女の子","slug":"戦艦の女の子","permalink":"https://ochukai.github.io/categories/%E6%88%A6%E8%89%A6%E3%81%AE%E5%A5%B3%E3%81%AE%E5%AD%90/"}],"tags":[{"name":"埃塞克斯","slug":"埃塞克斯","permalink":"https://ochukai.github.io/tags/%E5%9F%83%E5%A1%9E%E5%85%8B%E6%96%AF/"},{"name":"航母","slug":"航母","permalink":"https://ochukai.github.io/tags/%E8%88%AA%E6%AF%8D/"}]},{"title":"Scss 里面的 for 循环","slug":"for-in-scss","date":"2016-03-03T05:40:35.000Z","updated":"2023-07-16T03:46:17.422Z","comments":true,"path":"/for-in-scss/","link":"","permalink":"https://ochukai.github.io/for-in-scss/","excerpt":"","text":"最近在写一个动画效果，使 ul 下面的 li 逐个进入，就像下图 做这个效果用到了 css 的 animation 中 animation-delay，给 li 设置入场动画后，再给 li 设置 animation-delay，像这样： 123.li-animation-delay-1 { animation-delay: 0.1s;} 并且每一个 li 的 animation-delay 都比前一个 li 的长 .1s，也就达到了后面的 li 的入场动画后播放的效果。 因为 li 的数量也不确定，所以我打算批量生成一些 li-animation-delay-*, 查了一下 scss 正好有 for 的用法： 12345@for $index from 0 to 10 { .list-ad-#{$index} { animation-delay: $index * 0.1#{s}; }} 其中，#{***} 的作用的把字符串原封不动的输出。 1#{s} --> s","categories":[{"name":"SASS","slug":"sass","permalink":"https://ochukai.github.io/categories/sass/"}],"tags":[{"name":"scss","slug":"scss","permalink":"https://ochukai.github.io/tags/scss/"},{"name":"for","slug":"for","permalink":"https://ochukai.github.io/tags/for/"}]},{"title":"在微信网页上的电话号码","slug":"telephone-number-not-recognize-in-wx","date":"2016-02-26T10:36:25.000Z","updated":"2023-07-16T03:46:17.424Z","comments":true,"path":"/telephone-number-not-recognize-in-wx/","link":"","permalink":"https://ochukai.github.io/telephone-number-not-recognize-in-wx/","excerpt":"","text":"电话好不不想被识别在网页中的比较长的数字会被微信浏览器自动识别为电话号码，稍不注意可能就使页面变得很难看，与是，在 header 里面加上下面两个 meta 就电话号码就不会被识别了。 12<meta name="format-detection" content="telephone=no"/><meta http-equiv="x-rim-auto-match" content="none"> 如果要识别呢？加一个 tel//*** 就可以了。 1234<div class="telephone"> <p>苹果妹妹专线</p> <a href="tel://4000630086">400-063-0086</a></div>","categories":[],"tags":[{"name":"微信开发","slug":"微信开发","permalink":"https://ochukai.github.io/tags/%E5%BE%AE%E4%BF%A1%E5%BC%80%E5%8F%91/"}]},{"title":"杀死正在占有你端口的小程序","slug":"kill-process","date":"2016-02-25T10:38:07.000Z","updated":"2023-07-16T03:46:17.423Z","comments":true,"path":"/kill-process/","link":"","permalink":"https://ochukai.github.io/kill-process/","excerpt":"","text":"最近在 mac 上用 terminal 启动 python 的时候经常会提示我，端口被占用了，像这样 1234560 errors foundFebruary 25, 2016 - 18:25:21Django version 1.6.7, using settings 'green.settings'Starting development server at http://0.0.0.0:8000/Quit the server with CONTROL-C.Error: That port is already in use. 1ps aux | grep python 123(kkh)➜ green git:(feature/shopping_mall_womens_day) ✗ ps aux | grep pythonOliver 23232 0.0 0.0 2434840 752 s002 S+ 5:25下午 0:00.00 grep --color=auto --exclude-dir=.bzr --exclude-dir=CVS --exclude-dir=.git --exclude-dir=.hg --exclude-dir=.svn pythonOliver 23103 0.0 0.8 2550628 66364 s002 S 5:23下午 0:02.23 /Users/Oliver/dev/kkh/bin/python manage.py runserver 0.0.0.0:8000 1kill 23103","categories":[{"name":"Linux","slug":"linux","permalink":"https://ochukai.github.io/categories/linux/"}],"tags":[{"name":"端口占用","slug":"端口占用","permalink":"https://ochukai.github.io/tags/%E7%AB%AF%E5%8F%A3%E5%8D%A0%E7%94%A8/"}]},{"title":"战舰少女基础知识及部分公式","slug":"battleship-girls","date":"2016-02-22T16:07:25.000Z","updated":"2023-07-16T03:46:17.421Z","comments":true,"path":"/battleship-girls/","link":"","permalink":"https://ochukai.github.io/battleship-girls/","excerpt":"","text":"类型 类型 缩写 特点 战列舰 BB 大炮巨舰的典范，高火力、高血量、高护甲。是游戏中后期推图的主力。 战列巡洋舰 BC 战列舰的缩减版本，火力、血量、护甲略低于战列舰，拥有相对高的防空属性，优点是全部是高速舰，推图上有优势。 正规航母 CV 高索敌，有开幕战，多一轮攻击，受装备影响大，夜间无法攻击。 轻型航母 CVL 正规航母的缩水版，装甲低下，可反潜，搭载数量低，作用是前期舰队补充。 浅水重炮舰 BM 游戏中只有两艘，火力高，可以装长距离的主炮，白天可以来两发，消耗低，本来可以用来打捞保姆，之后有改过，护甲变低，基本上没人用了。 潜艇 SS 同样为数不多，低闪避，高鱼雷，只有具备反潜能力的舰船才能打到，夜战能力高!升到11级后有开幕雷击的能力。 重巡洋舰 CA 夜战优秀，闪避中上，部分能够发射鱼雷，消耗较，欺负小学生的神器。 轻巡洋舰 CL 大部分反潜优秀，属性在重巡和驱逐之间，闪避出色，依旧适合欺负小学生。 驱逐舰 DD 属性低，消耗低，闪避高，夜战出色，鱼雷战优秀。小学生作为入门舰船，也是必须练的船，一般用来推图带路和完成远征的特定条件。 炮潜在2015夏季活动中加入的新舰船—絮库夫的舰船种类，虽然会潜水，但是却没有开幕雷击，没多大用处。 补给舰目前唯一一艘苏赫巴托尔，萌萌哒，幸运高，闪避高，技能可以打捞到更好的船，1-5通关奖励。 驱逐 空想、绫波、Z1、萤火虫、Z31、Z16、晓、响、雷、电、敷波和标枪 高星稀有驱逐: 塔什干、奥班农、拉菲等 以及Z系的其他驱逐 战列 - 名称 改造战列 威尔士亲王改、俾斯麦改、罗德尼改、安德烈亚多利亚改、纳尔逊改、内华达改、俄克拉荷马改 高星稀有 黎塞留、前卫、提尔比茨、华盛顿 四星 科罗拉多、马里兰，西弗吉尼亚 轻巡 名称 特点 海伦娜改 可以给全队增加索敌和命中 夕张改 觉醒技能后，可以使性能提升很多 奥希金斯改 宁海改 经验宝宝，技能可以增加战斗经验 平海改 天龙改 5星轻巡天狼星，贝尔法斯特4星的基洛夫，以及中国船逸仙、重庆（曙光女神改） 热门埃塞克斯，马汉，M1，睦月，企业号航母，狮，宁海，威奇塔改，拉菲，青叶 公式 - 第一 第二 产物 战列 400 80 650 130 630 600 650 230 黎塞留、前卫、安德烈亚多利亚、提尔比茨、俾斯麦、华盛顿 航母轻母 400 600 600 400 500 130 600 400 赤城、加贺、追赶者 轻巡 200 30 200 100 130 130 130 130 贝尔法斯特、爱丁堡、逸仙、平海、宁海、基洛夫、埃姆登、莱比锡 驱逐 130 30 130 30 130 130 130 130 拉菲、空想、塔什干（拉菲用3663出货率还是蛮不错的） 潜艇 30 60 60 30 250 30 250 30 大青花鱼 常用公式产出分析 400 80 650 130(前卫公式)当前用的最多的战列公式，出所有战列，所有战巡，所有重巡，4星以上轻巡，重炮以及空想和拉菲这两艘驱逐;屏蔽了航母，轻母，其余轻巡，驱逐以及大青花鱼。 630 600 650 230(黑猫公式)据说是最容易出北宅和猫?出所有战列，所有战巡，所有重巡，重炮以及空想;屏蔽了航母，轻母，所有轻巡，其余驱逐以及大青花鱼。 400 600 600 400(标准航母公式)最早常见的航母公式，出航母，轻母，重巡，4星轻巡以及空想;屏蔽战列，战巡，其余轻巡，其余驱逐，重炮以及大青花鱼。 400 130 500 130(稀有轻巡公式)可以用来赌贝爷(贝尔法斯特)，当然其他4星轻巡也是可以的。出战巡，重巡，稀有轻巡，重炮以及空想;屏蔽战列，航母，轻母，3星以下轻巡，其余驱逐和大青花鱼。 500 130 600 400(航母公式)新型航母公式，相比标准航母公式，屏蔽了轻巡，一定程度上提高了吃喝、追赶的出货率。出航母，轻母，重巡以及空想;屏蔽其余战列，轻巡，重炮，其余驱逐以及大青花鱼。 130 30 130 30(小船通用公式)小船指得是轻巡驱逐潜艇。屏蔽其余舰种船只。如果要鱼的话30 60 60 30就够了。","categories":[{"name":"戦艦の女の子","slug":"戦艦の女の子","permalink":"https://ochukai.github.io/categories/%E6%88%A6%E8%89%A6%E3%81%AE%E5%A5%B3%E3%81%AE%E5%AD%90/"}],"tags":[{"name":"建造公式","slug":"建造公式","permalink":"https://ochukai.github.io/tags/%E5%BB%BA%E9%80%A0%E5%85%AC%E5%BC%8F/"}]},{"title":"JavaScript 中 Timestamp 与 Date 的转化","slug":"use-js-to-convert-ts-to-data","date":"2015-12-02T03:10:44.000Z","updated":"2023-07-16T03:46:17.424Z","comments":true,"path":"/use-js-to-convert-ts-to-data/","link":"","permalink":"https://ochukai.github.io/use-js-to-convert-ts-to-data/","excerpt":"","text":"问题产生今天在处理一个接口时，发现返回的格式是这样的： 12345678910111213{ "meta": { "has_next_msg": false }, "objects": [ { "text": "111", "from_user_type": "PAT", "pic": "", "ts": 1419939065 } ]} ts 那个属性我不太熟悉，不过我觉得应该是 timestamp 的意思吧。后来才知道，ts 就是该条消息的发送时间戳（timestamp），显示这条信息的时候应该显示为日期。 把 Date 转化为 Timestamp我们都知道，在 js 里面把 date 转化为 timestamp 的方法比较简单，而且方法也有好多种，比如： 1234567891011121314151617// get the timestamp in secondsMath.floor(Date.now() / 1000);// or with a slightly wayDate.now() / 1000 | 0// Year 2038 problem? lol...new Date('Jan 1, 2039') / 1000 | 0 // -2117514496 /*----------*/Math.round(new Date().getTime()/1000);+new Date / 1000 | 0~~(Date.now() / 1000)new Date / 1e3 | 0 把 Timestamp 转化为 Date还有一种需求，比如我要把 timestamp 转化为 1991-10-03 06:01:54 ，那么就需要先把这个 timestamp 转化为日期， 然后再进行format吧，正好我找到一个比较方便的办法： 1234567891011121314151617181920212223242526272829303132333435363738Date.prototype.format = function(format) { var o = { 'M+': this.getMonth() + 1, // month 'd+': this.getDate(), // day 'h+': this.getHours(), // hour 'm+': this.getMinutes(), // minute 's+': this.getSeconds(), // second 'q+': Math.floor((this.getMonth() + 3) / 3), // quarter 'S' : this.getMilliseconds() // millisecond }; // year if (/(y+)/.test(format) || /(Y+)/.test(format)) { format = format.replace(RegExp.$1, (this.getFullYear() + '') .substr(4 - RegExp.$1.length)); } for (var k in o) { if (new RegExp('(' + k + ')').test(format)) { var first = RegExp.$1; var str = first.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length); // nb format = format.replace(first, str); } } return format;};function tsToDate(timestamp) { return (new Date(timestamp * 1000)).format('yyyy-MM-dd hh:mm:ss');}// test it> tsToDate(1448967948)< "2015-12-01 19:05:48"","categories":[],"tags":[{"name":"js","slug":"js","permalink":"https://ochukai.github.io/tags/js/"},{"name":"ts","slug":"ts","permalink":"https://ochukai.github.io/tags/ts/"},{"name":"date","slug":"date","permalink":"https://ochukai.github.io/tags/date/"},{"name":"format","slug":"format","permalink":"https://ochukai.github.io/tags/format/"}]},{"title":"编写一个可以兼容 AMD 和 CMD 的 js 模块","slug":"write-a-compatible-js-module","date":"2015-11-29T12:11:07.000Z","updated":"2023-07-16T03:46:17.425Z","comments":true,"path":"/write-a-compatible-js-module/","link":"","permalink":"https://ochukai.github.io/write-a-compatible-js-module/","excerpt":"","text":"没什么好解释的，直接看代码吧。 123456789101112131415(function (factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. //define(['jquery', 'underscore'], factory); } else if (typeof exports === 'object') { // Node/CommonJS style for Browserify/Seajs module.exports = factory(require('jquery'), require('underscore')); } else { // Browser globals factory(jQuery, _); //factory(); }}(function ($, _) { //doSomething...}));","categories":[],"tags":[{"name":"compatible module","slug":"compatible-module","permalink":"https://ochukai.github.io/tags/compatible-module/"},{"name":"AMD","slug":"amd","permalink":"https://ochukai.github.io/tags/amd/"},{"name":"CMD","slug":"cmd","permalink":"https://ochukai.github.io/tags/cmd/"}]},{"title":"图片加载错误时显示默认图片","slug":"show-a-default-image-when-the-image-is-broken","date":"2015-11-27T10:24:36.000Z","updated":"2023-07-16T03:46:17.424Z","comments":true,"path":"/show-a-default-image-when-the-image-is-broken/","link":"","permalink":"https://ochukai.github.io/show-a-default-image-when-the-image-is-broken/","excerpt":"","text":"直接写12345function imgError(image) { image.onerror = null; // prevent event bubble image.src = "/images/noimage.gif"; return true;} 1<img src="image.png" onerror="imgError(this);"/> 使用 jQuery12345678$("img").error(function () { $(this).unbind("error").attr("src", "broken.gif");});//If you use this technique you can use the "one" method to avoid needing to unbind the event: $('img').one('error', function() { this.src = 'broken.gif'; }); 还有一种写法12345678910$(window).load(function() { $('img').each(function() { if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { // image was broken, replace with your new image this.src = 'broken.gif'; } });});","categories":[{"name":"JavaScript","slug":"javascript","permalink":"https://ochukai.github.io/categories/javascript/"}],"tags":[{"name":"imgage error","slug":"imgage-error","permalink":"https://ochukai.github.io/tags/imgage-error/"}]},{"title":"GIT - 记住密码在 window & linux","slug":"git-remember-password-in-window-and-linux","date":"2015-11-23T02:46:44.000Z","updated":"2023-07-16T03:46:17.422Z","comments":true,"path":"/git-remember-password-in-window-and-linux/","link":"","permalink":"https://ochukai.github.io/git-remember-password-in-window-and-linux/","excerpt":"","text":"Window12# 因为 window 不允许之间新建 . 开头的文件，所以使用 mv 的方式mv git-credentials .git-credentials 然后编辑 .git-credentials 12345# github 是这样的格式https://{username}:{password}@github.com # git.oschina.net 是这样的https://{username}:{password}@git.oschina.net 最后一步是 1git config --global credential.helper store Linux 在此之前或许要添加 ssh-key (https://help.github.com/articles/generating-ssh-keys/#platform-linux) 123$ git config --global credential.helper cache# 默认缓存密码15分钟，可以改得更长, 比如1小时$ git config --global credential.helper 'cache --timeout=3600'","categories":[{"name":"GIT","slug":"git","permalink":"https://ochukai.github.io/categories/git/"}],"tags":[{"name":"git","slug":"git","permalink":"https://ochukai.github.io/tags/git/"},{"name":"记住密码","slug":"记住密码","permalink":"https://ochukai.github.io/tags/%E8%AE%B0%E4%BD%8F%E5%AF%86%E7%A0%81/"}]},{"title":"Baseview in Backbone","slug":"baseview-in-backbone","date":"2015-11-12T16:36:15.000Z","updated":"2023-07-16T03:46:17.420Z","comments":true,"path":"/baseview-in-backbone/","link":"","permalink":"https://ochukai.github.io/baseview-in-backbone/","excerpt":"","text":"前言今天研究了好久的 Backbone，一直搞不明白，怎么通过 router 的改变来切换 view。 过程跌宕起伏事情是这样的，都知道 backbone 有 model, collection, view, router 这些基本概念，今天我要写一个简单的网页，有两个 nav 项，因为用了 backbone，自然就想到了单页应用，就是单击其中某一个的时候，显示这一个 nav 项对应的内容。 这就用到了 router 的事件，每当 router 改变时，重新 render 整个页面。（我是这么想的，也不是整个，router 变了有些内容必然会跟着变。） 12345var appView = this;Backbone.history.on('route', function (router, name) { console.log('current route:', name); appView.render();}); 另外，在 router 里面我定义了一个变量，用来表明哪一个 nav 项被点击。 1234567891011121314151617181920212223242526Backbone.Router.extend({ // ... other methods routes: { '': 'chat', // default to #chat 'chat': 'chat', 'broadcast': 'broadcast', '*nothingMatched': 'pageNotFoundRoute' // 404 }, chat: function () { console.log("chat page loaded."); window.App.currentRouter = 'chat'; }, broadcast: function () { console.log('broadcast page loaded.'); window.App.currentRouter = 'broadcast'; }, pageNotFoundRoute: function() { console.log('pageNotFoundRoute'); }}); 事实证明，我的想法是有一点点正确的，因为运行顺序是这样的： 123456in appView initialize.doctor-router.js:11 Route initializedoctor-router.js:22 chat page loaded. # 首先，进入 router 的处理方法app.js:31 current route: chat # 然后，响应 router 的 change 事件app.js:58 in appView render. # 最后，appView 的 render 方法根据 route name # render对应的 view render 的时候，首先要 remove 当前的view，然后 render 新的view。我是这么写的： 12345678910111213if (this.siderView) { // 删掉当前的 this.siderView.remove();}if (App.currentRouter === 'chat') { this.siderView = new ChatSiderView();} else if (App.currentRouter === 'broadcast') { this.siderView = new DoctorProfileView();}// render 新的 viewthis.siderView.render(); 运行之后我发现，这样点击下一个 nav 的时候， view 变成了空白的。后来审查元素，发现 el 那个节点整个被删掉了，因为他们两个共同放在同一个 el 下面。 123456789101112// view 1var DoctorProfileView = Backbone.View.extend({ el: '.left_aside', className: 'doctor_profile' // ...});// view 2var ChatSiderView = BaseView.extend({ el: '.left_aside', // ...}); 因为是新手，而且这是第一次用 backbone，所以还不知道 $el 就是 juqery 对象（其实问题不在这里），所以我就开始了漫无目的的搜索。 其实办法肯定是有的，就是让他俩不共用同一个 el 节点，每次 render 完了之后，添加到要显示的地方，remove 的时候也只会删掉他自己，况且还可以用 hide。 有了一线希望终于，我看到网上有人写了这么一句： 1this.$el.empty(); 然后我顺藤摸瓜看起了 backbone 的源代码： 12345678910111213141516171819202122232425262728293031323334353637383940414243// Creating a Backbone.View creates its initial element outside of the DOM,// if an existing element is not provided...var View = Backbone.View = function (options) { this.cid = _.uniqueId('view'); _.extend(this, _.pick(options, viewOptions)); this._ensureElement(); this.initialize.apply(this, arguments);};// Ensure that the View has a DOM element to render into.// If `this.el` is a string, pass it through `$()`, take the first// matching element, and re-assign it to `el`. Otherwise, create// an element from the `id`, `className` and `tagName` properties._ensureElement: function () { if (!this.el) { // ... // omit this because we pass 'el' as options to the View. // ... } else { this.setElement(_.result(this, 'el')); }}// Change the view's element (`this.el` property) and re-delegate the// view's events on the new element.setElement: function (element) { this.undelegateEvents(); this._setElement(element); this.delegateEvents(); return this;}// Creates the `this.el` and `this.$el` references for this view using the// given `el`. `el` can be a CSS selector or an HTML string, a jQuery// context or an element. Subclasses can override this to utilize an// alternative DOM manipulation API and are only required to set the// `this.el` property._setElement: function (el) { this.$el = el instanceof Backbone.$ ? el : Backbone.$(el); this.el = this.$el[0];} 上面这一段就是说，如果我们传入了 el 那么 backbone 会自动设置 $el（通过命名就能看出这是一个 jquery 对象咯）, 并且绑定我们在 events 定义的事件到这上面。 然后还有 backbone 的 remove view 的方法： 1234567891011121314// Remove this view by taking the element out of the DOM, and removing any// applicable Backbone.Events listeners.remove: function () { this._removeElement(); this.stopListening(); return this;},// Remove this view's element from the document and all event listeners// attached to it. Exposed for subclasses using an alternative DOM// manipulation API._removeElement: function () { this.$el.remove();} 解除事件监听，删掉元素。 最终的 hide 方法于是，我模仿着写了一个 hide 方法： 12345hide: function () { this.undelegateEvents(); this.$el.empty(); this.stopListening();} 好像很简单，哈哈， 顺便把 appView 里面也改掉： 1234567891011if (this.siderView) { this.siderView.hide();}if (!App.currentRouter || App.currentRouter === 'chat') { this.siderView = new ChatSiderView();} else if (App.currentRouter === 'broadcast') { this.siderView = new DoctorProfileView();}this.siderView.render(); 运行之后，切换 view 正常了。耶！ 然后我想让我的view 都具有 hide 这个方法，恰好 backbone 很好的面向对象，于是： 1234567891011121314151617181920212223242526272829/*global define*/define([ 'jquery', 'underscore', 'backbone'], function ($, _, Backbone) { 'use strict'; var BaseView = Backbone.View.extend({ hide: function () { this.undelegateEvents(); this.$el.empty(); this.stopListening(); } }); return BaseView;});// how to usevar ChatSiderView = BaseView.extend({ el: '.left_aside', //...}); 感觉非常顺畅。 后记频繁的删除dom元素，速度肯定是慢的，恰好我的网页很简单，所以看不出明显的缺点，网上也是推荐使用 display：none 和 display：block 来切换 view， 等我以后再研究吧。 以上。","categories":[{"name":"Backbone","slug":"backbone","permalink":"https://ochukai.github.io/categories/backbone/"}],"tags":[{"name":"backbone","slug":"backbone","permalink":"https://ochukai.github.io/tags/backbone/"},{"name":"base","slug":"base","permalink":"https://ochukai.github.io/tags/base/"},{"name":"view","slug":"view","permalink":"https://ochukai.github.io/tags/view/"},{"name":"js","slug":"js","permalink":"https://ochukai.github.io/tags/js/"}]},{"title":"wamp mysql 中文显示为？","slug":"wamp-mysql-chinese-question-mark","date":"2015-08-09T05:25:28.000Z","updated":"2023-07-16T03:46:17.425Z","comments":true,"path":"/wamp-mysql-chinese-question-mark/","link":"","permalink":"https://ochukai.github.io/wamp-mysql-chinese-question-mark/","excerpt":"","text":"发现中文显示为“？”，然后我看了一下 mysql.ini，添加了两行 12345[mysqld]port=3306#下面的两行是添加的character_set_client=utf8character_set_server=utf8 后来再看 mysql 中的信息发现这样了，不过中文问题已经解决了。 123456789101112131415161718192021222324mysql> show variables like 'character%';+--------------------------+----------------------------------------------------+| Variable_name | Value|+--------------------------+----------------------------------------------------+| character_set_client | gbk|| character_set_connection | gbk|| character_set_database | utf8|| character_set_filesystem | binary|| character_set_results | gbk|| character_set_server | utf8|| character_set_system | utf8|| character_sets_dir | E:\\Soft\\wamp\\bin\\mysql\\mysql5.6.12\\share\\charsets\\|+--------------------------+----------------------------------------------------","categories":[{"name":"MySQL","slug":"mysql","permalink":"https://ochukai.github.io/categories/mysql/"}],"tags":[{"name":"mysql","slug":"mysql","permalink":"https://ochukai.github.io/tags/mysql/"},{"name":"中文乱码","slug":"中文乱码","permalink":"https://ochukai.github.io/tags/%E4%B8%AD%E6%96%87%E4%B9%B1%E7%A0%81/"}]},{"title":"修改 wamp 中 mysql 默认空密码","slug":"modify-wamp-mysql-password","date":"2015-07-31T15:32:13.000Z","updated":"2023-07-16T03:46:17.423Z","comments":true,"path":"/modify-wamp-mysql-password/","link":"","permalink":"https://ochukai.github.io/modify-wamp-mysql-password/","excerpt":"","text":"12345use mysqlupdate user set password=PASSWORD('hooray') where user='root';flush privileges;","categories":[],"tags":[{"name":"mysql","slug":"mysql","permalink":"https://ochukai.github.io/tags/mysql/"},{"name":"password","slug":"password","permalink":"https://ochukai.github.io/tags/password/"}]},{"title":"在网络暴力中捍卫自己","slug":"protect-yourself-in-network","date":"2015-07-10T13:52:53.000Z","updated":"2023-07-16T03:46:17.424Z","comments":true,"path":"/protect-yourself-in-network/","link":"","permalink":"https://ochukai.github.io/protect-yourself-in-network/","excerpt":"","text":"我想先问大家一个问题，有谁一年365，天天被未曾谋面的陌生人骂?举手的这个人就站在你们面前。不过别担心，我今天不是来诉苦的，我是穿着马甲来跟大家分享如何被骂大的。 网络对于我们来说再日常不过，但是当你身处网络世界的围攻中，就不再那么轻松。2013年的以前，我作梦也想不到自己会变成网络世界里的“黑姑娘”。因为参演了一部电视剧，演技没有达到观众的预期，故事的结局不尽人意，而被推到了风口浪尖，让我从一个还在摸爬滚打的小演员，一夜之间变成了被大家声讨的“热门人物”。 震惊之余，让自己尽快从虚拟的世界中挣脱出来是我唯一的出路。我选择在网络声中被倒下，就在网络声中爬起来。有不少人认为，公众人物就应该具有强大的承受能力和耐力，打不还手，骂不还口。偶尔被坑蒙拐骗了，还要尽量先捂着不敢报警。 当我被骂得小有名气的时候，我就暗自思量。反正也挨骂，不如用最积极的方式迎接骂声。2013年3月3日，我在微博上发出了一条名为“爱的骂骂”的微博，既然大家那么需要宣泄，点击鼠标可以不用负责，那我也动动手指头，干点什么吧！ 我在微博里面制定了骂的规则——骂，没问题，但请集中精力地骂。只要在我这条微博下面留言的，不管是鼓励我的、骂我的，还是随便说说的，我都认捐五毛。24个小时，有十万多条留言，捐款金额是50693.5元，作为北京一家残疾孤儿康复机构的手术费。 在这里，我要对每一位留言的人表示感谢。因为我们一起在虚拟的世界中救助了4个在现实生活中顽强生活着的残疾孤儿。其中有一个孩子，在手术后的那一年，终于有机会可以站起来了。那时候她还不满三岁。当我看到她第一次站起来，我很感动，也很骄傲，这个“黑姑娘”干了一件痛快的事。 是的，我说出了金额。我知道，一定会有人说“捐那么少，还好意思报数”。我相信现在大部分人都不愿意公布捐款金额，因为捐款已经不再是一件随心的行动，而是成为大家根据金额的多少来衡量爱心的大小。我相信在座的各位也一定有过朋友之间随份子该给多少才合适的烦恼。我之所以说出来，不仅仅是因为我不觉得随性的行为需要躲闪，更因为“爱的骂骂”是每一个留言人的镜子。当时骂过我的人，也许，在两年后的今天听到我说的这番话，会想起曾经不太善意的留言却给了这些孩子们机会获得新生。这同样值得高兴。 其实我们每个人都有不同阶段的新生，不是吗?“爱的骂骂”发出的那一刻，我如重生般释然了。虽然，我不像很多演员那样，拥有令人赞叹的表演才华，自己也觉得不是天生吃这碗饭的，但是既然选择了演员这份职业，我相信只要通过自己的努力和善待他人，就可以让自己的家人和自己过上幸福美满的生活。 然而这一切，在2013年的夏天被一句开创演艺界(网络)暴力先河的“滚出娱乐圈”所动摇。我是第一个(被)放在主语位置的人。袁姗姗这个名字好像从此就和“一无是处”划上了等号。那个时候，不管说什么、做什么、演什么都不对。更有媒体总结了“袁姗姗不被观众所喜欢的五大理由”，第一条理由是“没有理由”。这是得有多深厚的感情基础，才能达到的境界。 2013年确实挺让人操心的，从春天到夏天都没有平静过。一开始，我也有些懊恼，不知道到底发生了什么。我既然没有不劳而获，也没有做过伤天害理的事。为什么让我“滚”?!没多久，我想明白了一个道理，谁都可以说我不好，但是自己必须接纳那个心安理得的自己。既然我的演艺生涯要倒数开始，那我之后的每一点进步都是充满喜悦的。从零分到六十分比从满分到六十分，哪个更让人开心呢? 也是从那个时候，我重拾扔下了多年的小提琴，还有健身。运动让我心情愉悦。不工作的时候，练琴和健身会让我的每一天都过得很充实，根本没有过多的时间停留在网上，更顾不上网友的围观。我建议那些沉迷于网络的年轻人，每天可以挤出一点时间锻炼身体。当有朝一日被他人欺负的时候，至少可以像我一样，身轻如燕，自由翻滚。 不尽人意的2013年确实过得有些艰辛，但是我也时刻提醒着自己，别忘了尽可能给予所能达到的人以温暖。这是对鼓励过你的人最好的感激方式。但同时，我们也不要忽略身边朋友向你发出的求助信号。也许你的关心会改变他的决定。 我在来之前了解到几个数据。在美国，有40%的年轻人遭遇过网络欺凌侵害，甚至有些受害者因此而患上精神疾病，身心受损。联合国儿童基金会在2014年的9月发布了一则消息报道，在法国，6到18岁之间的青少年有12.5%的人都有过在网上被攻击的经历。在中国，因为网络暴力而结束生命的人，离我们的生活越来越近。 前不久，在台湾，有一位艺人因为网络暴力而自杀。听到这个消息的时候，我非常惋惜。我不知道她内心到底挣扎了多久。但当我看到这则新闻的时候，我有过一念之间的不安。如果在这之前，我可以跟她说几句话，她是不是好过一些? 互联网的时代，让人与人之间的沟通方式越来越便捷，沟通成本却越来越大。足不出户在网上匿名可以干很多事，每天都要面对接踵而来的海量信息，有谁还愿意费力去核实消息的真实性，也不会有太多人会为自己发出或转发的信息而深思熟虑。那还有多少人会为他人的生命叹息呢? 语言不应该成为致命的利器。网络的诞生也不应该是为了制造困扰，而是为了让生活变得更加美好。作为过去也许将来还会遭遇网络暴力的过来人，我不希望再有人因为网络暴力而受到伤害。请善用语言，让人言可敬。 特别感谢在那段特殊时间陪伴我的家人和朋友，感谢他们承受住了一个当时还没有来得及减肥、各方面份量都很重的我。经历了这些，并不是想说明自己有多强大，但确实因为这些切身经历让我有了足够的时间去思考。我曾经问过自己一个问题——如果我当时真的不堪重负放弃了演员这个职业，是否网络暴力就会消失？答案当然不会。既然还是要面对，就应该积极面对。 前不久，我参与了一部公益电影的拍摄。电影传递了一个非常积极的理念：每个人都有自由选择的机会和权利，无论你生下来是幸运的还是不幸的。我非常赞同，所以我选择做一个积极快乐的自己，不再受控于网络暴力中，不再只能看到消极的一面。 都说做公益是在帮助他人，在我身上，成全了一个更加快乐的自己。不知道大家有没有看过这部电影。电影的名字叫《有一天》。我想在这里特别推荐一下。虽然我只参演了电影的一部分，但也给我带来了很多启发和感动。这部电影关注了九类特殊儿童群体。我参与拍摄的故事和聋哑儿童有关。跟我一起搭档演出的也是一名聋哑儿童。拍摄之前，我还有些顾虑，我不知道该怎么去跟他交流，我担心会因为自己不小心的举动伤害到他。但是见面之后，我才发现成年人的世界真的是因为想太多了变得复杂。只要我们保持一颗平常的心，用平等的方式去交流，就不会存在特别的障碍。重要的是你怎么看，而不是他怎么想。 拍摄的那几天，我平静而快乐。每当完成一个镜头，这个小少年都会跟我竖起大拇指示意。他这个小小的举动也提醒了我和我们，有人选择赞美有人则不。 感谢“爱的骂骂”，感谢《有一天》，感谢喝倒彩时刻提醒我的人，感谢一直鼓励我的家人和朋友，感谢倔强中的那个自己。我希望能有更多的人可以像我一样，主动地从逆境中走出来。这个世界还有很多需要我们关心的事去做，需要我们关心的人去爱。保持自己的真实，倔强地活下去。 感谢大家的聆听，感谢网络世界将我带到你们面前。 ","categories":[{"name":"生活杂记","slug":"生活杂记","permalink":"https://ochukai.github.io/categories/%E7%94%9F%E6%B4%BB%E6%9D%82%E8%AE%B0/"}],"tags":[{"name":"tedx","slug":"tedx","permalink":"https://ochukai.github.io/tags/tedx/"},{"name":"在网络暴力中捍卫自己","slug":"在网络暴力中捍卫自己","permalink":"https://ochukai.github.io/tags/%E5%9C%A8%E7%BD%91%E7%BB%9C%E6%9A%B4%E5%8A%9B%E4%B8%AD%E6%8D%8D%E5%8D%AB%E8%87%AA%E5%B7%B1/"},{"name":"演讲稿","slug":"演讲稿","permalink":"https://ochukai.github.io/tags/%E6%BC%94%E8%AE%B2%E7%A8%BF/"},{"name":"袁姗姗","slug":"袁姗姗","permalink":"https://ochukai.github.io/tags/%E8%A2%81%E5%A7%97%E5%A7%97/"}]},{"title":"Navicat 10.1.7 的注册码","slug":"navicat-10-1-7-key","date":"2014-12-28T13:23:42.000Z","updated":"2023-07-16T03:46:17.423Z","comments":true,"path":"/navicat-10-1-7-key/","link":"","permalink":"https://ochukai.github.io/navicat-10-1-7-key/","excerpt":"","text":"NAVN-LNXG-XHHX-5NOO名和组织随便写。","categories":[{"name":"MySQL","slug":"mysql","permalink":"https://ochukai.github.io/categories/mysql/"}],"tags":[{"name":"mysql","slug":"mysql","permalink":"https://ochukai.github.io/tags/mysql/"},{"name":"navicat","slug":"navicat","permalink":"https://ochukai.github.io/tags/navicat/"}]},{"title":"Images","slug":"zhexo-images","date":"2013-12-26T14:46:49.000Z","updated":"2023-07-16T03:46:17.425Z","comments":true,"path":"/zhexo-images/","link":"","permalink":"https://ochukai.github.io/zhexo-images/","excerpt":"","text":"This is a image test post. 图片在 li 下面","categories":[],"tags":[]},{"title":"","slug":"zhexo-no-title","date":"2013-12-25T14:57:49.000Z","updated":"2023-07-16T03:46:17.426Z","comments":true,"path":"/zhexo-no-title/","link":"","permalink":"https://ochukai.github.io/zhexo-no-title/","excerpt":"","text":"This post doesn’t have a title. Make sure it’s accessible.","categories":[],"tags":[]},{"title":"Excerpts","slug":"zhexo-excerpts","date":"2013-12-24T16:23:23.000Z","updated":"2023-07-16T03:46:17.425Z","comments":true,"path":"/zhexo-excerpts/","link":"","permalink":"https://ochukai.github.io/zhexo-excerpts/","excerpt":"The following contents should be invisible in home/archive page.","text":"The following contents should be invisible in home/archive page. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget urna vitae velit eleifend interdum at ac nisi. In nec ligula lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed eu cursus erat, ut dapibus quam. Aliquam eleifend dolor vitae libero pharetra adipiscing. Etiam adipiscing dolor a quam tempor, eu convallis nulla varius. Aliquam sollicitudin risus a porta aliquam. Ut nec velit dolor. Proin eget leo lobortis, aliquam est sed, mollis mauris. Fusce vitae leo pretium massa accumsan condimentum. Fusce malesuada gravida lectus vel vulputate. Donec bibendum porta nibh ut aliquam. Sed lorem felis, congue non fringilla eu, aliquam eu eros. Curabitur orci libero, mollis sed semper vitae, adipiscing in lectus. Aenean non egestas odio. Donec sollicitudin nisi quis lorem gravida, in pharetra mauris fringilla. Duis sit amet faucibus dolor, id aliquam neque. In egestas, odio gravida tempor dictum, mauris felis faucibus purus, sit amet commodo lacus diam vitae est. Ut ut quam eget massa semper sodales. Aenean non ipsum cursus, blandit lectus in, ornare odio. Curabitur ultrices porttitor vulputate.","categories":[],"tags":[]},{"title":"Videos","slug":"zhexo-videos","date":"2013-12-24T16:19:15.000Z","updated":"2023-07-16T03:46:17.426Z","comments":true,"path":"/zhexo-videos/","link":"","permalink":"https://ochukai.github.io/zhexo-videos/","excerpt":"","text":"This is a video test post. Youtube Vimeo","categories":[],"tags":[]},{"title":"Gallery Post","slug":"zhexo-gallery-post","date":"2013-12-24T16:16:18.000Z","updated":"2023-07-16T03:46:17.425Z","comments":true,"path":"/zhexo-gallery-post/","link":"","permalink":"https://ochukai.github.io/zhexo-gallery-post/","excerpt":"","text":"This post contains 4 photos: Widescreen wallpaper Portrait photo Dual widescreen wallpaper Small photo All photos should be displayed properly. From Wallbase.cc","categories":[],"tags":[]},{"title":"Tag Plugins","slug":"zhexo-tag-plugins","date":"2013-12-24T16:14:39.000Z","updated":"2023-07-16T03:46:17.426Z","comments":true,"path":"/zhexo-tag-plugins/","link":"","permalink":"https://ochukai.github.io/zhexo-tag-plugins/","excerpt":"","text":"This post is used for testing tag plugins. See docs for more info. Block QuoteNormal blockquote Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna. Quote from a bookDo not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy. David LevithanWide Awake Quote from TwitterNEW: DevDocs now comes with syntax highlighting. http://devdocs.io @DevDocstwitter.com/devdocs/status/356095192085962752 Quote from an article on the webEvery interaction is both precious and an opportunity to delight. Seth GodinWelcome to Island Marketing Code BlockNormal code block1alert('Hello World!'); With captionArray.map1array.map(callback[, thisArg]) With caption and URL.compactUnderscore.js12.compact([0, 1, false, 2, ‘’, 3]);=> [1, 2, 3] With marked linesLine 1,7-8,10 should be marked with different color. 1234567891011const http = require('http');const hostname = '127.0.0.1';const port = 1337;http.createServer((req, res) => { res.writeHead(200, { 'Content-Type': 'text/plain' }); res.end('Hello World\\n');}).listen(port, hostname, () => { console.log(`Server running at http://${hostname}:${port}/`);}); Note: Theme’s style should support .highlight.line.marked (recommend to use the selection or current line color). Gist jsFiddle PullquoteLeftLorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus molestie arcu, et fringilla mauris placerat ac. Nullam luctus bibendum risus. Ut cursus sed ipsum feugiat egestas. Suspendisse elementum, velit eu consequat consequat, augue lorem dapibus libero, eget pulvinar dolor est sit amet nulla. Suspendisse a porta tortor, et posuere mi. Pellentesque ultricies, mi quis volutpat malesuada, erat felis vulputate nisl, ac congue ante tortor ut ante. Proin aliquam sem vel mauris tincidunt, eget scelerisque tortor euismod. Nulla tincidunt enim nec commodo dictum. Mauris id sapien et orci gravida luctus id ut dui. In vel vulputate odio. Duis vel turpis molestie, scelerisque enim eu, lobortis eros. Cras at ipsum gravida, sagittis ante vel, viverra tellus. Nunc mauris turpis, elementum ullamcorper nisl pretium, ultrices cursus justo. Mauris porttitor commodo eros, ac ornare orci interdum in. Cras fermentum cursus leo sed mattis. In dignissim lorem sem, sit amet elementum mauris venenatis ac. RightLorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula justo, lobortis sit amet semper vel, dignissim sit amet libero. Praesent ac tempus ligula. Maecenas at gravida odio. Etiam tristique volutpat lacus eu faucibus. Donec non tempus arcu. Phasellus adipiscing, mauris nec mollis egestas, ipsum nunc auctor velit, et rhoncus lorem ipsum at ante. Praesent et sem in velit volutpat auctor. Duis vel mauris nulla. Maecenas mattis interdum ante, quis sagittis nibh cursus et. Nulla facilisi. Morbi convallis gravida tortor, ut fermentum enim gravida et. Nunc vel dictum nisl, non ultrices libero. Proin vestibulum felis eget orci consectetur lobortis. Vestibulum augue nulla, iaculis vitae augue vehicula, dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.","categories":[],"tags":[]},{"title":"日本語テスト","slug":"zhexo-日本語テスト","date":"2013-12-24T15:33:26.000Z","updated":"2023-07-16T03:46:17.426Z","comments":true,"path":"/zhexo-日本語テスト/","link":"","permalink":"https://ochukai.github.io/zhexo-%E6%97%A5%E6%9C%AC%E8%AA%9E%E3%83%86%E3%82%B9%E3%83%88/","excerpt":"","text":"This is a Japanese test post. 私は昨日ついにその助力家というのの上よりするたなけれ。 最も今をお話団はちょうどこの前後なかろでくらいに困りがいるたをは帰着考えたなかって、そうにもするでうたらない。 がたを知っないはずも同時に九月をいよいよたありた。 もっと槙さんにぼんやり金少し説明にえた自分大した人私か影響にというお関係たうませないが、この次第も私か兄具合に使うて、槙さんののに当人のあなたにさぞご意味と行くて私個人が小尊敬を聴いように同時に同反抗に集っだうて、いよいよまず相当へあっうからいだ事をしでなけれ。 それでそれでもご時日をしはずはたったいやと突き抜けるますて、その元がは行ったてという獄を尽すていけですた。 この中道具の日その学校はあなたごろがすまなりかとネルソンさんの考えるですん、辺の事実ないというご盲従ありたですと、爺さんのためが薬缶が結果までの箸の当時してならて、多少の十月にためからそういう上からとにかくしましないと触れべきものたで、ないうですと多少お人達したのでたた。 From すぐ使えるダミーテキスト - 日本語 Lorem ipsum","categories":[],"tags":[]},{"title":"中文測試","slug":"zhexo-中文測試","date":"2013-12-24T15:31:30.000Z","updated":"2023-07-16T03:46:17.426Z","comments":true,"path":"/zhexo-中文測試/","link":"","permalink":"https://ochukai.github.io/zhexo-%E4%B8%AD%E6%96%87%E6%B8%AC%E8%A9%A6/","excerpt":"","text":"This is a Chinese test post. 善我王上魚、產生資西員合兒臉趣論。畫衣生這著爸毛親可時，安程幾？合學作。觀經而作建。都非子作這！法如言子你關！手師也。 以也座論頭室業放。要車時地變此親不老高小是統習直麼調未，行年香一？ 就竟在，是我童示讓利分和異種百路關母信過明驗有個歷洋中前合著區亮風值新底車有正結，進快保的行戰從：弟除文辦條國備當來際年每小腳識世可的的外的廣下歌洲保輪市果底天影；全氣具些回童但倒影發狀在示，數上學大法很，如要我……月品大供這起服滿老？應學傳者國：山式排只不之然清同關；細車是！停屋常間又，資畫領生，相們制在？公別的人寫教資夠。資再我我！只臉夫藝量不路政吃息緊回力之；兒足灣電空時局我怎初安。意今一子區首者微陸現際安除發連由子由而走學體區園我車當會，經時取頭，嚴了新科同？很夫營動通打，出和導一樂，查旅他。坐是收外子發物北看蘭戰坐車身做可來。道就學務。 國新故。 工步他始能詩的，裝進分星海演意學值例道……於財型目古香亮自和這乎？化經溫詩。只賽嚴大一主價世哥受的沒有中年即病行金拉麼河。主小路了種就小為廣不？ From 亂數假文產生器 - Chinese Lorem Ipsum","categories":[],"tags":[]},{"title":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam justo turpis, tincidunt ac convallis id.","slug":"zhexo-long-title","date":"2013-12-24T15:31:06.000Z","updated":"2023-07-16T03:46:17.425Z","comments":true,"path":"/zhexo-long-title/","link":"","permalink":"https://ochukai.github.io/zhexo-long-title/","excerpt":"","text":"This post has a long title. Make sure the title displayed right.","categories":[],"tags":[]},{"title":"Tags","slug":"zhexo-tags","date":"2013-12-24T15:29:53.000Z","updated":"2023-07-16T03:46:17.426Z","comments":true,"path":"/zhexo-tags/","link":"","permalink":"https://ochukai.github.io/zhexo-tags/","excerpt":"","text":"This post contains 3 tags. Make sure your theme can display all of the tags.","categories":[],"tags":[{"name":"Foo","slug":"foo","permalink":"https://ochukai.github.io/tags/foo/"},{"name":"Bar","slug":"bar","permalink":"https://ochukai.github.io/tags/bar/"},{"name":"Baz","slug":"baz","permalink":"https://ochukai.github.io/tags/baz/"}]},{"title":"Elements","slug":"zhexo-elements","date":"2013-12-24T15:29:08.000Z","updated":"2023-07-16T03:46:17.425Z","comments":true,"path":"/zhexo-elements/","link":"","permalink":"https://ochukai.github.io/zhexo-elements/","excerpt":"","text":"The purpose of this post is to help you make sure all of HTML elements can display properly. If you use CSS reset, don’t forget to redefine the style by yourself. Heading 1Heading 2Heading 3Heading 4Heading 5Heading 6 ParagraphLorem ipsum dolor sit amet, test link consectetur adipiscing elit. Strong text pellentesque ligula commodo viverra vehicula. Italic text at ullamcorper enim. Morbi a euismod nibh. Underline text non elit nisl. Deleted text tristique, sem id condimentum tempus, metus lectus venenatis mauris, sit amet semper lorem felis a eros. Fusce egestas nibh at sagittis auctor. Sed ultricies ac arcu quis molestie. Donec dapibus nunc in nibh egestas, vitae volutpat sem iaculis. Curabitur sem tellus, elementum nec quam id, fermentum laoreet mi. Ut mollis ullamcorper turpis, vitae facilisis velit ultricies sit amet. Etiam laoreet dui odio, id tempus justo tincidunt id. Phasellus scelerisque nunc sed nunc ultricies accumsan. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed erat diam, blandit eget felis aliquam, rhoncus varius urna. Donec tellus sapien, sodales eget ante vitae, feugiat ullamcorper urna. Praesent auctor dui vitae dapibus eleifend. Proin viverra mollis neque, ut ullamcorper elit posuere eget. Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna. Maecenas ornare arcu at mi suscipit, non molestie tortor ultrices. Aenean convallis, diam et congue ultricies, erat magna tincidunt orci, pulvinar posuere mi sapien ac magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent vitae placerat mauris. Nullam laoreet ante posuere tortor blandit auctor. Sed id ligula volutpat leo consequat placerat. Mauris fermentum dolor sed augue malesuada sollicitudin. Vivamus ultrices nunc felis, quis viverra orci eleifend ut. Donec et quam id urna cursus posuere. Donec elementum scelerisque laoreet. List TypesDefinition List (dl)Definition List TitleThis is a definition list division. Ordered List (ol) List Item 1 List Item 2 List Item 3 Unordered List (ul) List Item 1 List Item 2 List Item 3 Table Table Header 1 Table Header 2 Table Header 3 Division 1 Division 2 Division 3 Division 1 Division 2 Division 3 Division 1 Division 2 Division 3 Misc Stuff - abbr, acronym, sub, sup, etc.Lorem superscript dolor subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE","categories":[],"tags":[]},{"title":"Hello World","slug":"zhexo-hello-world","date":"2013-12-24T09:49:32.000Z","updated":"2023-07-16T03:46:17.425Z","comments":true,"path":"/zhexo-hello-world/","link":"","permalink":"https://ochukai.github.io/zhexo-hello-world/","excerpt":"","text":"Welcome to Hexo! This is your very first post. Check documentation to learn how to use.","categories":[],"tags":[]}],"categories":[{"name":"css","slug":"css","permalink":"https://ochukai.github.io/categories/css/"},{"name":"IE","slug":"ie","permalink":"https://ochukai.github.io/categories/ie/"},{"name":"Window","slug":"window","permalink":"https://ochukai.github.io/categories/window/"},{"name":"React","slug":"react","permalink":"https://ochukai.github.io/categories/react/"},{"name":"JavaScript","slug":"react/javascript","permalink":"https://ochukai.github.io/categories/react/javascript/"},{"name":"SVN","slug":"svn","permalink":"https://ochukai.github.io/categories/svn/"},{"name":"JavaScript","slug":"javascript","permalink":"https://ochukai.github.io/categories/javascript/"},{"name":"WebStorm","slug":"webstorm","permalink":"https://ochukai.github.io/categories/webstorm/"},{"name":"文学","slug":"文学","permalink":"https://ochukai.github.io/categories/%E6%96%87%E5%AD%A6/"},{"name":"form","slug":"form","permalink":"https://ochukai.github.io/categories/form/"},{"name":"JavaScript","slug":"form/javascript","permalink":"https://ochukai.github.io/categories/form/javascript/"},{"name":"CSS Animation","slug":"css-animation","permalink":"https://ochukai.github.io/categories/css-animation/"},{"name":"CSS","slug":"css-animation/css","permalink":"https://ochukai.github.io/categories/css-animation/css/"},{"name":"CSS","slug":"css","permalink":"https://ochukai.github.io/categories/css/"},{"name":"戦艦の女の子","slug":"戦艦の女の子","permalink":"https://ochukai.github.io/categories/%E6%88%A6%E8%89%A6%E3%81%AE%E5%A5%B3%E3%81%AE%E5%AD%90/"},{"name":"SASS","slug":"sass","permalink":"https://ochukai.github.io/categories/sass/"},{"name":"Linux","slug":"linux","permalink":"https://ochukai.github.io/categories/linux/"},{"name":"GIT","slug":"git","permalink":"https://ochukai.github.io/categories/git/"},{"name":"Backbone","slug":"backbone","permalink":"https://ochukai.github.io/categories/backbone/"},{"name":"MySQL","slug":"mysql","permalink":"https://ochukai.github.io/categories/mysql/"},{"name":"生活杂记","slug":"生活杂记","permalink":"https://ochukai.github.io/categories/%E7%94%9F%E6%B4%BB%E6%9D%82%E8%AE%B0/"}],"tags":[{"name":"css","slug":"css","permalink":"https://ochukai.github.io/tags/css/"},{"name":"html","slug":"html","permalink":"https://ochukai.github.io/tags/html/"},{"name":"clearfix","slug":"clearfix","permalink":"https://ochukai.github.io/tags/clearfix/"},{"name":"TATTOO","slug":"tattoo","permalink":"https://ochukai.github.io/tags/tattoo/"},{"name":"纹身","slug":"纹身","permalink":"https://ochukai.github.io/tags/%E7%BA%B9%E8%BA%AB/"},{"name":"死神","slug":"死神","permalink":"https://ochukai.github.io/tags/%E6%AD%BB%E7%A5%9E/"},{"name":"练字","slug":"练字","permalink":"https://ochukai.github.io/tags/%E7%BB%83%E5%AD%97/"},{"name":"千字文","slug":"千字文","permalink":"https://ochukai.github.io/tags/%E5%8D%83%E5%AD%97%E6%96%87/"},{"name":"mathjax","slug":"mathjax","permalink":"https://ochukai.github.io/tags/mathjax/"},{"name":"js","slug":"js","permalink":"https://ochukai.github.io/tags/js/"},{"name":"lazyload","slug":"lazyload","permalink":"https://ochukai.github.io/tags/lazyload/"},{"name":"inSight","slug":"insight","permalink":"https://ochukai.github.io/tags/insight/"},{"name":"键盘","slug":"键盘","permalink":"https://ochukai.github.io/tags/%E9%94%AE%E7%9B%98/"},{"name":"svn","slug":"svn","permalink":"https://ochukai.github.io/tags/svn/"},{"name":"branch","slug":"branch","permalink":"https://ochukai.github.io/tags/branch/"},{"name":"佛","slug":"佛","permalink":"https://ochukai.github.io/tags/%E4%BD%9B/"},{"name":"佛经","slug":"佛经","permalink":"https://ochukai.github.io/tags/%E4%BD%9B%E7%BB%8F/"},{"name":"鲸鱼","slug":"鲸鱼","permalink":"https://ochukai.github.io/tags/%E9%B2%B8%E9%B1%BC/"},{"name":"svn backup","slug":"svn-backup","permalink":"https://ochukai.github.io/tags/svn-backup/"},{"name":"svn 备份","slug":"svn-备份","permalink":"https://ochukai.github.io/tags/svn-%E5%A4%87%E4%BB%BD/"},{"name":"svn 还原","slug":"svn-还原","permalink":"https://ochukai.github.io/tags/svn-%E8%BF%98%E5%8E%9F/"},{"name":"flex","slug":"flex","permalink":"https://ochukai.github.io/tags/flex/"},{"name":"flex shrink","slug":"flex-shrink","permalink":"https://ochukai.github.io/tags/flex-shrink/"},{"name":"django","slug":"django","permalink":"https://ochukai.github.io/tags/django/"},{"name":"nginx","slug":"nginx","permalink":"https://ochukai.github.io/tags/nginx/"},{"name":"uwsgi","slug":"uwsgi","permalink":"https://ochukai.github.io/tags/uwsgi/"},{"name":"直播","slug":"直播","permalink":"https://ochukai.github.io/tags/%E7%9B%B4%E6%92%AD/"},{"name":"直播写代码","slug":"直播写代码","permalink":"https://ochukai.github.io/tags/%E7%9B%B4%E6%92%AD%E5%86%99%E4%BB%A3%E7%A0%81/"},{"name":"git bash","slug":"git-bash","permalink":"https://ochukai.github.io/tags/git-bash/"},{"name":"terminal","slug":"terminal","permalink":"https://ochukai.github.io/tags/terminal/"},{"name":"配色","slug":"配色","permalink":"https://ochukai.github.io/tags/%E9%85%8D%E8%89%B2/"},{"name":"vue","slug":"vue","permalink":"https://ochukai.github.io/tags/vue/"},{"name":"image-preview","slug":"image-preview","permalink":"https://ochukai.github.io/tags/image-preview/"},{"name":"react","slug":"react","permalink":"https://ochukai.github.io/tags/react/"},{"name":"jscodeshift","slug":"jscodeshift","permalink":"https://ochukai.github.io/tags/jscodeshift/"},{"name":"proptypes","slug":"proptypes","permalink":"https://ochukai.github.io/tags/proptypes/"},{"name":"react-codemod","slug":"react-codemod","permalink":"https://ochukai.github.io/tags/react-codemod/"},{"name":"promise","slug":"promise","permalink":"https://ochukai.github.io/tags/promise/"},{"name":"ie","slug":"ie","permalink":"https://ochukai.github.io/tags/ie/"},{"name":"css hack","slug":"css-hack","permalink":"https://ochukai.github.io/tags/css-hack/"},{"name":"wallpaper","slug":"wallpaper","permalink":"https://ochukai.github.io/tags/wallpaper/"},{"name":"window","slug":"window","permalink":"https://ochukai.github.io/tags/window/"},{"name":"font","slug":"font","permalink":"https://ochukai.github.io/tags/font/"},{"name":"dva","slug":"dva","permalink":"https://ochukai.github.io/tags/dva/"},{"name":"textarea","slug":"textarea","permalink":"https://ochukai.github.io/tags/textarea/"},{"name":"this","slug":"this","permalink":"https://ochukai.github.io/tags/this/"},{"name":"markdown","slug":"markdown","permalink":"https://ochukai.github.io/tags/markdown/"},{"name":"webstrom","slug":"webstrom","permalink":"https://ochukai.github.io/tags/webstrom/"},{"name":"decorator","slug":"decorator","permalink":"https://ochukai.github.io/tags/decorator/"},{"name":"win10","slug":"win10","permalink":"https://ochukai.github.io/tags/win10/"},{"name":"win10-key","slug":"win10-key","permalink":"https://ochukai.github.io/tags/win10-key/"},{"name":"slmgr","slug":"slmgr","permalink":"https://ochukai.github.io/tags/slmgr/"},{"name":"webpack-dev-server","slug":"webpack-dev-server","permalink":"https://ochukai.github.io/tags/webpack-dev-server/"},{"name":"webpack","slug":"webpack","permalink":"https://ochukai.github.io/tags/webpack/"},{"name":"webstorm","slug":"webstorm","permalink":"https://ochukai.github.io/tags/webstorm/"},{"name":"端口占用","slug":"端口占用","permalink":"https://ochukai.github.io/tags/%E7%AB%AF%E5%8F%A3%E5%8D%A0%E7%94%A8/"},{"name":"文学","slug":"文学","permalink":"https://ochukai.github.io/tags/%E6%96%87%E5%AD%A6/"},{"name":"日本文学","slug":"日本文学","permalink":"https://ochukai.github.io/tags/%E6%97%A5%E6%9C%AC%E6%96%87%E5%AD%A6/"},{"name":"东野圭吾","slug":"东野圭吾","permalink":"https://ochukai.github.io/tags/%E4%B8%9C%E9%87%8E%E5%9C%AD%E5%90%BE/"},{"name":"东野圭吾作品全集","slug":"东野圭吾作品全集","permalink":"https://ochukai.github.io/tags/%E4%B8%9C%E9%87%8E%E5%9C%AD%E5%90%BE%E4%BD%9C%E5%93%81%E5%85%A8%E9%9B%86/"},{"name":"splice","slug":"splice","permalink":"https://ochukai.github.io/tags/splice/"},{"name":"slice","slug":"slice","permalink":"https://ochukai.github.io/tags/slice/"},{"name":"zepto","slug":"zepto","permalink":"https://ochukai.github.io/tags/zepto/"},{"name":"formData","slug":"formdata","permalink":"https://ochukai.github.io/tags/formdata/"},{"name":"ajax","slug":"ajax","permalink":"https://ochukai.github.io/tags/ajax/"},{"name":"image upload","slug":"image-upload","permalink":"https://ochukai.github.io/tags/image-upload/"},{"name":"nav","slug":"nav","permalink":"https://ochukai.github.io/tags/nav/"},{"name":"array","slug":"array","permalink":"https://ochukai.github.io/tags/array/"},{"name":"animation","slug":"animation","permalink":"https://ochukai.github.io/tags/animation/"},{"name":"埃塞克斯","slug":"埃塞克斯","permalink":"https://ochukai.github.io/tags/%E5%9F%83%E5%A1%9E%E5%85%8B%E6%96%AF/"},{"name":"航母","slug":"航母","permalink":"https://ochukai.github.io/tags/%E8%88%AA%E6%AF%8D/"},{"name":"scss","slug":"scss","permalink":"https://ochukai.github.io/tags/scss/"},{"name":"for","slug":"for","permalink":"https://ochukai.github.io/tags/for/"},{"name":"微信开发","slug":"微信开发","permalink":"https://ochukai.github.io/tags/%E5%BE%AE%E4%BF%A1%E5%BC%80%E5%8F%91/"},{"name":"建造公式","slug":"建造公式","permalink":"https://ochukai.github.io/tags/%E5%BB%BA%E9%80%A0%E5%85%AC%E5%BC%8F/"},{"name":"ts","slug":"ts","permalink":"https://ochukai.github.io/tags/ts/"},{"name":"date","slug":"date","permalink":"https://ochukai.github.io/tags/date/"},{"name":"format","slug":"format","permalink":"https://ochukai.github.io/tags/format/"},{"name":"compatible module","slug":"compatible-module","permalink":"https://ochukai.github.io/tags/compatible-module/"},{"name":"AMD","slug":"amd","permalink":"https://ochukai.github.io/tags/amd/"},{"name":"CMD","slug":"cmd","permalink":"https://ochukai.github.io/tags/cmd/"},{"name":"imgage error","slug":"imgage-error","permalink":"https://ochukai.github.io/tags/imgage-error/"},{"name":"git","slug":"git","permalink":"https://ochukai.github.io/tags/git/"},{"name":"记住密码","slug":"记住密码","permalink":"https://ochukai.github.io/tags/%E8%AE%B0%E4%BD%8F%E5%AF%86%E7%A0%81/"},{"name":"backbone","slug":"backbone","permalink":"https://ochukai.github.io/tags/backbone/"},{"name":"base","slug":"base","permalink":"https://ochukai.github.io/tags/base/"},{"name":"view","slug":"view","permalink":"https://ochukai.github.io/tags/view/"},{"name":"mysql","slug":"mysql","permalink":"https://ochukai.github.io/tags/mysql/"},{"name":"中文乱码","slug":"中文乱码","permalink":"https://ochukai.github.io/tags/%E4%B8%AD%E6%96%87%E4%B9%B1%E7%A0%81/"},{"name":"password","slug":"password","permalink":"https://ochukai.github.io/tags/password/"},{"name":"tedx","slug":"tedx","permalink":"https://ochukai.github.io/tags/tedx/"},{"name":"在网络暴力中捍卫自己","slug":"在网络暴力中捍卫自己","permalink":"https://ochukai.github.io/tags/%E5%9C%A8%E7%BD%91%E7%BB%9C%E6%9A%B4%E5%8A%9B%E4%B8%AD%E6%8D%8D%E5%8D%AB%E8%87%AA%E5%B7%B1/"},{"name":"演讲稿","slug":"演讲稿","permalink":"https://ochukai.github.io/tags/%E6%BC%94%E8%AE%B2%E7%A8%BF/"},{"name":"袁姗姗","slug":"袁姗姗","permalink":"https://ochukai.github.io/tags/%E8%A2%81%E5%A7%97%E5%A7%97/"},{"name":"navicat","slug":"navicat","permalink":"https://ochukai.github.io/tags/navicat/"},{"name":"Foo","slug":"foo","permalink":"https://ochukai.github.io/tags/foo/"},{"name":"Bar","slug":"bar","permalink":"https://ochukai.github.io/tags/bar/"},{"name":"Baz","slug":"baz","permalink":"https://ochukai.github.io/tags/baz/"}]}