简单谈谈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 相关文章推荐
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 Javascript
javascript设计模式之中介者模式Mediator
Dec 30 Javascript
javascript使用正则表达式实现去掉空格之后的字符
Feb 15 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
Bootstrap每天必学之附加导航(Affix)插件
Apr 25 Javascript
深入解析Javascript闭包的功能及实现方法
Jul 10 Javascript
Angularjs 制作购物车功能实例代码
Sep 14 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
Mar 09 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
Aug 06 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
React Native 图片查看组件的方法
Mar 01 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
Ajax+PHP快速上手及简单应用说明
2013/07/24 PHP
php中stream(流)的用法
2014/03/25 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
js类中的公有变量和私有变量
2008/07/24 Javascript
js中匿名函数的N种写法
2010/09/08 Javascript
鼠标经过tr时,改变tr当前背景颜色
2014/01/13 Javascript
js实现仿qq消息的弹出窗效果
2016/01/06 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
深入浅析Vue全局组件与局部组件的区别
2018/06/15 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
Typescript3.9 常用新特性一览(推荐)
2020/05/14 Javascript
解决vue-router路由拦截造成死循环问题
2020/08/05 Javascript
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
Python面向对象基础入门之设置对象属性
2018/12/11 Python
python线程的几种创建方式详解
2019/08/29 Python
python装饰器使用实例详解
2019/12/14 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
size?德国官方网站:英国伦敦的球鞋精品店
2018/03/17 全球购物
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
采用怎样的方法保证数据的完整性
2013/12/02 面试题
学校七一活动方案
2014/01/19 职场文书
超市仓管员岗位职责
2014/04/07 职场文书
部门群众路线教育实践活动对照检查材料思想汇报
2014/10/07 职场文书
工地材料员岗位职责
2015/04/11 职场文书
红歌会主持词
2015/07/02 职场文书
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python
Go 语言中 20 个占位符的整理
2021/10/16 Golang
python中使用redis用法详解
2022/12/24 Redis