Ant Design项目记录和CSS3的总结和Es6的基本总结

最新推荐文章于 2024-11-11 19:29:13 发布

weixin_30642029

最新推荐文章于 2024-11-11 19:29:13 发布

阅读量412

点赞数

文章标签： javascript git json ViewUI

原文链接：http://www.cnblogs.com/xiaohuai12388/p/8531727.html

版权

这里主要是介绍自己运用ANT框架的一些小总结，以前写到word里，现在要慢慢传上来,

辅助生殖项目总结：从每个组件的运用的方法和问题来总结项目。

1.项目介绍

辅助生殖项目主要运用的是Ant.design框架结合React.js和es6语法编写

2.项目工具和环境安装

项目主要运用Visual Studio和开发结合Git和当代码工具TortoiseCit(也就是小乌龟)工具加上Node.js环境

这里要先安装Git环境，然后安装TortoiseCit，TortoiseCit相当于是Git的工具，然后安装node环境，最后安装VS，安装成功后就可以当代码了。（以上的安装步骤都很简单，不在介绍）

3.git运用

这里讲的是当代码的操作：

http://www.cnblogs.com/hbujt/p/5554038.html -----git学习地址

git开发流程：

1：git clone 获取代码

2：本地分支切换至standard

3：新建自己的开发分支（从standard），

命名：

业务功能：feature/功能名

bug修改：fix/功能名称

文档上传：doc/文档名

5：push 分支至服务器

6：提交merge请求（将我的分支合并到develop分支上）

7：管理员（陈）审核代码，执行merge

Git提交流程：

1.git commit 和push

2.切换分支switch到standard分支，fetch和pull

3.merge码云上的standard-cly分支，并且把standar push到码云

4.切换分支到自己的分支standard-cly,（还有一个remotes的那个是码云上的，不用切换他）如果没人操作此分支可以不用fetch和pull，

5.merge standard分支

6.再次fetch并且pull一下

前端代码代码的提交的时候，大家先Fetch..然后Pull...如果报错，大家看一下是哪一个文件冲突了 : (1) 如果这个文件不是多个人同时修改了同一行代码（增加几行代码不算同时修改，例如config.js，同时增加不会冲突），然后就可以commit...，commit的时候会显示错误，提示让你先pull，再pull一下，然后push，就提交成功了；（2）如果这个文件被多人同时修改了代码，就把自己本地的代码备份一下，在Visual Studio上将自己的代码还原成和码云上一致的，然后再pull... 成功之后将自己修改的部分代码粘过去，再提交。先拉再提交。

详细操作图：

4.跑前台ant项目

这里简单介绍写当下代码后前台怎样跑起来

1）先通VS选中当下来的代码文件

2）新当下的项目要跑起来都要先输入npm i （npm i 只是 npm install 的简写，通常称为node包管理器）这个是安装项目所需要的包的方法。安装成功后，输入npm run dev 启动项目，启动成功后会出现The app is running at: http://0.0.0.0:8001/，失败会有其他提示，根据提示信息解决就好，下面的图片是我遇到的问题以及解决方法。

了解地址：

1.npm介绍：https://www.jianshu.com/p/19d349796207

5.项目基本组件运用

这里会把项目中用到的基本组件一一说明，要结合ant的Api来学习，（需要对照这api看，不然会看不懂，因为我只是截取关键性代码）

（这里只是介绍项目基本组件，复杂组件有需要单独找我，一起讨论）

Ant API地址: https://ant.design/docs/react/introduce-cn

1.select组件

这里我们封装了一个DictSelct组件，里面的底层还是select可以对照api看他的参数和数据规则。

这个组件比较简单，里面的参数数据因为数据量少，就是前端自己定义的code。（也可以后台传输数据，具体方法下面有介绍）

2.树形的Treeselect框

这里面也是自己封装了一个组件，可以限制不能选中的项，可以多选

关键代码处理数据：（运用了map方法）

componentDidMount() {

const {transferData, ajax,isornotDisable} = this.props

//isornotDisable字段控制着父级可选不可选，如果不可选，在父级设置此字段为1

request(ajax).then(d=>{

d.map(transferData);

return arrayToTree(d);

}).then(treeData=>{

const isornot=isornotDisable?true:false;

{isornot && treeData.map((item) => {

const children = item["children"];//第一级

if(children){

item.disabled=true;

children.map((c) => {

const sonchildren = c["children"];//第二级

if(sonchildren){

c.disabled=true;

sonchildren.map((b) => {

const grandchild = b["children"];//第三级

if(grandchild){

b.disabled=true;

}

});

}

});

}

});}

this.setState({treeData})

})

}

return (

<TreeSelect {...tProps}

treeData={treeData}

treeDefaultExpandAll={true}

dropdownStyle={{ maxHeight: 350, overflow: 'auto' }}

getPopupContainer={triggerNode => triggerNode.parentNode}/>

);

3.日期框

1.日期框介绍

这里介绍常用的日期框介绍

在组件中引入这句话可以使弹出的日期框不随着屏幕滚动

getPopupContainer={triggerNode => triggerNode.parentNode}

disabledDate这个参数可以控制日期选中范围

disabledDate={this.disabledDate}

其他的控制日期方法可以去api里面查看

2.二次保存问题解决

日期框二次校验问题解决方法，这里以chenlixue新增治疗基本信息为例

（下面是我的修改思路，大家可以根据自己的想法编写，但是要注意下下面的问题）

1）以前一直以为这个是因为病历号失去焦点的验证有问题或者是点击保存的时候的表单验证有问题，但是我把每个操作都重新检查了一遍发现没有问题，后来才确定到是给日期框赋值的证件号框的校验有问题

2）以前咱们是这么写的，咱们在验证证件号的时候给了日期框赋的值，

3）但是在点击保存的时候，因为是直接把数据赋值到input框，没有走这个证件号验证（我debugger试了试），

4)但是在我点击保存的时候走了这个证件号验证的方法，然后我排除了其他的框的问题，最后确认到是在这里给日期框赋值出的问题，最后把日期框的赋值方法写到了外面，解决了日期框二次校验的问题。下面是正确代码

4.表格组件

表格组件是系统中长用的方法，这里简绍一种，和表格里面常见的操作

1. 常用的表格

<Table columns={columns} dataSource={rows} loading={loading} pagination={pagination} onChange={this.handlPageChange}/>}

这里面columns代表表格表头结构，dataSource代表表格的数据，

Loading可以控制表格加载数据时的加载效果，pagination代表表格分页的参数.

简答的columns:

const columns = [

{ title: intl.formatMessage({id: "business.serverManage.serverManageList.artNum"}), dataIndex: 'artNum' },

{ title: intl.formatMessage({id: "business.serverManage.serverManageList.artcyNum"}), dataIndex: 'artcyNum' }]

2.表格的合并

1.合并前提

后台返回数据必须是:相同重复的数据必须是连在一起的，这样前台才能通过rowspan方法合并表格数据。（这是前提，后台需要注意）

2.步骤

1.前台需要根据后台返回的数据内容，根据相应参数对前台数据进行比较合并，（历史重复数据反馈页面返回数据的标识参数是flag,）

后台需要给相同的数据添加一个相同的标识字段，像flag字段，方便前台合并数据，可以参照历史数据反馈页面编写，（如果不能返回标识字段，前台也可以根据数据里面相同的字段进行合并）
合并方法：

1）在需要合并的table页面引入getMergeArr.js方法，这个方法的作用是处理后台返回数据，把后台返回的list数据，提取其中需要的字段，拆分成一个对象字段，具体格式可以自己前台console下。（可以去utils/index.js里面学习）

调用方法：

2）在columns里面找到需要合并的字段

合并方法：

这里的每一个flag[text]都是一个数组对象，具体的可以console出flag整体对照理解,每当index和他对应的数组对象里面的第一个值相同时，给他赋值上相应的num值,然后行合并，合并长度为数组长度。

(没有flag参数，前台可以根据json里面相同的字段值，进行比较合并)

其他合并的情况：对于某些列具有相同字段值的合并(了解地址：system/userManage)

其他合并情况，可以参照上述两种情况进行参数的修改

3.行合并

在columns里需要合并的列，给子集的id写在父级的children里面

3.表格添加加载图标

1.Table组件添加loading参数，默认为false，它是控制表格数据加载的图标，

2.前台没有接收到后台返回数据的时候设置loading为true,接收数据到或者报异常的时候设置为false.

