element源码分析

分析一个组件，首要要知道他有哪些功能？在什么场景下使用？

• input的功能就是收集用户输入的数据传给后台程序，常见的有文本，密码，文本域
• 一般放在表单中，还可以配合其他组件使用

构成：DOM结构，属性，样式，事件入手

DOM结构

基本结构

https://segmentfault.com/a/1190000022175267

element ui源码解析 -- input篇_weixin_30545285的博客-CSDN博客

 其实刚开始接触源码还是有些困难的，思路总是连接不起来，没办法 只能一点点去理解~

先了解calcTextareaHeight.js文件

根据文件名顾名思义：动态计算文本框的高度

未完待续~~~

calcTextareaHeight.js

// 声明个隐藏文本框的变量 ??? 是隐藏正常文本框么，然后显示textarea
let hiddenTextarea;

const HIDDEN_STYLE = `
height: 0 !important;
visibility: hidden !important;
overflow: hidden !important;
position: absolute !important;
z-index: -1000 !important;
top: 0 !important;
right: 0 !important;
`;

el-icon图标源码分析

根据name传值进去，动态设置class名称，显示图标

 el-icon为什么用而不用?

• 正常元素做图标语义是不正确的
• 比字母短，gzip后更小一点
• 空元素，配合:before微元素实现，微元素不设置content属性，伪元素是没用的

el-button源码分析-

el-button源码和样式 

 

01 element-ui源码思路 el-button_&&-CSDN博客

element-ui button和button-group组件源码学习 - 编程之家

HTML 标签

 分析：

1.css样式的一种解耦写法

如上图的type，type有不同的值，根据不同的值显示不一样的按钮颜色和样式，

el-radio分析 

你是否想过若不用组件库，自己写一个单选按钮应如何实现呢？

代码如下：推荐第三种（当然el-radio也是选择这种）

    
    单选A
    单选B
    单选C
    单选D
    

    
    单选A
    单选B
    单选C
    单选D
    

    
    单选A
    单选B
    单选C
    单选D
    

   

        

            user
            
            user
            
        
    

for属性相当于绑定 label 和input，但点击 label的时候，鼠标会focus到相应的input上 

正常情况，盲人情况，按键情况

看了2天还不是很理解，那么你想下让你去写一个radio组件 你怎么设计呢？

先整理了下新学的知识点

role 语义化，便于屏幕阅读

aria-*:便于屏幕阅读器，帮助残障人事更好的访问网站

tabindex:规定页面元素tab键控制次序

keydown.space (空格)

.stop(阻止冒泡事件)

.prevent(阻止默认行为)

// 是一个数组，获取的是type==tadio属性下的所有节点

document.querySelectorAll('[type]radio'])

// 返回的是true或者false,看radios中是否包含radio.checked

// 相当于Array.from(radios,radio => radio.checked)

[].some.call(radios,radio => radio.checked) 

// 一个都没有选中的

![].some.call(radios, radio => radio.checked)

stopPropagation():阻止调用相同事件传播

// 事件委托（事件代理）js中的事件委托（事件代理）详解 - lauzhishuai - 博客园

JavaScript 事件委托详解 - 知乎

代理：也就是通过一个中间物可以更好，更快的解决事情

利用冒泡事件，只指定一个事件处理程序，可以管理某一类型的所有事件

message消息提示

Object.hasOwn();Object.hasOwnProperty区别：可以说前者包含后者

hasOwnProperty()表示对象自身属性中是否具有指定属性

const object1 = {}
object1.property1 = 42;
console.log(object1.hasOwnProperty1('property1'))  // true
console.log(object1.hasOwnProperty('toString')) // false
console.log(object1.hasOwnProperty('hasOwnProperty'));// expected output: false

const object1 = {
  prop: 'exists'
};

console.log(Object.hasOwn(object1, 'prop'));// expected output: true
console.log(Object.hasOwn(object1, 'toString'));// expected output: false
console.log(Object.hasOwn(object1, 'undeclaredPropertyValue'));// expected output: false

Vue.prototype.$isServer(运行在服务器上)

BackTop：回到顶部 

思路：

1.滚动条滚动超出一定距离右下角显示回到顶部的图标 ，没超出图标隐藏

2.图标上出现点击事件，回到屏幕顶部

知识点：

window.requestAnimationFrame:告诉浏览器执行一个动画，并且要求浏览器在下次重绘前调用指定的回调函数

window.onscroll事件：滚动事件

ducument.documentElement.clientTop || document.body.scrollTop: y轴距离顶部的距离