发表于 | 分类于

mac多个桌面窗口下，系统会自动根据窗口的使用情况来重新排序，从而使我们看上去几个桌面的顺序莫名其妙乱序。那么，mac如何固定多个窗口顺序呢，了解一下~

点击左上角的小苹果–选择系统偏好设置–选择调度中心–进入调度中心界面，去掉“根据最近使用情况自动重新排列空间”选项 即可

参考链接

发表于 | 分类于 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var length = 10;
function fn(){
    console.log(this.length);
}
var obj = {
    length:5,
    methods:function(fn){
        fn();
        arguments[0]();
    }
};
obj.methods(fn, 1);  // 10 2
/*
    第一个 fn  this指向window   输出10
    第二个 arguments[0]() 可以理解为arguments.0() [只是方便理解] ，
                即argument对象调用fn函数，所以this指向arguments对象
    arguments = {
      0:fn,    //function fn(){console.log(this.length);}
      1:第二个参数 1，
      length:2
    }
*/

附一个例子(手写new的实现)

1
2
3
4
5
6
7
function create() {
  let obj = {}
  let Con = [].shift.call(arguments)
  obj.__proto__ = Con.prototype
  let result = Con.apply(obj, arguments)
  return result instanceof Object ? result : obj
}

发表于 | 分类于 
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
var P=function(){};
P.prototype.aaa=function(){
  console.log('ddd');
}
var a=new P();
var b=new P();
b.prototype=P;
b.prototype.aaa=function(){
  console.log('ccc');
}
var c=Object.create(null);
var d=new Object();

console.log(P.__proto__ === Function.prototype);
console.log(P.prototype);
console.log(a.__proto__ === P.prototype);
console.log(a.prototype);
console.log(b.prototype);
console.log(c.__proto__);
console.log(d.__proto__ === Object.prototype);

console.log(Number.__proto__);
console.log(Number.prototype);
console.log(Function.__proto__ === Function.prototype);
console.log(Function.prototype);
console.log(Function.prototype.__proto__ === Object.prototype);
console.log(Object.__proto__ === Function.prototype);
console.log(Object.prototype);
console.log(Object.prototype.__proto__);

发表于 | 分类于

现在的mac系统（10.12之后）默认没有了允许任何来源，想要打开的话，只需在终端输入如下命令：

1
sudo spctl --master-disable

当然如果为了安全考虑，你也可以在安装完了你需要的软件之后，重新关闭掉，命令如下:

1
sudo spctl --master-enable

发表于 | 分类于

1.git 初始化

1
2
$ git config --global user.name author #将用户名设为author
$ git config --global user.email author@corpmail.com #将用户邮箱设为author@corpmail.com

2.生成秘钥

进入.ssh文件夹,若没有.ssh文件夹，则创建该文件夹：

1
cd ~/.ssh

输入如下命令

1
ssh-keygen -t rsa -C "your_email@example.com"

按三次回车，最后在.ssh文件夹下得到id_rsa和id_rsa.pub两个文件。

在用户目录就出现了一个.ssh文件夹 C:\Users\admin\.ssh\

tortoiseGit的密钥跟git的密钥不起冲突，可以共用

发表于 | 分类于

我们常常会根据远程分支创建本地分支，命令如下

1
git checkout -b dev origin/dev

上面的命令我是想把远程分支 dev 拉到本地来，但是有时候没有用，提示远程分支不存在，我们需要通过下面的命令来操作

1
git fetch origin

可以运行 git fetch origin 来同步远程服务器上的数据到本地。

已经同步了分支，现在就可以拉取远程分支了

1
git checkout -b dev origin/dev

发表于 | 分类于

1.在微信小程序项目中自定义组件时发现app.wxss全局样式没有应用，包括全局应用的字体图标。如何解决？

只要在自定义组件的样式中import全局样式文件即可。

在modal.wxss中：

1
@import "../../../app.wxss";

更正:
由于调试基础库没有设置版本,导致默认设置为低版本,但是低版本不支持自定义组件全局样式,改下版本就好.

