摘要:遵循的是異步模塊定義規范,遵循的是通用模塊定義規范。規范的不同,導致了兩者的不同。在嘗試讓第三方類庫修改自身來支持,目前只有少數社區采納。是沒有明顯的,是明顯沒有。無這方面的支持。
發布之后發現存在一個顯示的問題,大家可以移步到我的簡書參考,謝謝大家!!!
我的簡書《seajs和requirejs技術指導文檔》
昨天到今天,老衲翻閱數十篇技術文檔,為了搞明白seajs(CMD)和 requireJS(AMD)到底是個什么鬼,
當然也包括官網了,只是都不太盡如人意,理解起來感覺好費解,然后跟我的小伙伴交流了一晚上之后發現
了一個很形象的比喻,對于AMD和CMD的模式,其實理解的時候我借助了MVC這個結構來理解,感覺理解起來
相對容易一點兒,對于MVC這個結構我不做過多介紹,有興趣的可以去看看
http://www.cnblogs.com/aaronj...
下面進入我們正題,說的不好的地方歡迎指正,一塊學習進步.
咱們說道說道這兩個模塊兒開發的有趣的地方吧,我會用咱們常說的一句“我負責貌美如花,你負責掙錢養家”來
說道說道,其實說白了就是分工明確:
第一步、前端頁面的引入接口,他的作用就是進去接口;(PS:前端頁面直接展示給用戶,相當于你的女朋友只負責貌美如
花,但是你需要提供,提供一切的物質支持就是money[對于requirejs和seajs來說就是給前端頁面提供一個接口]);
第二步、這個接口負責所有的依賴文件,還有需要的配置各種參數,支持文件等等。
換句話說就是頁面上最直觀的顯示內容的調用方法,還有各種事件等等
(就相當于你,準備怎樣讓你的女朋友貌美如花。你要給提供化妝品、衣服之類的,沒事肯定少不了);
第三步、到了這一層,其實就是具體的邏輯的處理了,這一層的邏輯處理也是給第二層提供依賴的文件(
就相當于,你要給你的女朋友買這買那,你具體的工作是什么,做多少份兼職可以滿足你的女朋友的物質需求)
上邊兒說了這么多,其實就是為了想讓大家理解一下requirejs和seajs這兩種模塊化開發的形式是什么,怎樣分工的,
是不是多少有點兒進入狀態了
first.咱們先來說一下requirejs
頁面的引入接口
其中 r-index.js 就是相當于分工的第二步所在的位置,在這里邊兒,我們進行依賴文件的配置,
和對第一步前端頁面的顯示的支持
我們來看一下r-index.js是怎樣寫的
requirejs.config({
baseUrl: "js/", paths: { hammer: "lib/hammer.min", jquery:"lib/jquery.min", cookie:"lib/jquery.cookie", template:"lib/template" } });requirejs(["hammer", "jquery", "cookie","template","app/data"],
function(a,b,c,template,service) { service.getAll();service.getOne(); }
對這個就是進行基礎的業務的處理,
"app/data"就是具體的邏輯的處理,這些給第二步提供了所有的邏輯支持
下面我們來看一下 data.js data.js 所有第二步用到的邏輯都放在這里邊進行處理
define(["jquery","cookie"],function () {
return { /*所有數據*/ getAll:function (){ return alldata; }, /*指定id的數據*/ getOne:function (id){ } } })
有了上邊兒requirejs 的案例基礎我們來理解seajs的時候就方便的多了。
second.下面我們來看一下seajs的書寫規范
首先說一下第一步,接口
seajs.use("js/app/s-index.js");
然后看一下第二步的書寫方式
define(function (requie, exports, module) {
//依賴可以就近書寫 var hammer = require("js/lib/hammer.min"); ... var app = requie("app/data"); app.getAll(); app.getOne(); ... //軟依賴 if (status) { var b = requie("./b"); b.test(); } });
然后看一下第三步的書寫方式
module.export = { /*所有數據*/ getAll:function (){ return alldata; }, /*指定id的數據*/ getOne:function (id){ } } //需要注意的以下的寫法是錯誤的 export = { /*所有數據*/ getAll:function (){ return alldata; }, /*指定id的數據*/ getOne:function (id){ } }
最后我們說一下requirejs和seajs的相同點和不同點
相同之處
RequireJS 和 SeaJS 都是模塊加載器,倡導的是一種模塊化開發理念, 核心價值是讓 JavaScript
的模塊化開發變得更簡單自然。
不同之處,兩者的區別如下:
定位有差異。RequireJS 想成為瀏覽器端的模塊加載器,同時也想成為 Rhino / Node 等環境的模塊加載器。 SeaJS
則專注于 Web 瀏覽器端,同時通過 Node 擴展的方式可以很方便跑在 Node 服務器端。遵循的規范不同。RequireJS 遵循的是 AMD(異步模塊定義)規范,SeaJS 遵循的是 CMD (通用模塊定義)規范。
規范的不同,導致了兩者 API 的不同。SeaJS 更簡潔優雅,更貼近 CommonJS Modules/1.1 和 Node
Modules 規范。社區理念有差異。RequireJS 在嘗試讓第三方類庫修改自身來支持 RequireJS,目前只有少數社區采納。 SeaJS
不強推,采用自主封裝的方式來“海納百川”,目前已有較成熟的封裝策略。代碼質量有差異。RequireJS 是沒有明顯的 bug,SeaJS 是明顯沒有 bug。
對調試等的支持有差異。SeaJS 通過插件,可以實現 Fiddler 中自動映射的功能, 還可以實現自動 combo
等功能,非常方便。RequireJS 無這方面的支持。插件機制不同。RequireJS 采取的是在源碼中預留接口的形式,源碼中留有為插件而寫的代碼。SeaJS 采取的插件機制則與
JavaScript 語言 以及Node 的方式一致:開放自身,讓插件開發者可直接訪問或修改,從而非常靈活,可以實現各種類型的插件。
還有不少細節差異就不多說了。
總之,SeaJS 從 API 到實現,都比 RequireJS 更簡潔優雅。如果說 RequireJS 是 Prototype 類庫的話,則 SeaJS 是 jQuery 類庫。
謝謝一下文檔的參考
https://my.oschina.net/feluma...
https://github.com/seajs/seaj... http://yslove.net/seajs/
https://github.com/seajs/seaj...
http://blog.csdn.net/wl110231...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/91151.html
摘要:規范異步模塊聲明規范公共模塊聲明模塊化的核心價值模塊化最核心的價值在于解決不同文件之間的分工和調用問題,即依賴關系。 一、什么是模塊? 定義:具有相同屬性和行為的事物的集合在前端中:將一些屬性比較類似和行為比較類似的內容放在同一個js文件里面,把這個js文件稱為模塊目的:為了每個js文件只關注與自身有關的事情,讓每個js文件各行其職 二、什么是模塊化?CommonJS是什么?AMD和C...
摘要:要求模塊編寫必須在真正的代碼之外套上一層規定的代碼包裝,樣子看起來是這樣的模塊代碼通過傳遞一個簽名為的回調函數給函數,就可以把需要注入的變量和函數注入到模塊代碼內。 之前寫的文章急速Js全棧教程得到了不錯的閱讀量,霸屏掘金頭條3天,點贊過千,閱讀近萬,甚至還有人在評論區打廣告,可見也是一個小小的生態了;)。看來和JS全棧有關的內容,還是有人頗有興趣的。 showImg(https://...
摘要:遵循的是異步模塊定義規范,遵循的是通用模塊定義規范。不同的腳本加載這個模塊,得到的都是同一個實例。關于異步那些事就寫到這里了,很多地方理解的不夠深刻希望大家多多指教。 JS異步那些事 一 (基礎知識)JS異步那些事 二 (分布式事件)JS異步那些事 三 (Promise)JS異步那些事 四(HTML 5 Web Workers)JS異步那些事 五 (異步腳本加載) 異步腳本加載 阻塞性...
摘要:前兩天有朋友拿了這樣一段代碼來問我,我想把一段代碼寫成模塊化的樣子,你幫我看看是不是這樣的。的一個好處在與依賴前置,所有被使用到的模塊都會被提前加載好,從而加快運行速度。 前兩天有朋友拿了這樣一段代碼來問我,我想把一段代碼寫成模塊化的樣子,你幫我看看是不是這樣的。,代碼大概是這樣的: (function(global) { var myModules = { n...
摘要:應用日益復雜,模塊化已經成為一個迫切需求。異步模塊加載機制。引用的資源列表太長,懶得回調函數中寫一一對應的相關參數假定這里引用的資源有數十個,回調函數的參數必定非常多這就是傳說中的 簡述 緣起 模塊通常是指編程語言所提供的代碼組織機制,利用此機制可將程序拆解為獨立且通用的代碼單元。 模塊化主要是解決代碼分割、作用域隔離、模塊之間的依賴管理以及發布到生產環境時的自動化打包與處理等多個方面...
閱讀 4607·2021-09-26 09:55
閱讀 1352·2019-12-27 12:16
閱讀 879·2019-08-30 15:56
閱讀 1895·2019-08-30 14:05
閱讀 983·2019-08-30 13:05
閱讀 1261·2019-08-30 10:59
閱讀 1437·2019-08-26 16:19
閱讀 1880·2019-08-26 13:47