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\"
　　　　}
	}
	
});