javascript 模塊化

一直好奇像node.js,require.js的模塊化是怎麼作的,在看了《你不知道的javascript》後,對js的模塊化有了一些簡單的瞭解。這本書真的還不錯。javascript

書裏講述了js的模塊化的原理 和  現代js實現模塊化的簡單的寫法,下面直接上代碼:java

<script type="text/javascript">
        <!-- javascript 中的模塊化 -->
        <!-- 建立定義模塊函數 -->    
        var Module = (function(){
            var modules = {};node

            //建立模塊
            function define(name,deps,fun){//name:模塊名稱,deps:依賴模塊,func: 模塊方法app

                for (var i = 0; i < deps.length; i++) {
                    deps[i] = modules[deps[i]]; 
                }
                modules[name] = fun.apply(fun,deps); //這裏依賴注入的關鍵,把依賴的模塊傳給fun模塊化

            }函數

            //模塊的get()
            function get(name){
                return modules[name];
            }測試

            return {
                define:define,
                get:get
            };ui

        })();spa

        //定義一個行爲模塊(喝酒)
        Module.define("drunk",[],function(){ip

            function drunking(){
                console.log("can drunk !");
            }

            return {
                drunking:drunking
            };
        });

        //定義一個模塊,建立學生類
        Module.define("student",["drunk"],function(drunk){

            function CreateStudent(name,age,isDrunk){
                var obj = new Object();
                obj.name = name;
                obj.age = age;
                obj.eat = function(){
                    console.log("Everyone can eat !")
                };
                if (isDrunk) {
                    obj.du = drunk.drunking;
                } else {
                    obj.du = function(){
                        console.log("can not drunk !");
                    }
                }
                return obj;
            }
            return {
                createStudent:CreateStudent
            };
        });

        //測試

        var s1 = Module.get("student").createStudent("lee",12);         s1.eat();         s1.du();

相關文章
相關標籤/搜索