1. 移动端输入框弹起影响布局(包括fixed布局情况)
2.safari中,有些元素点击事件不触发,或者300ms延迟(这里300ms延迟不使用第三方插件亦可解决)
3.不知道的JavaScript稀疏数组
4. JavaScript正则表达式
5.channel=DSGS(对就是它,电商公司专用!!)
6:background-position进行图片定位:
7. JavaScript横扫千军之垃圾回收机制
8. 使用解构存取和使用多属性对象(为什么?因为解构能减少临时引用属性)
一:移动端输入框弹起影响布局(包括fixed布局情况)
使用 window.scrollIntoViewIfNeeded
具体代码
window.addEventListener('resize',function(){
if(document.activeElement.tagName === "INPUT" || document.activeElement.tagName === "TEXTAREA"){
window.setTimeout(function(){ document.activeElement.scrollIntoViewIfNeeded(); },20)
}})
监听resize,当是input或者textarea的时候,触发此函数
(PS: ①、使用 === 而不是 == 的原因是, === 比 == 的速度要快;②、setTimeout最小执行毫秒数是20,而不是0,就算设置是0,也会有20ms的延迟。通常情况下,这段代码可满足。 详情查阅MDN)
二、safari中,有些元素点击事件不触发,或者300ms延迟(这里300ms延迟不使用第三方插件亦可解决)
①、元素点击事件不触发,原因是,低版本safari认为div、span等为非可点元素,可以添加css属性 cursor:pointer; 解决。或者使用button元素,记:
button元素 中<button value="1">文本</button> ,IE9以下浏览器,获取$("button").val()或者$("button").attr("value")获取到的是“文本”,而不是value=1这个value。 所以尽量保证value和button标签中间文字内容一样。另,在form中默认button元素为submit,所以修改type为button,还有一个type值是reset。(PS:记得清除button默认样式)。
②、300ms问题,不使用第三方click处理插件,使用css3语法 touch-action:manipuation (PS: 详情查阅MDN)
----------感谢赵丹老师热情分享------------------------------------------------------
三:不知道的JavaScript稀疏数组
稀疏数组就是包含从0开始的不连续索引的数组。
------------感谢严明坤老师热情分享-----------------------------------------------------
四:JS正则表达式
1. 校验基本日期格式
var reg1 = /^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$/; var reg2 = /^(^(\d{4}|\d{2})(\-|\/|\.)\d{1,2}\3\d{1,2}$)|(^\d{4}年\d{1,2}月\d{1,2}日$)$/;
2. 校验密码强度
密码的强度必须是包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间。
var reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/;
网友提供的解决检测特殊字符的方法
var reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{ 8,10}$/;
3. 校验中文
字符串仅能是中文。
var reg = /^[\\u4e00-\\u9fa5]{0,}$/;
4. 由数字、26个英文字母或下划线组成的字符串
var reg = /^\\w+$/;
5. 校验E-Mail 地址
同密码一样,下面是E-mail地址合规性的正则检查语句。
var reg = /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/;
6. 校验身份证号码
下面是身份证号码的正则校验。15 或 18位。
15位:
var reg = /^[1-9]\\d{7}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}$/;
18位:
var reg = /^[1-9]\\d{5}[1-9]\\d{3}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}([0-9]|X)$/;
7. 校验日期
“yyyy-mm-dd” 格式的日期校验,已考虑平闰年。
var reg = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/;
8. 校验金额
金额校验,精确到2位小数。
var reg = /^[0-9]+(.[0-9]{2})?$/;
9. 校验手机号
下面是国内 13、15、18开头的手机号正则表达式。(可根据目前国内收集号扩展前两位开头号码)
var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\\d{8}$/;
10. 判断IE的版本
IE目前还没被完全取代,很多页面还是需要做版本兼容,下面是IE版本检查的表达式。
var reg = /^.*MSIE [5-8](?:\\.[0-9]+)?(?!.*Trident\\\/[5-9]\\.0).*$/;
11. 校验IP-v4地址
var reg = /\\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\b/;
12. 校验IP-v6地址
var reg = /(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))/;
13. 检查URL的前缀
应用开发中很多时候需要区分请求是HTTPS还是HTTP,通过下面的表达式可以取出一个url的前缀然后再逻辑判断。
if (!s.match(/^[a-zA-Z]+:\/\//)) { s = 'http://' + s; }
14. 提取URL链接
下面的这个表达式可以筛选出一段文本中的URL。
var reg = /^(f|ht){1}(tp|tps):\/\/([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)?/;
15. 文件路径及扩展名校验
验证windows下文件路径和扩展名(下面的例子中为.txt文件)
var reg = /^([a-zA-Z]\\:|\\\\)\\\\([^\\]+\\)*[^\\/:*?"<>|]+\\.txt(l)?$/;
16. 提取Color Hex Codes
有时需要抽取网页中的颜色代码,可以使用下面的表达式。
var reg = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
17. 提取网页图片
假若你想提取网页中所有图片信息,可以利用下面的表达式。
var reg = /\\< *[img][^\\>]*[src] *= *[\\"\']{0,1}([^\\"\'\ >]*)/;
18. 提取页面超链接
提取html中的超链接。
var reg = /(<a\\s*(?!.*\\brel=)[^>]*)(href="https?:\/\/)((?!(?:(?:www\\.)?'.implode('|(?:www\\.)?', $follow_list).'))[^"]+)"((?!.*\\brel=)[^>]*)(?:[^>]*)>/;
19. 查找CSS属性
通过下面的表达式,可以搜索到相匹配的CSS属性。
var reg = /^\\s*[a-zA-Z\\-]+\\s*[:]{1}\\s[a-zA-Z0-9\\s.#]+[;]{1}/;
20. 抽取注释
如果你需要移除HMTL中的注释,可以使用如下的表达式。
var reg = /<!--(.*?)-->/;
21. 转换千分位分隔符
return total.toString().replace(/\B(?=(\d{3})+$)/g, ','); -----------感谢李楠老师热情分享-----------------------------------------------------------------------------------
五:channel=DSGS(对就是它,电商公司专用!!)
六:background-position进行图片定位:
left center
left bottomright topright centerright bottomcenter topcenter centercenter bottom
七:JS横扫千军之垃圾回收机制:
- 分配你所需要的内存
- 使用分配到的内存(读、写)
- 不需要时将其释放归还
JavaScript 具有自动垃圾收集机制(Garbage collected )。在编写 JS 时,不需要关心内存使用问题,所需内存分配以及无用内存的回收完全实现了自动管理。
内存泄漏
内存泄漏(memory leaks),什么情况下回导致内存泄漏?可以简单理解为有些代码本来要被回收的,但没有被回收,还一直占用着操作系统内存,从而越积越多,最终会导致内存泄漏(可以理解为,内存满了,就溢出了)。
管理内存
分配给web浏览器的可用内存数量通常要比分配给桌面应用程序少。这样做的目的主要是处于安全方面考虑,目的是防止运行JS 的网页耗尽全部系统内存而导致系统崩溃。内存限制问题不仅会影响给变量分配内存,同时还会影响调用栈以及在一个线程中能够同时执行的语句数量。
因此,确保占用最少的内存可以让页面获得更好的性能。而优化内存占用的最佳方式,就是为执行中的代码只保存必要的数据。一旦数据不再有用,最好通过将其值设置为 null 来释放其引用。这个方法叫做解除引用。这一做法适用于大多数的全局变量和全局对象的属性。局部变量会在他们离开执行环境时自动被解除引用。
解除一个值的引用并不意味着自动回收改值所占用的内存。解除引用的真正作用是让值脱离执行环境,以便垃圾收集器下次运行时将其回收。
标记清除
通常,垃圾收集器(garbage collector)在运行时候会给储存在内存中的所有变量都加上标记。然后,它会去掉环境中的变量以及被环境中的变量引用的变量的标记。而在此之后再被加上标记的变量将被视为准备删除的变量,原因是环境中的变量已经无法访问到这些变量了。最后,垃圾收集器完成内存清除的工作。
那标记清除具体是如何呢?有以下几种算法:
- 在JavaScript 中,全局变量(Global)和window 对象会一直存在,不会被垃圾收集器回收;
- 递归所用到的所有(包括变量和方法),都不会被回收;
- 所有没有被标记为“活跃(active)”的,都会被认为是垃圾,收集器释放会回收垃圾,并把内存还给操作系统。
例子:
例一:
var n = 123; // 给数值变量分配内存var s = "azerty"; // 给字符串分配内存 // 给对象及其包含的值分配内存 var o = { a: 1, b: null }; // 给函数(可调用的对象)分配内存 function f(a){ return a + 2; }
例二:
function foo(arg) { // 此处bar 是全局变量,window.bar 可以访问,所以也不会被回收 bar = "this is a hidden global variable"; } function foo() { // 此处this 代表 window this.variable = "potential accidental global"; }
例三:
var someResource = getData();setInterval(function() { var node = document.getElementById('Node'); if(node) { node.innerHTML = JSON.stringify(someResource)); } }, 1000); // 上面这段代码,定时器setInterval 和 someResource 一直存在,不会被回收。可以改成下面代码 var element = document.getElementById('button'); function onClick(event) { element.innerHtml = 'text'; } element.addEventListener('click', onClick); // 手动移除事件监听器和变量 element.removeEventListener('click', onClick); element.parentNode.removeChild(element);
例四:
var intervalId = null, params;function createChunks() { var div, foo, i, str; for (i = 0; i < 20; i++) { div = document.createElement("div"); str = new Array(1000000).join('x'); foo = { str: str, div: div }; div.foo = foo; } } function start() { if (intervalId) { return; } intervalId = setInterval(createChunks, 1000); } function stop() { if (intervalId) { // 清除定时器 clearInterval(intervalId); } // 清除变量 intervalId = null; }
在上面图片中,可以观察到,点击 start 按钮,内存和节点数暴增,当点击stop 时,垃圾收集器回收了这些定时器、变量等,从而释放了内存。
-------------感谢李忠国老师热情分享---------------------------------------------------------
八:使用解构存取和使用多属性对象(为什么?因为解构能减少临时引用属性)
// bad
function getFullName(user) {
const firstName = user.firstName;
const lastName = user.lastName;
return `${firstName} ${lastName}`;
}
// good
function getFullName(obj) {
const { firstName, lastName } = obj;
return `${firstName} ${lastName}`;
}
// best
function getFullName({ firstName, lastName }) {
return `${firstName} ${lastName}`;
}
-------------------感谢孙爱详老师的热情分享--------------------------------------------------------------------------