响应式布局+图标的使用+json+layer+深复制

第一大块：

首先实现 响应式页面的三种方式

　　　　第一是 弹性布局   第二是使用百分比格式   第三十 使用 vw格式

一、做响应式页面的口诀

　　　　1.认真分析页面，分析页面的布局，看那些地方是死的，那些地方是需要响应式的

　　　　2.一般ui设计师给的图一般是二倍素，但是也有的时候ui设计师给的图片分析不出来。你就要和ui设计师进行多多沟通。

　　　　如果ui设计师没有给你你想要的结果，你就自行分析，然后先写，最后看效果进行微调

　　　　3.如果有某个部分是响应式的，优先使用 弹性布局  其次选用百分比去做，再次采用vw做为单位去做

二、响应式：

  ----------------------------------------------------------------------------------------------------------------------------------------------------------

vw   

-------------------------------------------------------------------------------------------------------------------------------------------------------------

　　单位  vw ，vh

　　　　单词 缩写： view width  ， view height 视图窗口

含义： 是一个相对单位。相对于屏幕宽度的单位  100vw = 整个屏幕的宽度  100vw= 100%。

 　　　 是一个相对单位。相对于屏幕宽度的单位  100vH = a屏幕高度

使用 vw 来设置宽高  一般使用vw 都基本上十做  手机端开发（又叫移动开发）

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------

设置宽高

  设置宽高 ：  首先在做移动开发端开发时  要明白什么时  dpi 设备像素比（这个设备像素比又叫做  手机屏幕分辨率）

     这个设备比 =  物理像素 ： 逻辑像素  = 2：1

     逻辑像素 就是我们的台式机  它所占的比例就是  1 

    物理像素 则根据手机的屏幕的大小来进行  扩大缩小。

    当手机时 ipone 6 7 8 的时候 则是  2：1

     当手机为  ipones plas  的时候则时   3：1

　使用vw 做为宽高的公式     （想要实现的宽度px(做单位) / vw的宽度（在控制台中有这个就是dpi）  ）*100%  =  就是想要实现的宽度（vw 做单位）。

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

无论是 客户端开发还是移动端开发  都要进行注意这种情况

 ui设计师给我们的图一般都是  二部图  750px (因为这个样子是比较清晰的)。但是我们在具体写代码的时候就不能直接用ul给我们的图片。 

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

怎么实现响应式：

 字体响应式怎么实现    图片响应式怎么实现     布局的响应式怎么实现

手机端开发（移动端开发）的布局基本上不怎么变化

案例： 在 台式机上 比例是 1： 1‘

 

手机端  要不是 2：1，或者是 3：1，所以需要在不同比例下进行方法缩小  这个1px自动放大

<!-- 怎么修改 用代码判断识别当前设备的dpr，从而进行更改边框的粗细 -->
<!-- 在写代码时候边框设置还是1 但是我要判断识别当前的设备的dpr 进行缩放 -->
<!-- transform :scale(1) 但是这个问题就出现了因为
只要边框进行缩放 内容也会进行缩放
所以我们要给div 这个盒子写一个伪元素，把这个伪元素的边框设置成
dpr 的倍数 然后进行缩放 缩放以左上角来进行。-->

<!-- 怎么进行判断屏幕 @media 进行判断 -->

 案例  边框和 字体相差不多。 当手机屏幕变大的时候  字体变大 边框边粗或者细  显示的内容增多或者减少

 

 

 

 

 

-------------------------------------------------------------------------------------------------------------------------------------

图标的使用

iconfont  阿里巴巴图标的使用：

第一步：根据 iconfont 去百度搜索找到官网。

第二步： 然后选择

 

 

 第三步：搜索

 

 

 第四步：加购物车

 

 

 

 第五步： 把加入购物车的东西添加到项目里面

 

 

 

 

 

 第六步：创建一个新的项目

 

 

 

 

 

 第七步：看三者是否符合你的要求

 

 

 

 

 

 第八步：当下载到本地服务器之后首先要看一下你解压的内容是否在一个文件夹里面，如果在一个文件夹里面，则解压到当前文件夹即可，

