个人收藏2018.08

常见操作

1.HTML5&CSS3

1.处理单行显示和多行显示文本

第一种单行显示：
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;

第二种多行显示：（兼容行比较低）
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 3;

通过js实现多行显示：
eg: <p class="test">Lorem ipsum dolor  Vitae tempora consequuntur !</p>

  var ps =  document.getElementsByClassName("test");
            for (var i = 0; i < ps.length; i++) {
               var arr = ps[i].innerHTML.split(' ');
                while(ps[i].scrollHeight > ps[i].offsetHeight){
                    ps[i].innerHTML = arr.join(' ');
                    arr.pop();      
                }           
                ps[i].innerHTML+= '...';
            }

2.PHP后台开发

1.解决跨域方法

第一种：在后台使用文件头声明跨域header（‘Access-Control-Allow-Origin:* ’）

第二种：在前台使用dataType: jsonp 后台需要拼接callback字符串，并且只能发送get请求

eg:	callback=-GET['callback'];

	echo $callback. ' ( ' .数据 .‘ ) ’   ;

第三种：使用反向代理，需要 修改 VS Code的 proxy配置。

echarts/getdata.php => http://127.0.0.1:80/echarts/getdata.php

3.移动WEB开发

1.给元素添加指定索引

var allLi = ulBox.querySelectorAll(‘li’)

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

原声写法：allLi[i].setAttribute(‘index’,i)

简写：allLi[i].index=i;

}

2.获取元素的宽度

width( ) : 获取 内容 + padding的宽度

innerWidth( ) : 获取 内容 + padding 的宽度

outerWidth( ) :获取 内容 + padding + border 的宽度

outerWidth( ture ) : 获取 内容 + padding +border +margin 的宽度

3.$ajax拦截器

4.适配屏幕的设置

一般在做响应式开发时会使用到屏幕适配

公式的计算：

  1.设计稿的宽度 （640） / 基础值= 等宽的 媒体查询中的html标签的fontsize的大小（100）= 要适配的屏幕的宽度 / 要计算的fontsize

 2.设计稿的宽度 （640）/ 要适配的屏幕的宽度 =  基础值 / 要计算的fontsize的大小

1. 要计算的fontsize的大小= 基础值 * 要适配的屏幕的宽度/ 设计稿的宽度 （640）

1.屏幕适配可以使用 css 样式的媒体查询 具体如下：

2.使用 js 实现，具体如下：

5.获取url 的参数和实现 href 跳转

a标签的属性：

location.href => 获取当前地址

location.search => search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）。

（用法视情况而用）

第一种获取url的方法： 
getUrl: function (name) {

        var reg = new RegExp("(^|&)" + name + "=(&*)(&|$)", "i");

        var r = window.location.search.substr(1).match(reg);

        if (r != null) return decodeURI(r[2]);

        return null;

    }

实现 href 跳转：
// 在当前页面存当前的url 方便登录成功之后 跳回来
sessionStorage.setItem("pageurl", location.href);
//在登陆页面  login.html 判断pageurl是否存在？
if (!pageurl) {
            pageurl = "../index.html";
          }
setTimeout(function () {
   location.href = pageurl;
}, 1000);

第二种获取url的方法：
getParameter: function (url) {
            var obj = {}
            // location.search:url中?及?后面的内容
            url = url.substring(1) //cid=5&name=jack
            // 先按&拆分
            var arr = url.split('&') //['cid=5','name=jack']
            // 遍历进行第二次拆分
            for (var i = 0; i < arr.length; i++) {
                var temp = arr[i].split('=') //['cid',5]
                obj[temp[0]] = temp[1] // obj['cid'] = 5
            }
            return obj
        }
实现 href 跳转：运用url编码实现
//在当前页面把页面存储起来
location.href='./login.html?redirectUrl='+escape(location.href)
// 在登陆页面进行判断页面跳转
var re = $.getParameter(location.search).redirectUrl
                    if(re){
                        location.href = unescape(re)
                    }else{
                        location.href = '/index.html'
                    }

7.登陆操作（json web token）

1.如果需要是做session 前端不需任何操作！

