小编Kay*_*ote的帖子

功能编程 - 增量计数器的简单循环

我们不使用for loop函数式编程,相反,我们使用higher order functionsmap,filter,reduce等.这些都适用于迭代数组.

但是,我想知道如何进行简单的计数器循环.

let i = 0;
for( i; i < 10; i++) {
  console.log( "functional programming is a religion")
};
Run Code Online (Sandbox Code Playgroud)

那么,如何在函数式编程中做到这一点呢?

javascript counter loops for-loop functional-programming

6
推荐指数
2
解决办法
6058
查看次数

SVG - 调整以角度定位的矩形的大小

所有,

我的应用程序中有一个SVG矩形,可以通过拖动矩形两侧的结束栏(左右)来水平拉伸.矩形可以是

(1)调整大小(按上述方式拉伸),

(2)拖动

(3)&旋转.

一切都很好,但是,一个奇怪的经验是,当我将矩形旋转到接近90度,然后尝试调整矩形的大小时,它开始从矩形的相对边框而不是原始边框拉伸.(这是图像):

功能的再现

当我使用旋转功能时,它似乎在左右之间变得混乱.

这是经过修改的HTML,JS和SVG:

    <%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
<!--        <script type="text/javascript" src="CPolyline.js">

        </script>-->
    </head>
    <body>
        <object id="oo" data="rect2.svg" style="position:fixed;width: 800px;height:800px;bottom:-100px;right: 375px;">

    </object>
        path: <input type="button" id="path" onclick="X()">
        path2: <input type="button" id="path2" onclick="Y()">
     <input type="button" value="Rotate" onclick="Rotate1()">


        <script type="text/javascript">
            var ob=document.getElementById("oo")

            var svgDoc=null;
            var svgRoot=null;
            var MyGroupObjectsObj = null;
            var svgNS = "http://www.w3.org/2000/svg";
            var dragTarget = null;
            var rectTemplate = null;
            var …
Run Code Online (Sandbox Code Playgroud)

svg rotation

5
推荐指数
2
解决办法
4688
查看次数

通过Webpack在模块中导入图像

我正在为我的应用程序使用NodeJs,webpack和ES2015.

我似乎无法弄清楚如何在我的模块中导入图像.以下不起作用.

import "../../css/image/t1.png";
Run Code Online (Sandbox Code Playgroud)

编辑:根据Sitian的请求,这是我的webpack配置:

const webpack = require( "webpack" );
const path = require( "path" );
const merge = require( "webpack-merge" );
const TARGET = process.env.npm_lifecycle_event;
process.env.BABEL_ENV = TARGET;

const PATHS = {
    app : path.join( __dirname, "app" ),
    build : path.join( __dirname, "build" )
};

