1.(vue)前端模块化 2.(node)后端模块化

在这里 有两个知识点1.(vue)前端模块化  2.(node)后端模块化
模块化:
所谓的模块化  就是把某块功能的代码 抽里成一个js文件
用到的时候直接引入当做函数一样的调用  这点我觉得有点像java的面向对象的思想
前端模块化:
以vue为例子   那些.vue文件 就是一个块
前端的导入 和 抛出
抛出 就是 export 后面就是对外暴露的代码
引入 就是 import 把抛出的东西拿过来例如
math.js中
export function add(a,b){return a+b
}
理解就是 抛出了一个对象 里面存在一个 {add:Function}
app.vue
你需要使用解构赋值 来取得抛出的add
import {add} from "./math" //暴露{add}  符合结构 add 取得数据
import {adds} from "./math" //暴露{add}  不符合结构 add 取不到数据
import add from "./math"   //不符合解构赋值 取不出来特殊词 default
例如
math.js中
export default function add(a,b){return a+b
}
app.vue
一个js文件中只能存在个 default
此时抛出来的就是一个值
import add from "./math"  //暴露值[default]add  add=add  可以取出来
import adda from "./math"  //暴露值[default]add  adda=add  可以取出来
import {adda} from "./math"  //暴露值[default]add
{ } 是用来取出 不带default抛出的代码
直接一个值  是用来取出 带default抛出的代码
于是会出现下面情况
例如
math.js中
export default function add(a,b){return a+b
}
export function lose(a,b){return a-b
}
app.vue
import aa,{lose} from "./math"
aa=[default]add  {lose}={lose}后端模块化:
后端模块化 道理一样  只是使用的模块化标准不同而已
一般是 node的模块化
导出 module.export  请记住export本身就是个对象
导出来的东西一般都是export的属性
例如
module.exports.add=function(a,b){return a+b}
//exports: { add: [Function] },
// 导入时 用的是 require("模块")  也支持解构赋值 但是他可以直接赋值
var a= require("模块")  a={ add: [Function] }
var {add}= require("模块")  add= add: [Function] 例子
math.js
module.exports={add:function(a,b){return a+b}
}
app.vue
import  {add} from "./math"  {add}={add} add取出来
import  {adda} from "./math"  {adda}={add}  adda取不出来adda=undefined
import  add from "./math"      add={add}   add等于了{add} 可以add.add使用你使用 module.exports=throttle  exports是一个对象 只不过被throttle覆盖了你使用 import  去导入
按道理道说应该使用 对象的解构赋值
但是module.exports 抛出可以直接接受 也可以解构赋值接受
import {throttle} from "throttle" {throttle}={这里需要抛出的throttle对象存在 key 是throttle的属性}import throttle from "throttle"
throttle={}   此时的throttle 就完全的是哪个抛出的对象

在vue项目中
抛出 可以
export
module.exports
引入 建议只使用 import
当然
require 也可以使用
app.js
module.exports={add:function(a,b){return a+b}}
vue中created() {let add=require("./app")alert(add.add)},created() {let {add}=require("./app")alert(add)},在node项目中
抛出只可以
module.exports
引入只可以
require

1.(vue)前端模块化 2.(node)后端模块化相关推荐

大前端–Vue前端体系、前后端分离
大前端–Vue前端体系.前后端分离前言 Soc:关注点分离原则 HTML+CSS+JS(视图):给用户看,刷新后台给的数据网络通信:axios 页面跳转:vue-router 状态管理:vuex ...
JS模块化（node.js模块化和es6模块化）
JS 模块化模块化概念模块化是指解决一个复杂问题时,自顶向下逐层把系统划分为若干模块的过程,模块是可组合.分解和更换的单元. 模块化可提高代码的复用性和可维护性,实现按需加载. 模块化规范是对代码 ...
vue前端如何获取django后端数据
轮播图前端获取数据 script template ajax和axios有什么区别呢? 在我们构建好后端api,也就相当于把让前端获取的数据准备好了.这个时候需要前端使用axios请求向后端api请求 ...
VUE前端实现加密、后端JAVA实现解密功能
文章目录 1:vue实现加密过程 2:java部分 3:转载地址 1:vue实现加密过程安装crypto-js npm install crypto-js 或者yarn add crypto-js ...
Vue前端axios发送请求后端数据样例
1.导入脚手架axios.min.js和vue.min.js 2.模拟请求数据data.json {"sucess": true,"code": 20000,& ...
【项目相关技术】前端由来、vscode安装使用、ECMAScript 6、Vue、element-ui、Node.js、npm、模块化、WebPack
前端开发的由来? vscode安装和使用 sda ①.下载地址:[https://code.visualstudio.com/](https://code.visualstudio.com/) sda ...
Node.js 模块化的操作，简单明了的代码帮助你明白后端的实现和前端之前的交互，及解决跨域等问题
Node.JS 模块化 1.require 导入模块const http=require('http')2.exports 导出模块db={name:'jine',age:22} module.e ...
node.js后端及Vue前端跨域解决方案
node.js后端及Vue前端跨域解决方案从目前我了解的情况来看,前后端跨域使用的方式有很多种,这里记录我使用最顺手的一种,即在后端使用cors跨域 node.js后端跨域解决方案先看后端的入口文 ...
Vue：前端体系与前后端分离
Vue:前端体系与前后端分离概述介绍 Vue(读音/viu/,类似于 view)是一套用于构建用户界面的渐进式框架,发布干 2014 年 2 月. 与其它大型框架不同的是,Vue 被设计为可以 ...

1.(vue)前端模块化 2.(node)后端模块化

1.(vue)前端模块化 2.(node)后端模块化相关推荐

最新文章

热门文章