zoukankan      html  css  js  c++  java
  • zepto源码--width,height--学习笔记

    width和height函数,实际上通过css方法也完全可以取到这两个函数的结果。获取width,$elem.css('width');设置width的话,$elem.css('width', 100),这与我们将要介绍的width()函数完全一致,height函数也一样可以实现。但是在我们日常编程过程中,这两个函数使用频率确实比较高,所以不管是jquery,还是zepto都对他们进行了额外的封装。

    由于这两者实现过程完全一致,唯一的区别是一个是宽度,一个是高度,在代码实现过程中,并没有什么区别。

    先看zepto源码

    两者本质上并无区别,所以使用数组包裹['width', 'height'],然后进行遍历,统一实现两个函数。

    调用JavaScript原生函数forEach进行对数组遍历,传递函数作为参数,该函数的参数dimension即为对应的width和height。

    定义变量dimensionProperty,将首字母改为大写并赋值给dimensionProperty。

    这里使用正则表达式匹配获取到的值width或者height除“ ”之外的任何单个字符。从正则匹配结果m来看,m值就是单个字符w或者h,所以不明白这里为什么要额外添加m[0],从我个人角度来说这个[0]完全无意义。测试的过程是在chrome浏览器的开发者工具上完成的,结果如下:

    所以我认为直接使用m.toUpperCase()完全可以满足需求了(也有可能是我考虑的不够周全)。

    但是由于单个字母的字符串,m == m[0],所以如此写法并不影响最终结果,略过。

    开始定义对外暴露的width和height函数,$.fn[dimension]=function(value){}

    如果函数调用过程中没有传入value参数,表示是获取当前选择对象的第一个对象的width或者height。

      如果选择的对象是window,通过innerWidth或者innerHeight返回结果;

      如果选择的对象是document,通过scrollWidth或者scrollHeight返回结果;

      正常的元素节点的话,通过调用offset函数,返回offset['width']或者offset['height']。

    如果函数调用过程中传入value参数,表示用户目的是设置对应的值,直接调用css函数设置。

  • 相关阅读:
    百度高级搜索技巧
    JRebel插件使用详解
    css3自适应布局单位vw,vh详解
    vue的MVVM原理
    JS实现全屏和退出全屏
    设置不定宽高的元素垂直水平居中
    微信小程序启动更新机制
    了解MVVM原理
    xss攻击和csrf攻击的定义及区别
    跨站脚本漏洞(XSS)基础讲解
  • 原文地址:https://www.cnblogs.com/zhuhuoxingguang/p/6045774.html
Copyright © 2011-2022 走看看