在看文章前,先做个定位,这不是一篇纯粹的技术性文章,可以把它理解成一个叙述文章,记录我开发插件的过程. 开始前简单的吹个牛 vue2 也写了很多年了,多人合作始终避不开用到别人的组件.关键是有些组件没有文档看起来是真的费劲.props还可以直接通过组件看出来,emit,ref,slot代码一多看起来就比较费劲了.也想过一些解决方案,比如每个组件写一个 readme.这就有一个问题,时间太紧了,谁来给你写 readme 哦,开玩笑. 所以如果有一个能够自动解析 vue 组件的东西就好了.在网上搜索

之前一直在掘金上看到一些关于面试写babel插件的文章,最近也在学,以下就是学习后的总结. 关键词:AST编译解析, babel AST编译解析 AST[维基百科]:在计算机科学中,抽象语法树(Abstract Syntax Tree,AST),或简称语法树(Syntax tree),是源代码语法结构的一种抽象表示.它以树状的形式表现编程语言的语法结构,树上的每个节点都表示源代码中的一种结构.之所以说语法是"抽象"的,是因为这里的语法并不会表示出真实语法中出现的每个细节.比如,嵌套括号

一.Vue对比其他框架原理 Vue相对于React,Angular更加综合一点.AngularJS则使用了“脏值检测”. React则采用避免直接操作DOM的虚拟dom树.而Vue则采用的是 Object.defineProperty特性(这在ES5中是无法slim的,这就是为什么vue2.0不支持ie8以下的浏览器) Vue可以说是尤雨溪从Angular中提炼出来的,又参照了React的性能思路,而集大成的一种轻量.高效,灵活的框架. 二.Vue的原理 Vue的原理可以简单地从下列图示所得出

Vue由于其高效的性能和灵活入门简单.轻量的特点下变得火热.在当今前端越来越普遍的使用,今天来剖析一下Vue的深入响应式原理. tips:转自我的博客唐益达博客,此为原创.转载请注明出处,原文链接 一.Vue对比其他框架原理 Vue相对于React,Angular更加综合一点.AngularJS则使用了"脏值检测". React则采用避免直接操作DOM的虚拟dom树.而Vue则采用的是 Object.defineProperty特性(这在ES5中是无法slim的,这就是为什么vue2.

vue原理三大模块:响应式.vdom和diff.模板编译 vue原理要点: 1.组件化 组件化的历史:在vue之前已经有组件化的概念了,想asp.jsp.php等就有组件化的概念,nodejs也有组件化 数据驱动视图:传统组件都只是静态渲染,国内新年还是要依赖于操作DOM,现在的网页复杂度高,操作DOM变得不太实际.于是便有脸VUE MVVM通过数据去驱动视图 MVVM: 2.响应式 Object.defineProperty 监听data属性getter  setter (包括数组) 监听对象

前言 对于前端开发而言,babel肯定是再熟悉不过了,工作中肯定会用到.除了用作转换es6和jsx的工具之外,个人感觉babel基于抽象语法树的插件机制,给我们提供了更多的可能.关于babel相关概念和插件文档,网上是有很多的,讲的挺不错的.详细的解析推荐官方的babel插件手册.在开发插件之前,有些内容还是要了解一下的,已经熟悉的大佬们可以直接跳过. 抽象语法树(AST) Babel 使用一个基于 ESTree 并修改过的 AST,它的内核说明文档可以在这里找到. 直接看实例应该更清晰: fu

自己动手写Android插件化框架 转 http://www.imooc.com/article/details/id/252238   最近在工作中接触到了Android插件内的开发,发现自己这种技术还缺乏最基本的了解,以至于在一些基本问题上浪费不少时间,如插件Context和主工程Context的区别,权限必须在主工程申明等,因此花了点时间了解了一下插件的历史,并写了两个Demo作为总结.本文旨在通过两个实例直观的说明插件的实现原理以加深对插件内开发的理解,因此不会深入探讨背景和原理,代码也

话不多说先上图,简要说明一下干了些什么事.图可能太模糊,可以点svg看看 背景 最近公司开展了小程序的业务,派我去负责这一块的业务,其中需要处理的一个问题是接入我们web开发的传统架构--模块化开发.我们来详细说一下模块化开发具体是怎么样的.我们的git工作流采用的是git flow.一个项目会拆分成几个模块,然后一人负责一个模块(对应git flow的一个feature)独立开发.模块开发并与后端联通后再合并至develop进行集成测试,后续经过一系列测试再发布版本.目录结构大体如图所示,一个

Atitit 表达式原理 语法分析 原理与实践 解析java的dsl  递归下降是现阶段主流的语法分析方法 于是我们可以把上面的语法改写成如下形式:1 合并前缀1 语法分析有自上而下和自下而上两种分析方法2 递归下降是现阶段主流的语法分析方法,2 于是我们可以把上面的语法改写成如下形式: 1)       Operator="+" | "-" | "*" | "/" 2)       Expression=<数字>

jquery ready方法实现原理 内部原理 今天闲来无事研究研究jquery.ready()的内部实现,看JQ的源码一头雾水,由于自己很菜了,于是翻了翻牛人的播客,讲述详细,收获颇多. 先普及一下jquery.ready()和window.onload,window.onload事件是在页面所有的资源都加载完毕后触发的. 如果页面上有大图片等资源响应缓慢, 会导致window.onload事件迟迟无法触发.所以出现了DOM Ready事件. 此事件在DOM文档结构准备完毕后触发, 即在资源加