然后选中下面的六个 ，把他们 放在刚刚创建的fonts里面，然后最后把这个fonts 引入你的项目里面，

 

 

 

 

 

 第九个：引入之后首先知道 iconfont最终是和font-size的样式是一样。

但是你把css样式引入index里面之后你要是进行修改字体大小你就要 设置权重。

 

 

 

 第十：使用案例

样式中一定要先写  框框里面的东西。

 

 第二十步：如果你在写页面的过程中发现你有图标没有下载下来，那么使用同样的方式，根据情况而定，从而进行替换fonts文件夹。

 

 ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

第三大模块：JSON

json   数据格式 （至关重要）

为什么说至关重要： 是因为这个json 格式是前端后端的沟通桥梁。

json 的全称    javascript object notation  是一种轻量级的数据交换

一、json的特点：

　　易于程序员阅读和缩写

　　易于计算机解析和生成

　　其实是javascript 的子集； 原生javascript支持 json

二、json 和 原生js的对象的区别 + ajax请求

　　ajax 请求

　　ajax  是 可以与服务器进行（同步/异步）交互的技术之一，

　　ajax 的最大优点在于  异步请求，不刷新整个页面，只是刷新局部。同时又叫局部刷新。

　　什么是同步：

　　　　含义： 同步的意思就是 你先在传输数据，我要等着你把所有的数据都传输完之后，我在去干其他的事情，

　　　　　　　客户端发送请求到服务器。当服务器返回数据之前，客户端都是属于卡顿情况。

　　什么是异步:

　　　　含义：异步的意思就是，你传你的数据，我干我的事情

　　　　　　　客户端发送请求到服务器，无论服务器是否返回数据 　客户端都是可以做其他事情的。

　　　ajax运行原理： 页面发送请求。会讲请求发送给浏览器内核中的Ajax引擎， ajax会根据 url提交请求到服务器中。

　　　在这段时间内 客户端可以进行任意操作，直到服务器将数据返回Ajax 殷勤。从而会触发你设置的事件。

　　　从而实现你要实现的功能。

{
      url:"后端接口",
      type : " get/post",
      success : "回调函数"  ，
      data: "需要传参就在这里面写，如果不需要进行传参的话，则是空的字符串" 
      
}

不管是前端还是后端  json格式都是不变的
前后端的区别主要是  ：前端json里面可能有 headers (头部需要传)
     
     键值对形式


 

　2.1json格式  就是前端把数据以json格式把数据传到 后端，然后后端进行接受

JSON  在控制台中或者在浏览器中展示的时候 
展示格式和在发ajax请求形式是不一样的


JSON:
{
        "id" : 12,
         "name" : "gao",
         "age"  :   30,
         "gender" : "男",
         "interests" : ["篮球", "爬山", "旅游"]
}

以键 值对的形式展示 

键必须添加引号

值  可以添加引号，也可以不添加引号   值不可以为 方法函数    underfind    Naan

在浏览器或者控制台中json 有两种形式
第一种是以对象的格式
另一种则是以数组的格式
案例：：：：：：

1、对象格式：{"key1"：obj1, "key2":obj2, "key3":obj3...}

2、数组/集合格式: [obj1,obj2,obj3...]    数组里面  包裹着的是一个个对象。

  

注意：JSON的key是字符串，JSON的value是Object

 

　2.2原生js对象：

var product = {
       name : 'zhangsan',
       age: l4,
       print : function(){
}        
}
原生js  是键值对的i形式
    
          值可以是  函数  对象    字符串   数字   bolean 等

 

2.3 两者之间的不同

 

 js 转  json  发 ajax 进行传参。

data:JSON.stringify({
            id: id,
            receiveName: $('input.name-text').val(),
            receivePhone: $('input.phone-text').val(),
            receiveRegion: $('input.regions-picker').val(),
            receiveDetail: $('input.region-text').val()
        }),

 ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

第四大块：

layer

 

深复制的两句代码：

　　　　1.Object.assion()  //这个是 只能一层数据的复制 比如：删除和修改

　　　　2.let result = JSON.parse(JSON.stringify(this.listToTree)); //深复制.  这个是复制多层。