2015年4月29日星期三

5 個 JavaScript 面試常見問題

webber0928 上午8:41:00

轉載網址： https://yulun.me/2014/5-typical-javascript-interview-questions/

以下內容為閱讀 5 Typical JavaScript Interview Exercises 文章後的觀後感。

這幾個問題說基本也滿基本的但是有些地方一不小心可能就會犯錯！

問題一：Scope

(function() {
  var a = b = 5;
})();
 
console.log(b);

請問 console.log(b); 印出來的結果是？

答案
5

在這個 IIFE 中，變數 a 使用了 var 關鍵字來宣告成為 local variable，而 b 則沒有 var 修飾所以宣告成為 global variable。

那如何避免這個問題呢？只需要在 IIFE 中加入 'use strict'，如此一來只要有任何變數試圖宣告為全域變數都會出現錯誤警告。

(function() {
  'use strict';
  var a = window.b = 5;
})();
 
console.log(b);

所以假若你還是要把 b 宣告為全域變數 (global variable) 則可以透過 window.b 來指定。

問題二：Create “native” methods

擴充 String 的 method 使其能呼叫 .repeatify(num) 來產生重複的字串

console.log('hello'.repeatify(3));

並且印出 hellohellohello

答案

String.prototype.repeatify = String.prototype.repeatify || function(times) {
   var str = '';
 
   for (var i = 0; i < times; i++) {
      str += this;
   }
 
   return str;
};

這題應該就比較簡單了，直接從 String.prototype 下手，並使用String.prototype.repeatify || function(times) 來避免覆寫已經存在的方法。

這個技巧很常用在一些 shim 的功能 (用來擴充本來瀏覽器沒有提供的功能)。

問題三：Hoisting

寫出以下程式碼執行結果，並說明原因。

function test() {
   console.log(a);
   console.log(foo());
    
   var a = 1;
   function foo() {
      return 2;
   }
}

test();

答案
第一個 undefined
第二個 2

所有的變數 (Variable) 與函式 (Function) 都會被往上提 hoisted 至 Function 的頂端。但是要注意的是，變數往上提並不會一起賦值。所以 a 印出來是 undefined，我們把上面的 code 轉換成提升後等價的 code 如下：

function test() {
   var a;
   function foo() {
      return 2;
   }
 
   console.log(a);
   console.log(foo());
    
   a = 1;
}

test();

這樣是否更能明白了呢？其實我看這篇文章之前對於這個 hosited 概念十分陌生，可以參見另一篇文章 Back to Basics: JavaScript Hoisting

問題四：How `this` work in JavaScript

寫出以下程式碼執行結果，並說明原因。

var fullname = 'John Doe';
var obj = {
  fullname: 'Colin Ihrig',
  prop: {
    fullname: 'Aurelio De Rosa',
    getFullname: function() {
       return this.fullname;
    }
  }
};
 
console.log(obj.prop.getFullname());
 
var test = obj.prop.getFullname;
 
console.log(test());

第一個 Colin Ihrig
第二個 John Doe

JavaScript 很不一樣的一點就是 this 並不是跟著 instance 走。而是依據誰呼叫 (invoke) 來決定this 的參考值。(這也常讓不熟稔 JS 的人嘗盡苦頭)…

第一個 Colin Ihrig 是因為 getFullname() 呼叫是由 obj.prop 發出，此時this.fullname 即為 obj.fullname；而第二個 John Doe 則是由 window 呼叫 test 實際上是 obj.prop.getFullname 因此 this.fullname === window.fullname 於是便印出John Doe。

問題五：`call()` and `apply()`

修正上面題目，要把第二個印出的答案變為 Colin Ihrig 該如何做？

console.log(test.call(obj.prop));

基本上 call() 與 apply() 用法差異如下：

function.call(thisArg[, argument1[, argument2[, ...]]]);
function.apply(thisArg[, argumentArray]);

所有語法大致上與 apply() 相同，他們基本上不同處只有 call() 接受一連串的參數，而 apply() 單一的array作為參數 —- MDN

以上簡單分享，自己也重新複習一遍了…Q_Q

ps. 原文的下面還有一些回覆，並且提供另一些題目。我們改天再一起來研究看看！

http://tomhicks.github.io/code/2014/09/12/javascript-interview-questions.html

