简单谈谈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 相关文章推荐
jQuery.validate 常用方法及需要注意的问题
Mar 20 Javascript
javascript实现跳转菜单的具体方法
Jul 05 Javascript
JS JSOP跨域请求实例详解
Jul 04 Javascript
浅析上传头像示例及其注意事项
Dec 14 Javascript
无法获取隐藏元素宽度和高度的解决方案
Mar 07 Javascript
关于jQuery库冲突的完美解决办法
May 20 jQuery
JavaScript订单操作小程序完整版
Jun 23 Javascript
JavaScript闭包和回调详解
Aug 09 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
Aug 12 Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 Javascript
推荐一个基于Node.js的表单验证库
Feb 15 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
天使彦史上最神还原,性别曝光的那一刻,百万网友恋爱了
2020/03/02 国漫
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
PHP中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
基于PHPexecl类生成复杂的报表表头示例
2016/10/14 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
JsChart组件使用详解
2018/03/04 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
Vue 打包体积优化方案小结
2020/05/20 Javascript
[00:50]2014DOTA2国际邀请赛 NEWBEE战队回顾
2014/08/01 DOTA
用实例说明python的*args和**kwargs用法
2013/11/01 Python
Python yield 小结和实例
2014/04/25 Python
Python向日志输出中添加上下文信息
2017/05/24 Python
Python 获取当前所在目录的方法详解
2017/08/02 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
大一学生假期实习的自我评价
2013/10/12 职场文书
建筑专业毕业生推荐信
2013/11/21 职场文书
致接力运动员广播稿
2014/02/17 职场文书
教师新年寄语
2014/04/03 职场文书
教师考核评语
2014/04/28 职场文书
施工员岗位职责
2015/02/10 职场文书
2015年学生会干事工作总结
2015/04/09 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书