![\"制作桌面机器人准备的焊接工具、传感器和电子模块\"](\"https://gw.alipayobjects.com/zos/k/gu/gOR0gb.png\")
\n ![\"装有主控板、传感器和电池的桌面机器人内部结构\"](\"https://cdn.tw93.fun/blog/pic/26410.jpg\")
\n ![\"完成组装并显示‘聆听中’的桌面机器人\"](\"https://cdn.tw93.fun/blog/pic/IMG_050944.JPG\")
\n | \n \n | \n \n \n | \n \n \n | \n
![\"AI](\"https://cdn.tw93.fun/blog/pic/ai-visibility-cover-words.png\")
\n\n## 花一小时让 AI 找到你的内容\n\n这几天有几个小伙伴@我说，他们在向 AI 提问时，自己的开源工具被主动推荐了。之前啥也没做居然也能被收录，我就想顺手花一个小时把站内内容结构化梳理一下。改完后随手发了条推特，大伙挺感兴趣，索性把完整的思路和配置写成一篇文章，方便大家查找和参考。\n\n我很讨厌去刷排名或者生产垃圾内容，更多想着让现有的内容对 AI 更可见，所以这篇文章不会教你投机，而是如何让 AI 更好理解你现有的内容。\n\n去查了一下，发现 AI 搜索跟传统搜索逻辑完全不一样，传统 SEO 拼的是进 Google 前 10，但 83% 的 AI Overview 引用来自排名前 10 之外的页面，AI 看的是结构清晰、来源可靠，跟 PageRank 关系不大。项目不大，但 README 和文档写得还算清楚，大站内容单薄的地方 AI 就能找到我，大概这就是为什么朋友们能搜到 Pake 和 MiaoYan。\n\nAI 搜索增长很快，2025 年上半年同比涨了 527%，ChatGPT 到 2026 年 2 月周活 9 亿，引荐流量转化率大概是传统搜索的 5 倍。但目前仍然只占总引荐流量不到 1%，更像是品牌可见性策略，而非流量打法。值得花一个小时梳理一下，但不值得花上一周死磕——产品本身才是核心竞争力。\n\n![\"AI](\"https://gw.alipayobjects.com/zos/k/lq/6.png\")
\n\n---\n\n## 用 robots.txt 分清爬虫类型\n\n很多人把 robots.txt 当开关用，要么屏蔽 AI 爬虫要么全放开。但 AI 爬虫其实分好几类，做的事情不一样。\n\n**训练爬虫**，GPTBot、ClaudeBot、Meta-ExternalAgent、CCBot，拿你的内容去训练模型。屏蔽它们可以让内容不进训练数据，但不影响当前的 AI 搜索结果。\n\n**搜索和检索爬虫**，OAI-SearchBot、Claude-SearchBot、PerplexityBot，实时抓取内容来回答用户问题。屏蔽了这些，你就从 AI 搜索里消失了。\n\n**用户触发爬虫**，ChatGPT-User、Claude-User、Perplexity-User、Google-Agent，只在用户把你的 URL 贴进聊天窗口时才触发。屏蔽了它们，用户让 AI \"总结一下这个页面\" 就会啥也拿不到。\n\n**退出标识**，Google-Extended、Applebot-Extended，不是真正的爬虫，是你在 robots.txt 里声明退出 AI 训练的信号。\n\n**未声明爬虫**，Bytespider、xAI 的 Grok 爬虫，不表明身份，也不一定遵守规则。\n\n![\"AI](\"https://gw.alipayobjects.com/zos/k/kq/GjgBCz.png\")
\n\n我的做法是允许搜索/检索爬虫和用户触发爬虫，屏蔽训练爬虫和未声明爬虫：\n\n```\n# Search & retrieval: allow\nUser-agent: OAI-SearchBot\nAllow: /\n\nUser-agent: Claude-SearchBot\nAllow: /\n\nUser-agent: PerplexityBot\nAllow: /\n\n# User-triggered: allow\nUser-agent: ChatGPT-User\nAllow: /\n\nUser-agent: Claude-User\nAllow: /\n\n# Training: block\nUser-agent: GPTBot\nDisallow: /\n\nUser-agent: CCBot\nDisallow: /\n\n# Opt-out tokens\nUser-agent: Google-Extended\nDisallow: /\n\n# Undeclared: block\nUser-agent: Bytespider\nDisallow: /\n```\n\n\n## 写好 llms.txt 并让站点互相引用\n\nllms.txt 是一个新标准，类似 robots.txt 但专门给 AI 看的。在站点根目录放一个 Markdown 格式的文件，写清楚你的站点做什么、有哪些关键页面、作者是谁，AI 在检索内容的时候会优先读这个文件来理解你的内容。\n\nBuiltWith 追踪到目前已经有 84 万多个网站部署了 llms.txt，包括 Anthropic、Cloudflare、Stripe、Vercel 这些。但在 SE Ranking 调研的 30 万域名里采用率只有 10%，还是比较早期，先做了有先发优势。\n\n格式很简单：\n\n```markdown\n# Your Project Name\n\n> One-line description of what this is.\n\n## Links\n\n- [Documentation](https://yoursite.com/docs)\n- [GitHub](https://github.com/you/project)\n- [Blog](https://yoursite.com/blog)\n\n## About\n\nShort paragraph explaining the project, its purpose, \nkey features, and what makes it different.\n```\n\n![\"llms.txt](\"https://gw.alipayobjects.com/zos/k/3f/4WQmuF.png\")
\n\n做完之后可以提交到 directory.llmstxt.cloud、llmstxt.site，还有 GitHub 上的 llms-txt-hub 仓库提 PR。\n\n这里我还做了一个有意思的事：各站点的 llms.txt 互相引用，形成一个网状结构。我维护着 tw93.fun、weekly.tw93.fun、yobi.tw93.fun 几个站点，每个站点的 llms.txt 都引用其他站点，AI 不管从哪个入口进来都能顺着链接找到其他内容。\n\n![\"四个站点的](\"https://gw.alipayobjects.com/zos/k/x4/Rt8NoI.png\")
\n\n这些改动需要等爬虫重新抓取才会生效，通常要几天。配好之后隔一段时间去 ChatGPT 搜一下自己的项目名，引用来源和描述准确度应该会有变化。\n\n\n\n## 提供完整版内容和 Markdown 路由\n\nllms.txt 是概要，llms-full.txt 是完整版，一个文件通常 30-60KB，包含项目描述、FAQ、使用场景、竞品对比、README 摘录。Mintlify 的 CDN 分析显示 llms-full.txt 的访问量是 llms.txt 的 3-4 倍，AI 系统找到概要之后会想要完整版。\n\n**Markdown 路由**更进一步，Evil Martians 建议给站点的每个页面提供 .md 版本。一个 15000 token 的 HTML 页面变成 3000 token 的 Markdown 文档，减少 80%。\n\n![\"HTML](\"https://gw.alipayobjects.com/zos/k/st/AFayJg.png\")
\n\n怎么告诉 AI 你有 Markdown 版本，最简单的方式是在页面 `` 里加一行：\n\n```html\n\n```\n\nClaude Code 和 Cursor 在获取文档时已经会发 `Accept: text/markdown` header，这是 1997 年就有的 HTTP/1.1 标准行为。\n\n---\n\n## 去搜索平台录下你的站点\n\n前面说的 robots.txt 和 llms.txt 是让 AI 读得懂你的内容，但前提是 AI 能找到你。ChatGPT 的搜索走 Bing，Google AI Overview 走 Google 自己的索引，Perplexity 也依赖搜索 API。如果你的页面没有被搜索引擎收录，后面做的结构化工作 AI 根本看不到。所以第一步是确保 Google 和 Bing 已经收录了你的站点。\n\n操作很简单：去 [Google Search Console](https://search.google.com/search-console) 用 DNS 或 HTML 文件验证你的域名，验证通过后提交 sitemap URL（通常是 `yoursite.com/sitemap.xml`）。在\"网页索引\"报告里可以看到哪些页面已收录、哪些有问题。如果某个重要页面没被收录，用\"网址检查\"工具手动请求编入索引。\n\n大伙可能觉得 Bing 没什么人用，但 Copilot、DuckDuckGo、Yahoo 的 AI 搜索底层都是 Bing 在驱动。去 Bing Webmaster Tools 注册一个号，提交 Sitemap，它有个 AI Performance 面板，能看到你的内容被 AI 引用了多少次。顺便设置一下 IndexNow，有新内容发布时主动通知 Bing，不用等爬虫来发现。\n\nIndexNow 的接入方式是在站点根目录放一个 API key 文件，然后在内容更新时向 `api.indexnow.org/indexnow` 发一个 POST 请求，把变更的 URL 列表发过去，几分钟内 Bing 就会来抓取。很多静态站点生成器和 CMS 有 IndexNow 插件可以直接用。\n\n![\"Bing](\"https://gw.alipayobjects.com/zos/k/x3/7.png\")
\n\nGoogle Search Console 目前没有 AI 专属面板，但提交 Sitemap、监控索引状态还是值得做的。Google AI Overview 从比传统结果更广的范围里拉内容，即使你的页面排不进前 10 也可能出现在 AI 回答里。\n\nPerplexity 在海外的用户量比大伙想的要大，他们有一个出版者计划，可以去 pplx.ai/publisher-program 提交表单，通过之后有收入分成 80/20，还能看到引用分析数据。\n\n---\n\n## 我做了一个专门给 AI 看的知识网页\n\n与其等 AI 去各个站点零散地抓信息，不如给它一个集中的入口，把你希望它记住的东西整理好放在那里。\n\n一个知识网页要提供三层内容：概览（llms.txt）、完整版（llms-full.txt，30-60KB）、和每个核心项目的独立知识页面。再加上结构化的 JSON API，让 AI 工具可以程序化地获取数据。数据不要写死，从 GitHub API 之类的上游实时拉取，加缓存定期刷新，维护成本最低。\n\n还有一个容易忽略的点：别只列一堆项目，也写清楚它们之间的关系。如果你有多个项目，写一段把它们串起来的描述，它们之间的关系、你的技术方向、整体定位。AI 在回答\"这个人是谁\"或者\"这个团队做什么\"的时候，有叙事比有列表有效得多。\n\n我做的实现叫 Yobi（来自日语 呼び / よび，有呼唤、把人叫过来的动作感），提供 llms.txt 概览、50KB 的 llms-full.txt、独立项目页面，以及 `/api/profile`、`/api/projects`、`/api/blog`、`/api/weekly` 四个 JSON 端点，数据从 GitHub API 实时拉取，ISR 缓存一小时刷新。技术栈 Next.js + TypeScript，部署在 Vercel。\n\n![\"Yobi](\"https://gw.alipayobjects.com/zos/k/e9/ndHtSI.png\")
\n\nJSON API 返回的结构化数据，包含项目信息和实时 GitHub 统计：\n\n![\"yobi.tw93.fun](\"https://gw.alipayobjects.com/zos/k/an/2RQyzN.png\")
\n\n## 给每个项目一个独立页面\n\n每个项目需要自己的独立页面，不是放在列表里的一行，而是自包含的 Markdown 文档，有可引用摘要、核心特性、竞品对比、使用场景和安装命令。Ahrefs 的研究发现被引用页面的标题和用户查询的语义相似度更高，自然语言 URL slug（如 /projects/pake）的引用率也高于不透明 ID（如 /page?id=47）。\n\n![\"Pake](\"https://gw.alipayobjects.com/zos/k/dj/EqrRKi.png\")
\n\nURL 结构很重要，`/projects/pake` 在模型读一行字之前就告诉它这个页面是关于什么的，`/page?id=47` 什么都没说。\n\n## 把结构化数据同步到主域名\n\n子域名的权重不如根域名。AI 爬虫发现了 example.com 不一定会自动去找 docs.example.com 或 api.example.com。如果你的 llms.txt、项目页面、API 数据分散在多个子域名上，AI 可能只看到其中一部分。\n\n解决方法是把关键的结构化数据镜像到主域名上，让 `example.com/llms.txt`、`example.com/projects/xxx.md`、`example.com/api/projects.json` 都在同一个域名下。AI 爬虫通过搜索索引发现你的主站，然后在同一个域名里就能拿到所有数据。实现方式可以是 CI 定时同步、构建时拉取、或者反向代理，选最适合你部署架构的就行。我用的是 GitHub Action 每天凌晨把子站数据同步到博客仓库。\n\n![\"GitHub](\"https://gw.alipayobjects.com/zos/k/ds/5.png\")
\n\n上线新站点时，按清单逐项配置可以避免遗漏。核心项：robots.txt（分类放行爬虫）、llms.txt（写清站点概要并互相引用）、sitemap（提交到搜索引擎）、Bing Webmaster Tools（开启 IndexNow）、Google Search Console（监控索引状态）。每个站点的 llms.txt 互相引用其他站点，形成网状发现结构。\n\n---\n\n做这件事最容易踩的坑是被各种 GEO 技巧带跑，什么都想加，最后导致很乱，本末倒置。\n\n## 试了这些没用\n\n**`` 和 ``**，没有规范，没有任何主流 AI 系统支持。\n\n**`/.well-known/ai.txt`**，多个竞争提案，没有实际采用，等出赢家再说。\n\n**HTML 注释里放 AI 提示**，解析器在 AI 读到内容之前就把注释剥掉了。\n\n**User-Agent 嗅探返回 Markdown**，给爬虫和人返回不同内容就是 cloaking，Google 会惩罚。\n\n**各种非官方的 AI meta 标签**，除非某个主流 AI 提供商文档里明确支持，否则都是噪音。\n\n## JSON-LD 没你想的那么有用\n\n这个我一开始以为是利器，后来深入研究发现更复杂。SearchVIU 做了个实验，把数据只放在 JSON-LD 里页面上不显示，结果五个 AI 系统全没读到。Mark Williams-Cook 的后续实验发现 LLM 就是把 `\n{:/nomarkdown}\n\n### Graphics 类\n\n在上面Demo中，我们创建了一个 Shape，这里其实是创建了一块画布，同时假如需要在画布上面画东西，就需要使用Graphics类了。\n\n可以在 Graphics 上面设置很多样式，或者调用绘图方法来画其他的图形，同时Graphics类里的所有绘图方法都会返回一个graphics实例，这里使用链式操作会很方便，使用具体可见[【EaselJS API】](https://createjs.com/docs/easeljs/classes/Graphics.html)。\n\n### EaselJS 元素\n\n上面说过，EaselJS 可以用来画图片、图形、动画帧、文字这类型的元素，对应是 Bitmap、Shape、Sprite、Text 这几个。\n具体使用为：\n\n```js\n// 使用 Bitmap 来表示图片\nconst bitmap = new createjs.Bitmap(\"imagePath.jpg\");\n\n// 使用 Shape 结合 Graphics 来表示图形\n const shape = new createjs.Shape();\n shape.graphics.beginFill(\"#ff0000\").drawRect(0, 0, 100, 100);\n \n// 使用 Sprite 来表示精灵动画（后面详细介绍）\nconst instance = new createjs.Sprite(spriteSheet);\ninstance.gotoAndStop(\"frameName\"); \n\n// 使用 Text 来表示文字\nconst text = new createjs.Text(\"How are you\", \"20px Arial\", \"#000000\");\n```\n\n### 精灵动画\n\n这个特性会让第一次接触的同学高兴起来，很方便使用，同时实现效果很棒，比如说需要实现一个绅士走路的样子：\n\n{::nomarkdown}\nSee the Pen Sprite by Tw93 (@tw93) on CodePen.
\n\n{:/nomarkdown}\n\n【技巧】此处雪碧图的生成可以借助 [TexturePacker](https://www.codeandweb.com/texturepacker)，其中有一个导出为 EaselJS 的选项，将值直接替换 SpriteSheet即可。\n\n上述代码应该能够很好的表达意思，可以试试animations中多设置几个动作，让其更有趣，更详细的使用可以参考 [SpriteSheet Class](https://createjs.com/docs/easeljs/classes/SpriteSheet.html)\n\n### Ticker 刷新\n\n#### 主要作用\n\n上述人物的走动，就是靠 Ticker 来实时刷新舞台的，同时可以通过addEventListener来监听tick的刷新，并在里面”做些事情”。\n\n```js\ncreatejs.Ticker.framerate = 60;\ncreatejs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;\nsprite.addEventListener(\"tick\", ()=>{console.log(\"doing something\"});\n```\n\n#### 关注点\n\n**createjs.Ticker.framerate** 表示 Ticker 帧频率，理想下是60FPS，这里在游戏体验优化时候可以设置到60。\n\n**createjs.Ticker.timingMode** 表示 Ticker的渲染模式（setTimeout、requestAnimationFrame），可以这样选择：\n\n- TIMEOUT：默认模式，这种模式通过setTimeout方式来更新下一次，虽然提供了可预期的、灵活的帧率，但是在性能体验上比requestAnimationFrame方式要差很多，不建议使用\n- RAF：只单纯使用RAF，会将 framerate 设置的帧速率等值忽略，频率取决于当时运行环境和浏览器性能\n- RAF_SYNCHED：它会尝试去协调RAF和设置的framerate频率，相当于结合了setTimeout 和 RAF 的优点，也即这里可以设置framerate=60，优化让CreateJS 帮忙处理，建议使用这个模式\n\n#### 优化点\n\n同时这里可以和`Ticker.paused`结合起来做性能优化，比如说我们在游戏暂停时候，可以这样防止不停刷新，类似这样：\n\n```js\ncreatejs.Ticker.addEventListener('tick', (e) => {\n !e.paused && stage.update();\n});\ncreatejs.Ticker.paused = true; //在任何地方调用这个，则会暂停tick里面的处理\ncreatejs.Ticker.paused = false; //在任何地方调用这个，则会恢复tick里面的处理\n```\n\n在性能调优过程中，可以通过 **createjs.Ticker.getMeasuredFPS()** 将实时的帧率输出到屏幕，当这个值和设置的 framerate 很接近，说明性能良好\n\n## TweenJS 的使用\n\n从上面可以看到，EaselJS 其实可以处理 CreateJS 开发中很多的事情，其他三项可以当做辅助工具，让开发更便捷。\n\nTweenJS 在这里充当着“动”的能力，同时它也可以单独使用，支持数字对象属性和CSS样式属性，是一个很强大的补间动画功能库。\n\n### 案例\n\n比如说以下这个很经典的动画例子：\n\n{::nomarkdown}\nSee the Pen TweenJS by Tw93 (@tw93) on CodePen.
\n\n{:/nomarkdown}\n\n### 使用\n\n可以看到链式处理让很多操作使用是很简单的，也即可以获取目标元素、设置等待时间、执行下一步动画、动画结束事件；\n\n一般场景用上面完全够用，还有如下高级特性，可以通过[【文档】](https://www.createjs.com/docs/tweenjs/modules/TweenJS.html)来查询：\n\n- createjs.Ease：设置动画缓动效果，包含众多的动画Ease效果可用，如linear/bounceIn/circInOut/getBackIn/quadInOut\n- ColorPlugin：色值处理插件，可以处理任何 CSS 可支持的颜色\n- CSSPlugin：使用前需要`createjs.CSSPlugin.install();`注册，可以处理几大部分 CSS 中的样式\n- RotationPlugin：通过`RotationPlugin.install(props);`，用在处理角度问题\n- MotionGuidePlugin：引导动画效果，使用前需要`createjs.MotionGuidePlugin.install(createjs.Tween);\n`，通过设置一系列path来实现路径动画效果\n- Timeline: 用来处理多组动画效果，让他们可以一组一组地被控制\n\n## PreloadJS 的使用\n\nPreloadJS是一个用来管理和协调相关资源加载的类库，它可以方便的帮助你预先加载相关资源。\n\n它主要是使用 LoadQueue 类来管理加载内容的，在游戏中很常见的场景是预加载图片资源和游戏音乐。\n\n### 案例\n\n屏幕中可以看到处理后的图片加载出来，同时在播放着背景音乐：\n\n {::nomarkdown}\nSee the Pen PreloadJS by Tw93 (@tw93) on CodePen.
\n\n {:/nomarkdown}\n\n### 使用\n\n#### 加载方式\n\nconst queue = new createjs.LoadQueue(false);\n\n里面传入布尔值用来表明是用XHR还是用HTML标签来加载，默认为true，就是使用 XHR 来加载，但是XHR 加载 cdn 常常会报一些错误，也即推荐使用false类型，通过标签来加载。\n\n#### 资源加载和使用\n\n通过 loadManifest 类可以加载一组游戏中用到的所有资源，包括 图片、音频、json、svg 等文件，id 用来加载完使用的标识，同时通过`queue.getResult(id)`获取。\n\n资源加载过程中，有complete、error、progress、fileload供订阅，完成后才可以对资源进行使用，progress和complete结合来显示进度条，fileload表示当个文件加载完毕\n\n#### 加载音乐\n\n加载音乐时候需要注册 Sound 插件，也即`queue.installPlugin(createjs.Sound);`，同时指明音乐文件格式，比如说`createjs.Sound.alternateExtensions = [\"mp3\"];`\n\n这里还有一个小坑，对于低版本的浏览器，可能会出现音乐不能播放情况，可以引入 HTMLAudioPlugin 解决：`createjs.Sound.registerPlugins([createjs.HTMLAudioPlugin])`\n\n对于音乐播放，使用`createjs.Sound.play(id);`即可，详细使用后面 SoundJS 介绍。\n\n## SoundJS 的使用\n\n一个小游戏要想互动性比较好，背景音乐是必不可少少的，可以选择一些轻松活泼的，需要使用SoundJS来“放音乐”，同时具备完善的兼容处理。\n\n### Sound 类\n\n音频管理主要使用 Sound 类，有如下功能：\n\n- Sound.registerSound：注册播放的音频，registerSounds 支持多个音频，同时在音频播放前的需要提前注册（此处的加载其实也可用preload弄）,\n- Sound.registerPlugins：注册音频播放插件，一般用于不兼容的低浏览器场景，可以注册来兼容 WebAudioPlugin 或者 HTMLAudioPlugin\n- Sound.play: 播放音频，一般是`createjs.Sound.play(id)`\n\n### AbstractSoundInstance 播放实例类\n\n当我们调用 Sound.play API时候其实就创建了一个AbstractSoundInstance 类，创建好后，我们可以通过它来直接控制音频的播放或者其他操作，同时可以监听其播放状态：\n\n```js\nconst myInstance = createjs.Sound.play(\"myAssetPath/mySrcFile.mp3\");\n\n// 属性控制，实际中选择需要的属性设置就好\n// 属性同时以对象方式可以加到play第二个参数\nmyInstance.volume = 0.5;\nmyInstance.paused = false; // 控制音乐暂停否\nmyInstance.loop = true; // 循环播放\nmyInstance.duration = 30; //播放时长\n\n// 监听状态，常用于错误时候，重新播放\nmyInstance.on(\"complete\", handleComplete);\nmyInstance.on(\"loop\", handleLoop);\nmyInstance.on(\"failed\", handleFailed);\n```\n\n## 性能体验优化\n\n### 图片优化\n\n- 图片大小和正常 H5 相比更加影响性能，尽量使用合适尺寸和通过 [TinyPNG](https://tinypng.com) 压缩后的图片\n- 对于精灵图或者很多小图场景，可用 [TexturePacker](https://www.codeandweb.com/texturepacker)工具将他们合成一张雪碧图\n- 对于帧动画的场景，可用[gka](https://github.com/gkajs/gka) 工具对图片进行压缩和直接生成动画文件\n\n### 善用回收机制\n\n- 对于屏幕外或者不在舞台里面的需及时销毁\n- 对于复杂的对象使用cache来增加性能，简单的尽量就不要用了，会有反作用\n- [SpriteSheetBuilder](https://createjs.com/docs/easeljs/classes/SpriteSheetBuilder.html) 的方式可以代替 cache，而且效果更好\n\n### 多用位图少用矢量\n\n- 在 CreateJS 中矢量运算比较影响性能，奇怪是 Text shape都算矢量，建议此处直接将字和矢量图直接通过工具转成位图\n- 如果某些项目必须用矢量，滤镜，叠加模式，或者含有非常多子元件，可以通过使用SpriteSheetBuilder进行位图渲染，从而优化\n- animateCC 中的遮罩相当于把整个动画序列帧化，矢量化，所以也尽量少用，如果实在要用，操作方法跟处理上面矢量一样\n\n### 滤镜和动画场景优化\n\n- 不要使用滤镜特效比如（阴影滤镜和发光滤镜）来做动画，因为这样会非常耗费性能，在移动端上性能不可控\n- 可以使用逐帧图片来代替相关滤镜特效来实现动画效果\n\n### 减少嵌套和叠加\n\n- 在做动画或者其他场景时候，尽量不要有太多容器的嵌套，尽量打平层级（有点点像写 Weex，讲究平和薄）\n- 有些叠加的场景，可以直接用图片代替\n\n### 帧率优化\n\n- 不用的帧率监听就及时取消，比如说 tick\n- 使用 `createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED`\n- 将 `createjs.Ticker.framerate` 设置比预想高一点\n- 通过`createjs.Ticker.getMeasuredFPS()` 输出实时FPS到屏幕，进行优化\n\n### 试试 StageGL 神器\n\n- [StageGL](https://createjs.com/docs/easeljs/classes/StageGL.html) 在目前压缩版本没有引入，需要额外引入\n- 使用起来和 Stage 差不多，相当于将原有的 Stage 改成 StageGL，但是相当于使用WebGl能力，性能会比原有的好太多，更多详细可见[GETTING STARTED WITH STAGEGL](http://blog.createjs.com/getting-started-with-stagegl/)\n\n ```js\n // 常规的2D场景\n const stage = new createjs.Stage(\"canvasId\");\n \n // 使用 WebGl\n const stage = new createjs.StageGL(\"canvasId\");\n ```\n\n### 移动端点击事件优化\n\n在我们游戏初始化时候，一般需要为之绑定点击事件，但是对于移动端来说加上这一句效果会好很多\n\n```js\nvar stage = new createjs.Stage(\"canvasId\");\ncreatejs.Touch.enable(stage);\n```\n\n## 结束\n\nCreateJS 的特性应该不止上述这些，更多的需要在实际项目中使用，通过各种游戏场景可以发掘很多有趣的使用，假如你也对 H5 互动小游戏开发有见解，欢迎一起交流。"} {"title":"《黑客与画家》读书笔记","date":"2018-07-08","language":"zh-CN","summary":"最近在看《黑客与画家》这一本书，主要介绍黑客即优秀程序员的爱好和动机，讨论黑客成长、黑客对世界的贡献以及编程语言和黑客工作方法等所有对计算机时代感兴趣的人的一些话题，本文用于记录读书过程中的一些笔记和思考。","categories":["Study"],"url":"https://tw93.fun/2018-07-08/hacker.html","markdownUrl":"https://tw93.fun/2018-07-08/hacker.md","translation":{"language":"en-US","title":"Reading Notes on \"Hackers and Painters\"","url":"https://tw93.fun/en/2018-07-08/hacker.html","markdownUrl":"https://tw93.fun/en/2018-07-08/hacker.md"},"contentMarkdown":"![](\"https://gw.alipayobjects.com/zos/rmsportal/CGfCazNqMVyiXccOVnJY.jpg\")
\n\n## 起\n\n最近在看《黑客与画家》这一本书，主要介绍黑客即优秀程序员的爱好和动机，讨论黑客成长、黑客对世界的贡献以及编程语言和黑客工作方法等所有对计算机时代感兴趣的人的一些话题，本文用于记录读书过程中的一些笔记和思考。\n\n## 1.为什么书呆子不受欢迎\n\n### 为什么呢?\n\n因为书呆子真的不想让自己受欢迎，他们脑子里面想着别的事情，注意力放在了读书或者观察世界上面，让自己变得更聪明，而不是琢磨打扮社交让自己变成受欢迎。\n\n### 有趣观点\n\n- **任何一种艺术，不管是否重要，如果你想要在该领域出类拔萃，就必须全身心投入。**\n- 对于那些高度困难的领域，只有身处其中的人，才能意识到成功需要不间断（虽然未必是自觉的）付出.\n\n### 不是很认同的地方\n\n> 几乎每一个和我讨论过的人都同意，人生的最糟糕时期是在11岁到14岁。”\n\n这里我不是很认同，应该是作者那个时间段受够了被那些受欢迎小孩欺负形成的阴影，同时和他交流的那些人刚好也是那种不收欢迎的“书呆子”\n\n> 至于学校，不过是这个虚假环境中关住牲口的围栏。表面上，学校的使命是教育儿童。事实上，学校的真正目的是把儿童都关在同一个地方，以便大人们白天可以腾出手来把事情做完。\n\n看到这句话，可见作者青春期过得真的有阴影了，也不是很认同，以后自己有儿女了，需要好好引导；\n\n不过在整本书中，大部分观点还是很认同作者的。\n\n## 2.黑客与画家\n\n没有看此书之前，一直很不想自诩自己为码农，感觉像没有思考重复劳动者，更多的是想做一个手艺人，通过代码这个工具来一些有趣的东西，顺便可以赚钱，两全其美。\n\n### 关系\n\n作者说“黑客和画家最相像”，很认同，**黑客与画家的共同之处，在于他们都是创作者。与作曲家、建筑师、作家一样，黑客和画家都是试图创作出优秀的作品。他们本质上都不是在做研究，虽然在创作过程中，他们可能会发现一些新技术。**\n\n黑客真正想做的是设计优美的软件，考核这种工作是非常困难的。你本人需要有良好的设计感，才能去考核别人的设计是否良好。但是，你觉得你有“良好的设计感”，与你实际是否具有，不存在相关关系，甚至可能存在负相关。\n\n接着举了一个大学上机的例子，学校教的是先在先在纸上把程序搞清楚，然后再敲出来，这与作家、画家和建筑师的做法完全一样，他的方式是一股脑不管对错，先把代码堆上去，再慢慢修改，看上去像编程就是在调试。\n\n### 有趣的点\n\n- 大公司为了避免设计上的灾难，选择了减少设计结果的标准差。但是当你排斥差异的时候，你不仅将失败的可能性排除在外，也将获得高利润的可能性排除在外，这也是创业公司可以成功的原因之一\n- 黑客解决生计问题的方法是找一份“白天工作”，然后在其余时间开发优美的软件\n- **黑客通过实践学习编程，创作者另一个学习的途径是通过范例，可以通过观看优秀的源代码学会编程**\n- 对于编程，这实际上意味着你可以把bug留到以后解决。消灭bug对我来说属于轻松的工作，只有在这个时候，编程才变得直接和机械，接近社会大众想象中的编程的样子\n\n### 思考\n\n> 普通黑客与优秀黑客的所有区别之中，会不会“换位思考”可能是最重要的单个因素。\n\n此处的换位思考是指设身处地为用户考虑，如何评定一个人是否具备呢？**就是看他怎样向没有技术背景的人解释技术问题**，越来越觉得，如何向不是很懂某种技术的人将你懂的东西让他也可以很轻易的理解，很考验人的能力。\n\n> 程序写出来是给人看的，附带能在机器上运行\n\n非常赞同这一句话，程序写出来是为了让人看懂它的算法，附带告诉计算机如何执行。”一种好的编程语言应该比英语更容易解释软件。只有在那些不太成熟、容易出现问题的地方，你才应该加上注释，提醒读者注意那里，就好像公路上只有在急转弯处才会出现警示标志一样。\n\n不少人以为写出很体现技术的代码是高水平、高能力的体验，其实不然，用简单的代码解决复杂的问题，同时实习生都能够轻易看懂的代码才是好代码。\n\n## 3.不能说的话\n\n作者比较谨慎，认为无论什么年代，“祸从口出”是一直存在的，告诫读者一定要小心自己说的话。自以为无害的言论会给你惹来大麻烦。\n\n### 你是一个随大流的人吗？\n\n假如在大庭广众下，你有没有观点什么观点不愿说出口？如果没有，应该好好想一想了，有一可能**你的观点就是从别人那里听来的，别人告诉你什么，你就相信了什么，你把别人灌输的观点当作了自己的观点。**\n\n为了防止他人复制，古代制作地图的工匠会故意在地图上画错一个小地方。如果你的地图与他的地图一样，就说明不太可能是你自己独立制作的。\n\n我们的思想几乎肯定也是一张有错误的地图。如果你也犯下与别人一样的错误，那么这个错误不太可能完全来自于你自己\n\n### 找出“不能说的话”的方法\n\n- **判断言论的真伪**：当话不能说出口，同时他们是正确的或者可能正确，值得进一步讨论\n- **关注“异端邪说”**：有些想法，纯粹因为非常特别，而不能说出口的那种，极富争议的言论称为“异端邪说“”\n- **回顾过去**。我们可以去找那些过去被认为理所当然，如今却被认为不可思议的事情\n- **寻找那些一本正经的卫道者，看看他们到底在捍卫着什么。**\n- **观察禁忌是如何产生的**\n\n### 为什么要这样做?\n\n- 纯粹的好奇心，与小孩子翻石头是出于同样的原因，要亲眼看一下，然后自己做决定\n- 不喜欢犯错，希望自己能够知道是哪些事情，这样可以使我不会上当\n- 很好的脑力训练。想要做出优秀作品，你需要一个什么问题都能思考的大脑\n\n### 发现后怎么办\n\n- 别说，至少也要挑选合适的场合再说，只打那些值得打的仗。\n- 在思想和言论之间划一条明确的界线。在心里无所不想，但是不一定要说出来\n- 守口如瓶，笑脸相迎，虽无法享受讨论带来的好处，但可找一些信得过的知己，只与他们畅所欲言\n\n### 有趣的点\n\n- 凡是不认同社会之处，你连想都不敢想，马上就放弃自己的观点，那才会真正出问题。\n- **优秀作品往往来自于其他人忽视的想法，而最被忽视的想法就是那些被禁止的思想观点。**\n- 智力越高的人，越愿意去思考那些惊世骇俗的思想观点。这不仅仅因为聪明人本身很积极地寻找传统观念的漏洞，还因为传统观念对他们的束缚力很小，很容易摆脱\n\n### 思考\n\n> 训练自己去想那些不能想的事情，你获得的好处会超过所得到的想法本身。\n\n但是一般都是喜欢先做自己喜欢的事情，对于不想做的事情能拖就拖着，殊不知一直在原地思维圈子，跳不出去，毫无无创新。\n\n> 如果你想要清晰地思考，就必须远离人群。但是走得越远，你的处境就会越困难，受到的阻力也会越大，因为你没有迎合社会习俗，而是一步步地与它背道而驰。\n\n也就是做自己，follow your heart，不要随波逐流。\n\n## 4.良好的坏习惯\n\n对于程序员来说，“黑客”这个词的字面意思主要就是“精通”，也就是他可以随心所欲地支配计算机。“黑”（hack）也有一种意思是赞美，如果你解决问题的方式非常聪明高超，将整个系统操纵在股掌之间，这也叫做你很“hack”。\n\n之后作者讲了一个想学习开锁的例子，原因并不是想着去破解做坏事，而是为了满足好奇心，或者磨练自己的智力。\n\n这里所说的良好的坏习惯，我理解应该是一种对新事物保持好奇心，爱自由，不爱管束的心态。\n\n### 有趣的点\n\n- 只有深入了解当前的技术，黑客才能构想下一代技术。\n- 在计算机工业的历史上，新技术往往是由外部人员开发的，而且所占的比例可能要高于内部人员。\n- 对于适当的不服从管教，保持宽容不会有太大的坏处，反而很有利于美国的国家优势，它使得美国不仅能吸引聪明人，还能吸引那些很自负的人。\n\n## 5.另一条路\n\n作者当时创业时候，本来打算写一个传统的桌面软件，但是想到可以让软件在服务器上运行，浏览器作为操作界面。我们试着重写，让所有操作都通过网络完成。\n\n他将事情看得很透彻，想到对于用户来说其实很多东西不需要关注，对于乱七八糟、经常变动的东西，都放在服务器端，由精通此道的专业人员维护，不需要用户自己当“系统管理员”。这种方式更容易、更便宜、更机动、更可靠，通常也比桌面软件更强大。\n\n### 用户的胜利\n\n95年的思路，death before inconvenience（太麻烦、不如死）\n\n互联网的操作应该是不受地域限制，在任何地方都可以使用，其实也即网页比安装在计算机上面的桌面软件更方便使用。\n\n你的电脑”这个概念正慢慢成为过去时，取而代之的是“你的数据”。你应该可以从任何电脑上获取你的数据。或者更准确地说，在任何终端设备上获取你的数据，终端设备不一定是电脑。\n\n互联网的软件对于用户的好处有：无需安装、发布迅速、平滑升级、bug修复迅速、可以同时多人使用，数据更加安全等到优点。\n\n### 有趣的点\n\n- 对于**互联网软件，没人规定只能使用某些语言开发**，因为所有的硬件都控制在你手里，你想要用什么语言，就能用什么语言。不同的语言适合不同的任务，你应该根据不同场合，挑选最合适的工具，尤其是在竞争者存在的情况下，“可以这样做”就变成了“必须这样做”，因为如果你不利用语言的优势，那就会听任对手超过你。\n- “随着软件规模的增大，开发成本指数式上升。这可能是因为修正旧bug的原因。如果bug都能被快速发现，成本的上升形态就能基本保持线性。”\n- 只要有可能，商业性公司就会采用一种叫做“价格歧视”（price discrimination）的定价方法，也就是针对不同的客户给出不同的报价，使得利润最大化\n- 管理企业其实很简单，只要记住两点就可以了：**做出用户喜欢的产品，保证开支小于收入**。\n\n### 思考\n\n> 应该让用户像订报纸那样按照使用时间长短订购软件的使用权。\n\n想起有些mac、iphone 上面软件的订阅方式，之前一直不理解，其实这样是对应开发者/用户来说都是好的，开发者这边可以持续的升级，为用户带来更好的体验。\n\n对于软件开发者来说，这样是一种理想的收入来源，每个季度有一个持续的现金流，同时可以更好的管理购买软件的人（不付钱，后面就用不了了....）\n\n对于购买者来讲，我喜欢，下次我就可以不订阅了，也是比较方便的。\n\n> 许多农场用电篱笆防止奶牛逃跑，但是不少电篱笆其实并没有通电。不过奶牛们已经吃过苦头，显然学会了不去碰电篱笆，这时不通电也能起到效果。“奶牛们，行动吧！”他写道，“趁着统治者打鼾时，夺回你们的自由！”\n\n也就是说，为什么不尝试一下呢？作者讲到创业，但大部分黑客会有两件事让他们望而却步，不敢真正开始采取行动。一件是不懂得管理企业，另一件是害怕竞争。可是实际上，这两件事都是没有通电的电篱笆。 其实可以试试的。\n\n## 6.如何创造财富\n\n**作者认为最好的办法就是创业，或者是加入创业公司。**\n\n### 为什么呢？\n\n创业其实是一个压缩过程，你的所有工作年限被压缩成了短短几年，在高科技领域，回报尤其丰厚，工作效率越高，额外报酬就越高。\n\n其次创业工作时候上班时候是在公司时间的2倍，加上全神贯注，产出提高3倍，将中间管理层出去，效率再提升2倍，同时不需要完成强行上级指派的任务，尽可能根据自己愿望，发挥聪明才智，效率再提升3倍，也就是工作效率是在公司的36倍，也即之前是8万美元一年，现在可以成为300万美元一年了。（当然前提是黑客.....）\n\n### 运气的成分\n\n任何公司的成功历程中，运气都是一个很大的随机因素。那些你在报纸上读到的成功人士固然很聪明，很努力，但是他们的运气也不坏。\n\n这里举了一个比尔盖茨的例子，IBM 和 微软关于DOS操作系统的授权协议，是IBM 犯下的一个错误，IBM尽全力帮助微软控制了个人电脑的标准。从那时起，微软只要不停地做出产品就可以了，它从来不用做出有商业风险的决策。微软只要抱着授权协议不放，快速地复制新产品就行了。\n\n致富的方式有很多种（投机、婚姻、继承、偷窃、敲诈、诈骗、垄断、行贿、游说、造假、开矿等），当时上述大概都是不劳而获或者不合法的那种，这里主要讲的是**通过创造有价值的东西在市场上得到回报，从而致富**，这种既合法还简单。\n\n### 金钱不等于财富\n\n创造有价值的东西就是创造财富，之前自己也一直认为有钱就是有财富，其实不是，我们需要的东西就是财富，食品、服装、住房、汽车、生活用品、外出旅行等都是财富。即使你没有钱，你也能拥有财富。、\n\n比如说你身处南极洲内陆，再多的钱对你也是无用的，因为没有东西可买，你真正需要的是财富。\n\n那为什么大家都把挣钱挂在嘴边呢？部分原因是，金钱是财富的一种简便的表达方式：金钱有点像流动的财富，两者往往可以互相转化，但不是财富，而只是我们用来转移财富所有权的东西。\n\n### 手工艺人\n\n最可能明白财富能被创造出来的人就是那些善于制作东西的人，也就是手工艺人。他们做出来的东西直接放在商店里卖，但是，随着工业化时代的来临，手工艺人越来越少。**目前还存在的最大的手工艺人群体就是程序员。**\n\n### 工作是什么\n\n工作就是在一个组织中，与许多人共同合作，做出某种人们需要的东西。\n\n### 更努力地工作\n\n大公司会使得每个员工的贡献平均化，这是一个问题。我觉得，大公司最大的困扰就是无法准确测量每个员工的贡献。\n\n但是，现实是你在工作上投入的精力越多，就越能产生规模效应。在某些行业，那些真正拼命工作的员工能够创造出比普通员工多十倍甚至百倍的财富。\n\n此处也指明了大公司的一个弊端，你的工作无法被量化，贡献难以被测量，导致很多想更努力地工作，但是与其他许多人的工作混杂在一起，这样就产生了问题，公司里其他人会拖累你。\n\n### 可测量性和可放大性\n\n致富，你需要两样东西：**可测量性和可放大性**。你的职位产生的业绩，应该是可测量的，否则你做得再多，也不会得到更多的报酬。此外，你还必须有可放大性，也就是说你做出的决定能够产生巨大的效应。\n\n但是，如果你想同时具备可测量性和可放大性，不一定非当上CEO或电影明星不可。你只需要成为某个攻克难题的小团体的一部分就可以了\n\n小团体=可测量性、高科技=可放大性\n\n一个非常能干而且在乎回报的人，通常在同类人组成的小团队中会有更出色的表现，自己也会感到更满意。\n\n同时多数因为创造财富而发财的人都是通过开发新技术而实现的。\n\n### 创业的潜规则\n\n- 很多事情由不得你，真正创业以后，你的竞争对手决定了你到底要有多辛苦，而他们做出的决定都是一样的：你能吃多少苦，我们就能吃多少苦。\n- 创业的付出与回报虽然总体上是成比例的，但是在个体上是不成比例的。\n\n### 有趣的点\n\n- 创业公司其实就是解决了某个技术难题的小公司。\n- 如果你想赚100万美元，就不得不忍受相当于100万美元的痛苦。\n- **创造人们需要的东西，也就是创造财富。**\n- 大学生活很有趣，可是已经过去了，上班的日子为什么会差别这么大？不要搞糊涂了，你现在已经从顾客变成了仆人。\n\n### 思考\n\n> 什么是技术？技术就是某种手段，就是我们做事的方式。如果你发现了一种做事的新方式，它的经济价值就取决于有多少人使用这种新方式。\n\n很有道理的一句话，很多时候，做技术人会有一个误区，自己觉得很厉害，但是东西根本没有人去使用，这其实也是不好的，它的价值取决于有多人在使用，同时可解决问题。\n\n> 假定你是一个手脚敏捷的小男孩，身后有一条壮硕的大狗正在追你。你跑到楼梯口，这时应该上楼还是下楼？我觉得应该上楼。如果下楼的话，大狗可能跑得跟你一样快。上楼的话，大狗的庞大身躯就将成为劣势。不错，跑上楼你会比较吃力，但是大狗会感到更吃力。\n\n在生活工作中也应该这样，应该**故意去选择那些很困难的技术问题**，不是因为这个功能能带来更多的收入，而是因为它比较难，也即**进入壁垒（bairiers to entry）**。其实做技术也应该这样，这样才有意思。\n\n总的来说，这也是很好的处事原则。如果你有两个选择，就选较难的那个。如果你要选择是坐在家里看电视，还是外出跑步，那就出去跑步吧。这个方法有效的原因可能是遇到两个一难一易的选择时，往往出于懒惰的缘故，你会选择较易的那个选项。在意识深处，**你其实知道不懒惰的做法会带来更好的结果，这个方法只是迫使你接受这一点。**\n\n## 7.关注贫富分化\n\n当人们非常想把某件事做好的时候，有些人会做得比其他人好得多。\n\n我们说一些工作报酬过高，另一些工作报酬过低，我们的真实想法到底是什么？在自由竞争的市场经济中，价格由买家的需求决定。如果人们喜欢棒球甚于喜欢诗歌，那么棒球运动员的收入就是要比诗人的收入高。如果说某种工作的报酬过低，那就相当于说人们的需求不正确。当然，人们确实会需求不正确的东西。\n\n### 有趣的点\n\n- 一个人的工作具有多少价值不是由政府决定的，而是由市场决定的。\n- 技术对生产效率的提高不是线性的，而可能是多项式形态（polynomial）的。\n- 技术无法使其变得更便宜的唯一东西，就是品牌。\n\n## 8.防止垃圾邮件的一种方法\n\n这一节对于现在这个年代的意义不是很大，作者**认为过滤垃圾邮件是可以做到的，基于内容的过滤器将发挥作用。** 但是在他那个年代，意义很大的。\n\n要对单个词语进行贝叶斯判断，就能很好地过滤大部分垃圾邮件。后面通过统计学的方法做了一个过滤器，其实有点像现在的机器学习了。\n\n## 9.设计者的品味\n\n这里讨论的是“如何做出优美的产品”，优秀设计的原则是许多学科的共同原则，一再反复地出现。\n\n### 众多学科对美的理解\n\n- 好设计是简单的设计\n- 好设计是永不过时的设计。\n- 好设计是解决主要问题的设计。\n- 好设计是启发性的设计。\n- 好设计通常是有点趣味性的设计。\n- 好设计是艰苦的设计。\n- 好设计是看似容易的设计。\n- 好设计是对称的设计。\n- 好设计是模仿大自然的设计。\n- 好设计是一种再设计。\n- 好设计是能够复制的设计。\n- 好设计常常是奇特的设计。\n- 好设计是成批出现的。\n- 好设计常常是大胆的设计。\n\n### 有趣的点\n\n- 哥白尼不认同托勒密的体系，一个极其重要的原因是，他觉得托勒密提出的偏心等距点（equant）毫无美感……\n- 优秀作品的秘块就是：非常严格的品味，再加上实现这种品味的能力。\n\n## 10.编程语言解析\n\n计算机和其他机器一样，有一张操作命令清单，命令的总和就是计算机的机器语言（machine language）。\n\n### 机器语言\n\n计算机刚发明的时候，所有程序就是一条条机器语言的命令。没过多久，程序就改成使用汇编语言了，它要比机器语言写起来稍微方便一点。命令清单还是一样的，就是每个命令换了一个更人性化的名字。\n两者共同特点是：只能让大多数计算机做一些很简单的事情。\n\n### 高级语言\n\n简便方式书写的程序所使用的语言就叫做高级语言，让你能够使用更强大的命令开发程序。\n除了可以将代码写得更加简短，还有一个优点，就是可移植性。\n\n实现高级语言可以用**编译器**或者**解释器**，区别是前者先将整个程序全部翻译成机器语言，然后再运行。后者是实时地将代码解释为相应的机器语言，然后一行行运行。\n\n编译器处理的高级语言代码又叫做源码。它经过翻译以后产生的机器码就叫做目标码。\n\n### 有趣的点\n\n- 一个操作所需的代码越多，就越难避免bug，也越难发现它们。\n- **如果你长期使用某种语言，你就会慢慢按照这种语言的思维模式进行思考。**所以，后来当你遇到其他任何一种有重大差异的语言，即使那种语言本身并没有任何不对的地方，你也会觉得它极其难用。缺乏经验的程序员对于各种语言优缺点的判断经常被这种心态误导。\n\n#### 思考\n\n>车顶上绑着飞机发动机的小车也许真能开，只要你不尝试拐弯，可能就不会出问题\n\n这里讲的后面出现的新的“头重脚轻”的编程语言，它们的内核设计得并非很好，但是却有着无数强大的函数库，可以用来解决特定的问题。可以想象一辆本身性能很差的小汽车，车顶却绑着一个飞机发动机。\n\n有一些很琐碎、很普遍的问题，程序员本来要花大量时间来解决，但是有了这些函数库以后，解决起来就变得很容易，所以这些库本身可能比核心的语言还要重要。\n\n也就更好解释了黑客们为什么不喜欢用C这种语言了。\n\n## 11.百年后的编程语言\n\n编程语言就像生物物种一样，存在一个进化的脉络，许许多多分支最终都会成为进化的死胡同。\n也即不同分支的语言会发生聚合，因为语言的设计者们总是有意识地借鉴其他语言的设计思想。\n\n作者认为，那些内核最小、最干净的编程语言才会存在于进化的主干上。一种语言的内核设计得越小、越干净，它的生命力就越顽强。\n\n### 有趣的点\n\n- 一种让程序员做无用功的语言才真正称得上很烂。浪费程序员的时间而不是浪费机器的时间才是真正的无效率。随着计算机速度越来越快，这会变得越来越明显。\n- 一百年后的编程语言在理论上今天就能设计出来；如果今天真能设计出这样一种语言，很可能现在就适合编程，并且能够产生更好的结果。\n\n## 12.拒绝平庸\n\n哈哈，这一节，作者在推广 lisp 语言，想起之前看的SICP来了，有点高深，还需要再看一遍才能搞懂，他说真正非常严肃地把黑客作为人生目标的人，应该考虑学习Lisp：\n\n> Lisp很值得学习。你掌握它以后，会感到它给你带来的极大启发。这会大大提高你的编程水平，使你成为一个更好的程序员。尽管在实际工作中极少会用到Lisp。\n\n### 有趣的点\n\n- Lisp语言的好处不在于它有一些狂热爱好者才明白的优点，而只在于它是目前最强大的编程语言。它没有得到广泛使用的原因就是因为编程语言不仅仅是技术，也是一种习惯性思维，非常难于改变。当然，上面两句话都需要进一步解释。\n- 合气道（Aikido）是一种日本的武术，主要特点是“以柔克刚”、“借劲使力”、“不主动攻击\n\n## 13.书呆子的复仇\n\n产品经理和程序员之间的“冲突问题”，一个是对技术一无所知；一个是对技术有强烈的个人观点。\n\n讲着讲着，又说到了Lisp，为什么很特别呢？Lisp语言诞生的时候就包含了9种新思想。其中一些我们今天已经习以为常，另一些则刚刚在其他高级语言中出现，至今还有2种是Lisp独有的。\n\n### 为什么Lisp语言很特别\n\n- 条件结构（即if-then-else结构）\n- 函数也是一种数据类型。在Lisp语言中，函数与整数或字符串一样，也属于数据类型的一种。它有自己的字面表示形式（literal representation），能够存储在变量中，也能当作参数传递。一种数据类型应该有的功能，它都有。\n- 递归。Lisp是第一种支持递归函数的高级语言\n- 变量的动态类型。在Lisp语言中，所有变量实际上都是指针，所指向的值有类型之分，而变量本身没有。复制变量就相当于复制指针，而不是复制它们指向的数据。\n- 垃圾回收机制。\n- 程序由表达式组成。Lisp程序是一些表达式树的集合，每个表达式都返回一个值。这与Fortran和大多数后来的语言都截然不同，它们的程序由表达式和语句组成。\n- 符号类型。符号实际上是一种指针，指向存储在散列表中的字符串。所以，比较两个符号是否相等，只要看它们的指针是否一样就行了，不用逐个字符地比较。\n- 代码使用符号和常量组成的树形表示法。\n- 无论什么时候，整个语言都是可用的。Lisp并不真正区分读取期、编译期和运行期\n\n### 有趣的点\n\n- 任何C或Fortran程序复杂到一定程度之后，都会包含一个临时开发的、只有一半功能的、不完全符合规格的、到处都是bug的、运行速度很慢的Common Lisp实现。\n\n## 14.梦寐以求的编程语言\n\n这种语言干净简练，具有最高层次的抽象和互动性，而且很容易装备，可以只用很少的代码就解决常见的问题。不管是什么程序，你真正要写的代码几乎都与你自己的特定设置有关，其他具有普遍性的问题都有现成的函数库可以调用。\n\n这种语言有大量优秀的范例可供学习，而且非常符合直觉，你只需花几分钟阅读范例就能领会应该如何使用此种语言。\n\n这种语言以层的方式构建。较高的抽象层透明地构建在较低的抽象层之上。如果需要的话，你可以直接使用较低的抽象层。\n\n这种语言的所有细节对使用者都是透明的。它提供的抽象能力只是为了方便你的开发，而不是为了强迫你按照它的方式行事。\n\n### 简洁\n\n- 简洁性最重要的方面就是要使得语言更抽象。为了达到这一点，首先你设计的必须是高级语言，然后把它设计得越抽象越好。\n- 不要觉得为用户着想就是让他们使用像英语一样又长又啰嗦的语法。\n- 单个的语法单位也应该很简短。\n\n### 可编程性（Hackability）\n\n- 选择编程语言的时候，还有一个因素比简洁更重要，那就是这种语言必须能够帮助自己做到想做的事。\n\n### 一次性程序\n\n- 所谓一次性程序，就是指为了完成某些很简单的临时性任务而在很短时间内写出来的程序。\n- 它必须很容易装备。一次性程序是你只想在一小时内写出来的程序，所以它不应该耗费很多时间安装和配置，最好已经安装在你的电脑上了。它必须是想用就用的。\n\n### 函数库\n\n- 函数库就是别人帮你写好的程序\n- 优秀函数库的重要性将超过语言本身\n\n### 效率\n\n- 编程时提高代码运行速度的关键是使用好的性能分析器\n\n### 时间\n\n- 一种编程语言要想变得流行，最后一关就是要经受住时间的考验。没人想用一种会被淘汰的语言编程\n\n### 再设计\n\n- 只要能让“再设计”周而复始地进行下去，就都是可取的。\n\n## 15.设计与研究\n\n设计与研究的区别看来就在于，前者追求“好”（good），后者追求“新”（new）。优秀的设计不一定很“新”，但必须是“好”的；\n\n### 有趣的点\n\n- 为了做出优秀的设计，你必须贴近用户，始终寸步不离，永远站在用户的角度调整自己的构想。\n- 先做出原型，再逐步加工做出成品，这种方式有利于鼓舞士气，因为它使得你随时都可以看到工作的成效。\n- 任何时候，**代码都必须能够运行**。如果你正在写的代码一个小时之后就可以看到运行结果，这好比让你看到不远处就是唾手可得的奖励，你因此会受到激励和鼓舞。\n\n## 结束\n\n这本书看了好几个星期，终于看完整理出来了，很像大学时候做笔记那种感觉，同时也解决了我不少困惑，很推荐程序员有时间去阅读一下!"}
{"title":"Weex Ui 半年开源之路","date":"2018-03-31","language":"zh-CN","summary":"Weex Ui 于去年9月30日开源后，距离今天刚好半年时间，本文打算从起源、定位、现状、发展、展望这5部分来给大家分享 Weex Ui 半年的开源之路。","categories":["Share"],"url":"https://tw93.fun/2018-03-31/weex-ui-report.html","markdownUrl":"https://tw93.fun/2018-03-31/weex-ui-report.md","translation":{"language":"en-US","title":"Weex Ui Half-Year Open Source Road","url":"https://tw93.fun/en/2018-03-31/weex-ui-report.html","markdownUrl":"https://tw93.fun/en/2018-03-31/weex-ui-report.md"},"contentMarkdown":"\n![](\"https://img.alicdn.com/tfs/TB1tkAjk5qAXuNjy1XdXXaYcVXa-200-236.png\")
\n
![](\"https://gw.alipayobjects.com/zos/rmsportal/HbThsElNGBLMMRbbTxyx.jpeg\")
\n\n### Weex Ui 的定位\n\nWeex Ui 的定位为 **一套轻量、富交互、高性能的 Weex 上层 Ui 组件库**，通过上层 Vue 代码对组件进行 Native 级别优化的上层封装，友好支持 Weex iOS、Android、H5 基础环境，通过前端开箱即用的思想提供给开发者，同时通过 Weex Ui 代码让未接触 Weex 的同学对其编写有借鉴作用。\n\n[二维码图片在这里>>>](https://gw.alipayobjects.com/zos/rmsportal/MNIgWQQFnsXFVDgmXLrr.jpeg)\n\n![](\"https://img.alicdn.com/tfs/TB1T.M5h7OWBuNjSsppXXXPgpXa-1708-1218.png\")
\n\n### Weex Ui 的现状\n\n- 7大类组件、共32个成熟组件\n- Github **Star 2552**、Fork 333、Watch 127\n- 月下载量 **9K/月**，累计使用 **47K** 次 (包括 CNPM 2.8K/月和 20K 总量)\n- Issus 168，Pull Request 数为45，共 11 个 Contributors，累计发布 30 个版本\n- 国内公司使用不完全统计\n\n ![](\"https://img.alicdn.com/tfs/TB1Rz9dhCtYBeNjSspaXXaOOFXa-1576-318.png\")
\n\n- 给 Weex Ui 贡献代码的同学\n\n ![](\"https://img.alicdn.com/tfs/TB1U8sghgmTBuNjy1XbXXaMrVXa-1800-196.png\")
\n\n### Weex Ui 的发展\n\n ![](\"https://img.alicdn.com/tfs/TB11tdshrGYBuNjy0FoXXciBFXa-2792-1884.png\")
\n\n更多版本迭代可见 [Weex Ui 升级日志](https://alibaba.github.io/weex-ui/#/cn/CHANGELOG)\n\n### Weex Ui 的展望\n\n- 引入更多的**富交互**组件，让 Weex 应用 More Native\n- 继续**轻量化、简单化** Weex Ui 的使用，降级非前端同学上手成本\n- 组件**性能的持续优化**，尤其是低端机器性能提高\n- 支持组件**主题一键切换**，正在实现中\n- 汇集使用 Demo 的整理，包含工具类、媒体类、管理类等\n- 生态化的探索，更多 Weex 周边的建设\n\n### 最后\n\n**Weex Ui 的发展离不开社区的贡献，从开源以后也是慢慢除去内部定制的特色，向社区化发展。**\n\n感谢每一个为 Weex Ui 提出建议和代码贡献的同学，尤其感谢社区[@zwwill](https://github.com/zwwill)、[@GJJDD](https://github.com/GJJDD)、[@Yanjiie](https://github.com/Yanjiie)、[@zweipix](https://github.com/zweipix) 等同学的付出。\n\n希望未来能有更多的同学加入到 Weex Ui 的开发中来，让大家可以快乐地使用 Weex Ui 提高效率早下班，同时促进他更好的发展。\n\n> **Please feel free to use and contribute to the development.**\n\n### 其他链接\n\n- [Weex Ui 官网](https://alibaba.github.io/weex-ui/#/)"}
{"title":"iOS 中的 JS","date":"2018-03-17","language":"zh-CN","summary":"最近主要在研究 iOS 中的 JS 这一块内容，打算从 为什么不能单纯地搞前端、JSCore 的原理和通信机制、OC 底层 Runtime 原理、如何通过 JS 任意修改 iOS 的运行结果 这4部分来阐述，旨在让前端和 iOS 开发同学更加了解跨端开发的原理，并知晓他俩结合起来做哪些意想不到的事情做。","categories":["Study"],"url":"https://tw93.fun/2018-03-17/js-in-ios.html","markdownUrl":"https://tw93.fun/2018-03-17/js-in-ios.md","translation":{"language":"en-US","title":"JS in iOS","url":"https://tw93.fun/en/2018-03-17/js-in-ios.html","markdownUrl":"https://tw93.fun/en/2018-03-17/js-in-ios.md"},"contentMarkdown":"最近主要在研究 iOS 中的 JS 这一块内容，打算从**为什么不能单纯地搞前端、JSCore 的原理和通信机制、OC 底层 Runtime 原理、如何通过 JS 任意修改 iOS 的运行结果** 这 4 部分来阐述，旨在让前端和 iOS 开发同学更加了解跨端开发的原理，同时了解他俩结合起来做哪些意想不到的事情。\n\n## 为什么不能单纯地搞前端？\n\n毕业工作以来，经历过移动端 H5 到 RN 开发，到去年的 Weex 开发和最近的 iOS 开发，越来越发现：\n\n> **仅靠前端技术难以满足移动端的用户需求或体验要求**\n\n### 为什么单纯弄前端会效果不好？\n\n可能大家 H5 同学很有感触，有时候需要做一个端上照片上传功能，通过 JS 去实现往往效果会大打折扣，同时也很难达到业务方需要的顺滑体验，要是此时 Native 同学说我写好了一个 Bridge，只需在客户端里调用`Bridge.uploadImg()`这个方法就可直接用 Native 的上传功能，听到这句话你肯定会长舒一口气轻松地去写代码了。\n\n还有将端上 Webview 由 UIWebView 更换成 WKWebView，起到的效果也会比自己优化很久的 H5 顺滑滚动来得快和好。\n\n### 那么潮流前端同学一般怎么弄**移动端**需求呢？\n\n他们一般会借 Native 端的能力，譬如用 **Weex** 或者 **RN** 来开发页面，让其也有 Native 效果，假如有页面在微信或者支付宝，还可以升级成**小程序**变成内置程序一样，客户端中还可以借助**端上容器优化**这一块，让其可以离线我们的 H5 页面，并通过桥提供很多 Native 功能来拓展能力。\n\n这里**借力的桥梁其实就是 Bridge**，让两者不在是一个孤岛，而是相互助力，我理解它可以做这些事情：\n\n![](\"https://img.alicdn.com/tfs/TB1jPEIdKuSBuNjy1XcXXcYjFXa-1750-1028.png\")
\n\n接下来通过**JSCore 的原理和通信机制**这一小节给出上述的解决方案。\n\n## JSCore 的原理和通信机制\n\n### JSCore 是什么？\n\n大家都知道浏览器内核的模块主要是由**渲染引擎**和 **JS 引擎**组成，其中 JSCore 就是一种 JS 引擎\n\nApple 通过将 WebKit 的 JS 引擎用 OC 封装，**提供了一套 JS 运行环境以及 Native 与 JS 数据类型之间的转换桥梁，常用于 OC 和 JS 代码之间的相互调用**，这也意味着他可以脱离渲染单独去执行 JS。\n\nJSCore 主要包括如下这些 classes、协议、类结构：\n\n![](\"https://img.alicdn.com/tfs/TB16iEhdMmTBuNjy1XbXXaMrVXa-1912-510.png\")
\n\n### JSCore 如何运行呢？\n\n可以通过如下这张 JSCore 的框架结构图和上述描述来看懂各个模块是怎么运行的。\n\n![](\"https://img.alicdn.com/tfs/TB1hPISdQyWBuNjy0FpXXassXXa-1024-616.png\")
\n\n从上图我们可以看到一个这样的过程：\n\n在 Native 应用中我们可以开启多个线程来异步执行我们不同的需求，也就意味着我们可创建多个 JSVirtualMachine 虚拟机(运行资源提供者)，同时相互隔离不影响，这样我们就**可以并行地执行不同 JS 任务**。\n\n在一个 JSVirtualMachine 中还可以关联多个 JSContext (JS 执行环境上下文)，并通过 JSValue（值对象） 来和 Native 进行数据传递通信，同时可以通过 JSExport (协议) ，将 Native 中遵守此解析的类的方法和属性转换为 JS 的接口供其调用。\n\n### JS 和 OC 数据类型互换\n\n从上小节，可以知道 JSValue 可以用来让 JS 和 OC 之间无障碍的数据转换，主要原理是 JSValue 上面提供了如下方法，便于双方各种类型进行转换。\n\n ![](\"https://img.alicdn.com/tfs/TB1eZQed_tYBeNjy1XdXXXXyVXa-2152-1520.png\")
\n\n### 在 iOS 里面执行 JS 代码\n\n我们可以通过`evaluateScript`在 JSCore 中执行一段 JS 脚本，利用这个特性我们可以来做一些**多端逻辑统一**的事情。\n\n```objective-c\n // 执行一段 JavaScript 脚本\n -(JSValue *)evaluateScript:(NSString*)script;\n```\n\n比如业务中 3 端(iOS、Android、H5)有一段相当复杂的但原理一样算价逻辑，一般做法是 3 端用各自语言自己写一套，这样做不但麻烦、效率低而且逻辑不一定统一，同时用 OC 去实现复杂计算逻辑也没有 JS 这么灵活高效。\n\n这里就可以利用**执行 JS 代码**这个特性，将这个逻辑抽成一个 JS 方法，只需要传入特定的入参，直接返回价格，这样的话，3 端可以同时使用这个逻辑，还可以放到远端进行动态更新维护。\n\n大概这样实现：\n\n```objective-c\n // 在 iOS 里面执行 JS\n JSContext *jsContext = [[JSContext alloc] init];\n [jsContext evaluateScript:@\"var num = 500\"];\n [jsContext evaluateScript:@\"var computePrice = function(value){ return value * 2 }\"];\nJSValue*value = [jsContext evaluateScript:@\"computePrice(num)\"];\n int intVal = [value toInt32];\n NSLog(@\"计算结果为 %d\", intVal);\n```\n\n运算结果为：\n\n```bash\n2018-03-16 20:20:28.006282+0800 JSCoreDemo[4858:196086] ========在 iOS 里面执行 JS 代码========\n2018-03-16 20:20:28.006517+0800 JSCoreDemo[4858:196086] 计算结果为 1000\n```\n\n我认为还可以在**正则校验**、**动画函数**、**3D 渲染建模**等这些数据计算方面来使用它。\n\n### 在 iOS 里面调用 JS 中方法\n\n说完在 iOS 中执行 JS 代码，接下来给大家介绍下，如何在 iOS 中调用 H5 中的 JS 方法。\n\n比如我们 H5 中有一个全局方法叫做 nativeCallJS，我们可以通过执行环境的上下文 `jsContext[@\"nativeCallJS\"]` 获取该方法并进行调用，类似这样：\n\n```html\n // Html 中有一个 JS 全局方法\n \n```\n\n```objective-c\n // 在 iOS 运行 JS 方法\n JSContext *jsContext = [webView valueForKeyPath:@\"documentView.webView.mainFrame.javaScriptContext\"];\nJSValue*jsMethod = jsContext[@\"nativeCallJS\"];\n jsMethod callWithArguments:@[ @\"Hello JS, I am iOS\" ]];\n```\n\n最终我们的运行结果就可以看到 Native 执行到了 H5 的 Alter 弹层:\n\n![](\"https://img.alicdn.com/tfs/TB1df5qd1uSBuNjy1XcXXcYjFXa-678-312.png\")
\n\n利用这个特性我们可以**让 iOS 获取到一些 H5 的信息**来处理一些他想处理的东西，譬如先将信息在全局中暴露出来，通过调用方法获取到 **使用的版本号、运行的环境信息、端主动处理逻辑(清除缓存、控制运行)**等这些事情。\n\n### 在 JS 里面调用 iOS 中方法\n\n其实对于前端同学使用得最多的应该是这个，通过 JS 调用一些端上能力来弥补 H5 上的不足。\n\n这里需要和`@\"documentView.webView.mainFrame.javaScriptContext\"`这个 webview 相关特性结合起来，将 H5 调用的方法用 Block 以`jsCallNative(调用方法名)`为名传递给 JSCore 上下文。\n\n比如我们 H5 中有一个按钮的点击回调是 去调用客户端的一个方法，同时在方法中输出传入参数，大致是这样实现：\n\n```html\n // Html中按钮点击调用一个OC方法\n \n```\n\n```objective-c\n //Block 以”jsCallNative\"为名传递给JavaScript上下文\n JSContext *jsContext = [webView valueForKeyPath:\n @\"documentView.webView.mainFrame.javaScriptContext\"];\n jsContext[@\"jsCallNative\"] = ^() {\nNSArray*args = [JSContext currentArguments];\n for (JSValue *obj in args) {\n NSLog(@\"%@\", obj);\n }\n };\n```\n\n最终输出是这样：\n\n```bash\n2018-03-16 20:51:25.590749+0800 JSCoreDemo[4970:219245] ========在 JS 里面调用 iOS 中方法========\n2018-03-16 20:51:25.591155+0800 JSCoreDemo[4970:219245] Hello iOS\n2018-03-16 20:51:25.591370+0800 JSCoreDemo[4970:219245] I am JS\n```\n\n这个特性真正**让 H5 可以享受到很多端上的特性**，比如**Native 方式的跳转、Native 底层能力(震动、录音、拍照)、扫码、获取设备信息、分享、设置导航栏、调用 Native 封装组件**等这些功能，此处大家可以联系 Hybrid 开发模式。\n\n### 通过 JSExport 暴露 iOS 方法属性给 JS\n\n这个特性可能 H5 的同学不是很清楚，但是对于 Native 同学，我认为非常有用。\n\n通过 JSExport 可以很方便地将 iOS 对象的属性方法暴露给 JS 环境，让其使用起来像 JS 对象一样方便。\n\n比如我们 OC 中有一个 Person 的类，包含两个属性和一个方法，此处通过让`fullName`方法使用 JSExport 协议暴露出去，这样在 JS 中是可以直接去调用的。\n\n```objective-c\n @protocol PersonProtocol ![](\"https://gw.alipayobjects.com/zos/rmsportal/sBfTGamezxaBCGPshyXT.gif\") | ![](\"https://img.alicdn.com/tfs/TB1hEhXbxGYBuNjy0FnXXX5lpXa-1872-1208.png\") |
| JS 下发前 | JS下发后 | JS 删除后 |
![](\"https://gw.alipayobjects.com/zos/rmsportal/nhFbLcvtcnylFOxgsZnd.png\") | ![](\"https://gw.alipayobjects.com/zos/rmsportal/wNOidYGCZUbMgrPVqUMy.png\") | |
![](\"https://img.alicdn.com/tfs/TB1G_dOentYBeNjy1XdXXXXyVXa-2088-1310.png\")
\n\n通过上述这些方法就可以做很多意想不到的事情，比如**动态的变量控制、动态给一个对象增加方法、可以把消息转发给想要的对象、甚至可以动态交换两个方法的实现**。\n\n### JSPatch && Runtime\n\n正是由于 OC 语言的动态性，上所有方法的调用/类的生成都通过 OC Runtime 在运行时进行，可通过类名称和方法名的字符串获取该类和该方法，并实例化和调用：\n\n```objective-c\n Class class = NSClassFromString(\"UIViewController\");\n id viewController = [[class alloc] init];\n SEL selector = NSSelectorFromString(\"viewDidLoad\");\n [viewController performSelector:selector];\n```\n\n也可以**替换**某个类的方法为新的实现：\n\n```objective-c\n static void newViewDidLoad(id slf, SEL sel) {}\n class_replaceMethod(class, selector, newViewDidLoad, @\"\");\n```\n\n还可以新注册一个类，为类**添加方法**：\n\n```objective-c\n Class cls = objc_allocateClassPair(superCls, \"JPObject\", 0);\n objc_registerClassPair(cls);\n class_addMethod(cls, selector, implement, typedesc);\n```\n\nJSPatch 正是利用如上这些好的特性来实现他的热修复功能。\n\n### JSPatch 中 JS 如何调用 OC\n\n此处 JSPatch 中的 JS 是如何和任意修改 OC 代码联系起来的呢？大概原理如下：\n\n1.JSPatch 在实现中是通过 Require 调用，在 JS 全局作用域上创建一个同名变量，变量指向一个对象，对象属性 \\_\\_clsName 保存类名，同时表明这个对象是一个 OC Class，通过调用`require(\"UIView\")`，我们就可以使用`UIView`去调用他上面对应方法了。\n\n```javascript\n UIView = require(\"UIView\");\n\n var _require = function(clsName) {\n if (!global[clsName]) {\n global[clsName] = {__clsName: clsName}\n }\n return global[clsName]\n }\n```\n\n2.在 JSCore 执行前，OC 方法的调用均通过**新增 Object(JS) 原型方法\\_\\_c(methodName)完成调用**，假如直接调用的话，需要 JS 遍历当前类的所有方法，还要循环找父类的方法直到顶层，无疑是很耗时的，通过`__c()`元函数的唯一性，可以每次调用它时候，转发给一个指定函数去执行，就很优雅了。\n\n![](\"https://img.alicdn.com/tfs/TB1PxpRentYBeNjy1XdXXXXyVXa-2388-256.png\"){kind=spacer}
\n\n```javascript\n Object.prototype.__c = function(methodName) {\n return function(){\n var args = Array.prototype.slice.call(arguments)\n return _methodFunc(self.__obj, self.__clsName, methodName,\n args, self.__isSuper)\n }\n }\n```\n\n3.处理好 JS 接口问题后，接下来只需要借助前面 JSCore 的知识就可以做到 JS 和 OC 之间的消息互传了，也即在**在\\_c 函数中通过 JSContex 建立的桥接函数，用 Runtime 接口调用相应方法完成调用**：\n\n* JS 中的转发\n\n```javascript\n var _methodFunc = function(instance, clsName, methodName, args, isSuper) {\n ....\nvar ret =_OC_callC(clsName, selectorName, args)\n return _formatOCToJS(ret)\n }\n```\n\n* OC 中的处理\n\n```objective-c\n context[@\"_OC_callC\"] = ^id(NSString *className, NSString*selectorName, JSValue *arguments) {\n return callSelector(className, selectorName, arguments, nil, NO);\n };\n```\n\n### 感触\n\n上面大概就是如何通过 JS 任意修改 OC 运行结果的一个原理，**虽然 JSPatch 大部分功能被禁用了，但是其中 JS 操作 OC 的思路真的很棒**。\n\n[《iOS 中的 JS》](http://p.tb.cn/rmsportal_7819__E3_80_90_E4_BE_91_E5_A4_95_E3_80_91iOS_20_E4_B8_AD_E7_9A_84JS.pdf){:target=\"_blank\"} 其实是在上周象声汇的一个分享，将其进行整理成文章，分享给对跨端感兴趣的同学，同时尽量用接地气的方式，希望只有客户端基础或者前端基础的同学也可以看懂,同时也可以 Clone [Github 中 Demo 源码](https://github.com/tw93/iOSDemo){:target=\"_blank\"} 来进行测试。\n\n由于还处在 iOS 补基础阶段，可能有些地方理解不到位，欢迎一起讨论"}
{"title":"该以怎样的心态对待开源？","date":"2018-02-11","language":"zh-CN","summary":"知乎的一个问答记录，`该以怎样的心态对待开源`?","categories":["Thought"],"url":"https://tw93.fun/2018-02-11/open-source.html","markdownUrl":"https://tw93.fun/2018-02-11/open-source.md","translation":{"language":"en-US","title":"What Mentality Should Be Used to Treat Open Source?","url":"https://tw93.fun/en/2018-02-11/open-source.html","markdownUrl":"https://tw93.fun/en/2018-02-11/open-source.md"},"contentMarkdown":"知乎的一个问答记录，[该以怎样的心态对待开源](https://www.zhihu.com/question/266954088){:target=\"_blank\"}?\n\n题中有两个问题，第一个是用别人的开源项目应该保持什么心态？第二个是自己开源一个产品是应该保持什么心态？\n\n## 用别人的开源项目应该保持什么心态 ？\n\n#### 1：好奇和学习的心态\n\n这种心态主要是对待**不是**那种项目需要，解决手下难题的库，而且平时偶然发现的东西，逛 Github trending 常常可以看到惊喜的东西。\n\n碰到了这种，一般是按照 Readme 引导 Clone 到本地玩一玩，如果喜欢会去 Star 一下（可以理解为对作者工作的赞赏），同时看看代码，想想假如自己搞一个这样的东西，自己会怎么弄，能顺手提一个 PR 也是很好的，或者这种思路会不会可以用到自己以后的业务工作中。\n\n#### 2：合作和感激的心态\n\n这种心态更多的是对待和自己项目有关系的东西，譬如 Weex、Webpack 等，它发展好了，对于自己的开发体验也会好很多，在使用的时候应该明确一点：**开源项目的用户和维护者之间并不是甲方和乙方的关系，同时维护者不是客服，碰到问题，或者不爽时候，更多应该抱着『一起合作来解决这个问题』的心态来弄**，有任何建议或者使用不爽的地方，或者自己觉得这样弄更好，直接描述清楚通过 issue 或者邮件的方式去沟通解决，给维护者更多的输入，这样才能更好促进其发展。\n\n## 自己开源一个产品应该保持什么心态 ？\n\n这里打算和大家分享一下 [Weex Ui](https://github.com/alibaba/weex-ui){:target=\"_blank\"} 开源的一些事情和心态。\n\n\n\n#### 1：开源的东西对开发者是有用的\n\n很多时候开源并不是为了开源而去开源，更多是这个东西真正对于开发者是有用处， **可提高开发效率、更多的实现输入、最佳实践的汇总**，对于使用者是可以写出更好的代码，早点下班。想起在开源那一周，无广泛推广下上了 Github trending，安静很激动。\n\n{:class=\"img-zoom\"}\n\n#### 2：由衷喜欢的心态\n\n自己由衷的喜欢和热情，将其当做自己的**作品**来弄比 任务安排 效果会好很多。\n\n{:class=\"img-zoom\"}\n\n后面开源发展主要是共建 weex-toolkit 让其更好支持 Weex Ui、欠缺组件的补全 + 现有组件的增强、继续扩展边界、引入更多富交互体验 + 组件的无障碍优化、简易的使用方式 + 详细的中英文档等等工作。\n\n#### 3：开放分享的心态\n\n很多时候只有东西被用大家使用起来后，有人吐槽建议，吸引更多有兴趣的同学一起参考进来弄，更多好的思路的输入，才能更好促进其发展，目前已经吸引网易、腾讯、仟和网络科技、博瑞立方网络等公司的同学一起参考进来弄，希望变成一个大家的 Weex Ui 库，而不是某一家公司的。\n\n对于一个开源作品，可以做的也很多，包括组件 bugfix、功能增强和新增，文档的纠错、翻译整理，还有任何的建议、思路交流，包括对社区的维护，群问题，issue 解答等事情都是可以做的，快乐的使用同时促进其发展是最好的。\n\n**Please feel free to use and contribute to the development.**\n\n> Only the combination of Great Vision and Bad Code creates Great Communities !\n\n以上，是我对开源的一些理解，可能没有说太清楚，欢迎一起讨论。"}
{"title":"写给前端看的 iOS 梳理 (上)","date":"2018-02-07","language":"zh-CN","summary":"去年双十一为了排查一些 Weex 性能问题开始接触 iOS 相关学习，恰逢今年 1 月份开始慢慢参与 iOS 业务开发，借此机会整理一下 iOS 开发中的一些基础知识，用于备忘，同时旨在通过系列文章让前端同学在日后碰到 iOS 的代码可以看懂，方便更好的理解端上的一些原理。","categories":["Study"],"url":"https://tw93.fun/2018-02-07/ios-1.html","markdownUrl":"https://tw93.fun/2018-02-07/ios-1.md","translation":{"language":"en-US","title":"iOS Primer for Frontend Engineers (Part 1)","url":"https://tw93.fun/en/2018-02-08/ios-1.html","markdownUrl":"https://tw93.fun/en/2018-02-08/ios-1.md"},"contentMarkdown":"{:class=\"img-zoom\"}\n\n_20161020 摄于杭州西湖 Apple Store_\n\n## 序\n\n去年双十一为了排查一些 Weex 性能问题开始接触 iOS 相关学习，恰逢今年 1 月份开始慢慢参与 iOS 业务开发，借此机会整理一下 iOS 开发中的一些基础知识，**用于备忘，同时旨在通过系列文章让前端同学在日后碰到 iOS 的代码可以看懂**，方便更好的理解端上的一些原理。\n\n## 大纲\n\n{:class=\"img-zoom\"}\n\n_《上》主要讲述在 iOS 的开发过程中碰到的文件格式和 Foundation 框架常用的类，《中》和《下》正在整理中_\n\n## 文件格式\n\n- **.h**: 头文件也叫接口文件，提供对外访问的接口，包含类、方法和属性的声明，相当于类的**用户手册**\n- **.m**: 实现文件，用于实现 `.h` 中声明的方法，相当于类的**工程细节**\n- **Podflie**: 包管理文件，用于定义项目所需要使用的第三方库，类比 `package.json`\n- **Podflie.lock**: 依赖库锁文件，记录了需要被安装的 pod 的每个已安装的版本，便于团队协作包统一，类比 `package-lock.json`\n- **.xib**: 可视化文件，一个轻量级的用来描述**局部界面**的文件\n- **.storyboard**: 界面布局文件，承载对应 UIView 的视图控件\n- **.pch**: 预编译头文件，将一个工程中“不会常修改”代码预先编译好放到 pch 里面，用于存放**公用宏**、存放**公用头文件**、还可以**管理日志输出**\n- **.plist**: 属性列表文件，一种用来存储串行化后的对象的文件，通常用于**储存用户设置**或者一些捆绑的信息，也是数据持久化解决方案之一\n- **.lproj**: 多语言本地化文件夹，也即为每一种语言单独定义一份资源，有图片，文本，Storyboard，Xib 这些文件\n- **.xcassets**: 图像资源文件，用了存放图片资源\n- **.xcodeproj**: Xcode 工程文件，存储着 Xcode 工程的各项配置参数\n- **.xcworkspace**: Xcode 工程文件，使用 pod install 后生成的新文件，打开后可以同时看到项目文件和 pods 依赖包\n\n## Foundation 框架\n\n### 简要介绍\n\n首先介绍一下 Cocoa，Cocoa 是一套 OS X 和 iOS (Cocoa Touch) 中的框架和运行时支持，也即 API 应用程序接口，可类比于 VC 里面的 MFC。\n\nCocoa 其中最重要和 **UIKit(OSX 为 AppKit)** 和 **Foundation**，两个框架在系统中的位置如下图, 同时可以看到常见的框架所在位置。\n\n![](\"https://img.alicdn.com/tfs/TB1x939XH9YBuNjy0FgXXcxcXXa-825-862.png\")
\n\n其中 UIKit 主要用于 iOS 界面构建的，后面详细介绍。\n\nFoundation 框架给我们框架和 App 开发提供了基础层功能，用于访问基本的数据类型，集合和操作系统服务，包括如下：\n\n- **数据存储和持久化**：NSArray、NSDictionary 以及 NSSet 为任何类的 OC 对象提供存储\n- **文本和字符串处理**：NSCharacterSet 用于 NSString 和 NSScanner 类中字符串各种操作\n- **文件处理**：NSFileManager 类 提供大量用于文件操作检查的方法\n- **日期和日期**：NSDate、NSTimeZone 和 NSCalendar 类\n- **URL 操作**：提供一组类和协议来处理 URL 访问\n- **异常处理**：NSException 类\n\nFoundation 在 JS 里面可以假想成一个原生的公用 \bUtil 库，But 没有...\n\n### 开始之前\n\nOC 中`@`是做什么的 ？\n\n- 通常字符串前面会加一个`@`，用来将一个 C 语言的字符串转化为 OC 中的字符串对象 NSString\n- `@`符号 OC 中大部分的关键字都是以`@`开头的,比如 `@interface`,`@implementation`,`@end` `@class`等\n\n很多类之前的 NS 前缀是什么 ?\n\n- **在 OC 里不支持命名空间**，所以只能通过加前缀这种土土的方法来避免命名冲突，所以常常会用 3 个大写字母(2 个的被苹果占了)，可譬如开发者名称、公司名称或者方法名等来区分\n- NS 代表的是 NeXTSTEP，为 NeXT 公司开发的操作系统，NeXT 是 Jobs 在 1985 年离开苹果时候创建的公司名称，后来被收购回来后，很多成果被吸收到 OSX 基础中\n- 类似的还有，CF == Core Foundation；CG == CoreGraphics.frameworks；CA == CoreAnimation.frameworks；UI == UIKit 等表示\n\n### 对象的可变性\n\nOC 中的类可分为**可变**(mutable)类和**不可变**(immutable)类，这里不可变指的是**字符串在内存中占用的存储空间固定,并且存储的内容不能发生变化**，反之可变是指占用空间可不固定，内容可修改；这个和灵活的 JS 是很不一样的，但我更倾向于对数据类型区分可变和不可变，也便于后续的维护和扩展。\n\n对于确定不会改变的类，它只具备应有的属性方法，可变类通过继承原有不变类，再增加可变方法属性即可实现可变。\n\n可变类是不可变类的子类，同时**所有可变类的实例对象可以作为不可变的实例对象来使用**。\n\n### NSString\n\n在 OC 中使用 NSString 来表示字符串，可变 NSMutableString 继承不可变 NSString 类，好比一个字符串链表，可对其进行 **增删改** 操作。\n\n{:class=\"img-zoom\"}\n\n### NSArray\n\n在 OC 中使用 NSArray 来表示数组类，\b 这里需要注意的是它不像 JS 的数组可以存入任何类型，在 NSArray 中只能够存入 OC 对象，同时也是不可变的，假如需要更改数组，需要使用它的子类 NSMutableArray。\n\n{:class=\"img-zoom\"}\n\n通过`arrayWithObjects`方式创建的数组记得在最后一项加上`nil`,所以为了方便更推荐直接使用`@[@\"lnj\", @\"lmj\", @\"jjj\"]`方式创建，但是因为生成的是不可变数组，故在 \bNSMutableArray 中不要这么创建。\n\n很多数组的操作方法和在 JS 中对比大致相同，不过 NSMutableArray 提供了比 JS 中一些更丰富的方法，包括交互两个元素位置这种需要自己写的方法，也即很多时候编写时候可以先查查文档看是否有这个方法，\b 很多时候可以从里面找到。\n\n### NSDictionary\n\n前端同学第一次听到`字典`这个词可能会有些陌生，可以类比 JS 中的 Object, Java 中的 Map，字典中的数据也是通过键值对保存。\n\nNSDictionary 属于不可变字典类，一般创建之后只能用于查询，不能对其进行修改操作，想修改需要使用 NSMutableDictionary 类。\n\n{:class=\"img-zoom\"}\n\n### NSDate\n\nNSDate 可以用来表示时间, 用来进行一些常见的日期时间的处理，它的使用方式和 JS 的 Date 也是很相似的,`[NSDate date]` 返回的就是当前时间，但是在格式化日期时间上面 Foundation 处理比 js 要优雅很多，直接调用其内置方法即可。\n\n通过和 **NSDateFormatter 类配合使用可以格式化日期**，`stringFromDate`用于 NSDate 转 NSString，`dateFromString`用于 NSString 转 NSData:\n\n```objective-c\n//NSDate 转 NSString\nNSDate *now = [NSDate date];\nNSDateFormatter*formatter = [[NSDateFormatter alloc] init];\nformatter.dateFormat = @\"yyyy-MM-dd HH:mm:ss\";\nNSString *str = [formatter stringFromDate:now];\nNSLog(@\"%@\", str);\n\n// NSString 转 NS\bDate\nNSString *str = @\"2018-02-08 11:53:12\";\nNSDateFormatter*formatter = [[NSDateFormatter alloc] init];\nformatter.dateFormat = @\"yyyy-MM-dd HH:mm:ss\";\nNSDate *date = [formatter dateFromString:str];\nNSLog(@\"%@\", date);\n```\n\n假如想在时间日期上面处理更复杂的内容，还**可以借助 NSCalendar 类丰富我们的处理**：\n\n```objective-c\nNSDate *date = [NSDate date];\nNSCalendar*calendar = [NSCalendar currentCalendar];\n// 利用日历对象获取年月日时分秒\nNSCalendarUnit type = NSCalendarUnitYear\n | NSCalendarUnitMonth\n | NSCalendarUnitDay\n | NSCalendarUnitHour\n | NSCalendarUnitMinute\n | NSCalendarUnitSecond;\n// cmps 包括 year、month、day、hour、minute、second 属性\nNSDateComponents *cmps = [calendar components:type fromDate:date];\n```\n\n比较日期,可以直接使用如下方法：\n\n```objective-c\n\n- (NSDateComponents *)components:(NSCalendarUnit)unitFlags\nfromDate:(NSDate*)startingDate\n toDate:(NSDate *)resultDate\n options:(NSCalendarOptions)opts;\n```\n\n从上面看，OC 中很多方法都是很长很长的，并且将每一个参数代表的意思也表示出来了，不会出现错误对应的情况。\n\n### NSURL\n\n写前端久了会慢慢觉得 URL 就是一条线上的链接 H5 地址，其实不然，**URL(Uniform Resource Locator)中文意思是统一资源定位符，除了 http 协议之外，还有`https/ftp/file`协议用来访问一个资源**。\n\n在 OC 中，操作 URL 时候应该用专用的 NSURL 类，而**不建议把 URL 当做字符串来手工解析**。\n\n{:class=\"img-zoom\"}\n\n随着后面的升级 \b，原来在 OS 中很多文件输入输出的地方也开始使用 NSURL 了，也即慢慢地将网络当时 OS 中的一部分了。\n\n### NSNumber \\ NSValue \\ NSNULL 包裹类\n\nCocoa Fundation 框架的集合类(NSArray\\NSDictionary\\NSset)中只可以放入对象，前端同学可能开始时候会很不适应，假如想放入 int\\float\\double\\bool 等基础类型，**需要将其包裹成 OC 对象在进行放入**，这里就需要使用 NSNumber 包裹类了，才能间接的将基础类型放入。\n\n```objective-c\n// 直接在前面加入@就可以创建一个 NSNumber 对象型\n@10;\n@10.5;\n@YES;\n@(num);\n\n// NSNumber 类提取基础型\n\n- (char)charValue;\n- (int)intValue;\n- (double)doubleValue;\n- (BOOL)boolValue;\n```\n\n但是对于结构体、指针这种复杂的数据类型，NSNumber 也无法包裹，这里需要使用 NSValue 类，它是 NSNumber 的父类，可以将任意类型包装成对象。\n\n```objective-c\n// 结构体包裹，譬如 NSPoint、NSSize、NSRect\n\n- (NSValue *)valueWithPoint:(NSPoint)point;\n//从 NSValue 对象取出之前包装的结构体\n- (NSPoint)pointValue;\n```\n\n**前面的数组字典中是不能自己放入`nil`的**，因为在里面有`结束`的含义，但是有时候我们又确实需要一个特殊的对象来表示空值，这里就需要 NSNULL 了，可以通过类方法 `+(NSNull *)null` 来定义，同时可以通过`if(obj==[NSNull null])`来判断是否为 NSNull。\n\n实际开发中极少使用 NSNull，而且一般习惯也不会单独判断这个（默认大家都不用），所以用它也会很危险（大多数情况是用 nil，nil 可以接任何消息，但 NSNull 不行，二者特性的区别可能引起 crash）。\n\n## 小结\n\n通过以上文章，最多只能够让大家对 OC 编程有一些了解，谈不上深入，更多的是希望前端对于 H5/Weex 的深入了解和优化不要局限到最上面薄薄的一层，完全可以联系到底层的加载、渲染、图片库、网络库等等来进行优化。\n\n从语言层面来说，OC 和 JS 还是挺有意思的，变量/方法命名的风格正好相反，苹果更加鼓励开发者程序命名尽量使用英文全称并且是尽可能详细，通过看到方法和变量就知道是做啥的，看写得好的 iOS 仿佛看散文一样，譬如 **-(NSArray \\*) componentsSeparatedByString:(NSString )separator;** 分割字符串，在 JS 里面直接通过 str.split() 就解决了，更多前端开发者习惯不长的命名，因为需要从网络下载，尽管压缩工具会做，但大家也习惯短命名来表示。\n由于编译型语言缘故，写 OC 过程中很多错误可以在编译过程就发现，同时运行速度快，同时很多事情苹果都帮开发者做了，包括工程体系，这样其实写 iOS 可发挥的地方没有前端多；反之 JS 为解释性，性能更多依赖于引擎，加上为语言动态，写起来也爽，很多奇淫技巧可使用，加上 Node 的发展，让其可以做很多有趣事情。\n\n**各有优点，喜欢 Web 的快速和开放，也爱 iOS 的优雅体验和统一化**。"}
{"title":"Web 计算机图形学(上)","date":"2017-04-21","language":"zh-CN","summary":"Web前端技术中和图形学挂钩的大致是 CSS3 的动画变换、SVG、Canvas、WebGL 这一些东西，但是前端工程师大多只停留在上层 API 操作方面，对于图形学的原理，譬如 GPU、三维空间、光照、纹理、层次模型可能不是很了解。在研究完 SVG 相关内容后，对底层的一些技术有一些兴趣，加上对这一块属于空白区，故花了几天时间对图形学基本进行学习，记录于此 ...","categories":["Study"],"url":"https://tw93.fun/2017-04-21/web-and-cg.html","markdownUrl":"https://tw93.fun/2017-04-21/web-and-cg.md","translation":{"language":"en-US","title":"Web Computer Graphics (Part 1)","url":"https://tw93.fun/en/2017-04-21/web-and-cg.html","markdownUrl":"https://tw93.fun/en/2017-04-21/web-and-cg.md"},"contentMarkdown":"## 序\n\n来自 vczh 某计算机图形学问题的回答:\n\n> 程序员的三大浪漫：操作系统、图形学、编译原理，学了都是用来给你开眼界的。这些都不是什么你不学就怎么样的课程，而是你想成为大牛，不学不行=\\_,=\n\nWeb 前端技术中和图形学挂钩的大致是 CSS3 的动画变换、SVG、Canvas、WebGL 这一些东西，但是前端工程师大多只停留在上层 API 操作方面，对于图形学的原理，譬如 GPU、图像的表示、图像几何变换的原理、纹理、层次模型等可能不是很了解。\n\n在整理完[SVG 新司机开车指南](https://zhuanlan.zhihu.com/p/25016633)后，对底层的一些技术有一些兴趣，加上对这一块属于空白区，故花了几天时间对图形学基本进行学习，记录于此。\n\n本文主要包括如下内容：\n\n\n\n## GPU\n\n### 概念和历史\n\nGraphics Processing Unit(GPU)，即图形处理器, 是一种专门在个人电脑、工作站、游戏机和一些移动设备上运行绘图运算工作的微处理器。\n\nGPU 相关概念在 20 世纪 70 年代末就已经被提出，使用单片集成电路(monolithic)作为图形芯片，当时就已经被用于视频、游戏、动画方面，可以很快的对几张图片进行合成(也就只有这个功能…)；\n\n到 80 年代末，基于数字信号处理芯片(digital signal processor chip)的 GPU 被研发出来，与前代相比速度更快、功能更强，但是价格很贵；\n\n到 1998 年 NVIDIA 公司宣布 modern GPU 的研发成功，标志着 GPU 研发的历史性突破成为现实。modern GPU 使用晶体管(transistors)进行计算，在微芯片(microchip)中，GPU 所使用的晶体管已经远远超过 CPU。\n\n之后就是一代一代的 modern GPU 被研制出来，且功能、运行速度不断增强。\n\n### GPU VS CPU\n\n可能有人会问，我们已经有 CPU 用来解释计算机指令以及处理计算机软件中的数据了，为什么还要使用 GPU 呢？ 要解释这个可以从 CPU 和 GPU 的结构说起。\n\n\n\n图片来自 NVIDIA CUDA 文档。其中绿色的是计算单元，橙红色的是存储单元，橙黄色的是控制单元。\n\n从上图可以看到，GPU 基于大的吞吐量设计的，采用了数量众多的计算单元和超长的流水线，但只有非常简单的控制逻辑并省去了 Cache，在计算密集型的程序和易于并行的程序运行上有很大的优势；\n\nCPU 基于低延时的设计，有强大的 ALU（算术运算单元），结构上不仅被 Cache 占据了大量空间，而且还有复杂的控制逻辑和诸多优化电路，相比之下计算能力只是 CPU 很小的一部分。\n\nCPU 的缩写是 Central Processing Unit, GPU 是 Graphics Processing Unit，表面可以理解为一个是公交司机，另外一个是专车司机，但是其实 GPU 相比 CPU 工作技术含量要低，用于计算量大、相比 CPU 技术含量低、重复很多次的工作。有人把 CPU 比作老教授，将 GPU 比作小学生，教授处理复杂任务的能力是碾压小学生的，但是对于没那么复杂的任务，还是顶不住人多的(有一种黑的味道…\n\n汇总起来就是这样：\n\n\n\n### 前端中的硬件加速\n\n关于前端中的硬件加速其实是创建一个 Composited Layer 来开启 GPU 硬件加速，通过 GPU 进行渲染，解放 CPU，创建 Composited Layer 具体有如下方法：\n\n- 3D 或透视变换(perspective transform)CSS 属性.\n- 使用视频加速解码的\\![](\"https://tw93.fun/images/SVG.png\")
\n\n## 一、简介\n\n### 定义\n\nSVG（Scalable Vector Graphics）是可缩放矢量图形的缩写，基于可扩展标记语言XML来描述二维矢量图形的一种图形格式，由W3C制定，是一个开放标准。\n\n### 特点\n\n现在我们可以使用PNG、JPG来展示静态的图片，使用CSS3、JS或者挫一点的GIF来表示动画，厉害一点我们可以使用Canvas来绘图，那么为什么还要使用SVG呢？\n\n* 和PNG、GIF比较起来，**文件体积更小，且可压缩性强；**\n* 由于采用XML描述，可以**轻易的被读取和修改**，描述性更强；\n* 在放大或改变尺寸的情况下其图形质量不会有所损失，与分辨率无关，是**可伸缩**的；\n* SVG是面向未来 (W3C 标准)的，同时浏览器兼容性好；\n* 使用CSS 和 JS能很**方便的进行控制，**同时可以很轻易地描述路径动画；\n* 和Canvas相比\n * Canvas基于像素，提供2D绘制函数，是一种HTML元素类型，依赖于HTML，只能通过脚本来绘制图形，Canvas提供的功能比较原始，适合像素处理，动态渲染和大数据量绘制的应用场景；\n * SVG为矢量，提供一系列图形元素（Rect, Path, Circle, Line …），还有完整的动画，事件机制，本身可以独立使用，也可以嵌入到HTML中，SVG很早就成为了国际标准，功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景;\n\n### Demo\n\n使用SVG可以做出什么比较好玩的东西呢？\n\n![](\"https://tw93.fun/images/loading.gif\")
\n\n上周团队有一个小的hackthon，就是通过代码来画这个Loading GIF，然后就边学边用SVG写了一个相同的loadng，体积从之前GIF的33KB变成了864B的SVG，详细见下面：\n\n{::nomarkdown}\nSee the Pen Loading Animation by Tw93 (@tw93) on CodePen.
\n\n{:/nomarkdown}\n\n另外一些有趣的SVG可以查看[30 Awesome SVG Animation For Your Inspiration](http://www.hongkiat.com/blog/svg-animations/){:target=\"_blank\"}这里。\n\n## 二、坐标定位\n\n学习SVG语法之前，我们可以来了解下SVG的**坐标定位，**这种坐标系统和我们小时候学习的绘图坐标是相反的，但是在HTML中都是用如下方式定位。即**以页面的左上角为(0,0)坐标点，坐标以像素为单位，x轴正方向是向右，y轴正方向是向下**。\n\n![](\"https://tw93.fun/images/position.png\")
\n\n## 三、元素\n\n### 基础形状\n\nSVG中提供了很多基础元素可以用来绘制基础的形状，譬如矩形、圆形、椭圆、多边形、折线、线条、路径等，同时可以将这些基础形状组合绘制出复杂的图像。\n\n![](\"https://tw93.fun/images/svgshape.png\")
\n\n以上基础形状的展示效果可以通过这些代码表示出来，详细见下：\n\n{::nomarkdown}\nSee the Pen SVG Basic_Shapes by Tw93 (@tw93) on CodePen.
\n\n{:/nomarkdown}\n\n### 其他重要元素\n\n* **svg**：SVG的根元素，并且可以相互嵌套；\n* **g**：用来将SVG中的元素进行分组操作，分组后可以看成一个单独的形状，统一进行转换，同时g元素的样式可以被子元素继承，但是它没有X,Y属性，不过可以通过transform来移动它；\n* **def**：用于定义在SVG中可重用的元素，def元素不会直接展示出来，可以通过use元素来引用；\n* **use**：通过它来复用def元素，也包括![](\"https://tw93.fun/images/SVG-animation.png\")
\n\n动画有很多地方都很新鲜，大家可以多多尝试。\n\n{::nomarkdown}\nSee the Pen SVG animation by Tw93 (@tw93) on CodePen.
\n\n{:/nomarkdown}\n\n## 六、使用方式\n\n我们可以使用如下4种常用的方式来加载我们的SVG，此处可以将svg转换成base64的方式。\n\n### 通过Img标签\n\n```html\n![\"Hello](\"tw93.svg\")
\n```\n\n### 通过CSS background\n\n```css\n.logo {\n background: url(\"data:image/svg+xml;base64,[data]\");\n}\n```\n\n### 通过object\n\n```html\n\n```\n\n### 直接内置到Html中\n\n```html\n\n```\n\n前三种方式常用于SVG图片已经定型，并且改动很少的情况，通过独立的SVG文件更好进行管理，同时可以减少HTML元素；内置的方式常用于SVG需要常修改或者还没有确定的情况，更加变化修改和维护。\n\n## 七、优化和工具\n\n### SVGO\n\n> SVG Optimizer is a Nodejs-based tool for optimizing SVG vector graphics files.\n\nSVGO一个比较厉害的压缩优化SVG的工具，可以将我们编写的SVG中的无用信息，同时对代码进行压缩，项目地址：[https://github.com/svg/svgo](https://github.com/svg/svgo){:target=\"_blank\"}。\n\n![](\"https://tw93.fun/images/Jietu20170126-180043.jpg\")
\n\n### SVGOMG\n\nSVGOMG是SVGO的可视化界面工具，操作起来很方便，同时还提供了一些其他有用的功能，展示地址：[SVGOMG - SVGO's Missing GUI](https://jakearchibald.github.io/svgomg/){:target=\"_blank\"}\n\n![](\"https://tw93.fun/images/Jietu20170126-173506.jpg\")
\n\n### Snap.svg\n\n> The JavaScript SVG library for the modern web.\n\nSnap.svg是一个可以使你操纵SVG资源和jQuery操作DOM一样简单的类库，可以写出更加复杂的SVG效果，同时文档超级齐全，推荐给想深入了解的同学，项目地址：[Snap.svg - Home](http://snapsvg.io/){:target=\"_blank\"}，下图就是使用Snap.svg来实现的。\n\n{::nomarkdown}\nSee the Pen Interactive Illustration via Snap by Tw93 (@tw93) on CodePen.
\n\n{:/nomarkdown}\n\n### Convert image to the SVG format\n\n我们可以通过这个转换平台，将普通图片转成SVG的格式，但是此处转换可能结果不是我们想要的，但是可以将其当做初成品，在此基础上在进行调整优化，最终实现SVG的转换。平台地址：[http://image.online-convert.com/convert-to-svg](http://image.online-convert.com/convert-to-svg){:target=\"_blank\"}\n\n完，欢迎大家指教和讨论。"} {"title":"Hello Weex","date":"2017-01-06","language":"zh-CN","summary":"本周给部门同学分享了《Hello Weex》这个 Topic，现整理成文字版本，分享给关注 Weex 的同学，主要涉及 Module && Component、Weex Architecture、 Weex Others ...","categories":["Share"],"url":"https://tw93.fun/2017-01-06/Hello-Weex.html","markdownUrl":"https://tw93.fun/2017-01-06/Hello-Weex.md","translation":{"language":"en-US","title":"Hello Weex","url":"https://tw93.fun/en/2017-01-06/Hello-Weex.html","markdownUrl":"https://tw93.fun/en/2017-01-06/Hello-Weex.md"},"contentMarkdown":"![](\"http://img.alicdn.com/tfs/TB1qlHxPXXXXXaFaXXXXXXXXXXX-2880-1800.jpg\")
\n\n本周给部门同学分享了《Hello Weex》这个 Topic，现整理成文字版本，分享给关注 Weex 的同学，主要涉及：\n\n1. Module && Component\n2. Weex Architecture\n3. Weex Others\n\n*为了确保信息保密，已经将一些其他信息去除，请谅解，*分享开始。\n\n## **Module && Component**\n\nModule 和 Component 相信有些同学区分不清楚，通过 google 搜索得到如下两个解释：\n\n> Module: An implementation unit of software that provides a coherent set of responsibilities.\n> Component:A component is a reusable building block that can be combined with other components in the same or other computers in a distributed network to form an application.\n\n![](\"http://img.alicdn.com/tfs/TB1T6zwPXXXXXa2aXXXXXXXXXXX-440-317.png\")
\n\n大致意思是说，Module 是指提供一组连贯的职责的软件的实现单元；Component 是可重复使用的程序构建块，它可以与分布式网络中相同或其他计算机中的其他组件相结合，形成应用程序。\n\n以上的解释更加偏向计算机科学层面。\n\n[@贺师俊](https://www.zhihu.com/people/3ec3b166992a5a90a1083945d2490d38)在[关于前端开发中“模块”和“组件”概念的思考 · Issue #21 · hax/hax.github.com\\*\\*](https://github.com/hax/hax.github.com/issues/21)这篇文章归纳下大概是如下这样：\n\nModule 是指编程语言所提供的代码组织机制，利用此机制可将程序拆解为独立且通用的代码单元。**偏向静态的代码结构，Module 更加强调职责**。\n\nComponent 指功能单元，其意义偏向运行时的结构，并有更复杂的控制，**核心意义在于复用**，相对于 Module 对依赖性有更高的要求。\n\n那么在 Weex 中呢，Module 和 Component 具体是什么呢？可以先看下 Weex 中 Module 和 Component 所包含的东西。\n\n**Module 是一组能被 JS Framework 调用的 API. 其中的一些能以异步的方式调用 JS Framework。**\n\n![](\"//img.alicdn.com/tfs/TB10Qn_PXXXXXXFXXXXXXXXXXXX-1172-458.png\")
\n\n**Component 是指在屏幕内可见，有特定行为，能被配置不同的属性和样式，能响应用户交互。**\n\n![](\"//img.alicdn.com/tfs/TB1NvfQPXXXXXcLXFXXXXXXXXXX-1322-766.png\")
\n\n## **Weex Architecture**\n\n官网是这样描述 Weex 为*\"A framework for building Mobile cross-platform UI\"，*一款轻量级的移动端跨平台动态性技术解决方案，其实说的通俗点就是 Vue-Native。\n\n相信对 Weex 有过关注的同学应该都见过下面这个 Weex 架构图。\n\n![](\"//img.alicdn.com/tfs/TB1EITwPXXXXXaCaXXXXXXXXXXX-852-566.png\")
\n\n看图说话是这样的：\n\n1. weex-toolkit 中的 transform 工具将我们所编写的.we 文件转换成 JS Bundle，然后将 JS Bundle 部署到 Server。\n2. Weex SDK 中的 JS Framework 获取到 JS Bundle 并执行，对其进行实例初始化工作，同时进行数据绑定、模板编译，同时提供 callNative 和 callJS 方法。\n3. JS Framework 和 native 通过 callNative 和 callJS 这两个方法进行通信，共同依赖于一份相同的 JSON 配置表（此次可以联想到 RN 的实现原理）\n\n**Transform 所做的工作**其实是将 DSL 转成类 JSON 树形结构，并汇总结合成一 JavaScript AMD 模块，便于后续过程中 JS Framework 的处理，可以从如下图看到 transform 所做的工作：\n\n![](\"//img.alicdn.com/tfs/TB1_hLfPXXXXXbgaVXXXXXXXXXX-2880-1800.jpg\")
\n\n以上的左边部分其实就是一个 DSL，一种领域特定语言，可以直接使用其对象领域中的概念，集中描述“想要做到什么”（What）的部分，而不必对“如何做到”（How）进行描述。\n\n> A domain-specific language (DSL) is a computer language specialized to a particular application domain.\n\n**JS Framework** 初始化一个实例涉及如下过程，详细见[**vanilla/index.js**](https://link.zhihu.com/?target=https%3A//github.com/alibaba/weex/blob/master/html5/vanilla/index.js)\n\n![](\"//img.alicdn.com/tfs/TB1CjTtPXXXXXa0apXXXXXXXXXX-1268-630.png\")
\n\n看到这里的人一定是爱学习的.....\n\n![](\"//img.alicdn.com/tfs/TB1Hc6BPXXXXXa1aXXXXXXXXXXX-400-361.png\")
\n\n## **Weex Others**\n\n**1. Why not use scroller ？**\n\n为什么不推荐使用 scroller 呢？Native 的同学肯定知道 Android 中的 ScrollView 和 Ios 中的 UIScrollView 这两个东西，详细看图：\n\n![](\"//img.alicdn.com/tfs/TB1dgbFPXXXXXbDXVXXXXXXXXXX-1344-516.png\")
\n\n可以把 scroller 里面的东西想象成一个大的子 View，如果列表过长，可想而知首屏的渲染完成和界面可操作需要等到将所有列表加载完成后才能使用，没有内存回收，无疑会对性能和体验造成一定影响。\n\n**2. Why use list ？**\n\n为什么要使用 list 呢？原因是此 component 只渲染可见区域，同时可以进行内存复用。\n\n![](\"//img.alicdn.com/tfs/TB1ObPUPXXXXXasXFXXXXXXXXXX-1168-824.png\")
\n\n假如还是不是很好理解，可以看看 Ios 中 UITableView 的原理图：\n\n![](\"//img.alicdn.com/tfs/TB1eSL4PXXXXXaPXXXXXXXXXXXX-1914-1485.jpg\")
\n\n**UItableView 控件使用 cell 来展示数据。一个 cell 对应一个 row，但是 cell 和 row 不完全相同。首先 cell 是一个 view，cell 的数量是由在某一刻可以看到的 row（行）的数量决定的。当一行数据被往上移动移出屏幕不可见后，cell 会被重复利用，接着用来展示新出现在屏幕中的那些行数据。**\n\nlist 只适合垂直长列表的滚动场景，但是假如需要使用横向滚动就必须使用 scroller 了。\n\n**3. Weex App**\n\nWeex 现在也可以像 RN 那样生成 APP 了，详细可以见[**weexteam/weex-hackernews**](https://github.com/weexteam/weex-hackernews)，以下是我的运行结果，真正做到了一份代码多处运行。\n\n![](\"//img.alicdn.com/tfs/TB1cpfCPXXXXXbWaXXXXXXXXXXX-2822-1708.jpg\")
\n\n**4. Weex-x**\n\n写 RN 的人可能会嘲笑写 Weex 的，“看你怎么搞复杂数据管理的东西？👹👹”，RN 的开发者可以通过 Redux 来实现 state 的良好管理，weex 其实也可以的，试试[**Jinjiang/weex-x**](https://link.zhihu.com/?target=https%3A//github.com/Jinjiang/weex-x)吧，可以从如下的 example 中看到对于的数据流管理。\n\n```javascript\nimport { Store } in 'weex-x'\nconst store = new Store({\n state: { firstName: 'Jinjiang', lastName: 'ZHAO' },\n getters: { fullName: state => `${state.firstName} ${state.lastName}` },\n mutations: {\n setFirstName (state, name) {\n state.firstName = name\n },\n setLastName (state, name) {\n state.lastName = name.toUpperCase()\n }\n },\n actions: {\n setFirstName: ({ commit }, payload) => commit('setFirstName', payload),\n setLastName: ({ commit }, payload) => commit('setLastName', payload),\n setFullName({ commit }, payload) {\n const result = payload.split(' ', 2)\n commit('setFirstName', result[0])\n commit('setLastName', result[1])\n }\n }\n})\n```\n\n**5. Weex Vue 2.0****很期待..........**\n\n**完，有描述不对或者不清楚的地方欢迎大家指出。**"}
{"title":"Generators and Channels in JavaScript","date":"2016-09-20","language":"zh-CN","summary":"以下这篇文章是对 Generator 和 Channel 的一个介绍，如果你对 Promise，Generator，Coroutine 和 Channel 有过了解，可以直接跳到 Using Generators and Channels with React 这部分，虽然接下来这些案例可能不是很适合真实的项目环境，但是它可以看成一个起点，尝试通过这种方法来实践可能出现的地方 ...","categories":["Study"],"url":"https://tw93.fun/2016-09-20/generators-and-channels-in-javascript.html","markdownUrl":"https://tw93.fun/2016-09-20/generators-and-channels-in-javascript.md","translation":{"language":"en-US","title":"Generators and Channels in JavaScript","url":"https://tw93.fun/en/2016-09-20/generators-and-channels-in-javascript.html","markdownUrl":"https://tw93.fun/en/2016-09-20/generators-and-channels-in-javascript.md"},"contentMarkdown":"\n\n原文来自：[Generators and Channels in JavaScript](https://medium.com/javascript-inside/generators-and-channels-in-javascript-594f2cf9c16e#.pvgt62ocb)\n\n### 简介\n\n以下这篇文章是对 Generator 和 Channel 的一个介绍，如果你对 Promise，Generator，Coroutine 和 Channel 有过了解，可以直接跳到 Using Generators and Channels with React 这部分，接下来这些代码可能不能直接用于实际生产环境，但是它应该被看成一个起点，可以尝试把这种方案用在可以用到的地方。\n\n稍微花点时间看看这个 listen 函数。\n```javascript\nconst listen = (el, type) => {\n const ch = chan()\n el.addEventListener(type, e => putAsync(ch, e))\n return ch\n}\n```\n\n它会将每个在 Dom 元素上面的事件转换一个 Channel，我们可以从这个基础点开始。\n\n### Why Generators and Channels?\n\n在我们学习 Generator，Coroutine 和 Channel 之前，先了解下常规的 Promise。\n```javascript\nfunction getUsers() {\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n resolve({\n users: [{\n id: 1,\n name: 'test'\n }]\n })\n }, 1000)\n })\n}\n```\n\n当 getUsers 函数成功时候会返回一个 Promise 对象，Promise 的 resolves 会携带着必要的数据。同时我们能很好的处理超过一个 Promise 的情况，或者一个 Promise 依赖于另外一个 Promise 和一个操作需要所有的 Promise 一起运行才能解决问题的情况，以上这两种情况，其实标准的 Promise 实现就可以覆盖到。第一种链式情况可以使用 Promise 的 then 实现，后一种可以使用 Promise.all 来实现。\n\nPromise 可以被看成是回调（回调地狱）的一种更加简洁的替换方案，假如你不清楚什么是回调地狱，可以看看下面的代码。\n```javascript\nasyncCallOne(() => {\n asyncCallTwo(() => {\n asyncCallThree(() => {\n asyncCallFour(() => {\n asyncCallFive(() => {\n // do something here...\n })\n })\n })\n })\n})\n```\n\n当我们处理不是很复杂代码的时候用嵌套函数看起来还不错，但是嵌套代码不利于扩展和维护，这里有一种更好的方式从一开始就可以避免回调地狱，就是使用 Promise，它可以有效地避免回调嵌套，还可以更好的处理异常。\n```javascript\nasyncCallOne(() => { // do some something... } )\n .then(asyncCallTwo)\n .then(asyncCallThree)\n .then(asyncCallFour)\n .then(asyncCallFive)\n .catch(() => {\n // handle any errors that happened a long the way\n })\n```\n\n在运行所有的异步函数后再来使用 Then 也是可以的。\n```javascript\nPromise.all([\n asyncCallOne,\n asyncCallTwo,\n asyncCallThree\n ]).then(values => {\n // do something with the values...\n });\n```\n\n现在我们已经复习了一下 Callback 和 Promise 的基本用法，接下来可以介绍下 ES6 中的 Generator。\n\n### Generator\n\n在我们讲 what,why,how 之前，我们可以先看看 Generator 简短定义。\n\n> “Generators are functions that can be paused and resumed, which enables a variety of applications.”\n\n[http://www.2ality.com/2015/03/es6-generators.html](http://www.2ality.com/2015/03/es6-generators.html)\n\n为了快速的总结 Generator，它们可以使我们通过调用在一个迭代器对象上面调用 yield 和通过 next 获取到值生成一个值的序列。\n\n这一小段很基础的代码可以用来示范怎么使用 Generator。\n```javascript\nfunction* getNumbers() {\n yield 1\n yield 5\n yield 10\n}\n// retrieving\nconst getThoseNumbers = getNumbers()\nconsole.log(getThoseNumbers.next()) // {value:1, done:false}\nconsole.log(getThoseNumbers.next()) // {value:5, done:false}\nconsole.log(getThoseNumbers.next()) // {value:10, done:false}\nconsole.log(getThoseNumbers.next()) // {value:undefined, done:true}\n```\n\n我们可以通过 Generator 来做迭代，也可以用它们用来 observe 数据，同时也很适合 lazy evaluation 和 control flow。\n\n这儿有一组关于如何从 Generator 获取值的例子，最后一个还展示了如何通过 reduce 获取数据。\n```javascript\n// iterate\nfor (let i of getNumbers()) {\nconsole.log(i) // 1 5 10\n}\n// destructering\nlet [a, b, c] = getNumbers()\nconsole.log( a, b, c) // 1 5 10\n// spread operator\nlet spreaded = [...getNumbers()]\nconsole.log(spreaded) // [1, 5, 10]\n// even works with reduce\n// Ramda reduce for example\nconst reducing = reduce((xs, x) => [...xs, x], [], getNumbers())\nconsole.log(reducing) // [1, 5, 10]\n```\n\n此外 Generator 可以让我们通过 next 传递数据，比较奇葩的是第一个 next 只会开启这个迭代，第二个 next 才可以取到正常的值，此例子可以很好说明地上面问题。\n```javascript\nfunction\\* setGetNumbers() {\nconst input = yield\nyield input\n}\nconst setThoseNumbers = setGetNumbers()\nconsole.log(setThoseNumbers.next(1)) //{value:undefined, done:false}\nconsole.log(setThoseNumbers.next(2)) //{value: 2, done: false}\nconsole.log(setThoseNumbers.next()) //{value: undefined, done: true}\n```\n\n从上面的输出我们可以看到，第一个 next 是可以忽略的，仅仅从第二个 next 开始考虑就好。\n\n终止一个 Generator 是很简单的，只需要在 Generator 里面定义一个 return 就好。同时，这里还有一个很好的特性，Generator 函数可以调用其他的 Generator 函数。\n\n```javascript\nfunction*callee() {\n yield 1\n}\nfunction* caller() {\n while (true) {\n yield* callee();\n }\n}\nconst callerCallee = caller()\nconsole.log(callerCallee.next()) // {value: 1, done: false}\nconsole.log(callerCallee.next()) // {value: 1, done: false}\nconsole.log(callerCallee.next()) // {value: 1, done: false}\nconsole.log(callerCallee.next()) // {value: 1, done: false}\n```\n\n现在大家应该对 Generator 有一个基础的理解了。\n关于 ES6 中 Generator 更详细的介绍，可以阅读 [Axel Rauschmayer](https://medium.com/u/7fab51e62203)这篇更全面的文章[ES6 Generators in depth](http://www.2ality.com/2015/03/es6-generators.html)。\n\n### Generator, Promise and Coroutine\n\n现在我们已经基本了解 Promise 和 Generator 了，下面我们看看如何将这两者结合起来使用。\n```javascript\nfunction fetchUsers() {\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n resolve({\n users: [{id: 1, title: 'test'}]\n })\n }, 1000)\n })\n}\nfunction* getData() {\n const data = yield fetchUsers()\n yield data\n}\n```\n\n显而易见，我们需要一些机制来确保不用手动来运行循环。这就是 Coroutine 发挥作用的地方了，它们可以使我们写能够处理异步的行为，包括 Promise,Thunk 或者其它的 operate，[co](https://github.com/tj/co)就是处理这种情况的一个典型的库。\n\n接下来的代码是对 co 的一种很简单粗糙的实现，但是我们可以从这里看到 co 函数是怎么运行的。\n```javascript\nfunction co(fn) {\n const obj = fn()\n return new Promise((resolve, reject) => {\n const run = result => {\n const { value, done } = obj.next(result)\n // check if done and return if finished\n if (done) return resolve(result)\n // retrieve the promise and call next with the result\n value\n .then(res => run(res))\n .catch(err => obj.throw(err))\n }\n // start\n run()\n })\n}\n```\n\n接下来，我们使用简化 co 函数来实现之前 fetch 数据的那个例子。\n```javascript\nfunction fetchUsers() {\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n resolve({\n users: [{id: 1, name: 'test'}]\n })\n }, 1000)\n })\n}\n\nfunction fetchOtherData() {\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n resolve({\n other: [{id: 2, title: 'other data'}]\n })\n }, 1000)\n })\n}\n\nconst get = co(function* getData() {\n const getAll = yield Promise.all([fetchOtherData(), fetchUsers()])\n // do something else...\n return getAll\n}).then(data => console.log(data))\n```\n\n我们可以看到 Coroutine 能让我们写那种看起来是同步的代码来实现异步，如下\n```javascript\nconst get = co(function* getData() {\n const otherData = yield fetchOtherData()\n console.log('fetched other data: ', otherData)\n const users = yield fetchUsers(otherData)\n console.log('fetched users: ', users)\n return users\n}).then(data => console.log(data))\n```\n\n从上面我们可以看到，通过 Coroutine 这种方式可以用来合并 Generator 和 Promise。这样看起来不错，其实还有一种更好的实现方案，就是使用 Channel 来合并 Generator。\n\n### Generator and Channel\n\n> Don’t combine Generators with Promises, combine them with Channels! -- David Nolen\n\n[(http://swannodette.github.io/2013/08/24/es6-generators-and-csp)](http://swannodette.github.io/2013/08/24/es6-generators-and-csp)\n\n在之前所以处理异步的方法大家基本都知道（比如神奇的 setTimeout），有趣的是 channel 像是事后才给 js 加上去的。Clojure 通过 core.async 以及 Go 通过 goroutines 已经对 channels 提供支持有一段时间了。\n\n这里有很多关于这方面的文章，其中最显著的一篇是 James Longster 的[Taming the Asynchronous Beast with CSP Channels in JavaScript](http://jlongster.com/Taming-the-Asynchronous-Beast-with-CSP-in-JavaScript)这篇文章。通过这篇文章可以对 Channel 有一个更深的理解。\n\n这是我直接从 James Longster 那篇文章中摘抄的一句话：\n\n> Typically channels are useful for coordinating truly concurrent tasks that might run at the same time on separate threads. They are actually just as useful in a single-threaded environment because they solve a more general problem of coordinating anything asynchronous, which is everything in JavaScript.--James Longster\n\n[Taming the Asynchronous Beast with CSP in JavaScript](http://jlongster.com/Taming-the-Asynchronous-Beast-with-CSP-in-JavaScript)\n\n当你阅读 Channel 这个词的时候，你也会经常会看到 CSP ，它的意思是指 Communicating Sequential Processes，我推荐读 David Nolen 的[Communicating Sequential Processes](http://swannodette.github.io/2013/07/12/communicating-sequential-processes)这篇文章对 CSP 有一个更好的理解。\n\n我们将会使用[js-csp](https://github.com/ubolonton/js-csp)这个库来演示使用 Channel 对我们到底有什么好处。\n\n通过 Channel 来进行进程通信，典型的 Channel 常常会提供一组函数，但是到目前为止，我们只需知道 put 和 take 的用法就好，入栈使用 push，通过 take 有一个过程在另一边等待。很快我们将会看到更清晰的细节，首先我们需要考虑的是我们有一个 channel 和 consumer，如下是 js-csp 文档中的简化版例子：\n\n```javascript\nconst ch = csp.chan(1);\nyield csp.put(ch, 42);\nyield csp.take(ch); // 42\nch.close()\nyield csp.take(ch); // csp.CLOSED\n```\n\n我们可以创建一个缓冲区大小为 1 的 Channel，接着我们通过前缀 yield 调用 put，将 42 这个值传递到 Channel。接着我们从 Channel 中 take 这个值并最后关闭 Channel，在 Channel 已经关闭后，接下来 yield 不会产生影响。\n\n下面这个例子是直接从 js-csp 文档中拿过来的。\n```javascript\nvar ch = go(function*(x) {\n yield timeout(1000);\n return x;\n}, [42]);\nconsole.log((yield take(ch)));\n```\n\n通过调用 go 我们生成了一个 Goroutine，它会立即返回一个 Channel，使我们通过 take 从 Channel 获取任何值。\n\n为了了解这一切如何和 UI 相搭配，可以看看下面这个 listen 函数。\n```javascript\nconst listen = (el, type) => {\n const ch = chan()\n el.addEventListener(type, e => putAsync(ch, e))\n return ch\n}\n```\n\n我们可以通过使用 listen 将一个元素转换成 channel。可以通过在 channel 上面使用 take 来监听所有的改动。无论我们在 input 框里面输入什么，我们可以通过 channel 获取到改动并更新到显示元素上。\n\n```javascript\ngo(function*() {\n const input = document.getElementById('title')\n const display = document.getElementById('display')\n const ch = listen(input, 'keyup')\n while(true) {\n const e = yield take(ch)\n display.innerHTML = `From Input: ${e.target.value}`\n }\n})\n```\n\n### Using Generators and Channels with React\n\n到目前为止，已经将基础部分介绍完毕，同时对为什么 Channel 和 Generator 在 Javascript 中有意义有一个更深的理解，我们可以将学到 Channel 和 Generator 用到实际代码情景中。\n\n一个经典的例子就是计数器组件，虽然很基础，只能够增加和减少数字并将当前数字显示出来，但是通过这个可以帮助我们对 React 渲染 Component 获得更清晰的认识。\n\n你可以从 [Stefan Oestreicher](https://medium.com/u/749b96458fd8)的[React/Elm-Architecturezh](https://github.com/steos/elmar.js/blob/master/src/examples/SimpleCounter.js)中获得完整代码。\n\nAppStart 用来处理顶层 React Component 的初始化渲染，和开启一个用来等待任何在 AppChannel 上的更新的 Goroutine。\n\nAppChannel 是一个没有任何缓冲或其他特殊性的函数。所以我们可以做的是一旦有一个 event 引发了一个 action 变化，我们在 AppChannel 使用 put 方法都获取到。\n\n```javascript\n// basic example demonstrating the power of channels and generators\nimport React from 'react'\nimport { render } from 'react-dom'\nimport { chan, go, take, put, putAsync } from 'js-csp'\nimport { curry } from 'ramda'\nimport Counter from './Counter'\n// helper\nconst createRender = curry((node, app) => render(app, node))\n// create one channel for now\nconst AppChannel = chan()\nconst doRender = createRender(document.getElementById('mountNode'))\n// let start\nconst AppStart = ({ init, update, view }) => {\n let model = 0\n const signal = action => () => {\n model = update(action, model)\n putAsync(AppChannel, model)\n }\n // initial render...\n putAsync(AppChannel, init(model))\n go(function* () {\n while(true) {\n doRender(view(signal, yield take(AppChannel)))\n }\n })\n}\n// start\nAppStart(Counter)\n```\n\n现在我们有一个基础的例子已经启动在运行中，还可以在上面做一些复杂的事情，例如 fetch 操作。我们可以创建一个简单列表，可以从其他资源地方 fetch 获取数据，一旦 state 发生变化后，重新渲染结果。为了完成此任务，同时为了更好的体验将传递一个 loading 信息给用户。\n\n上面这个需求，我们需要单独的处理 Action 和 Channel，同时也需要在一个干净的、良好组织下的代码下处理其一些额外的情况。\n\n#### Building the App…\n\n实际上我们需要定义一个函数来处理 fetch 操作和通知 loading 什么时候开启和结束。\n\n```javascript\nconst getItems = () => {\n go(function*() {\n yield put(isLoading, true)\n const fetchedItems = yield* fetchItems()\n yield put(items, fetchedItems)\n yield put(isLoading, false)\n })\n}\n```\n\n编写一个创建 Channel 的函数。\n```javascript\nconst createChannel = (action, store) => {\n const ch = chan()\n go(function* () {\n while(true) {\n const value = yield take(ch)\n yield put(AppChannel, action(store.get(), value));\n }\n })\n return ch\n}\n\n// helper function for passing an object and getting channels\nconst createChannels = (actions, store) =>\n mapObjIndexed(fn => createChannel(fn, store), actions)\n```\n\n现在已经有 createChannel 了，我们还需定义一组 Action。\n```javascript\nconst Actions = {\n isLoading: (model, isLoading) =>\n assoc('isLoading', isLoading, model),\n items: (model, items) => assoc('items', items, model),\n addItem: (model, title) =>\n assoc('items',\n [ ...prop('items', model),\n {title, id: getNextId(prop('items', model))}\n ],\n model),\n}\n```\n\n接下来我们写 App 的 Component 部分，这里没什么特殊的，仅仅就是一个 list 和两个 button 和一个 input，第一个 button 用于获取列表数据，另外一个用于添加文本到 input 里。\n```javascript\nconst App = ({ items, isLoading }) => {\n if (isLoading) return (loading...
)\n return (\n![](\"//img.alicdn.com/tfs/TB1HDwhKXXXXXcraXXXXXXXXXXX-1225-1716.png\")
\n\n从上面的MineNode我们可以看出RN中有3个地方可以使用动画：\n\n- 用于创建更精细的交互控制的动画**Animated**；\n- 用于全局的布局动画**LayoutAnimation**；\n- 用于构建**Navigator**不同页面切换的动画；\n\n此篇文章主要是讲**Animated**相关的内容，平时动画中用得最多的也是它，其他两个通过文档可以很容易的使用。\n\n### RN动画的使用\n\n一个**明天不上班的**的动画实现，同时从小变大并且旋转，我们可以从注释中看到RN动画的实现步骤，代码[Tw93 Gist](https://gist.github.com/tw93/c02b2e864aa8e1c9048d17b649f7a2ea)如下：\n\n```javascript\nimport React, {Component} from 'react';\nimport {\n AppRegistry,\n StyleSheet,\n Text,\n View,\n Animated, //使用Animated组件\n Easing, //引入Easing渐变函数\n} from 'react-native';\n\nclass ReactNativeDemo extends Component {\n constructor(props: any) {\n super(props);\n //使用Animated.Value设定初始化值（缩放度，角度等等）\n this.state = {\n bounceValue: new Animated.Value(0),\n rotateValue: new Animated.Value(0),\n };\n }\n\n componentDidMount() {\n //在初始化渲染执行之后立刻调用动画执行函数\n this.startAnimation();\n }\n\n startAnimation() {\n this.state.bounceValue.setValue(0);\n this.state.rotateValue.setValue(0);\n Animated.parallel([\n //通过Animated.spring等函数设定动画参数\n //可选的基本动画类型: spring, decay, timing\n Animated.spring(this.state.bounceValue, {\n toValue: 3, //变化目标值\n friction: 20, //friction 摩擦系数，默认40\n }),\n Animated.timing(this.state.rotateValue, {\n toValue: 1,\n duration: 800,\n easing: Easing.out(Easing.quad),\n }),\n //调用start启动动画,start可以回调一个函数,从而实现动画循环\n ]).start(()=>this.startAnimation());\n }\n\n render() {\n return (\n ![](\"https://tw93.fun/images/flexbox.png\")
\n\n首先我们来分析下这一张图，从第一个子节点可以看到 Flexbox 由 Flex 容器和 Flex 项目组成，容器即父元素，项目即子元素。他们之间的一些关系可以这样来表示：\n\n\n\n这张图可以在接下来的属性分析中用到。\n\n### Flex 容器\n\n#### display:flex\n\n当我们使用 flexbox 布局时候，需要先给父容器的 display 值定位 flex（块级）或者 inline-flex（行内级）。\n\n当使用了这个值以后，伸缩容器会为内容建立新的伸缩格式化上下文（FFC），它的上下文展示效果和 BFC 根元素相同（BFC 特性：浮动不会闯入伸缩容器，且伸缩容器的边界不会与其内容边界叠加）。\n\n伸缩容器不是块容器，因此有些设计用来控制块布局的属性，在伸缩布局中不适用，特别是多栏（column)，float，clear，vertical-align 这些属性。\n\n#### flex-direction\n\n[flex-direction]属性用来控制上图中伸缩容器中**主轴的方向**，同时也决定了伸缩项目的方向。\n\n- flex-direction:row;也是默认值，即主轴的方向和正常的方向一样，从左到右排列。\n- flex-direction:row-reverse;和 row 的方向相反，从右到左排列。\n- flex-direction:column;从上到下排列。\n- flex-direction:column-reverse;从下到上排列。\n 以上只针对 ltr 书写方式，对于 rtl 正好相反了。\n\n网页展示效果如下：\n\n\n\n#### flex-warp\n\n[flex-wrap]属性控制伸缩容器是单行还是多行，也决定了侧轴方向（新的一行的堆放方向）。\n\n- flex-wrap:nowrap;伸缩容器单行显示，默认值；\n- flex-wrap:wrap;伸缩容器多行显示；伸缩项目每一行的排列顺序由上到下依次。\n- flex-wrap:wrap-reverse;伸缩容器多行显示，但是伸缩项目每一行的排列顺序由下到上依次排列。\n\n网页效果见图；\n\n\n\n#### flex-flow\n\n[flex-flow]属性为 flex-direction（主轴方向）和 flex-wrap（侧轴方向）的缩写，两个属性决定了伸缩容器的主轴与侧轴。\n\n- flex-flow:[flex-direction][flex-wrap];默认值为 row nowrap；\n\n举两个栗子：\n\n- flex-flow:row;也是默认值；主轴是行内方向，单行显示，不换行；\n- flex-flow:row-reverse wrap;主轴和行内方向相反，从右到左，项目每一行由上到下排列（侧轴）。\n\n网页效果如下：\n\n\n\n这里大家可以多自己去试试不同的组合。\n\n#### justify-content\n\n[justify-content]用于定义伸缩项目在主轴上面的的对齐方式，当一行上的所有伸缩项目都不能伸缩或可伸缩但是已经达到其最大长度时，这一属性才会对多余的空间进行分配。当项目溢出某一行时，这一属性也会在项目的对齐上施加一些控制。\n\n- justify-content:flex-start;伸缩项目向主轴的起始位置开始对齐，后面的每元素紧挨着前一个元素对齐。\n- justify-content:flex-end;伸缩项目向主轴的结束位置对齐，前面的每一个元素紧挨着后一个元素对齐。\n- justify-content:center;伸缩项目相互对齐并在主轴上面处于居中，并且第一个元素到主轴起点的距离等于最后一个元素到主轴终点的位置。以上 3 中都是“捆绑”在一个分别靠左、靠右、居中对齐。\n- justify-content:space-between;伸缩项目平均的分配在主轴上面，并且第一个元素和主轴的起点紧挨，最后一个元素和主轴上终点紧挨，中间剩下的伸缩项目在确保两两间隔相等的情况下进行平分。\n- justify-content:space-around;伸缩项目平均的分布在主轴上面，并且第一个元素到主轴起点距离和最后一个元素到主轴终点的距离**相等**，且等于中间元素两两的间距的**一半**。完美的平均分配，这个布局在大型应用中很常见。\n\n还是看 demo 理解起来快一点：\n\n\n\n\n\n#### align-items\n\n[align-items]用来定义伸缩项目在侧轴的对齐方式，这类似于[justify-content]属性，但是是另一个方向。（flex-directon 和 flex-wrap 是一对，justify-content 和 align-items 是一对，前者分别定义主轴和侧轴的**方向**，后者分别定义主轴和侧轴中项目的**对齐**方式）。\n\n- align-items:flex-start;伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起点的边。\n- align-items:flex-end;伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边。\n- align-items:center;伸缩项目的外边距在侧轴上居中放置。\n- align-items:baseline;如果伸缩项目的行内轴与侧轴为同一条，则该值与[flex-start]等效。 其它情况下，该值将参与基线对齐。\n- align-items:stretch;伸缩项目拉伸填充整个伸缩容器。此值会使项目的外边距盒的尺寸在遵照「min/max-width/height」属性的限制下尽可能接近所在行的尺寸。\n\n下面 demo 只展示 center 和 stretch 的栗子，其他几个可以参考 flex-start 和 flex-end 那样。\n\n\n\n#### align-content\n\n[align-content]属性可以用来调准伸缩行在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的[justify-content]属性类似。只不过这里元素是以一行为单位。请注意本属性在只有一行的伸缩容器上没有效果。当使用 flex-wrap:wrap 时候多行效果就出来了。\n```css\nalign-content: flex-start || flex-end || center || space-between || space-around || stretch;\n```\n\n- align-content: stretch;默认值,各行将会伸展以占用剩余的空间。\n- 其他可以参考[justify-content]用法。\n\n具体图片来至 w3.org 官方文档；\n\n\n\n太麻烦。写不下去了，摔。\n\n### Flex 项目\n\n终于写到关于伸缩项目的相关属性了，主要是 3 个，order，flex（flex-grow，flex-shrink，flex-basis 的组合），align-self；用来比较多的是前两个。\n\n#### order\n\n有一种用法比较多，想设置一组中有两个元素一个排第一，另外一个排最后，主需要将第一个的 order:-1；另一个为 order:0;这样就好了。\n\n譬如我们想控制一个 container 中有 4 个 box，想 box4 为一个显示，box1 为最后一个显示。只需要\n这样\n```html\n\nSee the Pen Flexbox playground by Tw93 (@tw93) on CodePen.
\n\n{:/nomarkdown}"} {"title":"浅谈面向对象的 JavaScript","date":"2015-06-09","language":"zh-CN","summary":"最近在学习 Ross Harmes/Dustin Diaz 写的《JavaScript 设计模式》，大概将此书看了两遍，很有收获。此书适合于想深入学习JavaScript的同学，用来增加你的内功。能够帮助你增强对JavaScript面向对象的理解，同时学习各种具体的设计模式，懂得应该在什么场合使用这些设计模式，以及如何实现它们，写出更优雅的代码。这篇文章用于总结我的读书笔记 ...","categories":["Study"],"url":"https://tw93.fun/2015-06-09/Talking-about-JavaScript-design-patterns1.html","markdownUrl":"https://tw93.fun/2015-06-09/Talking-about-JavaScript-design-patterns1.md","translation":{"language":"en-US","title":"Brief Talk on Object-Oriented JavaScript","url":"https://tw93.fun/en/2015-06-09/Talking-about-JavaScript-design-patterns1.html","markdownUrl":"https://tw93.fun/en/2015-06-09/Talking-about-JavaScript-design-patterns1.md"},"contentMarkdown":"最近在学习 Ross Harmes/Dustin Diaz 写的[《JavaScript 设计模式》](http://book.douban.com/subject/3329540/){:target=\"_blank\"}，大概将此书看了两遍，很有收获。此书适合于想深入学习 JavaScript 的同学，用来增加你的内功。能够帮助你增强对 JavaScript 面向对象的理解，同时学习各种具体的设计模式，懂得应该在什么场合使用这些设计模式，以及如何实现它们，写出更优雅的代码。这篇文章用于总结我的读书笔记。\n\n#### 富有表现力的 JavaScript\n\n为什么说 JavaScript 是富有表现力的呢？\n\n- JavaScript 的灵活性：它允许你模仿其他语言的编程模式和惯用法，同时也具备自己独特的编程模式和惯用法。这样你可以根据自己的技术背景和喜好选择编写代码的方式。\n- 弱语言类型：定义变量的时候不需要申明其类型，其类型取决于其包含的数据；同时 JavaScript 变量可以根据所赋值改变类型。\n- 函数是一等对象：它们可以存储在变量中，可以作为参数传递给其他函数，可以作为返回值从其他函数传出，还可以在运行时进行构造。同时 JavaScript 中使用匿名函数来创建闭包，保护变量空间。\n- 对象的易变性：JavaScript 中所有对象都是易变的，可以使用一些在大多数语言中不允许的技术，例如为函数增加属性；同时还具备内省的概念，可以在运行时检查对象的属性和方法；而已在 JavaScript 中，任何东西都可以在运行时候修改。\n- 继承：JavaScript 使用的是基于对象的（原型式（prototypal））继承，它可以用了模仿类的继承。\n- JavaScript 中的设计模式：使用原因：1）可维护性，降低模块间的耦合。2）沟通，可以在较高层面上对其进行讨论，而不必涉及过多的细节。3）性能：合适的设计模式可以大幅提高程序的运行速度，并减少传送到客户端的代码量。\n\n#### 接口\n\n接口是面向对象 JavaScript 程序员工具箱中最有用的工具之一。但是 JavaScript 中没有内置创建或者实现接口的方法，也没有内置的方法用于判断一个对象是否实现了与另一个对象相同的一套方法。\n\n**什么是接口呢？**\n\n对于 JavaScript 初学者很少在自己的 js 代码中使用接口，那么到底什么是接口呢？接口提供了一种用以说明一个对象应该具有哪些方法的手段，用来表明方法的语义，但是不规定方法是如何实现的。\n\n**接口的好处是啥呢？**\n\n- 既定的一批对象具有自我描述性，并能促进代码的重用。接口可以告诉一个程序员一个类实现了哪些方法，从而帮助其使用这个类。\n- 接口有助于稳定不同类之间的通信方式，事先知道了接口，就能减少在集成两个对象过程中出现的问题。\n- 使测试和调试变得更加轻松，用于检测类型不匹配，同时还能使代码变得更加稳固。\n\n但是接口并非没有缺点，使用接口在一定程度上面强化了类型的作用，降低了语言的灵活性。由于接口带来额外的方法调用开销，对性能造成一定影响。而且 JavaScript 没有提供对接口的内置支持（JavaScript 中没有 interface 和 implements 关键字），需要去模仿一些其他语言的接口，导致无法强迫其他程序员遵循你定义的接口，这也是我认为接口在使用中存在的最大问题。\n\n**在 JavaScript 中模仿接口**\n\n注释法、属性检查法和鸭式辨形法（把对象的实现方法集作为判断它是不是某个类实例的唯一标准。也就是说如果对象具有与接口定义的方法同名的所有方法，那么就可以认为它实现了这个接口，“像鸭子一样走路并且嘎嘎叫的就是鸭子，_外国程序员真会玩_”）。没有哪种技术是完美的，但三者的结合使用基本上 可以令人满意。\n\n建议采用注释法和鸭式辨形法这两种方法综合使用，我们用注释申明类支持的接口，从而提高代码的可重用性及其文档的完善性。我们还用辅助类 Interface 及其类方法 Interface.ensureImplements 来对对象实现方法进行显示检查。如果对象未能通过检查，这个方法将返回一条错误的消息。\n\n下面是结合使用 Interface 类与注释的实例。\n\n```javascript\n//Interface\nvar Composite=new Interface('Composite',['add','remove','getChild']);\nvar FormItem=new Interface('FormItem',['save']);\n\n// CompositeForm class\nvar CompositeForm=function(id,method,action){\n//implements Composite,FormItem\n ...\n};\n...\n\nfunction addForm(formInstance){\n Interface.ensureImplements(formInstance,Composite,FormItem);\n //如果一个调用的方法没有被执行，函数将会扔出一个错误\n //中断程序的执行\n //只有在检查正确通过后，之后的代码才会被执行\n}\n```\n\n判断在代码总是否使用接口是否划算是最后重要也是最困难的一步，对于小型的、不太费事的项目来说，接口的好处并不明显，只是徒增复杂度而已。你需要自行权衡其利弊。\n\n对于工厂模式、组合模式、装饰者模式、命令模式尤其依赖接口。使用接口使代码耦合度降低，在对代码进行优化和重构时候将获得更大的自由。\n\n#### 封装和信息隐藏\n\n为对象创建私用成员是任何面向对象语言中的最基本和有用的特性之一。通过将一个方法或属性声明为私用，可以让对象的实现细节对其他对象保密以降低对象之间的耦合程度，可以保持数据完整性并对其修改方式加以约束。也即封装是面向对象设计的基石。\n\n封装和信息隐藏之间可以看作同一个概念的两种表达。信息隐藏是目的，而封装则是借以达到这个目的的技术，封装可以定义为对象的内部数据表现形式和实现细节进行隐藏。\n\n**创建对象的基本模式**\nJavaScript 中创建对象的基本模式有 3 中：\n\n- 门户大开型：按照传统类型创建一个类，用一个函数来做其构造器，所有属性和方法都是公开的，可访问的。以下示例是为每个属性增加了取值器和赋值器方法。\n```javascript\n var Book = function(isbn, title, author) {\n this.setIsbn(isbn);\n this.setTitle(title);\n this.setAuthor(author);\n }\n Book.prototype = {\n checkIsbn: function(isbn) {\n ...\n };\n getIsbn = function() {\n return this.isbn;\n },\n setIsbn: function(isbn) {\n if (!this.checkIsbn(isbn)) {\n throw new Error('Book:Invalid ISBN');\n }\n this.isbn = isbn;\n },\n getTitle: function() {\n return this.title;\n },\n setTitle: function(title) {\n this.title = title || 'No title specified';\n },\n getAuthor: function() {\n return this.author;\n },\n setAuthor: function(title) {\n this.author =author || 'No author specified';\n },\n display:function(){\n ...\n }\n };\n ```\n\n- 用命名规范区别私用成员：和本质上面此模式和门户大开型对象创建如出一辙，只不过在一些方法和属性的名称的前面加了下划线表示其私用性而已。\n```javascript\n var Book = function(isbn, title, author) {\n this.setIsbn(isbn);\n this.setTitle(title);\n this.setAuthor(author);\n }\n Book.prototype = {\n checkIsbn: function(isbn) {\n ...\n };\n getIsbn = function() {\n return this._isbn;\n },\n setIsbn: function(isbn) {\n if (!this.checkIsbn(isbn)) {\n throw new Error('Book:Invalid ISBN');\n }\n this.isbn = isbn;\n },\n getTitle: function() {\n return this._title;\n },\n setTitle: function(title) {\n this._title = title || 'No title specified';\n },\n getAuthor: function() {\n return this._author;\n },\n setAuthor: function(title) {\n this._author =author || 'No author specified';\n },\n display:function(){\n ...\n }\n };\n ```\n\n下划线的这种用法表示一个属性（或方法）仅对对象内部使用，直接访问它或者设置它可能会导致意想不到的后果。但是这只是一种约定，只有在遵循时候才有效果。主要适合于非敏感性的内部方法和属性。\n\n- 用闭包实现私用成员：使用闭包可以创建只允许特定函数访问的变量，而且这些变量在这些函数中的各次调用关系依然存在。我么使用 var 来申明这些变量，意味着它们只存在那个构造器中。\n```javascript\nvar Book = function(newIsbn, newTitle, newAuthor) {\n //implements Publication\n //Private attributes\n var isbn, title, author;\n\n //Private method\n function checkIsbn() {\n ...\n }\n\n //privileged methods\n this.getIsbn = function() {\n return isbn;\n };\n this.setIsbn: function(isbn) {\n if (!this.checkIsbn(newIsbn)) {\n throw new Error('Book:Invalid ISBN');\n }\n this.isbn = newIsbn;\n };\n this.getTitle: function() {\n return title;\n };\n this.setTitle: function(title) {\n title = newTitle || 'No title specified';\n };\n this.getAuthor: function() {\n return author;\n };\n this.setAuthor: function(title) {\n this.author = newAuthor || 'No author specified';\n };\n //Constructor code\n this.setIsbn(newIsbn);\n this.setTitle(newTitle);\n this.setAuthor(newAuthor);\n};\n\n//Public,non-privileged methods\nBook.prototype = {\n display: function() {\n ...\n }\n};\n```\n\n需要访问这些变量和函数只需申明在 Book 中即可，这些方法被称为特权方法(privileged method)，因为它们是公开方法，但是能够访问私用属性和方法。为了在外部访问这些特权函数，它们的前面都被加上了关键字 this。\n\n**封装的优缺点**\n\n封装保护了内部数据的完整性。通过将数据的访问限制为取值器和赋值器这两个方法，可以获得对取值和赋值的完全控制；同时封装可以使重构变得更轻松；通过只公开那些在接口中规定的方法，可以弱化模块间的耦合，这是面向对象设计最重要的原则之一。\n\n但是私用方法很难进行测试，因为它们及其内部变量都是私用的，所以在外部很难访问它们；同时封装意味着不得不与复杂的作用链打交道，而这会使错误调试更加困难；同时在 JavaScript 中实现封装很困难，没有对封装提供内置的支持，必须依赖一些其他的技术。\n\n#### 继承\n\n在 JavaScript 中继承是一个非常复杂的话题，比起其他任何面向对象的语言中继承都复杂得多。在太多事其他面向对象语言中，继承只需要一个关键字即可。但是在 JavaScript 中要想达到传承共用成员的目的，需要采取一系列措施。继承可以减少重复性的代码，并且尽量弱化对象之间的耦合。\n\n**类式继承**\n\n首先要做的是创建构造函数。按惯例，其名称就是类名，首字母应该大写。在构造函数中创建实例的属性要使用关键字 this。类的方法被添加到其 prototype 对象中，要创建该类的实例，只需结合关键字 new 调用这个构造函数即可。然后你可以访问所有的实例属性，也可以调用所有的实例方法。 \n```javascript\n/*Class Person*/\nfunction Person(name){\n this.name=name;\n}\nPerson.prototype.getName=function(){\n return this.name\n}\n\nvar reader=new Person('John Smith');\nreader.getName();\n```\n\n创建继承 Person 的类要复杂一些：\n```javascript\n/*Class Author*/\nfunction Author(name,books){\n //Call the superclass's constructor in the scope of this\n Person.call(this.name);\n //add an attribute to Author\n this.books=books;\n}\n\n//set up the prototype chain\nAuthor.prototype=new Person();\n//set the constructor attribute to Author\nAuthor.prototype.constructor=Author;\nAuthor.prototype.getBooks=function(){\n //add a method to Author\n return this.books;\n}\n```\n\n为了让 Author 继承 Person，必须手工将 Author 的 prototype 设置为 Person 的一个实例。最后一个步骤是将 prototype 的 constructor 属性重设为 Author(定义一个构造函数时，其默认的 prototype 对象是一个 Object 类型的实例，其 constructor 属性会自动设置为该构造函数本身。如果手工将其 prototype 设置为另一对象，那么新对象自然不会具有原对象的 constructor 值，所以需要重新设置其 constructor 值)\n\n为了简化类的申明，可以将派生子类的整个过程包装在一个名为**extend**的函数中，它的作用和其他语言中的 extend 关键字类似，即基于一个给定的类结构创建一个新的类。\n\n```javascript\n/*Extend functions.*/\nfunction Extend(subClass,superClass){\n var F=function(){};\n F.prototype=superClass.prototype;\n subClass=prototype=new F();\n subClass.prototype.constructor=subClass;\n}\n```\n这个函数所做的事情和先前我们手工做的一样，它设置了 prototype，然后将其 constructor 重新设为恰当的值，作为一项改进，它添加了一个空函数 F，并将其创建的一个对象实例插入原型链中，这样做可以避免创建超类的新实例。\n使用 extend 函数后，前面那个 Person/Author 例子变成了这个样子：\n```javascript\n/*Class Person*/\nfunction Person(name){\n this.name=name;\n}\nPerson.prototype.getName=function(){\n return this.name\n}\n\n/*Class Author*/\nfunction Author(name,books){\n Person.call(this.name);\n this.books=books;\n}\nextend(Author,Person);\nAuthor.prototype.getBooks=function(){\n return this.books;\n}\n```\n\n**原型式继承**\n\n使用原型式继承时，并不需要用类的对象来定义对象的结构，只需要直接创建一个对象即可。这个对象随后可以被新的对象重用，这得意于原型链查找的工作机制。下面我们使用原型链继承来重新设计 Person 和 Author：\n\n```javascript\n/*Person Prototype Object*/\nvar Person={\n name:'default name',\n getName:function(){\n return this.name;\n }\n};\n\nvar reader=clone(Person);\nalert(reader.getName());//default name\nreader.name='Lucy';\nalert(reader.getName());//Lucy\n\n/*Author Prototype Object*/\nvar Author=clone(Person);\nAuthor.books=[];//default value\nAuthor.getBooks=function(){\n return this.books;\n}\n```\n\n这里并没有使用一个名为 Person 的构造函数来定义类的结构，Person 现在是一个对象字面量。它是所需要创建的各种类 Person 对象的原型变量。其中定义了所有类 Person 对象都有具备的属性和方法，并为它们提供了默认值。方法的默认值可能不会被改变，而属性的默认值一般都会被改变。\n\n**摻元类**\n\n有一种重用代码的方法不需要用到严格的继承。如果想把一个函数用到多个类中，可以通过扩充(augmenttation)的方法让这些类共享该函数。其具体做法是：先创建一个包含各种通用方法的类，然后再扩展其他类。这种包含通用方法的类成为摻元类(mixin class)。他们通常不会被实例化或者直接调用。其存在的目的只是向其他类提供自己的方法。具体见下面实例：\n\n```javascript\n/*Mixin class.*/\n\nvar Mixin = function() {};\nMixin.prototype() {\n serialize: function() {\n var output = [];\n for (key in this) {\n output.push(key + ': ' + this[key]);\n }\n return output.path.join(', ');\n }\n}\n//使用 augment 函数把这个方法添加到每一个需要它的类中\naugment(Author,Mixin);\n\nvar author=new Author('Ross Harmes',['JavaScript Design Patterns']);\nvar serializedString=author.serialize();\n\n/*Augment function*/\nfunction augment(receivingClass, givingClass) {\n if (arguments[2]) { //Only give certain methods.\n for (var i = 2, len = arguments.length; i < len; i++) {\n receivingClass.prototype[arguments[i]] = givingClass.prototype[arguments[i]];\n }\n } else {\n for (methodName in givingClass.prototype) {\n if (!receivingClass.prototype[methodName]) {\n receivingClass.prototype[methodName] = givingClass.prototype[methodName];\n }\n }\n }\n}\n```\n\n各种继承范型各有优缺点：\n\n- 在内存效率比较重要的场合原型式继承（及 clone 函数）是最佳选择。\n- 如果与对象打交道的都是那种只熟悉其他对象语言中的继承机制的程序员，那么最好使用类式继承（及 extend 函数）。\n- 以上两种方法都适合于类间差异较小的类层次体系。如果类之间差异比较大，那么摻元类的方法来扩充这些类往往是一种更合理的选择。"} {"title":"Can We Do Better Than The Click?","date":"2015-03-30","language":"zh-CN","summary":"响应用户的输入可以说是我们做界面开发的核心。为了构建可响应的 Web 产品，g关键是理解触摸、鼠标、指针、键盘操作和浏览器的工作原理是。你可能在手机浏览器中经历过 300 ms 的延迟或者通过触摸来滚动带来的不爽。在本文中，我们将介绍事件级联和使用这些知识来实现演示一个点击事件，支持许多输入方法但是又没有违反像 Opera Mini 这一类的代理浏览器规则...","categories":["Study"],"url":"https://tw93.fun/2015-03-30/Browser-input-Events.html","markdownUrl":"https://tw93.fun/2015-03-30/Browser-input-Events.md","translation":{"language":"en-US","title":"Can We Do Better Than The Click?","url":"https://tw93.fun/en/2015-03-30/Browser-input-Events.html","markdownUrl":"https://tw93.fun/en/2015-03-30/Browser-input-Events.md"},"contentMarkdown":"原文来自：[Browser Input Events: Can We Do Better Than The Click?](https://www.smashingmagazine.com/2015/03/better-browser-input-events/)\n\n响应用户的输入可以说是我们做界面开发的核心。为了构建可响应的 Web 产品，理解触摸、鼠标、指针、键盘操作和浏览器的工作原理是解决问题的关键。你可能在手机浏览器中经历过[300-millisecond delay](http://ionicframework.com/blog/hybrid-apps-and-the-curse-of-the-300ms-delay/){:target=\"_blank\"}(300 ms 延迟)或者[wrestled with touchmove versus scrolling](https://docs.google.com/document/d/12k_LL_Ot9GjF8zGWP9eI_3IMbSizD72susba0frg44Y/){:target=\"_blank\"}(触摸滚动导致页面卡顿)。\n\n在本文中，我们将介绍事件级联和使用这些知识来实现演示一个 tap 点击事件，支持多种输入方法但是又没有违反像 Opera Mini 这一类的代理浏览器规则。\n\n注：tap 也翻译为点击，tap 和 click 都是在点击时候触发，但在手机 Web 端 click 会有 200~300ms 延迟，为了避免歧义，下文将” tap event“翻译成“tap 点击事件“\n\n### 概况\n\n目前被用于与 Web 交互的 3 种主要的交互方式是：数字光标（鼠标）、触觉（直接触摸或者手写笔）、键盘。在 JavaScript 中我们可以通过[触摸事件](http://www.w3.org/TR/touch-events/){:target=\"_blank\"},[鼠标事件](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mouseevents){:target=\"_blank\"},[指针事件](http://www.w3.org/TR/pointerevents/){:target=\"_blank\"}和[键盘事件](http://www.w3.org/TR/2014/WD-DOM-Level-3-Events-20140925/#keys){:target=\"_blank\"}来使用它们。在这篇文章中我们主要讨论触摸和基于鼠标的交互，虽然这里有键盘事件已经形成标准，如 click 和 submit 事件。\n\n你很有可能已经实现过鼠标和触摸事件的处理程序，在过去我们推荐的做法是这样： \n```javascript\n/** DO NOT EVER DO THIS! */\n$('a', ('ontouchstart' in window)?'touchend':'click',handler);\n```\n\n微软已经负责创建了一个更好的，更有前途的“指针事件”的事件模型规范。指针事件是一个抽象的输入机制,现在是 W3C 推荐标准。指针事件给用户代理(UA)带来灵活性，给一个事件系统提供丰富的输入机制。鼠标、触摸、手写笔是今天很容易想到的输入方式，但实现延伸到[myo](https://www.thalmic.com/en/myo/){:target=\"_blank\"}（肌）和[Ring](http://logbar.jp/ring/en/){:target=\"_blank\"}（环）也是可实现的。虽然 Web 开发者对这些似乎很兴奋，但并不是所有的浏览器开发者也会这样以为。就像苹果和谷歌现在就没有打算来实现指针事件。 \n谷歌的这个决定并不是他们最终的决定，但是目前在指针事件上没有活跃的工作。我们通过 polyfills 输入和使用指针事件和替代解决方案将成为等式的一部分，可能最终起决定作用。苹果在 2012 年发表申明反对指针事件，我现在没有从 Safari 的工程师那里得到任何公众回应。\n\n### 事件级联\n\n当用户在移动设备上面 tap 点击一个元素时，浏览器会触发一系列事件：\n\n> touchstart → touchend → mouseover → mousemove → mousedown → mouseup → click\n\n这是由于 Web 的向后兼容性，指针事件采取的一种可替代方案来触发事件内联的兼容性：\n\n> mousemove → pointerover → mouseover → pointerdown → mousedown → gotpointercapture → pointerup → mouseup → lostpointercapture → pointerout → mouseout → focus → click\n\n事件规范允许用户代理们用不同的方式来实现兼容性的事件，Patrick Lauke 和 Peter-Paul Koch 维护着关于这一主题的广泛的参考材料（资源链接位于文章底部）。\n以下图片显示下列行为的事件串：\n\n1. 首次 tap 点击一个元素,\n2. 第二次 tap 点击一个元素,\n3. tap 点击关闭元素,\n\n请注意：为了适应这个栈这个事件栈故意忽略了 focus 和 blur 事件。\n\n\n\n在 iOS 设备上的 tap 点击一个元素两次和松开的事件级联\n$ mkdir fast-angular\n
$ cd fast-angular\n
$ bower install --save react\n
$ bower install --save angular\n\n- 当这些命令运行好后，我们需要的 Angular 和React 已经在我们本地安装好了，接着我们建立一个简单的 HTML 文件，将这两个脚本引入。\n\n ```html\n \n \n \n \n \n
$ npm install -g yo bower grunt-cli gulp\n \n 有一个小彩蛋，在这里看到了Yeoman也很推荐[cmder](http://bliker.github.io/cmder/){:target=\"_blank\"} （跑题了，逃） \n\n 2.为了搭建你的Web应用，你需要安装'generator-webapp'生成器。\n
$ npm install -g generator-webapp\n 这是一个默认的Web应用生成器，通过它你可以脚手架一个包含 HTML5 Boilerplate, jQuery, Modernizr,Bootstrap的项目，同时你也可以选择使用它们，这个generator将会使用Grunt来进行任务管理（当然你也可以使用gulp）。\n\n 3.等到上面都安装好后，你就可以新建你的项目目录了。\n
$ mkdir my-yo-webapp && cd my-yo-webapp\n\n 4.接着使用下面命令：\n
$ yo webapp\n \n 然后选择你需要安装的东西，接着你就可以看到命令行开始飞起来了，完成后，你的目录下会生出如下文件：\n \n\n 5.然后运行下面命令，你会发现有神奇的东西出现：\n
$ grunt server\n\n 6.最后你的浏览器就会自动打开一个页面：\n \n 接着你就可以愉快的开发你的项目了。\n\n 如果想进一步了解Yeoman，很建议你看官方的一个[Tutorial](http://yeoman.io/codelab.html\n ){:target=\"_blank\"},这里有一个详细的例子，相信你通过它后，能够更了解Yeoman。"} {"title":"前端开发流程工具 Grunt","date":"2015-02-18","language":"zh-CN","summary":"在上面一篇文章中，我们介绍了前端的包管理器 Bower，这次我们来了解前端应用开发流程工具 Grunt，在JavaScript 开发过程中，我们常常会遇到一些重复性的任务，譬如检查语法是否正确，压缩代码，合并文件，要是以前我们会选择不同的工具来完成不同的任务，但是这样感觉既复杂又耗时，但是现在有了 Grunt，Grunt 就是为了解决这些问题而发明的一个工具，可以帮助我们自动管理和运行各种 JavaScript 任务，简化我们的工作流程 ...","categories":["Study"],"url":"https://tw93.fun/2015-02-18/yeoman-grunt-bower-2.html","markdownUrl":"https://tw93.fun/2015-02-18/yeoman-grunt-bower-2.md","translation":{"language":"en-US","title":"Front-end Development Workflow Tool Grunt","url":"https://tw93.fun/en/2015-02-18/yeoman-grunt-bower-2.html","markdownUrl":"https://tw93.fun/en/2015-02-18/yeoman-grunt-bower-2.md"},"contentMarkdown":"在上面一篇文章中，我们介绍了前端的包管理器 Bower，这次我们来了解前端应用开发流程工具 Grunt，在 JavaScript 开发过程中，我们常常会遇到一些重复性的任务，譬如检查语法是否正确，压缩代码，合并文件，要是以前我们会选择不同的工具来完成不同的任务，但是这样感觉既复杂又耗时，但是现在有了 Grunt，Grunt 就是为了解决这些问题而发明的一个工具，可以帮助我们自动管理和运行各种 JavaScript 任务，简化我们的工作流程。\n\n### [Grunt](http://www.gruntjs.org/){:target=\"_blank\"}\n\n#### 为什么使用任务运行工具?\n\n简而言之，自动化。当你处理诸如代码最小化, 代码编译, 单元测试, 代码规范校验等等重复任务时, 你必须要做的工作越少，你的工作就变得越简单。在你完成配置后，不费吹灰之力，一个任务运行工具可以替你和你的团队完成绝大部分日常工作。(官网资料)\n\n#### 为什么使用 Grunt?\n\nGrunt 是一个庞大的生态系统，每天都在成长。你可以自由的选择数以百计的插件以帮助你自动化的处理任务。如果你所需要的插件还被有人创建，那么你可以自己创建插件并通过 npm 很方便的发布以供更多人使用并一起完善。（官网资料）\n\n下面我们来看看当我们运行 Grunt 的样子吧，下面这图是我使用 Grunt 自动运行我一个[Nodejs 项目](https://github.com/tw93/twMovie){:target=\"_blank\"}的截图:\n\n\n\n#### 如何安装 Grunt？\n\n1. Grunt 和 Grunt 的插件都是通过 Node.js 的包管理器 npm 来安装和管理的。Grunt 0.4.x 要求 Node.js 的版本>=0.8.0(也就是 0.8.0 及以上版本的 Node.js 才能很好的运行 Grunt)。\n\n2. 为了方便使用 Grunt，我们可以把我们的 Grunt 安装到我们的全局变量中，这样我们就可以在每个项目都使用 Grunt。\n\n
npm install -g grunt-cli\n\n通过以上这两步，我们就将 Grunt 安装好了，以后直接在我们命令行中就可以使用了。\n\n注意，安装 grunt-cli 并不等于安装了 grunt 任务运行器！Grunt CLI 的工作很简单：在 Gruntfile 所在目录调用运行已经安装好的相应版本的 Grunt。这就意味着可以在同一台机器上同时安装多个版本的 Grunt。\n\n#### 如和使用 grunt 来管理项目？\n\n- 首先需要往项目里添加两个文件：package.json 和 Gruntfile.js。其中 package.json 是用来为 npm 存放项目配置的元数据的，可以通过这里来学习[npm init](https://docs.npmjs.com/cli/init){:target=\"_blank\"}。可以通过这个命令来生成我们项目的 package.json，与 grunt 关系最大的配置在 devDependencies 中。这是我的一个[Nodejs 项目](https://github.com/tw93/twMovie){:target=\"_blank\"}的 package.json：\n```json\n{\n \"name\": \"twMovie\",\n \"version\": \"0.0.1\",\n \"description\": \"twMovie is builded by node and mongodb\",\n \"main\": \"app.js\",\n \"dependencies\": {\n \"body-parser\": \"^1.10.2\",\n \"connect-mongo\": \"^0.7.0\",\n \"cookie-parser\": \"^1.3.3\",\n \"crypto\": \"0.0.3\",\n \"express\": \"^4.11.1\",\n \"express-session\": \"^1.10.1\",\n \"grunt-concurrent\": \"^1.0.0\",\n \"jade\": \"^1.9.1\",\n \"moment\": \"^2.9.0\",\n \"mongoose\": \"^3.8.22\",\n \"morgan\": \"^1.5.1\",\n \"path\": \"^0.11.14\",\n \"serve-favicon\": \"^2.2.0\",\n \"underscore\": \"^1.7.0\"\n },\n \"devDependencies\": {\n \"grunt\": \"^0.4.5\",\n \"grunt-concurrent\": \"^1.0.0\",\n \"grunt-contrib-watch\": \"^0.6.1\",\n \"grunt-nodemon\": \"^0.3.0\"\n },\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/tw93/twMovie.git\"\n },\n \"keywords\": [\n \"twmovie\",\n \"movie\"\n ],\n \"author\": \"tw93\",\n \"license\": \"ISC\",\n \"bugs\": {\n \"url\": \"https://github.com/tw93/twMovie/issues\"\n },\n \"homepage\": \"https://github.com/tw93/twMovie\"\n}\n\n```\n\n- 然后在命令行进入项目所在目录，键入如下命令即可，npm 会根据 devDependencies 中的配置，将需要的 grunt 及其插件下载到你的项目目录中。\n
npm install grunt --save-dev\n\n- 接着需要新建一个叫做 Gruntfilejs 的文件，它用于配置或者定义 Grunt 任务和加载 Grunt 插件，这个文件就是当我们在命令行里面运行 grunt 时候的一个“入口文件”，我们需要在这个文件里面设置好我们的自定义任务，具体可以看 Grunt 的[官方文档](http://www.gruntjs.org/docs/sample-gruntfile.html){:target=\"_blank\"}。\n\n - 最后通过grunt命令就可以自动化运行我们的项目了。 \n注：一个比较完整的Gruntfile.js我是这样写的：\n```javascript\nmodule.exports = function(grunt) {\n grunt.initConfig({\n watch: {\n jade: {\n files: ['views/**'],\n options: {\n livereload: true\n }\n },\n js: {\n files: ['public/js/**', 'models/**/*.js', 'schemas/**/*.js'],\n // tasks: ['jshint'],\n options: {\n livereload: true\n }\n }\n },\n nodemon: {\n dev: {\n script: 'app.js',\n options: {\n file: 'app.js',\n args: [],\n ignoredFiles: ['README.md', 'node_modules/**', '.DS_Store'],\n watchedExtensions: ['js'],\n watchedFolders: ['./'],\n debug: true,\n delayTime: 1,\n env: {\n PORT: 3000\n },\n cwd: __dirname\n }\n }\n },\n concurrent: {\n target: {\n tasks: ['nodemon', 'watch'],\n options: {\n logConcurrentOutput: true\n }\n }\n }\n });\n grunt.loadNpmTasks('grunt-contrib-watch');\n grunt.loadNpmTasks('grunt-nodemon');\n grunt.loadNpmTasks('grunt-concurrent');\n grunt.option('force', true);\n grunt.registerTask('default', ['concurrent:target']);\n};\n```\n\n还是建议大家多看看 Grunt 的官方文档，通过官方文档来学习会快一点。"} {"title":"前端开发流程工具 Cmder 和 Bower","date":"2015-02-17","language":"zh-CN","summary":"前端开发的确不是以前那种前端开发，如果说我们过去的前端开发是处于“刀耕火种”时代，那么现在的前端开发无疑已经进入了\"工厂生产\"的时代。近几年，随着Nodejs的出现，伴随着出现了很多优秀的前端开发管理工具，极大的方便着我们的前端开发，的确 Nodejs 是上帝送给我们前端开发工程师最好的礼物。下面几篇文章我给大家来介绍一些前端开发过程中需要用到的优秀的工具：Cmder、Bower、grunt、Yeoman ...","categories":["Study"],"url":"https://tw93.fun/2015-02-17/yeoman-grunt-bower-1.html","markdownUrl":"https://tw93.fun/2015-02-17/yeoman-grunt-bower-1.md","translation":{"language":"en-US","title":"Front-end Development Workflow Tools Cmder and Bower","url":"https://tw93.fun/en/2015-02-17/yeoman-grunt-bower-1.html","markdownUrl":"https://tw93.fun/en/2015-02-17/yeoman-grunt-bower-1.md"},"contentMarkdown":"前端开发的确不是以前那种前端开发，如果说我们过去的前端开发是处于“刀耕火种”时代，那么现在的前端开发无疑已经进入了\"工厂生产\"的时代。近几年，随着 Nodejs 的出现，伴随着出现了很多优秀的前端开发管理工具，极大的方便着我们的前端开发，的确 Nodejs 是上帝送给我们前端开发工程师最好的礼物。下面几篇文章我给大家来介绍一些前端开发过程中需要用到的优秀的工具：cmder、Bower、grunt、Yeoman。\n\n### [Cmder](https://cmder.app/){:target=\"_blank\"}\n\n看起来 cmder 貌似和我们的前端开发流程关系不大，假如说 bower、grunt、Yeoman 这些工具是“马”的话，那么 cmder 这个工具就是一个好“鞍”（好马配好鞍）。\n\n你一定会被这个 cmd 代替工具所吸引，首先上图：\n\n\n\n只能用优雅来形容这个软件，色彩非常性感，在使用上面也明显方便于 windows 自带的那个蹩脚的 cmd。官方是这个介绍的：Cmder is a software package created out of pure frustration over the absence of nice console emulators on Windows. It is based on amazing software, and spiced up with the Monokai color scheme and a custom prompt layout. Looking sexy from the start.\n\n全安装版 cmder 自带了 msysgit, 压缩包 23M, 除了 git 本身这个命令之外,里面可以使用大量的 linux 命令，譬如下面我用它来提交我今天这篇博客到我的 github。\n \n由于这里仅仅是一个介绍，对于有很多配置方面的，建议大家 google 查找对应的设置方案，我相信你会喜欢上这个工具的。\n\n### [Bower](http://bower.io/){:target=\"_blank\"}\n\nBower 是 twitter 推出的一款包管理工具，官网是这样概括的：Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you.翻译大家应该可以看懂。\n\n\n\n我们为什么要使用这个工具呢？我的理解有如下几个原因：\n\n- 可以极大的节省我们的时间，它可以节省我们寻找客户端的依赖关系时间，譬如我们需要 angular 的时候，直接输入 bower install angular 就可以直接将 angular 下载到我们本地目录,你不需要去记版本号之类的东西，你也可以通过 Bower 的 info 命令去查看任意库的信息。\n- 通过 bower init 初始化，建立一个 bower.json 的文件，你可以很轻松的展示客户端的依赖关系，在这个文件里你可以指定所有客户端的依赖关系，任何时候你需要弄清楚你正在使用哪些库，你可以参考这个文件。\n- 管理更加简单，包括卸载一个包，更新一个包，都可以直接通过命令方式进行。\n\n如何使用呢？我简单地介绍一下：\n\n1.由于 Bower 要求你的系统中已经安装了 Node、npm 和 git，然后我们将 Bower 安装到我们的全局变量中。\n\n
npm install -g bower\n\n2.安装包时候我们使用 bower install 这个命令，运行这个命令后我们的包会被安装到 bower_components/这个目录里面。\n\n
bower install package\n\n3.譬如我要安装 angular 这个库，见下图：\n\n\n\n最后还有一些详细的使用方法，请访问官网学习更加详细的知识。"} {"title":"JavaScript编程实践过程中性能的优化","date":"2015-02-16","language":"zh-CN","summary":"每种编程语言都有它的“痛点”，并且随着时间的推移，它存在的低效模式也不断发展。JavaScript提出了一些独一无二的性能挑战，这与你代码组织的方式有关，随着Web应用变得越来越高级，包含的JavaScript代码也越来越多，各种模式与反模式也逐渐出现，为了编写更高效的代码，请牢记这些编程实践 ...","categories":["Study"],"url":"https://tw93.fun/2015-02-16/High-Performance-JavaScript-7.html","markdownUrl":"https://tw93.fun/2015-02-16/High-Performance-JavaScript-7.md","translation":{"language":"en-US","title":"Performance Optimization in JavaScript Programming Practices","url":"https://tw93.fun/en/2015-02-16/High-Performance-JavaScript-7.html","markdownUrl":"https://tw93.fun/en/2015-02-16/High-Performance-JavaScript-7.md"},"contentMarkdown":"每种编程语言都有它的“痛点”，并且随着时间的推移，它存在的低效模式也不断发展。JavaScript提出了一些独一无二的性能挑战，这与你代码组织的方式有关，随着Web应用变得越来越高级，包含的JavaScript代码也越来越多，各种模式与反模式也逐渐出现，为了编写更高效的代码，请牢记这些编程实践：\n\n### 避免多重求值（Double Evaluation）\n通过避免使用eval()和function()构造器来避免双重求值带来的性能消耗，同样的，给setTimeout()和setInterval()传递函数而不是字符串作为参数。\n双重求值是一项代价昂贵的操作，它比直接包含代码执行速度要慢很多。\n\n### 使用Object/Array直接量\n在JavaScript中创建对象和数组的方法有很多，但使用对象和数组直接量是最快的方式，而且直接量可以有助于节省代码量，以减少整个文件的尺寸。\n```javascript\n//创建一个对象\nvar myObject = {\n name: \"Lucy\",\n age: 21,\n count: 50\n};\n\n//创建一个数组\nvar myArray = [\"Lucy\", 21, 50];\n```\n\n### 不要重复工作\n在计算机科学领域中最主要的优化技术之一是“避免无谓的工作(work avoidance)”。\n避免无谓的工作的概念有两重意思：**别做无关紧要的工作**，**别重复做已经完成的工作**。\n\n#### 延迟加载\n第一种消除函数中的重复工作的方法是延迟加载(lazy loading)。延迟加载意味着在信息被使用前不会做任何操作，当一个函数在页面中不会立刻调用时候，延迟加载是最好的选择。\n\n#### 条件预加载 \n它会在脚本加载期间提前检测，而不会等到函数被调用，检测的操作依然只有一次，只是过程来得更早。条件预加载确保所有函数调用消耗的时间相同，其代价是需要脚本加载时就检测，而不是加载后，预加载适用于一个函数马上用到，并且在整个页面的生命中频繁出现的场合。\n\n### 使用速度快的部分\n\n#### 位操作\n有好几种方法来利用为创造·位操作符提升JavaScript的速度。\n\n - 使用运算代替纯数学操作 \n ```javascript\n //通常采用对2取模的方式实现表格颜色交换\n for (var i = 0, len = rows.length; i < len; i++) {\n if (i % 2) {\n className = \"even\";\n } else {\n className = \"odd\";\n }\n }\n\n //通过使用位运算的方式，比原来版本快了50%(取决于浏览器)\n for (var i = 0, len = rows.length; i < len; i++) {\n if (i & １) {\n className = \"even\";\n } else {\n className = \"odd\";\n }\n }\n ```\n\n - 使用“位掩码” \n 位掩码是计数机科学中一种常用的技术，用于处理同时存在多个布尔选项的情况，其思路是使用单个数字的每一位来判定是否选项成立，从而有效地数字转换为布尔值标记组成的数组。掩码中每个选项的值都等于2的幂。\n 例如：\n ```javascript\n var OPTION_A = 1;\n var OPTION_B = 2;\n var OPTION_C = 4;\n var OPTION_D = 16;\n //通过定于这些选项，你可以用按位或运算创建一个数字来包含多个设置选项\n var options = OPTION_A | OPTION_C | OPTION_D;\n //然后通过按位与操作判断一个给定的选项是否可用\n //如果该选项未设置，则结果为0，反之为1\n\n //选项A是否在列表中？\n if (options & OPTION_A) {\n //代码处理\n }\n\n //像这样掩码运算速度非常快\n ```\n\n#### 原生方法\n无论你的代码如何优化，都永远比不过JavaScript引擎提供的原生方法更快。对于进行数学运算可以通过使用**内置的Math对象**会更快。还有对于选择器API，当原生方法可以使用时，应该尽量使用它们。"} {"title":"Ajax 性能的优化","date":"2015-02-14","language":"zh-CN","summary":"Ajax 是高性能 JavaScript 的基础，它可以通过延迟下载体积较大的资源文件来使页面加载更快，它通过异步的方式在客户端和服务器之间传递数据，从而避免页面资源一窝蜂的下载。它甚至可以只用一个 HTTP 请求就获得整个页面的资源。选择合适的传输方式和最有效的数据格式，可以显著改善用户和网站的交互体验 ...","categories":["Study"],"url":"https://tw93.fun/2015-02-14/High-Performance-JavaScript-6.html","markdownUrl":"https://tw93.fun/2015-02-14/High-Performance-JavaScript-6.md","translation":{"language":"en-US","title":"Ajax Performance Optimization","url":"https://tw93.fun/en/2015-02-14/High-Performance-JavaScript-6.html","markdownUrl":"https://tw93.fun/en/2015-02-14/High-Performance-JavaScript-6.md"},"contentMarkdown":"Ajax 是高性能 JavaScript 的基础，它可以通过延迟下载体积较大的资源文件来使页面加载更快，它通过异步的方式在客户端和服务器之间传递数据，从而避免页面资源一窝蜂的下载。它甚至可以只用一个 HTTP 请求就获得整个页面的资源。选择合适的传输方式和最有效的数据格式，可以显著改善用户和网站的交互体验。我们这里主要讨论从服务器接收发数据速度最快的技术，以及最为有效的数据编码格式。\n\n### 常用的向服务器请求数据的技术\n\n#### XMLHttpRequest(XML)\n\n使用范例：\n```javascript\nvar url = '/data.php';\nvar params = [\n 'id=9798',\n 'limit=20'\n];\nvar req = new XMLHttpRequest();\nreq.onreadystatechange = function() {\n if (req.readyState === 4) {\n //获取响应的头信息\n var responseHeaders = req.getAllResponseHeaders();\n //获取数据\n var data = req.responseText;\n //数据处理\n\n }\n}\nreq.open('GET', url + '?' + params.join('&'), true);\n//设置请求头信息\nreq.setRequestHeader('X-Request-With', 'XMLHttpRequest');\nreq.send(null); //发送一个请求\n```\n\n当使用 XHR 请求数据时候，对于那些不会改变服务器状态，只会获取数据的请求，应该使用 GET。经 GET 请求的数据会被缓存起来，如果需要多次请求统一数据，它会有助于提高性能。\n只有当请求 URL 加上参数长度接近或者超过 2048 个字符时候，才应该使用 POST 获取数据，这是因为**IE 限制了 URL 长度**，过长请求会被截断。\n\n#### 动态脚本注入\n\n这种方法克服了 XHR 的最大限制：它能跨域请求。你不需要实例化一个专用对象，而可以使用 JavaScript 创建一个新的脚本标签，并设置它的属性为不同域的 URL,但是和 XHR 相比，动态脚本注入提供的控制是有限的，你不能设置请求头信息，传递参数也只能使用 GET，不能设置请求的超时处理和重试，也就是说失败了你也不一定知道。你必须等到所有数据都返回你才可以访问它们。你不能请求头信息，也不能把整个响应信息作为字符串来处理。还有必须是可执行的 JavaScript 源码，而且必须封装在一个回调函数中。\n```javascript\nvar scriptElement=document.createElement('script');\nscriptElement.src='http://any-domain.com/javascript/lib.js';\ndocument.getElementByTagName('head')[0].appendChild(scriptElement);\n\nfunction jsonCallback(jsonString){\n var data=eval('('+jsonString+')');\n //处理数据...\n }\n```\n在上面那个例子里，lib.js 必须把数据封装在jsonCallback 函数里面：\n```javascript\njsonCallback({\"status\":1,\"color\":[\"#fff\",\"#000\",\"f00\"]});\n//尽管有很多限制，但是这项技术的速度非常快。\n```\n\n#### Multipart XHR\n\nMXHR 允许客户端只使用一个 HTTP 请求就可以从服务端向客户端传送多个资源，它通过在服务端将资源（CSS 文件，HTML 片段，JavaScript 代码，或 base64 编码的图片）打包成一个双方约定的字符串并发送到客户端，然后用 JavaScript 代码处理这个长字符串，并根据它的 mime-type 类型和传入其他头信息解析出每个资源。\n但是以这种技术获得的资源不能够被浏览器缓存 ，但是某些情况下 MXHR 依然能显著提高页面的整体性能。\n\n### 发送数据给服务器\n\n#### XMLHttpRequest\n\n数据可以使用 GET 或 POST 的方式传回来，包括任意数量的 HTTP 头信息，当使用 XHR 发送数据给服务器时候，使用 GET 会更快，只需要发送一个数据包，POST 至少两个数据包，一个装载头信息，一个装载 POST 正文。POST 更适合发送大量数据到服务器。\n```javascript\nvar url = '/data.php';\nvar params = [\n 'id=9798',\n 'limit=20'\n];\nvar req = new XMLHttpRequest();\nreq.onerror=function(){\n //出错\n };\nreq.onreadystatechange = function() {\n if (req.readyState === 4) {\n //成功\n }\n}\nreq.open('POST',url, true);\nreq.setRequstHeader('Content-Type','application/x-www-form-urlencoded');\nreq.setRequstHeader('Content-Length',params.length);\nreq.send(params.join('&'));\n```\n\n#### Beacons（图片信标）\n\n这项技术非常类似动态脚本注入。使用 JavaScript 创建一个新的 Image 对象，并把 src 属性设置为服务器上传脚本的 URL。该 URL 包含我们通过 GET 传回的键值对数据。请注意并没有创建 img 元素或把它插入 DOM。\n```javascript\nvar url='/status_tracker.php';\nvar params=[\n'step=2',\n'time=123241223'\n];\n(new Image()).src=url+'?'+params.join('&');\n```\n\n服务器会接收数据并保存下来，它无需向客户端发送任何回馈信息，因为没有图片会实际显示出来，这是往服务器回传信息最有效的方式。它的性能消耗很小，而且服务器的错误完全不会影响客户端。如果你需要返回大量数据给客户端，那么请使用 XHR，如果你只关心发送数据给服务器（可能需要极少的返回信息），那么请使用图片信标。\n\n### 数据格式的选择\n\n通常来说数据格式越轻量越好，JSON 和字符串分割的自定义格式是最好的。如果数据集很大并且对解析时间有要求，那么请从如下两种格式中做出选择。\n\n- JSON-P 格式：使用动态脚本注入获取他把数据当作可以执行的 JavaScript 而不是字符串，解析速度极快。它能够跨域使用，但涉及敏感数据的时候不应该使用它。\n- 字符分割的自定义格式：使用 XHR 或动态脚本注入获取，用 split()解析。这种技术解析大数据集比 JSON-P 略快，而且通常文件尺寸更小。\n\n### Ajax 性能指南\n\n一旦选择了最合适和数据传输技术和数据格式，那么你就得开始考虑其他优化技术了：\n\n- 减少请求数，可以通过合并 JavaScript 和 CSS 文件，或者使用 MXHR。\n- 缩小页面的加载时间，页面主要内容加载完成后，用 Ajax 获取那些次要的文件。\n- 确保你的代码错误不会输出给用户，并在服务端处理错误。\n- 知道何时使用成熟的 Ajax 类库，以及编写自己的底层 Ajax 代码。"} {"title":"高性能 JavaScript - 快速响应的用户界面","date":"2015-02-12","language":"zh-CN","summary":"有一句话很有道理：“如果 JavaScript运行了整整几秒钟，那么很有可能是你做错了什么......”，如果界面在 100 毫秒内响应用户输入，用户会认为自己在“直接操作界面中的对象”。超过 100 毫秒意味着用户感觉自己与界面失去了联系。JavaScript 和用户界面更新在同一个进程中运行，因此一次只能处理一件事情。这意味着当 JavaScript 代码在运行时，用户界面不能响应输入，反之亦然。高效地管理UI线程就是要确保 JavaScript 不能运行太长时间，以免影响用户体验。管理好 JavaScript 的运行时间对 Web 应用的性能非常重要 ...","categories":["Study"],"url":"https://tw93.fun/2015-02-12/High-Performance-JavaScript-5.html","markdownUrl":"https://tw93.fun/2015-02-12/High-Performance-JavaScript-5.md","translation":{"language":"en-US","title":"High Performance JavaScript - Rapidly Responding User Interface","url":"https://tw93.fun/en/2015-02-11/High-Performance-JavaScript-5.html","markdownUrl":"https://tw93.fun/en/2015-02-11/High-Performance-JavaScript-5.md"},"contentMarkdown":"有一句话很有道理：“如果 JavaScript 运行了整整几秒钟，那么很有可能是你做错了什么......”，如果界面在 100 毫秒内响应用户输入，用户会认为自己在“直接操作界面中的对象”。超过 100 毫秒意味着用户感觉自己与界面失去了联系。JavaScript 和用户界面更新在同一个进程中运行，因此一次只能处理一件事情。这意味着当 JavaScript 代码在运行时，用户界面不能响应输入，反之亦然。高效地管理 UI 线程就是要确保 JavaScript 不能运行太长时间，以免影响用户体验。管理好 JavaScript 的运行时间对 Web 应用的性能非常重要。\n\n### 浏览器 UI 线程\n\n#### 定义\n\n共用于执行 JavaScript 和更新用户界面的进程通常被称为“浏览器 UI 线程”（尽管对所有浏览器来说，称为“线程”不一定准确）。\n\n#### 工作原理\n\nUI 线程的工作基于一个简单的队列系统，任务会保存到队列中直至进程空闲。一旦空闲，队列中的下一个任务就被重新提取出来并运行，这些任务要么是运行 JavaScript 代码，要么是执行 UI 更新，包括重绘和重排。也许这个进程中最有趣的部分在于每一次输入可能会导致一个或多个任务被加到队列。\n\n#### 优化\n\n当所有的 UI 线程任务都执行完毕，进程进入空闲状态，并等待更多任务加入队列。**空闲状态是理想的**，因为用户所有的交互都会立即触发 UI 更新。如果用户试图在任务运行期间于页面交互，不紧没有即时的 UI 更新，甚至可能新的 UI 更新不会被创建并不会被加到队列。事实上，太多事浏览器在 JavaScript 运行时会停止把新任务加到 UI 线程中，也就是说**JavaScript 任务必须尽快结束**，以避免对用户体验造成不良影响。\n\n### 浏览器限制\n\n浏览器为了确保某些恶意代码不能通过永不停止的密集操作锁住用户的浏览器或计算机，因此浏览器限制了 JavaScript 的运行时间。\n此类限制分两种：调用栈大小限制（记录脚本开始以来执行语句的数量）和长时间运行脚本限制（记录脚本执行的总时长）。\n\n### 使用定时器让出时间片段\n\n尽管你尽了最大努力，但难免会有一些复杂的 JavaScript 任务不能在 100 毫秒或者更短的时间完成。这个时候，最理想的方法是让出 UI 线程的控制权，使得 UI 可以更新，\n\n#### 使用定时器\n\n定时器与 UI 线程的交互有助于把长时间运行的脚本拆分成更短的片段，调用 setTimeOut()或 setInterval()会告诉 JavaScript 先等待一段时间，然后再添加一个任务到 UI 队列。\n```javascript\nfunction greeting() {\n alert(\"hello world\");\n}\nsetTimeout(greeting, 250);\n//这段代码会在250毫秒后\n//向UI队列中插入一个执行greeting()函数的JavaScript任务\n```\n\n**但是记住，第二个参数表示任务何时被添加到 UI 队列，而不是一定会在这段时间后执行；这个任务会等待其他所有任务执行完毕后才执行。**\n\n### Web Workers(又是一个我接触的新东西)\n\n自 JavaScript 诞生以来，还没有办法在浏览器 UI 线程之外运行代码。Web Workers API 改变了这种状态，它引入了一个接口，能使代码运行企鹅不占浏览器 UI 线程的时间。\n\n#### Web Worker 运行环境\n\n- 一个 navigation 对象，只包括四个属性：appName,appVersion,user Agent 和 platform。\n- 一个 location 对象（与 window.location 相同，不过所有属性都是可读的）。\n- 一个 self 对象，指向全部 worker 对象。\n- 一个 importScripts()方法，用来加载 Worker 所用到的 JavaScript 文件。\n- 所有的 ECMAScript 对象，诸如：Object,Array,Date 等。\n- XMLHttpRequest 构造器。\n- setTimeout()和 setInterval()方法。\n- 一个 close()方法，它能立即停止 Worker 运行。\n\n由于 Web Worker 有着不同的全局运行环境，因此你无法从 JavaScript 代码中创建它。事实上，你需要创建一个完全独立的 JavaScript 文件，其中包括需要在 Worker 中运行的代码。要创建网页工人线程，你必须传入这个 JavaScript 的 URL：\n```javascript\nvar worker=new Worker(\"code.js\");\n```\n\n#### 与 Worker 通信\n\n网页代码可以通过 postMessage()方法给 Worker 传递数据，它接受一个参数，即需要传递给 Worker 的数据。此外 Worker 还有一个用来接收 onmessage 事件处理器。**消息系统是网页和 Worker 通信的唯一途径。**\n```javascript\n/*\n Description:\n The Worker() constructor creates a Worker that executes the script at the specified URL. This script must obey the same-origin policy.\n\n Syntax:\n webWorker = new Worker(aURL);\n*/\nvar worker = new Worker(\"code.js\");\nworker.onmessage = function(event) {\n alert(event.data);\n};\nworker.postMessage(\"Lucy\");\n\n//Worker 可以通过它自己的 postMessage()方法把消息传回页面\nself.onmessage = function(event) {\n self.postMessage(\"Hello\", event.data + \"!\");\n};\n```\n注意：只有特定类型的数据才可以使用 postMessage()传递。\n\n#### 加载外部文件\n\nWorker 通过 importScripts()方法加载外部的 JavaScript 文件，该方法可以接收一个或多个 JavaScript 文件 URL 作为参数。importScripts()的调用过程是阻塞式的，直到所有文件加载执行完成之后，脚本才会继续运行。由于 Worker 在 UI 线程之外运行，所以这种阻塞并不会影响 UI 响应。\n```javascript\nimportScripts(\"file1.js\",\"file2.js\");\nself.onmessage = function(event) {\n self.postMessage(\"Hello\", event.data + \"!\");\n};\n```"} {"title":"JavaScript 的算法和流程控制性能优化","date":"2015-02-07","language":"zh-CN","summary":"如同其他编程语言，代码的写法和算法会影响 JavaScript 的运行时间，与其他语言的不同的是，JavaScript 的可用资源有限，因此优化技术更为重要，这个学习笔记主要是从 JavaScript 的循环、条件语句、递归这三个方面的一些奇淫技巧来优化 JavaScript 的性能 ...","categories":["Study"],"url":"https://tw93.fun/2015-02-07/High-Performance-JavaScript-4.html","markdownUrl":"https://tw93.fun/2015-02-07/High-Performance-JavaScript-4.md","translation":{"language":"en-US","title":"Algorithm and Flow Control Performance Optimization of JavaScript","url":"https://tw93.fun/en/2015-02-07/High-Performance-JavaScript-4.html","markdownUrl":"https://tw93.fun/en/2015-02-07/High-Performance-JavaScript-4.md"},"contentMarkdown":"如同其他编程语言，代码的写法和算法会影响 JavaScript 的运行时间，与其他语言的不同的是，JavaScript 的可用资源有限，因此优化技术更为重要，这个学习笔记主要是从 JavaScript 的循环、条件语句、递归这三个方面的一些奇淫技巧来优化 JavaScript 的性能。\n\n### 循环\n\n#### for、while 和 do-while 循环性能特性相似，for-in 相比前三者慢\n\n- 由于每次迭代操作会同时搜索实例或者原型属性，for-in 循环的每次迭代都会产生更多的开销，因此比其他循环类型要慢，对比相同迭代次数的循环，for-in 循环最终只有其他类型速度的 1/7，因此，除非你明确需要迭代一个属性数量未知的对象,否则应该避免使用 for-in 循环。还有不要使用 for-in 来循环数组成员。\n- 改善循环性能的最佳方式是减少每次迭代的运算量和减少循环迭代次数。\n- forEach(),此方法是 ECMA-262 引入的一新的原生数组方法，此方法遍历一个数组的多有成员，并且在每个成员上面执行一个函数。\n\n```javascript\n//基于函数的迭代方法\nitem.forEach(function(value,index,array){\n process(value);\n})\n//方便！！但是慢，这个要考虑。\n```\n\n### 条件语句\n\n#### 通常来说，switch 总是比 if-else 快，并不总是最佳解决方案\n\n- 使用 if-else 还是 switch，基于测试条件的数量来判断：条件数量越大，越倾向于使用 switch（考虑到代码的易读性），反之 if-else 更易读。\n- 事实证明，大多数情况下 switch 比 if-else 运行得要快，但只有当条件数量很大时候才快得明显。\n\n#### 优化 if-else，确保最可能出现的放在首位\n\n- 优化的目标是使最小化到达正确分支所需判断的条件数量，最简单的就是确保最可能出现的放首位。\n- 还有一种减少判断次数的方法是把 if-else 组成一系列的嵌套的 if-else 语句。\n\n#### 在判断调节较多的时候，使用查找表比 if-else 和 swich 更快\n\n- 当你使用查找表时候，必须完全抛弃条件判断语句，这个过程变成数组项查询或者对象成员查询。\n- 优点：不用写任何条件判断语句，既是候选值增加时，也几乎不会产生额外的性能开销。\n\n```javascript \n//将返回值存入数组\nvar results=[result0,result1,result2,result3,result4,result5,\n result6,result7,result8,result09]\n//返回当前结果\nreturn results[value];\n```\n\n### 递归\n\n- 浏览器的调用栈大小限制了递归算法在 JavaScript 中的应用，栈溢出错误会导致其他代码中断运行。\n- 如果你遇到栈溢出错误，可以将方法改为迭代算法，或使用 Memoization 来避免重复计算。"} {"title":"JavaScript 的 DOM 编程性能优化","date":"2015-02-06","language":"zh-CN","summary":"DOM 是 Document Object Model 的缩写，中文叫做文档对象模型，是一个与语言无关的，用户操作 XML 和 HTML 文档的应用程序接口。在浏览器中，主要与HTML文档打交道，在 Web 应用中也经常需要检索XML文档，DOM API用于访问文档中的数据。John Hevatin有一次演讲说过一个贴切的比喻，把 DOM 和 JavaScript 各自想象成一个岛屿，它们直接用收费桥梁连接，ECMAScript 每次访问DOM，都要经过这个桥，并交纳“过桥费”，过的桥越多交的费用也越多，因此要想减少费用就得少过桥，我们这里就来学习如何来优化这个问题 ...","categories":["Study"],"url":"https://tw93.fun/2015-02-06/High-Performance-JavaScript-3.html","markdownUrl":"https://tw93.fun/2015-02-06/High-Performance-JavaScript-3.md","translation":{"language":"en-US","title":"DOM Programming Performance Optimization of JavaScript","url":"https://tw93.fun/en/2015-02-06/High-Performance-JavaScript-3.html","markdownUrl":"https://tw93.fun/en/2015-02-06/High-Performance-JavaScript-3.md"},"contentMarkdown":"DOM 是 Document Object Model 的缩写，中文叫做文档对象模型，是一个与语言无关的，用户操作 XML 和 HTML 文档的应用程序接口。在浏览器中，主要与 HTML 文档打交道，在 Web 应用中也经常需要检索 XML 文档，DOM API 用于访问文档中的数据。John Hevatin 有一次演讲说过一个贴切的比喻，把 DOM 和 JavaScript 各自想象成一个岛屿，它们直接用收费桥梁连接，ECMAScript 每次访问 DOM，都要经过这个桥，并交纳“过桥费”，过的桥越多交的费用也越多，因此要想减少费用就得少过桥，我们这里就来如何来优化这个问题。\n\n#### 最小化 DOM 访问次数，尽可能在 JavaScript 端处理\n\n- 访问 DOM 元素是有代价的--前面提到的过桥费。修改元素则更加昂贵，因为它会导致浏览器重新计算页面的集合变化。\n- 也就是说访问 DOM 次数越多，代码的运行速度就越慢，因此一般的经验法则是：减少 DOM 的访问次数，把运算尽量留在 ECMAScript 这一段处理。\n\n```javascript\n //最坏的情况是在循环中访问和修改元素\n //尤其是对 HTML 元素集合循环操作。\n //方法一\n function innerHTMLLoop() {\n for (var count = 0; count < 15000; count++) {\n document.getElementById('here').innerHTML += 'a';\n }\n }\n//方法二\nfunction innerHTMLLoop() {\n var content = '';\n for (var count = 0; count < 15000; count++) {\n content += 'a';\n }\n document.getElementById('here').innerHTML += content;\n}\n//显然方法二的实现要好很多\n```\n\n#### 多次访问 DOM 节点，使用局部变量存储它的引用\n\n这些方法返回值是一个集合\n\n- document.getElementByName()\n- document.getElementByClassName()\n- document.getElementByTagName()\n\n下面属性也同样返回 HTML 集合\n\n- document.images\n- document.links\n- document.forms\n- document.forms[0].elements\n\n这些集合是一些昂贵的东西，一般来说，对于任何类型的 DOM 访问，当同一个 DOM 属性或方法需要多次访问时候，最好把一个局部变量缓存此成员。当遍历一个集合时，首先优化原则是把集合存储在局部变量中，并把 length 缓存在循环外部，然后使局部变量访问这些需要多次访问的元素。\n\n#### 使用速度最快的 API\n\n浏览器提供了一个名为querySelectorAll()的原生 DOM 方法，这种方法自然比使用 JavaScript 和 DOM 来遍历查找元素要快很多。\n\n```javascript\n//查找 id=\"menu\"的元素中的所有 a 元素\n//我们习惯做法\nvar elements=document.getElementById('menu').getElementsByTagName('a');\n\n//建议做法\nvar elements=document.querySelectorAll('#menu a');\n```\n\n还有一个遍历方法--querySelector()来获取第一个匹配的节点。\n\n#### 留意重绘和重排\n\n好吧我之前一直没有听过重绘和重排，书上是这么讲的。\n浏览器下载完页面中所有组件--HTML 标记、JavaScript、CSS、图片--之后会解析并生成两个内部数据结构：\n\n- DOM 树：表示页面结构\n- 渲染树：表示 DOM 节点如何显示\n\n一旦 DOM 和渲染树构建完成，浏览器就开始显示（绘制）页面元素了，当 DOM 的变化影响的元素的几何属性（宽或高），比如修改边框宽度或给段落增加元素，导致行数增加--浏览器需要重新计算元素的集合属性，同样其他元素的几何属性和位置也会因此受到影响，浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程就称为“重排(reflow)”。完成重排后，浏览器重新绘制受影响的部分到屏幕中，这个过程就叫做重绘(repaint)\n\n重排和重绘操作都是代缴昂贵的操作，应当减少发生，为了减少发生次数，应当合并 DOM 和样式的修改，然后一次性处理掉。还可以通过缓存布局信息的方法：尽量减少布局信息的获取次数，获取后把它赋值给局部变量，然后再操作局部变量。"} {"title":"JavaScript 的数据访问性能优化","date":"2015-02-05","language":"zh-CN","summary":"JavaScript 中有四种基本的数据存取位置：直接量、变量、数组元素和对象成员。和其他语言一样，数据的存储位置会很大的影响其读取速度 ...","categories":["Study"],"url":"https://tw93.fun/2015-02-05/High-Performance-JavaScript-2.html","markdownUrl":"https://tw93.fun/2015-02-05/High-Performance-JavaScript-2.md","translation":{"language":"en-US","title":"Data Access Performance Optimization of JavaScript","url":"https://tw93.fun/en/2015-02-05/High-Performance-JavaScript-2.html","markdownUrl":"https://tw93.fun/en/2015-02-05/High-Performance-JavaScript-2.md"},"contentMarkdown":"JavaScript 中有四种基本的数据存取位置：直接量、变量、数组元素和对象成员，和其他语言一样，数据的存储位置会很大的影响其读取速度，那么该如何确定数据的存储位置来提高性能呢？我们一个一个来理解这个问题。\n\n### 四种基本数据存储位置\n\n- 直接量：直接量只代表自身，不存储特定位置，可想而知，使用直接量的访问速度会比其他会要快一点。JavaScript 中的直接量有：字符串，数字，布尔值，对象，数组，函数，正则，以及 null 和 undefined 值。\n- 变量：我们用 var 定义的数据存储单元。\n- 数组元素：存储在 JavaScript 数组对象内部，以数字作为索引。\n- 对象成员：存储在 JavaScript 对象内部，以字符串作为索引。\n\n总体来说，在 JavaScript 中访问直接量和局部变量的速度要快于数组项和成员对象的速度，那么如何来尽量使用直接量和局部变量，减少数组项和成员对象的使用呢？这里《高性能的 JavaScript》里面有这些建议：\n\n#### 管理作用域\n\n##### 作用域链和标识符解析\n\n什么是作用域？当代码在一个环境中执行时候，会创建函数对象的一个作用域链，作用域链的用途是保证对执行环境有权访问的所有函数的有序访问，当前执行的代码所在环境的变量对象在作用域的头部。作用域中的下一个变量对象来自包含环境，而再下一次环境变量则来自下一个包含环境，一直延续到全局执行环境，也就是最后一个执行环境，全局对象包含 window、navigator 和 document 这些。\n\n标识符的解析过程可以理解是对于作用域链的搜索过程，搜索过程从头部开始，假如找到了就使用这个标识符对应的变量，停止搜索，假如没有找到就搜索作用域中下一个对象，直到找到，假如到了全局执行环境都没有找到那就找不到了，也就是那个没有被定义。\n\n##### 标识符解析的性能\n\n上面说了，标识符解析是一个搜索的过程，可想而知，当我们需要的变量在第一次搜索的时候就找到了，那么时间也就会是最短的，也就是说，一个标识符的位置越深，它的读取速度就越慢，不过又说回来，V8 引擎已经优化了这个问题，但是在没有被优化的 JavaScript 引擎的浏览器中，建议尽可能使用局部变量。还有一个好的建议：如果跨作用域的值在函数中被引用一次以上，那么就把它存到局部变量里面。\n\n##### 改变作用域链\n\nwith 语句和 try-catch 这两个语句都可以用来改变作用域链。 \n当代码执行到 with 语句时候，运行期上下期的作用域链临时被改变了，一个新的可变对象被创立，它包了参数指定的对象所有属性，这个对象被推入所用域链的头部，这意味着函数所有的局部变量现在都处于第二个所用域对象中，因此访问对象更高了。\n\n对于 try 语句也有同样的效果，当 try 中代码块发生错误时候执行过程会自动跳转到 catch 子句中，然后把异常对象推入一个可变对象并置于作用域的头部，这样就出现了和 with 语句一样的问题（所有的局部变量现在都处于第二个所用域对象中）。\n\n```javascript\ntry {\n methodThatMightCauseAnError();\n} catch (ex) {\n alert(ex.message); //作用域链在此处改变\n}\n``` \n\n以上这两种方法得小心使用，或者说应该避免使用。\n\n#### 成员对象\n\n- 嵌套的对象成员会明显影响性能，尽量少用。\n- 属性或方法在原型链中位置越深，访问他的速度也越慢。\n- 通常来说，在函数中如果要多次读取同一个属性对象，最佳做法是将属性值保存到局部变量中。局部变量能用来替代属性以避免多次查找带来的性能开销，特别是在使用嵌套成员对象时候，这样会明显改变执行速度。\n\n```javascript\n//JavaScript 的命名空间，比如 YUI 中使用的技术，\n//是导致频繁访问嵌套属性的起因之一。\nfunction toggle(element) {\n if (YAHOO.util.Dom.hasClass(element, \"slected\")) {\n YAHOO.util.Dom.removeClass(element, \"selected\");\n return false;\n } else {\n YAHOO.util.Dom.addClass(element, \"selected\");\n return true;\n }\n}\n//上面代码中重复读取 YAHOO.util.Dom3 次来访问 3 个不同的方法。\n//每个方法又有 3 此成员查找,一共就 9 此，导师代码十分低效。\n//更好的方法是将 YAHOO.util.Dom 保存在局部变量中，再访问局部变量。\nfunction toggle(element) {\n var Dom = YAHOO.util.Dom;\n if (Dom.hasClass(element, \"slected\")) {\n Dom.removeClass(element, \"selected\");\n return false;\n } else {\n Dom.addClass(element, \"selected\");\n return true;\n }\n}\n//这个改变，代码中对象成员访问次数右 9 次减少到 5 次\n//所以，不要在同一个函数中多次查找同一个对象成员，\n//除非它的值改变了.\n```"} {"title":"Vue、Angular、Avalon 框架比较","date":"2015-02-04","language":"zh-CN","summary":"前端开发已经不是前几年的那种前端开发了，已经有农业时代进入工业时代了，这几年出现了很多优秀的 JavaScript 方面的 MVVM 框架，今天我来比较下 Vue，Angular，Avalon 这些框架优缺点 ...","categories":["Study"],"url":"https://tw93.fun/2015-02-04/vue-angular-avalon-1.html","markdownUrl":"https://tw93.fun/2015-02-04/vue-angular-avalon-1.md","translation":{"language":"en-US","title":"Comparison of Vue, Angular, Avalon Frameworks","url":"https://tw93.fun/en/2015-02-04/vue-angular-avalon-1.html","markdownUrl":"https://tw93.fun/en/2015-02-04/vue-angular-avalon-1.md"},"contentMarkdown":"前端开发已经不是前几年的那种前端开发了，已经有农业时代进入工业时代了，这几年出现了很多优秀的 JavaScript 方面的 MVVM 框架，今天我们来比较下 Vue，Angular，Avalon 这些框架优缺点。\n\n### Vue\n\nVue 尤雨溪老师写的一个用于创建 web 交互界面的库，是一个精简的 MVVM。从技术角度讲，[Vue](http://vuejs.org/){:target=\"_blank\"} 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来。实际的 DOM 封装和输出格式都被抽象为了 Directives 和 Filters。Vue 和其他库相比是一个小而美的库，作者的主要目的是通过一个尽量简单的 API 产生可反映的数据绑定和可组合的视图组件，感觉作者的思路非常清晰。\n\n#### 优点\n\n1. 简单：官方文档很清晰，比 Angular 简单易学。\n2. 快速：异步批处理方式更新 DOM。\n3. 组合：用解耦的、可复用的组件组合你的应用程序。\n4. 紧凑：~18kb min+gzip，且无依赖。\n5. 强大：表达式 & 无需声明依赖的可推导属性 (computed properties)。\n6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。\n\n#### 缺点\n\n1. 新生儿：Vue 是一个新的项目，2014 年 3 月 20 日发布的 0.10.0ReleaseCandidate 版本，目前 github 上面最新的是 0.11.4 版本，没有 angular 那么成熟。\n2. 影响度不是很大：google 了一下，有关于 Vue 多样性或者说丰富性少于一些有名的库。\n3. 不支持 IE8：哈哈不过 Angular 1.3 也抛弃了对 IE8 的支持，但是 @司徒正美 老师的 avalon 是支持 IE6+的，应该下了很多努力去优化。这一点对于那些需要支持 IE8 的项目就不好了，不过这也是 web 前端开发的一个趋势，像 IE 低版本就应该退出历史舞台了，通过改变我们的前端思维，而不是顺应那些使用老版本而不去升级的人。玉伯老师就说过一句话，我觉得说的非常好“这年头，支持 IE6、7 早就不再是特性，而是耻辱。努力推动支付宝全面不支持 IE6、7，期待更多兄弟加盟”。\n\n### Angular\n\nAngular 最近很火，追随者也很多，[Superheroic JavaScript MVW Framework](https://Angular.org/){:target=\"_blank\"}。官方说得很朴素：“完全使用 JavaScript 编写的客户端技术。同其他历史悠久的 Web 技术（HTML、CSS 和 JavaScript）配合使用，使 Web 应用开发比以往更简单、更快捷“。当你学习它的时候，我相信你会被它的很多新特效所吸引。\n\n#### 优点\n\n1. 动态视图：以前从来没有想过 js 可以如此扩展 HTML 的属性，但是 Angular 做到了，它替我们静态的 HTML 加了很多扩展性功能，有一种让 HTML 由死变活的感觉。\n2. 完善：是一个比较完善的前端 MVW 框架，包含模板，数据双向绑定，路由，模块化，服务，依赖注入等所有功能，模板功能强大丰富，并且是声明式的，自带了丰富的 Angular 指令。\n3. Google 维护：Angular 有 Google 来维护，无疑有了一个强大的后台，对于推广和维护明显比 Vue 和 avalon 有优势，社区也非常活泼，能够很好促进它的发展。\n4. Angular & Ionic：[Ionic](http://ionicframework.com/){:target=\"_blank\"}，这俩就是一个好基友，Ionic 通过用 Angular 为了创建一个框架，最适合开发的丰富和强大的应用程序。上次于知乎回答了[链接](http://www.zhihu.com/question/27210335/answer/35713635){:target=\"_blank\"}。\n\n#### 缺点\n\n1. 大而全：学习起来有难度，对于我来讲学习曲线很曲折，比较难理解一些。\n2. 推翻重写：前段时候逛社区发现 Angular2 会把之前的推翻重写，两个框架的改变很大，基本是两个框架了，等于是说等到 2.0 出来后又需要从头开始。正如徐飞所说 2.0 的流行至少还要 3 年。不跳票的情况下，1 年\n 之后才有稳定版，这个稳定版应该不支持很多浏览器了，稳定版一段时间内是没有任何周边的，所以，目前学 1.3 不能算是无效投资。\n3. 不支持 IE8 以下，貌似 2.0 变得只支持移动端了，等到出来后再看吧。\n\n### Avalon\n\n[Avalon](https://github.com/RubyLouvre/avalon){:target=\"_blank\"}是司徒正美老师所写的个简单易用迷你的 MVVM 框架，它最早发布于 2012.09.15，为解决同一业务逻辑存在各种视图呈现而开发出来的。常常可以看到老师推广他的 Avalon，出了很多教程，无疑对国内学习 Avalon 的人提供了巨大方便。\n\n#### 优点\n\n1. 使用简单，在 HTML 中添加绑定，在 JS 中用 avalon.define 定义 ViewModel，再调用 avalon.scan 方法，它就能动了！\n2. 兼容到 IE6 (其他 MVVM 框架，KnockoutJS(IE6), Angular(IE9), EmberJS(IE8), WinJS(IE9) )，另有 avalon.mobile，它可以更高效地运行于 IE10 等新版本浏览器中。\n3. 没有任何依赖，不到 5000 行，压缩后不到 50KiB。\n4. 支持管道符风格的过滤函数，方便格式化输出。\n5. 局部刷新的颗粒度已细化到一个文本节点，特性节点。\n6. 要操作的节点，在第一次扫描就与视图刷新函数相绑定，并缓存起来，因此没有选择器出场的余地。\n7. 让 DOM 操作的代码近乎绝迹。\n8. 使用类似 CSS 的重叠覆盖机制，让各个 ViewModel 分区交替地渲染页面。\n9. 节点移除时，智能卸载对应的视图刷新函数，节约内存。\n10. 操作数据即操作 DOM，对 ViewModel 的操作都会同步到 View 与 Model 去。\n11. 自带 AMD 模块加载器，省得与其他加载器进行整合。\n\n#### 缺点\n\n1. 不能监听数组元素的属性变化，在 ng 中我们可以通过$watch一个表达式实现这功能（这是引起ng性能瓶颈的元凶之一），但avalon的$watch 只能监听当前 VM 的当前这一层的属性变动。\n2. 没有公开出来的前端集成解决方案（负责生成当前项目的手脚架，上线代码检测，JS，CSS 合并，图片合并，压缩，上传到目标服务器……）。\n3. OniUI 的皮肤不够好看，许多人说要配合 boostrap，但社区还没有人主动站出来做这事。\n\n### 备注\n\n这其实是我知乎上面答得一个问题的总结，写了一个晚上，故收藏下来了。"} {"title":"JavaScript 的加载和执行性能优化","date":"2015-02-03","language":"zh-CN","summary":"管理浏览器中的JavaScript代码是一个棘手的问题，因为代码在执行过程中会阻塞浏览器的其他进程，比如用户界面的绘制。每次遇到 script 标签，页面都必须停下来等待代码下载（如果是外链文件）并执行，然后继续处理其他部分。尽管如此，还是有一些方法减少 JavaScript 对性能的影响 ...","categories":["Study"],"url":"https://tw93.fun/2015-02-03/High-Performance-JavaScript-1.html","markdownUrl":"https://tw93.fun/2015-02-03/High-Performance-JavaScript-1.md","translation":{"language":"en-US","title":"JavaScript Loading Performance","url":"https://tw93.fun/en/2015-02-03/High-Performance-JavaScript-1.html","markdownUrl":"https://tw93.fun/en/2015-02-03/High-Performance-JavaScript-1.md"},"contentMarkdown":"管理浏览器中的 JavaScript 代码是一个棘手的问题，因为代码在执行过程中会阻塞浏览器的其他进程，比如用户界面的绘制。每次遇到 script 标签，页面都必须停下来等待代码下载（如果是外链文件）并执行，然后继续处理其他部分。\n尽管如此，还是有一些方法减少 JavaScript 对性能的影响。\n\n### 脚本位置\n\n大多数浏览器都使用单一进程来处理用户界面（UI）更新和 JavaScript 脚本执行，所以同一时刻只能进行其中一件事情。IE8，firefox，safari，chrome 都允许并行下载 JavaScript 文件，遗憾的是，JavaScript 的下载仍会阻塞其他资源的下载，所以推荐所有的 script 标签都尽可能放到/body 标签的底部。\n\n### 组织脚本\n\n由于每个 script 标签的初始下载时候都会阻塞页面渲染，所以减少页面包含的 script 标签数量有助于减少这一情况，无论是外链文件还是内嵌脚本都是如此。\n这里可以使用[Grunt](http://www.gruntjs.org/){:target=\"_blank\"}的内置 concat 工具来合并我们的脚本，通过 min 工具来压缩我们的脚本。 \n那么什么是 Grunt 呢？Grunt 是一个基于任务的 JavaScript 项目命令行构建工具，运行于 Node.js 平台。Grunt 能够从模板快速创建项目，合并、压缩和校验 CSS & JS 文件，运行单元测试以及启动静态服务器。\n\n### 无阻塞的脚本\n\n由于尽管下载一个较大的 javascript 文件只产生一次 HTTP 请求，却会锁死浏览器一大段时间，为了避免，需要逐步加载 javascript 文件，我们可以在页面加载完成后才加载 javascript 代码，也就是说 window 对象的 load 触发后再下载脚本。 \n1.defer: \nDefer 属性指明本元素所含脚本不会修改 DOM，因此代码能够安全地延迟执行。（只有 E4+和火狐 3.5+支持，还有 defer 属性的 script 是在 onload 事件处理执行之前被调用）。 \n2.动态脚本元素\n```javascript\n//无论何时启动下载，文件的下载和执行过程都不会阻塞页面其他进程\nvar script = document.createElement(\"script\");\nscript.type = \"text/javascript\";\nscript.src = \"file.js\";\ndocument.getElementsByTagName[\"head\"](0).appendChild(script);\n\n//兼容 IE 和高级浏览器的，侦听获取脚本加载完成时的状态\nfunction loadScript(url, callback) {\n var script = document.createElement(\"script\");\n script.type = \"text/javascript\";\n if (script.readyState) { //IE\n script.onreadystatechange = function() {\n if (script.readyState === \"load\" || script.readyState === \"complete\") {\n script.onreadystatechange = null;\n callback();\n }\n };\n } else {\n script.onload = function() {\n callback();\n };\n }\n script.src = url;\n document.getElementsByTagName[\"head\"](0).appendChild(script);\n}\n``` \n3.动态脚本元素\n```javascript\nvar xhr = new XMLHttpRequest();\nxhr.open(\"get\", \"file.js\", true);\nxhr.onreadystatechange = function() {\n if (xhr.readyState == 4) {\n if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {\n //2XX表示有效响应，304表示从缓存读取\n var script = document.createElement(\"script\");\n script.type = \"text/javascript\";\n script.text = xhr.responseText;\n document.body.appendChild(script);\n }\n }\n};\n//优点：下载后可以先不执行，同样的代码支持全部主流浏览器\n//缺点：javascript 文件和所请求的页面必须在同一个域中，因此不适合 CDN 下载。\n//故一般大型的 web 应用都不会采用 XHR 脚本注入技术。\n```\n\n4.推荐一种无阻塞方式 \n```javascript\n//先添加动态加载所需的代码，然后加载初始化页面所需要的剩下的代码。\n//因为第一部的尽量精简，甚至可能只包含 loadScript()函数，\n//它的下载执行速度都很快，所以不会对于页面造成太多影响。\n//一旦初始化代码就位，就用它来加载剩余的 javascript。\n\n\n\n//还有一种方式直接将loadScript()函数嵌入页面，避免多一次请求\n//初始化代码压缩到最小尺寸的一些库 YUI Compressor,\n//YUI3的方式，LazyLoad，LABjs\n//很建议使用grunt工具来优化你的js\n```\n\n以上这些方法可以提高一些 JavaScript 的加载和执行的性能，下一篇文章想总结下关于数据访问方面的性能优化。"}