nextjs 框架学习与实战

发表于 2017年 12月 5日

好久没写博客了，坚持写博客真的是一件很辛苦的事情。因为总是会有各种各样的事情耽搁，真的是很佩服阮一峰和廖雪峰老师，能够坚持更新博客，日复一日。平时其实笔记随手记得还是很多的，但要统一整理到博客上，并且写出一篇好的博客，真的需要大量的时间和资料去支持，加上深刻的理解。

唉，但愿我也能坚持的久一点。

1. 渲染原理分析与对比： fer & ssr & 同构

fer：浏览器请求url，传给浏览器的页面只有一个backbone，数据获取一般通过ajax和fetch的方式，拿到后插入dom和需要的css，注入到需要渲染位置，最终生成完整页面。
ssr：浏览器请求url，数据在服务器端就会塞给模板，生成完整的html和样式，然后推给浏览器，直接输出页面。

fer的优势在于不用刷新页面，体验增强，但由于爬虫只会爬取第一次加载时的html，所以seo不友好，google据说可以爬js，但有墙的影响，本身用途也不大。第二个缺点是首屏时间过长，毕竟一口气加载一堆js和css肯定很慢。不过代码切割和动态载入可以弥补，后续会讲到
ssr的优势自然就是可以方便seo。缺点同上。

同构本质上就是fer + ssr的结合体，流程是第一次访问页面时是服务器渲染，拿到的是完整html，之后的渲染全部是浏览器渲染，组件是通用的。基本上弥补了fer不能SEO的缺陷，目前知乎个人页就是同构的产品。

2. 同构基础

React 为了满足服务器渲染的要求，专门提供了对应的接口。这也是同构能够产生的根源。

React.renderToString

把 React 元素转成一个 HTML 字符串，因为服务端渲染已经标识了 reactid，所以在浏览器端再次渲染，React 只是做事件绑定，而不会将所有的 DOM 树重新渲染，这样能带来高性能的页面首次加载！同构黑魔法主要从这个 API 而来

#####React.renderToStaticMarkup

相当于一个简化版的 renderToString，如果你的应用基本上是静态文本，建议用这个方法，少了一大批的 reactid，DOM 树自然精简了，在 IO 流传输上节省一部分流量。

3. 实战nextjs

文档资料：https://juejin.im/post/59f72fef518825569538ef5a#heading-24
项目实战：next-demo

东西太多太杂了，直接看代码是最快的（懒得整理了）

4. 杂食堆 – 爬坑留念

history 缺漏

router.push 相当于浏览器前进，保留历史记录，可以后退回来
router.replace 相当于url替换，是没有记录的，无法后退回来

decorator 装饰器\适配器

es7的黑魔法，js常用的装饰者模式的封装，也叫AOP。
应用：Mobx里observer模式,服务器端logger实现。
资料：http://taobaofed.org/blog/2015/11/16/es7-decorator/

fetch 竟然不支持IE11，操蛋啊
Mock 假数据，Mock.js + pure。

最初是通过拦截ajax提供数据。如果结合pure，可以尝试构建mockserver搭建
完美构造假数据，容易上手，方便替换。

VSCODE的JSON的智能提示，是通过JSON schema实现的

JSON schema 可以用来验证格式，并提供一些提示信息。

nodejs与其他语言配合有2种方式：

通过http或tcp协议，进行数据交换。就是通过ajax访问接口。
通过c++拓展调用，node-gyp是用来编译原生C++模块的，有很多包要跨平台使用，基本都是通过node-gyp进行编译实现。

es6 查遗补漏 — 参见MDN

find — 返回符合测试函数的第一个元素值
findIndex — 返回符合测试函数的第一个元素索引
includes — 查看数据是否包含某个值。
every —- 对数组整体进行判断，如果有一个值不符合要求则返回false，全部通过才返回true

给package.json 上锁

npm install –save-exact/-E

–save-exact/-E参数强制npm在package.json中写死固定的版本号，而不使用如~，^这类的范围符号

npm shrinkwrap

npm shrinkwrap命令会在项目路径下创建一个npm-shrinkwrap.json文件。该文件中包含了当前项目中所有依赖包的版本信息。把该文件提交到git中。其他人在clone该项目执行npm install时，npm检测到该文件后会按照文件中的信息完整的还原出完全相同的依赖树。从而解决版本不一致问题