繼續閱讀 >

5 個 JavaScript 面試常見問題

webber0928 上午8:41:00

轉載網址： https://yulun.me/2014/5-typical-javascript-interview-questions/

以下內容為閱讀 5 Typical JavaScript Interview Exercises 文章後的觀後感。

這幾個問題說基本也滿基本的但是有些地方一不小心可能就會犯錯！

問題一：Scope

繼續閱讀 >

2015年4月21日星期二

CSS3 Flexbox Layout

webber0928 上午8:10:00

A Visual Guide to CSS3 Flexbox Properties：
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

繼續閱讀 >

CSS3 Flexbox Layout

webber0928 上午8:10:00

A Visual Guide to CSS3 Flexbox Properties：
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

繼續閱讀 >

2015年4月20日星期一

用 native react 做出 ios app for conf

webber0928 晚上7:20:00

改天有時間來拜讀吧！
github: https://github.com/mikkoj/NortalTechDay

繼續閱讀 >

用 native react 做出 ios app for conf

webber0928 晚上7:20:00

改天有時間來拜讀吧！
github: https://github.com/mikkoj/NortalTechDay

繼續閱讀 >

安裝 NVM 來管理你的 Nodejs

webber0928 清晨6:22:00 node, nvm

安裝 NVM 來管理你的 Nodejs

此安裝法適用於ubuntu

Install script

要安裝使用 curl install script:

$ curl https://raw.github.com/creationix/nvm/v0.4.0/install.sh | sh

或是 Wget:

$ wget -qO- https://raw.github.com/creationix/nvm/v0.4.0/install.sh | sh

檔案會存在 ~/.nvm

然後請新增以下命令列到 .bashrc 的最後面:

# set PATH so it includes user's private bin if it exists
if [ -d "$HOME/.nvm/bin" ] ; then
  export PATH="$HOME/.nvm/bin:$PATH"
  export NVM_DIR="$HOME/.nvm"
fi
[ -s "$HOME/.nvm/nvm.sh" ] && . "$HOME/.nvm/nvm.sh"

Usage

下載打包好的套件:

$ nvm install v0.10.26

或自行編譯:

$ nvm install -s v0.10.26

設置node默認版本，請使用default：

$ nvm alias default v0.10.26

切換使用的node版本

$ nvm use v0.11.12
or
$ nvm use default

運行指令檢查所有node版本:

$ nvm ls

運行指令檢查本機安裝的node版本:

$ nvm ls-remote

參考網址

NVM官方

繼續閱讀 >

安裝 NVM 來管理你的 Nodejs

webber0928 清晨6:22:00 node, nvm

安裝 NVM 來管理你的 Nodejs

此安裝法適用於ubuntu

繼續閱讀 >

2015年4月19日星期日

vim 真男人

webber0928 下午2:15:00 真男人, vim

真男人也可以很單純
下載後安裝, 超級快速的生成vimrc~

我的介面：

快速生成你的 vimrc: http://vim-bootstrap.com/
github: https://github.com/avelino/vim-bootstrap

繼續閱讀 >

vim 真男人

webber0928 下午2:15:00 真男人, vim

真男人也可以很單純
下載後安裝, 超級快速的生成vimrc~

繼續閱讀 >

Vim自動補齊神器 YouCompleteMe

webber0928 下午1:42:00 vim, YouCompleteMe

github: https://github.com/Valloric/YouCompleteMe

YouCompleteMe的特別之處

基於語義補全

總所周知，Vim是一款文本編輯器。也就是說，其最基礎的工作就是編輯文本，而不管該文本的內容是什麼。在Vim被程序員所使用後，其慢慢的被肩負了與IDE一樣的工作，文本自動補全 (ie. acp ,omnicppcompleter )，代碼檢查( Syntastic )等等工作。

針對文本自動補全這個功能來說，主要有兩種實現方式。

基於文本

我們常用的omnicppcompleter , acp ,vim自帶的cx, cn的實現方式就是基於文本。更通俗的說法，其實就是一個字：

猜

其通過文本進行一些正則表達式的匹配，再根據生成的tags(利用ctags生成)來實現自動補全的效果。

基於語義

