一、前言

　　实习了两个月，把在公司用到的前端开发模式做个简单的整理。公司里前端开发模式webpack+react+redux+es6，这里去掉了redux。

　　webpack, react, redux等学习网址：http://www.cnblogs.com/hujunzheng/p/5405780.html

二、简单的步骤条组件

　　

1、通过react自定义的组件进行模拟

　   注：只是用了react，用到相关react的js请到 https://github.com/hjzgg/webpack-react 下的build文件夹下载。

　　html如下：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <link rel="stylesheet" type="text/css" href="step.css">
  5.     <script src="../build/react.js"></script>
  6.     <script src="../build/react-dom.js"></script>
  7.     <script src="../build/browser.min.js"></script>
  8.   </head>
  9.   <body>
  10.     <div id="example"></div>
  11.     <script type="text/babel">
  12.         var Line = React.createClass({
  13.             render: function() {
  14.                 let self = this;
  15.                 let active = this.props.active;
  16.                 let value = 0;//进度条没有加载
  17.                 if(active == 1) {//进度条加载完成
  18.                     value = 100;
  19.                 }
  20.                 return (
  21.                     <div className="ant-progress-line">
  22.                         <div>
  23.                             <div className="ant-progress-outer">
  24.                                 <div className="ant-progress-inner">
  25.                                     <div style={{width: value+"%"}} className="ant-progress-bg">
  26.                                     </div>
  27.                                 </div>
  28.                             </div>
  29.                         </div>
  30.                     </div>
  31.                 );
  32.             }
  33.         });
  34.  
  35.         var Circle = React.createClass({
  36.             render: function(){
  37.                 let content = this.props.content;
  38.                 let number = this.props.number;
  39.                 let active = this.props.active;
  40.                 let self = this;
  41.                 return (
  42.                     <div className="ant-steps-head">
  43.                         <div className="ant-steps-head-inner" style={active ? {backgroundColor: "#2db7f5"} : {backgroundColor: "#c1c1c1"}} onClick={function(){self.props.preStep(number)}}>
  44.                             <span className="ant-steps-icon"> {number+1} </span>
  45.                         </div>
  46.                         <div className="ant-steps-text" style={active ? {color: "#2db7f5"} : {color: "#c1c1c1"}}>
  47.                             {content}
  48.                         </div>
  49.                     </div>
  50.                 );
  51.             }
  52.         });
  53.  
  54.         var Step = React.createClass({
  55.             getInitialState: function() {
  56.                 return {
  57.                        curStep: 0,//当前正操作哪一步
  58.                     maxStep: 0,//执行最远的一步
  59.                 };
  60.             },
  61.  
  62.               nextStep: function(){
  63.                   let self = this;
  64.                   let curStep = this.state.curStep;
  65.                   let maxStep = this.state.maxStep;
  66.                   this.setState({
  67.                       curStep: curStep+1,
  68.                       maxStep: maxStep <= curStep ? curStep+1 : maxStep,
  69.                   });
  70.               },
  71.  
  72.               preStep: function(toStep){
  73.                   let maxStep = this.state.maxStep;
  74.                   let curStep = this.state.curStep;
  75.                   if(toStep > maxStep || toStep == curStep) return;
  76.                   this.setState({
  77.                       curStep: toStep,
  78.                   });
  79.  
  80.                   if(this.props.mainPreStep)
  81.                       this.props.mainPreStep(toStep);
  82.               },
  83.  
  84.             render: function(){
  85.                 let self = this;
  86.                 let contents = self.props.contents;
  87.                 let steps = contents.map(function(content, index){
  88.                     let activeCircle = true;
  89.                     let activeLine = false;
  90.                     if(self.state.curStep > 0 && self.state.curStep-1 >= index) activeLine = true;
  91.                     if(index > self.state.curStep) activeCircle = false;
  92.                     if(index == contents.length-1) {
  93.                         if(index == 0) {
  94.                             return (
  95.                                 <div className="step-main-div">
  96.                                     <Circle active={activeCircle} content={content} number={index} preStep={self.preStep}/>
  97.                                 </div>
  98.                             );
  99.                         } else {
  100.                             return (
  101.                                 <div className="step-main-div step-main-div-move">
  102.                                     <Circle active={activeCircle} content={content} number={index} preStep={self.preStep}/>
  103.                                 </div>
  104.                             );
  105.                         }
  106.                     } else if(index == 0) {
  107.                         return (
  108.                             <div className="step-main-div">
  109.                                 <Circle active={activeCircle} content={content} number={index} preStep={self.preStep}/>
  110.                                 <Line active={activeLine}/>
  111.                             </div>
  112.                         );
  113.                     } else {
  114.                         return (
  115.                             <div className="step-main-div step-main-div-move">
  116.                                 <Circle active={activeCircle} content={content} number={index} preStep={self.preStep}/>
  117.                                 <Line active={activeLine}/>
  118.                             </div>
  119.                         );
  120.                     }
  121.                 });
  122.  
  123.                 return (
  124.                     <div style={{width: "100%"}}>
  125.                         {
  126.                             steps
  127.                         }
  128.                     </div>
  129.                 );
  130.             }
  131.         });
  132.  
  133.         var MainDiv = React.createClass({
  134.             nextStep: function(){
  135.                 this.refs.myStep.nextStep();
  136.             },
  137.             render: function(){
  138.                 return (
  139.                     <div>
  140.                         <div style={{marginTop: "100px", width: "70%", display: "inline-block"}}>
  141.                             <Step contents={["first", "second", "third", "forth"]} ref="myStep"/>
  142.                         </div>
  143.                         <div style={{display: "inline"}}>
  144.                             <a href="javascript:void(0)" onClick={this.nextStep}>next</a>
  145.                         </div>
  146.                     </div>
  147.                 );
  148.             }
  149.         });
  150.  
  151.           ReactDOM.render(
  152.                 <MainDiv />,
  153.                document.getElementById('example')
  154.          );
  155.     </script>
  156.   </body>
  157. </html>

