先来个简单的公式

NodeJS = Foundation + V8 Engine + JS API

如果我们仔细看一下Node的源码,其中有23.8%的C++,5.6%的C,还有64.5%的JS.
Foundation中包含几大核心, File(文件操作),Network(网络),Event(事件驱动),Stream(流的概念),Module(模块系统). 这几块无一不是C/C++实现的.JS的解释器V8Engine更是C/C++实现的,别忘了Chrome可能是世界上最大的C/C++项目了.

Foundtion既然是C++实现的,那么在各个操作系统上的实现肯定不一样了.你可以想想一下读取Linux上的文件和Win10上的文件的C++代码肯定不一样, 而且你的C++代码需要调用操作系统的C++API才能实现功能. 据我所知,大部分的操作系统都是用C/C++写成的.

JS API可能是通用的,因为Node为我们实现了一套C->JS的bridge,这样Node开发组的同学就可以用JS做一些API的封装和抽象.而社区里写npm package的同学可以只使用JS API 就可以做一些工具包了. 因为Foundation 和 V8Engine 已经接受了多年业界的考验. 在此感谢Google和社区默默贡献的C/C++程序员.

一句话经验

computed干什么用

1. 动态数据计算,不确定数据有没有

   1 2 3 4 5 6 7 8 9

   computedTagId: function(){ vm = this; // 如果第三个品类选择不存在, 那么是-1 if(vm.tagIdLevel3 == -1){ return vm.tagIdLevel2; } else { return vm.tagIdLevel3; } },

2. 动态dom选择,不确定dom节点没有没有

   1 2	$licenceDate: () => $(".licence_validateDate"), $speDate: () => $(".spe_pmt_validateDate")

$refs

1. 不同组件之间的 \$refs 不混用, 可以重名, 你也可以访问到父级的 \$refs 可以理解为是个树的结构
   $refs 是个Object, 可以遍历. 可以.xx 和 [xx]
2. ref 放在什么东西上就是什么, reference的意思

1
2
3
4
5

// this.$refs['username'] 就是个dom对象
<div ref="username"></dom>

// this.$refs.city 就是个vue组件(vue instance)
<auto-select ref="city"></auto-select>

最近面试发现很多新人对DOM Event甚至DOM 都不怎么了解.在此科普一下
浏览器厂商和W3C标准为广大的JS开发者准备了写什么. 浏览器开发是业界公认的开发难度仅次于操作系统的项目,google和mozilla都排出了顶级的工程师参与开发,并诞生了 webkit和v8 engine等伟大的开源项目应用在PC和移动端,微软也从标准的阻碍者逐渐变成了标准追随者(⊙﹏⊙)b

DOM Document Object Model

DOM 并不只是针对 JavaScript 的,很多别的语言也都实现了 DOM.

• DOM0: 历史基准点并不存在
• DOM1: 映射文档的结构, DOM Core + DOM HTML
• DOM2: 在DOM1的基础上增加了
• • DOM Event: 定义了事件和事件处理的接口
• • DOM Style: 定义了基于 CSS 为元素应用样式的接口
• • DOM Traversal and Range: 定义了遍历和操作文档树的接口
• DOM3: 引入了以统一方式加载和保存文档的方法和验证文档的方法. DOM3 级也对 DOM 核心进行了扩展

基本也反应了一个HTML语言和CSS语言的发展阶段, 各个浏览器大厂在规范下做自己的实现.

SVG,MathML,SMIL 都属于其他DOM标准,看浏览器的支持情况了.

Require.JS 定义和发现机制

很多jquery插件的头部都写成了这种样式,这种叫UMD,它支持AMD和CommonJS规范，同时还支持古老的全局模块模式。

关于AMD,CMD,CommonJS及UMD规范可以看这里.require.js和angular自带的使用的是标准的AMD方式.

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

(function (factory) {
    if (typeof exports === "object" && exports &&
        typeof module === "object" && module && module.exports === exports) {
        // Browserify. Attach to jQuery module.
        factory(require("jquery"));
    } else if (typeof define === 'function' && define.amd) {
		// AMD. Register as an anonymous module.
		define(['jquery'], factory);
	} else {
		// Browser globals
		factory(jQuery);
	}
}(function ($) {
	//插件主体 一堆堆function
}))

moment.js 的头部则写成了这样,和上面都是UMD方案,都是为了让开发者在node端,浏览器端,浏览器+loader的情况下都可以使用到自己的模块.

1
2
3
4
5
6
7
8
9
10

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
    global.moment = factory()
}(this, function () { 'use strict';
	// function 1
	// …
	// function n
	return moment;
}))

