谈谈version

June 8, 2018

Shiyong Yin

fekit中的version

fekit会将所有前端文件的version单独打包到一个ver目录下面，然后通过jar包放到后端目录下面，后端运行代码进行版本号的替换。

ykit中的version

和fekit基本类似

qxf中的version

和fekit基本类似

我眼中的version

十分纳闷，前端html模板为什么要放在后端？而version的产生却在前端。然后通过前后端关联version，这无疑增加了工作量，还要将对应的version进行对应的替换，往往一些新的前端或者后端同学对此一头雾水。新增一个页面的时候，后端就懵逼了。 前端还要告诉后端需要引入哪些js，哪些css，效率太低，容易出错。

正确的做法：前端生成html文件，此文件中包含了内容和带版本号的css标签以及带版本号的js标签，直接前后端进行文件的关联就可以。 效率高，不容易出错，前后端端分离更彻底。后端根本不用管前端这些事情。

减肥之道

June 7, 2018

Shiyong Yin

增肥原理

碳水化合物 由碳、氢和氧三种元素组成，由于它所含的氢氧的比例为二比一，和水一样，故称为碳水化合物

食物中的碳水化合物分成两类：人可以吸收利用的有效碳水化合物如单糖、双糖、多糖和人不能消化的无效碳水化合物，如纤维素，是人体必须的物质

碳水化合物只有经过消化分解成葡萄糖·果糖和半乳糖才能被吸收，而果糖和半乳糖又经肝脏转换变成葡萄糖。血中的葡萄糖简称为血糖，少部分血糖直接被组织细胞利用与氧气反应生成二氧化碳和水，放出热量供身体需要，大部分血糖则存在人体细胞中，如果细胞中储存的葡萄糖已饱和，多余的葡萄糖就会以高能的脂肪形式储存起来，多吃碳水化合物发胖就是这个道理！

阿特金斯减肥法

阿特金斯减肥法

1972年，一本新书的出版把美国人吓了一跳：那本书颠覆了传统的减肥理念，告诉大众：“肥胖的元凶不是脂肪，而是碳水化合物！”

这就是阿特金斯博士开创的低碳减肥法，在国内又被称作食肉减肥法。

科学原理

阿特金斯原理

阿特金斯饮食法限制碳水化合物的摄入，目的是转变身体的新陈代谢方式，由以葡萄糖为燃料的燃糖代谢转变为以体内储存的脂肪为燃料的燃脂代谢。当胰岛素浓度低时，这个程序（被称为甲酮代谢，区别于酮症）就会启动；当血糖浓度低时（主要是在吃饭前）正常人体内的胰岛素也最低。在饭后，碳水化合物（如，葡萄糖或淀粉[形成葡萄糖链]）产生大部分血糖，并可以计算出。由于纤维不易消化，它几乎不产生能量，也不会明显影响葡萄糖和胰岛素浓度。甲酮代谢包括脂类分解——脂肪细胞内储存的某些脂质在其中转化为血液的一部分。

十大准则

  1. 稳定血糖是通过控制碳水化合物摄入量进行减肥的基本手段。你可以一天吃4到5顿小餐，只要碳水化合物摄入量不超过20克就行。而且大部分必须来自沙拉青菜和其他蔬菜。
  2. 你可以吃任意量的鸡蛋、肉和鱼，包括牛肉、猪肉、鸡肉、火鸡肉、羊肉、鸭肉和贝类海鲜。吃到心满意足为止。
  3. 不管吃多少脂肪和食用油都是允许的。它们包括黄油、橄榄油、蛋黄酱以及食用油（不要吃任何经过氢化处理的油或其他人造脂肪，包括人造黄油）。
  4. 香料和佐料可以吃，只要不含糖。
  5. 奶酪每天只能吃3到4盎司。
  6. 每天至少喝8杯水，每杯8盎司，补充水分、防止便秘，并排出消耗脂肪产生的副产品。
  7. 要避免喝含有咖啡因的咖啡、茶和软饮料。事实证明，咖啡因过量会造成低血糖，从而促使你想吃糖。无论如何酒都是不能喝的。
  8. 绝对不要吃糖、牛奶、酸奶、面粉产品、谷物食品、含淀粉的蔬菜、大豆、甜的调味品、坚果以及任何水果和果汁。
  9. 你可以经常外出吃饭，但要警惕肉汁、酱油和调味汁里藏有的糖分。
  10. 你必须每天进行锻炼。

