关于JavaScript中的getter和setter

2019-11-5 张宇童 学习日志

在没有ES6 之前如果私有化一个类的属性是的确不易的。不能说ES5完全做不到但是确实是十分费力气的一件事

但是现在在ES6中有getter以及setter将使私有化变得十分容易

大家先看一下例子

let _age = 10;
class Animal{
    constructor(type) {
        this.type = type
    }
    get age () {
        return _age;
    }
    set age (value) {
        if (value < 12 && value > 10) {
            _age = value
         }
    }
    age () {
        console.log(`${type}在吃饭`)
    }
}
let dog = new Animal('小狗')
console.log(dog) // 这个时候一定只会输出一个属性那就是type
// 我们来看一下age 
console.log(dog.age) // 这个时候是10
// 我们尝试修改它一下
dog.age = 100
console.log(dog.age )
// 结果我们发现age 并没有改变,这是为什么呢?
通过上面的例子。我们可以看出age的value并没有变为100
因为我们set age的时候加了一个判断条件 这个值必须为11的时候才可以被改变
换句话说这个者其实并不是dog实例中的age。而dog实例中的age 相当于一个入口。而真正意义上的值在_age上面。
还有一个问题为什么我不将age中的值写在this里面呢?
因为语法特性目前还不支持私有。只能以闭包的形式写在上面    

标签: javascript ES6

评论(0) 浏览(391)

JavaScript声明一个Class

2019-11-4 张宇童 学习日志

在ES5与ES6中class其实背后的原理是一样的

我们先看Es5是如何定义一个class的

// 首先我们先定义一个动物类
let Animal = function (type) {
    this.type = type
}
// 因为有些方法是动物们共有的属性那么我们定义一个原型方法
Animal.prototype.eat = function () {
    console.log('吃')
}
// 实例化对象
let dog = Animal('dog')
let monkey = Animal('monkey')
// 打印
console.log(dog)
console.log(monkey)
// Animal {type: "dog"}
// lesson2.js:15 Animal {type: "monkey"}
// 如果我们需要修改原型链上面的方法呢?
// 我们可以随便找一个实例
monkey.constructor.prototype.eat = function() {
    console.log('不吃')
}
下面我们在ES6中声明一个class

class Animal{
    constructor(type) {
        this.type = type
    }
    eat() {
        console.log('吃')
    }
}
// 实例化
let dog = new Animal('dog')
let mokey = new Animal('monkey')

标签: javascript class

评论(0) 浏览(401)

JavaScript数组的查找

2019-11-4 张宇童 学习日志

我们在ES5中常用的方法filter

我们来看一下

let arrary = Array.of(1,2,3,4,5)
let find = array.filter(x => {
    return x === 3;
})
console.log(find)
// 运行程序
// [3]

使用filter时候的弊端

filter不管有没有查找到需要的元素都会将数组遍历完成

而ES6中新加入了find只需要返回true将不会继续遍历相当于break

下面我们来看一下

let array = Array.of(1,2,3,4,5)
let find = array.find(x => {
    return x === 2
})
console.log(find)
// 好的运行程序。我们会发现输出2,这个返回值是数组的值而不是index

find的弊端在于没有返回索引

这是又有一个findIndex解决了这个问题

let array = Array.of(1,2,3,4,5)
let find = array.findIndex(x => {
    return x===3
})
console.log(find)

标签: 数组的查找

评论(0) 浏览(493)

JavaScript中的伪数组转换

2019-11-4 张宇童 学习日志

在进行转换之前首先我们要明白什么是伪数组。

伪数组就是指一个类似于数组的集合。同样它具有length以及index数字索引

好了我们先来定义一个伪数组

let pseudoArray = {

0: 'hello',

1: 'world',

length: 2

}

好了一个经典的伪数组就定义好了

这时候我们使用forEach遍历一下

pesudoArray.forEach(x => {
    console.log(x)
})
// 这个时候运行程序浏览器会报错
// lesson2.js:6 Uncaught TypeError: pseudoArray.forEach is not a function at lesson2.js:6
因为它看似数组其实不然

我们这个时候需要转换一下

怎么转换呢?

Es5之中我们会使用数组对象上面的一个方法

let array = [].slice.call(pseudoArray)
array.forEach(x => {
    console.log(x)
})
// 运行程序这个时候会正确的输出
// hello
// world
有的同学可能会说很麻烦啊!有没有更简单的方法呢?

