博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
迷你MVVM框架 avalonjs 组件编写指南
阅读量:5839 次
发布时间:2019-06-18

本文共 7342 字,大约阅读时间需要 24 分钟。

经过半年的宣传,已经有不少公司在使用应用于它们内外网应用或移动项目,比较大牌的客户有百度,搜狐,金山,边缘,去哪儿……最近成为去哪儿的前端架构师后,掌握更多资源,可以随使抓个人帮忙写文档做测试写UI,之前的种种诰病都会迅速被解决掉的。因此大家不需要担心什么,放心试用吧!

o_ecosphere.jpg

说说去哪儿的情况吧,现在我所在的酒店部门有一个40多号人的前端组,并且不断壮大。很早之前,他们就用我的重构他们的组件库OnionUI 。对于一个公司来说,组件库是一个重要的财富,能让我们更快地进行开发迭代。至于一般的业务开发,藉凭操作数据即操作DOM的机制,也是不费吹灰之力就能搞定。大头的还是组件,像阿狸的Kissy,成熟无比,组件应有尽用,这是我们奋斗的目标。因为去哪儿前端团队很早就使用的UI绑定了。

的UI绑定的语法如下:

ms-widget="uiName, id?, optsName? "
  • uiName,必选,一定要全部字母小写,表示组件的类型
  • id 可选 这表示新生成的VM的$id,方便我们从avalon.vmodels[id]中获取它操作它,如果它等于$,那么表示它是随机生成,与不写这个效果一样,框架会在uiName加上时间截,生成随机ID
  • optName 可选, 配置对象的名字。这是指框架会找离它最近那个VM作为目标,然后在上面找与它同名的一个对象。如果你没有指定, 那么这个配置对象的名字与组件的名字同名。

编写一个组件,我们非常注重它的可配置性。avalon的UI绑定拥有三处用于定义配置的地方。第一处,就是上面提到的,在一个已存的VM中定义一个对象(最好将它定义不可监听的,以$开头或放在$skipArray数组中)。 它相当于一个父类。让一组UI共享相同的配置。第二处是位于UI绑定的构造器中,我们可以通过avalon.ui[widgetName].defaults访问到。它是让同一种组件的所有实例都共享相同的配置。第三处是在定义ms-widget所在的元素上,添加一些HTML5 data-*属性,格式为data- widgetName - optionName,比如你想为suggest组件定义一个叫toggle的配置项,那么就应该写作data-suggest-toggle,如果是一个叫currentValue,那么要将它改成"连字符风格",即将大写变小写前面再加一横杠,data-suggest-current-value。它们是用来制定当前UI实例的。

好了,我们正式介绍如何编写组件本身。我们要记住一点,所有操作都与扫描机制息息相关,就像jQuery喜欢把它的API选择器引擎绑架在一起。为什么这样说呢,因为视图与代码分定义在不同的地方,只有经过扫描后,视图中的绑定才会挟持它们所在的元素节点与VM关联在一起。框架会默认在domReady之后扫描一次。如果这时我们用到的组件所对应的JS文件还没有加载好,那么当加载好后我们需要自己手动扫描。

require("avalon.dialog", function() {    avalon.define("test", function(vm) {        vm.$skipArray = ["dialog"]        vm.dialog = {            buttons: [{text: "ok"}, {text: "cancel"}]        }    })    avalon.scan()})

组件大抵都是以下样子,留意一下里面的注释:

//avalon 1.2.5 2014.4.2define(["avalon",    "text!avalon.tabs.tab.html", //这是组件用到的VM    "text!avalon.tabs.panel.html",    "text!avalon.tabs.close.html"],        function(avalon, tabHTML, panelHTML, closeHTML) {            var widget = avalon.ui.tabs = function(element, data, vmodels) {                var options = data.tabsOptions//★★★取得配置项                var vmodel = avalon.define(data.tabsId, function(vm) {                    avalon.mix(vm, options)//这视情况使用浅拷贝或深拷贝avalon.mix(true, vm, options)                    vm.$init = function() {//初始化组件的界面,最好定义此方法,让框架对它进行自动化配置                        avalon(element).addClass("ui-tabs ui-widget ui-widget-content ui-corner-all")                        // ★★★设置动态模板,注意模块上所有占位符都以“MS_OPTION_XXX”形式实现                        var tablist = tabHTML                                .replace("MS_OPTION_EVENT", vmodel.event)                                .replace("MS_OPTION_REMOVABLE", vmodel.removable ? closeHTML : "")                        //决定是重复利用已有的元素,还是通过ms-include-src引入新内部                        var contentType = options.contentType === "content" ? 0 : 1                        var panels = panelHTML.split("MS_OPTION_CONTENT")[contentType]                        element.innerHTML = vmodel.bottom ? panels + tablist : tablist + panels                        element.setAttribute("ms-class-1", "ui-tabs-collapsible:collapsible")                        element.setAttribute("ms-class-2", "tabs-bottom:bottom")                        avalon.scan(element, [vmodel].concat(vmodels))                    }                    vm.$remove = function() {//清空构成UI的所有节点,最好定义此方法,让框架对它进行自动化销毁                        element.innerHTML =  ""                    }                    //其他属性与方法                    vm.tabs = []                    vm.tabpanels = []                    vm.disable = function(index, disable) {                       //具体实现                    }                    vm.enable = function(index) {                      //具体实现                    }                    vm.add = function(config) {                      //具体实现                    }                     vm.remove = function(config) {                      //具体实现                    }                    vm.activate = function(event, index) {                       //具体实现                   }                })                return vmodel//必须返回组件VM            }            widget.defaults = {//默认配置项                collapsed: false,                active: 0, //默认打开第几个面板                event: "click", //切换面板的事件,移过(mouseenter)还是点击(click)                collapsible: false, //当切换面板的事件为click时,                bottom: false, //按钮位于上方还是上方                removable: false, //按钮的左上角是否出现X,用于移除按钮与对应面板                activate: avalon.noop, // 切换面板后触发的回调                contentType: "content"            }            return avalon        })

