字体定制

发表于 2017-02-24

1	sudo apt install fonts-firacode

插件

GitToolBox
CamelCase
.ignore
GsonFormat
Markdown support
GO
Lombok plugin
Swagger Tools
Mybatisx
MybatisPlus
AceJump
Key promoter X
Alibaba Java Coding Guidelines
Database navigator
Rainbow Brackets
Past Images into Markdown
Free mybatis plugin
Packages
https://www.hollischuang.com/archives/3220

THEME

solarized

取消折叠代码

Settings | Editor | General | Code Folding

editor - Intellij IDEA 2018.1 - Disable simple comment folding - Stack Overflow

set author and date

Settings -> Editor -> File and code templates -> Includes -> File Header

/**
 * @author ${USER}
 * @date ${YEAR}/${MONTH}/${DAY}
 */

配置

<keymap version="1" name="louva" parent="Default for XWin">
  <action id="$Copy">
    <keyboard-shortcut first-keystroke="ctrl c" />
    <keyboard-shortcut first-keystroke="ctrl insert" />
    <keyboard-shortcut first-keystroke="alt c" />
  </action>
  <action id="$Cut">
    <keyboard-shortcut first-keystroke="ctrl x" />
    <keyboard-shortcut first-keystroke="shift delete" />
    <keyboard-shortcut first-keystroke="alt x" />
  </action>
  <action id="$Delete">
    <keyboard-shortcut first-keystroke="delete" />
    <keyboard-shortcut first-keystroke="alt quote" />
  </action>
  <action id="$Paste">
    <keyboard-shortcut first-keystroke="ctrl v" />
    <keyboard-shortcut first-keystroke="shift insert" />
    <keyboard-shortcut first-keystroke="alt v" />
  </action>
  <action id="ActivateRunToolWindow">
    <keyboard-shortcut first-keystroke="alt r" />
  </action>
  <action id="CloseContent">
    <keyboard-shortcut first-keystroke="ctrl f4" />
    <keyboard-shortcut first-keystroke="shift alt w" />
  </action>
  <action id="CodeInspection.OnEditor" />
  <action id="Console.Execute" />
  <action id="Editor Copy">
    <keyboard-shortcut first-keystroke="alt c" />
  </action>
  <action id="Editor Cut">
    <keyboard-shortcut first-keystroke="alt x" />
  </action>
  <action id="Editor Delete">
    <keyboard-shortcut first-keystroke="alt quote" />
  </action>
  <action id="Editor Paste">
    <keyboard-shortcut first-keystroke="alt v" />
  </action>
  <action id="EditorDown">
    <keyboard-shortcut first-keystroke="down" />
    <keyboard-shortcut first-keystroke="alt comma" />
  </action>
  <action id="EditorDownWithSelection">
    <keyboard-shortcut first-keystroke="shift down" />
    <keyboard-shortcut first-keystroke="shift alt comma" />
  </action>
  <action id="EditorLeft">
    <keyboard-shortcut first-keystroke="left" />
    <keyboard-shortcut first-keystroke="alt h" />
  </action>
  <action id="EditorLeftWithSelection">
    <keyboard-shortcut first-keystroke="shift left" />
    <keyboard-shortcut first-keystroke="shift alt h" />
  </action>
  <action id="EditorLineEnd">
    <keyboard-shortcut first-keystroke="end" />
    <keyboard-shortcut first-keystroke="alt 4" />
  </action>
  <action id="EditorLineEndWithSelection">
    <keyboard-shortcut first-keystroke="shift end" />
    <keyboard-shortcut first-keystroke="shift alt 4" />
  </action>
  <action id="EditorLineStart">
    <keyboard-shortcut first-keystroke="home" />
    <keyboard-shortcut first-keystroke="alt 0" />
  </action>
  <action id="EditorLineStartWithSelection">
    <keyboard-shortcut first-keystroke="shift home" />
    <keyboard-shortcut first-keystroke="shift alt 0" />
  </action>
  <action id="EditorNextWordWithSelection">
    <keyboard-shortcut first-keystroke="shift ctrl right" />
    <keyboard-shortcut first-keystroke="shift ctrl alt l" />
  </action>
  <action id="EditorPreviousWordWithSelection">
    <keyboard-shortcut first-keystroke="shift ctrl left" />
    <keyboard-shortcut first-keystroke="shift ctrl alt h" />
  </action>
  <action id="EditorRight">
    <keyboard-shortcut first-keystroke="right" />
    <keyboard-shortcut first-keystroke="alt l" />
  </action>
  <action id="EditorRightWithSelection">
    <keyboard-shortcut first-keystroke="shift right" />
    <keyboard-shortcut first-keystroke="shift alt l" />
  </action>
  <action id="EditorSelectWord">
    <keyboard-shortcut first-keystroke="ctrl w" />
    <keyboard-shortcut first-keystroke="alt w" />
  </action>
  <action id="EditorUp">
    <keyboard-shortcut first-keystroke="up" />
    <keyboard-shortcut first-keystroke="alt i" />
  </action>
  <action id="EditorUpWithSelection">
    <keyboard-shortcut first-keystroke="shift up" />
    <keyboard-shortcut first-keystroke="shift alt i" />
  </action>
  <action id="NextSplitter">
    <keyboard-shortcut first-keystroke="shift alt n" />
  </action>
  <action id="NextTab">
    <keyboard-shortcut first-keystroke="alt right" />
    <keyboard-shortcut first-keystroke="alt equals" />
  </action>
  <action id="PopupHector" />
  <action id="PrevSplitter">
    <keyboard-shortcut first-keystroke="shift alt p" />
  </action>
  <action id="PreviousTab">
    <keyboard-shortcut first-keystroke="alt left" />
    <keyboard-shortcut first-keystroke="alt minus" />
  </action>
  <action id="ShowReformatFileDialog" />
  <action id="Annotate">
      <keyboard-shortcut first-keystroke="ctrl alt 0" />
    </action>
  <action id="SplitHorizontally">
    <keyboard-shortcut first-keystroke="shift alt o" />
  </action>
  <action id="SplitVertically">
    <keyboard-shortcut first-keystroke="shift alt e" />
  </action>
  <action id="TabShiftActions.ShiftUp" />
  <action id="hg4idea.QPushAction" />