1. 如果使用是jwt
   *含义：json web token 把凭据通过json的格式在网上传输
   *数据需要手动添加！！！
   eg:1.先拿到后台传回来的数据
   2.登陆前获取数据进行判断

   3.如果当前页面用户已经登陆过，那么把存进的数据转换为对象，，拿到token值                    
   

4.将数据存在请求头，一起发送给后台

8.Web移动端购物车总价实现

• 效果图

• 逻辑上不能直接使用请求回来的数据，需要自定义属性。将数据存放在标签中再使用
  eg:

  
  data-order 为自定义属性

• 如何取数据呢？
  function calcTotalPrice(){
  var total = 0
  // 1.获取所有商品列表
  var allOrders = $(’.order-singer’)
  allOrders.each(function(index,value){
  console.log(value)
  // 计算价格进行累加：数量 * 价格
  // 获取价格
  var price = $(value).data(‘order’).goods_price
  // 获取数量：用户可以随时修改数量，所以不能从自定义属性中进行数据的获取
  var num = $(value).find(’#test’).val() //#test 为加减器的 id
  // 计算总价
  total += price * num
  })
  // 赋值到显示总价的 .price 元素上
  $(’.price’).text(‘￥’ + total)
  }
  }

        // 单击修改数量重新计算价格
      $('.order_list').on('tap','.pyg_userNum .mui-btn',function(){
          calcTotalPrice()
      })
  

  9.Web移动端同步购物车
  /**
  * 同步购物车接口 后台需要的数据是以键值对的形式返回
  * @param {Array} $lis 需要同步的li标签的数组
  * $lis是传回来的参数，即标签的类\ast /functionasyncCart($lis) {
  // 需要同步的参数
  var infos = {};
  // 获取li标签身上data-obj
  for (var i = 0; i < $lis.length; i++) {
  var li = $lis[i];
  // 获取li标签身上商品对象
  var goodsObj = $(li).data(“obj”);

         // 修改购买的数量
         goodsObj.amount = $(li).find(".amount_new").val();
         //  给infos赋值
         infos[goodsObj.goods_id] = goodsObj;
       }
         
       // 发送请求
       $.post("my/cart/sync", {
         infos: JSON.stringify(infos)
       }, function (result) {
         if (result.meta.status == 200) {
           // 成功
           mui.toast("同步成功");
           // 刷新数据 不是指刷新页面 而时重新发送请求获取新的数据 重新渲染
           getCartAll();     //查询购物车数据的函数
         } else {
           // 同步失败
           console.log("同步失败");
         }
  
       })
     }
  

  10.Web移动端购物车实现注册

4.代码段优化段

1.模板变量的优化

通过提取共同的url变量，达到修改。

列如：原来的元素路径：src="http://api.pyg.ak48.xyz/{{subValue.cat_icon}}

修改后的元素路径：src=" {{ $imports.baseurl}}{{subValue.cat_icon}}

*提取公共的url变量

var baseurl = “http://api.pyg.ak48.xyz/”;

*导入模板引擎里面

 if (window.template) {

    template.defaults.imports.baseurl = baseurl;

  }

2.提取公共函数

1.zepto 拓展把一些公共的方法都挂在到 zepto对象身上

2.在使用里面的函数时需要给调用的函数前添加 $

$.get(url,data,success,dataType)
$.post(url,data,success,dataType)
$.ajax({
        type:请求方式
        url:请求url
        data:参数
        timeout:设置超时
        dataType:返回值的类型
        beforeSend:请求发送之前的回调
        success:响应成功后的回调
        error:请求失败时的回调
        complete:无论请求是否成功都会执行的回调
    })

5.组件需要注意的点

1.Hellow Mui 的多联动选择器

• 效果图

  //使用三联动进行(地址)选择 html准备

  选择位置

  //使用三联动进行(地址)选择
  //注册点击事件
  $(".select_address").on(“tap”, function () {
  //创建对象
  var cityPicker3 = new mui.PopPicker({
  //设置联动次数
  layer: 3
  });
  //给联动对象添加数据，添加的数据必须是数据
  cityPicker3.setData(data)
  //显示控件，参数是一个回调函数，函数里有一个 item 参数
  cityPicker3.show(function (items) {
  //将选择器拿到的数据传给地址栏
  $(".addr_name2").text( (items[0] || {}).text + “” + (items[1] || {}).text + “” + (items[2] || {}).text)
  })