js 2017

设置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:;

  -webkit-box-orient: vertical;

}

图片占位图
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()

        }

      }

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

xx.click(function(){

        getData();

    })

    // 默认  isLoading = false

    getData(){

        if(isLoading) return

        isLoading= true  // 当多次点击时， isLoading为true，会直接返回

        api.onsuccess(){

        isLoading= false  // 拿到数据后，就可以再次调用

        }

    }

滚动监听加载数据

// 滚动监听  window.onscroll=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()了

        }

    }

网络状态监听

  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>

巴特西

js 2017 - 2

最新文章

热门文章