js模块化写法

该文章由 leevare 发布于 ,归类于 Javascript

什么是模块化

模块化是一种将系统分离成独立功能部分的方法,可将系统分割成独立的功能部分,严格定义模块接口、模块间具有透明性。

以Java为例,在Java中有一个重要带概念——package,逻辑上相关的代码组织到同一个包内,包内是一个相对独立的王国,不用担心命名冲突什么的,那么外部如果使用呢?直接import对应的package即可

import java.util.ArrayList;

遗憾的是JavaScript在设计时定位原因,没有提供类似的功能,开发者需要模拟出类似的功能,来隔离、组织复杂的JavaScript代码,我们称为模块化。

模块化写法

简单的函数封装

function fn1(){
    statement
}

function fn2(){
    statement
}

这样在需要函数的地方,调用函数就可以了

这种做法的缺点很明显:污染了全局变量,无法保证不与其他模块发生变量名冲突,而且模块成员之间没什么关系。

对象

对象的写法就是将所有的模块成员封装在一个对象中,如下:

var obj = {
    p1 : 1,
    p2 : 'test p2',
    fn1 : function() {

    },
    fn2: function() {

    }
}

那么此时调用的方式就为:

obj.p1;
obj.fn1();

这样虽然达到了防止变量污染的目的,但是也引入了的问题,就是在外部可以随意修改内部的成员:

obj.p1 = 10;

所以就会产生意外的安全性问题。

立即执行函数

可以通过立即执行函数,来达到隐藏细节的目的。如:

/*new modules(param1,param2,param3)*/
(function (exports, $) {

//constructor
    function modules(param1, param2) {
        this.param1 = param1
        this.param2 = param2
        this.init()
    }

    modules.prototype = {
        init: function () {
            //do something init
            console.log("something init")
            this._handle()
        },
        _handle: function () {
            // core handle function
            console.log("something handle")
            $("body").css("backgroundColor", "green")
        }
    }
    exports.modules = modules
})(window, jQuery)

这样在模块外部无法修改我们没有暴露出来的变量、函数,同时可以在外部调用暴漏出来的函数以及变量。

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