yarn

直接yarn即可，自动生成yarn.lock文件，包含了当前项目中所安装的依赖包的版本信息。唯一的缺点就是其他人想要获得相同环境也要通过yarn安装。

React next 采坑攻略

发表于 2017年 11月 30日 | 分类于 hexo

最近终于完成了next架构的搭建，高度自定义，集成了dva、scss、antd。终于可以开始编写组件了。

主要是为了前后台同时用React写，组件复用。前台需要SEO的可以服务器渲染生成，后台搞成纯SPA应用

由于我个人极其不爽在jsx里写一大堆css，逻辑混乱，不支持各种高级特性。所以参考官网实例搞了好久。

同时支持css-in-js和scss内部注入组件。dva状态管理。

英语不好真的是硬伤啊，效率太低…

1. scss 全局配置：

next.config.js

const path = require("path");
const glob = require("glob");
module.exports = {
    webpack: (config, { dev }) => {
        config.module.rules.push(
            {
                test: /\.(css|scss)/,
                loader: "emit-file-loader",
                options: {
                    name: "dist/[path][name].[ext]"
                }
            },
            {
                test: /\.css$/,
                use: ["babel-loader", "raw-loader", "postcss-loader"]
            },
            {
                test: /\.s(a|c)ss$/,
                use: [
                    "babel-loader",
                    "raw-loader",
                    "postcss-loader",
                    {
                        loader: "sass-loader",
                        options: {
                            includePaths: ["styles", "node_modules"]
                                .map(d => path.join(__dirname, d))
                                .map(g => glob.sync(g))
                                .reduce((a, c) => a.concat(c), [])
                        }
                    }
                ]
            }
        );
        return config;
    }
};

pages/index.js 内部组件注入

import Stylesheet from "styles/index.scss";
...
<style dangerouslySetInnerHTML={{ __html: Stylesheet }} />

2. webpack编译警告，消除

There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
...

翻译

有多个模块名称仅仅大小写不同
这会导致在文件系统中产生一些不是预期的行为
使用唯一的写法

就是有一些模块名称相似，需要修改成不一样的。

3. 杂食堆

git 打分支

git branch -b “zhaihaoran”
会创建一个zhaihaoran的分支

git branch 可以查看所有分支信息

提交的时候，git push origin zhaihaoran
就可以在分支上进行提交

去除react-router的_k 参数

因为默认router是由hashHistory实现，由锚点实现，因为锚点不会导致页面跳转。因为 url 中 # 符号的存在，从 /#/ 到 /#/user/haishanh 浏览器并不会去发送一次 request
目的主要是为了兼容低版本浏览器。

去除的话可以改为现代浏览器的browserHistory，但是需要服务器端配合。

名词

ssr (Server Side Render) 服务器渲染
csr (Client Side Render) 客户端渲染
GPU、CPU、APU (声音处理器)
通过PCI/AGP/PCIE总线交换数据。GPU在浮点运算、并行计算等部分计算方面，明显高于CPU的性能

English

