编程开发 购物 网址 游戏 小说 歌词 地图 快照 股票 美女 新闻 笑话 | 汉字 软件 日历 阅读 下载 图书馆 开发 租车 短信 China
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
移动开发 架构设计 编程语言 互联网 开发经验 Web前端 开发总结
开发杂谈 系统运维 研发管理 数据库 云 计 算 Java开发
VC(MFC) Delphi VB C++(C语言) C++ Builder 其它开发语言 云计算 Java开发 .Net开发 IOS开发 Android开发 PHP语言 JavaScript
ASP语言 HTML(CSS) HTML5 Apache MSSQL数据库 Oracle数据库 PowerBuilder Informatica 其它数据库 硬件及嵌入式开发 Linux开发资料
  编程开发知识库 -> Web前端 -> antd源码解析(一)button控件的解析 -> 正文阅读
 

[Web前端]antd源码解析(一)button控件的解析[第1页]


'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _omit = require('omit.js');

var _omit2 = _interopRequireDefault(_omit);

var _icon = require('../icon');

var _icon2 = _interopRequireDefault(_icon);

function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : {'default': obj};
}

var __rest = undefined && undefined.__rest || function (s, e) {
    var t = {};
    for (var p in s) {
      if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
    }
    if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
      if (e.indexOf(p[i]) < 0) t[p[i]] = s[p[i]];
    }
    return t;
  };

var rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
var isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
function isString(str) {
  return typeof str === 'string';
}
// Insert one space between two chinese characters automatically.
function insertSpace(child, needInserted) {
  // Check the child if is undefined or null.
  if (child == null) {
    return;
  }
  var SPACE = needInserted ? ' ' : '';
  // strictNullChecks oops.
  if (typeof child !== 'string' && typeof child !== 'number' && isString(child.type) && isTwoCNChar(child.props.children)) {
    return _react2['default'].cloneElement(child, {}, child.props.children.split('').join(SPACE));
  }
  if (typeof child === 'string') {
    if (isTwoCNChar(child)) {
      child = child.split('').join(SPACE);
    }
    return _react2['default'].createElement(
      'span',
      null,
      child
    );
  }
  return child;
}

var Button = function (_React$Component) {
  (0, _inherits3['default'])(Button, _React$Component);

  function Button(props) {
    (0, _classCallCheck3['default'])(this, Button);

    var _this = (0, _possibleConstructorReturn3['default'])(this, (Button.__proto__ || Object.getPrototypeOf(Button)).call(this, props));

    _this.handleClick = function (e) {
      // Add click effect
      _this.setState({clicked: true});
      clearTimeout(_this.timeout);
      _this.timeout = setTimeout(function () {
        return _this.setState({clicked: false});
      }, 500);
      var onClick = _this.props.onClick;
      if (onClick) {
        onClick(e);
      }
    };
    // Handle auto focus when click button in Chrome
    _this.handleMouseUp = function (e) {
      if (_this.props.onMouseUp) {
        _this.props.onMouseUp(e);
      }
    };
    _this.state = {
      loading: props.loading
    };
    return _this;
  }

  (0, _createClass3['default'])(Button, [
    {
      key: 'componentWillReceiveProps',
      value: function componentWillReceiveProps(nextProps) {
        var _this2 = this;

        var currentLoading = this.props.loading;
        var loading = nextProps.loading;
        if (currentLoading) {
          clearTimeout(this.delayTimeout);
        }
        if (typeof loading !== 'boolean' && loading && loading.delay) {
          this.delayTimeout = setTimeout(function () {
            return _this2.setState({loading: loading});
          }, loading.delay);
        } else {
          this.setState({loading: loading});
        }
      }
    },
    {
      key: 'componentWillUnmount',
      value: function componentWillUnmount() {
        if (this.timeout) {
          clearTimeout(this.timeout);
        }
        if (this.delayTimeout) {
          clearTimeout(this.delayTimeout);
        }
      }
    },
    {
      key: 'render',
      value: function render() {
        var _classNames;

        var _a = this.props,
          type = _a.type,
          shape = _a.shape,
          _a$size = _a.size,
          size = _a$size === undefined ? '' : _a$size,
          className = _a.className,
          htmlType = _a.htmlType,
          children = _a.children,
          icon = _a.icon,
          prefixCls = _a.prefixCls,
          ghost = _a.ghost,
          others = __rest(_a, ["type", "shape", "size", "className", "htmlType", "children", "icon", "prefixCls", "ghost"]);
        var _state = this.state,
          loading = _state.loading,
          clicked = _state.clicked;
        // large => lg
        // small => sm

        var sizeCls = '';
        switch (size) {
          case 'large':
            sizeCls = 'lg';
            break;
          case 'small':
            sizeCls = 'sm';
          default:
            break;
        }
        var classes = (0, _classnames2['default'])(prefixCls, className, (_classNames = {}, (0, _defineProperty3['default'])(_classNames, prefixCls + '-' + type, type), (0, _defineProperty3['default'])(_classNames, prefixCls + '-' + shape, shape), (0, _defineProperty3['default'])(_classNames, prefixCls + '-' + sizeCls, sizeCls), (0, _defineProperty3['default'])(_classNames, prefixCls + '-icon-only', !children && icon && !loading), (0, _defineProperty3['default'])(_classNames, prefixCls + '-loading', loading), (0, _defineProperty3['default'])(_classNames, prefixCls + '-clicked', clicked), (0, _defineProperty3['default'])(_classNames, prefixCls + '-background-ghost', ghost), _classNames));
        var iconType = loading ? 'loading' : icon;
        var iconNode = iconType ? _react2['default'].createElement(_icon2['default'], {type: iconType}) : null;
        var needInserted = _react2['default'].Children.count(children) === 1 && !iconType;
        var kids = _react2['default'].Children.map(children, function (child) {
          return insertSpace(child, needInserted);
        });
        return _react2['default'].createElement(
          'button',
          (0, _extends3['default'])({}, (0, _omit2['default'])(others, ['loading', 'clicked']), {
            type: htmlType || 'button',
            className: classes,
            onMouseUp: this.handleMouseUp,
            onClick: this.handleClick
          }),
          iconNode,
          kids
        );
      }
    }
  ]);
  return Button;
}(_react2['default'].Component);

