Night Sun
活动主页：[https://gmtc.geekbang.org/](https://gmtc.geekbang.org/)，主页中也有这次大会所有PPT的下载链接。 ## 几位圈内有影响力的人物 - 于潇，Google Flutter团队高级工程师 - 程劭非（winter），淘宝高级技术专家 - 胡天海（Sky），Twitter Web高级工程师 - 迷渡（Justjavac），善于钻研底层技术的比如v8引擎实现细节的大牛 当然，除了以上我认为比较重量级的大咖外，还有许多牛人，看这里：https://gmtc.geekbang.org/#speakers ## 几场印象深刻的分享 - [使用Flutter快速构建集美观与高性能于一体的移动应用](https://gmtc.geekbang.org/presentation/648) - 于潇，Google Flutter团队高级工程师 Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。个人认为虽然技术比较新，但是中间的一些理念以及性能都很不错，值得把玩。 - [跨容器高性能的离线化方案在美团的实践和探索](https://gmtc.geekbang.org/presentation/591) - 于秋，美团点评智能支付部前端负责人 这个是属于WPA技术范畴，大会上关于WPA的技术分享有好几场，个人觉得于秋的分享通俗易懂，是实战经验的一种总结和沉淀。 - [AR技术在58速运中的应用](https://gmtc.geekbang.org/presentation/730) -...
最近在使用数组排序的时候，一不小心犯了一个低级错误，分享一下，大家引以为戒。同时，提供一种能应对数组中含有各种特殊符号的排序方式。 ## 问题 在项目中需要将一个数组排序，于是我大致就是这么写的： ```js //示例，由大到小排序 var ary = [1,3,5,4]; ary.sort(function(a,b){ return a < b; }); //结果：[5,4,3,1] ``` 由于忘记自定义sort函数了，简单在控制台Console里跑了一下，这个是OK的，于是代码就这么去写了，没想到就出问题了。。。 问题是什么呢？看下面的例子： ```js var ary = [5, 8, 7, 1, 2, 3,...
## 背景 最近在使用组件的时候，自定义了一个组件，在html中写法如下： ```html ... ``` 于是突然就想到，这样的html标签，在css中该如何写呢？比如下面的写法肯定会报错： ```css comp:table{ color: red; } ``` 那么如果对于这种自定义html标签，对于css来说就是selector中有特殊字符了，该怎么处理呢？ ## 解惑 对于CSS中含有冒号的写法，在CSS专业属于中，叫：`Namespace` 即命名空间，参考：[Using Namespaces with CSS](https://msdn.microsoft.com/en-us/library/ms762307(VS.85).aspx)。 上面的MSDN文章中给出的解决方案就是加反斜杠即可： ```css comp\:table{ color: red; } ``` 但是参考了stackoverflow中的评论，这种写法在IE8以及以下有兼容性问题，所以，最好的办法是将 `\:`转义为...
## 背景 跨域问题对于前端来说，是一个老生常谈的问题了，无论是平时工作中，以及面试中基本都会问到。本文将梳理常见的几种跨域的优缺点，以及建议的跨域解决方案。 ## 基础 什么是跨域？跨域有哪些解决方案？等等基础知识，请参考这篇文章，讲的比较细致，这里就不在啰嗦。 [https://segmentfault.com/a/1190000011145364](https://segmentfault.com/a/1190000011145364) ## 对比 我们在工作中，用的比较多的三种解决方案： | 方案 | 优点 | 缺点 | 适用场合 | | --------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | | JSONP...
字体的显示大小，与在CSS中指定的大小不一致，如下图：  详细的原因分析和解决方案：[Font Boosting](https://github.com/amfe/article/issues/10)
# JS解惑-连等表达式 ## 问题 如下3个表达式的区别： ```js //sample1 var str = 123; var str1 = 123; var str2 = 123; //sample2 var str = 123,str1 = 123,str2 = 123; //sample3 var...
## 背景 作为男人，可以没有车、没有房，但是怎么能没有自己的一块手表呢？但是当你花个几千甚至上万块买个牌子的表，第一次设置了日期后，第二天一看？时间没变！哇靠，是不是坏啦？莫慌，我来告诉你怎么设置这个日期。 ## 原理 在告诉你怎么设置这个日期前，我告诉你一下手表上的时间和日期的关系后，你肯定就会设置啦！ 原理是这样的：`时针走2圈，日期加1天`，也就是每24小时日期会跳一下。 还有一点要注意：手动调整了日期，是不会影响到时针走两圈，日期跳一下这个逻辑的。 ## 如何设置 知道了上面的原理，现在告诉大家该如何设置啦。 步骤如下： 1. 先不要手动调整日期，而是先调整时间，将时针调整过12点，看看日期跳了没？如果没有跳，就再转一圈，那么日期肯定会跳一下，因为上面的原理嘛！ 1. 当日期跳了以后，你就知道了，日期将要在时针转2圈以后会自动再跳一次！ 1. 这一步比较关键：这时候如果是上午，也就是12点以前，比如现在是早上9点多，那么你就调整时间到对应的时间即可。如果是下午，比如现在是15点（下午3点），这时候你就需要将时针多转一圈，在第二圈的3点停下即可。为什么要多转一圈呢？因为刚才说了时针走两圈，日期加一天，如果是上午，那么时针到晚上24点，正好可以转两圈；如果是下午，那么你就需要人工走一圈，保证到晚上24点可以转2圈，这样才能保证日期到晚上24点，能自动跳。 1. 当时间设置好了以后，接下来就是手动设置日期了，今天是几号就设置几号就行了。 ## 后续 以上第3步，如果现在是下午的时候，你没多转一圈时间，而是直接设置了时间。那么，日期将会在第2天中午12点才能自动加一天，因为这时候才转了2圈。 > 不知道我上面讲的原理，你搞清楚了没？
# js解惑-Array.[method].call有什么作用 ## 背景 最近在项目中，看到有同事写一个数组的方法的时候，习惯性的用以下写法： ```js * [].forEach.call(array,fn); * [].map.call(array,fn); * [].sort.call(array,fn); ... ``` 我的第一个想法是，为啥对于一个数组不直接写成： ```js * array.forEach(fn) * array.map(fn) * array.sort(fn) ``` 询问其原因后，同事的说法是：`在有些书上说过，这么写保险，保证数组的方法万无一失可以调用，不报错`。 ## 观点 同事的出发点没错，就是保证书写代码的健壮性。但我个人的观点是，这种不管三七二十一统一都调用 `.call` 来保证功能可用的方法，在一定程度上，牺牲了代码的可读性，同时给代码增加了一些冗余。 为什么这么说呢？我们先看看同事的这个...
# 经验分享-jQuery.extend使用注意 ## 问题 最近项目中有个需求，就是查询条件可以动态追加，也就是有个按钮，点击后增加查询条件，比如：查询条件中有个select，点击添加，就多一个select。 于是出现的问题是，添加一个select，option的默认值就是上一个select中选中的值，而不是默认选择第一个！ ## 原因 实现思路大致为： 1. 将select中的值放到一个数组list中； 1. 每次新增select，就copy这个数组的内容，然后绑定到mvvm框架的vm对象上 1. 前端渲染出来，同时增加双向绑定功能 大致实现思路是： ```js var ary = { type1 : [{ id : 1, name : 'name1'...
# 源码目录树构建技巧 曾几何时看到别人的代码目录展示如下，非常的漂亮，于是我就把别人的这棵树拷贝过来，一个个修改变成自己的树，如下： ```js project ├── dist │ ├── css │ │ └── ... │ │ │ └── js │ ├── ... │ │ ├── ... │ │ ├── ......