问题

在开发过程中，经常会提交表单。但如果后端没有做控制，前端也没有做控制的情况下，常常会有重复提交的问题。

解决办法

• 1、手动写一个标识，

  1 2 3 4 5 6 7 8 9

  function submit() { if (this.lock) return this.lock = true; // lock 非vue可以写在外面 doSomeThing(); var t = setTimeout(() => { clearTimeout(t); lock = false; // 释放 }, 2000); // 时间可以根据实际情况定 }

• 2、不用每个方法去写，利用标签的属性去处理（一般表单都是由按钮去触发）

1
2
3
4
5
6
7
8
9
10
11
12
13
14

Vue.directive('fast-click', {
  inserted(el, binding) {
    el.addEventListener('click', () => {
      el.setAttribute('disabled', 'disabled');
      el.disabled = true;
      let t = setTimeout(() => {
        clearTimeout(t);
        t = null;
        el.disabled = false;
        el.removeAttribute('disabled');
      }, 1500); // 时间可以根据实际情况定
    })
  }
});

• 使用

  1 2 3

  <button @click="submit" v-fast-click>提交</button> <el-button @click="submit" v-fast-click>提交</el-button> <i-button @click="submit" v-fast-click>提交</i-button>

正则是什么

正则就是用来处理字符串的:匹配字符串的格式是否符合既定的格式(正则的匹配)、把一个字符串中符合既定格式的内容获取到(正则的捕获)；

正则的组成

每个正则都是由元字符和修饰符两部分组成， “/”里面的 内容称为元字符 “/” [修饰符]g、i、m

1
2
3

g(global)-> 全局匹配
i(ignoreCase)-> 忽略大小写匹配
m(multiline)-> 换行匹配

两个重要的方法

• test 匹配

  1 2 3 4

  var reg = /\d/;//-> \d一个0-9之间的数字 ->包含一个0-9之间的数字的规则 console.log(reg.test("2016"));//->true console.log(reg.test("duff990fff"));//->true console.log(reg.test("dufffff"));//->false

• exec 捕获

  1 2 3 4 5

  var reg = /\d/g; console.log(reg.exec("2016"));//->["2", index: 0, input: "2016"] console.log(reg.exec("2016"));//->["0"...] console.log(reg.exec("2016"));//->["1"...] console.log(reg.exec("2016"));//->["6"...]

正则常用的元字符

• 1)具有特殊意义的元字符

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

  \d -> 匹配一个0-9的数字,相当于[0-9],和它相反的是\D ->匹配一个除了0-9的任意字符 \w -> 匹配一个0-9、a-z、A-Z、_的数字或字符,相当于[0-9a-zA-Z_] \s -> 匹配一个空白字符(空格、制表符...) \b -> 匹配一个单词的边界 \t -> 匹配一个制表符 \n -> 匹配一个换行 . -> 匹配一个除了\n以外的任意字符 ^ -> 以某一个元字符开头 $ -> 以某一个元字符结尾 \ -> 转义字符 x|y -> x或者y的一个 [xyz] -> x、y、z中的任意一个 [^xyz] -> 除了xyz中的任意一个字符 [a-z] -> 匹配a-z中的任意一个字符 [^a-z] -> 匹配除了a-z中的任意一个字符 () -> 正则中的分组

• 2)代表出现次数的”量词元字符”

  1 2 3 4 5 6

  ->+ : 出现一到多次 ->* : 出现零到多次 ->? : 出现零到一次 ->{n} : 出现n次 ->{n,} : 出现n到多次 ->{n,m} : 出现n-m次

小case

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

 // ^/$
 var reg = /\d+/;//->包含一到多个数字(0-9)即可
 console.log(reg.test("duffy2016"));//->true

 reg = /^\d+$/;//->只能是一到多个数字
 console.log(reg.test("duffy2016"));//->false
 console.log(reg.test("2016"));//->true

