模块，什么是模块，怎么实现模块 |
您所在的位置：网站首页 › java中的模块是什么意思 › 模块，什么是模块，怎么实现模块 |
模块，什么是模块，怎么实现模块
|
今天和大家简单的聊一聊“模块”，什么是模块呢？ 将代码拆分成独立的块，然后再把这些块连接起来可以通过模块模式来实现。这种模式背后的思想很简单：把逻辑分块，各自封装，相互独立，每个块自行决定对外暴露什么，同时自行决定引入执行哪些外部代码。不同的实现和特性让这些基本的概念变得有点复杂，但这个基本的思想是所有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 学生管理系统解构 引入模块内容后后无法输出 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 [email protected] -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了 学生管理系统第二个栗子： 其实第二个栗子和第一个差不多 ，也就是之前我在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建的文件拿过来就行了 交换牌 上面 讲到了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)// 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 下次见！！！！ 累死.............................................. |
【本文地址】
今日新闻 |
推荐新闻 |