前端分享-2016年里做前端是怎样一种体验

2016-11-09 本文已影响411人 Aaaaaaaaaaayou

公司分享会上的发言稿

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

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

<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

    <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

nodejs

http://2014.jsconf.cn/slides/herman-taobaoweb/index.html#/5

flux/redux

状态管理框架

前端分享-2016年里做前端是怎样一种体验

2016年里做前端是怎样一种体验

React

Hello World

组件化

为什么要组件化

demo

NOT DOM

DEMO1

DEMO2

前端路由

url组成

通过hash实现前端路由-DEMO

react的前端路由

hashHistory

browserHistory

npm

webpack

综合案例

刷单系统

webpack.config.js

app

index.html

main.js

components

App.js

编译生成文件

成品展示

More

nodejs

flux/redux

猜你喜欢

热点阅读