前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端常用方法

前端常用方法

原创
作者头像
愤怒的小鸟
修改2021-12-28 11:59:56
3240
修改2021-12-28 11:59:56
举报
文章被收录于专栏:web shareweb share

1. vue 限制只能输入名称32位中文,手机号11位数字,验证码6位数字

代码语言:javascript
复制
 watch: {
    'bindForm.name'(val) {
      let pattern = /[^\u4e00-\u9fa5]+/
      this.bindForm.name = val.replace(pattern, '')
      if (val.length > 32) {
        this.bindForm.name = val.substring(0, 32)
      }
      this.checkIsComplete()
    },
    'bindForm.phone'(val) {
      if (val.length > 11) {
        this.bindForm.phone = val.substring(0, 11)
      }
      this.checkIsComplete()
    },
    'bindForm.code'(val) {
      if (val.length > 6) {
        this.bindForm.code = val.substring(0, 6)
      }
      this.checkIsComplete()
    },
  }

2. 获取地址栏参数

代码语言:javascript
复制
function getQueryString(name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
    var reg_rewrite = new RegExp('(^|/)' + name + '/([^/]*)(/|$)', 'i')
    var r = window.location.search.substr(1).match(reg)
    var q = window.location.pathname.substr(1).match(reg_rewrite)
    if (r != null) {
       return unescape(r[2])
    } else if (q != null) {
       return unescape(q[2])
    } else {
       return null
    }
 }

3. 查看对象的原型

代码语言:javascript
复制
var obj1 = {};
console.log( Object.getPrototypeOf( obj1 ) === Object.prototype ); // 输出:true

4. this指向

代码语言:javascript
复制
var obj = {
  myName: 'sven',
  getName: function(){ 
      return this.myName;
  } 
};

console.log( obj.getName() ); // 'sven'
var getName2 = obj.getName; 
console.log( getName2() );   // undefined

构造函数显式地返回一个对象

代码语言:javascript
复制
var MyClass = function(){
  this.name = 'sven';
  return { // 显式地返回一个对象
    name: 'anne'
  }
}

var obj = new MyClass();
alert ( obj.name ); // 输出:anne

函数内部函数func内的this指向window

代码语言:javascript
复制
document.getElementById('div1').onclick = function(){
  alert(this.id);  // this指向div,输出:div1
  var func = function(){
    alert(this.id);   // this指向window,输出:undefined
  }
  func();
}

应用于数组运算

代码语言:javascript
复制
Math.max.apply( null, [ 1, 2, 5, 3, 4 ] ) // 输出:5

5. 闭包应用

代码语言:javascript
复制
var Type = {};
for(var i = 0, type; type = ['String', 'Array', 'Number'][i++];){
  (function(type){
    Type['is' + type] = function(obj){
      return Object.prototype.toString.call(obj) === '[object ' + type + ']';
    }
  })(type);
}

Type.isArray([]);
Type.isString('str');

6. 我们常常让类数组对象去借用 Array.prototype 的方法

代码语言:javascript
复制
(function(){
  Array.protorype.push.call(argument, 4);  // argments借用Array.protorype.push方法
  console.log(argments);  // 输出:[1, 2, 3, 4]
})(1, 2, 3)

7. 函数节流

使用场景:

  • 当浏览器窗口大小被拖动 而改变的时候,window.onresize 事件频繁地触发
  • 当 div 节点被拖动的时候, mousemove 事件频繁地触发
  • 上传文件时,会对文件进行扫描并随时通知 JavaScript 函数,以便在页面中显示当前的进度
代码语言:javascript
复制
var throttle = function(fn, interval){
  var _self = fn,  // 保存需要被延迟执行的函数引用
      timer,       // 定时器
      firstTime = true;   // 是否是第一次调用
           
  return function() {
    var args = arguments,
        _me = this;
        
    if(firstTime) {
       _self.apply(_me, args);
       return firstTime = false;
    }
    
    if(timer) {   // 如果定时器还在,说明前一次延迟执行还没有完成
      return false;
    }
    
    timer = setTimeout(function() {
      clearTimeout(timer);
      timer = null;
      _self.apply(_me, args);
    }, interval || 500);
  }
}


// 使用
window.onresize = throttle(function() {
  console.log(1);
}, 500)

8. 扁平化数组-将一个多维数组拍平为一个一维数组

代码语言:javascript
复制
function flatten(){
    var ret=[];
    return function flat(a){
        for(var item of a){
            if(item.constructor===Array){
                ret.concat(flat(item))
            }else{
                ret.push(item)
            }
        }
        return ret
    }
}

arr.toString().split(",").map(Number)

// ES6
arr.flat(dep)

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
作者已关闭评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. vue 限制只能输入名称32位中文,手机号11位数字,验证码6位数字
  • 2. 获取地址栏参数
  • 3. 查看对象的原型
  • 4. this指向
  • 5. 闭包应用
  • 6. 我们常常让类数组对象去借用 Array.prototype 的方法
  • 7. 函数节流
    • 使用场景:
    • 8. 扁平化数组-将一个多维数组拍平为一个一维数组
    相关产品与服务
    验证码
    腾讯云新一代行为验证码(Captcha),基于十道安全栅栏, 为网页、App、小程序开发者打造立体、全面的人机验证。最大程度保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下业务安全的同时,提供更精细化的用户体验。
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档