在过去的几个月内，我基于原生JS开发了一个简陋的有即时反馈功能的问卷，也遇到了不少问题，在项目即将结束之际，在这里对遇到的问题做一个总结，希望如果有后来人遇到了相似的问题，这篇文章可以起到一定的帮助。

首先，这些问题都是基于原生前端与JS的，不涉及诸如Bootstrap，Angular，VUE，Echarts等外部框架或工具，如果读者遇到的问题发生在外部框架内，这篇文章可能起不到任何帮助。

In the past few months, I have developed a simple questionnaire with instant feedback function based on native JS, and I have encountered many problems. As the project is about to end, here is a summary of the problems encountered, hope If someone later encountered a similar problem, this article can be helpful.

First of all, these problems are based on the native front-end and JS, and do not involve external frameworks or tools such as Bootstrap, Angular, VUE, Echarts, etc. If the readers encounter problems within the external framework, this article may not be of any help. .

问题描述与解决 Issue Statement & Solution

JS不自动执行 JS Not Auto-Run

在部分浏览器下，如下所示，于HTML头文件内引入的JS文件不会被自动执行，例如IE10和360浏览器，在该项目中导致了基于JS代码的HTML元素重定位失败。

In some browsers, as shown below, the JS file introduced in the HTML header file will not be automatically executed, such as IE10 and 360 browsers, which caused the relocation of HTML elements based on JS code to fail in this project.

<script type="text/javascript" src="script.js" defer="true"></script>

解决方案是在HTML文件中使用标签设置元信息，本质上就是告诉浏览器将IE内核替换为Edge加载网页，代码如下所示。

The solution is to use the tag to set meta information in the HTML file, which essentially tells the browser to replace the IE core with Edge to load the web page. The code is shown below.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

经测试修改后的网页可以在Chrome，Edge，IE10，360，FireFox，微信Windows客户端内置浏览器，iOS10+Safari浏览器内正确执行。在微信MacOS客户端内置浏览器与较早版本的iOS Safari浏览器上该方法依然无法解决此问题，如果一定要考虑使用这些不常用的浏览器的适配，引入新框架可能是必要的，也欢迎发现其他解决方案的读者留言。

After testing, the modified webpage can be executed correctly in Chrome, Edge, IE10, 360, FireFox, WeChat Windows client built-in browser, and iOS10+Safari browser. This method still cannot solve this problem on the built-in browser of WeChat MacOS client and the earlier version of iOS Safari browser. If you must consider the adaptation of these infrequently used browsers, it may be necessary to introduce a new framework. Readers who find other solutions are welcome to leave a message.

交互事件在不同浏览器上的适配 Adaptation of interactive events on different browsers

此处以该元素为例

Take this element as an example here

<input type="range" id="myRange10" max="1" min="0" step="0.5" value="0" onchange="rangeChange(10)">

这是一个基础的拖拽条，但是在iOS浏览器上拖拽操作不起效，只能使用点击。如果需要简单地解决这个问题，需要引入新框架。

This is a basic drag-and-drop bar, but the drag-and-drop operation on the iOS browser does not work, you can only use click. If you need to solve this problem simply, you need to introduce a new framework.

另一个例子是对元素的拖拽事件，在电脑浏览器上起用的代码如下：

Another example is the drag and drop event of the element. The code used on the computer browser is as follows:

dragCircle1.onmousedown = function(ev) {
	var ev = ev || event;
	var disX = ev.clientX - this.offsetLeft;
	var disY = ev.clientY - this.offsetTop;
	//if (dragCircle1.setCapture) {
	//	dragCircle1.setCapture();
	//}
	document.onmousemove = function(ev) {
		//console.log('moveCircle1');
		var ev = ev || event;
		var L = ev.clientX - disX;
		var T = ev.clientY - disY;
		var R = L + dragCircle1.offsetWidth;
		var B = T + dragCircle1.offsetHeight;

		// 此函数为更改最后位置的功能函数，故不列出 
		// This function is a function to change the last position, so it is not listed
		adsReturn = adsorption(L,R,T,B,boxWrap[0]); 
		dragCircle1.style.left = adsReturn[0] + 'px';
		dragCircle1.style.top = adsReturn[2] + 'px';
	};
	return false;
};

dragCircle1.onmouseup = function() {
	console.log('dragPosition1: '+dragPosition);
	document.onmousemove = null;
};

但是若要适配手机浏览器，则需要添加touch事件，如下所示，才可以使该功能在PC与移动端都正常工作。

But if you want to adapt the mobile browser, you need to add a touch event, as shown below, to make this function work normally on both the PC and the mobile terminal.

dragCircle2.ontouchstart = function(ev) {
	var ev = ev || event;
	var disX = ev.touches[0].clientX - this.offsetLeft;
	var disY = ev.touches[0].clientY - this.offsetTop;
	//if (dragCircle2.setCapture) {
	//	dragCircle2.setCapture();
	//}
	document.ontouchmove = function(ev) {
		//console.log('moveCircle2');
		var ev = ev || event;
		var L = ev.touches[0].clientX - disX;
		var T = ev.touches[0].clientY - disY;
		var R = L + dragCircle2.offsetWidth;
		var B = T + dragCircle2.offsetHeight;

		adsReturn = adsorption(L,R,T,B,boxWrap[0]);
		dragCircle2.style.left = adsReturn[0] + 'px';
		dragCircle2.style.top = adsReturn[2] + 'px';
	};
	return false;
};

dragCircle2.ontouchend = function() {
	console.log('dragPosition: '+dragPosition);
	document.ontouchmove = null;
};

后端读写本地文件 Backend local files I/O

在不同的文字编码/不同的文本编辑器中，换行符所占字符数不同，有可能为1或者2，在做字符处理时需要做出判断。例如在Winscp软件自带的文本编辑器中换行符占1个字符，然而在Windows记事本中则为2。

该项目中，因为需要服务器读取文本发送给前端作为反馈，所以遇到了该问题，文本读写统一格式与规范可以很好地规避这类冗余。

In different text encodings/different text editors, the number of characters occupied by the newline character is different, it may be 1 or 2, and you need to make a judgment when doing character processing. For example, the newline character occupies 1 character in the text editor that comes with Winscp software, but it is 2 in Windows Notepad.

In this project, because the server needs to read the text and send it to the front end as feedback, this problem was encountered. The uniform format and specification of text reading and writing can well avoid this kind of redundancy.

JS的矩阵计算 JS Matrix Calculation

在原生JS中，以array的形式构建尺寸相同的矩阵不要使用直接使用等于号声明，例如如下声明，否则在部分情况下一者的数据变化会导致另一者的共同变化。

In native JS, when constructing the same size matrix in the form of array, do not directly use the equal sign declaration, such as the following declaration, otherwise, in some cases, the data change of one will lead to the common change of the other.

Matrix2 =  Matrix1;

总结 Conclusion

使用原生JS编写逻辑在构建简单的网页时可以免于冗杂的配置环境工作，但是也会增加遇到适配问题的概率，需要根据具体的需求选择合适的解决方案。

Using native JS to write logic can avoid the complicated configuration environment when building simple web pages, but it will also increase the probability of encountering adaptation problems. You need to choose a suitable solution according to your specific needs.