js代码 | 易学教程

js 判断空值的方法

阅读更多关于 js 判断空值的方法

作为一个前端开发人员，会经常碰到js判断空值的场景。以前判断空值会写一大堆 && 与运算来剔除各种异常情况。后面发现一些人用 ! 非运算，然后又开始用它，再后面又发现一些人用 || 或运算与 '' 空值比较，又开始用它。用了这么久，也没发现什么问题。结果，这次在解析后端返回的json时，出现了一些问题，故此决定花时间自己做个相关的验证测试对比，方便做到心里有数。 js 判断空值的方法我目前用得比较多的就是： !exp 非运算； (exp||'')=='' 或运算与 '' 空值比较。当然，也可以写成这样 !(exp||'') 先上测试代码： 14:48:36.569 !undefined 14:48:36.582 true 14:48:39.772 !null 14:48:39.782 true 14:48:50.949 !{} 14:48:50.955 false 14:49:04.523 ![] 14:49:04.529 false 14:49:13.672 !'' 14:49:13.678 true 14:49:31.590 !false 14:49:31.595 true 14:49:41.325 !0 14:49:41.331 true 14:49:54.802 !'0' 14:49:54.810 false 14:54:32.478 (undefined||'')=='

js大文件分块上传断点续传demo

阅读更多关于 js大文件分块上传断点续传demo

文件夹上传：从前端到后端文件上传是 Web 开发肯定会碰到的问题，而文件夹上传则更加难缠。网上关于文件夹上传的资料多集中在前端，缺少对于后端的关注，然后讲某个后端框架文件上传的文章又不会涉及文件夹。今天研究了一下这个问题，在此记录。先说两个问题：是否所有后端框架都支持文件夹上传？是否所有浏览器都支持文件夹上传？第一个问题：YES，第二个问题：NO 只要后端框架对于表单的支持是完整的，那么必然支持文件夹上传。至于浏览器，截至目前，只有 Chrome 支持。如果需要其它的浏览器支持则需要借助于插件，比如泽优大文件上传控件： www.webuploader.net 关于WebUploader的功能说明：大文件上传续传支持超大文件上传(100G+)和续传，可以关闭浏览器，重启系统后仍然继续上传。开源提供ASP.NET,JSP,PHP示例和源代码，其中JSP提供MySQL,Oracle,SQL Server数据库的配置和示例代码。分片、并发分片与并发结合，将一个大文件分割成多块，并发上传，极大地提高大文件的上传速度。当网络问题导致传输错误时，只需要重传出错分片，而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。预览、压缩支持常用图片格式jpg,jpeg,gif,bmp,png预览与压缩，节省网络数据传输。解析jpeg中的meta信息

高德APP全链路源码依赖分析工程

阅读更多关于高德APP全链路源码依赖分析工程

一、背景高德 App 经过多年的发展，其代码量已达到数百万行级别，支撑了高德地图复杂的业务功能。但与此同时，随着团队的扩张和业务的复杂化，越来越碎片化的代码以及代码之间复杂的依赖关系带来诸多维护性问题，较为突出的问题包括：不敢轻易修改或下线对外暴露的接口或组件，因为不知道有什么地方对自己有依赖、会受到影响，于是代码变得臃肿，包大小也变得越来越大；模块在没有变动的情况下，发布到新版本的客户端时，需要全量回归测试整个功能，因为不知道所依赖的模块是否有变动；难以判断 Native 从业务实现转变为底层支撑的趋势是否合理，治理是否有效；这些问题已经达到了我们必须开始治理的程度了，而解决此类问题的关键在于需要了解代码间的依赖关系。二、高德 APP 平台架构为了消除一些疑惑，在讨论依赖分析的实现前，先简单说明一下高德 APP 的平台架构，以便对一些名词和场景有一些背景了解。高德 APP 从语言平台上可以分为 4 个部分，JS 层主要负责业务逻辑和 UI 框架；中间有 C++层做高性能渲染（主要是地图渲染），同时实现了一些切面 API，这样可以在双端只维护一套逻辑了；Android 和 iOS 层主要作为适配层，做一些操作系统接口的对接和双端差异化的（尽可能）抹平。这里的切面是指 JS 层与 Native/C++ 层的分界线，这里会实现一些切面 API，也就是 JS 层与

js 函数的节流和函数防抖

阅读更多关于 js 函数的节流和函数防抖

在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重产品的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。函数防抖函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下图，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。一起来实现个简单的debounce~ 防抖debounce代码： // 防抖 function debounce ( fn , wait ) { var timeout = null ; return function ( ) { if ( timeout !== null ) clearTimeout ( timeout ) ; timeout = setTimeout ( fn , wait ) ; } } // 处理函数 function handle ( ) { console . log ( Math . random ( ) ) ; } // 滚动事件 window . addEventListener ( 'scroll

浅谈js闭包

阅读更多关于浅谈js闭包