2 修改swiper指示灯样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 修改swiper指示灯 */
.swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal{
  margin-bottom: 2rpx;
}
.swiper-box .wx-swiper-dot{
  width:10rpx;
  height: 10rpx;
  display: inline-flex;
  justify-content:space-between;
}
.swiper-box .wx-swiper-dot-active{
  width: 20px;
}
.swiper-box .wx-swiper-dot::before{
 content: '';
 padding: 0;
 flex-grow: 1; 
 background: rgba(255,255,255,0.3);
 border-radius: 5px;
}
.swiper-box .wx-swiper-dot-active::before{
 background:#fff;   
}

3 video自定义组件

3.1 自定义组件怎么获取video组件对象

1
VideoContext wx.createVideoContext(string id, Object this)

不要忽略了第二个参数: Object this

在自定义组件下，当前组件实例的this，以操作组件内 <video> 组件

1
this.videoContext = wx.createVideoContext(this.data.vid,this);

wx.createVideoContext

3.2 video组件封面图片在ios不显示

自定义封面图片即可

3.3 自定义组件属性不能用id,原因未知

这里我换用 vid 替换 id

1
2
3
4
5
6
7
8
9
<ll-video 
  vid="one"
  src="https:xxx.mp4"
  posterImage="http://iph.href.lu/400x400?text=%E5%8D%A0%E4%BD%8D"
  description="供应链的升级和全球化布局—从中国民营企业收购世界知名跨国公司说起"
  total="17万播放"
  time="17万播放"
  >
</ll-video>

4 position为fixed,设置bottom:0 时并没有到底

设置bottom:-1px;即可

5 小程序base64上传图片

1
2
3
4
5
6
7
8
9
10
11
wx.chooseImage({
  success: res => {
    wx.getFileSystemManager().readFile({
      filePath: res.tempFilePaths[0], //选择图片返回的相对路径
      encoding: 'base64', //编码格式
      success: res => { //成功的回调
        console.log('data:image/png;base64,' + res.data)
      }
    })
  }
})

6 保存图片的功能

参考链接

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
saveimg(){
  const canvasToTempFilePath=this.data.filePath;
  const _self = this;
  if (!_self.data.openStatus) {
    wx.openSetting({
      success: (result) => {
        if (result) {
          if (result.authSetting["scope.writePhotosAlbum"] === true) {
            _self.setData({"openStatus":true});
            _self.save(canvasToTempFilePath);
          }
        }
      },
      fail: () => { },
      complete: () => { }
    });
  } else {
    wx.getSetting({
      success(res) {
        // 如果没有则获取授权
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {
              _self.setData({"openStatus":true});
              _self.save(canvasToTempFilePath);
            },
            fail() {
              // 如果用户拒绝过或没有授权，则再次打开授权窗口
              _self.setData({"openStatus":false});
              console.log('请设置允许访问相册')
              wx.showToast({
                title: '请设置允许访问相册',
                icon: 'none'
              })
            }
          })
        } else {
          // 有则直接保存
          _self.setData({"openStatus":true});
          _self.save(canvasToTempFilePath);
        }
      },
      fail(err) {
        console.log(err)
      }
    })
  }
},

save(canvasToTempFilePath){
  wx.saveImageToPhotosAlbum({
    filePath: canvasToTempFilePath,
    success() {
      wx.showToast({
        title: '图片保存成功，快去分享到朋友圈吧~',
        icon: 'none',
        duration: 2000
      })
    },
    fail() {
      wx.showToast({
        title: '保存失败',
        icon: 'none'
      })
    }
  })
},

7 小程序自定义eventbus

掘金-腾讯IVWEB团队-小程序开发经验：多页面数据同步

app.js

1
2
3
4
5
6
7
8
9
10
import Event from './utils/events';

onLaunch: function (){
    ...
    this.initEvents();
},
// 初始化EventBus事件总线
initEvents() {
    this.events = new Event();
},

监听事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// eventbus监听事件对象 
eventsListener: {}, 
// eventbus事件监听
eventsListening(){
  this.eventsListener.linkSubscriptionFocus= App.events.on('linkSubscriptionFocus', data => {
    console.log('我的动态页面收到发布动态通知：', data);
    debugger
    // 进行更新操作
    const index = this.data.dataList.findIndex(item=>item.us_id === data.us_id);
    this.setData({['dataList['+index+'].focus_type']:data.action});
  });
},
// 主动销毁监听事件
onUnload() {
  for (let i in this.eventsListener) {
    App.events.remove(i, this.eventsListener[i])
  } 
},

