读vue-0.6-utils.js源码
typeOf
typeOf: function (obj) {
return toString.call(obj).slice(8, -1)
}
每个对象都有一个 toString() 方法,当对象被表示为文本值时或者当以期望字符串的方式引用对象时,该方法被自动调用。默认情况下,toString() 方法被每个继承自Object的对象继承。如果此方法在自定义对象中未被覆盖,toString() 返回 "[object type]",其中type是对象类型。
也就是说当调用toString方法去转换某个对象时,如果那个对象转换不成字符串就会返回"[object type]"这个,但是由于所有对象都继承自Object,所以默认情况下输出的是"[object object]",除非你改变toString的指向,也就是我们平时用的call、apply、bind。
我们会发现如果通过数组的toString是可以转换成字符串的,而借用Object的toString就会返回"[object Array]",我觉得主要还是因为Object里面的toString方法和其他类型的toString方法内部做的是不同的处理,这也就是为什么一定要借用Object里面的toString方法才行。
toText
toText: function (value) {
return (typeof value === 'string' ||
typeof value === 'boolean' ||
(typeof value === 'number' && value == value))
? value
: ''
}
排除NaN value == value,因为NaN不等于NaN,但我觉得作者这段代码写的并不好,一会用=一会又用并且这里也不涉及隐式转换。
也可以用switch来实现
toText: function (value) {
switch(typeof value){
case "string":
case "boolean":
case "number":
return value == value ? value : "";
default:
return "";
}
}
过滤数组重复项
unique: function (arr) {
var hash = utils.hash(),
i = arr.length,
key, res = []
while (i--) {
key = arr[i]
if (hash[key]) continue
hash[key] = 1
res.push(key)
}
return res
}
他这里是通过对象来实现过滤数组重复项的,因为对象不能有相同的key,作者在代码中经常使用utils.hash()这么一句话,这句话的意思是创建一个空对象,使用的是Object.create(null),使用这种方法创建对象的好处就是它不会继承任何对象的属性和方法。
除了用作者的这种方式,还可以用Map对象实现
unique: function (arr) {
var map = new Map(),
res = [];
arr.forEach(function(item){
map.set(item);
});
map.forEach(function(item,index){
res.push(index);
});
return res;
}
将字符串转成DOM元素
function toFragment (template) {
if (typeof template !== 'string') {
return template
}
// 如果是ID选择器则获取元素里面的内容
if (template.charAt(0) === '#') {
var templateNode = document.getElementById(template.slice(1))
// 如果获取不到元素则返回空
if (!templateNode) return
template = templateNode.innerHTML
}
// 这里创建一个div主要是想借用DOM的innerHTML方法
var node = document.createElement('div'),
// 创建一个文档片段,如果这里用createElement来创建元素那么就会多出一个无用的外层标签来。
frag = document.createDocumentFragment(),
child
// 去除空格
node.innerHTML = template.trim()
while (child = node.firstChild) {
frag.appendChild(child)
}
return frag
}
相关阅读:
createElement与createDocumentFragment的点点区别
Document.createDocumentFragment()
读vue-0.6-utils.js源码的更多相关文章
- 分享一个utils.js源码
NEJ.define([ './global.js', '{platform}util.js' ],function(NEJ,_h,_p,_o,_f,_r){ /* * 查看数据是否指定类型 * @p ...
- vue.js源码精析
MVVM大比拼之vue.js源码精析 VUE 源码分析 简介 Vue 是 MVVM 框架中的新贵,如果我没记错的话作者应该毕业不久,现在在google.vue 如作者自己所说,在api设计上受到了很多 ...
- 从template到DOM(Vue.js源码角度看内部运行机制)
写在前面 这篇文章算是对最近写的一系列Vue.js源码的文章(https://github.com/answershuto/learnVue)的总结吧,在阅读源码的过程中也确实受益匪浅,希望自己的这些 ...
- Vue.js源码——事件机制
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/an ...
- 从Vue.js源码角度再看数据绑定
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/an ...
- 【转】从Vue.js源码看异步更新DOM策略及nextTick
在使用vue.js的时候,有时候因为一些特定的业务场景,不得不去操作DOM,比如这样: <template> <div> <div ref="test" ...
- Vue.js 源码分析(一) 代码结构
关于Vue vue是一个兴起的前端js库,是一个精简的MVVM.MVVM模式是由经典的软件架构MVC衍生来的,当View(视图层)变化时,会自动更新到ViewModel(视图模型),反之亦然,View ...
- Vue.js 源码构建(三)
Vue.js 源码是基于 Rollup 构建的,它的构建相关配置都在 scripts 目录下. 构建脚本 通常一个基于 NPM 托管的项目都会有一个 package.json 文件,它是对项目的描述文 ...
- vue源码分析—Vue.js 源码构建
Vue.js 源码是基于 Rollup 构建的,它的构建相关配置都在 scripts 目录下.(Rollup 中文网和英文网) 构建脚本 通常一个基于 NPM 托管的项目都会有一个 package.j ...
- 2018-11-23 手工翻译Vue.js源码:尝试重命名标识符与文本
续前文: 手工翻译Vue.js源码第一步:14个文件重命名 对core/instance/索引中的变量, 方法进行重命名如下(题图): import { 混入初始化 } from './初始化' im ...
随机推荐
- node.js中使用 http-proxy 创建代理服务器
代理,也称网络代理,是一种特殊网络服务,允许一个终端通过代理服务与另一个终端进行非直接的连接,这样利于安全和防止被攻击. 代理服务器,就是代理网络用户去获取网络信息,就是信息的中转,负责转发. 代理又 ...
- 在桌面创建robotframework Ride的快捷方式启动RIDE
安装后robotframework-ride 后,每次启动时都要在Dos命令下启动 ,下面是创建快捷方式启动操作如下: 1.进入到python的安装目录的/Scripts目录下,找到ride.py文件 ...
- 转 node.js和 android中java加密解密一致性问题;
原文地址,请大家去原文博客了解; http://blog.csdn.net/linminqin/article/details/19972751 我保留一份,防止删除: var crypto = re ...
- linux学习第七天 (Linux就该这么学)
今天讲了chmod (权限 设置)和 chown(属性 设置),特殊权限:SUID u+s 数字法是4 x=s - = S,SGID g+s 数字法是2 x=s -=S,SBIT o+t x=t ...
- KD-树(上)
来自于https://zhuanlan.zhihu.com/p/23966698 思路篇 导语:kd 树是一种二叉树数据结构,可以用来进行高效的 kNN 计算.kd 树算法偏于复杂,本篇将先介绍以二叉 ...
- x64 assembler fun-facts(转载)
原文地址 While implementing the x64 built-in assembler for Delphi 64bit, I got to “know” the AMD64/EM64T ...
- s5-6 Linux 标准输出 系统优化 目录结构
标准输出 重定向符号 #> 1> 标准输出重定向 先把文件的内容清空 把内容放在文件的最后一行 #>> 1>> 追加重定向 把内容放 ...
- app已损坏,打不开。你应该将它移到废纸篓
首先声明: 有可能并非你安装的软件已损坏,而是Mac系统的安全设置问题,因为这些应用都是破解或者汉化的,那么解决方法就是临时改变Mac系统安全设置. 出现这个问题的解决方法: 修改系统配置:系统偏好设 ...
- js计算器---转
至今见过的一个还没问题的计算器,收藏在此. 转自javascript写的简单的计算器原文链接,谢分享! js部分 ar num=0,result=0,numshow="0"; va ...
- noi2015品酒大会(sa)
用常用的套路,排序之后从大到小插入height,用并查集维护即可. #include<iostream> #include<cstring> #include<cstdi ...