踩坑笔记（前端）

最新推荐文章于 2021-01-22 11:56:28 发布

大胖小呀

最新推荐文章于 2021-01-22 11:56:28 发布

阅读量312

点赞数 1

分类专栏：前端踩坑文章标签：踩坑笔记

本文链接：https://blog.csdn.net/qq_34548699/article/details/103495479

版权

前端踩坑专栏收录该内容

15 篇文章 1 订阅

订阅专栏

踩坑笔记（前端）

一、iframe子页面与父页面通信

	// 父页面
	<html xmlns:th="http://www.thymeleaf.org">
		……
		<script th:inline="javascript">
			// 后端通过 ModelAndView 传给前端；
			// 前端通过 Thymeleaf 取得数据
			var computableModelList =  [[${computableModelList}]];
		</script>
		<body>
			<div></div>
			<iframe id="ModelEditor" src="/common/integratedModelEditor"></iframe>
		</body>	
		<script>
			var iframeWindow=$("#ModelEditor")[0].contentWindow;
			var xml = iframeWindow.getCXml();
			
			iframeWindow.hasSearchedTermsComputableModel.push("");
			
		</script>
		……
	</html>
	
	// 子页面
	<html>
		……
		<script>
			var computableModelList = parent.computableModelList;
		</script>
		<body>
			<div></div>
		</body>	
		<script>
			var hasSearchedTermsComputableModel = [];
			
			function getCXml() {
        		return ui.editor.getGraphXml().outerHTML;
    		}
		</script>
		……
	</html>

父页面获取子页面属性、方法

	var iframeWindow=$("#ModelEditor")[0].contentWindow;
	// 属性
	iframeWindow.hasSearchedTermsComputableModel.push("");
	// 方法
	var xml = iframeWindow.getCXml();

子页面获取父页面属性、方法

	// 属性
	var computableModelList = parent.computableModelList;
	// 方法
	子页面调用父页面方法：parent.window.parentMethod();

在方法调用前，以下点必须要确保 iframe 已经加载完成！！！

iframe上用onload事件
用document.readyState=="complete"来判断

二、github 删除文件夹

	Git Bash Here
		1. $ git --help
		2. $ dir		查看已有文件夹
		3. $ git rm -r --cached target		删除target文件夹
		4. $ git commit -m '删除target文件夹'		提交到本地
		5. $ git push -u origin master		更新到远程github项目中
	删除完毕

三、延迟运行、循环运行 → setTimeout() setInterval()

	1. setTimeout(()=>{},1000); 
	2. var prepare = setInterval(()=>{},1000);	clearInterval(prepare);

四、String《==》 XML

 	string2XML(string){
    let parser = new DOMParser();
        let xmlObject = parser.parseFromString(string, "text/xml");
        return xmlObject;
    },
    xml2String(xml){
        return (new XMLSerializer()).serializeToString(xml);
    },

五、CSS 计算函数

<div style="height: calc(100% - 100px);"></div>

六、CSS white-space属性影响换行

	定义如何处理空白

	 var imageContainer = document.createElement("div");
   	 imageContainer.id = "imageContainer";
     imageContainer.style.whiteSpace = "initial";

在这里插入图片描述

七、Vue 给对象添加新的属性 → this.$set()

如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

	1. event.children = children;
		
	2. this.$set(event,'children',children);	// 为vue变量添加属性，这句代码比上句更robust！

八、Vue v-bind的用法

	<!-- 内联字符串拼接 -->
	<img :src="'/path/to/images/' + fileName">
	
	<!-- class 绑定 -->
	<div :class="{ red: isRed }"></div>	//red这个class的存在取决与isRed的true或false
	<div :class="[classA, classB]"></div>
	<div :class="[classA, { classB: isB, classC: isC }]">
	
	<!-- style 绑定 -->
	<div :style="{ fontSize: size + 'px' }"></div>
	<div :style="[styleObjectA, styleObjectB]"></div>

九、js 数组去重

	Array.from(new Set(names))
	
	//lodash
	var newArray = _.uniq(array);	//一般数组
	var newArray = _.uniqBy(array,'geoId');		//对象数组

lodash入门

十、js 浅拷贝与深拷贝 lodash.js

	//html引入lodash	
	<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
	var graphRoot = _.cloneDeep(graph.model.root); //深拷贝

lodash入门

十一、js 数组交集、并集、补集 lodash.js

	var a = [];
	var b = [];
	var c = [];
	
	_.union(a, b, c);
	_.intersection(a, b, c);
	_.xor(a, b);

十二、类数组对象

	 // cells 类数组对象 没有长度的属性和数组的方法
	var cells = graph.model.cells;
	for(let i in cells){
       x = cells[i].geometry.x;
    }
    for(let i = 0; i<cells.length; i++){
    	//错 ×××××××××××
    }

大胖小呀

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
踩坑笔记（前端）

踩坑笔记一、iframe子页面与父页面通信二、Vue 给对象添加新的属性 → this.$set()三、延迟运行、循环运行 → setTimeout() setInterval()四、前端往后端传参的四种方式五、前端传数组，后端List\ 接收一、iframe子页面与父页面通信父页面获取子页面属性、方法 var iframeWindow=$("#ModelEditor")[0...
复制链接

扫一扫