javascript架構(gòu),javascript基本結(jié)構(gòu)

javascript模塊化是什么及其優(yōu)缺點(diǎn)介紹

如今backbone、emberjs、spinejs、batmanjs

10年積累的成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站設(shè)計(jì)制作后付款的網(wǎng)站建設(shè)流程，更有大竹免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

等MVC框架侵襲而來。CommonJS、AMD、NodeJS、RequireJS、SeaJS、curljs等模塊化的JavaScript撲面而

來。web前端已經(jīng)演變成大前端，web前端的發(fā)展速度之快。

1)我們來看看什么是模塊化？

模塊化是一種將系統(tǒng)分離成獨(dú)立功能部分的方法，可將系統(tǒng)分割成獨(dú)立的功能部分，嚴(yán)格定義模塊接口、模塊間具有透明性。javascript中的模塊在一些C、PHP、java中比較常見:

c中使用include 包含.h文件;php中使用require_once包含.php文件

java使用import導(dǎo)入包

此中都有模塊化的思想。

2)模塊化的優(yōu)缺點(diǎn)：

a優(yōu)點(diǎn)：

可維護(hù)性

1.靈活架構(gòu)，焦點(diǎn)分離

2.方便模塊間組合、分解

3.方便單個模塊功能調(diào)試、升級

4.多人協(xié)作互不干擾

可測試性

1.可分單元測試

b缺點(diǎn)：

性能損耗

1.系統(tǒng)分層，調(diào)用鏈會很長

2.模塊間通信,模塊間發(fā)送消息會很耗性能

3)最近的項(xiàng)目中也有用到模塊化，

使用的是seajs,但是當(dāng)引用到j(luò)query,jquery easyui/或者jquery

UI組件時,有可能會用到很多jquery插件，那這樣要是實(shí)現(xiàn)一個很復(fù)雜的交互時，模塊間的依賴會很多，使用define（）方法引入模塊會很多，不知

有么有什么好的方法？

4)附：

內(nèi)聚度

內(nèi)聚度指模塊內(nèi)部實(shí)現(xiàn)，它是信息隱藏和局部化概念的自然擴(kuò)展，它標(biāo)志著一個模塊內(nèi)部各成分彼此結(jié)合的緊密程度。好處也很明顯，當(dāng)把相關(guān)的任務(wù)分組后去閱讀就容易多了。 設(shè)計(jì)時應(yīng)該盡可能的提高模塊內(nèi)聚度，從而獲得較高的模塊獨(dú)立性。

耦合度

耦合度則是指模塊之間的關(guān)聯(lián)程度的度量。耦合度取決于模塊之間接口的復(fù)雜性，進(jìn)入或調(diào)用模塊的位置等。與內(nèi)聚度相反，在設(shè)計(jì)時應(yīng)盡量追求松散耦合的系統(tǒng)。

如何組織大型JavaScript應(yīng)用中的代碼