</keymap>

IntelliJ IDEA: change open with (associated application) preference - Stack Overflow

java doc 不自动格式化

/**
// @formatter:off
  {
    "a":"b"
  }
// @formatter:on
*/
public void name() {

}

intellij idea - How to disable code formatting for some part of the code using comments? - Stack Overflow

激活 spring 环境

1	-Dspring.profiles.active=dev

202201270913347

Live Templates

logd
log.info("[$CLASS_NAME$#$METHOD_NAME$]: $END$");

logi
log.info("[$CLASS_NAME$#$METHOD_NAME$]: $END$");

logw
log.warn("[$CLASS_NAME$#$METHOD_NAME$]: $END$", e);

loge
log.error("[$CLASS_NAME$#$METHOD_NAME$]: $END$", e);

表格

| name       | age |
| ---------- | --- |
| LearnShare | 12  |
| Mike       | 32  |

name	age
LearnShare	12
Mike	32

第二行的破折线，至少需要 3 个。

实现换行

在一段文字的后面添加两个空格
自动就换行了。

外部链接

Markdown 语法整理

将 GitBook 转成 PDF 或者 EPUB 格式电子书 - 简书

函数

箭头函数

如果箭头函数只有一行语句，且不需要返回值，可以采用下面的写法，就不用写大括号了。

1	let fn = () => void doesNotReturn();

箭头函数有几个使用注意点。
（1）函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。
（2）不可以当作构造函数，也就是说，不可以使用 new 命令，否则会抛出一个错误。
（3）不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
（4）不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。

定义时所在的作用域 & 运行时所在的作用域

// 箭头函数可以让setTimeout里面的this，绑定定义时所在的作用域，而不是指向运行时所在的作用域。下面是另一个例子。

function Timer() {
  this.s1 = 0;
  this.s2 = 0;
  // 箭头函数
  setInterval(() => this.s1++, 1000);
  // 普通函数
  setInterval(function() {
    this.s2++;
  }, 1000);
}

var timer = new Timer();

setTimeout(() => console.log("s1: ", timer.s1), 3100);
setTimeout(() => console.log("s2: ", timer.s2), 3100);
// s1: 3
// s2: 0

// 上面代码中，Timer函数内部设置了两个定时器，分别使用了箭头函数和普通函数。前者的this绑定定义时所在的作用域（即Timer函数），后者的this指向运行时所在的作用域（即全局对象）。所以，3100 毫秒之后，timer.s1被更新了 3 次，而timer.s2一次都没更新。

箭头函数里面根本没有自己的 this，而是引用外层的 this。
除了 this，以下三个变量在箭头函数之中也是不存在的，指向外层函数的对应变量：arguments、super、new.target。
另外，由于箭头函数没有自己的 this，所以当然也就不能用 call()、apply()、bind()这些方法去改变 this 的指向。

尾调用

只有不再用到外层函数的内部变量，内层函数的调用帧才会取代外层函数的调用帧，否则就无法进行“尾调用优化”。

空位

for…of 并没有忽略它们；
entries()、keys()、values()、find()和 findIndex()会将空位处理成 undefined；
由于空位的处理规则非常不统一，所以建议避免出现空位。

对象

Object.assign 拷贝的属性是有限制的，
只拷贝源对象的自身属性（不拷贝继承属性），也不拷贝不可枚举的属性（enumerable: false）。

有四个操作会忽略 enumerable 为 false 的属性。

for…in 循环：只遍历对象自身的和继承的可枚举的属性。
Object.keys()：返回对象自身的所有可枚举的属性的键名。
JSON.stringify()：只串行化对象自身的可枚举的属性。
Object.assign()：忽略 enumerable 为 false 的属性，只拷贝对象自身的可枚举的属性。

for…in 会返回继承的属性，可以通过配置enumerable为false来避免toString和length属性被遍历。
总的来说，操作中引入继承的属性会让问题复杂化，大多数时候，我们只关心对象自身的属性。所以，尽量不要用 for…in 循环，而用 Object.keys()代替。

Promise

Promise 新建后就会立即执行。
Promise 对象 - ECMAScript 6 入门

Promise 对象的报错具有传递性。
Promise 对象 - JavaScript 教程 - 网道

jQuery

组合查找

tag和属性

$(‘input[name=”email”]’); // 找到input下的name=”email”的标签；

tag和class

$(‘tr.red’); // 找出…

多项选择器

用符号”,”隔开
$(‘p,div’); // 把

、

都选择出来。
注意选择出来的元素按照在HTML中的顺序排列的，不会有重复的元素。

层级选择器

如果两个DOM元素据有层级关系，就用$('parent child')来选择，层级之间用空格隔开。
其中，parent和child可以是父子关系，也可以是祖孙关系。

好处：缩小了选择的范围，因为首先要定位父节点，才能选择相应的子节点。

