公司分享会上的发言稿
2016年里做前端是怎样一种体验
https://segmentfault.com/a/1190000007083024?utm_source=tuicool&utm_medium=referral
- React
- webpack
- npm
React
https://facebook.github.io/react/
A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
Hello World
Paste_Image.png
组件化
为什么要组件化
Paste_Image.png
Paste_Image.png
demo
<div id="example"></div>
<script type="text/babel">
// Header 组件
var Header = React.createClass({
render: function() {
return (
<div className="header">
{this.props.title}
</div>
);
}
});
ReactDOM.render(
<div>
<Header title='标题一'/>
<Header title='标题二'/>
<Header title='标题三'/>
</div>,
document.getElementById('example')
)
</script>
NOT DOM
DEMO1
Paste_Image.png
Paste_Image.png
<div id="example1">
<div id="text1">Hello world</div>
<button id="btn1">操作DOM改变文字</button>
</div>
<div id="example2"></div>
<script type="text/babel">
// 传统方式DOM
var btn = document.getElementById('btn1')
btn.onclick = function() {
document.getElementById('text1').innerHTML = 'Hello React'
}
// react方式
var App = React.createClass({
getInitialState: function() {
return {
text:'Hello world'
}
},
_onClick: function() {
this.setState({
text:'Hello React'
})
},
render: function() {
return (
<div>
<div>{this.state.text}</div>
<button onClick={this._onClick}>通过修改组件的state属性来改变文字</button>
</div>
);
}
});
ReactDOM.render(
<App/>,
document.getElementById('example2')
);
</script>
DEMO2
Paste_Image.png
<div id="example1">
<h2>操作DOM增加节点</h2>
<input id="text" type="text">
<button id="btn1">增加节点</button>
<ul id="list">
</ul>
</div>
<div id="example2"></div>
<script type="text/babel">
// 传统方式
var btn = document.getElementById('btn1')
var list = document.getElementById('list')
btn.onclick= function() {
var text = document.getElementById('text') .value
var li = document.createElement("li")
li.innerHTML = text
list.appendChild(li)
}
// react方式
var App = React.createClass({
getInitialState: function() {
return {
list:[]
}
},
_onClick: function() {
var tmp = this.state.list
var text = this.refs.text.value
tmp.push(text)
this.setState({
list:tmp
})
},
render: function() {
return (
<div>
<h2>React方式增加节点</h2>
<input type="text" ref="text"/>
<button onClick={this._onClick}>增加节点</button>
<ul>
{
this.state.list.map(function(item) {
return (<li>{item}</li>)
})
}
</ul>
</div>
);
}
});
ReactDOM.render(
<App/>,
document.getElementById('example2')
);
</script>
前端路由
url组成
http://www.xxxx.com/test?id=1#anchor
协议（protocol）：http:
主机（host）：www.xxxx.com
路径（test）:/test
查询（search）:?id=1
锚（hash）：#anchor
通过hash实现前端路由-DEMO
Paste_Image.png
Paste_Image.png
Paste_Image.png
<div id="page1" >页面一</div>
<div id="page2" class="hide">页面二</div>
<div id="page3" class="hide">页面三</div>
<script>
var divs = document.getElementsByTagName('div')
function showPage(id) {
for (var i = divs.length - 1; i >= 0; i--) {
if (divs[i].id===id) {
divs[i].className = null
} else {
divs[i].className = 'hide'
}
}
}
window.onhashchange = function() {
var hash = location.hash.split('#/')[1]
showPage(hash)
}
</script>
react的前端路由
hashHistory
<Router history={hashHistory}>
<Route path="/">
<Route path="/discover/list.htm" component={DiscoverList}/>
<Route path="/discover/detail.htm" component={DiscoverDetail}/>
</Route>
</Router>
Paste_Image.png
browserHistory
<Router history={browserHistory}>
<Route path="/">
<Route path="/discover/list.htm" component={DiscoverList}/>
<Route path="/discover/detail.htm" component={DiscoverDetail}/>
</Route>
</Router>
此方法需要后台配合
router.get('/discover/*',function(req,res,next) {
res.send(`
<html>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,height=device-height,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no, email=no"/>
<title>妈妈送房</title>
<body>
<script type="text/javascript" src="/config.js"></script>
<script type="text/javascript" src="/bundle.js"></script>
</body>
</html>
`)
});
Paste_Image.png
npm
https://www.npmjs.com/
javascript的包管理器，类似于maven
安装
安装node后自动安装-
使用
- 安装包
npm install jquery
- 使用包
var $ = require('jquery')
webpack
一款模块加载器兼打包工具，demo
不仅可打包js，还可打包css，图片，字体等
综合案例
刷单系统
Paste_Image.png
webpack.config.js
var webpack = require('webpack');
var path = require('path');
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
devtool: 'cheap-source-map',
entry: {
bundle:path.resolve(__dirname, 'app/main.js')
},
output: {
path: __dirname + '/build/clickfarming',
publicPath: '/',
filename: './[name].js'
},
module: {
loaders:[
{ test: /\.js[x]?$/, exclude: '/node_modules/', include: path.resolve(__dirname, 'app'), loader: 'babel-loader' },
{ test: /\.less$/, include: path.resolve(__dirname, 'app'), loader: 'style!css?module!autoprefixer!less' },
{ test: /\.(ttf|otf)$/, loader: 'url-loader?limit=8192&name=font/[name].[ext]'}
]
},
resolve: {
extensions: ['', '.js', '.jsx'],
},
plugins: [
new webpack.optimize.DedupePlugin(),
new uglifyJsPlugin({
compress: {
warnings: false
}
}),
new CopyWebpackPlugin([
{ from: './app/index.html', to: 'clickFarmingIndex.html' },
{ from: './app/config.js', to: 'config.js' },
]),
]
};
app
Paste_Image.png
index.html
<html>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,height=device-height,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no, email=no"/>
<title>妈妈送房</title>
<body>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import './main.less'
ReactDOM.render(
<App />,
document.body.appendChild(document.createElement('div'))
);
components
Paste_Image.png
App.js
import React from 'react'
import { Router, Route, hashHistory, IndexRoute} from 'react-router';
import List from './list/List'
import Reserve from './reserve/Reserve'
import Order from './order/Order'
import PayLoading from './pay-loading/PayLoading'
import Success from './success/Success'
import PageTransition from 'react-router-page-transition';
export default class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Router history={hashHistory}>
<Route path="/">
<IndexRoute component={List}/>
<Route path="/list" component={List}/>
<Route path="/reserve" component={Reserve}/>
<Route path="/order" component={Order}/>
<Route path="/payLoading/:orderId/:amt/:shopId" component={PayLoading}/>
<Route path="/success" component={Success}/>
</Route>
</Router>
);
}
}
编译生成文件
Paste_Image.png
成品展示
http://m.mmsfang.com/my/clickfarm/index.htm?shopId=1#/
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
More
nodejs
http://2014.jsconf.cn/slides/herman-taobaoweb/index.html#/5
flux/redux
状态管理框架
