牛小葵

牛气冲天 一举夺魁

  • 主页
  • JavaScript
  • 读书笔记
  • VUE
所有文章 关于我

牛小葵

牛气冲天 一举夺魁

  • 主页
  • JavaScript
  • 读书笔记
  • VUE

学习underscore的防冲突与 Utility Functions

2019-03-09

摘要:学习冴羽的博客研究 underscore 的防冲突与 Utility Functions

_.noConflict

防冲突:在执行前先将_对象保存下来,然后在执行 _.noConflict 函数时将存储的_对象赋给全局对象,最后返回 underscore 对象

1
2
3
4
5
var previousUnderscore = root._
_noConflict = function() {
root._ = previousUnderscore;
return this;
}

使用:

1
2
3
var $ = _.noConflict()
var _ = {value: 1}
console.log(_.value) // 1

_.identity

返回传入的值

1
2
3
_.identity = function(value) {
return value;
}

_.constant

_.constant 函数接收参数 value ,然后返回一个返回该 value 的函数

1
2
3
4
5
_.constan = function(value) {
return function() {
return value;
}
}

_.noop

_.noop 是一个空函数

1
_.noop = function() {};

使用 _.noop 可以作为默认值,省去是否存在的判断:

1
2
3
4
5
6
7
8
9
10
11
12
// 不使用 _.noop
function test(value, callback) {
// 每次使用 callback 都要判断一次
_.isFunction(callback) && callback()
}
// 使用 _.noop
function test(value, callback) {
// 先判断一次
if(!_.isFunction(callback)) callback = _.noop;
// 之后可以随意调用不报错
callback()
}

deepGet

用于获得深层次的属性值,如果其中一层没有找到,返回 undefined

1
2
3
4
5
6
7
8
var deepGet = function(obj, path) {
var length = path.length;
for (var i = 0; i < length; i++) {
if (obj == null) return void 0;
obj = obj[path[i]];
}
return length ? obj : void 0;
};

使用:

1
2
3
4
5
6
var test = {
data: {
value: 'hello'
}
}
deepGet(test, ['data', 'value'])

shallowProperty

shallowProperty 函数接受一个键名,返回一个返回该键值的函数

1
2
3
4
5
var shallowProperty = function(key) {
return function(obj) {
return obj == null ? void 0 : obj[key];
}
}

使用 shallowProperty 可以更加便捷:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var list = [
{
value: 1
},
{
value: 2
},
]
// 不使用
list.map(function(item) {
return item.value;
})
// 使用
list.map(shallowProperty(value))

_.property

_.property 结合了 deepGet 和 shallowProperty

1
2
3
4
5
6
7
8
_.property = function(path) {
if (!_.isArray(path)) {
return shallowProperty(path);
}
return function(obj) {
return deepGet(obj, path);
};
};

_.propertyOf

_.propertyOf 接收一个对象,然后返回一个函数,这个函数将返回一个提供的属性的值。

1
2
3
4
5
6
7
8
_.propertyOf = function(obj) {
if (obj == null) {
return function(){};
}
return function(path) {
return !Array.isArray(path) ? obj[path] : deepGet(obj, path);
};
};

_.random

_.random 回一个 min 和 max 之间的随机整数,该随机值有可能是 min 或 max

1
2
3
4
5
6
7
_.random = function(min, max) {
if (max == null) {
max = min;
min = 0;
}
return min + Math.floor(Math.random() * (max - min + 1));
};
  • JavaScript
  • underscore
《你不知道的 Chrome 调试技巧》笔记
学习underscore中restArgs函数
© 2023 牛小葵
Hexo Theme Yilia by Litten
  • 所有文章
  • 关于我

tag:

  • CSS
  • JavaScript
  • Flex
  • 工具
  • HTML
  • JSON
  • 浏览器
  • node
  • MongoDB
  • Vue
  • 笔记
  • 正则
  • 数据结构与算法
  • underscore
  • 小程序
  • 压缩
  • 总结
  • 目标
  • 设计模式
  • HTTP
  • 【安全】
  • Chrome

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录(注意不是yilia根目录)执行以下命令:
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置:

      jsonContent:
        meta: false
        pages: false
        posts:
          title: true
          date: true
          path: true
          text: false
          raw: false
          content: false
          slug: false
          updated: false
          comments: false
          link: false
          permalink: false
          excerpt: false
          categories: false
          tags: true
    

持续学习