js
文章平均质量分 72
东都花神
这个作者很懒,什么都没留下…
展开
-
babel源码分析 - generator
这个 babel 解析的最后一篇,我们需要借助 generator 将处理好的 AST 重新转化为代码,从而完成整个流程。首先还是回到 babel-core 的 run 方法中,当执行 generateCode(config.passes, file) 方法时最终执行的下面的代码:// babel-generator/src/index.tsexport default function generate( ast: t.Node, opts?: GeneratorOptions, co原创 2021-05-30 10:05:03 · 745 阅读 · 0 评论 -
babel源码分析 - traverse
上篇地址:babel 源码分析 一 parse接着上篇,traverse 的主要工作是将 ES6 的 AST 转化为 ES5 的 AST,babel 的各种插件也都是基于此实现的,比如 JSX,TS 的转化等。还记得入口篇中最后 run 方法里的 transformFile 方法吗,它执行的时候最终会执行下面的方法:// babel-traverse/src/index.jsfunction traverse( parent: t.Node, opts: TraverseOptions =原创 2021-05-09 22:25:13 · 1680 阅读 · 0 评论 -
babel 源码分析 一 parse
接着上篇,我们继续分析 babel 如何将原始代码转化为 AST 的。上篇中执行 parse 的最终执行的就是这个函数// babel-parser/src/index.jsexport function parse(input: string, options?: Options): File { if (options?.sourceType === "unambiguous") { // some code } else { // ???????????? 执行这里 ?原创 2021-05-09 10:36:10 · 967 阅读 · 0 评论 -
babel 源码分析 - 入口
babel 是日常工作中必不可少的依赖包,虽然天天在用,但是对于内部构造却了解不多,抽空看下了源码,从入口文件开始一步步解密 babel 是如何工作的。当我们使用 npm run babel 的时候会执行到下面的代码,具体位置是 babel-cli/src/babel/index.js#!/usr/bin/env nodeimport parseArgv from "./options";import dirCommand from "./dir";import fileCommand from原创 2021-05-08 22:34:23 · 655 阅读 · 0 评论 -
react 中如何修改 input 的 defaultValue
react 中如何修改 input 的 defaultValue在使用 react 进行开发时,我们一般使用类组件的 setState 或者 hooks 实现页面数据的实时更新,但在某些表单组件中,页面的数据却无法更新,令人苦恼,比如下面这个例子:import React, { useState } from "react";function Demo() { const [num, setNum] = useState(0); return ( <>原创 2020-12-28 16:10:20 · 4960 阅读 · 2 评论 -
babel 如何转义extends
接着上一篇文章,我们继续进行extends的解析。开始之前,我们先要回顾一下ES5的继承,以前实现继承也不是一件容易的事情,常用的方法有构造函数继承,原型继承,组合继承,寄生式继承和寄生组合式继承等,构造函数继承中每个子类的属性和方法都是独立,太浪费内存,原型继承虽然实现了方法的共享,但是存在子类修改公共方法,影响其他子类的问题等,那么babel是如何来处理继承的呢,接下来我们通过babel官网提供的工具看一下:// 原始代码class Father { name = 'iwen' a原创 2020-05-25 17:07:34 · 910 阅读 · 0 评论 -
JavaScript中异步函数
JavaScript 中常见的异步函数有:定时器,事件和ajax等,那么如何来处理这些异步函数呢,常用的方法有下面几种:回调函数function eat() { console.log('好的,我开动咯');}function cooking(cb) { console.log('妈妈认真做饭'); setTimeout(function () { console...原创 2019-01-12 16:17:09 · 14508 阅读 · 2 评论 -
babel 是如何编译 class 的?
经常使用ES6中的class,但却一直不知道 babel 是如何编译的,所以就抽空研究了一下,下面是相关的代码,关键地方都已经添加了注释。1. 编译类ES5 定义类function Person(name) { this.name = name;}Person.prototype = { sayHello: function () { return 'hello, I ...原创 2019-01-12 19:04:39 · 1122 阅读 · 0 评论 -
for of 实现原理
for of 是我们经常使用的一个属性,它可以非常方便的遍历数组,除此之外,它还可以用来遍历类数组对象,Set和Map等,那么问题就来了,为什么它可以遍历Map却不能遍历普通的对象呢?今天就来探索一下for of底层的秘密。首先,我们要知道for of是用来遍历可迭代对象的,那么如何判断一个对象是否是可迭代对象呢?js引擎是通过判断对象是否具有 Symbol.iterator 来判断的,如下:...原创 2019-01-13 10:45:59 · 2709 阅读 · 3 评论 -
浅谈深拷贝
在 JavaScript 中可以使用递归实现一个深拷贝,代码如下:const obj = { info: { person: { name: 'iwen', age: '18', } }}// 第一版function deepClone(obj) { let result = Object.create(null) for (con...原创 2019-01-08 20:19:54 · 355 阅读 · 0 评论 -
为什么不推荐使用 setInterval
为什么不推荐使用 setInterval首先简单介绍一下 js 的执行原理:js引擎是单线程的,主要分为主线程和事件队列,同步操作是在主线程上执行,而异步操作的函数会先放在事件队列当中,等到js主线程空闲了,才会去事件队列取出放到主线程,继续进行操作。定时器是属于异步事件,参数里面设置的时间,并不是延迟多少秒去执行回调函数,这个时间代表的是延迟多少秒,把回调函数放到异步队列,等待主线程空闲再被执...原创 2019-01-29 16:51:35 · 3919 阅读 · 0 评论 -
chrome 插件开发入门实例
以前记录一些简单的信息时使用记事本比较多,虽然非常方便但是记事本不能自动保存,重启或者死机后信息容易丢失,平时使用chrome比较多,所以就研究了一下chrome插件开发,并开发一块简单,方便的便签插件,截图如下:想要入门 chrome 插件开发的可以查看源码:github地址:https://github.com/daoket/Easy-Notes,想要直接安装使用的可以直接跳转...原创 2019-02-18 14:48:31 · 4365 阅读 · 0 评论 -
three.js 实现3D漫游
&lt;!DOCTYPE html&gt;&lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;title&gt;three.js webgl - equirectangular panorama&lt;/title&gt; &am原创 2017-04-01 15:31:05 · 7758 阅读 · 0 评论 -
彻底弄懂js中的this指向
js中的this指向十分重要,了解js中this指向是每一个学习js的人必学的知识点,今天没事,正好总结了js中this的常见用法,喜欢的可以看看:全局环境中this指向window。 有以下几种常用常见//直接打印console.log(this) //window//function声明函数function bar () {console.log(this)}bar() //wind原创 2017-04-03 11:19:11 · 53560 阅读 · 11 评论 -
小程序和 react 组件间通信
组件化开发是目前前端开发中十分重要的一项技能,无论是 Vue, react 还是小程序对于组件化开发都有很好的支持,要想掌握好组件化开发,组件之间的通信是无法绕过的话题,最近技术栈从 Vue 转向了 react + 小程序,便总结了一下在进行 react 和小程序开发时,组件之间是如何通信的。 组件之间的通信一般有三种,一种是父组件向子组件通信,一种是子组件向父组件通信,还有一种是兄弟组件...原创 2019-03-15 18:21:20 · 480 阅读 · 0 评论 -
图片转base64方法总结
将图片转为base64格式是一种比较常见的需求,今天就总结一下在浏览器中和服务器上比较常用的几种方法。通过canvas将图片转base64<!DOCTYPE html><html lang='zh'><head> <meta charset='UTF-8' /> <meta name='viewport' content='...原创 2018-08-15 10:47:33 · 5549 阅读 · 0 评论 -
webpack打包后文件分析
平常遇到喜欢的页面总喜欢拿来欣赏一番,今天就以webpack+vue的项目为例分析一下打包后的源码。 环境: webpack4.16 vue2.5.16为了方便理解,先使用webpack打一个最简单的包(未使用vue),下面是混淆压缩前的伪代码(function (modules) { var installedModules = {} // 缓存模块 // 处理AMD ...原创 2018-08-02 11:28:00 · 4971 阅读 · 0 评论 -
手机 锁屏 息屏 切换APP 后停止页面中音频播放
今天遇到一个需求,移动端遇到用户点击home键、切换其他APP、锁屏等操作时,H5页面中音乐还在播放,与需求不符,查询文档后发现使用visibilitychange事件可以完美解决这个问题,下面是源码:html lang="zh">head> meta charset="UTF-8" /> meta name="viewport" content="width=device-w原创 2018-01-16 15:59:46 · 9039 阅读 · 1 评论 -
使用js调用设备摄像头并实现拍照
使用getUserMedia这个API来获取摄像头的权限 兼容chrome和火狐,IOS不兼容 下面是源码:html lang=&amp;amp;amp;amp;quot;zh&amp;amp;amp;amp;quot;&amp;amp;amp;amp;gt; head&amp;amp;amp;amp;gt; meta charset=&amp;amp;amp;amp;quot;UTF-8&原创 2018-01-06 23:16:44 · 14519 阅读 · 5 评论 -
js实现多重继承
原理: 将父类的实例,赋值给子类的原型和原型上一个属性superClass,将子类的实例赋值给孙类的原型和原型上一个属性superClass。 孙类实例继承了孙类,子类和父类原型上所有的属性和方法,并可以通过superClass向上访问原型链,同理,子类实例继承了子类和父类原型上的属性和方法,并可以通过superClass访问子类原型,是不是有点绕,没关系,下面给出了具体代码:&lt;!DOC...原创 2018-02-09 23:19:42 · 2035 阅读 · 1 评论 -
通过控制台打印数据加深对构造函数和类的理解
chrome控制台的打印内容为: 父类名 + 打印对象 , 每个打印对象都会有一个proto属性,这个属性的值就是打印对象父类的原型对象值,下面是分别使用构造函数和类实现的例子。 1. 构造函数实现function Human(age) { this._age = age}Human.prototype = { talk: function () { console.lo原创 2018-02-05 22:54:39 · 345 阅读 · 0 评论 -
在parcel项目中使用ES7的async语法报错解决方法
在parcel构建项目后,如果使用ES7的async语法时,在低版本chrome中一直报错,原因是官方建议的使用babel-preset-env模块并没有将所有的语法进行编译,推荐使用transform-runtime插件,在项目中用到哪些语法编译哪些语法,具体使用方法就是 1. npm i --save-dev babel-plugin-transform-runtime 2. 在.babe原创 2018-02-07 11:18:32 · 1656 阅读 · 1 评论 -
parcel打包实例-用parcel搭建开发环境
parcel是最近非常火热的一个前端构建工具,你可能会问,我webpack还没有学会,干嘛又要学习parcel,我不学,我不学,我不学,年轻人听我说,因为parcel非常简单,相当于webpack玄学般的配置来说,几乎是零配置就可以快速上手,使用parcel我们可以将更多的精力投入到开发工作中能,更早的下班,吃饭,陪女朋友逛街,达到人生巅峰。既然parcel这么好,我该如何学习,为了让大家快速的上...原创 2018-03-09 18:35:35 · 3695 阅读 · 0 评论 -
parcel压缩构建后的文件夹 parcel-plugin-zip
最近使用parcel来构建项目,需要将构建后的文件夹,压缩为zip文件,奈何parcel的插件实在是太少了,自动动手,丰衣足食,于是手写了一个parcel的压缩插件parcel-plugin-zip,需要的朋友可以试试。 安装npm install parcel-plugin-zip -D不需要任何配置,压缩的文件名[projectName].zip可以通过parcel build ...原创 2018-03-05 00:18:34 · 1250 阅读 · 0 评论 -
面向对象开发入门例子
最近在学习Python,发现一个学习面向对象开发很好的例子,于是用js实现了一遍,下面是源码,有兴趣的同学可以看下:// 老王开枪/** * @desc 人类 */class Person { constructor(name) { this.name = name this.gun = null this.hp = 100...原创 2018-04-22 17:49:50 · 766 阅读 · 0 评论 -
快速理解ES6中的代理Proxy和反射Reflect
代理和反射是ES6中新增的API, 理解两个API用处很多,比如vue中数据绑定实现的原理是调用Object.defineProperty,而Proxy其实就是Object.defineProperty的语法糖,传言未来发布的Vue3.0也会使用Proxy+MutationObserver来重写数据绑定的底层实现,可见这个API作用还是大大的,下面介绍两个简单的例子,来让你快速的理解这两个API ...原创 2018-04-30 16:36:09 · 1877 阅读 · 0 评论 -
你不知道的JavaScript 笔记
一. 作用域 作用域是什么?作用域是存储变量的一套规则,比如函数作用域,块作用域,全局作用域作用域组成: 引擎 编译器 作用域举例: va a = 1 分为两个阶段: 1. 编译阶段声明变量 2. 执行阶段赋值LHS: 变量赋值 RHS: 变量查找编译的原理 js–(分词/词法分析(tokenizing/Lexing))–&amp;amp;gt;有意义代码块–(解析/...原创 2018-05-17 11:00:29 · 236 阅读 · 0 评论 -
深入理解为什么应该使用transform来替代top
在进行页面性能优化的时候,经常被告诫要使用transform替代top来实现动画,这样性能会更好,作为一名有追求的前端,不仅需要知其然还要知其所以然,今天就通过chrome的performance工具来直观展示其中的原因。 源码:&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html lang=&amp;quot;zh&amp;quot;&amp;amp原创 2018-05-19 00:38:05 · 7985 阅读 · 1 评论 -
前端知识点梳理
JavaScript语法设计模式函数式底层框架和类库发展语法变量this深拷贝继承闭包高阶函数异步和事件模式设计模式单例模式工厂模式观察者模式函数式函数式编程底层js解析原理V8引擎框架和类库jqueryvue发展typescriptHTML&amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;CS...原创 2018-05-31 23:30:27 · 405 阅读 · 0 评论 -
使用request模拟登录开源中国
源码const CryptoJS = require('crypto-jS');const request = require('request');const cheerio = require('cheerio');let config = { loginUrl: 'https://www.oschina.net/action/user/hash_login?from=', ...原创 2018-07-08 11:57:44 · 794 阅读 · 0 评论 -
组件化开发的一些思考
组件化和模块化开发是这几年比较热门的话题,在尝到了模块化开发的甜头后,近期打算将公司的项目切换到vue进行组件化开发,这里对遇到的问题进行一下总结:首先抛出开发中遇到的问题: 1. 哪些部分可以进行组件化? 2. 项目的目录如何划分比较合理? 3. 组件划分太细,难以维护,划分太大,导致灵活度降低,如何权衡? 4. 除了公共组件和功能组件的组件化,业务代码往往和每一个项目强耦合,需不需...原创 2018-06-26 16:17:13 · 1558 阅读 · 0 评论 -
js获取上传文件的后缀名和大小
利用H5的新特性我们可以十分方便的获取上传文件的后缀名和大小,对于上传文件的校验十分方便,下面是具体的实现代码:<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewpor原创 2017-02-24 15:02:05 · 11538 阅读 · 0 评论