Angular5中调用第三方js插件的方法,iOS_正则表达式

学习html5的canvas第三天,觉得还没过瘾,转眼就忘,于是趁着有空,准备弄个小游戏来玩!游戏应该需要注意性能,还有一些逻辑需要斟酌,我想还需要用户可修改性,也就是用户配置。好,开始我们简单但有趣的旅程吧——

话不多说直入主题,最常见的有三种方式来引用第三方插件,下面以jquery插件及基于JQuery的两款插件:nicescroll和rangeSlider为例。

想先看效果的,先跳转试玩一下吧!

 

一、第一种方式:在.angular-cli.json文件中配置

第一步,当然需要一张画布

iOS 正则表达式

正则表达式,又称正规表示法、常规表示法(英语:Regular
Expression,在代码中常简写为regex、regexp或RE),计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。在很多文本编辑器里,正则表达式通常被用来检索、替换那些符合某个模式的文本。

  1. 系统自带的, 如: NSPredicate, rangeOfString:option,
    NSRegularExpression
  2. RegexKitLite RegexKitLite 是一个轻量级的 Objective-C
    的正则表达式库,支持 Mac OS X 和 iOS,使用 ICU 库开发。

至于RegexKitLite, 这里不做介绍。着重介绍系统自带的那几个办法。

PS: 阅读本文前提是您已经掌握了正则基本语法, 如果对正则还不太了解,
可以参考以下几个链接:

正则表达式学习链接:

  1. 55分钟学会正则表达式
  2. 揭开正则表达式的神秘面纱
  3. RegExLib.com(正则表达式库查询)

步骤:

1 <canvas id="canvas" width="300" height="400">你的浏览器不支持Canvas</canvas>

1. NSPredicate

简述:Cocoa框架中的NSPredicate用于查询,原理和用法都类似于SQL中的where,作用相当于数据库的过滤取。

NSPredicate *predicate = [NSPredicate predicateWithFormat:(NSString *), ...];
  • 1

其中, 常见的Format有:

(1) 比较运算符: >, <, ==, >=, <=, !=

例:@"number > 100"  

(2) 范围运算符: IN, BETWEEN

例:@"number BETWEEN {1,5}"     @"address IN {'shanghai','beijing'}"  

(3) 字符串本身: SELF

例:@“SELF == ‘APPLE’"  

(4) 字符串相关: BEGINSWITH, ENDSWITH, CONTAINS

例:@"name CONTAINS[cd] 'ang'"  //包含某个字符串     @"name BEGINSWITH[c] 'sh'"  //以某个字符串开头     @"name ENDSWITH[d] 'ang'"   //以某个字符串结束    注:[c]不区分大小写     [d]不区分发音符号即没有重音符号     [cd]既不区分大小写,也不区分发音符号。  

(5) 通配符: LIKE

例:@"name LIKE[cd] '*er*'"    //*代表通配符,Like也接受[cd].     @"name LIKE[cd] '???er*'"  

(6) 正则表达式: MATCHES

例:NSString *regex = @"^A.+e$";   //以A开头,e结尾    @"name MATCHES %@",regex  

至于如何使用呢? 下面举几个例子:

(a) 对NSArray进行过滤, 帅选出包含”ang”的项

    NSArray *array = [[NSArray alloc]initWithObjects:@"beijing", @"shanghai", @"guangzou", @"wuhan", nil];      NSString *string = @"ang";      NSPredicate *pred = [NSPredicate predicateWithFormat:@"SELF CONTAINS %@", string];      NSLog(@"%@", [array filteredArrayUsingPredicate:pred]);    //    打印结果:  //    (  //     shanghai,  //     guangzou  //    )  

 

(b) 对NSDate进行筛选

    //日期在十天之内:      NSDate *endDate = [NSDate date];      NSTimeInterval timeInterval= [endDate timeIntervalSinceReferenceDate];      timeInterval -=3600*24*10;      NSDate *beginDate = [NSDate dateWithTimeIntervalSinceReferenceDate:timeInterval];      //对coredata进行筛选(假设有fetchRequest)      NSPredicate *predicate_date = [NSPredicate predicateWithFormat:@"date >= %@ AND date <= %@", beginDate,endDate];      [fetchRequest setPredicate:predicate_date];

 

