为了账号安全,请及时绑定邮箱和手机立即绑定

【金秋打卡】第25天 webpack 打包工作

课程名称:TypeScript封装播放器组件 课程章节:第5章 弹出层中的Video播放器组件开发 5-10 主讲老师:西门老舅 课程内容: 今天学习的内容是webpack的打包和一些生产环境下的配置。 项目完成后需要进行打包和发布。 项目在开发阶段和生产阶段的构建规则是不同的,比如开发时为了更方便的调试,通常不会压缩代码,也不会进行分包等优化。而在生产阶段通常会压缩代码来减小打包后的文件体积。可以通过声明一个环境变量 NODE_ENV 来区分环境,同时 webpack 也提供了 mode 参数来指定

75浏览
0推荐
0评论

【金秋打卡】第24天 拖拽进度和音量条控制

课程名称:TypeScript封装播放器组件 课程章节:第5章 弹出层中的Video播放器组件开发 5.8 课程讲师:西门老舅 课程内容: 今天学习的内容是实现进度条的拖拽播放,以及音量调节。 拖拽播放 核心是使用原生 JS 模拟拖拽事件。 进度条有一个小球,当鼠标点击它时,记录下此刻的位置,然后监听鼠标的移动,当鼠标松开时,记录下此刻小球的位置。通过这两个位置,得出滑块移动的距离,再根据占完整进度条的比例,计算出视频的实时时间,通过前面学过的 vide0.currentTime 进行设置。

108浏览
0推荐
0评论

【金秋打卡】第23天 进度条的实现

课程名称:TypeScript封装播放器组件 课程章节:第5章 弹出层中的Video播放器组件开发 5.7 课程讲师:西门老舅 课程内容: 今天学习的内容是播放进度的联动,随着视频播放进度条自动更新进度。 在 playing 方法中,通过 video.currentTime 可以获取最新的进度,除以 video.duration 就能计算出此时播放进度的比例,然后动态修改进度条的width 即可。 同时通过 video.buffered.end(0) 可以获取视频缓存节点的时间,它永远大于 currentTime,可以用它来计算缓存的进度。 首先在

75浏览
0推荐
0评论

【金秋打卡】第22天 播放时长控制和全屏播放

