题目
实现一个 css选择器
示例:
// 参考规则
const rules = {
'a': {
height: 0,
width: 10
},
'#page .content a': {
height: 5
},
'#page a': {
height: 10,
display: 'block'
}
}
// 权重定义,#element(100) > .element(10) > element(1)
const WEIGHT = {
'#': 100,
'.': 10,
_default: 1,
}
const getRules = path => {
// your code here
}
console.log(getRules('a'));
//输出:{height: 0, width: 10}
console.log(getRules('#page a'));
//输出:{height: 10, width: 10, display: "block"}
console.log(getRules('#page .content a'));
//输出:{height: 5, width: 10, display: "block"}
分析
在看到题目的时候有点懵逼, 比较混乱不会到从何下手, 所以我提出了一下问题:
- 该rules对象的属性都是指向的同一个元素吗?
- 只存在后带选择器吗?
经过反复思考, 得出一下结论:
应该是指向的同一个元素,
因为: 如果不指向同一个元素, 那么 #root a 和#page .content a怎么处理? 这两个选择器从可能性上讲, 是有可能选中了同一个, 也有可能选中不同客, 那么具体的返回值是要加上#root a 的值呢还是不加呢? 为了避免出现这样的歧义, 应该是指向的同一个元素。
只存在后代的关系吗? 是不是存在>子代的关系呢?
应该是只存在后代选择器的, 否则也会出现歧义。
分析到这里总结下, relus里面的选择器都指向同一个元素, 并且只有后代关系, 这种情况下就只需要判断他们的权值大小, 并且从最小的权值开始添加属性, 后面的可以覆盖前面权值较小的属性的属性值。 有点绕!!!!需要多理解一下!
我的答案
const getRules = path => {
// your code here
const getWeights = path => {//这是一个获取选择器权值的函数
let arr = path.split(' ')
let q = arr.reduce(function (a, b) {
if(b[0] === '#'){
a += 100
}else if (b[0] === '.'){
a += 10
}else {
a += 1
}
return a
}, 0)
return q
}
let weights = getWeights(path)//得到目标选择器的权值
let arr = []
for(let key of Object.keys(rules)) {//遍历relus里的key,得到权值小于等于目标选择器权值的key
if( weights >= getWeights(key)){
arr.push({key: key, weights: getWeights(key)})
}
}
return arr.sort( (a, b) => a.weights - b.weights).reduce((a, b) => Object.assign(a, rules[b.key]), {})//从小的权值开始向{}上赋值并返回最终的对象
}
结尾
代码中使用了sort排序, reduce合并 ,Object.asign浅赋值。如果感觉不好理解需要多补补相关知识。 最后, 如果有错, 谢谢指正!