js中的模块化开发（前端、后端）

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",{
        "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);
})

前端的模块化开发有三种方式，一种是上面说的AMD模式，一种是CMD，还有一种最常用的是ES6的模块化开发

CMD是同步的，不太符合前端编程，而AMD是异步的，所以多用这个，包括ES6的模块化开发，使用打包工具(webpace,gulp),最后都会转换成ES5的AMD模式