最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【已解决】Reactjs中的define和function是什么语法

ReactJS crifan 527浏览 0评论

之前自己折腾的Reactjs是Preact的ES6的写法,Component的写法都是:

export default class App extends Component {
   constructor(props) {
   }
}

然后也见过ES6之前的类如何写的,的确是有React.createClass的,但是好像不是

ReactJS-AdminLTE

这里的define+function的写法:

define(
    [
        ‘react’,
      。。。
    ],
    function(React, 。。。){
        var Dashboard = React.createClass({

所以需要去搞清楚,这里的语法规则是什么

react define function

然后没有找到

然后去:

【整理】JS的ES6和ES5或之前的语法区别

JS define list

js define function

What is define([ , function ]) in Javascript – Stack Overflow

AMD · amdjs/amdjs-api Wiki

RequireJS

RequireJS API

js requirejs amd

RequireJS in Node

Why AMD?

Writing Modular JavaScript With AMD, CommonJS & ES Harmony

Understanding AMD & RequireJS · Devbridge

RequireJS和AMD规范 — JavaScript 标准参考教程(alpha)

参考上面的教程,去试着换成这种写法:

// define(
//     [
//         ‘react’,
//         ‘react-dom’,
//         ‘jquery’,
//         ‘raphael’,
//         ‘morris’,
//         ‘./components/header-bar/header-bar’,
//         ‘./components/navigation-menu’,
//         ‘./components/control-panel’,
//         ‘./components/charts/donut-chart’,
//         ‘./components/charts/area-chart’,
//         ‘./components/charts/world-map’,
//         ‘./components/containers/container-one’,
//         ‘./components/containers/container-two’,
//         ‘./components/containers/container-three’,
//         ‘./components/containers/container-four’,
//         ‘./components/containers/container-five’,
//         ‘./components/containers/container-six’,
//         ‘./components/containers/container-seven’,
//         ‘./components/controls-menu’,
//         ‘./components/stat-tile’
//     ],
    // function(React, ReactDOM, $, Raphael, Morris, HeaderBar, NavigationMenu, ControlPanel,
    // DonutChart, AreaChart, WorldMap, ContainerOne, ContainerTwo, ContainerThree,
    // ContainerFour,ContainerFive,ContainerSix,ContainerSeven,ControlsMenu,StatTile){
define(
    function (require) {
        var React       = require(‘react’),
        ReactDOM        = require(‘react-dom’),
        $               = require(‘jquery’),
        Raphael         = require(‘raphael’),
        Morris          = require(‘morris’),
        HeaderBar       = require(‘./components/header-bar/header-bar’),
        NavigationMenu  = require(‘./components/navigation-menu’),
        ControlPanel    = require(‘./components/control-panel’);
        DonutChart      = require(‘./components/charts/donut-chart’),
        AreaChart       = require(‘./components/charts/area-chart’),
        WorldMap        = require(‘./components/charts/world-map’),
        ContainerOne    = require(‘./components/containers/container-one’);
        ContainerTwo    = require(‘./components/containers/container-two’),
        ContainerThree  = require(‘./components/containers/container-three’),
        ContainerFour   = require(‘./components/containers/container-four’),
        ContainerFive   = require(‘./components/containers/container-five’);
        ContainerSix    = require(‘./components/containers/container-six’),
        ContainerSeven  = require(‘./components/containers/container-seven’),
        ControlsMenu    = require(‘./components/controls-menu’),
        StatTile        = require(‘./components/stat-tile’);
//)
);

也是可以的。

【总结】

原来:

define([‘module1’, ‘module2’], function(m1, m2) {
   …
});

是AMD规范定义的,而典型的又是Require.js的库所支持和实现的。

而不是什么其他的特殊到js的语法。

【后记】

折腾:

【已解决】ReactJS-AdminLTE中显示表格Hover Data Table

期间,看到:

Have any companies/projects used React.js to create dashboards? How has the experience been? – Quora

作者Ashwin Hariharan提到了,目前的一些缺点:

由于有些图表chart库不支持AMD/ES6,导致需要做点事情,使得其支持AMD。

-》所以这也是,此处几乎所有代码,都是用的,该作者项目所用的AMD方式去加载库的。

而没有用更好用的

转载请注明:在路上 » 【已解决】Reactjs中的define和function是什么语法

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
56 queries in 0.092 seconds, using 18.66MB memory