【1】module.exports、exports、export、import、export default使用与区别
① module.exports与exports
module.exports和exports 是commonJs的语法，大家熟知的node就是基于CommonJs语法设计的，node将每个文件视为一个拥有独立作用域链的模块，每个模块的类，变量，函数等都是私有的，对其他文件不可见。
但是，如果别的模块想要使用另一个模块的函数应该如何处理呢，这时我们就会用到module.exports、exports了。
node将每个独立的文件视为一个mudule，而exports是为了将本模块内的变量、函数暴露给外面使用的写在mudule对象上的接口，因此使用时可以通过module.exports来说暴露内部接口到外面。
module.exports实例
utils如下：
const formatTime = date => {const year = date.getFullYear()const month = date.getMonth() + 1const day = date.getDate()const hour = date.getHours()const minute = date.getMinutes()const second = date.getSeconds()return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
function recordTime(date) {var month = date.getMonth() + 1var day = date.getDate()var hour = date.getHours()var minute = date.getMinutes()return [month, day].map(formatNumber).join('/') + ' ' + [hour, minute].map(formatNumber).join(':')
}const formatNumber = n => {n = n.toString()return n[1] ? n : '0' + n
}module.exports = {formatTime: formatTime,recordTime: recordTime
}
其他页面引入
# 如index.js引入util.js使用
const util = require('../../utils/util.js')
module.exports既可以通过点语法，也可以直接赋值一个对象:
② export、import、export default
ES6使用 export 和 import 来导出、导入模块
// test.js
var name = 'jane';export {name};
其他js文件可以使用import引入使用：
//在index.js里面引入并使用
import {name} from '../../modules/test.js'
Notes:
-
export与export default均可用于导出常量/函数/文件/模块等；
-
在一个文件或模块中，export/import可以有多个，export default只有一个；
-
通过export方式导出，在导入时需要加
{}，export default不需要； -
export能导出变量/表达式，export default不可以。
-
CommonJS模块输出是一个值的拷贝，ES6模块输出是值的引用。
-
CommonJS模块是运行时加载，ES6模块是编译时输出接口。
-
CommonJS模块无论require多少次，都只会在第一次加载时运行一次，然后保存到缓存中，下次在require，只会去从缓存取。
使用export default命令，为模块指定默认输出，这样就不需要知道所要加载模块的变量名
③ export default使用实例之暴露类
NumberAnimate.js
class NumberAnimate {constructor(opt) {//...}init() {//...}
} export default NumberAnimate;
index.js引入
//index.js
//获取应用实例
import NumberAnimate from "../../utils/animate.js";
let numberAnimate =new NumberAnimate ()
④ export暴露匿名函数
//a.js
export default {index_slides: [{id: 1,slide_url: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/37dfdc929ee9a4313facb0b23ebcd721.jpg?thumb=1&w=720&h=360"}]
}//b.js引入
import mock from "./utils/a.js";
【2】require与import
node编程中最重要的思想就是模块化，import和require都是被模块化所使用。
require的基本语法
在导出的文件中定义module.export,导出的对象的类型不予限定（可以是任何类型，字符串，变量，对象，方法），在引入的文件中调用require()方法引入对象即可。
//a.js中
module.export = {a: function(){console.log(666)}
}
//b.js中
var obj = require('../a.js')
obj.a() //666
本质上是将要导出的对象赋值给module这个的对象的export属性，在其他文件中通过require这个方法访问该属性。
import的基本语法
导出的对象必须与模块中的值一一对应，换一种说法就是导出的对象与整个模块进行结构赋值。
//a.js中
//最常使用的方法,加入default关键字代表在import时可以使用任意变量名并且不需要花括号{}
export default{ a: function(){console.log(666)}
}export function(){ //导出函数}
// 解构赋值语法(as关键字在这里表示将newA作为a的数据接口暴露给外部，外部不能直接访问a)
export {newA as a ,b,c} //b.js中
//import常用语法（需要export中带有default关键字）可以任意指定import的名称
import a from '...' // 基本方式，导入的对象需要与export对象进行解构赋值。
import {...} from '...' //使用as关键字，这里表示将a代表biubiubiu引入（当变量名称有冲突时可以使用这种方式解决冲突）
import a as biubiubiu from '...' import {a as biubiubiu,b,c} //as关键字的其他使用方法require 是赋值过程并且是运行时才执行， import 是解构过程并且是编译时执行。
遵循规范
- require 是 AMD规范引入方式
- import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法
调用时间
- require是运行时调用，所以require理论上可以
运用在代码的任何地方 - import是编译时调用，所以必须
放在文件开头
【3】全局/自定义window
① 微信默认全局配置
json文件配置中有一块针对于window的配置，如全局配置文件app.json中配置如下：
"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#3cb371","navigationBarTitleText": "企业助手","navigationBarTextStyle": "white"},
如果页面得json文件没有配置window属性，那么将会采用默认app.json中的配置。如果页面json文件中配置了当前页面窗口的属性，将会覆盖掉app.json中的配置：
//leave.json
{"usingComponents": {},"enablePullDownRefresh": true,"backgroundTextStyle": "dark","onReachBottomDistance": 50,"navigationBarTitleText": "请假列表","navigationBarTextStyle": "white"
}
通常使用微信默认的窗口即可，但是如果想实现特殊效果就需要自定义样式，如下所示实现头部背景图效果：
这里可以看到只保留了右上角的胶囊图标。
② 自定义window
自定义window就是去掉了微信小程序默认的头部window，将空间让出来给你使用(可以理解为将page进行了拉伸)。自定义window样式需要在app.json里面配置，如下所示"navigationStyle": "custom",：
"window": {"navigationBarBackgroundColor": "#39b54a","navigationBarTitleText": "yd","navigationStyle": "custom","navigationBarTextStyle": "white"},
如果不配置"navigationStyle": "custom",，那么将会微信小程序将会默认window，即使你在页面json文件中什么也不配置，如下：
可以看到头部仍有保留了默认window占位。
在app.json对window进行了自定义配置后，可以在页面wxml里面配置自己window样式，如下所示：
//如下，在页面最上面放一个背景图
<view class='UCenter-bg'><image src='/images/logo.png' class='png' mode='widthFix'></image>
</view>
//...
这时候(即在app.json中配置了"navigationStyle": "custom",)即使你在页面json中配置了window样式也不会起作用。将会直接渲染页面wxml~
