简单谈谈javascript高级特性


Posted in Javascript onSeptember 04, 2019

js中没有class的概念,我们可以使用function来模拟。

惰性载入函数

例如我们通常使用以下的js代码创建ajax:

function createXHR () {
 var xhr = null;
 try{
  xhr = new XMLHttpRequest(); // FF、Opera、Safari、IE7
 } catch(e) {
  handlerError(e);
  try{
   xhr = new ActiveXObject('Msxml2.XMLHTTP');
  } catch (e) {
   try{
    xhr = ActiveXObject('Microsoft.XMLHTTP'); 
   } catch(e) {
    xhr = null; 
   }
  }
  
 }
 return xhr;
}

function handlerError (err) {
 var errXHR = err;
 // ...
}

在现代的网络技术中ajax技术早已是烂大街了,一个网页通常包含很多的ajax——也就导致了频繁创建xhr从而导致内存泄露。我们可以采用惰性载入函数来动态生成xhr。

/* 惰性函数(第二次生效) */
function createXHR () {
 var xhr = null;
 if (typeof XMLHttpRequest != 'undefined') {
  xhr = new XMLHttpRequest();
  createXHR = function () {
   return new XMLHttpRequest();
  }
 } else {
  try{
   xhr = new ActiveXObject('Msxml2.XMLHTTP');
   createXHR = function () {
    return new ActiveXObject('Msxml2.XMLHTTP');
   }
  } catch (e){
   try{
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
    createXHR = function () {
     return new ActiveXObject('Microsoft.XMLHTTP');
    }
   } catch (e){
    createXHR = function () {
     return null;
    }
   }
  }
 }
 return xhr;
}

我们调用以上的方法创建xhr,在运行第二次的时候就不用每次都判断了,直接返回xhr。

函数柯里化

函数的柯里化(curry)把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术。,简而言之就是两个函数的参数的合并。例如:

function curry(fn) {
 var args = Array.prototype.slice.call(arguments,1);   // 取curry的参数并将其变为数组[100]
 console.log(args);           // [100]
 return function () {
  var innerArgs = Array.prototype.slice.call(arguments); // 匿名函数的参数列表[1,2]
  console.log(innerArgs);         // [1,2]
  var finalArgs = args.concat(innerArgs);     // 合并数组(参数合并)
  console.log(finalArgs);         // [100,1,2]  
  return fn.apply(null, finalArgs);
 }
}

function add(num1,num2,num3) {
 return num1 + num2 + num3;
}

var t = curry(add,100)(1,2);
console.info(t);

简单谈谈javascript高级特性

级联函数

级联就是一个对象将其所有有关的东西连接到了一起。如:以下的对象。

// 人:手、腿、嘴
function classPerson(){
 this.hand = "";
 this.foot = "";
 this.leg = "";
}

classPerson.prototype = {
 setHand:function(){
  this.hand = '大手';
 },
 setLeg:function () {
  this.leg = '长腿欧巴';
 },
 setMouse:function () {
  this.mouse = '樱桃小嘴';
 }
}

var person = new classPerson();
person.setHand();
person.setMouse();
person.setLeg();
console.log(person);

简单谈谈javascript高级特性

我们知道造人是一个整体(不可能先造手、再造腿、最后造嘴),我们现在的需求是一旦实例化人这个对象,该有的都有了。

简单修改以上代码:

function classPerson(){
 this.hand = "";
 this.foot = "";
 this.leg = "";
}

classPerson.prototype = {
 setHand:function(){
  this.hand = '大手';
  return this;
 },
 setLeg:function () {
  this.leg = '长腿欧巴';
  return this;
 },
 setMouse:function () {
  this.mouse = '樱桃小嘴';
  return this;
 }
}

var person = new classPerson();
person.setHand().setMouse().setLeg(); // 调用函数
console.log(person);

