分类 前端 下的文章

ReactJS学习-使用webpack构建工程,使用materialUI构建前端,与hprose后端通讯

实现目标:

Material-UI 是一套用React写成的,符合Google Material Design 的UI组件库。

http://www.material-ui.com/

前端通过Material-UI构造界面,然后通过hprose-html5调用后端hprose服务取数据

hprose服务参考 上一篇hprose实践,

环境配置:

必须先安装nodejs与npm

新建工程目录

mkdir react-workspace
cd react-workspace
npm init

安装依赖

npm install --save react react-dom react-tap-event-plugin material-ui
npm install --save-dev babel-core babel-loader 
npm install --save-dev babel-preset-es2015 babel-preset-react babel-preset-stage-1
npm install --save-dev webpack

第一行是生产用的 React 与 Material-UI 部分。
第二行是Babel转换器的核心部分。
第三行是Babel转换器的三个额外配置:ES2015(ES6),React,Stage1(ES7)。
第四行是Webpack的部分。

第二、三、四行的内容只在工程构建之前有用(用于开发:-dev)。

安装完毕之后呢,可以先检查一下 package.json
应该会看见如下内容

"dependencies": {
    "material-ui": "^0.15.0",
    "react": "^15.1.0",
    "react-dom": "^15.1.0",
    "react-tap-event-plugin": "^1.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.9.1",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-1": "^6.5.0",
    "webpack": "^1.13.1"
  },

配置 Babel

在 package.json 中添加一个域"babel",与之前的"dependencies" 同级。

"babel": {
    "presets": [
      "es2015",
      "react",
      "stage-1"
    ],
    "plugins": []
  }

配置 Webpack

在项目目录新建一个webpack.config.js ,并写入:

var path = require('path');

module.exports = {
    entry: './entry.js',
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [
            { test: /\.jsx?$/, loaders: ['babel'] }
        ]
    }
}

这里对Webpack的打包行为做了配置,主要分为几个部分:

entry:指定打包的入口文件,每有一个键值对,就是一个入口文件
output:配置打包结果,path定义了输出的文件夹,filename则定义了打包结果文件的名称
resolve:定义了解析模块路径时的配置,常用的就是extensions,可以用来指定模块的后缀,这样在引入模块时就不需要写后缀了,会自动补全
module:定义了对模块的处理逻辑,这里可以用loaders定义了一系列的加载器,以及一些正则。当需要加载的文件匹配test的正则时,就会调用后面的loader对文件进行处理,这正是webpack强大的原因。比如这里定义了凡是.js结尾的文件都是用babel-loader做处理,而.jsx结尾的文件会先经过jsx-loader处理,然后经过babel-loader处理。当然这些loader也需要通过npm install安装
plugins: 这里定义了需要使用的插件,比如commonsPlugin在打包多个入口文件时会提取出公用的部分,生成common.js

当然Webpack还有很多其他的配置,具体可以参照它的配置文档

配置 npm 脚本
现在我们还缺少一个构建脚本,编辑package.json 中的 "scripts" 域:

"scripts": {
    "build": "webpack",
    "build-dev": "webpack -w -d"
  }

接下来我们就可以在项目目录下使用简单的构建脚本了:

$ npm run build

如果是开发中,可以使用监听式的Webpack,差量打包,提升效率。

$ npm run build-dev

按照配置,打包生成的文件为 dist/bundle.js 。

至此,基本的环境已经配置完毕,我们来尝试一下调用Material-UI库。

代码编写

创建Web入口
在项目目录下创建一个index.html,写入:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <script src="dist/bundle.js"></script>
    </body>
</html>

编写Webpack入口
编辑项目目录下的 entry.js,写入:

import React from 'react';
import ReactDOM from 'react-dom';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';

const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <AppBar title="Hello, Material-UI!" />
  </MuiThemeProvider>
);

let app = document.createElement('div');
ReactDOM.render(<App />, app);
document.body.appendChild(app);

运行构建脚本:

npm run build

输出
6.png

现在可以看到目录下有了一个dist/bundle.js

打开index.html

7.png
成功

以上内容严重参考:http://blog.csdn.net/zccz14/article/details/51421324

浏览器自动刷新