3.在table组件配置好参数

4.表格样式修改

1.表格行选中样式添加

（可以去beijing,精子库质控统计查看例子）

（咱们以前页面上的表格都是在hover时显示选中效果，现在可以实现选中时就显示选中效果）

实现方法：

需要在state中添加，选中参数

在table组件中添加两个参数配置

3）js中加上选中的方法，

2.表格内部样式修改：

(这里只写了左右样式其他样式自己可以试一试)

第一种方法：

表格内容居左居右

在columns加上className,因为咱们框架index.less的样式会覆盖掉所写样式所以要改变摸个表格样式需要在index.less添加样式

第二种方法：global（可以理解为全站样式）

可以在需要改变样式的表格页面添加相对应的index.less，改变的表格样式要通过

：global{ }包裹才能生效

（这里介绍的都只是table组件简单用法，复杂的表格操作需要子集去看api领会编写）

5.ajax请求操作

这里简单介绍下我们项目运用的请求方法，截个图就可以了，不做介绍，每个项目的写法应该差不多

6.Button按钮组件控制方法

import { Button, Row, Modal } from 'antd';

1.第一种处于index页面的button修改

参考地址: routes/sperm/statistic/org/donorPrompt

页面样式：

具体代码：

2.在模态框里面的按钮控制

参考地址：/routes/sperm/spermBankInfo/list'

页面样式：

具体代码：

7.Popover气泡组件控制方法

Content代表气泡里面的内容，trigger代表显示气泡的时机，例子中的是hover

8.Modal组件使用方法

这里只是写个例子，理解后自己可以随意编写

其实这个modal框就是定义一个参数，控制modal框显示与否，具体代码如下:

这里根据updateModalVisiable参数的值控制是否显示modal

Modal框内部代码

Modal框内部的footer代表modal框的功能按钮，自己可以自定义

9.提示框组件

这里的提示框组件是通过Modal对话框组件实现的

这里要引入modal和intl,提示框

Api里面有好几种，其他的可以自己试一试

6.项目中用到的方法

1.数据处理

1.map方法

这个介绍的是最简单的往原始数据里面添加新的数据

2. 向数组结尾添加元素方法

3. 向数组头部添加元素方法

4.splice()数组方法

1.删除-用于删除元素，两个参数，第一个参数（要删除第一项的位置），第二个参数（要删除的项数）

2.插入-向数组指定位置插入任意项元素。三个参数，第一个参数（插入位置），第二个参数（0），第三个参数（插入的项）

3.替换-向数组指定位置插入任意项元素，同时删除任意数量的项，三个参数。第一个参数（起始位置），第二个参数（删除的项数），第三个参数（插入任意数量的项）

示例：

1、删除功能，第一个参数为第一项位置，第二个参数为要删除几个。

array.splice(index,num)，返回值为删除内容，array为结果值。

eg：

<!DOCTYPE html>

<html>

<body>

<script>

var array = ['a','b','c','d'];

var removeArray = array.splice(0,2);

alert(array);//弹出c,d

alert(removeArray);//返回值为删除项，即弹出a,b

</script>

</body>

</html>

2、插入功能，第一个参数（插入位置），第二个参数（0），第三个参数（插入的项）

array.splice(index,0,insertValue)，返回值为空数组，array值为最终结果值

eg:

<!DOCTYPE html>

<html>

<body>

<script>

var array = ['a','b','c','d'];

var removeArray = array.splice(1,0,'insert');

alert(array);//弹出a,insert,b,c,d

alert(removeArray);//弹出空

</script>

</body>

</html>

3、替换功能，第一个参数（起始位置），第二个参数（删除的项数），第三个参数（插入任意数量的项）

array.splice(index,num,insertValue)，返回值为删除内容，array为结果值。

eg:

<!DOCTYPE html>

<html>

<body>

<script>

var array = ['a','b','c','d'];

var removeArray = array.splice(1,1,'insert');

alert(array);//弹出a,insert,c,d

alert(removeArray);//弹出b

</script>

</body>

</html>

5. slice()数组方法

定义和用法

slice() 方法可从已有的数组中返回选定的元素。

语法

arrayObject.slice(start,end)

参数	描述
start	必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end	可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

例子 1

在本例中，我们将创建一个新数组，然后显示从其中选取的元素：

<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

document.write(arr + "<br />")

document.write(arr.slice(1) + "<br />")

document.write(arr)

</script>

输出：

George,John,Thomas

John,Thomas

George,John,Thomas

例子 2

在本例中，我们将创建一个新数组，然后显示从其中选取的元素：

<script type="text/javascript">

var arr = new Array(6)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

arr[3] = "James"

arr[4] = "Adrew"

arr[5] = "Martin"

document.write(arr + "<br />")

document.write(arr.slice(2,4) + "<br />")

document.write(arr)

</script>

输出：

George,John,Thomas,James,Adrew,Martin

Thomas,James

George,John,Thomas,James,Adrew,Martin

6. JS数组(Array)处理函数整理

1、concat() 连接两个或更多的数组
该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
例如：

复制代码代码如下:

输出结果：
1,2,3,4,5,11,22,33

2、join()
把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
例如：

复制代码代码如下:

list结果：

'<ul><li>item 1</li><li>item 2</li><li>item 3</li></ul>'
这是迄今为止最快的方法！使用原生代码（如 join()），不管系统内部做了什么，通常比非原生快很多。——James Padolsey, james.padolsey.com

3、pop() 删除并返回数组的最后一个元素
pop()方法将删除数组的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。
如果数组已经为空，则pop()不改变数组，并返回undefined值
例如：

复制代码代码如下:

输出结果：
George,John,Thomas
Thomas
George,John

4、push() 向数组的末尾添加一个或更多元素，并返回新的长度
例如：

复制代码代码如下:

输出结果：
George,John,Thomas
4
George,John,Thomas,James

5、unshift() 向数组的开头添加一个或更多元素，并返回新的长度
例如：

复制代码代码如下:

输出结果：
George,John,Thomas
4
James,George,John,Thomas

6、reverse() 颠倒数组中元素的顺序
例如：

复制代码代码如下:

输出结果：
George,John,Thomas
Thomas,John,George

7、shift() 删除并返回数组的第一个元素
例如：

复制代码代码如下:

输出结果：
George,John,Thomas
George
John,Thomas

8、slice(start,end) 从某个已有的数组返回选定的元素
请注意，该方法并不会修改数组，而是返回一个子数组
例如：

复制代码代码如下:

输出结果：
George,John,Thomas
John,Thomas
George,John,Thomas

9、sort() 对数组的元素进行排序
对数组的引用。请注意，数组在原数组上进行排序，不生成副本
该方法默认是按照字符编码(ASCII)的顺序进行排序的
例如：

复制代码代码如下:

输出结果：
John,George,Thomas
George,John,Thomas

再来看一个例子：

复制代码代码如下:

输出结果：
10,5,40,25,1000,1
1,10,1000,25,40,5

我们可以看到，并非是按照我们认为的按数字大小排序，如果想按照数字大小排序，则需要改变默认的排序方式，自行指定排序规则。
如下：

复制代码代码如下:

输出结果：
10,5,40,25,1000,1
1,5,10,25,40,1000
如果想要降序排列呢？
将排序规则改为：
function (a, b) {return b - a;}
就OK了

10、splice() 删除元素，并向数组添加新元素
splice() 方法与 slice() 方法的作用是不同的，splice() 方法会直接对数组进行修改
(1)删除指定范围的数组元素：

复制代码代码如下:

输出结果：
George,John,Thomas,James,Adrew,Martin
George,John,Martin

(2)从指定下标开始插入指定元素(元素个数不限)：

复制代码代码如下:

输出结果：
George,John,Thomas,James,Adrew,Martin
George,John,William,JACK,Thomas,James,Adrew,Martin

(3)删除指定范围的数组元素，并用指定元素替换(元素个数不限)：

复制代码代码如下:

输出结果：
George,John,Thomas,James,Adrew,Martin
George,John,William,JACK,Martin

7. 例子展示：

1.这里是按照数据给的某一个参数进行数据比较排序。

后台数据：

用sort方法进行比较处理，比较参数是：'orgCode'，

这里是把数据更大的排到了前面，null值可以在做处理

//比较方法