触发事件

1
App.events.emit('feedsLike', data)

8 小程序版本覆盖问题

小程序只能存在一个审核版本(包括已审核成功待发布的版本),只要提交审核就会覆盖上一版审核版本,请慎重!!!
小程序只能存在一个审核版本(包括已审核成功待发布的版本),只要提交审核就会覆盖上一版审核版本,请慎重!!!
小程序只能存在一个审核版本(包括已审核成功待发布的版本),只要提交审核就会覆盖上一版审核版本,请慎重!!!

9 小程序监听滑动事件

使用方法:

1
<view class="side-menu__bd" bindtouchstart="touchStart" bindtouchend="touchEnd"></view>

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
// 触摸开始事件
touchStart: function(e) {
  console.log("TCL: e", e)
  this.time=0;
  this.touchDotX = e.touches[0].pageX; // 获取触摸时的原点
  this.touchDotY = e.touches[0].pageY;
  // 使用js计时器记录时间    
  this.interval = setInterval(()=>{
    this.time++;
  }, 100);
},
// 触摸结束事件
touchEnd: function(e) {
  console.log("TCL: e", e)
  let touchMoveX = e.changedTouches[0].pageX;
  let touchMoveY = e.changedTouches[0].pageY;
  let tmX = touchMoveX - this.touchDotX;
  let tmY = touchMoveY - this.touchDotY;
  if (this.time < 20) {
    let absX = Math.abs(tmX);
    let absY = Math.abs(tmY);
    if (absX > 2 * absY) {
      if (tmX<0){
        console.log("左滑=====")
      }else{
        console.log("右滑=====")
        this.closeMenu()
      }
    }
    if (absY > absX * 2 && tmY<0) {
      console.log("上滑动=====")
    }
  }
  clearInterval(this.interval); // 清除setInterval
  this.time = 0;
}

一些不错的资料
掘金-yck-近两万字小程序攻略发布了

发表于 | 分类于

第一部分

1 typeof 有一个特殊的安全防范机制

要为某个缺失的功能写 polyfill,如何避免重复声明变量？

  1. 使用 typeof 判断
1
2
3
if (typeof atob === "undefined") {
 atob = function() { /*..*/ };
}

如果要为某个缺失的功能写polyfill（即衬垫代码或者补充代码，用来补充当前运行环境中缺失的功能），一般不会用 var atob 来声明变量 atob。如果在 if 语句中使用 var atob，声明会被提升（hoisted，参见《你不知道的
JavaScript（上卷）》1中的“作用域和闭包”部分）到作用域（即当前脚本或函数的作用域）的最顶层，即使 if 条件不成立也是如此（因为 atob 全局变量已经存在）。在有些浏览器中，对于一些特殊的内建全局变量（通常称为“宿主对象”，host object），这样的重复声明会报错。去掉 var 则可以防止声明被提升

  1. 检查所有全局变量是否是全局对象的属性，浏览器中的全局对象是 window。
1
2
3
4
5
6
if (window.DEBUG) {
 // ..
}
if (!window.atob) {
 // ..
}
  1. 还有一些人喜欢使用“依赖注入”（dependency injection）设计模式，就是将依赖通过参数显式地传递到函数中，
1
2
3
4
5
6
function doSomethingCool(FeatureXYZ) {
 var helper = FeatureXYZ ||
 function() { /*.. default feature ..*/ };
 var val = helper();
 // ..
}

2 值

2.1 怎样来判断 0.1 + 0.2 和 0.3 是否相等?

最常见的方法是设置一个误差范围值，通常称为“机器精度”（machine epsilon），对 JavaScript 的数字来说，这个值通常是 2^-52 (2.220446049250313e-16)。