es6/7/8的出现,给我们带来了很多方便,但是浏览器并不怎么支持,目前chrome应该是支持率最高的,所以为了兼容我们只能把代码转成es5,这应该算是我们最初使用babel的一个缘由,随着业务的开发,我们会有很多自己定制化的需求,单纯的bebel并不能解决我们所有的问题,所以babel插件应用而来,本文将会采用较为通俗的语言来描述如何快速写一个babel插件. 一.babel的作用 babel的作用其实就是一个转换器,把我们的代码转成浏览器可以运行的代码,类似于加工厂的概念.解析代码都是一个文

有时候我们在做开发的时候,就想自己写一个插件然后就可以使用自己的插件,那种成就感很强.博主最近研究element-ui和axios的时候,发现他们是自定义组件,但是唯一有一点不同的是,在用element-ui的时候是使用Vue.use()语句来使用的,而axios的时候,不用Vue.use(),只要import就可以导入进来了,感觉很神奇,细细的发现,原来他们的不同是因为axios里面并没有写install方法,而element-ui就有写这个方法,下面就利用这个install来写一个自己的插件

SpringMVC 原理 - 设计原理.启动过程.请求处理详细解读 目录 一. 设计原理 二. 启动过程 三. 请求处理 一. 设计原理 Servlet 规范 SpringMVC 是基于 Servlet 的. Servlet 是运行在 web 服务器上的程序,它接收并响应来自 web 客户端的请求(通常是 HTTP 请求). Servlet 规范有三个主要的技术点: Servlet, Filter, Listener 1. Servlet Servlet 是实现 Servlet 接口的程序.对于

一.使用vue 单页面开发,首先要安装好本地环境 步骤如下: 1 下载nodejs 安装 (此时npm 和 node环境都已经装好)2 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org3 全局安装npm npm install -g vue-cli4 新建项目 vue init webpack <your project>5 进入项目 cd <your project> 6 通过npm安装依赖

为什么要使用babel插件? 首先要了解babel插件是干嘛的,随着js的语法规范发展,出现了越来越多的高级语法,但是使用webpack打包的时候,webpack并不能全部理解这些高级语法,需要我们使用一些插件来把高级语法,转为低级语法后打包.babel就是将高级语法转为低级语法的工具. 不使用babel会遇到的问题 我们是用class语法来创建一个简单的类: 使用webpack打包,会报错如下: 解决webpack无法正确解析es6问题: 安装babel和相关的loader 在webpack中

为什么要使用vite 当我们开始构建越来越大型的应用时, 需要处理的 JavaScript 代码量也呈指数级增长. 包含数千个模块的大型项目相当普遍. 这个时候我们会遇见性能瓶颈 使用 JavaScript 开发的工具通常需要很长时间(甚至是几分钟!)才能启动开发服务器, 文件修改后的效果也需要几秒钟才能在浏览器中反映出来. 如此循环往复,迟钝的反馈会极大地影响开发者的开发效率和幸福感. Vite就是为了就解决这个问题 什么是vite 法语Vite(轻量,轻快)vite 是一个基于单文件组件的非

需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个button按钮,增加add和delete对应的js函数,无疑大大增加了工作量和维护成本. select有预设值的情况: 下面就开始动手把这4个html元素做成一个JQuery插件. jquery插件结构 如果你是零基础,请参考Jquery官网对jquery plugin的介绍:http://lear

1.表单验证插件Validation   2.表单插件Form   3.动态事件绑定插件livequery 可以为后来的元素绑定事件   类似于jQuery中的live()方法     4.jQuery UI   5.jQuery Cookie   6.遮罩层插件:thickbox   7.编写jQuery插件 <1>编写插件的目的:给已经有的一些列方法或函数做一个封装,一遍在其他地方使用,方便后期维护和提高开发效率.   <2>三种类型的插件 a:封装对象方法的插件 jQuery

前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jquery的插件机制,jquery有着成千上万的第三方插件,有时我们写好了一个独立的功能,也想将其与jquery结合起来,可以用jquery链式调用,这就要扩展jquery,写成插件形式了,如下面就是一个简单扩展Jquery对象的demo: //sample:扩展jquery对象的方法,bold

http://www.cnblogs.com/Leo_wl/p/3409083.html 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jquery的插件机制,jquery有着成千上万的第三方插件,有时我们写好了一个独立的功能,也想将其与jquery结合起来,可以用jquery链式调用,这就要扩展jquery,写成插件形式了,如下面就是一个简

最近写的插件功能基本完成,也遇到了一些坑,在这里记录一下. 我写的这个插件的js接口是仿造google earth的js接口,尽可能的达到与它的api一致.先从最简单的说起: 1. 导出接口中的float参数 GE中的一些接口有些参数是float,比如下面这个:     float KmlMouseEvent::getLatitude() 你要是真按着这个函数来返回float,我估计你在页面里调用这个方法的时候肯定会提示你"方法不存在,或不支持该方法"之类的. 明明写了,为啥提示没有这