2016 年 06 月，学习总结 about demo HOT 21 OPEN

06 月 01 日

Webpack

• jshint-loader。

module.exports = {
    // ...

    module: {
        preLoaders: [{
            test: /\.js?$/,
            include: './src/',
            exclude: /node_modules/,
            loader: 'jshint-loader'
        }]
    },

    // any jshint option http://www.jshint.com/docs/options/
    jshint: {
        camelcase: true,
        eqeqeq: true,
        undef: true
    }
};

from demo.

06 月 02 日

JS

来源：《JavaScript权威指南》。

创建数组

• 数组字面量的语法允许有可选的结尾的逗号，故 [ , , ] 只有两个元素而非三个。

数组元素的读和写

• 数组是对象的特殊形式。JS 将制定的数字索引值转换成字符串（索引 1 变成 “1”），然后将其作为属性名来使用；
• 数组的特别之处在于数组会自动维护其 length 属性值；
• 使用负数或非整数来索引数组，这时数值会转换为字符串并作为属性名使用。如果凑巧使用的是非负整数的字符串，则会被当做数组索引，而非对象索引。

a[-1.23] = true;    // 将创建一个名为“-1.23”的属性
a["1000"] = 0;      // 这是数组的第1001个元素
a[1.000]            // 和a[1]相等

from demo.

06 月 03 日

JS

数组的长度

• 数组赋值，如果索引 i 大于或等于现有数组长度，length 属性的值会被设置为 i+1；
• 设置数组的 length 小于当前长度的非负整数 n 时，当前数组中索引值大于或等于 n 的元素都会被删除。

数组元素的添加和删除

• push() 方法会在数组末尾增加一个或多个元素，pop() 方法则使减少长度 1 并返回被删除元素的值；
• unshift() 方法会在数组的首部插入一个元素，shift() 方法则是从头部删除一个元素，所有元素下移；
• delete 方法也是删除一个元素，但不会修改数组的 length 属性；
• splice() 方法是一个通用的方法来插入、删除或替换数组元素。

from demo.

06 月 04 日

CSS

• 文字分割线的三种方法

from demo.

06 月 05 日

Shell

• rm 的 -f 参数表示不需要再确认；
• cp -rf ./ /var/www 表示把当前目录下的所有文件复制到 /var/www 目录下。

from demo.

06 月 06 日

JS

数组的方法

• join() 方法，将数组元素转化成字符串并连接起来，返回字符串；
• reverse() 方法，将数组元素颠倒顺序，会改变原来的数组；
• sort() 方法，将数组元素进行排序，会改变原来的数组；
• concat() 方法，合并数组元素，创建并返回一个新的数组；
• slice() 方法，返回指定数组的一个片段，返回的数组包含第一个参数指定的位置和所有到但不含第二个参数指定的位置直接的所以数组元素；
• splice() 方法，插入或删除元素的通用方法，会改变原来的数组；
• push() & pop()，在数组尾部添加或删除元素；
• unshift() & shift()，在数组头部添加或删除元素；
• toString() & toLocaleString()，输出用逗号分隔的字符串列表。

Shell

• vi README.md 表示编辑一个文件；
• 按 / 表示搜索，输入 /css 表示搜索 css 关键字。按 n 搜索下一个；
• 按 i 进入 insert 状态，表示编辑；
• 编辑完成，按 Esc ，在底部输入 :wq 保存文件并退出编辑。

from demo.

06 月 07 日

JS

ES5 中数组的方法

• forEach() 方法，为每个元素调用指定的元素，会改变原来的数组。无法在所有元素都传递给调用的函数之前终止遍历，不像 for 循环有 break 语句；
• map() 方法，将每个元素传递给指定的元素，并返回一个新的数组，不会改变调用的数组。

Git

• 查看本地存在的 tag：git tag -l；
• 切换到某个 tag：git checkout tag_name。

from demo.

06 月 08 日

JS

ES5 中数组的方法