这里需要着重留意的是data里面有两个属性,一个叫"组件名+Options",是一个对象,如果它里面有widget+"Id"这个属性,那么新生成的VM就是用它作为它的$id。 一个叫"组件名+Id",就是新生成的VM的$id。组件必须注册到avalon.ui上,它的构造器必须定义一个叫defaults的默认配置项。

另外,由于扫描从外到里,当它扫描了ms-widget所在的元素,如果此元素里面还有子元素, 并且它们的绑定属性需要用到新VM的某一些字段,这时让它继续扫下去就有出错的危险。我们可以先它的所有子元素放到一个文档碎片中。待到新VM中出来后,再插回原地置,然后手动扫描。

在avalon1.2.4中,ms-widget所在的元素还添加了一个msData对象,保存着所有ms-*属性,此外data属性还添加了ms-widget-id属性,保存着新生成的组件VM的ID。我们可以靠它们做更多的事。

在avalon1.2.5中,要求组件作者最好为VM添加$init, $remove方法,方便自动化初始化组件与对它进行销毁。销毁的条件是定义ms-widget的那个元素被移出DOM。有时我们不得不对此元素进行移动(移动时也会发生移出DOM树的操作),这时就需要注意啦,为元素添加一个msRetain,值为true,为可以避销自动化销毁。当它再插回DOM树,记得将此属性去掉。

下面是ms-widget的部分源码

data[widget + "Id"] = args[1]                data[widget + "Options"] = avalon.mix({}, constructor.defaults, vmOptions, widgetData)                element.removeAttribute("ms-widget")                var vmodel = constructor(element, data, vmodels)//防止组件不返回VM                data.evaluator = noop                element.msData["ms-widget-id"] = vmodel.$id                if (vmodel.hasOwnProperty("$init")) {//初始化组件                    vmodel.$init()                }                if (vmodel.hasOwnProperty("$remove")) {                    var offTree = function() {//CG回收                        vmodel.$remove()                        element.msData = {}                        delete VMODELS[vmodel.$id]                    }                    if (supportMutationEvents) {                        element.addEventListener("DOMNodeRemoved", function(e) {                            if (e.target === this && !this.msRetain) {                                offTree()                            }                        })                    } else {                        element.offTree = offTree                        launchImpl(element)//如果不支持DOMNodeRemoved事件,使用一个全局的定时器进行轮询                    }                }

下面是avalon.dialog的部分源码

vm.$init = function() {                //CSS自适应容器的大小                if (options.height === "auto") {                    var style = element.style                    style.width = style.height = "auto"                    style.minHeight = element.clientHeight + "px"                }                element.msRetain = true //▲▲▲▲防止被销毁                vmodel.parent = vmodel.parent === "parent" ? element.parentNode : document.body                element.removeAttribute("title")                avalon(element).addClass("ui-dialog-content ui-widget-content")                dialog.appendChild(element)                avalon.ready(function() {                    vmodel.parent.appendChild(dialog)                    element.msRetain = false//▲▲▲▲▲                    vmodel.fullScreen = /body|html/i.test(dialog.offsetParent.tagName)                    if (vmodel.fullScreen) {                        dialog.setAttribute("data-drag-containment", "window")                    }                   //。。。。。。。略                })            }

为了方便大家编写组件,avalon还暴露了 getWidgetData, parseExprProx等接口,让大家自行解析绑定属性。

大家可以参考下面官方组件编写自己的UI组件。

转载地址:http://uavcx.baihongyu.com/

你可能感兴趣的文章
实验二
查看>>
独立开发一个云(PaaS)的核心要素, Go, Go, Go!!!
查看>>
网站文章如何能自动判定是抄袭?一种算法和实践架构剖析
查看>>
【OpenCV学习】滚动条
查看>>
ofo用科技引领行业进入4.0时代 用户粘性连续8个月远甩摩拜
查看>>
兰州青年志愿者“中西合璧”玩快闪 温暖旅客回家路
查看>>
计划10年建10万廉价屋 新西兰政府:比想象中难
查看>>
甘肃发首版《3D打印职业教育教材》:校企合作育专才
查看>>
为找好心人抚养孩子 浙江一离婚父亲将幼童丢弃公园
查看>>
晚婚晚育 近20年巴西35岁以上孕妇增加65%
查看>>
读书:为了那个美妙的咔哒声
查看>>
jsp改造之sitemesh注意事项
查看>>
iOS 9.0之后NSString encode方法替换
查看>>
ASMFD (ASM Filter Driver) Support on OS Platforms (Certification Matrix). (文档 ID 2034681.1)
查看>>
CRM Transaction处理中的权限控制
查看>>
[转]linux创建链接文件的两种方法
查看>>
python ipaddress模块使用
查看>>
文件权限
查看>>
busybox里的僵尸进程为何那么多
查看>>
python debug
查看>>