el-input是element ui中使用最频繁的组件之一了,分析其构成从四个方面入手:DOM结构,属性,样式,事件入手 DOM结构: <div> <input /> </div> 结构很简单,这就相当于一个主干,剩下的样式,事件,属性都在这个基础上扩充 属性: 既然是封装,input原生的属性基本上都要覆盖到,个人猜测element团队是按照w3c官方资料来整理的,这样绝对保证不遗漏,这种方式很值得借鉴,如下: // 兼容文本框和文本域的情况 <templat…

要看源码就得从最简单的开始,button够简单的了,就从他开始吧. 安装依赖后源码目录在:node_modules/element-ui/packages中,可以看到这里的文件夹命名是不是很熟悉,就是我们平时写的组件名,打开任何一个文件夹,都有一个src文件夹和一个index.js,src文件夹放组件,index.js用于注册组件 下面来看具体的button源码如何写的: 分析从三个方面着手:DOM结构,数据属性,事件 DOM结构: 按钮的DOM结构很简单,要显示成什么样子就由css样式及一些自…

Mybatis源码解析(二) -- 加载 Configuration    正如上文所看到的 Configuration 对象保存了所有Mybatis的配置信息,也就是说mybatis-config.xml 以及 mapper.xml 中的所有信息 都可以在 Configuration 对象中获取到.所以一般情况下,Configuration 对象只会存在一个.通过上篇文章我们知道了mybatis-config.xml 和 mapper.xml 分别是通过 XMLConfigBuilder 和…

写在前面 本文继续来分析Sentinel的源码,上篇文章对Sentinel的调用过程做了深入分析,主要涉及到了两个概念:插槽链和Node节点.那么接下来我们就根据插槽链的调用关系来依次分析每个插槽(slot)的源码. 默认插槽链的调用顺序,以及每种类型Node节点的关系都在上面文章开头分析过 Sentinel源码解析一 NodeSelectorSlot /** * 相同的资源但是Context不同,分别新建 DefaultNode,并以ContextName为key */ private vol…

title: RxJava2源码解析(二) categories: 源码解析 tags: 源码解析 rxJava2 前言 本篇主要解析RxJava的线程切换的原理实现 subscribeOn 首先, 我们先看下subscribeOn()方法, 老样子, 先上Demo Observable<Integer> observable = Observable .create(new ObservableOnSubscribe<Integer>() { @Override public v…

欢迎转载,转载烦请注明出处,谢谢. https://www.cnblogs.com/sx-wuyj/p/11177257.html 自己学习ArrayList源码的一些心得记录. 继续上一篇,ArrayList源码解析(一) addll(Collection<? extends E> c) :添加目标集合到原有集合中. //参数需要是Collection的子类 public boolean addAll(Collection<? extends E> c) { //将C集合通过to…

原文 前言 本文承接上文:iOS即时通讯之CocoaAsyncSocket源码解析一 上文我们提到了GCDAsyncSocket的初始化,以及最终connect之前的准备工作,包括一些错误检查:本机地址创建以及socket创建:服务端地址的创建:还有一些本机socket可选项的配置,例如禁止网络出错导致进程关闭的信号等. 上文讲到了本文方法八--创建Socket,其中有这么一行代码: //和connectInterface绑定 if (![self bindSocket:socketFD toI…

终于动笔开始 jQuery 源码解析第二篇,写文章还真是有难度,要把自已懂的表述清楚,要让别人听懂真的不是一见易事. 在 jQuery 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 jQuery 源码整体大致架构,主要分为以下几个点:   A 通过自执行函数,在内部将 jQuery (jQuery 为一个函数,同时,在 JS 中,函数也为对象)以 window.jQuery=window.$ 引入,供用户直接便可使用 $.jQuery 调用.       B 以 C#.Jav…

上接erlang下lists模块sort(排序)方法源码解析(一),到目前为止,list列表已经被分割成N个列表,而且每个列表的元素是有序的(从大到小) 下面我们重点来看看mergel和rmergel模块,因为我们先前主要分析的split_1_*对应的是rmergel,我们先从rmergel查看,如下 ....................................................... split_1(X, Y, [], R, Rs) -> rmergel([[Y, X…

Carousel 走马灯源码解析 1. 基本原理:页面切换 页面切换使用的是 transform 2D 转换和 transition 过渡 可以看出是采用内联样式来实现的 举个栗子 <div :style="'transform: translateX('+ translate +'px);'"> </div> data() { return { translate: 0 }; } 是不是感觉自己已经可以写个轮播图了 骚年莫慌 现在来看源码 main.vue &…