什么是闭包？闭包是指有权访另一个函数作用域中的变量的函数。学过作用域我们就会知道，凡是函数内部的函数，都可以值执行的前一刻，拿到父级函数的AO对象，也就是父级作用域，而这样的现象会引发什么样的问题呢，我今天就来谈一下。 unction a ( ) { var sum = 10 ; function b ( ) { sum ++ ; console . log ( sum ) } return b ; } var c = test ( ) ; for ( var i = 0 ; i < 10 ; i ++ ) { c ( ) ; // 打印11到20 } c执行就是函数b执行，函数b拿到了函数a的变量sum，并且在函数a执行完成以后，没有销毁a函数作用域，由c函数一直保留下来，实现累加器功能。在这个过程中c函数访问到了a函数作用域里的变量，我们就称之为闭包。这样的好处就是，js函数都是独立的，外界无法看到其内部的内容。但是运用闭包我们就可以访问到函数内部的变量了，同时因为作用域不会被销毁，变量可以一直保存在内存中。这样是有缺点的，js本身具有垃圾收集机制：找出不再使用的变量，释放其占用的内存。但是在形成闭包时，由于外部函数的作用域一直被保存在内部函数的作用域链中，不能被释放，就会造成内存泄漏。所谓内存泄漏其实就是本来应该被回收的内存没有被释放，造成你内存空间的减小

JS---案例：美女时钟

阅读更多关于 JS---案例：美女时钟

案例：美女时钟思路：打开页面就有图片按每秒1张的顺序轮换，用到了日期对象，获取小时和秒。封装到一个命名函数后，为了使页面打卡就有图片的轮换，先调用下f1，再设置setInterval <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <img src="" alt="" id="im" /> <script src="common.js"></script> <script> function f1() { //获取当前时间 var dt = new Date(); //获取小时 var hour = dt.getHours(); //获取秒 var second = dt.getSeconds(); hour = hour < 10 ? "0" + hour : hour; second = second < 10 ? "0" + second : second; my$("im").src = "meimei/" + hour + "_" + second + ".jpg"; } //打开页面先调用f1，这样打开来就有图片，不用等待 f1(); //页面加载哇麻痹后，过了1，秒才执行函数的代码 setInterval(f1,

如何运用最新的技术提升网页速度和性能----------引用

阅读更多关于如何运用最新的技术提升网页速度和性能----------引用

1. 性能设计在我们的项目中，我们每天都会和设计师和产品负责人讨论关于平衡美观和性能的问题。对于我们自己的网站，这样做是很简单的。简言之，我们认为好的用户体验从快速的内容传输开始，也就意味着性能 > 美观。好的内容、布局、图片和交互是吸引用户的重要因素。这每个因素都会影响页面的加载时间和终端用户体验。每一步我们都在探讨如何在获得好的用户体验和保证设计美感的同时，最小化对性能的影响。内容优先我们想要把核心内容尽快地呈现给用户，意味着我们要处理好基本的 HTML 和 CSS。每个页面都应该达到基本的目的：传递信息。JS、CSS、网页字体、图片、网站分析等优化都是位居于核心内容之下的。可控性给理想网站定义了标准后，我们总结出：要想达到预期效果，就要能对网站各方面的控制都游刃有余。我们选择构建自己的静态站点生成器，包括资源传输，并且由我们自己操控。静态站点生成器我们用 Node.js 实现了静态站点生成器。它是采用带有简短 JSON 页面描述标签的 Markdown 文件来生成整个网站结构和它所有的资源。为了包括特殊的页面脚本，也可以附带一个 HTML 文件。以下是一个简单化的描述标签和 markdown 文件，用于博客的发布，用它来生成真正的 HTML。 JSON 描述标签: markdown 文件: 图片传输平均一个 2406kb 的网页中 1535kb 是图片

【JS】预编译（图解）

阅读更多关于【JS】预编译（图解）

预编译是js的一个特色，也算是闭包之前最难的一个知识点。预编译有4句公式，而这4句公式只要背熟就能理解预编译。这4句公式放在本文最末尾。本节篇幅比较长，要理解的东西也比较多。在学习预编译之前要记住下面这句话： JS的声明和执行(赋值)是分开两步操作的，声明属于预编译环节。要了解预编译，就要先了解变量声明。变量声明又分为全局和局部。局部变量和作用域有关，稍后会讲到。全局变量声明要记住2句话 1、任何变量，如果未经声明就赋值，此变量就为全局变量所有。 2、一切声明的全局变量，都是window的属性。微信订阅号：Rabbit_svip 在Console可以看到输出的window里面，有变量a。如果输出 window.a ，那就直接输出了123了。由此可以解析上面所说的全局变量的两句话。在全局声明的变量，称为全局变量。全局变量的作用域就是全局。局部变量的作用域通常是在函数内部。全局作用域称为GO，全称：Global Object。临时作用域成为AO，全称：Activation Object。而GO又可以理解为window这个对象。GO和AO要和JS的预编译一起理解。【预编译公式】 1、创建GO/AO对象。 2、找形参和变量声明，将变量和形参名作为AO的属性名，值为undefined。 3、将实参值和形参统一。 4、在函数体里面找函数声明，值赋予函数体。看下面的代码

i18n,国际化翻译，excel与js互转

阅读更多关于 i18n,国际化翻译，excel与js互转

背景公司开发新产品时，要求适配多国语言，采用i18n国际化工具，但翻译字典（js的json）还是需要前端自己写的。字典最终需要转换成excel给专业人员翻译，翻译完成后再转换成js字典文件。如果手工转换，时间花费太多，因此萌生了使用代码转换的想法。工具地址：https://gusheng123.top:81 欢迎使用！来源： https://www.cnblogs.com/gsgs/p/12027984.html

js在IE和firefox中的不同

阅读更多关于 js在IE和firefox中的不同

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 1.firefox不能对innerText支持。 firefox支持innerHTML但却不支持innerText，它支持textContent来实现innerText，不过默认把多余的空格也保留了。如果不用textContent，如果字符串里面不包含HTML代码也可以用innerHTML代替。 2.禁止选取网页内容：在IE中一般用js：obj.onselectstart=function(){return false;} 而firefox用CSS:-moz-user-select:none 3.滤镜的支持(例：透明滤镜)： IE:filter：alpha(opacity=10); firefox：-moz-opacity:.10; 4.捕获事件： IE：obj.setCapture() 、obj.releaseCapture() Firefox： document.addEventListener("mousemove",mousemovefunction,true); document.removeEventListener("mousemove",mousemovefunction,true); 5.获取鼠标位置： IE:event.clientX、event.clientY firefox

订阅 js代码