Html

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth 的相关属性:

属性	定义
scrollHeight	获取对象的滚动高度
scrollLeft	设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop	设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth	获取对象的滚动宽度
offsetHeight	获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft	获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop	获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX	相对文档的水平座标
event.clientY	相对文档的垂直座标
event.offsetX	相对容器的水平坐标
event.offsetY	相对容器的垂直坐标

// document.documentElement.scrollTop 垂直方向滚动的值
// event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

gongyishang djfjf
JS控制滚动条的位置：
window.scrollTo(x,y);
竖向滚动条置顶(window.scrollTo(0,0);
竖向滚动条置底 window.scrollTo(0,document.body.scrollHeight)

切图：将P设计师的SD设计图转换成Web静态页面

随着JavaScript程序逐渐模块化，在ECMAScript 6推出官方的模块处理方案之前，模块处理有两种方案在实践中广泛采用：一种是AMD模块规范，针对模块的异步加载，主要用于浏览器端；另一种是CommonJS规范，针对模块的同步加载，主要用于服务器端，即node.js环境。
Browserify是一个node.js模块，主要用于改写现有的CommonJS模块，使得浏览器端也可以使用这些模块。
Browserify的主要作用是将CommonJS模块转为浏览器可以调用的格式

函数式编程 VS 面向对象编程（OOP）：
函数式编程中通过对变化的值创建新副本来解决改变值的问题
高阶函数要么将函数作为参数，要么返回函数，或者两者都有。
闭包是通过引用其他函数来保持该函数作用域的现象。

互联网通信协议HTTP协议，是一个无状态协议

一个正则表达式模式使用括号，将导致相应的子匹配被记住

(?:x) 匹配 x 不会捕获匹配项。这被称为非捕获括号（non-capturing parentheses）。匹配项不能够从结果数组的元素 [1], …, [n] 或已被定义的 RegExp 对象的属性 $1, ...,$ 9 再次访问到。

x(?=y) 只有当 x 后面紧跟着 y 时，才匹配 x。

x(?!y) 只有当 x 后面不是紧跟着 y 时，才匹配 x。

数组的slice(start, end)函数参数的记忆方法：从start开始直到end

箭头函数完全修复了this的指向，this总是指向词法作用域，也就是外层调用者
Arrow Function是 Lexical scoping, this指向定义Arrow Function时外围, 而不是运行时的对象
词法作用域就是定义在词法阶段的作用域，是由写代码时将变量和块作用域写在哪里来决定的
无论函数在哪里被调用，也无论它如何被调用，它的词法作用域都只由函数被声明时所处的位置决定
简而言之，词法作用域是在定义时确定的，而动态作用域是在运行时确定的
HTML是用来存储网页内容的，CSS是用来定义这些内容的显示样式的，而JavaScript是用来创造丰富的页面效果或者网页应用的。
但是，如果从浏览器的范畴去理解“JavaScript”这个术语，它包含了截然不同的两个方面。一个是JavaScript的核心语言（ECMAScript），另一个是DOM（文档对象模型）。
参考自：这里

WeakMap对象也是键值对的集合。它的键必须是对象类型，值可以是任意类型。
集合对象允许根据值删除元素，而数组中必须使用基于下标的splice方法
集合对象存储不重复的值，所以不需要手动处理包含重复值的情况

剩余元素和展开元素相反，展开元素会“展开”数组变成多个元素，剩余元素会收集多个元素和“压缩”成一个单一的元素。

对象

对象属性：

一个对象的属性名可以是任何有效的 JavaScript 字符串，或者可以被转换为字符串的任何类型，包括空字符串。
for...in语句中使用方括号标记以枚举一个对象的所有属性。
从 ECMAScript 5 开始，有三种原生的方法用于列出或枚举对象的属性：

for...in 循环该方法依次访问一个对象及其原型链中所有可枚举的属性。
Object.keys(o) 该方法返回一个对象 o 自身包含（不包括原型中）的所有属性的名称的数组。
Object.getOwnPropertyNames(o) 该方法返回一个数组，它包含了对象 o 所有拥有的属性（无论是否可枚举）的名称。

创建对象：

你可以通过对象初始化器（Object Initializer）创建对象(通过字面值创建对象。)。
或者你可以创建一个构造函数并使用该函数和 new 操作符初始化对象。
对象也可以用 Object.create() 方法创建。该方法非常有用，因为它允许你为创建的对象选择其原型对象，而不用定义一个构造函数。

对象方法：

一个属性的值可以是函数，这种情况下属性也被称为方法。因此，一个方法是关联到某个对象的函数。定义方法就像定义普通的函数，除了它们必须被赋给对象的某个属性。

继承：

基于原型的继承机制

对象比较：

在 JavaScript 中 objects 是一种引用类型。两个独立声明的对象永远也不会相等，(即使他们有相同的属性)，只有在比较一个对象和这个对象的引用时，才会返回true.

任何对象都可以作为另一个对象的原型__proto__ 属性决定了用于返回属性值的原型链。如果想在运行时修改一个对象的属性值并且希望该值被所有该对象的后代所继承，您就不能在该对象的构造器函数中定义该属性。而应该将该属性添加到该对象所关联的原型中。

React

React入门教程：点击这里

没法在JSX中使用 if-else 语句，因为 JSX 只是函数调用和对象创建的语法糖
通过ref获取真实DOM节点 <input type="text" ref="username" />

//下面4种方式(两种方法)都可以通过ref获取真实DOM节点
var ReactDOM = require('react-dom');
//getDOMNode()方法
var usernameDOM = this.refs.username.getDOMNode();  
var usernameDOM = this.refs['username'].getDOMNode();
//findDOMNode()方法  
var usernameDOM = ReactDOM.findDOMNode(this.refs.username);  
var usernameDOM = ReactDOM.findDOMNode(this.refs['username']);

render：这个方法对于我们来说肯定很熟悉。每个组件必须定义有这个方法，它负责返回单个根 HTML 节点（该节点内部可以有很多字节点）

//React组件的PropTypes属性校验
React.createClass({
  propTypes: {
    // 可以声明 prop 为指定的 JS 基本类型。默认
    // 情况下，这些 prop 都是可传可不传的。
    optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,

    // 所有可以被渲染的对象：数字，
    // 字符串，DOM 元素或包含这些类型的数组。
    optionalNode: React.PropTypes.node,

    // React 元素
    optionalElement: React.PropTypes.element,

    // 用 JS 的 instanceof 操作符声明 prop 为类的实例。
    optionalMessage: React.PropTypes.instanceOf(Message),

    // 用 enum 来限制 prop 只接受指定的值。
    optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),

    // 指定的多个对象类型中的一个
    optionalUnion: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
      React.PropTypes.instanceOf(Message)
    ]),

    // 指定类型组成的数组
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

    // 指定类型的属性构成的对象
    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),

    // 特定形状参数的对象
    optionalObjectWithShape: React.PropTypes.shape({
      color: React.PropTypes.string,
      fontSize: React.PropTypes.number
    }),

    // 以后任意类型加上 `isRequired` 来使 prop 不可空。
    requiredFunc: React.PropTypes.func.isRequired,

    // 不可空的任意类型
    requiredAny: React.PropTypes.any.isRequired,

    // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接
    // 使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。
    customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error('Validation failed!');
      }
    }
  },
});