即使像水果和杂粮等一些本来有益健康的碳水化合物食品也须限量。减肥成功之后，你可以适量地吃水果和淀粉类食品，但要保证其不影响你的新陈代谢，以免体重增加。而那些精加工食品则无论何时都对人体无益。

可以吃哪些东西？

严格模式下(前期建议这么做)

  • 任何肉类
    • 鸡肉，牛肉，猪肉，鱼肉等
  • 蛋类
    • 鸡蛋，鸭蛋，鹅蛋等

非严格模式下(到了瓶颈期之后建议这么做，准备持久战)

  • 蔬菜
    名字碳水化合物含量
    牛肉0.1
    羊肉0.2
    驴肉0.4
    鳕鱼0.5
    河蚌, 大黄鱼, 蚌肉, 蛤蜊0.8
    兔肉, 海参0.9
    猪心, 蟹肉1.1
    豆汁, 鸡蛋1.3
    腰子1.4
    猪肉1.5
    狗肉, 油菜心1.8
    牛肉干, 香菇, 冬瓜1.9
    猪肘棒, 鹌鹑蛋2.1
    松子仁, 腌黄瓜, 莴苣2.2
    花生酱2.3
    佛手瓜, 鸡胸脯肉, 芹菜2.5
    西兰花, 油菜, 蘑菇2.7
    菠菜, 鹅蛋, 豌豆苗2.8
    杏仁2.9
    黄豆芽3
    鸭蛋, 大白菜3.1
    酱牛肉, 西葫芦, 韭菜3.2
    金针菇, 腌雪里红3.3
    菜花, 牛奶3.4
    荷兰豆, 奶酪, 苦瓜, 番茄, 茄子3.5
    丝瓜3.6
    辣椒3.7
    白瓜子, 鲫鱼, 豆腐3.8
    基围虾, 素鸡3.9
    甜椒, 鲜豇豆, 茭白, 萝卜, 鸭肉4
    油豆腐4.3
    榨菜4.4
    白兰花, 松花蛋4.5
    鸡翅4.6
    淡菜, 蟹4.7
    醋4.9
    芫荽5
    大葱5.2
    羊乳, 草虾5.4
    猪肝5.6
    白金兰5.7
    香肠5.9
    草莓, 大头菜6
    甘露6.3
    西瓜6.4
    毛豆6.5
    鲍鱼6.6
    芒果, 冬菜7
    梨7.3
    母乳7.4
    杏7.5
    腐乳, 姜7.6
    胡萝卜, 哈密瓜7.7
    李子7.8
    小米粥8.4
    松子9
    酸奶9.3
    菠萝9.5
    核桃9.6
    橘子, 西瓜子9.7
    米粥9.8
    葡萄, 酱油9.9
    八宝菜10.2
    炸鸡, 橙10.5
    豆腐干10.7
    桃10.9
    马肉11
    凉粉11.2
    柑11.5
    山药11.6
    猕猴桃11.9
    苹果12.3
    葵花籽13
    鱼子酱14.4
    榛子14.7
    藕15.2
    甘蔗15.4
    火腿肠15.6
    花生仁16
    荔枝16.1
    桂圆16.2
    马铃薯16.5
    素虾16.6
    芝麻酱16.8
    柿子17.1
    冰欺凌, 海带, 花生17.3
    黄酱17.9
    豆腐皮, 黄豆18.6
    香蕉20.8
    腐竹21.3
    芝麻21.7
    山楂22
    紫菜22.5
    红薯23.1
    橘汁23.2
    豆瓣酱24.8
    米饭25
    糖蒜25.9
    味精, 大蒜26.5
    山核桃26.8
    甜面酱27.1
    金针菜27.2
    枣28.6
    木耳35.7
    银耳36.9
    面筋39.1
    驴打滚39.9
    油炸土豆片40
    油饼40.4
    艾窝窝43.1
    花卷45.6
    馒头48.3
    芝麻南唐49.7
    茶叶50.3
    烙饼, 豆沙51
    牛乳粉, 麻花, 巧克力51.9
    月饼52.3
    芸豆54.2
    豌豆54.3
    炼乳55.4
    赤豆55.7
    面条58
    面包58.1
    绿豆58.5
    豇豆58.9
    苦荞麦粉60.2
    方便面60.9
    蛋糕61.2
    燕麦片61.6
    烧饼62.7
    桂圆干62.8
    莲子64.2
    豆浆粉64.6
    玉米66.6
    玉米面66.9
    牛肉松67.7
    豆奶粉, 苹果酱68.7
    饼干69.2
    高粱米70.4
    小麦粉71.5
    绿豆糕72.2
    黄米72.5
    白果72.6
    乳儿粉, 小米73.5
    血糯米73.7
    挂面74.5
    煎饼74.7
    稻米(东北）75.3
    通心粉75.4
    栗子77.2
    果丹皮77.4
    稻米, 糯米77.5
    江米条77.7
    米粉78.2
    健儿粉82.7
    奶糖84.5
    藕粉92.9

代码获取碳水化合物列表

需要积分才能下载文档？不存在的！！！

作为一位前端工程师，这个不在话下！！！

通过dom操作，js处理与转换，最终生成markdown列表

var names = [];
function getName() {
  var arr = document.querySelectorAll('p');
  for (var i = 0; i < arr.length; i++) {
    names.push(arr[i].innerText)
  }
}

var names2 = [
  "稻米(东北）", "75.3", "素虾", "16.6", "白瓜子", "3.8", "稻米", "77.5", "芸豆", "54.2", "山核桃", "26.8", "方便面", "60.9", "红薯", "23.1", "松子", "9", "高粱米", "70.4", "胡萝卜", "7.7", "松子仁", "2.2", "挂面", "74.5", "姜", "7.6", "西瓜子", "9.7", "花卷", "45.6", "萝卜", "4", "榛子", "14.7", "黄米", "72.5", "马铃薯", "16.5", "杏仁", "2.9", "煎饼", "74.7", "油炸土豆片", "40", "面筋", "39.1", "苦荞麦粉", "60.2", "藕", "15.2", "艾窝窝", "43.1", "烙饼", "51", "藕粉", "92.9", "饼干", "69.2", "馒头", "48.3", "山药", "11.6", "蛋糕", "61.2", "面条", "58", "菠萝", "9.5", "豆汁", "1.3", "米饭", "25", "草莓", "6", "江米条", "77.7", "米粥", "9.8", "橙", "10.5", "凉粉", "11.2", "米粉", "78.2", "柑", "11.5", "绿豆糕", "72.2", "糯米", "77.5", "甘蔗", "15.4", "驴打滚", "39.9", "血糯米", "73.7", "桂圆", "16.2", "麻花", "51.9", "烧饼", "62.7", "桂圆干", "62.8", "面包", "58.1", "通心粉", "75.4", "果丹皮", "77.4", "月饼", "52.3", "小麦粉", "71.5", "山楂", "22", "冰欺凌", "17.3", "小米", "73.5", "橘子", "9.7", "茶叶", "50.3", "小米粥", "8.4", "李子", "7.8", "橘汁", "23.2", "燕麦片", "61.6", "梨", "7.3", "奶糖", "84.5", "油饼", "40.4", "荔枝", "16.1", "巧克力", "51.9", "玉米", "66.6", "芒果", "7", "芝麻南唐", "49.7", "玉米面", "66.9", "苹果", "12.3", "苹果酱", "68.7", "豇豆", "58.9", "核桃", "9.6", "炼乳", "55.4", "豆腐", "3.8", "葡萄", "9.9", "母乳", "7.4", "豆腐干", "10.7", "柿子", "17.1", "奶酪", "3.5"
  , "豆腐皮", "18.6", "桃", "10.9", "牛奶", "3.4", "豆浆粉", "64.6", "香蕉", "20.8", "牛乳粉", "51.9", "豆沙", "51", "杏", "7.5", "酸奶", "9.3", "腐乳", "7.6", "枣", "28.6", "羊乳", "5.4", "腐竹", "21.3", "猕猴桃", "11.9", "豆奶粉", "68.7", "黄豆", "18.6", "白果", "72.6", "健儿粉", "82.7", "绿豆", "58.5", "花生", "17.3", "乳儿粉", "73.5", "素鸡", "3.9", "花生仁", "16", "鹌鹑蛋", "2.1", "豌豆", "54.3", "葵花籽", "13", "鸡蛋", "1.3", "赤豆", "55.7", "莲子", "64.2", "松花蛋", "4.5", "油豆腐", "4.3", "栗子", "77.2", "鸭蛋", "3.1", "香肠", "5.9", "荷兰豆", "3.5", "鹅蛋", "2.8", "火腿肠", "15.6", "黄豆芽", "3", "甜面酱", "27.1", "狗肉", "1.8", "鲜豇豆", "4", "味精", "26.5", "酱牛肉", "3.2", "毛豆", "6.5", "芝麻酱", "16.8", "驴肉", "0.4", "豌豆苗", "2.8", "大头菜", "6", "香菇", "1.9", "芝麻", "21.7", "冬菜", "7", "八宝菜", "10.2", "大白菜", "3.1", "甘露", "6.3", "马肉", "11", "菠菜", "2.8", "腌黄瓜", "2.2", "牛肉", "0.1", "菜花", "3.4", "糖蒜", "25.9", "牛肉干", "1.9", "油菜心", "1.8", "腌雪里红", "3.3", "牛肉松", "67.7", "大葱", "5.2", "榨菜", "4.4", "兔肉", "0.9", "大蒜", "26.5", "芫荽", "5", "羊肉", "0.2", "茭白", "4", "油菜", "2.7", "猪肝", "5.6", "金针菜", "27.2", "西兰花", "2.7", "猪肉", "1.5", "韭菜", "3.2", "白兰花", "4.5", "猪心", "1.1", "芹菜", "2.5", "白金兰", "5.7", "腰子", "1.4", "莴苣", "2.2", "冬瓜", "1.9", "猪肘棒", "2.1", "大黄鱼", "0.8", "佛手瓜", "2.5", "鸡翅", "4.6", "鲫鱼", "3.8", "哈密瓜", "7.7", "常见食物碳水化合物列表          ", " (100克含量计)", "鸡胸脯肉", "2.5", "鳕鱼", "0.5", "苦瓜", "3.5", "鸭肉", "4", "鱼子酱", "14.4", "丝瓜", "3.6", "炸鸡", "10.5", "鲍鱼", "6.6", "西瓜", "6.4", "蚌肉", "0.8", "蛤蜊", "0.8", "西葫芦", "3.2", "淡菜", "4.7", "河蚌", "0.8", "番茄", "3.5", "海参", "0.9", "草虾", "5.4", "茄子", "3.5", "辣椒", "3.7", "基围虾", "3.9", "醋", "4.9", "甜椒", "4", "蟹", "4.7", "豆瓣酱", "24.8", "蘑菇", "2.7", "蟹肉", "1.1", "黄酱", "17.9", "海带", "17.3", "紫菜", "22.5", "花生酱", "2.3", "金针菇", "3.3", "银耳", "36.9", "酱油", "9.9", "木耳", "35.7",
]
names2.splice(354, 2)

var objName = [];
for (var i = 0; i < names2.length; i += 2) {
  objName.push({
    name: names2[i],
    value: Number(names2[i + 1])
  })
}

ss = objName.sort(function (a, b) {
  return a.value - b.value;
})

var list = "";

var v = ss[0].value;
ss.map(function (item, i) {
  var nexto = ss[i + 1] || {};
  if (v == nexto.value) {
    list += item.name + ', ';
  } else {
    v = nexto.value;
    list += item.name + '|' + item.value + '\n';
  }
})

问题汇总

June 7, 2018

Shiyong Yin

Portal发布系统发布停服务失败不会更新service脚本

停服务失败后更新脚本，并再次执行停服务操作

Portal发布使用node编译会报错，使用yarn则不会

看到错误是HeadTable报了错误，还以为和rc-table的版本有关，换了版本之后发现不行，应该和rc-table 版本无关，隐隐感觉是编译打包，或者npm install安装包的问题。后来查出是webpack4需要node的版本 大于等于6.11.5，这个就比较坑了，而portal还不支持指定node版本进行安装，更诡异的是，build.sh里面 已经指定了node的版本，依然不行。原因在于：node安装包的步骤先于build.sh，所以指定的node版本在 Node安装包的时候并没有生效。坑。。。

发布的服务使用的3001端口，无法再使用nginx在3001进行代理

部署机器：l-tcdev2.wap.dev.cn0 通过80端口进行统一分发

如果是~* .html$ 转发到本机器的3001端口，使用web服务 如果是= \ 转发到本机器的3001端口，使用web服务 剩下的其他的 转发到本机器的3000端口，使用api服务

Dev连接Beta的redis，一直加载不出来，返回504，但是能连上

PS：解决问题并不难，难的是定位问题。 一开始，各种定位不出问题来，通过yarn start启动服务的时候看到Ready check failed错误。 在redis.createCliend的option中加上no_ready_check: true就可以了

Revert之后merge问题

参见https://github.com/git/git/blob/master/Documentation/howto/revert-a-faulty-merge.txt

总的来说如下

——o——o——-o——M——-x——x——W  master主干
           /
——-—A—————B              development分支

———-A—————B———C————D      development分支
  • M是将B merge到master之后的节点
  • W是将master revert到之前某个节点的节点

分支B分支上的代码合并到了master(M节点处)，并在master上进行了revert(W节点处) 那么之后development分支修复了此问题，当我们再次将master合并过来的时候，发现A和B不见了

解决方法：执行如下命令

git revert W #W代表节点的md5值

Websocket连接失败

在easy1机器上没有问题，在easy3机器上有问题，据此推断应该不是代码问题，应该是ng问题 经查，需要设置如下三个参数来使websocket正确工作(easy1上设置了，而easy3上并没有)

location / {
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

下面来捋一捋

可参考http://nginx.org/en/docs/http/websocket.html

  1. 为了将client和server的连接转换为Websockt连接，需要使用Http/1.1才支持的协议切换机制。
  2. Upgrade和Connect参数设置无法从client传到proxied server(ng)，所以需要我们在ng中明确配置
  3. 另外ng中Connection的默认值是close

综上，设置如上三个参数可解决socket连接问题。

全栈

  • 域名
  • 内网
  • 机器(权限，开发机，beta机，线上机器)
  • 发布系统(jenkins，前后端关联(java的maven，node的ncs))
  • 后端服务器(后端环境，数据库
    • node服务器:
    • bluebird Promise
    • chai 单元测试
    • dotenv 环境变量
    • knex SQL构造工具
    • koa 下一代web开发框架
    • pm2 node进程管理，守护进程
    • pug 模板渲染)
  • 前端服务器(
    • webpack
    • react,vue,pug
    • angular)

一个nginx配置

June 7, 2018

Shiyong Yin

通过80端口分发

一个nginx配置

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

#upstream baidu_server{
 #   server 111.13.101.208:443;
#}

events {
    worker_connections  1024;
}


http {

upstream baidu_server{
    server 111.13.101.208:80;
}

upstream smart_hotel_api {

    #server 10.86.42.215:3210;
        server 10.86.42.215:3000;
  }

upstream smart_hotel_os_web {

    #server 10.90.165.81:3212;
    server 10.86.42.215:3001;
  }

    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  l-tcdev2.wap.dev.cn0.qunar.com;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        more_set_headers "Access-Control-Allow-Origin: *";

       location ~* \.html$ {
           proxy_set_header Host $host;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_pass http://smart_hotel_os_web;
       }


       location = / {
           proxy_pass http://smart_hotel_os_web;
       }

       location / {
           proxy_set_header Host $host;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_pass http://smart_hotel_api;
       }


        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }

    server {
        listen 3002;
        server_name l-tcdev2.wap.dev.cn0.qunar.com;

        location /bind/login-validate-token {
            proxy_pass http://baidu_server;
        proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 }
    }
}

好用的工具

June 7, 2018

Shiyong Yin

Irvue

一款好用的Mac壁纸更换工具，App Store上面有下载

Irvue

PixelStyle

感觉是轻量版的PS，App Store上面有下载

PixelStyle

iTerm2

Mac下好用的终端工具，传送门

iTerm2

好用的npm包

June 7, 2018

Shiyong Yin

2018.06.20更

node-xlsx

如题

colors

终端输出彩色字体

opencc

处理中文简繁转换

json5

是JSON的超级，根据ES5.1扩展了很多JSON不支持的特性

2018.06.18更

jest

FB出品，javascript代码测试工具

enzyme

aribnb出品，用来测试react的库

prettier

有见识的代码格式化工具(甩lint几十条街)

rimraf

相当于终端中的rm -rf

np

npm包发布工具，不如yarn publish好用

inquirer

交互式的命令行工具

warning

警告

execa

Promise执行终端命令工具

walk, blob

遍历文件目录

docusaurus

FB出品，与github pages结合，快速构建静态文档和静态博客的网站

流行框架学习对比

June 6, 2018

Shiyong Yin

有哪些流行的前端框架

我认为目前比较流行的框架或者库主要包含vue, react, angular这三个。

排名分先后 :)

Angular系统结构图

angular

使用心得

缺点

  • 双绑对象的初始值在定义变量时设置不生效，只能在ngOnInit里面设置
  • 严重依赖ng命令，一般开发都是直接新建文件夹，里面新建个index就可以开始工作了
  • 条条框框太多，模拟数据复杂，不仅用到了service，还用到了InMermoryData等
  • 使用了rxjs，学习成本较高
  • 父子组件之间通信步骤繁琐，子向父传递数据的参数必须是$event?!

优点

  • ng是一套工具，有自己的打包工具，方便
← Prev