简单谈谈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 相关文章推荐
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
有关JavaScript的10个怪癖和秘密分享
Aug 28 Javascript
javascript事件冒泡详解和捕获、阻止方法
Apr 12 Javascript
使用Node.js为其他程序编写扩展的基本方法
Jun 23 Javascript
Jquery插件easyUi实现表单验证示例
Dec 15 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
Oct 19 Javascript
javascript入门之string对象【新手必看】
Nov 22 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
Dec 25 Javascript
jQuery图片轮播功能实例代码
Jan 29 Javascript
详解基于mpvue的小程序markdown适配解决方案
May 08 Javascript
jquery插件懒加载的示例
Oct 24 jQuery
在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+javascript液晶时钟
2006/10/09 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
PHP 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
JavaScript内核之基本概念
2011/10/21 Javascript
Prototype源码浅析 Number部分
2012/01/16 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
jQuery实现定时读取分析xml文件的方法
2015/07/16 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
微信小程序返回上一页传参并刷新过程解析
2019/12/13 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
2020/09/04 Javascript
Python 错误和异常小结
2013/10/09 Python
Python实现的概率分布运算操作示例
2017/08/14 Python
Python 中@property的用法详解
2020/01/15 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
iframe跨域的几种常用方法
2019/11/11 HTML / CSS
Skyscanner阿联酋:全球领先的旅游搜索平台
2017/11/25 全球购物
波兰家具和室内装饰品购物网站:Vivre
2018/04/10 全球购物
老师的检讨书
2014/02/23 职场文书
维稳承诺书
2015/01/20 职场文书
采购员工作总结范文
2015/08/12 职场文书
浅谈redis五大数据结构和使用场景
2021/04/12 Redis
JavaScript的function函数详细介绍
2021/11/20 Javascript
《艾尔登法环》发布最新「战技」宣传片
2022/04/03 其他游戏