纸上得来终觉浅，绝知此事要躬行

前言

最近学习vue源码看到下面代码

心里不由WTF,查了下原来是flow代码,就立马去官网把flow文档撸了一遍，网上又找了几遍文章，做下总结

纸上得来终觉浅，绝知此事要躬行

_name形式私有

ES6 中有类语法，定义类变得简单了

1
2
3
4
5
6
7
8
9

class Person {
    constructor(name) {
        this._name = name;
    }
    
    get name() {
        return this._name;
    }
}

1
2

Person james = new Person("James");
james._name = "Tom";        // God Save Me

纸上得来终觉浅，绝知此事要躬行

看到阮一峰一篇关于内存泄漏的文章，发现很全，ES6、node相关也都有,个人收益较大部分是weakmap，weakset部分——————原文猛搓

什么是内存泄漏？

程序的运行需要内存。只要程序提出要求，操作系统或者运行时（runtime）就必须供给内存。

对于持续运行的服务进程（daemon），必须及时释放不再用到的内存。否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。

不再用到的内存，没有及时释放，就叫做内存泄漏（memory leak）。
有些语言（比如 C 语言）必须手动释放内存，程序员负责内存管理。

1
2
3
4
5
6

char * buffer;
buffer = (char*) malloc(42);

// Do something with buffer

free(buffer);

上面是 C 语言代码，malloc方法用来申请内存，使用完毕之后，必须自己用free方法释放内存。

纸上得来终觉浅，绝知此事要躬

前言

前段时间看到尤雨溪推荐了一篇vue源码的文章，自己一直也想研究下源码，这几天抽空看了，原文猛戳

原本文章的名字叫做《源码解析》，不过后来想想，还是用“源码学习”来的合适一点，在没有彻底掌握源码中的每一个字母之前，“解析”就有点标题党了。建议在看这篇文章之前，最好打开2.1.7的源码对照着看，这样可能更容易理解。另外本人水平有限，文中有错误或不妥的地方望大家多多指正共同成长。

补充：Vue 2.2 刚刚发布，作为一个系列文章的第一篇，本篇文章主要从Vue代码的组织，Vue构造函数的还原，原型的设计，以及参数选项的处理和已经被写烂了的数据绑定与如何使用 Virtual DOM 更新视图入手。从整体的大方向观察框架，这么看来 V2.1.7 对于理解 V2.2的代码不会有太大的影响。该系列文章的后续文章，都会从最新的源码入手，并对改动的地方做相应的提示。

很久之前写过一篇文章：JavaScript实现MVVM之我就是想监测一个普通对象的变化，文章开头提到了我写博客的风格，还是那句话，只写努力让小白，甚至是小学生都能看明白的文章。这不免会导致对于某些同学来说这篇文章有些墨迹，所以大家根据自己的喜好，可以详细的看，也可以跳跃着看。

纸上得来终觉浅，绝知此事要躬行

前言

中文原文（“大漠”，W3CPlus创始人，目前就职于手淘。）猛搓http://www.w3cplus.com/css3/playing-with-css-grid-layout.html（原文很多概念并未涉及，个人建议将作者建议的一些中文外文链接参考也阅读了，以期全面了解和掌握）

自从去年下半年开始，CSS Grid布局的相关教程在互联网上就铺天盖地，可谓是声势浩大。就针对于Web布局而言，个人认为Grid布局将是Web布局的神器，它改变了以往任何一种布局方式或者方法。不管以前的采用什么布局方法都可以说是一维的布局方式，而Grid最大的特色，采用了二维布局。@Rachel Andrew也一直致力于完善Grid的规范。

就我个人而言，我也一直在不断的关注这个布局利器的相关更新，自从最初规范的出来，到目前规范的完善。在站上也不断的在更新CSS Grid布局的使用。虽然这方向的教程已经很多了，但各有千秋，我追求以最简单，最直接的方式来阐述它的使用方式方法。让初学者能尽快的掌握其使用规则。

前段时间@Mirza Joldic在Medium上发布了一篇文章，通过几个Gif动态非常形象的阐述了CSS Grid的几个核心概念以及使用方法，今天我就借花献佛，用这几张图让初学者快速掌握CSS Grid的核心概念和使用技巧。

Web布局的历史演变

自从Web出来至今，Web的布局也经过了几个演变，下图可以一目了然：

纸上得来终觉浅，绝知此事要躬行

前言

前段时间做阿里暑期实习笔试题目，抽到的试题最后一道要求写个组件监听页面所有ajax请求，当时大概能猜到要改写XMLHttpReuqest对象，不过最后还是没写出来，回来查了下资料：

1. 若Ajax请求是由jQuery的$.ajax发起的，默认情况下可以使用 jQuery的Global Ajax Event Handlers监听到Ajax事件，
2. 然而我遇到的却是用原生JavaScript发起的Ajax请求，所以这种方法行不通。
3. 还有其他方法，比如说 Pub/Sub，但是这个发起请求的 js 代码我是无法改动的，也就不存在向代码里添加 publish 的问题。同理，jQuery 的 .bind 和 .trigger 也无法使用。

