js 正则是否包含某些字符串_我从Vue源码中学到的一些JS编程技巧
在我们面试的过程中,经常会遇到问源码的环节,因为优秀的框架通常都会包含很多设计理念跟编程实践。这段时间我一直在看Vue2
的源码,发现了很多有意思的实现。虽然现在Vue3
都已经发布了,也无法否认Vue2
是个优秀的框架这个事实,不影响我们从中学到一些最佳实践。
对Vue
不感兴趣的同学也可以看看,因为我只是谈论一些我从这个框架的实现上学到的一些JavaScript
的用法,不涉及Vue
的概念。
- 获取HTML格式的字符串中非标签文本(vue/src/compiler/parser/entity-decoder.js)
假设我们有这样一个字符串:
var html = '<span class="red">hello world</span> <span>hello xxx</span>'
。我们现在想要提取其中非标签的文本,拿到如下结果:
'hello world hello xxx'
。这该怎么办?我们首先想到的肯定是正则表达式,但是这个场景下正则表达式写起来肯定很烦,我们来看看Vue
的开发者是怎么处理的:
- 既然这个字符串是
HTML
文本格式,我们就可以把它解析成对应的HTML
元素。 HTML
元素的textContent
属性可以用来获取HTML
元素中的文本内容。
代码如下:
function decoder(html){let decoder = document.createElement('div')decoder.innerHTML = htmlconsole.log(decoder.textContent)// return decoder.textContent
}
这个代码创建了一个div
元素作为容器,然后通过设置innerHTML
把字符串转换成对应的HTML
元素,最后就可以通过textContent
属性来获取文本内容了。
- 确定运行环境(vue/src/core/util/env.js)
随着前端的高速发展,我们已经可以在多个环境中运行JavaScript
代码,为了针对不同的运行环境作出调整,我们需要知道我们的代码跑在哪个环境下,我们来看看Vue
是怎么确定运行时环境的:
const inBrowser = typeof window !== 'undefined'
const inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform
const weexPlatform = inWeex && WXEnvironment.platform.toLowerCase()
const UA = inBrowser && window.navigator.userAgent.toLowerCase()
const isIE = UA && /msie|trident/.test(UA)
const isIE9 = UA && UA.indexOf('msie 9.0') > 0
const isEdge = UA && UA.indexOf('edge/') > 0
const isAndroid = (UA && UA.indexOf('android') > 0) || (weexPlatform === 'android')
const isIOS = (UA && /iphone|ipad|ipod|ios/.test(UA)) || (weexPlatform === 'ios')
const isChrome = UA && /chrome/d+/.test(UA) && !isEdge
const isPhantomJS = UA && /phantomjs/.test(UA)
const isFF = UA && UA.match(/firefox/(d+)/)
如果我们的代码是运行在浏览器中,那我们肯定会拿到一个window
对象,所以我们可以通过const inBrowser = typeof window !== 'undefined'
这种方式来判断环境。
而且在浏览器中,我们可以通过window
对象拿到浏览器的userAgent
,
不同的浏览器对应的userAgent
也不同,像IE
的userAgent
总是会包含MSIE
,而Chrome
的userAgent
会包含Chrome
。类似地安卓系统的浏览器userAgent
就会带Android
。那我们通过userAgent
就可以判断当前用的是什么浏览器,运行在什么操作系统上。上面的代码中已经列举出了对主流的浏览器跟操作系统的判断,注意由于Edge
浏览器最新版本也基于Chromium
内核,所以它的userAgent
也会包含Chrome
,所以我们要写const isChrome = UA && /chrome/d+/.test(UA) && !isEdge
这样的代码来判断当前环境是Chrome
。
- 确定一个函数是不是用户自定义的(vue/src/core/util/env.js)
一般我们使用的就两种函数,环境提供给我们的跟我们用户自己定义的,这两种函数在转换成字符串时表现形式是不同的:
Array.isArray.toString() // "function isArray() { [native code] }"
function fn(){}
fn.toString() // "function fn(){}"
环境自带函数调用toString
方法后总是会返回类似function fnName() { [native code] }
格式的字符串,我们可以利用这一点来区分函数类型:
function isNative (Ctor){return typeof Ctor === 'function' && /native code/.test(Ctor.toString())
}
- 实现只执行一次的函数(vue/src/shared/util.js)
很多时候我们需要一个函数只被执行一次,就算它被调用多次,也只有第一次调用时会被执行,所以我们可以写出如下代码:
function once (fn) {let called = falsereturn function () {if (!called) {called = truefn.apply(this, arguments)}}
}
这样后续再执行时我们会直接跳过,这里是使用高阶函数来实现的,感兴趣的可以看看我之前的文章JavaScript高级技巧。我们来测试一下这个方法:
可以看到test
方法只被执行了一次。
- 缓存函数执行结果(vue/src/shared/util.js)
这个我也在之前的博客中提到过的,有时候函数执行比较耗时,我们想缓存执行的结果。这样当后续被调用时,如果参数相同,我们可以跳过计算直接返回结果。我们需要的就是实现一个cached
函数,这个函数接受实际被调用的函数作为参数,然后返回一个包装的函数。在这个cached
函数里,我们可以用一个对象或者Map
来缓存结果。
function cached(fn){const cache = Object.create(null);return function cachedFn (str) {if ( !cache[str] ) {let result = fn(str);cache[str] = result;}return cache[str]}
}
- 转换命名风格(vue/src/shared/util.js)
我们每个人使用的编程风格可能都不一样,有人喜欢驼峰写法,有人喜欢小横杠连接符,为了解决这个问题,我们可以写一个函数去做统一的转换。(比如把a-b-c转换成aBC)
const camelizeRE = /-(w)/g
const camelize = cached((str) => {return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '')
})
camelize('a-b-c')
// "aBC"
- 确定对象的类型(vue/src/shared/util.js)
在JavaScript中,有六种基本类型(Boolean, Number, String, Null, Undefined, Symbol)跟一个对象类型,但其实对象类型是可以细分到许多类型的,一个对象可以是数组,也可以是函数等等。我们有没有办法获得它确切的类型呢?
我们可以利用Object.prototype.toString
把一个对象转换成一个字符串,如果是我们用{}
创建的对象,这个方法总是返回[object Object]
。
而对于数组,正则表达式等环境自带的对象类型,它们会返回不同的结果。
基于这个特性我们可以判断一个对象是不是我们用{}
创建的对象了:
function isPlainObject (obj){return Object.prototype.toString.call(obj) === '[object Object]'
}
而且我们注意到,Object.prototype.toString()
的返回值总是以[object tag]
的形式出现,如果我们只想要这个tag
,我们可以把其他东西剔除掉,这边比较简单用正则或者String.prototype.slice()
都可以。
function toRawType (value) {const _toString = Object.prototype.toStringreturn _toString.call(value).slice(8, -1)
}
toRawType(null) // "Null"
toRawType(/sdfsd/) //"RegExp"
这样我们就可以拿到一个变量的类型了。
- 把值转换成字符串(vue/src/shared/util.js)
我们经常需要把一个值转换成字符串,在JavaScript
里面,我们有两种方式来得到字符串:
- String()
- JSON.stringify()
不过这两种方式的实现机制是不同的:
我们里看到,他们是基于完全不同的规则去转换字符串的,String(arg)
会尝试调用arg.toString()
或者arg.valueOf()
,那么那我们该用哪个比较好?
- 对于
null
跟undefined
,我们希望把它转成空字符串 - 当转换一个数组或者我们创建的对象时,我们会使用
JSON.stringify
- 如果对象的
toString
方法被重写了,那我们会偏向使用String()
- 其它情况下,一般都用
String()
为了匹配上面的需求,Vue
开发者是这么实现的:
function isPlainObject (obj){
return Object.prototype.toString.call(obj) === '[object Object]'
}
function toString (val) {
if(val === null || val === undefined) return ''
if (Array.isArray(val)) return JSON.stringify(val)
if (isPlainObject(val) && val.toString === Object.prototype.toString)
return JSON.stringify(val)
return String(val)
}
又是收获满满的一天,通过阅读优秀框架的代码实现可以快速地提高我们对语言的运用,加强我们对于一些特性的理解,总结出一些编程实践,我们的编程能力也在无形中得到质的飞跃,非常建议大家深入学习一门语言时就去阅读用那个语言实现的优秀代码。对于JavaScript
而言我们光讨论了Vue
的这三个源码文件就学到这么多东西,还有比这更开心的事吗?希望本文也能给大家带来一些帮助,happy coding~
js 正则是否包含某些字符串_我从Vue源码中学到的一些JS编程技巧相关推荐
- js正则匹配闭合标签_我从Vue源码中学到的一些JS编程技巧
在我们面试的过程中,经常会遇到问源码的环节,因为优秀的框架通常都会包含很多设计理念跟编程实践.这段时间我一直在看Vue2的源码,发现了很多有意思的实现.虽然现在Vue3都已经发布了,也无法否认Vue2 ...
- 小肩膀POST+JS第三期(价值1000元)_高清带源码
小肩膀POST+JS第三期(价值1000元)_高清带源码 .课程整体介绍 2.谷歌开发者工具 3.火狐firebug组件 4.火狐开发者工具 5.HTTP Analyzer V7 6.Fiddler ...
- diff算法_深入剖析Vue源码 - 来,跟我一起实现diff算法!__Vue.js
这一节,依然是深入剖析Vue源码系列,上几节内容介绍了Virtual DOM是Vue在渲染机制上做的优化,而渲染的核心在于数据变化时,如何高效的更新节点,这就是diff算法.由于源码中关于diff算法 ...
- vue 二维数组_最近研究Vue源码时我发现的一些好玩函数
来源 | segmentfault.com/u/chinamasters 作者 | chinamasters 最近在深入研究vue源码,把学习过程中,看到的一些好玩的的函数方法收集起来做分享,希望对大 ...
- js 正则是否包含某些字符串_js 正则包含字符
展开全部 js 正则表达式检测是否包含特殊字符32313133353236313431303231363533e4b893e5b19e31333337396239,代码如下: var title='j ...
- js 正则是否包含某些字符串_js判断字符串是否包含某个字符串
Q2:JS判断字符串变量是否含有某个字串的实现方法 JS判断字符串变量是否含有某个字串的实现方法varCts = "bblText";if(Cts.indexOf("Te ...
- get vue 和set 用法_深入剖析Vue源码 - 数据代理,关联子父组件
简单回顾一下这个系列的前两节,前两节花了大篇幅讲了vue在初始化时进行的选项合并.选项配置是vue实例化的第一步,针对不同类型的选项,vue提供的丰富选项配置策略以保证用户可以使用不同丰富的配置选项. ...
- vue 代理设置 访问图片_详解Vue源码之数据的代理访问
概念解析: 1) 数据代理: 通过一个对象代理对另一个对象(在前一个对象内部)中属性的操作(读/写) 2) vue 数据代理: 通过 vm 对象(即this)来代理 data 对象中所有属性的操作 3 ...
- js 正则是否包含某些字符串_JS 判断字符串中是否包含某个字符串(方法总结)...
我是想在js中判断字符串是否包含某个中文,将方法记录起来,这些方法也适用于数字.字母.实践是检验真理的唯一标准,还是要多多测试啊. String对象的方法 方法一:indexOf() var grou ...
最新文章
- 一天一个设计模式之建造者模式(Builder)
- dependency报红_解决IDEA中Maven依赖包导入失败报红问题(总结最有效8种解决方案)...
- 二维码的生成和扫描识别
- linux nvidia 361.run,Ubuntu 16.04安装nVidia驱动失败!
- VC-SDK路报(预备知识与概念介绍)
- 天猫精灵 AIoT 平台将研发门槛从1000万降至40万,缩减 3 倍研发周期
- java webengine_webview – JavaFX 8 WebEngine:如何从java到console.log()从java到System.out?
- 一个简单的基于 DirectShow 的播放器 1(封装类)
- CriminalIntent项目开发
- Python FastAPI 微信公众号后台服务器验证
- 机器学习常见算法分类
- 【程序员小助手】Emacs,最强编辑器,没有之一
- idea运行java项目js中文乱码如何解决
- 大连理工大学电路计算机,大连理工大学电路计算机辅助分析实验报告精要.pdf...
- 微信小程序实现扫一扫功能
- 聊天室小程序服务端源码(客户端接下一条)
- vscode和sqlite3的环境配置
- esp8266连接mqtt服务器
- 江苏省小学生计算机装备标准,江苏省小学信息技术装备标准new.doc
- 以太坊学习6--智能合约的在线IDE工具
热门文章
- [网络安全自学篇] 九十.远控木马详解及APT攻击中的远控和防御
- C# 系统应用之ListView控件 (二).加载选中节点文件夹下文件信息
- PyTorch 加载超大 Libsvm 格式数据
- 2020\Simulation_1\1.15.125GB
- linux系统添加新用户并赋予相应权限
- 大数据WEB阶段(十九)Threadlocal
- 【STM32】输入捕获程序
- rsync + inotify
- 大林算法计算机控制实验报告,大林算法
- php 累,php 记录进行累结果