JavaScript相关
关注
分享
扫一扫
文章平均质量分 71
Chepy2018
生命不息，学习不止
展开
-
在线把 json 转换成 ts 类型 - @cyly/json2ts
Github: https://github.com/ChpShy/json2ts体验地址：https://chpshy.github.io/json2ts/index.html介绍在项目慢慢接入vue3之后，面临了一个问题，要不要定义 ts 类型呢，还是快乐的做一个 as 开发人员。用吧，类型太多，定义起来开发效率太低；不用吧，很多提示又没了，而且以后别人维护起来，不利于代码阅读(全是any)。本着负责任(装逼)的态度，还是想着加上。但是后端接口返回的咋办呢？他们倒是有接口文档，但是有些字段实在是原创 2022-04-03 12:32:57 · 7233 阅读 · 3 评论 -
前端基础系列--3.前端继承的几种方式
放弃死记硬背，一步一步理解继承。一、构造器继承最简单的一种，继承构造器属性：function Parent() { this.name = 'Parent';}function Child() { Parent.call(this); this.age = 12;}这个方法是很简单，但是很明显只能继承构造器属性，那么原型属性想继承怎么办呢？...原创 2019-10-18 10:41:56 · 2088 阅读 · 0 评论 -
前端基础系列--2. 变量提升与作用域那些事
上一篇：1. 浏览器缓存一、前言尽管通常JS被归类为 ”动态“ 或 ”解释执行“ 语言，但事实上他是一门编译语言。但与传统的编译语言不同，JS不是提前编译的，编译结果也不能在分布式系统中进行移植。解释执行： 存在一个解释器，对于JS来说，浏览器的JS引擎就是一个解释器，对预编译后的JS代码进行解释执行，解释一行，执行一行，这个过程中不会生成中间文件。 编译执行：对于平台无法识别的带...原创 2019-06-26 22:18:00 · 180 阅读 · 0 评论 -
webpack学习--流程篇
webpack流程小解这篇主要小小的介绍webpack的强大的强大的强大的强大的编译过程。前言在介绍正式编译过程之前，首先明确webpack是一个事件流驱动的组件，通过事件注册和事件触发完成整个编译过程。其中事件流的实现主要是依赖Tapable插件，Tapable的实现也很简单。//函数只有一个是参数，私有属性_plugins，用于记录注册的事件，事件名：回调函数functio...原创 2019-06-14 17:21:17 · 353 阅读 · 0 评论 -
webpack学习--基础篇
一、概念webpack作为前端构建工具，本质上也是基于node实现的一个工具类。下面官网这张图很好的介绍了webpack的本质：根据定义的入口，从入口开始，逐级深入，将所有依赖文件通过一定规则编译成浏览器可以识别的文件。二、基础配置webpck有基础配置可以分为4类：entry(入口)，output(出口)，loader(加载器)和plugins(插件)。参考文档：web...原创 2019-06-14 15:51:11 · 263 阅读 · 0 评论 -
javascript的数据类型之基本类型和引用类型
不知道在初学js的同学对下面的代码有没有疑惑：var a = [1,2,3];var b = a;b.push(4);console.log(a); // [1,2,3,4]var c = 1;var d = c; d =2;console.log(c); // 1为什么这两段代码会有不一样的结果？在第一段中，明明修改的b，为何a也改了？这就是基本类型和引用类型的区别了。一、概念 ...原创 2018-06-26 21:13:39 · 208 阅读 · 0 评论 -
javascript 模块化的那些事
commonJS2009年，美国程序员Ryan Dahl创造了node.js项目，将javascript语言用于服务器端编程。这标志"Javascript模块化编程"正式诞生。因为老实说，在浏览器环境下，没有模块也不是特别大的问题，毕竟网页程序的复杂性有限；但是在服务器端，一定要有模块，与操作系统和其他应用程序互动，否则根本没法编程。NodeJS是commonJS规范的实现，webpack 也是以...原创 2018-04-27 10:53:02 · 288 阅读 · 0 评论 -
JS实现鼠标经过和离开图片放大缩小效果
参考：艺龙官网实现。要点：闭包理解；轮询器的清除；以下为部分代码，所有代码见github(ImageEffect文件夹)：源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conte原创 2018-04-21 14:36:21 · 7343 阅读 · 0 评论 -
前端进行图片压缩并传入后台
步骤：1. 将图片转成image对象；2. 压缩成设置的最大尺寸；3. 通过canvas转成base64码；4. 后台(此处是java)进行base64解码存储。以下上具体代码。所有代码见：github客户端：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...原创 2018-04-18 02:20:43 · 6246 阅读 · 0 评论 -
箭头函数中的this指向
普通函数：this指向分为4种情况，1. obj.getName();//指向obj2.getName();//非严格模式下，指向window，严格模式下为undefined3. var a = new A(); a();//指向A本身4.getName().apply(obj);//指向obj箭头函数：箭头函数本身是没有this和arguments的，在箭头函数中引用this实际上是调用的是...原创 2018-04-01 16:48:12 · 7791 阅读 · 1 评论 -
点击菜单实现内容局部刷新
原理： 利用window.addEventListener("popstate", function(e) {});方法监听浏览器url的变化，判断当前的url动态局部刷新内容区域。(发现不太喜欢打字描述，还是直接贴代码好了。。。未来的我啊，回顾这段代码应该能看懂吧。)<!DOCTYPE html><html><head> <title>...原创 2017-06-25 21:46:31 · 14329 阅读 · 4 评论 -
前端学习 -- clear:both的测试
前端学习 – clear:both的测试clear:both这个属性从字面上的理解其实就是清除所有样式，但它主要还是用来清除div框的浮动的（其他作用还没发现）。 清除div框的浮动这个概念我之前一直没理解什么意思。然后通过测试，终于明白了。下面直接上图理解。首先代码层级结构如下：其中div1和div2都给了float:left和宽度属性。由于没有给高度和overflow属性，...原创 2017-05-21 08:59:02 · 629 阅读 · 0 评论