前端经常使用代码片断(二)

时间  2019-11-06
标签 前端 经常 使用 代码 片断 繁體版
原文   原文链接
最后更新于2019年1月13日

前端经常使用代码片断(一) 点这里
前端经常使用代码片断(二) 点这里
前端经常使用代码片断(三) 点这里
前端经常使用代码片断(四) 点这里
前端经常使用代码片断(五) 点这里
前端经常使用代码片断(六) 点这里javascript

1.数组去重

方法1: （ES5）css

function unique(a) {
  var res = [];

  for (var i = 0, len = a.length; i < len; i++) {
    var item = a[i];

    (res.indexOf(item) === -1) && res.push(item);
  }

  return res;
}

var a = [1, 1, '1', '2', 1];
var ans = unique(a);
console.log(ans); // => [1, "1", "2"]

或html

function unique(a) {

  var res = a.filter(function(item, index, array) {
    return array.indexOf(item) === index;
  });
  
  return res;
}


var a = [1, 1, '1', '2', 1];
var ans = unique(a);
console.log(ans); // => [1, "1", "2"]

方法2: （ES6）前端

Set 以及 Array.from 方法：java

function unique(a) {
  return Array.from(new Set(a));
}

var a = [{name: "hanzichi"}, {age: 30}, new String(1), new Number(1)];
var ans = unique(a);
console.log(ans); // => [Object, Object, String, Number]

2.数组不是原始数据类型

typeof {} === 'object'  // true
typeof 'a' === 'string' // true
typeof 1 === number     // true
// But....
typeof [] === 'object'  // true

若是你想知道你的变量是否是数组，你仍然能够用Array.isArray(myVar)jquery

原始数据 （原始值、原始数据类型）不是一种 object 类型而且没有本身的方法的。在 JavaScript 中，有六种原始数据类型：string，number，boolean，null，undefined，symbol (new in ECMAScript 2015)。web

3.两个数组内的元素相加

var a = [1,2,3,4,3];
var b = [4,5,6,7];
var c = a.map(function(v, i){
    return v + (b[i] || 0);
});
console.log(c);

第二种考虑兼容
var a=[1,2,3,4,5];
var b=[6,7,8,9];
var c=[];
for (var i=0;i<a.length;i++){
  c[i]=a[i]+(b[i]||0);
}
console.log(c);//[7, 9, 11, 13, 5]

4.一个数组插入到另外一个数组

经过Array.prototype.push.apply方法将一个数组插入到另一个数组ajax

var a = [1,2,3];
var b = [4,5,6];
Array.prototype.push.apply(a, b);
console.log(a); //  [1, 2, 3, 4, 5, 6]

5.数字排序

Javascript 的sort()函数在默认状况下使用字母数字（字符串Unicode码点）排序。正则表达式

因此json

[1,2,5,10].sort()

//会输出 

[1, 10, 2, 5]

要正确的排序一个数组, 你能够用

[1,2,5,10].sort((a, b) => a — b)

//会输出 从小到大排序

[1, 2, 5, 10]

从大到小排序即

[1,2,5,10].sort((a, b) => b-a)

6.replace替换字符串

let s = "bob"
const replaced = s.replace('b', 'l')
replaced === "lob"
s === "bob"

我以为这是一件好事，由于我不喜欢函数改变它们的输入。 你还应该知道 replace 只会替换第一个匹配的字符串:

若是你想替换全部匹配的字符串，你可使用带/g标志的正则表达式 :

"bob".replace(/b/g, 'l') === 'lol' // 替换全部匹配的字符串

7. 比较的时候要注意

// These are ok
'abc' === 'abc' // true
1 === 1         // true
// These are not
[1,2,3] === [1,2,3] // false
{a: 1} === {a: 1}   // false
{} === {}           // false

缘由：[1,2,3]和[1,2,3]是两个独立的数组。它们只是刚好包含相同的值。它们具备不一样的引用，没法用===相比较。

8. 闭包

const Greeters = []
for (var i = 0 ; i < 10 ; i++) {
  Greeters.push(function () { return console.log(i) })
}
Greeters[0]() // 10
Greeters[1]() // 10
Greeters[2]() // 10

你是否是认为它会输出 0, 1, 2… ？ 你知道它为何不是这样输出的吗? 你会怎样修改让它输出 0, 1, 2… ？

这里有两种可能的解决方法：

  • 用 let 替代 var. Boom. 解决了.
let和var的不一样在于做用域。var的做用域是最近的函数块，let的做用域是最近的封闭块，封闭块能够小于函数块（若是不在任何块中，则let和var都是全局的）。（来源）
  • 替代方法: 用 bind:
Greeters.push(console.log.bind(null, i))

9.当点击 复制 按钮的时候, 将选中的文字复制到粘贴板上

clipboard.png

<input type="text" id="copytest"/>
<input type="button" value="复制" onclick="clickBtn()"/>

