js 2017 - 2

设置360为极速模式   <meta name='renderer' content='webkit'>

 css3超出隐藏

.ellipsis {  // 超出一行
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ellipsis2 {   // 超出两行
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

View Code

图片 占位图
http://placekitten.com/375/280

ajax 兼容ie9 

$.support.cors = true;  // 这一行好像不需要
ajax(
crossDomain: true == !(document.all),  // ie9 兼容
)

 动态添加script ，并判断只加载一次

let _this = this
      if (window.BMapLib) {   // 判断动态加载的js 里面某个方法是否存在
        _this.getMap()
        return
      }
      let count = 0
      function startLoad () {
        _this.addScript('api.bai.xxx.js', function () {
          _this.getMap()
        }, function () {
          count++
          if (count < 4) startLoad()  // 回调，加载失败再加载
        })
      }
      startLoad()
      
      
      addScript (src, success, error) {
        let script = document.createElement('script')
        script.src = src
        document.body.appendChild(script)
        script.onload = function () {  //成功
          success()
        }
        script.onerror = function () { //失败
          error()
        }
      }

View Code

 接口数据锁 isLoading 防止多次点击调用多次接口

xx.click(function(){
        getData();
    })
    
    // 默认  isLoading = false 
    getData(){
        if(isLoading) return
        isLoading= true  // 当多次点击时， isLoading为true，会直接返回 
        api.onsuccess(){
        isLoading= false  // 拿到数据后，就可以再次调用
        }
    }

滚动监听加载数据

// 滚动监听  window.οnscrοll=function(){}    window.addEventListener('scroll',scrollEvent,false)

    function scrollEvent(){
        // 如果已加载数据就不用监听了 if(self.$data.hasData) return
        // 如果正在加载数据，并滚动到相应位置就调接口 getShop()
        if(!self.$data.isLoading && document.body.scrollTop > 400){
            self.getShop()
        }
    }
    
    getShop(){
        if(self.$data.isLoading) return // 滚动监听会拼命调接口
        self.$data.isLoading = true // 调到接口设置为true
        api.onsuccess(){
            self.$data.hasData = true // 有数据了
            self.$data.isLoading = false  // 调到数据后，就可以再次调用 getShop()了
        }
    }

View Code

 网络状态监听

  let _this = this
      // 网络状态监听
      window.addEventListener('offline', function (e) {
        _this.online = false
      })
      window.addEventListener('online', function (e) {
        _this.online = true
      })

 swiper 回调函数、方法 demo

var myswiper = new Swiper('.swiper-demo', {
  onSlideChangeEnd: function () {  // 回调函数
    var index = myswiper.activeIndex
  }
});
  myswiper.slideTo(index, 300, false)  // 方法

 jq 请求头

  beforeSend: function (xhr) {
        xhr.setRequestHeader("X-Custom-Header1", "Bar");
    },

 chrome调试

chrome调试， 可以在控制台修改已经断点过的变量，可以实时更新

var a = 1;
var b = 2;
var d = a+b;
console.log(d);

ctrl+shift+p  搜索console 选Drawer，打开console
在b打断点后，可在控制台window.a=1000; 按f10继续断点后，a的值会被改为1000，最终d的值为1002
F8在跳到下一个断点  F10一行一行断点  F11跳进函数断点

 替换两个值

<script>
  // 替换两个值 1
  var a =12,b=2;
  a+=b;  //   a= a+b   a是两个数的和
  b=a-b;  //   b= 和-b = a
  a-=b;  //   a=a-b
  console.log(a);
  console.log(b);
  // 替换两个值  2
  let c = 100;
  let d = 30;
  [c,d]=[d,c]
  console.log(c);
  console.log(d);
</script>

 

转载于:https://www.cnblogs.com/gyz418/p/7551678.html