随笔分类 -  大前端

JavaScript、HTML、CSS
摘要:提到HTML标签,我们会非常熟悉,开发中经常使用。但我们往往关注更多的是页面渲染效果及交互逻辑,也就是对用户可见可操作的部分,比如表单、菜单栏、列表、图文等。其实还有一些非常重要却容易忽视的标签,这些标签大多数用在页面头部head标签内,虽然对用户不可见,但如果在某些场景下,比如交互实现、性能优化、 阅读全文
posted @ 2020-06-28 23:24 谈晓鸣 阅读(877) 评论(4) 推荐(4) 编辑
摘要:Vuex和localStorage、sesstionStorage的区别,应用场景。vuex的State、Getter、Mutation、Action、Module等技术知识点掌握。 阅读全文
posted @ 2020-02-23 23:09 谈晓鸣 阅读(3823) 评论(0) 推荐(2) 编辑
摘要:一、思路分析和效果图 用vue来实现一个瀑布流效果,加载网络图片,同时有下拉刷新和上拉加载更多功能效果。然后针对这几个效果的实现,捋下思路: 先看个效果动图: 静态截图: 二、具体实现步骤 2.1、页面结构设计,测试数据准备。 本地准备一个json文件数据,放在项目public文件夹下。注意,本地测 阅读全文
posted @ 2020-01-14 00:18 谈晓鸣 阅读(4312) 评论(1) 推荐(0) 编辑
摘要:菜单快捷导航: CommonJS 之 exports和require用法 ES6 Module 之 export 和 import 用法 CommonJS和ES6 Module的区别 循环依赖 和 解决办法 模块打包原理简析 1、CommonJS 之 exports和require用法 Common 阅读全文
posted @ 2020-01-03 21:27 谈晓鸣 阅读(3628) 评论(2) 推荐(4) 编辑
摘要:菜单快捷导航: 1、创建一个vue项目步骤 (windows环境下)。创建vue项目前,检查系统是否具备创建项目的条件(是否已经安装好了node.js、webpack、vue-cli)。cmd打开终端。 1.1 如果还没安装node.js, 则先安装node.js ,安装完成后,查看node版本 1 阅读全文
posted @ 2020-01-01 23:39 谈晓鸣 阅读(14406) 评论(0) 推荐(4) 编辑
摘要:1、什么是npm脚本 在创建node.js项目如一个vue项目,或一个react项目时,项目都会生成一个描述文件package.json 。 比如npm允许在package.json文件里面,使用scripts字段定义脚本命令。 上面代码是package.json文件的一个片段,里面的scripts 阅读全文
posted @ 2019-12-30 00:55 谈晓鸣 阅读(3218) 评论(0) 推荐(3) 编辑
摘要:23、$refs是什么东东? 通过在标签上设置ref属性,然后在Vue实例方法中可以通过$refs拿到这些标签,如: 24、对于多级嵌套组件,后代组件如何拿到父级或祖父级,设置更高级别的组件的数据或方法? 使用依赖注入。 provide选项允许我们在当前组件指定我们想要提供给后代组件的数据/方法,比 阅读全文
posted @ 2019-10-09 23:01 谈晓鸣 阅读(645) 评论(0) 推荐(1) 编辑
摘要:1、如何创建一个Vue实例对象? 当一个Vue实例(如上面的vm)被创建后,它将data对象里面的所有的属性加入到Vue的响应式系统中。当这些属性的值发生改变时,视图会产生“响应”, 即视图展示最新的数据。 如何双向式绑定数据?用v-model来绑定数据,如: 2、if else 如何实现?用v-i 阅读全文
posted @ 2019-09-30 18:54 谈晓鸣 阅读(1154) 评论(0) 推荐(1) 编辑
摘要:在react页面内嵌“微信二维码”,实现PC端通过微信扫码进行登录。首先去微信开放平台注册一个账号,创建一个网站应用,提交网站备案审核,获取appid和appsecret;其他开发流程根据微信文档来进行操作。 react页面部分代码,引入内嵌二维码脚本,设置iframe标签支持跨域,自定义二维码样式 阅读全文
posted @ 2019-09-08 16:34 谈晓鸣 阅读(2644) 评论(0) 推荐(1) 编辑
摘要:1、第226题:翻转二叉树 递归+迭代两种实现方式: /** 反转二叉树 * Definition for a binary tree node. * function TreeNode(val) { * this.val = val; * this.left = this.right = null 阅读全文
posted @ 2019-09-07 23:52 谈晓鸣 阅读(987) 评论(0) 推荐(0) 编辑
摘要:一、二叉树的基本概念 从逻辑结构角度来看,前面说的链表、栈、队列都是线性结构;而今天要了解的“二叉树”属于树形结构。 1.1 多叉树的基本概念,以上图中“多叉树”为例说明 节点:多叉树中的每一个点都叫节点;其中最上面的那个节点叫“根节点”; 父节点:节点1是节点2/3/4/5/6的父节点,然后节点2 阅读全文
posted @ 2019-08-19 00:51 谈晓鸣 阅读(950) 评论(0) 推荐(1) 编辑
摘要:一、什么是数据结构栈 在数据结构中有一个栈结构,在内存空间中也有一个栈空间,这两个”栈“是两个不同的概念。这篇我们说的是数据结构中的栈。栈是一种特殊的线性表,特殊性体现在只能在栈顶进行操作,往栈顶添加元素,一般叫push, 入栈;从栈顶移除元素,一般叫pop, 出栈,操作如图: 这个特征叫”后进先出 阅读全文
posted @ 2019-07-02 21:03 谈晓鸣 阅读(657) 评论(0) 推荐(2) 编辑
摘要:一、双向链表 在上文《JS数据结构第二篇 链表》中描述的是单向链表。单向链表是指每个节点都存有指向下一个节点的地址,双向链表则是在单向链表的基础上,给每个节点增加一个指向上一个节点的地址。然后头结点的上一个节点,和尾结点的下一个节点都指向null。同时LinkedList类中再增加一个last内部属 阅读全文
posted @ 2019-06-26 15:52 谈晓鸣 阅读(948) 评论(1) 推荐(1) 编辑
摘要:一、什么是链表 链表是一种链式存储的线性表,是由一组节点组成的集合,每一个节点都存储了下一个节点的地址;指向另一个节点的引用叫链;和数组中的元素内存地址是连续的相比,链表中的所有元素的内存地址不一定是连续的。结构模拟如图: 一般来说,说到链表,就要提下数组,一般链表都是和数组进行对比。 在很多编程语 阅读全文
posted @ 2019-06-26 09:36 谈晓鸣 阅读(1872) 评论(2) 推荐(2) 编辑
摘要:把JS的原型和原型链重新梳理了一遍,然后动手绘制了一张流程图,原型和原型链的秘密就藏在这张图上。绘制流程图的好处就是在绘制的过程中,既检验自己对这个知识点的掌握状况,同时在绘制过程中会对这个知识点印象更深刻,理解更透彻,建议每个感兴趣的小伙都来身体力行一次。 为了更清晰的了解原型链的走向,先创建三个 阅读全文
posted @ 2019-06-03 15:44 谈晓鸣 阅读(862) 评论(0) 推荐(4) 编辑
摘要:项目中有几个页面在控制台出现这个“渲染层错误”,虽然不影响业务操作,怕存在潜在风险,今天抽时间找了下原因,解决这个问题。 控制台报错日志如下: (中国标准时间) 渲染层错误 Error: Expect END descriptor with depth 0 but get another at i. 阅读全文
posted @ 2019-05-09 16:33 谈晓鸣 阅读(7749) 评论(0) 推荐(0) 编辑
摘要:快捷导航菜单 1、对象深拷贝 2、网络图片转base64, 在线图片点击下载 3、常用CSS样式记录(超出宽高省略展示/播放icon/按钮背景颜色渐变...) 4、JS中某些数字间加减乘除会出现多位小数问题(精度丢失) 5、call、apply和bind使用方法 6、定义类和继承的标准实现方式 1、 阅读全文
posted @ 2018-11-20 19:39 谈晓鸣 阅读(763) 评论(0) 推荐(0) 编辑
摘要:浏览器对各音/视频格式的支持问题 浏览器测试效果图 ffmpeg在音频格式转换,和从视频中提取音频的简单实用 1、百度搜索浏览器对于音频文件的兼容,排在前面的文章大部分是复制粘贴很久以前的文章,容易误导搜索资料的人, 因此重新验证整理下。 以Firefox浏览器为例,Firefox对于mp3格式音频 阅读全文
posted @ 2018-10-04 09:18 谈晓鸣 阅读(1735) 评论(0) 推荐(1) 编辑
摘要:小程序实现瀑布流效果,和web页面差不多,都要经过以下步骤: 1)、加载图片,获取图片的宽高度; 2)、根据页面需要显示几列计算每列的宽度; 3)、根据图片真实宽度和每列的宽度比,计算出图片需要显示的高度; 4)、重新对图片进行定位 1、web页面瀑布流效果,先看效果图(瀑布流+无限滚动加载): 页 阅读全文
posted @ 2018-09-25 20:30 谈晓鸣 阅读(2784) 评论(1) 推荐(0) 编辑
摘要:原本小程序需要一个限制文本框输入为数字,且最多保留2位小数的效果,网上找到的例子感觉有点繁琐,就自己写了一个。 代码很简单,主要借助了正则的组匹配特性进行处理: //检查输入文本,限制只能为数字并且数字最多带2位小数 checkInputText: function(text){ var reg = 阅读全文
posted @ 2018-08-28 20:32 谈晓鸣 阅读(7978) 评论(1) 推荐(3) 编辑