顧名思義，其是通過分析源文件，經過語法分析以後進行補全。由於對源文件進行分析，基於語義的補全可以做到很精確。但是這顯然是vim所不可能支持的。而且經過這麼多年發展，由於語法分析有很高的難度，也一直沒有合適的工具出現。直到，由apple支持的clang/llvm橫空出世。YouCompleteMe也正是在clang/llvm的基礎上進行構建的。

整合實現了多種插件

clang_complete
AutoComplPop
Supertab
neocomplcache
Syntastic (類似功能,僅僅針對c/c++/obj-c代碼)

支持語言

c
c++
obj-c
c#
python

對於其他的語言，會調用vim設置的omnifunc來匹配，因此同樣支持php , ruby等語言。

已知的有* javascript —- tern_for_vim * ruby/java —- eclim

使用效果圖

使用感受

和IDE一樣，自動補全，
根據include的文件進行補全
不用再蹩腳的生成tags
補全非常精準，而且速度很快，不會有延遲(以前在大項目上，acp用起來實在是很卡)
支持類似tags的跳轉，跳到定義處以及使用處
出錯提示很智能，並且用起來真的是如絲般柔滑，不用輸入:w進行強制檢測

安裝

說完了那麼多好處，就要說到安裝了。不同於以往其他vim插件，YCM是一款編譯型的插件。在下載完後，需要手動編譯後才能使用。對應其他的插件來說，僅僅就是把.vim的文件丟到相應文件夾下就可以。而這也加大了使用YCM的難度。

安裝準備

最新版的Vim(7.3.584+)，編譯時添加+python標誌(已經安裝的可以通過vim --version查看)
cmake(mac可以通過homebrew安裝，brew install cmake ,ubuntu可以通過sudo apt-get install cmake )
安裝vundle插件，用於安裝管理vim的插件

mac下快速安裝

在.vimrc中添加下列代碼

1	`Bundle` `'Valloric/YouCompleteMe'`

保存退出後打開vim，在正常模式下輸入

1	`:BundleInstall`

等待vundle將YouCompleteMe安裝完成

而後進行編譯安裝：

cd ~/.vim/bundle/YouCompleteMe
./install --clang-completer

如果不需要 c-family的補全，可以去掉--clang-completer。如果需要c#的補全，請加上--omnisharp-completer。

正常來說,YCM會去下載clang的包，如果已經有，也可以用系統--system-libclang。

就這樣，安裝結束。打開vim，如果沒有提示YCM未編譯，則說明安裝已經成功了。

手動編譯安裝

安裝的腳本並不是什麼時候都好用，至少對我來說是這樣的。安裝完之後出現了問題，參考issue#809。

在用:BundleInstall安裝完成或者使用

1	`git clone --recursive https://github.com/Valloric/YouCompleteMe.git`

獲取最新的倉庫，而後使用git submodule update --init --recursive確認倉庫的完整性後，開始安裝流程。

下載最新的clang二進製文件YCM要求clang版本> 3.2，一般來說都是下載最新的。
安裝python-dev.(ubuntu下使用sudo apt-get install python-dev ,mac下默認提供，否則請安裝command line tools )
編譯
1
2
3
4
cd ~
mkdir ycm_build
cd ycm_build
cmake -G “Unix Makefiles” -DPATH_TO_LLVM_ROOT=~/ycm_temp/llvm_root_dir . ~/.vim/bundle/YouCompleteMe/cpp make ycm_support_libs
這裡需要注意的是，~/ycm_temp/llvm_root_dir中包含的是根據第一步下載的壓縮包解壓出來的內容(包括include , bin等等文件)。

這樣就完成了,開始感受YCM提供的完全不遜色於大型IDE所提供的自動補全功能吧。

配置

不同於很多vim插件，YCM首先需要編譯，另外還需要有配置。在vim啟動後，YCM會找尋當前路徑以及上層路徑的.ycm_extra_conf.py .在~/.vim/bundle/YouCompleteMe/cpp/ycm/.ycm_extra_conf.py中提供了默認的模板。也可以參考我的(就在模板上改改而已)。不過這個解決了標準庫提示找不到的問題。

一般來說,我會在~目錄下放一個默認的模板，而後再根據不同的項目在當前目錄下再拷貝個.ycm_extra_conf.py。