因为

1. 如果都是用define定义的模块,那么不用在shim
2. 如果不是用define写的模块,又有依赖,比如 jquery.datepair 依赖 jquery,需要写在shim中.

shim的英文是垫片的意思,有类似转接环的概念.将非AMD方式定义的组件转义过来

1
2
3
4
5
6
7

require.config({
	shim: {
    'jquery.datepair':{
      'deps': [’jquery’,'datepair’] //需要写明依赖
    },
  }
});

加载非规范的模块

理论上，require.js加载的模块，必须是按照AMD规范、用define()函数定义的模块。但是实际上，虽然已经有一部分流行的函数库（比如jQuery）符合AMD规范，更多的库并不符合。
那么，require.js是否能够加载非规范的模块呢？
回答是可以的。

这样的模块在用require()加载之前，要先用require.config()方法的shim属性专门用来配置不兼容的模块。
举例来说，underscore和backbone这两个库，都没有采用AMD规范编写。如果要加载它们的话，必须先定义它们的特征。

deps[] 是他的的依赖,dependencies 的意思
shim的英文是垫片的意思,有类似转接环的概念.

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

require.config({
	shim: {
		'underscore':{
			exports: '_'
		},
		'backbone': {
			deps: ['underscore', 'jquery'],
			exports: 'Backbone'
		},
		'jquery.scroll': {
		　　deps: ['jquery'],
		　　exports: 'jQuery.fn.scroll'
		}
	}
});

require.js 几个大概念

1. config() 配置依赖
2. define() 定义模块
3. require() 使用模块

define 一般自己用, 先声明配置,然后下面使用配置. 而且define一个模块的时候也可以引入依赖包,可以返回对象或者funtion,也可以给模块define一个名字

• Definition Functions with dependencies
• Definition a Module as a Functions or Object (Function 还是 Object 看业务需要,Object有的时候子对象也是function)
• Define a Module with a name (不推荐,因为module name和目录相关)

1
2
3
4
5
6
7
8
9
10

define(["my/cart", "my/inventory"],
    function(cart, inventory) {
        //return a function to define "foo/title".
        //It gets or sets the window title.
        return function(title) {
            return title ? (window.title = title) :
                   inventory.storeName + ' ' + cart.name;
        }
    }
);

config一般和require一起用, config 定义好依赖之后, require可以直接使用它, require.js 会帮你加载你需要的依赖.

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

requirejs.config({
    // 默认目录, require.js 会按相对目录去加载
    baseUrl: 'js/lib',
    paths: {
        app: '../app'
    }
});

// Start the main app logic.
requirejs(['jquery', 'canvas', 'app/sub'],
function   ($,        canvas,   sub) {
    //jQuery, canvas and the app/sub module are all
    //loaded and can be used here now.
});

JavaScript Regular Expressions

正则学习的难点,违反直觉的地方

1. 大量的缩写, 你可以写一堆,但也可以写一个 例如\w=[a-zA-Z0-9_]
2. 几个核心概念 anchors,meta,quantifiers,group
3. 反义词不是 !开始 例如[\d]单字必须是数字 [^\d] 单子不是数字和 [\D]是一个功能
4. group的嵌套关系 \$0, \$1, \$2, \$n \$0是整体(如果命中的话), \$n 是你定义的第几个()group
5. js 的 RegExp 支持的比较有限, 很多正则的高级用法并不支持

加班

来MT第一次出差,然后连续加班6天.时间密度大概是平时的3倍.
大公司果然还是套路深, 如果想往上混除了必须拼或者表现的非常拼之外, 还需要经常搞校友资源和公司的资源, 然后技术的精进反而放到了一边. 大家都是想着怎么快速的把项目解决掉, 代码质量如何不怎么考虑. 非核心产品性能也不怎么考虑, 核心产品很多时候也是靠硬件堆出来的性能.

组织大了,项目如果初期搭的不好, 后期有没有拿出时间来重构的话, 会给后续维护的人带来很大的挫败感. 尤其很多的时候公司自己的轮子,或者和项目绑定的很紧的框架又会给大家带来很多困扰. 如何一边迭代一遍解耦是所有的前端工程师都面对的问题. 无论FE还是iOS

跑步

健身一直坚持, 一周3个5km. 周末如果陪孩子出去玩,我也换上运动装备全称跑步. 跑步让人高兴, 头脑清晰, 会容易冲动. 我跑步的时候会看一些国外越野跑比赛, 比如 UTMB - 环勃朗峰越野跑比赛的视频, 很令人振奋,能多跑个50%左右

最近荒废了总结, 学习也没有很明确的方向, 参加了一次线下iOS峰会之后.才感觉找回来点状态, 还来鸡血还要不断的打才行. :P

读了一本书,精进-如何成为一个很厉害的人. 感觉还不错,之后做点摘抄放在这里.推荐给了老婆读一读

Learn And Study 学习和开发计划

• RACBabyDoodle
  • iOS Animation 应用
  • BabyDoodleAdm 后台项目 leancloud
• typescript 项目实战
  • webpack & babel & 前端 工具链 的一些配置
  • typescript 高阶用法 以及实战
• Vue h5组件
  • Vue 如何用一个组件
  • Vue 如何写一个组件
  • Angular 实战学习 图书阅读, 思考和Vue的不同
• 前段学习
  • typescript
  • Angular2
  • FrontMaster JS 基础学习,总结blog 等等
• Lego 翻译和报道
  • 公众号文章

TL;DR

断断续续做iOS开发也有5年时间了,中间不务正业的搞了2年JS.回过头来在看iOS的变化非常的快.虽然swift也在学习,面向protocol和struct编程嘛.但感觉Objective-C的很多知识点的深层次原理没有彻底搞懂. 收到业界一些大牛的启发和指导, 有人持续写刨根问底系列, 有人做架构对比分析, 微观的也好,宏观的也好. 本系列文章也想从自己的角度尝试理解一些问题, 将一些之前忽视的花朵重新拾起来品玩, 说不定有新的发现. 捎带写一些自己的感受, 希望让自己活得明白一些.

Apply & Call Argument

call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的，换句话说，就是为了改变函数体内部 this 的指向。因为 JavaScript 的函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。

二者的作用完全一样，只是接受参数的方式不太一样。例如，有一个函数 func1 定义如下：

1

var func1 = function(arg1, arg2) {};

就可以通过 func1.call(this, arg1, arg2); 或者 func1.apply(this, [arg1, arg2]); 来调用。其中 this 是你想指定的上下文，他可以任何一个 JavaScript 对象(JavaScript 中一切皆对象)，call 需要把参数按顺序传递进去，而 apply 则是把参数放在数组里。

JavaScript 中，某个函数的参数数量是不固定的，因此要说适用条件的话，当你的参数是明确知道数量时，用 call，而不确定的时候，用 apply，然后把参数 push 进数组传递进去。当参数数量不确定时，函数内部也可以通过 arguments 这个数组来便利所有的参数。

1
2
3
4
5
6
7
8
9
10

function splat(fun){
	return function(array){
		return fun.apply(null,array); // null 没有上下文,等待参数传入
		// apply 只能接收数组类型的参数
	}
}

var addArrayElements = splat(function(x, y){ return x + y});
addArrayElements([1,2]);
// 3