js中的模組化開發（前端、後端）

阿新 • • 發佈：2020-08-17

js中的模組化開發

後端的模組化開發使用commenJs,使用路由形成入口檔案，每一個介面是一個檔案

先看不使用模組化開發的後端程式碼(隨手寫的簡單程式碼)

var http=require("http");
var querystring=require("querystring");
var server=http.createServer(function(req,res){  //建立服務
    var data="";
    req.on("data",function(_data){
       data+=_data;
    });
    req.on("end",function(){
        // console.log(req.headers.abc);
        if(data.trim().length===0) data=req.url.split("?")[1];   
        else{
            try{
                data=JSON.parse(data);
            }catch(error){

            }
        }
        if(typeof data==="string"){
            try{
                data=querystring.parse(data);
            }catch(error){
                res.end("錯誤的訊息");
                return;
            }
        }
        if(!data){
            res.end("錯誤的訊息");
            return;
        }
        res.writeHead(200,{     //響應頭  解決跨域問題
            "content-type":"text/html;charset=utf-8",
            // "Access-Control-Allow-Headers":"*",//請求頭跨域
             "Access-Control-Allow-Origin":"*",
            //  cors跨域
            });
       res.write((data.user? data.user : "你沒有user")+"歡迎再次光臨");  //返回內容
        res.end();
           
    })
});
server.listen(4006);   //偵聽服務
}

使用commenJs的模組化開發 ,使用路由,如果介面多,可以使用一級路由作為檔案入口，呼叫多個子級路由
後端主檔案

var http=require("http");
var querystring=require("querystring");
function createServers(route){        //由一級路由傳入資料  如果是多個介面,一級傳進來物件
    var server=http.createServer(function(req,res){
        var data="";
        req.on("data",function(_data){
           data+=_data;
        });
        req.on("end",function(){
            // console.log(req.headers.abc);
            if(data.trim().length===0) data=req.url.split("?")[1];   
            else{
                try{
                    data=JSON.parse(data);
                }catch(error){
    
                }
            }
            if(typeof data==="string"){
                try{
                    data=querystring.parse(data);
                }catch(error){
                    res.end("錯誤的訊息");
                    return;
                }
            }
            if(!data){
                res.end("錯誤的訊息");
                return;
            }
            res.writeHead(200,{
                "content-type":"text/html;charset=utf-8",
                // "Access-Control-Allow-Headers":"*",//請求頭跨域
                 "Access-Control-Allow-Origin":"*",
                //  cors跨域
                });
                switch(req.url.split("?")[0]){   根據?前面的檔名,來進行判斷
                    case "/a":
                        route.a(res,data);
                        break;
                    case "/b":
                        route.b(res,data);
                        break;
                }
               
        })
    });
    server.listen(4006);
}
module.exports=createServers;  //檔案匯出

不同的介面返回不同資料的檔案
a.js //二級路由

var obj={
    a:1,
    init:function(res,data){
        console.log("執行了a.js");
        res.write((data.user? data.user : "你沒有user")+"歡迎光臨");  //服務的返回資料
        res.end();
    }
}
module.exports=obj;//這個匯出一個
// exports.obj=obj;//這個可以匯出多個

b.js //二級路由

var obj={
    a:1,
    init:function(res,data){
        console.log("執行了b.js");
        res.write((data.user? data.user : "你沒有user")+"歡迎再次光臨");
        res.end();
    }
}
module.exports=obj;  //匯出

index.js 一級路由，呼叫多個二級路由,作為入口檔案

var cs=require("./main");
var route={
    a:require("./a").init,
    b:require("./b").init
}
cs(route);

路由的作用:在vue中路由的定義是檢視的切換,但是在node中，路由是為了控制服務的開啟和對介面的更好呼叫(解耦)，即使一個接口出現了問題，但是不會影響到其他的內容

下面的是前端的模組化開發，採用AMD的方式，模仿commenJs的寫法

a.js 子檔案

define((function(){   //自執行函式
    var a=1;
    return {    
        b:2,
        init:function(){
            console.log(a);
            console.log(this.b);
        }
    }
})());

b.js 子檔案

define((function(){
    return {
        init:function(a,b){
            console.log(a+b);
        }
    }
})());

c.js 有依賴檔案的匯入

define(["./Utils"],function(Utils){   //依賴檔案的引入用[]來完成
   var div= Utils.ce("div",{
        width:"50px",
        height:"50px",
        backgroundColor:"red"
    });
    return div;
});

index.js 入口檔案唯一和HTML檔案接觸的js檔案

require(["./a","./b","./c"],function(obj,obj2,div){  //檔案的引入使用[]來完成,後面的函式實參一一對應,對多個子檔案進行統一管理
    obj.init();
    obj2.init(10,obj.b);
    document.body.appendChild(div);
})