最后的方案：实现主要是两点：**override XMLHttpRequest**和自定义事件（这一块红宝书有讲，也看过，并没有重视，自己没有好好钻研，怨不得别人）

纸上得来终觉浅，绝知此事要躬行

前言

原文猛戳月影大大博客—十年踪迹—-,读了一遍干货很多，先转过来，后面再慢慢消化。
这是第三届 360 前端星计划的选拔作业题。600多名学生参与了解答，最后通过了60人。这60名同学完成的不错，思路、代码风格、功能完成度颇有可取之处，不过也有一些欠考虑的地方，比如发现很多同学能按照需求实现完整的功能，但是不知道应当如何设计开放的 API，或者说，如何分析和预判产品需求和未来的变化，从而决定什么应当开放，什么应当封装。这无关于答案正确与否，还是和经验有关。

纸上得来终觉浅，绝知此事要躬行

前几天看阮一峰微博发了个简略的响应式字体的代码，专门搜了下文章系统地学习了一遍—–原文猛搓——
本文样式代码采用 SCSS。

前言

那么多的文章讲了响应式的网站如何布局，使用 CSS 如何实现，如何 Blah Blah 的。但是，我们都忘了很重要的一点——对字体大小的响应式控制。
现在的很多网站，从布局上来说，尽管是响应式的(当然，或许可以说成所谓响应式的)。但是，从字体上来说，却不一定是响应式的。虽然，每个网站可能会通过某些方式(比如频繁使用@media )来让自己的网站在不同的屏幕大小下显示不同大小的字体，但是，这样不能叫做响应式，这只是一种适应式的做法。

那么，怎么样才能对我们的 font-size 实现真正的响应式呢？

我们需要做的主要有以下两点：

1. 制定一个最大的和最小的屏幕宽度值，我们的 font-size 应该是在这个屏幕范围内平滑均匀的变化；
   不可能让字体大小一直不停的变化。试想一下，自己一直缩小或者方法浏览器，字体一直变小或者变大的场景。

2. 制定最大和最小的 font-size，屏幕大小小于最小的屏幕宽度值的时候，应用最小的 font-size，反之，应用最大的 font-size；

OK，计划制定好了，那么，应该如何实施呢？我们需要用到哪些技术呢？
其实要用到的技术不多，只是，我们需要把脑子转一下。

• @media：CSS Level 3 提供的媒体查询，只要做过响应式，或者任何适应屏幕功能的肯定用过这个属性。所以，在此不过多解释此属性，详细可查看 @media | MDN
• vw：Viewport 单位，1vw 相当于屏幕宽度的百分之一。此处也不过多解释，详细可查看 length | CSS
• calc：这是 CSS 提供的一个非常强大的属性，可以用来动态计算 CSS 的值。我们的功能主要就是通过这个函数来实现。详细可查看 calc | MDN

OK，需要的技术也齐全了。那么，现在就来一步一步实现。

纸上得来终觉浅，绝知此事要躬行

前言

对于vue之前一直都是看官方文档，做一些小的demo，没有完整做过练手项目，慕课网上看到滴滴vue.js权威指南的作者黄轶评价很好，完整的学习了一遍，对于vue的理解也有更大提高，不过视频是网上找的没有花钱买（以后有钱了一定支持作者版权）是vue1.0版本，而构建项目时已经是2.0了，而且很多npm依赖包也有升级，踩了很多坑，做下总结

vue-router

html节点创建。

2.0默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签，比1.0直接写死的好处(摘自官方文档):

1. 无论是HTML5 history模式还是hash模式，表现行为一致，所以，当你要切换路由模式，或者在IE9降级使用hash模式，无须作任何变动。
2. 在 HTML5 history 模式下，router-link 会拦截点击事件，让浏览器不在重新加载页面。
3. 当你在 HTML5 history 模式下使用 base 选项之后，所有的 to 属性都不需要写（基路径）了。

1
2
3
4
5
6
7
8
9
10
11

   <!-- vue-router1.0创建路由 -->
   <a v-link="{ path: '/foo' }">Go to Foo</a>
   <a v-link="{ path: '/bar' }">Go to Bar</a>
   <!-- 2.0使用 router-link 组件来导航. -->
   <!-- 通过传入 `to` 属性指定链接. -->
   <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
   <router-link to="/foo">Go to Foo</router-link>
   <router-link to="/bar">Go to Bar</router-link>
   <!-- 路由出口没有神马变化 -->
   <!-- 路由匹配到的组件将渲染在这里 --> 
<router-view></router-view>

值得一提的是2.0将若切换路由时要保留之前状态，将keep-alive属性改成<keep-alive></keep-alive>标签

js定义路由

2.0定义路由更加方便，删除了一些方法，创建router，可以直接将组件作为一个对象传入，然后把router挂载到根实例就好

纸上得来终觉浅，绝知此事要躬行

前言

之前放大镜效果都是用jquery的插件，具体实现也没认真想过，看到一个demo感觉不错，mark下来，原来地址猛戳

由项目需要，原生写了个详情页图片放大镜的效果，扔上代码供学习分享，也作为日常笔记…

效果如图(例子中偷偷链了张天猫的图片，希望没啥事 -。-)：