sea.js最佳實踐一基礎框架搭建

時間 2019-11-11

標籤 sea.js sea 最佳實踐基礎框架搭建欄目 JavaScript 简体版

原文原文鏈接

我是個比較懶的人，基本不怎麼寫東西，表達也不是很好。最近辭職在家，閒得有點慌，以爲仍是寫點東西比較好。以前工做中用到了一個js模塊加載器，以爲至關不錯。今天就寫點關於sea.js的東西。oschina裏已經有一篇博客介紹他了，這裏就很少說了。爲何用sea.js，你們能夠參看這裏。更多信息能夠訪問官網。這裏之討論下咱們以前項目是怎麼用它的，更具體內容你們仍是看看文檔吧。（一下代碼都是基於sea.js vesion 2.0）首先咱們須要引入sea.js。
index.html  <html> <head> <title>sea.js最佳實踐</title> <style type="text/css"> #alert { padding: 10px 20px; background: green; float: left; color: #fff; cursor: pointer; } </style> <script type="text/javascript" src="js/seajs/2.0.0/sea-debug.js?t=123" data-config="sea-js-config.js?t=123"></script> </head> <body> <div id="alert">點擊我</div> </body>javascript

</html>

上面的data-config是指sea.js的配置文件的路徑。還有一個屬性是data-main，它項目的起始模塊。data-main是可選項，咱們這裏不使用他。首先咱們來看看sea-js-config.jscss

<!-- lang: js -->
seajs.config({
  // 配置插件
  plugins: ['shim'],

  // 配置別名
  alias: {
    // 配置 jquery 的 shim 配置，這樣咱們就能夠經過 require('jquery') 來獲取 jQuery
    'jquery': {
      src: 'libs/jquery/1.9.1/jquery.js',//注意，這裏是從sea.js所在目錄的上兩節目錄開始查找文件
      exports: 'jQuery'
    }
  }
});

plugins選項配置插件，這裏使用了shim插件，更多插件可點這裏。因爲jquery不是一個標準的CMD模塊，因此直接加載jquery是錯誤的。這裏使用了shim插件，會自動把jquery轉換一成一個標準的CMD模塊。不用人工改動jquery原碼。alias是配置別名，方便加載的。同時它還有不少功能，好比加載依賴包等，這個後面會提到。html

再看下app.jsjava

<!-- lang: js -->
/**
*項目主模塊
*/
define(function(require, exports, module) {
//加載jquery, 並把它$設爲全局變量
window.$ = window.jQuery = $ = require('jquery');

//定義一個全局的模塊加載函數.module爲模塊名，options爲參數
exports.script_load = function(module, options) {
	//使用require.async異步加載模塊。模塊須要提供一個固定的對外調用接口，這裏定義爲run。
	require.async('modules/' + module, function(module) {
		if (typeof(module.run) === 'function') {
			module.run(options);
		}
	});
}

window.script_load = exports.script_load
});

上面咱們加載了jquery, 定義了一個模塊加載函數。如今咱們在html頁面加入以下代碼：jquery

<!-- lang: js -->
<script type="text/javascript">
	seajs.use('modules/app', function(app) {
		app.script_load('index');
	});
</script>

這樣就會去加載index模塊，並執行index模塊裏的exports.run方法。 index.jsgit

<!-- lang: js -->
define(function(require, exports, module) {
exports.run = function() {
	$('#alert').click(function() {
		alert('彈出了一個框！');
	});
}
});

當咱們點擊頁面上的綠色區域，能彈出框了。之後咱們在如今的基礎上再作一些複雜點的東西。 ps: 編輯器真心很差用。HTML代碼始終有問題。代碼放在了這裏https://github.com/lvshuang/seajs_examplegithub

代碼會時不時的更新下，跟多的例子你們參看代碼。app