2019立个Flag

写blog被暂停了很久,中间事情比较多,说到底是没有设置成重要的达成目标,最近也有些不同的感悟,所有先确立一个2019年的flag,”关于技术体系的学习、总结和整理”,并在这里记录,计划目标达成以下:

  • 对于直播类Web完整设计的一些方案思考(作为对一段时期内工作的总结)
  • Rx.js的学习使用和意识的转变系列
  • 组件化的一些理解和思考
  • React源码学习
  • 其他一些技术点,作为一些了解和入门学习,如:WebAssembly,Elm, Flutter等

2019多思考,多总结,不管在技术还是其他方面。修己!!

狗皮倒灶

近来在看雾满拦江的《民国就是这么生猛》,文风犀利又很逗逼幽默,很推荐,看到陈少白收了巨资用”PS”搞掉岑春煊,作者总结到:

“从江湖人物到革命先驱,这期间有个过程,狗皮倒灶在所难免。但针对于廉吏名臣老岑的狗皮倒灶,却是基于当时理论界的空白。”

作为我一个孤陋寡闻的北方人,没听过这个词,特意查了下“狗皮倒灶”,大概意思是:上不了台面的人或事,小气,猥琐,阴坏。

狗皮倒灶

关于“倒灶”很多地方都有,挺有意思,百度百科里讲到有其中一个特好玩的出处:

清末,吴芗厈着《客窗闲话》,有“冯皮匠”篇,写武林人冯皮匠负了五吊铜钱的债,年关躲债到了 紫阳山洞。没料到洞里已有一人端坐,绸袍缎袄。相问,方知是洋货行郭老板,因货发到四方 郡县,年关伙计收银未归,而各方货商“坐取货价,需五十万金”,郭老板怕吃官司,也来躲债。郭卸下一只金镯,要冯皮匠去换了碎银还了债再搞点吃的到洞里。冯回到家中,其妻欣喜若狂,说,“久不举火矣,灶灰堆积。”于是夫妻俩忙着 扒灰清灶。只因“ 卤莽从事,灰去而灶崩。”冯妻大叫,“真倒灶矣!”

听过“一逼”,“一逼吊糟(倒灶)”,这里好像并不是一个意思,个人理解的这词是“牛逼闪闪”的意思,加强语义。

  以上,瞎写胡诌。。。

解决Electron(Atom Shell)安装慢的问题

Electron是个啥?

类似于Node-Webkit,Electron(原名Atom Shell)也是采用 Node/io.js + HTML5 开发跨平台桌面应用的框架,该框架的初衷是为github的开源编辑器Atom构建开发的,它和Node-Webkit的区别可以查看这篇文章和那篇文章。

安装

直接使用npm安装下载安装包特别慢,这里先修改镜像地址:

1
export ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/

使用淘宝的镜像,下载速度飞快,具体可以查看electron-download的README,然后使用命令安装:

1
npm install -g electron-prebuilt

安装完成

待续:后期将分享一些使用方法和经验

在windows上nodegyp编译出现错误MSB8020的解决办法

在windows上使用npm install安装有些需要c++编译的包的时候,有时候可能会出现MSB8020错误,大部分原因可能是

  1. 机器没有安装msbuild/vs (安装相对应版本的vs,有点像废话!!!)
  2. vs安装的版本与编译标识的版本不匹配 (可以在详细错误中找到编译找寻的版本),此种情况较多,解决方法:
    a. 安装具体包的时候制定vs版本,如:npm install lwip –msvs_version=[匹配版本,如:2012]
    b. 统一设置vs版本:npm config set msvs_version [匹配版本,如:2012]

参考:npm-install-for-some-packages-sqlite3-socket-io-fail-with-error-msb8020-on-windows

AngularJS Backbone.js Ember.js 对比

看到一篇关于AngularJS Backbone Ember.js的对比,建议看一看