以下為CSDN編譯：地板上堆放的衣服首先，我們來看看angular-seed，它是AngularJS應(yīng)用開發(fā)的官方入門項(xiàng)目，其文件結(jié)構(gòu)是這樣的：css/img/js/app.jscontrollers.jsdirectives.jsfilters.jsservices.jslib/partials/看起來就像是把衣服按類型堆在地板上，一堆襪子、一堆內(nèi)衣、一堆襯衫等等。你知道拐角的那堆襪子里有今天要穿的黑色羊毛襪，但你仍需要花上一段時間來尋找。這種組織方式很凌亂。一旦你的代碼中存在6、7個甚至更多的控制器或者服務(wù)，文件管理就會變得難以處理：很難找到想要尋找的對象，源代碼控制中的文件也變更集變得難懂。襪子抽屜常見的JavaScript文件結(jié)構(gòu)還有另一種形式，即按原型將文件分類。我們繼續(xù)用整理衣服來比喻：現(xiàn)在我們買了有很多抽屜的衣柜，打算將襪子放在其中一個抽屜里，內(nèi)衣放在另一個抽屜，再把襯衫整齊地疊在第三個抽屜……想象一下，我們正在開發(fā)一個簡單的電子商務(wù)網(wǎng)站，包括登陸流程、產(chǎn)品目錄以及購物車UI。同樣，我們將文件分為以下幾個原型：models（業(yè)務(wù)邏輯和狀態(tài)）、controllers以及services（HTTP/JSON端點(diǎn)加密），而按照Angular默認(rèn)那樣非籠統(tǒng)地歸到“service”架構(gòu)。因此我們的JavaScript目錄變成了這樣：controllers/LoginController.jsRegistrationController.jsProductDetailController.jsSearchResultsController.jsdirectives.jsfilters.jsmodels/CartModel.jsProductModel.jsSearchResultsModel.jsUserModel.jsservices/CartService.jsUserService.jsProductService.js不錯，現(xiàn)在已經(jīng)可以通過樹形文件目錄或者IDE快捷鍵更方便地查找文件了，源代碼控制中的變更集（changeset）也能夠清楚地描述文件修改記錄。雖然已經(jīng)獲得了極大的改進(jìn)，但是仍有一定的局限性。想象一下，你現(xiàn)在正在辦公室，突然發(fā)現(xiàn)明天有個商務(wù)出差，需要幾套干洗的衣服，因此給家里打電話告訴另一半把黑色和藍(lán)色的西裝交給清潔工，還有黑紋領(lǐng)帶配灰色襯衫、白襯衫配純黃領(lǐng)帶。如果你的另一半并不熟悉衣柜，又該如何從三條黃色的領(lǐng)帶中挑出你的正確需求？模塊化希望衣服的比喻沒有讓你覺得過于陳舊，下面舉一個實(shí)例：你的搭檔是新來的開發(fā)者，他被要求去修補(bǔ)這個復(fù)雜應(yīng)用中的一處bug。他掃過這些文件夾，看到了controllers、models、services等文件夾整齊地排列著，但是他仍然不清楚對象間的依賴關(guān)系。處于某些原因，他希望能夠重用部分代碼，這需要從各個文件夾中搜集相關(guān)文件，而且常常會遺漏某些文件夾中的對象。信或不信，你確實(shí)很少會在新項(xiàng)目中重用很多代碼，但你很可能需要重用登陸系統(tǒng)這樣的整個模塊。所以，是不是按功能劃分文件會更好？下面的文件結(jié)構(gòu)是以功能劃分后的應(yīng)用結(jié)構(gòu)：cart/CartModel.jsCartService.jscommon/directives.jsfilters.jsproduct/search/SearchResultsController.jsSearchResultsModel.jsProductDetailController.jsProductModel.jsProductService.jsuser/LoginController.jsRegistrationController.jsUserModel.jsUserService.js雖然現(xiàn)實(shí)世界中有空間限制，難以隨意整理服裝，但是編程中類似的處理卻是零成本的?，F(xiàn)在即使是新來的開發(fā)者也能通過頂級文件夾的命名理解應(yīng)用的功能，相同文件夾下的文件會存在互相依賴等關(guān)系，而且僅僅通過瀏覽文件組織結(jié)構(gòu)就能輕易理解登錄、注冊等功能的原理。新的項(xiàng)目也可以通過復(fù)制粘貼來重用其中的代碼了。使用AngularJS我們可以進(jìn)一步將相關(guān)代碼組織為模塊：var userModule = angular.module('userModule',[]); userModule.factory('userService', ['$http', function($http) { return new UserService($http); }]); userModule.factory('userModel', ['userService', function(userService) { return new UserModel(userService); }]); userModule.controller('loginController', ['$scope', 'userModel', LoginController]); userModule.controller('registrationController', ['$scope', 'userModel', RegistrationController]);如果我們將UserModule.js文件放到user文件夾，它就成了這個模塊中使用到的對象的“manifest”，這也是適合RequireJS或者Browserify中放置某些加載指令的地方如何處理通用代碼每個應(yīng)用都會有某些代碼廣泛使用在多個模塊中，我們常常使用名為“commom”或者“shared”的文件夾來存放這些功能代碼。又該如何處理這些通用代碼呢？如果模塊中的對象需要直接訪問幾個“通用”對象，為這些對象提供幾個Facade（外觀模式）。這有助于減少每個對象的依賴者，而過多的關(guān)聯(lián)對象通常意味著糟糕的代碼結(jié)構(gòu)。如果“通用”模塊變得過于龐大，你需要將它按功能領(lǐng)域細(xì)分為多個子模塊。確保每個應(yīng)用模塊只使用它需要的“通用”模塊，這即是SOLID中“接口隔離原則”的變種。在根范圍（$rootScope）添加實(shí)體，這樣子范圍也可以使用，適合多個控制器都依賴同一個對象（比如“PermissionsModel”）的情況。在解耦兩個不明確互相引用的組件時，請使用事件。Angular中Scope對象的$emit、$broadcast以及$on方法使得這種方式變得現(xiàn)實(shí)?？刂破髂軌蛴|發(fā)一個事件來執(zhí)行某些動作，然后再動作結(jié)束后收到相應(yīng)地通知。