exports['default'] = Button;

Button.__ANT_BUTTON = true;
Button.defaultProps = {
  prefixCls: 'ant-btn',
  loading: false,
  clicked: false,
  ghost: false
};
Button.propTypes = {
  type: _propTypes2['default'].string,
  shape: _propTypes2['default'].oneOf(['circle', 'circle-outline']),
  size: _propTypes2['default'].oneOf(['large', 'default', 'small']),
  htmlType: _propTypes2['default'].oneOf(['submit', 'button', 'reset']),
  onClick: _propTypes2['default'].func,
  loading: _propTypes2['default'].oneOfType([_propTypes2['default'].bool, _propTypes2['default'].object]),
  className: _propTypes2['default'].string,
  icon: _propTypes2['default'].string
};
module.exports = exports['default'];

一个按钮控件如此多的代码,看看都吓坏了,如果我们来简化下代码,看下实现的必须代码:

import  React,{ Component }  from "React";

function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : {'default': obj};
}

var _createClass2 = require('babel-runtime/helpers/createClass');
var _inherits2 = require('babel-runtime/helpers/inherits');
//定义控件名称
var Button = function (_React$Component) {
//这句话是必须的  如果去掉这句话就会报异常了
  _inherits2['default'](Button, _React$Component);
  console.log("test-----------");
  function Button(props) {

  }
  //render方法 也是必须需要实现的。
 _createClass2['default'](Button, [ 
    {
      key: 'render',
      value: function render() {
        return <div>
          <button >按钮</button>
        </div>
      }
    }
  ]);
  return Button;
}(React.Component);

export default Button;

代码分析:

   (0, _extends3['default'])({}, (0, _omit2['default'])(others, ['loading', 'clicked']), {
            type: htmlType || 'button',
            className: classes,
            onMouseUp: this.handleMouseUp,
            onClick: this.handleClick
          }),

其实就是等价于

_extends3['default']({}, (0, _omit2['default'])(others, ['loading', 'clicked']), {
            type: htmlType || 'button',
            className: classes,
            onMouseUp: this.handleMouseUp,
            onClick: this.handleClick
          })

在组件定义时会调用下面该语句,而且不能少。

_inherits2['default'](Button, _React$Component);

其实就是调用了该函数


exports.default = function (subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function, not " + (typeof superClass === "undefined" ? "undefined" : (0, _typeof3.default)(superClass)));
  }

  subClass.prototype = (0, _create2.default)(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      enumerable: false,
      writable: true,
      configurable: true
    }
  });
  if (superClass) _setPrototypeOf2.default ? (0, _setPrototypeOf2.default)(subClass, superClass) : subClass.__proto__ = superClass;
};

如果看不懂该代码,就可以理解为:定义了Button对象,并且该对象继承了React.Component定义的相关方法申明。其实就是等价于:

var Button = class Button extends Component{
   ...
};

_createClass2的源码如下:

exports.default = function () {
  function defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ("value" in descriptor) descriptor.writable = true;
      (0, _defineProperty2.default)(target, descriptor.key, descriptor);
    }
  }

  return function (Constructor, protoProps, staticProps) {
    if (protoProps) defineProperties(Constructor.prototype, protoProps);
    if (staticProps) defineProperties(Constructor, staticProps);
    return Constructor;
  };
}();

核心的语句。

    (0, _defineProperty2.default)(target, descriptor.key, descriptor);

其实就是定义了render方法,跟下面代码的效果是一致的

render(){
    return  <div>
          <button >按钮</button>
        </div>
}

里面的具体细节下节再分析
  Web前端 最新文章
echarts莫名缩小,并且宽度不能更改,生成时
JAVA后台 关于如何从后台传递信息在jsp前端
HTTP协议(二)
阿里云服务器的域名解析解决方案
live-server的安装与使用
HTML播放视频(兼容IE低版本)
windows下配置nginx+php环境
Chorme 开代理后无法打开jsp页面的问题
分布式任务调度平台XXL
作用域
上一篇文章      下一篇文章      查看所有文章
加:2017-07-24 16:09:39  更:2017-07-24 16:11:39 
VC(MFC) Delphi VB C++(C语言) C++ Builder 其它开发语言 云计算 Java开发 .Net开发 IOS开发 Android开发 PHP语言 JavaScript
ASP语言 HTML(CSS) HTML5 Apache MSSQL数据库 Oracle数据库 PowerBuilder Informatica 其它数据库 硬件及嵌入式开发 Linux开发资料
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 美食菜谱 新闻资讯 电影视频 小游戏 Chinese Culture 股票 租车
生肖星座 三丰软件 视频 开发 短信 中国文化 网文精选 搜图网 美图 阅读网 多播 租车 短信 看图 日历 万年历 2018年4日历
2018-4-23 1:44:15
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  编程开发知识库