说说个人的观点(仅是个人的观点):

  1. backbone.js 短小精悍,非常的灵活,其实拿它跟另外两者比某种程度上不太恰当,另外两者提供的是非常完整全面的框架,Backbone他所提供的正像是他的名字一样backbone,适用于较小非企业级的应用

  2. Ember.js (我使用的是早期1.4版本,无法确定新版本是否有改进,所以以下评论只是针对老版本)在之前的一个SPA中使用过,再实际使用过程中感觉不太好(也许是我们没有完全深入的学会),

    • 第一感觉就是路由的强大,Ember.js的基本模式就是由路由来控制和处理流程,如果是完全按照这种模式的应用,使用Ember.js会非常的快和简单,但强大的另一面就是感觉很僵硬,如果有些脱离路由这种流程外,来做一些自定义的东西时感觉就非常的不好,很不容易实现,如:动画,自定义的处理

    • 数据模型的引入使人感觉整个的框架非常巨大和完整,基本上是一个完整的后端框架了,但这种方式带来的问题是很不灵活,尤其是一对多,多对多这种的关系结构,个人感觉在前端处理这种结构的弊大于利

    • RESTFUL API 基本上也是类似的问题,RESTFUL API和Model搭载起来,真的很难去适应这种强制的要求,在实际的项目中也很难完全符合他过于严格的要求

  3. AngularJS 目前正在使用,感觉这个东西真是神器啊,非常的强大完整,但设计又不失灵活,搭配上ui-router(看过该作者的演讲,他也是眼馋Ember.js强大的路由,从而开发的ui-router)使用真的是非常不错,很方便的Pub/Sub,provider,强大灵活的指令,filter,容易实现的动画等,即能清晰的分割出各个模块,又能灵活的搭配适用,个人感觉特别适合复杂的企业级的应用,AngularJS基本上隐去了模型结构,相对Ember.js的模型硬性要求要灵活的多。感觉他的缺点就是有可能性能会较差,不过在企业中使用基本上不用计较这个问题,其次是涉及的技术点较多,新上手学习曲线成本较高

Implement a Formatter function in JS

JS原生并没有提供方便使用的Formatter函数,用字符拼接的方式看起来混乱难读,而且使用起来很不方便。个人感觉C#里提供的语法比较好用,如:

1
String.Format(“Welcome to learn '{0}','{0}' is awesome,you will {1} it!","Javascript","love");

这种有顺序的替换方式,比较清晰,而且在要替换同一内容时候可以省去传递重复参数的情况,下面是JS简单实现版本(没有严格测试):

1
2
3
4
5
6
7
8
9
10
11
12
13
(function(exports) {
exports.format = function(){
var args = Array.prototype.slice.call(arguments),
sourceStr = args.shift();
function execReplace(text,replacement,index){
return text.replace(new RegExp("\\{"+index+"\\}",'g'),replacement);
}

return args.reduce(execReplace,sourceStr);
}
})(window.utils = window.utils || {});

console.log(utils.format("Welcome to learn '{0}','{0}' is awesome,you will {1} it!","Javascript","love"));

关键的是这句:

1
args.reduce(execReplace,sourceStr);

这里使用了Array的reduce函数,reduce和reduceRight是ES2015新增加的函数,该函数的参数是reduce(callback,initialValue),callback接收4个参数分别是:

  1. previousValue:
    在遍历第一次进入该回调函数时,如果指定了initivalValue将直接使用initivalValue,如果没有指定将使用数组的第一个元素
    第二次及以后的遍历该值是前一次遍历返回的结果
    最后一次遍历返回的结果将作为reduce函数的返回值
  2. currentValue: 遍历到的当前item
  3. index: 当前item在数组中的下标
  4. array: 原始array

在execReplace中每一次执行时使用前一次替换后的结果作为原始替换字符串,使用当前item的index作为要被替换的内容,依次遍历,最终完成替换内容。
注:reduceRight和reduce函数基本一样,只是它的遍历顺序是由右向左

Win 8下Rime输入法无法同步的临时解决方法

意外发现了Rime输入法(OS X上叫鼠须管’Squirrel’,windows上叫小狼毫’Weasel’,linux上叫中州韵’ibus-rime’,连名字都起的这么牛逼),真是神器啊,流畅的速度,灵活的配置,各个os上一致的体验,正是我想要的,非常喜欢。。。

我在公司用的是windows 8,自己用的是mac,需要在每个os上同步一些自己习惯的输入字和词,如何同步,Rime的wiki上有很详细的说明,比较简单,就是利用Dropbox,设置Rime的同步目录为Dropbox中,在mac上设置很简单就完成了,Rime输入法虽然可以安装在win 8下,但对Win 8支持的不好(Metro模式暂时无解),在输入法的设置中,那个’选项’点了是没有任何反应的,所以就没有办法deploy然后sync设置,查了wiki也没有找到有用的信息,后来想到查看源码,找到了安装文件

; Optional section (can be disabled by the user)
Section "Start Menu Shortcuts"
  SetShellVarContext all
  CreateDirectory "$SMPROGRAMS\小狼毫輸入法"
  CreateShortCut "$SMPROGRAMS\小狼毫輸入法\【小狼毫】說明書.lnk" "$INSTDIR\README.txt"
  CreateShortCut "$SMPROGRAMS\小狼毫輸入法\【小狼毫】輸入法設定.lnk" "$INSTDIR\WeaselDeployer.exe" "" "$SYSDIR\shell32.dll" 21
  CreateShortCut "$SMPROGRAMS\小狼毫輸入法\【小狼毫】用戶詞典管理.lnk" "$INSTDIR\WeaselDeployer.exe" "/dict" "$SYSDIR\shell32.dll" 6
  CreateShortCut "$SMPROGRAMS\小狼毫輸入法\【小狼毫】用戶資料同步.lnk" "$INSTDIR\WeaselDeployer.exe" "/sync" "$SYSDIR\shell32.dll" 26
  CreateShortCut "$SMPROGRAMS\小狼毫輸入法\【小狼毫】重新部署.lnk" "$INSTDIR\WeaselDeployer.exe" "/deploy" "$SYSDIR\shell32.dll" 144
  CreateShortCut "$SMPROGRAMS\小狼毫輸入法\小狼毫算法服務.lnk" "$INSTDIR\WeaselServer.exe" "" "$INSTDIR\WeaselServer.exe" 0
  CreateShortCut "$SMPROGRAMS\小狼毫輸入法\【小狼毫】用戶文件夾.lnk" "$INSTDIR\WeaselServer.exe" "/userdir" "$SYSDIR\shell32.dll" 126
  CreateShortCut "$SMPROGRAMS\小狼毫輸入法\【小狼毫】程序文件夾.lnk" "$INSTDIR\WeaselServer.exe" "/weaseldir" "$SYSDIR\shell32.dll" 19
  CreateShortCut "$SMPROGRAMS\小狼毫輸入法\【小狼毫】檢查新版本.lnk" "$INSTDIR\WeaselServer.exe" "/update" "$SYSDIR\shell32.dll" 13
  ${If} ${RunningX64}
    CreateShortCut "$SMPROGRAMS\小狼毫輸入法\【小狼毫】安裝選項.lnk" "$INSTDIR\WeaselSetupx64.exe" "" "$SYSDIR\shell32.dll" 162
  ${Else}
    CreateShortCut "$SMPROGRAMS\小狼毫輸入法\【小狼毫】安裝選項.lnk" "$INSTDIR\WeaselSetup.exe" "" "$SYSDIR\shell32.dll" 162
  ${EndIf}
  CreateShortCut "$SMPROGRAMS\小狼毫輸入法\卸載小狼毫.lnk" "$INSTDIR\uninstall.exe" "" "$INSTDIR\uninstall.exe" 0

SectionEnd

写的很清楚了,只要执行WeaselDeployer.exe 加上参数即可
这只是临时的解决方法,期待Rime出新的版本支持win8和metro风格就不会这么麻烦了

这种方法也有缺点,有时dropbox同步没有那么及时,但如果是上下班之间的同步肯定没问题

注: Rime输入法的词库并不是特别的完善,有时比较常用的词并没有,也许这也是该输入法很快的原因

osx上使用'cd'命令跳转到别名(alias)目录

在mac上使用windows的共享目录时,在terminal中时法使用cd的,会提示”xxx 不是目录”,经过一番的查找,发现了Mac Terminal ‘cd’ to folder alias,
经过本人验证时可以用的,具体步骤参考Make Terminal Follow Aliases Like Symlinks:

This is a two-part process requiring a little familiarity with gcc and bash, but I’ll try to make it as simple as possible. Firstly, you need this file: getTrueName.c. This file was created by Thos Davis and is licensed under the GPLv2. Save it anywhere, then compile it with the following command:

gcc -o getTrueName -framework Carbon getTrueName.c
This will create the ‘getTrueName’ executable in the same directory as the source. You can add it to your PATH, or just copy it directly to /usr/bin so it’s easy to access.

Interestingly, when Terminal opens a new shell, .bashrc is not executed as you might expect. Instead, under the login shell, .bash_profile is executed. So, add the following to .bash_profile in your Home directory. You might need to create it first; it isn’t there by default.

function cd {
     if [ ${#1} == 0 ]; then
       builtin cd
     elif [ -d "${1}" ]; then
       builtin cd "${1}"
     elif [[ -f "${1}" || -L "${1}" ]]; then
       path=$(getTrueName "$1")
       builtin cd "$path"
     else
       builtin cd "${1}"
     fi
   }

Effectively, this looks for Finder aliases and resolves them before deferring to the builtin cd command. Append it to your .bash_profile, then either execute it or restart Terminal for the changes to take effect. Now you can cd to Finder aliases within Terminal and have them treated just like symlinks. Just like it should be.

在修改完.bashrc后只有在新打开terminal时才会有效,解决方法有:

1 每次操作前执行source .bashrc

2 一劳永逸的方法:将下面代码加到.base_profile文件后面

if [ "${BASH-no}" != "no" ]; then
  [ -r ~/.bashrc ] && . ~/.bashrc
fi

注:我是使用hexo写的本篇,应该是hexo的markdown生成引擎有问题,文中的引用部分生成的完全不对,让我找找问题先。。。