开发中遇见的问题汇总

6小时玩转Jquery

1. 盒子模型宽度
公式：
= width > min-width ? width : min-width；
= width >max-width ? max-width : width；

注意：1.如果不设置，盒子的默认宽度就是父容器的宽度。2.中文会自动换行排列，字母不会。3.如果只设置max-with 网页宽度发生变化时中文会自动缩进排列，字母不会。

2.块级行内元素浮动
inline-block
1.如果块级行内元素浮动，比如 flot=left,谁先浮动谁先往最左排，他们的排列顺序 还是 要一行一行的排。
2.后面的那个元素如果没浮动，下面的元素排列 以后面那元素高度为准。没浮动的和下面那个相当于是一个整体

3.input和button
1.input和button 都是inline-block元素。
2.input去游览器默认边框 outline: 0; 或者border:0
3.input该怎样显示不规则时 试试这个属性box-sizing: border-box;
4.表单中的button： (Internet Explorer 的默认类型是 “button”，而其他浏览器中（包括 W3C 规范）的默认值是 “submit”)。如果不静止button的默认事件（e.preventDefault()），button点击后会触发form中的action规定的路径，而不是执行我们理想的方法。表单中执行button的代码：

//$form_add_task是form对象
   $form_add_task.on("submit",function (e) {
        e.preventDefault();
        new_task.content= $(this).find("input[name=content]").val();
        console.log("abc",new_task);
    })

4.jquery 不会主动去监听页面变化，他只会监听第一次静态页面的，当页面刷新 或者删除之后。需要手动去再一次监听。比如在很多个列表的item绑定了 button事件，但是当刷新或者删除 第二次点击就没效果了

持续更新。。。。。。

3.$.Deferred();

    "use strict";

    function pop() {
       //0.创建
        var dfd=  $.Deferred();
        var isclick;
        var timer;
      $(".sure").on("click",function () {
          isclick=true;
      });
      $(".det").on("click",function () {
         isclick=false;
    });
    //1.循环监听，
    timer = setInterval(function () {
        if (isclick !== undefined) {
           //2.点击了记录结果，存入dfd中
            dfd.resolve(isclick);
            clearInterval(timer);
            $(".one").hide();
        }
    }, 50);
    //3.把结果回掉出去
    return dfd.promise();
    }

    //调用
    pop().then(function (reslut) {
        console.log(reslut);
    if (reslut){

    }
    })

注意：1.deferred 相当于是异步的回调。比如 程序弹出个alert，alert后面的覆盖了的界面代码是不会执行的。使用deffered 后面的照常执行。 2. 好处，不用把逻辑嵌套的太深，直接在外面通过then 方法的参数判断就行了。

响应式开发一招制胜

1. ul li问题

ul{
    text-align: right;

}
ul li{
    display: inline-block;
}

当设置这些属性的时候 li 会排成一行，（和浮动差不多）。 但是一行的每个li中间会有一小段空格（行内元素排列都有这个问题），那是因为li 标签默认的换行符 相当于是空白，有如下解决办法：
1. ul 设置font-size：0 li设置font-size:1.2 。但是下面的间距会出现空格。
2. 把li标签的每次结束标签写在下一行
3. 给li 设置margin-left :-3px

2.webstorm快捷
1. shift+回车：光标滑到下一行 ctl+alt+回车：光标滑到上一行
2. ctl+alt+t: 包裹代码
3. + （） ^ > . # [] lorem {} & ：快速创建标签
4. shift+上下： 选择代码块
5. alt: 多次重复选择
6. ctl+shift:移动方法
7. shift+alt：移动单行代码
8. ctl+shift+v:多次粘贴
9. ctl+加号或者减号：折叠代码. ctl+shift+加号或者减号：全部折叠或者展开
10. ctl+m:定位标签的 范围
11. ctrl+G：定位行

Vue.js高仿饿了么外卖App

调节背景资源模糊度：

  backdrop-filter:blur(10px);
  //或者
  filter: blur(10px);

设置文字省略：

  white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

export default
1.在.js中引用js中才是暴露接口。

2.在.vue中相当于是自己的组件。

    //第一种 这种写法只是为了验证 传过来的数据对不对
     props: {
       seller: {
         type: Object
       }
     },
    created() {
      this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
     }
     //第二种
    props: ['seller']
  };

Sticky Footer 绝对底部

这种套路的思路是，给内容区域设置 min-height: 100%，将 footer 推到屏幕下方

然后给 footer 添加 margin-top，其值为 footer 高度的负值，就能让 footer 回到屏幕底部
html

<div class="wrap">
  <div class="content">
    <p>填充内容</p>
  </div>
</div>
<div class="footer">
  <p>这是页脚</p>
</div>

css

html,body {
  height: 100%;
}

body > .wrap {
  min-height: 100%;
}

.content {
  /* padding-bottom 等于 footer 的高度 */
  padding-bottom: 60px;
}

