JS - To my gril

  1 /*
  2
  3
  4     这个程序的流程是 , 首先执行 构造函数 (), 然后 就去执行那个 render 渲染 , 在  render 哪里 的if else 转向应该执行的渲染方法 , 例如 commitsrender
  5 然后当 标签对应的渲染方法执行完毕之后 就over了 .
  6 */
  7
  8
  9 import React from ‘react‘;
 10 import ajax from ‘superagent‘;
 11
 12 class Detail extends React.Component { // 声明一个 Detail 类 通过关键字 extend 继承自 React.Component
 13     constructor(props) {  // construtor 是 构造函数的意思 在任何语言之内 当你用这个类 实例化一个对象之后 , 就会自动执行 构造函数(优先级很高) 。
 14         super(props);    // 通过 super 关键字 将 props 这个属性给 该类 的父亲 React.Component
 15
 16         this.state = {        // 给 this 所指向的对象 , 绑定方法 .
 17             mode: ‘commits‘,  // mode 是指定默认的 模式 , 也就是当你打开网页的时候 你首先看到的是 commits 中的内容 .
 18             commits: [],     //  现在 声明 this的属性 (state) , (其实 : 后面的内容随意 , 但是为了容易理解下文 所以这里就是 [] 表明这是一个数组 )
 19             forks: [],
 20             pulls: []
 21             };
 22         }
 23     componentWillMount() {
 24         ajax.get(‘http://192.168.1.100:3000/test1‘)  // 通过这个方法 来获取 地址中的内容 .
 25             .end((error, response) => {      // error 来 储存上面的获取内容是否成功 , response 来储存 获取的内容 .
 26                 if (!error && response) {            // 如果 没有发生错误 , 并且有内容的话
 27                     this.setState({ commits: response.body }); //  这里是将 , 上文中的 response.body 的内容 绑定到 , this 下面的conmits 属性 .
 28                 } else {
 29                         console.log(‘Error fetching commits‘, error); // 如果 获取内容出问题的话 就 在web控制台 输出 这里的内容 .
 30                 }
 31               }
 32             );
 33     ajax.get(‘http://192.168.1.100:3000/test2‘)    // 同上
 34         .end((error, response) => {
 35             if (!error && response) {
 36                 this.setState({ forks: response.body });
 37             } else {
 38                 console.log(‘Error fetching forks‘, error);
 39             }
 40         }
 41     );
 42     ajax.get(‘http://192.168.1.100:3000/test3‘)   // 同上
 43         .end((error, response) => {
 44             if (!error && response) {
 45                 this.setState({ pulls: response.body });
 46             } else {
 47                 console.log(‘Error fetching pulls‘, error);
 48                     }
 49             }
 50         );
 51     }
 52     showCommits() {                //   这个方法的意思是 展现出来commits的内容 .
 53          this.setState({ mode: ‘commits‘ });   // 在这里 我们昨天说过 可以通过 setstate 这个方法 来监测当 内容改变的时候 会自动刷新页面 .
 54     }
 55     showForks() {
 56           this.setState({ mode: ‘forks‘ });   // 同上
 57     }
 58     showPulls() {
 59          this.setState({ mode: ‘pulls‘ });
 60     }
 61     renderCommits() {        //  这里是 渲染 commits的内容 .
 62           return this.state.commits.map((commit, index) => {        //  在上面 (15-24) commits , 可以看到commits的储存的 第一个网页中的内容 . index的数值 是从 0 开始 最大值根据 commits的大小来确定 .   // 在括号里面 commit 储存 commits的内容 相当于 commit=this.state.commits
 63               const author = commit.author ? commit.author : ‘xpower‘;  // 因为 网页中的是 author 所以当 commit 代表 就等于了 网页的内容 . 可以通过 . 的方法来调用其中和属性
 64              return (<p key={index}> // 这里是 因为采用了匿名函数 , react 不能识别出来 , 网页标签的代号 . 所以在这里需要手动设置 .
 65                  <strong>{author}</strong>:
 66                   <a href={commit.url}>{commit.url}</a>.//  第一个 commit.url 是实质上点击之后 导向的地址 . 第二个 commit.url是网页上面显示的地址 .
 67               </p>);
 68           });
 69     }
 70     renderForks() {
 71          return this.state.forks.map((fork, index) => {
 72             const owner = fork.owner ? fork.owner : ‘Anonymous‘;
 73
 74             return (<p key={index}>
 75             <strong>{owner}</strong>: forked to
 76             <a href={fork.url}>{fork.url}</a> at {fork.created_at}.
 77             </p>);
 78          });
 79     }
 80     renderPulls() {
 81             return this.state.pulls.map((pull, index) => {
 82                   const user = pull.user ? pull.user : ‘Anonymous‘;
 83                          return (<p key={index}>
 84                          <strong>{user}</strong>:
 85                  <a href={pull.url}>{pull.url}</a>.
 86              </p>);
 87          });
 88     }
 89     render() {
 90          let content;
 91               if (this.state.mode === ‘commits‘) {     //这几个 if else 适用于检查现在 . 是执行的的哪一个标签 .
 92                   content = this.renderCommits();    // 然后开始调用 , 相应标签对应的函数 .
 93                  } else if (this.state.mode === ‘forks‘) {
 94                       content = this.renderForks();
 95               } else {
 96              content = this.renderPulls();
 97             }
 98             return (<div>
 99                 <button onClick={this.showCommits.bind(this)}>Show Commits</button>
100                 <button onClick={this.showForks.bind(this)}>Show Forks</button>
101                 <button onClick={this.showPulls.bind(this)}>Show Pulls</button>
102                 {content}
103             </div>);
104     }
105 }
106 export default Detail;
时间: 2024-10-17 12:36:49

JS - To my gril的相关文章

js创建对象的几种方式

 //1.使用js内置的对象String/Object/Function  var str = new String("js内置对象创建对象");  alert(str);//js内置对象创建对象  //2.使用Json  var books = {   book:[{name:'设计模式'},{name:'Java'},{name:'.Net'}],   author:[{name:'cy'},{name:'lyl'},{name:'cyl'}]  }  //json对象.属性(数组

js中的extend

js中的extend 1.    JS中substring与substr的区别 之前在项目中用到substring方法,因为C#中也有字符串的截取方法Substring方法,当时也没有多想就误以为这两种方法的使用时一样的.这样就直接按照在C#中使用Substring的方式,直接在js中用了substring,在实际的项目中,有时候能得到正确的结果,但是有时候得到的结果却让人匪夷所思,后来仔细的调试跟踪之后才发现,原来是Js中substring的方法跟C#中的Substring方法不一样.关于C#

js的import 与export详解

ES6 1.export default 其他模块加载该模块时,import命令可以为该匿名函数指定任意名字. 如: import Vue from 'vue' vue里面的第三方模块都是用了这个 使用import 不带{ }如上,一定要用export default 导出,不能用export导出: 显然,一个模块只能有一个默认输出,因此export default命令只能使用一次. export defalut 只能用import boy from '模块路径',不能带{} 所以,import

【API】高德地图API JS实现获取坐标和回显点标记

1.搜索+选择+获取经纬度和详细地址 2.回显数据并点标记 3.实现 第一步:引入资源文件 <!--引入高德地图JSAPI --><script src="//webapi.amap.com/maps?v=1.3&key=在官网申请一个key"></script><!--引入UI组件库(1.0版本) --><script src="//webapi.amap.com/ui/1.0/main.js">

js跨域

第一次写博客,好紧张,不知道能写成啥样,哈哈哈. 自己的一知片解,有错请多多指教,嘻嘻嘻. 一.何为跨域? 只要协议.域名.端口后任何一个不同,就是跨域. 举个例子: http://www.example.com 协议不同 https://www.example.com http://www.example.com 域名不同 http://www.test.com http://www.example.com 端口不同 http://www.example.com:81 注意:ip相同,域名不同

Vue.js学习笔记:属性绑定 v-bind

v-bind  主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如: <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> 绑定HTML Class 一.对象语法: 我们可以给v-bind:class 一个对象,以动态地切换class.注意:v-bind:class指令可以与普通的class特

node.js的安装及配置

一.安装 直接在浏览器搜索node.js,在官网上下载(一般旧版的更加稳定,比如下载4.4.7版本) 点击DOWNLOADS 往下翻,点击Previous Release Windows下载msi(64位/32位) 根据提示一步步安装,安装之后的文件夹如下: 在cmd命令行下输入node -v,如果出现如下,说明安装成功: 二.关于配置 在安装路径下新建两个文件夹: 创建完两个空文件夹之后,打开cmd命令窗口,输入 npm config set prefix "D:\Program Files

Node.js 使用angularjs取得Nodejs http服务端返回的JSON数组示例

server.js代码: // 内置http模块,提供了http服务器和客户端功能(path模块也是内置模块,而mime是附加模块) var http=require("http"); // 创建服务器,创建HTTP服务器要调用http.createServer()函数,它只有一个参数,是个回调函数,服务器每次收到http请求后都会调用这个回调函数.服务器每收到一条http请求,都会用新的request和response对象触发请求函数. var server=http.createS

Knockout.js简介

Knockout是一款很优秀的JavaScript库,通过应用MVVM模式使JavaScript前端UI简单化.任何时候你的局部UI内容需要自动更新,KO都可以很简单的帮你实现,并且非常易于维护. Knockout的3个核心功能是: ? 属性监控与依赖跟踪 ? 声明式绑定 ? 模板机制 MVVM Model-View-View Model (MVVM)是一种创建用户界面的设计模式. ? Model:用于存储应用程序数据,表示业务领域的对象和数据操作,并且独立于任何界面. 当使用KO的时候,通常是