10-20
前半月实现了公司的官网,使用React架构,下来说说React。
React起源于 Facebook的内部项目,因为该公司对市场上所有JavaScript框架,都不满意,就决定自己写一套,用来架设instagram的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。
由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。这个项目本身也越滚越大,从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目,目标更是宏伟,希望用写 Web App 的方式去写 Native App。如果能够实现,整个互联网行业都会被颠覆,因为同一组人只需要写一次 UI ,就能同时运行在服务器、浏览器和手机。
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</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';
}
}
});