目录 一.模块 二.命名空间 三.区别 一.模块 TypeScript 与ECMAScript 2015 一样,任何包含顶级 import 或者 export 的文件都被当成一个模块 相反地,如果一个文件不带有顶级的import或者export声明,那么它的内容被视为全局可见的 例如我们在在一个 TypeScript 工程下建立一个文件 1.ts,声明一个变量a,如下: const a = 1 然后在另一个文件同样声明一个变量a,这时候会出现错误信息 提示重复声明a变量,但是所处的空间是全局的
javascript技巧
TypeScript中命名空间与模块化详情
使用 JavaScript Promise 读取 Github 用户数据
代码如下: // Make a request for user.json fetch('/article/promise-chaining/user.json') // Load it as json .then(response => response.json()) // Make a request to GitHub .then(user => fetch(`https://api.github.com/users/${user.name}`)) // Load the respon
JavaScript实现简单的音乐播放器
本文实例为大家分享了JavaScript实现简单音乐播放器的具体代码,供大家参考,具体内容如下 主要功能:快进.快退.暂停.上下一首.禁音.鼠标控制音量.自动下一首.显示歌名 <html> <head> @*不提供音频*@ <meta name="viewport" content="width=device-width" /> <title>ceshi14</title> <
Axios+Spring Boot实现文件上传和下载
本文实例为大家分享了Axios+Spring Boot实现文件上传和下载的具体代码,供大家参考,具体内容如下 1.所用技术 前端:Vue + Axios 后端:Springboot + SpringMVC 2.单文件上传 后端代码 只需要使用MultipartFile类配合RequestBody注解即可 @PostMapping("your/path") public ResultData courseCoverUpload(@RequestBody MultipartFile fil
JS实现Tab栏切换的两种方式案例详解
面向过程的写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic
使用typescript类型实现ThreeSum
目录 前言 思路整理 实现TwoSum 实现减法 元祖中是否包含差值 递归元组 测试 实现ThreeSum 实现排序 实现ThreeSum 测试 前言 本文执行环境typescript,版本4.7.4 不使用typescript的计算能力,通过类型来实现ThreeSum 思路整理 实现ThreeSum之前我们先降低下难度,实现TwoSum,因为TwoSum可以作为ThreeSum的基础泛型 TwoSum需要准备什么呢? 递归元组,模拟for循环 减法,递归过程中求出差值 对每一项差值判断是否存在
webpack4升级到webpack5的实战经验总结
目录 前言 terser-webpack-plugin语法报错 fork-ts-checker-webpack-plugin语法报错 IgnorePlugin报错 devtool报错 webpack-dev-server publicPath报错 webpack-dev-server disableHostCheck报错 移除 node.js polyfill 导入json文件语法改变 打包报错unknown option ‘-p’ node版本过低 图片编译问题 打包文件命名问题 废弃了Mod
JavaScript 异步函数 Promisification 处理详情
前言: Promisification 是一个很长的词,表示一个编程范式的转变,即将接受回调的函数转换为一个返回类型为 Promise 的函数. 我们现实的开发项目中经常需要这种转换,因为许多函数和库都是基于回调的,但是 Promise 更方便,所以对它们进行 Promisification 处理是有意义的. 下面是一个简单的例子: function loadScript(src, callback) { let script = document.createElement('script')
JavaScript实现音乐播放器
本文实例为大家分享了vue + element ui实现锚点定位的具体代码,供大家参考,具体内容如下 效果 HTML代码 <!--播放器--> <div id="player"> <!--播放控件--> <div id="playerControl"> <div class="playerImg"> <img src=&quo
TypeScript 类型编程之索引类型递归去掉可选修饰
目录 前言 总结 前言 这两天东东遇到一个 TS 的问题,跑来问我. 问题是这样的: 这样一个 interface,想取出 userInfo 的类型来: interface Result{ data?: { userInfo?: { name: string; } } } 他是这样取的: type userInfo = Result['data']['userInfo']; 但是会报错: 说是 userInfo 不在这个联合类型上. 这很正常,因为可选索引的含义就是值和 undefined 的联
普通js文件里面如何访问vue实例this指针
目录 普通js文件里访问vue实例this指针 then使用函数无法访问vue实例化的this 问题 原因 解决 普通js文件里访问vue实例this指针 main.js 文件,暴露出vue实例 Vue.use(VueAxios) const vue = new Vue({ router, store, created: bootstrap, render: h => h(App) }).$mount('#app') export default vue js 文件中,使用实例
js如何去除数组中的empty undefined空项
目录 去除数组中的empty undefined空项 去掉数组中无效的值,比如null,undefined,empty 方法一 方法二 去除数组中的empty undefined空项 arr.filter(d=>d) 注意,0也会被去掉 去掉数组中无效的值,比如null,undefined,empty 方法一 直接使用filter就能搞定了 var arr=[1,2,null,undefined,9]; arr=arr.filter(Boolean); 结果arr=[1,2,9] 方法二 nul
JavaScript markdown 编辑器实现双屏同步滚动
目录 前言 百分比滚动 双屏同时渲染占用面积大的元素 赋上一个索引 踩坑 前言 由于一直在使用 markdown 编辑器写技术文章,所以对于编写体验很敏感.我发现各大社区的 markdown 编辑器基本都有同步滚动功能.只不过有些做得好,有些做得马马虎虎.出于好奇,我就打算自己亲自实现一下这个功能. 思考了一段时间,最后想出来了三种方案: 百分比滚动 双屏同时渲染占用面积大的元素 每一行的元素都赋上一个索引,根据索引来精确同步每一行的滚动高度 百分比滚动 假设现在正在滚动 a 屏,那 a 屏的滚
微信小程序模板与设置WXML实例讲解
目录 一.WXML模板语法--数据绑定 二.WXML模板语法--事件绑定 三.WXML模板语法--条件渲染 1.wx:if 2.结合<block>使用wx:if 3.hidden隐藏 四.WXML模板语法--列表渲染 1.wx:for遍历数组 2.手动指定索引和当前项的变量名* 3.wx:key的使用 一.WXML模板语法--数据绑定 数据绑定的基本原则 在 data 中定义数据 在页面对应的.js文件中,把数据定义到data对象中,如下图在home页面中的home.js中定义home页面的d
uniapp开发安卓App实现高德地图路线规划导航功能的全过程
目录 技术概述 技术详述 问题与解决 问题: 解决: 参考文献 总结 技术概述 描述这个技术是做什么的/什么情况下会使用到这个技术,学习该技术的原因,技术的难点在哪里.控制在50-100字内. uniapp的map组件中导航路线的展示.是uniapp开发app时引入地图导航的实现方式.技术难点在于实现map组件时对于属性以及函数的细节使用很容易出现一些奇怪的bug. 技术详述 描述你是如何实现和使用该技术的,要求配合代码和流程图详细描述.可以再细分多个点,分开描述各个部分. 首先是在地图开发者平
package.json与package-lock.json的区别及详细解释
目录 package.json package-lock.json 两者区别: package-lock.json的作用 补充:关于package-lock.json的详细解释 总结 package.json 记录当前项目所依赖模块的版本信息,更新模块时锁定模块的大版本号(版本号的第一位),不能锁定后面的小版本, package-lock.json package-lock.json 是在 `npm install`时候生成一份文件.记录了node_modules目录下所有模块(包)的名称.版本
JavaScript中FontFace对象的使用方式
目录 介绍 兼容性 创建FontFace对象 FontFace对象属性 FontFace对象方法 将创建的FontFace字体添加到页面中 通过字体Promise回调添加 通过Ajax获取字体文件后回调添加 页面中使用我们添加的字体 css事先定义好 通过js更改元素的字体 FontFace字面理解就是字体脸,也就是文字字体样式的意思,它是通过使用javascript来定义字体对象,并且引入客户端没有安装得字体文件,可以是者服务器端,或者是第三方字体库文件. 介绍 基本语法: concat fo
微信小程序宿主环境基础介绍
目录 一.什么是宿主环境 二.小程序的宿主环境 三.小程序宿主环境包含的内容 1.通信的主体和通信模型 2.小程序启动过程 3.小程序中组件的分类 4.小程序中的 API 一.什么是宿主环境 宿主环境(host environment)指的是程序运行所必须的依赖环境.例如:安卓版的微信App 是不能在iOS 环境下运行的,只能在Android环境下运行,所以,Android 是安卓软件的宿主环境,脱离了Android,安卓版的微信App的运行将毫无意义 二.小程序的宿主环境 小程序的宿主环境是微
使用JavaScript实现随机颜色生成器
目录 项目基本结构 1.颜色生成器的基本结构 2.使用 HTML 添加标题 3.创建用于颜色查看的显示器 4.创建一个框以查看颜色代码 5.创建生成器和复制按钮 6.使用 JavaScript 激活随机颜色生成器 完整源码下载 在线演示地址 项目基本结构 目录结构如下: 1.颜色生成器的基本结构 我使用了以下的 HTML 和 CSS 代码创建了这个颜色生成器的基本结构.在添加所有信息的页面上创建了一个小框,框的背景颜色为白色. <div class="container">
Typescript中extends关键字的基本使用
目录 前言 基本使用 泛型约束 条件类型与高阶类型 在高级类型中的应用 参考文献 总结 前言 extends关键字在TS编程中出现的频率挺高的,而且不同场景下代表的含义不一样,特此总结一下: 表示继承/拓展的含义 表示约束的含义 表示分配的含义 基本使用 extends是 ts 里一个很常见的关键字,同时也是 es6 里引入的一个新的关键字.在 js 里,extends一般和class一起使用,例如: 继承父类的方法和属性 class Animal { kind = 'animal' const