JavaScript模块化思想
1. 首先,我们需要明白为什么要用模块化?
接下来,用我的JS代码之路演示一下如何使代码模块化:
1 function f1(){
2 //函数体
3 }
4 function f2(){
5 //函数体
6 }

1 // 将基本的方法封装起来
2 var musicPlayer = {
3
4 var musicDom = null, //播放器对象
5 var musicList = [], //存放歌曲列表
6
7 // 初始化音乐播放器
8 var init = function(){
9
10 },
11
12 // 添加一首歌曲
13 var add = function(src){
14
15 },
16
17 // 根据数组下标决定播放哪一首,索引index从0开始
18 var play = function(index){
19
20 },
21
22 // 暂停播放
23 var stop = function(){
24
25 },
26
27 // 下一首
28 var next = function(){
29
30 },
31
32 // 上一首
33 var prev = function(){
34
35 }
36 };


1 // 创建一个立即执行的匿名函数
2 // 该函数返回一个对象,包含你要暴露的属性
3 // 如下代码如果不使用立即执行函数,就会多一个属性i
4 // 如果有了属性i,我们就能调用counter.i改变i的值
5 // 对我们来说这种不确定的因素越少越好
6
7 var counter = (function(){
8 var i = 0;
9
10 return {
11 get: function(){
12 return i;
13 },
14 set: function( val ){
15 i = val;
16 },
17 increment: function() {
18 return ++i;
19 }
20 };
21 }());
22
23 // counter其实是一个对象
24
25 counter.get(); // 0
26 counter.set( 3 );
27 counter.increment(); // 4
28 counter.increment(); // 5
29
30 counter.i; // undefined i并不是counter的属性
31 i; // ReferenceError: i is not defined (函数内部的是局部变量)

从以上的代码可以看出,counter中其中并没有i这个属性,它只有return 中暴露出来的内容。这样我们就对i实现了私有。
1 var module1 = (function (mod){
2 mod.m3 = function () {
3 //...
4 };
5 return mod;
6 })(module1);
在这个例子中,就给module1添加了一个新的方法m3并返回。
1 var module1 = ( function (mod){
2 //...
3 return mod;
4 })(window.module1 || {});
IIFE传入的参数:如果window.module1有定义,就传入该参数,如果为undefined就传入一个空对象。
1 var module1 = (function ($, YAHOO) {
2 //...
3 })(jQuery, YAHOO);
如上所示的代码将jQuery和YUI两个库的全局变量当作参数传入了module1。
JavaScript模块化思想的更多相关文章
- JavaScript模块化思想之入门篇
在写正文之前先写一点废话,从我大三下学期正式接触前端到现在,已经六个月了.自己从HTML,CSS,简单的JS验证开始,一点点开始走入前端的世界.越发的感觉前端这一领域散发着无穷的魅力,也许这和我真心喜 ...
- JavaScript模块化思想requireJS的使用
1. 使用require.js的意义 (1)实现JS文件的异步加载,避免网页因为加载JS文件缓慢造成网页未响应 (2)管理模块之间的依赖性,便于代码的编写和维护.页面中只需要引入require.j ...
- JavaScript模块化思想之CommonJS、AMD、CMD、UMD
前一篇文章了解了什么是模块,这一篇就简单介绍一下如何定义并加载一个模块. 我所了解的三种模块加载方式分别是CommonJS.AMD和CMD 网上关于这三种模块加载方式讲解的文章很多,我就简单的做个介绍 ...
- javascript模块化编程思想、实现与规范
随着BS架构的发展,网站逐渐变成了互联网应用程序,嵌入网络的JavaScript代码越来越庞大,越来越复杂(业务逻辑处理或用户交互很多写在前端).网页越来越像桌面程序,需要一个团队分工协作.进度管理. ...
- javascript模块化应用
这是一篇关于js模块化历程的长长的流水账,记录js模块化思想的诞生与变迁,展望ES6模块化标准的未来.经历过这段历史的人或许会感到沧桑,没经历过的人也应该知道这段历史. 无模块时代 在ajax还未提出 ...
- JavaScript模块化---AMD规范
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问 题进行系 ...
- Javascript模块化开发-轻巧自制
Javascript模块化开发-轻巧自制 一.前言现在javascript的流行,前端的代码越来越复杂,所以我们需要软件工程的思想来开发前端.模块化是必不可少的,这样不仅能够提高代码的可维护性.可扩展 ...
- 实现一个JavaScript模块化加载器
对任何程序,都存在一个规模的问题,起初我们使用函数来组织不同的模块,但是随着应用规模的不断变大,简单的重构函数并不能顺利的解决问题.尤其对JavaScript程序而言,模块化有助于解决我们在前端开发中 ...
- JavaScript模块化开发&&模块规范
在做项目的过程中通常会有一些可复用的通用性功能,之前的做法是把这个功能抽取出来独立为一个函数统一放到commonFunctions.js里面(捂脸),实现类似于snippets的代码片段收集. fun ...
随机推荐
- 【CSS学习】--- overflow属性
一.前言 在网页布局中,未处理的溢出元素绝对算得上是个“毒瘤”.因为如果一个“盒子”周围还有其它元素,而从这个盒子中溢出的元素会和盒子周围的元素发生层叠,并脱离了整个HTML元素,所以我们应当合理使用 ...
- 【代码笔记】Web-ionic checkbox(复选框)
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 安卓界面之Toolbar上手
一.在配置文件采用自定义Style方法去除Actionbar <resources> <style name="MyTheme" parent="The ...
- [Q&A] 解决 SBT 初始化或下载 jar 包速度慢的问题
原文地址:https://www.cnblogs.com/memento/p/9153012.html 在 C:\Users\用户名\.sbt 目录下添加一个 "repositories&q ...
- Python类继承,方法重写及私有方法
# -*- coding: utf-8 -*- """ Created on Mon Nov 12 15:05:20 2018 @author: zhen "& ...
- github版本控制相关
Git版本控制: 安装Github http://blog.csdn.net/huangyuan_xuan/article/details/49125597 Git本地版本控制 http://blog ...
- 找Maven --> pom.xml --> groupId和artifactId的网站
http://mvnrepository.com/ 在此记录
- UEditor单个图片上传遇到的问题记录
查看了ueditor.all.js得源代码发现单图片上传是在选择文件输入框change事件执行表单Submit,但是出现一个问题请求头没有加入Cookie,导致后端身份认证失败,上传最终失败. ued ...
- scrapy爬取校花网男神图片保存到本地
爬虫四部曲,本人按自己的步骤来写,可能有很多漏洞,望各位大神指点指点 1.创建项目 scrapy startproject xiaohuawang scrapy.cfg: 项目的配置文件xiaohua ...
- VS Code 快捷键使用小技巧
相关文档 官方文档(英文版):Documentation for Visual Studio Code 中文文档(未完成):GitHub - jeasonstudio/CN-VScode-Docs: ...