javascript高级知识二

1.加解密

(1) 有时候在进行等保测试的时候，一些关键的系统，会要求你在进行密码传输的时候，也要进行密码加密。

参考文章:
1. JavaScript的RSA加密库(cryptico、Node-rsa、Crypto、jsrsasign、JSEncrypt)
2. 前端 crypto-js aes 加解密
3. 请问如何实现用javascript实现rsa加解密？
4. 前端AES的加密和解密
5. 使用 Crypto.js AES加密 CDN引用方式使用CDN的方式引入了aes加密的多个文件，其实并不是一个文件就可以搞定的。
6. JS简单的加密解密方法这是使用异或操作进行的简单的加密
7. XOR 加密简介
8. javascript 异或运算符实现简单的密码加密功能也是使用异或进行了编码
9. 加密基础知识四前端JS加密传输 crypto-js
10. 前端有对用户密码进行加密传输吗？ 1.前端也是有对密码进行加密的！不管是注册还是登录用户，都会对密码进行加密然后再进行传输。2.加密一般都选择不可逆算法，如 md5，sha 等，这样即使在传输过程中这个包被别人抓到了，也无法根据那个字符串解析出相应的密码。3.说到这个加密，可能这也是现在忘记密码操作时，不会给你发之前密码的原因，毕竟没法解析。4.所以要提高安全系数的话，最好前后端都加密，毕竟大平台都这么做了。

(2) 3DES
3DES、DESede、Triple-DES、DES-EDE名称相互都是别名

参考文章:
1. 3DES(DESede、Triple-DES、DES-EDE) 加解密 JAVA 3DES、DESede、Triple-DES、DES-EDE名称相互都是别名
2. Java实现3DES工具类（包含CBC和ECB）
3. DES，3DES,AES这三种对称密钥的区别与联系
4. DESede实现

2.手机端强制竖屏

关于这个问题，其实我查了很多资料，都没有明确的介绍，也就说明这个需求，其实不是非常的迫切。

判断手机方向

(1) CSS判断横屏竖屏主要使用媒体查询;2

