前端笔记3.1 实验代码改进与react环境搭建

原创 于 2018-10-12 08:21:20 发布 · 1.3w 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react native

本文深入探讨ES6特性如类、继承、Set/Map、箭头函数等，并结合React及React-Native实践，讲解开发环境搭建、组件设计、状态管理及模块化策略，适合前端开发者进阶学习。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

目录

1.上次回顾

.call( )

清除浮动

静态属性

数组定义

2、本次内容

2.1、搭建开发环境

1.上次回顾

类和继承

Set和Map集合

箭头函数

Promise和Generator

上次作业：

要求：

  1. 每10分钟开奖1次。
  2. 在未开奖之前，可以选择任意一个数作为自己选择的彩票号码。
  3. 设置用户在每次开奖阶段只有3次选号机会。
  4. 到抽奖时间判断用户是否中奖，并提示中奖金额。

 

笔记：

每秒显示倒计时时间，不能只用setInterval倒计时总时间执行获得结果，还要每秒执行。总毫秒数转换为分钟

把方法放到类中，作为静态方法使用

模块化

考虑扩展和封装

搭建开发环境：React、react-Native开发移动应用程序

Adb的shell命令

安卓sdk的位置的tools目录下打开现有模拟器

Npm 安装支持库

配置好后adb命令能用

React只在一个页面开发，不同页面切换js

 

需要：

选择时对原选择重置，设置选号次数限制，倒计时没有重置，到抽奖时间判断用户是否中奖，并提示中奖金额。开奖后重置所选号码

操作div的对象无法逆向获得并改变属性：解决-1.设select数组，队尾标记。（计算金额时需要考虑选了几个号码）2.设对象数组保存对象指针。

.call( )

call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

call([thisObj[, arg1[, arg2[,  [, argN]]]]])

thisObj

可选。将作为当前对象使用的对象。

arg1, arg2, , argN

可选。将被传递到该方法的参数列表。

 

c1.showNam.call(c2);

注意，call 的意思是把 c1 的方法放到c2上执行，原来c2是没有showNam() 方法，现在是把c1 的showNam()方法放到 c2 上来执行，所以this.name 应该是 class2，执行的结果就是 ：alert（"class2"）;

 

清除浮动

clear 属性规定元素的哪一侧不允许其他浮动元素。

Both

静态属性

静态属性指的是 Class 本身的属性， 即Class.propname， 而不是定义在实例对象（ this） 上的属性。

ES6 明确规定， Class 内部只有静态方法， 没有静态属性。只能在外部定义

class Foo {}

Foo.prop = 1;

数组定义

var myArray=new Array()

