js中的模块化编写思维

作为一个新手程序员,在编程时一定要刻意锻炼自己的模块化编写思路,但是究竟什么才是模块化编写对于新人来说还是不太能够直观的理解,下面就举个简单的例子来说明一下

概念:最早接触模块化的说法是从java上,所谓模块化就是将需要用到的方法封装成为一个模块,哪里需要直接调用即可,比如你需要计算1+1和2+2,那么你只需要调用a+b的方法即可,无需反复重写,但是由于js并不支持类的继承,因此如何封装和调用方法就成为js模块化的重要思路。

最简单的方式:

function sum(a,b){
        alert(a+b);
    }
function sub(a,b){
        alert(a-b);
    }
    sum(1,1);
    sum(2,2);
    sub(11,1);

上面的sum(),sub()分别都可以算作是一个模块,需要用的时候直接调用即可,但是这种做法的缺点很明显:"污染"了全局变量,无法保证不与其他模块发生变量名冲突,而且模块成员之间看不出直接关系。比如a,b是全局变量同时方法中需要改变a,b值的时候。

因此大多时候我们都会将其采用对象的写法:

var Sum=new Object({
        a:1,
        b:2,
        sum:function(){
            alert(this.a-this.b);
        }
    });
    Sum.sum();

上面的函数sum(),封装在Sum对象里。使用的时候,就是调用这个对象的属性。

Sum.sum();

但是,这样的写法会暴露所有模块成员,内部状态可以被外部改写,比如:

sum.a=2;

因此,在这个的基础上,我们可以采用立即执行函数写法:

 var Sum=(function(){
        var a=1;
        var b=2;
        var sum=function(){
            alert(a+b);
        };
        var sub=function(){
            alert(a-b);
        };
        return {
            sum:sum,
            sub:sub
        }
    })();
    alert(Sum.a);
    Sum.sum();

第一个输出的Sum.a是undefind,外部是无法获取我们模块内部参数的,但是由于方法我们返回成为一个对象,因此是可以由外部调用的。

同时该模块还可以为其添加新的方法

Sum=(function () {

        m3 = function () {
            alert("开始计算");
        };
        return {m3:m3}
    })(Sum);
        Sum.m3();

但是注意,这里不能直接调用Sum中的变量a,b,如果需要使用这些参数还需要重新赋予,关于解决方式大家有好的办法欢迎回复。

另外为了避免执行顺序等干扰造成程序报错,在添加方法时也可以写成

Sum=(function () {

        m3 = function () {
            alert("im");
        };
        return {m3:m3}
    })(window.Sum || {});

这样即使是空对象也可以添加成功。

以上就是简单的模块化封装思路,大家可以举一反三。

时间: 2024-11-07 22:33:00

js中的模块化编写思维的相关文章

JS中的模块化开发之Sea.JS

模块化开发的好处: 1:减少冲突 2:提高性能 用sea.js为例:sea.js模块库下载地址:http://seajs.org/docs/#downloads 例子:获取非行间样式的模块化开发: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="

html css &lt;input&gt; javaScript .数据类型 JS中的函数编写方式 BOM总结 DOM总结

Day27  html css div 块标签. 特点: 独占一行,有高度和宽度 span 行元素. 特点:在同一行显示,当前行满了自动去下一行显示. 不识别高度和宽度 1.1.1.1 2.输入域标签 :<input> l <input> 标签用于获得用户输入信息,type属性值不同,搜集方式不同.最常用的标签. n type属性 u text:文本框,单行的输入字段,用户可在其中输入文本.默认宽度为 20 个字符 u password:密码框,密码字段.该字段中的字符以黑圆显示.

好程序员web前端教程分享js中的模块化一

好程序员web前端教程分享js中的模块化一:我们知道最常见的模块化方案有CommonJS.AMD.CMD.ES6,AMD规范一般用于浏览器,异步的,因为模块加载是异步的,js解释是同步的,所以有时候导致依赖还没加载完毕,同步的代码运行结束:CommonJS规范一般用于服务端,同步的,因为在服务器端所有文件都存储在本地的硬盘上,传输速率快而且稳定. 1.script标签引入 最开始的时候,多个script标签引入js文件.但是,这种弊端也很明显,很多个js文件合并起来,也是相当于一个script,

Node.js中的模块化

每天一篇文章来记录记录自己的成长吧.大二,该静心了.加油~ 好了,废话不多说,今天说说nodejs中的模块化.(注:此文为自己对书nodejs实战的总结) nodejs一个重要的特性就是模块化,模块就是node.js对常用功能进行分组的方式.而且,node无需真正辨别模块到底是我们自己编写的还是从外部仓库中获取的.这样我们只需要一个额外的json文档和一两行代码,我们就能引用别人的代码或者别人引用我们的代码,是不是很酷~. 好,下面我们来编写一个简单的模块: exports.hello_worl

JS中的空值

尽管从第一次遇到空值引起的bug开始,我就一直要求自己注意空值,但还是经常犯这样的错误,JS中的空值真的需要多加注意.这里说的空值包括undefined和null 为什么JS容易出现空值bug? 首先JS是一个动态类型语言,与之相对的是静态类型语言如Java.在Java中要定义数据模型意味着定义一个类--JavaBean,无论这个数据模型的结构多么简单.在JS中就简单的多: var auth = { visible: true, editable: true } 这种灵活的方式带来了很大的便捷,

【JavaScript】关于JS中的constructor与prototype

最初对js中 object.constructor 的认识: 在学习JS的面向对象过程中,一直对constructor与prototype感到很迷惑,看了一些博客与书籍,觉得自己弄明白了,现在记录如下: 我们都知道,在JS中有一个function的东西.一般人们叫它函数.比如下面的代码 function Person(name)   {     alert(name);   }   Person('js');//js 上面的代码中,Person的表现的确跟一般的函数没有什么区别,接着看下面的代码

更快学习 JS 的 6 个简单思维技巧

当人们尝试学习 JavaScript , 或者其他编程技术的时候,常常会遇到同样的挑战: 有些概念容易混淆,特别是当你学习过其他语言的时候. 很难找到学习的时间(有时候是动力). 一旦当你理解了一些东西的时候,却很容易再一次忘记. 可以使用的工具甚多且经常变化,所以不知道从哪里开始入手. 幸运的是,这些挑战最终都可以被战胜.在这篇文章里,我将介绍 6 个思维技巧来帮你更快的学习 JavaScript ,让你成为一个更快乐更多产的程序员. 1.不要让将来的决定阻止你进步 对于很多学习 JavaSc

关于JS中的constructor与prototype&lt;转&gt;

在学习JS的面向对象过程中,一直对constructor与prototype感到很迷惑,看了一些博客与书籍,觉得自己弄明白了,现在记录如下: 我们都知道,在JS中有一个function的东西.一般人们叫它函数.比如下面的代码 js代码: function Person(name) { alert(name); } Person('js');//js 上面的代码中,Person的表现的确跟一般的函数没有什么区别,接着看下面的代码 function Person(name) { this.name=

关于JS中的constructor与prototype

最初对js中 object.constructor 的认识: 在学习JS的面向对象过程中,一直对constructor与prototype感到很迷惑,看了一些博客与书籍,觉得自己弄明白了,现在记录如下: 我们都知道,在JS中有一个function的东西.一般人们叫它函数.比如下面的代码 function Person(name)   {     alert(name);   }   Person('js');//js 上面的代码中,Person的表现的确跟一般的函数没有什么区别,接着看下面的代码