帮酷LOGO
  • 显示原文与译文双语对照的内容
A decorator for script lazy loading on react component

  • 源代码名称:react-async-script-loader
  • 源代码网址:http://www.github.com/leozdgao/react-async-script-loader
  • react-async-script-loader源代码文档
  • react-async-script-loader源代码下载
  • Git URL:
    git://www.github.com/leozdgao/react-async-script-loader.git
  • Git Clone代码到本地:
    git clone http://www.github.com/leozdgao/react-async-script-loader
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/leozdgao/react-async-script-loader
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • react-async-script-loader

    Build Statusnpm version

    响应组件中的脚本延迟加载的decorator 。

    描述

    某些组件可能依赖于其他厂商,你可能不想加载它们,直到你真正需要它们。 在这里,使用高价组件来装饰组件,它将处理延迟加载,它支持并行加载和顺序装载。

    安装

    npm install --save react-async-script-loader

    API

    scriptLoader(...scriptSrc)([WrappedComponent])

    scriptSrc 可以是源的字符串,也可以是源的array 。 scriptSrc 将按顺序加载,但源的array 将并行加载。 它还缓存加载的脚本以避免重复加载。 更生动的描述见下面的用例。

    属性

    修饰组件将接收以下属性:

    名称 类型 描述
    isScriptLoaded布尔型表示脚本加载过程是否结束,或者脚本加载失败的部分。
    isScriptLoadSucceed布尔型成功地表示所有脚本加载。
    onScriptLoaded函数当所有脚本加载成功时触发。

    :如何使用

    你可以用它装饰你的部件。

    importReact, { Component } from'react'importscriptLoaderfrom'react-async-script-loader'classEditorextendsComponent {
     ...componentWillReceiveProps ({ isScriptLoaded, isScriptLoadSucceed }) {
     if (isScriptLoaded &&!this.props.isScriptLoaded) { // load finishedif (isScriptLoadSucceed) {
     this.initEditor()
     }
     elsethis.props.onError()
     }
     }
     componentDidMount () {
     const { isScriptLoaded, isScriptLoadSucceed } =this.propsif (isScriptLoaded && isScriptLoadSucceed) {
     this.initEditor()
     }
     }
     ...}exportdefaultscriptLoader(
     [
     'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js',
     'https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js' ],
     '/assets/bootstrap-markdown.js')(Editor)

    上述示例表示 jquerymarked 将并行加载,并且在加载了这些 2个供应商之后,将按顺序加载 bootstrap-markdown

    有些脚本可能无法加载。 ScriptLoader将缓存成功加载的脚本,并将删除失败前加载的脚本 node 。

    目前,如果你尝试重新加载脚本,你必须重新装载你的组件。

    如果使用修饰符语法,它比较酷。 ( ES7 )

    @scriptLoader(
     [
     'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js',
     'https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js' ],
     '/assets/bootstrap-markdown.js')classEditorextendsComponent {
    }

    许可证

    MIT




    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语