// -> .
 var reg = /^2.6$/;
 console.log(reg.test("2.6"));//->true
 console.log(reg.test("2@6"));//->true

 reg = /^2\.6$/;//->\是转义字符:把.这个特殊意义(任意字符)的元字符转变为只代表本身意义(小数点)的一个普通元字符
 console.log(reg.test("2.6"));//->true
 console.log(reg.test("2@6"));//->false

// ->[]
    //->在中括号中出现的所有字符(不管之前代表什么意思),在这里都是只代表本身的意思
    var reg = /^[2.3]$/;//->.这里只代表小数点,不是任意字符了
    reg = /^[\dz]$/;//->\d本身整体就是0-9之间的数字,在这里还是这个意思

//->在中括号中出现的两位数不是一个两位数，而是左边或者右边的
//var reg = /^[10-23]$/;//->1或者0-2或者3


 // 在中括号中"-"具有连字符的作用,如果只想表示-,需要把其放在末尾
    //var reg = /^[12-]$/;

    //->中括号本身也有特殊的意思,如果需要只代表中括号本身的意思,需要进行转义
    //var reg = /^\[\d+\]$/;//->"[200]"

//->x|y
//var reg = /^1|2$/;//->和这个有区别:/^[12]$/
//->1、2、12

    //var reg = /^10|28$/;
    //->10、28、1028、102、108、128、028 ->不是我们想要的那个10或者28了

//var reg = /^(10|28)$/;//->10或者28

• 3) 分组:把一个大正则划分成几个小正则 1)改变正则的默认优先级

var reg = /^(10|28)$/;//->10或者28

• 4)分组的第二个作用：分组引用

  1 2	"wood" "foot" "week" "feel" "door" "food" "good" "cool"... var reg = /^[a-z]([a-z])\1[a-z]$/i;//->\1出现和第一个分组一模一样的内容

• 5、创建一个正则也有两种方式：字面量方式、实例创建的方式

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

  //->实例创建第一参数值是字符串 //->想要和字面量方式保持统一的话,对于\d \w \n...这些都需要多加一个\,使其\d具有自己的特殊的意义 var reg = /^\d+$/ig; console.log(reg.test("2016"));//->true reg = new RegExp("^\d+$", "ig"); console.log(reg.test("2016"));//->false reg = new RegExp("^\\d+$", "ig"); console.log(reg.test("2016"));//->true //->对于[]、()这类的是没有区别的 // var reg = /^[0-9]$/; // console.log(reg.test("0"));//->true // reg = new RegExp("^[0-9]$"); // console.log(reg.test("0"));//->true //->在实例创建的方式中,我们只要出现\,基本上都是要写\\的 // var reg = /^\[100\]$/; // console.log(reg.test("[100]"));//->true // reg = new RegExp("^\[100\]$"); // console.log(reg.test("[100]"));//->false // reg = new RegExp("^\\[100\\]$"); // console.log(reg.test("[100]"));//->true

常用的正则表达式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

+ 1、手机号:11位数字、都是以1开头的
`var reg = /^1\d{10}$/;`
+ 2、真实姓名(中国):两到四位的汉字
`var reg = /^[\u4e00-\u9fa5]{2,4}$/;`
+ 3、验证邮箱
// 1633397595@qq.com
// 1633397595@163.com.cn
// 1633397595@163.com
// duffy_youxiang@tengxu.cn
//var reg7 = /^[\w.-]+@$/  //@分解两边 左边任意,\w 数字，大小写字符_ - . 右边
var reg7 = /^[\w.-]+@([1-9]|[a-z]|[A-Z])+(\.[A-Za-z]{2,4}){1,2}$/
console.log(reg7.test('1633397595@qq.com'))

+ 4、验证有效数字的
  0 -12 -12.3 -12.0 12.3 12.0
    ->可能出现"-"也可能不出现,出现的话只能出现一次
    ->整数部分是一到多个数字,但是两位数及以上的话不能以0开头
    ->小数部分可能有可能没有,一但有必须是 .后面跟一位或者多位数字
    var reg = /^-?(\d|([1-9]\d+))(\.\d+)?$/;
