Zepto源码分析(二)奇淫技巧总结
2017-08-26 22:34
344 查看
Zepto源码分析(一)核心代码分析
Zepto源码分析(二)奇淫技巧总结
三目运算符写法
如果是if...else...结构,会这样写。
三目运算符写法
我们再来看看if...else的版本
if...else写法
欢迎关注前端进阶指南微信公众号:
另外我也创了一个对应的QQ群:660112451,欢迎一起交流。
Zepto源码分析(二)奇淫技巧总结
目录
* 前言 * 短路操作符 * 参数重载(参数个数重载) * 参数重载(参数类型重载) * CSS操作 * 获取属性值的方法 * 获取属性值的方法 * Boolean操作 * 快速转换成Boolean * 日期操作 * 快速获取时间戳 * 数组操作 * 数组去重 * 数组清洗(去除null和undefined) * 字符串操作 * 快速转换成字符串 * CSS命名方式转驼峰命名方式 * 驼峰转CSS命名方式 * 对象操作 * 在闭包中修改引用会修改原对象 * 对象中的this指向当前的上一个位置 * 判断 * 浏览器类型判断
前言
在Zepto源码中大量使用了三目运算符、短路操作符以及参数重载。要去完整的阅读Zepto源码,理解这几种操作很有必要。短路操作符
当state为'ready'的时候,把'ok'返回给start。否则返回false给start。var state = 'ready' var start = state === 'ready' && 'ok' // 'ok'
三目运算符写法
var state = 'ready' var start = state === 'ready' ? 'ok' : false // 'ok'
如果是if...else...结构,会这样写。
var state = 'ready' var start = '' if (state === 'ready') start === 'ok' // 'ok'
参数重载(个数重载)
当第二个参数(下标是1)在arguments中,则返回'two params',否则返回'one params'。var paramsFun = function(a, b) { return (1 in arguments && 'two params') || 'one params' } paramsFun(2, 4) // 'two params' paramsFun(2) // 'one params'
三目运算符写法
var paramsFun = function(a, b) { return 1 in arguments ? 'two params' : 'one params' } paramsFun(2, 4) // 'two params' paramsFun(2) // 'one params'
我们再来看看if...else的版本
var paramsFun = function(a, b) { if(1 in arguments) return 'two params' else return 'one params' } paramsFun(2, 4) // 'two params' paramsFun(2) // 'one params'
参数重载(类型重载)
通过1 in arguments来判断是否存在第二个参数,以及通过判断参数的类型执行不同的内容。var paramsFun = function(a, b) { return (1 in arguments && (typeof a ==='string' ? 'two / a is string' : 'two / a is not string')) || 'one params' } paramsFun(2, 4) // "two / a is not string" paramsFun('', 4) // "two / a is string"
if...else写法
var paramsFun = function(a, b) { if(1 in arguments) { if(typeof a ==='string') return 'two / a is string' return 'two / a is not string' } return 'one params' } paramsFun(2, 4) // "two / a is not string" paramsFun('', 4) // "two / a is string"
CSS操作
Zepto中包含部分CSS黑科技。获取属性值的方法
非内联CSS我们没法获取到值的,这是可以使用getComputedStyle来获取计算后的样式。document.body.style.display // '' getComputedStyle(document.body, '').getPropertyValue('display') // 'block'
添加Style的方法
element = document.createElement('P') element.style.cssText += ';color:red;' element.style.color // 'red'
Boolean操作
快速转换成Boolean
使用!!操作可以快速将数据类型转为布尔值。!!null // false Boolean(null) // false
日期操作
快速获取时间戳
使用+new Date()可以快速将日期转为时间戳var now = new Date(); console.log(+now) // 1502506825489 console.log(now.getTime()) // 1502506825489
数组操作
数组去重
var uniq = function(array){ return [].filter.call(array, function(item, idx){ return array.indexOf(item) == idx }) } uniq([1,2,3,3]) // (3) [1, 2, 3]
数组清洗(去除null和undefined和空字符串)
function compact(array) { return [].filter.call(array, function(item){ return item != null && item != '' }) } compact([1,2,3,3,undefined,null,'']) // [1, 2, 3, 3]
字符串操作
快速转换成字符串
var x = 555 console.log('' + x) // "555"
CSS命名方式转驼峰命名方式
var camelize = function(str){ return str.replace(/-+(.)?/g, function(match, chr){ return chr ? chr.toUpperCase() : '' }) } camelize('font-size') // "fontSize"
驼峰转CSS命名方式
function dasherize(str) { return str.replace(/::/g, '/') .replace(/([A-Z]+)([A-Z][a-z])/g, '$1_$2') .replace(/([a-z\d])([A-Z])/g, '$1_$2') .replace(/_/g, '-') .toLowerCase() } dasherize('fontSize') // "font-size"
对象操作
在闭包中修改引用会修改原对象
对象是引用类型,实际上是修改的被引用的对象。var x = {}; (function(y){ y.test = 66 })(x) console.log(x) // {test: 66}
对象中的this指向当前的上一个位置
这个表述可能不够严谨。在这里是z属性中的this指向了上一层的y,所以this输出了y里面的对象。var x = {} x.y = {} x.y.z = function(){ console.log(this) } x.y.z() // {z: ƒ}
判断
浏览器类型判断
用正则表达式匹配navigator.userAgent中的信息来判断浏览器类型。var ua = navigator.userAgent // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.101 Safari/537.36" var platform = navigator.platform var webkit = ua.match(/Web[kK]it[\/]{0,1}([\d.]+)/), android = ua.match(/(Android);?[\s\/]+([\d.]+)?/), osx = !!ua.match(/\(Macintosh\; Intel /), ipad = ua.match(/(iPad).*OS\s([\d_]+)/), ipod = ua.match(/(iPod)(.*OS\s([\d_]+))?/), iphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/), webos = ua.match(/(webOS|hpwOS)[\s\/]([\d.]+)/), win = /Win\d{2}|Windows/.test(platform), wp = ua.match(/Windows Phone ([\d.]+)/), touchpad = webos && ua.match(/TouchPad/), kindle = ua.match(/Kindle\/([\d.]+)/), silk = ua.match(/Silk\/([\d._]+)/), blackberry = ua.match(/(BlackBerry).*Version\/([\d.]+)/), bb10 = ua.match(/(BB10).*Version\/([\d.]+)/), rimtabletos = ua.match(/(RIM\sTablet\sOS)\s([\d.]+)/), playbook = ua.match(/PlayBook/), chrome = ua.match(/Chrome\/([\d.]+)/) || ua.match(/CriOS\/([\d.]+)/), firefox = ua.match(/Firefox\/([\d.]+)/), firefoxos = ua.match(/\((?:Mobile|Tablet); rv:([\d.]+)\).*Firefox\/[\d.]+/), ie = ua.match(/MSIE\s([\d.]+)/) || ua.match(/Trident\/[\d](?=[^\?]+).*rv:([0-9.].)/), webview = !chrome && ua.match(/(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/), safari = webview || ua.match(/Version\/([\d.]+)([^S](Safari)|[^M]*(Mobile)[^S]*(Safari))/)
欢迎关注前端进阶指南微信公众号:
另外我也创了一个对应的QQ群:660112451,欢迎一起交流。
相关文章推荐
- zepto 源码分析2 - 编码技巧 & 函数实现
- 【oschina android源码分析】总结
- Springboot源码分析学习资料总结
- SSH框架总结(框架分析+环境搭建+实例源码下载)
- live555库的rtsp服务器源码分析总结,流程详解RTSPServer .
- EasyUI学习总结(四)——parser源码分析
- Android动画总结系列(3)——补间动画源码分析
- Linux内核源码分析--内存管理(二、函数实现技巧)
- EasyUI学习总结(三)——easyloader源码分析
- Android动画总结系列(5)——属性动画源码分析(Aniamtor/ValueAnimator)
- SSH框架总结(框架分析+环境搭建+实例源码下载)--这个很值得一读~!
- Java显式锁学习总结之六:Condition源码分析
- Android事件分发总结(无源码分析)
- SSH框架总结(框架分析+环境搭建+实例源码下载)
- Zepto源码分析-动画(fx fx_method)模块
- Zepto源码分析-ajax模块
- 一个普通的 Zepto 源码分析(三)
- Zepto源码分析(1)——类型判断函数
- uboot移植与源码分析总结(3)-Serial驱动分析
- nginx源码分析--从源码看nginx框架总结