ES6-10 / TS
关注
分享
扫一扫
文章平均质量分 81
JavaScript / ES6-10 / TypeScript
MuGuiLin
Web Development。
展开
-
JS模块化，ESM模块规范的 导入、导出、引用、调用详解
在之前的JS模块化的各种规范 之 CJS、AMD、CMD、UMD、ESM文章中，介绍了关于JS模块化的各种规范的区别和简单使用。由于ESM模块规范也是 ECMAScript2015（ES6）中的规范标准，在日常的Web项目开发、小程序开发、APP开发等都是很常用的，所以本文重点将 ESM模块规范中的 导出、导入、导出、引用、调用等，结合日常开发需求做进一步的介绍。原创 2023-11-03 18:23:51 · 3400 阅读 · 0 评论 -
TypeScript配置、tsconfig.json配置文件，TypeScript使用详解
TS，TypeScript配置文件，tsconfig.json配置文件详解，TS编译、TS配置、tsc编译原创 2021-12-30 22:30:16 · 8824 阅读 · 0 评论 -
Web前端 Js文件上传类型限制(根据文件头信息判断)
前言在Web项目开发过程中，文件上传功能几乎必不可少的，很多时候，我们在进行文件上传时，尤其是向普通用户开放文件上传功能时，一般都需要对上传文件的格式进行一些限制，以防止不良用户、黑客等将带有病毒脚本文件上传到服务器中，常见文件格式限制如下。1、通过input标签的accept属性进行限制我们可以通过HTML5中的 input file 标签的accept属性，根据自己的需求，在选择上传文件的时候，指定可见的文件类型格式（默认任意类型 ）来进行限制。实例代码：<input type="fi原创 2021-12-29 00:39:33 · 10508 阅读 · 2 评论 -
Web前端 input file 文件上传优化
前言：在Web开发过程中，当项目做得越来越大时，文件上传功能也会被使用得非常多，之前项目经理反馈一个问题，就是当点击[选择上传文件]按扭时，弹出文件浏览框总是很慢，点击上传按扭后，要很久文件选择窗口才能弹出来，经过一翻折腾，后来发现是因为input file类型的标签中 没有限制指定可上传的文件类型 accept="*" (默认全部类型)。所以它会检索全部类型，从而导致在弹出文件选择窗口时慢的问题。然而，在HTML5中使用 input file控件 选择上传文件的时候，根据需要可限制指定的文件类型原创 2021-12-02 18:06:03 · 7883 阅读 · 0 评论 -
js面向对象 之 this 指向
px：绝对单位，页面按精确像素展示em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。(另外需注意chrome强制最小字体为12号，原创 2016-08-09 13:56:28 · 697 阅读 · 0 评论 -
JS模块化的各种规范 之 CJS、AMD、CMD、UMD、ESM
主要是现实代码可复用，拥有独立的作用域，防止全局污染，提高开发效率、降低维护成本等等。有了模块后，我们就可以根据相应的需求加载对应的模块，想要什么功能，就加载什么模块，npm就是最大的模块仓库。尽管如此，在早些时候，JS模块化规范还是出现了多种规范。幸运的是，现在及将来，趋势将是ES6中原生支持的ESM规范一统江湖。原创 2021-01-21 11:21:09 · 4508 阅读 · 0 评论 -
微信H5、移动端自定义弹窗事件穿透、底层页面滑动解决方案
前言之前有个项目是运行在移动端Web，和微信H5中，由于默认的弹窗UI不太好看，而且还不统一，所以页面需要自定义弹窗，添加icon、提示信息、操作按扭等样式。问题描述：如果在页面内容的高度超过了可视区就会出滚动条，这时触发示显弹窗就会出现页面的穿透事件，在弹窗上滑动时 或弹窗中还可以滑动时滑动，这时底层原页面也会跟着滑动，并且如果刚好点击到底层原页面的某个功能按扭也会触发其事件。解决办法：1、使用fastclick.js插件库，下载地址：https://www.bootc...原创 2020-05-12 15:52:51 · 1773 阅读 · 0 评论 -
JS打开新窗口 window.open() 隐藏菜单栏、工具栏，配置窗口大小、滚动条等，window.open()参数详解
项目中一些页面，在有的时候需要在一个新窗口中打开，又不想在新窗口显示太多可操作信息，如隐藏菜单栏、工具栏、配置窗口大小、滚动条等。先看看效果：1、【这是没隐藏菜单栏等界面】2、【这是隐藏菜单栏、工具栏等界面】注：经测试大部分都功能都可配置，但隐藏地址栏无效location=no，因为一些浏览器会强制新窗口始终渲染位置栏！原码实列：<...原创 2020-03-16 15:45:26 · 15689 阅读 · 2 评论 -
JS深拷贝、浅拷贝 和 使用场景 详解
当对某个数据（数组或对象）进行拷贝后，修改新数据（拷贝后的数据）里面第1层的数据是不会影响老数据（被拷贝的数据）的，但是如果还要第2层 或 更深层次的数据（复杂数据类型），它仍然是有关联的，如果修改了新数据，那么老数据也会被修改。表示传递的是变量所在的内存地址【内存地址：也就是所谓的指针】（就是当一个变量的值 赋给 另一个新变量的时候，新变量修改了值，那么原来变量的值也会被修改，因为它们是同一个内存地址，所以一改全改）比如：想对某个数组 或 对象的值进行修改，但是又想保留原来数组 或 对象的值不被修改！原创 2019-10-24 23:30:16 · 9139 阅读 · 1 评论 -
JS获取、设置CSS样式的方法（外部Style、外联CSS样式)
一般我们经常用js去设置或获取的都是元素的内联（行内）样式！例如：dom.style.width; //获取行内样式!dom.style.display = 'block'; //修改行内样式!那么 如何设置 或 获取 外部样式、嵌入样式呢？其是：在JS中有两种方法可以获取外部样式： 通过 getComputedStyle() 方法获取 通过...原创 2019-09-05 00:38:23 · 4538 阅读 · 0 评论 -
JS各种 数据类型的识别 与 筛选、提取
'use strict'; // 数据类型数组 let arr = ['100px', 'abc' - 6, [], -98765, 34, -2, 0, '300', , function () { alert(1); }, null, document, [], true, '200px' - 30, '23.45元', 5, Number('abc'), f...原创 2019-09-04 00:08:42 · 682 阅读 · 0 评论 -
JS判断QQ号是否合法、JS原生判断、正则判断
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...原创 2019-09-02 23:52:48 · 1944 阅读 · 0 评论 -
ES6语法 checkbox 复选框 单选 / 全选 / 删除
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...原创 2019-08-23 17:26:59 · 1466 阅读 · 0 评论 -
判断多个checkbox复选框至少选一个（提交时必须选择一个）
HTML代码：<h2>请选择您的爱好：</h2><form action="" method="post" id="form"> <label><input type="checkbox" name="hobby" value="上班" />上班</label> <label><i...原创 2016-07-18 11:17:05 · 31671 阅读 · 5 评论 -
H5送鲜花、礼物动画(解决：多个动画同时渲染卡顿问题)
前言： 由于项目需要，要做一个送礼物的动画，而在项目开发过程中碰到了一些坑，现在记录下来难免以后再次跳坑。如有不足之处还请多多指教。使用场景： 四个人斗地主，当你觉得哪个人打得好就可以送他一束鲜花，打行不好你可以向他扔鸡蛋，礼物分别是： 鲜花、平锅，点赞，砸蛋共有4种，这4种礼物的动画是用GIF图片做（可以用Canvas做）的，当前送礼物的人少的时候还好，但是在人多...原创 2019-01-03 16:13:25 · 3251 阅读 · 0 评论 -
点击动态创建表格、单行删除、全选、全部一键删除
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>js表格操作</title> <style type="text/css"> html, body { font...原创 2016-05-25 15:17:49 · 1508 阅读 · 0 评论 -
动态创建表格，更新、提交、循环获取表格中各种元素的数据 并转换为JSON，数组的数据格式。
HTML代码：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>js表格操作</title></head><body> <h1>JS操作表格</h1> <h...原创 2016-05-25 15:24:57 · 1203 阅读 · 0 评论 -
JS数组去重的各种方法
数组去重方法1： * 循环去重 arr.indexOf(); * 循环时判断新数组中是否存 当前被循环的这个元素，如果不存在就向新数组中添加，存在则什么都不做 let arr = ['A', 'C', 'A', 'B', 'E', 'C', 'F', 'B', 'D', 'A']; ...原创 2016-08-03 16:51:47 · 414 阅读 · 0 评论 -
js评分效果
js评分效果.box, .box ul { float: left; list-style: none; }.box li { width: 30px; height: 30px; display: inline-block; border: 1px solid gray; cursor: pointer; }.box .artcet { background: green; }原创 2016-08-11 16:04:19 · 586 阅读 · 0 评论 -
移动端H5页面 rem 自适应缩放JS代码
移动端网页 rem 自适应布局在各种屏幕大小手机上实现自适应效果，用rem单位，根据手机屏幕大小自动改变(包括横屏和竖屏时)：文字大小，图片大小，布局宽度大小等！;(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window...原创 2016-11-08 13:04:24 · 1321 阅读 · 0 评论 -
JavaScript中的Event事件对象详解
JavaScript事件【event】在JavaScript中对于事件来讲，首先，我们需要了解这样几个概念：事件、事件类型、事件绑定、事件监听、事件处理程序(事件侦听器)、事件对象(事件源)、事件流、事件冒泡、事件捕获、事件性能优化（事件委托[事件代理]、移除事件处理程序）、浏览器内核（常见的浏览器兼容问题）等。什么是事件(event)：注：其实事件一直都是存在的（不管有没有绑定...原创 2016-10-07 17:36:10 · 13773 阅读 · 2 评论 -
JS常用事件兼容性处理方法
跨浏览器事件处理程序【根据能力检测调用】原创 2016-10-07 17:44:35 · 1210 阅读 · 0 评论 -
Ajax文件上传带进度条、文件类型、大小、数量等获取、限制
$ajax 文件上传，带进度条，文件类型，文件大小。 Web前端代码效果图：使用说明：1、复制以下代码，创建一个新的html文件，粘贴对应的代码。2、引入jQuery文件，或 CDN地址。3、配置后端服务器上传地址。HTML代码：<!DOCTYPE html><html><head> <me...原创 2017-04-16 23:30:40 · 2304 阅读 · 0 评论 -
JS每隔1秒输出一组新的随机数
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS生成随机数</title> <style type="text/css"> h1 { text-align: center; } s...原创 2016-07-29 15:39:58 · 8039 阅读 · 0 评论 -
AutoCAD 2016 制图软件
利用js对象的特性去除数组和重复项原创 2016-04-04 16:31:16 · 2048 阅读 · 0 评论 -
JavaScript (mp3、mp4、jpg、doc、txt、rar)单个、多文件批量下载
JavaScript 多文件下载HTML5中 a 标签多了一个属性——download，用户点击链接浏览器会打开并显示该链接的内容，若在链接中加了 download 属性，点击该链接不会打开这个文件，而是直接下载。注意，是HTML5中的新特性，所以低版本浏览器不兼容！1、单个文件下载：以下载mp3为例：重点在于：要在a标签中加上download属性;<a do...原创 2018-03-17 16:18:06 · 8367 阅读 · 0 评论