前端模块化(二):模块化编程

所谓的模块化编程就是封装细节,提供使用接口,彼此之间互不影响,每个模块都是相互独立,实现某一特定的功能。如果其他模块想调用的时候,可以暴露我们所希望对外的公开的方法与数据。

1、函数写法

function f1(){ var value=1//...  
}  function f2(){var value=2//...  
}  

这里定义了f1跟f2,每个函数相当于一个模块,f1跟f2是相互独立的,不能访问到对方里面的局部内容value;这种写法定义了全局变量f1、f2污染了全局环境会导致命名冲突(在上一篇文章提过)。

 

2、对象写法

var myModule= new Object({value : 0,f1 : function (){//...
    },f2 : function (){//...
    }
});

把函数f1()和f2(),封装在myModule对象里。使用的时候,就是调用这个对象的属性即可:myModule.f1()。这样的写法会暴露所有模块成员,内部状态可以被外部改写如:myModule.value=1 ,会改变myModule内部的属性值。同时这种办法只能一定程度上减少了命名冲突的问题,不能完全避免命名冲突。

 

3、立即执行函数写法

(1)匿名闭包写法 

(function () { // ... 
}()); 

javascript中没用私有作用域的概念,根据javascript函数作用域链的特性,使用这种写法可以模仿一个私有作用域。在闭包中,可以定义私有变量和函数,外部无法访问它们,从而做到了私有成员的隐藏和隔离,俗称“匿名包裹器”或“命名空间”。

(2)全局引入写法

(function (a) { a.a3 = function () {//...
   };//
}(a)); 

将a对象作为参数传入,在函数体内对这个对象进行操作。这样做除了保证模块的独立性,还使得模块之间的依赖关系变得明显。现在很多类库里都有这种使用方式,比如jQuery源码。

(3)模块导出写法