如果需要一直输入 npm run build 确实是一件非常无聊的事情,幸运的是,我们可以把让他安静的运行,让我们设置 webpack-dev-server。

npm install --save webpack-dev-server

修改package.json文件的scripts:

"scripts": {
        "build": "webpack",
        "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
      }

当你在命令行里运行 npm run dev 的时候他会执行 dev 属性里的值。这是这些指令的意思:

webpack-dev-server - 在 localhost:8080 建立一个 Web 服务器
--devtool eval - 为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号
--progress - 显示合并代码进度
--colors - Yay,命令行中显示颜色!
--content-base build - 指向设置的输出目录
总的来说,当你运行 npm run dev 的时候,会启动一个 Web 服务器,然后监听文件修改,然后自动重新合并你的代码。真的非常简洁!

访问 http://localhost:8080 你会看到效果。

访问发现 “Cannot GET /” 错误

因为我们的index.html不是在build目录下

调整项目结构为

  • /app
    • main.js
    • component.js
  • /build
    • bundle.js (自动创建)
    • index.html
  • package.json
  • webpack.config.js

修改index.html

<!doctype html>
    <html>
        <head>
            <meta charset="utf-8" />
        </head>
        <body>
            <script src="bundle.js"></script>
        </body>
    </html>

将entry.js移动到app/main.js

修改webpack.config.js,将入口文件设置为app/main.js,output设为build目录下的bundle.js,
并新增入口点,使得浏览器在文件修改之后会自动刷新。

var path = require('path');

