Nativejs和reactNative学习笔记-js教程-网页制作-壹聚教程网Nativejs和reactNative学习笔记
下面我们一起来看看关于Nativejs和reactNative学习笔记了，这个是一个站长分享关于学习Nativejs和reactNative感受了。
因为前段时间，对dcloud推出的Nativejs和facebook推出的reactNative都做了一点点浅薄的研究。因为研究的很浅薄，所以仅代表我个人观点，谈谈对运用这两个产品的些许感受。
说起dcloud的Nativejs，还是先从他的IDE编辑器开始说起。他们推出的Hbuilder，确实蛮好用，写起代码来确实很快。之前觉得sublime好用，但是当你用了Hbuilder之后，sublime顿时逊色不少。用了一段时间的Hbuilder，感觉其唯一的缺点就是用git库pull下来的文件，不会时时刷新。
说到用Hbuilder开发APP。我们可以下载其官方的案例，开发学习成本是很低的，入手极快，因为它就是运用html5及一些css做得一些开发。再看看他们用js封装的一些原生用法：
安卓：http://www.html5plus.org/doc/zh_cn/android.html#
ios:http://www.html5plus.org/doc/zh_cn/ios.html
囊括了大部分的APP开发接口。
Nativejs打开窗口，用的是openWindow的方式，类似创建一个新的Webview，关闭窗口，就是类似与关闭一个Webview。窗口之间的传值，可以用
& .....//自定义扩展参数，可以用来处理页面间传值
这种方式。也可以用触发自定义事件的方式。运用openWindow的这种方式，解决了h5中历史返回死循环的问题。
但是，我用下来有些问题，因为很多代码都是用html5写的，当有些功能用html5和它封装的js都能实现的时候，我们会不自觉地运用之前老的html5的方案解决一些问题，最终还是导致我们的APP效率变低。说白了，用Hbuilder开发的APP和我们之前用APPCan和phoneGap开发的移动应用没有什么区别，都是hybrid开发。
但是当facebook推出reactNative之后，迅速火了！我身边不少做安卓开发的同学，开始研究js了，他们开始研究reactNative了，因为reactNative可以跨平台做安卓和IOS开发，而且效率并不低！
为什么这么说呢！因为reactNative逻辑是用js写的，但是UI全部是原生的，他把js渲染成android和ios代码了。
但是呢，reactNative学习成本相对较高。可以看一下他的文档，我们搭建环境，要我们安装nodejs，java运行环境，win7电脑要安装android的SDK等等。它运用的是全新的语法jsx。在学习reactNative之前，最好要先学习一下reactjs，关于reactjs入门，我个人觉得阮一峰写的一篇博客还不错
React 的安装包，可以到官网下载。不过，React Demos 已经自带 React 源码，不用另外安装，只需把这个库拷贝到你的硬盘就行了。
$ git clone :ruanyf/react-demos.git
如果你没安装 git， 那就直接下载 zip 压缩包。
下面要讲解的12个例子在各个 Demo 子目录，每个目录都有一个 index.html 文件，在浏览器打开这个文件（大多数情况下双击即可），就能立刻看到效果。
需要说明的是，React 可以在浏览器运行，也可以在服务器运行，但是本教程只涉及浏览器。一方面是为了尽量保持简单，另一方面 React 的语法是一致的，服务器的用法与浏览器差别不大。Demo13 是服务器首屏渲染的例子，有兴趣的朋友可以自己去看源码。
一、HTML 模板
使用 React 的网页源码，结构大致如下。
&!DOCTYPE html&
&&& &script src=&../build/react.js&&&/script&
&&& &script src=&../build/react-dom.js&&&/script&
&&& &script src=&../build/browser.min.js&&&/script&
&&& &div id=&example&&&/div&
&&& &script type=&text/babel&&
&&&&& // ** Our code goes here! **
&&& &/script&
上面代码有两个地方需要注意。首先，最后一个 &script& 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type=&text/babel& 。
其次，上面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。
$ babel src --out-dir build
上面命令可以将 src 子目录的 js 文件进行语法转换，转码后的文件全部放在 build 子目录。
二、ReactDOM.render()
ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
ReactDOM.render(
& &h1&Hello, world!&/h1&,
& document.getElementById('example')
上面代码将一个 h1 标题，插入 example 节点（查看 demo01），运行结果如下。
三、JSX 语法
上一节的代码， HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写（查看 Demo02 ）。
var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
&&& names.map(function (name) {
&&&&& return &div&Hello, {name}!&/div&
& document.getElementById('example')
上面代码体现了 JSX 的基本语法规则：遇到 HTML 标签（以 & 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。上面代码的运行结果如下。
JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员（查看 demo03 ）。
var arr = [
& &h1&Hello world!&/h1&,
& &h2&React is awesome&/h2&,
ReactDOM.render(
& &div&{arr}&/div&,
& document.getElementById('example')
上面代码的arr变量是一个数组，结果 JSX 会把它的所有成员，添加到模板，运行结果如下。
React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类（查看 demo04）。
var HelloMessage = React.createClass({
& render: function() {
&&& return &h1&Hello {this.pro.name}&/h1&;
ReactDOM.render(
& &HelloMessage name=&John& /&,
& document.getElementById('example')
上面代码中，变量 HelloMessage 就是一个组件类。模板插入 &HelloMessage /& 时，会自动生成 HelloMessage 的一个实例（下文的&组件&都指组件类的实例）。所有组件类都必须有自己的 render 方法，用于输出组件。
注意，组件类的第一个字母必须大写，否则会报错，比如HelloMessage不能写成helloMessage。另外，组件类只能包含一个顶层标签，否则也会报错。
var HelloMessage = React.createClass({
& render: function() {
&&& return &h1&
&&&&& Hello {this.props.name}
&&& &/h1&&p&
&&&&& some text
上面代码会报错，因为HelloMessage组件包含了两个顶层标签：h1和p。
组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，比如 &HelloMessage name=&John&& ，就是 HelloMessage 组件加入一个 name 属性，值为 John。组件的属性可以在组件类的 this.props 对象上获取，比如 name 属性就可以通过 this.props.name 读取。上面代码的运行结果如下。
添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。
五、this.props.children
this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点（查看 demo05）。
var NotesList = React.createClass({
& render: function() {
&&& return (
&&&&& &ol&
&&&&&&& React.Children.map(this.props.children, function (child) {
&&&&&&&&& return &li&{child}&/li&;
&&&&&&& })
&&&&& &/ol&
ReactDOM.render(
& &NotesList&
&&& &span&hello&/span&
&&& &span&world&/span&
& &/NotesList&,
& document.body
上面代码的 NoteList 组件有两个 span 子节点，它们都可以通过 this.props.children 读取，运行结果如下。
这里需要注意， this.props.children 的值有三种可能：如果当前组件没有子节点，它就是如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心。
React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。更多的 React.Children 的方法，请参考官方文档。
六、PropTypes
组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。
组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求（查看 demo06）。
var MyTitle = React.createClass({
& propTypes: {
&&& title: React.PropTypes.string.isRequired,
& render: function() {
&&&& return &h1& {this.props.title} &/h1&;
上面的Mytitle组件有一个title属性。PropTypes 告诉 React，这个 title 属性是必须的，而且它的值必须是字符串。现在，我们设置 title 属性的值是一个数值。
var data = 123;
ReactDOM.render(
& &MyTitle title={data} /&,
& document.body
这样一来，title属性就通不过验证了。控制台会显示一行错误信息。
Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`.
更多的PropTypes设置，可以查看官方文档。
此外，getDefaultProps 方法可以用来设置组件属性的默认值。
var MyTitle = React.createClass({
& getDefaultProps : function () {
&&& return {
&&&&& title : 'Hello World'
& render: function() {
&&&& return &h1& {this.props.title} &/h1&;
ReactDOM.render(
& &MyTitle /&,
& document.body
上面代码会输出&Hello World&。
七、获取真实的DOM节点
组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。
但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性（查看 demo07 ）。
var MyComponent = React.createClass({
& handleClick: function() {
&&& this.refs.myTextInput.focus();
& render: function() {
&&& return (
&&&&& &div&
&&&&&&& &input type=&text& ref=&myTextInput& /&
&&&&&&& &input type=&button& value=&Focus the text input& onClick={this.handleClick} /&
&&&&& &/div&
ReactDOM.render(
& &MyComponent /&,
& document.getElementById('example')
上面代码中，组件 MyComponent 的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。
需要注意的是，由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定 Click 事件的回调函数，确保了只有等到真实 DOM 发生 Click 事件之后，才会读取 this.refs.[refName] 属性。
React 组件支持很多事件，除了 Click 事件以外，还有 KeyDown 、Copy、Scroll 等，完整的事件清单请查看官方文档。
八、this.state
组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI （查看 demo08 ）。
var LikeButton = React.createClass({
& getInitialState: function() {
&&& return {liked: false};
& handleClick: function(event) {
&&& this.setState({liked: !this.state.liked});
& render: function() {
&&& var text = this.state.liked ? 'like' : 'haven\'t liked';
&&& return (
&&&&& &p onClick={this.handleClick}&
&&&&&&& You {text} this. Click to toggle.
&&&&& &/p&
ReactDOM.render(
& &LikeButton /&,
& document.getElementById('example')
上面代码是一个 LikeButton 组件，它的 getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。
由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。
用户在表单填入的内容，属于用户跟组件的互动，所以不能用 this.props 读取（查看 demo9 ）。
var Input = React.createClass({
& getInitialState: function() {
&&& return {value: 'Hello!'};
& handleChange: function(event) {
&&& this.setState({value: event.target.value});
& render: function () {
&&& var value = this.state.
&&& return (
&&&&& &div&
&&&&&&& &input type=&text& value={value} onChange={this.handleChange} /&
&&&&&&& &p&{value}&/p&
&&&&& &/div&
ReactDOM.render(&Input/&, document.body);
上面代码中，文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。 元素、元素、radio元素都属于这种情况，更多介绍请参考官方文档。
十、组件的生命周期
组件的生命周期分成三个状态：
Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM
React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
此外，React 还提供两种特殊状态的处理函数。
componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用
这些方法的详细说明，可以参考官方文档。下面是一个例子（查看 demo10 ）。
var Hello = React.createClass({
& getInitialState: function () {
&&& return {
&&&&& opacity: 1.0
& componentDidMount: function () {
&&& this.timer = setInterval(function () {
&&&&& var opacity = this.state.
&&&&& opacity -= .05;
&&&&& if (opacity & 0.1) {
&&&&&&& opacity = 1.0;
&&&&& this.setState({
&&&&&&& opacity: opacity
&&& }.bind(this), 100);
& render: function () {
&&& return (
&&&&& &div style={{opacity: this.state.opacity}}&
&&&&&&& Hello {this.props.name}
&&&&& &/div&
ReactDOM.render(
& &Hello name=&world&/&,
& document.body
上面代码在hello组件加载以后，通过 componentDidMount 方法设置一个定时器，每隔100毫秒，就重新设置组件的透明度，从而引发重新渲染。
另外，组件的style属性的设置方式也值得注意，不能写成
style=&opacity:{this.state.opacity};&
style={{opacity: this.state.opacity}}
这是因为 React 组件样式是一个对象，所以第一重大括号表示这是 JavaScript 语法，第二重大括号表示样式对象。
十一、Ajax
组件的数据来源，通常是通过 Ajax 请求从服务器获取，可以使用 componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI （查看 demo11 ）。
var UserGist = React.createClass({
& getInitialState: function() {
&&& return {
&&&&& username: '',
&&&&& lastGistUrl: ''
& componentDidMount: function() {
&&& $.get(this.props.source, function(result) {
&&&&& var lastGist = result[0];
&&&&& if (this.isMounted()) {
&&&&&&& this.setState({
&&&&&&&&& username: lastGist.owner.login,
&&&&&&&&& lastGistUrl: lastGist.html_url
&&&&&&& });
&&& }.bind(this));
& render: function() {
&&& return (
&&&&& &div&
&&&&&&& {this.state.username}'s last gist is
&&&&&&& &a href={this.state.lastGistUrl}&here&/a&.
&&&&& &/div&
ReactDOM.render(
& &UserGist source=&/users/octocat/gists& /&,
& document.body
上面代码使用 jQuery 完成 Ajax 请求，这是为了便于说明。React 本身没有任何依赖，完全可以不用jQuery，而使用其他库。
我们甚至可以把一个Promise对象传入组件，请看Demo12。
ReactDOM.render(
& &RepoList
&&& promise={$.getJSON('/search/repositories?q=&sort=stars')}
& document.body
上面代码从Github的API抓取数据，然后将Promise对象作为属性，传给RepoList组件。
如果Promise对象正在抓取数据（pending状态），组件显示&正在加载&；如果Promise对象报错（rejected状态），组件显示报错信息；如果Promise对象抓取数据成功（fulfilled状态），组件显示获取的数据。
var RepoList = React.createClass({
& getInitialState: function() {
&&& return { loading: true, error: null, data: null};
& componentDidMount() {
&&& this.props.promise.then(
&&&&& value =& this.setState({loading: false, data: value}),
&&&&& error =& this.setState({loading: false, error: error}));
& render: function() {
&&& if (this.state.loading) {
&&&&& return &span&Loading...&/span&;
&&& else if (this.state.error !== null) {
&&&&& return &span&Error: {this.state.error.message}&/span&;
&&& else {
&&&&& var repos = this.state.data.
&&&&& var repoList = repos.map(function (repo) {
&&&&&&& return (
&&&&&&&&& &li&
&&&&&&&&&&& &a href={repo.html_url}&{repo.name}&/a& ({repo.stargazers_count} stars) &br/& {repo.description}
&&&&&&&&& &/li&
&&&&&&& );
&&&&& return (
&&&&&&& &main&
&&&&&&&&& &h1&Most Popular JavaScript Projects in Github&/h1&
&&&&&&&&& &ol&{repoList}&/ol&
&&&&&&& &/main&
上一页： &&&&&下一页：相关内容
暂无与此文章相关内容最新内容React:ES6:ES7中的6种this绑定方法 - 推酷
React:ES6:ES7中的6种this绑定方法
对于大多数开发者来说，JavaScript 的 this 关键字会造成诸多困扰。由于 JavaScript 不具备如 Java 等语言的严格类模型，因而除非是在处理回调，否则代码中的
指向并不清晰。
一般来说，对于部分运行中的代码(非回调)会通过
Function.prototype
提供的一些方法，如
等来绑定函数的上下文。
中，React 使用
指向组件本身，这会给开发者造成一些困扰。如在 React 组件中，可能会经常看到类似如下的代码：
this.setState({ loading: true });
fetch('/').then(function loaded() {
this.setState({ loading: false });
上述代码会造成
this.setState
不是一个函数
的原因是当 promise 的回调被调用时，内部的上下文已经改变了，
指向了错误的对象。
那么，怎么正确绑定代码中的
本文提供的 6 种方式中，有一些是比较老的技术，另一些是针对 React 的，还有一些可能浏览器也不支持，但还是值得探讨一下。
1、this 别名
这种方式就是在 React 组件的作用域顶端创建一个指向
var component =
component.setState({ loading: true });
fetch('/').then(function loaded() {
component.setState({ loading: false });
这种方式方便，易于理解，并能保证
会指向正确的上下文。
.bind(this)
这种方式是在函数运行时将
注入到回调中，使回调中的
能指向正确的上下文：
this.setState({ loading: true });
fetch('/').then(function loaded() {
this.setState({ loading: false });
}.bind(this));
在 JavaScript 中，所有函数都有
方法，其允许你为
指定特定值。一旦函数被绑定，上下文就不能被覆盖，也就意味着
会指向正确的上下文。
3、React Component Methods
React.createClass
来定义组件时，React 允许你随意在此组件的类中定义方法，而在方法中调用的
会自动绑定到组件自身：
React.createClass({
componentWillMount: function() {
this.setState({ loading: true });
fetch('/').then(this.loaded);
loaded: function loaded() {
this.setState({ loading: false });
对于不是非常复杂的组件来说，这是一种非常不错的解决
指向问题的方式。而事实上呢，如果在组件的方法中使用
.bind(this)
，React 会抛出一个警告：
bind(): You are binding a component method to the component. React does this for you automatically in a high-performance way, so you can safely remove this call.
来说，自动绑定并不适用。
4、箭头函数
ES2015 规范引入了
，使函数的定义更加简洁。箭头函数会隐式返回一个值，但更重要的是，它是在一个封闭的作用域中使用
this.setState({ loading: true });
fetch('/').then(() =& {
this.setState({ loading: false });
不管嵌套多少层，箭头函数中的
总能指向正确的上下文，因为
函数体内的
指向的对象，就是定义时所在的对象，而不是使用时所在的对象
。但缺点就是，由于箭头函数不能命名，因而在调试时，堆栈信息给的标签是
anonymous function
将 ES6 的代码转换成 ES5 的代码，就会发现两个有趣的现象：
在某些情况下，编译器能判断函数名是否被赋值给了某个变量
编译器使用
来维护上下文
const loaded = () =& {
this.setState({ loading: false });
// will be compiled to
var _this =
var loaded = function loaded() {
_this.setState({ loading: false });
5、ES7 的绑定语法
在 ES7 中，有一个关于
的提议，提议将
作为一个新的绑定操作符，该操作符会将左值和右值(一个函数)进行绑定。
的实现为例：
function map(f) {
var mapped = new Array(this.length);
for(var i = 0; i & this. i++) {
mapped[i] = f(this[i], i);
与 lodash 不同，我们不需要传递数据给
作为参数：
[1, 2, 3]::map(x =& x * 2)
// [2, 4, 6]
对下面的代码熟悉吗？
[].map.call(someNodeList, myFn);
Array.from(someNodeList).map(myFn);
ES7 的绑定语法允许你像使用箭头函数一样使用
someNodeList::map(myFn);
在 React 中也是可以使用的：
this.setState({ loading: true });
fetch('/').then(this::() =& {
this.setState({ loading: false });
6、方法传参指定
一些函数允许为
传递一个明确的值，保证其指向正确的上下文，例如
作为最后一个参数：
items.map(function(x) {
return &a onClick={this.clicked}&x&/a&;
虽然代码能运行，但这不是函数的一致实现。大部分函数并不接受
参数，所以最好还是采用上文中的其它方式来绑定
译文参考于
已发表评论数()
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
没有分页内容
图片无法显示
视频无法显示
与原文不一致来自： /2016/03/using-react-to-write-a-simple-activity-pages-design-of-operating-system-article/
介绍这个工具前不得不先介绍一下积木系统。
积木系统是 imweb 团队出品、为产品运营而生的一套活动页面发布系统，详细介绍见PPT
简单可以这么理解它的理念:
一个页面 = 一个模板 + 多个组件
一个组件 = 一份代码 + 一份数据
一个组件开发一次，复用多次
一个页面使用多个组件拼装后，实时预览、快速发布上线
此前在阿里实习的时候也接触过一个叫 TMS（淘宝内容管理系统）的系统, 专门用于快速搭建电商运营活动页面.
这种系统可统一理解为运营活动页面发布系统。
这种系统有以下特点：
静态数据或轻后台数据(轻量 CGI)
单页（多图、图文混合偏多)
组件粒度小，可灵活拼装页面
活动页面需要快速发布上线
积木系统已经经受了多个项目的考验，目前也启动了 2.0 的开发计划, 作者 @江源 也曾在 PPT 中提到有开源的计划，大家可以期待一下。
在这里我写了一套类似的 Pager 系统，设计理念大同小异，只不过是想尝试用新的技术栈快速实现。
项目地址是: /laispace/pager
安装环境比较麻烦，先来快速预览下它的功能。
创建一个页面, 添加可复用的组件，进行可视化编辑：
设置页面信息：
生成页面，可本地下载预览：
发布上线，同步到远程机器：
接下来，直接访问 /demo-page2/ 就可以看到发布的页面了。
当我把原型写出来的时候我却发现，ES6 和 React 带来的一系列特性，让我觉得代码写起来爽到飞起，所以给大家分享下有趣的东西。
目前这个代号为 Pager 的系统只实现了简单的 组件编译/页面生成/页面发布 的功能, 还不能用于生产环境.
所以本文先给大家介绍下设计思路 :（ 项目完成后, 再给大家细细介绍它的实现.
发布一个页面上线的流程
这个流程的角色主要对应是产品运营经理, 所以操作必须简单.
新建页面, 配置页面基础信息（标题/分享信息等）
在页面中添加组件并配置组件数据（实时预览/页面大小可拖拽）
新窗口打开预览页面（预览效果就是生成后的页面,需要与线上发布版本一致）
下载页面到本地（不使用一键发布, 自行下载代码使用其他系统发布）
发布页面到服务器（一键发布, 需保证服务器配置好了对应目录的访问权限）
开发一个组件的流程
这个流程的角色主要对应是前端开发, 需要保证开发模式足够舒畅.
新建组件, 编写组件代码
打开组件预览页面
修改组件配置和代码
监听修改, 实时预览更新
开发完成，同步到系统中（重新编译, 覆盖上一个版本）
项目模块划分
系统承载多个项目, 项目中配置归属这个项目的页面在发布时的一些配置信息.
一个页面由多个组件构成, 每个组件为一个文件夹, 组件间相互独立, 本地开发完成后, 编译并导入到系统中.
注意：绿色为已有功能, 目前只提供了页面创建相关功能, 还没有鉴权/版本控制等模块, 所以还不能用于生产环境.
虽然前后端都自己写, 可以采用自己喜欢的接口方式. 但考虑到语义化和拓展性, 还是建议使用前后端分离的 restful 接口形式.
一个名词对应一个资源, 一个动词对应一个操作:
增加一个组件, POST /components/
删除一个组件, DELETE /components/:Id
查找所有组件, GET /components/
查找一个组件, GET /compnents/:Id
修改一个组件, PUT /components/:Id
前后端通信是 JSON 数据格式, 同时使用 mongoose 定义一些数据模型, 方便快速地增删查改, 建立项目原型.
像嵌套比较深的数据, 有时我们并不想定义太多, 那直接用一个 Mixed 类型就可以解决, 比如一个页面中包含多个组件, 每个组件其实是有自己的数据格式的, 我这里并不想用两张表来存储（类似外键）, 所以直接在一个页面下就存储了这个页面需要的所有数据:
importmongoosefrom 'mongoose';
const Schema = mongoose.S
const schema = new mongoose.Schema({
&&name: String,
&&description: String,
&&components: [Schema.Types.Mixed], // 组件, 混合的数据格式
&&project: String,
&&config: Object
页面信息(title + meta + link + script)
一个 html 页面, 从上往下是:
- title&&&&&&页面标题
- meta&&&&&&&&页面元信息
- link/style&&外联或内联样式（自定义样式方便快速修复UI问题而不需要重新发布代码版本）
- script&&&&&&外联或内联脚本（自定义脚本方便快速添加上报点等非固话的操作）
多个模块(component + data)
每个组件都有自己的模板, 对应一套数据, 遵循组件粒度化,一个模板套一份数据的原则.
发布配置(publishIp+publishDir+rsync)
不同的项目下生成不同的页面, 最终使用 rsync 将页面目录同步到远程机器, 远程机器使用 nginx/apache 配置下代理, 就实现了页面发布.
注意: rsync 权限, 建议在远程服务器上创建对应的目录, 给予 rsync 账户只能访问这个目录, 以免带来不必要的安全问题.
这个项目使用 React+ES6 写的, 和大家分享一些小心得.
React 单向数据流降低程序复杂度
我对 React 最重要的理解是单向的自顶向下的组件嵌套和数据流动, 带来了数据的一致性保障. 对于一些不是非常复杂的单页应用, 其实一个页面就是一个组件, 不需要用太多的 flux/redux 等方案也足矣.
state = {name: 'simple', age: 18}
addAge = () =& {&&&&&&
&&&&this.setState({&&&&&&&&&&
&&&&&&&&age: this.state.age++&&&&&&
render : () =& {&&&&
&&&&return (&&&&&&&&
&&&&&&&&&div&
&&&&&&&&&&&&名字：&div&{this.state.name} &/div&
&&&&&&&&&&&&年龄：&div&{this.state.age} &/div&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&buttononClick={this.addAge}&点击加一岁&/button&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&/div&
大胆使用ES6/7
ES6 带来了非常多的特性, 我在使用的过程中感觉比较好玩的是以下几个.
import 带来真正的模块化
async/await 同步方式写异步代码
@decorator 无侵入的装饰器
()=&{} 箭头函数简化代码、保留 this 作用域
babel+webpack 为新特性保驾护航
import 带来真正的模块化
模块化的方案, 以前有 AMD/CMD 甚至是 UMD, 遇上不同的项目就可以用到不同的模块化方案, 自然带有不同的学习成本.
ES6 提供的 import/export 带来的是更舒畅的模块化, 就像在写 python 一样, 一个文件就是一个模块, 纯粹.
有了 babel 将 ES6 无缝地转化为 ES5 代码后, 我觉得如果不考虑转化后的代码体积偏大的问题, 我们在项目中就应该拥抱 ES6.
如果需要兼容以前的 AMD/CMD 模块, 配上 webpack 使用即可.
// 导入全部
importpathfrom 'path';
importComponentfrom '../models/component';
// 导入局部
import { getComponent, getComponents } from '../utils/resources';
async/await 同步方式写异步代码
是异步的操作就应该使用 promise, 配合 ES7 的 async/await 语法糖, 舒服地编写同步的代码风格表示异步的操作, 爽.
首先需要定义多个异步操作，返回 Promise:
const findOnePage = (pageId) =& new Promise((resolve, reject) =& {
&&Page.findOne({_id: pageId}).then(page =& {
&&&&resolve(page);
const findOneProjectByName = (name) =& new Promise((resolve, reject) =& {
&&Project.findOne({name: name}).then(project =& {
&&&&resolve(project);
接着使用 await 获取异步操作的结果:
const page = awaitfindOnePage(pageId);
const project = awaitfindOneProjectByName(page.project);
可以看到, 在使用 async/await 时, 少了回调, 少了嵌套, 代码更加易读. 当然这里的代价是我们需要封装好供 await 使用的 promise（我觉得这里还是挺麻烦的）, 不过我们再也看不到回调地狱了, 我们甚至可以不使用 yield/generator 而直接过渡到 async/await 了.
ES7? ES6 都没普及, 你 TM 叫我用 ES7?
这不是有 babel 嘛~ 用吧!
@decorator 使用无侵入的装饰器
装饰器其实也就是一个语法糖, 尝试这么理解: 我们有 A/B/C 三个函数分别做了三个操作, 现在假设我们突然想在这些函数里头打印一些东西.
去改动三个函数当然可以, 但更好的方式是定一个一个 @D 装饰器, 装饰到三个函数前面, 这样他们除了执行原有功能外, 还能执行我们注入进去的操作.
比如我在项目中, 不同的页面都需要用到 snackbar(操作提示框), 每个页面都是一样的, 没有必要在每个页面都写一样的代码, 只需要将这个组件以及对应的方法封装为一个装饰器, 注入到每个页面组件中, 那么每个页面组件就可以直接使用这个 snackbar(操作提示框) 了.
function withSnackbar (ComposedComponent) {
&&return class withSnackbar extends Component {
&&&&// ...
&&&&render() {
&&&&&&return (
&&&&&&&&&div&
&&&&&&&&&&&ComposedComponent {...this.props} /&
&&&&&&&&&&&Snackbar {...this.state}/&
&&&&&&&&&/div&
importwithStylesfrom '../../decorators/withStyles';
importwithViewportfrom '../../decorators/withViewport';
importwithSnackbarfrom '../../decorators/withSnackbar';
@withViewport
@withStyles(styles)
@withSnackbar
class Page extends Component {
&&&&// ...
箭头函数简化代码、保留 this 作用域
匿名函数使用箭头函数可以这么写:
const emptyFunction = () = & { /*do nothing*/ };&&
有了箭头函数, 妈妈再也不怕 this 突变了…
const socket = io('http://localhost:9999');
&&&&socket.on('connect', () =& {
&&&&&&socket.on('component', (data) =& {
&&&&&&&&&&// 这里的 this 不会突变到指向 window
&&&&&&&&&&this.showSnackbar('本地组件已更新, 自动刷新');
&&&&&&&&&&this.getComponent(data.project, ponent);
大胆使用fetch
使用 fetch 加 await 替代 XHR.
fetch 比起 xhr, 做的事情是一样的, 只是接口更加语义化, 且支持 Promise.
配合 async/await 使用的话, 那叫一个酸爽!
&&&&&&const res = awaitfetch(`/api/generate/`, {
&&&&&&&&method: 'post',
&&&&&&&&// 指定请求头
&&&&&&&&headers: {
&&&&&&&&&&'Accept': 'application/json',
&&&&&&&&&&'Content-Type': 'application/json'
&&&&&&&&},
&&&&&&&&// 指定请求体
&&&&&&&&body: JSON.stringify(data)
&&&&&&// 返回的是一个 promise, 使用 await 去等待异步结果
&&&&&&const json = awaitres.json();
&&&&&&if (json.retcode === 0) {
&&&&&&&&this.showSnackbar('生成成功');
&&&&&&} else {
&&&&&&&&this.showSnackbar('生成失败');
&&&&} catch (error) {
&&&&&&console.error(error);
&&&&&&this.showSnackbar('生成失败');
开发组件实时刷新
本地开发一个组件时, 监听文件变化, 使用 WebSocket 通知页面更新.
起一个 socket 服务, 监听文件变化:
asyncfunction watchResources() {
&&var io = require('socket.io')(9999);
&&io.on('connection', function (socket) {
&&&&event.on('component', (component) =& {
&&&&&&socket.emit('component', component);
&&console.log('watching: ', path.join(__dirname, '../src/resources/**/*'));
&&watch(path.join(__dirname, '../src/resources/**/*')).then(watcher =& {
&&&&watcher.on('changed', (filePath) =& {
&&&&&&console.log('file changed: ', filePath);
&&&&&&// [\/\\] 是为了兼容 windows 下路径分隔的反斜杠
&&&&&&const re = /resources[\/\\](.*)[\/\\]components[\/\\](.*)[\/\\](.*)/;
&&&&&&const results = filePath.match(re);
&&&&&&if (results && results[1] && results[2]) {
&&&&&&&&event.emit('component', {
&&&&&&&&&&project: results[1],
&&&&&&&&&&component: results[2]
&&&&&&&&});
预览组件的页面监听文件变化, 变化后重新向服务器拉取最新编译好的组件, 进行更新.
componentDidMount = () =& {
&&&&const socket = io('http://localhost:9999');
&&&&socket.on('connect', () =& {
&&&&&&socket.on('component', (data) =& {
&&&&&&&&if ((data.project === ponent.project) && (ponent === ponent.name)) {
&&&&&&&&&&console.log('component changed: ', data.project, ponent);
&&&&&&&&&&this.showSnackbar('本地组件已更新, 自动刷新');
&&&&&&&&&&// 重新向服务器拉取最新编译好的组件, 进行更新
&&&&&&&&&&this.getComponent(data.project, ponent);
子页面数据实时更新
生成页面时需要预览页面, 为了避免页面样式被系统样式影响, 应该使用内嵌 iframe 的方式来隔离样式.
父页面使用 postMessage 与子页面进行通信:
const postPageMessage = (page) =& {
&&document.getElementById('pagePreviewIframe').contentWindow.postMessage({
&&&&type: 'page',
&&&&page: page
&&}, '*');
子页面监听父页面数据变化, 更新页面:
window.addEventListener(&message&, (event) =&&&{
&&&&&&// if(event.origin !== 'http://localhost:3000')
&&&&&&console.log('previewPage receives message', event);
&&&&&&if (event.data.type === 'page') {
&&&&&&&&this.setState({
&&&&&&&&&&page: event.data.page
&&&&&&&&});
&&&&}, false);
本文是项目设计介绍, 欢迎大家多多指正. 等我把鉴权功能和版本管理加上，就可以用于生产环境啦, 敬请期待.}