1
2
3
4
5
6
7
function numbersCloseEnoughToEqual(n1,n2) {
 return Math.abs( n1 - n2 ) < Number.EPSILON;
}
var a = 0.1 + 0.2;
var b = 0.3;
numbersCloseEnoughToEqual( a, b ); // true
numbersCloseEnoughToEqual( 0.0000001, 0.0000002 ); // false

Number.EPSILON 为ES6 新增

2.2 整数检测

可以使用 ES6 中的 Number.isInteger(..) 方法

2.3 按惯例我们用 void 0 来获得 undefined

虽然undefined在现在主流的绝大部分浏览器的全局作用域上面都是不能更改了,但是在函数作用域或者块级作用域下面还是能被重写的,当然绝大部分人应该都不会去干这种傻事,但是还是用viod 0吧,这样可以以防万一,同时也更像一个老司机的代码啊

掘金-JS中的null和undefined,undefined为啥用void 0代替?

2.4 很多 JavaScript 程序都可能存在 NaN 方面的问题，所以我们应该尽量使用 Number.isNaN(..)这样可靠的方法，无论是系统内置还是 polyfill。

2.5 特殊等式

ES6 中新加入了一个工具方法 Object.is(..)来判断两个值是否绝对相等，可以用来处理上述所有的特殊情况：

1
2
3
4
5
var a = 2 / "foo";
var b = -3 * 0;
Object.is( a, NaN ); // true
Object.is( b, -0 ); // true
Object.is( b, 0 ); // false

2.6 值和引用

简单值（即标量基本类型值，scalar primitive）总是通过值复制的方式来赋值 / 传递，包括
null、undefined、字符串、数字、布尔和 ES6 中的 symbol。

复合值（compound value）——对象（包括数组和封装对象）和函数，则总是通过引用复制的方式来赋值 / 传递。

3 原生函数

3.1

1
2
3
4
var a = new String( "abc" );
typeof a; // 是"object"，不是"String"
a instanceof String; // true
Object.prototype.toString.call( a ); // "[object String]"

通过构造函数（如 new String(“abc”)）创建出来的是封装了基本类型值（如 “abc”）的封装对象。

封 装 对 象（object wrapper） 扮 演 着 十 分 重 要 的 角 色。 由 于 基 本 类 型 值 没 有.length和 .toString()这样的属性和方法，需要通过封装对象才能访问，此时 JavaScript 会自动为基本类型值包装（box 或者 wrap）一个封装对象：

1
2
3
var a = "abc";
a.length; // 3
a.toUpperCase(); // "AB

一般情况下，我们不需要直接使用封装对象。最好的办法是让 JavaScript引擎自己决定什么时候应该使用封装对象。换句话说，就是应该优先考虑使用 “abc” 和 42 这样的基本类型值，而非 new String(“abc”) 和 newNumber(42)。

3.2 内部属性 [[Class]]

所有 typeof 返回值为 “object”的对象（如数组）都包含一个内部属性[[Class]]（我们可以把它看作一个内部的分类，而非传统的面向对象意义上的类）。这个属性无法直接访问，一般通过 Object.prototype.toString(..) 来查看。

1
2
Object.prototype.toString.call( [1,2,3] );
// "[object Array]"

4 强制类型转换

将值从一种类型转换为另一种类型通常称为类型转换（type casting），这是显式的情况；隐式的情况称为强制类型转换（coercion）。

也可以这样来区分：类型转换发生在静态类型语言的编译阶段，而强制类型转换则发生在动态类型语言的运行时（runtime）

1
2
3
var a = 42;
var b = a + ""; // 隐式强制类型转换
var c = String( a ); // 显式强制类型转换

4.1 JSON.stringify

JSON.stringify(..) 在对象中遇到undefined、function 和 symbol时会自动将其忽略，在数组中则会返回 null（以保证单元位置不变）。

1
2
3
4
5
6
7
8
JSON.stringify( undefined ); // undefined
JSON.stringify( function(){} ); // undefined
JSON.stringify(
 [1,undefined,function(){},4]
); // "[1,null,null,4]"
JSON.stringify(
 { a:2, b:function(){} }
); // "{"a":2}

4.2 ~ 和 ~~ 的作用 (了解)

~x 大致等同于 -(x+1)。