# This file is NOT licensed under the GPLv3, which is the license for the rest
# of YouCompleteMe.
#
# Here's the license text for this file:
#
# This is free and unencumbered software released into the public domain.
#
# Anyone is free to copy, modify, publish, use, compile, sell, or
# distribute this software, either in source code form or as a compiled
# binary, for any purpose, commercial or non-commercial, and by any
# means.
#
# In jurisdictions that recognize copyright laws, the author or authors
# of this software dedicate any and all copyright interest in the
# software to the public domain. We make this dedication for the benefit
# of the public at large and to the detriment of our heirs and
# successors. We intend this dedication to be an overt act of
# relinquishment in perpetuity of all present and future rights to this
# software under copyright law.
#
# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
# EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
# MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
# IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
# OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
# ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
# OTHER DEALINGS IN THE SOFTWARE.
#
# For more information, please refer to <http://unlicense.org/>
 
import os
import ycm_core
 
# These are the compilation flags that will be used in case there's no
# compilation database set (by default, one is not set).
# CHANGE THIS LIST OF FLAGS. YES, THIS IS THE DROID YOU HAVE BEEN LOOKING FOR.
flags = [
'-Wall',
'-Wextra',
#'-Werror',
#'-Wc++98-compat',
'-Wno-long-long',
'-Wno-variadic-macros',
'-fexceptions',
'-stdlib=libc++',
# THIS IS IMPORTANT! Without a "-std=<something>" flag, clang won't know which
# language to use when compiling headers. So it will guess. Badly. So C++
# headers will be compiled as C headers. You don't want that so ALWAYS specify
# a "-std=<something>".
# For a C project, you would set this to something like 'c99' instead of
# 'c++11'.
'-std=c++11',
# ...and the same thing goes for the magic -x option which specifies the
# language that the files to be compiled are written in. This is mostly
# relevant for c++ headers.
# For a C project, you would set this to 'c' instead of 'c++'.
'-x',
'c++',
'-I',
'.',
'-isystem',
'/usr/include',
'-isystem',
'/usr/local/include',
'-isystem',
'/Library/Developer/CommandLineTools/usr/include',
'-isystem',
'/Library/Developer/CommandLineTools/usr/bin/../lib/c++/v1',
]
 
# Set this to the absolute path to the folder (NOT the file!) containing the
# compile_commands.json file to use that instead of 'flags'. See here for
# more details: http://clang.llvm.org/docs/JSONCompilationDatabase.html
#
# Most projects will NOT need to set this to anything; you can just change the
# 'flags' list of compilation flags. Notice that YCM itself uses that approach.
compilation_database_folder = ''
 
if os.path.exists( compilation_database_folder ):
  database = ycm_core.CompilationDatabase( compilation_database_folder )
else:
  database = None
 
SOURCE_EXTENSIONS = [ '.cpp', '.cxx', '.cc', '.c', '.m', '.mm' ]
 
def DirectoryOfThisScript():
  return os.path.dirname( os.path.abspath( __file__ ) )
 
def MakeRelativePathsInFlagsAbsolute( flags, working_directory ):
  if not working_directory:
    return list( flags )
  new_flags = []
  make_next_absolute = False
  path_flags = [ '-isystem', '-I', '-iquote', '--sysroot=' ]
  for flag in flags:
    new_flag = flag
 
    if make_next_absolute:
      make_next_absolute = False
      if not flag.startswith( '/' ):
        new_flag = os.path.join( working_directory, flag )
 
    for path_flag in path_flags:
      if flag == path_flag:
        make_next_absolute = True
        break
 
      if flag.startswith( path_flag ):
        path = flag[ len( path_flag ): ]
        new_flag = path_flag + os.path.join( working_directory, path )
        break
 
    if new_flag:
      new_flags.append( new_flag )
  return new_flags
 
def IsHeaderFile( filename ):
  extension = os.path.splitext( filename )[ 1 ]
  return extension in [ '.h', '.hxx', '.hpp', '.hh' ]
 
def GetCompilationInfoForFile( filename ):
  # The compilation_commands.json file generated by CMake does not have entries
  # for header files. So we do our best by asking the db for flags for a
  # corresponding source file, if any. If one exists, the flags for that file
  # should be good enough.
  if IsHeaderFile( filename ):
    basename = os.path.splitext( filename )[ 0 ]
    for extension in SOURCE_EXTENSIONS:
      replacement_file = basename + extension
      if os.path.exists( replacement_file ):
        compilation_info = database.GetCompilationInfoForFile(
          replacement_file )
        if compilation_info.compiler_flags_:
          return compilation_info
    return None
  return database.GetCompilationInfoForFile( filename )
 
