typeOf

typeOf: function (obj) {
return toString.call(obj).slice(8, -1)
}

每个对象都有一个 toString() 方法,当对象被表示为文本值时或者当以期望字符串的方式引用对象时,该方法被自动调用。默认情况下,toString() 方法被每个继承自Object的对象继承。如果此方法在自定义对象中未被覆盖,toString() 返回 "[object type]",其中type是对象类型。

Object.prototype.toString()

也就是说当调用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源码的更多相关文章

  1. 分享一个utils.js源码

    NEJ.define([ './global.js', '{platform}util.js' ],function(NEJ,_h,_p,_o,_f,_r){ /* * 查看数据是否指定类型 * @p ...

  2. vue.js源码精析

    MVVM大比拼之vue.js源码精析 VUE 源码分析 简介 Vue 是 MVVM 框架中的新贵,如果我没记错的话作者应该毕业不久,现在在google.vue 如作者自己所说,在api设计上受到了很多 ...

  3. 从template到DOM(Vue.js源码角度看内部运行机制)

    写在前面 这篇文章算是对最近写的一系列Vue.js源码的文章(https://github.com/answershuto/learnVue)的总结吧,在阅读源码的过程中也确实受益匪浅,希望自己的这些 ...

  4. Vue.js源码——事件机制

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/an ...

  5. 从Vue.js源码角度再看数据绑定

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/an ...

  6. 【转】从Vue.js源码看异步更新DOM策略及nextTick

    在使用vue.js的时候,有时候因为一些特定的业务场景,不得不去操作DOM,比如这样: <template> <div> <div ref="test" ...

  7. Vue.js 源码分析(一) 代码结构

    关于Vue vue是一个兴起的前端js库,是一个精简的MVVM.MVVM模式是由经典的软件架构MVC衍生来的,当View(视图层)变化时,会自动更新到ViewModel(视图模型),反之亦然,View ...

  8. Vue.js 源码构建(三)

    Vue.js 源码是基于 Rollup 构建的,它的构建相关配置都在 scripts 目录下. 构建脚本 通常一个基于 NPM 托管的项目都会有一个 package.json 文件,它是对项目的描述文 ...

  9. vue源码分析—Vue.js 源码构建

    Vue.js 源码是基于 Rollup 构建的,它的构建相关配置都在 scripts 目录下.(Rollup 中文网和英文网) 构建脚本 通常一个基于 NPM 托管的项目都会有一个 package.j ...

  10. 2018-11-23 手工翻译Vue.js源码:尝试重命名标识符与文本

    续前文: 手工翻译Vue.js源码第一步:14个文件重命名 对core/instance/索引中的变量, 方法进行重命名如下(题图): import { 混入初始化 } from './初始化' im ...

随机推荐

  1. findViewById(R.id.btn_first) 给写成 R.layout.

    窗体内放了个按钮, findViewById(R.id.btn_first) 给写成 R.layout. 在java 里边引用结果就是找不到那个id 找了半天找不到原因, 奔着网上常见R找不到的问题, ...

  2. Nodejs初识随笔

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效. Node.js 单线程运行,不 ...

  3. Mac 电脑设置显示路径

    # 设置 defaults write com.apple.finder _FXShowPosixPathInTitle -bool TRUE;killall Finder # 删除 defaults ...

  4. Json 简记

    JSON : JavaScript Object Notation ---- JavaScript 对象表示语法 Json  比  XML 小,比 xml 快 ==================== ...

  5. 《Linux就该这么学》第四天课程

     秦时明月经典语录: 侠道:五步之内,百人不当.十年磨剑,一孤侠道——荆轲 我发了一些课堂笔记,供你们参考 原创地址:https://www.linuxprobe.com/chapter-03.htm ...

  6. /bin/bash: /bin/java: Is a directory 解决

    Hadoop执行 mapreduce报错 -- ::, INFO mapreduce.Job: map % reduce % -- ::, INFO mapreduce.Job: Job job_15 ...

  7. 2019.03.04 bzoj5308: [Zjoi2018]胖(二分答案+st表)

    传送门 想题5分钟调题两小时系列 其实还是我tcl 读完题之后自然会知道一个关键点能够更新的点是一段连续的区间,于是我们对于每个点能到的左右区间二分答案,用ststst表维护一下查询即可. 代码: # ...

  8. Java中资料的上传与下载

    1.导架包 <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons ...

  9. Html5与Css3知识点拾遗(七)

    布局 实例:规范的命名和编排 <body> <div class="page"><!--page开始--> <header class=& ...

  10. git dev 分支merge到master

    code reviewer之后,需要把dev分支的代码merge到master分支.通过在azkaban的服务器上git pull,最终将代码上线. git dev 分支merge到master # ...