javascript MVC模式 對于MVC我懂得如何架構(gòu)和寫代碼，能不能就登錄這一功能給我解釋一下，最好附代碼？

//由于javascript實(shí)際上比java更加徹底的對象化的原因，所以model層可以任意的刪改，所以只做了簡化

function?Model(o){

for(var?k?in?o?)

this[k]?=?o;

}

//視圖層模板

function?_template(s,args){

return?s.replace(/\$\$\{(.*?)\}/img,function(ag,ag1){

return?args[ag1]||ag;

})

}

var?_routeList={

"login":{

_model:new?Model({id:null,pwd:null}),//假設(shè)這里是填充好的數(shù)據(jù)

controlFun:function(id,pwd){//相當(dāng)于action的方法

if(id==="hao"??pwd==="123"){

this._model.id="hao";//模擬對象數(shù)據(jù)，填充，為視圖層準(zhǔn)備

document.getElementById("result").innerHTML=_template("div歡迎$${id}登陸/div",this._model);//填充視圖層數(shù)據(jù)

}

}

}

}

function?router(url?,args){//模擬路由層

if(url==="login"){//簡寫，相當(dāng)于action請求路徑

_routeList[login].controlFun.apply(this,args)

}

}

//假設(shè)下面是提交按鈕

input?.....?onclick=?router("login",["hao","123"])??//路由層做轉(zhuǎn)發(fā)

我寫的非常簡單，接近偽代碼

視圖層的綁定，action的請求攔截，Model層的一些對象操作都沒寫，還有DI啊之類的特性也沒做，因?yàn)橐坏┱嬲龑懫饋泶a量太大都不夠貼的，所以我暫時只把思路描述一下

javascript框架有哪些

目前來看，JS框架以及一些開發(fā)包和庫類有如下幾個，Dojo 、Scriptaculous 、Prototype 、yui-ext 、Jquery 、Mochikit、mootools 、moo.fx

Dojo （JS library and UI component ）：

Dojo是目前最為強(qiáng)大的j s框架，它在自己的Wiki上給自己下了一個定義，dojo是一個用JavaScript編寫的開源的DHTML工具箱。dojo很想做一個“大一統(tǒng)”的 工具箱，不僅僅是瀏覽器層面的，野心還是很大的。Dojo包括ajax, browser, event, widget等跨瀏覽器API，包括了JS本身的語言擴(kuò)展，以及各個方面的工具類庫，和比較完善的UI組件庫，也被廣泛 應(yīng)用在很多項(xiàng)目中，他的UI組件的特點(diǎn)是通過給html標(biāo)簽增加tag的方式進(jìn)行擴(kuò)展，而不是通過寫JS來生成，dojo的API模仿Java類庫的組織 方式。 用dojo寫Web OS可謂非常方便。dojo現(xiàn)在已經(jīng)4.0了，dojo強(qiáng)大的地方在于界面和特效的封裝，可以讓開發(fā)者快速構(gòu)建一些兼容標(biāo)準(zhǔn)的界面。

