diff --git a/README.md b/README.md index 2b9ba63..ffff14e 100644 --- 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) diff --git a/questions/0.前端工作进阶需要哪些必备技能.md b/questions/0.前端工作进阶需要哪些必备技能.md index 4e061ec..630d10f 100644 --- a/questions/0.前端工作进阶需要哪些必备技能.md +++ b/questions/0.前端工作进阶需要哪些必备技能.md @@ -3,4 +3,4 @@ ## 1.熟悉各种链工具的使用,包括但不限于webpack,rollup,less,babel,代理配置等 ## 2.了解前后端分离开发模式,熟悉对接流程 ## 3.了解持续集成工具teamcity的基本流程 -## 4.掌握icon-font原理,知晓图标使用方式 \ No newline at end of file +## 4.掌握icon-font原理,知晓图标使用方式 diff --git a/questions/43.利用响应式编写组件代码的新思路.md b/questions/43.利用响应式编写组件代码的新思路.md new file mode 100644 index 0000000..dc4f8e3 --- /dev/null +++ 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; + } +} + +``` \ No newline at end of file