update

2 years ago · 545611b486
3 changed files with 185 additions and 17 deletions
--- a/README.md
+++ b/README.md
@ -12,28 +12,29 @@ FineUI 100个问题题,带你走进FineUI的世界

 ### 基础

- [0、前端工作进阶需要哪些必备技能](./questions/0.前端工作进阶需要哪些必备技能.md)
- [1、前端如何正确书写资源路径](./questions/50.前端如何正确书写资源路径.md)
- [2、组件的代码设计基本思路](./questions/2.组件的代码设计基本思路.md)
- [3、关于组件引用的奥秘,ref知多少](./questions/3.关于组件引用的奥秘,ref知多少.md)
- [4、使用ButtonGroup控制可点击组件的控制选中状态](./questions/4.使用ButtonGroup控制可点击组件的控制选中状态.md)
+- [0、前端工作进阶需要哪些必备技能](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/0.前端工作进阶需要哪些必备技能.md)
+- [1、前端如何正确书写资源路径](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/50.前端如何正确书写资源路径.md)
+- [2、组件的代码设计基本思路](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/2.组件的代码设计基本思路.md)
+- [3、关于组件引用的奥秘,ref知多少](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/3.关于组件引用的奥秘,ref知多少.md)
+- [4、使用ButtonGroup控制可点击组件的控制选中状态](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/4.使用ButtonGroup控制可点击组件的控制选中状态.md)

 ### 布局篇

- [3、我们为什么要设计el这个属性](./questions/40.我们为什么要设计el这个属性.md)
- [4、绝对布局的隐藏知识点](./questions/41.绝对布局的隐藏知识点.md)
- [5、何时会滚动,滚动条位置如何贴边,究竟是怎么回事](./questions/42.何时会滚动,滚动条位置如何贴边,究竟是怎么回事.md)
+- [5、我们为什么要设计el这个属性](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/40.我们为什么要设计el这个属性.md)
+- [6、绝对布局的隐藏知识点](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/41.绝对布局的隐藏知识点.md)
+- [7、何时会滚动,滚动条位置如何贴边,究竟是怎么回事](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/42.何时会滚动,滚动条位置如何贴边,究竟是怎么回事.md)

 ### Fix数据流篇

- [4、Fix中对于对象属性的监听,为什么要先定义属性才可以正常watch,如何解决](./questions/55.Fix中对于对象属性的监听,为什么要先定义属性才可以正常watch,如何解决.md)
+- [8、Fix中对于对象属性的监听,为什么要先定义属性才可以正常watch,如何解决](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/55.Fix中对于对象属性的监听,为什么要先定义属性才可以正常watch,如何解决.md)

 ### 进阶

- [1、高阶组件的render-props](./questions/4.高阶组件的render-props.md)
- [1、如何获取当前时间](./questions/1.如何获取当前时间.md)
- [2、如何格式化输出日期](./questions/2.如何格式化输出日期.md)
- [3、为什么传递时间信息时候推荐使用时间戳](./questions/3.为什么传递时间信息时候推荐使用时间戳.md)
- [4、BI.config都可以做那些事情](./questions/9.BI.config都可以做那些事情.md)
- [5、BI.config的执行顺序是什么,为什么这么设计](./questions/10.BI.config的执行顺序是什么,为什么这么设计.md)
- [6、combo的一些特性详解](./questions/80.combo的一些特性详解.md)
+- [9、高阶组件的render-props](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/4.高阶组件的render-props.md)
+- [10、如何获取当前时间](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/2.如何格式化输出日期.md)
+- [12、为什么传递时间信息时候推荐使用时间戳](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/3.为什么传递时间信息时候推荐使用时间戳.md)
+- [13、BI.config都可以做那些事情](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/9.BI.config都可以做那些事情.md)
+- [14、BI.config的执行顺序是什么,为什么这么设计](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/10.BI.config的执行顺序是什么,为什么这么设计.md)
+- [15、combo的一些特性详解](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/80.combo的一些特性详解.md)
+- [16、利用响应式编写组件代码的新思路](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/43.利用响应式编写组件代码的新思路.md)
--- a/questions/0.前端工作进阶需要哪些必备技能.md
+++ b/questions/0.前端工作进阶需要哪些必备技能.md
@ -3,4 +3,4 @@
 ## 1.熟悉各种链工具的使用,包括但不限于webpack,rollup,less,babel,代理配置等
 ## 2.了解前后端分离开发模式,熟悉对接流程
 ## 3.了解持续集成工具teamcity的基本流程
