Time Friend

用 /insights 审视你的编码习惯

Mon, 27 Jul 2026 16:30:00 +0000

Claude Code 用了一段时间, 自我感觉挺良好. 直到有朋友跟我说: “你试试 /insights.”

运行 claude 进入会话, 输入:

/insights

等个几十秒, 浏览器里自动弹出一个 HTML 报告. 它会分析你过去 30 天的 Claude Code 会话, 拆成几个板块: 你在什么项目上花了多少时间、最常用哪些工具、语言分布、以及——最扎心的——你的工作流里哪些地方在反复浪费 Token.

所有数据都来自本地的 ~/.claude/ 会话日志, 报告不会离开你的电脑.

报告的结构

概览数据

最上面一个 “At a Glance” 卡片, 展示核心统计: 会话数、总消息数、代码修改行数、活跃天数.

我第一次跑出来是 38 个会话, 659 条消息, 22 天活跃. 看一眼大概就知道自己用得有多勤.

使用模式

报告用柱状图展示了几个维度:

最常用的工具: 你会发现自己的 Edit 用了多少次, Bash、Read、Write 各占多少比例
编程语言分布: TypeScript、Python、Markdown 各占百分之几——这个分布有时候会让人意外
任务类型: 代码生成、调试、重构、测试编写各占多少
会话时长: 平均每条会话多久, 平均回复时间多少

我第一次看到自己 18% 的时间花在 Markdown 上时, 重新思考了一下自己的工作流——原来写文档占了我这么多精力.

使用风格分析

报告会生成一段自然语言描述, 分析你的工作风格. 不止是数字, 而是一段像人写出来的评语.

从终端到团队, Agent 工作流怎么长大

Sat, 18 Apr 2026 17:00:00 +0000

头几个月, 我一个人在终端里用 Claude Code, 感觉效率提升很明显。但很快遇到一个问题: 我下班关了电脑, agent 也停了。我需要的东西, 只能在我坐在电脑前的时候才能跑。

如果你的使用场景也是"只有我在的时候才用", 那 Claude Code 完全够用。但当你开始想: 这个 CR 能不能自动帮我 review? 这个依赖更新能不能每周一自动跑? 你就需要想怎么让它离开你的电脑还能干活了。

第一步: 把重复劳动做成脚本

最简单的方式就是把常用的 agent 任务写成脚本。比如我每两周要升级一次项目的依赖:

claude -p "把 package.json 里的依赖升到最新 minor 版本, 跑测试, 有 break 就修"

用 --output-format json 可以拿到结构化的输出。需要流式处理的话用 stream-json, 每行一个 JSON 对象。

再进一步, 把这些脚本扔到 crontab 或者 CI 里:

# 在 GitHub Actions 或 crontab 里跑
claude -p "review 最近变更的代码, 检查安全问题" \
 --output-format json --allowedTools "Edit,Bash(git *)"

--allowedTools 限制了 Claude 只能做什么操作——批量跑的时候尤其重要, 防止它乱搞。

Review Agent 的代码, 和 Review 同事的不一样

Fri, 03 Apr 2026 13:25:00 +0000

Review 同事写的代码, 和 review agent 写的代码, 是两套不同的事。

一起干活久了, 多少知道同事写代码的习惯——谁喜欢用 reduce, 谁总忘记处理边界。但 agent 没有"习惯", 它的每一次输出都取决于那次会话的上下文。

Review agent 代码的时候, 我养了几个自己的检查点。

第一: 看它改了不该改的地方吗

Agent 最大的问题不是写不对, 是管不住自己。它可能为了修一个 bug, 顺手把旁边的配置也改了, 或者把另一个函数的重命名顺便带上了。

Diff 文件里所有不在任务范围内的改动, 都是危险信号。

第二: 看它处理边界了吗

Claude 写的 happy path 通常很漂亮。问题出在用户输入为空、网络请求超时、权限不足的时候——这些分支常常没覆盖。

Review 的时候我会专门盯着 if/else 的分支看: 所有 else 和 catch 里的逻辑是真的处理了错误, 还是只是打了个 log 就过去了?

第三: 看测试是真测还是假测

这是 agent 最喜欢偷懒的地方。写出来的测试看起来跑过了, 但仔细一看——mock 了整个函数, 断言了一个硬编码的值, 或者测了一个从来不会失败的条件。

我有个检查习惯: 把测试里的数据换一批, 看看它还能不能过。换数据就挂的测试, 说明测的是假逻辑。

第四: 看代码风格是不是和项目一致

Agent 有自己的默认风格——它写出来的代码可能技术上没问题, 但跟你们项目里现有的代码风格格格不入。

命名风格、错误处理模式、甚至空行的习惯——这些不一致不会让代码出 bug, 但会让维护的人很痛苦。如果发现风格不一致, 回 CLAUDE.md 里加一条规则, 下次就好了。

这五类任务别交给 Agent

Sun, 22 Mar 2026 08:50:00 +0000

用了几个月 agent, 很容易进入一种状态: 什么东西都想扔给它干。

但有些任务真的不适合——不是 agent 能力不够, 是让它干的风险和收益不成正比。

一、涉及生产数据的操作

直接在生产数据库上跑 SQL——哪怕是 SELECT——我不放心。Claude 不会故意搞破坏, 但它可能因为理解偏差, 扫了全表导致数据库打嗝。操作生产环境的配置、直接改线上服务的部署配置——这类事我坚持自己来。回滚一次的时间比让 agent 操作省的时间多得多。

二、安全敏感的变更

改登录逻辑、权限校验、加密解密——这些我从来不交给 agent。不是因为 Claude 写不对, 而是这类代码出事就是大事, 而且漏洞往往不在明面上。

我的做法: agent 可以写 draft, 但每一行我都要亲自 review, 并且要额外找个同事再看一遍。不信任叠加——两层人眼比一层可靠。

三、需要人类判断的决策

“这个按钮是放左边还是右边"“这个错误信息用户能看懂吗"“这个 API 的返回值要不要加个字段”——这些没有对错之分, 只有"合不合适"的问题。

Agent 没有产品 sense, 也没有用户的上下文。让它在两套方案里选一个, 它选的方案可能从技术角度看最优, 但从产品角度看完全不对。

四、模棱两可的"看看”

“帮我看看这个项目有什么可以改进的地方”——没有范围、没有标准、没有截止条件。Claude 会去读几百个文件, 然后把上下文塞满, 最后给你一个泛泛的报告。

如果你真的想做代码审查, 给范围: “只看 src/api/ 下的错误处理逻辑, 找潜在的空指针风险”。

五、跨多系统的协调

需要改 A 服务、等 B 服务部署完、再看 C 服务的响应有没有变化——这种跨系统的流程, agent 做不了。不是因为技术不行, 而是每一步之间可能有你无法预料的依赖, agent 不知道什么时候该等、什么时候该继续。

当然, 这些"不适合"的边界不是固定的。随着你越来越了解 agent 的能力边界, 有些之前不敢放手的任务, 后来发现其实可以。

Agent 和 Assistant 是两回事

Sat, 14 Mar 2026 15:40:00 +0000

刚用 Claude Code 的时候, 我花了不少时间纠结一个问题: 它到底是 agent 还是 assistant?

看了不少文章, 大部分试图给这两个词划一条清晰的线——assistant 一次一步, agent 自主完成目标。但实际用下来的感受是, 大多数工具两种模式都能切, 分界线没那么分明。

真正有意义的区别不是产品叫什么, 而是谁发起、谁控制、在哪里跑。

Assistant 模式: 你每步都要盯着

用 Claude Code 最基础的用法就是这样: 你打一句 prompt, 它动一下, 你看一眼, 然后你打下一句。

你在每一轮都掌握控制权。你决定下一步做什么, agent 只是执行。这种模式下:

你全程在场, 不太会出大问题
但你的注意力被绑死了——它动一下你就要看一下
适合探索性的工作: 调试、原型、架构讨论

Agent 模式: 定好目标就放手

把目标扔给 Claude, 它自己去读代码、改代码、跑测试, 最终给你一个结果。

这时候你的角色变了——你不再是驾驶员, 而是定目标的人和审结果的人。中间的过程你不需要每步都看。

这种模式下:

你的注意力可以解放出来, 同时干别的事
但风险也高了——它可能走偏了等你回来才发现
适合有清晰完成标准的任务: 重构、迁移、批量修测试

最实用的分法: 看触发方式

抛开理论, 实际工作中最好用的区分方式其实是谁触发的:

你在终端里敲命令 → Assistant 模式
定时任务跑起来的、GitHub Webhook 触发的、CI 里自动执行的 → Agent 模式

我自己最有价值的体会是: 不用纠结它该叫 agent 还是 assistant, 而是建立一条 pipeline——用 assistant 模式试出一个可靠的工作流, 然后把它变成定时跑的 agent 任务。

几轮对话后 Claude 变笨了

Fri, 06 Mar 2026 11:10:00 +0000

用了几个月 Claude Code 之后, 我遇到了一个奇怪的现象: 同一个会话, 做到后面感觉 Claude 变蠢了。

不是你的错觉, 也不是模型的问题。是上下文炸了。

上下文是怎么炸的

Claude 的工作记忆是有限的。会话一开始, 它清楚地记得目标是什么、做了哪些决策、还有哪些事没做完。到了第 50 轮, 上下文里塞满了走过的弯路、讨论过的方案、和你争论的对话历史。

输出质量下降是必然的。

每轮对话都是检查点

Claude Code 有一个很方便的机制: 每发出一条 prompt 就会自动创建一个快照。不只是记对话, 还会快照被修改的文件状态。

按两次 Escape 或者输入 /rewind, 会打开回退菜单。你可以选择:

只回退对话
只恢复代码
两者都回退
从某个节点开始压缩

有了这个, 你可以大胆地让 Claude 尝试高风险方案。不行就回退, 不丢任何代码。检查点会随会话保存, 关掉终端回来还能继续回退。

但要注意: 检查点只追踪 Claude 通过编辑工具做的修改。通过 Bash 命令或外部进程改的东西不在此列。它不是 git 的替代品。

几个习惯, 保持上下文干净

走偏了立刻打断

按 Escape 中断它。按两次 Escape 打开回退菜单, 可以回滚到之前的状态。

我踩过的一个坑: 当 Claude 反复回到一个错误假设的时候, 我下意识用了 /compact。结果它把那个错误假设也保留了, 问题没解决。正确做法是:

最好的是 /clear 清空, 用更精确的 prompt 重新开始
如果你想保留当前的关键上下文, 用 /compact 只保留 API 变更相关的部分, 丢掉调试过程——加上 focus 指令告诉它该留什么

常用命令

/clear: 任务之间清空上下文, 别让上个任务的逻辑污染下个任务
/compact: 加 focus 指令, 用在长而连贯的会话里, 保留关键部分丢掉噪音
Subagent: 把大量研究类的工作交给它, 在独立上下文里完成, 还你一个总结
/rename: 给重要的会话打标签, 方便之后找回

我自己用的土办法

每次完成一个逻辑单元——一个函数、一个组件——就 git commit, 然后 /clear, 再开始下一个。

我的 CLAUDE.md 里都放了什么

Thu, 19 Feb 2026 16:20:00 +0000

最讽刺的事情是什么? 你一边抱怨"每次新会话都要重新跟 Claude 解释项目背景", 一边项目根目录里根本没有 CLAUDE.md。

别笑, 我之前就是这个状态。

后来发现有个偷懒的办法——直接跑 /init。Claude 会自动分析你的项目结构、检测构建工具和测试框架, 生成一份初始的 CLAUDE.md。如果已经有 CLAUDE.md 了, /init 不会覆盖, 而是建议改进。

CLAUDE.md 的本质

Claude Code 启动的时候会自动读这个文件, 把它当作用来理解项目的起点。你项目怎么跑测试、目录结构是什么、有哪些不能碰的约定——写进去, 它自己就知道了。

第一类: 命令

最常见的用法——把命令写进去, 省得每次说:

## Commands
- 测试: npm test
- 构建: npm run build
- 单文件测试: npx jest src/xxx.test.ts
- Lint: npx eslint src/

有了这些, Claude 自己知道该跑什么, 不用你再说"跑一下测试"。

第二类: 架构约定

有些东西 Claude 看代码看不出来:

## Architecture
- 状态管理用 Zustand, 不用 Redux
- API 请求统一走 src/api/ 下的封装
- 不要直接改 src/core/ 里的文件, 只能通过扩展接口

第三类: 团队规范

Linter 管不了, 但 review 的时候一定会被说的:

Agent 改完的代码, 你敢直接合吗

Thu, 05 Feb 2026 09:45:00 +0000

Claude 改完代码说了一声"Done", 你看了一眼觉得差不多, 就合并了。然后周一线上挂了。

没有可运行的检查, agent 觉得"做完了"和你觉得"做完了"是两码事。最贵的 bug 不是崩溃, 是安安静静返回了错误结果。

最简单的: prompt 里加一句

最轻量的做法, 就是在 prompt 末尾加一句话:

改完之后跑一下测试, 不通过就继续修.

Claude 改完代码会自己去跑 npm test, 挂了就回头看代码, 修好了再跑。全过程不需要你介入。

但这有个问题——它只按照自己理解的标准来验证。如果你的测试覆盖率不够, 或者"完成"的定义比跑通测试更复杂, 就需要更多层。

分层往上加

第一层: prompt 内检查

就是上面说的, 告诉它跑测试。日常小改动用这个就够了。

第二层: 定义完成标准

在 prompt 里说清楚什么算"做完":

每次修改完运行 npm run build && npm test, 把输出发给我.

这样你至少能看到它跑了什么、输出了什么, 不是它说 done 你就信。

第三层: 不让它糊弄

加一句关键的:

修复根因, 不要掩盖错误.

这能防止 agent 用空的 try-catch 或者假的 fallback 数据来敷衍你。

第四层: `/goal` 条件

把验证条件设成会话级的 goal, 每次修改后自动检查:

/goal 测试全部通过, 构建产物不超过 200KB

Claude 会在每轮修改后重新检查, 不满足就继续改, 不需要你每次都说"再跑一下测试"。

写 Prompt 一次过的秘诀

Thu, 22 Jan 2026 14:15:00 +0000

用了一段时间 Claude Code, 你会发现大部分翻车的会话不是模型不行, 是你自己的 prompt 有问题。Claude 能猜你的意图, 但你没法指望它会读心。

把任务范围卡死

“帮我优化一下这段代码”——这种 prompt 出来什么结果全看运气。什么叫优化? 性能、可读性、还是裁掉冗余代码?

好的 prompt 应该说清楚文件、场景和验证方式:

给 src/auth.ts 写一个已登出用户的边缘用例测试, 不要用 mock.

任务范围越小, 结果越可控。模糊的 prompt 只有在一种情况下有用——你真的想让 agent 给意见的时候。“这个文件你有什么改进建议"就很合适, 但记得限定范围, 别让它自己逛到几百个文件里去。

指一个现成的例子

Claude 从真实代码里学规范比从文字描述里学快得多。你不需要跟它解释"我们项目的命名规范是驼峰、接口前缀有 I 开头”——

参考 src/services/user.ts 的写法, 用同样的模式实现这个新接口.

一句话, 比一百字描述都有用。

报 Bug 按固定格式来

我 debug 的时候用这个格式, 很少出问题:

症状: 用户登录后跳到 404 页面
位置: src/router/index.ts 第 42-56 行的路由守卫逻辑
修复标准: 登录后跳到 redirect 参数指定的页面, 没有 redirect 就去首页

再加一句 “先写一个能复现的测试再修”, 能防止它改完了但什么都没修。

用 `/btw` 处理临时小问题

有时候你做到一半, 突然想确认一个不相关的事——“这个包的 API 签名是什么样的?"。如果用主会话问, 它会污染上下文。用 /btw 这个包的 API 签名是什么 问, 答案会以浮层显示, 不进对话历史, 不占上下文。

用 Plan → Code 循环管住你的 Agent

Thu, 08 Jan 2026 10:30:00 +0000

刚用 Claude Code 的时候我有个毛病: 打开终端, 直接敲一句话告诉它帮我改什么, 然后看着它一顿操作, 最后发现方向完全不对。

后来想明白一个道理——Agentic Coding 和写代码是两套不同的技能。写代码的时候你的手跟着脑子走, 但用 agent 的时候, 你的价值在于"定义目标"和"审核结果", 而不是替它打字。

那怎么让 agent 不走偏? 我总结了四个步骤: 探索 → 规划 → 编码 → 提交。

第一步: 先探索, 别动手

Plan 模式是 Claude Code 的只读模式。启动的时候加个参数:

claude --permission-mode plan

会话里按 Shift+Tab 可以在 Plan 和 Accept-Edits 之间切换, 或者直接打 /plan。

为什么要先探索? Claude 对项目的理解完全取决于你给了什么上下文。让它自己把相关文件读一遍, 画出一张地图, 比你凭直觉说"去改那个文件"要靠谱得多。

碰到特别棘手的架构问题, 我习惯在 prompt 里加一句 “think carefully before proposing anything”。多数情况下, 它前面的推理越仔细, 后面的返工就越少。

不过也别教条。如果任务很小——修个 typo、改个变量名、加一行日志——直接让它做就行, 不需要走完整个 plan 流程。官网文档也说了: 如果你能用一句话描述完改动内容, 那就跳过 plan。

博客 Logo 动画是怎么做的

Thu, 14 Aug 2025 17:00:00 +0000

网站左上角那个小方框, 是视频.

默认灰度, hover 才亮起来, 颜色每次还不一样, 播放速度也会先快后缓. 像被惊醒了一下.

为什么做这个

之前 logo 是张静态 PNG. 总觉得缺了点呼吸感. 正好手头有一段素材, 就把 logo 从静态图换成了视频.

mp4 没有 Alpha 通道

剪映导出时明明去掉了背景, 但 mp4 不支持透明通道, 透明部分被压成了黑色.

桌面端用 mix-blend-mode: screen 解决 — 黑色变完全透明, 只保留亮色部分:

@media (hover: hover) and (pointer: fine) {
 #header #logo { mix-blend-mode: screen; }
}

限定 (hover: hover) 是因为移动端浏览器对 <video> 的 blend mode 支持普遍不好.

移动端改用 <canvas> 做逐像素抠图: video 隐藏继续播放, canvas 每帧取画面, RGB 都低于 30 的像素 alpha 置 0:

function render() {
 canvasCtx.drawImage(videoEl, 0, 0, w, h);
 var src = canvasCtx.getImageData(0, 0, w, h).data;
 var id = canvasCtx.createImageData(w, h);
 for (var i = 0; i < src.length; i += 4) {
 id.data[i] = src[i];
 id.data[i+1] = src[i+1];
 id.data[i+2] = src[i+2];
 id.data[i+3] = (src[i] < 30 && src[i+1] < 30 && src[i+2] < 30) ? 0 : 255;
 }
 canvasCtx.putImageData(id, 0, 0);
 requestAnimationFrame(render);
}

这个性能取决于视频分辨率, logo 尺寸很小, 所以开销可以接受.

首页打字效果是如何实现的

Tue, 12 Aug 2025 11:50:00 +0000

打开首页会看到一行文字在逐字打字, 过几秒又换一句. 这个效果不复杂, 但很多人问怎么做的.

这篇说一下实现方式.

整体原理

首页加载时, 从一个 JSON 文件里随机选一句台词, 用 Typed.js 这个库模拟打字效果.

首页加载
 ↓
main.js 检测到当前是首页
 ↓
根据语言 (中文/英文) 确定取哪个字段
 ↓
从 /data/quotes.json 随机取一条
 ↓
传给 Typed.js, 开始打字动画

数据来源: quotes.json

台词存在 static/data/quotes.json 里.

[
 {
 "en": "Hope is a good thing, maybe the best of things, and no good thing ever dies.",
 "zh": "希望是美好的，也许是世间最美好的事物，而美好的事物永不消逝。",
 "author": "The Shawshank Redemption"
 },
 {
 "en": "Get busy living or get busy dying.",
 "zh": "忙着活，或忙着死。",
 "author": "The Shawshank Redemption"
 }
]

每条数据包含三个字段:

如何让博客支持离线访问

Tue, 08 Jul 2025 15:30:00 +0000

PWA 是个 buzzword, 说白了这个博客用到的 PWA 功能就两个: manifest.json 和 Service Worker. manifest.json 让浏览器知道"这是个应用", Service Worker 让它在离线时也能工作.

这篇重点说 Service Worker, 因为它比较复杂. manifest.json 很简单, 放在最后说.

Service Worker 是什么

简单说, Service Worker 是一个运行在浏览器背后的脚本. 它独立于网页, 在后台默默干活.

你可以把它理解为浏览器和网络之间的中间人. 正常情况下, 浏览器请求一个资源 (HTML, JS, 图片), 直接去服务器拿. 有了 Service Worker, 请求会先经过它:

浏览器 → Service Worker → 网络 (或缓存)

Service Worker 可以决定: 这个请求是去网络拿, 还是直接从本地缓存返回, 还是两者都做.

这个博客的 Service Worker 就是用 Workbox 生成的, 大约 5KB.

有什么用

离线访问

这是最核心的功能. 如果用户访问过一次博客, Service Worker 会把静态资源缓存下来. 下次即使没有网络, 也能打开之前看过的文章.

我是怎么给博客加页面统计的

Sun, 15 Jun 2025 13:20:00 +0000

写博客不知道有没有人看, 会很空虚. 统计不是为了 KPI, 就是图一乐.

这个博客的页面统计有两套系统, 各管各的.

Busuanzi 显示在文章页面上, 读者能看到每篇文章被看了多少次. 它是开源的, 不需要注册, 脚本一引就行.

Google Analytics 在后台跑, 只有我自己能看到. 用来分析流量来源, 用户分布, 热门内容等.

两套互不干扰.

Busuanzi (前端展示)

Busuanzi 是不蒜子的英文名, 一个极简的阅读统计工具. 没有后台, 没有 Dashboard, 只有一个计数器和一段 JS 脚本.

引入脚本

在 layouts/partials/js.html 里加载:

{{ if .IsPage }}
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
{{ end }}

只在文章页加载, 首页和列表页不用.

显示阅读量

在文章页模板 layouts/_default/single.html 里:

<div class="article-tag">
 <i class="fa fa-eye"></i>
 <span id="busuanzi_container_page_pv">
 <span id="busuanzi_value_page_pv">0</span>
 </span>
</div>

Busuanzi 的脚本加载后会自动查找 id="busuanzi_value_page_pv" 的元素, 把阅读量填进去. 数据存在 Busuanzi 的服务端, 不需要自己维护.

评论系统怎么接入博客的

Tue, 06 May 2025 10:30:00 +0000

博客不能没有评论. 但又不想为了一个评论功能去搞数据库和 moderation. Giscus 是一个折中方案.

这个博客的评论系统用的是 Giscus. 它基于 GitHub Discussions. 所有评论都直接存在 GitHub 仓库里, 不需要自建数据库, 不需要第三方服务.

整体流程

用户打开文章页
 ↓
加载 giscus.app/client.js
 ↓
Giscus 脚本读取 data- 属性配置
 ↓
根据 mapping="pathname" 取当前 URL 路径
 ↓
用 GitHub Discussions API 查询匹配的 Discussion
 ↓
找到 → 渲染评论框和已有评论
未找到 → 显示"留个评论吧"输入框
 ↓
用户写评论 → 点击发布
 ↓
跳转 GitHub OAuth 授权 (首次需要)
 ↓
评论通过 API 写入仓库的 Discussions
 ↓
Giscus WebSocket 监听变更 → 实时更新评论区

整个过程用户无感知, 不需要离开页面.

哪里对接

评论系统以 script 标签嵌入页面. 在 layouts/partials/comments.html 里:

我是怎么部署这个博客的

Thu, 10 Apr 2025 15:44:00 +0000

静态文件总得找个地方放, 还得让全世界都能访问.

部署平台: Cloudflare Pages

选 Cloudflare Pages 而不是其他平台, 原因有三:

全球 CDN: Cloudflare 有遍布全球的边缘节点, 无论访客在哪, 都能从最近的节点加载页面
零配置 HTTPS: 自动签发和续期 SSL 证书, 不需要手动处理
免费额度够用: 对于个人博客来说, 带宽和构建次数完全够用

配置很简单, 在 Cloudflare Pages 控制台创建一个项目, 关联 GitHub 仓库. 构建命令和输出目录在 GitHub Actions 里控制, 不需要在控制台配.

有个坑: Cloudflare Pages 默认分配的域名是 <project>.pages.dev, 项目名一旦确定就不能改. 想换只能删掉重建. 我那会儿随便打了个名字, 后来想改发现不行, 只能留着.

CI/CD 流程

完整的部署流程由 GitHub Actions 管理:

name: Deploy to Cloudflare Pages

on:
 push:
 branches: [master]
 workflow_dispatch:

jobs:
 build:
 runs-on: ubuntu-latest
 steps:
 - uses: actions/checkout@v4

 - uses: peaceiris/actions-hugo@v3
 with:
 hugo-version: "0.164.0"
 extended: true

 - uses: actions/setup-node@v4
 with:
 node-version: 24
 cache: npm

 - name: Install dependencies
 run: npm ci

 - name: Patch theme for Hugo compatibility
 run: bash scripts/patch-theme.sh

 - name: Build
 run: npm run build

 - name: Deploy to Cloudflare Pages
 run: npx wrangler pages deploy public --project-name=time-friend
 env:
 CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
 CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

触发条件是 push 到 master 分支. 也支持手动触发 (workflow_dispatch), 方便在不改代码的情况下重新部署.

博客的 Google SEO 是怎么做的

Tue, 25 Mar 2025 11:08:00 +0000

这篇文章只讲 Google SEO. 其他搜索引擎不搞, 原因很简单: 流量大头在 Google, 把 Google 做好就够了.

结构化数据

这是最重要的部分. 结构化数据让 Google 在搜索结果里展示 rich result, 包括发布时间, 作者, 摘要等信息.

每篇文章在构建时自动注入 JSON-LD:

{{ if .IsPage }}
<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@type": "Article",
 "headline": "{{ .Title }}",
 "datePublished": "{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}",
 "dateModified": "{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" }}",
 "author": {
 "@type": "Person",
 "name": "{{ .Site.Params.author }}"
 },
 "description": "{{ if .Description }}{{ .Description }}{{ else }}{{ .Summary | plainify }}{{ end }}",
 "url": "{{ .Permalink }}"
 {{ with .Params.tags }}
 ,"keywords": "{{ delimit . ", " }}"
 {{ end }}
}
</script>
{{ end }}

关键字段:

博客的构建流水线是怎么跑的

Wed, 05 Mar 2025 16:30:00 +0000

文章写完之后, 总不能手动一条条部署. 自动化的目的很简单: push 完代码就什么都不用管了.

本质上就两件事: 把 Markdown 变成静态文件扔到网上去, 顺便把构建流程自动化.

Gulp 任务

整个构建就两个 Gulp 任务, 串行跑:

gulp.task("default", gulp.series('build', 'generate-service-worker'));

build

gulp.task('build', () => gulp.src('./').pipe(shell(['hugo --buildFuture --minify'])));

一行代码. 调用 Hugo 构建, --buildFuture 允许发布未来日期的内容, --minify 在构建时做 HTML/CSS/JS 压缩.

为什么用 gulp-shell 而不是直接调用 Hugo? 因为后续需要在构建完成后做一些处理, Gulp 作为编排工具把任务串起来比较方便. 如果用 npm script 串命令也可以, 但 Gulp 的 task 定义更清晰, 错误处理也更直接.

generate-service-worker

gulp.task('generate-service-worker', () => {
 return workbox.generateSW({
 globDirectory: './public',
 globPatterns: ['**/*.{woff2,woff,js,css,png.jpg}'],
 globIgnores: ['sw.js'],
 swDest: `./public/sw.js`,
 clientsClaim: true,
 skipWaiting: true,
 runtimeCaching: [
 { urlPattern: /.*\.js/, handler: 'NetworkFirst' },
 { urlPattern: /.*\.css/, handler: 'StaleWhileRevalidate' },
 { urlPattern: /.*\.(?:png|jpg|jpeg|svg|gif)/,
 handler: 'CacheFirst',
 options: { cacheName: 'images', expiration: { maxEntries: 50 } } },
 { urlPattern: /.*\.html/, handler: 'NetworkFirst' }
 ]
 })
 .then(() => console.info('Service Worker 生成完成'))
 .catch(error => console.warn('Service Worker 生成失败: ' + error));
});

这个任务用 Workbox 自动生成 SW, 具体原理和缓存策略在 PWA 与 Service Worker 那篇里讲了.

我的博客主题是如何定制的

Sat, 15 Feb 2025 09:15:00 +0000

主题用的 hugo-cactus-dark, 一个暗色主题, 干净, 没什么花哨的东西. 完全够用.

但原版主题只覆盖了基础功能. 我需要双语切换, Giscus 评论, 页面统计, 结构化数据, 这些原版都没有. 所以直接 fork 了一份, 在 layouts/ 里覆盖掉需要改的模板.

覆盖了哪些

layouts/ 目录下的模板优先级高于主题里的同名文件. 我只覆盖需要改的部分, 不需要动的就留给主题.

这个东西开发的时候有个烦人的点: Hugo 对模板有缓存. 你改了 layouts/ 下的文件, 有时候浏览器还是用旧版本. 不是 Hugo 的锅, 是浏览器缓存了 HTML. 清一下或者开无痕模式就好.

head.html

改动最大的一个. 原版只输出了基本的 meta 和样式引用. 这里加了一堆东西:

<!-- 搜索引擎验证 -->
<meta name="360-site-verification" content="xxx" />
<meta name="sogou_site_verification" content="xxx" />

<!-- 双语 hreflang -->
{{ if .IsTranslated }}
{{ range .Translations }}
<link rel="alternate" hreflang="{{ .Lang }}" href="{{ .Permalink }}">
{{ end }}
<link rel="alternate" hreflang="{{ .Lang }}" href="{{ .Permalink }}">
{{ end }}

<!-- Open Graph -->
<meta property="og:locale" content="{{ if eq .Lang "zh" }}zh_CN{{ else }}en_US{{ end }}">
<meta property="og:title" content="{{ .Title }}">
<meta property="og:image" content="{{ .Params.image | absURL }}">
<meta property="og:description" content="{{ .Summary | truncate 200 }}">

<!-- Canonical -->
<link rel="canonical" href="{{ .Permalink }}">

<!-- 结构化数据 -->
{{ if .IsPage }}
<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@type": "Article",
 "headline": "{{ .Title }}",
 "datePublished": "{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}",
 "dateModified": "{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" }}",
 "author": { "@type": "Person", "name": "{{ .Site.Params.author }}" }
}
</script>
{{ end }}

为什么要加 Open Graph? 因为文章分享到社交媒体时, 预览卡片需要这些 meta. 没有的话就只显示一个光秃秃的链接.

博客多语言是怎么实现的

Mon, 20 Jan 2025 14:21:00 +0000

写技术博客有个尴尬: 中文内容国内读者看, 但海外流量也不少. 干脆中英文都上.

这个博客是中英双语的. 同一篇文章有中文版和英文版, 各自有独立的 URL, 互不影响.

i18n 分两层: 一是内容的国际化 (文章本身有中英文版本), 二是界面的国际化 (按钮, 菜单, 提示文字跟着语言切换).

内容国际化

目录结构

Hugo 的 module.mounts 来做语言映射:

module:
 mounts:
 - source: content/en
 target: content
 lang: en
 - source: content
 target: content
 lang: zh
 excludeFiles: 'en/**'

英文内容从 content/en 取, 中文内容从 content 取, 排除掉 en/ 目录. 这样中文和英文文件互不干扰, 各自在独立的目录下.

中文文章在 content/archive/ 下, 英文文章在 content/en/archive/ 下.

translationKey 配对

用 Hugo 的 translationKey 来配对文章. 同一篇文章的中英文版本用同一个 key:

# 中文文章
translationKey: zh0189
title: Git系列之关于add命令的一些事
slug: git-series-about-add-command

# 英文文章
translationKey: zh0189
title: Git Series: About the Add Command
slug: git-series-about-add-command

Hugo 会自动把这两个页面识别为翻译对. 模板里用 .Translations 拿到对应语言的版本, 用来做语言切换.

我的博客架构长什么样

Fri, 10 Jan 2025 10:00:00 +0000

很多人好奇这个博客是怎么搭的.

看起来很简单,但背后东西不少.算不上大工程,但从工程角度确实折腾了不少东西.双语架构,自动化构建, PWA, Google SEO 等等.

所以打算写个系列,把现在的这套东西记录下来.用什么,为什么这么选,代码怎么写的,性能上怎么考虑的.

整体架构

Markdown 内容 (中英双语)
 ↓
 Hugo SSG (extended, v0.164)
 ↓
 自定义主题 (fork cactus-dark, 大改)
 ↓
 Gulp Pipeline
 ├── hugo --minify
 └── Workbox generateSW
 ↓
 Cloudflare Pages (GitHub Actions CI)

三层: 内容层, 构建层, 部署层. 没有数据库, 没有后端, 全是静态文件.

为什么用 Hugo

我是前端, 喜欢用前端圈的东西. Hugo 是用 Go 写的, 文章多了以后构建速度就是快. 两百多篇文章, 几秒就构建完了. 这就是核心原因.

构建快了, 更新博客的心理负担就小. 这是一个正反馈.

Go 模板用起来也挺顺手, 变量作用域, 管道语法, partial 系统, 该有的都有. 不过刚开始接触的时候, {{ range }} 和 {{ with }} 的区别可能会绕一下.

Long Time No See

Wed, 19 Jun 2024 19:02:36 +0000

Hello everyone,

It’s been almost three years since I last updated my blog. So much has changed since then. I want to share some of my recent experiences with you.

First, my whole family and I have moved to a new country. It was a big change for us. We are still getting used to everything.

In my job, I’ve noticed that front-end technology is not as demanding as I thought it would be. Instead, good communication in English has become the most important skill for me. English is now the main barrier in my life. It affects my job, my promotion, and everything in my career.

Mac 最小化所有应用快捷键

Wed, 31 Mar 2021 22:30:05 +0000

平时使用Mac 的时候,桌面太多的应用窗口.

一直以来没办法跟windows一样可以一键显示桌面.

研究了一下,在Mac上还是有办法做到一样的效果的.

Command+Option+H+M

2020年终有感

Thu, 04 Mar 2021 16:41:00 +0000

终于可以在这个关键的时间节点写出这篇文章了,虽然现在已经是2021年的3月了. 但是一直没有找到一个很好的机会可以将这一篇文章写出来.

因为疫情原因,我知道大家的2020年有太多讲不完的故事. 我也一样,这一年也是我成长关键的一年.

关于工作

因为去年对跨端方面有了一定的进展,公司组织架构调整之后,成立了轻应用小组. 专门做跨端方向的技术研究来支撑公司的业务发展.

一年下来,遇到的问题极多对于我来说压力也极大,时常因为一些很难解决的问题导致业务可能上不了线. 但是问题总是在上线之前找到解决方案.这种事情发生了太多,对于我个人来说,心也得到了非常大的历练. 一年下来,我的口头禅就变成了这个问题不大. 不仅给自己打气,作为团队里面bug兜底的男人,也不断给碰到问题的同学一些信心. 这可能是我前端生涯中碰到问题最多,最难的一年了.但是成果还是相当不错的. 我们在一年时间里,将我们的服务拓展到了8个端~ 在此期间,也不能说没有放弃的念头,因为碰到的疑难杂症越多,大家倒是信心满满~ 很多时候,大家可能觉着,就算自己解决不了,至少还有我兜着~ 我承认,其中肯定有赌的成分,但是如果时间期限是一年的话,我们赌赢了. 但是带来一个问题,因为疑难杂症的问题解决多了,成就感触发的越来越难.

但是在业务方面,虽然大家很努力,但是并没有实质性的进展.这让人很疲惫. 在疫情面前,大部分公司或多或少都有类似的问题. 就好像不管用什么办法,数据都像是死猪不怕开水烫一般,没有实质性的波澜~

这让大家都非常的疲惫,希望在下一个阶段可以重新找回自己.

关于自己

说到找回自己,我刚刚在想,我是否曾经得到过自己. 或者说自己对自己有了一定的误解. 对于程序员的自己来说,可能曾经每天都可以进入心流状态的我来说是怀念的. 进入心流就是一整天,下班的时候可能才会有一些烦恼的事情进入大脑,大部分时间都是一个亢奋又沉浸的世界.

使用Taro开发各端的顺序建议

Wed, 16 Dec 2020 22:17:36 +0000

以最小成本开发Taro各端

现在公司里面的所有小程序,快应用,rn等等都在使用Taro在开发.

如果只兼容一端的话,使用Taro开发,没有任何问题.

但是又想一次开发,各端正常运行的话,在很多的细节上是要花一点心思的.

每一端有每一端的难.

开发难度排序

华为快应用 > 快应用 > React Native > Swan小程序 > 微信小程序 > H5

关于快应用

在开发过程中,如果有涉及到快应用的业务,建议优先开发快应用.

快应用的布局标准跟js容器环境跟其他的小程序或者是H5有一定的差异.

并且华为快应用与其他快应用有很多莫名其妙的差异.

如果涉及到快应用,请谨慎对待开发时间.

目前看来,快应用的对UI布局的支持与小程序有一定的差异.虽然使用Taro的样式区分,快应用与小程序确实可以使用一套同样的代码同时跑在两端上.

但是在开发过程中,他们之间的差异有太多意想不到(快应用不符合W3C规范)的差异,建议UI布局相关的代码,各端单独布局.业务相关的可以使用一套代码. 就是布局样式独立,行为保持一致.

不然会花掉太多的布局差异抹平的工作.

关于React Native

React Native在UI布局上也只是部分支持W3C标准.虽然布局上不能跟小程序H5一样灵活,

对比起快应用来,并不会多出一个要额外兼容的华为快应用.

目前Taro封装的React Native的特性与小程序是非常接近的, 如果不过多调用太多冷门的API,基本上还是可以独立开发完成大部分UI编程.

如果RN想要调用原生APP的组件,在目前开来会带来相当大的沟通成本.

在开发中本身ios与安卓就有一定的特性差异,放到RN里实现后又会带来其他的差异.

并且开发人员从一个人变成了三个人.

如果桥接的组件太过于复杂,开发人员可能会有一种还不如自己独立开发的抱怨.

这个时候多端一起开发,时间不一定会比独立开发要快.

关于 Swan小程序

Swan小程序与微信小程序已经非常接近了.

就我们现有业务来说除了wifi不能实现以外,其他的基本上都跟微信小程序保持了一致.

目前开发中,IDE的卡顿是Swan小程序最不好的开发体验.

迭代中,swan小程序的基础库兼容方面也做得不是很好,

好几次遇到莫名其妙的问题,都是因为基础库兼容不好导致的.

使用Taro开发的快应用如何优化体积

Tue, 15 Dec 2020 22:17:36 +0000

快应用重复打包问题

使用Taro开发快应用,有一个问题绝对不能忽视,那就是体积问题.

因为快应用打包的特性(1080以下)多个页面里,如果重复应用了一个第三方库,那么这个库的代码会一起打到这个页面中,导致一样的代码会存在多个页面中.

因为目前1080版本的快应用没有全面铺开.如果你贸然升级自己快应用的最低平台版本号为1080. 你将会失去大量低版本的用户.

官方给出的解决方案 (1080以下版本)

当然快应用官方也意识到了这个问题,给出了最早期的解决方案.

那就是将多个页面会依赖到的代码,全部在快应用初始化的时候挂载到全局变量上面.

其他页面使用的时候,直接引用全局变量就可以了.

// 入口文件
import day from 'day';

const globalRef = Object.getPrototypeOf(global) || global;
globalRef.day = day;

// 页面使用
const globalRef = Object.getPrototypeOf(global) || global
const day = globalRef.day

day()

分析项目使用了哪些公共代码

重复打包的内容,npm依赖会占大头,也有可能是自己写的公共代码.

我们的项目用到了哪些npm依赖?

Taro打包之后,dist/quickapp 下的构建产物会单独把所有项目能用到的npm包放到 src/npm/ 目录下.

公共代码分析

只要一个js被多个page引用,就必须会造成重复打包的问题.

使用Taro的 alias 特性解决重复打包的问题

alias 是应用路径别名的特性,他的实现原理很简单,在config文件中制定好路径替换规则.

在taro打包的时候,直接替换应用路径成为正确的应用路径就可以了.

{ 
 '@src': 'src',
 '@plugin': 'src/plugin',
 '@components': 'src/components',
}

如何使用alias解决我们的打包问题

既然 alias有替换应用路径的问题,再加上我们的第三方库只要挂载到全局变量中就可以让所有页面都可以使用到.

两个特性结合起来的解决方案就是这样的.

第一步,修改npm的alias

为什么要这样做,看到第二步你就会明白.

classnames.ex 文件为classnames的映射文件.

{
 'classnames': 'src/replacement/classnames.ex',
 'prop-types': 'src/replacement/prop-types.ex',
 'mobx': 'src/replacement/mobx.ex',
}

第二步, 制作替身依赖

拷贝 dist/quickapp/src/npm 中的内容到src/replacement/npm中.
在src/replacement下新建一个index.js文件,大致内容如下

import crypt from './npm/crypt/crypt'
import classnames from './npm/classnames'


const globalRef = Object.getPrototypeOf(global) || global

globalRef.classnames = classnames;
globalRef.crypt = crypt;

制作npm依赖映射的文件

看到这一步,你应该就会明白为什么alias为什么会将正常的npm依赖路径替换到一个映射文件.

TensorFlow中的Tensor是什么?

Fri, 18 Sep 2020 00:00:00 +0000

Tensor(张量)

“张量”一词最初由威廉·罗恩·哈密顿在1846年引入。对，就是那个发明四元数的哈密顿：

Tensor实际上就是一个多维数组（multidimensional array）
Tensor的目的是能够创造更高维度的矩阵、向量。

色彩的例子

彩色图像文件（RGB）一般都会处理成3-d tensor，每个2d array中的element表示一个像素，R代表Red，G代表Green，B代表Blue

多维数组

把三维张量画成一个立方体：

更高维的张量:

初始化一个向量

0维

tf.tensor(1).print();

1维

tf.tensor([1, 2, 3, 4]).print();
// or
tf.tensor1d([1, 2, 3]).print();

2维

tf.tensor([[1, 2], [3, 4]]).print();
// or
tf.tensor2d([[1, 2], [3, 4]]).print();

3维

tf.tensor([[[1], [2]], [[3], [4]]]).print();
// or
tf.tensor3d([[[1], [2]], [[3], [4]]]).print();

4维

tf.tensor([[[[1], [2]], [[3], [4]]]]).print();
// or
tf.tensor4d([[[[1], [2]], [[3], [4]]]]).print();

5维

tf.tensor([[[[[1], [2]], [[3], [4]]]]]).print();
// or
tf.tensor5d([[[[[1], [2]], [[3], [4]]]]]).print();

6维

tf.tensor([[[[[[1],[2]],[[3],[4]]],[[[5],[6]],[[7],[8]]]]]]).print();
// or
tf.tensor6d([[[[[[1],[2]],[[3],[4]]],[[[5],[6]],[[7],[8]]]]]]).print();

Mac系统开启Chrome 跟 Edge的网页强制暗黑模式

Thu, 17 Sep 2020 22:30:05 +0000

开启强制暗黑模式

Chrome

进入浏览器,地址栏输入:

chrome://flags/#enable-force-dark

Edge

进入浏览器,地址栏输入:

edge://flags/#enable-force-dark

操作

将第一项 Disabled 改成 Enabled,然后重启浏览器

生效:

Mac系统如何关掉Chrome的跨域限制

Wed, 16 Sep 2020 22:30:05 +0000

关掉Chrome 跨域限制

因为调试经常需要Chrome关掉跨域限制,网上的方法大多是windows的,

这里今天记录一下:

open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
--args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security

数学篇 - 数据结构丶编程语句丶基础算法与数学的关系(笔记)

Tue, 15 Sep 2020 00:00:00 +0000

看到很多人说,数据结构,算法不能算作数学.

不同的数据结构，都是在编程中运用数学思维的产物。每种数据结构都有自身的特点，有利于我们更方便地实现某种特定的数学模型.

数据结构

别小看这些数据结构，它们其实就是一个个解决问题的“模型”

数组 (Array)

特点: 可以通过下标，直接定位到所需的数据,适合随机访问.常常和循环语句相结合，来实现迭代法，例如二分查找、斐波那契数列等等

缺点: 数组只对稠密的数列更有效。如果数列非常稀疏，那么很多数组的元素就是无效值，浪费了存储空间。此外，数组中元素的插入和删除也比较麻烦，需要进行数据的批量移动。

如何解决稀疏数列问题: 链表

链表 (Linked List)

链表中的结点存储了数据，而链表结点之间的相连关系，在 JavaScript 语言中是通过对象引用来实现的。

特点: 不能通过下标来直接访问数据，而是必须按照存储的结构逐个读取

优势: 不必事先规定数据的数量，也不再需要保存无效的值，表示稀疏的数列时可以更有效的利用存储空间，同时也利于数据的动态插入和删除

缺点: 于数组而言，链表无法支持快速地随机访问，进行读写操作时就更耗时

哈希表 (Hash)

哈希表就可以通过数组和链表来构造,之前我们通过余数来实现哈希表.

优势：如果关键字已知则存取速度极快，插入块

缺点：删除慢，如果不知道关键则存取很慢，对存储空间使用不充分,会出现哈希冲突

树 (Tree)

优点：查找，插入，删除都快，树总是平衡的。类似的树对磁盘存储有用,不会出现哈希冲突

缺点：算法复杂

图(Graph)

图是另一种非线性数据结构。在图结构中，数据结点一般称为顶点，而边是顶点的有序偶对。如果两个顶点之间存在一条边，那么就表示这两个顶点具有相邻关系

栈 ( Stack)

先进后出的。在我们进行函数递归的时候，函数调用和返回的顺序，也是先进后出，所以，栈体现了递归的思想，可以实现基于递归的编程

队列 (Queue)

先进先出的数据结构，先进入队列的元素会优先得到处理.

在消息队列中,实现了生产者和消费者的松耦合，对消费者起到了保护作用，使它不容易被数据洪流冲垮。

编程语句

布尔表达式

体现了逻辑代数中逻辑和集合的概念

if(表达式) {函数体1} else {函数体2} // 若表达式为真，执行函数体1，否则执行函数体2。

循环语句

循环语句是迭代法（Newton's method）的体现

函数的调用

可以调用自己，也可以调用其他不同的函数。如果不断地调用自己，这就体现了递归的思想。

SQL 语言中的 Join 操作

Join 有多种类型，每种类型其实都对应了一种集合的操作。

基础算法

算法复杂度分析

四则运算、主次分明、齐头并进、排列组合、一图千言和时空互换。

这些法则体现了数学中的运算优先级、数量级、多元变量、图论等思想

总结

在平时学习编程的时候，你可以多从数学的角度出发，思考其背后的数学模型。

这样不仅有利于你对现有知识的融会贯通，还可以帮助你优化数据结构和算法

数学篇 - 朴素贝叶斯(Naive Bayes)分类算法(笔记)

Mon, 14 Sep 2020 00:00:00 +0000

朴素贝叶斯(Naive Bayes)

“用客观的新信息更新我们最初关于某个事物的信念后，我们就会得到一个新的、改进了的信念。” —- 数学家托马斯·贝叶斯(Thomas Bayes，1702～1761)

当你不能准确知悉一个事物的本质时，你可以依靠与事物特定本质相关的事件出现的多少去判断其本质属性的概率。

支持某项属性的事件发生得愈多，则该属性成立的可能性就愈大。

1774年，法国数学家皮埃尔-西蒙·拉普拉斯(Pierre-Simon Laplace，1749-1827)独立地再次发现了贝叶斯公式。

换种写法:

让计算机分辨水果

我们需要将水果的特征转化为计算机所能理解的数据。最常用的方式就是提取现实世界中的对象之属性，并将这些转化为数字。

比如：形状、外皮颜色、斑马纹理、重量、握感、口感。

将这些形容转化成数字,把重量由连续值转化成了离散值，这是因为朴素贝叶斯处理的都是离散值

扩大样本,仅仅 3 个水果还不足以构成朴素贝叶斯分类所需的训练样本

我们如何使用贝叶斯公式

用先验概率和条件概率估计后验概率。

假定数据对象的不同属性对其归类影响时是相互独立的。此时若数据对象 o 中同时出现属性 fi 与 fj，则对象 o 属于类别 c 的概率就是这样

朴素贝叶斯算法是假设各个特征之间相互独立,才可以两边相等,这也是朴素贝叶斯分类有朴素一词的来源

用 10 个水果的数据，来建立朴素贝叶斯模型

平滑（Smoothing）

会出现结果为 0 的情况，因此我们通常取一个比这个数据集里最小统计概率还要小的极小值，来代替“零概率”。比如，我们这里取 0.01。在填充训练数据中从来没有出现过的属性值的时候，我们就会使用这种技巧，我们给这种技巧起个名字就叫作平滑（Smoothing）。

例题:

假设我们有一个新的水果，它的形状是圆形，口感是甜的，那么根据朴素贝叶斯，它属于苹果、甜橙和西瓜的概率分别是多少呢？

apple 表示分类为苹果，shape-2 表示形状属性的值为 2（也就是圆形），taste-2 表示口感属性的值为 2。以此类推，我们还可计算该水果属于甜橙和西瓜的概率。

比较这三个数值，0.00198<0.00798<0.26934，所以计算机可以得出的结论，该水果属于甜橙的可能性是最大的

朴素贝叶斯分类主要包括这几个步骤

准备数据：针对水果分类这个案例，我们收集了若干水果的实例，并从水果的常见属性入手，将其转化为计算机所能理解的数据。这种数据也被称为训练样本。

数学篇 - 概率之联合概率、条件概率、边缘概率和贝叶斯法则(笔记)

Sun, 13 Sep 2020 00:00:00 +0000

公式符号解释: P(A|B).是B已知下的A的条件概率

联合概率（Joint Probability）

各种解释描述,便于理解:

联合概率指的是包含多个条件且所有条件同时成立的概率，记作P(X=a,Y=b)或P(a,b)，有的书上也习惯记作P(ab)，但是这种记法个人不太习惯，所以下文采用以逗号分隔的记法。一定要注意是所有条件同时成立！
两个以上事件的交集的概率

例子：从一副扑克牌中抽出一张红色的4的概率为P(红4) = 2/52 = 1/26。（一副扑克牌有52张牌，想抽到的是红心4和方块4）。

条件概率（Conditional Probability）

条件概率是已知某（些）事件已经发生的前提下，另一（些）事件发生的概率。已知事件B已经发生时，事件A发生的条件概率写作P(A|B)。
条件概率表示在条件Y=b成立的情况下，X=a的概率，记作P(X=a|Y=b)或P(a|b)，

例子：已知我们抽到了一张红色的牌，这张牌是4的概率为P(4|红) = 2/26 = 1/13 （一副扑克牌有52张牌，26张红色的，26张黑色的。现在因为我们已经抽到了一张红色的牌，我们知道我们抽取的范围是26张牌，因此第一个除数是26）。

联合概率与条件概率的区别

解释1:

P(AB) 联合概率：池子没变。

P(A|B) 条件概率：池子变小了！！！！！！

所以如果用条件概率来算联合概率的话：池子不能小，给我乘回去！！！！

P(A|B) x P(B) = P(AB)

解释2:

当我们想要知道抽到一张红色的4的扑克牌的概率（红色和4的联合概率）时，我想让你想象一下，把所有52张牌面朝下放置，然后随机选中一张。在这52张牌中，有2张是红色的，同时数字是4（红心4和方块4）。所以联合概率是2/52 = 1/26。

而当我们想要知道已知抽中的牌是红色的时候，抽中数字是4的牌的概率，即条件概率P(4|红)时，我想让你再想象一下有52张牌。不过，在随机抽取一张牌之前，你给所有扑克牌排了个序，选中了所有26张红色的牌。现在你把这26张牌面朝下放置，然后随机选择一张牌。同样，这些红色的牌中有两张数字为4，所以条件概率是2/26 = 1/13

公式描述

边缘概率

解释:

对于离散型随机变量，我们可以通过通过联合概率 P(x, y) 在 y 上求和，就可以得到 P(x)。对于连续型随机变量，我们可以通过联合概率 P(x, y) 在 y 上的积分(无限求和)，推导出概率 P(x)。这个时候，我们称 P(x) 为边缘概率。
边缘概率是与联合概率对应的，P(X=a)或P(Y=b)，这类仅与单个随机变量有关的概率称为边缘概率

贝叶斯定理 (Bayes’ Theorem）

英国数学家托马斯·贝叶斯（Thomas Bayes）在1763年发表的一篇论文中，首先提出了这个定理。而这篇论文是在他死后才由他的一位朋友发表出来的。在这篇论文中，他为了解决一个“逆向概率”问题，而提出了贝叶斯定理。

在贝叶斯写这篇文章之前，人们已经能够计算“正向概率”，比如杜蕾斯举办了一个抽奖，抽奖桶里有10个球，其中2个白球，8个黑球，抽到白球就算你中奖。你伸手进去随便摸出1颗球，摸出中奖球的概率是多大。根据频率概率的计算公式，你可以轻松的知道中奖的概率是2/10。

数学篇 - 概率之随机变量与分布(笔记)

Sat, 12 Sep 2020 00:00:00 +0000

随机变量（ random variable )

设随机试验的样本空间为S SS，X = X ( e ) X=X(e)X=X(e)是定义在样本空间S SS上的实值单值函数。称X = X ( e ) X=X(e)X=X(e)为随机变量。
本质是关于基本事件的函数，自变量是基本事件，因变量是函数值。

随机试验：

满足:

(1)可重复性:试验在相同条件下可重复进行；
(2)可知性:每次试验的可能结果不止一个，并且事先能明确试验所有可能的结果；
(3)不确定性:进行一次试验之前不能确定哪一个结果会出现，但必然会出现结果中的一个。

样本空间：

随机试验的所有基本结果组成的集合称为样本空间。样本空间的元素称为样本点或基本事件。即样本空间本质是一个集合，每一个元素都是一次随机试验的结果。

样本和随机变量:

数理统计里的样本具有二重性，即样本既可以看作是一组观测值又可以看作是随机变量。

第一，在抽样之前。无法确定样本的观测值，所以可以看成是随机变量。
第二，样本在抽取以后，经观测，样本抽有了具体的观测值，故又可以看成是一组确定的值。

概率分布

我们拿最简单的抛硬币事件来看。从理论上说来，出现正面和反面的概率都是 50%

使用代码来尝试


function flipCoin(){
 for (let index = 0; index < 10; index++) {
 // 对随机数四舍五入
 let randomNum = Math.round(Math.random())
 // 随机为1则为正面
 if(randomNum === 1){
 console.log('正面')
 }else{
 console.log('反面')
 }
 }

}

flipCoin()

尝试10次结果:

尝试1000次

统计的采样次数越多，越趋近于我们理论上的情况
概率分布描述的其实就是随机变量的概率规律。

离散分布模型

伯努利分布（Bernoulli Distribution）

这是单个随机变量的分布，而且这个变量的取值只有两个，0 或 1。

数学篇 - 树的深度优先搜索与广度优先搜索(笔记)

Fri, 11 Sep 2020 00:00:00 +0000

如何使用递归和栈实现深度优先搜索？

深度优先搜索的过程和递归调用在逻辑上是一致的。

写一个 TreeNode类代码,支持插入节点

class TreeNode {
 constructor(key){
 this.key = key;
 this.sons = []
 }
 insert(key){
 let node = new TreeNode(key);
 this.sons.push(node) 
 return node
 }
}
}

尝试创建一棵树

let str = 'hello word'
let str2 = 'abcdefg'

// 根节点
let root = new TreeNode("root")

createTree(str,root)

createTree(str2,root)

function createTree(strs,parent){
 if(strs.length !==0){
 let found = parent.sons.find((item)=>item.key === strs[0])
 if(found){
 let newStrs = strs.slice(1)
 createTree(newStrs,parent)
 }else{
 let node = parent.insert(strs[0])
 let newStrs = strs.slice(1)
 createTree(newStrs,node)
 }
 
 }else if(strs.length === 0){
 console.log('创建完毕',root)
 return root
 }
}

开始深度优先搜索

// 使用栈来实现深度优先搜索
// 大致思路是将所有的结点push到数组中,然后取最后一个处理,边删边处理.
// 直到没有为止
function dfsByStack(root) {
 let stack = []; 
 // 创建堆栈对象，js使用数组代替堆栈,其中每个元素都是TreeNode类型
 stack.push(root); // 初始化的时候，压入根结点
 while (stack.length) { // 只要栈里还有结点，就继续下去
 // 取出刚刚push进去的节点
 let node = stack.pop(); // 弹出栈顶的结点 拿到第一个进去的结点
 if (node.sons.length == 0) {
 // 已经到达叶子结点了，输出
 console.log('已经到达叶子结点',node.key)
 } else {
 // 非叶子结点，遍历它的每个子结点
 // 注意，这里使用了一个临时的栈stackTemp
 // 这样做是为了保持遍历的顺序，和递归遍历的顺序是一致的
 // 如果不要求一致，可以直接压入stack
 let stackTemp = []
 for (let index = 0; index < node.sons.length; index++) {
 const son = node.sons[index];
 console.log(son.key)
 stackTemp.push(son)
 }
 // 将各个节点放入栈中排序
 // 顺序反过来
 while (stackTemp.length) {
 stack.push(stackTemp.pop());
 }
 }
 }
 }

广度优先搜索（Breadth First Search)

广度优先搜索BFS（Breadth First Search）也称为宽度优先搜索，它是一种先生成的结点先扩展的策略。。

数学篇 - 树的概念(笔记)

Thu, 10 Sep 2020 00:00:00 +0000

树的基本概念

树是由结点或顶点和边组成的(可能是非线性的)且不存在着任何环的一种数据结构。没有结点的树称为空(null或empty)树。一棵非空的树包括一个根结点，还(很可能)有多个附加结点，所有结点构成一个多级分层结构。

树是一种特殊的图 (后续文章会提到图).

前缀树 prefix tree (字典树 - trie)

有向树

它的边是有方向的。而树是没有简单回路的连通图。

以结点 v 为出发点的边的数量，我们叫作 v 的出度。而以 v为终点的边之数量，称为 v 的入度。在上图中，结点 v2 的入度是 1，出度是 2。

回路和连通

高度与结点

二叉树

二叉树又分为：完美二叉树，完全二叉树，完满二叉树

完美二叉树(满二叉树)

除了叶子节点之外的每一个节点都有两个子节点,每一层(包括最后一层)都被完全填充

完全二叉树

完全二叉树从根结点到倒数第二层满足完美二叉树，最后一层可以不完全填充，其叶子结点都靠左对齐

完满二叉树

所有非叶子结点的度都是2 换句话说：只要你有孩子，你就必然是有两个孩子。

数学篇 - 动态规划,编辑距离的计算(笔记)

Wed, 09 Sep 2020 00:00:00 +0000

动态规划（Dynamic Programming）

很多人也简称DP,动态规划需要通过子问题的最优解，推导出最终问题的最优解，因此这种方法特别注重子问题之间的转移关系。我们通常把这些子问题之间的转移称为状态转移，并把用于刻画这些状态转移的表达式称为状态转移方程。

编辑距离 (莱文斯坦距离,又称Levenshtein距离)

俄罗斯科学家弗拉基米尔·莱文斯坦（毕业于莫斯科国立大学数学和力学系）在1965年提出，他因对纠错码理论和信息理论的贡献，于2006年获得IEEE Richard W. Hamming奖章。

定义：莱文斯坦距离也称编辑距离，指的是将文本 A 编辑成文本 B 需要的最少变动次数（每次只能增加、删除或修改一个字）。
用途：可以用来计算字符串的相似度，文本相似度, 拼写纠错和抄袭侦测等等
优点：准确率很高，编辑距离算出来很小，文本相似度肯定很高。
缺点：召回率不高，由于编辑距离与文本的顺序有关。在文字相同，文字顺序变化很大的情况下，相似度会变得很低。比如“正大光明”和“光明正大”其实是一个意思。但编辑距离是4，完全不匹配

计算解析：

首先定义的单字符编辑操作有且仅有三种：

插入（Insertion）

删除（Deletion）

替换（Substitution）

搜索推荐关键词的应用

计算 mouuse 与 mouse的编辑距离

表格推导

这里面求最小值的 min 函数里有三个参数，分别对应三种情况的编辑距离，分别是：替换、插入和删除字符。

代码实现


/**
 * @Description: 使用状态转移方程，计算两个字符串之间的编辑距离
 * @param a-第一个字符串，b-第二个字符串
 * @return let-两者之间的编辑距离
 */
function getStrDistance( a, b) {
 
 if (a == null || b == null) return -1;


 // 初始用于记录化状态转移的二维表
 let d = []
 for (let index = 0; index <= a.length; index++) {
 d.push(new Array(b.length))
 }


 // 如果i为0，且j大于等于0，那么d[i, j]为j
 for (let j = 0; j <= b.length; j++) {
 d[0][j] = j;
 }
 
 // 如果i大于等于0，且j为0，那么d[i, j]为i
 for (let i = 0; i <= a.length; i++) {
 d[i][0] = i;
 }

 // 当前二维数组的状态
 // [
 // [0, 1, 2, 3,4, 5, 6 ],
 // [ 1, <5 empty items> ],
 // [ 2, <5 empty items> ],
 // [ 3, <5 empty items> ],
 // [ 4, <5 empty items> ],
 // [ 5, <5 empty items> ],
 // [ 6, <5 empty items> ]
 // ]

 // 实现状态转移方程
 for (let i = 0; i < a.length; i++) {
 for (let j = 0; j < b.length; j++) {
 
 let r = 0;
 if (a.charAt(i) != b.charAt(j)) {
 r = 1;
 } 

 // 给所有的格志做应有的标记
 // 坐标加1是为了从第二个格子开始记录数据
 let first_append = d[i][j + 1] + 1;
 let second_append = d[i + 1][j] + 1;


 // 当前格志记录之前对比的差异
 let replace = d[i][j] + r;

 console.log(a.charAt(i) , b.charAt(j))
 console.log(first_append, second_append)

 // 求得first_append, second_append,replace三个最小的一个
 // 分别对应三种情况的编辑距离，分别是：替换、插入和删除字符
 let min = Math.min(first_append, second_append);
 min = Math.min(min, replace);

 // 所有的差异累积
 d[i + 1][j + 1] = min;
 
 }
 }

 // 当前二维数组的状态
 // [
 // [0, 1, 2, 3, 4, 5, 6],
 // [1, 0, 1, 2, 3, 4, 5],
 // [2, 1, 1, 2, 3, 4, 5],
 // [3, 2, 2, 2, 3, 4, 5],
 // [4, 3, 3, 2, 2, 3, 4],
 // [5, 4, 4, 3, 3, 2, 3],
 // [6, 5, 5, 4, 4, 3, 2]
 // ]
 // 输出最终的累积值,就是他们的编辑距离
 return d[a.length][b.length];
 }

尾巴

这一节有点懵,记录一下后续再查更多资料深入理解了. 例子理解的还行,一到应用就嗝屁.还是要多做题…

数学篇 - 组合,解决赛程规划与自然语言处理(笔记)

Tue, 08 Sep 2020 00:00:00 +0000

组合

组合（combination）是一个数学名词。一般地，从n个不同的元素中，任取m（m≤n）个元素为一组，叫作从n个不同元素中取出m个元素的一个组合。我们把有关求组合的个数的问题叫作组合问题。

对于所有 m 取值的组合之全集合，我们可以叫作全组合（All Combination）。例如对于集合{1, 2, 3}而言，全组合就是{空集, {1}, {2}, {3}, {1, 2}, {1,3} {2, 3}, {1, 2, 3}}。

如何安排世界杯赛程

想让全部的 32 支球队都和其他球队进行一次主客场的比赛.

自己不可能和自己比赛，不可重复的排列中，主场球队有 32 种选择，而客场球队有 31 种选择。那么一共要进行多少场比赛呢？很简单，就是 32x31=992 场！

在实际情况中,赛程设计并没有这样做.

这就是为什么要将所有 32 支队伍分成 8 个小组先进行小组赛的原因。一旦分成小组，每个小组的赛事就是 (4x3)/2=6 场。所有小组赛就是 6x8=48 场。

加上在 16 强阶段开始采取淘汰制，两两淘汰，所以需要 8+4+2+2=16 场淘汰赛（最后一次加 2 是因为还有 3、4 名的决赛），那么整个世界杯决赛阶段就是 48+16=64 场比赛。

这两两配对比赛的场次，我是如何计算出来的？让我引出今天的概念，组合（Combination）。

让计算机来组合队伍

/*
 * @Description: 使用函数的递归（嵌套）调用，找出所有可能的队伍组合
 * @param teams-目前还剩多少队伍没有参与组合，result-保存当前已经组合的队伍
 * @return void
 */
 let teams = ["t1", "t2", "t3"];
 combine(teams,[],2)


 function combine(teams,result,m) {
 // 挑选完了m个元素，输出结果
 if (result.length == m) {
 console.log(result)
 return;
 }

 for (let i = 0; i < teams.length; i++) {
 // 从剩下的队伍中，选择一队，加入结果
 let newResult = [].concat(result)
 newResult.push(teams[i]);

 // 只考虑当前选择之后的所有队伍
 let rest_teams = teams.slice(i + 1, teams.length)

 // 递归调用，对于剩余的队伍继续生成组合
 combine(rest_teams, newResult, m);
 }
 }

有没有发现,这个算法跟上一篇的密码爆破思想非常接近.

数学篇 - 排列,解决田忌赛马与密码爆破问题(笔记)

Mon, 07 Sep 2020 00:00:00 +0000

田忌赛马的故事

田忌是齐国有名的将领，他常常和齐王赛马，可是总是败下阵来，心中非常不悦。孙膑想帮田忌一把。他把这些马分为上、中、下三等。他让田忌用自己的下等马来应战齐王的上等马，用上等马应战齐王的中等马，用中等马应战齐王的下等马。三场比赛结束后，田忌只输了第一场，赢了后面两场，最终赢得与齐王的整场比赛。

排列概念

从 n 个不同的元素中取出 m（1≤m≤n）个不同的元素，按照一定的顺序排成一列，这个过程就叫排列（Permutation）。

当 m=n 这种特殊情况出现的时候,这就是全排列（All Permutation）

田忌赛马的排列图

最终排列的数量

排列总数的计算 3x2x1=6

对于 n 个元素的全排列，所有可能的排列数量就是 nx(n-1)x(n-2)x…x2x1，也就是 n!
对于 n 个元素里取出 m (0<m≤n) 个元素的不重复排列数量是 nx(n-1)x(n-2)x…x(n - m + 1)，也就是 n!/(n-m)!

使用代码计算田忌赛马的各种情况

// 齐王的马与速度
let q_horses_time = {
 q1: 1,
 q2: 2,
 q3: 3
}

// 田忌的马与速度
let t_horses_time = {
 t1: 1.5,
 t2: 2.5,
 t3: 3.5
}

// 他们马的名字
let q_horses = ["q1", "q2", "q3"]

let t_horses = ["t1", "t2", "t3"]


/**
 * @Description: 使用函数的递归（嵌套）调用，找出所有可能的马匹出战顺序
 * @param horses-目前还剩多少马没有出战，result-保存当前已经出战的马匹及顺序
 * @return void
 */

function permutate(horses, result) {
 // 所有马匹都已经出战，判断哪方获胜，输出结果
 if (horses.length == 0) {
 // console.log(result);
 compare(result, q_horses);
 return;
 }

 for (let i = 0; i < horses.length; i++) {
 // 从剩下的未出战马匹中，选择一匹，加入结果
 let new_result = [].concat(result)
 new_result.push(horses[i])

 // 将已选择的马匹从未出战的列表中移出
 let rest_horses = [].concat(horses);
 rest_horses.splice(i, 1)

 // 递归调用，对于剩余的马匹继续生成排列
 // 相当于自己与自己嵌套for循环,打乱顺序
 permutate(rest_horses, new_result);
 }
}


function compare(t, q) {
 // 田忌的赛马时间
 let t_won_cnt = 0;
 for (let i = 0; i < t.length; i++) {
 if (t_horses_time[t[i]] < q_horses_time[q[i]]) t_won_cnt++;
 }

 // 时间对比,本次是三局两胜
 if (t_won_cnt > (t.length / 2)) {
 console.log("田忌获胜！")
 } else {
 console.log("齐王获胜！")
 }
}

// 开始计算
permutate(t_horses, [])

田忌获胜的概率是 1/6

数学篇 - 递归,分而治之，从归并排序到MapReduce(笔记)

Sun, 06 Sep 2020 00:00:00 +0000

黄申老师的标题实在是太好了,找不到更好的标题来描述今天学习的内容.啊哈哈~

归并排序中的分治思想

问题: 对一堆杂乱无序的数字，按照从小到大或者从大到小的规则进行排序

有序情况

尝试合并有序数组{1, 2, 5, 8}和{3, 4, 6}的过程。

乱序情况

尝试把问题不断简化，也就是把数列不断简化，一直简化到只剩 1 个数。1 个数本身就是有序的，

把将长度为 n 的数列，每次简化为长度为 n-1 的数列，直至长度为 1。不过，这样的处理没有并行性，要进行 n-1 次的归并操作，但是效率会很低.

引入分而治之（Divide and Conquer）的思想

分而治之，我们通常简称为分治。它的思想就是，将一个复杂的问题，分解成两个甚至多个规模相同或类似的子问题，然后对这些子问题再进一步细分，直到最后的子问题变得很简单，很容易就能被求解出来，这样这个复杂的问题就求解出来了。

一个数组的排序

两个数组排序后合并

最重要的思想在于如何拆解问题

归并排序的不同阶段

使用递归的方式来实现已上思路

 // 递归拆分数组
 function merge_sort(to_sort) {
 // 非法数据,直接返回[]
 if (!to_sort) return [];
 
 // 如果分解到只剩一个数，返回该数
 if (to_sort.length == 1) return to_sort;
 
 // 将数组分解成左右两半
 let mid = to_sort.length / 2;

 // js中的splice会操作原数组内容,
 // 前半段取出来之后,后半段直接取原数组的变量应用就好了
 let left = [].concat(to_sort.splice(0,mid))
 let right = [].concat(to_sort)

 // 嵌套调用，对两半分别进行排序
 left = merge_sort(left);
 right = merge_sort(right);
 
 // 合并排序后的两半
 let merged = merge(left, right);
 
 return merged;
 }


// 数组合并排序
function merge(a, b) {
 if (!a) a = [];
 if (!b) b = [];
 
 // 后续会降结果push到这个数组中来
 let merged_one = []
 
 // a,b数组的index
 let ai = 0;
 let bi = 0;
 
 // 轮流从两个数组中取出较小的值，放入合并后的数组中
 while (ai < a.length && bi < b.length) {
 if (a[ai] <= b[bi]) {
 merged_one.push(a[ai])
 ai ++;
 } else {
 merged_one.push(b[bi])
 bi ++;
 }
 }
 
 // 将某个数组内剩余的数字放入合并后的数组中
 if (ai < a.length) {
 for (let i = ai; i < a.length; i++) {
 merged_one.push(a[i])
 }
 } else {
 for (let i = bi; i < b.length; i++) {
 merged_one.push(b[i])
 }
 }
 
 return merged_one;
 }


let arr = [2,5,3,1,4,6,7,8,9]

console.log('排序结果',merge_sort(arr))
// 排序结果 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

分而治之思想在分布式系统中

当需要排序的数组很大（比如达到 1024GB 的时候），我们没法把这些数据都塞入一台普通机器的内存里。该怎么办呢？有一个办法，我们可以把这个超级大的数据集，分解为多个更小的数据集（比如 16GB 或者更小），然后分配到多台机器，让它们并行地处理。

数学篇 - 递归,复杂问题分解(笔记)

Sat, 05 Sep 2020 00:00:00 +0000

递归与循环

理论上所有递归能做到的循环都能实现.

递归和循环其实都是迭代法的实现，而且在某些场合下，它们的实现是可以相互转化的。

为什么要使用递归

既然递归的函数值返回过程和基于循环的迭代法一致，我们直接用迭代法不就好了，为什么还要用递归的数学思想和编程方法呢？

如何在限定总和的情况下，求所有可能的加和方式？

假设有四种面额的钱币，1 元、2 元、5 元和 10 元，要奖励别人10元，那可以奖赏 1 张 10 元，或者 10 张 1 元，或者 5 张 1 元外加 1 张 5 元等等。最终会有多少种方案?

如何把复杂的问题简单化？

// 面额
var rewards = [1, 2, 5, 10];


 /**
 * @Description: 使用函数的递归（嵌套）调用，找出所有可能的奖赏组合
 * @param totalReward-奖赏总金额，result-保存当前的解
 * @return void
 */
function get(totalReward,result){

 // 如果所有奖励全部给完
 if (totalReward == 0) { 
 // 拿到复合条件的结果,输出
 console.log(result); 
 return; 
 }

 // 如果奖励的钱超过当初设想的奖励(钱给多了),
 // 则不是我们想要的结果
 if (totalReward < 0) { return; }

 //根据不同面额触发,让他们开始递归
 for (let i = 0; i < rewards.length; i++) {
 let newResult = [].concat(result) // 由于有4种情况，需要clone当前的解并传入被调用的函数
 newResult.push(rewards[i]); // 记录当前的选择

 // totalReward - rewards[i]相当于还有多少钱没有给
 // 交给下一个递归去解决该给多少钱的问题
 get(totalReward - rewards[i], newResult); // 剩下的问题，留给嵌套调用去解决
 }
}

// 给出10块钱的不同方案
get(10,[])

如果是循环解决这样的问题,是不是相对没有这样简洁?

数学篇 - 数学归纳法,给计算机注入灵魂(笔记)

Fri, 04 Sep 2020 00:00:00 +0000

什么是数学归纳法？

在棋盘上放麦粒的规则是，第一格放一粒，第二格放两粒，以此类推，每一小格内都比前一小格多一倍的麦子，直至放满 64 个格子。你发现第 1 格到第 8 格的麦子数分别是：1、2、4、8、16、32、64、128。

找规律

对于类似这种无穷数列的问题，我们通常可以采用数学归纳法（Mathematical Induction）来证明

数学归纳法步骤

证明基本情况（通常是 n=1 的时候）是否成立；
假设 n=k−1 成立，再证明 n=k 也是成立的（k 为任意大于 1 的自然数）。

和使用迭代法的计算相比，数学归纳法最大的特点就在于“归纳”二字。它已经总结出了规律。只要我们能够证明这个规律是正确的，就没有必要进行逐步的推算，可以节省很多时间和资源。

代码示例


 let grid = 63;
 console.time('归纳法耗时')
 console.log(`舍罕王给了这么多粒: ${ Math.pow(2, grid) - 1 }`)
 console.timeEnd('归纳法耗时')

递归调用的代码和数学归纳法的逻辑是一致的,但是数学归纳法实现的运行时间几乎为 0

数学归纳法需要我们能做出合理的命题假设，然后才能进行证明。

数学篇 - 迭代法,让每次计算都更接近真像(笔记)

Thu, 03 Sep 2020 00:00:00 +0000

什么是迭代法（Iterative Method）？

就是不断地用旧的变量值，递推计算新的变量值。

小故事:

古印度国王舍罕酷爱下棋，他打算重赏国际象棋的发明人宰相西萨·班·达依尔。这位聪明的大臣指着象棋盘对国王说：“陛下，我不要别的赏赐，请您在这张棋盘的第一个小格内放入一粒麦子，在第二个小格内放入两粒，第三小格内放入给四粒，以此类推，每一小格内都比前一小格加一倍的麦子，直至放满 64 个格子，然后将棋盘上所有的麦粒都赏给您的仆人我吧！”国王自以为小事一桩，痛快地答应了。可是，当开始放麦粒之后，国王发现，还没放到第二十格，一袋麦子已经空了。随着，一袋又一袋的麦子被放入棋盘的格子里，国王很快看出来，即便拿来全印度的粮食，也兑现不了对达依尔的诺言。

通过一个函数来计算最后麦子的数量.

用计算机语言其实特别适合


function getNumberOfWheat(grid){
numberOfWheatInGrid = 0; // 当前格子里麦粒的数量 
let numberOfWheatInGrid = 1; // 第一个格子里麦粒的数量 

// 先放一粒米
sum += numberOfWheatInGrid; 

for (let i = 2; i <= grid; i ++) { 
 numberOfWheatInGrid *= 2;
 // 当前格子里麦粒的数量是前一格的2倍 
 sum += numberOfWheatInGrid; 
 // 累计麦粒总数 
 } 
 return sum;
}

// 计算64格的数量
console.log(getNumberOfWheat(64))

具体应用？

求数值的精确或者近似解。典型的方法包括二分法（Bisection method）和牛顿迭代法（Newton’s method）。
在一定范围内查找目标值。典型的方法包括二分查找。
机器学习算法中的迭代。相关的算法或者模型有很多，比如 K- 均值算法（K-means clustering）、PageRank 的马尔科夫链（Markov chain）、梯度下降法（Gradient descent）等等。迭代法之所以在机器学习中有广泛的应用，是因为很多时候机器学习的过程，就是根据已知的数据和一定的假设，求一个局部最优解。而迭代法可以帮助学习算法逐步搜索，直至发现这种解。

实践二分法求方程的精确或者近似解

题: 找 10 的平方根

思路: 我们需要先看 1 到 10 的中间数值，也就是 11/2=5.5。5.5 的平方是大于 10 的，所以我们要一个更小的数值，就看 5.5 和 1 之间的 3.25。由于 3.25 的平方也是大于 10 的，继续查看 3.25 和 1 之间的数值，也就是 2.125。这时，2.125 的平方小于 10 了，所以看 2.125 和 3.25 之间的值，一直继续下去，直到发现某个数的平方正好是 10

数学篇 - 余数与哈希函数(笔记)

Wed, 02 Sep 2020 00:00:00 +0000

余数

例1:

今天是星期三，你想知道 50 天之后是星期几，那你可以这样算，拿 50 除以 7（因为一个星期有 7 天），然后余 1，最后在今天的基础上加一天，这样你就能知道 50 天之后是星期四了

例2:

如果你要展示 1123 条数据，每页 10 条，那该怎么计算总共的页数呢？我想你肯定是拿 1123 除以 10，最后得到商是 112，余数是 3，所以你的总页数就是 112+1=113，而最后的余数就是多出来，凑不够一页的数据。

余数总是在一个固定的范围内

同余定理

数学上，两个整数除以同一个整数，若得相同余数，则二整数同余

如何理解

100 天里，所有星期一的这些天都是同余的，所有星期二的这些天就是同余的，同理，星期三、星期四等等这些天也都是同余的

哈希 Hash

将任意长度的输入，通过哈希算法，压缩为某一固定长度的输出

想想星期的概念:

将数据取余

ps. size指的是有限空间的数目而不是大小

在这个公式中，x 表示等待被转换的数值，而 size 表示有限存储空间的数目，mod 表示取余操作。通过余数，你就能将任何数值，转换为有限范围内的一个数值，然后根据这个新的数值，来确定将数据存放在何处。

假设有两条记录，它们的记录标号分别是 1 和 101。我们把这些模 100 之后余数都是 1 的，存放到第 1 个可用空间里。以此类推，将余数为 2 的 2、102、202 等，存放到第 2 个可用空间，将 100、200、300 等存放到第 100 个可用空间里。

再复杂一点

数学篇 - 计算机的源头二进制(笔记)

Tue, 01 Sep 2020 00:00:00 +0000

计算机起源

计算机的起源是数学中的二进制计数法

什么是二进制计数法？

日常的十进制

阿拉伯数字由从 0 到 9 这样 10 个计数符号组成，并采取进位制法,每10进一位,2871为例

其中 ^ 表示幂或次方运算。十进制的数位（千位、百位、十位等）全部都是 10^n 的形式。需要特别注意的是，任何非 0 数字的 0 次方均为 1。在这个新的表示式里，10 被称为十进制计数法的基数.

二进制

我们将基数改为2,就可以理解二进制的展示了.例如110101.

二进制的数位就是 2^n 的形式

其他进制

我们只要基于基数的改动,就可以使用任一进制来展示我们的数字.

JavaScript 进制转换


parseInt(num,8); //八进制转十进制
parseInt(num,16); //十六进制转十进制 
parseInt(num).toString(8) //十进制转八进制 
parseInt(num).toString(16) //十进制转十六进制 
parseInt(num,2).toString(8) //二进制转八进制 
parseInt(num,2).toString(16) //二进制转十六进制
parseInt(num,8).toString(2) //八进制转二进制 
parseInt(num,8).toString(16) //八进制转十六进制 
parseInt(num,16).toString(2) //十六进制转二进制 
parseInt(num,16).toString(8) //十六进制转八进制

计算机为什么使用二进制？

组成计算机系统的逻辑电路通常只有两个状态，即开关的接通与断开。

二进制的位操作

向左移位

二进制 110101 向左移一位，就是在末尾添加一位 0，因此 110101 就变成了 1101010

如果将 1101010 换算为十进制，就是 106，你有没有发现，106 正好是 53 的 2 倍

二进制左移一位，其实就是将数字翻倍。

数字溢出

所谓数字溢出，就是二进制数的位数超过了系统所指定的位数。目前主流的系统都支持至少 32 位的整型数字

Puppeteer在工作中是如何伪装自己的(爬虫与反爬虫)

Sat, 29 Aug 2020 20:32:05 +0000

为了更好保护我们的数据与程序安全.

今天就介绍一下,如何检测访问我们的web程序是否为无头浏览器, 以及他们的一些反检测的方法.

Webdriver检测

一般来说,如果是无头浏览器模式下, navigator.webdriver 会返回 true.

检测方式

最简单的检测方式

if (navigator.webdriver) {
 // 针对无头浏览器的操作
}

使用defineProperty删除webdriver后如何检测

如果对方使用以下方式删除了webdriver属性,其实还是有办法检测的

 Object.defineProperty(navigator, 'webdriver', {
 get: () => undefined,
 })

应对方案

以下方式,还是可以检测出来

webdriver in navigator

navigator.hasOwnProperty("webdriver")

绕过方法

直接删掉webdriver属性,这是我目前验证成功的方法. 目前其他网上找到的方法已经无效.

await page.evaluateOnNewDocument(() => {
 const newProto = navigator.__proto__;
 delete newProto.webdriver;
 navigator.__proto__ = newProto;
 });

chrome属性检测

检测方式

在无头浏览器模式下,全局对象下的chrome对象是没有 runtime属性的

if (!window.chrome || !window.chrome.runtime) {
 // 无头浏览器模式...
}

绕过方法

所以绕过方法也很简单,我们只需要伪造一个

window.navigator.chrome = {
 runtime: {}
 };

如果是Puppeteer 我们跟上面一样,只要提前运行一下上面的代码就好了.

await page.evaluateOnNewDocument(() => {
 window.navigator.chrome = {
 runtime: {}
 };
 });

尾巴

其他网络上的方法我都尝试过,可以成功的我都放在了这里. 因为浏览器跟反爬虫方式时时刻刻都会更新,所以可能当你看到这篇文章的时候. 有的方式已经不能用了,但是核心点还是要善于观察力与对比. 所有的形式都可以有伪装与绕过的方法.大致思路都跟上面提到的差不多.

Taro跨端开发之让Taro UI支持React Native

Thu, 27 Aug 2020 22:17:36 +0000

Taro UI 不支持RN的窘境

Taro UI 文档上很早就说明会有可能支持rn了,但是快一年多了,因为taro ui团队人力的问题一直没有兼容到rn.

业务紧迫,我们等不到那一天了.自己动手丰衣足食.

Taro 传统组件打包在RN上的问题

一般来说,组件库打完包之后 dist/index.js文件会是这样的.

根据运行时的环境变量区分是否要引入哪一个组件库.

if (process.env.TARO_ENV === 'weapp') {
 module.exports = require('./weapp/ui')
 module.exports.default = module.exports
 } else if (process.env.TARO_ENV === 'h5') {
 module.exports = require('./h5/ui')
 module.exports.default = module.exports
 } else {
 module.exports = require('./weapp/ui')
 module.exports.default = module.exports
 }

理想模式下,只要加入一个rn的环境判断,就可以做到rn组件库的引入了.

if (process.env.TARO_ENV === 'weapp') {
 module.exports = require('./weapp/ui')
 module.exports.default = module.exports
 } else if (process.env.TARO_ENV === 'h5') {
 module.exports = require('./h5/ui')
 module.exports.default = module.exports
 } else if (process.env.TARO_ENV === 'rn') {
 // 理想模式,只需要加这一段
 module.exports = require('./rn/ui')
 module.exports.default = module.exports
 } else {
 module.exports = require('./weapp/ui')
 module.exports.default = module.exports
 }

可是现实不是这样的,rn如果引入组件库的索引文件,是dist/index.js,他会提前把所有端的代码全部预执行一遍.

代码还没有真正运行,就因为其他端的代码不兼容,直接报错了. 所以这样硬核的引入方法是不可行的.

rn组件库代码与其他端代码完全隔离

ui.js文件的改动

在src下边有一个ui.js文件,大致内容是这样的:

import Taro from '@tarojs/taro'
import './style/index.scss'
export { default as AActionSheet } from './components/action-sheet'
export { default as AActionSheetItem } from './components/action-sheet/body/item'
export { default as AText } from './components/text'
export { default as AToast } from './components/toast'
export { default as AButton } from './components/button'

// 其他组件...

为了更好的在原来组件库上做rn的兼容,利用taro可以根据文件后缀名区分端的特性就排上用场了. 需要新建一个ui.rn.js

Taro跨端开发之多业务模块管理 React Native篇(终篇)

Tue, 25 Aug 2020 22:17:36 +0000

React Native 热更新方案

rn的业务越来越庞大,同时协同的团队越来越多. rn的动态化就必须提上日程了. 对于rn热更新,首当其冲的问题就是分包.

rn的基础库很大,再加上我们依赖了很多的三方库.这些代码就必须在分包的时候单独剥离出来. 业务包让他比较纯粹的只有业务代码. 这样就可以保证业务包的体积比较小,保证热更新时候的速度.

使用metro分包

React Native 提供的 metro 自带分包功能。metro我们本来就一直在用,只要在metro打包的时候,提供相应的打包规则. 就可以实现rn的分包了.

示例: ios打包

node ./node_modules/react-native/local-cli/cli.js bundle --platform ios --dev false --entry-file rn入口文件.js --bundle-output ./xxx/ --assets-dest ./xxx/ --config /{你的绝对路径}/你的metro配置文件.js

metro 关键api介绍

我们分包需要用的选项主要是两个：

createModuleIdFactory：这个函数传入要打包的 module 文件的绝对路径，返回这个 module 在打包的时候生成的 id。
processModuleFilter：这个函数传入 module 信息，返回一个 boolean 值，false 则表示这个文件不打入当前的包。

主工程分包

之前我们有提到过我们有一个项目是主工程,里面没有任何的业务代码.只有一些代码运行需要的所有依赖.

我们需要将所有的依赖全部收集起来,当业务模块打包的时候,发现本地有这个依赖就可以使用 processModuleFilter方法排除掉.

因为我们的主工程与业务项目的依赖版本都是高度统一的. 所以我们node_modules下面的依赖包路径都是完全一致的.

Taro跨端开发之依赖管理

主工程的metro配置文件示例:

function createModuleIdFactory() {
 return path => {
 // 在这里我们拿到依赖的文件路径,
 // 我们需要在这个函数块中,将路径以收集并且将这些数据生成文件
 // 部署到我们内网的服务器中
 // 当业务模块需要打包的时候,是否要将代码打进包中,将以这个文件为依据
 return path;
 };
}

module.exports = {
 serializer: {
 createModuleIdFactory:createModuleIdFactory
 }
};

主工程入口文件示例:

Taro跨端开发之多业务模块管理 React Native篇(中)

Sun, 23 Aug 2020 22:17:36 +0000

实现一个简单的模块管理工具,解决npm拉取业务模块慢的问题

使用npm拉取git仓库,速度其实还是可以接受的. 主要慢的地方在于 postinstall的时候需要在npm拉取git仓库的时候,需要重新构建项目代码.还有一点就是业务模块也有依赖,npm install的时候也需要重新拉取相同的依赖.

这两个步骤其实是可以省略的,解决的办法就是可以实现一个简单的模块管理工具来替代npm加载业务模块的处理.

创建一个配置文件

module.exports = {
 "Module1": {
 "url": "http://xxx1.git",
 "moduleName": [
 "模块名称"
 ],
 "branch": "develop",
 "type": "taro"
 },
 "Module2": {
 "url": "http://xxx2.git",
 "moduleName": [
 "模块名称"
 ],
 "branch": "develop",
 "type": "taro"
 }
}

因为每一个项目都会用到这一个文件,把这个文件放到服务器上. 在业务模块初始化的时候,自动拉取解析这个文件.再使用nodejs拉取相应的git仓库.

拉取git仓库

使用download-git-repo拉取git仓库的代码放到node_modules目录下. 这样在项目中,我就可以引用普通npm一样引入这个仓库的代码了.

这是download-git-repo的地址与使用方法 https://www.npmjs.com/package/download-git-repo

模拟npm生命周期

代码拉下来之后,还需要用postinstall来构建业务代码, 所以需要使用nodejs遍历以下业务模块的目录,读取目录下的每一个packages.json.

如果有npm钩子的,就执行一下里面的script.

大致示例代码如下:

// 示例代码,仅供参考
const spawn = require('cross-spawn');
const fse = require('fs-extra');


const packageData = fse.readJsonSync('./packages.json');

if (packageData.scripts.preinstall) {
 spawn.sync('npm',['run','preinstall']);
}

if (packageData.scripts.postinstall) {
 spawn.sync('npm',['run','postinstall']);
}

并发执行业务模块的npm钩子

在npm执行postinstall的时候,并不是全部一股脑的全部执行.

使用 yarn 安装依赖的时候,同时最多可以4个模块执行(npm install 没有具体研究). 所以构建业务模块的时候,总是会出现一个一个等的情况.

Taro跨端开发之多业务模块管理 React Native篇(上)

Fri, 21 Aug 2020 22:17:36 +0000

原生RN项目与Taro如何共存?

我们团队一开始就有实践原生React Native的项目,很长一段时间,

所有的业务模块都是在一个项目里面开发维护,时间久了这个项目就变成了一个巨无霸项目.

再加上后来引进了基于Taro开发的rn项目,为了保证原生与Taro的RN共存,

不管是原生rn项目还是taro项目的package.json文件的main对外导出的索引文件格式都是一致的.

我们使用以下方案来维护我们的代码.

使用npm来管理我们的业务模块

RN业务的主工程

这是我最初实践的方案,首先我们创建一个项目为RN的主工程.

里面没有任何的业务代码,只有在根目录下有一个index.js的业务索引文件.

它大概是这样的:


import { AppRegistry} from 'react-native';
import Module1 from 'Module1';
import Module2 from 'Module2';
import Module3 from 'Module3';
AppRegistry.registerComponent('Module1', () => Module1);
AppRegistry.registerComponent('Module2', () => Module2);
AppRegistry.registerComponent('Module3', () => Module3);

之前的一篇文章我已经提到,我们所有的模块依赖都是统一的,并且版本锁死.

有兴趣的可以点击查看:

Taro跨端开发之依赖管理

所以我的主工程的依赖与业务模块的依赖是保持一致的.

使用NPM管理业务模块

我们会把所有的业务模块当成npm来管理,因为npm有很多的生命周期钩子使用.

在统一了npm script 命令之后,很容易统一管理他们.

当然这些业务模块我们不会把他发布到npm服务器上,因为业务代码会频繁变动,如果每一次提交都要上传到npm服务器,自然会添加开发人员的代码管理成本(发布npm包很烦的)

所以我们使用 npm + git 地址来拉取我们的业务模块.

例如:

主工程的package.json


{
"name": "base",
"version": "0.0.6",
"scripts": {
"build":"构建rn的相关操作"
},
"dependencies": {
"公共依赖包": "1.0.0",
"Module1": "http://xxx.com/webfront/Module1.git",
"Module2": "http://xxx.com/webfront/Module2.git",
"Module3": "http://xxx.com/webfront/Module3.git",
}
}

业务模块的package.json

业务模块添加了postinstall,在使用npm拉取业务模块成功之后,业务模块会在 node_modules 中构建自己的项目,提供主工程的index.js使用

{
"name": "buz",
"version": "0.0.1",
"main": "main.js", // main字段要指向rn的索引文件
"scripts": {
"build":"构建rn的相关操作",
"postinstall":"npm run build"
},
"dependencies": {
"公共依赖包": "1.0.0"
}
}

统一对外输出的main.js文件


"use strict";

// 根据端的环境变量判断是否对外输出什么文件

if (process.env.TARO_ENV === 'weapp' || process.env.TARO_ENV === 'h5') {
module.exports = require('./dist/index');
module.exports.default = module.exports
} else {
// taro系工程,标准对外输出
Object.defineProperty(exports, "__esModule", {
value: true
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _app = _interopRequireDefault(require("./rn_temp/app"));
exports.APP = _app.default;
}

业务模块之间相互调试

业务与业务之间肯定会有相互联调的情况,以上的方案业务模块只能独立运行自己的代码,当我们想要跳转到其他RN页面的时候,那就不行了.

Taro跨端开发之依赖管理问题

Thu, 20 Aug 2020 22:17:36 +0000

目前我们通过Taro触达的端已经有:

微信小程序
QQ小程序
百度小程序
React Native
H5
快应用

为了快速的让业务可以触达到各端,我们每一个业务模块都是独立的.

他们根据业务需要,分别兼容到不同的端,等到构建的时候再将其进行组装成为一个完整的项目.

为了满足以上需要,并且可以灵活开发.所以每一个业务模块都是可以独立开发,独立运行的,可以不依赖主工程.

目前来说项目之间的关系已经比较类似微前端了.

因为大部分端(除了React Native) 都不能做到热更新,所以相对微前端架构而言小程序们做不到独立部署.

关于Taro + React Native部分,后面会有专门的文章跟大家介绍我们是怎么玩的.

今天就跟大家介绍一下,多业务,多团队,多端的代码管理中我们遇到的第一个问题: 依赖管理问题

所有项目依赖统一管理

因为业务模块很多,我们项目工程的差异必须保持高度统一,其中包括依赖.

核心依赖集中管理

现在我们团队开发的跨端模块已经有几十个.为了方便管理,

我将所有的依赖封装成了一个npm包,里面没有任何的业务代码,只有稳定的依赖.

所有的项目都会引入这个核心的依赖,以保证所有项目可以稳定运行.

非核心依赖版本管理问题

如果是非核心依赖,我们将使用我们自研的cli工具强行修改package.json里面的版本号.

持续集成的过程中,所有的跨端项目都会通过这个cli工具在npm install执行之前修改我们的项目配置.其中就包括了我们的依赖.

我们修改过cli工具之后,所有的跨端项目都会更新到最新的依赖配置.

个别项目特殊处理办法

所有项目的依赖全部统一之后,总会有一些特殊原因个别项目的依赖会有一点区别.

这里就必须要提到package.json的 resolutions属性.

resolutions 字段用于解析选择性版本，可以通过此功能自定义依赖版本。

这样npm就会将多版本共存的版本,强行指定某一版本,满足个别项目的特定需求.

如果我要所有的 B 强行指定2.0

使用方法如下:

// package.json 
// 这样B这个依赖库,就被强行指定版本了
{
 "resolutions": {
 "B": "2.0.0"
 }
}

resolutions的解释,你可以在这里查看更多:

https://classic.yarnpkg.com/zh-Hans/docs/selective-version-resolutions

当然你也可以使用这个工具,将依赖强制指定版本:

https://www.npmjs.com/package/npm-force-resolutions

第三方依赖稳定性问题

我们在开发周期比较长的前端项目的时候,必然会遇到依赖管理的问题.

我们在开发项目的时候,我们用了大量的三方库.这些三方的依赖库时不时的会更新自己的代码.

第三方依赖库的代码更新会很容易造成代码运行的不稳定,

比如昨天还跑的好好的项目,另一位刚刚接手的同学重新安装依赖之后项目就完全跑不起来了.

或者自己机器跑的好好的代码,扔到打包机上重新打包之后就完全跑不起来.

因为三方依赖库用的太多,很多时候并不能很快速的定位到项目为什么跑不起来.

特别是开发RN项目的时候,一个依赖更新的问题可能会定位一个大半天才能找到罪魁祸首(曾经的我为了这种事情浪费了大量的青春).

Taro跨端开发之跨端开发新时代的思考与举措

Tue, 16 Jun 2020 22:17:36 +0000

新时代

跨端框架的出现,前端的浏览器兼容过渡到了客户端平台兼容的新时代.

对于初创公司而言,这种框架可以快速试错与降低人力与时间成本.

为什么选择Taro

并不是说Taro方案有多优秀,就当前时间节点看来目前的所有跨端框架都还处于完善阶段.最完善的端可能就是小程序与H5了.

但是对于有着对跨端开发有着强烈需求的公司来说,这些还远远不够.

只是第一眼看上去Taro比较适合我们的现有业务.后续各种端的数量增大,如何从容对待.

目前也还是未知数.就团队而言,前端输出突然猛增,其他配套设施没跟上等于随时翻车.目前我们面临的最大问题就是测试资源的问题.

对于跨端技术而言,目前相对完善且符合公司业务的技术框架可以选择

Taro
uni-app

一个类React, 一个类Vue.

在框架层面,两种技术框架提供着非常接近的多端兼容方案.

最大的不同是React 与 Vue的区别.当然,uni-app 提供了小程序容器方案.

taro这边目前还没有.

就目前对Taro来看,直接实现Taro to uni小程序理论上是可以实现的.

在Taro next版本中,已经支持对vue语法, 那这样后续是否会出现多端框架to多端框架的局面呢?

回到问题本身,为什么我们选择Taro呢,

团队组建之初使用React技术栈
我们在RN端有了一定的探索
Taro支持快应用

就历史包袱来看,选择Taro过渡成本是相对较小的.

目标

一处代码,多端运行.
减少维护成本
多端快速上线

如果就快速上线来看,人力成本在短期内看,是非常可观的.但是一旦项目变大,团队变得也越大的时候.

自动化测试,而项目工程化没有跟上,那就直接天堂变地狱.

处境与心态

目前使用taro开发单端,基本上没有太大的问题.目前遇到的问题,都有办法可以解决的.

唯一占用开发工作量的是,如何处理代码在多端中的兼容问题.

所以处理兼容问题的方法与技巧还有多端开发的意识就尤为重要了.

还有一个就是开发者的心态问题,因为要开发多端,多端差异还是会有的.

在开发多端的同时,也要学习多端的开发方式.一来二去的,很容易形态奔溃.

但是如果跨越了这一时期,了解了各端的特点,后续面对一些问题都会游刃有余了~

适配最佳路径

经过各种实践,我们认为一下开发的兼容路径是相对简单的.

在适配的过程中,主要还是样式的问题比较多.如果反向适配,会极其痛苦,

因为你之前写的任意一行代码,都可能是后面的bug.

可能在后续的发展中,这种类似短板问题会越来越不明显.

但是就现在来看,合适的适配路径,是你必须要关注的重要问题.

RN –> 快应用 –> 小程序 –> 其他小程序 –> H5

脑洞 & 展望

就目前跨端框架发展趋势的话会不会发生以下事件?

一款跨端框架直接兼容另一款框架,直接吃掉所有端?
开源一款类小程序的容器,直接替代react Native 与 weex?
多端测试框架(一套测试用例,测试所有端)会不会应运而生?

尾巴

后续的这段时间,我会把以下问题与团队实践整理出文章供大家思考.

Switch XCI转NSP工具 - 4NXCI下载

Sun, 02 Feb 2020 19:02:36 +0000

4NXCI 是将 XCI 文件转换为 NSP 的工具

目前只支持windows,其他系统不支持

Github地址:

https://github.com/The-4n/4NXCI

下载地址

https://github.com/The-4n/4NXCI/releases

使用方法

GUI工具

命令用不习惯的可以下载GUI的版本,文件命名大致为4nxci-v4.03_GUI.zip

命令行工具

.\4nxci.exe [options...] <path_to_file.xci> 
 
Options: 
-k, --keyset 设置keyset文件路径, 默认为 ./keys.dat 
-h, --help 显示帮助信息
-t, --tempdir 设置临时文件夹
-o, --outdir 设置导出文件夹
-r, --rename 设置导出的nsp文件的文件名
--keepncaid 保持当前ncas ID

关于keyset 文件

拷贝以下代码放到一个txt文件中,然后重命名为 keys.dat 使用GUI或者命令行工具导入就可以了

master_key_00 = C2CAAFF089B9AED55694876055271C7D
master_key_01 = 54E1B8E999C2FD16CD07B66109ACAAA6
master_key_02 = 4F6B10D33072AF2F250562BFF06B6DA3
master_key_03 = 84E04EC20B9373818C540829CF147F3D
master_key_04 = CFA2176790A53FF74974BFF2AF180921
master_key_05 = C1DBEDCEBF0DD6956079E506CFA1AF6E
master_key_06 = 0AA90E6330CDC12D819B3254D11A4E1E
header_key = AEAAB1CA08ADF9BEF12991F369E3C567D6881E4E4A6A47A51F6E4877062D542D
aes_kek_generation_source = 4D870986C45D20722FBA1053DA92E8A9
aes_key_generation_source = 89615EE05C31B6805FE58F3DA24F7AA8
key_area_key_application_source = 7F59971E629F36A13098066F2144C30D
key_area_key_ocean_source = 327D36085AD1758DAB4E6FBAA555D882
key_area_key_system_source = 8745F1BBA6BE79647D048BA67B5FDA4A
titlekek_source = 1EDC7B3B60E6B4D878B81715985E629B
aes_kek_generation_source = 4d870986c45d20722fba1053da92e8a9
aes_key_generation_source = 89615ee05c31b6805fe58f3da24f7aa8
bis_kek_source = 34c1a0c48258f8b4fa9e5e6adafc7e4f
eticket_rsa_kek = 19c8b441d318802bad63a5beda283a84
eticket_rsa_kek_source = dba451124ca0a9836814f5ed95e3125b
eticket_rsa_kekek_source = 466e57b74a447f02f321cde58f2f5535
header_kek_source = 1f12913a4acbf00d4cde3af6d523882a
header_key = aeaab1ca08adf9bef12991f369e3c567d6881e4e4a6a47a51f6e4877062d542d
header_key_source = 5a3ed84fdec0d82631f7e25d197bf5d01c9b7bfaf628183d71f64d73f150b9d2
key_area_key_application_00 = ef979e289a132c23d39c4ec5a0bba969
key_area_key_application_01 = cdedbab97b69729073dfb2440bff2c13
key_area_key_application_02 = 75716ed3b524a01dfe21456ce26c7270
key_area_key_application_03 = f428306544cf5707c25eaa8bc0583fd1
key_area_key_application_04 = 798844ec099eb6a04b26c7c728a35a4d
key_area_key_application_05 = a57c6eecc5410ada22712eb3ccbf45f1
key_area_key_application_06 = 2a60f6c4275df1770651d5891b8e73ec
key_area_key_application_07 = 32221bd6ed19b938bec06b9d36ed9e51
key_area_key_application_08 = fb20aa9e3dbf67350e86479eb431a0b3
key_area_key_application_09 = ce8d5fa79e220d5f48470e9f21be018b
key_area_key_application_source = 7f59971e629f36a13098066f2144c30d
key_area_key_ocean_00 = b33813e4c9c4399c75fabc673ab4947b
key_area_key_ocean_01 = c54166efa8c9c0f6511fa8b580191677
key_area_key_ocean_02 = 3061ce73461e0b0409d6a33da85843c8
key_area_key_ocean_03 = 06f170025a64921c849df168e74d37f2
key_area_key_ocean_04 = dc857fd6dc1c6213076ec7b902ec5bb6
key_area_key_ocean_05 = 131d76b70bd8a60036d8218c15cb610f
key_area_key_ocean_06 = 17d565492ba819b0c19bed1b4297b659
key_area_key_ocean_07 = 37255186f7678324bf2b2d773ea2c412
key_area_key_ocean_08 = 4115c119b7bd8522ad63c831b6c816a6
key_area_key_ocean_09 = 792bfc652870cca7491d1685384be147
key_area_key_ocean_source = 327d36085ad1758dab4e6fbaa555d882
key_area_key_system_00 = 6dd02aa15b440d6231236b6677de86bc
key_area_key_system_01 = 4ab155e7f29a292037fd147592770b12
key_area_key_system_02 = b7a74adeaf89c2a198c327bdff322d7d
key_area_key_system_03 = d5aab1acd23a8aec284a316df859d377
key_area_key_system_04 = 9b44b45b37de9d14754b1d22c2ca742c
key_area_key_system_05 = 0012e957530d3dc7af34fbbe6fd44559
key_area_key_system_06 = 01744e3b0818445cd54ee9f89da43192
key_area_key_system_07 = d0d30e46f5695b875f11522c375c5a80
key_area_key_system_08 = bd06cb1b86bd5c433667470a09eb63de
key_area_key_system_09 = e19f788f658eda8bbf34a1dd2a9503a9
key_area_key_system_source = 8745f1bba6be79647d048ba67b5fda4a
keyblob_00 = f759024f8199101dddc1ef91e6eecf37e24b95ac9272f7ae441d5d8060c843a48322d21cdd06d4fc958c68d3800eb4db939ffbec930177f77d136144ff615aa8835e811bb958deda218f8486b5a10f531b30cb9d269645ac9fc25c53fc80525e56bd3602988a9fcf06bbf99ca910ad6530791d512c9d57e17abf49220de6419bf4eca1685c1e4df77f19db7b44a985ca
keyblob_01 = bd27264ae07e979756411d0c66e679e3c50851f3e902d9c2cd1a438b948159a517ec1566c10570326ea2697ee62da46f14bb5d581bfc06fd0c9387ea33d2d4dc63e7809ba90f03dd2c7112ffbfa548951b9b8c688b5e4f2951d24a73da29c668154a5d4838dba71ee068ace83fe720e8c2a495c596f73525dc3c05994b40ad27f8c60322f75cd548b821af9162e16f76
keyblob_02 = a3d4a8e153b8e6ae6e6aef3e8f219cb4b7790f47856accc76268f9afa99a1ff8b1a72f63d1f99f480a3c1532078bb59abdd25203cfb12a38b33e9ba6a09afb6f24283b3ba76a0161230a73669ddf5493c2b7919d094fd795b484794854f71e4f4c672245d7770e29397722444d111b4229cdbf35707b70634ea8f140766e884cc580cb1e2d9aa9866ffef920010fc409
keyblob_03 = 1558f525ae8c5be9243fb6d8a8b0a8ee0e886a59035668740a936619b7a5c83e821198b171d18e51445054df68688e45703b936818a827d8e540dd6bef2e11ec9ddc6cfe5fc736dd769b9f6e0a23a62e2e5f49e86143646a04ec3a23f828373a336a5c224a91f8a0c6c6a7b5844dd6415804209f83c943aeca9cfd856db6bd4ec32009c8cb268ed053052c9237dfd8bc
keyblob_04 = 9fbeb1957fc1629e08b753a9086d6e01ffb4f11466b7417e3fa7f5f1efb754406704fd75afaf91a408a0b524c1fc80d36c2046fa4757412efe4c11e382f72e8a10d90ed580017d9deb87af2549b6b02661af48ff94f6072c0fef7fc2833b8bdae503898e2e927ac0663e8b6391dd4f1d685313935e2c48ece7d177c88bc9c883ede36c3677495784b838d7265c6ba7a1
keyblob_05 = 94a92da1d73c2b3e165c891ced5607fc6628ca2a0654f3fbc05711c063377c6e9c96a9d0192e530dd510e4fd41aa62ef4213c5f6e059e7e21db098a9b22d1e6c29bee148aaef15c52549d9165de96e85b0d029ecdc5843e2f32cb18be707eec61909cf3385d45bc2a4c8d76e9bfad5a40c4b92dcb982aa50d474897ac9ebb5351a7015dcc277a08f1214ad41384d7941
keyblob_key_00 = 4f5a86ec7c47b6b8663e0bbc199dcafa
keyblob_key_01 = 746c6b5e8f62b3f418ade81ddcde7619
keyblob_key_02 = 1b24583f656650fc214bf2b59d8de0fd
keyblob_key_03 = 71a7924e6c03baac7f2b99fac10c6201
keyblob_key_04 = 8f91661e8fc6ff81930ddea915ced49d
keyblob_key_05 = e1e960a7edf905dcd3b125d8377f7600
keyblob_key_source_00 = df206f594454efdc7074483b0ded9fd3
keyblob_key_source_01 = 0c25615d684ceb421c2379ea822512ac
keyblob_key_source_02 = 337685ee884aae0ac28afd7d63c0433b
keyblob_key_source_03 = 2d1f4880edeced3e3cf248b5657df7be
keyblob_key_source_04 = bb5a01f988aff5fc6cff079e133c3980
keyblob_key_source_05 = d8cce1266a353fcc20f32d3b517de9c0
keyblob_mac_key_00 = c98dd8afff06306bc72495e8c89eed4a
keyblob_mac_key_01 = 240d461913b37f6bc74027001581542c
keyblob_mac_key_02 = f4915b454f3a03661955cf4579d59876
keyblob_mac_key_03 = 323a27241392a8cad2b3c87086b211d2
keyblob_mac_key_04 = 5620355b2d504e4af5bd5cde9875b035
keyblob_mac_key_05 = c08712b1e1ff64f9e66fb6298ba27d6b
keyblob_mac_key_source = 59c7fb6fbe9bbe87656b15c0537336a5
master_kek_00 = f759024f8199101dddc1ef91e6eecf37
master_kek_01 = bd27264ae07e979756411d0c66e679e3
master_kek_02 = a3d4a8e153b8e6ae6e6aef3e8f219cb4
master_kek_03 = 1558f525ae8c5be9243fb6d8a8b0a8ee
master_kek_04 = 9fbeb1957fc1629e08b753a9086d6e01
master_kek_05 = 94a92da1d73c2b3e165c891ced5607fc
master_kek_source_06 = 374b772959b4043081f6e58c6d36179a
master_kek_source_07 = 9a3ea9abfd56461c9bf6487f5cfa095c
master_kek_source_08 = dedce339308816f8ae97adec642d4141
master_kek_source_09 = 1aec11822b32387a2bedba01477e3b67
master_key_00 = c2caaff089b9aed55694876055271c7d
master_key_01 = 54e1b8e999c2fd16cd07b66109acaaa6
master_key_02 = 4f6b10d33072af2f250562bff06b6da3
master_key_03 = 84e04ec20b9373818c540829cf147f3d
master_key_04 = cfa2176790a53ff74974bff2af180921
master_key_05 = c1dbedcebf0dd6956079e506cfa1af6e
master_key_06 = 0aa90e6330cdc12d819b3254d11a4e1e
master_key_07 = 929f86fbfe4ef7732892bf3462511b0e
master_key_08 = 23cfb792c3cb50cd715da0f84880c877
master_key_09 = 75c93b716255319b8e03e14c19dea64e
master_key_10 = 73767484C73088F629B0EEB605F64AA6
master_key_source = d8a2410ac6c59001c61d6a267c513f3c
package1_key_00 = f4eca1685c1e4df77f19db7b44a985ca
package1_key_01 = f8c60322f75cd548b821af9162e16f76
package1_key_02 = c580cb1e2d9aa9866ffef920010fc409
package1_key_03 = c32009c8cb268ed053052c9237dfd8bc
package1_key_04 = ede36c3677495784b838d7265c6ba7a1
package1_key_05 = 1a7015dcc277a08f1214ad41384d7941
package2_key_00 = a35a19cb14404b2f4460d343d178638d
package2_key_01 = a0dd1eacd438610c85a191f02c1db8a8
package2_key_02 = 7e5ba2aafd57d47a85fd4a57f2076679
package2_key_03 = bf03e9889fa18f0d7a55e8e9f684323d
package2_key_04 = 09df6e361e28eb9c96c9fa0bfc897179
package2_key_05 = 444b1a4f9035178b9b1fe262462acb8e
package2_key_06 = 442cd9c21cfb8914587dc12e8e7ed608
package2_key_07 = 70c821e7d6716feb124acbac09f7b863
package2_key_08 = 8accebcc3d15a328a48365503f8369b6
package2_key_09 = f562a7c6c42e3d4d3d13ffd504d77346
package2_key_source = fb8b6a9c7900c849efd24d854d30a0c7
per_console_key_source = 4f025f0eb66d110edc327d4186c2f478
retail_specific_aes_key_source = e2d6b87a119cb880e822888a46fba195
rsa_oaep_kek_generation_source = a8ca938434127fda82cc1aa5e807b112
rsa_private_kek_generation_source = ef2cb61a56729b9157c38b9316784ddd
save_mac_kek_source = d89c236ec9124e43c82b038743f9cf1b
save_mac_key = 536b210e185bccae8e36c622891bf7f6
save_mac_key_source = e4cd3d4ad50f742845a487e5a063ea1f
sd_card_kek_source = 88358d9c629ba1a00147dbe0621b5432
sd_card_nca_key_source = 5841a284935b56278b8e1fc518e99f2b67c793f0f24fded075495dca006d99c2
sd_card_save_key_source = 2449b722726703a81965e6e3ea582fdd9a951517b16e8f7f1f68263152ea296a
sd_seed = fd324d2dcf64f196f78b83f66786f71d
secure_boot_key = 9add3555ee6479259837e9e4eb42286d
ssl_rsa_kek = b011100660d1dccbad1b1b733afa9f95
ssl_rsa_kek_source_x = 7f5bb0847b25aa67fac84be23d7b6903
ssl_rsa_kek_source_y = 9a383bf431d0bd8132534ba964397de3
titlekek_00 = 62a24d6e6d0d0e0abf3554d259be3dc9
titlekek_01 = 8821f642176969b1a18021d2665c0111
titlekek_02 = 5d15b9b95a5739a0ac9b20f600283962
titlekek_03 = 1b3f63bcb67d4b06da5badc7d89acce1
titlekek_04 = e45c1789a69c7afbbf1a1e61f2499459
titlekek_05 = ddc67f7189f4527a37b519cb051eee21
titlekek_06 = b1532b9d38ab036068f074c0d78706ac
titlekek_07 = 81dc1b1783df268789a6a0edbf058343
titlekek_08 = 47dfe4bf0eeda88b17136b8005ab08ea
titlekek_09 = adaa785d90e1a9c182ac07bc276bf600
titlekek_source = 1edc7b3b60e6b4d878b81715985e629b
tsec_key = 06d4c3db4a0c6692ffab54b2c70b6935
aes_kek_generation_source = 4d870986c45d20722fba1053da92e8a9
aes_key_generation_source = 89615ee05c31b6805fe58f3da24f7aa8
bis_kek_source = 34c1a0c48258f8b4fa9e5e6adafc7e4f
eticket_rsa_kek = 19c8b441d318802bad63a5beda283a84
eticket_rsa_kek_source = dba451124ca0a9836814f5ed95e3125b
eticket_rsa_kekek_source = 466e57b74a447f02f321cde58f2f5535
header_kek_source = 1f12913a4acbf00d4cde3af6d523882a
header_key = aeaab1ca08adf9bef12991f369e3c567d6881e4e4a6a47a51f6e4877062d542d
header_key_source = 5a3ed84fdec0d82631f7e25d197bf5d01c9b7bfaf628183d71f64d73f150b9d2
key_area_key_application_00 = ef979e289a132c23d39c4ec5a0bba969
key_area_key_application_01 = cdedbab97b69729073dfb2440bff2c13
key_area_key_application_02 = 75716ed3b524a01dfe21456ce26c7270
key_area_key_application_03 = f428306544cf5707c25eaa8bc0583fd1
key_area_key_application_04 = 798844ec099eb6a04b26c7c728a35a4d
key_area_key_application_05 = a57c6eecc5410ada22712eb3ccbf45f1
key_area_key_application_06 = 2a60f6c4275df1770651d5891b8e73ec
key_area_key_application_07 = 32221bd6ed19b938bec06b9d36ed9e51
key_area_key_application_08 = fb20aa9e3dbf67350e86479eb431a0b3
key_area_key_application_09 = ce8d5fa79e220d5f48470e9f21be018b
key_area_key_application_source = 7f59971e629f36a13098066f2144c30d
key_area_key_ocean_00 = b33813e4c9c4399c75fabc673ab4947b
key_area_key_ocean_01 = c54166efa8c9c0f6511fa8b580191677
key_area_key_ocean_02 = 3061ce73461e0b0409d6a33da85843c8
key_area_key_ocean_03 = 06f170025a64921c849df168e74d37f2
key_area_key_ocean_04 = dc857fd6dc1c6213076ec7b902ec5bb6
key_area_key_ocean_05 = 131d76b70bd8a60036d8218c15cb610f
key_area_key_ocean_06 = 17d565492ba819b0c19bed1b4297b659
key_area_key_ocean_07 = 37255186f7678324bf2b2d773ea2c412
key_area_key_ocean_08 = 4115c119b7bd8522ad63c831b6c816a6
key_area_key_ocean_09 = 792bfc652870cca7491d1685384be147
key_area_key_ocean_source = 327d36085ad1758dab4e6fbaa555d882
key_area_key_system_00 = 6dd02aa15b440d6231236b6677de86bc
key_area_key_system_01 = 4ab155e7f29a292037fd147592770b12
key_area_key_system_02 = b7a74adeaf89c2a198c327bdff322d7d
key_area_key_system_03 = d5aab1acd23a8aec284a316df859d377
key_area_key_system_04 = 9b44b45b37de9d14754b1d22c2ca742c
key_area_key_system_05 = 0012e957530d3dc7af34fbbe6fd44559
key_area_key_system_06 = 01744e3b0818445cd54ee9f89da43192
key_area_key_system_07 = d0d30e46f5695b875f11522c375c5a80
key_area_key_system_08 = bd06cb1b86bd5c433667470a09eb63de
key_area_key_system_09 = e19f788f658eda8bbf34a1dd2a9503a9
key_area_key_system_source = 8745f1bba6be79647d048ba67b5fda4a
keyblob_00 = f759024f8199101dddc1ef91e6eecf37e24b95ac9272f7ae441d5d8060c843a48322d21cdd06d4fc958c68d3800eb4db939ffbec930177f77d136144ff615aa8835e811bb958deda218f8486b5a10f531b30cb9d269645ac9fc25c53fc80525e56bd3602988a9fcf06bbf99ca910ad6530791d512c9d57e17abf49220de6419bf4eca1685c1e4df77f19db7b44a985ca
keyblob_01 = bd27264ae07e979756411d0c66e679e3c50851f3e902d9c2cd1a438b948159a517ec1566c10570326ea2697ee62da46f14bb5d581bfc06fd0c9387ea33d2d4dc63e7809ba90f03dd2c7112ffbfa548951b9b8c688b5e4f2951d24a73da29c668154a5d4838dba71ee068ace83fe720e8c2a495c596f73525dc3c05994b40ad27f8c60322f75cd548b821af9162e16f76
keyblob_02 = a3d4a8e153b8e6ae6e6aef3e8f219cb4b7790f47856accc76268f9afa99a1ff8b1a72f63d1f99f480a3c1532078bb59abdd25203cfb12a38b33e9ba6a09afb6f24283b3ba76a0161230a73669ddf5493c2b7919d094fd795b484794854f71e4f4c672245d7770e29397722444d111b4229cdbf35707b70634ea8f140766e884cc580cb1e2d9aa9866ffef920010fc409
keyblob_03 = 1558f525ae8c5be9243fb6d8a8b0a8ee0e886a59035668740a936619b7a5c83e821198b171d18e51445054df68688e45703b936818a827d8e540dd6bef2e11ec9ddc6cfe5fc736dd769b9f6e0a23a62e2e5f49e86143646a04ec3a23f828373a336a5c224a91f8a0c6c6a7b5844dd6415804209f83c943aeca9cfd856db6bd4ec32009c8cb268ed053052c9237dfd8bc
keyblob_04 = 9fbeb1957fc1629e08b753a9086d6e01ffb4f11466b7417e3fa7f5f1efb754406704fd75afaf91a408a0b524c1fc80d36c2046fa4757412efe4c11e382f72e8a10d90ed580017d9deb87af2549b6b02661af48ff94f6072c0fef7fc2833b8bdae503898e2e927ac0663e8b6391dd4f1d685313935e2c48ece7d177c88bc9c883ede36c3677495784b838d7265c6ba7a1
keyblob_05 = 94a92da1d73c2b3e165c891ced5607fc6628ca2a0654f3fbc05711c063377c6e9c96a9d0192e530dd510e4fd41aa62ef4213c5f6e059e7e21db098a9b22d1e6c29bee148aaef15c52549d9165de96e85b0d029ecdc5843e2f32cb18be707eec61909cf3385d45bc2a4c8d76e9bfad5a40c4b92dcb982aa50d474897ac9ebb5351a7015dcc277a08f1214ad41384d7941
keyblob_key_00 = 4f5a86ec7c47b6b8663e0bbc199dcafa
keyblob_key_01 = 746c6b5e8f62b3f418ade81ddcde7619
keyblob_key_02 = 1b24583f656650fc214bf2b59d8de0fd
keyblob_key_03 = 71a7924e6c03baac7f2b99fac10c6201
keyblob_key_04 = 8f91661e8fc6ff81930ddea915ced49d
keyblob_key_05 = e1e960a7edf905dcd3b125d8377f7600
keyblob_key_source_00 = df206f594454efdc7074483b0ded9fd3
keyblob_key_source_01 = 0c25615d684ceb421c2379ea822512ac
keyblob_key_source_02 = 337685ee884aae0ac28afd7d63c0433b
keyblob_key_source_03 = 2d1f4880edeced3e3cf248b5657df7be
keyblob_key_source_04 = bb5a01f988aff5fc6cff079e133c3980
keyblob_key_source_05 = d8cce1266a353fcc20f32d3b517de9c0
keyblob_mac_key_00 = c98dd8afff06306bc72495e8c89eed4a
keyblob_mac_key_01 = 240d461913b37f6bc74027001581542c
keyblob_mac_key_02 = f4915b454f3a03661955cf4579d59876
keyblob_mac_key_03 = 323a27241392a8cad2b3c87086b211d2
keyblob_mac_key_04 = 5620355b2d504e4af5bd5cde9875b035
keyblob_mac_key_05 = c08712b1e1ff64f9e66fb6298ba27d6b
keyblob_mac_key_source = 59c7fb6fbe9bbe87656b15c0537336a5
master_kek_00 = f759024f8199101dddc1ef91e6eecf37
master_kek_01 = bd27264ae07e979756411d0c66e679e3
master_kek_02 = a3d4a8e153b8e6ae6e6aef3e8f219cb4
master_kek_03 = 1558f525ae8c5be9243fb6d8a8b0a8ee
master_kek_04 = 9fbeb1957fc1629e08b753a9086d6e01
master_kek_05 = 94a92da1d73c2b3e165c891ced5607fc
master_kek_source_06 = 374b772959b4043081f6e58c6d36179a
master_kek_source_07 = 9a3ea9abfd56461c9bf6487f5cfa095c
master_kek_source_08 = dedce339308816f8ae97adec642d4141
master_kek_source_09 = 1aec11822b32387a2bedba01477e3b67
master_key_00 = c2caaff089b9aed55694876055271c7d
master_key_01 = 54e1b8e999c2fd16cd07b66109acaaa6
master_key_02 = 4f6b10d33072af2f250562bff06b6da3
master_key_03 = 84e04ec20b9373818c540829cf147f3d
master_key_04 = cfa2176790a53ff74974bff2af180921
master_key_05 = c1dbedcebf0dd6956079e506cfa1af6e
master_key_06 = 0aa90e6330cdc12d819b3254d11a4e1e
master_key_07 = 929f86fbfe4ef7732892bf3462511b0e
master_key_08 = 23cfb792c3cb50cd715da0f84880c877
master_key_09 = 75c93b716255319b8e03e14c19dea64e
master_key_0a = 73767484C73088F629B0EEB605F64AA6
master_key_source = d8a2410ac6c59001c61d6a267c513f3c
package1_key_00 = f4eca1685c1e4df77f19db7b44a985ca
package1_key_01 = f8c60322f75cd548b821af9162e16f76
package1_key_02 = c580cb1e2d9aa9866ffef920010fc409
package1_key_03 = c32009c8cb268ed053052c9237dfd8bc
package1_key_04 = ede36c3677495784b838d7265c6ba7a1
package1_key_05 = 1a7015dcc277a08f1214ad41384d7941
package2_key_00 = a35a19cb14404b2f4460d343d178638d
package2_key_01 = a0dd1eacd438610c85a191f02c1db8a8
package2_key_02 = 7e5ba2aafd57d47a85fd4a57f2076679
package2_key_03 = bf03e9889fa18f0d7a55e8e9f684323d
package2_key_04 = 09df6e361e28eb9c96c9fa0bfc897179
package2_key_05 = 444b1a4f9035178b9b1fe262462acb8e
package2_key_06 = 442cd9c21cfb8914587dc12e8e7ed608
package2_key_07 = 70c821e7d6716feb124acbac09f7b863
package2_key_08 = 8accebcc3d15a328a48365503f8369b6
package2_key_09 = f562a7c6c42e3d4d3d13ffd504d77346
package2_key_source = fb8b6a9c7900c849efd24d854d30a0c7
per_console_key_source = 4f025f0eb66d110edc327d4186c2f478
retail_specific_aes_key_source = e2d6b87a119cb880e822888a46fba195
rsa_oaep_kek_generation_source = a8ca938434127fda82cc1aa5e807b112
rsa_private_kek_generation_source = ef2cb61a56729b9157c38b9316784ddd
save_mac_kek_source = d89c236ec9124e43c82b038743f9cf1b
save_mac_key = 536b210e185bccae8e36c622891bf7f6
save_mac_key_source = e4cd3d4ad50f742845a487e5a063ea1f
sd_card_kek_source = 88358d9c629ba1a00147dbe0621b5432
sd_card_nca_key_source = 5841a284935b56278b8e1fc518e99f2b67c793f0f24fded075495dca006d99c2
sd_card_save_key_source = 2449b722726703a81965e6e3ea582fdd9a951517b16e8f7f1f68263152ea296a
sd_seed = fd324d2dcf64f196f78b83f66786f71d
secure_boot_key = 9add3555ee6479259837e9e4eb42286d
ssl_rsa_kek = b011100660d1dccbad1b1b733afa9f95
ssl_rsa_kek_source_x = 7f5bb0847b25aa67fac84be23d7b6903
ssl_rsa_kek_source_y = 9a383bf431d0bd8132534ba964397de3
titlekek_00 = 62a24d6e6d0d0e0abf3554d259be3dc9
titlekek_01 = 8821f642176969b1a18021d2665c0111
titlekek_02 = 5d15b9b95a5739a0ac9b20f600283962
titlekek_03 = 1b3f63bcb67d4b06da5badc7d89acce1
titlekek_04 = e45c1789a69c7afbbf1a1e61f2499459
titlekek_05 = ddc67f7189f4527a37b519cb051eee21
titlekek_06 = b1532b9d38ab036068f074c0d78706ac
titlekek_07 = 81dc1b1783df268789a6a0edbf058343
titlekek_08 = 47dfe4bf0eeda88b17136b8005ab08ea
titlekek_09 = adaa785d90e1a9c182ac07bc276bf600
titlekek_source = 1edc7b3b60e6b4d878b81715985e629b
tsec_key = 06d4c3db4a0c6692ffab54b2c70b6935
xci_header_key = 01C58FE7002D135AB29A3F69339574B1

2019 年终有感

Sun, 29 Dec 2019 21:29:00 +0000

今年可谓是充实的一年,进了新公司.一切的都变了,职场非常顺利.也很感谢自己的同事这一年里对我的帮助与启发.

相对2018,是一个飞跃性的成长.越想越觉得应该早点来到这样的公司,充分展示自己.

在新公司里把之前所有关于前端自动化的设想全部在公司全面落地. 微前端架构也在公司的后台管理系统上得到了真正的应用. 并且在基于Taro多端同构的应用上取得了一定的成绩.

我的团队

在公司做了几件漂亮事之后,我重新又开始带团队,这一次跟以往完全不一样. 大家磨合的很好,彻彻底底的感受到了合作的魅力. 最终大家的成绩都得到了公司的认可,都拿到了满意的绩效.

接下来的三个月,我会推动可支持多端的组件库建设,一款真正可以支持 H5,微信小程序,RN的组件库. 大家对此都表示非常的积极,要是做成了,我觉得这是一个非常了不起的事情. 希望今年的第一季度可以有一个很好的结果.

关于博客

今年可能更新博客不是特别频繁,最主要的原因还是忙(懒). 本来想好好介绍一下我们的自动化方案,还有一些多端同构方面的探索与沉淀的. 最终还是没有写出来.2020年的话,还是要把这些沉淀与思考输出出来最好.

关于技术

今年的技术,都是对去年设想真正的落地,包括微前端,自动化,多端同构方面. 但是最近我一直问自己,如何做到1个人干十个人的活. 一直问一直问,就总会有很多想法冒出来,不管是低代码也好,D2C也好都是非常好的提效工具.

近期团队开始对Taro的D2C开始探索,初步算了一下.编写UI代码的最大可以提升12倍. 用D2C的方式去构建多端应用的话,很多的样式问题可以机械化的解决,这样大家说不定都可以直接忽略样式在多端之间的差异. 并且基于设计稿,可以一分钟写一个页面.这对团队来说是一个质的飞跃. 这是一个非常好的方向.

关于2020

该干的还是得继续干,有的同事还是在痴迷自动化方面得事情.

我感觉就现在得团队来说,工程自动化再花很多心思去做的话,对于现在的收益是在递减的.

因为现有的自动化架构已经完全满足现在的开发需要了.我想我们更多的是在其他地方下功夫.来做到团队效率的整体提升.

2020年上半年,会跟设计部门合作一个对外网站,主要分享公司的技术与设计的沉淀.到时候就请大家拭目以待吧.

持续集成 - 代码质量扫描

Sun, 15 Dec 2019 23:15:00 +0000

为了方便管理公司的代码质量,让代码质量扫描跟持续集成结合到一起是重要的一步. 目前公司比较年轻,但是在短短的一年时间里,也有了接近300个前端项目.

这么多的前端项目,我们如何保证代码质量就成了一个很重要的事情.

代码项目太多,codereview是必要的.但是人肉codereview不能保证效率. 因为个人水平的差距,与公司规范的熟悉程度.不能保证所有项目的规范一致性. 还有一些潜在的bug也有可能会被漏掉.

我们公司是基于Gitlab CI/CD,所以以下说明是基于Gitlab的方式.但是思路的运用是相通的,有需要的人可以借鉴思路.

修改.gitlab-ci.yml

为了方便每一个项目接入,我们对配置做了很小的改动. 并且每一个项目的配置的修改都是一样的,就是为了方便无脑的复制粘贴.

我们还做了一个cli工具,里面包含代码扫描的一切功能.安装在runner的机器上.

image: node:11.10.0

stages:
 - codereview # 添加一个codereview的stage

codereview:
 stage: codereview
 script:
 - cli codereview # cli工具触发codereview
 tags:
 - fe #runner的tag,根据自己的情况自行修改

cli 触发代码扫描做什么?

执行SonarQube扫描

关于SonarQube的安装,网上有很多教程请自行搜索.

在执行runner的机器上安装 sonar-scanner

npm i sonar-scanner -g

利用自研的cli工具,在项目根目录生成sonar 扫描的配置文件.


// 获取gitlab 注入ci的环境变量
const {
 CI_PROJECT_NAME,
 CI_PROJECT_ID,
} = process.env;

// 基于gitlab的项目id生成一个sonar的projectKey
const projectBuffer = Buffer.from('sonar' + CI_PROJECT_ID);
const projectKey = projectBuffer.toString('hex');

// 检测代码目录
// 一般来说 src都是前端项目业务代码的目录
//因为公司的nodejs项目是基于egg框架的,也有可能是app
const existsSrc = fs.existsSync(`${process.cwd()}/src/`);



// sonar配置文件模板
const sonarProject = `
sonar.projectKey=${projectKey} 

sonar.projectName=${CI_PROJECT_NAME}

sonar.projectVersion=1.0

sonar.sources=${existsSrc ? 'src' : 'app'}

sonar.binaries=bin

sonar.host.url=http://xxx.你部署sonar的服务地址.com 

sonar.login=admin

sonar.password=admin

sonar.sourceEncoding=UTF-8
`;
 // 生成一个路径
 const sPath = path.resolve(process.cwd(), 'sonar-project.properties');

 // 写入sonar的配置
 fs.writeFileSync(sPath, sonarProject);

 // 执行sonar的代码扫描,并且上传代码质量报告
 shelljs.exec('sonar-scanner');

执行jscpd分析代码重复率

尽管sonar已经提供了代码重复率的报告,但是并不是很容易看懂,到底代码哪里重复. 我们使用jscpd来分析项目的重复率.并且输出友好的报告.

FREE-TO-SHOT - 马

Sat, 07 Dec 2019 21:32:05 +0000

摄于 2019年12月7日乌鲁木齐

持续集成 - 使用Gilab CI进行前端项目的持续集成

Fri, 20 Sep 2019 23:15:00 +0000

市面上的持续集成平台有很多,今天介绍Gitlab的CI.

从Gitlab 8.0开始,Gitlab CI 就集成在了Gitlab中.

使用方法非常简单,只要我们在项目的根目录创建一个 .gitlab-ci.yml文件,添加一个Runner,就直接接入了Gitlab CI.

接入方式非常的简单便捷.目前我们在前端脚手架中放一个.gitlab-ci.yml文件,后续每一个前端项目都可以按照标准直接接入Gitlab CI.

GitLab Runner

所有的Gitlab任务都会放在Gitlab Runner中执行.

GitLab Runner的安装环境,根据你的需求而定,一个gitlab 可以注册的Runner是没有限制的.

普通的前端项目直接安装在Linux中就可以了,如果是小程序或者RN这种项目,目前我是直接找了一台mac mini来安装Runner.

GitLab Runner安装

安装Runner 非常简单, 这里晒出Gitlab的官方安装教程,你可以根据你的系统环境自行下载.

安装Gitlab Runner 官方文档

注册Runner

Runner安装好之后,想要关联到你的Gitlab,需要注册Runner.

这里给大家介绍群组的runner注册方式,个人项目的runner方式注册基本一致

注册Gitlab Runner 官方文档

大致流程为:

打开Gitlab网站,选择群组-> 设置-> CI/CD -> 展开Runner -> 你会看到注册Runner的Token与Url
安装好Runner的机器上,运行 sudo gitlab-runner register
输入你Gitlab的 URL
输入 Token
输入 Runner 的名字
选择 Runner 的类型,没有特殊需求直接选shell
完成

配置Runner

Runner的配置文件会以执行的用户身份不同而不同

当GitLab Runner以root身份执行时 /etc/gitlab-runner/config.toml
当GitLab Runner以非root身份执行时 ~/.gitlab-runner/config.toml

Runner的全局配置

这里我只说关键的两点

concurrent 配置会限制整个GitLab Runner能并发处理job的数量,如果你发现你的runner当前时间全局只能执行一个job的时候, 可以检查concurrent是否默认配置为1.不然多个job同一时段并发的时候,会造成job排队的现象.

前端微服务化进阶4 - 跨框架共享组件(微件化)

Sat, 22 Jun 2019 22:17:36 +0000

在微前端中,我们可以根据自己的业务需求,让子模块使用不同框架技术栈.虽然到了这一步已经很美好了,那这就是微前端的终点吗?

答案是否定的,微前端的边界还可以更进一步的拓宽.

上一篇微前端的文章 https://time-friend.com/archive/qh7x5i5szfh/ 给大家介绍了,如何在相同技术栈的子模块之间,相互调用React组件.

那今天要说的就是,如何在不同技术栈之间的子模块相调用不同技术栈的组件.

最终,我们只需要根据我们的需求调用相关功能的组件,我们不需要管他是 react ,vue或者是angular写的.

你只管用,只知道他是一个组件就好了,不用关心太多~ 对于团队的组件积累,是有极大好处的.

场景

一般情况下,一个公司的前端团队的技术栈都是统一的.但也有前端团队使用不统一技术栈的时候. 比如:

时代的变迁,升级技术栈导致内部技术栈不统一
项目众多,因为需求不一致,其他的技术栈对于项目更加有力
…其他管理原因

当我们已经使用微前端架构来构建我们的项目的时候,我们的子模块有可能因为我们项目的需求导致使用了其他的技术栈,

如果我们使用了其他的技术栈,我们原来封装的组件就不能在新的项目中用了,所以我们需要要求组件可以跨框架共享使用.

我们该怎么做?

这里有提到微件仓库模块,这是一个单独的项目.你可以理解是以前的旧项目,当你需要这个旧项目的某一个组件的时候,可以直接从这个项目里面拿.

你也可以做成一个只提供组件的项目,毕竟在运行时一个子模块挂载到我们的项目中来是没有任何资源消耗的.

我们只要知道我们需要的组件从哪里来就行了,然后根据组件还有之前定义好的路由找到这个组件,调用他,使用他就好了.

基于Web component封装我们的组件

不同框架开发的组件,差异很大.想要串在一起使用,基本上是不可能的. 好在目前所有的框架都支持让组件以webcomponent的形式存在.

react: https://react.docschina.org/docs/web-components.html

vue : https://github.com/vuejs/vue-web-component-wrapper

angular: https://www.angular.cn/guide/elements#transforming-components-to-custom-elements

关于Web Components 的详细介绍

https://developer.mozilla.org/zh-CN/docs/Web/Web_Components

加载性能

如果一个页面依赖了很多跨框架的组件,必然出现网络方面的性能问题.

我们会在请求的中间加一层node服务,当页面请求多个跨框架的组件的时候,我们的node就会合并成单个文件,并且保存在硬盘上.

所以说,当这个页面被请求过之后,页面零散的组件便会合并在一起,第二次其他用户请求就不会有这种合并文件的处理,直接返回静态资源给客户端.

这种方式也不会对nodejs有太多额外的压力,

因为现在的页面结构还是相对静态稳定的,没有太多的动态定制化的东西.这个方案足以应付大多数的应用场景.

尾巴

经过不停的探索,微前端终于走到了微件化的这一步,感慨颇多~

我们从一个窗口只能加载单个页面, 再到多个页面(SPA), 再到现在的多个项目(微前端), 然后再可以控制不同组件在多个项目之间随意组合(微件化).

微前端的应用边界应该还可以拓展的更宽,还可以开发出更多惊喜的操作.

前端微服务化进阶3 - 跨模块共享组件

Sun, 12 May 2019 22:17:36 +0000

前端微服务化之后,我们会面临一个问题: 模块之间重复代码不能复用的问题.

如果使用npm管理我们的重复代码,我们会多出维护npm包的成本. 在子模块更新npm包版本,也是一件很麻烦的事情. 在js文件体积上也没有任何的优化.

组件共享

今天我们就来聊一聊如何在多个模块中同时使用一个组件.

思路

在base模块管理公共组件,将组件封装成动态组件,这样在打包的时候我们就可以将该组件切割成单独文件了. 当其他的子模块需要这个组件的时候,向Base模块动态获取.

实践

动态组件的封装

为了让其他模块可以按需加载我们的公共组件,我们需要对已有的组件封装成动态组件.

我这里使用的是 umi/dynamic,

他是基于https://github.com/jamiebuilds/react-loadable 封装了一层. 有兴趣的小伙伴可以自行了解.

import React from 'react';
import dynamic from 'umi/dynamic';
import PageLoading from '@/components/PageLoading'

export const Demo = dynamic(import( `../Demo`), {loading: () => <PageLoading />})

export default Demo;

对外提供获取动态组件的方法

在加载Base模块的时候,我们可以在window下暴露一个调用该模块动态组件的方法

window.getDynamicComponent = async function(name) {
 let component = null;
 component = await import(`@/components/dynamic/${name}`);
 return component[name];
};

子模块调用公共组件

因为base模块提供了一个获取公共组件的全局方法, 我们就可以在任何模块任何需要调用公共组件的地方去是使用它了.

 // 获取组件
 let component = await window.getDynamicComponent('Demo')

为了方便这种公共组件的使用,我们可以将这一方法封装成一个组件. 在调用公共组件,我们只需要声明就好了.

import React, { Component } from 'react';

// Matrix 在黑客帝国中是母体的意思
export default class Matrix extends Component {
 state = {
 DynamicComponent: null
 }

 static defaultProps = {
 $name: ""
 }

 async componentWillMount() {
 this.renderComponent()
 }

 componentWillReceiveProps(nextProps) {
 this.props = nextProps
 this.renderComponent()
 }

 async renderComponent() {
 const { $name } = this.props;
 try {
 if ($name) {
 const component = await window.getDynamicComponent($name)
 this.setState({
 DynamicComponent: component
 })
 }
 } catch (error) {
 this.setState({
 DynamicComponent: null
 })
 console.error(error)
 }
 }


 render() {
 const { DynamicComponent } = this.state;
 // 继承所有props
 return DynamicComponent && <DynamicComponent {...this.props} />;
 }
}

在实际页面中调用我们的公共组件

前端微服务化进阶2 - 本地开发指南

Mon, 22 Apr 2019 22:17:36 +0000

使用single-spa构建我们的微服务化的前端应用之后,其实有一个问题会一直困扰着我们, 就是如何有效的开发?如何与我们平时开发的前端应用一样简单,容易上手. 今天就以umi子模块为例,希望给到大家一个思路

今天我就介绍一种方法,希望对大家有帮助.

模块加载器

是否还记得我之前的模块加载器, https://time-friend.com/archive/1a60cede/

我们只需要将原来模块的加载器,封装成npm包.

然后在我们开发子模块项目的时候,运行我们的加载器

// umi src/app.js
import bootstrap from '@demo/demo-module-dev-loader' //封装过后的npm包
import store from 'store'; // 我们用于通讯的store文件

export async function render(oldRender) {
 if (process.env.NODE_ENV === 'development') {
 const main = oldRender();
 const res = await window.fetch('./project.json');
 let currentProject = await res.json();
 bootstrap({
 main,
 store, 
 prefix: currentProject.prefix
 });
 } else {
 oldRender();
 }
}

module-dev-loader

我们的demo-module-dev-loader里一样会有一个 Bootstrap.js文件,我们对他进行一些小的修改.

import * as singleSpa from 'single-spa';
import { registerApp,registerLocal } from './Register'

export default async function bootstrap (local) {
 // 拿到我们的项目配置文件,但是我们的本地是没有这个文件的.

 // 我们需要通过webpack代理到我们的线上测试环境,来拿到这个文件
 // 我们需要通过webpack代理到我们的线上测试环境,来拿到这个文件
 // 我们需要通过webpack代理到我们的线上测试环境,来拿到这个文件

 // 重要的事情说三遍
 const projectConfig = await window.SystemJS.import('/project.config.js')
 const res = await window.fetch('/project.json')
 const currentProject = await res.json()
 let {projects} = projectConfig;

 // 移除当前项目,因为当前项目会使用registerLocal方法注册
 projects = projects.filter(ele => ele.name !== currentProject.name)

 // 注册我们的线上测试环境的
 for (let index = 0; index < projects.length; index++) {
 const project = projects[index];
 await registerApp({
 name: project.name,
 main: `${project.main}`,
 store: project.store,
 base: project.base,
 prefix: project.prefix
 });
 }
 // 重点!!!
 // 注册本地正在开发的模块
 local && registerLocal(local)
 singleSpa.start();
}

registerLocal 方法展示

// Register.js
// 在原来registerApp上做了一些删减,大概的原理是一模一样的
export function registerLocal({base,main,prefix,store,name='local'}){
 // 导入store模块
let storeModule = {}, customProps = { globalEventDistributor: globalEventDistributor };

storeModule = store && { storeInstance: null };

 // 注册应用于事件派发器
 if (storeModule.storeInstance && globalEventDistributor) {
 // 取出 redux storeInstance
 customProps.store = storeModule.storeInstance;
 // 注册到全局
 globalEventDistributor.registerStore(storeModule.storeInstance);
 }

 singleSpa.registerApplication(name, async ()=> main, base ? (() => true) : hashPrefix({prefix}),customProps);
}


// 原来的registerApp方法,与以前一模一样,没有改动.
// 为了方便对比registerLocal,所以列出来 供大家参考
export async function registerApp(params) {
// 导入store模块
let storeModule = {}, customProps = { globalEventDistributor: globalEventDistributor };

// 尝试导入store
try {
 storeModule = params.store ? await window.SystemJS.import(params.store) : { storeInstance: null };
} catch (e) {
 console.log(`Could not load store of app ${params.name}.`, e);
 //如果失败则不注册该模块
 return
}
 // 注册应用于事件派发器
 if (storeModule.storeInstance && globalEventDistributor) {
 // 取出 redux storeInstance
 customProps.store = storeModule.storeInstance;

 // 注册到全局
 globalEventDistributor.registerStore(storeModule.storeInstance);
 }

 singleSpa.registerApplication(params.name, async ()=> await window.SystemJS.import(params.main), params.base ? (() => true) : hashPrefix(params), customProps);

}

umi插件

我们的umi插件也需要修改

前端微服务化进阶1 - 基于umi的子模块方案

Sat, 13 Apr 2019 22:17:36 +0000

距离第一篇聊前端微服务的文章已经时隔大半年,很多人对此感兴趣.

今天我们就聊一聊,我们如何基于umi来打造一个更完善的前端微服务的子模块.

如果你用的是react以外的前端技术栈, 我的很多处理做法也可以应用在其他技术栈上.

希望对你也有所帮助.

优秀的umi框架

在前端中后台项目上,前端微服务化的需求相对是比较旺盛一些的.

说到中后台,很多企业都是基于antd的组件来构建自己的项目.

自去年的see conf之后,蚂蚁的一款可插拔的企业级 react 应用框架 umi发布了.

这款框架与antd息息相关,antd结合umi使用那是相当的自然与流畅.

可以说,基于umi与antd构建的项目非常的漂亮.这么优秀的框架,如果让他适用于我们的前端微服务架构,岂不美哉?

umi也有相关的类似微服务方案: https://github.com/umijs/umi-example-monorepo

但是umi提供的方案,有很大的局限性. 如果可以接入single-spa的微服务方案,独立开发,独立部署等等的前端微服务化红利, 会让你的项目日后有更大的发展空间.

基于umi插件机制做到前端微服务化

umi 提供了非常强大的插件机制,正是由于这一点,我们才可以让umi也可以接入到微服务架构中来

umi插件介绍

umi插件的基本介绍:

https://umijs.org/zh/plugin/

umi插件开发

这里介绍了如何开发一个简单的umi插件:

https://umijs.org/zh/plugin/develop.html

接入single-spa的umi插件

export default (api, opts) => {
 // 以下的所有代码都写在这里面哦
};

渲染入口处理方法

定义一个动态的元素,当我们的base app 需要加载子模块的时候,会渲染出子模块需要渲染元素.

我们的子模块找到了自己模块需要渲染的节点的时候,就会渲染出来.

 const domElementGetterStr = `
 function domElementGetter() {
 let el = document.getElementById('submodule-page')
 if (!el) {
 el = document.createElement('div')
 el.id = 'submodule-page'
 }
 let timer = null
 timer = setInterval(() => {
 if (document.querySelector('#submoduleContent.submoduleContent')) {
 document.querySelector('#submoduleContent.submoduleContent').appendChild(el)
 clearInterval(timer)
 timer = null
 }
 }, 100)

 return el
 }`

使用single-spa-react

在umi的入口文件导入single-spa-react ,根据模块的属性来判断模块在运行时是否渲染在root节点上还是指定节点

记一次MongoDB迁移 - 备份与恢复

Wed, 27 Mar 2019 00:00:00 +0000

最近对自己的的爬虫数据库做了一次迁移,所以在这里记录一下mongodb的备份与恢复

MongoDB数据备份

mongodump -h dbhost -d dbname -o dbdirectory

-h： MongDB所在服务器地址，例如：127.0.0.1，如果没有改的话一般是：127.0.0.1:27017
-d：需要备份的数据库名字，例如：test
-o：备份的数据存放位置，例如：/home/root/xxx，

MongoDB数据恢复

mongorestore -h <hostname><:port> -d dbname <path>

–host <:port>, -h <:port>： MongoDB所在服务器地址，默认为： localhost:27017
–db , -d ：需要备份的数据库名字，例如：test
–drop：先删除现有的数据,再恢复数据
：指定备份文件的目录
–dir：指定备份文件的目录,不能同时指定和 –dir 选项。

一个两年前.gitattributes文件导致的bug

Thu, 24 Jan 2019 19:33:33 +0000

起因

一时兴起,我打开了我两年前写的一个前端项目开始代码审查. 这个项目我一个人写了两年,大概十几万行代码的样子.

发现这个项目的git居然把所有的代码文件都识别成了二进制文件. 这个问题,之前困扰了我很久,却一直找不到原因.导致我的代码没有对比记录.

再顽固的问题也有水落石出的一天

说巧不巧,今天偏偏找到了问题的源头.

.gitattributes

最后发现是因为.gitattributes文件有一行配置因为换行问题.导致所有text的文件都识别成了二进制文件.

.gitattributes的作用

.gitattributes文件是一个简单的text文本文件，它的作用是重新定义指定文件的属性, 指定非文本文件的对比合并方式

编写规则

pattern attr1 attr2 ...

示例

*.ttf binary
*.woff binary
*.eot binary
*.otf binary
* text=auto

上面这段代码表示,将一些字体文件指定为二进制文件,当提交代码的时候git不会diff这些文件的变动详情. 他只会告诉你,文件变动了,但是不会告诉你具体哪里变了.

LintCode 最长公共前缀

Sat, 19 Jan 2019 00:00:00 +0000

编写一个函数来查找字符串数组中的最长公共前缀。

如果不存在公共前缀，返回空字符串 “"。

示例 1:

输入: ["flower","flow","flight"]
输出: "fl"

示例 2:

输入: ["dog","racecar","car"]
输出: ""
解释: 输入不存在公共前缀。

说明:

所有输入只包含小写字母 a-z 。

JavaScript

/**
 * @param {string[]} strs
 * @return {string}
 */
var longestCommonPrefix = function(strs) {
 if(strs.length === 0)return ""
 let current = ""
 let prefix = ""
 let index = 0;
 let isTrue = true;
 while (strs[0][index]) { //以第一个单词为基准
 current = strs[0][index]; // 以第一个单词为基准
 for(let i = 0; i < strs.length; i++){
 if((strs[i] || "")[index] !== current){
 isTrue = false;
 break
 }

 }
 if(isTrue){
 index ++;
 prefix = prefix + current;
 }else{
 break
 }
 }
 return prefix
};

LintCode 买卖股票的最佳时机 II

Sat, 12 Jan 2019 00:00:00 +0000

给定一个数组，它的第 i 个元素是一支给定股票第 i 天的价格。

设计一个算法来计算你所能获取的最大利润。你可以尽可能地完成更多的交易（多次买卖一支股票）。

注意：你不能同时参与多笔交易（你必须在再次购买前出售掉之前的股票）。

示例 1:

输入: [7,1,5,3,6,4]
输出: 7
解释: 在第 2 天（股票价格 = 1）的时候买入，在第 3 天（股票价格 = 5）的时候卖出, 这笔交易所能获得利润 = 5-1 = 4 。
随后，在第 4 天（股票价格 = 3）的时候买入，在第 5 天（股票价格 = 6）的时候卖出, 这笔交易所能获得利润 = 6-3 = 3 。

示例 2:

输入: [1,2,3,4,5]
输出: 4
解释: 在第 1 天（股票价格 = 1）的时候买入，在第 5 天 （股票价格 = 5）的时候卖出, 这笔交易所能获得利润 = 5-1 = 4 。
 注意你不能在第 1 天和第 2 天接连购买股票，之后再将它们卖出。
 因为这样属于同时参与了多笔交易，你必须在再次购买前出售掉之前的股票。

示例 3:

输入: [7,6,4,3,1]
输出: 0
解释: 在这种情况下, 没有交易完成, 所以最大利润为 0。

JavaScript

/**
 * @param {number[]} prices
 * @return {number}
 */
var maxProfit = function(prices) {
 let n = 0;
 prices.forEach((element,index) => {
 if(element < prices[index +1]){
 n = prices[index +1] - element + n
 }
 });
 return n
}

Canvas 处理跨域图片终极方案

Thu, 10 Jan 2019 16:14:25 +0000

浏览器因为安全问题,是不允许Canvas使用 getImageData``toDataURL 处理跨域获取的图片的.

传统解决方法

1.服务器需要配置Access-Control-Allow-Origin

相信这一行代码,大家见过太多,我就赘述了

header("Access-Control-Allow-Origin: 你的域名");

2.设置crossOrigin属性

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

var img = new Image();
img.crossOrigin = 'anonymous'; //就是这行代码
img.onload = function () {
 context.drawImage(this, 0, 0);
 context.getImageData(0, 0, this.width, this.height);
};
img.src = 'https://avatars3.xxxx.com/u/496048';

到这里,你的跨域问题已经基本解决. 但是因为一些客观因素后端工程师拒绝帮你设置跨域头,那你该怎么办?

终极解决方案

大致思路是使用ajax获取到图片,然后使用 FileReader转成base64;再使用canvas处理base64格式的图片就好了.

获取图片的base64

function getBase64(imgUrl) {
 return new Promise(((resolve, reject) => {
 window.URL = window.URL || window.webkitURL;
 // 声明一个XMLHttpRequest
 const xhr = new XMLHttpRequest();
 // 获取图片
 xhr.open('get', imgUrl, true);
 xhr.responseType = 'blob';
 xhr.send();
 xhr.onload = function () {
 if (this.status === 200) {
 // 得到一个blob对象
 const blob = this.response;
 const oFileReader = new FileReader();
 oFileReader.onloadend = function (e) {
 const base64 = e.target.result;
 //拿到base64 传出结果
 resolve(base64);
 };
 oFileReader.onerror = function (e) {
 reject();
 };
 oFileReader.readAsDataURL(blob);
 }
 };
 }));
}

Canvas 操作图片

const base64 = await getBase64(imgSrc);
const img = new Image();
img.src = base64;

// canvas 处理
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
img.onload = () => {
 context.drawImage(this, 0, 0);
 context.getImageData(0, 0, this.width, this.height);
};

今天就到这里

Git大小写不敏感导致的烦人问题

Wed, 09 Jan 2019 19:33:33 +0000

因为同事把一个文件夹的小写改成了大写,导致我本地的提交不能直接push rebase 等一些列操作.恼的很~

error: The following untracked working tree files would be overwritten by checkout:
 xxx.js
Please move or remove them before you can switch branches.
Aborting

解决办法

设置为大小写敏感(问题解决后,一定要还原配置)

git config core.ignorecase false

尽管设置大小写敏感之后,始终会影响其他分支的代码,所以不建议一直使用这个配置,当问题解决之后,还是要改回去.

改回默认

git config core.ignorecase true
# or
git config --unset core.ignorecase

尾巴

平时编码的时候,还是千万不要直接重命名大小写,自己本地看起来没有什么问题.在别人问题上却是大问题.

如果发生了类似问题的,应该在源头解决(谁机器上重命名的,谁改回去).如果不解决的,应该拖出去打~~

Visual-Studio-Code 下的 jsconfig.json

Tue, 08 Jan 2019 19:33:33 +0000

今天聊聊 Visual-Studio-Code 的jsconfig.json配置小技巧.

jsconfig.json 是什么?

如果你的项目中有一个 jsconfig.json文件的话,这个文件的配置可以对你的文件所在目录下的所有js代码做出个性化支持.

Tip: 如果你在项目中新加了这个文件,记得重启一下vscode哦~

例子

exclude 属性

当vscode扫描项目代码的时候,如果遇到了node_module的话是会变得很慢的.

如果想要编辑器的性能有一个提升的话,我们应该排除这个文件夹.

{
 "exclude": [
 "node_modules"
 ]
}

include 属性

当然还有相对的include属性

{
 "include": [
 "src/**/*"
 ]
}

webpack aliases 的支持

如果我们在我们的webpack里面配置的路径的别名,心细的小朋友就发现了. 我们的vscode不能根据别名路径导入的包跳转文件了.所以我们还需要jsconfig.json的支持.

{
 "compilerOptions": {
 "baseUrl": ".",
 "paths": {
 "@component": ["./src/component"]
 }
 }
}

jsconfig.json的配置是tsconfig.json的子集,

以后有机会的话聊一聊tsconfig.json.

今天就到这里~

前端面试知识点收集 - JavaScript篇

Mon, 07 Jan 2019 22:17:36 +0000

JavaScript 面试知识点总结

1. 介绍 js 的基本数据类型。

js 一共有六种基本数据类型，分别是 Undefined、Null、Boolean、Number、String，还有在 ES6 中新增的 Symbol 类型，
代表创建后独一无二且不可变的数据类型，它的出现我认为主要是为了解决可能出现的全局变量冲突的问题。

2. JavaScript 有几种类型的值？你能画一下他们的内存图吗？

涉及知识点：

栈：原始数据类型（Undefined、Null、Boolean、Number、String）
堆：引用数据类型（对象、数组和函数）

两种类型的区别是：存储位置不同。
原始数据类型直接存储在栈（stack）中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储。

引用数据类型存储在堆（heap）中的对象，占据空间大、大小不固定。如果存储在栈中，将会影响程序运行的性能；引用数据类型在
栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实
体。

回答：

js 可以分为两种类型的值，一种是基本数据类型，一种是复杂数据类型。

基本数据类型....（参考1）

复杂数据类型指的是 Object 类型，所有其他的如 Array、Date 等数据类型都可以理解为 Object 类型的子类。

两种类型间的主要区别是它们的存储位置不同，基本数据类型的值直接保存在栈中，而复杂数据类型的值保存在堆中，通过使用在栈中
保存对应的指针来获取堆中的值。

详细资料可以参考：《JavaScript 有几种类型的值？》《JavaScript 有几种类型的值？能否画一下它们的内存图；》

3. 什么是堆？什么是栈？它们之间有什么区别和联系？

堆和栈的概念存在于数据结构中和操作系统内存中。

在数据结构中，栈中数据的存取方式为先进后出。而堆是一个优先队列，是按优先级来进行排序的，优先级可以按照大小来规定。完全
二叉树是堆的一种实现方式。

在操作系统中，内存被分为栈区和堆区。

栈区内存由编译器自动分配释放，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈。

堆区内存一般由程序员分配释放，若程序员不释放，程序结束时可能由垃圾回收机制回收。

详细资料可以参考：《什么是堆？什么是栈？他们之间有什么区别和联系？》

4. 内部属性 [[Class]] 是什么？

所有 typeof 返回值为 "object" 的对象（如数组）都包含一个内部属性 [[Class]]（我们可以把它看作一个内部的分类，而非
传统的面向对象意义上的类）。这个属性无法直接访问，一般通过 Object.prototype.toString(..) 来查看。例如：

Object.prototype.toString.call( [1,2,3] );
// "[object Array]"

Object.prototype.toString.call( /regex-literal/i );
// "[object RegExp]"

5. 介绍 js 有哪些内置对象？

涉及知识点：

前端面试知识点收集 - HTML篇

Sun, 06 Jan 2019 22:17:36 +0000

HTML 面试知识点总结

1. DOCTYPE 的作用是什么？

2. 标准模式与兼容模式各有什么区别？

标准模式的渲染方式和 JS 引擎的解析方式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示
，模拟老式浏览器的行为以防止站点无法工作。

3. HTML5 为什么只需要写 `<!DOCTYPE HTML>`，而不需要引入 DTD？

HTML5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 DOCTYPE 来规范浏览器的行为（让浏览器按照它们应该的方式来运
行）。

而 HTML4.01 基于 SGML ，所以需要对 DTD 进行引用，才能告知浏览器文档所使用的文档类型。

4. SGML 、 HTML 、XML 和 XHTML 的区别？

SGML 是标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源。

HTML 是超文本标记语言，主要是用于规定怎么显示网页。

XML 是可扩展标记语言是未来网页语言的发展方向，XML 和 HTML 的最大区别就在于 XML 的标签是可以自己创建的，数量无限多，
而 HTML 的标签都是固定的而且数量有限。

XHTML 也是现在基本上所有网页都在用的标记语言，他其实和 HTML 没什么本质的区别，标签都一样，用法也都一样，就是比 HTML 
更严格，比如标签必须都用小写，标签都必须有闭合标签等。

5. DTD 介绍

DTD（ Document Type Definition 文档类型定义）是一组机器可读的规则，它们定义 XML 或 HTML 的特定版本中所有允许元
素及它们的属性和层次关系的定义。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。

DTD 是对 HTML 文档的声明，还会影响浏览器的渲染模式（工作模式）。

6. 行内元素定义

HTML4 中，元素被分成两大类: inline （内联元素）与 block（块级元素）。一个行内元素只占据它对应标签的边框所包含的空
间。

常见的行内元素有 a b span img strong sub sup button input label select textarea

7. 块级元素定义

块级元素占据其父元素（容器）的整个宽度，因此创建了一个“块”。

常见的块级元素有 div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p

8. 行内元素与块级元素的区别？

HTML4中，元素被分成两大类：inline （内联元素）与 block （块级元素）。

（1） 格式上，默认情况下，行内元素不会以新行开始，而块级元素会新起一行。
（2） 内容上，默认情况下，行内元素只能包含文本和其他行内元素。而块级元素可以包含行内元素和其他块级元素。
（3） 行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置 width 无效，height 无效（可以设置 line-hei
 ght），设置 margin 和 padding 的上下不会对其他元素产生影响。

9. HTML5 元素的分类

HTML4中，元素被分成两大类: inline（内联元素）与 block（块级元素）。但在实际的开发过程中，因为页面表现的需要，前
端工程师经常把 inline 元素的 display 值设定为 block （比如 a 标签），也经常把 block 元素的 display 值设定为
inline 之后更是出现了 inline-block 这一对外呈现 inline 对内呈现 block 的属性。因此，简单地把 HTML 元素划分为
inline 与 block 已经不再符合实际需求。

HTML5中，元素主要分为7类：Metadata Flow Sectioning Heading Phrasing Embedded Interactive

10. 空元素定义

标签内没有内容的 HTML 标签被称为空元素。空元素是在开始标签中关闭的。

常见的空元素有：br hr img input link meta

11. link 标签定义

link 标签定义文档与外部资源的关系。

link 元素是空元素，它仅包含属性。 此元素只能存在于 head 部分，不过它可出现任何次数。

link 标签中的 rel 属性定义了当前文档与被链接文档之间的关系。常见的 stylesheet 指的是定义一个外部加载的样式表。

12. 页面导入样式时，使用 link 和 @import 有什么区别？

（1）从属关系区别。 @import 是 CSS 提供的语法规则，只有导入样式表的作用；link 是 HTML 提供的标签，不仅可以加
 载 CSS 文件，还可以定义 RSS、rel 连接属性、引入网站图标等。

（2）加载顺序区别。加载页面时，link 标签引入的 CSS 被同时加载；@import 引入的 CSS 将在页面加载完毕后被加载。

（3）兼容性区别。@import 是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link 标签作为 HTML 元素，不存在兼容
 性问题。

（4）DOM 可控性区别。可以通过 JS 操作 DOM ，插入 link 标签来改变样式；由于 DOM 方法是基于文档的，无法使用 @i
 mport 的方式插入样式。

13. 你对浏览器的理解？

浏览器的主要功能是将用户选择的 web 资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常
是 HTML，也包括 PDF、image 及其他格式。用户用 URI（Uniform Resource Identifier 统一资源标识符）来指定所请
求资源的位置。

HTML 和 CSS 规范中规定了浏览器解释 html 文档的方式，由 W3C 组织对这些规范进行维护，W3C 是负责制定 web 标准的
组织。

但是浏览器厂商纷纷开发自己的扩展，对规范的遵循并不完善，这为 web 开发者带来了严重的兼容性问题。

简单来说浏览器可以分为两部分，shell 和 内核。

其中 shell 的种类相对比较多，内核则比较少。shell 是指浏览器的外壳：例如菜单，工具栏等。主要是提供给用户界面操作，
参数设置等等。它是调用内核来实现各种功能的。内核才是浏览器的核心。内核是基于标记语言显示内容的程序或模块。也有一些
 浏览器并不区分外壳和内核。从 Mozilla 将 Gecko 独立出来后，才有了外壳和内核的明确划分。

14. 介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎和 JS 引擎。

渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。默认情况下，渲染引擎可以显示 html、xml 文档及图片，它也
可以借助插件（一种浏览器扩展）显示其他类型数据，例如使用 PDF 阅读器插件，可以显示 PDF 格式。

JS 引擎：解析和执行 javascript 来实现网页的动态效果。

最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

15. 常见的浏览器内核比较

Trident：这种浏览器内核是 IE 浏览器用的内核，因为在早期 IE 占有大量的市场份额，所以这种内核比较流行，以前有很多
网页也是根据这个内核的标准来编写的，但是实际上这个内核对真正的网页标准支持不是很好。但是由于 IE 的高市场占有率，微
软也很长时间没有更新 Trident 内核，就导致了 Trident 内核和 W3C 标准脱节。还有就是 Trident 内核的大量 Bug 等
安全问题没有得到解决，加上一些专家学者公开自己认为 IE 浏览器不安全的观点，使很多用户开始转向其他浏览器。

Gecko：这是 Firefox 和 Flock 所采用的内核，这个内核的优点就是功能强大、丰富，可以支持很多复杂网页效果和浏览器扩
展接口，但是代价是也显而易见就是要消耗很多的资源，比如内存。

Presto：Opera 曾经采用的就是 Presto 内核，Presto 内核被称为公认的浏览网页速度最快的内核，这得益于它在开发时的
天生优势，在处理 JS 脚本等脚本语言时，会比其他的内核快3倍左右，缺点就是为了达到很快的速度而丢掉了一部分网页兼容性。

Webkit：Webkit 是 Safari 采用的内核，它的优点就是网页浏览速度较快，虽然不及 Presto 但是也胜于 Gecko 和 Trid
ent，缺点是对于网页代码的容错性不高，也就是说对网页代码的兼容性较低，会使一些编写不标准的网页无法正确显示。WebKit 
前身是 KDE 小组的 KHTML 引擎，可以说 WebKit 是 KHTML 的一个开源的分支。

Blink：谷歌在 Chromium Blog 上发表博客，称将与苹果的开源浏览器核心 Webkit 分道扬镳，在 Chromium 项目中研发 B
link 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。其实 Blink 引擎就是 Webkit 的一个分支，就像 webkit 是
KHTML 的分支一样。Blink 引擎现在是谷歌公司与 Opera Software 共同研发，上面提到过的，Opera 弃用了自己的 Presto 
内核，加入 Google 阵营，跟随谷歌一起研发 Blink。

详细的资料可以参考：《浏览器内核的解析和对比》《五大主流浏览器内核的源起以及国内各大浏览器内核总结》

前端面试知识点收集 - CSS篇

Sat, 05 Jan 2019 22:17:36 +0000

CSS 面试知识点总结

1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？

2.CSS 选择符有哪些？

（1）id选择器（#myid）
（2）类选择器（.myclassname）
（3）标签选择器（div,h1,p）
（4）后代选择器（h1 p）
（5）相邻后代选择器（子）选择器（ul>li）
（6）兄弟选择器（li~a）
（7）相邻兄弟选择器（li+a）
（8）属性选择器（a[rel="external"]）
（9）伪类选择器（a:hover,li:nth-child）
（10）伪元素选择器（::before、::after）
（11）通配符选择器（*）

3.::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。

4.伪类与伪元素的区别

css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句
话中的第一个字母，或者是列表中的第一个元素。

伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的
元素时，我们可以通过:hover来描述这个元素的状态。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说，我们可以通过::be
fore来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

有时你会发现伪元素使用了两个冒号（::）而不是一个冒号（:）。这是CSS3的一部分，并尝试区分伪类和伪元素。大多数浏览
器都支持这两个值。按照规则应该使用（::）而不是（:），从而区分伪类和伪元素。但是，由于在旧版本的W3C规范并未对此进行
特别区分，因此目前绝大多数的浏览器都支持使用这两种方式表示伪元素。

详细资料可以参考：《总结伪类与伪元素》

5.CSS 中哪些属性可以继承？

前端面试知识点收集 - 综合篇

Fri, 04 Jan 2019 22:17:36 +0000

$HTML， HTTP，web 综合问题

常见排序算法的时间复杂度,空间复杂度

前端需要注意哪些 SEO

合理的 title、description、keywords：搜索对着三项的权重逐个减小，title 值强调重点即可，重要关键词出现不要超过 2 次，而且要靠前，不同页面 title 要有所不同；description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面 description 有所不同；keywords 列举出重要关键词即可
语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解网页
重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
重要内容不要用 js 输出：爬虫不会执行 js 获取内容
少用 iframe：搜索引擎不会抓取 iframe 中的内容
非装饰性图片必须加 alt
提高网站速度：网站速度是搜索引擎排序的一个重要指标

web 开发中会话跟踪的方法有哪些

cookie
session
url 重写
隐藏 input
ip 地址

`<img>`的`title`和`alt`有什么区别

title是global attributes之一，用于为元素提供附加的 advisory information。通常当鼠标滑动到元素上的时候显示。
alt是<img>的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

doctype 是什么,举例常见 doctype 及特点

<!doctype>声明必须处于 HTML 文档的头部，在<html>标签之前，HTML5 中不区分大小写
<!doctype>声明不是一个 HTML 标签，是一个用于告诉浏览器当前 HTMl 版本的指令
现代浏览器的 html 布局引擎通过检查 doctype 决定使用兼容模式还是标准模式对文档进行渲染，一些浏览器有一个接近标准模型。
在 HTML4.01 中<!doctype>声明指向一个 DTD，由于 HTML4.01 基于 SGML，所以 DTD 指定了标记规则以保证浏览器正确渲染内容
HTML5 不基于 SGML，所以不用指定 DTD

常见 dotype：

幕后英雄Abstract syntax tree抽象语法树

Thu, 03 Jan 2019 17:33:33 +0000

抽象语法树 AST

在计算机科学中，抽象语法树，或简称语法树，是源代码语法结构的一种抽象表示.

这里介绍一个网站 https://astexplorer.net ,可以让你清晰的看到一段js,css以及其他语言被转换成语法树的样子.

在我们的浏览器中,也会对我们的js代码解析成抽象语法书然后再进一步的分析以及下一步的操作.

语法树就前端而言,被利用在各种地方,代码语法的检查，代码风格的检查，代码的格式化，代码的高亮，代码错误提示，代码自动补全,比如:

eslint
JSHint
babel
webpack
rollup
UglifyJS2

等等等等… 根本数不过来.

举个例子

一段代码被解析成语法树后的样子目前业界对抽象语法树是有规范的, 感兴趣的朋友可以查看这个网址: SpiderMonkey

let str ='我是字符串';

to AST

{
 "type": "Program",
 "start": 0,
 "end": 17,
 "body": [
 {
 "type": "VariableDeclaration",
 "start": 0,
 "end": 17,
 "declarations": [
 {
 "type": "VariableDeclarator",
 "start": 4,
 "end": 16,
 "id": {
 "type": "Identifier",
 "start": 4,
 "end": 7,
 "name": "str"
 },
 "init": {
 "type": "Literal",
 "start": 9,
 "end": 16,
 "value": "我是字符串",
 "raw": "'我是字符串'"
 }
 }
 ],
 "kind": "let"
 }
 ],
 "sourceType": "module"
}

Node.js解析抽象语法树的工具

常用js解析工具

esprima
traceur
acorn
shift

使用esprima举个例子

# node环境
> var esprima = require('esprima');
> var program = 'const answer = 42';

> esprima.tokenize(program);
[ { type: 'Keyword', value: 'const' },
 { type: 'Identifier', value: 'answer' },
 { type: 'Punctuator', value: '=' },
 { type: 'Numeric', value: '42' } ]
 
> esprima.parseScript(program);
{ type: 'Program',
 body:
 [ { type: 'VariableDeclaration',
 declarations: [Object],
 kind: 'const' } ],
 sourceType: 'script' }

2018 年终有感

Sat, 29 Dec 2018 21:29:00 +0000

今天是今年的最后一个工作日,现在我在高铁上.已经习惯在高铁上用电脑折腾点什么. 回想起来,不知道在高铁上发过多少次版本,fix掉了多少个bug.啊哈哈~

回看今年的2018,对于我来说是传奇的,是曲折的,甚至是有点丧的.幸运的是个人成长并没有客观原因而耽误.

我的团队

回想到今年7月份,亲手组建的前端团队因为大环境的原因而解散,确实是很痛心的. 如果按照正常来发展,我想应该可以打造成我心目中的Dream Team了吧.至少各个对技术是那么的有热情.

成长要与时间赛跑

不过一切都没有关系,今年也不过刚满26,以后有的是机会.我经常这样安慰我自己.恐怕再过两年,这就不是自我安慰的理由了. 唯一要做的就是个人成长必须要与时间赛跑.

今年去参加ng china的时候,让我非常有印象的一场演讲是雪狼的. 其中有一段大意是根据我们现在信息爆炸的年代,我们的成长应该古人早十年:

二十而立

三十不惑

四十知天命

五十耳顺

六十从心所欲

对此,我是十份赞同的.

焦虑的一年

2018年对于我来说,是焦虑的一年.因为自身的焦虑,促使自己每天都在不断学习与进步~ 当然今年也错过了很多不错的机会.现在想起来,还是自己太年轻了,没有见过大人物,看到偶像立马就怂了. 不过还是随时整装待发,随时面对新挑战.

关于博客

今年博客可以说是大升级了,界面看起来差不多,但是内部基本上重写了一遍. 还专门做了SEO,甚至还跑到 segmentfault 去打了一个星期的广告,哈哈哈~ 虽然宣传效果没有达到预期~

以前没有专门的做统计,自10月上线统计以来,看了一下网站的总访问量已经到达了10W+. 我不知道其他的博客主的网站数据是怎么样的,但是按照现在趋势. 访问量还是在缓慢的增加.每天看到那些统计数据,还是非常有意思的.

从之前每周强制写一篇,到现在的每周强制自己写三篇.写一些自己正在做的,看到的,有意思的技术总结.有时候是一些很小的技术点,有一些也是我研究了很久,有一定系统性的东西.写博客对我来说是一种非常有效率的学习方式.以后应该还会坚持.不过也说不上坚持吧,渐渐的已经成为了一种爱好与习惯. 希望这种习惯,可以让自己的技能可以有发挥的地方.有一个组织与自己互利互惠,相互成长,得到各自想要的东西.

关于家庭

关于家庭,今年1月份我儿子小可乐出生了,直到小可乐出生很久,我都没能让自己非常喜欢小孩. 不知道是因为自己是独生子或者从来没有跟自己年龄小的人相处的原因. 现在看,我身边的朋友大多都比我大个五六七八岁的. 但是现在,相处的越久发现这种与儿子的羁绊越来越深.希望以后可以跟他成为好朋友,甚至是好兄弟,好导师.

至少我们现在看到的世界,比我们父辈的那一代要大很多. 我们要学习父辈的智慧,重新看待与审视这个世界. 智慧这个东西,很有意思~ 不管放在哪个时代都是可以直接复用的.

关于技术

今年我有听到一些话,让我深深的陷入思考.我一同事跟我说: “我对技术没有你那么高的热情,我只是为了谋生”. 我很排斥这种说法,但是又不得不承认很多人是这样. 这是不是很多时候面试,别人问你是不是计算机专业出身的一样.

我问自己,我学习这么多的知识是谋生吗? 最终我想了想,得到了答案: 学习这些技术是一个让我理解这个世界的途径. 我想我能有一个这样的理解,是因为我比较幸运吧~ 虽然生活压力还是有的,但也没有那么大~~是吧? (突然脑子想到那个段子~~)

我一直觉得我有一个问题,我眼中总是只能看到比我优秀的人,看着他们如此优秀,让自己无比焦虑.

有时候我对自己说,我是不是偶尔也向后看看? 可以自己释怀很多~ 但是很多时候又觉得自己办不到? 这算不算习惯性见贤思齐的一种表现~ 我觉得这是病,时间久了多多少少还是会有一些问题的.

关于2019

2019我觉得没有什么可计划的,要是真有计划那也是把2018年一直坚持的事情继续做下去.

聊聊HTTP的X-Forwarded-For 和 X-Real-IP

Sat, 29 Dec 2018 16:14:25 +0000

最近在看网易云音乐API nodejs这个项目的文档的时候.

发现调用须知里,有一段是这样的说的:

由于网易限制,此项目在国外服务器上使用会受到限制,如需解决 , 可使用大陆服务器或者使用代理 , 感谢 @hiyangguo提出的解决方法: 在 ‘util.js’ 的 ‘headers’ 处增加 X-Real-IP’:‘211.161.244.70’ // 任意国内 IP 即可解决

网易云音乐的接口调用对国外加了限制,想要跳过这样的限制的话,就必须在headers里修改X-Real-IP 就可以解决.

那X-Real-IP是什么?是干什么用的?

X-Real-IP

X-Real-IP，这是一个自定义头部字段。X-Real-IP 通常被 HTTP 代理用来表示与它产生 TCP 连接的设备 IP，这个设备可能是其他代理，也可能是真正的请求端。需要注意的是，X-Real-IP 目前并不属于任何标准，

跟他非常相关的,还有一个X-Forwarded-For的自定义头部字段.

X-Forwarded-For

X-Forwarded-For 是一个 HTTP 扩展头部。HTTP/1.1（RFC 2616）协议并没有对它的定义，它最开始是由 Squid 这个缓存代理软件引入，用来表示 HTTP 请求端真实 IP。如今它已经成为事实上的标准，被各大 HTTP 代理、负载均衡等转发服务广泛使用，并被写入 RFC 7239（Forwarded HTTP Extension）标准之中。

格式:

X-Forwarded-For: client, proxy1, proxy2

如果一个 HTTP 请求到达服务器之前，经过了三个代理 Proxy1、Proxy2、Proxy3，IP 分别为 IP1、IP2、IP3，用户真实 IP 为 IP0，那么按照 XFF 标准，服务端最终会收到以下信息：

X-Forwarded-For: IP0, IP1, IP2

X-Forwarded-For 会记录用户ip与每次转发用的代理服务器ip.

而这时,我们之前提到的 X-Real-IP 会是ip0,是用户发送请求的ip地址.

Angular路径别名配置

Thu, 27 Dec 2018 22:17:36 +0000

angular cli 内置了 webpack,所以也是可以配置路径别名的. 而且配置的方式几乎是一样的.

配置路径别名

找到你的项目根目录的 tsconfig.json 文件.

注意: 如果你的配置不生效,需要查看你的baseUrl是否配置正确.

{
 "compilerOptions": {
 "baseUrl": "./src/", 
 "paths": {
 "@app/*": ["app/*"],
 "@services/*": ["app/services/*"]
 }
 }
}

配置之前

import { Api } from '../../../../../services/api.service';
import { xxx } from '../../../../../services/api.xxx';

配置之后

import { Api } from '@services/api.service';
import { xxx } from '@services/api.xxx';

一些开发中的小技巧,希望可以帮到你.

Typescript的福音:Json To Interface

Tue, 25 Dec 2018 19:33:33 +0000

在我们使用ts的时候,我们需要写大量的 Interface.

但是我们一条json数据的字段实在是太多了,一个一个写的话不仅会花费大量的时间.

在团队内部推广Typescript,因为使用问题导致推广层层阻碍,最后放弃使用屡见不鲜.

今天推荐的这个插件,希望可以帮到你.

JSON to TS 插件

安装

ext install json-to-ts

复制到剪贴板后运行快捷键 (Ctrl + Alt + V)

鼠标选中后运行快捷键 (Ctrl + Alt + S)

已知问题

linux 已知问题

Command failed: xclip -selection clipboard -o

解决方法

sudo apt-get install xclip

Centos7 如何使用yum升级git到最新版本

Mon, 24 Dec 2018 20:32:05 +0000

yum upgrade 并不能升级git到最新版本

在centos7 默认的git版本是1.8.x

查看本机git版本

git --version
git version 1.8.3.1

如果你想使用yum升级到2.0+的版本

直接yum升级并不会升级到最新版本

yum -y upgrade git
git version 1.8.3.1

但是我又不想下载源码包,在本机编译然后输出环境变量那种方式. 还是太麻烦了.

yum升级git版本到2.0+

Git第三方仓库安装（IUS）

# 安装使用里面说的自动化安装脚本
curl https://setup.ius.io | sh

yum search git 

# 删除本机git,安装git2u
yum remove -y git | yum -y install git2u

# 查看当前版本
git --version
# 成功升级
> git version 2.16.4

Angular-electron

这里推荐一个完成度非常高的模板,开箱即用

https://github.com/maximegris/angular-electron

Angular7 + Electron主进程与渲染进程通讯问题

Wed, 19 Dec 2018 19:02:36 +0000

Electron 中的进程分类

在 Electron 中，存在两种进程：主进程和渲染进程。

渲染进程你可以理解为view层,也就是我们非常熟悉的显示页面的进程. 在这里你可以调用nodejs接口的能力,也可以做我们已经非常熟悉的浏览器操作. 但是你想要调用主进程才能做的一些操作的时候,就需要一个通讯机制,告诉主进程你要干嘛干嘛.

IPC通讯

渲染层向主进程发送通知

//index.html,渲染进程发送通知
onst electron = require('electron')
const ipcRenderer = electron.ipcRenderer
ipcRenderer.send('main-process-messages','hellow')

// main.js 主进程接收通知
const { ipcMain } = require('electron');
ipcMain.on('main-process-messages', function(event, message) {
 console.log(message)
});

主进程向渲染进程发送通知

// main.js
mainWindow.webContents.send('main-process-messages', 'main-process-messages show')

//index.html,渲染进程中接收消息
const electron = require('electron')
const ipcRenderer = electron.ipcRenderer
ipcRenderer.on('main-process-messages', function(event, message){
 alert(message)
})

在Angular工程中如何使用

当你在angular工程中直接require('electron')是会直接报错的.

ERROR in ./node_modules/electron/index.js
Module not found: Error: Can't resolve 'fs' in '###/node_modules/electron'
ERROR in ./node_modules/electron/index.js
Module not found: Error: Can't resolve 'path' in '###/node_modules/electron'

那我们该怎么办呢.

创建一个 electron.service.ts

// 示例代码
import { Injectable } from '@angular/core';
import {} from 'electron';
import Fs from 'fs';

@Injectable({
 providedIn: 'root'
})
export class ElectronService {
 constructor() {
 // check if platform is electron
 const isElectron: boolean = window && window['process'] && window['process'].type;

 if (isElectron) {
 const fs: typeof Fs = window['require']('fs');
 const app: Electron.App = window['require']('electron').remote;
 }
 }
 electron = window['require']('electron');
}

当我们需要electron的时候,直接引入这个service就好了.

从零搭建 Angular7 + Electron 桌面应用

Tue, 18 Dec 2018 19:02:36 +0000

Electron 是什么？

Electron 是一个可以用 JavaScript、HTML 和 CSS 构建桌面应用程序的库。这些应用程序能打包到 Mac、Windows 和 Linux 系统上运行，也能上架到 Mac 和 Windows 的 App Store。意思就是说,你只要拥有前端开发的能力,也可以轻松开发跨平台的桌面应用.

Electron的『主进程』和『渲染进程』

Electron 有两种进程：『主进程』和『渲染进程』。部分模块只能在两者之一上运行，而有些则无限制。主进程更多地充当幕后角色，而渲染进程则是应用程序的各个窗口。

主进程

主进程，通常是一个命名为 main.js 的文件，该文件是每个 Electron 应用的入口。它控制了应用的生命周期（从打开到关闭）。它既能调用原生元素，也能创建新的（多个）渲染进程。另外，Node API 是内置其中的。

渲染进程

渲染进程是应用的一个浏览器窗口。与主进程不同，它能存在多个（注：一个 Electron 应用只能存在一个主进程）并且相互独立（它也能是隐藏的）。

主窗口通常被命名为 index.html。它们就像典型的 HTML 文件，但 Electron 赋予了它们完整的 Node API。因此，这也是它与浏览器的区别。

进程之间的通讯 (IPC)

想要再网页里调用主进程的功能,比如关闭窗口,最小化全屏等主线程才能控制的功能. Electron提供了通讯的机制,这就是IPC.后续会慢慢介绍IPC的使用.

Angular7 + Electron

介绍完Electron的一些基础概念之后, 这里教大家徒手搭建一个基于ng7的桌面应用工程.

1. 安装最新`angular-cli`

npm i -g @angular/cli

2. 生成一个`angular`工程

ng new electro-angular7

3. 安装最新版`electron`

cd electro-angular7
npm install --save-dev electron@latest

4. 在项目根目录添加`主进程` main.js文件

const { app, BrowserWindow , ipcMain } = require('electron');
const path = require('path')
// 保持对window对象的全局引用，如果不这么做的话，当JavaScript对象被
// 垃圾回收的时候，window对象将会自动的关闭
let win;
function createWindow () {
 // 创建浏览器窗口。
 win = new BrowserWindow({
 width: 1000,
 height: 670 ,
 });

 // 然后加载应用的 index.html。
 win.loadURL(`file://${__dirname}/dist/electro-angular7/index.html`);
 // 打开开发者工具
 win.webContents.openDevTools();


 // 当 window 被关闭，这个事件会被触发。
 win.on('closed', () => {
 // 取消引用 window 对象，如果你的应用支持多窗口的话，
 // 通常会把多个 window 对象存放在一个数组里面，
 // 与此同时，你应该删除相应的元素。
 win = null;
 });
}

// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow);

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
 // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
 // 否则绝大部分应用及其菜单栏会保持激活。
 if (process.platform !== 'darwin') {
 app.quit();
 }
});

app.on('activate', () => {
 // 在macOS上，当单击dock图标并且没有其他窗口打开时，
 // 通常在应用程序中重新创建一个窗口。
 if (win === null) {
 createWindow();
 }
});

// 在这个文件中，你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件，然后用 require 导入。


// ipc通讯相关代码
// 登录窗口最小化
ipcMain.on('window-min', function() {
 win.minimize();
});
// 登录窗口最大化
ipcMain.on('window-max', function() {
 if (win.isMaximized()) {
 win.restore();
 } else {
 win.maximize();
 }
});
ipcMain.on('window-close', function() {
 win.close();
});

5. package.json 文件修改

添加main.js的位置与npm scripts electron命令

记2018年最后一次前端分享(提供Slides)

Thu, 13 Dec 2018 21:32:05 +0000

使用husky提升Code-Review的效率

Tue, 04 Dec 2018 00:00:00 +0000

在code review的时候,代码风格是其中审查的指标之一.在审查代码风格其实是有一定工作量的.

为了减少代码审查的工作量,我们何不把代码风格在提交代码之前就规范掉?

这样我们就可以在代码审查中节约出很多时间,来做更多的其他更有意义的事情.

git hooks

在git中提供了hook,就是在触发代码提交,push等一系列操作的时候,提供了触发其他程序的钩子.

如何操作,本文不多赘述.

有兴趣的同学可以查看文档: https://git-scm.com/docs/githooks

husky

如果看过githooks的文档,是不是觉得会有一点繁琐?

这里介绍一个工具 husky 可以解决你的问题.

安装

npm install husky --save-dev

然后修改 package.json，增加配置：

{
 "husky": {
 "hooks": {
 "pre-commit": "eslint ."
 }
 },
}

如果你只是局部安装了 eslint,请使用以下配置

{
 "lint-staged": {
 "src/**/*.js": [
 "node_modules/.bin/eslint"
 ]
 },
}

最后尝试 Git 提交，你就会很快收到反馈：

git commit -m "this is a commit"

这样,我们就可以在代码提交之前验证一下我们的代码lint是否通过.

对于一些以前从来没有用过eslint的项目来说.突然引入这种工具.

你可能面临的是把所有文件都按照eslint都格式化一遍.那不是疯了吗?

lint-staged

这里再安利一个工具,可以实现 eslint只检查本次提交的文件. 这样我们就可以做到渐进式的改善我们的代码质量.

安装

npm install lint-staged --save-dev

修改 package.json 配置：

{
 "husky": {
 "hooks": {
 "pre-commit": "lint-staged"
 }
 },
 "lint-staged": {
 "src/**/*.js": "eslint"
 }
}

在lint-staged执行前执行更多的自定义命令

这一点让我非常的喜欢,为我们提供了更多的自由度.

让团队保持Code-Review习惯的三大法宝

Fri, 30 Nov 2018 14:00:00 +0000

之前跟大家聊过代码审查,想要在团队中保持团队代码审查习惯,是相当困难的. 我们必须要有合理的流程,工具与制度的支持,才能基本保证我们代码审查效率与质量.

流程支持:Gitflow

之前有介绍Gitflow的工作流.

大致如下:

开发者在本地仓库中新建一个专门的分支开发功能。
开发者push分支修改到公开的Git仓库中。
开发者通过Git发起一个Merge Request。
团队的其它成员代码审查，讨论并修改。
项目维护者合并功能到官方仓库中并关闭Merge Request。

工具支持

强制使用eslint

强制使用eslint,在代码未提交之前,是用husky等工具做强制eslint. 保证提交之后的代码,必须先过一遍eslint.

规范提交代码的类型

我们自己内部开发了一款简单的命令行工具,可以在我们提交代码的时候,定义本次提交的类型.

方便我们后续在代码审查的时候,更加容易的理解修改的内容.

类型如下

bug修复
新特性
样式修复
代码重构
测试代码
代码回滚
bug修复
文档更新
临时提交

命令行使用方式

? What do you want to do? 代码提交
? 请选择Git提交类型？ (Use arrow keys)
❯ * fixed : bug修复
 * feature : 新特性
 * style : 样式修复
 * refactor : 代码重构
 * test : 测试代码
 * revert : 代码回滚
 * doc : 文档更新
(Move up and down to reveal more choices)

Code Climate

Code Climate是一款代码测试工具,它可以帮助你进行代码冗余检测、质量评估，同时支持多种语言，如PHP, Ruby, JavaScript, CSS, Golang, Python 等。

cheeriojs加载html时中文会默认解析成unicode的问题

Thu, 29 Nov 2018 20:32:05 +0000

cheeriojs 解析中文为unicode问题

在使用cheeriojs的时候我发现,每当使用html方法,中文会默认解析成 unicode.

使用方式如下:

var cheerio = require('cheerio');
var $ = cheerio.load('<title>我是中文,我将会被解析成unicode</title>');
console.log($('title').html());

当使用text方法的时候,并不会出现以上问题

var cheerio = require('cheerio');
var $ = cheerio.load('<title>我是中文,我将会被解析成unicode</title>');
$('title').text()

解决

默认配置

当我们load html内容的时候,其实cheerio是有默认配置的. html解析是使用的htmlparser2这个库,所以htmlparser2的配置在cheerio也是适用的.

var cheerio = require('cheerio');
var $ = cheerio.load('<title>我是中文,我将会被解析成unicode</title>',{
 withDomLvl1: true,
 normalizeWhitespace: false,
 xmlMode: false,
 decodeEntities: true
});

修改默认配置

我们只需要将decodeEntities修改成 false,就可以解决我们的问题.

{
 decodeEntities: false
}

像这样

var cheerio = require('cheerio');
var $ = cheerio.load('<title>我是中文,我将不会被解析成unicode</title>',{
 decodeEntities: false
});

从前端角度来看声明式编程与命令式编程

Mon, 26 Nov 2018 11:46:35 +0000

引入概念

声明式编程：告诉“机器”你想要的是什么(what)，让机器想出如何去做(how)。
命令式编程：命令“机器”如何去做事情(how)，这样不管你想要的是什么(what)，它都会按照你的命令实现。

怎么去解释以上两句话呢?

我们带着这两个概念,用我们最熟悉的技术来解释两种编程范式

声明式编程（Declarative Programming）

告诉“机器”你想要的是什么(what)，让机器想出如何去做(how)。

...more code
</head>

<body>
 <div id="box">声明式编程</div>
</body>
</html>

#box {
 width: 100px;
 height: 100px;
 color: #fff;
 background: #000;
}

命令式编程 (Imperative Programming）

命令“机器”如何去做事情(how)，这样不管你想要的是什么(what)，它都会按照你的命令实现。

var oDIv = document.createElement("div");
var text = document.createTextNode("命令式编程");
oDIv.appendChild(text);
oDIv.id = "box";
oDIv.style.width = 100 + "px";
oDIv.style.height = 100 + "px";
oDIv.style.color = "#FFF";
oDIv.style.background = "#000";
document.body.appendChild(oDIv);

总结

以上两个例子,得到的结果是一模一样的.

在我看来,声明式的背后是代码实现的高度抽象,声明式会让工作得到简化.

Angular模板的安全导航( ?. )

Sun, 25 Nov 2018 22:17:36 +0000

这是非常实用,也是在Angular开发中经常要使用的操作符. 而在react于vue中原生并不自带这样的特性.

安全导航操作符 ( ?. )

在我们日常开发中,在访问属性路径的时候.

如果因为一些客观原因导致了路径中出现了 null,undefined,再往下取值,整个程序就会直接报错.导致程序不能往下运行.

举个例子

var obj ={
 a:1,
 b:{ // 有时候,有可能这个属性不存在
 c:2,
 d:3 
 }
}
obj.a //正常取值
obj.b //如果这个属性有时候不存在,这样取值的话,也只是取到一个 undefined,并不会报错
obj.b.c //当b属性不存在的时候,在undefined下取值,就绝对会造成程序崩溃

安全导航就是要解决以上都问题,我们只要在不确定的属性前的 .改成 ?.就可以不需要报错了,当没有取到值的时候,会默认为空.

{{ obj?.b?.c }}

在写模板的时候是不是很方便呢? 简直不能太棒了好伐~

妈妈再也不用担心后台给的数据很奇怪导致我前端报错了~~~~~

使用Travis CI自动化部署你的Hugo,Hexo博客

Tue, 20 Nov 2018 16:14:25 +0000

Travis CI 是什么?

Travis CI 是在线托管的 CI 服务，用 Travis 来进行持续集成，不需要自己搭服务器。最重要的是，它对开源项目是免费的。如果公司是用的是 gitlab,也有提供相应的持续集成服务.这里就过多赘述.

Travis CI 配置文件

Travis 要求项目的根目录下面，必须有一个.travis.yml文件。

当你的仓库有提交的时候,travis 会自动执行你下面配置的行为.

Travis CI 的钩子与生命周期

Travis 的钩子

Travis 有不同的阶段,他提供了 7 个钩子。

before_install：install 阶段之前执行
before_script：script 阶段之前执行
after_failure：script 阶段失败时执行
after_success：script 阶段成功时执行
before_deploy：deploy 步骤之前执行
after_deploy：deploy 步骤之后执行
after_script：script 阶段之后执行

生命周期

before_install
install
before_script
script
aftersuccess or afterfailure
[OPTIONAL] before_deploy
[OPTIONAL] deploy
[OPTIONAL] after_deploy
after_script

.travis.yml

下面是我的博客部署配置,也是我项目.travis.yml文件的内容.

hugo

这是我的 hugo 部署配置,仅供参考

language: node_js
node_js: 10.13.0
install:
 - wget https://github.com/gohugoio/hugo/releases/download/v0.51/hugo_0.51_Linux-64bit.deb
 - sudo dpkg -i hugo*.deb
 - hugo version
 - rm -rf public
 - npm install

script:
 - hugo --buildFuture
 - gulp
 - echo 'Build done!'
after_success:
 - git config --global user.name "Fan"
 - git config --global user.email "你的邮箱"
 - git clone https://${ACCESS_TOKEN}@github.com/Num142857/alili.tech.git container
 - rm -rf container/*
 - cp -r public/* container
 - cd container
 - git add .
 - git commit -m 'Travis upate blog'
 - git push -u origin gh-pages -f

Hexo

这是我的 hexo 部署配置,仅供参考.

让你的Hugo博客支持echarts图表

Mon, 19 Nov 2018 16:14:25 +0000

在之前hexo构建的博客里,有使用到图表,但是现在迁移到hugo之后,就没有相关的插件支持了.

所以自己动手丰衣足食.

在hugo中有支持一种特性叫做 Shortcodes.简单的来说就是一个可以传参的小模板.

创建Shortcodes

创建 ./layouts/Shortcodes/echarts.html文件

<div id="echarts{{ .Get `height` }}" style="width: 100%;height: {{.Get `height`}}px;margin: 0 auto"></div>
<script src="https://cdn.bootcss.com/echarts/3.8.0/echarts.common.min.js"></script>
<script type="text/javascript">
 // 基于准备好的dom，初始化echarts实例
 var myChart = echarts.init(document.getElementById('echarts{{ .Get `height` }}'));
 // 指定图表的配置项和数据
 var option = JSON.parse({{ .Inner }})
 // 使用刚指定的配置项和数据显示图表。
 myChart.setOption(option);
</script>

使用

在 Shortcodes 插入echarts的配置数据,这样你就可以再页面中看到一个完整的图表了

Time Friend - Be a friend of time, long-term thinking, documenting growth 本文资源来源互联网，仅供学习研究使用，版权归该资源的合法拥有者所有，

效果

Hugo平台博文指定时间之后不显示?

Sun, 18 Nov 2018 16:14:25 +0000

自从博客切换到Hugo之后,是遇到了一些坑.

明明正确添加到文章,页面时间调整到今天,或者是今天之后缺不能显示在文章列表里.

原因是Hugo模板在循环遍历文件的时候,只要超过当前时间的文章都不会出现.

时区问题

如果你的文章时间没有指定时区的话.

像这样2018-11-19 16:14:25,很有可能文章不会显示.

Hugo时间统一为格林威治时间,因为中国的时间比格林威治时间早8个小时. 格林威治时间没有到你配置的时间的时候,文章是不会出现在文章列表里的.

解决方案

本地服务

hugo server --buildFuture

页面生成

hugo --buildFuture

Hugo博客百度SEO终极优化,熊掌号自动推送

Sat, 17 Nov 2018 16:14:25 +0000

在切换到Hugo平台之后,比较头疼的是之前hexo很多seo的插件不能使用了. 下面跟大家说一下我的seo优化方案.

Meta标签优化

Description

meta description，被认为是最有用的meta标签，是网站的简介信息。 content控制在100个字符以内比较好。

<meta name='description' itemprop="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{if .IsPage}}{{substr .Summary 0 100}}{{ end }}{{ end }}">

Keywords

{{ if .Keywords }} 
<meta name="keywords" content="{{ delimit .Keywords ", " }}" >
{{else}}
<meta name="keywords" content="{{ delimit .Site.Params.Keywords ", " }}" >
{{ end }}

百度熊掌号推送

说到seo熊掌号是必不可少的了,他可以做到24小时之内收录.所以这个必须不能放过.

gulp

在这里我要使用gulp来做我的自动化任务管理工具

安装gulp需要的模块

npm init
npm install gulp --save
npm install xml2js --save
npm install xmlhttprequest --save

在项目根目录创建一个`gulpfile.js`文件

// 导入相关依赖
const gulp = require("gulp");
const fs = require('fs');
const xml2js = require('xml2js')
const parser = new xml2js.Parser();
const XMLHttpRequest = require("xmlhttprequest").XMLHttp;


// 注册百度站长与熊掌号,百度会提供下面的数据给你
var xz_appid = 'xxxxx';
var xz_token = 'xxxxx';
var baidu_token= 'xxxxx' 

//熊掌号每天需要提交的url数量
// 注意这个数字必须要跟百度允许提交的url数量一致,如果多了会提交失败.
const xzCount = 20


// 创建一个任务
gulp.task('baiduSeo', () => {
 // 读取sitemap.xml文件并且转换成json
 fs.readFile(__dirname + '/public/sitemap.xml', function(err, data) {
 parser.parseString(data, function (err, result) {
 // 把读取的数据传入这个函数
 urlSubmit(result.urlset.url)
 console.log('Done');
 });
 });
 });

 // 提交url的方法
 function urlSubmit(urls) {
 // 最新内容提交
 var new_target = "http://data.zz.baidu.com/urls?appid="+xz_appid+"&token="+xz_token+"&type=realtime"
 
 // 历史提交
 var history_target = "http://data.zz.baidu.com/urls?appid="+xz_appid+"&token="+xz_token+"&type=batch"

 // 百度站长
 var baidu_target = "http://data.zz.baidu.com/urls?site=https://你的域名&token="+baidu_token

 // MIP
 var MIP_target = "http://data.zz.baidu.com/urls?site=https://你的域名&token="+baidu_token+"&type=mip"

 // AMP
 var AMP_target = "http://data.zz.baidu.com/urls?site=https://你的域名&token="+baidu_token+"&type=amp"

 // 最新url,看熊掌号情况而定
 urls = urls.map(item=>item.loc[0])
 allUrls = urls.join('\n')

 var new_urls_Arr = urls.slice(0,xzCount)
 new_urls= new_urls_Arr.join('\n');

 console.info('百度站长开始提交',new_urls)
 sendData(baidu_target,new_urls,'百度站长提交成功')

 console.info('熊掌号开始提交')
 sendData(new_target,new_urls,'熊掌号提交完成')

 // 提交历史url 每天最多500w条
 console.info("历史数据开始提交")
 sendData(history_target,allUrls,"历史数据提交完成")

 console.info("MIP 开始提交")
 sendData(MIP_target,allUrls,"MIP提交成功")

 console.info("AMP 开始提交")
 sendData(AMP_target,allUrls,"AMP提交成功")

 // 提交数据
 function sendData(target,urls,message){
 var xhr = new XMLHttpRequest();
 xhr.open('POST', target, false);
 xhr.setRequestHeader('Content-type', 'text/plain');
 xhr.onload = function () {
 console.log(this.responseText);
 if(message){console.info(message)}
 };
 xhr.send(urls);
 }

};

gulp.task("default",[
 'baiduSeo'
])

配置好以上都文件之后

博客构建工具Hugo的基本使用

Thu, 15 Nov 2018 16:14:25 +0000

最终还是把博客迁移到了Hugo,当初最纠结的是这套主题在Hugo平台上没有. 但是脑子一热，花了两三天时间。这套主题。全部迁移到了Hugo平台。接下来就给大家介绍一下Hugo的使用以及踩到的坑,以及解决方案.

Hugo的性能

正是因为hexo的性能不能满足,在生成静态文件的时候极其不稳定.而且时间也相对比较长一些. 在相同页面数量的情况下,处理速度hugo是hexo20倍及以上.这才是我换Hugo的原因.

配置文件

两个平台有很多共通的地方,迁移起来有很多工作是非常顺其自然的. 在配置文件上hugo也是可以使用yaml的,所以从hexo迁移过来会相对好很多. 其次hugo还可以使用json作为配置文件,为用户提供了很多选择.

Hugo的基本使用

Mac平台下

Mac下Hugo提供了homebrew安装的方式，非常简便。

brew install hugo

Debian and Ubuntu平台下

sudo apt-get install hugo

Windows平台下

Windows下Hugo提供了Chocolatey方式的安装，通过如下命令即可。

choco install hugo -confirm

验证安装

安转完成后，我们打开终端，输入如下命令进行验证是否安装成功

hugo version

创建一个站点

hugo new site quickstart

添加一个主题

cd quickstart;\
git init;\
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke;\

# 编辑你的 config.toml 配置文件
# 添加一个叫 Ananke 的主题
echo 'theme = "ananke"' >> config.toml

新建一篇文章

hugo new posts/my-first-post.md

本地开启Hugo服务

hugo server -D

构建静态站点

hugo

Hexo Process Out of Memory 内存溢出问题

Tue, 13 Nov 2018 21:32:05 +0000

hexo内存溢出问题

当hexo生成文章大概在1000左右的时候,便有可能出现该问题.

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory

解决方法:

# 找到hexo 命令的位置
which hexo

编辑hexo命令的bin文件的第一行为以下内容.

#!/usr/bin/env node --max_old_space_size=8192

便暂时解决内存溢出的问题.

hexo的性能

hexo的性能相对hugo确实差太多,同样1000+的页面,用hugo却只用了不到2s. 这让我开始开始犹豫是否要放弃使用hexo.

Code-Review工具推荐以及使用报告

Mon, 12 Nov 2018 00:00:00 +0000

随之团队的扩大，统一编码规范，提高编码质量，变得尤为重要。代码审查作为可以有效提高代码质量的方式之一,有必要在公司推行代码审查制度. 让团队养成代码审查的习惯,提高代码质量,提前规避不必要的问题.

为了更加高效的代码审核,需要一款代码审查工具.所以才有了这份使用报告.

下面是我在使用中,尝试使用的一些工具.以及一些使用上的评价与总结.

1) CodeStriker

CodeStriker免费和开源的web应用程序,可以帮助开发人员基于web的代码审查。开发者canensures问题,评论和决策是记录在一个数据库,并提供一个舒适的工作空间实际执行代码检查。

价格: 免费
UI交互: ★
安装维护 :★★★
易学程度: ★★★★★

总结: CodeStriker 对于一个代码审查工具来说,功能上已经可以基本满足.但是因为开发时间太过久远,已经很长时间没有人在维护了,而且UI比较有历史的味道.

2) RhodeCode

RhodeCode也是一个很好的工具,回顾你的代码并找出代码中的bug和问题并删除后检查代码。

价格: 社区版本免费,企业版本收费
UI交互: ★★★★
安装维护 :★★★
易学程度: ★★★★★

总结: RhodeCode在使用使用过程中,还是比较优秀的.工具的安装部署使用docker也比较方便.使用上比较顺畅,可以作为使用的备选软件.

3) Code Brag

Codebrag是一个简单的和轻量级的工具,代码审查,让这一过程为您的团队工作。它有助于解决一些问题像非阻塞的代码评审,智能电子邮件通知,内联注释,喜欢得多。

价格: 免费
UI交互: ★★★★
安装维护 :★★★★
易学程度: ★★★★★

总结: Codebrag 是一款开源工具,安装起来不算难.也有一定程度上的社交属性.在使用期间官网在国内打不开,软件的安装资源不是很好获取.

4) Phabricator

Phabricator是一个开源软件和web应用程序包括代码评审,主持GIT / Hg / SVN,发现错误时,浏览源代码和审计等

如何通过 Code-Review 帮助团队提升代码质量

Thu, 08 Nov 2018 00:00:00 +0000

代码审查解决方案

最近在推进公司的代码审查. 经过几天的研究之后,整理出一些问题与解决方案.

当前面临的问题

没有一个好的工具方便代码审查
没有一个好的代码标准代码审查
没有一个流程强制执行代码审查
没有一个固定职责的人来代码审查
代码审查之后的修改跟踪问题
代码审查者与代码修复者鼓励机制
跨团队资源调配的时候,容易造成过多的代码

解决方案

加入Merge Request工作流

在Gitlab上做代码审查,我们需要在我们现有的git工作流上加入Merge Request.

工作方式

Merge Request可以和功能分支工作流、Gitflow工作流或Forking工作流一起使用。过程是这样的：

开发者在本地仓库中新建一个专门的分支开发功能。
开发者push分支修改到公开的Git仓库中。
开发者通过Git发起一个Merge Request。
团队的其它成员代码审查，讨论并修改。
项目维护者合并功能到官方仓库中并关闭Merge Request。

结合到我们现有工作流当中

我们现在代码管理的工作流叫: Gitflow工作流

Gitflow工作流和功能分支工作流类似，但围绕项目发布定义一个严格的分支模型。

在Gitflow工作流中使用Merge Request让开发者在发布分支或是维护分支上工作时，可以有个方便的地方对关于发布分支或是维护分支的问题进行交流。

Gitflow工作流中Merge Request的使用过程：当一个功能、发布或是热修复分支需要Review时，开发者简单发起一个Merge Request，团队的其它成员会通过Bitbucket收到通知。

新功能一般合并到develop分支，而发布和热修复则要同时合并到develop分支和master分支上。Merge Request可能用做所有合并的正式管理。

审查流程

开始=>start: 代码作者通过git 克隆代码到本地
结束=>end: 结束代码审查
修改代码=>operation: 修改代码并且提交
pr=>operation: 发起 Merge Request
通知=>operation: gitlab 通知相关审核人员
审核=>operation: 审核人员开始审核代码
关闭=>operation: 关闭Merge Request
合并=>operation: 合并代码
代码审核中=>condition: 是否过审

开始->修改代码->pr->通知->审核->代码审核中
关闭->合并->结束
代码审核中(yes)->关闭
代码审核中(no)->修改代码

结合GitLab做代码审查

项目角色介绍

角色	描述
Owner	Git 系统管理员
Master	Git 项目开发人员
Reporter	Git 项目测试人员
Guest	访客

角色权限

升级Mac 10.14 mojave后辅助功能空白无法添加问题

Sun, 04 Nov 2018 22:30:05 +0000

最近系统升级到Mac mojave 10.14后发现安全性与隐私中的辅助功能是空白的,而且App无论如何都添加不了。我的macbook pro正常,但是我的mac mini 出现了该问题.让人很是头疼.

问题原因

应该是升级导致/Library/Application\ Support/com.apple.TCC损坏或权限异常,出现了问题.

解决方法

执行下面两行命令后重启系统,就可以恢复正常.

sudo chmod 777 /Library/Application\ Support/com.apple.TCC
sudo rm -rf /Library/Application\ Support/com.apple.TCC/TCC.db
# 重启系统

2018年11月国内浏览器数据统计

Thu, 01 Nov 2018 00:00:00 +0000

在Webpack与Systemjs中构建你的Single-SPA微前端应用

Wed, 31 Oct 2018 01:00:00 +0000

这里给大家介绍一下基于Single-SPA编写的微前端应用在各种当下流行的构建工具中的使用方法.

Webpack 2+

在Webpack 2+版本中,支持import（）做代码分片. 在其他项目中 webpack2+的使用已经相当的广泛,这里就不做过多赘述.

import {registerApplication} from 'single-spa';

registerApplication('app-name', () => import('./my-app.js'), activeWhen);

function activeWhen() {
 return window.location.pathname.indexOf('/my-app') === 0;
}

SystemJS

在之前我们的项目中使用的就是SystemJS,方便部署应用后的二次构建.用起来页非常的方便.

import {registerApplication} from 'single-spa';

// Import the registered application with a SystemJS.import call
registerApplication('app-name-1', () => SystemJS.import('./my-app.js'), activeWhen);

// Alternatively, use the more out-of-date System.import (instead of SystemJS.import)
registerApplication('app-name-2', () => System.import('./my-other-app.js'), activeWhen);

function activeWhen() {
 return window.location.pathname.indexOf('/my-app') === 0;
}

Webpack 1

Webpack 1 不支持基于Promise的代码拆分.

想要按需加载,就必须在使用中用Promise二次的包装一次require.ensure

import {registerApplication} from 'single-spa';

 //app1 不使用按需加载与代码拆分 :(
import app1 from './app1';

// 不用按需加载与代码拆分,直接注册 :(
registerApplication('app-1', () => Promise.resolve(app1), activeWhen);


// app-2使用依赖加载方法
registerApplication('app-2', app2InPromise, activeWhen);

// 重新包装一次
function app2InPromise() {
 return new Promise((resolve, reject) => {
 require.ensure(['./app-2.js'], require => {
 try {
 resolve(require('./app-2.js'));
 } catch(err) {
 reject(err);
 }
 });
 });
}

function activeWhen() {
 return window.location.pathname.indexOf('/my-app') === 0;
}

Single-SPA微前端框架的使用Demo汇总

Wed, 31 Oct 2018 00:00:00 +0000

这些是在 github 能找到的 single-spa 微前端的 Demo:

single-spa-examples

这是一个 single-spa 做的官方例子,这是在线 demo.

simple-single-spa-webpack-example

这是基于 webpack 构建的使用例子,webpakc 版本可能有点低,但是思想是一样的.

single-spa-angular-cli-examples

基于 angular-cli 做的 angular 例子,适用于 angular 2.0+ 的版本.

single-spa-es5-angularjs

angularjs 的例子,也就是 angularjs1.0 的版本.

single-spa-portal-example

这已经是一个非常完整的多技术栈用例了,里面集成了多技术栈与模块之间通讯的思路,非常值得研究.

microfrontend-base-demo

这是在我们项目中萃取的 base 模块 demo

microfrontend-submodule-demo

这是在我们项目中萃取的子模块 demo

Git删除所有提交记录解决方案

Tue, 30 Oct 2018 19:33:33 +0000

如果你之前的项目提交了一些敏感数据,或者要清除以前提交的记录,给出下面解决方案.

# 1. 检出一个新的分支
git checkout --orphan latest_branch

# 2. 暂存所有文件
git add -A

# 3. 提交刚刚暂存的文件
git commit -am "commit message"


# 4. 删除最原始的分支
git branch -D master

# 5. 重命名当的第分支
git branch -m master

# 6. 提交你的记录到远程仓库
git push -f origin master

让你的Hexo博客支持熊掌号URL自动推送,百度24小时收录

Wed, 24 Oct 2018 21:32:05 +0000

百度推出熊掌号,为了让 hexo 支持熊掌号推送,我在 hexo-baidu-url-submit 这个插件的基础上加上了熊掌号推送功能. 当天推送的 24 小时内会直接收录. 用这个,百度的收录速度是非常快的.

以后再也不用等百度收录等到死也不会理你了.

熊掌号支持

package.json 里面的内容改为

 "hexo-baidu-url-submit": "https://github.com/Num142857/hexo-baidu-url-submit",

baidu_url_submit 配置

baidu_url_submit:
 count: 1000 ## 提交最新的一个链接
 host: time-friend.com ## 在百度站长平台中注册的域名
 token: xxxxx ## 请注意这是您的秘钥， 所以请不要把博客源代码发布在公众仓库里!
 path: baidu_urls.txt ## 文本文档的地址， 新链接会保存在此文本文档里
 xz_appid: 'xxxxxx' ## 你的熊掌号 appid
 xz_token: 'xxxxxx' ## 你的熊掌号 token
 xz_count: 10 ## 从所有的提交的数据当中选取最新的10条,该数量跟你的熊掌号而定

deploy 配置

deploy:
- type: baidu_url_submitter # 百度
- type: baidu_xz_url_submitter # 百度熊掌号

Node.js爬虫技巧-使用Puppeteer下载图片或文件

Tue, 23 Oct 2018 20:32:05 +0000

一些网站的图片不允许外链,我们想要下载这些网站的图片通过Puppeteer是比较好解决的. 今天就给大家介绍一个爬虫技巧,通过Puppeteer下载你想要的图片或者文件.

怎么通过Puppeteer下载?

我们需要额外依赖的库 fs-extra

代码很简单,主要代码可以简化到两三行

 const fse = require('fs-extra'); // 需要依赖的库,你想用原生fs也是没有问题的

 // 主要代码
 var viewSource = await page.goto(url);
 await fse.outputFile(`path`, await viewSource.buffer()) //下载到你想要的路径

任天堂Switch 6.0+ 系统菜单汉化

Mon, 15 Oct 2018 19:02:36 +0000

任天堂Switch汉化补丁

仅支持6.0 和6.0.1系统
简体中文/繁体中文
支持大气层、ReiNX、RajNX、SXOS（TXOS）

下载地址

汉化安装器

汉化安装器：https://share.weiyun.com/5HNlw1J （强烈推荐）

覆盖版：（当安装器闪退时使用，覆盖前要把原来的文件删干净。）

简体中文：https://share.weiyun.com/59MqPxr
繁体中文：https://share.weiyun.com/52w0vp8

ReiNX汉化专用版本：

完整支持汉化，已经修复DOOM和2K19的问题 https://share.weiyun.com/58azYtc

源码来自https://github.com/Reisyukaku/ReiNX

地址覆盖

大气层覆盖到atmosphere/titles
ReiNX覆盖到ReiNX/titles
SXOS覆盖到sxos/titles

汉化安装器教程：

首先，用读卡器把SD卡插入电脑。
打开SD卡的盘。
把Nintendo Switch系统汉化补丁.exe 放入卡内。
运行Nintendo Switch系统汉化补丁.exe
看提示选择。

FAQ

汉化影响游戏吗？

一般汉化导致游戏崩溃是文本出错的原因，新的汉化已经修复大部分的问题。当然实际效果仍需测试。

5.1系统能用吗？

虽然5.1系统安装6.0的汉化可以开机。但不保证稳定性。也不保证能用。

安装程序打不开怎么办？

安装 Visual C++ Redistributable for Visual Studio 2015 安装程序不支持32位系统，所以用覆盖版就行。

安装汉化后无法开机怎么办？

别急，卸载汉化即可，不会影响原系统。

部分游戏崩溃的问题

如果你的游戏本身打了汉化补丁，是有可能崩溃的（目前已知龙珠超宇宙2）。

部分游戏崩溃是破解工具本身的问题。比如SXOS2.0极不稳定。大气层某些游戏无法运行与存档。如果你用的是SXOS 2.xx ，运行XCI游戏有很大几率崩溃，应该与汉化无关。

SXOS (2.0, 2.0.1, 2.1) XCI游戏待机死机的问题如果你的游戏本身使用了汉化，待机很大几率死机。与系统汉化无关。

关于6.0.1系统

根据测试，6.0.1系统没有对文本做改动，所以6.0的汉化是完全可以兼容的。

注意事项

文件拷贝不建议使用mac系统!!!
文件拷贝不建议使用mac系统!!!
文件拷贝不建议使用mac系统!!!

参考资料

https://www.91wii.com/forum.php?mod=viewthread&tid=96891

Switch的NSP和XCI什么区别？

Sun, 14 Oct 2018 19:02:36 +0000

最近在折腾Switch, 在游戏安装中出现了两种游戏格式,分别是

他们之间到底有什么区别?

在实际使用中: xci，扔到内存卡里就可以使用, nsp，需要安装之后才能使用简单理解就是，xci是绿色版软件（正确说应该是ISO），nsp是安装版软件。

因为xci相当于卡带，不需要安装，需要切换. nsp相当于数字版，需要安装，安装完直接能玩

所有的DLC或者更新包之类的都是nsp格式.

当我们使用xci格式的软件的时候,想要安装更新升级包的时候,其实都是nsp格式的,直接安装nsp效果都是一样的.

平常使用中,我喜欢nsp,安装过后就可以直接打开软件了,不需要再切换一次.个人觉得使用nsp是一劳永逸的.

关于汉化

其实都是可以汉化的.两种格式只有使用上的差别,其他的并没有差别.

Nintendo Switch破解原理

Thu, 11 Oct 2018 19:02:36 +0000

Nintendo Switch

Nintendo Switch ，是任天堂出品的电子游戏机，于2017年3月3日在日本、北美、欧洲和香港发售，同年12月1日在韩国与台湾发售。拥有可拆卸控制器和可分离式主机，游戏载体使用了专用卡匣。主机处理器使用了NVIDIA定制的Tegra X1系统芯片，这是任天堂首次采用NVIDIA的系统芯片。任天堂Switch主机的内置存储空间为32GB，可使用microSD进行扩充，最高支持microSDXC标准，最大支持2TB容量；主机在初始系统1.0.0时只能支持到microSD标准，发售同日提供的系统2.0 .0更新使其可支持microSDXC标准。

破解原理

Nintendo Switch（任天堂switch）的CPU使用的是Nvidia X1 T210的处理器，存在一个可进入的工程模式（Recovery Mode），简称RCM， Nintendo Switch的右joycon连接口中隐藏着一个特殊金属引脚（pin10）。如果在开机时，按住音量键+，并且将这个引脚接地（pin1,7,9），Nintendo Switch就能进入工程模式（RCM），从而设法运行自制代码。

你可以在淘宝上轻易买到这个短接器。也可以通过锡纸，别针或者3D打印等很方便的制作。短接器的作用就是将这个特殊引脚接地。由上可知， Nintendo Switch破解依赖的是基于Nvidia X1 T210的处理器的工程模式。注入（发射）特殊代码引导自制系统或程序。达成破解。

这个方法不会被封堵，普通的系统更新补并不会影响破解。无法通过软件层面封堵。因为工程模式启动的优先级高于系统。不论以后更新什么系统，进入RCM（工程模式是没有问题的），在即将到来的6.0版本，也只是更改了游戏文件的存储方式，变相的防范破解，目前TX1.9版本已经加入了破解。

正因为破解是基于开机短接进入工程模式的原理，在任意一次关机后，破解就会失效，需要重新进行破解。

破解后可做什么，有没有什么问题

Nintendo Switch 的系统本质上可以看作是一个改版的LINUX的操作系统，.通过破解后，编译新的程序，可以Dump你手中的实体卡带游戏，导出存档，甚至可以看小说，听音乐，作为其他游戏主机的模拟器。玩破解游戏只是其中的一个功能。所以，在放入存储卡时候，因为系统格式化的不同，也会存在一次升级的情况，这是由于不同系统对于文件存储分区的逻辑不同导致的。

扩展阅读：破解后您可以安装一个真正的发行版的Linux系统Lakka，

着力推荐国内开发者的Lakka系统，这是独立于国外的一个项目，让我们感谢他。最强模拟器系统 lakka修改模拟游戏分辨率和纹理和安装教程 https://www.91wii.com/thread-96053-1-1.html

关于BAN机

由于任天堂在联网时会验证游戏文件头（每个游戏的文件头都是唯一的），所以玩破解游戏，修改存档等，都会导致被Ban，目前主要体现为两种，普通BAN：具体的表现为无法联机游戏，无法进Eshop（商店），同时会由错误代码出现，但是目前游戏正常更新（例如更新中文语言）并不受影响。您可以理解为Ban机是限制了网络功能。更为严厉的ban机措施，大家称之为Super Ban，具体的表现为联网后出现错误代码2137-7403，同时主机无法更新，游戏和dlc也无法更新，也就说，任天堂将你的主机序列号加入黑名单，直接断开所有同任天堂的联系。

您可以破解之后，进行系统备份。但目前已经出现有朋友因为不熟悉备份恢复流程变砖，所以这里不放链接，如果您要做这个事情，记得“一机一码”，自己的备份文件只能自己用，不能用别人的。同时恢复分区的时候，要留意不要恢复错的文件，一旦误操作，是不可恢复的变砖。

我更建议，破解后断开网络，等要联网之前，重置主机再联网，可以大概率从正。这个风险较小。

破解方式

目前，Nintendo Switch的破解存在两个大的分支。一类是免费的大气层/REI/破解TX安装器等。此类只能支持NSP格式游戏安装。略微复杂一类是收费的TX OS。此类支持卡带DUPM出来的XCI格式，同时支持NSP安装。

因为代码公开，所以破解方式也变得逐渐多样化，希望您了解具体原理，而不是纠结于具体哪种破解方式，大致来说，论坛中简单热门的就是最好的破解方式。论坛中有不少不错的整合包，您可以任选其一进行安装。

参考资料: https://www.91wii.com/thread-93105-1-1.html

使用Eggjs(koa) & web3.js开发你的以太坊Dapp

Wed, 10 Oct 2018 19:33:33 +0000

Eggjs

Eggjs 是阿里开源的企业级基于 Koa2 的 Node.js 框架. eggjs 基本上是开箱即用,奉行『约定优于配置』.在日常开发中,用起来非常顺畅. 而且生态也比较完善,koa2 的插件都可以对接到框架中来.

Egg.js 目录结构

egg-project
├── package.json
├── app.js (可选)
├── agent.js (可选)
├── app
| ├── router.js
│ ├── controller
│ | └── home.js
│ ├── service (可选)
│ | └── user.js
│ ├── middleware (可选)
│ | └── response_time.js
│ ├── schedule (可选)
│ | └── my_task.js
│ ├── public (可选)
│ | └── reset.css
│ ├── view (可选)
│ | └── home.tpl
│ └── extend (可选)
│ ├── helper.js (可选)
│ ├── request.js (可选)
│ ├── response.js (可选)
│ ├── context.js (可选)
│ ├── application.js (可选)
│ └── agent.js (可选)
├── config
| ├── plugin.js
| ├── config.default.js
│ ├── config.prod.js
| ├── config.test.js (可选)
| ├── config.local.js (可选)
| └── config.unittest.js (可选)
└── test
 ├── middleware
 | └── response_time.test.js
 └── controller
 └── home.test.js

如上，由框架约定的目录：

2018年10月国内浏览器数据统计

Mon, 01 Oct 2018 00:00:00 +0000

Centos7环境下启动Upsource失败解决办法

Sat, 29 Sep 2018 19:33:33 +0000

报错

Centos7环境下启动Upsource的时候出现以下报错,我在Mac上启动upsource的时候一切正常.

[Upsource Error] Failed to start JetBrains Upsource 2018.2 due to unexpected exception: Native random generator does not seem to have enough entropy for JetBrains Upsource 2018.2 to start. [Upsource Error] You can fix it by switching to PRNG (with -Djava.security.egd=/dev/zrandom) or by reconfiguring your operation system to provide more random bits.12

解决办法

复制 upsource.jvmoptions.dist ==> upsource.jvmoptions

cp $upsource_path/conf/upsource.jvmoptions.dist $upsource_path/conf/upsource.jvmoptions

编辑 $upsource_path/conf/upsource.jvmoptions文件,最后一行加上:

-Djava.security.egd=/dev/zrandom

启动

$upsource_path/bin/upsource.sh start

利用ngrok给你的机器打个洞 - 内网穿透

Wed, 12 Sep 2018 00:00:00 +0000

我有很多自己的个人代码是跑在家里的服务器中的.一般来说都是自动化的处理我的一些生活问题,与数据收集等相关活动. 所以一般没有客户端访问家里服务器的需求. 但是很多时候脑子突发奇想.有一些小点子,一些小的bug或者小的优化,代码修改完成之后,有一个部署到需求. 因为家里服务器没有一个稳定的外网IP的,外网不能直接连接服务器. 所以我们需要 内网穿透.

内网穿透

家里用的是小米路由器,小米路由器里面集成了花生壳,理论上是可以做到内网穿透的.无奈的是,一直都没有配置成功过.

网上找过很多内网穿透的工具:

花生壳
NAT
frp
ngrok
localtunnel

ngrok

选择ngrok的原因很简单,配置方便,并且支持tcp协议. 支持tcp协议代表,我可以直接在外面用SSH来访问家里的机器.

用法

首先你需要去官网注册一个账号
下载ngrok,并且解压到一个你喜欢的目录下面
去官网复制你的授权码
授权ngrok

ngrok authtoken 授权码

http

ngrok http 8080

tcp

ngrok tcp 22

最终你会得到,一个外网可以访问的地址. 用这个地址就可以直接访问到你本机的端口了.

当我们拥有这样一个公网地址之后,我们就可以ssh来控制家里的机器或者使用github的webhook来做一切你想要做的事情.

前端微服务化解决方案8 - 二次构建

Fri, 07 Sep 2018 01:00:00 +0000

二次构建

进一步优化我们的微前端性能

在微前端这种形势的架构,每个模块都会输出固定的文件,比如之前说的:

项目配置文件
Store.js 文件
main.js 渲染入口文件

这三个,是微前端架构中每个模块必要的三个文件.

在模块加载器启动整个项目的时候,都必须要加载所有模块的配置文件与 Store.js 文件. 在前面的文章中有说 配置自动化的问题,这其实就是一种简单的二次构建. 虽然每一个模块的配置文件体积不是很大,但是每一个文件都会加载,是项目启动的必要文件. 每一个文件都会占一个 http 请求,每一个文件的阻塞都会影响项目的启动时间.

所以,我们的Store.js也必须是要优化的. 当然如果我们的模块数量不是很多的话,我们没有优化的必要.但是一旦项目变得更加庞大,有好几十个模块. 我们不可能一次加载几十个文件,我们必须要在项目部署之后,还要对整个项目重新再次构建来优化与整合我们的项目.

我们的 Store.js 是一个 amd 模块,所以我们需要一个合并 amd 模块的工具.

Grunt or Gulp

像这样的场景,用 grunt,gulp 这样的任务管理工具再合适不过了. 不管这两个工具好像已经是上个世纪的东西了,但是他的生态还是非常完善的.用在微前端的二次构建中非常合适.

例如 Gulp:

const gulp = require("gulp");
const concat = require("gulp-concat");

gulp.task("storeConcat", function () {
 gulp
 .src("project/**/Store.js")
 .pipe(concat("Store.js")) //合并后的文件名
 .pipe(gulp.dest("project/"));
});

像这样的优化点还有非常多,在项目发布之后,在二次构建与优化代码. 在后期庞大的项目中,是有很多空间来提升我们项目的性能的.

未完待续 …

前端微服务化解决方案 1 - 思考

前端微服务化解决方案 2 - Single-SPA

前端微服务化解决方案 3 - 模块加载器

前端微服务化解决方案7 - 静态数据共享

Thu, 06 Sep 2018 01:00:00 +0000

在前面的一些介绍,相信你对微前端已经有了一个相对完整的认知. 下面介绍一下,再开发过程中我的一些小技巧与处理方法.

动态入口

当有新的子模块会挂载到项目中的时候,在 UI 中肯定需要一个新的入口进入子模块的 UI. 而这样一个入口,是需要动态生成的.

例如:图中左边的菜单,不应该是代码写死的.而是根据每个模块提供的数据自动生成的.

不然每次发布新的模块,我们都需要在最外面的这个框架修改代码.这样就谈不上什么独立部署了.

静态数据共享

想要达到上面所的效果,我们可以这样做.

// ~/common/menu.js

import { isUrl } from '../utils/utils'
let menuData = [
 {
 name: '模块1',
 icon: 'table',
 path: 'module1',
 rank: 1,
 children: [
 {
 name: 'Page1',
 path: 'page1',
 },
 {
 name: 'Page2',
 path: 'page2',
 },
 {
 name: 'Page3',
 path: 'page3',
 },
 ],
 }
]
let originParentPath = '/'
function formatter(data, parentPath = originParentPath, parentAuthority) {
 ...
}

// 在这里,我们对外导出 这个模块的菜单数据
export default menuData

// Store.js
import { createStore, combineReducers } from 'redux'
import menuDate from './common/menu'
import createHistory from 'history/createBrowserHistory'
const history = createHistory()
...

// 我们拿到数据之后,用一个reducer函数返回我们的菜单数据.
function menu() {
 return menuDate
}

...


// 最终以Store.js对外导出我们的菜单数据,在注册的时候,每个应用都可以拿到这个数据了
export const storeInstance = createStore(combineReducers({ namespace: () => 'list', menu, render, to }))

当我们的 Base 模块,拿到所有子模块的菜单数据,把他们合并后,就可以渲染出正确的菜单了.

前端微服务化解决方案6 - 构建与部署

Wed, 05 Sep 2018 01:00:00 +0000

微前端打包构建

微前端项目的打包,是有一些需要注意的点以 webpack 为例:

amd 模块

在之前的文章,我们有提到我们的加载器,是基于 System.js 来做的. 所以我们微前端的模块最终打包,是要符合模块规范的. 我们使用的是amd模块规范来构建我们的模块.

指定基础路径

因为模块打包后,调用模块出口文件的,是模块加载器. 为了清晰的管理每个模块,并且正确的加载到我们每一个模块的资源, 我们给模块的资源都指定一个publicPath.

下面给出一个简单的 webpack 配置,这些配置我只是列出一些必要选项. 并不是一个完整的 webpack 配置,后续我会提供完整的微前端的 Demo,提供大家参考这些配置都是基于 create-react-app 的配置做的修改. 只要明白了配置的意图,明白我们打包出来的最终是一个什么样的包, 不管打包工具以后怎么变,技术栈怎么变,最后都是可以对接到微前端中来.

这里给出 project.json 的内容,便于后面的配置文件的阅读

// project.json
{
 "name": "name", //模块名称
 "path": "/project", //模块url前缀
 "prefix": "/module-prefix/", //模块文件路径前缀
 "main": "/module-prefix/main.js", //模块渲染出口文件
 "store": "/module-prefix/store.js",//模块对外接口
 "base": true // 是否为baseapp
 }


// 引入项目配置文件,也是前面说的 模块加载器必要文件之一
const projectConfig = require('./project.json')

let config = {
 entry: {
 main: paths.appIndexJs, //出口文件,模块加载器必要文件之一
 store: paths.store // 对外api的reducer文件,模块加载器必要文件之一
 },
 output: {
 path: paths.appBuild,
 filename: '[name].js?n=[chunkhash:8]',
 chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
 publicPath: projectConfig.prefix, //在output中指定模块配置好的 publicPath
 libraryTarget: 'amd', //对外输出 amd模块,便于 system.js加载
 library: projectConfig.name, //模块的名称
 },
 },
 module: {
 rules: [
 {
 oneOf: [
 {
 test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
 // loader: 'happypack/loader?id=url',
 loaders: [{
 loader: require.resolve('url-loader'),
 options: {
 limit: 5000,
 name: 'static/media/[name].[hash:8].[ext]',
 publicPath: projectConfig.prefix, //我们需要在静态文件的loader加上publicPath
 },
 }]
 },
 {
 test: /\.(js|jsx|mjs)$/,
 include: paths.appSrc,
 loader: 'happypack/loader?id=babel',
 options: {
 name: 'static/js/[name].[hash:8].[ext]',
 publicPath: projectConfig.prefix, //在静态文件的loader加上publicPath
 },
 },
 {
 loader: require.resolve('file-loader'),
 exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
 options: {
 name: 'static/media/[name].[hash:8].[ext]',
 publicPath: projectConfig.prefix, //在静态文件的loader加上publicPath
 },
 },
 ],
 },
 ],
 },
}

部署

前端单页面的部署,不管怎么自动化,工具怎么变. 都是把打包好的静态文件,放到服务器的正确位置下. 微前端的部署,是一个应用聚合的过程,我们如何把一个个模块最后接入到一个完整的项目中的呢?

前端微服务化解决方案5 - 路由分发

Tue, 04 Sep 2018 01:00:00 +0000

路由分发式微前端

从应用分发路由到路由分发应用

用这句话来解释,微前端的路由,再合适不过来.

路由分发式微前端，即通过路由将不同的业务分发到不同的、独立前端应用上。其通常可以通过 HTTP 服务器的反向代理来实现，又或者是应用框架自带的路由来解决。就当前而言，通过路由分发式的微前端架构应该是采用最多、最易采用的 “微前端” 方案。但是这种方式看上去更像是多个前端应用的聚合，即我们只是将这些不同的前端应用拼凑到一起，使他们看起来像是一个完整的整体。但是它们并不是，每次用户从 A 应用到 B 应用的时候，往往需要刷新一下页面。 – 引用自 phodal 微前端的那些事儿

在模块加载器那一章的示例代码,已经非常充分了展示了路由分发应用的步骤.

在单页面前端的路由,目前有两种形式, 一种是所有主流浏览器都兼容多 hash 路由, 基本原理为 url 的 hash 值的改变,触发了浏览器 onhashchange 事件,来触发组件的更新

还有一种是高级浏览器才支持的 History API, 在 window.history.pushState(null, null, "/profile/");的时候触发组件的更新

// hash 模式,项目路由用的是hash模式会用到该函数
export function hashPrefix(app) {
 return function (location) {
 let isShow = false;
 //如果该应用 有多个需要匹配的路劲
 if (isArray(app.path)) {
 app.path.forEach((path) => {
 if (location.hash.startsWith(`#${path}`)) {
 isShow = true;
 }
 });
 }
 // 普通情况
 else if (location.hash.startsWith(`#${app.path || app.url}`)) {
 isShow = true;
 }
 return isShow;
 };
}

// pushState 模式
export function pathPrefix(app) {
 return function (location) {
 let isShow = false;
 //如果该模块 有多个需要匹配的路径
 if (isArray(app.path)) {
 app.path.forEach((path) => {
 if (location.pathname.indexOf(`${path}`) === 0) {
 isShow = true;
 }
 });
 }
 // 普通情况
 else if (location.pathname.indexOf(`${app.path || app.url}`) === 0) {
 isShow = true;
 }
 return isShow;
 };
}

// 应用注册
export async function registerApp(params) {
 // 第三个参数为,该模块是否显示
 singleSpa.registerApplication(
 params.name, // 模块名字
 () => SystemJS.import(params.main), // 模块渲染的入口文件
 params.base ? () => true : pathPrefix(params) // 模块显示的条件
 );
}

路由分发应用

当 url 前缀,与配置中的 url 前缀保持一致的时候, singleSpa 会激活对应的模块,然后把模块内容渲染出来.

前端微服务化解决方案4 - 消息总线

Mon, 03 Sep 2018 01:00:00 +0000

微前端的消息总线,主要的功能是搭建模块与模块之间通讯的桥梁.

黑盒子

问题 1:

应用微服务化之后,每一个单独的模块都是一个黑盒子, 里面发生了什么,状态改变了什么,外面的模块是无从得知的. 比如模块A想要根据模块B的某一个内部状态进行下一步行为的时候,黑盒子之间没有办法通信.这是一个大麻烦.

问题 2

每一个模块之间都是有生命周期的.当模块被卸载的时候,如何才能保持后续的正常的通信?

ps. 我们必须要解决这些问题,模块与模块之间的通讯太有必要了.

打破壁垒

在 github 上single-spa-portal-example,给出来一解决方案.

基于 Redux 实现前端微服务的消息总线(不会影响在编写代码的时候使用其他的状态管理工具).

大概思路是这样的:

每一个模块,会对外提供一个 Store.js.

这个文件里面的内容,大致是这样的.

import { createStore, combineReducers } from "redux";

const initialState = {
 refresh: 0,
};

function render(state = initialState, action) {
 switch (action.type) {
 case "REFRESH":
 return { ...state, refresh: state.refresh + 1 };
 default:
 return state;
 }
}

// 向外输出 Store
export const storeInstance = createStore(
 combineReducers({ namespace: () => "base", render })
);

对于这样的代码,有没有很熟悉? 对,他就是一个普通的 Store 文件, 每一个模块对外输出的Store.js,就是一个模块的 Store.

Store.js 如何被使用?

我们需要在模块加载器中,导出这个 Store.js

于是我们对模块加载器中的Register.js文件 (该文件在上一章出现过,不懂的同学可以往回看)

进行了以下改造:

前端微服务化解决方案3 - 模块加载器

Mon, 03 Sep 2018 00:00:00 +0000

微前端的模块加载器,主要功能为:

项目配置文件的加载
项目对外接口文件的加载(消息总线会用到,后续会提)
项目入口文件的加载

以上也是每一个单模块,不可缺少的三部分

配置文件

我们实践微前端的过程中,我们对每个模块项目,都有一个对外的配置文件. 是模块在注册到 singe-spa 时候所用到的信息.

{
 "name": "name", //模块名称
 "path": "/project", //模块url前缀
 "prefix": "/module-prefix/", //模块文件路径前缀
 "main": "/module-prefix/main.js", //模块渲染出口文件
 "store": "/module-prefix/store.js",//模块对外接口
 "base": true
 // 当模块被定性为baseApp的时候,
 // 不管url怎么变化,项目也是会被渲染的,
 // 使用场景为,模块职责主要为整个框架的布局或者一直被渲染,不会改变的部分
 }

当我们的模块,有多种 url 前缀的时候,path 也可以为数组形式

{
 "path": ["/project-url-path1/","/project-url-path2/"], //项目url前缀
 }

配置自动化

我们每个模块都有上面所描述的配置文件,当我们的项目多个模块的时候,我们需要把所有模块的配置文件聚合起来. 我这里也有写一个脚本.

micro-auto-config

使用方法:

npm install micro-auto-config -g

# 在项目根目录,用pm2启动该脚本,便可启动这个项目的配置自动化
pm2 start micro-auto-config

大概思路是:当模块部署,服务器检测到项目文件发生改变,便开始找出所有模块的配置文件,把他们合并到一起. 以数组包对象的形式输出一个总体的新配置文件 project.config.js. 当我们一个模块配置有更新,部署到线上的时候,项目配置文件会自动更新.

模块加载器

这个文件直接引入到 html 中,也就是上一篇文章中的single-spa-config.js 升级版. 在加载模块的时候,我们使用 SystemJS 作为我们的模块加载工具.

"use strict";
import "../libs/es6-promise.auto.min";
import * as singleSpa from "single-spa";
import { registerApp } from "./Register";

async function bootstrap() {
 // project.config.js 文件为所有模块的配置集合
 let projectConfig = await SystemJS.import("/project.config.js");

 // 遍历,注册所有模块
 projectConfig.projects.forEach((element) => {
 registerApp({
 name: element.name,
 main: element.main,
 url: element.prefix,
 store: element.store,
 base: element.base,
 path: element.path,
 });
 });

 // 项目启动
 singleSpa.start();
}

bootstrap();

Register.js

import "../libs/system";
import "../libs/es6-promise.auto.min";
import * as singleSpa from "single-spa";

// hash 模式,项目路由用的是hash模式会用到该函数
export function hashPrefix(app) {
 return function (location) {
 let isShow = false;
 //如果该应用 有多个需要匹配的路劲
 if (isArray(app.path)) {
 app.path.forEach((path) => {
 if (location.hash.startsWith(`#${path}`)) {
 isShow = true;
 }
 });
 }
 // 普通情况
 else if (location.hash.startsWith(`#${app.path || app.url}`)) {
 isShow = true;
 }
 return isShow;
 };
}

// pushState 模式
export function pathPrefix(app) {
 return function (location) {
 let isShow = false;
 //如果该模块 有多个需要匹配的路径
 if (isArray(app.path)) {
 app.path.forEach((path) => {
 if (location.pathname.indexOf(`${path}`) === 0) {
 isShow = true;
 }
 });
 }
 // 普通情况
 else if (location.pathname.indexOf(`${app.path || app.url}`) === 0) {
 isShow = true;
 }
 return isShow;
 };
}

// 应用注册
export async function registerApp(params) {
 singleSpa.registerApplication(
 params.name,
 () => SystemJS.import(params.main),
 params.base ? () => true : pathPrefix(params)
 );
}

//数组判断 用于判断是否有多个url前缀
function isArray(o) {
 return Object.prototype.toString.call(o) == "[object Array]";
}

未完待续 …

前端微服务化解决方案2 - Single-SPA

Sun, 02 Sep 2018 22:17:36 +0000

技术选型

经过各种技术调研我们最终选择的方案是基于 Single-SPA 来实现我们的前端微服务化.

你的浏览器不支持视频

Single-SPA

一个用于前端微服务化的 JavaScript 前端解决方案

使用 Single-SPA 之后,你可以这样做:

(兼容各种技术栈)在同一个页面中使用多种技术框架(React, Vue, AngularJS, Angular, Ember 等任意技术框架),并且不需要刷新页面.
(无需重构现有代码)使用新的技术框架编写代码,现有项目中的代码无需重构.
(更优的性能)每个独立模块的代码可做到按需加载,不浪费额外资源.
每个独立模块可独立运行.

下面是一个微前端的演示页面 (你可能需要科学的上网) https://single-spa.surge.sh/

以上是官方例子,但是官方例子中并没有解决一个问题.就是各种技术栈的路由实现方式大相径庭,如何做到路由之间的协同? 后续文章会讲解,如何解决这样的问题.

单体应用对比前端微服务化

普通的前端单体应用

微前端架构

Single-SPA 的简单用法

1.创建一个 HTML 文件

<html>
 <body>
 <div id="root"></div>
 <script src="single-spa-config.js"></script>
 </body>
</html>

2.创建 single-spa-config.js 文件

// single-spa-config.js
import * as singleSpa from "single-spa";

// 加载react 项目的入口js文件 (模块加载)
const loadingFunction = () => import("./react/app.js");

// 当url前缀为 /react的时候.返回 true (底层路由)
const activityFunction = (location) => location.pathname.startsWith("/react");

// 注册应用
singleSpa.registerApplication("react", loadingFunction, activityFunction);

//singleSpa 启动
singleSpa.start();

封装 React 项目的渲染出口文件

我们把渲染 react 的入口文件修改成这样,便可接入到 single-spa

前端微服务化解决方案1 - 思考

Sat, 01 Sep 2018 22:17:36 +0000

近几年,微服务架构在后端技术社区大红大紫,它被认为是 IT 软件架构的未来技术方向.我们如何借鉴后端微服务的思想来构建一个现代化前端应用? 在这里我提供一个可以在产品中真正可以落地的前端微服务解决方案.

微服务化后端前后端对比

后端微服务化的优势:

复杂度可控: 体积小、复杂度低，每个微服务可由一个小规模开发团队完全掌控，易于保持高可维护性和开发效率。
独立部署: 由于微服务具备独立的运行进程，所以每个微服务也可以独立部署。
技术选型灵活: 微服务架构下，技术选型是去中心化的。每个团队可以根据自身服务的需求和行业发展的现状，自由选择最适合的技术栈。
容错: 当某一组建发生故障时，在单一进程的传统架构下，故障很有可能在进程内扩散，形成应用全局性的不可用。
扩展: 单块架构应用也可以实现横向扩展，就是将整个应用完整的复制到不同的节点。

前端微服务化后的优势:

复杂度可控: 每一个 UI 业务模块由独立的前端团队开发,避免代码巨无霸,保持开发时的高速编译,保持较低的复杂度,便于维护与开发效率。
独立部署: 每一个模块可单独部署,颗粒度可小到单个组件的 UI 独立部署,不对其他模块有任何影响。
技术选型灵活: 也是最具吸引力的,在同一项目下可以使用如今市面上所有前端技术栈,也包括未来的前端技术栈。
容错: 单个模块发生错误,不影响全局。
扩展: 每一个服务可以独立横向扩展以满足业务伸缩性，与资源的不必要消耗；

我们何时需要前端微服务化?

项目技术栈过于老旧,相关技能的开发人员少,功能扩展吃力,重构成本高,维护成本高.
项目过于庞大,代码编译慢,开发体差,需要一种更高维度的解耦方案.
单一技术栈无法满足你的业务需求

其中面临的问题与挑战

我们即将面临以下问题:

我们如何实现在一个页面里渲染多种技术栈?
不同技术栈的独立模块之间如何通讯?
如何通过路由渲染到正确的模块?
在不同技术栈之间的路由该如何正确触发?
项目代码别切割之后,通过何种方式合并到一起?
我们的每一个模块项目如何打包?
前端微服务化后我们该如何编写我们的代码?
独立团队之间该如何协作?

后续的文章我会一一解答以上问题,一起挖掘前端微服务的潜力. 跳出概念,实实在在的落地到你的项目中. 未完待续 …

前端微服务化解决方案 1 - 思考

前端微服务化解决方案 2 - Single-SPA

前端微服务化解决方案 3 - 模块加载器

前端微服务化解决方案 4 - 消息总线

前端微服务化解决方案 5 - 路由分发

2018年09月国内浏览器数据统计

Sat, 01 Sep 2018 00:00:00 +0000

Network笔记整理 - 网络协议与网络分层

Thu, 30 Aug 2018 00:00:00 +0000

《圣经》中有一个通天塔的故事,上帝为了阻止人类联合起来，就让人类说不同的语言。人类没法儿沟通，达不成“协议”，通天塔的计划就失败了。

千年之后,一群工程师为了解决这一问题,制定了各种协议与标准,让各种设备可以通过协议通信,进而通过互联网实现了让世界互联.

就像我们现在写的代码,用着通用的程序语言,世界也就随之打通了.我们的计算机语言也算是一种协议.

想要让世界互联,让计算机们都联合起来,就必须要用到网络协议让他们相互协作,来完成共同的目标.

协议三要素

(1) 语义。每一段内容需要代表某种意义 (2) 语法。每一段内容符合一定规则的格式, (3) 时序。每一段任务的执行顺序.

网络分层

网络分层就是将网络节点所要完成的数据的发送或转发、打包或拆包，控制信息的加载或拆出等工作，分别由不同的硬件和软件模块去完成。

简单的来说一个完整的HTTP请求,途中需要经过数次传送,期间需要不通的都软件与硬件模块去完成相应的工作. 我们对相应的阶段的不通特性做出来相应的分类.每种网络分层,都有相应的协议标准做数据传送.

就像是一家公司,不通层级的人会用着不通的沟通方式来打交道.网络也大概如此.

我们常用的网络协议有哪些?

我们的网络在通讯过程中,要通过哪些设备,哪些协议才能做到一次完整的通讯?

网络层次可划分为五层因特网协议栈和七层因特网协议栈

五层模型

因特网协议栈共有五层：应用层、传输层、网络层、链路层和物理层。不同于OSI七层模型这也是实际使用中使用的分层方式。（1）应用层支持网络应用，应用协议仅仅是网络应用的一个组成部分，运行在不同主机上的进程则使用应用层协议进行通信。（2）传输层负责为信源和信宿提供应用程序进程间的数据传输服务，这一层上主要定义了两个传输协议，传输控制协议即TCP和用户数据报协议UDP。（3）网络层负责将数据报独立地从信源发送到信宿，主要解决路由选择、拥塞控制和网络互联等问题。（4）数据链路层负责将IP数据报封装成合适在物理网络上传输的帧格式并传输，或将从物理网络接收到的帧解封，取出IP数据报交给网络层。（5）物理层负责将比特流在结点间传输，即负责物理传输。该层的协议既与链路有关也与传输介质有关

五层模型对应的协议

物理层：以太网 · 调制解调器 · 电力线通信(PLC) · SONET/SDH · G.709 · 光导纤维 · 同轴电缆 · 双绞线等

数据链路层：Wi-Fi(IEEE 802.11) · WiMAX(IEEE 802.16) ·ATM · DTM · 令牌环 · 以太网 ·FDDI · 帧中继 · GPRS · EVDO ·HSPA · HDLC · PPP · L2TP ·PPTP · ISDN·STP 等

Linux - Centos 时区设置

Mon, 30 Jul 2018 20:32:05 +0000

timedatectl 命令

查看当前时区状态

$ timedatectl status
 Local time: Fri 2018-08-31 13:42:42 CST
 Universal time: Fri 2018-08-31 05:42:42 UTC
 RTC time: n/a
 Time zone: Asia/Shanghai (CST, +0800)
 NTP enabled: n/a
NTP synchronized: yes
 RTC in local TZ: no
 DST active: n/a

设置时区为上海

$ timedatectl set-timezone Asia/Shanghai # 设置系统时区为上海

其他操作

$ timedatectl list-timezones # 列出所有时区

$ timedatectl set-local-rtc 1 # 将硬件时钟调整为与本地时钟一致, 0 为设置为 UTC 时间

MongoDB - 在Egg中使用MondoDB

Fri, 18 May 2018 00:00:00 +0000

MongoDB官方有提供node操作数据库的 driver 及 API : node-mongodb-native

在egg社区也有基于该插件二次封装的egg插件 egg-mongo-native

对一些方法做了一些二次封装,也可以调用原版的方法.

配置

官方文档也有相关的配置说明,但是我在实际使用中碰到了一些问题. 下面我给出正确的配置方法,供大家使用.其他相关知识请参照该插件都官方文档.

// {app_root}/config/config.default.js
export default (appInfo) => {
 const config = {};
 config.mongo = {
 client: {
 host: '127.0.0.1',
 port: '27017',
 name: 'dandelion'
 },
 }
 return config;
};

开启插件

// config/plugin.js

const plugin = {
 mongo :{
 enable: true,
 package: 'egg-mongo-native',
 }
};

要跟以上配置一样,才能正确使用该插件.

其他复杂配置请参照该插件的官方文档. egg-mongo-native

MongoDB - 文档的基本操作 (二)

Sun, 13 May 2018 00:00:00 +0000

文档更新

语法: update(, , )

#更新rank字段
> db.posts.update({"title":"怪物猎人世界评测"}, {$set: {"rank": 10} });

# 更新整条数据为:{"rank": 99}
> db.posts.update({"title":"怪物猎人世界评测"}, {"rank": 99});

# 更新多条记录multi: true,如果为false,则是更新查询到的第一条记录
> db.posts.update({"tag":"it"}, {$set: {"rank": 60}}, {multi: true});

操作文档字段的函数

$inc:递加
$mul:相乘
$rename:改名
$set:新增or修改
$unset:字段删除

# 字段值递增,结果为: 字段值 + 1
> db.posts.update({title:"怪物猎人世界评测"}, {$inc: {rank: 1}});

# 字段值相乘操作,结果为: 字段值 * 2
> db.posts.update({title:"怪物猎人世界评测"}, {$mul: {rank: 2}});

# 字段重命名
> db.posts.update({title:"怪物猎人世界评测"}, {$rename: {"rank": "score"}});

# 设置或者添加字段
> db.posts.update({title:"怪物猎人世界评测"}, {$set: {"istop": true}});

# 删除istop 字段
> db.posts.update({title:"怪物猎人世界评测"}, {$unset: {"istop": true}});

文档特殊更新

upsert:有则更新，无则追加
remove:条件删除数据

$ mongo
# 更新整条数据
> db.posts.update({title:"其实创造比大志好玩"}, {title:"其实创造比大志好玩", "rank":5,"tag":"game"});

#更新或者添加数据
> db.posts.update({title:"其实创造比大志好玩"}, {title:"其实创造比大志好玩", "rank":5,"tag":"game"}, {upsert:true});

# 删除数据
> db.posts.remove({title:"其实创造比大志好玩"});

索引

getIndexes() 获取索引
createIndex({…}, {…}) 添加索引
dropIndex({…}) 删除索引

# 获取索引
> db.posts.getIndexes();

# 创建rank为降序索引
> db.posts.createIndex({rank:-1});

# 删除索引
> db.posts.dropIndex({rank:-1});

# 创建一个升序索引,并且不能重复,后续title重复则添加失败
> db.posts.createIndex({title:1}, {unique:true});

MongoDB - 文档的基本操作 (一)

Sat, 12 May 2018 00:00:00 +0000

文档增删

# 创建集合
> db.createCollection("posts");

# 插入一条数据
> db.posts.insert(
... {
... title: "我的第一篇博客",
... content: "已经开始写博客了，太激动了。"
... }
... );

# 查询数据
> db.posts.find();

# 插入另一条数据
> db.posts.insert(
... {
... title: "我的第二篇博客",
... content: "写点什么好呢？",
... tag: ["未分类"]
... }
... );



# 使用js for 来循环插入数据
> for(var i = 3; i <=10; i++ ) {
... db.posts.insert({
... title: "我的第" + i + "篇博客"
... });
... }

# 查询数据
> db.posts.find();

# 查看数据count
> db.posts.count();

# 删除集合所有数据
> db.posts.remove({});

> db.posts.find();

文档带条件查询

# 查询tag 为game的数据
> db.posts.find({"tag": "game"});

# 查询 rank大于或等于4的数据
> db.posts.find({"rank": {$gte: 4}});

# 查询 rank大于或等于4的数据
> db.posts.find({"rank": {$gt: 4}});

# 查询 rank小于或等于4的数据
> db.posts.find({"rank": {$lte: 4}});

# 查询 rank小于4的数据
> db.posts.find({"rank": {$lt: 4}});

# 正则查询
> db.posts.find({"title": /u/});

# 多条件查询
> db.posts.find({"title": /u/, "rank":{$gte:5} });

# $or 或条件查询
> db.posts.find({$or: [{"title": /u/}, {"rank":{$gte:4}}] });

# $in 包含, 查询rank中又3,4的数据
> db.posts.find({"rank": {$in: [3,4]} });

# 判断是否存在
> db.posts.find({"istop": {$exists: true} });

# 查询文章中有三个标签的数据
> db.posts.find({'tag': {$size: 3}});

# 获取所有的tag类型,distinct作用是获取集合中指定字段的不重复值，并以数组的形式返回
> db.posts.distinct("tag");

MongoDB 与 RDBMS Where 语句比较

操作	格式	范例	RDBMS中的类似语句
等于	{:}	db.col.find({“by”:“test”}).pretty()	where by = ’test'
小于	{:{$lt:<value%}}	db.col.find({“likes”:{$lt:50}}).pretty()	where likes < 50
小于或等于	{:{$lte:<value%}}	db.col.find({“likes”:{$lte:50}}).pretty()	where likes <= 50
大于	{:{$gt:<value%}}	db.col.find({“likes”:{$gt:50}}).pretty()	where likes > 50
大于或等于	{:{$gte:<value%}}	db.col.find({“likes”:{$gte:50}}).pretty()	where likes >= 50
不等于	{:{$ne:<value%}}	db.col.find({“likes”:{$ne:50}}).pretty()	where likes != 50

指定抽出字段

语法: db.[collection_name].find({}, {field1: true, field2: 1})

MongoDB - 数据库与集合的基本操作

Fri, 11 May 2018 00:00:00 +0000

数据库基本操作

# 进入命令行
$ mongo

#帮助
> help

#退出
> exit

#显示所有数据库
> show dbs;

#进入或者创建集合
> use aliliblog;

#查看当前数据库状态
> db.stats();

# 删除数据库
> db.dropDatabase();

操作集合（Collection）



# 查看集合
> show collections;

# 创建集合
> db.createCollection("users");

# 集合重命名
> db.users.renameCollection("staff"); // users -> staff

# 集合删除
> db.staff.drop();

MongoDB - 基本概念与其他数据库对比

Thu, 10 May 2018 00:00:00 +0000

基本概念

NoSql

在NoSql的数据库中，操作数据都是通过指令或程序语言完成的。

在MongoDB中使用过JavaScript和JSON数据结构，来操作和管理数据的。

MongoDB数据库与关系型数据库对比

MongoDB	关系型数据库
数据库（Database)	数据库（Database）
集合（Collection）	数据表（Table）
文档（Document）	记录（Record）

MongoDB与RDBMS对应的术语

MongoDB	RDBMS
数据库	数据库
集合	表格
文档	行
字段	列
嵌入文档	表联合
主键 (MongoDB 提供了 key 为 _id )	主键

MongoDB 数据类型

数据类型	描述
String	字符串。存储数据常用的数据类型。在 MongoDB 中，UTF-8 编码的字符串才是合法的。
Integer	整型数值。用于存储数值。根据你所采用的服务器，可分为 32 位或 64 位。
Boolean	布尔值。用于存储布尔值（真/假）。
Double	双精度浮点值。用于存储浮点值。
Min/Max keys	将一个值与 BSON（二进制的 JSON）元素的最低值和最高值相对比。
Array	用于将数组或列表或多个值存储为一个键。
Timestamp	时间戳。记录文档修改或添加的具体时间。
Object	用于内嵌文档。
Null	用于创建空值。
Symbol	符号。该数据类型基本上等同于字符串类型，但不同的是，它一般用于采用特殊符号类型的语言。
Date	日期时间。用 UNIX 时间格式来存储当前日期或时间。你可以指定自己的日期时间：创建 Date 对象，传入年月日信息。
Object ID	对象 ID。用于创建文档的 ID。
Binary Data	二进制数据。用于存储二进制数据。
Code	代码类型。用于在文档中存储 JavaScript 代码。
Regular	expression 正则表达式类型。用于存储正则表达式。

MongoDB - 安装与启动

Wed, 09 May 2018 00:00:00 +0000

什么是MongoDB？

MongoDB是一个面向文档的免费数据库，多用于数据采集和分散处理(Map/Reduce)，特别是在大数据处理方面比较擅长。

MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。

MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。

macOS OS安装与启动

安装

最简单的是通过 brew 安装


brew update

# 就这样mac上就安装好了
brew install mongodb

# 如果你需要最新的开发版本
brew install mongodb --devel

启动

#新建默认数据文件夹
mkdir -p /data/db

# 直接启动
mongod

# 指定路径启动
mongod --dbpath <path to data directory>

# 连接默认端口数据库
mongo

#指定端口连接数据库
mongo --host 127.0.0.1:27017

centOS安装与启动

安装

新建一个文件 /etc/yum.repos.d/mongodb-org-4.0.repo

[mongodb-org-4.0]
name=MongoDB Repository
baseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/4.0/x86_64/
gpgcheck=1
enabled=1
gpgkey=https://www.mongodb.org/static/pgp/server-4.0.asc

通过yum安装数据库

以太坊开发之搭建宠物商店

Sat, 21 Apr 2018 19:33:33 +0000

truffle的宠物商店是一个了解以太坊开发的一个很不错的例子. 跟着官方提供的demo与教程,可以完整的感受一下整个流程的开发.

Ganache

为了环境需要,并且快速的在本地搭建一个私有链环境. truffle推出了一个可视化私有链客户端: Ganache下载地址下载之后运行,你会看到这样一个界面:

初始化你的项目

首先我们新建一个目录,并且初始化一下项目

$ mkdir pet-shop
$ cd pet-shop
$ truffle unbox pet-shop

项目目录结构

这里只列出了重要的目录与文件

├── bs-config.json
├── contracts //合约目录
│   └── Migrations.sol //合约文件
├── migrations // 部署脚本
│   └── 1_initial_migration.js
├── package-lock.json
├── package.json
├── src // 前端代码目录
├── test // 测试代码目录
└── truffle.js // truffle配置文件

编写智能合约

在contracts/目录中,创建一个Adoption.sol文件文件内容:

pragma solidity ^0.4.17;

contract Adoption {

 address[16] public adopters; // 声明一个地址变量,用于保存领养者地址

 // 领养宠物
 function adopt(uint petId) public returns (uint) {
 require(petId >= 0 && petId <= 15); // 确保宠物id正确,为0到15之间,
 // 如果不符合条件就会回滚 
 //msg.sender 为调用这个函数的人的地址
 adopters[petId] = msg.sender; // 保存调用这地址 
 return petId;
 }

 // 返回领养者
 function getAdopters() public view returns (address[16]) {
 return adopters;
 }

}

编译你的智能合约

$ truffle compile

//输出
Compiling ./contracts/Adoption.sol...
Writing artifacts to ./build/contracts

这样你就会发现你的项目多了一个build文件夹, 里面存放这里刚刚写好的智能合约编译完成的json文件

以太坊开发之Solidity初学者的编辑器 -- remix-ide

Fri, 20 Apr 2018 19:33:33 +0000

在以太坊应用的开发中智能合约的开发是避不开的. 就目前来说,我发现的remix-ide是对新人最有好的开发工具了. 不需要其他任何的环境,就可以直接部署调试. 如果我发现了更加友好的,我会在以后的博客里推荐.

安装

remix就是一个普通的npm包

$ npm i remix-ide -g

启动

$ remix-ide

默认会启动本地8080端口,打开浏览器 http://localhost:8080

使用

首先我们要勾选自动编译

2. 切换到 Run ,环境选择 javascript VM

部署你的程序

点击create按钮,就可以部署你的智能合约了. 如下图,便是部署了智能合约的样子,因为每次部署都会消耗掉相应的余额. 所以这个用户的余额从刚才的 100以太币变成了现在的 99.999999999...

调试你的程序

部署完成之后,我们发现下面出现了一个有函数名称的按钮与输入框. 输入框内可填写该函数的参数.点击一下函数名,便可执行该函数了. 执行结果,会在中间下面的控制台显示.

点击一下控制台信息的detail按钮,便可看到函数详细的输出信息

以太坊开发之一切从脚手架truffle开始

Thu, 19 Apr 2018 19:33:33 +0000

这个礼拜开始学习区块链开发,为了公司区块链项目开始之前有一定的知识储备. 在博客做一下知识复盘.

truffle是什么

Truffle是针对基于以太坊的Solidity语言的一套开发框架。本身是基于JavaScript实现的。虽然是使用我们熟悉的JavaScript实现, 但是truffle主要还只是一个编译与发布智能合约的一个工具(当然还有其他的功能).

Solidity是什么

在区块链应用的开发中,Solidity语言你或许大致的可以理解为编写后台的一种语言. 在专业术语里,这种后台代码叫做 智能合约

truffle的主要作用

Truffle在区块链应用的开发中,主要是提供两个重要的功能.

编译智能合约
发布智能合约

安装

跟普通的npm包一样,用npm直接安装

# 全局安装truffle
$ npm i truffle -g

初始化你的项目

# 我们新建一个目录 
$ mkdir myproject
$ cd myproject

#初始化
$ truffle init
# 执行命令后
Downloading...
Unpacking...
Setting up...
Unbox successful. Sweet!

Commands:
# truffle的其他操作 编译,发布,测试
 Compile: truffle compile
 Migrate: truffle migrate
 Test contracts: truffle test

完成之后你会看到以下目录

 contract/ - 智能合约Solidity代码
 migrations/ - 智能合约发布的脚本
 test/ - 测试文件
 truffle.js - Truffle的配置文件

下面是初始化自动生成的Solidity代码,以后一部分开发工作主要就是写这东西. 编译完成之后,再使用前端js调用这些方法.

使用verdaccio搭建更加简单的私有npm服务器

Tue, 10 Apr 2018 22:30:05 +0000

cnpm.org这种私有npm服务器搭建已经很简单了, 但是相对于verdaccio的简单那是完全没有办法比的. 因为verdaccio实在是太简单了.

介绍

verdaccio是一个轻量级的私有NPM的Registry（从 Sinopia fork过来的，sinopia最后一次更新是在几年前了）。最开始是打算使用cnpmjs这个来搭建私有的npm仓库但是搭建完成之后存在一些问题，所以使用了Sinopia;

接下来我将简单介绍一下 verdaccio的使用.

在你的服务器安装verdaccio

$ npm i verdaccio -g

启动

#直接输入 verdaccio 命令
$ verdaccio

// 如果启动成功会显示以下信息
 Verdaccio doesn‘t need superuser privileges. Don‘t run it und
 warn --- config file - /root/.config/verdaccio/config.yaml
 warn --- http address - http://localhost:4873/ - verdaccio/

我们也可以用pm2启动 (也是我选择使用的方法)

$ pm2 start verdaccio

配置

系统默认的配置文件在 /root/.config/verdaccio/config.yaml 下面是我现在的配置,大家可以简单的参考一下. 基本上没有改什么.

#
# This is the default config file. It allows all users to do anything,
# so don't use it on production systems.
#
# Look here for more config file examples:
# https://github.com/verdaccio/verdaccio/tree/master/conf
#

#这里是你默认存储的包的位置,我根据我自己的情况做了相应修改
#storage: /root/.local/share/verdaccio/storage
storage: /data01/verdaccio/storage

#端口号,地址要这样设置外面才好访问
listen: 0.0.0.0:4873
auth:
 htpasswd:
 file: ./htpasswd
 # Maximum amount of users allowed to register, defaults to "+inf".
 # You can set this to -1 to disable registration.
 #max_users: 1000

#npm设置我直接代理了淘宝的源
#这样我就不需要再去主动同步包了,本地请求不到的直接请求淘宝源
uplinks:
 npmjs:
 url: https://registry.npm.taobao.org

packages:
 '@*/*':
 # scoped packages
 access: $all
 publish: $authenticated
 proxy: npmjs

 '**':
 # allow all users (including non-authenticated users) to read and
 # publish all packages
 #
 # you can specify usernames/groupnames (depending on your auth plugin)
 # and three keywords: "$all", "$anonymous", "$authenticated"
 access: $all

 # allow all known users to publish packages
 # (anyone can register by default, remember?)
 publish: $authenticated

 # if package is not available locally, proxy requests to 'npmjs' registry
 proxy: npmjs

# log settings
logs:
 - {type: stdout, format: pretty, level: http}
 #- {type: file, path: verdaccio.log, level: info}

Git push卡住解决办法

Mon, 09 Apr 2018 19:33:33 +0000

博客的每天英语是直接爬的扇贝英语,为了不直接请求代理接口(会相对比较慢). 所以每天我的程序每天会生成相应的数据文件,前端直接ajax获取就好了. 博客内容也会每天自动发布,达到每天更新名言名句的效果. 好久没管,发现很多git提交的内容没有push.手动直接push之后发现有800多个修改地方没有push.

手动push的时候直接卡住了. 就像这样:

[master 9447645] 
1 file changed, 1 insertion(+)
Counting objects: 20, done.
Compressing objects: 100% (876/876), done.
Writing objects: 100% (876/876)

网上找了个方法,解决了这个问题: 添加sendpack.sideband属性并置为false

# 全局的：
git config –global sendpack.sideband false

# 仓库的：
git config –local sendpack.sideband false

我只在我的本地仓库设置一下,然后再执行 git push就成功了

Linux - SSH连接远程服务器直接执行command时PATH不全解决方案

Thu, 15 Mar 2018 20:32:05 +0000

non-interactive mode下PATH不全

ssh username@desktop.domain ‘command’这种是典型的non-interactive shell，PATH不全.

原因

Linux系统中一种常用的判断是否是交互shell的方式就是通过PS1变量，虽然还有其他的方式，不过现在.bashrc中是通过PS1来判断是否为interactive mode。

# .bashrc文件
# If not running interactively, don't do anything 
[ -z "PS1" ] && return

解决方案

将必要的export PATH的声明，全部移到[ -z “PS1” ] && return 之前。保证在non-interactive mode下，PATH的设置也都会生效。

Centos7环境下启动Puppeteer失败解决办法

Sun, 25 Feb 2018 19:33:33 +0000

小贴士: 在centos6环境下,是不能启动puppeteer的,在centos6下,很多puppeteer依赖库是不存在的.所以如果你想在centos6上运行puppeteer,建议还是放弃,把时间花在其他地方比较值得.

缺少依赖

在新的centos7上运行puppeteer往往会运行失败,很多时候会报这样的错:

...node_modules/puppeteer/.local-chromium/linux-496140/chrome-linux/chrome: error while loading shared libraries: libpangocairo-1.0.so.0: cannot open shared object file: No such file or directory

这样的错表示,缺少依赖.

下面列出,你的系统可能需要安装的依赖库,使用yum安装

#字体
yum install ipa-gothic-fonts xorg-x11-fonts-100dpi xorg-x11-fonts-75dpi xorg-x11-utils xorg-x11-fonts-cyrillic xorg-x11-fonts-Type1 xorg-x11-fonts-misc -y

#依赖库
yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64 libXi.x86_64 libXtst.x86_64 cups-libs.x86_64 libXScrnSaver.x86_64 libXrandr.x86_64 GConf2.x86_64 alsa-lib.x86_64 atk.x86_64 gtk3.x86_64 -y

禁用沙箱模式

在Linux环境下,往往还会出现以下错误:

https://github.com/GoogleChrome/puppeteer/issues/290

(node:30559) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Failed to connect to chrome!
(node:30559) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

js示例代码

const puppeteer = require('puppeteer');

(async () => {
 //禁用沙箱模式
 const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']});
 const page = await browser.newPage();
 await browser.close();
})();

Linux - vim vi学习笔记

Sat, 17 Feb 2018 20:32:05 +0000

很多时候在mac也好linux也好,因为经常要使用到,但是操作与其他的编辑器差别又很大,所以专门学习一下,在使用的时候也不至于非常多迷惑.在学习中要多练多用才会熟练于心.

vim/vi 的三种模式

命令模式（Command mode）
输入模式（Insert mode）
底线命令模式（Last line mode）

命令模式（Command mode）

当我们使用vim打开一个文件的时候,会进入命令模式.在命令模式下并不能输入编辑文本. 在命令模式下,可以输入以下切换到其他模式

切换到输入模式

想要会到命令模式需要按一下 esc 按键.

切换到底线命令模式

想要会到命令模式需要按一下 esc 按键.

具体操作

光标的移动

光标的移动我们可以使用普通的方向键,也可以有vi独有的方式

按键	行为
h 或向左箭头键(←)	光标向左移动一个字符
j 或向下箭头键(↓)	光标向下移动一个字符
k 或向上箭头键(↑)	光标向上移动一个字符
l 或向右箭头键(→)	光标向右移动一个字符

各种输入模式的切换

按键	行为
i, I	进入输入模式(Insert mode)：为『从目前光标所在处输入』， I 为『在目前所在行的第一个非空格符处开始输入』
a A	为『从目前光标所在的下一个字符处开始输入』， A 为『从光标所在行的最后一个字符处开始输入』。(常用)
o, O	进入输入模式(Insert mode) 这是英文字母 o 的大小写。o 为『在目前光标所在的下一行处输入新的一行』； O 为在目前光标所在处的上一行输入新的一行！(常用)
r, R	取代模式: r 只会取代光标所在的那一个字符一次；R会一直取代光标所在的文字，直到按下 ESC 为止；(常用)
[Esc]	退出编辑模式，回到一般模式中(常用)

复制与删除

按键	行为
x, X	在一行字当中，x 为向后删除一个字符 (相当于 [del] 按键)， X 为向前删除一个字符(相当[backspace] 亦即是退格键) (常用)
nx n	为数字，连续向后删除 n 个字符。举例来说，我要连续删除 10 个字符，『10x』。
dd	删除游标所在的那一整行(常用)
ndd	n 为数字。删除光标所在的向下 n 行，例如 20dd 则是删除 20 行 (常用)
d1G	删除光标所在到第一行的所有数据
dG	删除光标所在到最后一行的所有数据
d$	删除游标所在处，到该行的最后一个字符
d0	那个是数字的 0 ，删除游标所在处，到该行的最前面一个字符
yy	复制游标所在的那一行(常用)
nyy	n 为数字。复制光标所在的向下 n 行，例如 20yy 则是复制 20 行(常用)
y1G	复制游标所在行到第一行的所有数据
yG	复制游标所在行到最后一行的所有数据
y0	复制光标所在的那个字符到该行行首的所有数据
y$	复制光标所在的那个字符到该行行尾的所有数据
p, P	p 为将已复制的数据在光标下一行贴上，P 则为贴在游标上一行！举例来说，我目前光标在第 20 行，且已经复制了 10 行数据。则按下 p 后，那 10 行数据会贴在原本的 20 行之后，亦即由 21 行开始贴。但如果是按下 P 呢？那么原本的第 20 行会被推到变成 30 行。 (常用)
J	将光标所在行与下一行的数据结合成同一行
c	重复删除多个数据，例如向下删除 10 行，[ 10cj ]
u	复原前一个动作。(常用)
[Ctrl]+r	重做上一个动作。(常用)
.	不要怀疑！这就是小数点！意思是重复前一个动作的意思。如果你想要重复删除、重复贴上等等动作，按下小数点『.』就好了！ (常用)

u 与 [Ctrl]+r 是很常用的指令！一个是复原，另一个则是重做一次～利用这两个功能按键，你的编辑，嘿嘿！很快乐的啦！

Linux - 安装nginx步骤

Tue, 16 Jan 2018 20:32:05 +0000

安装nginx相关的依赖

yum install gcc
yum install pcre-devel
yum install zlib zlib-devel
yum install openssl openssl-devel

当然你也可以一起安装

yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel

下载nginx的tar压缩包

进入网页 http://nginx.org/download/

选择你需要的版本:

 # 进入local文件夹
 cd /usr/local

 # 我选择了一个相对较新的版本,下载到当前目录
 wget http://nginx.org/download/nginx-1.13.9.tar.gz

 # 解压
 tar -xvf nginx-1.13.9.tar.gz

 # 重命名
 mv nginx-1.13.9.tar.gz nginx

 #进入nginx目录
 cd nginx

 #执行以下命令
 ./configure

 #编译
 make

进行以上步骤之后,你的nginx就已经安装完毕了

nginx常用命令

以下操作全都是在nginx目录下进行

启动:

./sbin/nginx

停止:

./sbin/nginx -s stop
#或者
./sbin/nginx -s quit

重启:

./sbin/nginx -s reload

查看进程命令

ps -ef | grep nginx

一个没有界面的Chrome浏览器：Puppeteer

Thu, 21 Dec 2017 20:32:05 +0000

Puppeteer介绍

Puppeteer是一个node库，提供了一组用来操纵Chrome的API。相对PhantomJS来说，他可以直接在你的node项目里面直接调用Chrome的API。以后很多的自动化测试，爬虫都可以基于Puppeteer来做。

安装

npm install puppeteer

使用

截屏

const puppeteer = require('puppeteer');

(async () => {
 const browser = await puppeteer.launch();
 const page = await browser.newPage();
 await page.goto('https://example.com');
 await page.screenshot({path: 'example.png'});

 await browser.close();
})();

保存页面为PDF

const puppeteer = require('puppeteer');

(async () => {
 const browser = await puppeteer.launch();
 const page = await browser.newPage();
 await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
 await page.pdf({path: 'hn.pdf', format: 'A4'});

 await browser.close();
})();

Puppeteer 还提供了很多的Chrome API https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md

算法复杂度分析

Tue, 19 Dec 2017 22:17:36 +0000

一切都是为了统计代码执行的效率

事后统计法

通过统计、监控，就能得到算法执行的时间和占用的内存大小

大 O 复杂度表示法

随着数据规模的增长，算法的执行时间和空间占用，按照多项式的比例增长

时间复杂度的好坏排序

O(1)（常数阶）< O(logn)（对数阶）< O(n)（线性阶）< O(nlogn)（线性对数阶）< O(n^2)（平方阶）< O(n^3)（立方阶）< O(2^n)（指数阶）< O(n!)（阶乘阶）

常数阶O(1)

 int i = 8;
 int j = 6;
 int sum = i + j;

线性阶O(n)

for(i=1; i<=n; ++i)
{
 j = i;
 j++;
}

对数阶 O(logn)

 i=1;
 while (i <= n) {
 i = i * 2;
 }

线性对数阶O(nlogN)

for(m=1; m<n; m++)
{
 i = 1;
 while(i<n)
 {
 i = i * 2;
 }
}

O(m+n)、O(m*n)


int cal(int m, int n) {
 int sum_1 = 0;
 int i = 1;
 for (; i < m; ++i) {
 sum_1 = sum_1 + i;
 }

 int sum_2 = 0;
 int j = 1;
 for (; j < n; ++j) {
 sum_2 = sum_2 + j;
 }

 return sum_1 + sum_2;
}

平方阶O(n²)

for(x=1; i<=n; x++)
{
 for(i=1; i<=n; i++)
 {
 j = i;
 j++;
 }
}

最好最坏复杂度

最好情况时间复杂度就是，在最理想的情况下，执行这段代码的时间复杂度

基于shipit-deploy实现的多服务器自动化部署方案

Sun, 17 Dec 2017 20:32:05 +0000

为什么要自动化部署，我这里就不多赘述了。

基于shipit-deploy的自动化部署，可以实现以下效果

一键部署多台服务器。
一键回滚多台服务器。
本地操作，不需要登录服务器。
方便定制，方便扩展，实现自动化。

使用

1.下载安装

npm install --save-dev shipit-cli
npm install --save-dev shipit-deploy

2.与服务器建立信任关系

ssh-copy-id USER@REMOTE_HOST

3.配置

module.exports = function (shipit) {
 require('shipit-deploy')(shipit);
 require('shipit-pm2')(shipit);
 require('shipit-cnpmjs')(shipit);

 shipit.initConfig({
 default: {
 workspace: '/tmp/github-monitor',
 deployTo: '/tmp/deploy_to', //服务器的目标路径
 repositoryUrl: 'https://github.com/user/repo.git', //git仓库地址
 ignores: ['.git', 'node_modules'], //排除的文件
 keepReleases: 2, //发布保留的版本数量
 deleteOnRollback: false,
 key: '/path/to/key',
 shallowClone: true,
 cnpm: {
 remote: false
 }
 },
 dev: { //开发服务器部署
 servers: ['user@devServer1', 'user@devServer1'],
	 branch: 'dev' //需要发布的git分支,
 pm2: {
 json: 'pm2-dev-app.json' //开发环境的pm2启动配置
 }
 }，
 prod: { //生产服务器部署
 servers: ['user@prodServer1', 'user@prodServer2'],
	 branch: 'master' //需要发布的git分支,
 pm2: {
 json: 'pm2-prod-app.json' //生产jam环境的pm2启动配置
 }
 }
 });
};

pm2-prod-app.json 示例：

Linux - 使用ssh-copy-id命令实现ssh Linux免密码登陆

Sat, 16 Dec 2017 20:32:05 +0000

1. 生成公钥和私钥

ssh-keygen -t rsa

按照提示输入完后，会在~/.ssh目录下生成id_rsa和id_rsa.pub这两个文件

2.与服务器建立联系

ssh-copy-id root@192.168.0.100 //示例ip

接下来会要求输入连接密码，验证成功后

3.无密码登陆服务器

尝试以下命令，看是不是直接登陆成功了：

ssh root@192.168.0.100

就是这么简单

开启Express，Egg.js，Koa.js 的Gzip模式

Wed, 13 Dec 2017 20:32:05 +0000

为了缩小接口与静态文件的下载体积，在服务器资源可观的情况下我们可以开启Gzip。

Express

Express 4.0以下版本

var express = require('express');
var app = express();
app.use(express.compress()); //主要是这句

Express 4.0以上版本(包含4.0)

var compression = require('compression');
var express = require('express');
var app = express();
app.use(compression());

Egg.js

// app/middleware/compress.js
// koa-compress 暴露的接口(`(options) => middleware`)和框架对中间件要求一致
module.exports = require('koa-compress')

// config/config.default.js
module.exports = {
 middleware: [ 'compress' ],
 compress: {
 threshold: 2048,
 },
};

Koa.js

const koa = require('koa');
const compress = require('koa-compress');

const app = koa();

const options = { threshold: 2048 };
app.use(compress(options));

Apache,Nginx,Express,Egg.js 支持前端HTML5 History 模式

Sat, 02 Dec 2017 22:30:05 +0000

当你使用 history 模式时，URL 就像正常的 url，例如 http://xxx.com/user/id。

想要完美支持这种模式，还需要后台配置支持。当应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://xxx.com/user/id 就会返回 404。

后端支持案例：

Apache

<IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteBase /
 RewriteRule ^index\.html$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule . /index.html [L]
</IfModule>

nginx

location / {
 try_files $uri $uri/ /index.html;
}

Node.js (Express)

如果是Express 可以使用connect-history-api-fallback https://github.com/bripkens/connect-history-api-fallback

Egg.js

// app/middleware/history_fallback.js
module.exports = () => {
 return async function historyFallback(ctx, next) {
 await next();
 if (ctx.status === 404 && !ctx.body) {
 if (ctx.acceptJSON) {
 ctx.body = { error: 'Not Found' };
 } else {
 ctx.render('index')
 }
 }
 };
};

// config/config.default.js
module.exports = {
 middleware: [ 'historyFallback' ],
};

Egg.js 如何支持单页面应用

Fri, 01 Dec 2017 22:30:05 +0000

在config/plugin.js 启用ejs //其他的模板引擎也行

exports.ejs = {
 enable: true,
 package: 'egg-view-ejs',
};

//config/config.{env}.js

 config.static = {
 prefix: '/',
 dir: path.join(appInfo.baseDir, 'app/view/')
 }

模板配置

//config/config.{env}.js

 config.view = {
 defaultExt: '.html',
 mapping: {
 '.ejs': 'ejs',
 '.html': 'ejs',
 }
 }

// app/router.js

module.exports = app => {
 app.router.get('/', app.controller.home.index);
}

配置路由相应的控制器

// app/controller/home.js

const { Controller } = require('egg');
class HomeController extends Controller {
 async index() {
 const { ctx } = this;
 // render index.html
 await ctx.render('index');
 }
}
module.exports = HomeController;

完成以上配置，便可以与单页面应用作结合了

在自己搭建的cnpm发布公司私有代码

Sat, 25 Nov 2017 22:30:05 +0000

配置

需要先将原先的 config/config.js 中添加一些配置属性：

 enablePrivate: false, // 任何人都可以发布包
 admins: {
 admin: 'test@company.com' // 管理员权限
 },
 scopes: ['@company'], // 私有包必须依附于 scope 下

重新启动 cnpm

进入cnpm目录

npm stop // 停止服务
npm start //启动服务

在 package.json 文件中加入代码：

 "name": "@company/testjs", // 包名，之前必须加入 scope 名

npm登陆

 npm login --registry=http://192.168.0.100:7001 // 注册之前的用户
 Username: admin // 管理员名
 Password: 1234 //你想要的密码

 npm publish --registry=http://192.168.80.130:7001

发布成功

安装刚刚发布的包

 npm install @company/test -registry=http://192.168.0.100:7001

在公司搭建私有的cnpm服务器

Fri, 24 Nov 2017 22:30:05 +0000

现在的js的项目越来越多。如果我们把代码开源。我们会把这些代码发布到npm。但是npm是公共的，公司的代码毕竟不会公开在网上。于是我们就有必要搭建一个自己的npm服务器。把公司私有的代码发布在自己公司的npm服务器上。这样我们就可以即方便的下载我们想要的代码。也可以不把这些代码放在开源平台上面

安装的基本步骤

在linu安装mysql
npm install cnpm.org 下载cnpm.org的代码
配置好cnpm.org的数据库配置
npm start

在安装过程中，我们只有这简单的4步。不管哪里遇到各种各样的问题，都不会脱离这4个步骤。

开始吧

在linux安装mysql

网上有很多相关教程，请自行搜索。如果有需要我会重新开一篇来讲述安装步骤。我们假设这里我们创建了一个用户为：root 密码：root1234

创建数据库

CREATE DATABASE cnpmjs

建表：

在cnpm.org代码里，doc/db.sql文件里面有创建cnpm.org的相关表的sql语句

mysql> use cnpmjs;
mysql> source docs/db.sql

在代码里配置sql信息

在cnpm.org代码里的 config/config.js配置我们的数据库连接信息.

找到以下mysqlServers相关代码,配置大致如下：

 mysqlServers: [
 {
 host: 'localhost',
 port: 3306,
 user: 'root',
 password: 'root1234', // 这是我们刚刚创建的账户跟密码
 }
 ],

安装cnpm.org 的相关js依赖（这是jser们再熟悉不过的了）

进入cnpm.org代码目录

npm install

最后一步

当里的js依赖装好了之后，cnpm.org的数据库配置也配置好了以后。再命令行里运行一下命令：

npm start

好了，我们的cnpm服务器就这样简单的搭建成功了。

默认web端口为：7002，当你浏览器输入这台机器的ip加端口便可以访问 cnpm.org应用的web页面了。本机访问则是：http://localhost:7002
registry 默认端口为： 7001

如果在其他机器始终访问不了你的应用。请检查你的服务器防火墙哦。

尝试使用

 npm install webpack -g --registry=http://192.168.0.100:7001 // IP为你搭建服务器的地址，不要忘加端口号

如果你觉得以上方式麻烦可以设置里本机npm 默认registry

Visual-Studio-Code隐藏从ts生成的额外js与map文件

Wed, 22 Nov 2017 20:32:05 +0000

打开【文件】>【首选项】>【工作区设置】，放入以下代码：

// 将设置放入此文件中以覆盖默认值和用户设置。
{
 "files.exclude": {
 // exclude .js and .js.map files, when in a TypeScript project
 "node_modules": true,
 "**/*.js": { "when": "$(basename).ts"},
 "**/*.js.map": true
 }
}

让Visual-Studio-Code按照ESLint规则格式化你的代码

Sun, 05 Nov 2017 19:33:33 +0000

项目加入ESLint之后,大家的代码是工整了许多. 但是因为刚刚不熟悉ESLint的规则,很多时候都在数进退多少空格,双引号还是单引号的删改切换.

严重影响了开发效率与心情!!!! 严重影响了开发效率与心情!!!! 严重影响了开发效率与心情!!!!

重要的事情说三遍!!!

下面介绍一种利用Visual-Studio-Code ESLint插件,配置之后,可以自动格式化成ESLint规定的格式

在Visual-Studio-Code 安装 ESLint插件
widnows 点击文件>首选项>设置 / mac 点击Code>首选项
搜索 eslint.autoFixOnSave, 找到之后修改为 true

重启你的Visual-Studio-Code,当你打开代码文件的后,直接保存文件. 代码会自动格式化成ESLint规定的格式.大大的提高了开发效率,并且统一了代码规范

下面分享一下我们项目里的一些ESLint规则

{
 rules: { // 具体规则
 'accessor-pairs': 2, // getter/setter成对出现
 'arrow-spacing': [1, { 'before': true, 'after': true }], // 箭头函数前后有空格
 'array-bracket-spacing': [1, 'never'], // 数组内前后无空格
 'block-spacing': [1, 'always'], // 单行{}前后有空格
 'brace-style': [2, '1tbs', { 'allowSingleLine': true }], // {}换行，单行不用
 'camelcase': [2, { 'properties': 'never' }], // 属性名可以不是驼峰
 'comma-dangle': [1, 'only-multiline'], // 数组/对象最后一个必须有,
 'comma-spacing': [1, { 'before': false, 'after': true }], // ,前有空格, 后无空格
 'comma-style': [2, 'last'], // ,在最后，不能换行
 'constructor-super': 1, // super()在必须构造函数内
 'curly': [2, 'multi-line'], // if/while等函数可以多行不带{}
 'dot-location': [2, 'property'], // .的位置可以在换行
 'eol-last': 1, // 文件末尾需要空白行
 'eqeqeq': [2, 'allow-null'], // 必须===, null除外
 'generator-star-spacing': [2, { 'before': true, 'after': true }], // generator函数前后有空格
 'handle-callback-err': [2, '^(err|error)$' ], // 有err/error必须处理异常
 'indent': [2, 2, { 'SwitchCase': 1 }], // 缩进2格，switch中1格
 'jsx-quotes': [2, 'prefer-single'], // jsx属性用单引号
 'key-spacing': [2, { 'beforeColon': false, 'afterColon': true }], // 对象属性前有空格, 后无空格
 'keyword-spacing': [2, { 'before': true, 'after': true }], // 关键词前后有空格, 如if-else
 'new-cap': [2, { 'newIsCap': true, 'capIsNew': false }], // new后必须大写开头构造函数, 大写开头不一定要new
 'new-parens': 2, // new的构造函数必须带参数
 'object-curly-spacing': [2, 'always', { objectsInObjects: false }], // 对象{}前后有空格, 对象内的对象例外
 'no-array-constructor': 2, // Array(10)->yes, Array(1, 2)->no
 'no-caller': 2, // 禁止caller/callee
 'no-class-assign': 2, // 禁止赋值class
 'no-cond-assign': 2, // 条件不能有赋值
 'no-const-assign': 2, // 禁止赋值常量(const)
 'no-control-regex': 2, // reg中不能有控制符号
 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 1, // node环境prod禁用
 'no-delete-var': 2, // 不能delete变量，可以用在对象
 'no-dupe-args': 2, // 参数不能重复
 'no-dupe-class-members': 2, // class中方法不能有重复
 'no-dupe-keys': 2, // 对象key不能重复
 'no-duplicate-case': 2, // switch不能有重复case
 'no-empty-character-class': 2, // reg中不能有空字符串
 'no-empty-pattern': 2, // 解构不能有空解构模式
 'no-eval': 2, // 不能用eval
 'no-ex-assign': 2, // 不能复制catch中的error
 'no-extend-native': 2, // 不能扩展Object原型
 'no-extra-bind': 2, // bind的函数体中要有明确的this
 'no-extra-boolean-cast': 2, // 禁止多余的Boolean转换
 'no-extra-parens': [2, 'functions'], // 函数中禁止多余的括号
 'no-fallthrough': 2, // switch需要break
 'no-floating-decimal': 2, // float中0不能省略
 'no-func-assign': 2, // 禁止赋值函数
 'no-implied-eval': 2, // 禁止隐性eval
 'no-inner-declarations': [2, 'functions'], // 禁止在条件中声明function
 'no-invalid-regexp': 2, // 禁止无用的reg
 'no-irregular-whitespace': 2, // 禁止不规则空格
 'no-iterator': 2, // 禁止使用__iterator__属性
 'no-label-var': 2, // 禁止label var
 'no-labels': [2, { 'allowLoop': false, 'allowSwitch': false }], // 禁止label表达式
 'no-lone-blocks': 2, // 禁止无用的{}
 'no-mixed-spaces-and-tabs': 2, // space和tab不混用
 'no-multi-spaces': 2, // 禁止多空格
 'no-multi-str': 2, // 禁止多行的string
 'no-multiple-empty-lines': [2, { 'max': 1 }], // 禁止多空行，最大1行
 'no-native-reassign': 2, // 禁止赋值原生对象(window/Object...)
 'no-negated-in-lhs': 2, // !(key in object)->yes, !key in object->no
 'no-new-object': 2, // new Object()->no
 'no-new-require': 2, // new require(xxx)->no
 'no-new-symbol': 2, // new Symbol(xxx)->no
 'no-new-wrappers': 2, // String/Number等不能用new
 'no-obj-calls': 2, // 禁止calling全局对象属性，如Math/JSON
 'no-octal': 2, // 禁止八进制文字
 'no-octal-escape': 2, // 禁止八进制转义
 'no-path-concat': 2, // __dirname和__filename禁止string拼接
 'no-proto': 2, // 禁止使用__proto__
 'no-redeclare': 2, // 禁止重新复制var
 'no-regex-spaces': 2, // 禁止reg出现多个空格
 'no-return-assign': [2, 'except-parens'], // 禁止return中赋值
 'no-self-assign': 2, // 禁止自身赋值
 'no-self-compare': 2, // 禁止自身比较, 如果NaN->Number.isNaN
 'no-sequences': 2, // 禁止,操作符
 'no-shadow-restricted-names': 2, // 禁止跟踪严格模式下部分关键词
 'no-spaced-func': 2, // function的()不要空格
 'no-sparse-arrays': 2, // array不能用空元素
 'no-this-before-super': 2, // super()前不能用this
 'no-throw-literal': 2, // 禁止直接throw内容，必须是Error()
 'no-trailing-spaces': 1, // 禁止多余的空格
 'no-undef': 2, // 禁止使用未赋值变量
 'no-undef-init': 2, // 变量不能初始化为undefined
 'no-unexpected-multiline': 2, // 禁止有疑义的多行表达式
 'no-unmodified-loop-condition': 2, // 循环中的变量要在循环中修改
 'no-unneeded-ternary': [2, { 'defaultAssignment': false }], // 禁止不必要的三元操作符
 'no-unreachable': 2, // return/throw等之后不应有表达式
 'no-unsafe-finally': 2, // 禁止不安全的finally
 'no-unused-vars': [1, { 'vars': 'all', 'args': 'none' }], // 禁止不使用的变量，参数可以
 'no-useless-call': 2, // 禁止无用的call
 'no-useless-computed-key': 2, // 禁止无用的计算属性
 'no-useless-constructor': 2, // 禁止无用的constructor
 'no-whitespace-before-property': 2, // 属性前不能有空格
 'no-with': 2, // 禁用with
 'one-var': [2, { 'initialized': 'never' }], // 只能一个var, 初始化不检查
 'operator-linebreak': [2, 'after', { 'overrides': { '?': 'before', ':': 'before' } }], // 操作符换行, 默认在行末, ?和:在下一行前
 'padded-blocks': [2, 'never'], // 作用域中没有padded的空行
 'quotes': [2, 'single', { 'avoidEscape': true, 'allowTemplateLiterals': true }], // 使用单引号, 转义或者模版可以例外
 'semi': [2, 'never'], // 禁用结尾;
 'semi-spacing': [2, { 'before': false, 'after': true }], // ;前有空格, 后无空格
 'space-before-blocks': [2, 'always'], // 作用域前有空格
 'space-in-parens': [2, 'never'], // 括号内无空格
 'space-infix-ops': 2, // 插入的操作符需要空格, 如+/-
 'space-unary-ops': [2, { 'words': true, 'nonwords': false }], // 操作符单词类要空格(new/delete), 非单词不要空格(++/--/!)
 'spaced-comment': [2, 'always', { 'markers': ['!', ',', '/', '-'] }], // 注释要空格，markers为例外
 'template-curly-spacing': [2, 'never'], // 模版字符串中变量无空格
 'use-isnan': 2, // 使用isNaN
 'valid-typeof': 2, // typeof的字符串必须正确
 'wrap-iife': [2, 'any'], // 立即调用的function必须有括号
 'yield-star-spacing': [2, 'both'], // yield的*前后有空格
 'yoda': [2, 'never'], // 条件中变量在前
 'prefer-const': 0, // 能用const场景用const
 'no-useless-escape': 0, // 不检查escape
 'space-before-function-paren': 0, // 函数括号无空格
 "react/jsx-uses-react": "error",
 "react/jsx-uses-vars": "error",
 }
}

Redux先放一边,开启MobX的新玩法

Sat, 04 Nov 2017 19:33:33 +0000

Mobx

Mobx是一个简单的,高扩展的状态管理工具.Mobx与Redux一样是为了解决react管理状态的一种工具. 但是在写代码体验上,会好过Redux.

安装

npm install mobx --save

//配合React: 
npm install mobx-react --save

一个简单的计数器

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { observer } from 'mobx-react'
import { observable, computed, action } from 'MobX'

class Store {
 @observable
 count = 0;

 @action
 add() {
 this.count ++
 }
 minus() {
 this.count --
 }
}

let countStore = new Store()

@observer
class CountComponent extends Component {
 render() {
 return (
 <div>
 <h2>{ countStore.count }</h2>
 <button key="add" onClick={countStore.add}>+</button>
 <button key="minus" onClick={countStore.minus}>-</button>
 </div>
 )
 }
}

ReactDOM.render(
 <CountComponent/>,
 document.getElementById('root')
)

在你的React项目中使用Decorator 装饰器

Wed, 01 Nov 2017 19:33:33 +0000

使用装饰器

目前只支持Babel/Typescript两种预编译器

Babel:

npm install babel-plugin-transform-decorators-legacy --save-dev

在你的 .babelrc配置文件中开启,没有 .babelrc文件的话,可以新建一个.

{
 "presets": [
 "es2015",
 "stage-1"
 ],
 "plugins": ["transform-decorators-legacy"]
}

插件的顺序千万要注意,非常重要：transform-decorators-legacy 应该放在插件的第一个。

当使用react native的时候，下面这个预设可以代替 transform-decorators-legacy

{
 "presets": ["stage-2", "react-native-stage-0/decorator-support"]
}

在create-react-app中使用装饰器

npm run eject

安装相关插件:

//针对react
npm install babel-preset-stage-2 --save-dev
npm install babel-preset-react-native-stage-0 --save-dev

根目录下创建.babelrc { “presets”: [“react-native-stage-0/decorator-support”] }

TypeScript

如果你的项目已经开始使用TypeScript,那我们只需要在tsconfig.json文件中的 experimentalDecorators 设置为 true

这样,我们就可以使用ES7新特性装饰器了

在vscode 移除不支持decorator特性的语法警告提示

在项目根目录创建tsconfig.json

{
 "compilerOptions": {
 "experimentalDecorators": true,
 "allowJs": true
 }
}

重启你的vscode,你会发现语法警告没有了.

将博客搬至CSDN

Sun, 24 Sep 2017 00:04:05 +0000

将博客搬至CSDN

https://blog.csdn.net/m0_48741717

我的博客即将同步至腾讯云+社区

Sun, 24 Sep 2017 00:04:05 +0000

我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=onqmnob0dh5k

Git系列之关于add命令的一些事

Sun, 10 Sep 2017 19:33:33 +0000

基本用法

通常是通过git add 的形式把添加到索引库中，

可以是文件也可以是目录:

git add <path>

如果有很多改动,可以用以下命令来一次添加所有改变的文件:

 git add -A .

将所有修改添加到暂存区,包括添加新文件和编辑过的文件不包括删除的文件:

$ git add .

表示添加所有内容:

git add -A

表示添加编辑或者删除的文件，不包括新添加的文件:

git add -u

如果不小心执行了以下命令:

git add * -f(force) //添加被忽略的文件。

可以吃一个后悔药:

git reset HEAD

React系列之父组件如何传递Props给this.props.children

Fri, 08 Sep 2017 19:33:33 +0000

问题

React使用router之后,以下形式会经常出现.

this.props.children

可是这样渲染出来的组件,父组件如何传递props给它呢?

解决

我们可以这样传递porps给子组件:

{ 
 React.cloneElement(this.props.children,{A:xxx,B:xxx2,C:xxx3}) 
 
 }

MySQL的安全模式

Sat, 26 Aug 2017 23:36:00 +0000

今天delete一条数据的时候,出现了以下错误.

You are using safe update mode and you tried to update a table without a WHERE that uses a KEY column To disable safe mode, toggle the option in Preferences -> SQL Queries and reconnect.

因为MySql运行在safe-updates模式下.

想要解除该模式,运行以下命令:

SET SQL_SAFE_UPDATES = 0

为了安全，建议执行完操作后，再恢复成默认状态1

MySQL的Access denied for user问题

Fri, 25 Aug 2017 23:36:00 +0000

问题

在另一台服务器连接MySQL的时候,出现了 Access denied for user ‘root’@‘xxx.xxx.xxx.xxx’ (using password: YES) 的报错提示.

这是数据库赋权的问题.

解决办法

在MySQL服务器上使用root登录后，执行如下sql语句：

mysql -u root -p

然后输入你的密码.

然后执行以下命令:

GRANT ALL PRIVILEGES ON *.* TO '你的账户'@'%' IDENTIFIED BY '你的密码' WITH GRANT OPTION;

执行成功后:

FLUSH PRIVILEGES;

然后再尝试连接你的数据库,应该就可以了.

利用Chrome DevTools调试Node.js

Tue, 08 Aug 2017 00:04:05 +0000

前提

Node.js 6.3+；
Chrome 55+;

配置Chrome (最新的版本已经不需要这一步);

输入url：chrome://flags/#enable-devtools-experiments 进入开发者实验室
启用加亮的选项
重启Chrome
打开 DevTools Setting -> Experiments;
连续按Shift 6次,显示隐藏的选项
找到 Node debugging,并且勾上. (新版本已经没有这个选项,默认就是开启状态.所以chrome就不用配置了)

运行Node.js

只要在命令语句加上 –inspect,后面跟上你想要执行的文件;

node --inspect app.js

复制控制台输出的:

chrome-devtools:// 协议地址

chrome-devtools://devtools/remote/serve_file/xxxxxxxxx

粘贴到浏览器地址栏,你就可以使用Chrome的控制台调试你的node应用了.

React系列之用create-react-native-app创建React Native应用

Sun, 30 Jul 2017 19:33:33 +0000

之前在介绍create-react-app的时候稍微提了一下create-react-native-app.

这东西其实用起来还是蛮有意思的.这东西最大的好处就是如果你没有安装Xcode,Android Studio这些工具的时候,也是可以在电脑上调试React Native 应用的.

这里说的电脑包括 Mac Windows Linux!!!!

create-react-native-app

Create React Native App 安装

$ npm install -g create-react-native-app
$ create-react-native-app my-app
$ cd my-app/
$ npm start

安装 Expo 这个APP在你的iphone或者安卓手机上. npm start 之后,控制台会出现一个二维码.用这个Expo 扫描这个二维码,就可以马上在你的手机上直接进行远程调试了.那是相当的方便啊.但是速度还是相对桌面模拟器调试慢一点.

Expo的桌面开发工具 Expo XDE

Expo XDE

我们不仅可以在控制里运行整个项目,用XDE也可以.并且支持使用模拟器直接在电脑里直接调试程序.速度不错,完全可以接受.

只不过我Mac的模拟器在安装expo的时候,花了好长的一段时间.如果大家有遇到类似的情况一定要耐心的等一等.

聊聊HTTP的MIME

Wed, 26 Jul 2017 16:14:25 +0000

MIME是什么?

MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型;

在最早的HTTP协议中,没有附加的数据类型信息.

所有传送的数据都被客户程序解释为超文本标记语言HTML 文档，而为了支持多媒体数据类型，HTTP协议中就使用了附加在文档之前的MIME数据类型信息来标识数据类型。

每个MIME类型由两部分组成，前面是数据的大类别，例如声音audio、图象image等，后面定义具体的种类。

常见的MIME类型(通用型)：

超文本标记语言文本 .html text/html
xml文档 .xml text/xml
XHTML文档 .xhtml application/xhtml+xml
普通文本 .txt text/plain
RTF文本 .rtf application/rtf
PDF文档 .pdf application/pdf
Microsoft Word文件 .word application/msword
PNG图像 .png image/png
GIF图形 .gif image/gif
JPEG图形 .jpeg,.jpg image/jpeg
au声音文件 .au audio/basic
MIDI音乐文件 mid,.midi audio/midi,audio/x-midi
RealAudio音乐文件 .ra, .ram audio/x-pn-realaudio
MPEG文件 .mpg,.mpeg video/mpeg
AVI文件 .avi video/x-msvideo
GZIP文件 .gz application/x-gzip
TAR文件 .tar application/x-tar
任意的二进制数据 application/octet-stream

用于WAP服务器的MIME类型有：

MRP文件（国内普遍的手机）.mrp application/octet-stream
IPA文件(IPHONE) .ipa application/iphone-package-archive
Debian软件包格式 .deb application/x-debian-package-archive
APK文件(安卓系统) .apk application/vnd.android.package-archive
CAB文件(Windows Mobile) .cab application/vnd.cab-com-archive
XAP文件(Windows Phone 7) .xap application/x-silverlight-app
SIS文件(symbian平台/S60V1) .sis application/vnd.symbian.install-archive *
SISX文件(symbian平台/S60V3/V5) .sisx application/vnd.symbian.epoc/x-sisx-app
JAR、JAD文件(JAVA平台手机通用格式) .jar .jad

服务器在发送真正的数据之前，就要先发送标志数据的MIME类型的信息，这个信息使用Content-type关键字进行定义.

HTTP的URI格式说明

Tue, 25 Jul 2017 16:14:25 +0000

下面是URI的各个组成部分

 权限 路径
 ┌───────────────┴───────────────┐┌───┴────┐
 abc://username:password@example.com:123/path/data?key=value&key2=value2#fragid1
 └┬┘ └───────┬───────┘ └────┬────┘ └┬┘ └─────────┬─────────┘ └──┬──┘
 协议 用户信息 主机名 端口 查询参数 片段

让Webpack支持sftp上传文件

Tue, 18 Jul 2017 11:43:05 +0000

今天介绍两个插件,可以让你的webpack支持上传文件到你的ftp服务器.

sftp-webpack-plugin

安装sftp-webpack-plugin

npm install sftp-webpack-plugin --save-dev

使用

const SftpWebpackPlugin = require('sftp-webpack-plugin');

var config = {
 plugins: [new SftpWebpackPlugin({
 port: 'your port',//服务器端口
 host: 'your host',//服务器地址
 username: 'your username',//用户名
 password: 'your password',//密码
 from: 'you neeed upload file path ',//你的本地路径
 to: 'you want to destination'//服务器上的路径
 })]
}

webpack-sftp-client

安装webpack-sftp-client

npm install webpack-sftp-client --save-dev

使用

var WebpackSftpClient = require('webpack-sftp-client');

var config = {
 plugins: [new WebpackSftpClient({
 port: '22',//服务器端口
 host: 'exmaple.com',//服务器地址
 username: 'root',//用户名
 password: 'password',//登录密码
 path: './build/', //本地路径
 remotePath: '/data/website/demo/', //服务器路径
 verbose: true //控制台显示详细信息
})]
}

React系列之分享一个自适应高的iframe组件

Mon, 17 Jul 2017 19:33:33 +0000

在网页里面先要嵌入iframe,总是得要解决iframe高度的问题.

那我们在React下,该怎么做到呢?

class FullheightIframe extends Component {
 constructor() {
 super();
 this.state = {
 iFrameHeight: "0px"
 };
 }

 render() {
 return (
 <iframe
 style={ {
 width: "100%",
 height: this.state.iFrameHeight,
 overflow: "visible"
 }}
 onLoad={() => {
 const obj = ReactDOM.findDOMNode(this);
 this.setState({
 iFrameHeight: obj.contentWindow.document.body.scrollHeight + "px"
 });
 }}
 ref="iframe"
 src={this.props.src}
 width="100%"
 height={this.state.iFrameHeight}
 scrolling="no"
 frameBorder="0"
 />
 );
 }
}

Macbook Pro蓝牙不可用问题

Sun, 16 Jul 2017 22:30:05 +0000

前两天早上去公司,电脑一开机.发现鼠标不能用了.

乱鼓捣了一翻,原来电脑蓝牙变成了一个波浪线.显示蓝牙不可用.

鼓捣了好久,电脑系统也升级到最新版本了.重启好几次,蓝牙还是不可用状态.

百度了一下,网上也有类似的问题的解决办法.

1.关机


2.同时按下shift+control+option+power,保持5秒


3.先按下power键，紧接着同时按下option+command+p+r,
等待mac发出4声Duang~的声音后松手，系统就会自动开机


4.蓝牙恢复正常

但是有网友试过之后,是成功的呀.

我照着这方法,试了好几次,蓝牙还是不可用.但是在电脑的恢复模式,鼠标是可用的.说明蓝牙并没有坏.

最后我把电脑所有连接usb的设备全部拔掉.重新再试了一次.

奇迹发生了,蓝牙恢复正常了.如果有朋友遇到了类似情况,最好跟我一样把所有USB设备拔掉.然后照着上面方法试着弄一次.应该是可以解决问题的.

发布基于nodejs的阿里云API签名生成工具 -- AliToSing

Sun, 16 Jul 2017 00:04:05 +0000

基于 nodejs 的阿里云 API 签名生成工具

Github AliToSign

阿里云签名官方说明

安装方法:

npm install alitosign --save

使用方法:

例子:添加域名

const alitosign = require("alitosign");
const querystring = require("querystring");
const moment = require("moment");
const http = require("http");

//基本上调用接口都需要的公共参数
let originParams = {
 AccessKeyId: "xxxxxxx", //AccessKeyId 获得方法请参照官方文档
 Format: "JSON",
 Version: "2015-01-09",
 SignatureMethod: "HMAC-SHA1",
 SignatureVersion: "1.0",
};

function AddDomain() {
 //复制一份公共参数
 let params = Object.assign({}, originParams);

 //在新的对象上添加你想调用的该接口必要参数,
 //每个接口都不一样,具体请查阅官方文档
 params.Action = "AddDomain";
 params.DomainName = "time-friend.com";
 params.GroupId = "2223";

 //添加时间戳
 params.Timestamp = moment.utc().format(); //要用格林威治时间;
 params.SignatureNonce = new Date().getTime();

 //生成签名
 let signParams = alitosign(params);

 //将包含签名属性的对象转换成query格式的字符串
 let queryParams = querystring.stringify(signParams);

 //拼接url
 let url = `http://alidns.aliyuncs.com/?` + queryParams;

 //调用接口
 http.get(url, (res) => {
 res.on("data", function (data) {
 //序列化之后,就可以拿到你想要的数据了
 let oData = JSON.parse(data);
 });
 });
}

React系列之让create-react-app支持导入less

Fri, 14 Jul 2017 19:33:33 +0000

目前来说,create-react-app并不支持直接导入LESS; 这里我就介绍一下,如何让它支持LESS的导入.

create-react-app是基于webpack的,只是没有暴露webpack.config相关的文件.想要支持less,肯定是要修改webpack的配置文件的. 以下命令可以做到暴露出配置文件来:

npm run eject

运行完毕之后,你会看见多出了一个config文件夹. 里面有webpack.config.dev.js和webpack.config.prod.js等配置文件.

接下来,安装less-loader

npm install less-loader less --save-dev

然后修改webpack.config.dev.js文件,

我们只需要修改两个地方

第一: 找到下面代码

exclude: [
 /\.html$/,
 /\.(js|jsx)$/,
 /\.css$/,
 /\.json$/,
 /\.bmp$/,
 /\.gif$/,
 /\.jpe?g$/,
 /\.png$/,
]

将.css改为.(css|less)，内容变为：

exclude: [
 /\.html$/,
 /\.(js|jsx)$/,
 /\.(css|less)$/,
 /\.json$/,
 /\.bmp$/,
 /\.gif$/,
 /\.jpe?g$/,
 /\.png$/,
]

第二个：找到test: /.css$/

更改为test: /.(css|less)$/

并在下面的use数组里面增加less-loader

{
 loader: require.resolve('less-loader') // compiles Less to CSS
}

更改完以后这部分代码大概长这个样子：


 {
 test: /\.(css|less)$/,
 use: [
 require.resolve('style-loader'),
 {
 loader: require.resolve('css-loader'),
 options: {
 importLoaders: 1,
 },
 },
 {
 loader: require.resolve('less-loader') // compiles Less to CSS
 }

 ...

 ],
 }

生产环境的配置跟上面也差不多.

React系列之JSX

Thu, 13 Jul 2017 19:33:33 +0000

JSX是一个有趣的东西。它看似像一个模板语言，但是又具备javascript的所有能力。

在React中，JSX用来生成React元素。

我们使用create-react-app创建一个APP后：

一段JSX代码

import React, { Component } from 'react';

import ReactDOM from 'react-dom';

class App extends Component {
 render() {
 return (
 <div className="App">
 我是一个APP
 </div>
 );
 }
}

ReactDOM.render(<App />, document.getElementById('root'));

我们可以在JSX中内嵌表达式

 //插入数据 
 const data = {name:"小明"}
 const ele = <div>我的名字是：{data.name} </div>;

 //计算
 const ele1 = <div> {1+1} </div>;

 //三元表达式
 const ele2 = <div> {true?"我是小明"："我不是小明"} </div>;

 //在属性里
 const ele3 = <img src={date.xxx} />;

因为JSX使用Babel编译后,本身自己就是一个对象.

let ele = <div className="user">Hello World!</div>

编译后:

const element = React.createElement(
 'div',
 {className: 'user'},
 'Hello World!'
);

所以,这就是JSX可以与js代码混写的原因.

var a =1;
function switchView(){
 if(a>1){
 return <div className="user">Hello World!</div>
 }else{
 return <div className="user">Hello Ming!</div>
 }
}

编译后:

var a =1;
function switchView(){
 if(a>1){
 return React.createElement('div',{className: 'user'},'Hello world!');
 }else{
 return React.createElement('div',{className: 'user'},'Hello Ming!');
 }
}

防止XXS攻击

let content ="<span>我是HTML代码?</span>"

let ele = <div>{content}</div> 
//会直接输入<span>我是HTML代码?</span>,不会把这一段变成HTML

元素的class

因为在ES6里,class是关键字(不再是保留字).所以写的时候要注意,修改为className.

React系列之从一个脚手架开始说起:create-react-app

Wed, 12 Jul 2017 19:33:33 +0000

React的全家桶实在太过于庞大。如果初学者想直接品味React的魅力，这里介绍一个官方的脚手架。使用方法特别简单。

create-react-app

大概使用方法

安装

npm install -g create-react-app

创建一个app

create-react-app my-app
cd my-app/

文件结构：

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ └── favicon.ico
│ └── index.html
│ └── manifest.json
└── src
 └── App.css
 └── App.js
 └── App.test.js
 └── index.css
 └── index.js
 └── logo.svg
 └── registerServiceWorker.js

启动应用：

npm start

用浏览器打开 http://localhost:3000/ 就可以直接看到你的应用了。

如果你想打包你的应用：

npm run build

特点

不需要配置；
对 React, JSX, ES6 和 Flow 可以直接编译；
开发服务器；
浏览器热加载的功能；
JavaScript 文件中可以直接 import CSS 和图片；
自动处理 CSS 的兼容问题，无需添加 -webkit 前缀；
集成好了编译命令，编译后直接发布成产品，包含 sourcemaps。

哎哟，路边又捡了一个叫 create-react-native-app 的脚手架:

npm、yarn包管理工具切换淘宝源

Sat, 01 Jul 2017 20:32:05 +0000

因为一些特殊原因，npm、Yarn等包管理软件在国内下载总是有一点慢。可以切换为淘宝源，直接从国内的服务器直接拉取。这里做一个笔记：

NPM

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

如果不能开心的使用以上配置,可以尝试以下方法:

npm config set registry http://registry.cnpmjs.org
npm info underscore 
//（如果上面配置正确这个命令会有字符串response）

yarn

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

如果出现EACCES: permission denied这样的权限报错，修复/usr/local目录的所有权：

sudo chown -R `whoami` /usr/local

跨域还可以这样玩,使用CSS3特性做跨域

Tue, 20 Jun 2017 16:14:25 +0000

CSST (CSS Text Transformation)

通过CSS3的content获取内容。

利用js动态创建一个link插入到文档中, 请求css文件.
利用 computedStyle = window.getComputedStyle 获取指定元素的style 对象
利用 computedStyle .content 获取内容

服务端可以返回的 css 文件内容：

 @keyframes anima {
 from {}
 to {
 opacity: 0;
 }
 }
 @-webkit-keyframes anima {
 from {}
 to {
 opacity: 0;
 }
 }
 #CSST {
 content: "${text}";
 animation: anima 2s;
 -webkit-animation: anima 2s;
 }

${text}就是我们要填充的数据

监听函数 animationstart/webkitAnimationStart 来判断css是否加载完成

给#CSST元素设置动画

js逻辑：

function handle () {

 var computedStyle = getComputedStyle(span, false);

 var content = computedStyle.content;

 console.log('content: %s', content);

 var match = content.match(/[\w+=\/]+/);

 // base64解码
 if (match) {
 try {
 content = decodeURIComponent(escape(atob(match[0])));
 } catch (ex) {
 fn(ex);
 return;
 }
 }

 return content
}


var CSST = document.getElementById('CSST');

//监听事件
CSST.addEventListener('animationstart', handler, false);

CSST.addEventListener('webkitAnimationStart', handler, false);

元素动画启动,就可以获取到 content 里的内容了

Object.defineProperty与Proxy的共同之处

Thu, 01 Jun 2017 11:33:33 +0000

在看vue文档的时候发现一个有意思的地方. 就是关于Object.defineProperty的利用与Proxy有相似之处.非常有意思.

文档是这样说的:

把一个普通 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。

Object.defineProperty

语法：

Object.defineProperty(obj, prop, descriptor)

obj：必需。目标对象
prop：必需。需定义或修改的属性的名字
descriptor：必需。目标属性所拥有的特性

返回值:

传入函数的对象。即第一个参数obj

getter/setter 存取器描述

当使用存取器描述属性的特性的时候，允许设置以下特性属性：

var obj = {};
Object.defineProperty(obj,"newKey",{
 get:function (){} | undefined,
 set:function (value){} | undefined
});

当设置或获取对象的某个属性的值的时候，可以提供getter/setter方法。

var obj = {};
var initValue = 'hello';
Object.defineProperty(obj,"newKey",{
 get:function (){
 //当获取值的时候触发的函数
 return initValue; 
 },
 set:function (value){
 //当设置值的时候触发的函数,设置的新值通过参数value拿到
 initValue = value;
 }
});
//获取值
console.log( obj.newKey ); //hello

//设置值
obj.newKey = 'change value';

console.log( obj.newKey ); //change value

是不是很神奇?

但是看到这里,突然想到之前文章里提到过的ES6里新增的Proxy.

举个例子:

var obj={
 a:1
}
var proxyObj = new Proxy(obj,{ //proxyObj会继承obj
 set:function(){
 alert("我被修改了")
 },
 get:function(){
 alert("我被获取了")
 }
 });

 //修改属性
 proxyObj.a=2; //属性被修改后,之前设置的handler会被触发
 console.log(obj.a) // 2

今天就到这里,祝儿童节快乐.

聊聊Vue的事件修饰符

Thu, 25 May 2017 19:33:33 +0000

事件修饰符

说到vue的事件修饰符,相对angularJs来说,实在是太爽了,大大增加了可读性.

在日常开发中,经常要调用event.preventDefault 或者event.stopPropagation等方法.

没有事件修饰符的话,我们会这样写:

//AngularJS
$scope.fn=function(message,event){
 if (event) event.preventDefault()
 alert(message)
 }
}

//vue 也可以这样
methods: {
 fn: function (message, event) {
 // 现在我们可以访问原生事件对象
 if (event) event.preventDefault()
 alert(message)
 }
}

在vue中提供了更加方便的写法:

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

修饰键

在键盘的事件里,Vue也提供了很方便的处理.

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

还有更爽的按键别名:

一个关于微信SPA页面webview的缓存问题

Wed, 22 Feb 2017 16:14:25 +0000

一个低级问题

因为公司微信项目用的是angular路由的单页面应用.所以切换页面是基于hash值做到的.

我们遇到了一个问题,每一次部署新的网页代码到服务器上. 在Android微信客户端,总是要过好多天.甚至要重新卸载微信.重新打开页面之后,才会更新页面.(iPhone上却没有这个问题)

如果版本正式上线之后,遇到了紧急bug.那将是一场灾难啊.

解决办法

给url加上时间戳

首先想到的解决办法是,在网址后面加上时间戳,就像是这样:

xxx.com#/home/test/page/?t=(我是时间戳)

可是页面在安卓客户端却没有任何改善

这是为什么,是微信客户端的bug吗?

并不是,是时间戳加错了位置.

我们换一种方式.

xxx.com?t=(我是时间戳)#/home/test/page/

这个时候,我们发现安卓微信客户端的缓存问题迎刃而解了.

牵引出一个问题

为什么我们的时间戳放在最后面,浏览器取了缓存的代码.

首先我们看看URL的格式:

protocol :// hostname[:port] / path / [;parameters][?query]#hash

我们的时间戳用的是 “?” 分隔符,也就是query参数.

第一次,我们把query参数放在了"#“后面.于是我们的时间戳,也就是所谓的query参数,成了hash值.

不管是什么符号,什么字符,只要是放在了”#“后面的,都是hash值.

因为HTTP请求并不包括hash,所以不管我们怎么修改#号后面的时间戳,服务器接收到的请求,都是一样的.

重要的事情说三遍:

HTTP请求不包括hash
HTTP请求不包括hash
HTTP请求不包括hash

Hexo的DTraceProviderBindings MODULE_NOT_FOUND问题

Sun, 19 Feb 2017 21:32:05 +0000

最近在mac上安装Hexo,老是报错 DTraceProviderBindings MODULE_NOT_FOUND;

第一种报错

报错命令如下:

{ [Error: Cannot find module './build/Release/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/default/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/Debug/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }

虽然hexo的生成发布功能没有影响.但是每次运行命令的时候,就会报错.表示很不能忍;

网上的普遍方法是:

npm install hexo --no-optional

但是,我的电脑还是没有效果;

最后我重装了 hexo-cli

npm uninstall hexo-cli -g
npm install hexo-cli -g

我的报错问题就解决了.

第二种报错

{ Error: Cannot find module './build/Release/DTraceProviderBindings'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/usr/local/lib/node_modules/.dtrace-provider_npminstall/dtrace-provider/0.8.0/dtrace-provider/
dtrace-provider.js:17:23)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/usr/local/lib/node_modules/hexo-cli/node_modules/bunyan/lib/bunyan.js:79:18)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32) code: 'MODULE_NOT_FOUND' }

问题是因为安装的过程中,各种奇奇怪怪的问题导致hexo-cli的依赖库 dtrace-provider 没有安装成功.

Express设置CORS,让浏览器可以跨域访问你的服务器

Sat, 18 Feb 2017 21:32:05 +0000

说到前端跨域,确实让很多前端宝宝们捏了一把汗.

跨域的解决方法可谓是八仙过海.各种黑科技,各种黑魔法.让人看的目瞪口呆.(不了解的,可以去搜)

但是都没有相当完美的解决方案,都是可以这样却不能那样.

今天要说的就是目前跨域的终极解决方案(IE8以及更低版本的IE浏览器不支持)

var express = require('express'); 
var app = express(); 
//设置CORS
app.all('*', function(req, res, next) { 
 res.header("Access-Control-Allow-Origin", "*"); 
 //第二个参数,是一个*号,表示任意域名下的页面都可以都可以请求请求这台服务器;
 //设置指定域名:
 //res.header("Access-Control-Allow-Origin", "http://baidu.com");
 //这样,baidu.com下面的网页,就可以ajax请求你的服务器了


 res.header("Access-Control-Allow-Headers", "X-Requested-With"); 


 res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); 
 //第二个参数,为对方可以以哪种HTTP请求方式请求你的服务器,根据自己的情况酌情设置


 res.header("X-Powered-By",' 3.2.1') 
 res.header("Content-Type", "application/json;charset=utf-8"); 
 next(); 
}); 
 
app.get('/', function(req, res) { 
 res.send("你已经成功访问该服务器"); 
}); 
 
app.listen(3000);

让Node.js像浏览器一样Fetch你想要的

Fri, 17 Feb 2017 20:32:05 +0000

上一篇简单的介绍了Node.js http模块的get与post方式, 但是因为post的配置还是比较繁琐,今天推荐一个模块:

node-fetch

安装

npm install node-fetch --save

使用

var fetch = require('node-fetch');

// HTML 
fetch('https://github.com/')
 .then(function(res) {
 return res.text();
 }).then(function(body) {
 console.log(body);
 });
 


// JSON 
fetch('https://api.github.com/users/github')
 .then(function(res) {
 return res.json();
 }).then(function(json) {
 console.log(json);
 });
 


// 当网络发生错误
fetch('http://domain.invalid/')
 .catch(function(err) {
 console.log(err);
 });
 


// stream 流
var fs = require("fs")
fetch('https://assets-cdn.github.com/images/modules/logos_page/Octocat.png')
 .then(function(res) {
 var dest = fs.createWriteStream('./octocat.png');
 res.body.pipe(dest);
 });
 


// buffer 
var fileType = require('file-type');
fetch('https://assets-cdn.github.com/images/modules/logos_page/Octocat.png')
 .then(function(res) {
 return res.buffer();
 }).then(function(buffer) {
 fileType(buffer);
 });
 

// meta 
fetch('https://github.com/')
 .then(function(res) {
 console.log(res.ok);
 console.log(res.status);
 console.log(res.statusText);
 console.log(res.headers.raw());
 console.log(res.headers.get('content-type'));
 });
 


// POST请求 
fetch('http://httpbin.org/post', { method: 'POST', body: 'a=1' })
 .then(function(res) {
 return res.json();
 }).then(function(json) {
 console.log(json);
 });
 


// post with stream from resumer 
var resumer = require('resumer');
var stream = resumer().queue('a=1').end();
fetch('http://httpbin.org/post', { method: 'POST', body: stream })
 .then(function(res) {
 return res.json();
 }).then(function(json) {
 console.log(json);
 });
 



// post 表单数据
 
var FormData = require('form-data');
var form = new FormData();
form.append('a', 1);
fetch('http://httpbin.org/post', { method: 'POST', body: form })
 .then(function(res) {
 return res.json();
 }).then(function(json) {
 console.log(json);
 });
 




// post 表单数据并且修改header 
var FormData = require('form-data');
var form = new FormData();
form.append('a', 1);
fetch('http://httpbin.org/post', { method: 'POST', body: form, headers: form.getHeaders() })
 .then(function(res) {
 return res.json();
 }).then(function(json) {
 console.log(json);
 });
 


// node 0.12+, yield with co 
var co = require('co');
co(function *() {
 var res = yield fetch('https://api.github.com/users/github');
 var json = yield res.json();
 console.log(res);
});

API

fetch(url, options)

返回一个 Promise 对象

Node.js之http模块的get与post请求

Thu, 16 Feb 2017 20:32:05 +0000

在前端,经常要使用ajax获取,提交数据到服务端. 服务端当然也可以像另一个服务端发起同样的请求.

今天,说一下Node.js如何向另一个服务端发起请求.

GET请求

写法还是相当简单,跟angular的$http.get有一点点的像.

 var http = require('http');
 http.get("http://baidu.com", function(response) {
 console.log(response)
 });
})

POST请求

相对get,post的写法繁琐了很多.

虽然过程很清晰,但是对于写惯了各种前端框架封装的ajax后,还是难以接受的.

var http = require('http');
var querystring = require('querystring');
//json转换为字符串
var data = querystring.stringify({
 id:"1",
 text:"hello"
});
var options = {
 host: 'xxx.xxx.xxx',
 path:'/xxx/xxx/xxx/',
 method: 'POST',
 headers: {
 'Content-Type': 'application/x-www-form-urlencoded',
 'Content-Length': Buffer.byteLength(data)
 }
};

var req = http.request(options, function(res) {
 res.setEncoding('utf8');
 res.on('data', function (chunk) { //拼接数据
 console.log("body: " + chunk);
 });
 res.on('end',function(chunk){
 console.log("body: " + chunk);
 })
});
req.write(data);
req.end();

利用Node.js获取公网IP

Wed, 15 Feb 2017 21:30:05 +0000

因为树莓派放在家里,因为运营商的关系,公网ip是一直会变的. 那我们要怎么样才能快捷的拿到当前网络的公网ip呢?

今天介绍一个小工具,可以简单的获取到公网ip.

public-ip

安装

npm install --save public-ip

使用

const publicIp = require('public-ip');
 
publicIp.v4().then(ip => { 
 console.log(ip);
 //=> '46.5.21.123' 
});
 
publicIp.v6().then(ip => {
 console.log(ip);
 //=> 'fe80::200:f8ff:fe21:67cf' 
});

设置HTTPS

如果使用https,会基于 icanhazip.com 服务来查询的.

相对来说会安全一些,但是也会稍微的慢一些.


publicIp.v4({
 https:true //默认false
}).then(ip => { 
 console.log(ip);
 //=> '46.5.21.123' 
});

设置超时时间


publicIp.v4({
 timeout:5000 //默认5000毫秒
}).then(ip => { 
 console.log(ip);
 //=> '46.5.21.123' 
});

基于Github与Coding等代码托管平台的自动化部署

Tue, 14 Feb 2017 22:30:05 +0000

自从玩起了树莓派,每天都要经常把代码更新到树莓派上.

但是次数太频繁了,重复的事情就要做一遍又一遍.非常的浪费时间.

发现Github跟Codeing都有webhook功能,

于是我便有了一个想法:

想每次git push 更新代码的时候, 利用托管平台的webhook通知我的树莓派, 接收到通知后,自动更新托管平台的最新代码,并且自动重启.

这样不就节约很多时间了吗?

在npmjs.com上搜索有没有相关功能的模块,果然有:

github-webhook-handler

coding-webhook-handler

接下来我们以coding为例,来写一个自动部署的小程序.

先准备一段树莓派接受到通知后,运行的一段sh代码

#! /bin/bash
cd /home/pi/workspace/xxx //打开项目所在的目录
git reset --hard origin/master
git clean -f
git pull origin master //拉取并且合并代码
cnpm install //安装模块
pm2 reload app //pm2 重新启动程序

下面是js代码

const http = require("http");
const spawn =require('child_process').spawn;
const createHandler = require("coding-webhook-handler");
const handler = createHandler({ //配置好coding的参数
 path: "/",
 token: "dsdsdsdsds"
});

http.createServer((req, res) => { //开启一个服务,接收托管平台发送过来的通知
 handler(req, res, (err) => {
 res.statusCode = 404;
 res.end("no such location")
 })
 console.log("Hi!")
}).listen(7878);

const runCommand = (cmd, args, callback) => { 
 const child = spawn(cmd, args); //运行sh代码

 let response = ""; //接收托管平台发送过来的内容
 child.stdout.on("data", buffer => response += buffer.toString());
 child.stdout.on("end", () => {
 callback(response)
 })
}

handler.on("error", (err) => {
 console.error('Error:', err.message) //输出错误信息
})


handler.on('*', function (event) {
 console.log(event.event)
 console.log(event.payload)
 console.log(event.protocol)
 console.log(event.host)
 console.log(event.url)
})


handler.on("push", (event) => { //push事件
 console.log('event:', event.event); 

 runCommand('sh', ['./auto_build.sh'], txt => { //运行sh代码
 console.log(txt) //输出托管平台发来的信息
 })
})

利用Node.js生成阿里云API签名

Mon, 13 Feb 2017 21:32:05 +0000

想要调用阿里云的云解析API,必须要生成阿里云所要求的签名. 签名机制

网上一直没有找到nodejs相关获取签名的代码. 按照阿里云的要求,我自己写了一段程序,便于大家轻松的生成签名.

const querystring = require('querystring');
const crypto = require("crypto");

module.exports=function getSignatureParams(params) {
 StringToSign = "GET" + "&" + percentEncode("/") + "&" + percentEncode(uriSort(params))
 var Signture = getSignture(StringToSign);
 params.Signature = Signture;
 return params; //返回带签名的完整uri
}


 function percentEncode(str) { //百分比编码 uri
 var s = encodeURI(str);
 return s
 .replace(/ /g, "%20")
 .replace(/\//g, "%2F")
 .replace(/\+/g, "%20")
 .replace(/\*/g, "%2A")
 .replace(/\%7E/g, "~")
 .replace(/\=/g, "%3D")
 .replace(/\&/g, "%26")
 .replace(/\:/g, "%253A")
 }
 
 function getSignture(Signature) { //计算HMAC
 // 47awTgVxfVEBL8hewkBgYD6kEvuJn0 
 return crypto
 .createHmac('sha1', "testsecret&") //你的secret
 .update(Signature)
 .digest()
 .toString('base64');
 }

 function uriSort(uri) { //uri参数排序
 var arr = querystring.stringify(uri).split("&");
 arr = arr.sort();
 var str = "";
 [].forEach.call(arr, function (s, i) {
 if (i == (arr.length - 1)) {
 str = str + s
 } else {
 str = str + s + "&"
 }
 });
 return str;
 }

关闭Mac系统的SIP与卸载Mac上的输入法

Sat, 21 Jan 2017 22:30:05 +0000

mac电脑上,有的多余的输入法,发现竟然删不掉.每次切换输入法的时候总是要多按几次切换.表示极其的不爽.

首先就是系统默认的输入法.

关闭 mac 系统的 SIP

重启系统，按住 Command + R 进入恢复模式。
点击顶部菜单栏实用工具中的终端。
输入以下命令来禁用 SIP 保护机制。

csrutil disable

执行后输出以下信息表示禁用成功。

Successfully disabled System Integrity Protection. Please restart the machine for the changes to take effect.

最后重启系统即可。

重新打开 SIP 方法

在恢复模式下的终端输入以下命令

csrutil enable

卸载系统输入法

安装Xcode或下载“Property List Editor”，因为需要打开(.plist)格式文件
打开“终端”
在“终端”里输入命令

sudo open ~/Library/Preferences/com.apple.HIToolbox.plist

回车，输入用户账户的密码

我们选中“Root”—“AppleEnabledInputSources”，一个一个点开,查找你想要删除的输入法，然后删除。

最后重启Mac

QQ输入法等第三方输入法

首先打开活动监视器，把QQ输入法进程关闭。
Finder界面按下 shift+command+G, 输入：/library/input methods（系统的资料库）, 进入文件夹，找到qq输入法，删掉。
Finder界面按下 shift+command+G, 输入：~/library/input methods （个人文件夹的资料库），进入文件夹，找到qq输入法，删掉。

Raspberry之时间自动校准

Fri, 20 Jan 2017 22:30:05 +0000

应该是树莓派系统版本的问题,网上很多方法开启网络时间协议(时间自动校准)已经失效.对于我这样的小白来说,试了很多种方法,都没有成功.

今天来说说正确的开启姿势;

树莓派没有默认开启时间自动校准功能的.需要打开NTP（Network Time Protocol，网络时间协议）才可以尽可能的保证时间的准确度.

启用NTP：

sudo timedatectl set-ntp true

接下来我们来看看时间是否正确:

pi@raspberrypi:~ $ date
2017年 03月 20日 星期一 21:38:41 CST

很明显时间都正确了.如果时间差了24小时以内,那大概是时区错了.

POST请求要比GET安全吗

Mon, 16 Jan 2017 11:46:35 +0000

从学习发送请求的第一天,老师就告诉我们. POST请求,要比GET请求要安全.

为什么?

在利用from发送请求的时代.get请求会夹带信息在地址栏里,而post不会.post会把信息放在body里面.

因为参数放在地址栏里的get请求,会让别人看得见.一些信息难免会暴露.

所以得出,post要比get更加安全.

后来公司新来了一名后台小哥,他说post要比get更安全,于是没有经过任何人同意,把所有的新增接口都设计成了post.当我联调的时候,看着这一连串的post请求,一脸懵逼.开发这么久,我从来不觉得这会有安全问题的存在.

公司前端都是AngularJs的SPA应用. 所以每次发送请求的方式都是Ajax.并不存在get请求的参数会暴露在地址栏的情况.

如果所有的接口,全部变成了post,那我们的代码会变成什么样子呢?

//查找数据
$http.post("xxx.xxx.xxx")

//增加数据
$http.post("xxx.xxx.xxx")

//修改数据
$http.post("xxx.xxx.xxx")

//删除数据
$http.post("xxx.xxx.xxx")

所有的请求都是post,根本没有任何语义,一塌糊涂,非常不利于查看.

大家都知道,请求方式都好几种.

GET
POST
HEAD
PUT
DELETE
OPTIONS
TRACE
CONNECT

对于增删改查都有相应的方式,那我们的代码:

//查找数据
$http.get("xxx.xxx.xxx")

//增加数据
$http.post("xxx.xxx.xxx")

//修改数据
$http.put("xxx.xxx.xxx")

//删除数据
$http.delete("xxx.xxx.xxx")

小结:

在SPA应用里,POST并没有跟GET上有所谓安全性的差异.我们应该使用更加适合的请求方式,来发送以及请求数据.

Raspberry之开机启动pm2

Thu, 12 Jan 2017 20:32:05 +0000

我玩树莓派的过程简直可以用坎坷来形容,研究了十几个小时才安装上Node.js.

接下来想要做开机启动pm2,又折腾了十几个小时.网上的方法因为跟不上版本的迭代更新了,导致各种失败.

接下来,介绍一下让pm2在树莓派上开机启动的方法

首先下载pm2

cnpm install pm2 -g

运行需要run的代码

pm2 start app.js

保存这时候pm2运行的状态,以便开机启动后,pm2 可以重新跑app.js

sudo pm2 save //系统会生成一个文件 '/home/pi/.pm2/dump.pm2'

(重点)接下来我们要锁定这个文件,不允许任何方式的修改

sudo chattr +i /home/pi/.pm2/dump.pm2

设置开机启动

sudo pm2 startup systemd -u pi --hp /home/pi

sudo reboot //重启查看开机启动的效果

通过以上步骤,我们就可以成功的开机启动pm2 并且运行app.js

如果我们以后想修改pm2 开机启动的配置,我们需要解锁dump.pm2文件,

pm2 start xxx.js //运行另一个程序
sudo chattr -i /home/pi/.pm2/dump.pm2 //解锁文件

sudo pm2 save //保存配置
sudo chattr +i /home/pi/.pm2/dump.pm2 //重新加锁
sudo pm2 startup systemd -u pi --hp /home/pi //设置开机启动

sudo reboot 重启操作系统

以上就是修改pm2开机启动配置的方法了,是不是简单得不能再简单?

(这么简单的步骤,居然浪费了一天的时间,才找到方法,不过我很喜欢这样的感觉)

Raspberry之安装Node.js

Wed, 11 Jan 2017 22:30:05 +0000

我安装的树莓派系统是自带Node.js的,但是版本非常的低.而且没有npm. 为了安装新版的nodejs,我折腾了十几个小时,网上的方法各种失败.

最终终于安装成功了,接下来我介绍一下我的安装方法.

下载Node.js

Node.js 下载页面

我们选择Linux Binaries (ARM) ARMv7的版本,复制下载链接

wget https://nodejs.org/dist/v6.9.5/node-v6.9.5-linux-armv7l.tar.xz
tar -xzf node-v6.9.5-linux-armv7l.tar.xz //解压安装包
sudo mv node-v6.9.5-linux-armv7l /usr/local/bin/node/
sudo ln /usr/local/bin/node/bin/node /usr/local/bin/node
sudo ln -s /usr/local/bin/node/lib/node_modules/npm/bin/npm /usr/local/bin/npm

好了,这时候我们在任意目录下输入:

node -v
npm -v

node 是最新版本的了,npm 也有了

因为在国内,用npm下载包的话,会经常不稳定,这时候我们可以用到 cnpm, 输入以下命令:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

下载完成之后,我们安装模块的时候:

$ cnpm install [name]

Raspberry之外网访问树莓派

Tue, 10 Jan 2017 20:53:05 +0000

我想在公司的时候,也可以操作我家里的树莓派. 可是家里的ip地址是动态的,那我应该怎么办呢?

经过各种网上一顿搜索之后,利用路由器的端口转发或者DMZ,可以做到外网访问内网.

可是我设置完之后,并没有成功.折腾了好久,没有找到原因.最后以失败告终.(我怀疑我买到了假路由器).

各种方案尝试过之后,利用花生壳可以做到外网访问内网,花生壳的叫法是:

内网穿透

进入花生壳的下载地址,选择树莓派版本

下载页面

复制最新版本的花生壳树莓派版本的最新版下载路径

wget http://download.oray.com/peanuthull/embed/phddns_raspberry.tgz //下载花生壳
tar zxvf phddns_raspberry.tgz //解压安装包

解压完成后，在当前路径下执行cd phddns2，进入phddns2文件夹，执行./oraynewph start ，如提示Oraynewph start success说明花生壳成功安装运行。

其实我运行oraynewph start的时候并没有成功,

如果你也碰到同样的情况的话可以输入以下命令:

$> sudo mkdir -p /usr/oray-app
$> sudo tar -zxvf ./oraynewph.tgz -C /usr/oray-app/
$> sudo rm -rf oraynewph.tgz
$> sudo mv ./parse /usr/oray-app/parse
$> sudo mv ./oray_serve /etc/init.d/oray_serve
$> sudo mv ./oraynewph /bin/oraynewph
$> cd ..
$> rm -rf phddns2
$> sudo touch /tmp/oraynewph_log
$> sudo update-rc.d oray_serve defaults
$> sudo /usr/oray-app/bin/oraynewph -s 0.0.0.0 &>/dev/null &
$> sudo /usr/oray-app/bin/oraysl -a 127.0.0.1 -p 16062 -s phsle01.oray.net:80 -d

Raspberry之利用SSH操作树莓派

Tue, 10 Jan 2017 17:53:05 +0000

各种搜索,各种折腾之后,终于给我的小树莓派安装好了操作系统. 但是,这PIXEL OS图形操作界面,各种莫名其妙点不动的bug. 折腾了好几个小时之后,让我各种抓狂.

因为是刚刚接触Linux,很多问题需要在网上搜索,PC跟树莓派之间切换来切换去实在是不好受.

下面就介绍,用另一台电脑通过SSH来控制树莓派的方法.来解决以上各种抓狂的问题.

在树莓派打开命令行:

输入 sudo raspi-config

选择Advanced Options

选择SSH

选择yes

SSH 已经启用

然后打开PC的命令行(我用的是macOS,命令行直接可以用ssh)

输入:

ssh pi@192.168.1.xxx

地址为树莓派的ip地址,如果不知道,在树莓派命令行输入 ifconfig,就可以看到了

然后输入密码,如果还没有修改过用户pi的密码的话,默认密码就是:raspberry

随后就可以尽情的玩耍了

Raspberry之系统安装

Tue, 10 Jan 2017 12:43:05 +0000

年过完了，某宝商家终于开始工作发货了。年前的时候，就想买一个树莓派来玩一玩。可是我运气不好，商家已经准备回家过年了。

昨天在某宝下单。今天就拿到了。我买的是Raspberry-Pi3 Modle B。

树莓派并没有自带硬盘，所以想要安装系统的话，要自己准备TF卡或者U盘。

接下来，就要去树莓派的官网下载系统了。官方安装系统工具，NOOBS非常的简单。

下载地址

下载完成后,我们就可以按照以下步骤来安装系统了.

1,把下载的zip包解压到TF卡里

2,把TF卡插入树莓派,并且用HDMI接入显示器,鼠标键盘,接上电源.

这时,树莓派被点亮,显示器会出现以下内容:

3,这时按下shift按键,会进入恢复系统界面

选择你想要安装的系统,点击安装.

等待几分钟,系统就安装好了.

重启进入桌面后,这桌面操作系统叫 PIXEL OS;基于 Debian.

PIXEL 的意思是“Raspberry-Pi Improved Xwindows Environment, Lightweight”，即“树莓派改进的轻量级 Xwindows 环境”.

关于我在工作中项目调试的方法

Wed, 04 Jan 2017 11:46:35 +0000

移动端调试

想要在pc上调试移动端页面,需要做下面几个步骤

PC

1.下载微信web开发者工具;

2.打开微信开发者工具,选择移动调试

3.选择一个请求,把cookie复制出来

4.在电脑chrome打开开发者工具,切换到console输入以下代码 (用于鉴权)

 document.cookie="你刚刚复制的cookie"

5.如果是微信页面,需要用chrome模拟微信浏览器的 user-agent,教程如下:

模拟UA实现访问只能在微信上打开的网页

如果觉得麻烦,可以直接使用微信开发者工具自带的浏览器打开微信页面,里面的user agent,默认是为心里的

做完以上步骤,你就可以正常在电脑上打开移动页面,或者微信网页了

微信开发者模式

如果你的微信帐号被添加到了公众号web开发者名列. 你可以在微信web开发者工具直接输入最原始的链接地址,便可以在电脑上调试了.(因为后台需要跳转好几次,来拿到cookie.最终微信复制出来的地址,是拿不到数据的)

该方法,要把代码部署到服务器上,才可以调试.目前项目的自动化做得还算方便.只要 grunt $build,代码就会自动部署到服务器.

如果想在本地开发环境,直接调试.只要拿到cookie,就可以解决所有问题.

微信web开发者工具的调试器与chrome一致,所以复制出cookie也是很方便的了.接下来,参照以上PC的调试方法.

mac

如果你用mac 并且有iphone,可以使用以下方法

使用safari对webview进行调试

注:无视教程第三步,也不需要xcode.只要是webview 都可以直接调试

我也写一个Canvas惊悚的粒子效果

Sun, 04 Sep 2016 11:46:35 +0000

预览: Canvas简单粒子效果预览

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Canvas简单粒子效果预览</title>
 <style>
 html,
 body {
 margin: 0;
 padding: 0;
 height: 100%;
 overflow: hidden;
 }
 </style>
</head>
<body>
 <canvas id="dotCanvas"></canvas>
 <script>
 (function () {
 //创建canvas对象
 var domConvas = document.getElementById("dotCanvas");
 var oCanvas = domConvas.getContext("2d");

 var winWidth = document.documentElement.clientWidth;
 var winHeight = document.documentElement.clientHeight;

 //设置宽高
 domConvas.width = winWidth;
 domConvas.height = winHeight;

 //初始化点,并且随机给出每一个点的位置与速度
 var dots = [];
 for (var i = 0; i < 300; i++) {
 dots.push({
 x: Math.random() * winWidth >> 0,
 y: Math.random() * winHeight >> 0,
 xm: (amen() ? 1 : 2.5) * (amen() ? -1 : 1),
 ym: (amen() ? 1 : 2.5) * (amen() ? -1 : 1),
 max: 6000
 })
 }

 //随机函数
 function amen() {
 return !!(Math.random() * 10 >> 0) % 2
 }

 dotMove();

 //开始运动
 function dotMove() {
 //清空canvas,便于重绘
 oCanvas.clearRect(0, 0, winWidth, winHeight)

 //给出点新的位置,开始移动
 dots.forEach(function (dot, index) {
 dot.x = dot.x + dot.xm;
 dot.y = dot.y + dot.ym;

 //粒子超出屏幕处理
 if (dot.x < 0 || dot.x > winWidth) {
 dot.xm = dot.xm * -1
 }

 if (dot.y < 0 || dot.y > winHeight) {
 dot.ym = dot.ym * -1
 }

 //重绘画布
 oCanvas.fillRect(dot.x, dot.y, 2, 2);


 //根据距离画线
 for (var i = 0; i < dots.length; i++) {
 var dot2 = dots[i];
 if (dot2 == dot) continue;

 var gou = dot.y - dot2.y;
 var gu = dot.x - dot2.x;

 //勾股定理
 var xian = gou * gou + gu * gu;
 
 if (xian < dot2.max) {
 //如果符合条件 开始画线
 oCanvas.beginPath();
 oCanvas.strokeStyle = 'rgba(0,0,0,1)';
 oCanvas.lineWidth=1;
 oCanvas.moveTo(dot.x, dot.y); //画线的起点
 oCanvas.lineTo(dot2.x,dot2.y) //画线的终点
 oCanvas.stroke()
 }
 }
 })

 //每秒60帧刷新
 requestAnimationFrame(dotMove)
 }

 })()
 </script>
</body>

</html>

置换与非置换元素

Mon, 29 Aug 2016 17:33:33 +0000

突然的听到了这个概念.以前从来没有听过.于是就查了查多了解一下.

置换和非置换元素

置换元素(replaced element)一般是指有默认就有样式的元素,比如:img, input, textarea, select, object
非置换元素(non-replaced element)反之,就是除了:img, input, textarea, select, object 等置换元素以外的其他元素。

JavaScript的运算符优先级

Thu, 25 Aug 2016 11:33:33 +0000

JavaScript 运算符

下表列出了 JavaScript 运算符，并按优先级顺序从高到低排列。具有相同优先级的运算符按从左至右的顺序计算

运算符	说明
.[ ] ( )	字段访问、数组索引、函数调用和表达式分组
++ – - ~ ! delete new typeof void	一元运算符、返回数据类型、对象创建、未定义的值

/ %|相乘、相除、求余数

- +|相加、相减、字符串串联 « » »>|移位 < <= > >= instanceof|小于、小于或等于、大于、大于或等于、是否为特定类的实例 == != === !==|相等、不相等、全等，不全等 & |按位“与” ^|按位“异或” | | 按位“或” && |逻辑“与” || | 逻辑“或” ?: |条件运算 = OP=|赋值、赋值运算（如 += 和 &=） , |多个计算

fetch遇到了一个坑

Wed, 08 Jun 2016 22:52:35 +0000

fetch 在跨域的情况下,不带cookie;

解决办法:

带上参数{credentials: ‘include’}后才可以在请求里面带上cookie

fetch('doAct.action', {credentials: 'include'}).then(function(res) {
 // ...
})

关于HTML5 History API

Mon, 06 Jun 2016 23:52:35 +0000

关于HTML5 History API

html5加强了history, 在spa页面里面,有两种方法可以修改了网址页面不用刷新,

修改页面的hash值,
利用html5加强后了的pushState

先说所有浏览器都可以使用hash hash 就是我们以前所说的锚点我们对他并不陌生, 我们可以通过

location.hash="212345"

就可以设置网址的hash值,下面是表现形式:

www.xxx.com#212345

在html里利用a标签也是可以修改hash的

<a href="#123456"></a>

当我们修改hash的时候,我们会触发一个事件:

window.onhashchange = function(){
 //do something
}

hash暂且说到这里,下面我们说 pushState

pushState 是history下面的方法

所以我们调用的时候是:

history.pushState()

pushState系列一共有两个方法,一个事件

history.pushState(state, title, url);
history.replaceState(state, title, url);

window.onpopstate

pushState

pushState一共有三个参数,

state: 可以放任意你想放的数据，它将附加到新url上，作为该页面信息的一个补充。

title: 顾名思义，就是document.title。不过这个参数目前并无作用，浏览器目前会选择忽略它。

url: 新url，也就是你要显示在地址栏上的url。

pushState 运行之后,可以记录history

replaceState

也三个参数,作用跟上面是一样的

唯一的不同点是不会记录history

window.onpopstate

history.pushState()不会触发这个事件 history.replaceState()也不会触发这个事件,

当页面前进回退的时候会触发这个事件

事件可以拿到PopStateEvent对象,可以获取到很多关于state的信息

关于FormData文件上传

Fri, 03 Jun 2016 23:46:35 +0000

关于文件上传

在新时代里,使用input file 选取文件, 然后我们查到这dom对象的时候,把这个对象传进 Formdata,

var filedata = document.getElementById('file');

var formData= new FormData();

formData.append('file',filedata);

var xhr = new XMLHttpRequest();

xhr.open('post','url',true);
xhr.send(formData);
xhr.onreadystatechange= function(){
 if(xhr.readyState = 4 &&xhr.staus == 200){
 do something....
 }
}

//假设 html已经有一个form,并且包含一个input type="file"
var form = document.getElementById('form');

//我们只要传进 FormData 就可以了
var formData= new FormData(form);

var xhr = new XMLHttpRequest();

xhr.open('post','url',true);
xhr.send(formData);
xhr.onreadystatechange= function(){
 if(xhr.readyState = 4 &&xhr.staus == 200){
 do something....
 }
}

在没有FormData的年代,我们是用form上传文件

用js创建一个form表单,里面放几个input, 然后提交也能完成表单提交

AngularJS的按需加载(3)

Wed, 01 Jun 2016 23:55:35 +0000

上一篇大概的描述了一下Angular的启动过程,

如果想要在自己的项目里,异步的加载第三方模块,就是按照上一篇的主要逻辑再跑一遍.

这样子,第三方的模块的方法才能全部加载到angular里.

app.config([
 '$controllerProvider',
 '$compileProvider',
 '$filterProvider',
 '$provide',
 '$injector',
 function($controllerProvider, $compileProvider, $filterProvider, $provide, $injector) {

 //像第一篇说的那样,把内部方法暴露出来
 app.controller = $controllerProvider.register;
 app.directive = $compileProvider.directive;
 app.filter = $filterProvider.register;
 app.factory = $provide.factory;
 app.service = $provide.service;
 app.provider = $provide.provider;
 app.value = $provide.value;
 app.constant = $provide.constant;
 app.decorator = $provide.decorator;


 //并且定义一个全局的函数,方便以后随便调用
 //加载三方模块下的代码,
 window.addModule=function(moduleName){
 var module = angular.module(moduleName);
 var ngProviders = {
 '$controllerProvider': $controllerProvider,
 '$compileProvider': $compileProvider,
 '$filterProvider': $filterProvider,
 '$provide': $provide
 };

 if (module.requires) {
 for (var i = 0; i < module.requires.length; i++) {
 addModule(module.requires[i]);
 }
 }
 angular.forEach(module._invokeQueue, function(args) {
 var provider = ngProviders[args[0]] || $injector.get(args[0]);
 provider[args[1]].apply(provider, args[2]);
 });
 angular.forEach(module._configBlocks, function(args) {
 var provider = ngProviders.$injector.get(args[0]);
 provider[args[1]].apply(provider, args[2]);
 });
 angular.forEach(module._runBlocks, function(args) {
 $injector.invoke(args);
 });
 }

 }
]);

AngularJS的按需加载(2)

Tue, 31 May 2016 20:34:35 +0000

上一篇我们实现了最简单的AngularJS的按需加载,

可以通过替换Angular的内部方法,再使用require.js配合$q完成了按需加载.

今天来说说Angular如何按需加载第三方module;

在此之前,我们得先弄清楚Angular是如何启动的.

setupModuleLoader方法

在上图中,我们得注意一个非常主要的方法;

setupModuleLoader方法,顾名思义 —— 模块加载器;

此方法最后返回的对象为:

var moduleInstance = {
 _invokeQueue: invokeQueue,
 _runBlocks: runBlocks,
 requires: requires,
 name: name,
 provider: invokeLater('$provide', 'provider'),
 factory: invokeLater('$provide', 'factory'),
 service: invokeLater('$provide', 'service'),
 value: invokeLater('$provide', 'value'),
 constant: invokeLater('$provide', 'constant', 'unshift'),
 animation: invokeLater('$animateProvider', 'register'),
 filter: invokeLater('$filterProvider', 'register'),
 controller: invokeLater('$controllerProvider', 'register'),
 directive: invokeLater('$compileProvider', 'directive'),
 config: config,
 run: function(block) {
 runBlocks.push(block);
 return this;
 }
}

看着这对象的格式,有没有特别熟悉?

当我们运行

angular.module('app',[]);

//或者

angular.module('app')

我们新建一个module或者获取一个module的时候, 返回的就是这个对象.

当我们做链式操作的时候, angular.module(‘app’,[]).config().run().controller();

每一步操作,返回的都是它,所以我们才可以做链式操作;

当angular初始化完成之后,开始在dom里寻找ng-app属性;

当找到ng-app后,拿到ng-app的value后才开始启动 angular; 内部运行bootstrap方法;

如果要选择手动启动的话也可以这样:

angular.bootstrap(document, ['moduleName']);

当bootstrap的时候angular在做什么呢?

doBootstrap方法

在源码里中的bootstrap方法里有一个doBootstrap方法:


 var doBootstrap = function() {
 element = jqLite(element);
 //判断是否启动
 if (element.injector()) {
 var tag = (element[0] === document) ? 'document' : startingTag(element);
 throw ngMinErr(
 'btstrpd',
 "App Already Bootstrapped with this Element '{0}'",
 tag.replace(/</,'&lt;').replace(/>/,'&gt;'));
 }

 //angular.bootstrap(document, ['moduleName']);
 //这里的modules就是之前我们bootstrap时候传进来的 moduleName
 //modules ==> ['moduleName']
 modules = modules || [];
 modules.unshift(['$provide', function($provide) {
 $provide.value('$rootElement', element);
 }]);

 .....

 //重点来了 createInjector
 var injector = createInjector(modules, config.strictDi);

 injector.invoke(['$rootScope', '$rootElement', '$compile', '$injector',
 function bootstrapApply(scope, element, compile, injector) {
 scope.$apply(function() {
 element.data('$injector', injector);
 compile(element)(scope);
 });
 }]
 );
 return injector;
 };

createInjector方法

我们看这个方法主要做了什么

AngularJS的按需加载(1)

Mon, 30 May 2016 16:14:25 +0000

今天来聊一聊一直困扰了我很久的问题.AngularJS的按需加载.

angular的好处这里就不用多说, 但是用久了你会发现,一个网站所有的 Controller, Service, Directive等等,全部加载完了, 页面才开始跑.

小项目,代码少.不会感觉太大问题.

但是页面多了,那主页越来越臃肿.有用的,没用的通通加载进来. 虽说全部加载,页面第一次打开会慢很多,之后打开的页面速度会极快. 但是,这一点都不Smart.

那有什么办法可以做到按需加载呢?

其实很简单,看代码:

app.config([
 '$controllerProvider',
 '$compileProvider',
 '$filterProvider',
 '$provide',
 function($controllerProvider, $compileProvider, $filterProvider, $provide) {
 app.controller = $controllerProvider.register;
 app.directive = $compileProvider.directive;
 app.filter = $filterProvider.register;
 app.factory = $provide.factory;
 app.service = $provide.service;
 app.provider = $provide.provider;
 app.value = $provide.value;
 app.constant = $provide.constant;
 app.decorator = $provide.decorator;
 }
]);

我们要先把angular的方法替换成内部使用的方法,

这样我们在后面才可以正常的按需加载Controller, Service, Directive…

接下来,我们选择一个模块加载器, 流行的加载器有很多,Require.js,Sea.js,System.js 等等.

选一个最经典的 Require.js;

下面是按需加载的小demo Github Demo

我们先配置好,require的config;

app.bootstrap.js

require.config({
 paths: {
 'angular': 'http://cdn.bootcss.com/angular.js/1.5.6/angular.min',
 'ui.router': 'http://cdn.bootcss.com/angular-ui-router/0.2.18/angular-ui-router.min',
 'app': 'app'
 },
 shim: {
 'ui.router': {
 deps: ['angular']
 }
 }});

接下来是 app.js

define([
 'angular', 'ui.router'
], function() {
 var app = angular.module('app', ['ui.router']);

 app.config([
 '$controllerProvider',
 '$compileProvider',
 '$filterProvider',
 '$provide',
 function($controllerProvider, $compileProvider, $filterProvider, $provide) {
 app.controller = $controllerProvider.register;
 app.directive = $compileProvider.directive;
 app.filter = $filterProvider.register;
 app.factory = $provide.factory;
 app.service = $provide.service;
 app.provider = $provide.provider;
 app.value = $provide.value;
 app.constant = $provide.constant;
 app.decorator = $provide.decorator;
 }
 ]);

 app.config([
 '$stateProvider',
 '$urlRouterProvider',
 function($stateProvider, $urlRouterProvider) {
 $urlRouterProvider.otherwise('/home');
 $stateProvider.state('home', {
 url: '/home',
 templateUrl: 'view/testTemplate.html',
 controller: 'testController',
 resolve: {
 deps: [
 '$q',
 '$rootScope',
 function($q, $rootScope) {
 var deferred = $q.defer();
 require(['../view/testController'], function() {
 $rootScope.$apply(deferred.resolve);
 });
 return deferred.promise;
 }
 ]
 }
 })
 }
 ])
return app;
})

下面是模版代码,主要是为了测试控制器是否加载成功

Journey

Sat, 28 May 2016 14:19:04 +0000

微信浏览器动态修改Title

Thu, 26 May 2016 11:43:05 +0000

微信浏览器动态修改Title

为什么会有这么一篇文章?之前在做spa页面开发的时候,发现了一件非常匪夷所思的事情.

下面这段代码在微信浏览器里,是无效的.

document.title = "我是标题"

标题第一次生成后,就无法在改变.

不过没有关系,

下面我们用黑魔法般的代码,来完成微信浏览器里title的修改.

document.title = "我是标题";
var iframe = document.createElement("iframe");
iframe.src = "/favicon.ico";
document.body.appendChild(iframe);
iframe.onload = function() {
 setTimeout(function() {
 document.body.removeChild(iframe);
 }, 0)
}

就是这样,title改变了.

JavaScript的奇淫技巧

Wed, 25 May 2016 11:33:33 +0000

类型转换

数组转字符串

var arr = [1,2,3,4,5,6];
var str = arr+''; //1,2,3,4,5,6

字符串转数字

var str = '999';
var num = str * 1; //999

var str = '999';
var num = str - 0; //999

字符串转数字

var str = '999';
var num = str * 1; // 999

向下取整

var num = ~~1.23232656; // 1

var num = 563.933333 >> 0; // 563

boolean 转换

var bool = !!null; // false
var bool = !!'null'; // true

var bool = !!undefined; // false
var bool = !!'undefined'; // true

var bool = !!0; // false
var bool = !!'0'; // true

var bool=!!''; // true
var bool=!![]; // true
var bool=!!{}; // true

var bool=!!new Boolean('false'); // true
var bool=!!new Boolean('true'); // true

判断对象下面是否有此属性

直接判断

var obj = {a:123};
if(obj.a){ //obj.b ==>123
console.log('运行了') //可以运行
}

if(obj.b){ //obj.b ==>undefined
console.log('运行了') //没有运行
}

var obj2 = {a:false};
if(obj2.a){ //obj.b ==>false
console.log('运行了') //没有运行
}
// 不严谨,如果值为0,undefined,false,null... 也会判断为false

in 操作符

var obj = {a:123};
if('a' in obj){ // 'a' in obj ==>true
console.log('运行了') //可以运行
}

if('b' in obj){// 'a' in obj ==>false
console.log('运行了') //没有运行
}

利用hasOwnProperty

var obj = {a:123};
if(obj.hasOwnProperty('a')){ //==>true
console.log('运行了') //可以运行
}

if(obj.hasOwnProperty('b')){ //==>false
console.log('运行了') //没有运行
}

还有好多好多,得慢慢写

浏览器常用的本地储存方式

Fri, 29 Apr 2016 17:33:33 +0000

日常开发中,难免会遇到一些要求浏览器储存一些数据的需求.目前常用的储存方法有:

cookie设计之初,本身不是用来储存数据.而是区别http请求. 所以每一次http请求,都会带上cookie.如果cookie储存的量实在过大,肯定会造成http的性能问题.

// 设置cookie(储存数据)
function setcookie(name,value,expired,path,domain){
	var now=new Date();
	if(name==null){
		throw "Cookie Name Must not be Null";
		}else if (value==null){
		throw "Cookie Value Must not be Null";
		}else if(expired==null){
		expired=0;
	}
	if(path==null){
		path="/";
	}
	if(domain==null){
		domain=window.location.host;
	}
	now.setTime(now.getTime()+expired*1000);
document.cookie=name+"="+escape(value)+";expires="+now.toGMTString()+";path="+path+";domain="+domain;
}

// 读取cookie(读取数据)
function getcookie(name){
	var allcookie=document.cookie;
	thiscookie=allcookie.match(name+"=[^\\s]*");
	mycookie=thiscookie[0].split("=");
	a=mycookie[1].substring(0,mycookie[1].length-1);
	return unescape(a);
}

localStorage

相对cookie的读取操作,localStorage会简单非常多. 另外localStorage每一次更新,都会触发一次onstorage事件

localStorage.xxx="time-friend.com";
localStorage['xxx']="time-friend.com";
localStorage.setItem("xxx","time-friend.com");
//获取
localStorage.xxx;
localStorage['xxx'];
localStorage.getItem("xxx");
//删除
localStorage.removeItem("xxx");
//清空locaStorage
localStorage.clear();

//onstorage事件
window.addEventListener("storage", function(){
// 做一些你想做的事情
}, false);

Flash ShareObject

这种方式能能解决上面提到的cookie存储的两个弊端，而且能够跨浏览器，应该说是目前最好的本地存储方案。不过，需要在页面中插入一个Flash. 缺点：需要安装Flash插件。

什么是浏览器的重绘与回流

Mon, 25 Apr 2016 19:33:33 +0000

重绘与回流的定义

重绘：当前元素的样式(背景颜色、字体颜色等)发生改变的时候，我们只需要把改变的元素重新的渲染一下即可，重绘对浏览器的性能影响较小，所以一般不考虑。　　发生重绘的情形：改变容器的外观风格等，比如background：black等。改变外观，不改变布局，不影响其他的dom。
回流：是指浏览器为了重新渲染部分或者全部的文档而重新计算文档中元素的位置和几何构造的过程。因为回流可能导致整个dom树的重新构造，所以是性能的一大杀手.一个元素的回流导致了其所有子元素以及DOM中紧随其后的祖先元素的随后的回流.

浏览器渲染过程　　

渲染：就是把浏览器把HTML代码以css定义的规则显示在浏览器窗口的过程

浏览器解析HTML的基本过程：

用户输入网址，浏览器向服务器发出请求，服务器返回html文件
浏览器载入html代码，发现标签内有一个标签引用外部css文件
浏览器又发出css文件的请求，服务器返回这个css文件
浏览器继续载入html中的部分的代码，并且css文件已经拿到手了，可以渲染页面
浏览器在代码中发现一个标签引用关了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码
服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来渲染这部分代码
浏览器发现了一个包含一行javascript代码的script标签，赶快运行它
javascript脚本执行了这条语句，命令浏览器隐藏代码中某个,杯具了，突然就少了一个元素，浏览器不得不重新渲染这部分代码
终于等到的到来，浏览器泪流满面
等等，还没完，用户点了一个界面中的“换肤”按钮，javascript让浏览器换了一个标签中的css的路径
浏览器召集了在座的各位：“大伙需要收拾下行李，咱得重新来过”，浏览器向服务器请求了新的css文件，重新渲染页面当页面的布局发生变化时，浏览器会回过头来重新渲染，这就是页面变慢的原因。

触发回流的操作

调整窗口大小（Resizing the window）
改变字体（Changing the font）
增加或者移除样式表（Adding or removing a stylesheet）
内容变化，比如用户在input框中输入文字（Content changes, such as a user typing text in an input box）
激活 CSS 伪类，比如 :hover (IE 中为兄弟结点伪类的激活)（Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling)
操作 class 属性（Manipulating the class attribute）

移动端网站点击出现闪动或灰色背景问题

Wed, 20 Apr 2016 19:33:33 +0000

移动端网站点击出现闪动或灰色背景问题

只需对绑定事件添加class样式使其触发事件时背景为透明色

.class{-webkit-tap-highlight-color:transparent;}

源码分析AngularJS中的Provider们的小小区别

Mon, 22 Feb 2016 16:14:25 +0000

AngularJS的provider

Angular中有以下创建供应商(provider)的方法:

provider()
service()
factory()

Provider使用方式

angular.module("app", [])
.provider("HelloAngular", function() {
 return {
 $get: function() {
 var name = "小明";
 function getName() {
 return name;
 }
 return {
 getName: getName
 }
 }
 }
})
.controller('MyCtrl', ['$scope', 'HelloAngular',
 function($scope, helloAngular) {
 $scope.gameName = helloAngular.getName();
 }
]);

Service使用方式

angular.module("app", [])
.service("HelloAngular", function() {
 this.name = "小明";
 this.getName=function(){
 return this.name;
 }
})
.controller('MyCtrl', ['$scope', 'HelloAngular',
 function($scope, helloAngular) {
 $scope.gameName = helloAngular.getName();
 }
]);

Factory使用方式

angular.module("app", [])
.factory("HelloAngular", function() {
 var name = "小明";
 function getName(){
 return name;
 }
 return {
 	getName:getName
 };
})
.controller('MyCtrl', ['$scope', 'HelloAngular',
 function($scope, helloAngular) {
 $scope.gameName = helloAngular.getName();
 }
]);

实现方法各有区别,但是使用上都是一模一样的

Hexo的SEO优化(搜索引擎优化)

Tue, 19 Jan 2016 21:32:05 +0000

今天给大家聊一聊hexo的seo也就是百度跟谷歌的一些搜索引擎优化.

sitemap网站地图

安装site map网站地图插件

npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

_config.yml中增加以下配置

itemap:
 path: sitemap.xml
baidusitemap:
 path: baidusitemap.xml

生成网站地图

hexo clean
hexo g

百度主动推送

安装插件

npm install hexo-baidu-url-submit --save

_config.yml插件配置

baidu_url_submit:
 count: 10 # 提交最新的链接数
 host: time-friend.com # 在百度站长平台中注册的域名,虽然官方推荐要带有 www, 但可以不带.
 token: your_token ## 请注意这是您的秘钥， 请不要发布在公众仓库里!
 path: baidu_urls.txt # 文本文档的地址,新链接会保存在此文本文档里

_config.yml发布配置

deploy:
- type: git #部署类型
 repository: xxxxx #部署的仓库
 branch: master 
- type: baidu_url_submitter # 新增这一行类型

推送且发布

hexo clean
hexo g

ES6 之Proxy

Fri, 31 Jul 2015 21:17:51 +0000

Proxy

ES6新增了Proxy,那Proxy是什么呢?

Proxy,翻译是代理的意思.在ES6中,Proxy可以监听对象的修改.

也就是说,外界对这个对象的访问与修改,都可以通过Proxy监听,并且可以做一些别的事情.

举个例子:

var obj={
 a:1
}
var proxyObj = new Proxy(obj,{ //proxyObj会继承obj
 set:function(){
 alert("我被修改了")
 }
 });

 //修改属性
 proxyObj.a=2; //属性被修改后,之前设置的handler会被触发
 console.log(obj.a) // 2

就这么简单

下面是可以监听的操作

1. get(target, propKey, receiver)

拦截对象属性的读取，比如proxy.foo和proxy[‘foo’]。

2. set(target, propKey, value, receiver)

拦截对象属性的设置，比如proxy.foo = v或proxy[‘foo’] = v，返回一个布尔值。

3. has(target, propKey)

拦截propKey in proxy的操作，以及对象的hasOwnProperty方法，返回一个布尔值。

4. deleteProperty(target, propKey)

拦截delete proxy[propKey]的操作，返回一个布尔值。

5. ownKeys(target)

拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)，返回一个数组。该方法返回对象所有自身的属性，而Object.keys()仅返回对象可遍历的属性。

6. getOwnPropertyDescriptor(target, propKey)

拦截Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象。

7. defineProperty(target, propKey, propDesc)

拦截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。

8. preventExtensions(target)

拦截Object.preventExtensions(proxy)，返回一个布尔值。

ES6 之Promise

Tue, 28 Jul 2015 23:13:56 +0000

Promise

Promise与上一章的Generator一样,也是异步编程的一种解决方案.

在 jQuery,Angular都能找到相似的处理异步的方法.

基本使用


//首先先实例化一个Promise
var promise = new Promise(function(resolve, reject) {
 //Promise会有两个参数 resolve, reject,一个代表成功,一个代表失败

 if (/* true or false */){
 resolve(value); //成功,会执行promise.then的第一个回调
 } else {
 reject(error); //失败,会执行promise.then的第二个回调
 }

});


promise.then(function(value){

 //当上面函数运行resolve()的时候,会走这里
 //并且可以接收到 Promise函数里resolve传入的参数

},function(error){

 //当上面函数运行reject()的时候,会走这里
 //并且可以接收到 Promise函数里reject传入的参数

}).catch(function(error){

 //当then的两个回调函数都有报错的时候,如果加上了catch,
 //可以在这里接受到报错的对象,
 //且不会导致代码因为报错,停止执行

})

这就是一个完整的Promise的使用方法.是不是非常的简单?

ES6 之Generator

Sat, 25 Jul 2015 22:15:47 +0000

Generator的基本使用

Generator是ES6提供的一种异步解决方案.他能干什么呢?

能具体解决我们什么样的问题呢?

比如说,我想做一件事情,但是必须要求有两个ajax完成后才能做.

比如:

$http.get('请求1').success(function(){
 $http.get('请求2').success(function(){
 // do something ...
 })
})

这样做的话,就要一层一层的嵌套,当请求更多的时候,代码会写的非常的乱.

现在我们有了Generator,我们该怎么做呢?

function* getData(){
 yield $http.get('请求1').success(function(){
 // do something ...
 g.next();
 });

 yield $http.get('请求2').success(function(){
 // do something ...
 g.next();
 });

 //最终要做的事情

}
var g =getData();
g.next();

就这样,我们把必须要嵌套的异步操作,写成了"同步".

上面的函数,有三个关键的地方:

1.function 后面多了一个 *

2.函数里多了一个yield 关键字

3.函数执行后,会有一个next方法;

Generator的基本使用,就是在这三个关键的地方.

关于Generator的运行过程是这样子的:

1.在function后面加一个*,表示申明了一个Generator函数.

2.当Generator函数运行后,会实例出一个Generator对象. 这个Generator对象下会有一个next方法.

3.当我们运行next方法的时候,才能真正运行Generator函数里真正的内容.

4.当执行Generator函数的时候,碰到了yield,函数会暂停一次.

5.当下一次运行next方法的时候,Generator函数会从上一次暂停的地方继续执行.

yield

yield关键字与return很像,会返回相应的东西.

他们的区别在于:

yield是暂停函数的运行,必须要在Generator函数里使用.

return是终止函数的运行,任何地方都能使用

ES6 之箭头函数

Sun, 19 Jul 2015 20:45:33 +0000

在es6中可以使用箭头函数（Arrow Functions）

var foo = (a) => a;
foo("hello word"); //hello word

等价于

var foo = function(a){
 return a
}
foo("hello word"); //hello word

以上函数只有一个参数,还可以写成连括号都不需要:

var foo = a => a;
foo("hello word"); //hello word

如果函数没有参数,就必须要加上括号了:

var foo = () => {
 alert("hello word");
};

作为事件句柄

document.addEventListener('click', event => {
 console.log(event)
})

回调

$("button").hover(
 ()=>{
 //鼠标移入
 console.log("鼠标移入");
},
 ()=>{
 //鼠标移出
 console.log("鼠标移出");
})

使用箭头函数之后,this将会继承外围作用域的this,举个例子

var oImage = new Image()
var oImage2 = new Image()
document.getElementById("button").onclick=() => {

 //没有外围作用域,所以this是undefined
 console.log(this); // 这里的this是undefined

 oImage.src="https://gss0.bdstatic.com/5eR1dDebRNRTm2_p8IuM_a/res/img/richanglogo168_24.png";
 oImage2.src="https://gss0.bdstatic.com/5eR1dDebRNRTm2_p8IuM_a/res/img/richanglogo168_24.png";

 //这里使用了箭头函数,this将会继承外围作用域的this,
 //可是外围的this也是undefined,所以这里还是undefined
 oImage.onload=() => {
 console.log(this)// 这里的this是undefined
 }

 //这里没有用箭头函数
 oImage2.onload=function(){
 console.log(this)// 这里的this 将会是image对象
 }

}

换一种写法,最外层使用传统的function写法

ES6 之解构赋值

Fri, 17 Jul 2015 23:32:16 +0000

学习解构赋值的时候,我想到了以前的一道题:

a,b 两个变量，不用第三个变量来切换两个变量的值

var a = 10,
 b = 20;
 a = {
 a: a,
 b: b
 };
 b = a.a;
 a = a.b;

 console.log(a) //20
 console.log(b) //10

var a = 10,
 b = 20;
 a = [a,b]
 b = a[0];
 a = a[1];

 console.log(a) //20
 console.log(b) //10

也有奇淫技巧

var a = 10,
 b = 20;
 a=[b,b=a][0];

 console.log(a) //20
 console.log(b) //10

今天学到了解构赋值,那方法就更简单清晰了

var a=10;
var b=20;
 [a,b]=[b,a];
 console.log(a) //20
 console.log(b) //10

怎么样,是不是很神奇?

数组的解构赋值

什么是解构赋值?

以前我们赋值变量是这样子的:

var foo1 =1;
var foo2 =2;
var foo3 =3;

console.log(foo1); //1
console.log(foo2); //2
console.log(foo3); //3

在es6中我们可以这样:

var [foo1,foo2,foo3]=[1,2,3]

console.log(foo1); //1
console.log(foo2); //2
console.log(foo3); //3

注意:左右两边格式一定要一样

那如果我只想赋值一部分变量呢?

var [,,foo3]=[1,2,3]

console.log(foo3); //3

var [,foo2,]=[1,2,3]

console.log(foo2); //2

如果相对应的位置没有值,比如说这样:

ES6 之变量那些事

Wed, 15 Jul 2015 20:18:24 +0000

ES6 已经正式发布一个月了,接下来会分享一些学习笔记以及自己的理解.

新增的关键字 let与const

一直以来,javascript 都是用var来申明变量

function foo(){
 var a = 1;
 console.log(a)
}

foo(); //1

现在我们多了两个新的小伙伴:let与const

let命令

function foo(){
 let a = 1;
 console.log(a)
}

foo(); //1

这样看起来,与var没有什么区别,我们看接下来的例子

if(true){
 var a =1;
}

console.log(a) // 1

if(true){
 let a =1;
}

console.log(a) // Error: a is not defined

在 for函数里

for (var i = 0; i < 10; i++) {

}

console.log(i) // 10

for (let i = 0; i < 10; i++) {

}

console.log(i) // Error: i is not defined

上面的例子说明了,let只在块级作用域里有效.而var在以上情况下,是作为一个全局变量存在的;

我们再举一个例子:

var arr = [];
for (var i = 0; i < 3; i++) {
 arr.push(function(){
 return i;
 })
}

console.log(arr[0]()) //3
console.log(arr[1]()) //3
console.log(arr[2]()) //3

数组里每一个function运行后,输出的i都是10;

ES6 之如何快速的做ES6练习

Wed, 15 Jul 2015 19:02:36 +0000

babel这个词,可翻译成通天塔，变乱塔.

《圣经·旧约·创世记》

第11章宣称，当时人类联合起来兴建希望能通往天堂的高塔；为了阻止人类的计划，上帝让人类说不同的语言，使人类相互之间不能沟通，计划因此失败，人类自此各散东西。

这应该就是为什么我们的babel.js叫babel的原因;

如何运行es6

直接网上编译

Babel有一个REPL在线编译器，可以直接在线将ES6代码转为ES5代码。转换完成后,直接在网页里运行。

引入browser.js

browser.js是Babel提供的浏览器转换脚本,可以直接在浏览器中引入运行.

注意:要在下面的script标签定义type为 “text/babel”

<!DOCTYPE html>
<html lang="en"><head>
 <meta charset="UTF-8">
 <title>ES6 练习</title>
 <script src="http://cdn.bootcss.com/babel-core/5.8.24/browser.js"></script>
</head>
<body>
 <script type="text/babel">
 //在这里,就可以运行你的es6代码了
 </script>
</body>
</html>

自动化部署前端代码 - grunt-ftp-deploy的使用

Sun, 14 Jun 2015 23:36:00 +0000

每一次修改完代码之后,要部署到远程的服务器,我的操作步骤是:

修改代码 –> grunt build –> 打开FileZilla –>登录ftp服务器 –>找到本地文件夹 –> 找到远程服务器目标文件夹 –>全选本地文件 –> 上传

因为部署代码,在某个时候会特别频繁.每一次都要重复上面的八个操作.表示要做点什么,改变一下.

今天我们的主角:grunt-ftp-deploy

如果是sftp可以使用grunt-sftp-deploy

安装:

npm install grunt-ftp-deploy --save-dev

or

npm install grunt-sftp-deploy --save-dev

在与Gruntfile文件同一目录,我们新建一个".ftppass"的文件, 里面是ftp的授权信息, 内容如下:

{
 "key1": {
 "username": "username",
 "password": "password"
 }
}

Gruntfile配置代码:

//ftp-deploy
 grunt.initConfig({
 'ftp-deploy': {
 build: {
 auth: {
 host: '192.168.1.245', //ftp服务器的ip地址
 port: 21,//服务器端口
 authKey: 'key1'//.ftppass文件里,key1的授权信息
 },
 src: 'path/to/source/folder',//本地文件夹
 dest: '/path/to/destination/folder',//服务器的目标文件夹
 exclusions: ['path/to/source/folder/**/.DS_Store']//不上传的文件
 }
 }
 })

//sftp-deploy
 grunt.initConfig({
 'sftp-deploy': {
 build: {
 auth: {
 host: '192.168.1.245', //ftp服务器的ip地址
 port: 21,//服务器端口
 authKey: 'key1'//.ftppass文件里,key1的授权信息
 },
 cache: 'false',
 src: 'path/to/source/folder', //本地文件夹
 dest: '/path/to/destination/folder', //服务器的目标文件夹
 serverSep: '/',//服务器的相对路径
 localSep: '/',//本地的相对路径
 concurrency: 20,//每次上传多少个文件
 progress: true //是否显示进度条
 }
 }
 })

加载task

烦人的AngularJS注解 - grunt-ng-annotate的使用

Fri, 12 Jun 2015 23:15:00 +0000

angular加入了依赖注入

编写代码的时候,大致的写法如下

 app.controller('tempController', function($scope, $http, $state, $timeout) {

 ...

 })

可是这样的代码,压缩后会造成一个问题. 函数的参数:$scope, $http, $state, $timeout会变成: a,b,c,d

导致这个函数找不到需要注入的服务,因为每个参数的命名都是严格规定的.

如下:

 app.controller('tempController', function(a,b,c,d) {

 ...

 })

为了解决这个问题,angular支持如下写法:

 app.controller('tempController', ["$scope", "$http", "$state", "$timeout", function($scope, $http, $state, $timeout) {



 }])

那么问题来了:

每一次添加一个服务的时候,都需要写两遍. 每一次删除一个服务的时候,都需要删两遍.

表示大大降低了变成的愉悦.

那么我们怎么解决这个问题呢?

今天的主角来了,那就是grunt-ng-annotate

这是一个grunt的插件,当然在glup上也有.因为我的项目主要是用grunt写的. 那么这次主要讲grunt版本的ng-annotate.

首先我们需要安装ng-annotate:

npm install grunt-ng-annotate --save-dev

在你的Gruntfile里运行这个插件:

grunt.loadNpmTasks('grunt-ng-annotate');

配置代码:

grunt.initConfig({
 ngAnnotate: {
 dist: {
 files: [{
 expand: true,
 cwd: '<%= yeoman.dist %>', //相对路径
 src: '**/*Controller.js', //需要匹配的文件
 dest: '<%= yeoman.dist %>' //文件输出的路径
 }]
 }
 }
})

js代码在函数里加入 “ngInject”:

AngularJS 指令模版

Thu, 21 May 2015 22:17:36 +0000

myModule.directive('namespaceDirectiveName', function factory(injectables) {

 var directiveDefinitionObject = {
 restrict: string,//指令的使用方式，包括标签，属性，类，注释
 priority: number,//指令执行的优先级
 template: string,//指令使用的模板，用HTML字符串的形式表示
 templateUrl: string,//从指定的url地址加载模板
 replace: bool,//是否用模板替换当前元素，若为false，则append在当前元素上
 transclude: bool,//是否将当前元素的内容转移到模板中
 scope: bool or object,//指定指令的作用域
 controller: function controllerConstructor($scope, $element, $attrs, $transclude){...},//定义与其他指令进行交互的接口函数
 require: string,//指定需要依赖的其他指令
 link: function postLink(scope, iElement, iAttrs) {...},//以编程的方式操作DOM，包括添加监听器等
 compile: function compile(tElement, tAttrs, transclude){
 return: {

 pre: function preLink(scope, iElement, iAttrs, controller){...},
 post: function postLink(scope, iElement, iAttrs, controller){...}
 }

 }//编程的方式修改DOM模板的副本，可以返回链接函数
 };

 return directiveDefinitionObject;

});

新的开始,心路历程

Sun, 20 Jul 2014 00:00:00 +0000

2014-07-20

毕业了, 学不会的,才叫学习!!!! :)

2018-11-20

我们学习那么多的技术,只是为了让业务有更多的可能性,让自己的想象力有一块稳健的基石而不是胡思乱想.

2018-12-16

原来自己一直学习的动力,全部都来自对未来的焦虑.

2018-12-28

我的成长,看来是要跟时间赛跑了.

2019-01-01

今年的目标确立了,一共两点. 一个是英语,一个是体重~

2019-01-14

Bug 是团队很重要的一笔经验财富

2019-01-25

最近学习的动力减少了,博客也有点懒得更新了. 主要是短期目标又实现了一个,焦虑减少了.这种感觉也挺好的.

2020-09-08

2020年终于把脂肪甩掉了,一共减重将近40斤. 每天站在体重秤上,就知道今天该吃什么,吃多少. 养好生活习惯,体重也维持的不错. 但是英语持续背了两三个月单词,又停下来了.

2021-03-04

今天,我提了离职流程.心情极其复杂~ 要离开这个自己亲手打造的前端团队. 去年一年时间压力极大的度过.虽然也得到了公司的认可. 但是好像也还是满足不了自己的成就感. 年纪越大,成就感越难满足.

2021-07-19

加入了一家新公司.三个月过去,还是很焦虑. 从来没有过三个月还没承担独立业务的. 选择是对的,只是这里压力很大. 以前我是一个很有想法的人,现在却变成了一个开发资源.

2021-12-10

年底一个新项目要成立新的 team,义无反顾的加入了. 可能是不甘心,也可能是想证明什么.

2022-05-20

又成为了新 team 的前端 leader. 但这次没有第一次那么兴奋了. +1 是一个行业内很资深的人,一起合作很开心. 在执行上给了我很多空间.

2025-03-21

去年 3 月,准备开始一个 AI 项目. Team 里遇到一个背景很强,但手段低劣的人. 最后吵了一架,项目不欢而散.

2026-01-10

AI 项目让我整个人都筋疲力尽,有了严重的焦虑症. 身体已经承受不住了,换了一个新的 team.

最近一年,基本上是使用 AI 写代码了,每个月都要花掉几百块美金. 基本上知道目前的 AI 边界在哪里. AI 并没有让开发更加轻松.

Time Friend

用 /insights 审视你的编码习惯

报告的结构

概览数据

使用模式

使用风格分析

从终端到团队, Agent 工作流怎么长大

第一步: 把重复劳动做成脚本

Review Agent 的代码, 和 Review 同事的不一样

第一: 看它改了不该改的地方吗

第二: 看它处理边界了吗

第三: 看测试是真测还是假测

第四: 看代码风格是不是和项目一致

这五类任务别交给 Agent

一、涉及生产数据的操作

二、安全敏感的变更

三、需要人类判断的决策

四、模棱两可的"看看”

五、跨多系统的协调

Agent 和 Assistant 是两回事

Assistant 模式: 你每步都要盯着

Agent 模式: 定好目标就放手

最实用的分法: 看触发方式

几轮对话后 Claude 变笨了

上下文是怎么炸的

每轮对话都是检查点

几个习惯, 保持上下文干净

走偏了立刻打断

常用命令

我自己用的土办法

我的 CLAUDE.md 里都放了什么

CLAUDE.md 的本质

第一类: 命令

第二类: 架构约定

第三类: 团队规范

Agent 改完的代码, 你敢直接合吗

最简单的: prompt 里加一句

分层往上加

第一层: prompt 内检查

第二层: 定义完成标准

第三层: 不让它糊弄

第四层: /goal 条件

写 Prompt 一次过的秘诀

把任务范围卡死

指一个现成的例子

报 Bug 按固定格式来

用 /btw 处理临时小问题

用 Plan → Code 循环管住你的 Agent

第一步: 先探索, 别动手

博客 Logo 动画是怎么做的

为什么做这个

mp4 没有 Alpha 通道

首页打字效果是如何实现的

整体原理

数据来源: quotes.json

如何让博客支持离线访问

Service Worker 是什么

有什么用

离线访问

我是怎么给博客加页面统计的

Busuanzi (前端展示)

引入脚本

显示阅读量

评论系统怎么接入博客的

整体流程

哪里对接

我是怎么部署这个博客的

部署平台: Cloudflare Pages

CI/CD 流程

博客的 Google SEO 是怎么做的

结构化数据

博客的构建流水线是怎么跑的

Gulp 任务

build

generate-service-worker

我的博客主题是如何定制的

覆盖了哪些

head.html

博客多语言是怎么实现的

内容国际化

第四层: `/goal` 条件

用 `/btw` 处理临时小问题