Javascript实践总结

在此记录Javascript学习或工作过程中遇到的问题，或是一些值得分享的小知识，第一次更新是2018.7.x，会持续更新。。。🌹

1.懒加载

• 核心思想：只加载可视部分元素

• 实现方式：计算滚动条与页面底部的距离

---

2.prop与attr的区别(JQuery)

• 对于HTML元素天生的固有属性，在处理时，使用prop方法

• 对于HTML元素自定义的DOM属性，在处理时，使用attr方法

---

3.Zepto与JQuery

• Zepto是为移动端开发的库，是JQuery的轻量级替代品。

---

4.点击按钮自动刷新页面问题

• 问题描述：点击<button>标签，页面进行了刷新

• 发生原因：在W3C浏览器，如Firefox下，<button>标签按钮会提交表单

• 解决方案：<input type="button"/>不会对表单进行任何操作

5.Android与Javascript交互

• Android调用JavaScript

JavaScript写好一个function让Android调用即可

示例代码：

//sTime,eTime分别为原生传来的起始时间与截止时间
function selectDate(sTime,eTime) {
    startTime=sTime;
    endTime=eTime;
    Index_Ajax();
}

• JavaScript调用Android

1.Android配置完毕后，JavaScript可直接通过对象.方法名进行调用

2.或通过请求约定的url，进而让Android捕获，间接调用

示例代码：

// 由于对象映射，所以调用test对象等于调用Android映射的对象
function callAndroid(){
    test.hello("js调用了android中的hello方法");
}

// 约定的url协议为：js://webview?arg1=1&arg2=2
function callAndroid(){
    document.location = "js://webview?arg1=1&arg2=2";
}

6.获取URL参数转存为数组

function GetRequest() {
    var url = location.search; //获取url中"?"符后的字串
    url=decodeURI(url); //对uri进行解码
    var request = new Object();
    if(url.indexOf("?")!=-1){
        var str = url.substr(1); //将问号截去
        var strs = str.split("&");//以&作为分隔符,拆分为数组,例:["name=mike","age=1"]
        for(var i = 0;i<strs.length;i++){
            var temp_arr = strs[i].split("=");//以=作为分隔符,拆分为数组,例:["name","mike"]
            request[temp[0]]=temp[1];//生成新数组 例:request["name"]="mike"
        }
    }
    return request;
}

---

7.将时间转化为yyyy-MM-dd格式

var date = new Date("2008-8-8");
console.log(timetrans(date)) //2008-08-08

function timetrans(date){
    var Y = date.getFullYear() + '-';
    var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
    var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
    return Y+M+D;
}

---

8.radio、checkbox、select 事件监听与取值方法(jquery)

//radio 初始化/监听事件/取值
$('input:radio[name=""][value=""]').prop('checked', true);

$('input:radio[name=""]').on('click',function () {
    console.log($(this).val())
});
var value = $('input:radio[name=""]:checked').val();


//checkbox监听事件与取值
$('input:checkbox[name=""]').on('click',function () {
    console.log($(this).prop("checked"))
});

//select监听事件与取值
$('select').on('change',function(){
    alert($(this).children('option:selected').val());
})

9.文字多余部分省略号显示

• 常规写法

width:150px;/*要显示文字的宽度*/
overflow:hidden; /*超出的部分隐藏起来。*/
white-space:nowrap;/*不显示的地方用省略号...代替*/
text-overflow:ellipsis;/* 支持 IE */

• 改版：第n行多余部分显示省略号

width:150px;
overflow:hidden;
text-overflow: ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;   //第n行
-webkit-box-orient:vertical;

10.css3绝对居中

• 前提:父元素position:relative，有宽高

.son{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

11.bfcache 清除往返缓存

• 最佳方案(用定时器的形式请求数据)

setTimeout(()=>{
   this.getHomeData();
},100);

12.黑色遮罩

• z轴由上到下排列顺序：弹窗>遮罩>内容

position:fixed;
left:0;
right:0;
top:0;
bottom:0;
background: rgba(0,0,0,0.6);
z-index: 1;

13.移动端分页

var current_page = 1; //当前页面
var page_size = 20; //每页的数据量
var noMoreData = false; //有无更多数据
var canLoad = false; //可否加载

$(function () {
    loadData(); //首次加载数据
    initListener(); //监听滚动加载
});

function loadData() {
    var params = {
        page:current_page,
        page_size:page_size,
    };
    $.ajax({
        type: "POST",
        url: BASE_URL
        data: params,
        dataType: "json",
        success:function(result){
            if (result.return_code == 1) {
                var html='';
                for(var i=0;i<result.return_data.length;i++){
                    html+=''
                }
                $("#container").append(html);
                noMoreData = result.return_data.length < page_size;
                if(noMoreData==true){
                    canLoad = false;
                    var over_html='<p>已全部加载</p>';
                    $("#container").append(over_html);
                }else {
                    current_page++;
                    canLoad = true;
                }
            }else if(result.return_code == 0){
                noMoreData = true;
            }
        }
    })
}

function initListener() {
    var winH = $(window).height();
    $(window).scroll(function () {
        var pageH = $(document.body).height();
        var scrollT = $(window).scrollTop();
        var scale = (pageH-winH-scrollT)/winH;
        if (scale < 0.02 && canLoad == true) {
            if (noMoreData == false) {
                canLoad=false;
                loadData();
            }
        }
    });
}

14.点击除指定元素外的区域

$(document).on('click',':not(.className)',function () {
    alert(1)
});
$('.className').on('click',function (e) {
    e.stopPropagation()
});

15.CSS3动画

@keyframes mymove
{
    0%   {top:0px; left:0px; background:red;}
    25%  {top:0px; left:100px; background:blue;}
    50%  {top:100px; left:100px; background:yellow;}
    75%  {top:100px; left:0px; background:green;}
    100% {top:0px; left:0px; background:red;}
}

div{
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}

16.零碎的发现

• 字符串转数字 parseInt(String s) parseFloat(String s)【实现跑马灯效果时发现，监听的偏移量为浮点型，却用整型捕捉，导致bug】

• font-size:10px 不代表这个文本高度为10px，实际高度大于10px，可通过设置line-height达到预期效果【定位文字初始位置时发现】

• bfcache为H5新特性，代表往返缓存 【微信页面中后退，发现页面并没有更新，使用定时器思路解决】

• 直接读取缓存数据：history.go(0) ； 重连服务器以读得新的页面：location.reload() 【对页面刷新方法对疑问】

• 苹果手机click事件无效 解决方案：touchstart(坏处：会穿透) 或 cursor:pointer(简直完美) 【实现微信软键盘隐藏过程中发现】

• 当过渡效果的属性有多个时，使用transition:all 【为首页增添多种动态效果时发现】

• 为避免重复加载，可在ajax中通过beforeSend与complete事件，来添加/关闭遮罩。【点击按钮出现多次请求的bug】

---