沉末-CSDN博客

原创移动端H5直播/点播前端入坑简易手册

需求来了，只能H5因业务需要，我们要在微信中使用直播服务。因为业务较小，没有必要花很多钱去采购第三方一条龙服务。那么，我们采用直播推流使用腾讯云的服务，前端自己开发页面。原来考虑过使用微信小程序做，小程序本身提供直播流的组件，使用起来十分方便，且兼容性比较好。但是貌似公司没有相关的多媒体资质，审核无法通过。所以，只能使用H5来解决，页面展示为顶部播放器，下部为留言互动。直播流推流：通过视频/音频采集器与服务器建立连接将实时视频音频传输到服务器。拉流：通过客户端的播放器与服务器建立连接

2021-06-08 00:51:25 3487 1

原创源码学习之vue-router

使用回顾通常我们使用vue-router会单独创建一个js来写vue-router的逻辑，如 src/router/index.js，并在main.js中引入，例如。// src/router/index.jsimport Vue from 'vue'import Router from 'vue-router'// 启动路由Vue.use(Router)// 路由实例let router=new Router({ routes:[ { //

2021-05-13 00:52:46 655

原创常用的正则表达式

常用的正则表达式（1）匹配 16 进制颜色值var color = /#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})/g;（2）匹配日期，如 yyyy-mm-dd 格式var date = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/;（3）匹配 qq 号var qq = /^[1-9][0-9]{4,10}$/g;（4）手机号码正则var phone = /^1[34578]\d{9}$/g;

2020-08-18 22:37:50 177

原创 vue图片拖动排序实现

原理：现有一个图片的列表，拖动其中一个图片（触发dragstart），当拖动的图片移动到其他图片的位置（触发dragover），则将拖动的图片从原位置移动到该位置（触发dragend）。dragstart：当用户开始拖动一个元素或者一个选择文本的时候dragstart事件就会触发。dragover：当元素或者选择的文本被拖拽到一个有效的放置目标上时，触发dragover事件(每几百毫秒触发一次)。dragend：拖放事件在拖放操作结束时触发。（我们这里可以不用）（1）图片列表HTML...

2020-07-19 12:01:13 1312

原创发布订阅模式代码实现

发布订阅模式简介：订阅者（Subsciber）通过事件注册（Subscribe）将订阅事件提交到调度中心（Topic）,调度中心保存好订阅者的注册信息（回调函数），每当发布者（Publisher）发布事件的时候，通过事件发布（Publish）将发布的消息提交到调度中心，然后调度中心统一处理订阅者注册该事件的消息（执行注册时的回调函数）。show me the code: //创建...

2020-04-26 23:14:12 2383

原创手动实现字符串方法repeat（算法优化）

动动动手动动脑才有提高！分析： string.repeat(n) 方法会返回字符串重复值，如 let a = "abc".repeat(2)，返回的是 “abcabc”。常规方法：采用for循环，每次累加n次初始值，则获得最终结果。这种方法简单易懂，新手都会。缺点：时间复杂度为o(n)，有很大优化空间。优化思路：1. 每次累加前一次的结果，如第一次累加初始值得到 ‘abca...

2020-04-25 14:20:33 822

原创手动实现一个简单双向绑定——基于Object.defineProperty（vue2.X双向绑定原理）

原理分析：vue利用了Object.defineProperty()这个方法，重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。该方法详情参见MDN：https://developer.mozilla.org/zh-CN/docs/Web/J...

2020-04-25 13:43:04 230

原创手动实现Array.splice函数

参数分析：1. 第一个参数start：起始位置。数字类型2. 第二个参数num：截取长度。数字类型3. 第三个及更多参数：需要插入的元素。任意类型原理分析：1. 截取长度等于插入数据长度，获取截取的位置的元素，并修改原数组对应位置的数据2. 截取长度大于插入数据长度，截取后数组会变短，因此先获取截取的元素并插入新元素，然后数组未修改的数据往前挪动（从前往后），最后缩短数...

2020-04-25 13:20:25 419

原创手动实现基于vue构建移动触摸滑动组件——简易的swiper

在web或移动端开发中，有时候我们需要做一个可滚动显示的banner、轮播、滑动翻页显示内容等，常用的插件就数swiper。当然如果我不想因为一个小的页面去引入一个库，那么我们就手动写一个简易版的swiper。因为正做的项目是vue中需要用到滑动翻页效果，就用vue来实现一个垂直方向滑动翻页的效果咯！核心触摸事件：touchstart、touchmove和to...

2018-11-06 00:13:12 11580 1

原创 HTML5移动端学习/采坑笔记

1、移动端H5，iOS的safari自定义弹窗定位fixed不可用：问题情境：设定弹窗（遮罩层+内容）位置为poistion: fixed，页面内容多超过了屏幕高度，浏览器可以滚动的。在pc端，弹窗弹出时弹窗遮罩层覆盖了屏幕可见区域，显示正常，在安卓手机显示正常。问题来了，在iOS的safari上弹窗遮罩层会跑到div的顶部，也就是说在页面最后面进行弹窗，遮罩层看不到，将页面滑...

2018-05-10 09:45:25 567

原创前端学习之React篇-（1）最简React——Html直接引用React

当新手想看看React是什么样的，语法是什么样的，那么这里给出了一个最简单的使用React的方法——就是在html页面中直接引入React的js文件，然后在这个html中直接写react的js即可，简单、粗暴，但是也有很大的局限性。下面一步步介绍如何构建这样一个基于React的页面，最后给出完整的html示例代码。1、首先我创建一个最基本的html文件，然后引入Re...

2018-04-24 18:15:55 20110 4

原创前端面试/问题汇总

1. 三列布局知识：（1）圣杯布局：圣杯布局使用float、负margin和relative，不需要添加额外标签。.main元素设置padding，为两侧定宽元素留出位置。内容元素设置100%宽度，占据中间位置。而两侧定宽元素通过设置负margin和relative的偏移属性配合，到达相应位置。（缺点:并没有实现等高布局；使用了相对定位，扩展性不好）（2）双飞...

2018-04-16 15:26:50 585

chenjycm的博客