NPM Script 跑bash

我們在 npm 的 script 中,有時候會需要下 bash CMD指令,像是:

#! ./package.json
"scripts": {
    "runsh": "git status"
  }

只要在CMD下npm run runsh,就會執行git status

繼續閱讀.....

【javascript】了解函式(function)很重要的筆記

雖然會寫 javascript ,但一直沒有好好花時間研究他,有時候常常寫到一些很奇怪的bug,其實都不了解他運作原理造成的。在看【javascript設計模式】時,就把自己覺得很重要的部份記錄下來(誰叫我健忘....),這篇拿來記錄一些對於函式(function)的重點。

繼續閱讀.....

【javascript】call 和 apply

一直不知道 js 上的 call 和 apply 的差異,昨天去面試整個考題寫不出來阿阿阿~~~就來記錄一下吧!GO!

call 和 apply 的差異?

call 可以接受一連串的參數,而 apply 則是接受array。

就這樣? 對,就這樣 = =a.....看範例。

繼續閱讀.....

【Heroku】使用 Browserify-Rails

Rails 的 asset pipeline 很方便,方便到覺得自己有點廢,所以前些日子結束在 Rails 上的專案後,跑去用玩 gulp 來試試看自己把這些檔案綁在一起。
但在接觸了 CommonJS 後,很喜歡把片段包成 module 的方式來做,維護起來方便很多,在 Rails 上用不到 webpack,就單純的來用用 Browserify 吧。

繼續閱讀.....

AMD, UMD, CommonJS

AMD(Asynchronous Module Definition)

中文稱作【異步加載模塊】,是從 RequireJS 發展出來的一個模式,使用方式如下:

下面範例是依賴注入jquery:

//    filename: one.js

define(['jquery'], function ($) {
    //    methods

    function myFunc(){};

    //    回傳 public methods

    return myFunc;
});

你當然不可能只會注入單一 module ,下面示範依賴注入多個 module:

//    filename: one.js

define(['jquery', 'underscore'], function ($, _) {
    //    methods

    function a(){};    //    private function,下面並沒有 return

    function b(){};    //    public function

    function c(){};    //    public function


    //    回傳 public methods

    return {
        b: b,
        c: c
    }
});

這邊要注意的是,jqueryunderscore 的兩個 module 變成由 $ 和 _ 取代,但只有在 define的範圍內有作用。

CommonJS

CommonJS 是一種在 Node.js 上的撰寫風格,在Browserify也有被實作。

//    filename: one.js


//    dependencies

var $ = require('jquery');

//    methods

function myFunc(){};

//    回傳 public method (單一個function)

module.exports = myFunc;

回傳多個 function 的範例為下:

//    filename: foo.js

var $ = require('jquery');
var _ = require('underscore');

//    methods

function a(){};    //    private function 因為並無 module.exports 回去

function b(){};    //    public function

function c(){};    //    public function


//    回傳 public methods

module.exports = {
    b: b,
    c: c
};

UMD(Universal Module Definition)

AMD 和 CommonJS 雖然都被大家廣泛的應用和接受,但彼此間卻沒有共識,而 UMD 則可以在這兩個平台上溝通。
雖然格式看起來很醜,但卻可以在 AMD 和 CommonJS下運作。

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD

        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS-like

        module.exports = factory(require('jquery'));
    } else {
        // Browser globals (root is window)

        root.returnExports = factory(root.jQuery);
    }
}(this, function ($) {
    //    methods

    function myFunc(){};

    //    輸出 public method

    return myFunc;
}));

回傳多個 function 的範例為下:

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD

        define(['jquery', 'underscore'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS-like

        module.exports = factory(require('jquery'), require('underscore'));
    } else {
        // Browser globals (root is window)

        root.returnExports = factory(root.jQuery, root._);
    }
}(this, function ($, _) {
    //    methods

    function a(){};    //    private function 因為並無 module.exports 回去

    function b(){};    //    public function

    function c(){};    //    public function


    //    exposed public methods

    return {
        b: b,
        c: c
    }
}));

參考:

  1. What Is AMD, CommonJS, and UMD?
  2. 关于 CommonJS AMD CMD UMD
  3. Writing Modular JavaScript With AMD, CommonJS & ES Harmony
  4. AMD

【Browserify】 增加node_modules以外的預設路徑

Browserify可以做什麼?

Browserify可以很方便的將js模組化,讓你維護起js可以輕鬆許多(你不會想在上千行的code找某個methon...Orz..)。

專案中,我們使用npm安裝常使用的套件,如:jqueryangular之類的,只要在專案中安裝完成後,在js文件中輸入:

global.$ = global.jQuery = require('jquery');
var angular = require('angular');

$('.gogo').css('display', 'none');
繼續閱讀.....

Gulp-自動化的好幫手

忙了半年的專案告個段落,在這之前寫前端 HTML 用的都是 ERB 語言,編譯工具則是 fire.app,這次的專案因為後端是使用 Ruby on Rails,對 erb 樣板的應用又更深了,而 fire.app 提供的是比較基本的 helper。想說來換個 template 語言寫寫看,像是jadehamlslim,這些都很多人使用, haml 很常被拿來跟erb搭配,我是沒寫過,專案也是笨笨的用html寫,所以這次就來挑戰 jade。當然,這些都只是方便你編寫 HTML 的工具,他們最終都要轉回一般的 html ,node.js的套件管理工具-npm,提供了非常多程式界的神們寫好的編譯工具,這時候你會想,那要怎麼用它呢?這麼多指令常常要打不是很麻煩?,這時候就要用到我們這次要介紹的Gulp來幫忙你做這些重複要的事情,讓他可以自動化!

繼續閱讀.....

gulp資源蒐集

運行靜態網頁

http-server

常用的gulp

  1. gulp-minify-css: 壓縮css
  2. gulp-livereload: 就是livereload
  3. gulp-ruby-sass: 編譯sass
  4. gulp-concat: 合併檔案(css、js)
  5. gulp-clean: 清除檔案
  6. gulp-uglify: js的變數混淆
  7. gulp-jshint: 檢查語法
  8. gulp-filter: 檔案過濾
  9. gulp-debug: 就debug阿..哈哈哈哈
  10. gulp-filter: 過濾src
  11. gulp-html-prettify: 把HTML變漂亮
  12. gulp-bower-src: copy bower檔案到某處
  13. main-bower-files: 過濾出基本的bower檔案
  14. browserify-shim:
  15. gulp-connect: livereload和http-server

疑難雜症

  1. Synchronous tasks and dependencies with Gulp

Target 和 currentTarget

HTML

<a ng-click="showIntrod($event)">
    <i class="fa fa-caret-down"></i>看介紹
</a>

JS

$scope.showIntrod = function($event) {
    console.log($event.currentTarget);
  console.log($event.Target);
};

這是我今天遇到的一個結構,當我今天在 click 這個 link 的時候,因為裡面還有一個i文字,如果我點選的是a時,console的內容如下:

  1. a
  2. a

可是如果點選到的是link內的i,回傳的則是:

  1. a
  2. i

currentTarget會回傳觸發事件的節點上,而Target則會回傳當前的物件結構,currentTarget則可以用來避免發生冒泡事件。

CSS效能文章

這邊主要是拿來蒐集一些跟CSS文章效能有關的文章。

  1. Writing efficient CSS
  2. Why do browsers match CSS selectors from right to left?為什麼css選擇器由右至左?
  3. CSS Selector Performance has changed! (For the better)