抽奖作业改进代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; img-src * data: 'unsafe-inline'; connect-src * 'unsafe-inline'; frame-src *;">
    <title>ES6实战</title>
    <script type="text/javascript">
      let sum=0;
      let selectNum=-1;//初始化时重置
      let ball=new Array(11);
      var generator;
      // 编写一个操作方法，把倒计时和结果处理封装到同一个操作方法中
      // 建议把这个方法放到一个类中，可以作为静态方法来使用。
      class Timer {
        /*
          end：倒计时结束的时间点，用毫秒数
          update：当没有到时间节点，但是需要进行页面内容的更新时，调用这个方法。
          handler：当到了时间节点，自动调用这个结果处理方法。
          step：重新调用自身的时间间隔，单位：毫秒
        */
        countDown(end,update,handler,step) {
          // 取得当前系统时间，取得毫秒数
          let now = new Date().getTime();
          // 比较是否到了结束的时间
          if (now < end) {
            // 还没到时间
            // 倒计时的显示，将剩余的时间数传入
            update.call(null,(end - now));//null，不传入替换参数
            // update(end - now);//null不传入替换参数
            // 设置定时重新调用的操作
            window.setTimeout(() => {
              this.countDown(end,update,handler,step);
            },step);
          } else {
            // 到时间了
            // 需要调用结果操作
            handler.call();
            // handler();
          }
        }
      }

      function* checkDraw(count) {
        while(true){
          if (count > 0) {
            count--;
            console.log("count "+count);
            yield true;
          } else {
            yield false;
          }
        }
        return 0;
      }
      function init() {
        selectNum=-1;
        // 设置结束时间，用系统时间计算
        let end = new Date().getTime() + 1000 * 10;
        // 调用倒计时的操作
        new Timer().countDown(end,changeCountDownSpan,kaijiang,1000);
        // 再进行页面所有可选的ball的初始化。
        initAllBall();
        generator = checkDraw(3);
      }
      /*显示剩余时间，传入剩余毫秒数*/
      function changeCountDownSpan(time) {
        // 取得span
        let span = document.querySelector("#count_down");
        // 计算剩余的分钟数和秒数
        let m = parseInt(time / 60 / 1000) + "";
        let s = parseInt(time / 1000) % 60 + "" ;
        // 设置显示的结果
        span.innerHTML = `剩余：${m.padStart(2,"0")}分${s.padStart(2,"0")}秒`;
      }

      function kaijiang() {
        // 生成 0 - 9 的随机数
        let result = parseInt(Math.random() * 10);
        // 创建一个div
        let ball = new Ball(result,{marginTop:"34px"});
        // 挂到result_div里
        let resultDiv = document.querySelector("#result_div");
        resultDiv.innerHTML = "";
        ball.addToPage(resultDiv);
        getMoney(result);
        init();
      }
      function getMoney(result){
        // let selectNum=-1;
        // let allBallDiv = document.querySelectorAll("#all_ball>div");
        // console.log(allBallDiv);
        // for(var i=0;i<allBallDiv.length;i++){
        //   // console.log(i+":"+allBallDiv[i].selected);
        //   if(allBallDiv[i].selected){
        //     selectNum=parseInt(allBallDiv[i].innerHTML);
        //     break;
        //   }
        // }
        console.log("选择号码"+selectNum+" 结果"+result);
        if(selectNum==result){
          sum++;
        }
        let money = document.querySelector("#money");
        money.innerHTML="中奖金额："+sum+"元";
      }

      function initAllBall() {
        let allBallDiv = document.querySelector("#all_ball");
        allBallDiv.innerHTML="";//清空原小球
        for (let i = 0;i < 10 ;i ++) {
          // let ball = new Ball(i,{
          ball[i] = new Ball(i,{
            float:true,
            canSelected:true,
            marginRight:"10px",
            marginBottom:"3px"
          });
          ball[i].addToPage(allBallDiv);
        }
      }

      class Ball {
        constructor (value,options) {//用options接收保存属性的对象
          this.div = document.createElement("div");
          this.div.className = "ball";
          this.selected = false;//
          if (options != null) {
            if (options.float == true) {
              this.div.style.float = "left";
            }
            if (options.marginTop) {
              this.div.style.marginTop = options.marginTop;
            }
            if (options.marginRight) {
              this.div.style.marginRight  = options.marginRight;
            }
            if (options.marginBottom) {
              this.div.style.marginBottom  = options.marginBottom;
            }
            // 鼠标放上变色
            if (options.canSelected) {
              this.div.style.cursor = "pointer";
              this.div.addEventListener("mouseover",() => {
                if (this.selected == false) {
                  this.div.style.background = "red";
                  this.div.style.color = "white";
                }
              });
              this.div.addEventListener("mouseout",() => {
                if (this.selected == false) {
                  this.div.style.background = "white";
                  this.div.style.color = "red";
                }
              });

              this.div.addEventListener("click",() => {
                var times=generator.next().value;
                console.log("次数 "+times);
                if(times){
                  this.selected = !this.selected;
                  if (this.selected) {
                    this.div.style.background = "red";
                    this.div.style.color = "white";
                    if(selectNum>=0){
                      console.log(selectNum+"取消选择 "+ball[selectNum].selected);
                      ball[selectNum].selected=false;
                      ball[selectNum].unselect(ball[selectNum].div);
                    }
                    selectNum=value;
                    console.log(selectNum);
                  } else {
                    this.div.style.background = "white";
                    this.div.style.color = "red";
                  }
                }
              });
            }
          }
          this.div.innerHTML = value;
        }
        unselect(div){
            div.style.background = "white";
            div.style.color = "red";
        }
        addToPage(el) {
          el.appendChild(this.div);
        }
      }
    </script>

    <style>
      #result_div {
        border:1px solid red ;
        width:500px;
        height:100px;
        color:red ;
        text-align: center;
        line-height: 100px;
      }

      .ball {
        border:1px solid red;
        width:30px;
        height: 30px;
        border-radius: 15px;
        color: red;
        text-align: center;
        line-height: 30px;
        margin-left: auto;
        margin-right: auto;
        /*margin-bottom: 3px;
         margin: auto; */
      }
      #money {
        clear:both;
        /* margin-top: 30px; */
      }
    </style>

</head>

<body onload="init();">
  <span id="count_down"></span> <br/>
  本次中奖号码：
  <div id="result_div">尚未开奖</div>
  <hr/>
  <div id="all_ball">  </div>
  <div id="money">中奖金额：0元</div>
</body>

</html>

2、本次内容

2.1、搭建开发环境

下面就需要开始使用React和React-Native开发Android的移动应用程序。

 

