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);
})