前端学习笔记-10月-React 以及其他应用

本文链接：https://blog.csdn.net/LJ_workspace/article/details/49276721

10-20

前半月实现了公司的官网，使用React架构，下来说说React。

React起源于 Facebook的内部项目，因为该公司对市场上所有JavaScript框架，都不满意，就决定自己写一套，用来架设instagram的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。这个项目本身也越滚越大，从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目，目标更是宏伟，希望用写 Web App 的方式去写 Native App。如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次 UI ，就能同时运行在服务器、浏览器和手机。

<head>

</head>

上面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。

基本结构--自己编辑组件/标签：

var GW_Space = React.createClass({
     
     getInitialState:function(){
         return {
              name: value,          //此处返回值存在this.state中
         };
     },
     render : function(){
     }
});<pre name="code" class="javascript">module.exports = GW_Space;

在引用次组件的文件中加

var GW_Space = require('./gw_space');     //  ./即路径，gw_space为GW_Space所在 .js文件名

还使用下程序，实现浏览设备识别

<script type="text/javascript">
        function browserRedirect() {
            var sUserAgent = navigator.userAgent.toLowerCase();
            var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
            var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
            var bIsMidp = sUserAgent.match(/midp/i) == "midp";
            var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
            var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
            var bIsAndroid = sUserAgent.match(/android/i) == "android";
            var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
            var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
            document.writeln("您的浏览设备为：");
            if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
                document.writeln("phone");
            } else {
                document.writeln("pc");
            }
        }

        browserRedirect();
    </script>

使用下函数，实现页面跳转动画：

$("").animate({top:'100px', bottom:'100px' } , speed );

使用下函数，实现仅首次登陆显示官网首页：

var storage = window.localStorage;
if (!storage.getItem("ifEverLoad")) {
        storage.setItem("ifEverLoad",1);
}

下为一例子：

var GW_Space = React.createClass({
 19 
 20     mixins: [Navigation],
 21 
 22     statics: {
 23     },
 24     
 25     getInitialState:function(){
 26         return {
 27         };
 28     },
 29     
 30     turnUp: function() {
 31         $("#container").animate({
 32             top:'-1000px'
 33         }, 1200);
 34     },
 35 
 36     render: function() {
 37         var sUserAgent = navigator.userAgent.toLowerCase();
 38         var bIsIpad = sUserAgent.match(/ipad/i) == 'ipad';
 39         var bIsIphone = sUserAgent.match(/iphone os/i) == 'iphone os';
 40         var bIsMidp = sUserAgent.match(/midp/i) == 'midp';
 41         var bIsAndroid = sUserAgent.match(/android/i) == "android";
 42         var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == 'rv:1.2.3.4';
 43         var bIsUc = sUserAgent.match(/ucweb/i) == 'web';
 44         var bIsCE = sUserAgent.match(/windows ce/i) == 'windows ce';
 45         var bIsWM = sUserAgent.match(/windows mobile/i) == 'windows mobile';
 46 
 47         if (bIsIpad || bIsIphone || bIsMidp || bIsAndroid || bIsUc7 || bIsUc || bIsCE || bIsWM){
 48             return (
 49                 <div id="container" >
 50                     <div id="first">
 51                         <img id="img_gw_logo" src="./img/other/gw_logo.png" />
 52                     </div>
 53 
 54                     <div id="second">
 55                         <div id="shadows" />
 56                         <img id="img_people" src="./img/other/people.png" />
 57                     </div>
 58 
 59                     <div id="third">
 60                         <div id="buttons">
 61                             <button id="find_works" onClick={this.turnUp}>查看作品</button>
 62                         </div>
 63                     </div>
 64 
 65                 </div>
 66             );
 67         }
 68         else{
 69             window.location.href='http://www.jiaoyin.cm';
         }
     }
 });