const common = {
    entry : {
        app : PATHS.app
    },
    resolve : { // helps us refer to .js? without ext.
        extensions : [ "", ".js", ".jsx" ]
    },
    output : { …
Run Code Online (Sandbox Code Playgroud)

javascript import image node.js ecmascript-6

5
推荐指数
1
解决办法
2万
查看次数

Webpack - 使用文件加载器需要图像

我正在使用Webpack作为我的React应用程序.

我在我的webpack配置中安装了"File-loader"和"Url-loader".

但是,我不知道如何将图像链接到我的组件.我在'Data.js'文件中保存图像的'src',从那里我将图像的数据传递给react组件.

我的webpack.config.js:

...
const PATHS = {
    app : path.join( __dirname, "app" ),
    build : path.join( __dirname, "build" )
};

const common = {
    entry : {
        app : PATHS.app
    },
    output : {
        path : PATHS.build,
        filename : "bundle.js"
    },
    module : {
        preLoaders : [
...
        loaders : [
            {
                test : /\.css$/,
                loaders : [ "style", "css" ],
                include : PATHS.app
            },
            {
                test : /\.jsx?$/,
                loader : "babel",
                query : {
                    cacheDirectory : true, …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs webpack webpack-dev-server webpack-file-loader

5
推荐指数
1
解决办法
2398
查看次数

映射集合以更新插入到数据库中。如何批量更新插入?

假设我有一个来自前端的数据结构,如下所示:

const userData = [
  {
    id: 11223,
    bb: [
      {
        id: 12,
      },
      {
        id: 34,
        bbb: "bbb",
      },
    ],
  },
  {
    id:4234,
    ...
  },
];
Run Code Online (Sandbox Code Playgroud)

因为,没有/部分/全部数据可能已经在数据库中,这是我想出的:

const collection = [];
for (let i = 0; i < userData.length; i++) {
  const cur = userData[i];
  const subCur = cur.bb;
  const updatedCur = await db.cur.upsert({
      where: {
        id : cur.id
      },
      update: {
        ...
      },
      create: {
        ...
      },
    })
  );
  collection.push(updatedCur);
  for (let j = 0; j < subCur.length; …
Run Code Online (Sandbox Code Playgroud)

javascript database insert-update prisma prisma2

5
推荐指数
1
解决办法
6655
查看次数

Es2015的卷曲手柄

我正在阅读一些推文,我在Dan Abromov发现了这条推文

语法让我感到困惑.

const Font = ({ children }) => 
 <Block...
Run Code Online (Sandbox Code Playgroud)

围绕孩子的{}有什么意义?显然它不是一个对象.我推测它的ES2015功能.

非常感谢

javascript brackets ecmascript-6

4
推荐指数
1
解决办法
64
查看次数

如何在Immutable.js中读取数组中的值

我对此有些困惑,似乎无法解决。

说我有这个:

const AnObj = Immutable.Map({
 a : "a",
 b : Immutable.List.of(
  a,
  b,
  c,
  Immutable.Map({
   a : "a"
  })
 )
});
Run Code Online (Sandbox Code Playgroud)

对于不可变地图,我们在其中使用字符串get()来查找相应的属性。我们如何读取数组值?

javascript arrays dictionary object immutable.js

4
推荐指数
1
解决办法
1743
查看次数

在组件渲染中调用高阶组件

一些简单的事情在这里绊倒了我的逻辑:

我有一个 HOC AnimateOnLoad,它react-router在页面组件中呈现默认内容(在内使用)。

const DefaultLayout = ({ component: Component, ...rest }) => (

   <Route
      {...rest}
      render={matchProps => (
         <div className="page-container">
            {AnimateOnLoad(
               <div className="container">
                  <Head />
                  <Nav />
                  <Component {...matchProps} />
               </div>
            )}
            <Footer />
         </div>
      )}
   />
);
Run Code Online (Sandbox Code Playgroud)

animateONLoadHOC看起来是这样的:

const AnimateOnLoad = WrappedComponent =>
   class Animator extends Component {
      constructor(props) {
         super(props);
         this.ele = React.createRef();
      }
      componentDidMount() {
         Kute.fromTo(
            this.ele.current,
            { opacity: 0.3 },
            { opacity: 1, duration: 120 }
         ).start();
      }
      render() { …
Run Code Online (Sandbox Code Playgroud)

javascript higher-order-functions reactjs higher-order-components react-router-v4

4
推荐指数
1
解决办法
1340
查看次数

Cypress 测试 - 期望文本成为其中之一

我想测试元素数组的值,每个元素的文本内容应该是“a”或“b”之一。

it("should display for adventure & cabin charter when both are the only ones selected", () => {
    cy.get("button.expCategoryBtn")
      .contains("a")
      .click();
    cy.get("button.expCategoryBtn")
      .contains("b")
      .click();
    // the following line doesnt work
    cy.get("div.tag").each(x => {
    // the problem line:
    // I want to get the text value of each el & expect
    // it to be one of a or b
      expect(cy.wrap(x).invoke("text")).to.be.oneOf([
        "a",
        "b"
      ]);
    });
  });
Run Code Online (Sandbox Code Playgroud)

编辑:我是这样做的:

  it("should display for adventure & cabin charter when both are the only ones selected", …
Run Code Online (Sandbox Code Playgroud)

javascript testing bdd cypress

4
推荐指数
1
解决办法
1万
查看次数

Prisma 中的嵌套写入

我的架构如下所示:

model User {
  id             Int       @default(autoincrement()) @id
  createdAt      DateTime  @default(now())
  email          String    @unique
  role           String    @default("user")
  sessions       Session[]
  profile        Profile?
  goalBoard      GoalBoard[]
  team           Team[]
  ...
}

model GoalBoard {
  id          Int         @default(autoincrement()) @id
  active      Boolean    // Whether an active goalBoard
  owner       User        @relation(fields: [ownerId], references: [id])
  ownerId     Int
  createdAt   DateTime    @default(now())
  goal        Goal[]
  ...
}

model Goal {
  id               Int         @default(autoincrement()) @id
  status           String
  createdAt        DateTime    @default(now())
  owner            User        @relation(fields: [ownerId], references: [id])
  ownerId          Int
  goalBoard        GoalBoard   @relation(fields: [goalBoardId], …
Run Code Online (Sandbox Code Playgroud)

javascript database prisma prisma2

4
推荐指数
1
解决办法
1万
查看次数