def FlagsForFile( filename, **kwargs ):
  if database:
    # Bear in mind that compilation_info.compiler_flags_ does NOT return a
    # python list, but a "list-like" StringVec object
    compilation_info = GetCompilationInfoForFile( filename )
    if not compilation_info:
      return None
 
    final_flags = MakeRelativePathsInFlagsAbsolute(
      compilation_info.compiler_flags_,
      compilation_info.compiler_working_dir_ )
 
    # NOTE: This is just for YouCompleteMe; it's highly likely that your project
    # does NOT need to remove the stdlib flag. DO NOT USE THIS IN YOUR
    # ycm_extra_conf IF YOU'RE NOT 100% SURE YOU NEED IT.
    #try:
    #  final_flags.remove( '-stdlib=libc++' )
    #except ValueError:
    #  pass
  else:
    relative_to = DirectoryOfThisScript()
    final_flags = MakeRelativePathsInFlagsAbsolute( flags, relative_to )
 
  return {
    'flags': final_flags,
    'do_cache': True
  }

YouCompleteMe提供的其他功能

YCM除了提供了基本的補全功能,自動提示錯誤的功能外,還提供了類似tags的功能：

跳轉到定義GoToDefinition
跳轉到聲明GoToDeclaration
以及兩者的合體GoToDefinitionElseDeclaration

可以在.vimrc中配置相應的快捷鍵。

nnoremap <leader>gl :YcmCompleter GoToDeclaration<CR>
nnoremap <leader>gf :YcmCompleter GoToDefinition<CR>
nnoremap <leader>gg :YcmCompleter GoToDefinitionElseDeclaration<CR>

另外，YCM也提供了豐富的配置選項，同樣在.vimrc中配置。具體請參考

let g:ycm_error_symbol = '>>'
let g:ycm_warning_symbol = '>*'

同時，YCM可以打開location-list來顯示警告和錯誤的信息:YcmDiags。個人關於ycm的配置如下：

" for ycm
let g:ycm_error_symbol = '>>'
let g:ycm_warning_symbol = '>*'
nnoremap <leader>gl :YcmCompleter GoToDeclaration<CR>
nnoremap <leader>gf :YcmCompleter GoToDefinition<CR>
nnoremap <leader>gg :YcmCompleter GoToDefinitionElseDeclaration<CR>
nmap <F4> :YcmDiags<CR>

YCM提供的跳躍功能採用了vim的jumplist，往前跳和往後跳的快捷鍵為Ctrl+O以及Ctrl+I。

總結

YouCompleteMe是我用過的最爽的一個自動補全的插件了。之前使用acp時，遇到大文件基本上就卡死了，以至於都不怎麼敢使用。由於YCM使用的時C/S結構，部分使用vim腳本編寫，部分認為原生代碼，使得跑起來速度飛快。

文章出處

http://blog.jobbole.com/58978/

繼續閱讀 >

訂閱：文章 (Atom)

2015年4月29日 星期三

問題一：Scope

問題二：Create “native” methods

問題三：Hoisting

問題四：How this work in JavaScript

問題五：call() and apply()

問題一：Scope

2015年4月21日 星期二

2015年4月20日 星期一

安裝 NVM 來管理你的 Nodejs

Install script

Usage

參考網址

安裝 NVM 來管理你的 Nodejs

2015年4月19日 星期日

github: https://github.com/Valloric/YouCompleteMe

YouCompleteMe的特別之處

基於語義補全

猜

整合實現了多種插件

支持語言

使用效果圖

使用感受

安裝

安裝準備

mac下快速安裝

手動編譯安裝

配置

YouCompleteMe提供的其他功能

總結

文章出處

熱門文章

標籤雲

來訪人數

網誌記錄

關於 wb

Instagram Photo Gallery

I'm Wb

2015年4月29日星期三

問題四：How `this` work in JavaScript

問題五：`call()` and `apply()`

2015年4月21日星期二

2015年4月20日星期一

2015年4月19日星期日