.footer {
  width: 100%;
  height: 60px;
  /* margin-top 为 footer 高度的负值 */
  margin-top: -60px;
}

需要注意的就是内容区域 content 的 padding、footer 的 height 和 margin， 必须保持一致

这种写法的兼容性非常好，实测 IE7 也能正常展示

但是如果页面的主体布局有其他兼容性问题，Sticky Footer 就需要做一些相应的修改

五角星

<template>
  <div class="star" :class="starType">
    <span v-for="(itemClass,index) in itemClasses" :class="itemClass" class="star-item" key="index"></span>
  </div>
</template>

<script type="text/ecmascript-6">
  const LENGTH = 5;
  const CLS_ON = 'on';
  const CLS_HALF = 'half';
  const CLS_OFF = 'off';

  export default {
    props: {
      size: {
        type: Number
      },
      score: {
        type: Number
      }
    },
    computed: {
      starType() {
        return 'star-' + this.size;
      },
      itemClasses() {
        let result = [];
        let score = Math.floor(this.score * 2) / 2;
        let hasDecimal = score % 1 !== 0;
        let integer = Math.floor(score);
        for (let i = 0; i < integer; i++) {
          result.push(CLS_ON);
        }
        if (hasDecimal) {
          result.push(CLS_HALF);
        }
        while (result.length < LENGTH) {
          result.push(CLS_OFF);
        }
        return result;
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"

  .star
    font-size: 0
    .star-item
      display: inline-block
      background-repeat: no-repeat
    &.star-48
      .star-item
        width: 20px
        height: 20px
        margin-right: 22px
        background-size: 20px 20px
        &:last-child
          margin-right: 0
        &.on
          bg-image('star48_on')
        &.half
          bg-image('star48_half')
        &.off
          bg-image('star48_off')
    &.star-36
      .star-item
        width: 15px
        height: 15px
        margin-right: 6px
        background-size: 15px 15px
        &:last-child
          margin-right: 0
        &.on
          bg-image('star36_on')
        &.half
          bg-image('star36_half')
        &.off
          bg-image('star36_off')
    &.star-24
      .star-item
        width: 10px
        height: 10px
        margin-right: 3px
        background-size: 10px 10px
        &:last-child
          margin-right: 0
        &.on
          bg-image('star24_on')
        &.half
          bg-image('star24_half')
        &.off
          bg-image('star24_off')
</style>

//手机的屏幕密度 来选择加载什么图片
bg-image($url)
  background-image: url($url + "@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
    background-image: url($url + "@3x.png")

计算属性
1.当需要监听动态的改变时用计算属性。
2.方法只是调用一次。计算属性时一直监听。

//currentIndex计算属性
:class="{'current':currentIndex===index}"

---

@click=”selectMenu(index,$event)”

    selectMenu(index, event) {
    //游览器默认事件返回，只执行自定义的
        if (!event._constructed) {
          return;
        }
        let foodList = this.$refs.foodList;
        let el = foodList[index];
        this.foodsScroll.scrollToElement(el, 300);
      },

在create() 生命周期方法中获取数据赋值，如果要改变dom节点更新应用this.$nextTick。

vue自身的js引用用import,css引用用@import. export default是自己用的

.js 文件的 export default 才是给别人暴露的接口

fixed 是针对页面 不管他的父元素的是否设置position absolute 和relative 和父元素设置position有关

如果要给prots 和data 里面的 属性 添加 其他的没有的属性 要用Vue.set 方法
父组件 能调用子组件的方法或者计算属性 先找到子组件：this.$refs.food.show();

如果要在新的页面加载网络图片，但是大小不确定可以用：

  .food .image-header{
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 100%
  }
  .food .image-header  img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
  }

计算属性 父子组件都会影响 如果子组件用方法想改变父组件的属性 应该用$emit

音乐webapp

1.ES6现在浏览器都支持的不够, nodejs的v8同样, 即使用use strict, 很多特性也都不支持
babel可以把es6转成传统的javascript, 就是说你写es6, 然后用babel, 就可以正常在浏览器中运行了, es6是发展方向。

 "babel-runtime": "^6.25.0",
 "babel-polyfill": "^6.23.0"

transform-runtime只会对es6的语法进行转换，而不会对新api进行转换。
如果需要转换新api，就要引入babel-polyfill.

2.从点击屏幕上的元素到触发元素的 click 事件，移动浏览器会有大约 300 毫秒的等待时间。为什么这么设计呢？ 因为它想看看你是不是要进行双击（double tap）操作。

//解决禁用300毫秒的问题
 "fastclick": "^1.0.6",

文字水平铺开

.leftName{
vertical-align: top;
line-height: 30px;
height: 30px;
overflow: hidden;
margin: 20px 10px 0 20px;
display: inline-block;
text-align: justify;
width: 50px;
&::after{
content:”;
padding-left:100%;
display: inline-block;
}
}