asf
获得徽章 0
. provide/inject
provide/inject 是 Vue.js 中用于跨组件传递数据的一种高级技术，它可以将数据注入到一个组件中，然后让它的所有子孙组件都可以访问到这个数据。通常情况下，我们在父组件中使用 provide 来提供数据，然后在子孙组件中使用 inject 来注入这个数据。
使用 provide/inject 的好处是可以让我们在父组件和子孙组件之间传递数据，而无需手动进行繁琐的 props 传递。它可以让代码更加简洁和易于维护。但需要注意的是，provide/inject 的数据是非响应式的，这是因为provide/inject是一种更加底层的 API，它是基于依赖注入的方式来传递数据，而不是通过响应式系统来实现数据的更新和同步。
具体来说，provide方法提供的数据会被注入到子组件中的inject属性中，但是这些数据不会自动触发子组件的重新渲染，如果provide提供的数据发生了变化，子组件不会自动感知到这些变化并更新。
如果需要在子组件中使用provide/inject提供的数据，并且希望这些数据能够响应式地更新，可以考虑使用Vue的响应式数据来代替provide/inject。例如，可以将数据定义在父组件中，并通过props将其传递给子组件，子组件再通过$emit来向父组件发送数据更新的事件，从而实现响应式的数据更新。
下面是一个简单的例子，展示了如何在父组件中提供数据，并在子孙组件中注入这个数据：
<!-- 父组件 -->
<template>
<div>
<ChildComponent />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
provide: {
message: 'Hello from ParentComponent',
},
components: {
ChildComponent,
},
};
</script>
#挑战每日一条沸点#
provide/inject 是 Vue.js 中用于跨组件传递数据的一种高级技术，它可以将数据注入到一个组件中，然后让它的所有子孙组件都可以访问到这个数据。通常情况下，我们在父组件中使用 provide 来提供数据，然后在子孙组件中使用 inject 来注入这个数据。
使用 provide/inject 的好处是可以让我们在父组件和子孙组件之间传递数据，而无需手动进行繁琐的 props 传递。它可以让代码更加简洁和易于维护。但需要注意的是，provide/inject 的数据是非响应式的，这是因为provide/inject是一种更加底层的 API，它是基于依赖注入的方式来传递数据，而不是通过响应式系统来实现数据的更新和同步。
具体来说，provide方法提供的数据会被注入到子组件中的inject属性中，但是这些数据不会自动触发子组件的重新渲染，如果provide提供的数据发生了变化，子组件不会自动感知到这些变化并更新。
如果需要在子组件中使用provide/inject提供的数据，并且希望这些数据能够响应式地更新，可以考虑使用Vue的响应式数据来代替provide/inject。例如，可以将数据定义在父组件中，并通过props将其传递给子组件，子组件再通过$emit来向父组件发送数据更新的事件，从而实现响应式的数据更新。
下面是一个简单的例子，展示了如何在父组件中提供数据，并在子孙组件中注入这个数据：
<!-- 父组件 -->
<template>
<div>
<ChildComponent />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
provide: {
message: 'Hello from ParentComponent',
},
components: {
ChildComponent,
},
};
</script>
#挑战每日一条沸点#
展开
评论
点赞
1. 字符串的自动匹配（Array.includes）
在写代码时我们经常会遇到这样的需求，我们需要检查某个字符串是否是符合我们的规定的字符串之一。最常见的方法就是使用||和===去进行判断匹配。但是如果大量的使用这种判断方式，定然会使得我们的代码变得十分臃肿，写起来也是十分累。其实我们可以使用Array.includes来帮我们自动去匹配。
代码示例：
// 未优化前的写法 const isConform = (letter) => { if ( letter === "a" || letter === "b" || letter === "c" || letter === "d" || letter === "e" ) { return true; } return false; }; // 优化后的写法 const isConform = (letter) => ["a", "b", "c", "d", "e"].includes(letter);
2.for-of和for-in自动遍历
for-of和for-in，可以帮助我们自动遍历Array和object中的每一个元素,不需要我们手动跟更改索引来遍历元素。
注:我们更加推荐对象(object)使用for-in遍历，而数组(Array)使用for-of遍历
for-of
const arr = ['a',' b', 'c']; // 未优化前的写法 for (let i = 0; i < arr.length; i++) { const element = arr[i]; console.log(element); } // 优化后的写法 for (const element of arr) { console.log(element); } // expected output: "a" // expected output: "b" // expected output: "c"
for-in
const obj = { a: 1, b: 2, c: 3, }; // 未优化前的写法 const keys = Object.keys(obj) #挑战每日一条沸点#
在写代码时我们经常会遇到这样的需求，我们需要检查某个字符串是否是符合我们的规定的字符串之一。最常见的方法就是使用||和===去进行判断匹配。但是如果大量的使用这种判断方式，定然会使得我们的代码变得十分臃肿，写起来也是十分累。其实我们可以使用Array.includes来帮我们自动去匹配。
代码示例：
// 未优化前的写法 const isConform = (letter) => { if ( letter === "a" || letter === "b" || letter === "c" || letter === "d" || letter === "e" ) { return true; } return false; }; // 优化后的写法 const isConform = (letter) => ["a", "b", "c", "d", "e"].includes(letter);
2.for-of和for-in自动遍历
for-of和for-in，可以帮助我们自动遍历Array和object中的每一个元素,不需要我们手动跟更改索引来遍历元素。
注:我们更加推荐对象(object)使用for-in遍历，而数组(Array)使用for-of遍历
for-of
const arr = ['a',' b', 'c']; // 未优化前的写法 for (let i = 0; i < arr.length; i++) { const element = arr[i]; console.log(element); } // 优化后的写法 for (const element of arr) { console.log(element); } // expected output: "a" // expected output: "b" // expected output: "c"
for-in
const obj = { a: 1, b: 2, c: 3, }; // 未优化前的写法 const keys = Object.keys(obj) #挑战每日一条沸点#
展开
评论
点赞
1. 自定义指令（Custom Directives）
Vue.js中的指令可以帮助我们操作DOM元素，比如v-model指令可以将输入框和数据绑定起来，v-show指令可以根据条件显示或隐藏元素。但是Vue.js也允许我们创建自定义指令，从而扩展它的功能。自定义指令可以用来处理DOM事件、操作DOM属性、添加样式等等。
下面是一个例子，我们创建一个自定义指令v-delay，它可以延迟触发点击事件：
<template>
<button v-delay="500" @click="handleClick">点击我</button>
</template>
<script>
export default {
directives: {
delay: {
inserted: function (el, binding) {
el.addEventListener('click', function () {
setTimeout(function () {
binding.value()
}, binding.arg)
})
}
}
},
methods: {
handleClick: function () {
console.log('点击事件被延迟触发了')
}
}
}
</script>
在上面的代码中，我们定义了一个自定义指令v-delay并将它绑定到按钮上，它的参数是500，也就是延迟500ms触发点击事件。我们在指令的inserted钩子中监听点击事件，并使用setTimeout函数延迟触发binding.value()，也就是handleClick函数。
2. 动态组件（Dynamic Components）
Vue.js允许我们使用一个组件来动态渲染另一个组件，这使得我们可以根据需要动态地切换组件。
#挑战每日一条沸点#
3. 插槽（Slots）
Vue.js中的插槽是一种强大的功能，它允许我们将子组件的内容插入到父组件中，从而创建灵活的组件结构。
Vue.js中的指令可以帮助我们操作DOM元素，比如v-model指令可以将输入框和数据绑定起来，v-show指令可以根据条件显示或隐藏元素。但是Vue.js也允许我们创建自定义指令，从而扩展它的功能。自定义指令可以用来处理DOM事件、操作DOM属性、添加样式等等。
下面是一个例子，我们创建一个自定义指令v-delay，它可以延迟触发点击事件：
<template>
<button v-delay="500" @click="handleClick">点击我</button>
</template>
<script>
export default {
directives: {
delay: {
inserted: function (el, binding) {
el.addEventListener('click', function () {
setTimeout(function () {
binding.value()
}, binding.arg)
})
}
}
},
methods: {
handleClick: function () {
console.log('点击事件被延迟触发了')
}
}
}
</script>
在上面的代码中，我们定义了一个自定义指令v-delay并将它绑定到按钮上，它的参数是500，也就是延迟500ms触发点击事件。我们在指令的inserted钩子中监听点击事件，并使用setTimeout函数延迟触发binding.value()，也就是handleClick函数。
2. 动态组件（Dynamic Components）
Vue.js允许我们使用一个组件来动态渲染另一个组件，这使得我们可以根据需要动态地切换组件。
#挑战每日一条沸点#
3. 插槽（Slots）
Vue.js中的插槽是一种强大的功能，它允许我们将子组件的内容插入到父组件中，从而创建灵活的组件结构。
展开
评论
点赞
If-Else 用 || 或 ?? 运算符进行简化
逻辑或操作符||，这里要注意的是0和''也会认为是false
如果||前面的值是0 '' false null undefined NaN其中的任意一种，则直接返回||后面的值
function(obj){
var a = obj || {}
}
// 等价于 =>>
function(obj){
var a;
if(
obj === 0 ||
obj === "" ||
obj === false ||
obj === null ||
obj === undefined ||
isNaN(obj)
){
a = {}
} else {
a = obj;
}
}
空值合并操作符??如果没有定义左侧返回右侧。如果是，则返回左侧。
这种方法非常实用，有时候仅仅只是想判断一个字段有没有值，而不是把空字符串或者0也当做false处理
function(obj){
var a = obj ?? {}
}
// 等价于 =>>
function(obj){
var a;
if(
obj === null ||
obj === undefined
){
a = {}
} else {
a = obj;
}
}
输入框非空的判断（有时候不想把0当成false可以用此方法。比如分数0也是个值，这种情况就不能认为是false）
if(value !== null && value !== undefined && value !== ''){}
// 等价于 ==>
if((value ?? '') !== ''){ #挑战每日一条沸点#
展开
评论
点赞
技能知识点
技能知识点就是我们掌握的编程语言、技术框架和工具。
相较于项目经历，技能知识点更关键，因为它决定了面试者是否能够胜任岗位。
image.png
在技能知识点方面，面试者常见的问题有这些：
不胜任岗位：基础不扎实，不熟悉常用库的原理
技术不对口：没有岗位需要的领域技术
技术过剩：能力远远超出岗位要求
第一种情况就是我们常说的“技术不行”。很多人仅仅在工作里遇到不会的才学习，工作多年也没有自己的知识体系，在面试的时候很容易被基础知识点问倒，还给自己找理由说“我是高级开发还问这么细节的，面试官只会八股文”。框架也是浅尝辄止，会用就不再深入学了，这在面试的时候也很容易被问住。
第二种情况，是岗位工作内容属于细分领域，但面试者不具备这方面的经验，比如音视频、跨端等。为了避免这种情况，我们需要打造自己的细分领域技能，最好有一个擅长的方向，越早越好。
第三种情况简单的来说就是“太贵了”。有时候一些资深点的开发面试被挂掉，并不是因为你的能力有问题，而是因为岗位的预算有限。大部分业务需求都是增删改查和界面展示，并不需要多复杂的经验。这种情况下，要么再去看看更高级的岗位，要么降低预期。 #挑战每日一条沸点#
技能知识点就是我们掌握的编程语言、技术框架和工具。
相较于项目经历，技能知识点更关键，因为它决定了面试者是否能够胜任岗位。
image.png
在技能知识点方面，面试者常见的问题有这些：
不胜任岗位：基础不扎实，不熟悉常用库的原理
技术不对口：没有岗位需要的领域技术
技术过剩：能力远远超出岗位要求
第一种情况就是我们常说的“技术不行”。很多人仅仅在工作里遇到不会的才学习，工作多年也没有自己的知识体系，在面试的时候很容易被基础知识点问倒，还给自己找理由说“我是高级开发还问这么细节的，面试官只会八股文”。框架也是浅尝辄止，会用就不再深入学了，这在面试的时候也很容易被问住。
第二种情况，是岗位工作内容属于细分领域，但面试者不具备这方面的经验，比如音视频、跨端等。为了避免这种情况，我们需要打造自己的细分领域技能，最好有一个擅长的方向，越早越好。
第三种情况简单的来说就是“太贵了”。有时候一些资深点的开发面试被挂掉，并不是因为你的能力有问题，而是因为岗位的预算有限。大部分业务需求都是增删改查和界面展示，并不需要多复杂的经验。这种情况下，要么再去看看更高级的岗位，要么降低预期。 #挑战每日一条沸点#
展开
评论
点赞
在 ES5 中,我们可以定义一个对象,并且对其进行操作(添加或查找),如下代码所示:
const moment = {
age: 18,
address: "西安",
};
moment["hobby"] = "basketball";
moment.hight = 1.59;
console.log(moment.age); // 18
那如果我们要对该对象进行监听呢,我们希望可以监听到这个对象中的属性被设置或获取的过程,我们可以通过属性描述符中的存储属性来做到这个功能。
属性描述符
在 ES5 中,所有的属性都具备了属性描述符,具体使用如下图所示:
image.png
就像上图所展示的一样,这个普通的对象属性对应的属性描述符,可不仅仅是一个18,它还包含另外三个特性,它们分别是:
writable;
enumerable;
configurable;
在创建普通户型时,属性描述符会使用默认值,我们可以使用 Object.defineProperty(...) 来添加一个新属性或者修改一个已有属性(当该属性 Configurable 的值为 true 时)并对特性进行设置,具体如下代码所示:
const moment = {
age: 18,
address: "西安",
};
Object.defineProperty(moment, "address", {
value: "肇庆",
writable: true,
configurable: true,
enumerable: true, #挑战每日一条沸点#
});
console.log(moment.address); // 肇庆
该方法接收三个参数,它们分别为:
要定义属性的对象;
要定义或修改的属性的名称或 Symbol;
要定义或修改的属性描述符;
const moment = {
age: 18,
address: "西安",
};
moment["hobby"] = "basketball";
moment.hight = 1.59;
console.log(moment.age); // 18
那如果我们要对该对象进行监听呢,我们希望可以监听到这个对象中的属性被设置或获取的过程,我们可以通过属性描述符中的存储属性来做到这个功能。
属性描述符
在 ES5 中,所有的属性都具备了属性描述符,具体使用如下图所示:
image.png
就像上图所展示的一样,这个普通的对象属性对应的属性描述符,可不仅仅是一个18,它还包含另外三个特性,它们分别是:
writable;
enumerable;
configurable;
在创建普通户型时,属性描述符会使用默认值,我们可以使用 Object.defineProperty(...) 来添加一个新属性或者修改一个已有属性(当该属性 Configurable 的值为 true 时)并对特性进行设置,具体如下代码所示:
const moment = {
age: 18,
address: "西安",
};
Object.defineProperty(moment, "address", {
value: "肇庆",
writable: true,
configurable: true,
enumerable: true, #挑战每日一条沸点#
});
console.log(moment.address); // 肇庆
该方法接收三个参数,它们分别为:
要定义属性的对象;
要定义或修改的属性的名称或 Symbol;
要定义或修改的属性描述符;
展开
评论
点赞
1. 早上不要开会 
每个人一天是 24 小时，时间是均等的，但是时间的价值却不是均等的，早上 1 小时的价值是晚上的 4 倍。为什么这么说？
因为早晨是大脑的黄金时间，经过一晚上的睡眠，大脑经过整理、记录、休息，此时的状态是最饱满的，适合专注度高的工作，比如编程、学习外语等，如果把时间浪费在开会、刷手机等低专注度的事情上，那么就会白白浪费早上的价值。
2. 不要使用番茄钟 🍅
有时候在专心编程的时候，会产生“心流”，心流是一种高度专注的状态，当我们专注的状态被打破的时候，需要 15 分钟的时候才能重新进入状态。
有很多人推荐番茄钟工作法，设定 25 分钟倒计时，强制休息 5 分钟，之后再进入下一个番茄钟。本人在使用实际使用这种方法的时候，经常遇到的问题就是刚刚进入“心流”的专注状态，但番茄钟却响了，打破了专注，再次进入这种专注状态需要花费 15 分钟的时间。 #挑战每日一条沸点#
每个人一天是 24 小时，时间是均等的，但是时间的价值却不是均等的，早上 1 小时的价值是晚上的 4 倍。为什么这么说？
因为早晨是大脑的黄金时间，经过一晚上的睡眠，大脑经过整理、记录、休息，此时的状态是最饱满的，适合专注度高的工作，比如编程、学习外语等，如果把时间浪费在开会、刷手机等低专注度的事情上，那么就会白白浪费早上的价值。
2. 不要使用番茄钟 🍅
有时候在专心编程的时候，会产生“心流”，心流是一种高度专注的状态，当我们专注的状态被打破的时候，需要 15 分钟的时候才能重新进入状态。
有很多人推荐番茄钟工作法，设定 25 分钟倒计时，强制休息 5 分钟，之后再进入下一个番茄钟。本人在使用实际使用这种方法的时候，经常遇到的问题就是刚刚进入“心流”的专注状态，但番茄钟却响了，打破了专注，再次进入这种专注状态需要花费 15 分钟的时间。 #挑战每日一条沸点#
展开
评论
点赞
水滴低代码平台简介
京东水滴平台面向企业内部后台管理系统场景，提供可视化搭建等低代码配置、构建及部署能力。
水滴画布作为水滴低代码的核心能力之一，具备灵活、易用的特点，用户可以通过简单拖拉拽的方式，在不需要具备前端知识的前提下，即可搭建出理想的页面。下面将为大家介绍水滴低代码画布的设计与实现。
低代码画布的概念及类型
画布的概念： 用户可以向画布中添加物料，并对物料进行拖/拉/拽布局，搭建出自己想要的页面。
这个概念延伸于艺术家的画板，画家在绘画的过程中，会将颜料进行调色，并在画布中进行绘制。而低代码平台用户在页面搭建的过程中，需要选择相应的物料，在画布中使用拖拉拽的方式放置到正确的位置，并对物料进行一些属性配置来达到最理想的展示效果。用户的搭建过程与艺术家的绘制方式非常的相似，因此这个概念也来源于此
#挑战每日一条沸点#
京东水滴平台面向企业内部后台管理系统场景，提供可视化搭建等低代码配置、构建及部署能力。
水滴画布作为水滴低代码的核心能力之一，具备灵活、易用的特点，用户可以通过简单拖拉拽的方式，在不需要具备前端知识的前提下，即可搭建出理想的页面。下面将为大家介绍水滴低代码画布的设计与实现。
低代码画布的概念及类型
画布的概念： 用户可以向画布中添加物料，并对物料进行拖/拉/拽布局，搭建出自己想要的页面。
这个概念延伸于艺术家的画板，画家在绘画的过程中，会将颜料进行调色，并在画布中进行绘制。而低代码平台用户在页面搭建的过程中，需要选择相应的物料，在画布中使用拖拉拽的方式放置到正确的位置，并对物料进行一些属性配置来达到最理想的展示效果。用户的搭建过程与艺术家的绘制方式非常的相似，因此这个概念也来源于此
#挑战每日一条沸点#
展开
评论
点赞
企业级项目下css处理痛点
统一的变量维护困难。
大量的 className 负担。
HTML, CSS分离造成的编写负担。
响应式，主题切换实现复杂。
更多痛点，请看 CSS Utility Classes and "Separation of Concerns"
针对上述问题，我们可以通过 tailwindcss 来进行解决。下面我们来看其具体用法。
安装
yarn add tailwindcss postcss autoprefixer -D
初始化tailwindcss.config.js配置文件，并且也会创建postcss.config.js文件。
// -p 表示创建一个基础的配置文件
npx tailwindcss init -p
// tailwindcss.config.js
/** @type {import('tailwindcss').Config} */
export default {
// tailwindcss 应用的文件范围
content: ['./index.html', './src/**/*.{vue,js}'],
theme: {
extend: {},
},
plugins: [],
}
将加载 Tailwind 的指令添加到你的 CSS 文件中
@tailwind base;
@tailwind components;
@tailwind utilities;
在元素上使用内置类名
#挑战每日一条沸点#
统一的变量维护困难。
大量的 className 负担。
HTML, CSS分离造成的编写负担。
响应式，主题切换实现复杂。
更多痛点，请看 CSS Utility Classes and "Separation of Concerns"
针对上述问题，我们可以通过 tailwindcss 来进行解决。下面我们来看其具体用法。
安装
yarn add tailwindcss postcss autoprefixer -D
初始化tailwindcss.config.js配置文件，并且也会创建postcss.config.js文件。
// -p 表示创建一个基础的配置文件
npx tailwindcss init -p
// tailwindcss.config.js
/** @type {import('tailwindcss').Config} */
export default {
// tailwindcss 应用的文件范围
content: ['./index.html', './src/**/*.{vue,js}'],
theme: {
extend: {},
},
plugins: [],
}
将加载 Tailwind 的指令添加到你的 CSS 文件中
@tailwind base;
@tailwind components;
@tailwind utilities;
在元素上使用内置类名
#挑战每日一条沸点#
展开
评论
点赞