seajs入門使用

時間 2019-11-10

標籤 seajs 入門使用简体版

原文原文鏈接

使用 Sea.js 進行模塊化開發還可以帶來很是多優勢：javascript

模塊的版本號管理。html
經過別名等配置，配合構建工具，可以比較輕鬆地實現模塊的版本號管理。前端
提升可維護性。模塊化可以讓每個文件的職責單一，頗有利於代碼的維護。Sea.js 還提供了 nocache、debug 等插件，擁有在線調試等功能。能比較明顯地提高效率。java
前端性能優化。瀏覽器
Sea.js 經過異步載入模塊，這對頁面性能很是故意。性能優化
Sea.js 還提供了 combo、flush 等插件，配合服務端，可以很是好地對頁面性能進行調優。異步
跨環境共享模塊。前端性能
CMD 模塊定義規範與 Node.js 的模塊規範很是相近。經過 Sea.js 的 Node.js 版本號。可以很是方便實現模塊的跨server和瀏覽器共享。模塊化

seajs官方站點

Sea.js 2.3.0版本號的下載

seajs的文件結構：

以上步驟完畢，接下來演示一個怎樣簡單的使用seajs

第一步：

define

用來定義模塊。Sea.js 推崇一個模塊一個文件，遵循統一的寫法：

define(function(require,exports,module){
    
	  var _msg = 'not set msg!';
	  exports.setMsg = function(msg){
		  _msg = msg;
	  };
	  
	  exports.getMsg = function(){
		  return _msg;  
	  };
});

第一個參數：require用來獲取指定的接口，注意require僅僅接受字符串直接是量做爲參數

第二個參數：exports用來在模塊內部對外部提供接口

第三個參數：module與exports相似，用來在模塊內部對外提供接口

第二步：

當模塊定義好了。那麼就把剛纔配置好的模塊配置入seajs。

seajs.config

seajs.config({
    alias:{
         'init':"modul/init.js"
        }
});

init表示模塊的id是本身定義的，「modul/init.js」是模塊的相對路徑可以省略js。注意：模塊的絕對路徑是seajs-2.3.0/dist/modul/init.js

seajs.use

用來在頁面中載入一個或多個模塊。工具

seajs.use("init", function(init){
	 //設置值
	 init.setMsg('Hello World');
     alert(init.getMsg());
});

效果：

HTML頁面的代碼：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 導入seajs-2.3.0這個文件 -->
<script type="text/javascript" src="seajs-2.3.0/dist/sea.js"></script>
   
<script type="text/javascript">
//配置seajs
seajs.config({
    alias:{
         'init':"modul/init.js"
        }
});

//使用seajs
seajs.use("init", function(init){
	 //設置值
	 init.setMsg('Hello World');
     alert(init.getMsg());
});
</script>
</head>
<body>
     <h1>Test seajs</h1>
     
</body>
</html>

1. SeaJS入門
2. SeaJS入門篇一怎麼使用query
3. Seajs使用實例入門介紹
4. seajs入門教程
5. seajs.的使用
6. seajs 使用文檔
7. seajs使用收集
8. 初次seajs使用
9. seajs使用記錄
10. SeaJS入門教程系列之SeaJS介紹（一）
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Neo4j數據庫入門教程 - NoSQL教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用
• Java Agent入門實戰（三）-JVM Attach原理與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。