子选择器

$(‘parent>child’)
其中，parent和child必须是父子关系（直属父子关系）；

查找和过滤

向下层查找：使用find()函数，其中的参数表示同上面的选择器所需要的一样；
向上层查找：使用parent()函数。
同层查找：使用next()或者prev()方法。可以包含参数，也可以不要参数。

操作DOM

$(‘#id’).text() 获取节点文本
$(‘#id’).html() 获取原始HTML

传入参数直接修改内容

$(‘#id’).text(‘new’);
$(‘#id’).html(‘new‘);

获取class

$(‘#id’).css(‘color’);

设置class

$(‘#id’).css(‘color’, ‘red’);
$(‘#id’).css(‘backgroundColor’, ‘red’);
$(‘#id’).css(‘background-color’, ‘red’);

$(‘#id’).hasClass(‘hightlight’);
$(‘#id’).addClass(‘hightlight’);
$(‘#id’).removeClass(‘hightlight’);

显示和隐藏DOM

$(‘#id’).hide(); // 隐藏
$(‘#id’).show(); // 显示

获取DOM信息

$(‘#id’).width();
$(‘#id’).height();

操作属性:

$(‘#id’).attr(‘name’); // 获取属性
$(‘#id’).attr(‘name’, ‘hello’); // 设置属性
$(‘#id’).removeAttr(‘name’); // 移除属性

注意：针对radio 和 selected 要区别处理（例如使用prop），最好使用is(':selected')这样的方式；
http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434500494451273e6b3dec9d411d9ba841dee8caec45000

操作表单

获取value: input.val();
设置value: input.val(‘newValue’);

修改DOM结构

添加子节点

在子节点最后添加：
$(‘#div’).append(‘

Lua

‘);

在子节点前面添加：
$(‘#div’).append(‘

Lua

‘);

在同级节点添加：
$(‘#div’).after(‘

Java

‘);
$(‘#div’).before(‘

Java

‘);

删除节点

$(‘#div’).remove(); // 删除了id为div的节点

事件

http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143564690172894383ccd7ab64669b4971f4b03fa342d000#0

鼠标事件
键盘事件
其他事件（focus, blur, change, submit, ready）
在head中的script中设置了DOM的事件监听，却没有生效，原因是：
因为JavaScript在此执行的时候，设置的对象尚未载入浏览器，所以获取的DOM为[]，所以事件并没有绑定到任何DOM上。
解决办法是：
将绑定事件的过程放在document的ready中执行
1
2
3
4
5
6
7
<script>
$(document).on('ready', function(){
$('#testForm').on('submit', function(){
alert('Submit');
});
})
</script>
另一种简单处理方式（上面的代码简写）：
1
2
3
4
5
$(function(){
$('#testForm').on('submit', function(){
alert('Submit');
});
})

事件触发条件

例如：监听文本框的内容变动

var input = $('#test-input');
input.change(function () {
    console.log('changed...');
});

通过js代码改变其值，并不会触发事件，我们可以通过手动调用change()方法来触发；

1
2
3

var input = $('#test-input');
input.val('change it!');
input.change();

input.change()相当于input.trigger('change')

浏览器安全限制

只有用户触发才能执行

// 无法弹出新窗口，将被浏览器屏蔽
$(function(){
    window.open('/');
})

// 正常执行
var button1 = $('#testPopupButton1');
function popupTestWindow() {
    window.open('/');
}
button1.click(function () {
    // 正常执行
    popupTestWindow();

    // 延迟执行的`window.open()`方法会被浏览器限制；
    setTimeout(popupTestWindow, 100);
});

jQuery动画

常用动画

div.show(300);
div.hide(300);
div.toggle(300);
div.slideDown(300);
div.slideUp(300);
div.slideToggle(300);
div.fadeIn(300);
div.fadeOut(300);
div.fadeToggle(300);

自定义动画

div.animate({
        // 最后的状态
    }, 300, function(){
        // 动画结束后的操作
});

jQuery扩展

编写jQuery插件原则：

给$.fn绑定函数，实现插件的代码逻辑；
插件函数最后要return this, 以支持链式调用；
插件函数要有默认值，绑定在$.fn.<pluginName>.defaults上；
用户在调用时可传入设定值以便覆盖默认值；

错误处理

对于 try catch finally结构的处理方式，需要注意：
一旦错误发生，就不再向后进行，但是前面已经执行成功的，则保持住了，如下代码；

<script type="text/javascript">
    var r1=0;
    var r2=null;
    var r3=0;
    var r4=0;
    try{
        r1 = 1;
        r2.kk;
        r3 = 3;
    } catch (e) {
        console.log(e);
    } finally {
        r4 = 4;
    }

    console.log('r1=' + r1);
    console.log('r2=' + r2);
    console.log('r3=' + r3);
    console.log('r4=' + r4);
</script>>

输出结果是：

r1=1 // r1已经执行成功了，（注意：不像java中的处理方式，如果出错了所有的都失效）
r2=null
r3=0
r4=4

HTML中易混淆概念

不要胡乱嵌套标签

1 2	- <p>里面不可以嵌套<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等 - a元素里不可以嵌套交互式元素(<a>、<button>、<select>等)

HTML元素嵌套嵌套错误可能引起的问题

CSS中易混淆概念

发表于 2017-02-17

轮廓（outline）的宽度是否影响元素尺寸？

在盒子模型里，元素的尺寸依赖于：边距，边框，填充，内容。

outline 属性与 border 属性不同：outline不是元素尺寸的一部分，元素的总宽度和高度不受轮廓宽度的影响。
轮廓不被视为页面的一部分，因此在应用它们时不会导致页面布局被调整。
http://www.w3cschool.cn/css/html-css-outline.html

ps:当宽度很宽时，outline直接覆盖到其他元素了。
通过颜色透明度来观察会更清晰：outline:52px solid #80aaaaaa;
（可以在http://www.w3cschool.cn/tryrun/showhtml/trycss3_outline-offset这个实验里修改更大的宽度和颜色看看。）

浮动和清除浮动

clear属性指定元素两侧不能出现浮动元素。
CSS Float（浮动）

1
2
3

- 假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边
  (如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
- clear属性只对当前被作用的标签有效，不能影响其他元素；

经验分享：CSS浮动(float,clear)通俗讲解

常见的块级元素和内联元素

块级元素：

- div
- p
- h1, h2, h3, ..., h6
- ul
- table

内联元素：

- span
- b
- td
- a
- img

下拉菜单

http://www.w3cschool.cn/css/xohvqfmc.html

《JavaScript权威指南》笔记

发表于 2017-02-16

注：笔记是倒序排列的。

| node的helloworld程序：

//! program.js
// 通过在命令行输入`node program.js`来运行，然后在浏览器中打开网址`127.0.0.1:8080`来访问
var http = require('http');

var server = new http.Server();
server.listen(8080);
server.on('request', function(request, response){
  console.log(request.url); //打印请求网址
  response.write("Hello World!");
  response.end();
});

| Rhino，一种用Java编写的JavaScript解释器。在mozilla/rhino: Rhino is an open-source implementation of JavaScript written entirely in Java中具体研究。

| Web浏览器之外的两种运行环境

第十二章：服务器端JavaScript

| 解构赋值右侧的数组所包含的元素不必和左侧的变量一一对应，左侧多余的变量的赋值为undefined，右侧多于的值则会被忽略。左侧的变量列表可以包含连续的逗号用以跳过右侧对应的值。–p275

| 通过var声明的变量在函数内都是可用的，而通过let声明的变量则只属于就近的花括号括起来的语句块。–p272

第十一章：JavaScript的子集和扩展

| RegExp方法

exec()：exec()方法对一个指定的字符串执行一个正则表达式。lastIndex属性会在设置了g修饰符后起作用。 –p264 –p265
test(字符串)：对字符串进行检测，如果包含有一个匹配，则返回true；

| String支持4种正则表达式用法。–p262

String.search(/正则/); 如果参数不是正则，则通过RegExp构造正则对象；
String.replace(/正则/, “代替换文本”); 如果第一个参数是字符串，则直接搜索该字符串而不是构造成正则表达式。第二个参数可以是函数，该函数能够动态地计算替换字符串；
String.match(/正则/); 最常用的正则方法；
String.split(/正则/); 参数可以是字符串也可以是正则；

| 正则表达式修饰符：出现在第二条斜线之外的字符。 –p261

1
2
3

i 不区分大小写
g 全局匹配
m 多行模式的匹配

| 锚字符：–p261

^ 匹配字符串开头
$ 匹配字符串结尾
\b 匹配单词的边界
\B 匹配非单词边界
(?=p) 零宽正向先行断言，要求接下来字符都与p匹配
(?!p) 零宽负向先行断言，要求接下来字符不与p匹配

| 非贪婪匹配（尽可能少地匹配）：在匹配的字符后跟随一个问号。–p257

| 重复：–p257

{n, m} （至少n次，不能超过m次）
{n, } （匹配前一项n次到多次）
{n} 匹配前一项n次
? 0次或多次
+ 1次或多次
* 0次或多次

| 字符类：将直接量字符单独放进方括号[]内就组成了字符类。 –p256

| 在正则表达式中，具有特殊含义的标点符号：–p255

1	^ $ . * + ? = ! : \| \ / ( ) [ ] { }

| ECMAScript 5 规范做了同ECMAScript 3相反的规定，同一段代码所表示的正则表达式直接量的每次运算都返回新的对象。–p254

| 创建正则表达式：

使用RegExp()构造函数来创建；
使用正则表达式直接量语法（包含在一对斜杠之间的字符）；

第十章：正则表达式

| 模块，导出API：

返回构造函数； –p251
通过new来直接调用模块函数； –p252
框架提供的导出模块API方法； –p252

| 模块化，实现代码的重用。–p248

| 锁定原型对象的一个使用场合：阻止枚举类型enumeration()属性的变化（修改和删除）。在Object.freeze()方法调用之前所做的设置都是生效可用的。 –p244

| Object.freeze()和Object.seal的功能一样，都会把对象的属性设置为只读和不可配置的。–p244

| Object.defineProperty()和Object.defineProperties()可以用来创建新特性，也可以用来修改已有属性的特性。 –p242

| ECMAScript 5给对象的扩展性增加了限制（方法支持：setter、getter、可枚举性、可写性、可配置性），其新特性使类更加健壮。 –p239

Object.defineProperty();
Object.defineProperties();
Object.seal();
Object.preventExtensions();
Object.create();
Object.freeze();
Object.getOwnPropertyDescriptor();

| var str = JSON.stringify(o);将对象转化为json字符串，
JSON.parse(str)，将字符串转化为对象，但是该对象不具有和o对象相同的继承结构。 –p222

| 鸭式辨型不能应用于内置类，比如不能通过quacks(o, Array)来检测o是否实现了Array中的所有同名方法。原因是内置类的方法都是不可枚举的（for/in操作无法遍历）。–p217

| 在JavaScript中，类的实现是基于其原型继承机制的。–p201

第九章：类和模块

| 需要给f()传入一个参数，所以使用f()的 ()方法；
需要给g()传入多个参数，所以使用g()的apply()方法； –p197 –p189

| 可以通过new Function()构造方法的方式来定义函数（另外两种定义方式：1.函数定义语句；2. 函数直接量表达式）。Function构造函数创建的是一个匿名函数，不需要指定函数名。–p192

| 书写闭包的时候还需要注意一件事，this是JavaScript的关键字，而不是变量。

| 函数的执行依赖于变量作用域，这个作用域是在函数定义时决定的，而不是函数调用时。 –p182

| 直接调用匿名函数

1 2	(function(){console.log("我是匿名函数，我被调用")}()); (function(x){console.log("我是匿名函数，我被调用=>" + x)})(3);

注意：function之前的左圆括号是必需的，如果不写这个左圆括号，JavaScript解释器会视图将关键字function解析为函数定义表达式。

| 调用函数中的函数：

// 函数中的函数
function a(){
  console.log("我是a");
  return b;
}

function b(){
  console.log("我是b");
  return c;
}

function c(){
  console.log("我是c");
}

a()()(); // => 我是a /n 我是b /n 我是c

| argument[]对象适用场合：函数包含固定个数的命名和必须的参数，以及随后个数不定的可选实参。–p175

| JavaScript针对实参的默认检查行为：省略的实参都是undefined，多出的实参会自动省略。–p174

| 标识符arguments是指向实参对象的引用，实参对象是一个类数组对象。可以通过下标来访问传入的实参值。例如：argeuments[0]表示第一个参数，arguments.length()表示实参数组的长度。–p174

| this是一个关键字，不是变量，也不是属性名。JavaScript的语法不允许给this赋值。–p171

| 任何函数只要作为方法调用实际上都会传入一个隐士的实参——这个实参是个对象，方法调用的母体就是这个对象。–p170

| 函数定义表达式/函数声明语句
函数声明语句：ECMAScript规范只是允许它们作为顶级语句。可以出现在全局代码里，或者内嵌在其他函数中，不能出现在循环，条件判断，或者try/catch/finally中。
函数定义表达式：可以出现在JavaScript代码的任何地方。 –p168

第八章：函数

| 对于字符串var a = "test"虽然可以通过a[0]的方式获取字符（很类似于数组的获取方式），但是字符串不是数组：Array.isArray(a) === false。

| Array.indexOf()和Array.lastIndexOf()：
参数1：需要搜索的值。
参数2：指定数组中的一个索引，从那里开始搜索。（可选的，如果省略则从头开始搜索；如果是负数，则表示相对末尾的偏移量） –p160

| Array.reduce()需要两个参数：
参数1：执行化简操作的函数。
参数2：传递给函数的初始值（可选的）。

| forEach无法在所有元素都传递给调用的函数之前终止遍历。可以通过抛异常的方式来中断。–p156

| JavaScript中函数和方法的区别
函数：是可执行的JavaScript代码块，由JavaScript程序定义或JavaScript实现预定义。
方法：是通过对象调用的JavaScript函数。
（一个方法无非是个保存在一个对象的属性里的JavaScript。–p169）
（如果函数挂载在一个对象上，作为对象的一个属性，就称它为对象的一个方法。当通过这个对象来调用函数时，该对象就是此次调用的上下文，也就是该函数的this值–p165）
方法是用来对this对象进行操作的，this对象是方法的一个重要属性，当this对象出现在方法主体内部，this值就指向调用该方法的对象。而函数通常是独立的，并不需要经常使用this对象。

| Array.push(a)和Array.pop()，均修改原数组本身。 –p154

|Array.splice()，对元素本身做修改。

参数1：指定插入或删除的起始位置；
参数2：指定了应该从数组中删除的元素个数。（为0时不删除任何元素）
后续参数：要插入的元素；

| Array.concat()不会递归扁平化数组的数组。concat()也不会修改调用的数组。

| Array.reverse()操作的是原数组，对原数组进行重新排列。
例如：

1
2
3

var a = [1, 2, 3];
a.reverse().join("-"); // => 1-2-3
a // =>[3, 2, 1]

| Array.join()，用什么字符来拼接数组中的元素。例如：[1, 2, 3].join(-)的结果是1-2-3；

| 在数组尾部压入一个元素，与给数组a[a.length]赋值是一样的。

1
2
3

var a = [];
a.push("one"); // ["one"]
a[a.length] = "two"; // ["one", "two"]

| 在数组直接量中省略值时不会创建稀疏数组。省略的元素在数组中是存在的，其值为undefined。 –p147

var a1 = [,,,]; // 数组是[undefined, undefined, undefined]
var a2 = new Array(3); // 该数组根本没有元素
0 in a1 // => true: a1在索引0处有一个元素——undefined。？？？，在Chrome56.0中，其值为false；而如果a1=[undefined, undefined, undefined]，该结果是true
0 in a2 // => false: a2在索引0处没有元素

| 数组最大能容纳2^32-1=4 294 967 295个元素。

| 非标准的方法：以两条下划线作前缀，两条下划线做后缀的方法。例如：__lookupGetter__()、__lookupSetter__()。–p138

第七章

| 基于兼容性考虑，不推荐使用__proto__，IE和Opera尚未实现它。 –p139

| Object.defineProperty(对象, 要创建或修改的属性名称, 属性描述符对象)方法可以用来设置属性的特性、新建属性的某种特性。
属性描述符：{value: 1, writable: true, enumerable: false, configurable: true}，不必包含所有4个特性，例如:{value:2}；
对于新创建的属性来说，默认的特性值是false或undefined。 –p136

| 对象直接量:var a = {x:1, y:2}
对象直接量是一个表达式，每次运算都创建并初始化一个新对象，如果在一个重复调用的函数中的循环体内使用了对象直接量，它将会创建很多新对象；–p
120
http://www.cnblogs.com/jiuyi/p/4226903.html

| 严格模式（”use strict”是ECMAScript 5引入的一条指令）

1
2
3

// c = "dd"; // 在`use strict`之前没有任何表达式
"use strict" // 被当作指令
d = "d1"

1
2
3

c = "dd";
"use strict" // 被当作普通的表达式语句对待。
d = "d1";

| 严格模式存在的意义：修正了语言的重要缺陷，并提供健壮的查错功能和增强的安全机制。 –p115

| with的用法

// ==> with测试
var o = {x:1};
console.log(o); // => {x:1}
with(o) x = 12;
console.log(o); // => {x: 12}: with语句可以用来修改对象中属性的值。

var o = {};
with(o) x = 13;
console.log(o); // => {}:with提供了一种读取o的属性的快捷方式，但是不能创建o的属性。
console.log(x); // => 13:如果o没有属性x, 则相当于这段代码相当于`x=13`

| 在严格模式下是禁止使用with语句的，并且在非严格模式下也是不推荐的，尽量避免使用with语句。(难优化，运行的慢) –p113

| 通过prompt("msg")的方式，从浏览器客户端获取用户输入。
通过alert("msg")的方式弹出消息。

| 如果抛出异常的函数没有处理它的try/catch/finally语句，异常将向上传播到调用该函数的代码。如果没有找到任何异常处理程序，JavaScript将把异常当作程序错误来处理。–p110

| return语句只能在函数体内出现，否则会报语法错误。 –p109

| 函数，可以通过两种方式来定义： –p62, p57，p95

// 方式1--函数定义表达式：
var square = function(x){ return x * x;}
// 方式2--函数声明语句：
function square(x){
  return x * x;
}

两者的区别是：

使用var，只有变量声明提前了–变量的初始化代码仍然在原来的位置。
使用函数声明语句的话，函数名称和函数体均提前。

举个例子：

// ==>函数声明提前测试；
// 在函数初始化之前调用
console.log("代码定义之前调用=============");
// f1(); // =>TypeError: f1 is not a function
f2(); // => f2

// 函数定义的地方
var f1 = function(){console.log("f1")}
function f2(){console.log("f2")}

console.log("代码定义之后调用=============");
f1(); // => f1
f2(); // => f2

整体被显示地“提前”到了脚本或函数的顶部。

| 函数体内局部变量会声明提前，并且会覆盖同名的全局变量 –p58

将函数内的变量声明“提前”至函数体顶部，同时变量初始化留在原来的位置。

| JavaScript中，if,else的匹配规则是，else总是和就近的if语句匹配。 –p97

JavaScript中没有块级作用域。 –p93

delete:一些内置核心和客户端属性是不能删除的，用户通过var语句声明的变量不能删除。–p89

三元运算符的使用场合： –87
如果有定义就使用定义过的，如果没有定义则使用默认值。

1	var greeting = "hello" + (username ? username : "there");

为什么会有下面这种用法？p.x的执行依赖于p，如果不使用这种“&&”的方式，那么会抛出类型错误异常。–p80

1 2	var p = null; p && p.x

假值是false, null, undefined, 0, -0, NaN和""，所有其他的值包括对象都是真值。 –p79

所有小写的ASCII字母都“大于”大写的ASCII字母。 – p77

数组也是对象

1	typeof [] === "object"; // =>true

只有在x等于NaN时，表达式x!==x成立。 –p75

true在比较的过程中会转换为1.

1 2	1 == true // => true 2 == true // => false

NaN和其他任何值都是不相等的（包括它本身）。 –p75

位操作移动的位数的范围是：0-31.
为什么？因为位运算符要求它的操作数是整数，这些整数表示为32位整型而不是64位浮点型； -p73

在JavaScript中，所有的数字都是浮点型的，除法运算的结果也是浮点型的。–p70

如果操作数是NaN，那么操作结果也是NaN。–p70

所有无法转换成数字的操作数在进行算术运算时，都转换成NaN。 –p70

结合性：一元运算符，赋值和三元条件运算符都具有从右至左的结合性。 –p69

注意：当属性名是通过运算得出的值而不是固定的值的时候，使用方括号写法。 –p64

点式的写法更简单（相比较于方括号），但是访问的属性名称必须是合法的标识符，并且需要知道属性的名字。 –p63

对于属性名称中包含空格的情况，可以通过[]来表示，例如：

1 2	var p = {"ni hao" : "hello"}; p["ni hao"] // => hello

对象直接量中的属性名称可以是字符串而不是标识符。–p62

数组直接量中的列表逗号之间的元素可以省略，省略的空位会填充 undefined。
数组直接量的元素列表结尾可以留下单个逗号，这时并不创建一个新的undefined对象。 –p62

在开头添加一行字符串use strict;可以开启严格模式；

同名的变量名，局部的会覆盖全局的。注意声明提前。

始终使用var来声明变量（不要隐藏var）。 –p56

new Boolean(false)是一个对象，而不是原始值。所以以下代码会打印出1:

var c = new Boolean(false);
if(c){
  console.log(1);
} else {
  console.log(2);
}

依照术语的叫法，对象值都是引用，对象的比较均是引用的比较：当且仅当他们引用同一个基对象时，他们才相等。–p48

JavaScript中的字符串相等：
当且仅当他们的长度相等，且每个索引的字符都相等时. –p47

JavaScript对象是一种复合值：它是属性或已命名值的集合。 –p46
属性值可以是方法名。通过o.m()的方式进行调用。

任意JavaScript的值都可以转换成布尔值。

undefined
null
0
-0
NaN
"" // 空字符串

所有其他值，包括所有对象（数组）都会转换成true. –p43

在两条斜线之间的文本构成了一个正则表达式直接量。

舍入误差的解决方案：使用整数“分”而不要使用小数“元”进行基于货币单位的运算。 –p38

二进制浮点数表示法并不能精确表示类似0.1这样的简单数字。 –p37

除了作为除数外0和-0是一模一样的。

var zero = 0;
var negz = -0;
zero === negz; // => true
1/zero === 1/negz; // => false: 正无穷大和负无穷大不一样

– p37

当且仅当x为NaN时，表达式x != x为true；–p37

无穷大值在进行加减乘除运算后，结果还是无穷大。

JavaScript中的算术运算在溢出、下溢、被零整除时不会报错：

1 2	3 / 0 = Infinity; -3 / 0 = -Infinity;

–p36

八进制（不推荐使用八进制，在ECMAScript 6的严格模式下，8进制是明令禁止的）：
0377是八进制；
0378是十进制；（可以通过console来验证） –p35

浮点数范围（采用IEEE 754标准）：
最大值（无限远离0）：+- 1.7976931348623157 x 10^308
最小值（无限接近0）：+- 5.0 x 10^-324
–p34

数字直接量：一个数字直接出现在JavaScript程序中。
在任何数字直接量前添加-符号，可以得到它们的负值。但负号是一元求反运算符，并不是数字直接量语法的组成部分。p34

JavaScript中的所有数字均用浮点数值表示。

不在任何函数内声明的变量称作全局变量，它在JavaScript程序中的任何地方都是可见的。
在函数内声明的变量具有函数作用域，并且只在函数内可见。 –p34

可选的分号

在JavaScript中，分割语句的分号是可选的。
JavaScript并不是在所有换行处都填补分号：只有在缺少了分号就无法正确解析代码的情况下，JavaScript才会填补分号；
例外1：注意：在return, break, continue和随后的表达式之间不能换行（会自动添加分号）。
例外2：在涉及++, --的时候，既可以作为前缀也可以作为后缀。如果作为后缀表达式，则应当放在同一行。

数据类型

在编程语言中，能够表示并操作的值的类型称作数据类型。

在技术上讲，只有JavaScript对象才能拥有方法。然而数字，字符串和布尔值也可以拥有自己的方法。
在JavaScript中只有null和undefined是无法拥有方法的；

本书的风格和《Effective Java》很类似

《JavaScript权威指南》笔记

2012年4月第1版 2016年9月第17次印刷。

书中的错误

| p75
结果应该是相等，这条和第四条关于NaN的描述存在矛盾。

如果两个值都是null或者都是undefined，则它们不相等。 => 则他们相等

| p77

则需要首先将字符串转全部换为小写字母 => 则需要首先将字符串全部转换为小写字母

| p113

width、debugger和use strict => with、debugger和use strict

| p159

为了简单起见，到目前位置 => 到目前为止

| p168

try/cache/finally => try/catch/finally

| p177

数组a中必须为数字、null和undefined的元素都将忽略。 => 、修改为,

| p203

prototye属性 => prototype

| p204

var r = range(1, 3); => var r = new Range(1, 3);

| p205

冠以关键字mew => 冠以关键字new

| p213

但我们常常会忽觉原型上的constructor属性。 => 但我们常常会忽略原型上的constructor属性。

| p260

/\s\Javas/ => /\sJava\s/

| p260

带有“(?!”的断言是负向先行断言，用以指定接下来的字符都不必匹配。
=> 带有“(?!”的断言是负向先行断言，用以指定接下来的字符都不匹配。

| p263

接下来对exec()方法的讨论中会提到：
=> 接下来对exec()方法的讨论中会提到。

Cordova相关

发表于 2016-12-29

一个坑

运行环境

1 2	java: jdk1.8 cordova: 6.4.0

通过cordova build android的方式自动编译打包程序时，
Manifest文件会被重新生成。

我给第一个Activity设置了屏幕不反旋转的属性android:screenOrientation="portrait"，但是自动生成的过程中，总会将这行代码自动删除了。

解决办法是：找一个不含该属性的Activity放在第一个位置。

覆盖安装APP，assets文件不更新问题

症状

用cordova生成的app，其中的assets文件夹中保存的是前端文件www。如果修改前端代码，
覆盖安装app后，其前端代码未生效（原生代码是生效了的）。

解决办法

在activity中调用 getAssets()方法；
更新版本号；（对于有些机型来说，相同version的app不会更新assets文件，也不可降级覆盖安装。）

相信通过上面两个步骤可以解决掉大部分机型的覆盖安装问题；

open file with context.getAssets() on each startup of the app, when upgrade the app,
first launch it and after that check if file has change.
Its seems that until you access the file, it is not extracted from the apk to
/data/data/<your-package>/

cordova 后台切换到前台触发back返回按键

问题描述：
现在app处在前台，这时候来了一个qq消息或者微信消息，点击通知后再次回来app的时候，会触发返回按键
这样就有可能会莫名其妙地将之前的编辑操作给毁掉了。

解决办法：
思路是这样的，当离开app的时候，设置一个标志表示现在处于后台了，
当再次返回来的时候，先检测之前的标志是否在后台，如果是，则不处理返回按键的逻辑；
如果不是，则正常执行返回按键的逻辑。

var isAppInFront = true;

document.addEventListener('pause', function(){
    isAppInFront = false;
}, false);

document.addEventListener('resume', function(){
    setTimeout(function(){
        isAppInFront = true;
    }, 200) // 注意需要延时，否则拿到的标志一直是true
}, false);

document.addEventListener('backbutton', function(){
    // 程序不在前台运行，不响应
    if(!isAppInFront) return;

    // 其他点按返回按键的逻辑
}

参考资料：

javascript - how to check app running in foreground or background in ionic/cordova/phonegap - Stack Overflow

cordova插件

社交类：
QQ：https://github.com/iVanPan/Cordova_QQ
微信：https://github.com/xu-li/cordova-plugin-wechat
微博：https://github.com/iVanPan/cordova_weibo
参考网址：http://blog.csdn.net/jcy472578/article/details/50718951

二维码扫描：https://github.com/phonegap/phonegap-plugin-barcodescanner
热更新插件：https://github.com/nordnet/cordova-hot-code-push/

Cordova - 从相册中选择照片并上传，以及拍照上传:
http://www.hangge.com/blog/cache/detail_1181.html

1
2
3

cordova plugin add cordova-plugin-camera
cordova plugin add cordova-plugin-file
cordova plugin add cordova-plugin-file-transfer

常用命令

卸载 cordova: npm uninstall -g cordova
安装 cordova: npm install -g cordova
安装指定版本 cordova: npm install -g cordova@6.4.0

Javascript的全选、全不选、反选逻辑实现

发表于 2016-12-28

实现目标

当用户勾上“全选”时，自动选中所有语言，并把“全选”变成“全不选”；

当用户去掉“全不选”时，自动不选中所有语言；

当用户点击“反选”时，自动把所有语言状态反转（选中的变为未选，未选的变为选中）；

当用户把所有语言都手动勾上时，“全选”被自动勾上，并变为“全不选”；

当用户手动去掉选中至少一种语言时，“全不选”自动被去掉选中，并变为“全选”。

代码实现

<html>
<head>
	<script src="http://code.jquery.com/jquery-3.1.1.js">
	</script>
    <script type="text/javascript">
        'use strict';
        $(function () {
            var
                form = $('#test-form'),
                langs = form.find('[name=lang]'),
                selectAll = form.find('label.selectAll :checkbox'),
                selectAllLabel = form.find('label.selectAll span.selectAll'),
                deselectAllLabel = form.find('label.selectAll span.deselectAll'),
                invertSelect = form.find('a.invertSelect');

            // 重置初始化状态:
            form.find('*').show().off();
            form.find(':checkbox').prop('checked', false).off();
            deselectAllLabel.hide();
            // 拦截form提交事件:
            form.off().submit(function (e) {
                e.preventDefault();
                alert(form.serialize());
            });

            selectAll.on('change', function(e){

                langs.get().map(function(x){$(x).prop('checked', this.checked);});

                if(this.checked){
                    selectAllLabel.hide();
                    deselectAllLabel.show();
                } else {
                    selectAllLabel.show();
                    deselectAllLabel.hide();
                }
            });

            // 校验所有的 input
            function checkAll(){
              // 获取所有input的checked个数
              var count = 0;
              langs.get().map(function(x){
                if($(x).prop('checked')){
                  count = count+1;
                }
              });
              if(count === 0) {
              } else if (count === inputs.length){
                // 当用户把所有语言都手动勾上时，“全选”被自动勾上，并变为“全不选”；
                selectAll.prop('checked', true);

                selectAllLabel.hide();
                deselectAllLabel.show();
              } else {
                // 当用户手动去掉选中至少一种语言时，“全不选”自动被去掉选中，并变为“全选”。
                selectAll.prop('checked', false);

                selectAllLabel.show();
                deselectAllLabel.hide();
              }
            }
            invertSelect.click(function(x){
                langs.get().map(function(x){
                    $(x).prop('checked', !($(x).prop('checked')));
                    checkAll();
                });
            });

            // 设置所有input的监听事件
            var inputs = langs.get();
            inputs.map(function(x){
                $(x).change(function(){
                  checkAll();
                });
            });

        });
    </script>>
</head>

<body>
  Hello, Lou!
  <br/><br/><br/><br/>

 <!-- HTML结构 -->
<form id="test-form" action="test">
    <legend>请选择想要学习的编程语言：</legend>
    <fieldset>
        <p>
        <label class="selectAll">
            <input type="checkbox">
            <span class="selectAll">全选</span>
            <span class="deselectAll">全不选</span>
        </label>
        <a href="#0" class="invertSelect">反选</a>
        </p>
        <p><label><input type="checkbox" name="lang" value="javascript"> JavaScript</label></p>
        <p><label><input type="checkbox" name="lang" value="python"> Python</label></p>
        <p><label><input type="checkbox" name="lang" value="ruby"> Ruby</label></p>
        <p><label><input type="checkbox" name="lang" value="haskell"> Haskell</label></p>
        <p><label><input type="checkbox" name="lang" value="scheme"> Scheme</label></p>
        <p><button type="submit">Submit</button></p>
    </fieldset>
</form>


</body>

</html>

参考资料

事件 - 廖雪峰的官方网站