Layer父子界面交互， require.js的配置和引入layer.js

Layer弹窗感觉还是挺好用的，就是父子界面间的交互不是很清楚。看了不少文档自己又试了挺久，算是找到了一个比较好的方法，记录一下吧。

基本原理： 获取弹出层实体，通过向方法传递参数的形式去弱化父子关系。

基本使用：

弹出页面层-相当于在当前页面中弹出一个div

layer.open({
  type: 1,
  title: false,
  content: '自定义HTML内容'	// string，文本内容或者'<p>内容</p>'之类的
});

弹出iframe层-相当于在当前页面中弹出一个div的基础上加一个iframe

layer.open({
  type: 2,
  content: 'LayerChildren.html'	// 任意url
});						

首先说一下弹出页面层-div，这里的父子交互其实是主页面和layer生成并弹出的div之间的交互，很简单，利用 success - 层弹出后的成功回调方法 就可以了。例如在弹出层动态添加一行信息：

// 参数可以是任意父界面，子界面控件或者其他数据
function add(layerDiv){
	var p = document.createElement('p');
	p.innerText = '动态添加';
	layerDiv.appendChild(p);
}

layer.open({
  type: 1,
  title: false,
  content: ''，
  success: function(layero, index) {
 	// layero是弹出层的jQuery对象实体
 	add(layero[0]);	// 转为html对象并使用方法
  }
});

弹出页面层-div严格来说和主界面是同一级，利用jQuery和htmlDom的相互转化，通过success自动调用就好了。

其次是弹出iframe， 前面说了success返回的两个参数第一个layero是当前弹出窗口的div, 第二个其实是改div中的iframe索引，但是是从1开始计数的（0是div的索引）。

方法一，通过JQuery方法获取iframe实体，然后传递html对象实现修改：

layer.open({
	type: 2,
	content: 'LayerChildren.html',
	success: function(layero, index) {
		// 获取iframe body方式1
		var body1 = layer.getChildFrame('body', index);
		// 获取iframe body方式2
		var body2 = layero.find('iframe')[0].body；
		add(body2);
	}
});

方法2，通过window对象获取子页面的方法名列表，直接在success中调用，注意间接调用的方法必须在子页面中定义，当然如果是主页面的方法依然是直接使用就好了：

layer.open({
	type: 2,
	content: 'LayerChildren.html',
	success: function(layero, index) {
		// 获取子页面方法字典
		var iframeWin = window[layero.find('iframe')[index-1]['name']];
		console.log(iframeWin);
		// 间接调用子页面方法add
		iframeWin.add("消息");	
	}
});

ok，基本上就是这样了，在success方法中通过获取html对象传参使用，或者获取方法字典实现间接调用子界面方法（子页面要改动父页面建议传参，当然也可以使用parent.$("#id")之类的方法），至于再复杂的给你设置一个callBack也就可以了吧。

PS:
文档中说只引如layer.js就好了，确实。
但是layer没有使用符合require.js的模块化定义方法，需要其他的配置：

项目结构如下

在html页面引入require.js：

<script src="../js/libs/require.js" data-main="../js/utils/Config.js" type="text/javascript" charset="utf-8"></script>

Config.js是require的配置文件, 例如jquery.js的路径是js/libs/jquery-3.3.1.js，shim是处理不符合规范或者存在内置依赖的js：

//  require 配置
require.config({
	baseUrl: '../js/',
	paths: {
		// libs
		require: 'libs/require',
		jquery: 'libs/jquery-3.3.1',
		bootstrap: 'libs/bootstrap.min',
		dsbridge: 'libs/dsbridge',
		layer: 'libs/layer/layer',

		// self package
		ui: 'ui',
		net: 'net',
		utils: 'utils'
	},
	shim: {
		'bootstrap': {
			deps: ['jquery']
		},
		'dsbridge': {
			exports: 'bridge'
		},
		'layer': {
　　　　　　deps: ['jquery'],
　　　　　　exports: "layer"
　　　　}
	}
	
});