優(yōu)點(diǎn)：庫相當(dāng)完善，發(fā)展時間也比較長，功能強(qiáng)大，據(jù)說利用dojo的io.bind()可以實(shí)現(xiàn)comet，看見其功能強(qiáng)大非一般，得到IBM和SUN的支持

缺點(diǎn)：文件體積比較大，200多KB，初次下載相當(dāng)慢，此外，dojo的類庫使用顯得不是那么易用，j s語法增強(qiáng)方面不如prototype。

Prototype （JS OO library）：

是一個非常優(yōu)雅的JS庫，定義了JS的面向?qū)ο髷U(kuò)展，DOM操作API，事件等等，以prototype為核心，形成了一個外圍的各種各樣 的JS擴(kuò)展庫，是相當(dāng)有前途的JS底層框架，值得推薦，感覺也是現(xiàn)實(shí)中應(yīng)用最廣的庫類（RoR集成的AJAX JS庫），之上還有 Scriptaculous 實(shí)現(xiàn)一些JS組件功能和效果。

優(yōu)點(diǎn)：基本底層，易學(xué)易用，甚至是其他一些js特效開發(fā)包的底層，體積算是最小的了。

缺點(diǎn)：如果說缺點(diǎn)，可能就是功能是他的弱項(xiàng)

Scriptaculous （JS UI component based on prototype）：

Scriptaculous是基于prototype.js框架的JS效果。包含了6個js文件，不同的文件對應(yīng)不同的js效果，所以說，如果底層用 prototype的話，做js效果用Scriptaculous那是再合適不過的了，連大名鼎鼎的digg都在用他，可見不一般

優(yōu)點(diǎn)：基于prototype是最大的優(yōu)點(diǎn)，由于使用prototype的廣泛性，無疑對用戶書錦上添花，并且在《ajax in action》中就拿Scriptaculous來講述js效果

缺點(diǎn)：剛剛興起，需要時間的磨練

yui-ext (JS UI component)：

基于Yahoo UI的擴(kuò)展包yui-ext是具有CS風(fēng)格的Web用戶界面組件 能實(shí)現(xiàn)復(fù)雜的Layout布局，界面效果可以和backbase媲美，而且使用純javascript代碼開發(fā)。真正的可編輯的表格Edit Grid，支持XML和Json數(shù)據(jù)類型，直接可以遷入grid。許多組件實(shí)現(xiàn)了對數(shù)據(jù)源的支持，例如動態(tài)的布局，可編輯的表格控件，動態(tài)加載的Tree 控件、動態(tài)拖拽效果等等。1.0 beta版開始同Jquery合作，推出基于jQuery的Ext 1.0，提供了更多有趣的功能。

優(yōu)點(diǎn)：結(jié)構(gòu)化，類似于java的結(jié)構(gòu)，清晰明了，底層用到了Jquery的一些函數(shù)，使整合使用有了選擇，最重要的一點(diǎn)是界面太讓讓人震撼了。

缺點(diǎn)：太過復(fù)雜，整個界面的構(gòu)造過于復(fù)雜。

Jquery ：

jQuery是一款同prototype一樣優(yōu)秀js開發(fā)庫類，特別是對css和XPath的支持，使我們寫js變得更加方便！如果你不是個js高手又想寫出優(yōu) 秀的js效果，jQuery可以幫你達(dá)到目的！并且簡介的語法和高的效率一直是jQuery追求的目標(biāo)，

優(yōu)點(diǎn)：注重簡介和高效，js效果有yui-ext的選擇，因?yàn)閥ui-ext 重用了很多jQuery的函數(shù)

缺點(diǎn)：據(jù)說太嫩，歷史不悠久。

Mochikit ：

MochiKit自稱為一個輕量級的js框架。MochiKit 主要受到 Python 和 Python 標(biāo)準(zhǔn)庫提供的很多便利之處的啟發(fā)，另外還緩解了瀏覽器版本之間的不一致性。其中的 MochiKit.DOM 尤其方便，能夠以比原始 JavaScript 更友好的方式處理 DOM 對象。MochiKit.DOM 大部分都是針對 XHTML 文檔定制的，如果與 MochiKit 和 Ajax 結(jié)合在一起，使用 XHTML 包裝的微格式尤其方便。Mochikit可以直接對字符串或者數(shù)字格式化輸出，比較實(shí)用和方便。它還有自己的 js 代碼解釋器