在ES6中array提供了from方法可以直接转化

let array = Array.from(pseudoArray)
array.forEach(x => {
     console.log(x)
})
// 这个时候程序也可以正常的运行
// hello
// world
// 和之前ES5中繁琐的步骤是一样的

标签: javascript 数组的转换

评论(0) 浏览(414)

React生命周期函数

2019-10-25 张宇童 学习日志

首先贴一张图片,直观深刻的理解一下屏幕快照 2019-10-25 下午9.48.18.png


组件挂载前执行

 1、componentWillMount


组件挂载后执行

2、componentDidMount


组件更新之前执行

3、shouldComponentUpdate


组件被更新之前执行但在shouldComponentUpdate之后执行,如果shouldComponentUpdate返回true执行 返回false不执行

4、componentWillUpdate


组件更新完成之后执行

5、componentDidUpdate


存在于自组件中,要从父组件接受参数,第一次存在于父组件中不会执行,父组件执行render会触发componentWillReceiveProps函数

6、compoentWillReceiveProps


当一个组件将被销毁之前执行

7、componentWillMount

标签: react 生命周期函数

评论(0) 浏览(590)

http请求参数之Query String Parameters、Form Data、Request Payload

2019-10-24 张宇童 学习日志

在与server端进行数据传递时,通常会用到GET、POST方法进行参数提交,而参数提交的方式,通常取决于server端对数据的接收方式。
Query String Parameters
当发起一次GET请求时,参数会以url string的形式进行传递。即?后的字符串则为其请求参数,并以&amp;作为分隔符。

如下http请求报文头:


// General

Request URL: http://foo.com?x=1&amp;y=2 Request Method: GET 
// Query String Parameters
x=1&amp;y=2


Form Data

当发起一次POST请求时,若未指定content-type,则默认content-type为application/x-www-form-urlencoded。即参数会以Form Data的形式进行传递,不会显式出现在请求url中。

如下http请求报头:
// General
Request URL: http://foo.com Request Method: POST 
// Request Headers
content-type: application/x-www-form-urlencoded; charset=UTF-8 
// Form Data
x=1&amp;y=2 
Request Payload
当发起一次POST请求时,若content-type为application/json,则参数会以Request Payload的形式进行传递(显然的,数据格式为JSON),不会显式出现在请求url中。
如下http请求报头:
// General
Request URL: http://foo.com Request Method: POST 
// Request Headers
content-type: application/json; charset=UTF-8 
// Request Payload
x=1&amp;y=2 
如果希望通过Form Data的方式来传递数据,则可以通过原生方法formData()来进行数据组装,且content-type需要设置为multipart/form-data。
如下http请求报头:
// General
Request URL: http://foo.com Request Method: POST 
// Request Headers
content-type: multipart/form-data; charset=UTF-8 
// Request Payload
------WebKitFormBoundaryAIpmgzV8Ohi99ImM
Content-Disposition: form-data; name=“x” 
------WebKitFormBoundaryAIpmgzV8Ohi99ImM
Content-Disposition: form-data; name=“y” 
------WebKitFormBoundaryAIpmgzV8Ohi99ImM–
其中,WebKitFormBoundaryAIpmgzV8Ohi99ImM为浏览器随机生成的boundary,作为分隔参数,作用等同于&amp;。
application/x-www-form-urlencoded 和 multipart/form-data
The content type "application/x-www-form-urlencoded" is inefficient for sending large quantities of binary data or text containing non-ASCII characters. The content type "multipart/form-data" should be used for submitting forms that contain files, non-ASCII data, and binary data.
multipart/form-data的优势还伴随一些兼容性问题,详细请参考文章结束的参考文献。

标签: javascript request ajax

评论(0) 浏览(573)

Echarts使用渐变色的方法

2019-10-24 张宇童 学习日志

我使用的是echarts 4.2版本

在管网的文档中可查看其配置项,以柱状图为例:

首先在series中找type:'line'

1245775-20181115103736671-1818801776.png

然后找到areaStyle

1245775-20181115103822149-970962608.png

在color中有方法能生成渐变色:

// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置
color: {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0, color: 'red' // 0% 处的颜色
    }, {
        offset: 1, color: 'blue' // 100% 处的颜色
    }],
    globalCoord: false // 缺省为 false
}
// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变
color: {
    type: 'radial',
    x: 0.5,
    y: 0.5,
    r: 0.5,
    colorStops: [{
        offset: 0, color: 'red' // 0% 处的颜色
    }, {
        offset: 1, color: 'blue' // 100% 处的颜色
    }],
    globalCoord: false // 缺省为 false
}
// 纹理填充
color: {
    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串
    repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
}

第二种方法:使用echarts内置的渐变色生成器echarts.graphic.LinearGradient

{
    type: 'bar',
    itemStyle: {
        normal: {
            color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,       //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
                [
                    {offset: 0, color: '#000'},
                    {offset: 0.5, color: '#888'},
                    {offset: 1, color: '#ddd'}
                ]                //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offsetcolor两个参数. offset的范围是0 ~ 1, 用于表示位置
            )
        }
    }
}

效果:

1245775-20181115104603474-1541501906.png

Measure
Measure

标签: echarts 颜色 渐变色 配置

评论(0) 浏览(1937)

ant design pro 中与服务器的交互

2019-10-20 张宇童 学习日志

第一步:首先要设置好代理

屏幕快照 2019-10-20 下午1.42.11.png

第二步:编写接口

屏幕快照 2019-10-20 下午1.43.34.png

第三步:编写effect里面的方法

20190217142242567.png

import { testApi, userApi } from '@/services/api';//testApi就是2步骤里的请求名称

export default {
    namespace: 'testM',//要唯一

    state: {
        list: [],//后台返回的数据存储在该list中,名字想怎么起怎么起
        result: {},//这个是我为了存储后台返回来的json
    },

    effects: {
        * listAPP({ payload }, { call, put }) {//这个是界面调取接口的名称
            const response = yield call(testApi, payload);//这个testApi就是刚才引入的
            yield put({
                type: 'queryList',//通过调用这个把返回数据传给list,result
                payload: response,
            });
        },
        * dealWith({ payload }, { call, put }) {
            const response = yield call(userApi, payload);
            yield put({
                type: 'deal',
                payload: response,
            });
        },
        // 清除
        * clear(_, { put }) {
            yield put({
                type: 'clean',
            });
        },
    },

    reducers: {
        queryList(state, action) {
            return {
                ...state,
                list: action.payload,//啦啦啦,这就拿到数据啦
            };
        },
        deal(state, action) {
            return {
                ...state,
                result: action.payload,
            };
        },
        clean(state) {
            return {
                result: {},
            };
        },
    }
};

屏幕快照 2019-10-20 下午1.52.02.png


标签: javascript ant antdesignpro

评论(0) 浏览(846)

PHP无法上传文件解决方法!

2013-6-26 张宇童 学习日志

昨天配置了PHP环境,耗了一天时间总算是弄好了

最后却来了个蛋疼的问题!!上传图片,或是文件都上传不了!

上网查询了许多资料都未能解决。

最后在一个网友的百度空间里,找到了解决方案!

file_uploads = On           //这里是说php.ini文件这个地方设置成On

upload_tmp_dir = "C:\Inetpub\wwwroot\uploads"    //这个路径就是自己设置的上传文件临时存储路径

只需要设置一下临时文件夹的路径就可以了!

好了,直到现在总算搞好了。

简单吗?

标签: PHP环境配置

评论(2) 浏览(889)

在本地配置了PHP运行环境

2013-6-25 张宇童 学习日志

php的运行环境对于一个大牛来说,也许是不值一提的。对于像我这样的小白来说却是十分艰难的。

今天从早上开始配置本地的PHP环境。一直到现在差不多才配置好。中间遇到许多奇葩的问题,整的我实在...

从iis说起,IIS对我来说还是比较简单的,在控制面板中添加和删除程序中。

后来就是mysql数据库的安装,这个以前在网上看过,所以这个也难不倒我。

最后安装的是PHP,下载好PHP。解压到文件夹,配置php.ini,在IIS中设置好映射。然后到EM的官网下个EM准备安装。安装时我百思不得其解的就是我明明开启了MYSQL的扩展,程序却说PHP服务器不支持MYSQL数据库。我勒个擦,百度查也查了,所有的操作都做了。还是不行。最后在网上看到info()可以看到PHP的数据。按步骤做了之后发现php.ini路径在F盘。我将PHP解压到的是D盘。

......

阅读全文>>

标签: 环境套件 PHP环境

评论(5) 浏览(843)

Powered by emlog