Math.exp(Math.log(x)/n);

CSS

问题描述:

在less中 calc(100% -4rem) 等带单位混合运算会被less解析忽略单位，全部按照百分比计算，此例中的计算被less编译成calc(96%)。

原因分析:

less的计算方式跟calc方法有重叠，两者在一起有冲突

解决方案:

/*以下两种方法皆可*/
width:e("calc(100% - 4rem)");
width:calc(~"100% - 4rem");

同时应用以下属性可实现溢出文本显示省略号的效果

text-overflow:ellipsis; 

white-space:nowrap; 

overflow:hidden;

text-overflow: ellipsis; 在 display: flex; 元素上是没有效果的。

弹性布局：
相邻的弹性元素其外边距不会互相合并
justify-content
align-items -> align-self
align-content (伸缩行)

Express

Express本质是一系列middleware的集合

Webpack

和直接在命令行里运行 webpack 不同的是，webpack-dev-server会把编译后的静态文件全部保存在内存里，而不会写入到文件目录内。

Other

递归最重要的就是找到相同的规律，以及递归结束的边界条件

Monad就是一种设计模式，表示将一个运算过程，通过函数拆解成互相连接的多个步骤。你只要提供下一步运算所需的函数，整个运算就会自动进行下去。

感谢发明计算机的人，让我们这些剪刀加浆糊的学术土匪变成了复制加粘贴版的学术海盗。

前端路上的见闻:(一)