　　css如下：

  1. .ant-steps-head {
  2.     width: 200px;
  3.     position: relative;
  4.     display: inline-block;
  5.     vertical-align: top;
  6.     text-align: center;
  7. }
  8.  
  9. .ant-steps-text{
  10.     width: 200px;
  11.     font-size: 16px;
  12. }
  13.  
  14. .ant-steps-head-inner {
  15.     margin: auto;
  16.     border-color: #2db7f5;
  17.     display: block;
  18.     border: 1px solid #ccc;
  19.     cursor: pointer;
  20.     width: 40px;
  21.     height: 40px;
  22.     line-height: 40px;
  23.     border-radius: 40px;
  24.     font-size: 18px;
  25.     -webkit-transition: background-color .3s ease,border-color .3s ease;
  26.     transition: background-color .3s ease,border-color .3s ease;
  27. }
  28.  
  29. .ant-steps-icon {
  30.     color: #fff;
  31.     line-height:;
  32.     top: -1.5px;
  33.     position: relative;
  34. }
  35.  
  36. .ant-progress-line {
  37.     width: 235px;
  38.     margin-left: -75px;
  39.     line-height: 40px;
  40.     position: relative;
  41.     display: inline-block;
  42. }
  43.  
  44. .ant-progress-outer {
  45.     padding-right: 45px;
  46.     margin-right: -45px;
  47.     display: inline-block;
  48.     width: 100%;
  49. }
  50.  
  51. .ant-progress-inner {
  52.     display: inline-block;
  53.     width: 100%;
  54.     background-color: #c1c1c1;
  55.     border-radius: 100px;
  56.     vertical-align: middle;
  57. }
  58.  
  59. .ant-progress-bg {
  60.     border-radius: 100px;
  61.     height: 4px;
  62.     background-color: #2db7f5;
  63.     -webkit-transition: all .3s linear 0s;
  64.     transition: all .3s linear 0s;
  65.     position: relative;
  66. }
  67.  
  68. .step-main-div{
  69.     display:inline;
  70.     width: 315px;
  71. }
  72.  
  73. .step-main-div-move{
  74.     margin-left: -120px;
  75. }

2、通过webpack+react+es6进行模拟

　　注：可以fork我的github https://github.com/hjzgg/webpack-react/tree/master/webpackAndReact ，当然可以从0开始...