OK, NSPredicate的功能很多, 也很强大。这里暂时就点到此,
感兴趣的可以自己一一试验。 下面举两个例子说明一下如何使用正则。

// 判断是否是有效邮箱  - (BOOL)isValidateEmail:(NSString *)email{        NSString *regex = @"[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,4}";      NSPredicate *predicate = [NSPredicate predicateWithFormat:@"SELF MATCHES %@", regex];      return [predicate evaluateWithObject:email];  }    // 判断字符串首字母是否为字母  - (BOOL)isStartedWithWord:(NSString *)aString{        NSString *regex = @"[A-Za-z]+";      NSPredicate *predicate = [NSPredicate predicateWithFormat:@"SELF MATCHES %@", regex];      return [predicate evaluateWithObject:aString];  }

1.在项目根目录.angular-cli.json文件中找到script字段,在数组中添加要引用的所有js文件(注意先后顺序)

JavaScript的总体结构如下:

2. 利用rangeOfString:option:直接查找

    NSString *searchText = @"// Do any additional setup after loading the view, typically from a nib.";      NSRange range = [searchText rangeOfString:@"(?:[^,])*\\." options:NSRegularExpressionSearch];      if (range.location != NSNotFound) {          NSLog(@"%@", [searchText substringWithRange:range]);      }    //    打印结果:  //      typically from a nib.  

 

options中设定NSRegularExpressionSearch就是表示利用正则表达式匹配,会返回第一个匹配结果的位置。


"scripts": ["assets/jquery-3.2.1.js","assets/jquery.nicescroll.js","assets/ion.rangeSlider.js"], 
var定义一些变量  planeMoveTimer飞机移动监听/计时器  attackEnemyTimer发射炮弹计时器  onkeydown监听  onkeyup监听  drawPlane画飞机  drawEnemy画敌人

3. 使用正则表达式类

详细了解: iOS 正则表达式 NSRegularExpression

上面那篇文章总结的很不错. 这里简单再举个例子:

    NSString *searchText = @"// Do any additional setup after loading the view, typically from a nib.";          NSError *error = NULL;      NSRegularExpression *regex = [NSRegularExpression regularExpressionWithPattern:@"(?:[^,])*\\." options:NSRegularExpressionCaseInsensitive error:&error];      NSTextCheckingResult *result = [regex firstMatchInString:searchText options:0 range:NSMakeRange(0, [searchText length])];      if (result) {          NSLog(@"%@\n", [searchText substringWithRange:result.range]);      }    //    打印结果:  //      typically from a nib.

 

使用系统的正则表达式类(NSRegularExpression)会返回匹配的多个结果。


2.在需要用该插件的组件中(.ts文件中)做如下声明:declare var $:any;

首先预定义一些变量

目的是不让编译时报错

 1 var _keyA = _keyD = _keyW = _keyS = 0,  // 存储按键状态   2    3     step = 8,                          // 飞机移动速率   4     w = 34, h = 44,                  // 飞机实际大小   5     planeX = 133, planeY = 356,      // 飞机目前位置   6     planeSrc = "feiji.png",          // 飞机素材位置   7     imgW = 177, imgH = 220,          // 飞机源图尺寸   8    9     cw = 300, ch = 400,  // 画布大小  10     canvas = document.getElementById("canvas"),  11     ctx = canvas.getContext("2d");

3.接下来在ngOnInit方法中就能正常用上面的三款插件了。

本游戏只用到一个外部资源,就是那张图片,获取地址请访问本文底部给出的项目GitHub位置链接。跳转

二、第二种方式:在index.html页面上引用插件

先看画图的两个方法

步骤:

发表评论

电子邮件地址不会被公开。 必填项已用*标注