zoukankan      html  css  js  c++  java
  • Omi框架学习之旅

    虽然绝大部分情况下,开发者不需要去查找获取DOM,但是还是有需要获取DOM的场景,所以Omi提供了方便获取DOM节点的方式。

    这是官网的话,但是我一直都需要获取dom,对dom操作,所以omi提供的获取dom的方式对我来说还是比较重要的。

    老规矩:先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明。

            class Hello extends Omi.Component {
                constructor(data) {
                    super(data);
                }
    
                style() {
                    return `
                        h1 {
                            cursor: pointer;
                        }
                    `;
                }
    
                handleClick() {
                    console.log(this.refs.aa);
                    console.log(this.refs.bb);
                    console.log(this.refs.pp);
                }
    
                render() {
                    return `
                        <div ref='aa'>
                            <h1 ref="bb" onclick="handleClick()">
                                <p ref="pp"> 只在在标签中写ref="xxx", this.refs.xxx就只表示这个dom节点 </p>
                                Hello, {{name}}!
                            </h1>
                        </div>
                    `;
                }
            };
    
            var hello = new Hello({name: 'Sorrow.X'});
            Omi.render(hello, '#app');

    看看结果:

    demo的疑问和疑问的说明:

    疑问1:

    render方法中html的含有ref属性的dom好像都被实例的refs管理起来了诶,作者是怎么实现的啊?

    答:

    是的,都被挂载到实例的refs对象上去了。具体实现如下:

    当html被插入到指定的dom后,也就是_render方法的结尾处,如下

    在 1 这里的这个方法,可不仅仅只是查询dom,此demo的话,我只讲其对应的方法:

        _mixRefs() {    // 查找dom,放入实例的refs属性中
            let nodes = Omi.$$('*[ref]',this.node);    // 根节点下面的拥有ref属性的孩子
            nodes.forEach(node => {
                if(node.hasAttribute(this._omi_scoped_attr) ) {
                    this.refs[node.getAttribute('ref')] = node;    // 把值添加到refs中去
                };
            });
            let attr = this.node.getAttribute('ref');    // 根节点自己如果也写了ref属性
            if(attr) {
                this.refs[attr] = this.node;    // 把自己放进refs去
            };
        }

    这段代码便是把含有ref属性的元素放入实例属性refs的代码,当然还用到了一个Omi的静态函数$$,如下

        Omi.$$ = function(selector,context){
            if(context){
                return  Array.prototype.slice.call(context.querySelectorAll(selector))
            }else{
                return Array.prototype.slice.call(document.querySelectorAll(selector))
            }
        }

    至此,就完美了,其实这个实现还是比较简单的。

    ps:

        这个功能,好很是喜欢,获取dom很方便。

  • 相关阅读:
    [置顶] Django 微信开发(一)——环境搭建
    opencv学习_5 (IplImage的结构)
    HDU 3910 (13.10.31)
    Python源码学习七 .py文件的解释
    Android高效加载大图、多图解决方案,有效避免程序内存溢出现象
    记录cocos2d-html5与cocosd-x jsb中遇到的坑
    【PAT Advanced Level】1011. World Cup Betting (20)
    Linux文件实时同步,可实现一对多
    mahout源码分析之DistributedLanczosSolver(五)Job over
    php引入lucene方法
  • 原文地址:https://www.cnblogs.com/sorrowx/p/6617208.html
Copyright © 2011-2022 走看看