function compare(property){

return function(a,b){

var value1 = a[property];

var value2 = b[property];

return value1 - value2;

}

//修改数据格式

function cx(){

$.ajax({

url:'${ctx}/system/organization/json',

type:'get',

success:function(data){

var newData=data.sort(compare('orgCode'));

$('#dg').treegrid("loadData",newData);

}

})

}

cx();

比较完的数据格式：

2.两个数组比较与json parse()方法

背景：就是有一个select，后台返回45个所有数据，还有一个方法就是加载出已经上报的数据2个，我要去比较给这两个数组中相同的数据的option背景颜色加深。（给特定的select option选项加背景效果）

这个是后台返回的上报数据两个

但是他返回的数据是个json串不是json对象所以我用了JSON.parse（）方法转换成了json对象

方法：var newData=JSON.parse(data)

下面写一下我的两个数组比较方法，和实现效果

实现代码： $.post('ComQueryService/comQuery.do',params,function(data){

var bToObj=JSON.parse(data);

var bToObjData=bToObj.data.rows;

var h = '';

$.post('FileManage/getOrgCodeOffileUpload.do',params,function(filedata){

var Filedata=JSON.parse(filedata);

console.log(Filedata.data)

var screenData=Filedata.data?Filedata.data:[];

var g=0;

for(var i=0;i<bToObjData.length;i++){

var moubTo=bToObjData[i].DD_NAME;

var isExist = false;

for(var k=0;k<screenData.length;k++){

var scrbTo=screenData[k];

if(moubTo==scrbTo){

isExist =true;

break;

}

if(isExist){

g=g+1

h+='<option style="background-color:#f4bdc6" value="'+bToObjData[i].DD_NAME+'">'+bToObjData[i].DD_ID+'</option>';

}else{

h+='<option value="'+bToObjData[i].DD_NAME+'">'+bToObjData[i].DD_ID+'</option>';

}

$("#xxxxxxxxe").html(h);

})

});

实现效果：

2.时间处理

1. JS获取当前时间及时间戳相互转换

1.获取当前时间的 时间戳
　　Date.parse(new Date())

　　结果：1486347562000

2.获取当前时间

　　new Date()

　　结果：Mon Feb 06 2017 10:19:42 GMT+0800 (CST)

3.将 时间戳 转换成时间

　　new Date(1486347562000)

　　结果：Mon Feb 06 2017 10:19:22 GMT+0800 (CST)

4.将时间转换成 时间戳　　

　　Date.parse(new Date("2017-02-06 10:30:50"))

　　结果：1486348250000

2. Js获取当前日期时间及其它操作

var myDate = new Date();
myDate.getYear();        //获取当前年份(2位)
myDate.getFullYear();    //获取完整的年份(4位,1970-????)
myDate.getMonth();       //获取当前月份(0-11,0代表1月)
myDate.getDate();        //获取当前日(1-31)
myDate.getDay();         //获取当前星期X(0-6,0代表星期天)
myDate.getTime();        //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours();       //获取当前小时数(0-23)
myDate.getMinutes();     //获取当前分钟数(0-59)
myDate.getSeconds();     //获取当前秒数(0-59)
myDate.getMilliseconds();    //获取当前毫秒数(0-999)
myDate.toLocaleDateString();     //获取当前日期
var mytime=myDate.toLocaleTimeString();     //获取当前时间
myDate.toLocaleString( );        //获取日期与时间

例子1：

//获取当前时间，格式YYYY-MM-DD

    function getNowFormatDate() {

        var date = new Date();

        var seperator1 = "-";

        var year = date.getFullYear();

        var month = date.getMonth() + 1;

        var strDate = date.getDate();

        if (month >= 1 && month <= 9) {

            month = "0" + month;

        if (strDate >= 0 && strDate <= 9) {

            strDate = "0" + strDate;

        var currentdate = year + seperator1 + month + seperator1 + strDate;

        return currentdate;

例子2：这种方法最简单有效的

var date;//Tue Jul 16 01:07:00 CST 2013的时间对象

var year=date.getFullYear();//年

var month=date.getMonth()+1;//月份（月份是从0~11，所以显示时要加1）

var day=date.getDate();//日期

var str=year+'-'+month+'-'+day;

3.数据格式处理

1.字符串转成数字

1）转换函数

js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数，后者把值转换成浮点数

parseInt("1234blue"); //returns 1234

2) 强制类型转换

Number(false) 0
Number(true) 1
Number(undefined) NaN
Number(null) 0
Number( "5.5 ") 5.5
Number( "56 ") 56

2.数字转成字符串

toString() 方法可把一个 Number 对象转换为一个字符串，并返回结果。

实例

在本例中，我们将把一个数字转换为字符串：

<script type="text/javascript">

var number = new Number(1337);

document.write (number.toString())

</script>

输出：

4. 页面刷新方法

学习地址：http://www.jb51.net/article/14397.htm

Javascript刷新页面的几种方法：

复制代码代码如下:

1，history.go(0)
2，location.reload()
3，location=location
4，location.assign(location)
5，document.execCommand('Refresh')
6，window.navigate(location)
7，location.replace(location)
8，document.URL=location.href

自动刷新页面的方法:

1. 页面自动刷新：把如下代码加入<head>区域中

复制代码代码如下:

其中20指每隔20秒刷新一次页面.

2. 页面自动刷新：把如下代码加入<head>区域中

复制代码代码如下:

其中20指隔20秒后跳转到http://www.jb51.net页面

3. 页面自动刷新js版

复制代码代码如下:

4. 页面自动跳转：把如下代码加入<head>区域中

5.页面自动刷新js版

<script language="JavaScript">

function myrefresh()

{

window.location.reload();

}

setTimeout('myrefresh()',1000); //指定1秒刷新一次

</script>

6.定时器方法

1.倒计时方法

setTimeout(function(){alert("Hello")},3000);

2.循环定时器方法

例子1

<html>

<body>

<input type="text" id="clock" size="35" />

<script language=javascript>

var int=self.setInterval("clock()",50)

function clock()

  var t=new Date()

  document.getElementById("clock").value=t

</script>

</form>

<button οnclick="int=window.clearInterval(int)">

Stop interval</button>

</body>

</html>

例子2

代码如下:

var num = 0;
        var i = setInterval(function() {
            num++;
            var date = new Date();
            document.write(date.getMinutes() + ':' + date.getSeconds() + ':' + date.getMilliseconds() + '<br>');
            if (num > 10)
                clearInterval(i);
        }, 1000);

页面每隔1秒记录一次当前时间（分钟：秒：毫秒），记录十次后清除，不再记录。考虑到代码执行时间可能记录的不是执行时间，但时间间隔应该是一样的，看看结果

复制代码代码如下:

:38:116
:39:130
:40:144
:41:158
:42:172
:43:186
:44:200
:45:214
:46:228
:47:242
:48:256

7.正则方法

简单介绍下怎么运用：

const regFormat = /^\d{17}([0-9]|X)$/; //验证身份证格式

if(regFormat.test(_value) !== true){

form.setFieldsValue({ "femaleBirthdate": "" });

callback('身份证号格式不正确！');

}

项目中总结的正则：

1) 验证身份证格式:

/^\d{17}([0-9]|X)$/;

2)军人证

/南字第(\d{8})号|北字第(\d{8})号|沈字第(\d{8})号|兰字第(\d{8})号|成字第(\d{8})号|济字第(\d{8})号|广字第(\d{8})号|海字第(\d{8})号|空字第(\d{8})号|参字第(\d{8})号|政字第(\d{8})号|后字第(\d{8})号|装字第(\d{8})号|后文字(\d{7})/;

3)港澳通行证

/^[HMhm]{1}([0-9]{10}|[0-9]{8})$/

4)正整数

/^(0|[1-9][0-9]*)$/;

5)36+5这种格式校验（周+天）

/^\d\d?\+[0-6]$/;

6)邮政编码格式

/^[1-9]\d{5}$/;

7)手机号格式

/^1[34578][0-9]{9}$/;

8)座机号格式

/^0\d{2,3}-[1-9]\d{6,7}$/

9)最多保留小数点后两位

/^(0(?!\.0{1,2}$)(\.[0-9]{1,2})?|[1-9][0-9]{0,2}(\.[0-9]{1,2})?)$/;

10)不能输入中文

/^[a-zA-Z0-9_]{0,}$/;

11)只能输入大于等于0的整数

/^([1-9]\d{0,}|0)$/

其他正则网上查

8.截取数据方法

1. JS截取字符串

JS截取字符串可使用 substring()或者slice()

函数：substring()