　  （1）、首先为项目建立一个名字，例如“webpack+react”,  建立src/step、src/css和build目录，在项目根目录下建立package.json文件，内容如下：

  1. {
  2.   "name": "react-webpack",
  3.   "version": "1.0.0",
  4.   "description": "webpack demo",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "start": "node server.js",
  8.     "dev": "webpack-dev-server --port 8000 --devtool eval --progress --colors --hot --inline",
  9.     "build-before": "webpack --display-error-details --progress --colors -p",
  10.     "build": "webpack --config webpack.build.config.js --display-error-details --progress --colors",
  11.     "build-watch": "webpack --display-error-details --progress --colors --watch --debug --devtool source-map --output-pathinfo",
  12.     "test": "echo \"Error: no test specified\" && exit 1"
  13.   },
  14.  
  15.   "keywords": [
  16.     "react",
  17.     "webpack"
  18.   ],
  19.  
  20.   "author": "hjzgg",
  21.  
  22.   "devDependencies": {
  23.     "babel-core": "^6.3.21",
  24.     "babel-loader": "^6.2.4",
  25.     "babel-preset-es2015": "^6.3.13",
  26.     "babel-preset-react": "^6.3.13",
  27.     "css-loader": "~0.16.0",
  28.     "style-loader": "~0.12.3",
  29.     "react": "^0.14.3",
  30.     "react-hot-loader": "^1.3.0",
  31.     "react-router": "^1.0.2",
  32.     "extract-text-webpack-plugin": "^0.8.2",
  33.     "webpack": "^1.12.9",
  34.     "webpack-dev-server": "^1.14.0"
  35.   },
  36.  
  37.   "dependencies": {
  38.     "lodash": "^3.9.3",
  39.     "react": "^0.14.3",
  40.     "react-dom": "^0.14.3"
  41.   }
  42. }

　　（2）、第二步就是创建我们webpack的配置文件webpack.config.js

  1. var webpack = require('webpack');
  2. module.exports = {
  3.     entry: [
  4.       'webpack/hot/only-dev-server',
  5.       "./src/step/app.js"
  6.     ],
  7.     output: {
  8.         path: './build',
  9.         filename: 'bundle.js'
  10.     },
  11.     module: {
  12.         loaders: [
  13.             {test: /\.js?$/, exclude: /node_modules/, loaders: ['react-hot','babel-loader?presets[]=react,presets[]=es2015'] },
  14.             { test: /\.css$/, loader: 'style!css'}
  15.         ]
  16.     },
  17.     resolve:{
  18.         extensions:['','.js','.json']
  19.     },
  20.     plugins: [
  21.       new webpack.NoErrorsPlugin()
  22.     ]
  23. };

　　（3）、入口文件 index.html

  1. <!doctype html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>New React App</title>
  6.     <!<link rel="stylesheet" type="text/css" href="src/css/main.css"> -->
  7.     <!-- <link rel="stylesheet" type="text/css" href="src/css/step.css"> -->
  8.   </head>
  9.   <body>
  10.     <script src="bundle.js"></script>
  11.   </body>
  12. </html>

　　　　注意，这里面引用的bundle.js文件非常重要，它是我们打包后的入口文件，不引入它程序是跑不起来的。

　　（4）、程序的入口文件src/step/app.js，在这里加载了我们自定义的步骤条组件

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import MainDiv from './mainDiv';
  4.  
  5. ReactDOM.render
  6. (
  7.    <MainDiv />,
  8.    document.body
  9. );

　　（5）、src/step/app.js中引用的src/step/mainDiv.js

  1. import React from 'react';
  2. import Step from './Step';
  3.  
  4. export default class MainDiv extends React.Component{
  5.     constructor(props){
  6.         super(props);
  7.         this.nextStep = this.nextStep.bind(this);
  8.     }
  9.  
  10.     nextStep(){
  11.         this.refs.myStep.nextStep();
  12.     }
  13.  
  14.     render(){
  15.         return (
  16.             <div>
  17.                 <div style={{marginTop: "100px", width: "70%", display: "inline-block"}}>
  18.                     <Step contents={["first", "second", "third", "forth"]} ref="myStep"/>
  19.                 </div>
  20.                 <div style={{display: "inline"}}>
  21.                     <a href="javascript:void(0)" onClick={this.nextStep}>next</a>
  22.                 </div>
  23.             </div>
  24.         );
  25.     }
  26. }

