blog
blog copied to clipboard
Hugo-seth
blog
> 原文地址：[Vue.js Tutorial: A Prerendered, SEO-Friendly Example [Live Demo] - Snipcart](https://snipcart.com/blog/vuejs-tutorial-seo-example) > 原文作者：Maxime Laboissonniere “受不了了，我们内部的报告面板太难用了”，我们的生产经理生气的说。他尝试下载数据的 app 简直是个灾难。 “Max ，我们需要让它更好用，你能解决吗”， “说实话，我宁愿做一个全新的 app”，我笑着说。 “好，按你说的做。那就交给你了，朋友”， 我保持微笑的搓了搓手。终于有机会使用每个人都在讨论的 JS 框架：`Vue.js` 了。 ------------------------------- 我是正文开始的分割线 ------------------------------ 我刚写完上述的...
PWA（Progressive Web Apps）是谷歌近几年一直在推进的 web 应用新模型。PWA 借助 Service Worker 缓存网站的静态资源，甚至是网络请求，使网站在离线时也能访问。并且我们能够为网站指定一个图标添加在手机桌面，实现点击桌面图标即可访问网站。 # [Web App Manifest](https://developers.google.com/web/fundamentals/web-app-manifest/?hl=zh-cn) `Web App Manifest` 是一个 `JSON` 文件，它用来定义网站添加到桌面的图标以及从桌面图标进入网站时的一系列行为，如：启动样式，全屏主题等。 先创建 `manifest.json`： ``` { "name": "blog-pwa", "short_name": "blog-pwa", "icons": [ {...
> 原文地址：[Upgrading from Node 6 to Node 8: a real-world performance comparison](https://hackernoon.com/upgrading-from-node-6-to-node-8-a-real-world-performance-comparison-3dfe1fbc92a3) > 原文作者：[David Gilbertson](https://hackernoon.com/@david.gilbertson) Node 8 已经发布了，你听说了没？他们说新版本的速度更快了。 但是没有任何数字的话，更快仅仅只是几个字。 好在我有一个很大的 React 网站运行在 Node 6 上，并且有 2 个小时的空闲。 更新到 Node 8...
[上一篇文章](https://github.com/Hugo-seth/blog/issues/16)我们了解了怎样实现一个简单模板引擎。但这个模板引擎只适合静态模板，因为它是将模板整体编译成字符串进行全量替换。如果每次数据改变都进行一次替换，会有两个最主要的问题： 1. 性能差。`DOM` 操作本身就非常大的开销，更别说每一次都替换这么大的量。 2. 破坏事件绑定。这个是最麻烦的，如果我们没有给解绑移除 `DOM` 绑定的事件，还会造成内存泄露。而且每一次替换都要重新绑定事件。 因此，没有人会将这种模板引擎用来编译动态模板。那我们如何编译动态模板呢？ 回答这个问题之前，我们先要了解前端的世界何时出现了动态模板：它是由 MVVM 框架带来的，动态模板是 MVVM 框架的视图层（view）。我们知道的 MVVM 框架有 `knockout.js`、`angular.js`、`avalon` 和 `vue`。 对于这些框架，大部分人最熟悉的应该就是 `vue`，所以我下面也是以 `vue 1.0` 作为参考，来实现一个功能更简单的动态模板引擎。它是框架自带的一个功能，让框架能够响应数据的改变。从而刷新页面。 MVVM 动态模板的特点是能最小化刷新：哪个变量改变了，与之相关的节点才会更新。这样我们就能避免上面提到的静态模板的两大问题。 要实现最小化刷新，我们要将模板中的每个绑定都收集起来。这个收集工作是框架在完成第一次渲染前就已经完成了，每个绑定都会生成一个 `Directive` 实例： ```...
对现在的前端来说，模板是非常熟悉的概念。毕竟现在三大框架那么火，不会用框架还能叫前端吗🐶，而框架是必定有模板的。那我们写的模板是如何转换成 HTML 显示在网页上的呢？ 我们先从简单的说起，静态模板一般用于需要 SEO 且页面数据是动态的网页。由前端编写好静态模板，后端负责将动态的数据和静态模板交给模板引擎，最终编译成 HTML 字符串返回给浏览器。这种时候我们用到的模板引擎可能是远古的 jsp，或是现在用的比较多的 pug（原来叫 jade）、ejs。 模板引擎做的就是编译模板的工作。它说白了就是一个函数：将模板字符串转换成 HTML 字符串。 我们先写一个最简单的静态模板编译函数： # 正则替换 我们的模板和数据如下： ``` const tpl = 'hello，我是{{name}}，职业：{{job}}' const data = { name: 'hugo', job:...
在单页应用中，通常由前端来配置路由，根据不同的 url 显示不同的内容。想要知道这是如何做到的，首先得了解浏览器提供的两大 API： 1. `window.location` - `location.href` - `location.hash` - `location.search` - `location.pathname` 2. `window.history` - `history.pushState()` - `history.replaceState()` - `history.go()` - `history.back()` - `history.forward()` # window.location 我们先了解 location...
> 原文：[JavaScript. The Core: 2nd Edition](http://dmitrysoshnikov.com/ecmascript/javascript-the-core-2nd-edition/) > 作者：[Dmitry Soshnikov](http://dmitrysoshnikov.com) 文章其他语言版本：[俄语](http://dmitrysoshnikov.com/ecmascript/javascript-the-core-2nd-edition-rus/) 这篇文章是 [JavaScript. The Core](http://dmitrysoshnikov.com/ecmascript/javascript-the-core/) 演讲的第二版，文章内容专注于 ECMAScript 编程语言和其运行时系统的核心组件。 **面向读者：** 有经验的开发者、专家 [文章第一版](http://dmitrysoshnikov.com/ecmascript/javascript-the-core/) 涵盖了 JS 语言通用的方面，该文章描述的抽象大多来自古老的 ES3 规范，也引用了一些 ES5 和 ES6（ ES2015 ）的变更。...
> 原文地址：[Redux or MobX: An attempt to dissolve the Confusion](https://www.robinwieruch.de/redux-mobx-confusion/) > 原文作者：[rwieruch](https://www.robinwieruch.de) 我在去年大量的使用了 [Redux](https://github.com/reactjs/redux)，但我最近都在使用 [Mobx](https://github.com/mobxjs/mobx) 来做状态（state）管理。[似乎现在社区里关于该选什么来替代 Redux 很自然地成为了一件困惑的事](https://www.reddit.com/r/reactjs/comments/4npzq5/confused_redux_or_mobx/)。开发者不确定该选择哪种解决方案。这个问题并不只是出现在 Redux 与 Mobx 上。无论何时，只要存在选择，人们就会好奇最好的解决问题的方式是什么。我现在写的这些是为了解决 Redux 和 Mobx 这两个状态管理库之间的困惑。 大部分的文章都用 React 来介绍 Mobx...
vue2出来也一段时间了，各方面的反响都挺好的，作为一个一直在用 ng1 的前端，必须找时间熟悉一下大热的 vue2。虽然工作上还在用 ng1，但我自己前段时间闲暇时也做了个 ng2 的 demo 项目。有了 ng1比较足的经验和 ng2 的小试牛刀，vue2 对于我可以说是上手毫无难度的。 我选的是 github 的 api 来提供数据， vue2 做前端展示。[效果点击查看](https://hugo-seth.github.io/blog/)，[源码](https://github.com/Hugo-seth/vue2-blog)，欢迎各位大大拍砖。  其实也只是简单的尝试了下 vue2，并没有用到很深的东西，用到的全家桶也只有 vue-router，当然也因为 vue-resource 被尤大抛弃了，不过确实不好用，所以我选的是 axios 。 为了快速起步，肯定选 vue-cli...
ejs本身是不支持的layout的，三年前就有人提了PR实现了layout和block（[详情请戳](https://github.com/tj/ejs/pull/147)），但一直都没被合并，不懂是因为什么。 在进去本文的主要内容之前，先回顾一下ejs的项目文档提供了哪几种用法（[项目链接](https://github.com/tj/ejs)）： - 表达式 `` - 变量赋值，如果是html，标签将会转义 `` - 变量赋值，不转义 `` - 引入其他文件（html或ejs） 可以说功能已经比较齐全了。但是既然有 include，为什么没有 extend 呢？相信用过 jade 的朋友一定会发出这样一句怒吼。这就是我今天要讲的内容。 用 express 的同学不必担心这个问题，因为有一个插件叫[ejs-locals](https://github.com/RandomEtc/ejs-locals)，用法写得非常清楚，看一遍基本都会了。 那我要是用的 koa 呢？大家肯定会说：mdzz，肯定有插件的，搜一下不就行了。是的，插件是有，我搜了好久终于找到一个叫 [koa-ejs](https://github.com/koajs/ejs) 的（也许是我的英语太水了）。但不要高兴的太早，因为我估计没多少人能一下就看懂它的 README，反正我是看不懂。不过经过我的脑补及实践后已经彻底掌握了它的套路。 ```bash var...