seaJs學習筆記2 – seaJs組建庫的使用

時間 2019-12-07

標籤 seajs 學習筆記組建使用简体版

原文原文鏈接

原文地址：seaJs學習筆記2 – seaJs組建庫的使用javascript

我以爲學習新東西並非會使用它就夠了的，會使用僅僅表明你看懂了，理解了，二不表明你深刻了，徹悟了它的精髓。html

因此不斷的學習將是源源不斷。java

最近在學習seaJs和AngualrJs的指令和服務，感受angularjs實在太強大了，好吧，步入主題，今天在深刻了解seaJs的時候發現了一款神器，不過這款神奇貌似沒有更新和維護了，但我測試了一下，仍是能夠用的。node

這款神奇就是SeaJS 組件庫，Sea.js 是一個適用於 Web 瀏覽器端的模塊加載器。在 Sea.js 裏，一切皆是模塊，全部模塊協同構建成模塊系統。jquery

神器DOC地址：http://panxuepeng.github.io/seajslib/git

下面咱們來簡單的演示一下如何吧angularjs

首先你要下載本神器：https://github.com/panxuepeng/seajslib/archive/gh-pages.zipgithub

由於它是基於seaJs，而seaJs是須要nodeJs環境的，而且本神器下載以後是須要用npm進行安裝下載相關依賴的庫，因此grunt你也是得下載的。ajax

配置好環境後，執行2步，（好比你解壓到seajslib文件夾下）：shell

一、在命令行窗口進入 seajslib/lib 目錄，執行 npm install shelljs。
 
二、在命令行窗口進入 seajslib/lib 目錄，執行 node install.js ，安裝 Grunt 相關模塊。

而後，你就能夠拷貝seajslib下的lib文件夾到你的項目中去使用了。其實你會發現其中包含了不少組建模塊，咱們也能夠把須要的拷貝出來，而不是拷貝整個。

來個小李子，直接上代碼，清晰直接：

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="../lib/seajs/src/seajs.js"></script>
<script src="../lib/jquery/jquery-1.9.1.min.js"></script>
</head>
<body>
<a href="data.txt" data-toggle="dialog">預覽(ajax)</a><br/>
<a href="data.txt" data-toggle="artdialog">請點擊我（選擇器方式拿到內容）</a>
<script>
seajs.use(['dialog/src/dialog', 'artdialog/src/artdialog']);
</script>
</body>
</html>

在上面的例子中，a標籤裏面的都是指向的一個文件，這就是用ajax異步請求獲取data.txt的文件內容，這裏我用到了2個組建，dialog，artdialog，在data-toggle中指定須要使用的組建名便可。

效果圖：