javascript架构,javascript基本结构

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

javascript模块化是什么及其优缺点介绍

如今backbone、emberjs、spinejs、batmanjs

等MVC框架侵袭而来。CommonJS、AMD、NodeJS、RequireJS、SeaJS、curljs等模块化的JavaScript扑面而

来。web前端已经演变成大前端，web前端的发展速度之快。

1)我们来看看什么是模块化？

模块化是一种将系统分离成独立功能部分的方法，可将系统分割成独立的功能部分，严格定义模块接口、模块间具有透明性。javascript中的模块在一些C、PHP、java中比较常见:

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

java使用import导入包

此中都有模块化的思想。

2)模块化的优缺点：

a优点：

可维护性

1.灵活架构，焦点分离

2.方便模块间组合、分解

3.方便单个模块功能调试、升级

4.多人协作互不干扰

可测试性

1.可分单元测试

b缺点：

性能损耗

1.系统分层，调用链会很长

2.模块间通信,模块间发送消息会很耗性能

3)最近的项目中也有用到模块化，

使用的是seajs,但是当引用到jquery,jquery easyui/或者jquery

UI组件时,有可能会用到很多jquery插件，那这样要是实现一个很复杂的交互时，模块间的依赖会很多，使用define（）方法引入模块会很多，不知

有么有什么好的方法？

4)附：

内聚度

内聚度指模块内部实现，它是信息隐藏和局部化概念的自然扩展，它标志着一个模块内部各成分彼此结合的紧密程度。好处也很明显，当把相关的任务分组后去阅读就容易多了。设计时应该尽可能的提高模块内聚度，从而获得较高的模块独立性。

耦合度

耦合度则是指模块之间的关联程度的度量。耦合度取决于模块之间接口的复杂性，进入或调用模块的位置等。与内聚度相反，在设计时应尽量追求松散耦合的系统。

相关问答

Q1: 如何组织大型JavaScript应用中的代码

以下为CSDN编译：地板上堆放的衣服首先，我们来看看angular-seed，它是AngularJS应用开发的官方入门项目，其文件结构是这样的：css/img/js/app.jscontrollers.jsdirectives.jsfilters.jsservices.jslib/partials/看起来就像是把衣服按类型堆在地板上，一堆袜子、一堆内衣、一堆衬衫等等。你知道拐角的那堆袜子里有今天要穿的黑色羊毛袜，但你仍需要花上一段时间来寻找。这种组织方式很凌乱。一旦你的代码中存在6、7个甚至更多的控制器或者服务，文件管理就会变得难以处理：很难找到想要寻找的对象，源代码控制中的文件也变更集变得难懂。袜子抽屉常见的JavaScript文件结构还有另一种形式，即按原型将文件分类。我们继续用整理衣服来比喻：现在我们买了有很多抽屉的衣柜，打算将袜子放在其中一个抽屉里，内衣放在另一个抽屉，再把衬衫整齐地叠在第三个抽屉……想象一下，我们正在开发一个简单的电子商务网站，包括登陆流程、产品目录以及购物车UI。同样，我们将文件分为以下几个原型：models（业务逻辑和状态）、controllers以及services（HTTP/JSON端点加密），而按照Angular默认那样非笼统地归到“service”架构。因此我们的JavaScript目录变成了这样：controllers/LoginController.jsRegistrationController.jsProductDetailController.jsSearchResultsController.jsdirectives.jsfilters.jsmodels/CartModel.jsProductModel.jsSearchResultsModel.jsUserModel.jsservices/CartService.jsUserService.jsProductService.js不错，现在已经可以通过树形文件目录或者IDE快捷键更方便地查找文件了，源代码控制中的变更集（changeset）也能够清楚地描述文件修改记录。虽然已经获得了极大的改进，但是仍有一定的局限性。想象一下，你现在正在办公室，突然发现明天有个商务出差，需要几套干洗的衣服，因此给家里打电话告诉另一半把黑色和蓝色的西装交给清洁工，还有黑纹领带配灰色衬衫、白衬衫配纯黄领带。如果你的另一半并不熟悉衣柜，又该如何从三条黄色的领带中挑出你的正确需求？模块化希望衣服的比喻没有让你觉得过于陈旧，下面举一个实例：你的搭档是新来的开发者，他被要求去修补这个复杂应用中的一处bug。他扫过这些文件夹，看到了controllers、models、services等文件夹整齐地排列着，但是他仍然不清楚对象间的依赖关系。处于某些原因，他希望能够重用部分代码，这需要从各个文件夹中搜集相关文件，而且常常会遗漏某些文件夹中的对象。信或不信，你确实很少会在新项目中重用很多代码，但你很可能需要重用登陆系统这样的整个模块。所以，是不是按功能划分文件会更好？下面的文件结构是以功能划分后的应用结构：cart/CartModel.jsCartService.jscommon/directives.jsfilters.jsproduct/search/SearchResultsController.jsSearchResultsModel.jsProductDetailController.jsProductModel.jsProductService.jsuser/LoginController.jsRegistrationController.jsUserModel.jsUserService.js虽然现实世界中有空间限制，难以随意整理服装，但是编程中类似的处理却是零成本的。现在即使是新来的开发者也能通过顶级文件夹的命名理解应用的功能，相同文件夹下的文件会存在互相依赖等关系，而且仅仅通过浏览文件组织结构就能轻易理解登录、注册等功能的原理。新的项目也可以通过复制粘贴来重用其中的代码了。使用AngularJS我们可以进一步将相关代码组织为模块：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中放置某些加载指令的地方如何处理通用代码每个应用都会有某些代码广泛使用在多个模块中，我们常常使用名为“commom”或者“shared”的文件夹来存放这些功能代码。又该如何处理这些通用代码呢？如果模块中的对象需要直接访问几个“通用”对象，为这些对象提供几个Facade（外观模式）。这有助于减少每个对象的依赖者，而过多的关联对象通常意味着糟糕的代码结构。如果“通用”模块变得过于庞大，你需要将它按功能领域细分为多个子模块。确保每个应用模块只使用它需要的“通用”模块，这即是SOLID中“接口隔离原则”的变种。在根范围（$rootScope）添加实体，这样子范围也可以使用，适合多个控制器都依赖同一个对象（比如“PermissionsModel”）的情况。在解耦两个不明确互相引用的组件时，请使用事件。Angular中Scope对象的$emit、$broadcast以及$on方法使得这种方式变得现实。控制器能够触发一个事件来执行某些动作，然后再动作结束后收到相应地通知。