　　（6）、src/step/mainDiv.js中引用的src/step/Step.jsp  (自定的步骤条组件)

  1. import React from 'react';
  2. import '../css/step.css';
  3. class Line extends React.Component{
  4.     constructor(props){
  5.         super(props);
  6.     }
  7.     render(){
  8.         let self = this;
  9.         let active = this.props.active;
  10.         let value = 0;//进度条没有加载
  11.         if(active == 1) {//进度条加载完成
  12.             value = 100;
  13.         }
  14.         return(
  15.             <div className="ant-progress-line">
  16.                 <div>
  17.                     <div className="ant-progress-outer">
  18.                         <div className="ant-progress-inner">
  19.                             <div style={{width: value+"%"}} className="ant-progress-bg">
  20.                             </div>
  21.                         </div>
  22.                     </div>
  23.                 </div>
  24.             </div>
  25.         );
  26.     }
  27. }
  28.  
  29. class Circle extends React.Component{
  30.     constructor(props){
  31.         super(props);
  32.     }
  33.  
  34.     render(){
  35.         let content = this.props.content;
  36.         let number = this.props.number;
  37.         let active = this.props.active;
  38.         let self = this;
  39.         return (
  40.             <div className="ant-steps-head">
  41.                 <div className="ant-steps-head-inner" style={active ? {backgroundColor: "#2db7f5"} : {backgroundColor: "#c1c1c1"}} onClick={function(){self.props.preStep(number)}}>
  42.                     <span className="ant-steps-icon"> {number+1} </span>
  43.                 </div>
  44.                 <div className="ant-steps-text" style={active ? {color: "#2db7f5"} : {color: "#c1c1c1"}}>
  45.                     {content}
  46.                 </div>
  47.             </div>
  48.         );
  49.     }
  50. }
  51.  
  52. class Step extends React.Component {
  53.     constructor(props) {
  54.         super(props);
  55.         this.state = {
  56.            curStep: 0,//当前正操作哪一步
  57.            maxStep: 0,//执行最远的一步
  58.         };
  59.  
  60.         this.nextStep = this.nextStep.bind(this);
  61.         this.preStep = this.preStep.bind(this);
  62.       }
  63.  
  64.       nextStep(){
  65.           let self = this;
  66.           let curStep = this.state.curStep;
  67.           let maxStep = this.state.maxStep;
  68.           this.setState({
  69.               curStep: curStep+1,
  70.               maxStep: maxStep <= curStep ? curStep+1 : maxStep,
  71.           });
  72.       }
  73.  
  74.       preStep(toStep){
  75.           let maxStep = this.state.maxStep;
  76.           let curStep = this.state.curStep;
  77.           if(toStep > maxStep || toStep == curStep) return;
  78.           this.setState({
  79.               curStep: toStep,
  80.           });
  81.  
  82.           if(this.props.mainPreStep)
  83.               this.props.mainPreStep(toStep);
  84.       }
  85.  
  86.     render(){
  87.         let self = this;
  88.         let contents = self.props.contents;
  89.         let steps = contents.map(function(content, index){
  90.             let activeCircle = true;
  91.             let activeLine = false;
  92.             if(self.state.curStep > 0 && self.state.curStep-1 >= index) activeLine = true;
  93.             if(index > self.state.curStep) activeCircle = false;
  94.             if(index == contents.length-1) {
  95.                 if(index == 0) {
  96.                     return (
  97.                         <div className="step-main-div">
  98.                             <Circle active={activeCircle} content={content} number={index} preStep={self.preStep}/>
  99.                         </div>
  100.                     );
  101.                 } else {
  102.                     return (
  103.                         <div className="step-main-div step-main-div-move">
  104.                             <Circle active={activeCircle} content={content} number={index} preStep={self.preStep}/>
  105.                         </div>
  106.                     );
  107.                 }
  108.             } else if(index == 0) {
  109.                 return (
  110.                     <div className="step-main-div">
  111.                         <Circle active={activeCircle} content={content} number={index} preStep={self.preStep}/>
  112.                         <Line active={activeLine}/>
  113.                     </div>
  114.                 );
  115.             } else {
  116.                 return (
  117.                     <div className="step-main-div step-main-div-move">
  118.                         <Circle active={activeCircle} content={content} number={index} preStep={self.preStep}/>
  119.                         <Line active={activeLine}/>
  120.                     </div>
  121.                 );
  122.             }
  123.         });
  124.  
  125.         return (
  126.             <div style={{width: "100%"}}>
  127.                 {
  128.                     steps
  129.                 }
  130.             </div>
  131.         );
  132.     }
  133. }
  134.  
  135. module.exports = Step;

