Mindmap of Mongodb

React+Typescript的那些坑（1）- Tips of using React + Typescript (1)

使用React动态路由时，如何得到路由里的参数呢？比如下面URL里的变量id。

.../api/user/:id

1	.../api/user/:id

结合Typescript，你的React Component需要这样

import { RouteComponentProps } from 'react-router-dom';

interface RouteParam {
   id?: string
}

interface ComponentProps extends RouteCompoentProps<RouteParam> {
   //...
}

class UserComponent extends React.Component<ComponentProps> {

   render() {
     return <h1>this.props.match.params.id</h1>
   }

}

import { RouteComponentProps } from 'react-router-dom';

interface RouteParam {

id?: string

}

interface ComponentProps extends RouteCompoentProps<RouteParam> {

//...

}

class UserComponent extends React.Component<ComponentProps> {

render() {

return <h1>this.props.match.params.id</h1>

}

这样，在Component里就可以访问id变量了。

Build NPM Proxy Server on Nexus OSS 3.21

I had good experience with Nexus OSS 2.x and it was very easy to use. Based on it, the team built up Maven proxy server and Java private repository. The server had been served for many years and it helped team to finish thousands of builds without any problem.

To have better NPM repository support, it’s time to upgrade to a newer version of Nexus. Compared with JFrog’s Artifactory OSS, NPM and Gradle repository support is included in Nexus OSS version already.

Installation

The latest Nexus OSS version can be download from here. Unzip it and go to /bin folder to start it. I am using Windows 10, so Nexus OSS can be installed as a Windows Service. Then you can start/stop the Nexus OSS server in Services Management.

./nexus.exe install

1	./nexus.exe install

When server starts, you can access the web page, default is http://localhost:8081.

Note: For the first time run, there needs to update the admin user’s password. Follow the instructions to finish it.

Create NPM repository

By default, there are Maven repo (can be used by Gradle as well) and NuGet repo. To have a NPM repo, you need to manually create it.

Use “admin” to log into Nexus, Open “Repositories” page and click “Create repository“.

Select “npm proxy” in the Recipe list,

Put a name of the repository, such as “npm-all” and the “remote storage”.

Click “Create repository” to finish the creation. Now a npm proxy server is ready for serving. The repo URL is http://localhost:8081/repository/npm-all/.

NPM and Yarn Configuration

For npm and yarn, you can use the following commands to use this proxy server respectively.

# npm
npm config set registry http://localhost:8081/repository/npm-all/

# yarn
yarn config set registry http://localhost:8081/repository/npm-all/

# npm

npm config set registry http://localhost:8081/repository/npm-all/

# yarn

yarn config set registry http://localhost:8081/repository/npm-all/

All done!

小试HTML SVG

因为D3js，最近学习了一下HTML SVG（Scalable Vector Graphics），这里有几个小例子。
[xyz-ihs snippet=”svg-sample”]

[xyz-ihs snippet=”svg-sample-2″]

使用Web技术开发桌面客户端的一些准备

有了用Web技术开发客户端的想法，自然就有个疑问，Embedded的Browser到底能力怎么样？

于是便和各桌面流行浏览器的对比实验，Embedded Browser选用的是JavaFX的WebBrowser，也是个基于Webkit的Browser.

不是专业人士，不知道这些测试页有没有代表性。下面是对比结果，

[easy_table caption=”Result Comparison”]Test Page,Firefox 25, Safari 17, Chrome 30, JavaFX, Safari (iOS 7.0.3)
http://browsermark.rightware.com,4051,5163,3701,3323,2627,
http://html5test.com,424,385,463,310,415,
http://css3test.com,58%,61%,60%,51%,61%,
[/easy_table]

显然JavaFX的WebBrowser在各方面都基本是最差的。(Performance比iPhone上的Safari略好，但iPhone毕竟是移动设备，且这个分数比91%的手机都要好。）这结果对于目前的使用场景应该足够了，不会使用很多HTML5和CSS3的高级用法，也不会加载很大的页面，Performance应该不是问题。

接下来做个更贴近产品的Demo吧！

在Eclipse RCP中集成HTML/CSS/Javascript (Integrate HTML/CSS/Javascript in Eclipse RCP)

新项目对UI的要求很高，产品负责人常常要求实现比较Fancy的功能。基于Eclipse RCP平台，用SWT/JFace实现起来比较麻烦，而且组里人手也不够，逼得我们常常要找替代方案。

Eclipse RCP虽然在Look & Feel上有所提高，但它的强项且不是前端，而是在于代码组织（模块，服务），功能扩展等方面。但如果能在RCP环境中集成Ｗeb前端的技术(HTML/CSS/Javascript)，那实现这些Fancy的功能就容易的多。顺着这个思路我做了些实践，做了一个小页面，可以选择本地图片，再做PS处理。

基本方案 – 使用Browser控件

SWT支持Browser控件，到3.7M2之后开始支持各平台下WebKit。各平台对WebKit要求不同，要参考SWT FAQ。我的体会是Mac（Safari），Linux平台（GTK+ WebKit）很好，Windows比较差。此控件也支持MOZILLA（比较旧的版本），但效果很差，很多CSS库无法运行。（本文多在Linux下WebKit的实践。）

首先要嵌入Browser，

Browser b = new Browser(parent, SWT.WEBKIT);
b.setUrl(&quot;http://www.google.com&quot;);

1 2	Browser b = new Browser(parent, SWT.WEBKIT); b.setUrl("http://www.google.com");

之后，Browser就会显示Google主页的内容。

本地的HTML/CSS/JS文件

当然我们不是要做真正的浏览器，目标是使用本地的文件。实现思路也很清楚，就是要访问RCP Bundle里的文件。RCP也是支持的，可以用如下代码。

假设有如下目录结构：

// 访问web/hello.html
URL url = Activator.getDefault().getBundle().getResource(&quot;web/hello.html&quot;);
b.setUrl(FileLocator.toFileURL(url).toString()); // try..catch省略

// 访问web/hello.html

URL url = Activator.getDefault().getBundle().getResource("web/hello.html");

b.setUrl(FileLocator.toFileURL(url).toString()); // try..catch省略

但这里要注意一个问题，我们的HTML常常会用到JS或CSS等外部文件。如果这些文件全都打包在Jar文件里，HTML文件内容可以被正常访问，但CSS等就无法被引用了。

解决的方法也很简单，就是不打包这部分文件，可以使用Feature加Fragment的方法。

webkit_test是Host Plugin, webkit_test_webfiles是它的Fragment，webkit_test_feature是包括这两个Plugin的Feature。在Feature的设置中，打开“Unpack这个Fragment在安装时”。这样就可以得到一个Folder而不是Jar。

如何和Java代码互通呢？

这是个大问题。用了HTML，那我们要不要写个Server或者某个嵌入式的Server呢？如果需要，方案就会比较复杂，毕竟RCP还是专注于桌面端的（虽然有RAP，那是后话）。但当我发现BrowserFunction后，这个问题就简单了。

假如，HTML想通过一个函数得到RGB中红、绿、蓝的值，这些值却是在SWT的Text中输入的。函数分别是r(), g(), b().

var circle = two.makeCircle(-70, 0, 50);
var rect = two.makeRectangle(70, 0, 100, 100);
circle.fill = &#039;#FF8000&#039;;
rect.fill = &#039;rgb(&#039; + r() + &#039;, &#039; + g() + &#039;, &#039; + b() + &#039;)&#039;; // &#039;rgba(0, 200, 255, 0.75)&#039;;

var group = two.makeGroup(circle, rect);
group.translation.set(two.width / 2, two.height / 2);
group.scale = 0;
group.noStroke();

var circle = two.makeCircle(-70, 0, 50);

var rect = two.makeRectangle(70, 0, 100, 100);

circle.fill = '#FF8000';

rect.fill = 'rgb(' + r() + ', ' + g() + ', ' + b() + ')'; // 'rgba(0, 200, 255, 0.75)';

var group = two.makeGroup(circle, rect);

group.translation.set(two.width / 2, two.height / 2);

group.scale = 0;

group.noStroke();

在RCP的Java代码中，

new BrowserFunction(b, &quot;r&quot;) {

  @Override
  public Object function(Object[] arguments) {
    return text_r.getText();
  }

};

new BrowserFunction(b, &quot;g&quot;) {

  @Override
  public Object function(Object[] arguments) {
    return text_g.getText();
  }

};

new BrowserFunction(b, &quot;b&quot;) {

  @Override
  public Object function(Object[] arguments) {
    return text_b.getText();
  }

};

new BrowserFunction(b, "r") {

@Override

public Object function(Object[] arguments) {

return text_r.getText();

}

};

new BrowserFunction(b, "g") {

@Override

public Object function(Object[] arguments) {

return text_g.getText();

}

};

new BrowserFunction(b, "b") {

@Override

public Object function(Object[] arguments) {

return text_b.getText();

}

};

BrowserFunction构造的第一个入参是Browser Instance，第二个是函数名。这可以大大扩展JS的能力。

那SWT可以控制Brower吗？比如调用JS里的Function。答案也是可以的。首先Browser提供了很多的Listener，让SWT捕获各种事件，此外可以直接用Browse.excute()来执行JS Function。

比如JS中定义了draw()函数，Java代码就可以用如下代码来调用。

b.execute(&quot;draw()&quot;);

1	b.execute("draw()");

总结

在Sample中，我集成了Two.js，jquery, jquery-ui和AlloyImage.js, 实现了一些图片选择处理的功能，Webkit都能工作良好，让我惊艳，也让我坚信这个方向探索的潜力。但也遇到了不少问题，如Resize时页面的刷新问题，如何调试HTML页面，跨平台问题等，还需要更多时间的探索。Sample的代码在GitHub上，在Ubuntu 13.04， Mac OS X 10.8上都可以工作良好。

关于CSS+DIV的居中居右问题

好吧，说实话，这个问题对一个Web新手真的很头痛。之前遇到过，使用了些乱七八糟的方法CSS style终于解决。昨天又碰到到了，这次没那么幸运，在网上仔细搜索实践之后，得到了一个比之前用float:right（非常可怕的style, 慎用！）更好的办法。

其实主要的思路就是用display:table, display:table-cell.

HTML如下：

&lt;div style=&quot;display:table;width:100%;&quot;&gt;
      &lt;div style=&quot;display:table-cell;&quot;&gt;
	&lt;div style=&quot;border:1px solid red;height:100px;  display: table;text-align:left;width:100%;padding-right: 10px;&quot;&gt;
    	  &lt;div style=&quot;border:1px solid blue;display: table-cell;vertical-align: middle;&quot;&gt;
    	    &lt;img src=&quot;http://img.baidu.com/img/logo-zhidao.gif&quot; style=&quot;border:1px solid green;&quot;/&gt; 
    	  &lt;/div&gt;
	&lt;/div&gt;
      &lt;/div&gt;

      &lt;div style=&quot;display:table-cell;&quot;&gt;
      &lt;div style=&quot;border:1px solid red;height:100px;	display: table;	text-align:right;width:100%;padding-right: 10px;&quot;&gt;
    	&lt;div style=&quot;border:1px solid blue;display: table-cell;vertical-align: middle;&quot;&gt; 
    	  &lt;img src=&quot;http://img.baidu.com/img/logo-zhidao.gif&quot; style=&quot;border:1px solid green;&quot;/&gt;
    	&lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

</div>

</div>

这样就能知道一个两列分别左右对齐居中的Layout了。

这里还有一个TIP，vertical-align对img不起作用，所以要加上一个空格( )做placeholder.

Web的学习之路还很长啊。

jQuery选择器（Selector）总结

最喜欢jQuery网站上的一句话”Write Less, Do More”。除了有非常丰富的函数可以选用以外，它的选择器也是非常强大，确实大大的提高的生产效率。今天就把这些有用的选择器好好总结一下。

jQuery的选择器可以归为三类：基本CSS选择器，位置选择器还有自定义选择器。

基本选择器又被称为“查找选择器”，用来找到DOM中的各种元素。
位置和自定义选择又被称为“过滤选择器”，因为它可以过滤出一个元素的集合。

下面就分类看看这几种选择器的使用方法。

基本CSS选择器(Basic CSS Selectors)

基本选择器的很多语法很像CSS，很容易记忆。

[table id=1/]

位置选择器（Positional Selectors）

这类选择器是基于元素之间位置关系的，而且可以和任意的基础选择器一起使用。

[table id=2/]

自定义选择器（Custom Selectors）

[table id=3/]

使用jQuery获得Input的值

jQuery可以非常方便的取到网页里标准input的值。我们主要使用val()方法，用几个例子说明一下。

Text Input

HTML

&lt;input type=&quot;text&quot; id=&quot;input1&quot;&gt;&lt;input&gt;

1	<input type="text" id="input1"><input>

JavaScript

var textVal = $(&quot;#input1&quot;).val();
console.log(textVal);

1 2	var textVal = $("#input1").val(); console.log(textVal);

Select Input

HTML

&lt;select class=&quot;comboBox&quot;&gt;
         &lt;option value=&quot;option_one&quot;&gt;Option One&lt;/option&gt;
         &lt;option value=&quot;option_two&quot;&gt;Option Two&lt;/option&gt;
         &lt;option value=&quot;option_three&quot;&gt;Option Three&lt;/option&gt;
&lt;/select&gt;

<option value="option_one">Option One</option>

<option value="option_two">Option Two</option>

<option value="option_three">Option Three</option>

</select>

JavaScript

var selectedVal = $(&quot;select.comboBox option:selected&quot;).val();

1	var selectedVal = $("select.comboBox option:selected").val();

selectedVal可能是option_one/option_two/option_three.

当多选的情况时，我们可以得到所有selected items的value的数组，如：

HTML

&lt;select class=&quot;comboBox&quot; multiple=&quot;multiple&quot;&gt;
                &lt;option value=&quot;option_one&quot;&gt;Option One&lt;/option&gt;
                &lt;option value=&quot;option_two&quot;&gt;Option Two&lt;/option&gt;
                &lt;option value=&quot;option_three&quot;&gt;Option Three&lt;/option&gt;
&lt;/select&gt;

<option value="option_one">Option One</option>

<option value="option_two">Option Two</option>

<option value="option_three">Option Three</option>

</select>

JavaScript

var multiVals = $(&quot;select.comboBox&quot;).val() || [];
console.log(multiVals.join(&quot;, &quot;));

1 2	var multiVals = $("select.comboBox").val() \|\| []; console.log(multiVals.join(", "));

CheckBox Input

HTML

&lt;input name=&quot;checkboxgroup&quot; type=&quot;checkbox&quot; value=&quot;checkBox1&quot;/&gt;CheckBox One&lt;br/&gt;

1	<input name="checkboxgroup" type="checkbox" value="checkBox1"/>CheckBox One<br/>

JavaScript

var checkValue=$(&quot;input:checkbox[name=&quot;checkboxgroup&quot;]:checked&quot;).val();
console.log(checkValue);

1 2	var checkValue=$("input:checkbox[name="checkboxgroup"]:checked").val(); console.log(checkValue);

如果没有Box selected, checkValue是一个空串。

Radio Input

HTML

&lt;input name=&quot;radiogroup&quot; type=&quot;radio&quot; value=&quot;radio1&quot;/&gt;Radio One&lt;br/&gt;
&lt;input name=&quot;radiogroup&quot; type=&quot;radio&quot; value=&quot;radio2&quot;/&gt;Radio Two&lt;br/&gt;

1 2	<input name="radiogroup" type="radio" value="radio1"/>Radio One<br/> <input name="radiogroup" type="radio" value="radio2"/>Radio Two<br/>

JavaScript

var radioValue = $(&quot;input:radio[name=radiogroup]:checked&quot;).val();

1	var radioValue = $("input:radio[name=radiogroup]:checked").val();

学习CSS时做的脑图

😎