Q2: javascript MVC模式对于MVC我懂得如何架构和写代码，能不能就登录这一功能给我解释一下，最好附代码？

//由于javascript实际上比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}),//假设这里是填充好的数据

controlFun:function(id,pwd){//相当于action的方法

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

this._model.id="hao";//模拟对象数据，填充，为视图层准备

document.getElementById("result").innerHTML=_template("div欢迎$${id}登陆/div",this._model);//填充视图层数据

}

function router(url ,args){//模拟路由层

if(url==="login"){//简写，相当于action请求路径

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

}

//假设下面是提交按钮

input ..... onclick= router("login",["hao","123"]) //路由层做转发

我写的非常简单，接近伪代码

视图层的绑定，action的请求拦截，Model层的一些对象操作都没写，还有DI啊之类的特性也没做，因为一旦真正写起来代码量太大都不够贴的，所以我暂时只把思路描述一下

Q3: javascript框架有哪些

目前来看，JS框架以及一些开发包和库类有如下几个，Dojo 、Scriptaculous 、Prototype 、yui-ext 、Jquery 、Mochikit、mootools 、moo.fx

Dojo （JS library and UI component ）：

Dojo是目前最为强大的j s框架，它在自己的Wiki上给自己下了一个定义，dojo是一个用JavaScript编写的开源的DHTML工具箱。dojo很想做一个“大一统”的工具箱，不仅仅是浏览器层面的，野心还是很大的。Dojo包括ajax, browser, event, widget等跨浏览器API，包括了JS本身的语言扩展，以及各个方面的工具类库，和比较完善的UI组件库，也被广泛应用在很多项目中，他的UI组件的特点是通过给html标签增加tag的方式进行扩展，而不是通过写JS来生成，dojo的API模仿Java类库的组织方式。用dojo写Web OS可谓非常方便。dojo现在已经4.0了，dojo强大的地方在于界面和特效的封装，可以让开发者快速构建一些兼容标准的界面。

优点：库相当完善，发展时间也比较长，功能强大，据说利用dojo的io.bind()可以实现comet，看见其功能强大非一般，得到IBM和SUN的支持

缺点：文件体积比较大，200多KB，初次下载相当慢，此外，dojo的类库使用显得不是那么易用，j s语法增强方面不如prototype。

Prototype （JS OO library）：

是一个非常优雅的JS库，定义了JS的面向对象扩展，DOM操作API，事件等等，以prototype为核心，形成了一个外围的各种各样的JS扩展库，是相当有前途的JS底层框架，值得推荐，感觉也是现实中应用最广的库类（RoR集成的AJAX JS库），之上还有 Scriptaculous 实现一些JS组件功能和效果。

优点：基本底层，易学易用，甚至是其他一些js特效开发包的底层，体积算是最小的了。

缺点：如果说缺点，可能就是功能是他的弱项

Scriptaculous （JS UI component based on prototype）：

Scriptaculous是基于prototype.js框架的JS效果。包含了6个js文件，不同的文件对应不同的js效果，所以说，如果底层用 prototype的话，做js效果用Scriptaculous那是再合适不过的了，连大名鼎鼎的digg都在用他，可见不一般

优点：基于prototype是最大的优点，由于使用prototype的广泛性，无疑对用户书锦上添花，并且在《ajax in action》中就拿Scriptaculous来讲述js效果

缺点：刚刚兴起，需要时间的磨练

yui-ext (JS UI component)：

基于Yahoo UI的扩展包yui-ext是具有CS风格的Web用户界面组件能实现复杂的Layout布局，界面效果可以和backbase媲美，而且使用纯javascript代码开发。真正的可编辑的表格Edit Grid，支持XML和Json数据类型，直接可以迁入grid。许多组件实现了对数据源的支持，例如动态的布局，可编辑的表格控件，动态加载的Tree 控件、动态拖拽效果等等。1.0 beta版开始同Jquery合作，推出基于jQuery的Ext 1.0，提供了更多有趣的功能。

优点：结构化，类似于java的结构，清晰明了，底层用到了Jquery的一些函数，使整合使用有了选择，最重要的一点是界面太让让人震撼了。

缺点：太过复杂，整个界面的构造过于复杂。

Jquery ：

jQuery是一款同prototype一样优秀js开发库类，特别是对css和XPath的支持，使我们写js变得更加方便！如果你不是个js高手又想写出优秀的js效果，jQuery可以帮你达到目的！并且简介的语法和高的效率一直是jQuery追求的目标，

优点：注重简介和高效，js效果有yui-ext的选择，因为yui-ext 重用了很多jQuery的函数

缺点：据说太嫩，历史不悠久。

Mochikit ：

MochiKit自称为一个轻量级的js框架。MochiKit 主要受到 Python 和 Python 标准库提供的很多便利之处的启发，另外还缓解了浏览器版本之间的不一致性。其中的 MochiKit.DOM 尤其方便，能够以比原始 JavaScript 更友好的方式处理 DOM 对象。MochiKit.DOM 大部分都是针对 XHTML 文档定制的，如果与 MochiKit 和 Ajax 结合在一起，使用 XHTML 包装的微格式尤其方便。Mochikit可以直接对字符串或者数字格式化输出，比较实用和方便。它还有自己的 js 代码解释器

优点：MochiKit.DOM这部分很实用，简介也是很突出的

缺点：轻量级的缺点

mootools ：

MooTools是一个简洁，模块化，面向对象的JavaScript框架。它能够帮助你更快，更简单地编写可扩展和兼容性强的JavaScript代码。Mootools跟prototypejs相类似，语法几乎一样。但它提供的功能要比prototypejs多，而且更强大。比如增加了动画特效、拖放操作等等。

优点：可以定制自己所需要的功能，可以说是prototypejs的增强版。

缺点：不大不小，具体应用具体分析

moo.fx ：

moo.fx是一个超级轻量级的javascript特效库（7k）,能够与prototype.js或mootools框架一起使用。它非常快、易于使用、跨浏览器、符合标准，提供控制和修改任何HTML元素的CSS属性，包括颜色。它内置检查器能够防止用户通过多次或疯狂点击来破坏效果。moo.fx整体采用模块化设计，所以可以在它的基础上开发你需要的任何特效。

优点：小块头有大能耐

缺点：这么小了，已经不错了

Q4: 什么是js框架？

Javascript框架是指以Javascript语言为基础搭建的编程框架。

JavaScript框架如今正融入到属于自己的Web和移动应用程序中，构建后端API和丰富的前台客户端是一大趋势，而这些又多由JavaScript框架编写而成。

在开发前台界面时应用API，便会更加熟悉API，也会对工作内容了如指掌，当应用该项技术编写客户端，编写顶级iPhone或者Android应用程序就会变得非常容易。

在JavaScript框架出现之前，开发人员只能在页面上进行jQuery操作。这种方式很容易引起开发人员对编码操作的困惑，而且也不易管理。

Backbone是最初的领跑者，提供了一个基本的结构和组织以及开发者友好的框架，如Angular和Ember。

扩展资料：

javascript的特点：

1、一种解释性执行的脚本语言。

同其他脚本语言一样，javascript也是一种解释性语言，其提供了一个非常方便的开发过程。