1. 程式人生 > >sea.js的使用

sea.js的使用

sea.js外掛的使用案例

在用到seajs的頁面中用script標籤應用seajs檔案,在引入的html檔案中t新增一段配置程式碼:

在頁面中載入模組

// seajs 的簡單配置
seajs.config({
  base: "../sea-modules/",
  alias: {
    "jquery": "jquery/jquery/1.10.1/jquery.js"
  }
})

// 載入入口模組
seajs.use("../static/hello/src/main")

特別注意:
在script中的配置檔案是對於html所處的位置而言

模組程式碼

在html頁面中引入js檔案中的使用方法:
1.模組程式碼(index.html的static/index/main.js新增如下程式碼)

define(function(require,exports,module) {
    // var title= document.getElementById('title');
    // title.innerHTML = "yes it works";
    var changeText = require('../change_text.js');
    var title = document.getElementById('title');
    title.innerHTML = changeText.text;
})
  1. jquery程式碼(lucky的static/lucky/main.js新增如下程式碼)
let lucky = new Lucky();
lucky.printTxt('#lucky');

function Lucky(){
    let _this = this;
    _this.printTxt = function(tags){
        $(tags).html('good lucky');
    }
}

目錄結構

|– modules 存放 seajs、jquery 等檔案,這也是模組的部署目錄
|– static 存放各個專案的 js、css 檔案
| |– hello
| -- lucky<br>

– app 存放 html 等檔案
  |– index.html
  `– lucky.html