diff --git a/README.md b/README.md index 443d300..a0307b1 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@ FineUI 100个问题题,带你走进FineUI的世界 - [5、关于组件引用的奥秘,ref知多少](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/3.关于组件引用的奥秘,ref知多少.md) - [6、使用ButtonGroup控制可点击组件的控制选中状态](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/4.使用ButtonGroup控制可点击组件的控制选中状态.md) - [7、我们为什么要设计el这个属性](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/40.我们为什么要设计el这个属性.md) -- [9、z-index究竟是怎么回事](./z-index解析以及在FineUI中使用原则.md) +- [9、z-index解析以及在FineUI中使用原则](./questions/9.z-index解析以及在FineUI中使用原则.md) - [10、computed通俗易懂的原理解析和日常排错](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/1.如何获取当前时间.md) - [11、绝对布局的隐藏知识点](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/41.绝对布局的隐藏知识点.md) - [12、如何灵活应用布局组件,尽可能的减少DOM数量?](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/41.绝对布局的隐藏知识点.md) @@ -40,12 +40,12 @@ FineUI 100个问题题,带你走进FineUI的世界 - [7、combo的一些特性详解](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/80.combo的一些特性详解.md) - [8、利用响应式编写组件代码的新思路](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/43.利用响应式编写组件代码的新思路.md) - [9、如何提供异步配置的接口](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/44.如何提供异步配置的接口.md) -- [10、Fix.set和Fix.del是为了解决什么问题?]() -- [11、Fix中数组的使用技巧]() +- [10、Fix.set和Fix.del是为了解决什么问题?](./questions/10.Fix.set和Fix.del是为了解决什么问题.md) +- [11、Fix中对数组、对象的操作技巧](./questions/11.Fix中对数组、对象的操作技巧.md) - [12、computed进行列表组件的状态控制](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/21.computed%E8%BF%9B%E8%A1%8C%E5%88%97%E8%A1%A8%E7%BB%84%E4%BB%B6%E7%9A%84%E7%8A%B6%E6%80%81%E6%8E%A7%E5%88%B6.md) - [13、如何在开发中有效减少dom数量]() - [14、怎么实现一个树形控件]() -- [15、开发时必须三思的事情都有哪些]() +- [15、]() - [16、为什么不推荐使用同步的watch]() - [17、处理树结构的常用算法]() - [18、组件生命周期与Model状态控制](https://code.fineres.com/projects/BUSSINESS/repos/nuclear-webui/pull-requests/9193/diff/#packages/bi-webui/src/modules/conf/pack/analysis/transfer/operator/dimension/combo/combo.tsx) diff --git a/questions/10.Fix.set和Fix.del是为了解决什么问题.md b/questions/10.Fix.set和Fix.del是为了解决什么问题.md new file mode 100644 index 0000000..7159e2f --- /dev/null +++ b/questions/10.Fix.set和Fix.del是为了解决什么问题.md @@ -0,0 +1,55 @@ +# Fix.set和Fix.del是为了解决什么问题 + +为了知道Fix.set和Fix.del是做什么的,首先要清楚Fix有哪些场景watch不到. + +熟悉Vue的同学肯定知道,Vue2.0版本中的`$set`和`$delete`,其实原理是类似的 + +```javascript + state: function () { + return { + obj: { + a: 1, + }, + arr: [0, 1], + }; + }, + + watch: { + "obj.b": function () { + console.log(this.model.obj); + }, + "arr.2": function () { + console.log(this.model.obj); + }, + }, + + actions: { + changeArr: function () { + // 这两种形式都不能触发watch + this.model.obj.b = 2; + this.model.arr[2] = 2; + }, + }, +``` +`Fix.set`在修改对象属性后会手动触发一次通知,因此原本无法watch到变更的场景又可以了. +```javascript + Fix.set(this.model.obj, "b", 2); + Fix.set(this.model.arr, 2, 2); +``` +同样的,`Fix.del`可以正常触发对删除属性的watch +```javascript + watch: { + "obj.a": function () { + console.log(this.model.obj); + }, + }, + + actions: { + changeArr: function () { + // delete this.model.obj.a; + Fix.del(this.model.obj, "a"); + }, + }, +``` + +很多数情况下我们不借助`Fix.set`和`Fix.delete`也能实现功能,例如后续讲到的[11、Fix中对数组、对象的操作技巧](./11.Fix中对数组、对象的操作技巧.md)也可以解决我们的一些问题 diff --git a/questions/11.Fix中对数组、对象的操作技巧.md b/questions/11.Fix中对数组、对象的操作技巧.md new file mode 100644 index 0000000..d483198 --- /dev/null +++ b/questions/11.Fix中对数组、对象的操作技巧.md @@ -0,0 +1,78 @@ +# Fix中对数组、对象的操作技巧 + +Fix编程中状态控制采用数组,对象等非基础数据类型的场景很多,相信大多数人在接触Fix的时候都会遇到这些困惑:"为什么我明明改了值,但是没watch到呢?" + +下面结合几个示例 + +## 修改数组内子元素,期望watch到数组改变 + +对数组进行push,pop会可以watch到数组的变化,这是我们所熟知的 +我们修改了列表中的某一项,期望触发watch,从而重新渲染整个列表,但是并未得偿所愿. + +```javascript + state: function () { + return { + arr: [{ value: 1 }, { value: 2 }], + }; + }, + + watch: { + arr: function () { + console.log(this.model.arr); + // do populate + }, + }, + + actions: { + changeArr: function () { + // 这样写法并不能触发watch + this.model.arr[0] = { value: 0 }; + }, + }, +``` +从内部原理上讲可以简单理解为修改数组的某一项,整个数组的引用并未发生改变,所以也就不会触发通知. + +那想办法使数组的引用变了就可以了.常用的技巧是使用`splice`方法 +```javascript + // 利用splice修改某个索引位置元素 + this.model.arr.splice(0, 1, { value: 0 }); + + // 或者通过splice(0, 0)的技巧触发数组引用改变.常用于修改较深层次的对象解构,用该方式触发数组watch + this.model.arr[0].value = 0; + this.model.arr.splice(0, 0); +``` + +## 修改了对象的某个属性,期望watch到对象变化 + +修改对象属性,增删改属性,想通过watch到整个obj的变更来进行重新渲染. +(对象属性可以通过obj.* Fix.set等方式处理,暂不在本篇论述) +```javascript + state: function () { + return { + obj: { + a: 1, + }, + }; + }, + + watch: { + obj: function () { + console.log(this.model.obj); + }, + }, + + actions: { + changeArr: function () { + // 这样写法并不能触发watch + this.model.obj.a = 2; + this.model.obj.b = 1; + }, + }, +``` +同对数组的操作一样,我们同样需要想办法改变对象的引用.常用的方法是使用传统`BI.extend`或者es6的解构操作符 +```javascript + // 通过解构产生一个全新的对象 + this.model.obj = { ...this.model.obj, a: 2, b: 1 }; + // 类似于Object.assign,注意用第一个参数的空对象来产生新的引用 + this.model.obj = BI.extend({}, this.model.obj, { a: 2, b: 1 }); +``` diff --git a/questions/2.获取时间日期方法.md b/questions/2.获取时间日期方法.md new file mode 100644 index 0000000..a62d50b --- /dev/null +++ b/questions/2.获取时间日期方法.md @@ -0,0 +1,10 @@ +# FineUI中获取时间日期方法 + +```javascript +// 获取当前时间 +BI.getDate() // Sun Oct 09 2022 16:41:57 GMT+0800 (中国标准时间) +// 根据时间戳获取时间 +BI.getDate(1665304924353) // Sun Oct 09 2022 16:42:04 GMT+0800 (中国标准时间) +// 动态参数,依次为 year, month, day, hour, minute, second, millisecond +BI.getDate(2022,9) // Sat Oct 01 2022 00:00:00 GMT+0800 (中国标准时间) +``` diff --git a/questions/20.如何监听元素大小变化.md b/questions/20.如何监听元素大小变化.md index 209d013..ab7bdac 100644 --- a/questions/20.如何监听元素大小变化.md +++ b/questions/20.如何监听元素大小变化.md @@ -9,3 +9,5 @@ `BI.ResizeDetector.addResizeListener`则是真实的监听组件元素大小改变,常用于计算动态宽高等场景 注意事项:有添加监听必有取消监听,要注意再组建销毁时移除掉事件监听,有两种形式,一种是在添加监听的方法会返回一个移除当前监听的函数,调用即可.另一种是调用`BI.Resizers.remove`和`BI.ResizeDetector.removeResizeListener`方法 + +额外话: `BI.ResizeDetector`现阶段采用的实现方案是对元素附加一个额外的div,通过监听scroll事件变相实现的. 为了拥抱未来,后续会改成`ResizeObserver`实现 diff --git a/questions/z-index解析以及在FineUI中使用原则.md b/questions/9.z-index解析以及在FineUI中使用原则.md similarity index 100% rename from questions/z-index解析以及在FineUI中使用原则.md rename to questions/9.z-index解析以及在FineUI中使用原则.md