需要准备几个软件：

  1. Android Studio（3.0以上版本）
  2. Nodejs
  3. 模拟器（自带的）

 

首先启动Android模拟器，可以使用命令行方式，也可以使用Android Studio的软件方式启动。

命令行启动，需要先在命令行中进入到Android SDK的tools目录下，然后执行emulator -list-avds列出现有的模拟器，然后可以通过 emulator @模拟器名称 来启动模拟器。

 

启动后，通过npm命令，安装react-native-cli支持库。

npm install -g react-native-cli

（在C:\Users\LENOVO\AppData\Roaming\npm\react-native -> C:\Users\LENOVO\AppData\Roaming\npm\node_modules\react-native-cli\index.js）

 

 

安装好后，应该可以在命令行中运行react-native命令。

然后在你想创建项目的文件夹下，运行 react-native init 项目名 来创建一个项目。

（mac记得加sudo）

安装配置好后，项目环境就已经建立了，下面就是需要编译项目并自动发布到手机上。

这里需要做一些准备：

  1. 配置ANDROID_HOME的环境变量（位置就是Android的SDK的根目录）
  2. 配置PATH，在里面多加入一个Android的adb命令的位置。

如果是mac或Linux系统，需要执行以下操作

修改建立好的项目的权限（简介里打开），设置为所有人都可以读写

在项目的android目录下建立一个local.properties文件

在文件中加入：sdk.dir=/Users/kkb/Library/Android/sdk

修改.bashrc文件，在PATH环境变量中加入adb的位置

加入后，使用 source ~/.bashrc 命令来应用这个环境变量。

rm -rf $TMPDIR/react-*; rm -rf $TMPDIR/haste-*; rm -rf $TMPDIR/metro-*;

 

测试再次运行时，会发现出现一些错误提示，这是因为React本身的bug造成的。

需要我们单独启动包管理器（将项目打包上传到模拟器的那个程序）

react-native start --reset-cache

然后再打开另一个命令行窗口，执行启动命令（react-native run-android）

 

 

adb server version (36) doesn't match this client (39); killing...

* daemon started successfully

Starting the app (E:\studyMaterial\work\adt-bundle-windows-x86_64-20140702\sdk/platform-tools/adb shell am start -n com.rndemo/com.rndemo.MainActivity...

error: no devices/emulators found

解决：http://www.cnblogs.com/focus-on-js/p/9198726.html

模拟器的adb不匹配

Running E:\studyMaterial\work\adt-bundle-windows-x86_64-20140702\sdk/platform-tools/adb -s 127.0.0.1:62001 reverse tcp:8081 tcp:8081

error: closed

Could not run adb reverse: Command failed: E:\studyMaterial\work\adt-bundle-windows-x86_64-20140702\sdk/platform-tools/adb -s 127.0.0.1:62001 reverse tcp:8081 tcp:8081

Starting the app on 127.0.0.1:62001 (E:\studyMaterial\work\adt-bundle-windows-x86_64-20140702\sdk/platform-tools/adb -s 127.0.0.1:62001 shell am start -n com.rndemo/com.rndemo.MainActivity)...

Starting: Intent { cmp=com.rndemo/.MainActivity }

https://blog.youkuaiyun.com/zys871228/article/details/50732604

用真机就没有问题

 

由于react-native开发要使用react的各种语法，为了方便学习和使用React，这里再简单配置一个直接编写 react的环境。

 

在命令行直接通过npm安装一个create-react-app 的工具

npm install -g create-react-app

地址

C:\Users\LENOVO\AppData\Roaming\npm\create-react-app -> C:\Users\LENOVO\AppData\Roaming\npm\node_modules\create-react-app\index.js

安装后，可以用这个工具建立一个项目

create-react-app 项目名

即可。

项目名，必须为小写字母，不许出现大写。

 

启动项目只需要进入到项目中，通过npm start即可启动。

无法启动，Babel-loader版本？npm ls babel-loader

The react-scripts package provided by Create React App requires a dependency:

  "babel-loader": "8.0.4"

However, a different version of babel-loader was detected higher up in the tree:

 

rndemo1@0.1.0 E:\studyMaterial\work\web\react\rndemo1

`-- react-scripts@2.0.4（E:\studyMaterial\work\web\react\rndemo1\node_modules\.bin）

  +-- babel-loader@8.0.4

  `-- babel-preset-react-app@5.0.3

`-- babel-loader@8.0.4  deduped

解决：在无干扰的文件夹新建项目

然后正常按照 ES6编写项目代码即可。

打开项目后，修改App.js中的代码即可改变里面的内容。

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值