我们在每个setter中添加了return this将原有对象返回(避免无返回值的函数执行完之后是undefined)。我们可以惊奇的发现常用的JQuery的链式调用就是一种级联调用:
$(‘#id').show().hide().show().hide().show().hide();

javascript中的正则表达式

一般来说//在js中表示的是单行注释,但是一旦我们向斜杠中间加入了内容,例如:/TEST/它就神奇地变成了正则。

模式串的声明

var patt1 = new RegExp('hello'); // 方式一
var patt2 = /word/;    // 方式二

test方法

我们得到了模式串(模式对象)后可以调用该方法匹配字符串,返回指定值(true or false)。

var patt = /my/;
var str = 'this is my code...';
console.log(patt.test(str)); // true

exec方法

类似于字符串的match方法,但是当模式串指定为全局的时候两者表现不同,没有匹配返回null。

/hello/.exec('oh hello world'); // ["hello"]

以上两个方法都是字符串对象本身的方法,下面的几个方法是字符串中的有关正则的方法。

match方法

模式匹配。函数原型是str.mattch(pattern),将匹配的结果以数组返回。

console.log('test 123'.match(/test/g)); // [test]

replace方法

字符串替换,注意:该方法生成一个新的临时字符串副本。如图所示:

简单谈谈javascript高级特性

split方法

将字符串拆分成按照模式拆分成数组。

console.log('Hello world,hello everyone'.split(/\s+/)); // ["Hello", "world,hello", "everyone"]
console.log('Hello world,hello everyone'.split(' ')); // 等效于上面的方法

正则的类型

/pattern/attributes

attributes是可选字符串,常用的属性是“g”(全局匹配)、“i”(大小写不敏感)和"m"(多行匹配)

console.log('Hello world,hello everyone'.match(/hEllO/gi)); // 全局查找hello并忽略大小写 ["Hello", "hello"]

在实际的开发中我们可以借助在线正则调试工具来调试我们的正则,其实里面内置了大量常用的正则。如果我们在开发中分析不出别人的正则的含义可以借助正则分析网站,将会以有限自动机图解的方式显示。

简单谈谈javascript高级特性

正则中的元字符

正则中的元字符必须进行转义处理:

( [ { ^ $ | ) ? * + .]}

需要注意的是正则有2种创建形式:字符串字面量和new RegExp()的方式.由于RegExp的构造函数是字符串,所以某些情况下需要进行双重转义.

简单谈谈javascript高级特性

__PROTO__

__proto__使得继承变得更加容易:

function Super(){};
function Sub(){};
Sub.prototype.__proto__ = Super.prototype;

这是一个非常有用的特性,可以免去如下的工作:

借助中间构造器

无需引入第三方模块来进行基于原型继承的声明

访问器

可以调用方法来定义属性,如其名有:__defineGetter____defineSetter__。例如为Date对象定义一个ago的属性,返回以自然语言描述的日期间隔(例如:某件事发生在3秒之前)。例如:

Date.prototype.__defineGetter__('ago',function(){
 var diff = ((Date.now() - this.getTime()) / 1000)
 day_diff = Math.floor(diff / 86400)

 return day_diff == 0 && (diff < 60 && 'just now' )
  || diff < 120 && '1 minute ago' 
  || diff < 3600 && Math.floor(diff / 60) + 'minutes ago'
  || diff < 7200 && '1 hour ago'
  || diff < 86400 && Math.floor(diff / 3600) + 'hours ago'
  || day_diff == 1 && 'Yesterday'
  || diff < 7 && day_diff + ' days ago'
  || Math.ceil(day_diff / 7) + ' weeks ago'
})

var d = new Date('12/12/1990')
console.log(d.ago)
Javascript 相关文章推荐
JS 进度条效果实现代码整理
May 21 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
May 10 Javascript
js控制页面控件隐藏显示的两种方法介绍
Oct 09 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
jQuery实现提示密码强度的代码
Jul 15 Javascript
JS代码防止SQL注入的方法(超简单)
Apr 12 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
Aug 28 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
Node.JS文件系统解析实例详解
May 15 Javascript
react-native android状态栏的实现
Jun 15 Javascript
bootstrap模态框关闭后清除模态框的数据方法
Aug 10 Javascript
Vue文本模糊匹配功能如何实现
Jul 30 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
Sep 03 #Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
Sep 03 #Javascript
mui js控制开关状态、修改switch开关的值方法
Sep 03 #Javascript
Layui给switch添加响应事件的例子
Sep 03 #Javascript
layui--js控制switch的切换方法
Sep 03 #Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
Sep 03 #Javascript
layui中的switch开关实现方法
Sep 03 #Javascript
You might like
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
php获取文件后缀的9种方法
2016/03/22 PHP
PHP安装memcache扩展的步骤讲解
2019/02/14 PHP
jquery 新浪网易的评论块制作
2010/07/01 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
2016/07/07 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
js实现固定宽高滑动轮播图效果
2017/01/13 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
react-router中的属性详解
2017/06/01 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
[54:33]2018DOTA2亚洲邀请赛小组赛 A组加赛 Liquid vs Optic
2018/04/03 DOTA
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
Python 实现一个简单的web服务器
2021/01/03 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
Snapfish爱尔兰:在线照片打印和个性化照片礼品
2018/09/17 全球购物
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
怎么样写好简历中的自我评价
2013/10/25 职场文书
签约仪式主持词
2014/03/19 职场文书
学生自我评语大全
2014/04/18 职场文书
邻里守望志愿服务活动方案
2014/08/15 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
专项资金申请报告
2015/05/15 职场文书
用Python制作灯光秀短视频的思路详解
2021/04/13 Python
Django显示可视化图表的实践
2021/05/10 Python