2020年3月2日 星期一

inherits(繼承)

在node.js裡面也有繼承的方式,
但是,目前看到宣告一個函式可以繼承一個類別,
補充:最後發現是宣告一個函式,它會繼承一個類別的建構子(Constructor)
那就表示這一個函式也是一個建講子(Constructor),
它身為一個建構子,就表示它是某一個類別的建構子,
所以,表示你也因為這一個函式inherts宣告了一個新的類別LoopProcessor
因此可以用這一個新的類別建立物件。

這一個方式還蠻特別的,可能要研究一下。
這裡看起來宣告的LoopProcessor繼承了EventEmitter(EventEmitterEventEmitter類別的建構子(Constructor))
例子在下面這裡
Day11 - Node.js EventEmitter


var emitter = require('events').EventEmitter;
// need util module when using inherits
var util = require('util');
 
function LoopProcessor(num) {
    // create a new object for current class
    var me = this;
 
    setTimeout(function () {
 
        for (var i = 1; i <= num; i++) {
            me.emit('BeforeProcess', i);
 
            console.log('Processing number:' + i);
 
            me.emit('AfterProcess', i);
        }
    }
    , 2000)
 
    return this;
}

//LoopProcessor is inherited from emitter class 
util.inherits(LoopProcessor, emitter)
 
var lp = new LoopProcessor(3);
 
lp.on('BeforeProcess', function (data) {
    console.log('About to start the process for ' + data);
});
 
lp.on('AfterProcess', function (data) {
    console.log('Completed processing ' + data);
});


可以參考util的function API
util.inherits

util.inherits(constructor, superConstructor)#
constructor <Function>
superConstructor <Function>

但是,目前並不建議使用util.inherits()
Usage of util.inherits() is discouraged. Please use the ES6 class and extends keywords to get language level inheritance support.


另外,這裡的this表示的是什麼呢?
一般來說,this表示的是在宣告類別(class)時,
會用到類別自己的成員或是函式時,
用這一個this.myfunction或this.mymember來表示。
但是,目前這一個宣告方式,
我想應該是因為他是一個建構子,
所以,這一個this表示的是一個未來繼承類別使用的。

補充:
var me = this;
我一開始有把這一行指令省略掉,
並且把下面所有me改為this

function LoopProcessor(num) {
    // create a new object for current class
    var me = this;
 
    setTimeout(function () {
 
        for (var i = 1; i <= num; i++) {
            me.emit('BeforeProcess', i);
 
            console.log('Processing number:' + i);
 
            me.emit('AfterProcess', i);
        }
    }
    , 2000)
 
    return this;
}

但這樣是行不通的,
程式跑到那裡會掛掉,
原因是什麼可能還要再研究一下~
var me = this;
是應該會宣告記憶體空間的地方,
所以,不能省略。

參考一下這個網站
Understanding the “this” Keyword in JavaScript
裡面提到
“this” Refers to a New Instance
When a function is invoked with the new keyword, then the function is known as a constructor function and returns a new instance. In such cases, the value of this refers to a newly created instance.
換句話說,若用這個方式的話,看起來是在function使用this
但實際上是建立一個類別(class)
這個方式還蠻特別的


如果我不使用parents的函式的話,
確實是可以不用宣告me這一個變數
例如修改如下

var emitter = require('events').EventEmitter;
// need util module when using inherits
var util = require('util');
 
function LoopProcessor(num) {
    // create a new object for current class
    // var me = this;
    setTimeout(function () {
        for (var i = 1; i <= num; i++) {
            // me.emit('BeforeProcess', i);
            console.log('Processing number:' + i);
            // me.emit('AfterProcess', i);
        }
    }
    , 2000)
    // return this;
}

//LoopProcessor is inherited from emitter class 
util.inherits(LoopProcessor, emitter)
 
var lp = new LoopProcessor(3);
 
lp.on('BeforeProcess', function (data) {
    console.log('About to start the process for ' + data);
});
 
lp.on('AfterProcess', function (data) {
    console.log('Completed processing ' + data);
});

換句話說,
如果我要使用母函式的東西的話,
我在函式宣告的時候,
就必需宣告一個變數,
並且把this指定給它

2020年3月1日 星期日

Node.JS - 簡化函式宣告

目前在學習Node.JS
有一些地方看不太懂,
多看一些網站,總算是了解了,
原來是省略了一些部分,
不過,這樣的寫法可讀性應該會變差,
但是,還是必需要了解別人是在寫什麼。


原本的程式碼

// get the reference of EventEmitter class of events module
var events = require('events');
// create an object of EventEmitter class by using above reference.
var em = new events.EventEmitter();

// bind the function with a event
em.on('FirstEvent', function (data) {
 console.log('First subscriber:' + data);
});
// emit event
em.emit('FirstEvent', 'I have entered the first Event!!');

實際上可以寫的清楚一點如下,
可讀性比較高


// get the reference of EventEmitter class of events module
var events = require('events');
//create an object of EventEmitter class by using above reference.
var em = new events.EventEmitter();

// Create an event handler:
var myEventHandler = function (data) {
 console.log('First subscriber:' + data);
}
// bind the function with a event
em.on('FirstEvent', myEventHandler);

//bind the function with a event
//em.on('FirstEvent', function (data) {
// console.log('First subscriber:' + data);
//});
//emit event
em.emit('FirstEvent', 'I have entered the first Event!!');

這個寫法必需懂,
因為看起來很多Node.JS都會用這個寫法!!

參考資料:
Node.js Events
Day11 - Node.js EventEmitter

2019年8月5日 星期一

如何建立文章縮圖


最近在研究如何建立文章縮圖

參考資料:
https://www.wfublog.com/2015/09/blogger-post-cover-first-image.html

2019年5月15日 星期三

開始學習Python

參考資料: 一小時Python入門-part 1 如何安裝 Jupyter (Ipython Notebook) - start(2019/05/17) - done(2019/05/17)

2019年5月10日 星期五

如何在iframe上可以做link的動作

目前正在研究 或許可以參考 using iframe image as a link

2019年5月8日 星期三

發現有許多template for Blogger

最近在找可以呈現投影片(slideshow)與影片的方式,
本來打算自己架一個wordpress server,
但是,
最後發現Blogger網路上就有許多資源,而且自己還不用架站,
影片就放在youtube再導到Blogger,
圖片放在google drive

目前找到一個喜歡的是
https://btemplates.com/2016/blogger-template-superhero/demo/

最後發現下面這一個更符合我的需求~
因為它的slider可以有兩個描述
而且最後我還發現這個slider可以超連結
https://btemplates.com/2016/blogger-template-healthyliving/demo/

接著我想要讓這一些slider可以直接讀取google drive的圖檔
這個就可以參考下面這一個影片的教學
Embed videos from Google Photos or Drive on your blog or website


發現一個更簡單可以加入slideshow的方式,
而且下面的文章可以直接引用facebook,
並且可以直接預覽
https://bloggerslider.shuvojitdas.com/2015/12/how-to-add-responsive-slideshow-widget-to-blogger.html

來試試看~~

簡單的slideshow
https://www.nosegraze.com/how-to-add-an-image-slider-to-your-blogger-blog/

參考:
https://btemplates.com/
Embed videos from Google Photos or Drive on your blog or website
http://imagesliderforblogger.blogspot.com/

search article by multiple labels

為了方便尋找文章,
通常會在文章後面加入label或tags
但是,如何設定,可以讓我們尋找多個條件的文章呢?

只要在blogger左上角搜尋的欄位輸入多個要尋找的標



Reference:
Blogger multiple label search