-## 4.掌握icon-font原理,知晓图标使用方式
+## 4.掌握icon-font原理,知晓图标使用方式
--- a/questions/43.利用响应式编写组件代码的新思路.md
+++ b/questions/43.利用响应式编写组件代码的新思路.md
@ -0,0 +1,167 @@
+有了响应式,我们在开发组件的时候也可以体验到数据双向绑定.省去了进行状态控制需要额外定义store的流程
+
+类似于Fix.Model, 我们约定state属性用来保存状态,在beforeCreate生命周期中定义.
+
+```js
+
+const Pager = BI.inherit(BI.Widget, {
+    props: {
+        total: 1,
+        page: 1,
+    },
+
+    beforeCreate: function () {
+        this.state = Fix.define({
+            currentPage: this.options.page,
+            total: this.options.total,
+        });
+    },
+
+    render: function () {
+
+        return {
+            type: "bi.vertical_adapt",
+            columnSize: [24, 24, "fill", "", 24, 24],
+            hgap: 5,
+            items: [
+                {
+                    type: "bi.icon_button",
+                    cls: "pre-page-h-font",
+                    disabled: () => {
+                        return this.state.currentPage === 1;
+                    },
+                    handler: () => {
+                        this.state.currentPage = 1;
+                        this.fireEvent("EVENT_CHANGE", this.getValue());
+                    },
+                }, {
+                    type: "bi.icon_button",
+                    cls: "pre-page-h-font",
+                    disabled: () => {
+                        return this.state.currentPage === 1;
+                    },
+                    handler: () => {
+                        this.state.currentPage--;
+                        this.fireEvent("EVENT_CHANGE", this.getValue());
+                    },
+                }, {
+                    type: "bi.text_editor",
+                    ref: ref => this.editor = ref,
+                    value: () => this.state.currentPage,
+                    validationChecker: (v) => (BI.parseInt(v) >= 1) && (BI.parseInt(v) <= this.state.total),
+                    errorText: "error",
+                    listeners: [
+                        {
+                            eventName: "EVENT_CHANGE",
+                            action: () => {
+                                this.state.currentPage = BI.parseInt(this.editor.getValue());
+                                this.fireEvent("EVENT_CHANGE", this.getValue());
+                            },
+                        },
+                    ],
+                }, {
+                    type: "bi.label",
+                    text: () => "/" + this.state.total,
+                }, {
+                    type: "bi.icon_button",
+                    cls: "next-page-h-font",
+                    disabled: () => {
+                        return this.state.currentPage === this.state.total;
+                    },
+                    handler: () => {
+                        this.state.currentPage++;
+                        this.fireEvent("EVENT_CHANGE", this.getValue());
+                    },
+                }, {
+                    type: "bi.icon_button",
+                    cls: "next-page-h-font",
+                    disabled: () => {
+                        return this.state.currentPage === this.state.total;
+                    },
+                    handler: () => {
+                        this.state.currentPage = this.state.total;
+                        this.fireEvent("EVENT_CHANGE", this.getValue());
+                    },
+                },
+            ],
+        };
+    },
+
+    getValue: function () {
+        return this.state.currentPage;
+    },
+
+    populate: function () {
+        this.state.currentPage = this.options.page;
+        this.state.total = this.options.total;
+    },
+});
+
+BI.shortcut("pager", Pager);
+
+let pager;
+
+BI.createWidget({
+    type: "bi.vertical",
+    vgap: 20,
+    items: [
+        {
+            type: "pager",
+            ref: ref => pager = ref,
+            height: 24,
+            width: 250,
+            total: 100,
+            page: 2,
+        }, {
+            type: "bi.button",
+            text: "populate",
+            handler: () => {
+                pager.attr("total", 500);
+                pager.attr("page", 400);
+                pager.populate();
+            },
+        },
+    ],
+});
+
+```
+
+如果使用的是es6或者typescript开发,那么可以直接定义类的state属性
+
+```javascript
+import { shortcut } from "@core";
+
+@shortcut()
+export class Steps extends BI.Widget {
+
+    static xtype = "steps";
+
+    props = {
+        current: 1,
+    };
+
+    state = Fix.define({
+        current: 1,
+    });
+
+    beforeCreate() {
+        this.state.current = this.options.current;
+    }
+
+    render() {
+        return {
+            type: "bi.label",
+            text: () => `第${this.state.current}步`,
+        };
+    }
+
+    setValue(step) {
+        return this.state.current = step;
+    }
+
+    getValue() {
+        return this.state.current;
+    }
+}
+
+```