wordpress框架解密_day1

10年前，和wordpress结下缘分，那时候wordpress已从博客平台转型单博客，部署一下，觉得很方便，在看看数据库，不超过10个表就能搭一个系统，那时候觉得好屌

也是那时候，某权威杂志报道wordpress框架很简单，要学就学其他高端框架，我差点就信了

2016，重拾那时候的童真，重新学习wordpress，因为wordpress包含的js框架，MVC模式，足够一个程序猿用一辈子了

一连10天，连续写10个关于wordpress框架的博客，应该只能写一个媒体库操作模块，如果真能10天连续写下来，自己得到的磨练也不少

DAY One : 写文章->插入媒体

如此简单的插入链接是如何实现的呢？

这里有几个重点:

• ajax弹出输入URL界面
• menu响应
• 输入响应
• 输入URL界面，post返回文章界面

输入URL界面截图

输入URL界面的实现

this.$input = $('').val( this.model.get('url') );
this.input = this.$input[0];

this.spinner = $('')[0];//显示loading icon，输入框右
this.$el.append([ this.input, this.spinner ]);

输入响应

/**
 * @returns {wp.media.view.EmbedUrl} Returns itself to allow chaining
 */
render: function() {
    var $input = this.$input;

    if ( $input.is(':focus') ) {
        return;
    }

    this.input.value = this.model.get('url') || 'http://';
    /**
     * Call `render` directly on parent class with passed arguments
     */
    View.prototype.render.apply( this, arguments );
    return this;
},

输入响应2

上面的代码明显没做什么操作，因为是view层的处理，而真正逻辑处理落在control层（这也是control层应该做的）

Embed = wp.media.controller.State.extend({
    initialize: function(options) {
        this.metadata = options.metadata;
        this.debouncedScan = _.debounce( _.bind( this.scan, this ), this.sensitivity );
        this.props = new Backbone.Model( this.metadata || { url: '' });
        this.props.on( 'change:url', this.debouncedScan, this );
        this.props.on( 'change:url', this.refresh, this );
        this.on( 'scan', this.scanImage, this );
    },
}

/**
 * Trigger a scan of the embedded URL's content for metadata required to embed.
 *
 * @fires wp.media.controller.Embed#scan
 */
scan: function() {
    var scanners,
        embed = this,
        attributes = {
            type: 'link',
            scanners: []
        };

    // Scan is triggered with the list of `attributes` to set on the
    // state, useful for the 'type' attribute and 'scanners' attribute,
    // an array of promise objects for asynchronous scan operations.
    if ( this.props.get('url') ) {
        this.trigger( 'scan', attributes );
    }

    if ( attributes.scanners.length ) {
        scanners = attributes.scanners = $.when.apply( $, attributes.scanners );
        scanners.always( function() {
            if ( embed.get('scanners') === scanners ) {
                embed.set( 'loading', false );
            }
        });
    } else {
        attributes.scanners = null;
    }

    attributes.loading = !! attributes.scanners;
    this.set( attributes );
},

UML类图大概长这个样子

view层的实现基于view.EmbedUrl，派送到EmbedLink类实现render
controll层基于controller.Embed，基于controller.State类（此图并未包含）

注意：无疑Wordpress的MVC底层，是backbone框架。

参考资料

backbone事件模块 ——[【cnblog博客】]

脚注

生成一个脚注1.

---

1. 这里是 脚注 的 内容. ↩