1
~42; // -(42+1) ==> -43

~~x 能将值截除为一个 32 位整数，x | 0 也可以，而且看起来还更简洁

4.3 parseInt

ES5 之前的 parseInt(..) 有一个坑导致了很多 bug。即如果没有第二个参数来指定转换的
基数（又称为 radix），parseInt(..) 会根据字符串的第一个字符来自行决定基数

将第二个参数设置为 10，即可避免这个问题：

从 ES5 开始 parseInt(..) 默认转换为十进制数，除非另外指定。如果你的代码需要在 ES5
之前的环境运行，请记得将第二个参数设置为 10

4.4 a + “”（隐式）和前面的 String(a)（显式）之间有一个细微的差别

1
2
3
4
5
6
var a = {
 valueOf: function() { return 42; },
 toString: function() { return 4; }
};
a + ""; // "42"
String( a ); // "4

根据ToPrimitive 抽象操作规则，a + “” 会对 a 调用 valueOf() 方法，然后通过 ToString 抽象
操作将返回值转换为字符串。而 String(a) 则是直接调用 ToString()

5 语法

5.1 语句的结果值

如果你用开发控制台（或者 JavaScript REPL——read/evaluate/print/loop 工具）调试过代
码，应该会看到很多语句的返回值显示为 undefined，只是你可能从未探究过其中的原因。
其实控制台中显示的就是语句的结果值。

代码块的结果值就如同一个隐式的返回，即返回最后一个语句的结果值;

5.2 上下文规则

1 标签

但 foo: bar() 这样奇怪的语法：叫作“标签语句”。而 JavaScript 通过标签跳转能够实现 goto的部分功能。continue 和 break 语句都可以带一个标签，因此能够像 goto 那样进行跳转。

5.3 运算符优先级

1 && 运算符先于 || 执行

false && true || true 的执行顺序如下：

1
2
false && true || true; // true
(false && true) || true; // true

&& 先执行，然后是 ||。

&& 运算符先于 || 执行

2 短路

1
2
3
4
5
function doSomething(opts) {
 if (opts && opts.cool) {
 // .. 
 }
}
1
2
3
4
5
function doSomething(opts) {
 if (opts.cache || primeCache()) {
 // .. 
 }
}

3 && 运算符的优先级高于 ||，而 || 的优先级又高于 ? :。

1
2
3
a && b || c ? c || b ? a : c && b : a

(a && b || c) ? (c || b) ? a : (c && b) : a

4 关联

(1)

a ? b : c ? d : e;

它的组合顺序是

1
a ? b : (c ? d : e)。

(2)

1
2
var a, b, c;
a = b = c = 42;

它首先执行 c = 42，然后是 b = ..，最后是 a = ..。因为是右关联，所以它实际上是这样
来处理的：a = (b = (c = 42))。

(3)

1
2
3
4
5
var a = 42;
var b = "foo";
var c = false;
var d = a && b || c ? c || b ? a : c && b : a;
d; // 42

分解如下

1
((a && b) || c) ? ((c || b) ? a : (c && b)) : a

第二部分

1 省点回调

为了更优雅地处理错误，有些 API设计提供了分离回调（一个用于成功通知，
一个用于出错通知）

1
2
3
4
5
6
7
function success(data) { 
 console.log( data ); 
} 
function failure(err) { 
 console.error( err ); 
} 
ajax( "http://some.url.1", success, failure );

2 Node 风格

还有一种常见的回调模式叫作“error-first 风格”（有时候也称为“Node 风格”，因为几乎
所有 Node.js API都采用这种风格），其中回调的第一个参数保留用作错误对象（如果有的话）。如果成功的话，这个参数就会被清空 / 置假（后续的参数就是成功数据）。如果产生了错误结果，那么第一个参数就会被置起 / 置真（通常就不会再传递其他结果）：

1
2
3
4
5
6
7
8
9
10
11
function response(err,data) { 
 // 出错？
 if (err) { 
 console.error( err ); 
 } 
 // 否则认为成功
 else { 
 console.log( data ); 
 } 
} 
ajax( "http://some.url.1", response );

promise

实现 JavaScript 异步方法 Promise.all
从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理