優(yōu)點(diǎn)：MochiKit.DOM這部分很實(shí)用，簡介也是很突出的

缺點(diǎn)：輕量級的缺點(diǎn)

mootools ：

MooTools是一個簡潔，模塊化，面向?qū)ο蟮腏avaScript框架。它能夠幫助你更快，更簡單地編寫可擴(kuò)展和兼容性強(qiáng)的JavaScript代碼。Mootools跟prototypejs相類似，語法幾乎一樣。但它提供的功能要比prototypejs多，而且更強(qiáng)大。比如增加了動畫特效、拖放操作等等。

優(yōu)點(diǎn)：可以定制自己所需要的功能，可以說是prototypejs的增強(qiáng)版。

缺點(diǎn)：不大不小，具體應(yīng)用具體分析

moo.fx ：

moo.fx是一個超級輕量級的javascript特效庫（7k）,能夠與prototype.js或mootools框架一起使用。它非常快、易于使用、跨瀏覽器、符合標(biāo)準(zhǔn)，提供控制和修改任何HTML元素的CSS屬性，包括顏色。它內(nèi)置檢查器能夠防止用戶通過多次或瘋狂點(diǎn)擊來破壞效果。moo.fx整體采用模塊化設(shè)計(jì)，所以可以在它的基礎(chǔ)上開發(fā)你需要的任何特效。

優(yōu)點(diǎn)：小塊頭有大能耐

缺點(diǎn)：這么小了，已經(jīng)不錯了

什么是js框架？

Javascript框架是指以Javascript語言為基礎(chǔ)搭建的編程框架。

JavaScript框架如今正融入到屬于自己的Web和移動應(yīng)用程序中，構(gòu)建后端API和豐富的前臺客戶端是一大趨勢，而這些又多由JavaScript框架編寫而成。

在開發(fā)前臺界面時應(yīng)用API，便會更加熟悉API，也會對工作內(nèi)容了如指掌，當(dāng)應(yīng)用該項(xiàng)技術(shù)編寫客戶端，編寫頂級iPhone或者Android應(yīng)用程序就會變得非常容易。

在JavaScript框架出現(xiàn)之前，開發(fā)人員只能在頁面上進(jìn)行jQuery操作。這種方式很容易引起開發(fā)人員對編碼操作的困惑，而且也不易管理。

Backbone是最初的領(lǐng)跑者，提供了一個基本的結(jié)構(gòu)和組織以及開發(fā)者友好的框架，如Angular和Ember。

擴(kuò)展資料：

javascript的特點(diǎn)：

1、一種解釋性執(zhí)行的腳本語言。

同其他腳本語言一樣，javascript也是一種解釋性語言，其提供了一個非常方便的開發(fā)過程。

2、一種基于對象的腳本語言。

其也被看作是一種面向?qū)ο蟮恼Z言，這意味著javascript能運(yùn)用其已經(jīng)創(chuàng)建的對象。因此，許多功能可以來自于腳本環(huán)境中對象的開發(fā)方法 與腳本的相互作用。

3、一種簡單弱類型腳本語言。

javascript是一種基于java基本語句和控制流之上的簡單而緊湊的設(shè)計(jì)，從而對于使用者學(xué)習(xí)java或其他c語系的編程語言是一種非常好的過渡。

4、一種相對安全腳本語言。

javascript作為一種安全性語言，不被允許訪問本地的硬盤，不允許對網(wǎng)絡(luò)文檔進(jìn)行修改和刪除，只能通過瀏覽器實(shí)現(xiàn)信息瀏覽或動態(tài)交互。從而有效地防止數(shù)據(jù)的丟失或?qū)ο到y(tǒng)開發(fā)的非法訪問。

參考資料來源：百度百科-JavaScript框架

當(dāng)前名稱：javascript架構(gòu),javascript基本結(jié)構(gòu)
當(dāng)前地址：http://m.jiaotiyi.com/article/dsedeej.html