var myModule = (function(){
var value = 0;var f1 = function(){//...     };var f2 = function(){//...     };return {value: value,f2 : f2};})();

这里,我们声明了一个全局的模块叫myModule,它包含二个属性,一个成员变量value和一个成员方法f1。除此之外,它还使用匿名函数的闭包维护了私有内部状态,我们也可以通过按需传入外部变量。

(3)扩展模式写法

var myModule = (function (a) { var value =a.value;var f1 = function(){//...
    };var f2 = function(){//...
    };return {value: value,f2 : f2};}(a));

这里,我们在闭包中定义私有变量和函数,外部无法访问它们,做到了私有成员的隐藏和隔离。将某对象作为参数传入,在函数体内对该对象进行操作,然后返回对象或函数。由此,可以做到把依赖项通过参数的形式注入进来在内部使用注入的属性,并且可以暴露我们所希望对外的公开的方法与数据。这就是模块化编程的基础思想。

在此思想之下,javaScript模块化编程开始盛行,大牛们开始进行各式各样的封装打包,从而产出一系列的模块化规范、模块化加载器。上面的方法中,a必须在模块myModule之前定义,如果a依赖项自身是一个大的模块,比如一个库,我们如何做到在myModule之前定义加载a,然后在myModule中成功地引用a呢?模块化加载器便能帮我们解决这个问题。

下一篇我们开始介绍模块化规范的先驱-------CommonJS规范;

 

转载于:https://www.cnblogs.com/huiguo/p/7967189.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/467215.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ASP.NET AJAX - Timer控件之摆放位置的影响

ASP.NET AJAX所提供的Timer 控件是一个服务器控件&#xff0c;它能够定时引发全网页回传&#xff0c;当然&#xff0c;在搭配了UpdatePanel 控件之后&#xff0c;就可以定时引发异步回传并局部更新UpdatePanel 控件的内容。<?xml:namespace prefix o />在此要请大家注意…

CPU怎么认识代码的?

# 语言这个东西&#xff1f;首先说明下&#xff0c;我们正常使用的python、C、C语言等等&#xff0c;我们自己能读得懂的语言&#xff0c;包括汇编语言&#xff0c;CPU都是不认识的&#xff0c;CPU 只认识一种语言&#xff0c;那就是 机器语言&#xff0c;也就是我们很多人&…

ajax 五种状态,ajax的五种状态

ajax的五种状态(readyState )0 &#xff0d; (未初始化)还没有调用send()方法1 &#xff0d; (载入)已调用send()方法&#xff0c;正在发送请求2 &#xff0d; (载入完成)send()方法执行完成&#xff0c;已经接收到全部响应内容3 &#xff0d; (交互)正在解析响应内容4 &#x…

nodeJs的学习之路(1)

一 什么是nodeJs nodeJs是一个后端技术&#xff0c;研究web应用的开发模式&#xff0c;能够开发一些简单的服务器&#xff0c;学会操作数据库等等。官方解释就是&#xff1a;nodeJs是基于谷歌v8引擎的javascript运行环境 nodeJs使用了一个事件驱动&#xff0c;非非阻塞式I/O模型…

u盘病毒之tel.xls.exe

系统症状每次双击盘符出现一个新窗口windows任务管理器出现了一个Excel的程序鼠标右键点盘符出现"Auto"字样无法显示隐藏文件无法 取消或者钩选 隐藏已知文件类型的扩展名 样本信息File size: 49152 bytes MD5: d88f7c6c15585404c30c92a11c429c36 SHA1: af2120915a1e…

节日才需要快乐吗?

---- 当然需要天天快乐2020年的国庆和中秋是挺特别的&#xff0c;也是国庆&#xff0c;也是中秋&#xff0c;而且今天还能看NBA总决赛助兴。这么愉快的节日&#xff0c;祝我们的国家繁荣昌盛&#xff0c;国泰民安&#xff0c;也祝大家中秋快乐&#xff0c;当然中秋后也需要快乐…

大屏幕服务器无信号,关于思讯互动平台大屏幕使用过程中错误的排查

关于思讯互动平台大屏幕使用过程中错误的排查一、错误原因分析 原因具体内容浏览器原因包括但不限于浏览器不兼容、浏览器设置出问题、浏览器安装了不明插件、浏览器有缓存电脑原因电脑性能太差、开启了太多程序进程、电脑系统老旧网络原因断网、多人共同占用网络导致网速过慢人…

我在富士康13年

以下是一个读者朋友的日记---- ???? 有点恨铁不成钢的感觉这个读者跟我一样的年纪&#xff0c;都是89年&#xff0c;好吧&#xff0c;说到这里突然觉得又马上要老一岁了&#xff0c;因为小云跟我说&#xff0c;我马上就要过生日了&#xff0c;我从来就记不清自己的生日&…

《Android源码设计模式》--装饰模式

No1&#xff1a; Activity继承于ContextThemeWrapper&#xff0c;继承于ContextWrapper&#xff0c;继承于Context。 No2&#xff1a; Context中方法的所有实现均由ContextImpl类承担。 No3&#xff1a; 启动一个Activity需要3个非常重要的对象&#xff1a;Application、Contex…

域名服务器的配置文档,dns域名服务器的配置

dns域名服务器的配置 内容精选换一换使用mount命令挂载文件系统到云服务器&#xff0c;云服务器系统提示timed out。原因1&#xff1a;网络状态不稳定。原因2&#xff1a;网络连接异常。原因3&#xff1a;云服务器DNS配置错误&#xff0c;导致解析不到文件系统的域名&#xff0…

ASP无组件上传带进度条

<%LANGUAGE"VBSCRIPT" CODEPAGE"936"%><%Option Explicit%><% 带进度条的ASP无组件断点续传下载简介&#xff1a; 1)利用xmlhttp方式 2)无组件 3)异步方式获取&#xff0c;节省服务器…

广东阳西的小城生活

国庆放假&#xff0c;回小云老家&#xff0c;广东阳江阳西县。我们是昨天下午5点出发&#xff0c;晚上11点到家&#xff0c;刚好错开拥堵高峰&#xff0c;不过在沿江高速上川岛附近还是遇到了交通堵塞&#xff0c;一直缓缓前行&#xff0c;等到我们通过那个事故点的时候&#x…

React Native之箭头函数和延展操作符(...)

箭头函数 在我们学习React Native的过程中&#xff0c;我们经常会遇到">"这样形式的书写&#xff0c;如下&#xff1a; import React, {Component} from react import {AppRegistry, StyleSheet, View, Text, TouchableOpacity} from react-nativeclass RN_Arrow_…

读《爱的艺术》书评而问

豆瓣关于这本书的评论 我回复了这一篇评论 其实&#xff0c;更想拿这些问题和读者诸君交流&#xff0c;你们怎么看的&#xff1f; -------------------------------------------------------------------------------------- “一个成熟的人最终能达到他既是自己的母亲&#xf…

10.5 0819吉米牛逼

吉米真牛逼&#xff0c;这场比赛热火赢得漂亮&#xff0c;没有阿德巴约&#xff0c;没有德拉季奇的情况下&#xff0c;吉米硬生生把自己变成了詹姆斯。右侧45度拿球&#xff0c;突破顶着老詹急停跳投&#xff0c;又一次在老詹面前拿下两分&#xff0c;马上回防&#xff0c;面对…

flex 布局示例

1 <!DOCTYPE html>2 <html>3 4 <head>5 <meta charset"utf-8">6 <title>flex实例</title>7 <style>8 * {9 font-family: "微软雅黑";10 }11 12 html,…

既生Flash,又何生EEPROM?

我们正常编译生成的二进制文件&#xff0c;需要下载烧录到单片机里面去&#xff0c;这个文件保存在单片机的ROM中&#xff0c;ROM这个名称指的是「read only memory」的意思&#xff0c;所有可以完成「read only memory」这种特性的存储介质都可以称为ROM&#xff0c;我们一般使…

网吧电影服务器解决方案完全指南(一)

我们在这里所讲到的流媒体服务器&#xff0c;从本质上来讲&#xff0c;根本目的也是为了满足顾客这方面的要求。但相对于目前大多数网吧采用的系统来说&#xff0c;主要基于我们吸引顾客&#xff0c;在影视点播方面体现本网吧区别于其他竞争对手的特色。 <?xml:namespace p…

URLEncoder.encode问题

遇到java里的URLEncoder.encode方法编码后与javascript的encodeURIComponent方法的结果有点不一样&#xff0c;找了一下资料&#xff0c;原来URLEncoder实现的是HTML形式的规范&#xff0c;jdk文档里这么说&#xff1a; Utility class for HTML form encoding. This class cont…

数字油田

随着技术的进步和应用的深入&#xff0c;数字油田的概念也处于不断的发展之中&#xff0c;因此&#xff0c;到目前为止&#xff0c;数字油田尚无一个确切的概念&#xff0c;就目前的应用而言&#xff0c;数字油田一般可以描述为&#xff1a;数字油田是以油田为研究对象&#xf…