02#模块化

 

3. 全面解析Module模式

Module模式的基本特征：
模块化，可重用
封装了变量和function，和全局的namaspace不接触，松耦合
只暴露可用public的方法，其它私有方法全部隐藏

匿名闭包
是让一切成为可能的基础，而这也是JavaScript最好的特性，我们来创建一个最简单的闭包函数，函数内部的代码一直存在于闭包内，在整个运行周期内，该闭包都保证了内部的代码处于私有状态。


闭包都保证了在整个程序的运行周期,内部的代码处于私有状态
(function () {
// ... 所有的变量和function都在这里声明，并且作用域也只能在这个匿名闭包里
// ...但是这里的代码依然可以访问外部全局的对象
}());

(function () {/* 内部代码 */})();


将全局变量当成一个参数传入到匿名函数

 

CODER
///-----///-----///-----///

=============================================================
【匿名函数】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IndexABC</title>
</head>
<body>
    
    <div class="el"> EL </div>

    <button id="change"> `Number` </button>


</body>
<script>
    
    let calc = function(ele){

        let el = document.querySelector(ele);

        return {
            add: function(x,y){
                let val = x*y;
                el.innerHTML = val;
            }
        }

    }

    change.onclick = function(){
        let cc = new calc(".el")
        cc.add(3,4);
    }


</script>
</html>

    <!-- new一下，也就是说每个实例在内存里都是一份copy，如果你不需要传参数或者没有一些特殊苛刻的要求的话，我们可以在最后一个}后面加上一个括号，来达到自执行的目的，这样该实例在内存中只会存在一份copy， -->



=============================================================
【在匿名函数中使用全局变量】


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IndexABC</title>
</head>
<body>
    
    <div class="el"> EL </div>

    <button id="change"> `Number` </button>

</body>
<script>
    
    let jQuery = {};
    let YH = {};
    jQuery.attr = "default jQuery";

    (function($,YH){
        // alert($.attr);
        $.add = function(){
            return "JQUERY";
        }
        
        $.plusOne = function(x){
            return x+1;
        }

        YH.say = function(words){
            return words;
        }
    })(jQuery,YH);
    // 将全局变量当成一个参数传入到匿名函数然后使用

    alert (jQuery.add());
    alert(jQuery.plusOne(1));
    alert(YH.say("some words"));

</script>
</html>




=============================================================
【在匿名函数中声明全局变量】 模块化



    // 在匿名函数中声明全局变量

    let bModule = (function(){
        let my = {},
            privateName = "Petter";

        function privateComment(words){
            // combine my basice information with comment-words 
            // console.log(words);
            alert(words);
        }

        my.name = privateName;

        my.addComment = function(words){
            privateComment(words);
        }

        return my;

    }());

    alert(bModule.name, bModule.addComment("some words"));



=============================================================
【在匿名函数中声明全局变量】 多模块化

    // 在匿名函数中声明全局变量

    let BasicModule = {};

    let bModule = (function(my){
         my = BasicModule || {},
            privateName = "Petter";

        function privateComment(words){
            // combine my basice information with comment-words 
            // console.log(words);
            alert(words);
        }

        my.name = privateName;

        my.addComment = function(words){
            privateComment(words);
        }

        return my;

    }(BasicModule));


    let cModule = (function(my){

        my.addPostt = function(words){
            alert(words);
        }

        return my;

    }(BasicModule));


    alert(BasicModule.name);
    BasicModule.addComment("some words");
    BasicModule.addPostt("some posts");




=============================================================
每个单独分离的文件都保证这个结构，那么我们就可以实现任意顺序的加载


    //=========== 松散偶合
    var blogModule = (function (my) {

        // 添加一些功能   
        
        return my;
    } (blogModule || {}));  



    //=========== 扩展和重载方法
    var blogModule = (function (my) {
        var oldAddPhotoMethod = my.AddPhoto;

        my.AddPhoto = function () {
            // 重载方法，依然可通过oldAddPhotoMethod调用旧的方法
        };

        return my;
    } (blogModule));



    //============ 克隆与继承
    var blogModule = (function (old) {
    var my = {},
        key;

    for (key in old) {
        if (old.hasOwnProperty(key)) {
            my[key] = old[key];
        }
    }

    var oldAddPhotoMethod = old.AddPhoto;
    my.AddPhoto = function () {
        // 克隆以后，进行了重写，当然也可以继续调用oldAddPhotoMethod
    };

    return my;
} (blogModule));



=============================================================
必会代码cp属性:

    let obj = {
        a: 1,
        b: 2,
        f: function(){
            alert(123);
        }
    }

    let cobj = {};

    for( key in obj){
        if( obj.hasOwnProperty(key) )
        {
            cobj[key] = obj[key]
        }
    }

    console.log( cobj );
    cobj.f();




=============================================================
子模块
blogModule.CommentSubModule = (function () {
    var my = {};
    // ...

    return my;
} ());



=============================================================
跨文件共享对象
var blogModule = (function (my) {
    var _private = my._private = my._private || {},
        
        _seal = my._seal = my._seal || function () {
            delete my._private;
            delete my._seal;
            delete my._unseal;
            
        },
        
        _unseal = my._unseal = my._unseal || function () {
            my._private = _private;
            my._seal = _seal;
            my._unseal = _unseal;
        };
        
    return my;
} (blogModule || {}));

 

posted @ 2019-05-08 12:12  aocn  阅读(109)  评论(0)    收藏  举报