function clickBtn(){
    // 获取 input 元素
    var input = document.querySelector('#copytest');
    //或 var input = document.getElementById('copytest');
    input.focus();
    input.select();
   
    // 执行复制命令
    document.execCommand('Copy')
 }

核心代码 document.execCommand() 方法, 该方法的大概用途是 对选中区域 进行一些操做

10.JS获取textarea中剩余字数

html部分：

<textarea id="text_txt1"></textarea>
<span id ="num_txt1">剩余可输入600字</span>

js部分：

function changeLength(obj,num){
    obj.on('keyup',function(){
    var txtval = obj.val().length;
    //console.log(txtval);
    var str = parseInt(600-txtval);
    //console.log(str);
    if(str > 0 ){
        num.html('剩余可输入'+str+'字');
    }else {
        num.html('剩余可输入0字');
        obj.val(obj.val().substring(0, 600));
    }
        //console.log($('#num_txt').html(str));
    });
}
$(function(){ //我这里有四个，因此调用4次
    changeLength($('#text_txt1'),$('#num_txt1'));
    changeLength($('#text_txt2'),$('#num_txt2'));
    changeLength($('#text_txt3'),$('#num_txt3'));
    changeLength($('#text_txt4'),$('#num_txt4'));
});

11.js中的点击事件

//html
<button id="btn">click</button>
var btn=document.getElementById('btn');
//js 第一种：
btn.onclick=function(){
    alert('hello world');
}

//消除事件
btn.onclick=null;//就不会弹出框了
//js 第二种：
btn.addEventListener('click',function(){
    alert('hello world')
},false);
btn.addEventListener('click',function(){
    alert(this.id)
},false);
//js 第三种：
function demo(){
　　alert('hello');
}
<button id="btn" onclick="demo()">click</button>
js触发按钮点击事件
模拟JS触发按钮点击功能 
<html> 
  <head> 
    <title>usually function</title> 
  </head> 
  <script> 
function load(){ 
  //下面两种方法效果是同样的 
  document.getElementById("target").onclick(); 
  document.getElementById("target").click(); 
} 
function test(){ 
  alert("test"); 
} 
</script> 
  <body onload="load()"> 
    <button id="target" onclick="test()">test</button> 
  </body> 
<html>
//备注：
//btnObj.click()是真正地用程序去点击按钮，触发了按钮的onclick()事件
//btnObj.onclick()只是简单地调用了btnObj的onclick所指向的方法，
//只是调用方法而已，并未触发事件

12.清除浮动clearfix一种写法(stylus)

.clearfix
  display :inline-block
  &:after
    display :block
    content:"."
    height:0
    line-height: 0
    clear :both
    visibility :hidden

13.星星评分计算

不少商品评价中都会涉及评分，再根据评分计算星星个数

clipboard.png

现介绍一种方法：

每一个都是单个星星，分为clipboard.pngclipboard.pngclipboard.png三种.png图

const LENGTH = 5;//星星个数
  const CLS_ON = 'on';//所有选中星星的classNmae
  const CLS_HALF = 'half';//半个选中的classNmae
  const CLS_OFF = 'off';//未选中的classNmae

  let result = [];
  let score = Math.floor(this.score * 2) / 2; 
 //计算评分，如4.7会计算成4.5分，4.3会计算成4分
  let hasDecimal = score % 1 !== 0; //计算是否存在半颗星
  let integer = Math.floor(score); //计算有几个彻底选中的星星
  for (let i = 0; i < integer; i++) {
    result.push(CLS_ON);//数组中添加所有选中星星的classNmae
  };
  if (hasDecimal) {
    result.push(CLS_HALF);//数组中添加半颗星星的classNmae
  };
  while (result.length < LENGTH) {
    result.push(CLS_OFF);//数组中补充未点亮星星的classNmae
  };
  return result;//返回数组

14.关闭页面弹框提示

相似下图效果
clipboard.png

window.onbeforeunload=function (){
   var warning = "请确认保存后再退出哦!";
   return warning;
}
//注：如今不能弹出自定义的信息，暂时不知道缘由，
//后续会追踪这个问题（若是你知道能够留下评论）
//关闭页面时的一些清楚缓存，ajax退出登陆等操做能够写在函数里

15.封装jsonp

import originJSONP from 'jsonp'

// 封装的 jsonp 函数
export default function jsonp(url, data, options) {
  url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
  
  return new Promise((resolve, reject) => {
    originJSONP(url, options, (err, data) => {
      if(!err) {
        resolve(data)
      } else {
        reject(err)
      }
    })
  })
}

// url 拼接函数
function param(data) {
  let url = ''
  for(let k in data) {
    let value = data[k] !== undefined ? data[k] : ''
    url += `&${k}=${encodeURIComponent(value)}`
  }
  return url ? url.substring(1) : ''
}

16.firefox 加入toolTip提示信息后 页面抖动

在firefox中 默认页面不超过一页是没有滚动条的 加入页面中某些元素会临时改变页面高度 好比用了toolTip 之类的提示小工具 就会出现滚动条时有时无 致使页面抖动