定义：substring(start,end)表示从start到end之间的字符串，包括start位置的字符但是不包括end位置的字符。

功能：字符串截取，比如想从"MinidxSearchEngine"中得到"Minidx"就要用到substring(0,6)

例子：

var src="images/off_1.png";

alert(src.substring(7,10));

//弹出值为：off

函数：substr()

定义：substr(start,length)表示从start位置开始，截取length长度的字符串。

功能：字符串截取

例子：

var src="images/off_1.png";

alert(src.substr(7,3));

//弹出值为：off

函数：split()

功能：使用一个指定的分隔符把一个字符串分割存储到数组

例子：

str="jpg|bmp|gif|ico|png";

arr=theString.split("|");

//arr是一个包含字符值"jpg"、"bmp"、"gif"、"ico"和"png"的数组

函数：John()

功能：使用您选择的分隔符将一个数组合并为一个字符串

例子：

var delimitedString=myArray.join(delimiter);

var myList=new Array("jpg","bmp","gif","ico","png");

var portableList=myList.join("|");

//结果是jpg|bmp|gif|ico|png

函数：indexOf()

功能：返回字符串中匹配子串的第一个字符的下标

var myString="JavaScript";

var w=myString.indexOf("v");w will be 2

var x=myString.indexOf("S");x will be 4

var y=myString.indexOf("Script");y will also be 4

var z=myString.indexOf("key");z will be -1

函数：lastIndexOf()

定义：lastIndexOf()方法返回从右向左出现某个字符或字符串的首个字符索引值（与indexOf相反）

功能：返回字符串索引值

例子：

var src="images/off_1.png";

alert(src.lastIndexOf('/'));

alert(src.lastIndexOf('g'));

//弹出值依次为：6,15

9.去掉字符串前后空格

trim=(str)=>{

return str.replace(/(^\s*)|(\s*$)/g, "");

}

10.解决this指向问题

运行上面的代码会报错，这是因为setTimeout中的this指向的是全局对象。所以为了让它能够正确的运行，传统的解决方法有两种：

上面代码运用的bind方法详细解释：

http://blog.csdn.net/vivianhope/article/details/46725559

7.项目解决冲突方法

1. eclipse解决冲突方法

1．直接HEAD Revision

我常用的方法，直接把本地的文件替换成没有修改之前的额样子，这样之后可以直接拉代码。（右键文件Replace With）

2．在local History 里面找历史文件

通过这个可以找到你近期操纵这个文件的历史，可以选择替换回来，

这个可以解决在你上传不上代码，也拉不下代码时用，可以先通过这个找回修改之前的代码，然后先commit上本地git，然后在fetch和pull,这样就能当下代码了，最后在把这个文件改好提交上去就可以了

（右键文件Replace With）

8.精华项目常用数据处理方法

9.打包项目方法

1.Eclipse打包方法

1.点击项目右键Export

选中Export里面的War file,

2.右键选择pom.xml

找到项目的pom.xml，选择Run As里面的Maven install

10.CSS3介绍

1.边框

1. border-radius（圆角）

div

{

text-align:center;

border:2px solid #a1a1a1;

padding:10px 40px;

background:#dddddd;

width:350px;

border-radius:25px;

-moz-border-radius:25px; /* 老的 Firefox */

}

</style>

</head>

<body>

<div>border-radius 属性允许您向元素添加圆角。</div>

2. box-shadow 用于向方框添加阴影：

<style>

div

{

width:300px;

height:100px;

background-color:#ff9900;

-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */

box-shadow: 10px 10px 5px #888888;

}

</style>

</head>

<body>

3.border-image 属性，您可以使用图片来创建边框：

（这个属性不常用）

<style>

div

{

border:15px solid transparent;

width:300px;

padding:10px 20px;

}

#round

{

-moz-border-image:url(/i/border.png) 30 30 round; /* Old Firefox */

-webkit-border-image:url(/i/border.png) 30 30 round; /* Safari and Chrome */

-o-border-image:url(/i/border.png) 30 30 round; /* Opera */

border-image:url(/i/border.png) 30 30 round;

}

#stretch

{

-moz-border-image:url(/i/border.png) 30 30 stretch; /* Old Firefox */

-webkit-border-image:url(/i/border.png) 30 30 stretch; /* Safari and Chrome */

-o-border-image:url(/i/border.png) 30 30 stretch; /* Opera */

border-image:url(/i/border.png) 30 30 stretch;

}

</style>

</head>

<body>

<div id="round">在这里，图片铺满整个边框。</div>

<br>

<div id="stretch">在这里，图片被拉伸以填充该区域。</div>

<p>这是我们使用的图片：</p>

<p><b>注释：</b> Internet Explorer 不支持 border-image 属性。</p>

<p>border-image 属性规定了用作边框的图片。</p>

2.背景

1. background-size 属性（调整背景图片的大小：）

1)例子1控制大小

<style>

body

{

background:url(/i/bg_flower.gif);

background-size:63px 100px;

-moz-background-size:63px 100px; /* 老版本的 Firefox */

background-repeat:no-repeat;

padding-top:80px;

}

</style>

</head>

<body>

<p>上面是缩小的背景图片。</p>

2)例子2通过百分比控制大小

<style>

div

{

background:url(/i/bg_flower.gif);

background-size:35% 100%;

-moz-background-size:35% 100%; /* 老版本的 Firefox */

background-repeat:no-repeat;

}

</style>

</head>

<body>

<div>

<p>这是一个段落。</p>

</div>

2. background-origin 属性规定背景图片的定位区域。

<style>

div

{

border:1px solid black;

padding:35px;

background-image:url('/i/bg_flower.gif');

background-repeat:no-repeat;

background-position:left;

}

#div1

{

background-origin:border-box;

}

#div2

{

background-origin:content-box;

}

</style>

</head>

<body>

<p>background-origin:border-box:</p>

这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

</div>

<p>background-origin:content-box:</p>

</div>

3. 多重背景。

body

{

background-image:url(/i/bg_flower.gif),url(/i/bg_flower_2.gif);

}

</style>

</head>

<body>

</body>

3.文本效果

1.文本阴影

text-shadow 可向文本应用阴影。

<style>

{

text-shadow: 5px 5px 5px #FF0000;

}

</style>

</head>

<body>

<h1>文本阴影效果！</h1>

</body>

2. 自动换行

在 CSS3 中，word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分：

<style>

p.test

{

width:11em;

border:1px solid #000000;

word-wrap:break-word;

}

</style>

</head>

<body>

<p class="test">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>

</body>

3. 字体粗细

font-weight

参数：normal
bold
100
200
300
400
500
600
700
800
900

4.2D 转换

1. translate() 方法

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数：

<style>

div

{

width:100px;

height:75px;

background-color:yellow;

border:1px solid black;

}

div#div2

{

transform:translate(50px,100px);

-ms-transform:translate(50px,100px); /* IE 9 */

-moz-transform:translate(50px,100px); /* Firefox */

-webkit-transform:translate(50px,100px); /* Safari and Chrome */

-o-transform:translate(50px,100px); /* Opera */

}

</style>

</head>

<body>

</body>

值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。

2. rotate() 方法

通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

<style>

div

{

width:100px;

height:75px;

background-color:yellow;

border:1px solid black;

}

div#div2

{

transform:rotate(30deg);

-ms-transform:rotate(30deg); /* IE 9 */

-moz-transform:rotate(30deg); /* Firefox */

-webkit-transform:rotate(30deg); /* Safari and Chrome */

-o-transform:rotate(30deg); /* Opera */

}

</style>

</head>

<body>

</body>

值 rotate(30deg) 把元素顺时针旋转 30 度。

3. scale() 方法

通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：

<style>

div

{

width:100px;

height:75px;

background-color:yellow;

border:1px solid black;

}

div#div2

{

margin:100px;

transform:scale(2,4);

-ms-transform:scale(2,4); /* IE 9 */

-moz-transform:scale(2,4); /* Firefox */

-webkit-transform:scale(2,4); /* Safari and Chrome */

-o-transform:scale(2,4); /* Opera */

}

</style>

</head>

<body>

</body>

值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

4.skew() 方法

通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

<style>

div

{

width:100px;

height:75px;

background-color:yellow;

border:1px solid black;

}

div#div2

{

transform:skew(30deg,20deg);

-ms-transform:skew(30deg,20deg); /* IE 9 */

-moz-transform:skew(30deg,20deg); /* Firefox */

-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */

-o-transform:skew(30deg,20deg); /* Opera */

}

