前端seajs模塊化實(shí)踐

SHERlocked93 發(fā)布于2019-08-22 16:06 / 2124人閱讀

摘要：前端模塊化開發(fā)的價(jià)值惱人的命名沖突煩瑣的文件依賴使用來解決除了解決命名沖突和依賴管理，使用進(jìn)行模塊化開發(fā)還可以帶來很多好處模塊的版本管理。模塊化可以讓每個(gè)文件的職責(zé)單一，非常有利于代碼的維護(hù)。模塊定義規(guī)范與的模塊規(guī)范非常相近。

前端模塊化開發(fā)的價(jià)值
1、惱人的命名沖突
2、煩瑣的文件依賴
使用 Sea.js 來解決
除了解決命名沖突和依賴管理，使用 Sea.js 進(jìn)行模塊化開發(fā)還可以帶來很多好處：

模塊的版本管理。通過別名等配置，配合構(gòu)建工具，可以比較輕松地實(shí)現(xiàn)模塊的版本管理。
提高可維護(hù)性。模塊化可以讓每個(gè)文件的職責(zé)單一，非常有利于代碼的維護(hù)。Sea.js 還提供了 nocache、debug 等插件，擁有在線調(diào)試等功能，能比較明顯地提升效率。
前端性能優(yōu)化。Sea.js 通過異步加載模塊，這對(duì)頁面性能非常有益。Sea.js 還提供了 combo、flush 等插件，配合服務(wù)端，可以很好地對(duì)頁面性能進(jìn)行調(diào)優(yōu)。
跨環(huán)境共享模塊。CMD 模塊定義規(guī)范與 Node.js 的模塊規(guī)范非常相近。通過 Sea.js 的 Node.js 版本，可以很方便實(shí)現(xiàn)模塊的跨服務(wù)器和瀏覽器共享。

不廢話，直接上代碼:

在對(duì)應(yīng)的html頁面引入seajs文件以及配制文件basejs文件

basejs:

在action.js中調(diào)用對(duì)應(yīng)的對(duì)象方法

在那頁面行為控制的js文件中，類似indexControllerjs

對(duì)于js文件模塊一般方法
參考
https://github.com/seajs/seaj...

GPU云服務(wù)器云服務(wù)器 seajs模塊前端模塊化前端模塊 SeaJs

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94063.html

相關(guān)文章

seajs 源碼解讀

摘要：本文主要簡(jiǎn)單地解讀一下的源碼和模塊化原理。其中，是這次源碼解讀的核心，但我也會(huì)順帶介紹一下其他文件的作用的。對(duì)代碼比較簡(jiǎn)單，其實(shí)就是聲明一下全局的命名空間。然而，真正的核心在于處理模塊依賴的問題。 seajs 簡(jiǎn)單介紹 seajs是前端應(yīng)用模塊化開發(fā)的一種很好的解決方案。對(duì)于多人協(xié)作開發(fā)的、復(fù)雜龐大的前端項(xiàng)目尤其有用。簡(jiǎn)單的介紹不多說，大家可以到seajs的官網(wǎng)seajs.org參看...

LiangJ 2019-08-19 14:40 評(píng)論0 收藏0
Javascript模塊全攬

摘要：要求模塊編寫必須在真正的代碼之外套上一層規(guī)定的代碼包裝，樣子看起來是這樣的模塊代碼通過傳遞一個(gè)簽名為的回調(diào)函數(shù)給函數(shù)，就可以把需要注入的變量和函數(shù)注入到模塊代碼內(nèi)。之前寫的文章急速Js全棧教程得到了不錯(cuò)的閱讀量，霸屏掘金頭條3天，點(diǎn)贊過千，閱讀近萬，甚至還有人在評(píng)論區(qū)打廣告，可見也是一個(gè)小小的生態(tài)了；）?？磥砗蚃S全棧有關(guān)的內(nèi)容，還是有人頗有興趣的。 showImg(https://...

lily_wang 2019-08-23 11:41 評(píng)論0 收藏0
seajs模塊化改造實(shí)踐

摘要：為對(duì)象字符串時(shí)，表示模塊的接口就是該對(duì)象字符串。我們來看一個(gè)實(shí)際的例子支付寶的登陸頁面。在網(wǎng)頁支付寶收銀臺(tái)中的運(yùn)用很直觀的就能看到插模塊的合并，這個(gè)合并的工作就是構(gòu)建工具的功勞了。前言一月份的時(shí)候，臨近放假，拿到一個(gè)需求，新增一個(gè)產(chǎn)品，我一個(gè)前端對(duì)一個(gè)java后端，兩個(gè)星期的開發(fā)時(shí)間。因?yàn)榇蟛糠止δ茉趧e的產(chǎn)品都已經(jīng)有了，基本都是簡(jiǎn)單處理一下拿過來，再添加一下額外需要的功能，比如選...

justjavac 2019-08-20 14:20 評(píng)論0 收藏0
前端性能優(yōu)化（三）——傳統(tǒng) JavaScript 優(yōu)化的誤區(qū)

摘要：二模塊化誤區(qū)加快加載和執(zhí)行的速度，一直是前端優(yōu)化的一個(gè)熱點(diǎn)。結(jié)果文件減少，也達(dá)到了預(yù)期的效果。避免不必要的延遲。最后再根據(jù)文件的功能類型，來決定是放在頁面的頭部還是尾部。注：本文是純技術(shù)探討文，無圖無笑點(diǎn)，希望您喜歡一.前言軟件行業(yè)極其缺乏前端人才這是圈內(nèi)的共識(shí)了，某種程度上講，同等水平前端的工資都要比后端高上不少，而圈內(nèi)的另一項(xiàng)共識(shí)則是——網(wǎng)頁是公司的臉面！幾年前，谷歌的一項(xiàng)...

UsherChen 2019-08-14 15:08 評(píng)論0 收藏0
JS或Jquery

摘要：大潮來襲前端開發(fā)能做些什么去年谷歌和火狐針對(duì)提出了的標(biāo)準(zhǔn)，顧名思義，即的體驗(yàn)方式，我們可以戴著頭顯享受沉浸式的網(wǎng)頁，新的標(biāo)準(zhǔn)讓我們可以使用語言來開發(fā)。 VR 大潮來襲 --- 前端開發(fā)能做些什么去年谷歌和火狐針對(duì) WebVR 提出了 WebVR API 的標(biāo)準(zhǔn)，顧名思義，WebVR 即 web + VR 的體驗(yàn)方式，我們可以戴著頭顯享受沉浸式的網(wǎng)頁，新的 API 標(biāo)準(zhǔn)讓我們可以使用 ...

CatalpaFlat 2019-08-22 11:17 評(píng)論0 收藏0