boilerplate 样板
insights 洞察
mutated 突变
can`t be reasigned 重新分配
traversal 遍历

JS动画比css快！

http://www.oschina.net/translate/css-js-animation

react-next

发表于 2017年 11月 28日

react next.js 学习

预备知识

目前渲染分为三种机制

后端渲染：php、ASP、Java等等，由服务器处理bolierplate然后一次吐给浏览器进行渲染
前端渲染：SPA应用，三大框架。由JS控制浏览器渲染机制，后端只负责model和model处理的逻辑
同构渲染：简单来说，就是两者的混合体，前后端共用js,首次渲染使用nodejs直出HTML，其他渲染均有JS控制完成

前端渲染相比后端优劣势

优势：

局域刷新，无需每次都进行完整页面请求
富交互性，懒加载
节约服务器成本。省电省钱，JS 支持 CDN 部署，且部署极其简单
JS 一次学习，到处使用。可以用来开发 Web、Serve、Mobile、Desktop 类型的应用

劣势

首屏加载时间过长；如果不进行优化，首次加载需要加载一大堆css和js文件，会有较长白屏。体验较差
不利于搜索引擎爬取内容（SEO）

同构渲染可以说汲取了两者的优势。是未来前端的方向

什么是nextjs

nextjs 是一个server端渲染react组件的开源库想要了解它的原因是

寻找React的SEO的解决方案中，无意发现的
star很多，维护很积极
服务器端渲染道听途说多，有必要实际了解下
多学总没有坏处

资料收集

http://sjy.github.io/2017/07/09/learn-next-js/
https://github.com/camsong/blog/issues/8

面试收获 --- 查遗补漏

发表于 2017年 11月 17日

总结一下，比第一次去腾讯面试感觉强了很多，说话相对流利了一些，心里也不太紧张了，不过语速还是偏快，知识体系相对过往完善了很多，补充了很多理论知识，不至于只能让面试官强行尬聊10分钟就结束,哈哈哈….
这次的问题还是基础不太扎实牢靠，竟然在一些弱智问题上答错了，可恶….,同时缓存这块还是需要恶补一下，这次一定要彻底弄清楚，不能一知半解。
不过能聊1个h，而且面试官对自己水平给予了肯定的评价，还是蛮开心的，同时也得到了沪江复试的机会。
不管结果怎么样，希望下次能发挥出全部的实力，而不是后悔当时没有好好准备。

1.最最基本的问题 — 变量提升！

var a = 1;
test()
function test() {
    console.log(a) // 1 错！
    var a = 2;
    console.log(a) // 2
}

没想到会在这种基础的问题上翻车,气死
首先在test函数内部，var a = 2声明后，变量a的声明会提升到test函数内部的顶部！

所以第一个console是可以拿到test内部的a变量的！。而不是向上级作用域寻找a变量。

所以答案是undefined

具体应用场景：

比如在前台www.iqidao.com有链接可以跳转到管理后台www.iqidao.com:10088,或可以跳转到管理论坛xxx.iqidao.com等等情况。这三个页面如果分属三个子项目的话，必然需要进行通信。需要保证跳转的时候登陆状态共享，而且可能包含国际化、用户配置的会话信息。

但我们知道cookie只能在同源中共享。有没有方法可以解决这个问题呢？
如何在项目之前共享cookie呢

实际面试的时候，可能不会问上面这么细致。不过即使问这么细致，我也答不出….

最后不废话了，开始解答，从背景开始，start！

1.cookie字段都包含哪些？

如上图所示：

name cookie的名称
value cookie的值
Domain 可以访问此cookie的域名。比如.baidu.com

注意：非顶级域名，如二级域名或者三级域名，设置的cookie的domain只能为顶级域名或者二级域名或者三级域名本身，不能设置其他二级域名的cookie，否则cookie无法生成。

顶级域名只能设置domain为顶级域名，不能设置为二级域名或者三级域名，否则cookie无法生成。

二级域名能读取设置了domain为顶级域名或者自身的cookie，不能读取其他二级域名domain的cookie。所以要想cookie在多个二级域名中共享，需要设置domain为顶级域名，这样就可以在所有二级域名里面或者到这个cookie的值了。
顶级域名只能获取到domain设置为顶级域名的cookie，其他domain设置为二级域名的无法获取。

Path 可以访问此cookie的页面路径,比如domain是abc.com,path是/test，那么只有/test路径下的页面可以读取此cookie。
Expires/Max-age cookie的过期时间，如果不设置的话，默认值是session,意思就是cookie和session一起失效.当浏览器关闭(不是浏览器标签页，而是整个浏览器) 后，此cookie失效。
Size cookie大小
HTTP cookie的httponly属性。若此属性为true，则只有在http请求头中会带有此cookie的信息，而不能通过document.cookie来访问此cookie。
Secure 设置是否只能通过https来传递此条cookie
SameSite

2.cookie非同源是如何判断的呢？

cookie通过domain和path属性判断，path和domain只要有一个不同，那就表示跨域，无法实现共享，而不同项目之间domain可能相同，而path一定是不同的

3.如何设置或进行跨源共享

设置document.domain = “iqidao.com”,可以实现二级域名不同，一级域名相同的跨域共享。

比如www.iqidao.com和aaa.iqidao.com，实际上他们2个域名地址访问的是同一个cookie。

3. LocalStorage和Ajax如何跨域通信

window.postMessage

这个是html5新出的API,这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。
举例来说，父窗口http://aaa.com向子窗口http://bbb.com发消息，调用postMessage方法就可以了

var popup = window.open('http://bbb.com', 'title');
popup.postMessage('Hello World!', 'http://bbb.com');

postMessage方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源（origin），即”协议 + 域名 + 端口”。也可以设为*，表示不限制域名，向所有窗口发送。

子窗口向父窗口发送消息的写法类似。

window.opener.postMessage('Nice to see you', 'http://aaa.com');

父窗口和子窗口都可以通过message事件，监听对方的消息。

window.addEventListener('message', function(e) {
  console.log(e.data);
},false);

上述方法可以读取到localStorage

AJAX 有3种方法可以跨源通信

JSONP 只能发get请求
WebSocket
CORS 允许任何类型

CORS需要浏览器和服务器同时支持

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

参考博文：http://www.ruanyifeng.com/blog/2016/04/cors.html

3. 如何拿到登录页端的短信验证码？手机验证码中4位和6位有什么区别？

这个是完全不知道，感觉是涉及到了xss防御和脚本注入的一些黑科技吧。查了很多资料没补上

手机验证码4位和6位的区别

6位验证码比4位更安全
目前常用的第三方短信发送验证码平台都是4或6位，
6位数字破解时间预计会超过验证码超时时间

如何拿到短信验证码？

4. 代理模式具体解释一下

为一个对象提供一个占用品或占位符，以控制他的访问

javaScript 设计模式回顾

发表于 2017年 11月 16日

好久之前看过AlloyTeam写的javascript设计模式与开发实践。当时似懂非懂，看的很仔细，但感觉没有对应的工作经验，无法深刻体会到具体的精髓，并不知其所以然。看了一段时间源码后，算是理解了一部分设计模式的精髓。此番回顾一下，重读一遍该书，以加深理解

1. 单例模式

文件只有单一类，所以方法全部聚集在原型链，目前最最常用的，不多说

代理实现单例模式，缓存代理

var ProxySingletonCreateDiv = (function(){
    var instance;
    return function( html ){
        if ( !instance ){
            instance = new CreateDiv( html );
        }
        return instance;
    }
})();

2. 策略模式

将具有多态（策略）或者状态发生变化的情况下，将策略转化为对象属性(策略)进行统一管理，同时可以减少很多if，优雅。

var strategies = {
    "S": function(salary) {
        return salary * 4;
    },
    "A": function(salary) {
        return salary * 3;
    },
    "B": function(salary) {
        return salary * 2;
    }
};
.....
var calculateBonus = function( level, salary ){
    return strategies[ level ]( salary );
};

应用场景，后台返回状态码、动画曲线库、表单验证规则库

var tween = {
    linear: function(t, b, c, d) {
        return c * t / d + b;
    },
    easeIn: function(t, b, c, d) {
        return c * (t /= d) * t + b;
    },
    strongEaseIn: function(t, b, c, d) {
        return c * (t /= d) * t * t * t * t + b;
    },
    strongEaseOut: function(t, b, c, d) {
        return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
    },
    sineaseIn: function(t, b, c, d) {
        return c * (t /= d) * t * t + b;
    },
    sineaseOut: function(t, b, c, d) {
        return c * ((t = t / d - 1) * t * t + 1) + b;
    }
};
var strategies = {
    isNonEmpty: function(value, errorMsg) { // 不为空
        if (value === '') {
            return errorMsg;
        }
    },
    minLength: function(value, length, errorMsg) { // 限制最小长度
        if (value.length < length) {
            return errorMsg;
        }
    },
    isMobile: function(value, errorMsg) { // 手机号码格式
        if (!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
            return errorMsg;
        }
    }
};
...
validator.add( registerForm.userName, 'isNonEmpty', '用户名不能为空' );
validator.add( registerForm.password, 'minLength:6', '密码长度不能少于6 位' );
validator.add( registerForm.phoneNumber, 'isMobile', '手机号码格式不正确' );

3. 代理模式

应用：

图片预加载，在加载图片前先用loading.gif来占位。
jquery事件代理绑定模式，在一个table的所有td下绑定事件

var myImage = (function() {
    var imgNode = document.createElement('img');
    document.body.appendChild(imgNode);
    return {
        setSrc: function(src) {
            imgNode.src = src;
        }
    }
})();
var proxyImage = (function() {
    var img = new Image;
    img.onload = function() {
        myImage.setSrc(this.src);
    }
    return {
        setSrc: function(src) {
            myImage.setSrc('file:// /C:/Users/svenzeng/Desktop/loading.gif');
            img.src = src;
        }
    }
})();
// 在加载前可以先用loading.gif来占位。
proxyImage.setSrc('http:// imgcache.qq.com/music/photo/k/000GGDys0yA0Nk.jpg');

4. 迭代器模式

jquery中的迭代器

$.each( [1, 2, 3], function( i, n ){
console.log( '当前下标为： '+ i );
console.log( '当前值为:' + n );
});

5. 观察者模式（发布-订阅）

目前浏览器的各种addEventLisener事件，都是观察者模式的应用
sub-pub模式定义了对象1对多的依赖关系

React中单向事件流，其中就有观察者模式，其中一个state发生变化，订阅state的components都会引起变化

自定义的发布-订阅模式的话：通用实现如下

var event = {
    clientList: [],
    listen: function(key, fn) {
        if (!this.clientList[key]) {
            this.clientList[key] = [];
        }
        this.clientList[key].push(fn); // 订阅的消息添加进缓存列表
    },
    trigger: function() {
        var key = Array.prototype.shift.call(arguments), // (1);
            fns = this.clientList[key];
        if (!fns || fns.length === 0) { // 如果没有绑定对应的消息
            return false;
        }
        for (var i = 0, fn; fn = fns[i++];) {
            fn.apply(this, arguments); // (2) // arguments 是trigger 时带上的参数
        }
    }
};

6. 装饰者模式

AOP装饰函数 _.before 和 _.after

7. 适配器模式

主要处理接口不匹配的问题。

用于统一变换接口最方便了。目的就是将一种类型的格式通过函数处理转变另一种格式,例子如下

// 目前的guangdongcity的字段格式如下，字段信息很少
var getGuangdongCity = function() {
    var guangdongCity = [{
        name: 'shenzhen',
        id: 11,
    }, {
        name: 'guangzhou',
        id: 12,
    }];
    return guangdongCity;
};
var render = function(fn) {
    console.log('开始渲染广东省地图');
    document.write(JSON.stringify(fn()));
};
render(getGuangdongCity);
...
// 但是突然有一天，收集到了一个完整的信息map，并且格式也发送了很大变化，如下
var guangdongCity = {
    shenzhen: 11,
    guangzhou: 12,
    zhuhai: 13,
    ...
};

想当初自己就是苦逼的一个一个改，包括后续获取数据的接口可能都要变化。这样效率极低，而且很容易出错。

更轻便的方法就是写一个数据格式的转换器

var getGuangdongCity = function() {
    var guangdongCity = [{
        name: 'shenzhen',
        id: 11,
    }, {
        name: 'guangzhou',
        id: 12,
    }];
    return guangdongCity;
};
var render = function(fn) {
    console.log('开始渲染广东省地图');
    document.write(JSON.stringify(fn()));
};
var addressAdapter = function(oldAddressfn) {
    var address = {},
        oldAddress = oldAddressfn();
    for (var i = 0, c; c = oldAddress[i++];) {
        address[c.name] = c.id;
    }
    return function() {
        return address;
    }
};
render(addressAdapter(getGuangdongCity));

生活常识（补）

发表于 2017年 11月 16日

为什么要常洗床单和被罩？

我们一周脱落的皮屑达28g。近乎一包薯片的重量！！
死皮是尘螨最喜欢的食物。一张1个月未清理的床上，大概会滋生出200万到300万只尘螨！！
尘螨的排泄物是家中主要的过敏源！一般很多皮肤问题大都是由这些东西造成的！！
螨虫大都喜欢温暖潮湿的床垫中，一只尘螨的寿命大概是3到4个月。在它的一生中会产生2400粒左右的排泄物……(god!)
排泄物中有一种高原蛋白。对于敏感体质的人来说，容易引起哮喘等症状

如何杀死螨虫呢？

除了常常更换床单外，吸尘器是最有效的手段。有效清理掉排泄物和它们的食物 – 皮屑。从源头控制螨虫

其他室内过敏源

除了尘螨，家中还有屋尘这个过敏原的混合物大 boss。科学家发现，屋尘是含有多种过敏原的混合「鸡尾酒」，包括尘螨及其排泄物、人类和动物死皮、宠物口水、霉菌孢子、花粉等。

有几个关于屋尘的冷知识可能会刷新大多数人的认知：

即使你家里没有养猫狗，你家的屋尘依然会有它们的毛发成分存在。猫狗的毛发具有粘性，它们往往会粘在鞋底、大衣上或随风飘落进入家中；
有些人对猫狗过敏，其实不是因为它们的毛发，而是宠物毛发上附着的口水。所以光是扫除毛发并不能除去宠物产生的过敏原；
花粉是自然界的“野孩子”，但是你室内养的玫瑰花并不会让你过敏，因为它是自花授粉；风媒授粉的植物花粉，以及蕨类植物的孢子，才是让你饱受花粉过敏症困扰的真正原因。

总结

看了一些科普文章，更加坚定了每半个月换一次床单的想法……
立刻下单给自己和老妈买了一个除螨吸尘器。
为改变生活习惯提供了一个无法拒绝的理由。

后续更新中…..

linux

发表于 2017年 11月 15日

linux bash 命令查遗补漏

ver 显示dos系统版本号
md(mkdir) 创建文件夹
ren(rename) 修改文件夹
ren aaa zhai
cat 将文件内容输入到终端上，只能在bash里用
diff 比较两文件不同
kill 9 杀进程
dir 展示目录详细信息
grep 用于查找文件中符合条件的字符串
grep hexo --color=auto *md 查找后缀为md格式的文件中包含hexo字符串的文件，并打印出来，hexo标红
find 查找
ps 列出进程信息 -l -x -a

tar 打包文件

压缩：tar -jcv -f filename.tar.bz2 要被处理的文件或目录名称  
查询：tar -jtv -f filename.tar.bz2  
解压：tar -jxv -f filename.tar.bz2 -C 欲解压缩的目录

time 测算一个命令运行时间

正则的一些查遗补漏

发表于 2017年 11月 14日 | 分类于正则

\b 表示单词边界，比如我想在一段话中精确找到单词im，或我想找eng结尾的所有单词，这时候就可以通过单词边界进行匹配。/\bim\b/ /\w+eng\b/g
构造函数中new RegExp()中一定要记得对反斜线\进行转义,在javascript中反斜线本身就是特殊字符，使用需要转义
var reg = new RegExp('\\w+eng\\b','g') //undefined
// reg = /\w+eng\b/g
"asd abc leng kkeng alkegl lkjengll".match(reg)
// ["leng","kkeng"]
\t 水平制表符，其实就是tab键占的空格！
[abc] 创建abc字符类，[^abc] 创建反向字符类，就是差集的意思,除了abc其他的都匹配
\w 的等价类就是[a-zA-Z_0-9] ，\s 是 [\t\n\x0B\f\r] 空白符

正则默认是贪婪模式，即最大程度地匹配，非贪婪模式则是说尽可能少地匹配，也就是说一旦成功不再继续尝试就是非贪婪模式。

// 贪婪模式
"123456789".match(/\d{3,6}/) //123456 而不是123
// 非贪婪模式，只要在量词后面加上？就可以了，比如\w+?
"123456789".match(/\d{3,6}?/g) // ["123","456","789"]

连续匹配python单词3次，可以通过分组功能实现(python){3},量词可以作用于组别上，

或 | 如下所示

"ByronCapser".replace(/Byron|Casper/g,"X") // XX
"ByronsperByrCapser".replace(/Byr(on|Ca)sper/g,"X") // XX

反向引用，比如想把2015-12-25 变成 12/25/2015 如何实现

"2015-12-25".replace(/(\d{4})-(\d{2})-(\d{2})/g,"$2/$3/$1") // "12/25/2015"
// $1,$2,$3可以捕获分组匹配的内容
// 如果不想捕获某个分组，只需要在分组内加上 ?: 就可以了  
"2015-12-25".replace(/(\d{4})-(?:\d{2})-(\d{2})/g,"$2/$1") // "25/2015"

split也可以用正则,比如如下的例子

"asd@lll.box*tem".split(/[@\.\*]/) //["asd","lll","box","tem"]

fetch 学习和小实践

发表于 2017年 11月 13日 | 分类于 fetch

fetch 简单介绍

选自：MDN https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API

Fetch API提供了一个获取资源的接口(包括跨网络)。可以看做是XMLHttpRequest的替代品

兼容性

fetch API

语法

Promise | Response fetch(input[, init]);

init
https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalFetch/fetch

基本概念及用法

Fetch 提供了对Request和Response对象的通用定义，可以结合service worker 、Cache API、又或是自定义的响应方式。

Fetch 提供了一个Javascript接口，用来访问和操纵HTTP管道部分。提供了全局的fetch方法
,相比于XML，他可以结合CORS进行跨域

fetch默认情况下不会从服务端发送或接受任何cookies，如果站点依赖用户session，会导致未经认证的请求。（要发送 cookies，必须设置 credentials 选项）

阅读全文 »

11月13日，杂食堆小记

发表于 2017年 11月 13日 | 分类于杂食堆

1. overflow:auto 的页面在ios端不能平滑滚动，有明显的卡顿，如何处理解决？

-webkit-overscroll-scrolling:touch;

这行代码在webkit内核浏览器里会开启硬件加速，所以性能会更好。
对于Safari来说，对于有-webkit-overflow-scrolling的网页，会创建一个UIScrollView，提供子layer给渲染模块使用

从前端开发的角度讲，只需要知道CSS的属性-webkit-overflow-scrolling是真的创建了带有硬件加速的系统级控件，所以效率很高。

第三方库：IScroll （推荐）
因为在某些落后版本的andriod端和IOS，还是不行。并不支持区域滚动。IScroll 基本都适配了，同时IScroll支持配置滚动条,专属触发事件等等。

2. 为什么字体字号一般选用偶数

偶数字号更容易与其他页面部分构成比例。不让一个100px的div中让一段文字居中。
window自带的字体一般只提供12,14,16px的点阵、奇数用的是小一号的字体点阵，只不过空间变大了，显得不协调不好看。（旧版浏览器）
现在来说知乎、豆瓣分别是13px,15px。基本上习惯使然。

3. 斗鱼直播长时间不在会给予用户提示，并切断直播流，节约流量，如何实现？

HTML5 Page Visibility

参考链接：http://www.cnblogs.com/zichi/p/5158745.html

4. document.write 和innerHTML区别

docuemt.write 是重绘整个页面，innerHTML可以重绘页面的一部分

首先，网站向服务器请求的时候，会自动带上cookie，这样增加表头信息量。Cookie 隔离，就是说，让请求资源的时候不带cookie。怎么实现呢？

传统做法：将css、js、图片等静态资源放在多个域名（CDN)下请求。这样可以跨过浏览器对统一主机名的并发连接上限（50连接数？），提高整体并发量。

cookie隔离技术则是通过使用多个非主要域名来请求静态文件，如果静态文件都放在主域名下，那静态文件请求的时候带有的cookie的数据提交给server是非常浪费的，还不如隔离开

因为cookie有域的限制。不能跨域请求，所以使用非主要域名的时候，请求头就不会带cookie，同时这种方式不会将cookie传入webserver，也减少了webserver对cookie的处理分析环节，提高了webserver的http请求的解析速度。

6. new 一个类，到底干了什么，类的静态方法，实例方法。

var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

类的静态方法、实例方法

7. html5shiv 干嘛用的? 原理是什么？

为了解决IE9以下的浏览器不识别html5元素，不能作为父节点包裹子元素，并且不能应用css样式。
html5shiv可以让其支持部分html5元素，并提供一些样式。

调用方式：

<!--[if lt IE9]>
<script type="text/javascript" src="scripts/html5shiv.js"></script>
<![endif]-->

原理：http://www.qdfuns.com/notes/17631/a20a0f394d460cdd66fc7ffb0d68d6fb.html

首先，第一点，想让css样式应用在未知元素上，只需执行document.createElement(elementName)即可实现，这是最基本的根源

对于未知的元素标签mytag，只要在head中执行一次document.createElement(mytag),那么body里所有mytag标签在渲染时就会自动正确应用css样式了。”让CSS样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。

所以 基本原理 就是在执行的时候，先往head中插入应用到html5标签的css样式，然后对于所有html5标签都执行一次document.createElement(nodeName)，这样，浏览器在渲染body部分时，对于html5标签就能够正确的应用css样式，这也就是html5shiv.js必须放置在head中的原因

卡布鲁司机

写写心得，发发牢骚，爬爬天坑，孤单的编程之路上留点念。

GitHub