</style>

</head>

<body>

</body>

值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。

5. transform合写

div

{

width:100px;

height:75px;

background-color:yellow;

border:1px solid black;

}

div#div2

{

transform: translate(80px,80px) scale(1.5,1.5) rotate(45deg);

}

</style>

</head>

<body>

</body>

6. transform方法介绍

5.3D 看以前做过的例子

6.过渡transition

0. transition介绍

transition: property duration timing-function delay

transition属性是个复合属性，她包括以下几个子属性：

transition-property ：规定设置过渡效果的css属性名称
transition-duration ：规定完成过渡效果需要多少秒或毫秒
transition-timing-function ：指定过渡函数，规定速度效果的速度曲线
transition-delay ：指定开始出现的延迟时间

默认值分别为：all 0 ease 0

注：transition-duration 时长为0，不会产生过渡效果

改变多个css属性的过渡效果时：

a{ transition: background 0.8s ease-in 0.3s,color 0.6s ease-out 0.3s;}

1.例子1

<style>

div

{

width:100px;

height:100px;

background:yellow;

transition:width 2s;

-moz-transition:width 2s; /* Firefox 4 */

-webkit-transition:width 2s; /* Safari and Chrome */

-o-transition:width 2s; /* Opera */

}

div:hover

{

width:300px;

}

</style>

</head>

<body>

<p>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</p>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>

2.例子2

<style>

div

{

width:100px;

height:100px;

background:yellow;

transition:width 2s, height 2s, transform 2s;

-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */

-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */

-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */

}

div:hover

{

width:200px;

height:200px;

transform:rotate(180deg);

-moz-transform:rotate(180deg); /* Firefox 4 */

-webkit-transform:rotate(180deg); /* Safari and Chrome */

-o-transform:rotate(180deg); /* Opera */

}

</style>

</head>

<body>

<div>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</div>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>

3. transition合写

<style>

div

{

width:100px;

height:100px;

background:yellow;

transition-property:width 1s linear 2s;

/* Firefox 4 */

-moz-transition:width 1s linear 2s;

/* Safari and Chrome */

-webkit-transition:width 1s linear 2s;

/* Opera */

-o-transition:width 1s linear 2s;

}

div:hover

{

width:200px;

}

</style>

</head>

<body>

<p>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</p>

<p><b>注释：</b>这个过渡效果会在开始之前等待两秒。</p>

</body>

7.动画@keyframes

注释：您必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。

0. 参数介绍

1. animation-name指定@keyframes的名字，CSS加载时会应用该名字的@keyframes规则来实现动画

2. animation-duration动画持续时间，默认是0表示无动画，单位可以设s秒或ms毫秒

3. animation-timing-function动画播放方式，默认值ease，可以设linear，ease，ease-in，ease-out，ease-in-out，cubic-bezier(n,n,n,n)，steps。关于贝塞尔曲线和steps可以参照上一篇transition，和transition-timing-function类似，不多赘述。

4. animation-delay延迟开始动画的时间，默认值是0，表示不延迟，立即播放动画。单位是s秒或ms毫秒。允许设负时间，意思是让动画动作从该时间点开始启动，之前的动画不显示。例如-2s 使动画马上开始，但前 2 秒的动画被跳过。

5. animation-iteration-count动画循环播放的次数，默认值为1，即放完一遍后不循环播放。除数字外也可以设关键字infinite表示无限循环播放。

6. animation-direction动画播放的方向，可设normal，alternate，alternate-reverse。默认值是normal表示正常播放动画。alternate表示轮转正反向播放动画，即动画会在奇数次（1，3，5…）正常播放，而在偶数次（2，4，6…）反向播放。alternate-reverse正好反过来，奇数次反向播动画，偶数次正向播动画。

1.普通的

<!DOCTYPE html>

<html>

<head>

<style>

div

{

width:100px;

height:100px;

background:red;

animation:myfirst 5s;

-moz-animation:myfirst 5s; /* Firefox */

-webkit-animation:myfirst 5s; /* Safari and Chrome */

-o-animation:myfirst 5s; /* Opera */

}

@keyframes myfirst

{

from {background:red;}

to {background:yellow;}

}

@-moz-keyframes myfirst /* Firefox */