　　（7）、src/css/step.css  (组件样式)

  1. .ant-steps-head {
  2.     width: 200px;
  3.     position: relative;
  4.     display: inline-block;
  5.     vertical-align: top;
  6.     text-align: center;
  7. }
  8.  
  9. .ant-steps-text{
  10.     width: 200px;
  11.     font-size: 16px;
  12. }
  13.  
  14. .ant-steps-head-inner {
  15.     margin: auto;
  16.     border-color: #2db7f5;
  17.     display: block;
  18.     border: 1px solid #ccc;
  19.     cursor: pointer;
  20.     width: 40px;
  21.     height: 40px;
  22.     line-height: 40px;
  23.     border-radius: 40px;
  24.     font-size: 18px;
  25.     -webkit-transition: background-color .3s ease,border-color .3s ease;
  26.     transition: background-color .3s ease,border-color .3s ease;
  27. }
  28.  
  29. .ant-steps-icon {
  30.     color: #fff;
  31.     line-height: 1;
  32.     top: -1.5px;
  33.     position: relative;
  34. }
  35.  
  36. .ant-progress-line {
  37.     width: 235px;
  38.     margin-left: -75px;
  39.     line-height: 40px;
  40.     position: relative;
  41.     display: inline-block;
  42. }
  43.  
  44. .ant-progress-outer {
  45.     padding-right: 45px;
  46.     margin-right: -45px;
  47.     display: inline-block;
  48.     width: 100%;
  49. }
  50.  
  51. .ant-progress-inner {
  52.     display: inline-block;
  53.     width: 100%;
  54.     background-color: #c1c1c1;
  55.     border-radius: 100px;
  56.     vertical-align: middle;
  57. }
  58.  
  59. .ant-progress-bg {
  60.     border-radius: 100px;
  61.     height: 4px;
  62.     background-color: #2db7f5;
  63.     -webkit-transition: all .3s linear 0s;
  64.     transition: all .3s linear 0s;
  65.     position: relative;
  66. }
  67.  
  68. .step-main-div{
  69.     display:inline;
  70.     width: 315px;
  71. }
  72.  
  73. .step-main-div-move{
  74.     margin-left: -120px;
  75. }

　　（8）、在项目根目录下，打开bash，执行npm install, 等待执行完毕，项目的根目录下会多出node_modules文件夹，这是项目所需要的一些依赖文件。

　　（9）、最后npm run dev，将项目跑起来...

3、css-loader和style-loader

　　webpack可以很方便的帮助我们导入css文件，需要我们下载css的loader，然后在webpack.config.js中配置（这里已经配置好了）。然后在js文件直接import 'xxx.css'就可以直接使用css样式了。

　　引用css的另一个办法就是在入口文件index.html中通过<link .../>来实现，也可以达到目的。当然还是推荐前者。

4、配置问题

　　关于工程依赖，工程启动，es6解析等一些配置，还是要好好研究一下package.json和webpack.config.js这两个文件了，请看看下面的文章：

　　http://www.cnblogs.com/skylar/p/React-Webpack-ES6.html

三、demo下载

　　https://github.com/hjzgg/webpack-react