module.exports = {
    entry: [
      'webpack/hot/dev-server',
      'webpack-dev-server/client?http://localhost:8080',
      path.resolve(__dirname, 'app/main.js')
    ],
    output: {
        path: path.join(__dirname, '/build'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [
            { test: /\.jsx?$/, loaders: ['babel'] }
        ]
    }
}

运行命令 npm run dev, 然后访问http://localhost:8080/
看到之前同样页面,然后修改一下main.js

<AppBar title="Hello, Material-UI!" />

修改为

<AppBar title="Hello, World!" />

保存一下,再回到浏览器,会发现自动刷新了,内容也变成了Hello, World!

通过hprose-html5取数据

下面通过后端服务取数据,来替代Hello,World!

现已有hprose for php 构建的hprose服务,在远程服务器http://xx.xx.xx.xx:8080/
方法为getUserByID

修改index.html,引入hprose-html5.js,使用的是bootcss提供的cdn

<script type="text/javascript" src="http://cdn.bootcss.com/hprose-html5/2.0.8/hprose-html5.js"></script>

修改main.js

import React from 'react';
import ReactDOM from 'react-dom';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';

const muiTheme = getMuiTheme();

class App extends React.Component{

  constructor(props){
    super(props);
    this.state = {
      data:"none",
    };
    this.componentDidMount = this.componentDidMount.bind(this);
  }

  componentDidMount() {
      this.setState({data: "block"});
      let self = this;
      let client = hprose.Client.create("http://xx.xx.xx.xx:8080/", ["getUserByID"]);
      client.getUserByID(2, function(result) {
            console.log(result.player_name);
            self.setState({data: result.player_name});
        }, function(name, err) {
            console.log(err);
        });
  }
  render() {
    return (
    <MuiThemeProvider muiTheme={muiTheme}>
    <AppBar title={this.state.data} />
    </MuiThemeProvider>
    );
  }
}

let app = document.createElement('div');
ReactDOM.render(<App />, app);
document.body.appendChild(app);

查看结果

5.png

从后端服务取到了数据“keyunqqq”

PS:React在ES6的实现中去掉了getInitialState这个hook函数,规定state在constructor中实现,如下:

Class App extends React.Component {

constructor(props) {
super(props);
this.state = {};
}
...
}

Babel的Blog上还有一种实现方法,即直接使用赋值语句:

Class App extends React.Component {

constructor(props) {
super(props);
}

state = {}
...
}

ES6中this需要手动绑定:

this.componentDidMount = this.componentDidMount.bind(this);

ReactJS学习-Sublime Text 3 安装Package Control 及 配置babel插件使jsx代码高亮

Sublime Text 3 安装Package Control

给sublime安装插件管理器

一、简单的安装方法

使用Ctrl+`快捷键或者通过View->Show Console菜单打开命令行,粘贴如下代码:

import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

如果顺利的话,此时就可以在Preferences菜单下看到Package Settings和Package Control两个菜单了。

如有问题 参考
https://packagecontrol.io/installation#st3

二、手动安装

可能由于各种原因,无法使用代码安装,那可以通过以下步骤手动安装Package Control:

1.点击Preferences > Browse Packages菜单

2.进入打开的目录的上层目录,然后再进入Installed Packages/目录

3.下载Package Control.sublime-package并复制到Installed Packages/目录

4.重启Sublime Text。

https://packagecontrol.io/installation

安装插件 babel-sublime

支持ES6, React.js, jsx代码高亮,对 JavaScript, jQuery 也有很好的扩展。

安装

PC上ctrl+shift+p(MacCmd+shift+p)打开面板
选择Install Package
输入babel安装

配置

打开.js, .jsx 后缀的文件;

打开菜单view,Syntax -> Open all with current extension as... -> Babel -> JavaScript (Babel),选择babel为默认 javascript 打开syntax

修改TAB缩进为空格

在sublime text中将TAB缩进直接转化为4个空格,可以按照如下方式操作:

菜单栏: Preferences -> Settings – More -> Syntax Specific – User

然后添加设置代码就可以了,文件保存在$Packages/User下

另:
font_face 设置字体
font_size 设置字体大小

{
    "font_face": "SourceCodePro",
    "font_size": 14,
    "tab_size": 4,
    "translate_tabs_to_spaces": true
}

swiper实现的自适应资讯列表页

swiper实现的背景自适应+上拉自动加载(loading效果)的资讯列表页 微信项目中用到的资讯列表页,为了适应手机端特别优化,采用swiper插件,每一页数据相当于一个swiper-slide,下拉到最底部,ajax取下一页数据,底部加入CSS3实现的loading效果。

背景自适应实现方式:

body {
    background-color: #F0F0F0;
    background-image: url("front/images/bg.jpg") ;
    background-attachment: fixed;     
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

测试代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>公司资讯</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="front/swiper/css/swiper.min.css">

    <link rel="stylesheet" href="front/css/bootstrap.css">

    <!-- Demo styles -->
    <style>
    html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #fff;
        font-family: "Helvetica Neue","Hiragino Sans GB","Microsoft YaHei","\9ED1\4F53",Arial,sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
        background-color: #F0F0F0;
        background-image: url("front/images/bg.jpg") ;
        background-attachment: fixed;     
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    a {
        background: transparent;
    }
    a:active,
    a:hover {
        outline: 0;
    }
    a {
      color: #373e4a;
      text-decoration: none;
      white-space: nowrap;
      overflow: hidden;
    }
    a:hover,
    a:focus {
      color: #16191e;
      text-decoration: underline;
    }
    a:focus {
      outline: thin dotted;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
    }
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    } 
    li {
        margin-top:10px;
        margin-bottom:10px;
        border-bottom: 1px solid #ddd;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
    }
    .swiper-slide {
        font-size: 14px;
        height: auto;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0px 10px;
    }
    .list-group-item {
        margin: 10px auto;
        padding: 15px 5px;
    }


    .spinner {
      margin: 30px auto;
      width: 20px;
      height: 20px;
      position: relative;
    }
     
    .container1 > div, .container2 > div, .container3 > div {
      width: 6px;
      height: 6px;
      background-color: #333;
     
      border-radius: 100%;
      position: absolute;
      -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
      animation: bouncedelay 1.2s infinite ease-in-out;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }
     
    .spinner .spinner-container {
      position: absolute;
      width: 100%;
      height: 100%;
    }
     
    .container2 {
      -webkit-transform: rotateZ(45deg);
      transform: rotateZ(45deg);
    }
     
    .container3 {
      -webkit-transform: rotateZ(90deg);
      transform: rotateZ(90deg);
    }
     
    .circle1 { top: 0; left: 0; }
    .circle2 { top: 0; right: 0; }
    .circle3 { right: 0; bottom: 0; }
    .circle4 { left: 0; bottom: 0; }
     
    .container2 .circle1 {
      -webkit-animation-delay: -1.1s;
      animation-delay: -1.1s;
    }
     
    .container3 .circle1 {
      -webkit-animation-delay: -1.0s;
      animation-delay: -1.0s;
    }
     
    .container1 .circle2 {
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
    }
     
    .container2 .circle2 {
      -webkit-animation-delay: -0.8s;
      animation-delay: -0.8s;
    }
     
    .container3 .circle2 {
      -webkit-animation-delay: -0.7s;
      animation-delay: -0.7s;
    }
     
    .container1 .circle3 {
      -webkit-animation-delay: -0.6s;
      animation-delay: -0.6s;
    }
     
    .container2 .circle3 {
      -webkit-animation-delay: -0.5s;
      animation-delay: -0.5s;
    }
     
    .container3 .circle3 {
      -webkit-animation-delay: -0.4s;
      animation-delay: -0.4s;
    }
     
    .container1 .circle4 {
      -webkit-animation-delay: -0.3s;
      animation-delay: -0.3s;
    }
     
    .container2 .circle4 {
      -webkit-animation-delay: -0.2s;
      animation-delay: -0.2s;
    }
     
    .container3 .circle4 {
      -webkit-animation-delay: -0.1s;
      animation-delay: -0.1s;
    }
     
    @-webkit-keyframes bouncedelay {
      0%, 80%, 100% { -webkit-transform: scale(0.0) }
      40% { -webkit-transform: scale(1.0) }
    }
     
    @keyframes bouncedelay {
      0%, 80%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
      } 40% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
      }
    }

    </style>
</head>
<body>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper" id="swiper-wrapper">
        <div class="swiper-slide">
                <a href="#" class="list-group-item">·集团公司部署三季度工作 全力以赴保效益保增长</a>
                <a href="#" class="list-group-item">·中国石化油服沙特、科威特业务逆势发展</a>
                <a href="#" class="list-group-item">·中国石化8部文学作品获中国作协重点扶持</a>
                <a href="#" class="list-group-item">·中国石化贵州石油:细挖每一座油站的增量</a>
                <a href="#" class="list-group-item">·中国石化茂名石化成功开发高流动性抗冲聚丙烯新产品</a>
                <a href="#" class="list-group-item">·集团公司召开经济活动分析会 要求全力以赴保增长</a>
                <a href="#" class="list-group-item">·石化企业推进润滑油国产化替代成效显著</a>
                <a href="#" class="list-group-item">·中国石化上海石油签订千吨尾气处理液合同</a>
                <a href="#" class="list-group-item">·中国石化化销华东推出中石化-西布尔环保型橡胶新品</a>
                <a href="#" class="list-group-item">·总部安全环保巡视组为石炼“把脉”</a>
                </div>
        </div>
    
        <!-- Add Scroll Bar -->
        <div class="swiper-scrollbar"></div>
    </div>

    <!-- Swiper JS -->
    <script src="front/swiper/js/swiper.min.js"></script>
    <script src="front/js/jquery-1.11.1.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
    var page = 1;
    var loadingShow = false;
    var loadingStr = '<div class="spinner"><div class="spinner-container container1"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container2"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container3"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div></div>';
    var swiper = new Swiper('.swiper-container', {
        scrollbar: '.swiper-scrollbar',
        direction: 'vertical',
        slidesPerView: 'auto',
        mousewheelControl: true,
        freeMode: true,
        onTouchEnd: function(swiper){
            if(swiper.isEnd){
                
                //完成一次loading才能开始下一次loading,防止重复多次
                if(!loadingShow) {
        
                    //加载loading提示
                    swiper.appendSlide('<div class="swiper-slide">'+loadingStr+'</div>');
                    swiper.slideNext();
                    loadingShow = true;

                    getAjaxNews();
                }
                
            }
        
        }
    });
    
    function getAjaxNews() {
        setTimeout(function(){
            
            //删除loading提示
            swiper.removeSlide(page);
            loadingShow = false;
                
            page++;

            /*
            $.ajax({
                type:'POST',
                data:{ page:page },
                dataType: "json",
                url: "getAjaxNews",
                success: function(json)
                {
                    
                                
                }
            });
            */
            //假设通过AJAX取来的数据如下
            var list = [{"id":8,"news_title":"\u71c3\u6cb9\u5b9d\u662f\u4ec0\u4e48\uff1f","news_author":"\u6c5f\u897f\u77f3\u6cb9","make_time":1433925343},{"id":7,"news_title":"\u4e2d\u56fd\u77f3\u5316\u7684\u4e3b\u8425\u4e1a\u52a1\u8303\u56f4\u5305\u62ec\u54ea\u4e9b\uff1f","news_author":"\u6c5f\u897f\u77f3\u6cb9","make_time":1433925284},{"id":6,"news_title":"\u4e2d\u56fd\u77f3\u6cb9\u5316\u5de5\u96c6\u56e2\u516c\u53f8\u662f\u4f55\u65f6\u6210\u7acb\u7684?","news_author":"\u6c5f\u897f\u77f3\u6cb9","make_time":1433925258},{"id":5,"news_title":"\u52a0\u6cb9\u65f6\u7684\u6ce8\u610f\u4e8b\u9879","news_author":"\u6c5f\u897f\u77f3\u6cb9","make_time":1433925002},{"id":8,"news_title":"\u71c3\u6cb9\u5b9d\u662f\u4ec0\u4e48\uff1f","news_author":"\u6c5f\u897f\u77f3\u6cb9","make_time":1433925343},{"id":7,"news_title":"\u4e2d\u56fd\u77f3\u5316\u7684\u4e3b\u8425\u4e1a\u52a1\u8303\u56f4\u5305\u62ec\u54ea\u4e9b\uff1f","news_author":"\u6c5f\u897f\u77f3\u6cb9","make_time":1433925284},{"id":6,"news_title":"\u4e2d\u56fd\u77f3\u6cb9\u5316\u5de5\u96c6\u56e2\u516c\u53f8\u662f\u4f55\u65f6\u6210\u7acb\u7684?","news_author":"\u6c5f\u897f\u77f3\u6cb9","make_time":1433925258},{"id":5,"news_title":"\u52a0\u6cb9\u65f6\u7684\u6ce8\u610f\u4e8b\u9879","news_author":"\u6c5f\u897f\u77f3\u6cb9","make_time":1433925002}];
            
            //var list = json.data;
            if(list != false) {
                var appendStr = "";
                for(var i=0;i<list.length;i++){
                    appendStr = appendStr+'<a href="#" class="list-group-item">'+list[i].news_title+'</a>';
                }
                swiper.appendSlide('<div class="swiper-slide">'+appendStr+'</div>');
                
                swiper.slideNext();
            }
            
        },1000);

    }
    </script>
</body>
</html>

资源打包下载:http://download.csdn.net/detail/keyunq/8908423
DEMO:http://www.keyunq.com/swiper/

推荐一些国内的jQuery CDN免费服务[转]

jquery是个非常流行的JS前端框架,在很多网站都能看到它的身影。很多网站都喜欢采用一些jquery CDN加速服务,这样网站加载jquery会更快。之前火端网络的一些网站都是使用Google的jquery CDN,如:http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js ,但是由于最近Google打不开,这些CDN地址也无法访问,而JS往往放在网页的head里,JS无法访问导致网站打开非常慢,只能是全部替换掉CDN链接了。
推荐几个国内的jquery CDN服务地址吧:

★新浪CDN,感觉很快,用的人很多,推荐使用!

<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>

其它版本可以在这里找地址 http://lib.sinaapp.com/?path=/jquery
★百度CDN

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

其它版本之间修改代码中的版本号就行了
★360的CDN

<script src="http://libs.useso.com/js/jquery/1.9.1/jquery.min.js"></script>

其它版本也是直接修改版本号就可以了
如果担心CDN地址加载失败,可以这样载入本地jquery

<script type="text/javascript">
!window.jQuery && document.write('<script src="js/jquery.min.js"><\/script>');
</script>

本文地址:http://www.huoduan.com/jquery-cdn.html
本文作者:火端网络,转载请务必以超链接形式注明出处。
本文标签:Jquery
 关键词: Jquery CDN 国内Jquery Jquery加速

处理 JADE Script 内嵌问题

Express中使用了JADE模板引擎
在jade模板中内嵌script语句,使用如下方法

script.
  var a;
  if (condition) {
    a = #{data_1}
  } else {
    a = #{data_2}
  }