{

from {background:red;}

to {background:yellow;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

from {background:red;}

to {background:yellow;}

}

@-o-keyframes myfirst /* Opera */

{

from {background:red;}

to {background:yellow;}

}

</style>

</head>

<body>

</body>

</html>

2.灵活的

<style>

div

{

width:100px;

height:100px;

background:red;

animation:myfirst 5s;

-moz-animation:myfirst 5s; /* Firefox */

-webkit-animation:myfirst 5s; /* Safari and Chrome */

-o-animation:myfirst 5s; /* Opera */

}

@keyframes myfirst

{

0% {background:red;}

25% {background:yellow;}

50% {background:blue;}

100% {background:green;}

}

@-moz-keyframes myfirst /* Firefox */

{

0% {background:red;}

25% {background:yellow;}

50% {background:blue;}

100% {background:green;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

0% {background:red;}

25% {background:yellow;}

50% {background:blue;}

100% {background:green;}

}

@-o-keyframes myfirst /* Opera */

{

0% {background:red;}

25% {background:yellow;}

50% {background:blue;}

100% {background:green;}

}

</style>

</head>

<body>

<p><b>注释：</b>当动画完成时，会变回初始的样式。</p>

</body>

3.多种样式动画

改变背景色和位置：

<style>

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation:myfirst 5s;

-moz-animation:myfirst 5s; /* Firefox */

-webkit-animation:myfirst 5s; /* Safari and Chrome */

-o-animation:myfirst 5s; /* Opera */

}

@keyframes myfirst

{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

@-moz-keyframes myfirst /* Firefox */

{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

@-o-keyframes myfirst /* Opera */

{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

</style>

</head>

<body>

</body>

4. 样式合写

<style>

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation:myfirst 5s linear 2s infinite alternate;

/* Firefox: */

-moz-animation:myfirst 5s linear 2s infinite alternate;

/* Safari and Chrome: */

-webkit-animation:myfirst 5s linear 2s infinite alternate;

/* Opera: */

-o-animation:myfirst 5s linear 2s infinite alternate;

}

@keyframes myfirst

{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

@-moz-keyframes myfirst /* Firefox */

{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

@-o-keyframes myfirst /* Opera */

{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

</style>

</head>

<body>

</body>

8.多列

1. column-count 属性规定元素应该被分隔的列数：

<style>

.newspaper

{

-moz-column-count:3; /* Firefox */

-webkit-column-count:3; /* Safari and Chrome */

column-count:3;

}

</style>

</head>

<body>

人民网北京2月24日电 (记者刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。

此次国内成品油价格调整幅度，是按照现行国内成品油价格形成机制，根据国际市场油价变化情况确定的。去年11月16日国内成品油价格调整以来，受市场预期欧美经济复苏前景向好以及中东局势持续动荡等因素影响，国际市场原油价格先抑后扬，2月上旬WTI和布伦特原油期货价格再次回升至每桶95美元和115美元以上。虽然近两日价格有所回落，但国内油价挂钩的国际市场三种原油连续22个工作日移动平均价格上涨幅度已超过4%，达到国内成品油价格调整的边界条件。

通知指出，这次成品油调价后，国家将按照已建立的补贴机制，继续对种粮农民、渔业（含远洋渔业）、林业、城市公交、农村道路客运（含岛际和农村水路客运）等给予补贴。同时，为保证市场物价基本稳定，防止连锁涨价，对与居民生活密切相关的铁路客运、城市公交、农村道路客运（含岛际和农村水路客运）价格不作调整。

通知要求，中石油、中石化、中海油三大公司要组织好成品油生产和调运，保持合理库存，加强综合协调和应急调度，保障成品油供应。各级价格主管部门要加大市场监督检查力度，依法查处不执行国家价格政策，以及囤积居奇、造谣惑众、合谋涨价、搭车涨价等违法行为，维护正常市场秩序。

</div>

</body>

把 div 元素中的文本分隔为三列：

2. column-gap 属性规定列之间的间隔：

<style>

.newspaper

{

-moz-column-count:3; /* Firefox */

-webkit-column-count:3; /* Safari and Chrome */

column-count:3;

-moz-column-gap:30px; /* Firefox */

-webkit-column-gap:30px; /* Safari and Chrome */

column-gap:30px;

}

</style>

</head>

<body>

</div>

</body>

规定列之间 30 像素的间隔：

3.column-rule 属性设置列之间的宽度、样式和颜色规则

<style>

.newspaper

{

-moz-column-count:3; /* Firefox */

-webkit-column-count:3; /* Safari and Chrome */

column-count:3;

-moz-column-gap:40px; /* Firefox */

-webkit-column-gap:40px; /* Safari and Chrome */

column-gap:40px;

-moz-column-rule:8px outset #ff0000; /* Firefox */

-webkit-column-rule:8px outset #ff0000; /* Safari and Chrome */

column-rule:8px outset #ff0000;

}

</style>

</head>

<body>

此次国内成品油价格调整幅度，是按照现行国内成品油价格形成机制，根据国际市场油价变化情况确定的。去年11月16日国内成品油价格调整以来，受市场预期欧美经济复苏前景向好以及中东局势持续动荡等因素影响，国际市场原油价格先抑后扬，2月上旬WTI和布伦特原油期货价格再次回升至每桶95美元和115美元以上。

</div>

</body>

9.渐变

1. 线性渐变

1. 线性渐变 - 从上到下（默认情况下）

<style>

#grad1 {

height: 200px;

background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(red, blue); /* 标准的语法（必须放在最后） */

}

</style>

</head>

<body>

<p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>

2. 线性渐变 - 从左到右

<style>

#grad1 {

height: 200px;

background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(to right, red , blue); /* 标准的语法（必须放在最后） */

}

</style>

</head>

<body>

<p>从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>

3. 线性渐变 - 对角

<style>

#grad1 {

height: 200px;

background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(to bottom right, red , blue); /* 标准的语法（必须放在最后） */

}

</style>

</head>

<body>

<p>从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色：</p>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>

4.线性渐变 – 使用角度

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。

语法：

background: linear-gradient(angle, color-stop1, color-stop2);

角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

注意：

但是，请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

下面的实例演示了如何在线性渐变上使用角度：

<style>

#grad1 {

height: 100px;

background: -webkit-linear-gradient(0deg, red, blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(0deg, red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(0deg, red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(0deg, red, blue); /* 标准的语法（必须放在最后） */

}

#grad2 {

height: 100px;

background: -webkit-linear-gradient(90deg, red, blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(90deg, red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(90deg, red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(90deg, red, blue); /* 标准的语法（必须放在最后） */

}

#grad3 {

height: 100px;

background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(180deg, red, blue); /* 标准的语法（必须放在最后） */

}

#grad4 {

height: 100px;

background: -webkit-linear-gradient(-90deg, red, blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(-90deg, red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(-90deg, red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(-90deg, red, blue); /* 标准的语法（必须放在最后） */

}

</style>

</head>

<body>

<h3>线性渐变 - 使用不同的角度</h3>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>

5.线性渐变 – 渐变背景

<style>

#grad1 {

height: 55px;

background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */

background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* 标准的语法（必须放在最后） */

}

</style>

</head>

<body>

渐变背景

</div>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>

6.线性渐变 – 透明度

<style>

#grad1 {

height: 200px;

background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Firefox 3.6 - 15 */

background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法（必须放在最后） */

}

</style>

</head>

<body>

<p>为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。</p>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>

7.opacity-透明度

<style>

div

{

background-color:red;

opacity:0.5;

filter:Alpha(opacity=50); /* IE8 以及更早的浏览器 */

}

</style>

</head>

<body>

<div>本元素的不透明度是 0.5。请注意，文本和背景色都受到不透明级别的影响。</div>

</body>

11.CSS3运用

1.图片

0. a标签的target参数

<a> 标签的 target 属性规定在何处打开链接文档。

_blank -- 在新窗口中打开链接
_parent -- 在父窗体中打开链接
_self -- 在当前窗体打开链接,此为默认值
_top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)
一个对应的框架页的名称 -- 在对应框架页中打开

1. 椭圆形图片

<style>

img {

border-radius: 50%;

}

</style>

</head>

<body>

<h2>椭圆形图片</h2>

<p>使用 border-radius 属性来创建椭圆形图片：</p>

</body>

2. 缩略图

<style>

img {

border: 1px solid #ddd;

border-radius: 4px;

padding: 5px;

}

</style>

</head>

<body>

<p>我们使用 border 属性来创建缩略图。</p>

</body>

3.缩略图作为连接

<style>

a {

display: inline-block;

border: 1px solid #ddd;

border-radius: 4px;

padding: 5px;

transition: 3s;

}

a:hover {

box-shadow: 0 0 2px 5px rgba(0, 140, 186, 0.5);

}

</style>

</head>

<body>

<h2>缩略图作为连接</h2>

<p>我们使用 border 属性来创建缩略图。在图片外层添加一个链接。</p>

<p>点击图片查看效果：</p>

</a>

</body>

4.响应式图片

<style>

img {

max-width: 100%;

height: auto;

}

</style>

</head>

<body>

<h2>响应式图片</h2>

<p>响应式图片会自动适配各种尺寸的屏幕。</p>

<p>通过重置浏览器大小查看效果:</p>

</body>

5.img的alt参数

alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。

假设由于下列原因用户无法查看图像，alt 属性可以为图像提供替代的信息：

6. 图片文本

<style>

.container {

position: relative;

}

.center {

position: absolute;

left: 0;

top: 50%;

width: 100%;

text-align: center;

font-size: 18px;

}

.topleft {

position: absolute;

top: 8px;

left: 16px;

font-size: 18px;

}

.topright {

position: absolute;

top: 8px;

right: 16px;

font-size: 18px;

}

.bottomright {

position: absolute;

bottom: 8px;

right: 16px;

font-size: 18px;

}

.bottomleft {

position: absolute;

bottom: 8px;

left: 16px;

font-size: 18px;

}

img {

width: 100%;

height: auto;

opacity: 0.3;

}

</style>

</head>

<body>

<p>在图片中间位置添加文本信息:</p>

</div>

</body>

7.响应式卡片

<style>

body {margin:25px;}

div.polaroid {

width: 80%;

background-color: white;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

margin-bottom: 25px;

}

div.container {

text-align: center;

padding: 10px 20px;

}

</style>

</head>

<body>

<h2>响应式卡片</h2>

<p>The Troll's tongue in Hardanger, Norway</p>

</div>

<p>Northern Lights in Norway</p>

</div>

</body>

8. 响应式图片相册

<style>

div.img {

border: 1px solid #ccc;

}

div.img:hover {

border: 1px solid #777;

}

div.img img {

width: 100%;

height: auto;

}

div.desc {

padding: 15px;

text-align: center;

}

* {

box-sizing: border-box;

}

.responsive {

padding: 0 6px;

float: left;

width: 24.99999%;

}

@media only screen and (max-width: 700px){

.responsive {

width: 49.99999%;

margin: 6px 0;

}

@media only screen and (max-width: 500px){

.responsive {

width: 100%;

}

.clearfix:after {

content: "";

display: table;

clear: both;

}

</style>

</head>

<body>

<h2 style="text-align:center">响应式图片相册</h2>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</a>

<div class="desc">Add a description of the image here</div>

</div>

<h4>重置浏览器大小查看效果</h4>

</div>

</body>

9. 图片 Modal(模态)

<style>

#myImg {

border-radius: 5px;

cursor: pointer;

transition: 0.3s;

}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */

.modal {

display: none; /* Hidden by default */

position: fixed; /* Stay in place */

z-index: 1; /* Sit on top */

padding-top: 100px; /* Location of the box */

left: 0;

top: 0;

width: 100%; /* Full width */

height: 100%; /* Full height */

overflow: auto; /* Enable scroll if needed */

background-color: rgb(0,0,0); /* Fallback color */

background-color: rgba(0,0,0,0.9); /* Black w/ opacity */

}

/* Modal Content (image) */

.modal-content {

margin: auto;

display: block;

width: 80%;

max-width: 700px;

}

/* Caption of Modal Image */

#caption {

margin: auto;

display: block;

width: 80%;

max-width: 700px;

text-align: center;

color: #ccc;

padding: 10px 0;

height: 150px;

}

/* Add Animation */

.modal-content, #caption {

-webkit-animation-name: zoom;

-webkit-animation-duration: 0.6s;

animation-name: zoom;

animation-duration: 0.6s;

}

@-webkit-keyframes zoom {

from {-webkit-transform: scale(0)}

to {-webkit-transform: scale(1)}

}

@keyframes zoom {

from {transform: scale(0.1)}

to {transform: scale(1)}

}

/* The Close Button */

.close {

position: absolute;

top: 15px;

right: 35px;

color: #f1f1f1;

font-size: 40px;

font-weight: bold;

transition: 0.3s;

}

.close:hover,

.close:focus {

color: #bbb;

text-decoration: none;

cursor: pointer;

}

/* 100% Image Width on Smaller Screens */

@media only screen and (max-width: 700px){

.modal-content {

width: 100%;

}

</style>

</head>

<body>

<h2>图片模态框</h2>

<p>本实例演示了如何结合 CSS 和 JavaScript 来一起渲染图片。</p><p>

首先，我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。<p>

<p>然后，我们使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示：</p>

</div>

// 获取模态窗口

var modal = document.getElementById('myModal');

// 获取图片模态框，alt 属性作为图片弹出中文本描述

var img = document.getElementById('myImg');

var modalImg = document.getElementById("img01");

var captionText = document.getElementById("caption");

img.onclick = function(){

modal.style.display = "block";

modalImg.src = this.src;

modalImg.alt = this.alt;

captionText.innerHTML = this.alt;

}

// 获取 <span> 元素，设置关闭模态框按钮

var span = document.getElementsByClassName("close")[0];

// 点击 <span> 元素上的 (x), 关闭模态框

span.onclick = function() {

modal.style.display = "none";

}

</script>

</body>

2. 按钮

1.鼠标悬停按钮

<style>

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 16px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

-webkit-transition-duration: 0.4s; /* Safari */

transition-duration: 0.4s;

cursor: pointer;

}

.button1 {

background-color: white;

color: black;

border: 2px solid #4CAF50;

}

.button1:hover {

background-color: #4CAF50;

color: white;

}

.button2 {

background-color: white;

color: black;

border: 2px solid #008CBA;

}

.button2:hover {

background-color: #008CBA;

color: white;

}

.button3 {

background-color: white;

color: black;

border: 2px solid #f44336;

}

.button3:hover {

background-color: #f44336;

color: white;

}

.button4 {

background-color: white;

color: black;

border: 2px solid #e7e7e7;

}

.button4:hover {background-color: #e7e7e7;}

.button5 {

background-color: white;

color: black;

border: 2px solid #555555;

}

.button5:hover {

background-color: #555555;

color: white;

}

</style>

</head>

<body>

<h2>鼠标悬停按钮</h2>

<p>我们可以使用 :hover 选择器来修改鼠标悬停在按钮上的样式。</p>

<p><strong>提示:</strong> 我们可以使用 <code>transition-duration</code> 属性来设置 "hover" 效果的速度:</p>

<button class="button button1">Green</button>

<button class="button button5">Black</button>

</body>

2.按钮阴影

<style>

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

-webkit-transition-duration: 0.4s; /* Safari */

transition-duration: 0.4s;

}

.button1 {

box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

}

.button2:hover {

box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);

}

</style>

</head>

<body>

<p>我们可以使用 box-shadow 属性来为按钮添加阴影:</p>

<button class="button button2">鼠标悬停后出现阴影</button>

</body>

3.禁用按钮

我们可以使用 opacity 属性为按钮添加透明度 (看起来类似 "disabled" 属性效果)。

提示: 我们可以添加 cursor 属性并设置为 "not-allowed" 来设置一个禁用的图片:

.disabled {

opacity: 0.6;

cursor: not-allowed;//禁用手势

}

4.按钮组

<style>

.button {

background-color: #4CAF50; /* Green */

border: 1px solid green;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

cursor: pointer;

float: left;

}

.button:hover {

background-color: #3e8e41;

}

</style>

</head>

<body>

<h2>带边框按钮组</h2>

<p>Add borders to create a bordered button group:</p>

<button class="button">Button</button>

<p style="clear:both"><br>记住要清除浮动，否则下一个 p 元素的按钮也会显示在同一行。</p>

</body>

移除外边距并添加 float:left 来设置按钮组:

5. 按钮动画

<style>

.button {

display: inline-block;

border-radius: 4px;

background-color: #f4511e;

border: none;

color: #FFFFFF;

text-align: center;

font-size: 28px;

padding: 20px;

width: 200px;

transition: all 0.5s;

cursor: pointer;

margin: 5px;

}

.button span {

cursor: pointer;

display: inline-block;

position: relative;

transition: 0.5s;

}

.button span:after {

content: '»';

position: absolute;

opacity: 0;

top: 0;

right: -20px;

transition: 0.5s;

}

.button:hover span {

padding-right: 25px;

}

.button:hover span:after {

opacity: 1;

right: 0;

}

</style>

</head>

<body>

<button class="button"><span>Hover </span></button>

</body>

6.按钮动画 - "按压效果"

<style>

.button {

display: inline-block;

padding: 15px 25px;

font-size: 24px;

cursor: pointer;

text-align: center;

text-decoration: none;

outline: none;

color: #fff;

background-color: #4CAF50;

border: none;

border-radius: 15px;

box-shadow: 0 9px #999;

}

.button:hover {background-color: #3e8e41}

.button:active {

//active 选择器用于选择活动链接。

//当您在一个链接上点击时，它就会成为活动的（激活的）

background-color: #3e8e41;

box-shadow: 0 5px #666;

transform: translateY(4px);

}

</style>

</head>

<body>

<button class="button">Click Me</button>

</body>

3. CSS3 框大小

CSS3 box-sizing 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。

默认情况下，元素的宽度与高度计算方式如下：

width(宽) + padding(内边距) + border(边框) = 元素实际宽度

height(高) + padding(内边距) + border(边框) = 元素实际高度

这就意味着我们在设置元素的 width/height 时，元素真实展示的高度与宽度会更大(因为元素的边框与内边距也会计算在 width/height 中)。

使用 CSS3 box-sizing 属性：

CSS3 box-sizing 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。

如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中:

<html>

<head>

<style>

.div1 {

width: 300px;

height: 100px;

border: 1px solid blue;

box-sizing: border-box;

}

.div2 {

width: 300px;

height: 100px;

padding: 50px;

border: 1px solid red;

box-sizing: border-box;

}

</style>

</head>

<body>

<div class="div1">两个 div 现在是一样大小的!</div>

<br>

</body>

</html>

从结果上看 box-sizing: border-box; 效果更好，也正是很多开发人员需要的效果。

以下代码可以让所有元素以更直观的方式展示大小。很多浏览器已经支持 box-sizing: border-box; (但是并非所有 - 这就是为什么 input 和 text 元素设置了 width: 100%; 后的宽度却不一样)。

所有元素使用 box-sizing 是比较推荐的：

<style>

* {

box-sizing: border-box;

}

input, textarea {

width: 100%;

}

</style>

</head>

<body>

用户名:<br>

邮箱:<br>

评论:<br>

</textarea>

</form>

<p><strong>提示：</strong> 可以尝试移除样式中的 box-sizing 属性，看看会发生什么。注意移除后部分浏览器 input, textarea, 和 submit 按钮的宽度不一致。</p>

</body>

4.弹性盒子(Flex Box)

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

CSS3 弹性盒子内容:

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

浅谈display:flex

display:flex 意思是弹性布局

首先flex的出现是为了解决哪些问题呢？

一、页面行排列布局

像此图左右两个div一排显示

可以用浮动的布局方式

html部分

css部分

这种布局有两个缺点

1.需要一个空div来清除浮动，当然也可以选用其他清除浮动的方法，但此处需要清除浮动才能不影响下面的布局。

2.当.left,.right 的宽度是固定的，浏览器宽度变的过窄时，.right会被挤到下面

用display:flex布局，可以解决这两个缺点

刚吃的html部分不变，css部分

父级元素定义display:flex,子元素宽度用flex来定义,flex:1 是均分父级元素。占的比例相同

1:2分时

同样分为3份时

flex是所占的比例，这样的布局就方便很多。

二、div上下左右居中

我之前写过div上下左右居中的几种方法

其中有一个写了margin：auto auto；这个方法的使用前提就是先把父元素设为display:flex

html部分

css部分

在未知div宽高时，用这种方法比较方便

这是我在使用flex布局时用到的两个比较常见又好用的例子

5. 多媒体查询

1. 简单实例

<style>

body {

background-color: pink;

}

@media screen and (min-width: 480px) {

body {

background-color: lightgreen;

}

</style>

</head>

<body>

<h1>重置浏览器窗口查看效果！</h1>

<p>如果媒体类型屏幕的可视窗口宽度小于 480 px ，背景颜色将改变。</p>

</body>

2. 复杂实例

<style>

ul {

list-style-type: none;

}

ul li a {

color: green;

text-decoration: none;

padding: 3px;

display: block;

}

@media screen and (max-width: 400px) and (min-width: 300px) {

ul li a {

padding-left: 30px;

background: url(email-icon.png) left center no-repeat;

}

@media screen and (max-width: 600px) and (min-width: 500px) {

ul li a:before {

content: "Email: ";

font-style: italic;

color: #666666;

}

</style>

</head>

<body>

<h1>重置浏览器窗口，查看效果!</h1>

<ul>

<li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li>

</ul>

</body>

12. ES6简介

https://www.jianshu.com/p/287e0bb867ae

https://segmentfault.com/a/1190000004365693#articleHeader3

https://www.jianshu.com/p/ebfeb687eb70

1.变量声明const和let

我们都是知道在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如:

function aa() {

if(bool) {

var test = 'hello man'

} else {

console.log(test)

}

以上的代码实际上是：

function aa() {

var test // 变量提升

if(bool) {

test = 'hello man'

} else {

//此处访问test 值为undefined

console.log(test)

}

//此处访问test 值为undefined

}

所以不用关心bool是否为true or false。实际上，无论如何test都会被创建声明。

接下来ES6主角登场：
我们通常用let和const来声明，let表示变量、const表示常量。let和const都是块级作用域。怎么理解这个块级作用域？

在一个函数内部
在一个代码块内部

说白了 {}大括号内的代码块即为let 和 const的作用域。

看以下代码：

function aa() {

if(bool) {

let test = 'hello man'

} else {

//test 在此处访问不到

console.log(test)

}

let的作用域是在它所在当前代码块，但不会被提升到当前函数的最顶部。

再来说说const。

const name = 'lux'

name = 'joe' //再次赋值此时会报错

说一道面试题

var funcs = []

for (var i = 0; i < 10; i++) {

funcs.push(function() { console.log(i) })

}

funcs.forEach(function(func) {

func()

})

这样的面试题是大家常见，很多同学一看就知道输出 10 十次
但是如果我们想依次输出0到9呢？两种解决方法。直接上代码。

// ES5告诉我们可以利用闭包解决这个问题

var funcs = []

for (var i = 0; i < 10; i++) {

func.push((function(value) {

return function() {

console.log(value)

}

}(i)))

}

// es6

for (let i = 0; i < 10; i++) {

func.push(function() {

console.log(i)

})

}

2.模板字符串

es6模板字符简直是开发者的福音啊，解决了ES5在字符串功能上的痛点。

第一个用途，基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。

//es5

var name = 'lux'

console.log('hello' + name)

//es6

const name = 'lux'

console.log(`hello ${name}`) //hello lux

第二个用途，在ES5时我们通过反斜杠(\)来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。

// es5

var msg = "Hi \

man!

// es6

const template = `<div>

<span>hello world</span>

</div>`

对于字符串es6当然也提供了很多厉害的方法。说几个常用的。

// 1.includes：判断是否包含然后直接返回布尔值

let str = 'hahay'

console.log(str.includes('y')) // true

// 2.repeat: 获取字符串重复n次

let s = 'he'

console.log(s.repeat(3)) // 'hehehe'

//如果你带入小数, Math.floor(num) 来处理

3.函数

1.函数默认参数

在ES5我们给函数定义参数默认值是怎么样？

function action(num) {

num = num || 200

//当传入num时，num为传入的值

//当没传入参数时，num即有了默认值200

return num

}

但细心观察的同学们肯定会发现，num传入为0的时候就是false，此时num = 200 与我们的实际要的效果明显不一样

ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。

function action(num = 200) {

console.log(num)

}

action() //200

action(300) //300

2. 箭头函数

这个恐怕是ES6最最常用的一个新特性了，用它来写function比原来的写法要简洁清晰很多:

function(i){ return i + 1; } //ES5

(i) => i + 1 //ES6

简直是简单的不像话对吧...
如果方程比较复杂，则需要用{}把代码包起来：

function(x, y) {

x++;

y--;

return x + y;

}

(x, y) => {x++; y--; return x+y}

除了看上去更简洁以外，arrow function还有一项超级无敌的功能！
长期以来，JavaScript语言的this对象一直是一个令人头痛的问题，在对象方法中使用this，必须非常小心。例如：

class Animal {

constructor(){

this.type = 'animal'

}

says(say){

setTimeout(function(){

console.log(this.type + ' says ' + say)

}, 1000)

}

var animal = new Animal()

animal.says('hi') //undefined says hi

运行上面的代码会报错，这是因为setTimeout中的this指向的是全局对象。所以为了让它能够正确的运行，传统的解决方法有两种：

第一种是将this传给self,再用self来指代this

says(say){

var self = this;

setTimeout(function(){

console.log(self.type + ' says ' + say)

}, 1000)

2.第二种方法是用bind(this),即

says(say){

setTimeout(function(){

console.log(this.type + ' says ' + say)

}.bind(this), 1000)

但现在我们有了箭头函数，就不需要这么麻烦了：

class Animal {

constructor(){

this.type = 'animal'

}

says(say){

setTimeout( () => {

console.log(this.type + ' says ' + say)

}, 1000)

}

var animal = new Animal()

animal.says('hi') //animal says hi

当我们使用箭头函数时，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this。

4.拓展的对象功能

对象初始化简写

ES5我们对于对象都是以键值对的形式书写，是有可能出现键值对重名的。例如：

function people(name, age) {

return {

age: age

};

}

键值对重名，ES6可以简写如下：

function people(name, age) {

return {

name,

age

};

}

ES6 同样改进了为对象字面量方法赋值的语法。ES5为对象添加方法：

const people = {

getName: function() {

console.log(this.name)

}

ES6通过省略冒号与 function 关键字，将这个语法变得更简洁

const people = {

getName () {

console.log(this.name)

}

ES6 对象提供了Object.assign()这个方法来实现浅复制。Object.assign()可以把任意多个源对象自身可枚举的属性拷贝给目标对象，然后返回目标对象。第一参数即为目标对象。在实际项目中，我们为了不改变源对象。一般会把目标对象传为{}

const obj = Object.assign({}, objA, objB)

5.更方便的数据访问--解构

数组和对象是JS中最常用也是最重要表示形式。为了简化提取信息，ES6新增了解构，这是将一个数据结构分解为更小的部分的过程

ES5我们提取对象中的信息形式如下：

const people = {

age: 20

}

const name = people.name

const age = people.age

console.log(name + ' --- ' + age)

是不是觉得很熟悉，没错，在ES6之前我们就是这样获取对象信息的，一个一个获取。现在，解构能让我们从对象或者数组里取出数据存为变量，例如

//对象

const people = {

age: 20

}

const { name, age } = people

console.log(`${name} --- ${age}`)

//数组

const color = ['red', 'blue']

const [first, second] = color

console.log(first) //'red'

console.log(second) //'blue'

6.Spread Operator 展开运算符（俗称三个点）

ES6中另外一个好玩的特性就是Spread Operator 也是三个点儿...接下来就展示一下它的用途。

组装对象或者数组

//数组

const color = ['red', 'yellow']

const colorful = [...color, 'green', 'pink']

console.log(colorful) //[red, yellow, green, pink]

//对象

const alp = { fist: 'a', second: 'b'}

const alphabets = { ...alp, third: 'c' }

console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"

}

有时候我们想获取数组或者对象除了前几项或者除了某几项的其他项

//数组

const number = [1,2,3,4,5]

const [first, ...rest] = number

console.log(rest) //2,3,4,5

//对象

const user = {

username: 'lux',

gender: 'female',

age: 19,

address: 'peking'

}

const { username, ...rest } = user

console.log(rest) //{"address": "peking", "age": 19, "gender": "female"

}

对于 Object 而言，还可以用于组合成新的 Object 。(ES2017 stage-2 proposal) 当然如果有重复的属性名，右边覆盖左边

const first = {

a: 1,

b: 2,

c: 6,

}

const second = {

c: 3,

d: 4

}

const total = { ...first, ...second }

console.log(total) // { a: 1, b: 2, c: 3, d: 4 }

7.import 和 export

转载于:https://www.cnblogs.com/xiaohuai12388/p/8531727.html

weixin_30642029

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