Zi 字媒體
2017-07-25T20:27:27+00:00
這幾年 NodeJS 發展的速度的很快，許多產品的後端 (Backend Server) 均採用 NodeJS 進行設計，NodeJS 所採用的 Module 是遵循 CommonJS API 規範，在實現上最後會透過 module.exports 變數將模組導出。然而前端 (Frontend) 常用的 RequireJS 在實作上卻有些不同 (用的是 define 方法)，如果可以將前後端共用的程式碼，改寫為可以同時被 RequireJS 與 NodeJS 引用的程式，那麼就可以實現 DRY 原則 (Don't Repeat Yourself)，這樣一來再好不過了。
以下是程式碼樣板：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
'use strict';
/**
* Universal JavaScript package
* JavaScript, NodeJS Module and RequireJS Module Supported
*/
var Universal = function () {
var privateVar = 'I_AM_PRIVATE_VAR';
var privateFn = function () {
console.log('I am private function.');
};
// constructor
var constructor = function () {
console.log(privateVar);
privateFn();
};
var publicFn = function () {
console.log('I am public function.');
};
constructor();
return {
/**
* Public defined
*/
publicVar: 'I_AM_PUBLIC_VAR',
/**
* Public function
*/
publicFn: publicFn
};
};
// Hook into NodeJS and RequireJS module systems
if (typeof module !== 'undefined' && 'exports' in module) {
module.exports = Universal;
} else if (typeof(define) === 'function') {
define(Universal);
}
上述程式碼 (GitHub) 最後在結束的時候，判斷是否存在 module.exports 或 define 變數來決定導出或宣告，基本上在 NodeJS 與 RequireJS 都可以運作，當然 HTML 透過 直接引用也是可以的。
1
2
3
var universal = require('./src/foxdrive/universal')();
console.log(universal);
universal.publicFn();
執行結果 STD OUT 如下：
I_AM_PRIVATE_VAR I am private function. { publicVar: 'I_AM_PUBLIC_VAR', publicFn: [Function] } I am public function.
1
2
3
4
5
6
7
8
9
require([
'./js/universal.js'
], function (universal) {
console.log(universal);
universal.publicFn();
});
Chrome 執行 Console 顯示如下：
1
2
3
4
5
6
src="./js/universal.js">
var universal = Universal();
console.log(universal);
universal.publicFn();
Chrome 執行 Console 顯示如下：
後來看書後發現有一個更棒更漂亮的版本 (GitHub)，上面的程式整個 Low 掉，經過整理與改良的版本如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
'use strict';
/**
* Universal JavaScript package PLUS!
* JavaScript, NodeJS Module and RequireJS Module Supported
*/
(function (name, definition) {
if (typeof(module) !== 'undefined' && module.exports) {
module.exports = definition;
} else if (typeof(define) === 'function') {
define(definition);
} else {
this[name] = definition();
}
}('Universal', function () {
var privateVar = 'I_AM_PRIVATE_VAR';
var privateFn = function () {
console.log('I am private function.');
};
// constructor
var constructor = function () {
console.log(privateVar);
privateFn();
}();
var publicFn = function () {
console.log('I am public function.');
};
return {
/**
* Public defined
*/
publicVar: 'I_AM_PUBLIC_VAR',
/**
* Public function
*/
publicFn: publicFn
};
}));
分享到 Twitter(在新視窗中開啟)
按一下以分享至 Facebook(在新視窗中開啟)
分享到 LinkedIn(在新視窗中開啟)
點這裡寄給朋友(在新視窗中開啟)
按一下即可分享至 Skype(在新視窗中開啟)
分享到 Reddit(在新視窗中開啟)
分享到 Tumblr(在新視窗中開啟)
按一下以分享到 Telegram(在新視窗中開啟)
寫了
5860316篇文章，獲得
23313次喜歡