• filter() 方法，返回一个数组，里面包含满足回调函数的要求的元素；
• every() 方法，当且仅当数组中所有元素调用判断函数都返回 true，它才返回 true；
• some() 方法，至少有一个元素调用判定函数返回 true，它就返回 true；
• indexOf() 方法和 lastIndexOf() 方法，搜索整个数组中具有给定值的元素，返回找到的第一个元素的索引，如果没有找到则返回 -1。indexOf() 从头至尾搜索，而 lastIndexOf() 则反向搜索。

from demo.

06 月 09 日

Shell

远程 linux 服务器

• 使用 ssh 命令，user 是用户名，server 是服务器 IP 地址，然后输入密码。

$ ssh user@server

scp 上传下载文件

• 上传文件，使用 scp 命令，如果是文件夹需加 -r 参数；

$ scp /path/test.php user@server:/path
$ scp -r /path/demo user@server:/path

• 下载文件，跟上传文件类似，只不过把顺序调换了一下。

$ scp user@server:/path/test.php /path
$ scp -r user@server:/path/demo /path

from demo.

06 月 10 日

Shell

• 复制命令：Ctrl + Shift + C 组合键；
• 粘贴命令：Ctrl + Shift + V 组合键。

from demo.

06 月 11 日

Git

• Git 同步 fork 的代码

from demo.

06 月 12 日

JS

检测对象属性

• in 运算符，如果是自有属性或继承属性则返回 true；
• hasOwnPreperty() 方法，自有属性返回 true，继承属性或不存在的属性返回 false；
• propertyIsEnumerable() 方法，是hasOwnPreperty() 方法的增强版，只有检测到是自有属性且这个属性的可枚举性为 true 它才返回 true。

from demo.

06 月 13 日

JS

• 《JavaScript权威指南》第 6 章 对象，模糊不理解，需多阅读。

from demo.

06 月 14 日

JS

函数

• 如果嵌套函数作为方法调用，其 this 的值指向调用它的对象；
• 如果嵌套函数作为函数调用，其 this 值不是全局对象（非严格模式下）就是 undefined（严格模式下）。

Zepto

Touch events

touch 模块添加以下事件，可以使用 on 和 off。

• tap 元素 tap 触发，如果不检测单击、双击可直接使用，没有 300ms 烦恼；
• singleTap 和 doubleTap 分别检测元素的单击和双击；
• longTap，当一个元素被按住超过750ms触发；
• swipe、swipeLeft、swipeRight、swipeUp 和 swipeDown，当元素被划过时触发。

$('#box').on('swipeLeft', function() {
    console.log('向左手势');
});

from demo.

06 月 18 日

Socket.io

• Get Started: Chat application

from demo.

06 月 19 日

JS

• console 输入 window.location，可获取到想要的 url 信息。

from demo.

06 月 20 日

JS

• 《JavaScript权威指南》，第 8 章 函数。

from demo.

06 月 21 日

JS

• 函数闭包。

from demo.

06 月 23 日

JS

• 《JavaScript权威指南》第 8 章 函数，模糊不理解，需多阅读。

from demo.

06 月 24 日

gulp

• copy。以前是用 gulp-contrib-copy，后面发现根本不需要。This is copy:

gulp.task('copy:img', function() {
    return gulp.src('src/images/**/*.{png,gif,jpg,jpeg}')
        .pipe(gulp.dest('distimages'));
});

from demo.

06 月 25 日

Canvas

• 获取 canvas；

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

• 设置绘制状态；

context.moveTo(100, 100);   // 将画笔移动到(100, 100)坐标上
context.lineTo(700, 700);   // 将画笔画到(700, 700)坐标上

context.lineWidth = 5;            // 线条宽度
context.strokeStyle = '#ff0000';  // 线条颜色

• 绘制

context.stroke();

• 填充颜色

context.fillStyle = 'blue';
context.fill();

• 注意：如果要画两个不相关联的线条，则需为两个绘制状态设置初始和结束路径，否则会导致状态被覆盖的情况。

// 设置第一条线的状态
context.beginPath();
context.moveTo(100, 100);
context.lineTo(700, 700);
context.closePath();

context.lineWidth = 5;
context.strokeStyle = '#ff0000';
context.stroke();

context.beginPath();
context.moveTo(200, 100);
context.lineTo(700, 600);
context.closePath();

context.strokeStyle = 'green';
context.stroke();

from demo.