@media screen and (orientation: portrait) {  /*竖屏 css*/}
@media screen and (orientation: landscape) {  /*横屏 css*/
    .main{ /*强制main这个div旋转90度*/
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}

(2) JS判断横屏竖屏,主要使用的是 onorientationchange 事件

//判断手机横竖屏状态：
window.addEventListener("onorientationchange" in window ? "orientationchange": "resize",function() { 
    if(window.orientation === 180 || window.orientation === 0) {           
        alert('竖屏状态！');       
    }
    if(window.orientation === 90 || window.orientation === -90 ){            
        alert('横屏状态！');
        // transform 强制横屏  
 4     var conW = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;  
 5     var conH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;  
 6     // transform: rotate(90deg); width: 667px; height: 375px;transform-origin:28% 50%;  
 7     //var iosTopHe = 0;//若有其他样式判断，写于此  
 8       
 9     $(className).css({  
10         "transform":"rotate(90deg) translate("+((conH-conW)/2)+"px,"+((conH-conW)/2)+"px)",  
11         "width":conH+"px",  
12         "height":conW+"px",  
13         //"margin-top":iosTopHe+"px",  
14         // "border-left":iosTopHe+"px solid #000",  
15         "transform-origin":"center center",  
16         "-webkit-transform-origin": "center center"  
17     });       
    }    
}, false);
//移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。

屏幕强制竖屏

(1) 使用ScreenOrientation API，但是这个API还在草案阶段(2019年1月29日)，很多浏览器并不支持，当然，最新的手机Chrome和Firefox浏览器倒是支持的。

(2) 使用特定浏览器的meta标签,有些浏览器自己实现了非标准的接口，通过设定meta标签内容，可以强制使用某种横屏方式。比如手机 UC浏览器和 QQ浏览器,当然了其他的浏览器可能就会忽略这个标签。

<!--UC浏览器强制竖屏-->
<meta name="screen-orientation" content="portrait">
<!--QQ浏览器强制竖屏-->
<meta name="x5-orientation" content="portrait">

参考文章:
1. HTML5 移动端强制竖屏，页面旋转问题记录。
2. JS控制页面手机端强制横屏
3. js开发webapp如何禁止手机横屏
4. 移动端web 有没有属性禁止横屏 html5没有强制横屏的API，所以这个需求是实现不了的。
5. HTML5: Screen Orientation API Uses Javascript to Rotate the Screen 这里也有方法说明：screen.orientation.lock(“natural”); In the above example, it’s set to the natural orientation of the device.
6. ScreenOrientation interface 这里提到了两个方法：lock() method: Lock screen to a specific orientation;unlock() method: Unlock screen to default orientation
7. 屏幕方向读取与锁定：Screen Orientation API Screen Orientation API 为 Web 应用提供了读取设备当前屏幕方向、旋转角度、锁定旋转方向、获取方向改变事件的能力。使得特定应用在屏幕方向方面增强用户体验，如视频和游戏。该标准目前处于工作组草案状态，最近一个修改为 1 月 29 日。
8. Cordova屏幕方向插件 Cordova插件以iOS，Android和Windows-uwp的通用方式设置/锁定屏幕方向。此插件基于Screen Orientation API，因此api与当前规范匹配。
9. html5如何禁止横屏特定浏览器的行为:UC浏览器强制全屏、QQ浏览器强制全屏、UC浏览器应用模式、QQ浏览器应用模式
10. QQ浏览器应用模式有时候要不要旋转屏幕，是用户的手机设置说了算。建议 viewport 的宽度直接固定吧，旋转了也一样,看到国外的解决方式是90度翻转外容器~~~因为jq动画的关系所以就不行了,没有好办法。因为旋转后浏览器的工具栏位置也会变化，导致页面变窄。所以即使你通过各种手段把内容旋转缩放回来了看起来也会很奇怪。
所以如果想禁用横屏只有弹出一个浮动层提示用户转回来再继续使用。。
11. css3 移动端页面全屏旋转，横屏显示使用js调整了横屏时的样式，这个倒是挺有借鉴意义的。
12. 移动端竖屏（转）

3.GB2312编码

后端写的嵌入式，不支持 utf-8 编码，所以需要前端进行编码后，然后传给后端，然后进行解析，这可就苦了我了。

参考文章：
1. 原来浏览器原生支持JS Base64编码解码 base64编码
2. js对中文进行gb2312/gbk编码解码
3. js中用gb2312编码解码
4. encodeToGb2312 源码位置
5. js 将汉字转换为GB2312格式的编码这个也是用了 encodeToGb2312.js

4.原生dom操作

1.insertAdjacentHTML

将一段html文本，插入到元素的指定位置上面。

【问题】
我遇到的比较奇怪的问题，就是，使用这个语法插入的html，无法被querySelector查询到。

参考文章:
1. Element.insertAdjacentHTML()
2. insertAdjacentHTML()方法的使用

5.移动端软键盘

点击输入框，弹出软键盘时，安卓机下小键盘会侵占屏幕空间，使内容上移导致内容错位。这个问题，在使用px像素进行定位的时候，不会出现问题，但是在使用百分比进行定位的时候，就会出现问题了。

参考文章:
1. 移动端input“输入框”常见问题及解决方法
2. 常见的移动端H5页面开发遇到的坑和解决办法
3. 针对移动端软键盘调用后，fixed定位失效部分解决方案 js获取屏幕高度，并把外部容器的高度设置为屏幕高度，给需要fixed的dom设置position:absolute。当点击输入框的时候弹出然键盘，会触发屏幕变化，一旦屏幕变小时将原来的fixed样式设置成其他的标准的流式布局。屏幕回到原来的大小时就恢复原来的fixed样式
4. HTML 在手机软键盘弹出顶起影响页面布局 H5在手机端，尤其是安卓手机，如果用了定位或者用了百分比的元素，很容易在键盘弹起后引起页面错乱，其中分2种情况

6.关闭窗口事件

window.onbeforeunload= function (e) {				
	 e = e || window.event;			 
	 if (e) {
        // 显示确认对话框
        e.preventDefault();
	    e.returnValue = '关闭提示';
     }
	 // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
	 return '关闭提示';
};

【注意点】
1、在IE中这个事件你只要去关闭窗口就触发。
2、谷歌、火狐等在F12调试模式中也会起效
3、谷歌、火狐、QQ等浏览器中被优化了，需要用户在页面有过任何操作才会出现提示！（坑）。

参考文章：
1. 巨坑！监听浏览器窗口关闭onbeforeunload不起作用（脱坑了啊！！）这里有避坑指南
2. Window: beforeunload event
3. 解决移动端无法监听页面刷新或关闭（beforeunload无效）问题
4. 在页面离开前提醒你的beforeunload事件_前端队长Daotin-程序员宅基地 1.为避免意外弹出窗口，除非页面已交互（鼠标点击了此页面），否则在刷新或者关闭的时候，不会触发beforeunload事件。2.确认对话框不可以显示自定义字符串。某些浏览器以前可以显示用户自定义消息。但是，此方法已被弃用，并且在大多数浏览器中不再支持。

7.获取textarea的值

本来这个问题不能算是问题，但是确实出现了问题。问题就是我使用 innerHTML 无法获取textarea中的值。

【解决方法】
就是使用value获取输入的值.

参考文章:
1. 使用JavaScript获取textare输入值的问题
2. innerHTML无法获取用户输入的文本值
3. js获取textarea中的值这里就是使用了：document.getElementById( ‘reviewww’ ).innerHTML 获取的值，但是显然不合适.

8.拖动

全局属性 draggable 是一个枚举类型的属性，用于标识元素是否允许使用拖放操作API (en-US) 拖动。它的取值如下：

true，表示元素可以被拖动
false，表示元素不可以被拖动
如果该属性没有设值，则默认值 为 auto ，表示使用浏览器定义的默认行为。默认情况下，只有已选中的文本、图片、链接可以拖动。对其它的元素来说，必须按拖动机制的顺序设置 ondragstart 事件才能正常工作。
我自己测试的时候，在img元素上设置 draggable=”false” 图片还是可以拖动，解决方法就是设置 ondragstart 函数，根据返回的值，决定是否可以拖动。
1
<img ondragstart="return false" />

vue的使用方法
1
2
3
4
5
<div class="img-type" v-for="(item,index) in nodetype" :key="item.name" data-groupid="pipeditor" :data-groupindex="-1" 
:data-childindex="index">
    <img :src=" baseUrl + '/img/simulation/'+item.img" data-groupid="pipeditor" :data-groupindex="-1" @dragstart="e=>isDraggable(item,e)"
    :data-childindex="index"/>
</div>

使用箭头函数，可以同时具有原始的event参数，还可以加入自定义的参数。
1
2
3
4
5
6
7
8
9
// 元素是否可以拖动
,isDraggable(item,evt){
    if(item.type>=10){
        evt.preventDefault();
        return false;
    }
    return true;

}

参考文章:
1.FireFox禁止鼠标拖拽图片
2.draggable
3.实现img图片不能被拖动的两种简单方法 这两种方法都不合适
4.如何使用CSS禁止元素拖拽？ 主要有两种方法：user-drag禁止拖拽，HTML draggable属性
9.禁止输入非数字
参考文章:
1.input 框禁止输入非数字和小数点以外的字符（两种思路和方法） keydown事件和阻止默认事件不能阻止中文输入
                        3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。
                        4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。
                        5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。
                        6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。