clipboard.png

解决方法: 添加css代码

body{
  overflow: -moz-scrollbars-vertical;
}

17.判断游览器内核，自动添加前缀实现css属性兼容

let elementStyle = document.createElement('div').style
// 主流浏览器内核

let vendor = (() => {
  let transfromNames = {
    webkit: 'webkitTransform',
    Moz: 'MozTransform',
    ms: 'msTransform',
    O: 'OTransform',
    standard: 'transform'
  }

  for (let key in transfromNames) {
    if (elementStyle[transfromNames[key]] !== undefined) {
      return key
    }
  }

  return false
})()

// 添加样式的浏览器前缀
export function prefixStyle(style) {
  if (vendor === false) {
    return false
  }

  if (vendor === 'standard') {
    return style
  }

  return vendor + style.charAt(0).toUpperCase() + style.substr(1)
}

18.添加className

// 为元素添加类名
export function addClass(el, className) {
  // 先判断一下元素是否含有须要添加的类名，有则直接 return
  if (hasClass(el, className)) {
    return
  }
  // 把该元素含有的类名以空格分割
  let newClass = el.className.split(' ')
  // 把须要的类名 push 进来
  newClass.push(className)
  // 最后以空格拼接
  el.className = newClass.join(' ')
}

// 判断是否有要查看的 className，有则返回true，不然返回 false
export function hasClass(el, className) {
  let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')

  return reg.test(el.className)
}

19.获取或设置data- 属性

export function getData(el, name, val) {
  const prefix = 'data-'
  name = prefix + name
  if (val) {
    return el.setAttribute(name, val)
  } else {
    console.log('el.getAttribute(name)', el.getAttribute(name))
    return el.getAttribute(name)
  }
}

20.基于jq的datatables(兼容ie8)基本配置

描述：采用基于jq的datatables(兼容ie8)
主要功能：基本配置，服务端分页，清楚缓存，刷新等 

/************************表格刷新*****************************/
            $("#searchFormBtn").click(function () {
                tablebyGroup.ajax.reload();
            });

    function queryUserByGroup() {
            tablebyGroup = $('#workArr').DataTable({
                destroy: true,
                serverSide: true,  //启用服务器端分页
                searching: false,  //禁用原生搜索
                orderMulti: false,  //启用多列排序
                order: [],  //取消默认排序查询,不然复选框一列会出现小箭头
                renderer: "bootstrap",  //渲染样式：Bootstrap和jquery-ui
                pagingType: "simple_numbers",  //分页样式：simple,simple_numbers,full,full_numbers

                iDisplayLength:100,
                ajax: function (data, callback, settings) {
                    var selected = $('#selectWorkArr').val();
                    var param = {
                        depId: parseInt(selected),
                        docId: JSON.parse($.cookie('userinfo')).docId
                    };
                    //ajax请求数据
                    $.ajax({
                        type: "post",
                        url: serverIp + "rest/doctor/selectWorkGroup?" + Math.random() + "&" + maiyaBuildParam(param),
                        cache: false,  //禁用缓存
//                        data: JSON.stringify(param),  //传入组装的参数
//                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (result) {
                            var returnData = {};
                            returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                            returnData.recordsTotal = result.data.length;//返回数据所有记录
                            returnData.recordsFiltered = result.data.length;//后台不实现过滤功能，每次查询均视做所有结果
                            returnData.data = result.data;//返回的数据列表
                            //调用DataTables提供的callback方法，表明数据已封装完成并传回DataTables进行渲染
                            //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
                            callback(returnData);
                        },
                        error: function(msg) {
                            alert(msg.message || '查询失败')
                        }
                    });
                },
                bFilter: false,//去掉搜索框方法
                bLengthChange: false, //去掉每页显示多少条数据方法
                "ordering": false,//禁止排序
                "columns": [
                    {"data": "pName"},
                    {"data": "pSex"},
                    {"data": "strBirthDate"},
                    {"data": "pCardNum"},
                    {"data": "pPhone"},
                    {"data": "cName"},
                    {"data": "pActivited"}
                ],
                paging: false,
                "columnDefs": [{
                    "render": function(data, type, row, meta) {
                        //渲染 把数据源中的标题和url组成超连接
                        return '<a href="javascript:showStatistics(' + row.pId  +','+ row.pActivited + ');" style="color:blue;text-decoration: underline">'+data+'</a>';
                    },
                    //指定是第1列
                    "targets": 0
                },{
                    "render": function(data, type, row, meta) {
                        return data == 1 && '男' || '女';
                    },
                    //指定是第1列
                    "targets": 1
                },{
                    "render": function(data, type, row, meta) {
                        return data == 1 && '已注册' || '未注册';
                    },
                    //指定是第1列
                    "targets": 6
                }]
            });
        }
引用：

谁说Javascript简单的？ – Hacker Noon

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程