isObjEmpty/once function/template rendering/cdn的实现和解释

发表于 |

总结了几种判断 Object 是否为空的方法
总结 once function (只执行一次函数代码)
实现两种简单的字符串模板替换方法
重新归纳总结了下CDN和DNS的名词解释

once function 让函数只执行一次

这里利用了闭包很好的保存了内层函数的返回值内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 定义
const once = (fn, context) => {
 var result

 return function () {
  if (fn) {
   result = fn.apply(context || this, arguments)
   fn = null
  }

  return result
 }
}

// 使用
let logOnce = once(function () {
 return Array.prototype.slice.call(arguments)[0]
})

logOnce(4,5)  // get 4
logOnce(6,7)  // get 4

实现简单的模板字符串替换

经常会有下面的需求：

1
2
3
4
5
6
7
let template = `我叫{{name}}, 我的性别是{{sex}}`
let person = {
 name: 'Seven',
 sex: 'female'
}

console.log('我叫Seven, 我的性别是female')

下面是一种简单的实现，把模板和对象，结合为目标字符串，方法1如下。

1
2
3
4
const parseTemplateByRegFunc = (obj, template) => {
 return template.replace(/\{\{(.*?)\}\}/g, (match, key) => obj[key.trim()])
}
parseTemplateByRegFunc({name: 'seven'}, '我叫{{ name}}') // 我叫seven

方法2比较容易想到，实现如下：

1
2
3
4
5
6
7
8
const parseTemplateByObjectKeys = (obj, template) => {
 Object.keys(obj).forEach(key => {
  template = template.replace(new RegExp(`{{\\s*${key}\\s*}}`, 'g'), obj[key])
 })

 return template
}
parseTemplateByObjectKeys({name: 'seven'}, '我叫{{ name}}') // 我叫seven

简单的把 obj 里面每个key 都替换一次。方法1用到的是replace的特性。

关于 CDN

DNS 是域名解析系统，它作为将域名和IP地址相互映射的一个分布式数据库，能够使人更方便地访问互联网。其中有一项技术是会找到一个合适的IP给用户。这种根据每台机器的负载量，该机器离用户地理位置的距离等等，返回合适的IP的技术称之为 DNS 重定向。CDN就是利用的DNS重定向技术。

CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。

上面的内容以前是知道的，这里重新归纳了下。

isObjEmpty 的实现（判断对象是否为空）

使用 for … in，如果进入了循坏，代表对象不为空：

1
2
3
4
5
6
for (let key in obj) {
 if (obj.hasOwnProperty(key)) {
  return false
 }
}
return true

使用 Object keys， 得到空数组，则代表对象为空：

1
return Object.keys(obj).length === 0

使用 JSON.stringify 和 空对象对比：

1
return JSON.stringify(obj) === JSON.stringify({})