webpack+react+es6开发模式的更多相关文章

  1. Webpack+React+ES6开发模式入门指南

    React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...

  2. webpack+react+redux+es6开发模式

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  3. webpack学习（五）—webpack+react+es6（第1篇）

    如果你看过webpack学习系列的前一个文章,接下来做的东西会比较简单 :webpack学习(四)— webpack-dev-server react发展的很快,现在大部分开发react相关的项目,都 ...

  4. webpack+react+redux+es6开发模式---续

    一.前言 之前介绍了webpack+react+redux+es6开发模式 ,这个项目对于一个独立的功能节点来说是没有问题的.假如伴随着源源不断的需求,前段项目会涌现出更多的功能节点,需要独立部署运行 ...

  5. [webpack] 配置react+es6开发环境

    写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开 ...

  6. Webpack+React+ES6入门指南[转]

    React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...

  7. Webpack+React+ES6 最新环境搭建和配置（2017年）

    刚刚学习React,发现React在ES6下的语法才是本体,结合ES6新的语言特性,使组件化开发显得更加直观.而且现在的Angular2也开始使用支持强类型的TypeScript,转译(transpi ...

  8. webpack + react + es6, 并附上自己碰到的一些问题

    最近一直在学react,react的基础部分已经学得差不多了,然而自己并没有做详细的记录,有兴趣的同志可以参考阮一峰老师的教程,个人觉得挺不错的,链接如下:https://github.com/rua ...

  9. webpack学习（六）—webpack+react+es6（第3篇）

    接上篇 : webpack学习(六)—webpack+react+es6(第2篇) 上篇其实是有问题的,问题在取服务器数据这块.this.props 表示那些一旦定义,就不再改变的特性,而 this. ...

随机推荐

  1. 如何一步一步用DDD设计一个电商网站（一）—— 先理解核心概念

    一.前言     DDD(领域驱动设计)的一些介绍网上资料很多,这里就不继续描述了.自己使用领域驱动设计摸滚打爬也有2年多的时间,出于对知识的总结和分享,也是对自我理解的一个公开检验,介于博客园这个平 ...

  2. 探索C#之6.0语法糖剖析

    阅读目录: 自动属性默认初始化 自动只读属性默认初始化 表达式为主体的函数 表达式为主体的属性(赋值) 静态类导入 Null条件运算符 字符串格式化 索引初始化 异常过滤器when catch和fin ...

  3. 博客使用BOS上传图片

    1.博客平台的选定 从大学开始做个人主页算起,最开始是使用html,CSSS写简单的页面,后面大学毕业之后接触到了WordPress,就开始用WordPress搭建网站.现在还维护着一个农村网站.ht ...

  4. C#向PPT文档插入图片以及导出图片

    PowerPoint演示文稿是我们日常工作中常用的办公软件之一,而图片则是PowerPoint文档的重要组成部分,那么如何向幻灯片插入图片以及导出图片呢?本文我将给大家分享如何使用一个免费版Power ...

  5. android studio 使用 jni 编译 opencv 完整实例 之 图像边缘检测！从此在andrid中自由使用 图像匹配、识别、检测

    目录: 1,过程感慨: 2,运行环境: 3,准备工作: 4,编译 .so 5,遇到的关键问题及其解决方法 6,实现效果截图. (原创:转载声明出处:http://www.cnblogs.com/lin ...

  6. 前端性能优化的另一种方式——HTTP2.0

    最近在读一本书叫<web性能权威指南>谷歌公司高性能团队核心成员的权威之作. 一直听说HTTP2.0,对此也仅仅是耳闻,没有具体研读过,这次正好有两个篇章,分别讲HTTP1.1和HTTP2 ...

  7. 《LoadRunner12七天速成宝典》签售会2016-12-17北京

    报名地址: http://www.after615.com/actives/s?id=3141&time=1480042829608&sign=9ac8e25e9ab3cf57f613 ...

  8. 开发者的利器：Docker 理解与使用

    困扰写代码的机器难免会被我们安装上各种各样的开发工具.语言运行环境和引用库等一大堆的东西,长久以来不仅机器乱七八糟,而且有些相同的软件还有可能会安装不同的版本,这样又会导致一个项目正常运行了,却不小心 ...

  9. 工行ICBC_WAPB_B2C支付接口

    一. 前期准备 手机银行(WAP)B2C在线支付接口说明V1.0.0.6.doc 手机银行移动生活商户及门户网站js接口API.doc 支付组件ICBCEBankUtil.dll和infosecapi ...

  10. [算法]——快速排序（Quick Sort）

    顾名思义,快速排序(quick sort)速度十分快,时间复杂度为O(nlogn).虽然从此角度讲,也有很多排序算法如归并排序.堆排序甚至希尔排序等,都能达到如此快速,但是快速排序使用更加广泛,以至于 ...