Javascript模块化编程(大型JavaScript应用程序架构思考)

Javascript模块化编程

--大型JavaScript应用程序架构思考

https://www.360docs.net/doc/129113626.html,

2

密级:内部公开修改记录

版本

修改内容及原因修改人审核人修改时间V1.0新版发布付建龙2013/10/31

3

密级:内部公开目录

1. 大型JavaScript应用程序架构

2.Javascript模块化编程

3.RequireJS与BackBoneJS

4

密级:内部公开 什么叫“大型JavaScript应用程序”

大型JavaScript程序应该是非常重要并且融入了很多卓越开发人员努力，对重量级数据进行处理并且展示给浏览器的程序。

※参考:

https://https://www.360docs.net/doc/129113626.html,/addyosmani/large-scale-javascript-application-architecture

5

密级:内部公开?高效率的响应客户需求变化，提供满意度良好的软件产品

?成就感，士气高昂的团队

?

盈利

6

密级:内部公开

?开发成本的无限增加

?项目泥足深陷，团队士气低落

?失败

7

密级:内部公开?你架构里的东西，有多少可以立即拿出来重用？?系统里有多少模块需要依赖其他模块？

?如果你程序的某一部分出错了，其他部分是否能够依然工作？

?你的各个模块能很简单的进行测试么？

?...

构建大型程序最大的秘密就是从来不构建大型程序，而是将程序分解成各个小的模块去做，让每个小模块都可独立运行和测试，然后把它们集成到程序里。

8

密级:内部公开目录

1. 大型JavaScript应用程序架构

2.Javascript模块化编程

3.RequireJS与BackBoneJS

9

密级:内部公开function m1(){ //...}function m2(){ //...}

原始写法

缺点很明显："污染"了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。

10

密级:内部公开var mySingleton = function () {

/* 这里声明私有变量和方法 */

var privateVariable = 'something private'; function showPrivate() { console.log(privateVariable); }

/* 公有变量和方法（可以访问私有变量和方法） */

return { publicMethod: function () { showPrivate(); }, publicVar: 'the public can see this!' };};

var single = mySingleton();single.publicMethod(); // 输出 'something private'console.log(single.publicVar); // 输出 'the public can see this!'

模块化编程的写法

11

密级:内部公开var module1 = (function(){

var _count = 0;

var m1 = function(){

//...

};

var m2 = function(){

//...

};

return {

m1 : m1,

m2 : m2

};

})();

https://www.360docs.net/doc/129113626.html,(module1._count); //undefined

立即执行函数的写法

12

密级:内部公开/*在一些大型项目里，将一个功能分离成多个文件是非常重要的，因为可以多人合作易于开发。再回头看看上面的全局参数导入例子，我们能否把blogModule 自身传进去呢？答案是肯定的，我们先将blogModule 传进去，添加一个函数属性，然后再返回就达到了我们所说的目的*/

var blogModule = (function (my) { my.AddPhoto = function () { //添加内部代码

}; return my;} (blogModule));

//模块化，可重用

//封装了变量和function ，和全局的namaspace 不接触，松耦合

//只暴露可用public 的方法，其它私有方法全部隐藏 Module模式

13

密级:内部公开 AMD规范

AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

require(['math'], function (math) {

math.add(2, 3);

});

14

密级:内部公开目录

1. 大型JavaScript应用程序架构

2.Javascript模块化编程

3.RequireJS与BackBoneJS

15

密级:内部公开 RequireJS

RequireJs是一个脚本载入程序，允许你把你的 javascript 代码独立成文件和模块，同时管理每个模块间的依赖关系。//引入文件//RequireJS 使用一个简单的require 函数去导入脚本require(["jquery"], function($) { $(?#mydiv”).html(?Hello this is RequireJS talking”);});//使用AMD 模式，将我们的代码结构化成为模块define(function () { function add (x,y) { return x + y; }});

//RequireJS 包含了一个optimizer 优化器去收集所有文件的数据并把它放到一个压缩文件里面。

16

密级:内部公开

MVC设计模式之BackBoneJS

17

密级:内部公开 BackBoneJS的优点

View 的划分将页面上的视图元素解耦，粒度细化。View 间通过事件和 Model 通讯，避免了 DOM 事件的滥用。

分层的结构很清晰，使得前端工程在扩展性和维护性上都可以进行有效控制。

Collection/Model 抽象了以前杂乱的 AJAX 请求，CRUD 请求变得非常非常方便。

最适合的应用场景是单页面应用，并且页面上有大量数据模型，模型之间需要进行复杂的信息沟通

18

密级:内部公开 Backbone.Model

创建数据，进行数据验证，销毁或者保存到服务器上，数据发生 变动时触发相关动作

/**

要创建自己的 模型 类，你可以扩展 Backbone.Model 并提供实例 属性 ， 以及可选的可以直接注册到构造函数的 类属性 (classProperties)。extend 可以正确的设置原型链，因此通过 extend 创建的子类 (subclasses) 也可以被深度扩展。*/

var Note = Backbone.Model.extend({ ... });

var PrivateNote = Note.extend({ ...

});

19

密级:内部公开 Backbone.Collection

Collection是Model的有序组合,提供了增加，删除，获取长度，排序，比较等一系列方法，并且能够非常方便地与服务器进行CRUD AJAX通讯

var Library = Backbone.Collection.extend({ model: Book });

20

密级:内部公开 Backbone.View

绑定HTML模板，绑定界面元素的事件，初始的渲染，模型值改变后的重新渲染和界面元素的销毁等

var DocumentRow = Backbone.View.extend({

tagName: "li", template : _.template(HtmlTemplate), events: { "click .icon": "open" },

render: function() { ... } });