nodejs快速入門（一）-模組化開發

阿新 • • 發佈：2019-01-13

隨著網站開發的複雜度越來越高，js程式碼和js檔案的增多，出現了開發者頭疼的兩個問題：① 命名衝突；②檔案依賴。

js模組化開發可以解決這些問題。

①變數命令衝突

在js檔案中，如下建立一個變數並賦予一個函式。如果檔案的程式碼過多，在後續的程式碼中再次使用add變數，就會將原來的add變數覆蓋，就造成了變數的命名衝突。

var add=function(v1,v2){
	return v1+v2;
}

// 此處省略一萬行程式碼

var add = 123;

我們逐漸試著重程式碼進行改善

（1）物件封裝

var calculator={
	num:123;
}
calculator.add=function(v1,v2){
	return v1+v2;
}

這時候 add的作用範圍在caculator物件中，就不會避免後續程式碼直接寫 var add = value 造成變數命名衝入。但是這樣的程式碼還是有很大的侷限性，物件裡面的屬性和方法很容易被修改掉，很不安全。

（2）劃分私有名稱空間

var calculator=(function(){
	var num=123;
	var add=function(v1,v2){
		return v1+v2;
	};

	return {
		num:num,
		add:add
	}
})()

通過匿名函式，閉包將add的私有化到calculator中，可以保護好裡面的屬性和方法，但是這種方式的侷限在於不能維護和擴充套件功能。

（3）開閉原則-維護擴充套件

var calculator=(function(){
	var num=123;
	var add=function(v1,v2){
		return v1+v2;
	};

	return {
	num:num,
	add:add
	}
})();

var calculator=(function(global){
	global.mod=function(v1,v2){
		return v1%v2;
	}
	return global;
})(window.calculator||{});

對add的修改關閉了，同時提供了對calculator的功能擴充套件，window.caucluator傳遞就是為了打破封裝性。

②檔案依賴

在開發js程式碼的過程中，例如使用了jquery.js，就需要通過<script src="./jquery.js"></script>的形式引入檔案，形成硬編碼。如以下程式碼

var calculator=(function(){
	var num=123;
	var add=function(v1,v2){
		return v1+v2;
	};

	return {
	num:num,
	add:add
	}
})();

var calculator=(function(global){
	global.mod=function(v1,v2){
		return $(v1) % $(v2); // 這裡使用了jquery的$
	}
	return global;
})(window.calculator||{});

根據以上問題，引入模組化開發

模組化規範

①伺服器端規範

nodejs就是遵循了CommonJS規範。

②瀏覽器端規範

RequireJS遵循AMD規範。

SeaJS遵循CMD規範。

這裡先介紹SeaJS Demo

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SeaJS Demo</title>
    <script type="text/javascript" src="./modules/seajs/2.2.0/sea.js"></script>
</head>
<body>
<input type="" name="" value="1" id="v1">
<input type="" name="" value="2" id="v2">
    
</body>
    <script type="text/javascript">
     seajs.use('./modules/calculator',function(cal){ // 引數1：引入模組路徑；引數2：回撥函式
         console.log(cal.add2());

     });
    </script>
</html>

在index.js的同級目錄modules中，建立如下檔案

calculator.js

define(function(require,exports,module) {
  var operator = require('./add');
 
  exports.add=operator.add;
  exports.add2=operator.add2;
});

add.js

define(function(require,exports,module) {
 var add=function(v1,v2){
   return v1+v2;
 }
 $=require('./jquery.js');
  var add2=function(){
      var v1= $('#v1').val();
      var v2= $('#v2').val();
   return (v1-0)+(v2-0);
 }
 
	exports.add=add;
	exports.add2=add2;
});

檔案目錄

（1）define是SeaJS的全域性函式，定義模組。

（2）modules是一個全域性變數相當於瀏覽器解析dom 的window物件。

（3）exports是modules.exports的屬性物件別名；不能直接給exports賦值，暴露單個屬性和方法直接給module.exports賦值。exports提供多個屬性和方法向外暴露。

（4）seajs.user()函式啟動模組；

（5）require() 用於載入模組。

模組化開發保證了複合“單一職責”設計，通過匿名函式的注入，保證了模組的獨立性，而且也能清晰的表達模組之間的依賴。這裡簡單介紹SeaJS，如果需要知道更多，訪問http://www.zhangxinxu.com/sp/seajs/

nodejs快速入門（一）-模組化開發

模組化規範

nodejs快速入門（一）-模組化開發

Kotlin快速入門（一）基礎

開源性能測試工具JMeter快速入門（一）

全棧開發之HTML快速入門（一）

spring-data-jpa快速入門（一）——

筆記50 Mybatis快速入門（一）

筆記61 Spring Boot快速入門（一）

區塊鏈快速入門（一）——區塊鏈簡介

01 React快速入門（一）——使用迴圈時對於‘key’報錯處理

numpy快速入門（一）

vue快速入門（一）

XML Schema快速入門（一）

python 快速入門（一）

Spring Boot 2.0 WebFlux 上手系列課程：快速入門（一）

新版OpenGL學習入門（一）——初始化視窗

Mac下CMakeLists.txt檔案的使用快速入門（一）

gRPC快速入門（一）——Protobuf簡介

Swift快速入門（一）第一個Swift程式

【原創】Spring-Cloud快速入門（一）微服務入門--轉載請註明出處

【原創】Spring-boot快速入門（一）HelloWord！--轉載請註明出處

nodejs快速入門（一）-模組化開發

模組化規範

相關推薦