+ 5、年龄:18-65之间
    18-19  /^1(8|9)$/
    20-59  /^[2-5]\d$/
    60-65  /^6[0-5]$/
    var reg = /^((18|19)|([2-5]\d)|(6[0-5]))$/;

正则的捕获

https://juejin.im/post/5acb4d3f6fb9a028c813295e

小游戏，只所以为小，因为它的体积确实小，下载起来快，随用随走。

在微信小游戏中， 游戏包体大小是有限制的，首包是4M，分包的话，在cocoscrator中，也只能分包js文件，所以，图片文件还是只能通过远程加载。但是，creator构建出来的图片资源，会一次性被小游戏加载回来，这样，就会造成小游戏在加载图片资源时，会有黑屏，资源过大时，黑屏时间就更长。所以，这时候使用手动动态加载大图，可以有效的减少初始化游戏时的网络压力。

下面通过以下几个方法，来优化我们的游戏

1、手动加载超大图

将游戏中使用到的大图（超过50kb的），采用低分辨率小图作为初始图，然后在节点onLoad以后，采用cc.loader.load() 方法,来动态加载原图。 这样既不会造成初始没有图，也可以展示更清晰的原图。
more >>

• observe

• observer

• observable

• action

• action.bound

• computed

mobx

一个状态管理工具 简单、可扩展

• Observable state(可观察的状态)
  MobX 为现有的数据结构(如对象，数组和类实例)添加了可观察的功能。 通过使用 @observable 装饰器(ES.Next)来给你的类属性添加注解就可以简单地完成这一切。

• Computed values(计算值)
  使用 MobX， 你可以定义在相关数据发生变化时自动更新的值。 通过@computed 装饰器或者利用 (extend)Observable 时调用 的getter / setter 函数来进行使用。(当然，这里也可以再次使用 decorate 来替代 @ 语法)。

• Reactions(反应)
  Reactions 和计算值很像，但它不是产生一个新的值，而是会产生一些副作用，比如打印到控制台、网络请求、递增地更新 React 组件树以修补DOM、等等。 简而言之，reactions 在 响应式编程和命令式编程之间建立沟通的桥梁。

• Actions(动作)

微信公众号验证签名失败 invalid signature

最近做一个h5的小游戏，需要用到微信的分享。要调用微信的分享， 就要用到微信公众号。 首先要后端提供一个验证签名的接口

1、假设后端接口下来了。
2、前端要调用的话， 必须是在获取签名以后， 拿到签名信息，再调用微信的config接口具体代码：

事件监听

在cocosCreator中，是以组件的方式开发的，事件也是基于组件来监听和触发
事件处理是在节点（cc.Node）中完成的。对于组件，可以通过访问节点 this.node 来注册和监听事件。监听事件可以 通过 this.node.on() 函数来注册，
more >>

本地存储

cocos中的本地存储sys.localStorage其实也就是widow对象下的localStorage
源代码位置
more >>

Widget: 定位适应组件，看不见摸不着,可以帮助我们固定某个组件离父元素的位置

UI组件有好多好多，这里暂时用到这么多，其它的实践使用了再写

• ProgressBar:进度条

  会有一个子组件bar
  主要设置progress的大小(0~1)，就可以设置进度

cocos creator开发游戏

开发一个简单的游戏，都有哪些组成部分呢？

• 1、场景
  游戏主要是由场景组成的，不同的场景转表示不能的展示。 场景中都有一个根元素，Canvas。 一般开发的时候，场景的大小就是canvas的大小，也就是用户可以看到的范围，会将一些图片、文字资源都放置到这个canvas下面。排在上面的显示在前面。

• 2、脚本
  JavaScript脚本主要是来控制游戏逻辑的。 more >>