发表于
2015-12-06 17:22:05
React 被坑记录
目标人群献给熟悉基础的React语法的刚接触React的同学~如果你已经写过半年以上的React那也不用看了，毕竟我水平并不高What's ReactReact是一个不存在的网络公司Facebook出的JavaScript视图框架。他们官网写着JUST THE UIVIRTUAL DOMDATA FLOW这三个特性。当我第一次看到的时候在想，这丫的弱爆了，人家动辄就MVC，MVVM的框架，你竟然只写了一个UI？当然，当时我的想法肯定是错的。React拥有非常高的性能，结合单向数据流还有组件化思想，可以很舒服的做出现代化的前端产品。Start首先，得有开发环境。Node的安装推荐用nvm，我在上一篇《编译我的开发环境》里有写。主要是在项目里得加入编译jsx到正常的js$ npm install --save gulp browserify babelify vinyl-source-stream babel-core在gulpfile.babel.js里加上任务import gulp from 'gulp';
import browserify from 'browserify';
import babelify from 'babelify';
import source from 'vinyl-source-stream';
gulp.task('jsx', () =>
...继续阅读
(72)
发表于
2015-12-02 10:30:00
Thea Render 是不是可以代替 vray 做建筑效果图渲染，那里有好的教程？
发表于
2015-11-25 13:21:04
vBulletin5远程代码执行漏洞分析
发表于
2015-11-20 08:30:07
React：组件的生命周期
发表于
2015-11-19 23:42:40
数据可视化教程——如何用D3操纵数据
大数据时代，不仅需要兼顾海量数据的处理工作，更需要关注如何将数据与结果清晰有效的可视化出来。本文介绍利用当下最流行的数据可视化工具——D3，来操纵数据，让数据自行说话！定义数据——绑定数组定义好一个数组后进行绑定是件比较简单的事情，也是最常见的D3中定义数据的方式。举个例子，我们看到多个数据存在一个数组里时，而此时你想用他们做可视化工作，并且在数组更新时希望可视化图像也随之更新。下面的内容就是介绍如何实现这一效果。当然，我们需要首先定义一个数组元素：var data = [10, 15, 30, 50, 80, 65, 55, 30, 20, 10, 8];然后通过选择器将这些数据与html元素绑定，渲染函数中绑定部分如下：d3.select("body").selectAll("div.h-bar") .data(data) .enter() .append("div") .attr("class", "h-bar") .append("span"); // Update d3.select("body").selectAll("div.h-bar") .data(data) .style("width", function (d) { retu
...继续阅读
(50)
发表于
2015-11-12 18:08:40
前端之React实战：创建跨平台的项目架构
本篇为翻译文章，原文地址这里React/React Native一个很受欢迎的地方在于它能够在不同平台之间共享业务逻辑，在看完Desktop, Mobile, and Web app in one project这个项目之后笔者就开始思考应该如何组织项目结构，能够使其在web、desktop(Electron)以及mobile应用之间尽可能地共用相同的代码基础，并且保证能在以后的项目中扩展到其他平台。文件索引首先需要认识到在mobile项目与web/desktop项目中最大的代码区别在render()函数中，换言之，我们所需要做的工作就是将render函数抽象出来，以允许具体平台的工程可以使用正确的代码。要做到这一点，最简单的方式就是利用React Native的一个内部特性，即在使用import/require导入文件时：import File from './File';React Native的打包器会首先寻找File.<platform>.js文件，然后再去寻找File.js。这就允许我们将Android平台的代码放置到File.android.js, iOS 的放入到File.ios.js, 以及Web平台的代码放入到File.js, 而不需要改变导入的声明./File。Render独立于Component这种方式适合于可以在多个平台之间共享复杂状态与逻辑代码
...继续阅读
(12)
发表于
2015-11-09 06:39:00
React源码剖析系列 － 生命周期的管理艺术 - twobin
发表于
2015-11-07 07:19:19
vbulletin论坛0day技术分析
发表于
2015-11-03 14:13:05
koa2.0.0的测试版本-视图渲染、静态文件调用的配置
针对koa2.0.0的测试版本，在使用的过程中遇到了很多的问题，这篇文章讲解一下如何进行操作html的调用和静态文件的调用因为koa2.0.0版本的升级，很多的中间件都没有跟随着一起调整，所以有些中间件就出现了很多问题，这里说的就是针对试图文件的调用渲染和静态文件的调用视图文件的调用使用的是如下的中间件：koa-swig安装koa-swig:cnpm install koa-swig --save配置如下：app.context.render = co.wrap(render({
root: path.join(__dirname, 'dest'),
autoescape: true,
cache: 'memory', // disable, set to false
ext: 'html'
}));路由中调用的方式如下：router.get('/home', (ctx, next) => {
return next().then(() => {
ctx.render('index.html');
});
});这里到这里就解决了视图调用的问题，访问的时候如果页面中调用的是本地的js或者css的话，会包404的错误，就是找不到对应的路由，OK，下面记录下。这里调用得了两个中间件:koa-convert,koa-staticconst convert
...继续阅读
(566)
发表于
2015-11-02 16:34:00
android studio问题rendering problems no render target selected - 超超boy
activity_main.xml选择Design显示rendering problems no render target selected在stackOverflow上找到了答案：You need to run the AVD Manager to add a virtual device that matches the target API version your project is set to.Click Tools->Android->AVD Manager. Click on 'New', add virtual devices targeting higher API levels, e.g 18, 19, etc.Then restart Android Studio, and open your project, it should find a target device to allow you access to the Design view. 就是新建一个虚拟机，api选择高点，我选的21，重启成功。。。本文链接：android studio问题rendering problems no render target selected，转载请注明。
...继续阅读
(124)
发表于
2015-11-02 14:03:22
React源码剖析系列 － 生命周期的管理艺术
发表于
2015-10-27 09:00:27
console.log和res.render的顺序问题
router.get('/’, function(req, res, next) {
console.log(‘test’);
res.render('index’, { title: ‘Express’ });
});
各位大神，我在express里先调用console.log，再render往浏览器发送数据，浏览器总是报未收到数据错误。
求破
...继续阅读
(15)
发表于
2015-10-21 01:31:46
关于JS 作用域的问题
app.get('/movie/:id’, function (req, res) {
var id = req.params.id
console.log(id + “b”)
Movie.findById(id, function(err, movie) {//console.log(movie.title)
res.render('detail’, {
title: ‘imooc’ + movie.title,
movie: movie
})
})
})
这段代码报错：
TypeError: cannot read property ‘title’ of undefined.
然而我render上的那个console.log是能正常输出这个movie对象的请问render怎么能读取到外面的movie对象？
...继续阅读
(17)
发表于
2015-10-20 00:32:52
React Actions Recorder 的模块热替换(HMR)
看到微博上vue-loader开始支持代码热替换的消息真让人坐不住, 赶紧翻代码看下, 结果看不懂现实的压力还是在的,react-hot-loader已经不推荐使用了作者搞了 React Transform, 而且针对 Babel 优化, 整套新的东西而简聊用actions-recorder加react-hot-loader多少有些风险让actions-recorder更好调试是很有必要的关于 Webpack HMR然而问题的重点是, Webpack 是跟很强大但文档挺难懂的项目周末我大致翻了一些文档, 晚上做了写尝试, 大致达成了基本的功能https://github.com/webpack/docs/wiki/hot-module-replacementhttp://jlongster.com/Backend-Apps-with-Webpack--Part-III实际上一个 API 就能解决的事情, 太简单了.. 只是门槛真高啊细节强烈建议读上边两篇文档, 到底还是花了很长篇幅解释的简单的似乎, 大致上就是 Webpack 当中模块实际上是 module tree这个和 DOM tree 很类似, update 在其中就是一个个事件update 事件会冒泡, 可以通过代码捕捉和停止冒泡如果冒泡到根节点, 那么说明代码没有处理 update 事件, 于是刷新页面module.ho
...继续阅读
(21)
发表于
2015-10-14 14:57:08
返回数据，汉字出现乱码
//主页
app.get('/', function (req, res) {
res.render('index', {title: '主页'});
});不知道怎么解决，弄了好久，求大神帮忙解决！
...继续阅读
(5)
发表于
2015-10-10 14:11:00
JS函数式编程【译】4.4 函数式响应式编程 - tolg
🏠 Functional Programming in Javascript 主目录第四章 在Javascript中实现函数式编程的技术函数式响应式编程我们再来建立另一种类型的应用，他的工作方式差不多，都是用函数式编程来响应状态变化。 但是这回应用不会依赖于事件监听。来想象一下，你在一个新闻媒体公司工作，你的老板让你建立一个web应用来跟踪竞选日的政府竞选结果。 数据会根据地方选区的结果持续流动，所以显示在页面上的结果是具有响应式特征的。然而我们还需跟踪每一个区域的结果， 所以会有多个对象需要追踪。我们与其建立一个巨大的面向对象的层次结构来为接口建模，不如把它描述为声明式的不可变数据。 我们可以把它转换为纯函数或者半纯函数，半纯函数在必须保持的状态要更新时才产生副作用（理想状况下不会很多）。我们将使用Bacon.js库，它可以快速开发函数式响应式编程(FRP)的应用。这个应用只在选举日使用， 我们的老板认为它花费的时间应该与之成比例。通过函数式编程和像Bacon.js这样的库，我们将仅需要一半的时间。不过首先我们需要一些对象来描述选区，比如州、省、区等等。functionRegion(name,percent,parties){// 可变属性:this.name=name;this.percent=percent;// % of p
...继续阅读
(18)
发表于
2015-10-06 00:38:14
React中的Portal组件
几个月前遇到了写模态窗（modal）的需求，当初其实没什么思路，不知道怎么用更React的方式实现模态窗，于是去学习了下ReactBootstrap的源代码，发现了一个Portal组件，通过这个Portal的概念实现了React式的模态窗，诸如tooltip或者是notification等组件也是同样的道理。最近在看React-conf的视频时又听到Ryan提到，最近重新回去看ReactBootstrap的源代码，发现其实变化挺大的，原先Portal的部分已经被抽象出了另一个库react-overlays，于是准备总结下这个部分。模态窗的实现思路模态窗扮演这相当于桌面应用的MessageBox的角色，各个浏览器对这个部分的支持有些缺陷（这里指alert或confirm这些），比如每个浏览器实现效果有差异、用户可以禁止其显示，还有最重要的是没有办法灵活控制。于是我们自己来实现，要扮演一个MessageBox，那么我们希望一个modal应该是永远被置于顶层的，而又由于Stacking Context的关系（在此不赘述），我们会将modal直接append在body元素下，设置一个属于它的z-index区间什么的。回到React，在React中要实现一个模态窗，可以是这样的：handleClick () {
$('.modal').modalShow() // 假设这是一个jque
...继续阅读
(28)
发表于
2015-10-02 03:14:08
express里面VIEW支持多级目录结构吗？
一般渲染页面都是res.render('index’,{…});
如果业务逻辑比较复杂，那需要的静态页面比较多，比较麻烦。
为了方便管理，想把静态页面分模块管理。如:view/module1/1.html view/module2/2.html
通过res.render(‘module1/1.html’)好像不支持。
各位知道怎么设置吗？
...继续阅读
(60)
发表于
2015-09-26 23:46:24
[学习笔记] Cordova+AmazeUI+React 做个通讯录 - 联系人列表(1)
发表于
2015-09-16 01:19:31
express node如何运行reactjs页面
框架采用express，模板ejs，服务器nodejs，想和react结合起来使用，该如何渲染前端页面
我的想法是这样的
在后台
router.get('/reactIndex’,function (req,res){
console.log(‘打开react页面’);
res.render('first’, {
markup: ‘react’
});
res.end();
});在views文件夹中渲染的first.ejs文件如下，新建一个build文件夹，和views同级，将react需要的js文件包含
<html>
<head>
<title>react</title>
<script type="text/javascript" src="../build/react.js"></script>
<script src="../build/JSXTransformer.js"></script>
</head><body><script type="text/jsx">
var Search = React.createClass({
render: function() {
return (<inpu
...继续阅读
(48)
发表于
2015-09-15 14:04:29
关于express的疑问
例如我们form点击submit时候，会到路由里去，那么如果在路由里出现一些逻辑验证错误，需要将错误返回到view，这时候可以用render或者direct导航回到原来的view页面，可是之前辛苦填写的那些表单字段的值都没了，如何解决这个困扰，如果用render一个个栏位去添加，那得多麻烦，有没有什么技巧。
...继续阅读
(22)
发表于
2015-09-15 10:43:49
前端之React实战-组件
发表于
2015-09-12 13:45:00
ReactJS入门（四）—— 组件API - vajoy
发表于
2015-09-12 12:38:04
Lumen如何实现类Laravel5用户友好的错误页面
Laravel5实现用户友好的错误页面非常简单，例如想要返回status 404，只需要在view/errors中添加一个404.blade.php文件即可。Lumen中没有默认实现这种便利，于是自己添加一个。Lumen如何实现类Laravel5用户友好的错误页面原理抛出错误的函数是abort(), 进入该函数一看究竟，会发现只是抛出一个HttpException. 在Application中，处理http request的时候，有一个try catch的过程，Exception就是在这里被捕获的。try {
return $this->sendThroughPipeline($this->middleware, function () use ($method, $pathInfo) {
if (isset($this->routes[$method.$pathInfo])) {
return $this->handleFoundRoute([true, $this->routes[$method.$pathInfo]['action'], []]);
}
return $this->handleDispatcherResponse(
$t
...继续阅读
(26)
发表于
2015-09-11 11:56:31
React Server Render
发表于
2015-09-09 13:09:42
CNode React Server Render —CNode社区React服务器端渲染
功能很简单，主要学习React Server Render，如果有机会参与新的项目，估计用上这货，不过仅用于移动端，大型PC就算球了，不敢用！有时间在继续添加新功能代码地址简单演示
...继续阅读
(195)
发表于
2015-09-09 08:40:13
nodejs中使用react 问题
在nodeJs 里面 使用 react
var React = require(‘react/addons’);var ReactApp = React.createClass({
render : function(){
return ( // 启动时报错，语法不正确// 启动时报错，语法不正确// 启动时报错，语法不正确
) // 启动时报错，语法不正确
}
});
启动时报错啊~~请问如何解决啊？
...继续阅读
(19)
发表于
2015-08-31 18:33:56
React Component Lifecycle
概述我们先来理一理React的生命周期方法有哪些：componentWillMount渲染前调用一次，这个时候DOM结构还没有渲染。componentDidMount渲染完成后调用一次，这个时候DOM结构已经渲染了。这个时候就可以初始化其他框架的设置了，如果利用jQuery绑定事件等等。componentWillReceiveProps初始化渲染不会调用，在接收到新的props时，会调用这个方法。shouldComponentUpdate初始化渲染不会调用，接收到新的props或state时调用。componentWillUpdate初始化渲染不会调用，更新前调用。componentDidUpdate初始化渲染不会调用，更新后调用。componentWillUnmount组件移除前调用。根据执行的时机，这些方法可以分为三类。组件挂载组件渲染前后会执行，而且只会执行一次，看个例子var A = React.createClass({
componentWillMount: function () {
console.log('A componentWillMount');
},
componentDidMount: function () {
console.log('A componentD
...继续阅读
(20)
发表于
2015-08-30 22:48:30
了解一个React组件
最近React，这个专注View层的库格外火热，我个人已经探索了一段时间，本来一直想写一些文字，总结下React应用开发和webpack构建工具的经验。不过懒癌复发，一直没动笔。前段时间给团队安利这个库，现在要开始用它写项目了，所以自己挖的坑要填上，就开始写一些基本的东西，就先从介绍React组件的基础开始。从一个简单的组件开始标题叫“一个简单的组件”，于是先来看下官方网站上一个叫做“A Simple Component”的例子来感受下：var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>
}
})
React.render(<HelloMessage name="John" />, mountNode)好的，通过React提供的工厂方法，我们创建了一个组件，在这里，我们认为createClass创建了一张blueprint，而通过jsx语法创建的<HelloMessage name="John" />则返回一个ReactElement对象来具体地告诉React要如何渲染组件（因为除了blueprint以外还需要一些外部状态的传入），这等同于调用React.createE
...继续阅读
(39)
发表于
2015-08-27 14:52:00
React 实践记录 01 组件开发入门 - 官文祥