课程名称:TypeScript封装播放器组件 课程章节:第5章 弹出层中的Video播放器组件开发 5.5 5.6 课程讲师:西门老舅 课程内容: 今天完成的功能是播放器组件的时长显示功能,当前时长和总时长。 总时长 需要在整个视频加载完毕之后,通过video.duration 属性来获得总时长,默认它是以秒为单位的,所以在使用之前先进行单位的换算。 function formateTime(n: number): string { // let hour = Math.floor(n / 3600) let minute = Math.floor(n / 60) let second =

103浏览
0推荐
0评论

【金秋打卡】第21天 播放器组件的样式和播放暂停功能的实现

课程名称:TypeScript封装播放器组件 课程章节:第5章 弹出层中的Video播放器组件开发 5-3 5.4 课程讲师:西门老舅 课程内容: 今天学习的内容是实现播放器组件的播放与暂停功能。 播放器组件样式 这一块要实现控制条的样式,需要注意的点有: 层叠性,保证播放态的进度条的层级高,滑块的层级高 滑块的起始位置,需要向前移动,保证滑块的中心位于起始位置 .video { position: relative; overflow: hidden; } .video .iconfont { font-size: 20px; color: white; cur

71浏览
0推荐
0评论

【金秋打卡】第20天 实现视频播放器组件

课程名称:TypeScript封装播放器组件 课程章节:第5章 弹出层中的Video播放器组件开发 5-1 5-2 课程讲师:西门老舅 课程内容: 今天学习的内容是实现视频播放器组件。 视频组件框架搭建 在 src/components 目录下新建 Video目录,存放视频组件的内容: src/components |- Video |- index.ts # 组件结构 |- index.css # 组件样式 使用接口定义播放器组件的构造参数类型: interface IVideo { // 视频播放地址 url: string, // 播放器组件挂载的父节点 elm: st

75浏览
0推荐
0评论

【金秋打卡】第19天 弹层组件关闭处理

课程名称:TypeScript封装播放器组件 课程章节: 第4章 Popup弹层组件开发 4-5 主讲老师:西门老舅 课程内容: 今天学习的内容是 Popup 弹层组件的交互(关闭)及弹层容器回调实现。 关闭弹层 给关闭图标添加事件监听,点击关闭图标后销毁弹层组件和遮罩层。 需要注意 this 指向的问题,事件的处理函数使用箭头函数,这样函数中的 this 就指向了当前所在的上下文,也就是 Popup 组件实例。 handle() { let popupCloseElm = this.tempContainer.querySelector('.icon-clo

58浏览
0推荐
0评论

【金秋打卡】第18天 Popup组件和遮罩层实现

课程名称:TypeScript封装播放器组件 课程章节: 第4章 Popup弹层组件开发 4.3 4.4 主讲老师:西门老舅 课程内容: 今天学习的内容是实现 Popup 弹层组件和遮罩层。 弹层组件 模板 通过 innerHTML 设置弹层的模板,然后将模板挂载到页面中,再根据配置对象,设置弹层组件的位置,默认是垂直水平居中对齐。 template() { this.tempContainer = document.createElement('div') this.tempContainer.className = 'popup'...

103浏览
0推荐
0评论

【金秋打卡】第17天 样式模块化

课程名称:TypeScript封装播放器组件 课程章节: 第4章 4-2 模块化CSS方式 课程讲师:西门老舅 课程内容: 今天学习的内容是组件样式的模块化。 组件的模块化 组件应该是一个独立的,里面不受外面影响,外面也不受组件内部影响的结构。所以需要针对组件的 html结构、css样式和 js 逻辑进行一定处理,来实现模块化。 Webpack 工具提供了这样的功能,通过简单的配置就能生效。 { test: /\.css$/, use: ['style-loader', { loader: 'css-loader', options: { modules: tr

67浏览
0推荐
0评论

【金秋打卡】第16天 实现Popup弹层组件结构

课程名称:TypeScript封装播放器组件 课程章节: 第4章 4-1 组件框架搭建 课程讲师:西门老舅 课程内容: 今天学习的内容是实现 Popup组件的框架。 组件基本结构 根据前面的需求分析,弹层组件分为两部分: 结构、功能:popup.ts 样式:popup.css 在 src/components 目录下新建 Popup 目录,存放弹层组件的内容: src/components |- Popup |- index.ts |- index.css 使用面向对象的思想来实现组件,使用一个函数对外暴露: class Popup { } function popup() {

91浏览
0推荐
0评论

【金秋打卡】第15天 视频列表页实现

课程名称:TypeScript封装播放器组件 课程章节: 第3章 3.2 3.2 主讲老师:西门老舅 课程内容: 今天学习的内容是视频列表结构和样式的开发。 列表结构 在 index.html 中编写视频列表结构: <div id="list"> <ul class="list-wrap"> <li> <div> <img...

57浏览
0推荐
0评论

【金秋打卡】第14天 弹层播放器需求分析

课程名称:TypeScript封装播放器组件 课程章节: 第3章 需求分析 3.1弹层播放器需求分析 主讲老师:西门老舅 课程内容: 今天学习的内容是弹层播放器的需求分析。 需求分析 如何获取列表数据 服务端渲染:页面交由服务端渲染生成,填充数据 AJAX:页面由客户端渲染,通过发送 AJAX 请求列表数据 弹层是否和视频播放器做成一个整体 不需要,弹层还有其他使用场景,遵循单一职责原则,拆分,解耦合,复用 播放器也有其他单独使用的场景 弹层组件结构划分: 结构、功能:popup.ts

52浏览
0推荐
0评论

【金秋打卡】第13天 webpack 处理 Typescript

课程名称:TypeScript封装播放器组件 课程章节: 第2章 Webpack搭建项目环境 2.5 主讲老师:西门老舅 课程内容: 今天学习的内容是在 webpack 中编译打包 TypeScript。 处理 TS 文件 安装依赖: $ npm install -D typescript ts-loader typescript:编译 .ts 为 .js ts-loader:webpack 使用它,调用 typescript 模块来处理 .ts 文件 编译 .ts 时需要有一个配置文件来指导,所以使用 tsc 命令来初始化一个配置文件: npx tsc --init 下面是默认生成的 t

62浏览
0推荐
0评论

【金秋打卡】第12天 webpack-dev-server 和字体图标的使用

课程名称:TypeScript封装播放器组件 课程章节: 第2章 Webpack搭建项目环境 2.3 2.4 主讲老师:西门老舅 课程内容: 今天学习的内容是 webpack-dev-server 和字体图标的使用。 webpack-dev-server 的使用 webpack-dev-server 底层使用了 express,可以在开发阶段提供一个开发服务器,方便调试,可以自动刷新浏览器。它还会把打包的文件放到内存中,比在硬盘中更能提高访问的速度,大大提高开发效率。 安装依赖: npm instlal -D webpack-dev-server 进行配置: module.ex

68浏览
0推荐
0评论

【金秋打卡】第11天 搭建 webpack 开发环境

课程名称:TypeScript封装播放器组件 课程章节: 第2章 Webpack搭建项目环境 2.1 2.2 主讲老师:西门老舅 课程内容: 今天学习的内容是使用 webpack 搭建 TypeScript 的开发环境。 首先计算机要安装好 Node 环境。在安装 Node 时会一并安装上 npm 包管理工具。 node -V npm -V 新建一个项目目录,并初始化项目: mkdir mi-project cd mi-project npm init -y 安装 webpack 工具: npm install -D webpack webpack-cli 新建 webpack 的配置文件,它使

88浏览
0推荐
0评论

【金秋打卡】第10天 Rust 模块化编程

课程名称:领略Rust之美,挑战双高语言 课程章节: 第5章 Rust中使用模块组织代码 5-2 Rust中的模块化编程 课程讲师:叶枭 课程内容: 今天学习的内容是 Rust 中的模块化系统有关的内容。 对于模块化编程大家都不会陌生,就是将一个完整的系统拆分成一个个独立的功能模块,实现高内聚,低耦合的开发思想,方便维护和提高复用性。 Rust 项目的代码组织包含以下三个基本概念,它们构成了 Rust 的模块系统(module system): Package:包,一个用于构建、测试并分享单元包的 Car

56浏览
0推荐
0评论

【金秋打卡】第9天 Rust 发散函数

课程名称:领略Rust之美,挑战双高语言 课程章节: 第4章 Rust 流程控制 4-12 发散函数 课程讲师:叶枭 课程内容: 今天学习的内容是 Rust 中的发散函数。 发散函数 发散函数永远不会被返回,其返回值被标记为 !,这是一个空类型: fn foo() ->!{ panic!("这个函数调用永远没有返回"); } panic! 宏会终止程序的执行,所以该函数没有返回。 发散函数和空返回值函数不同,后者可以被返回: fn bar() { () } fn main() { let a:() = bar(); println!("在此可以

39浏览
0推荐
0评论

【金秋打卡】第8天 Rust 高阶函数

课程名称:领略Rust之美,挑战双高语言 课程章节: 第4章 Rust 流程控制 4-11 高阶函数 课程讲师:叶枭 课程内容: 今天学习的内容是 Rust 中的高阶函数。 高阶函数 高阶函数属于函数式编程中的一个非常重要的概念。 在数学和计算机科学中,高级函数是至少满足下列一个条件之一的函数: 接受一个或者多个函数作为输入 输出一个函数 说白了就是一个函数的参数是函数,或者返回值是函数,它就是高阶函数。 在数学中它们也叫算子(运算符)或泛函。 Rust 具备函数式编程的特性

40浏览
0推荐
0评论

【金秋打卡】第7天 Rust 函数

课程名称:领略Rust之美,挑战双高语言 课程章节: 第4章 Rust 流程控制 4-10 函数与方法 课程讲师:叶枭 课程内容: 今天学习的内容是 Rust 中的函数。 函数 函数,和 if 条件控制,while、loop、for 循环控制,在底层都是使用跳转实现的,所以函数也属于流程控制的一种。可以这样理解,当函数执行时,程序的执行主体就进入了函数内部,当函数执行完毕,则又返还回去,这就是函数的流程控制。 Rust 中使用函数和 Typescript 比较像,需要关注参数的类型和返回值的类型,

78浏览
0推荐
0评论

【金秋打卡】第6天 Rust if let 和 while let 匹配

课程名称:领略Rust之美,挑战双高语言 课程章节: 第4章 Rust 流程控制 4-8 if_let语法糖 4-9 while_let语法糖 课程讲师:叶枭 课程内容: 今天学习的内容是 Rust 中的 if-let 和 while-let 语法糖。 if let 是模式匹配的语法糖,如果只需要匹配一种模式,就可以使用它,而不用使用 match。 下面分别使用 match 和 if let 来实现一个功能,只打印枚举中的字母A: enum Alphabet { A, B, } fn main() { let letter = Alphabet::A; match letter { A

44浏览
0推荐
0评论
首页上一页1234下一页尾页
意见反馈 帮助中心 APP下载
官方微信