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

来源：互联网发布：网络传输速率表示方法编辑：程序博客网时间：2024/06/05 04:12

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';         }     } });

0 0