本文介绍了JavaScript的模块化概念及其好处，并通过ES6的export和import进行模块化示例。讨论了浏览器对模块语句的不兼容问题，提出了使用Webpack工具将ES6模块转换为ES5语法的方法，包括安装Webpack、配置文件创建、打包过程等。同时，简述了Node.js作为服务端JavaScript运行时的角色，以及其在开发web应用和操作静态文件中的应用。
今天和大家简单的聊一聊“模块”，什么是模块呢？
将代码拆分成独立的块，然后再把这些块连接起来可以通过模块模式来实现。这种模式背后的思想很简单：把逻辑分块，各自封装，相互独立，每个块自行决定对外暴露什么，同时自行决定引入执行哪些外部代码。不同的实现和特性让这些基本的概念变得有点复杂，但这个基本的思想是所有JavaScript模块系统的基础。
模块化好处：1.方便维护，代码定位准确 2.内部的变量，相互不影响，方便单个模块功能调试、升级，方便模块间组合、分解 3.方便团队开发，多人协作互不干扰 4.模块可以复用 缺点 1.系统分层，调用链会很长 2.模块间发送消息会很耗性能
ES6中如何实现模块化开发?
下面就来举2个栗子：
第一个：人类、学生类、教师类 将这三种类封装成一个独立模块 建一个文件夹添加js文件 起个名字叫随便：lei.js
其实下面的例子就和之前class类 的例子差不多，只是单独把它写到js里 封装成了一个独立模块
最重要的就是 创建完类之后 要 导出封装模块 export{}
//人类
class People{
constructor(name,age,gender){
this.name=name
this.age=age
this.gender=gender
}
eat(){
console.log(this.name+'正在用餐')
}
study(){
console.log(this.name+'正在学习')
}
reflection(){
console.log(this.name+'正在思考')
}
}
//导出封装模块 export{}
export {People}
// 学生类 继承父类People
class Student extends People{
constructor(name,age,score){
super(name,age,"男") //super() 方法 在子类中 调用父类的构造函数，必须写在子类的最上方
this.score=score+"分考试成绩"
}
}
export {Student}
//教师类
class Teacher extends People{
constructor(name,age,teach ){
super(name,age,"男")
this.teach =teach
}
}
export {Teacher}
//然后再创建一个js 用来引入对应的模块内容。根据 创建好对应的类 引入对应的模块内容
语法是： import 定义变量 from 模块地址
import {People} from "./lei.js"
import {Student} from "./lei.js"
import {Teacher} from "./lei.js"
//根据学生类 和人类 创建一个学生对象
let s1=new People("拉瓦",24,99)
console.log(s1)//Student {name: '拉瓦', age: 22, gender: '男', score: '99分考试成绩'}
console.log(s1.name+s1.score)//拉瓦99分考试成绩
s1.eat()//拉瓦正在用餐
s1.reflection()//拉瓦正在思考
let t1=new Teacher("张老师",30,"正在讲课")
console.log(t1)
console.log(t1.name+t1.teach)//张老师正在讲课然后创建学生管理系统html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学生管理系统</title>
</head>
<body>
<script src="lei.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>解构 引入模块内容后后无法输出
Cannot use import statement outside a module 会报错
因为传统的浏览器：无法解析 模块语句,不兼容。所以只能将原有的ES6模块化语法，转化为 ES5语法。
如何转化成ES5语法？ 在这里就要用到一个打包工具了， webpack打包工具：可以将代码压缩，也可以将代码转化
如何使用？ 1.利用node环境，直接进行工具安装 在网站里下载之后 无脑安装就行 内存很小http://nodejs.cn/download/ ，npm 全球的代码开源站，站点国外 下载速度较慢
下载好之后： 第一步：安装node环境 ，无脑安装就行！ node环境 自带npm管理了工具
第二步：检测安装是否成功：win+r cmd 输入 node -v
第三步：安装git模拟命令行 下一步！！ 右键 git bash here 命令行打开
第四步: 利用node环境安装webpack工具 输入 cnpm install webpack@3.0.0 -g
-g表示全局安装 ，node环境的任意位置都可以使用
第五步：输入：webpack -v 检测是否安装完成，会显示出来版本
第六步：由于Npm本身下载速度过慢，可以利用淘宝镜像使用国内站点下载 ，cnpm cnpm -v
以后安装模块的过程中 ，npm改为 cnpm （这一步可以省去，尽量安装上面的 多等会就多等会吧） 下载中有疑问的可以私我。
如何使用webpack?
将ES6新的代码转化成ES5的代码
第一步：在项目的根路径下，创建一个名字为webpack.config.js的配置文件 名称不可改
然后：将配置项 作为模块导出 怎么导出？
第一步 entry:入口文件 ，要打包谁？ 打包主文件
第二步 output:出口文件，打包后的文件放在什么位置
absolute path output: path属性 必须是绝对路径
node提供 path模块
const path=require("path")//把路径模块引入进来
module.exports = {
entry: "./js/index2.js",// 同级目录前方必须 加上./
output: {
//改成绝对路径
//path属性存放路径,指定文件夹名称
//path.resolve(__dirname,"") //找到当前文件所在的绝对路径
path: path.resolve(__dirname,"aaa"),
filename:"zsj.js" //打包后的文件名称
}
}然后win+r cmd 输入webpack
然后在文件夹aaa里会出现打包后的zsj.js文件 然后再输出学生管理系统就ok了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学生管理系统</title>
</head>
<body>
<script src="aaa/zsj.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>第二个栗子：
其实第二个栗子和第一个差不多 ，也就是之前我在class类里举例的实现左右手换牌的操作 只要那部分理解了，这个跟着第一个例子的思路走 也很简单，我直接上代码了。
先创建一个用户对象把抓牌方法什么的都放里边 也可以分开， 然后封装js模块
class User{
constructor(name) {
this.name=name
this.leftHand=null
this.rightHand=null
}
// 第二步抓牌方法
grab(){
// 抓两张牌 分别赋值给左手和右手 牌的花色和大小
var c1=new Card()
this.leftHand=c1.color+c1.size
var c2=new Card()
while(true){
//如果相等c2重新赋值
if(c1.color+c1.size==c2.color+c2.size){
c2=new Card()
}else{
break//如果不相等就停止循环
}
}
this.rightHand=c2.color+c2.size
}
//第三步展示牌
show(){
console.log("左手"+this.leftHand+";右手"+this.rightHand)
}
//第四步交换牌
change(){
var t=this.leftHand
this.leftHand=this.rightHand
this.rightHand=t
}
}
export{User}
// 最后在创建一个牌的构造函数 花色及大小随机
class Card{
constructor(){
var colors=["黑桃","红桃","梅花","方片"]
var sizes=["A","2","3","4","5","6","7","8","9","10","J","Q","K"]
//根据下标产生随机数 0-3的随机数
this.color=colors[parseInt(Math.random()*colors.length)]
this.size=sizes[parseInt(Math.random()*sizes.length)]
}
}
export{Card}再创建一个js来引入对应的模块内容
import{User}from"./mk.js"
import{Card}from"./mk.js"
//然后创建对象并输出
var u1=new User('赌神')
//展示牌
u1.show()//左手null;右手null
//抓牌
u1.grab()
//展示牌
u1.show()//左手梅花10;右手红桃7
//两手换牌
u1.change()
//展示
u1.show()//左手红桃7;右手梅花10
console.log(u1.name)//赌神然后 再创建一个名字为webpack.config.js的配置文件 名称不可改
const path=require("path")
module.exports={
entry:"./js/co.js",
output:{
path:path.resolve(__dirname,"bbb"),
filename:"jj.js"//打包后的文件名
}
}（然后win+r cmd 输入webpack）！！！！！！！！！注意！！！这一步最重要 之前我都忘了 然后报错了 然后建个HTML直接把通过webpack建的文件拿过来就行了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>交换牌</title>
</head>
<body>
<script src="bbb/jj.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>上面 讲到了Node 那么什么是Node呢？
Node是用来开发服务器的，Node.js 不是JS文件也不是一个JS框架，而是一个Server side JavaScript runtime（服务端的一个JS运行时），我们可以Node环境中运行JS代码 。
它可以用来做什么？
开发web应用程序：1. 做动态网站 2. 开发提供数据的服务端API。 下面 我们就来实现一下用Node开发服务器：首先第一步启动服务器，编写api接口 。然后第二步跟数据库进行交互 增删改查，也可以操作静态文件，然后再返回 前端，先给大家看个图吧 简单理解一下下
好了 下面直接上代码：
首先引入一个http模块用于启动服务器，通过http模块创建一个服务
.createServer(function(){})创建服务
简写req=requset 意思是前端发送过来的参数；简写res=response 意思是返回给前端的内容
const http = require("http")
const server = http.createServer((req, res) => { //function 当有人请求服务器时，自动进入回调函数
//利用res参数 给前端返回任意类型内容
res.write("welcome")
//.end()发送内容
res.end()
})
server.listen(5688)//创建一个端口号 当前电脑就是本地服务器 在本地服务器开辟5688端口作为本次node服务（然后win+r打开服务器 cmd 输入 node 2.启动服务器.js +回车键）然后再在浏览器的地址栏输入localhost:5688 页面就会出现welcome。浏览器的地址栏：就是一个ajax请求 get请求
完成后ctrl+c 终止服务器
然后呢上面的理解后就先放下，下面我再讲一个功能，就是用Node操作静态文件。
创建一个js文件，名为（3.node操作静态文件.js）
操作静态文件的话就要用到fs模块，利用fs写入内容，创建一个名为a.txt空文件然后在刚才创建的js文件里创建下面的代码fs模块：
const fs = require("fs")
fs.writeFile("./a.txt", "你好", err => {
if (err) {
console.log("写入失败")
} else {
console.log('写入成功')
}
})看上面的代码，fs.writeFile(路径,写入内容,回调函数)，然后回调函数里面的err参数的作用是保存错误信息，如果没有错误 err就是空值。
然后win+r打开服务器 cmd 输入 node 2.node操作静态文件.js +回车键 会像下面的图一样显示写入成功 那么就大功告成了
现在在打开名为a.txt的文件里面会有 你好 内容
下面用node读取文件也是一样的道理
fs.readFile(路径，回调函数)
err :如果读取错误 err保存错误信息，没有错误空。data：读取到内容
fs.readFile("./a.txt", (err, data) => {
if (err) {
console.log("读取失败")
} else {
console.log(data)//<Buffer 68 65 6c 6c 6f 20 77 6f 72 6c 64>
console.log(data.toString())//强行转化成字符串
}
})上面输出的那段乱码是啥意思？那不是乱码 是叫做 Buffer数据类型 二进制码 用来计算机之间进行文件传输时使用的内容。如果实在不想看乱码，就强行转化成字符串就行了。
好了下面开始讲解如何在服务器端打开网页页面 这是个重点！！！！
如何在服务器端打开网页
前端进行数据交互时，通常使用ajax进行数据交互，ajax本身存在同源策略问题
网页必须在服务器端打开 才能使用ajax
上代码呜呜呜， 记得创建文件 名为（188.js） 然后win+r打开服务器 cmd 输入 node 188.js +回车键 最后再打开浏览器 在浏览器的地址栏输出 http://localhost:8088/a.html 然后 就大功告成了。
const http = require("http")
const fs=require("fs")
const server = http.createServer((req, res) => { //根据请求地址 ，来打开对应的网页
// http://localhost:8088/a.html
let url=req.url //请求的地址
if (url == "/a.html") { //打开a页面
//读取指定的静态文件 就需要用到fs 所以用fs读取/a.html 然后再返回给前端
fs.readFile("./a.html", (err, data) => {
if (err) {
res.write("没有找到对应页面")
res.end()
} else {
res.write(data)
res.end()
}
})
}
})
server.listen(8088)好了今天就到这 I went to rest 下次见！！！！ 累死..............................................
扫一扫
477
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
