• 深入浅出 Babel 下篇:既生 Plugin 何生 Macros
    大纲 关于宏文本替换式语法扩展式Sweet.js小结既生 Plugin 何生 Macro如何写一个 Babel Macro实战扩展资料关于宏 Wiki 上面对宏的定义是:宏, 是一种批处理的称谓,它根据一系列的预定义规则转换一定的文本模式。解释器或编译器在遇到宏时会自动进行这一模式转换,这个转换过程被称为“宏展开”。我们先使用 Sweet.js 来实现上面我们通过 Lisp 实现的nosense宏, 对比起来更容易理解:import { unwrap, fr
  • 深入浅出 Babel 上篇:架构和原理 + 实战
    AST 是 Babel 转译的核心数据结构,后续的操作都依赖于 AST。Babel 所有插件都是在这个阶段工作, 比如语法转换、代码压缩。也就是说它们的核心非常小,大部分功能都是通过插件扩展实现的所以简单地了解一下 Babel 的架构和一些基本概念,对后续文章内容的理解, 以及Babel的使用还是有帮助的。
  • 前端基础篇之CSS世界
    戳蓝字「前端技术优选」关注我们哦!在同事的推荐下我阅读了张鑫旭老师的《css世界》,才发现css跟想象中的不太一样。另外本文会随着作者对css的更深入理解而逐步更新,希望到最后能够文如标题展现出真正的css世界。流“流”又叫文档流,是css的一种基本定位和布局机制。无论内联元素还是块级元素,height: auto都是呈现包裹性,即高度由子级元素撑开。这就是流体布局的根本所在。内在盒子是决定元素内部一些属性是否生效的盒子。从表现来说,内联元素的典型特征就是可以和文字在一行显示。line-height是作用在行框盒子上的,并最终决定高度。
  • 大前端时代,浅谈JavaScript开发重型跨平台应用以及架构
    大前端时代以及即将到来的5G时代,3D可视化,音视频直播技术,IM即时通讯场景应用我觉得都是大有可为的。今天准备好好谈一谈重型应用的架构以及技术选型,为接下来我的正式架构设计做个铺垫。这里不得不提到vsCode,它其实就是用ELectron开发,基于TypeScript。既然说了移动端没有合适的重型跨平台应用开发框架,那么只有PC端了。目前GitHub上已经有77.2K的star应用层面的东西,大都不会太难,Electron的文档已经非常全面,基于它出现了很多复杂,而且成功的工具类重型应用。单线程的Node.js和JavaScript重型应用架构设计要想写好这个架构,我觉得你首先在自身的擅长领域不能有太多的黑盒过程。
  • Vue 项目里戳中你痛点的问题及解决办法(下)
    也可以直观看到各个模块体积在整个项目中的占比。解决这个问题非常有效的手段之一就是前后端开启gizp。gizp其实就是帮我们减少文件体积,能压缩到30%左右,即100k的文件gizp后大约只有30k。vue-cli初始化的项目中,是默认有此配置的,只需要开启即可。v2需配合vue-cli3cnpm i compression-webpack-plugin@1.1.11然后在config/index.js中开启即可:build: { // 其他代码 …………productionGzip: true, // false不开启gizp,true开启 // 其他代码}现在打包的时候,除了会生成之前的文件,还是生成.gz结束的gzip过后的文件。a=1&b=2" # 禁用缓存加载指定页面100次 hiper -n 100 "baidu.com?
  • Vue 项目里戳中你痛点的问题及解决办法(上)
    如果你是vue大佬,请忽略小弟的愚见列表进入详情页的传参问题。本地开发环境请求服务器接口跨域的问题axios封装和api接口的统一管理UI库的按需加载如何优雅的只在当前页面中覆盖ui库中组件的样式定时器问题rem文件的导入问题Vue-Awesome-Swiper基本能解决你所有的轮播需求打包后生成很大的.map文件的问题fastClick的300ms延迟解决方案组件中写选项的顺序列表进入详情页的传参问题。本地开发项目请求服务器接口的时候,因为客户端的同源策略,导致了跨域的问题。在响应的拦截中,我们可以进行根据状态码来进行错误的统一处理等等。axios接口的统一管理,是做项目时必须的流程。
  • 【THE LAST TIME】彻底吃透 JavaScript 执行机制
    目录皆为暂定执行 & 运行 首先我们需要声明下,JavaScript 的执行和运行是两个不同概念的,执行,一般依赖于环境,比如 node、浏览器、Ringo 等, JavaScript 在不同环境下的执行机制可能并不相同。而今天我们要讨论的 Event Loop 就是 JavaScript 的一种执行方式。而运行呢,是指JavaScript 的解析引擎。既然 JavaScript 是单线程语言,那么就会存在一个问题,所有的代码都得一句一句的来执行。JavaScript 有一个主线程 main thread,和调用栈 call-stack 也称之为执行栈。浏览器环境下的 Event Loop 当我们梳理完哪些是 MicroTask ,除了那些别的都是 MacroTask 后,哪些是同步任务,哪些又是异步任务后,这里就应该彻底的梳理下JavaScript 的执行机制了。
  • 【长文慎入】一文吃透 react 事件机制原理
    写在前面上个月有幸研究了 react 事件机制这个知识点,并且在公司内部把自己的理解进行了分享。大纲主要分为4大块儿,主要是结合源码对 react事件机制的原理 进行分析,希望可以让你对 react事件机制有更清晰的认识和理解。ps: 本文基于 react15.6.1进行分析,虽然不是最新版本但是也不会影响我们对 react 事件机制的整体把握和理解。对事件机制的初步理解和验证对 react事件机制 的表象理解,验证,意义和思考。
  • 组件库设计实战 - 复杂组件设计
    作者:诚身https://zhuanlan.zhihu.com/p/29034015一个成熟的组件库通常都由数十个常用的 UI 组件构成,这其中既有按钮(Button),输入框(Input)等基础组件,也有表格(Table),日期选择器(DatePicker),轮播(Carousel)等自成一体的复杂组件。这里我们提出一个组件复杂度的概念,一个组件复杂度的主要来源就是其自身的状态,即组件自身需要维护多少个不依赖于外部输入的状态。参考原先文章中提到过的木偶组件(dumb component)与智能组件(sma...
  • 详解vue组件三大核心概念
    抽奖公众号【全栈前端精选】内回复"抽奖"二字,即可有机会获得 20 周年中秋Alibaba动物园小礼品一个~前言本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件,可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能。本文的代码请猛戳https://github.com/ljianshu/Blog,纸上得来终觉浅,大家动手多敲敲代码!一、属性1.自定义属性propsprop 定义了这个组件有哪些可配置的属性,组件的核心功能也都是它来确定的...
个人资料

Alibaba group 下1.7w+ star开源项目主要开发者,活跃于各类技术社区。爱总结,爱分享。从前端到全栈,每日分享前端、客户端、Node、面试等相关高质量精选文章。小白的大神养成记,你我共勉!