前端路上的见闻:(一)

冷不防 2022-07-12 17:43 169阅读 0赞

## HTML ##

`getBoundingClientRect`方法的返回值是一个包含`width height top right bottom left`的对象:

var rect = document.querySelector('.div1').getBoundingClientRect()

HTML精确定位: `scrollLeft,scrollWidth,clientWidth,offsetWidth`：

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">定义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><code>scroll</code></td> 
   <td align="left">将窗口滚动到自左上角起指定的 x 和 y 偏移量。</td> 
  </tr> 
  <tr> 
   <td align="left"><code>scrollBy</code></td> 
   <td align="left">将窗口滚动 x 和 y 偏移量。</td> 
  </tr> 
  <tr> 
   <td align="left"><code>scrollTo</code></td> 
   <td align="left">将窗口滚动到指定的 x 和 y 偏移量。</td> 
  </tr> 
  <tr> 
   <td align="left"><code>scrollHeight</code></td> 
   <td align="left">获取对象的滚动高度</td> 
  </tr> 
  <tr> 
   <td align="left"><code>scrollLeft</code></td> 
   <td align="left">设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离</td> 
  </tr> 
  <tr> 
   <td align="left"><code>scrollTop</code></td> 
   <td align="left">设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离</td> 
  </tr> 
  <tr> 
   <td align="left"><code>scrollWidth</code></td> 
   <td align="left">获取对象的滚动宽度</td> 
  </tr> 
  <tr> 
   <td align="left"><code>offsetHeight</code></td> 
   <td align="left">获取对象相对于版面或由父坐标 <code>offsetParent</code> 属性指定的父坐标的高度</td> 
  </tr> 
  <tr> 
   <td align="left"><code>offsetLeft</code></td> 
   <td align="left">获取对象相对于版面或由 <code>offsetParent</code> 属性指定的父坐标的计算左侧位置</td> 
  </tr> 
  <tr> 
   <td align="left"><code>offsetTop</code></td> 
   <td align="left">获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置</td> 
  </tr> 
  <tr> 
   <td align="left"><code>event.clientX</code></td> 
   <td align="left">相对文档的水平座标</td> 
  </tr> 
  <tr> 
   <td align="left"><code>event.clientY</code></td> 
   <td align="left">相对文档的垂直座标</td> 
  </tr> 
  <tr> 
   <td align="left"><code>event.offsetX</code></td> 
   <td align="left">相对容器的水平坐标</td> 
  </tr> 
  <tr> 
   <td align="left"><code>event.offsetY</code></td> 
   <td align="left">相对容器的垂直坐标</td> 
  </tr> 
  <tr> 
   <td align="left"><code>document.documentElement.scrollTop</code></td> 
   <td align="left">垂直方向滚动的值</td> 
  </tr> 
  <tr> 
   <td align="left"><code>event.clientX+document.documentElement.scrollTop</code></td> 
   <td align="left">相对文档的水平座标+垂直方向滚动的量</td> 
  </tr> 
 </tbody> 
</table>

JS控制滚动条的位置：

// 语法
    window.scrollTo(x,y);
    // 竖向滚动条置顶
    (window.scrollTo(0,0);
    // 竖向滚动条置底
    window.scrollTo(0,document.body.scrollHeight)

在某个位置插入内容`Element.insertAdjacectHTML`

HTML中Node对象部分属性：

<table> 
 <thead> 
  <tr> 
   <th>编号</th> 
   <th align="left">属性名</th> 
   <th align="left">含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1</td> 
   <td align="left">Attributes</td> 
   <td align="left">存储节点的属性列表(只读)</td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td align="left">childNodes</td> 
   <td align="left">存储节点的子节点列表(只读)</td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td align="left">dataType</td> 
   <td align="left">返回此节点的数据类型</td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td align="left">Definition</td> 
   <td align="left">以DTD或XML模式给出的节点的定义(只读)</td> 
  </tr> 
  <tr> 
   <td>5</td> 
   <td align="left">Doctype</td> 
   <td align="left">指定文档类型节点(只读)</td> 
  </tr> 
  <tr> 
   <td>6</td> 
   <td align="left">documentElement</td> 
   <td align="left">返回文档的根元素(可读写)</td> 
  </tr> 
  <tr> 
   <td>7</td> 
   <td align="left">firstChild</td> 
   <td align="left">返回当前节点的第一个子节点(只读)</td> 
  </tr> 
  <tr> 
   <td>8</td> 
   <td align="left">Implementation</td> 
   <td align="left">返回XMLDOMImplementation对象</td> 
  </tr> 
  <tr> 
   <td>9</td> 
   <td align="left">lastChild</td> 
   <td align="left">返回当前节点最后一个子节点(只读)</td> 
  </tr> 
  <tr> 
   <td>10</td> 
   <td align="left">nextSibling</td> 
   <td align="left">返回当前节点的下一个兄弟节点(只读)</td> 
  </tr> 
  <tr> 
   <td>11</td> 
   <td align="left">nodeName</td> 
   <td align="left">返回节点的名字(只读)</td> 
  </tr> 
  <tr> 
   <td>12</td> 
   <td align="left">nodeType</td> 
   <td align="left">返回节点的类型(只读)</td> 
  </tr> 
  <tr> 
   <td>13</td> 
   <td align="left">nodeTypedValue</td> 
   <td align="left">存储节点值(可读写)</td> 
  </tr> 
  <tr> 
   <td>14</td> 
   <td align="left">nodeValue</td> 
   <td align="left">返回节点的文本(可读写)</td> 
  </tr> 
  <tr> 
   <td>15</td> 
   <td align="left">ownerDocument</td> 
   <td align="left">返回包含此节点的根文档(只读)</td> 
  </tr> 
  <tr> 
   <td>16</td> 
   <td align="left">parentNode</td> 
   <td align="left">返回父节点(只读)</td> 
  </tr> 
  <tr> 
   <td>17</td> 
   <td align="left">Parsed</td> 
   <td align="left">返回此节点及其子节点是否已经被解析(只读)</td> 
  </tr> 
  <tr> 
   <td>18</td> 
   <td align="left">Prefix</td> 
   <td align="left">返回名称空间前缀(只读)</td> 
  </tr> 
  <tr> 
   <td>19</td> 
   <td align="left">preserveWhiteSpace</td> 
   <td align="left">指定是否保留空白(可读写)</td> 
  </tr> 
  <tr> 
   <td>20</td> 
   <td align="left">previousSibling</td> 
   <td align="left">返回此节点的前一个兄弟节点(只读)</td> 
  </tr> 
  <tr> 
   <td>21</td> 
   <td align="left">Text</td> 
   <td align="left">返回此节点及其后代的文本内容(可读写)</td> 
  </tr> 
  <tr> 
   <td>22</td> 
   <td align="left">url</td> 
   <td align="left">返回最近载入的XML文档的URL(只读)</td> 
  </tr> 
 </tbody> 
</table>

//页面当前获得焦点的元素，判断是否与React所获得的真实DOM相同
    ReactDOM.findDOMNode(this.refs["amountContentBool"+i]) == document.activeElement
    // 格式化货币数值，返回的为String类型
     function formatMoney(number, places, symbol, thousand, decimal) { 
        number = number || 0;
        places = !isNaN(places = Math.abs(places)) ? places : 2;
        symbol = symbol !== undefined ? symbol : "$";
        thousand = thousand || ",";
        decimal = decimal || ".";
        var negative = number < 0 ? "-" : "",
            i = parseInt(number = Math.abs(+number || 0).toFixed(places), 10) + "",
            j = (j = i.length) > 3 ? j % 3 : 0;
        return symbol + negative + (j ? i.substr(0, j) + thousand : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousand) + (places ? decimal + Math.abs(number - i).toFixed(places).slice(2) : "");
    }

Sources是一般的功能开发中最常用到也是最有用的功能面板，它里面的许多功能对于我们开发前端工程来说是非常有帮助的。

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

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

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

随着JavaScript程序逐渐模块化，在ECMAScript 2015 推出官方的模块处理方案之前，模块处理有两种方案在实践中广泛采用：一种是AMD模块规范，针对模块的异步加载，主要用于浏览器端；另一种是CommonJS规范，针对模块的同步加载，主要用于服务器端，即node.js环境。  
Browserify是一个node.js模块，主要用于改写现有的CommonJS模块，使得浏览器端也可以使用这些模块。  
Browserify的主要作用是将CommonJS模块转为浏览器可以调用的格式  
exports 和 module.exports 的区别了：  
module.exports 初始值为一个空对象 \{\}  
exports 是指向的 module.exports 的引用  
require() 返回的是 module.exports 而不是 exports

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

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

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

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

箭头函数完全修复了`this`的指向，`this`总是指向词法作用域，也就是外层调用者  
Arrow Function是 Lexical scoping, `this`指向定义Arrow Function时外围, 而不是运行时的对象

词法作用域就是定义在词法阶段的作用域，是由写代码时将变量和块作用域写在哪里来决定的  
无论函数在哪里被调用，也无论它如何被调用，它的词法作用域都只由函数被声明时所处的位置决定，简而言之，词法作用域是在定义时确定的，而动态作用域是在运行时确定的  
单页应用程序（即 SPA）

HTML是用来存储网页内容的，CSS是用来定义这些内容的显示样式的，而JavaScript是用来创造丰富的页面效果或者网页应用的。

但是，如果从浏览器的范畴去理解“JavaScript”这个术语，它包含了截然不同的两个方面。一个是JavaScript的核心语言（ECMAScript），另一个是DOM（文档对象模型）。  
参考自：[这里][Link 1]

ES2015 <=> ES6

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

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

## 对象： ##

### 对象属性： ###

一个对象的属性名可以是任何有效的 JavaScript 字符串，或者可以被转换为字符串的任何类型，包括空字符串。  
`for...in`语句中使用方括号标记以枚举一个对象的所有属性。  
从 ECMAScript 5 开始，有三种原生的方法用于列出或枚举对象的属性：  
\- `for...in` 循环  
该方法依次访问一个对象及其原型链中所有可枚举的属性。  
\- `Object.keys(o)`  
该方法返回一个对象 o 自身包含（不包括原型中）的所有属性的名称的数组。  
\- `Object.getOwnPropertyNames(o)`  
该方法返回一个数组，它包含了对象 o 所有拥有的属性（无论是否可枚举）的名称。

### 创建对象： ###

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

### 对象方法： ###

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

### 继承： ###

基于原型的继承机制  
JS中的继承和原型链  
构造函数中的`this`关键字，它就代表了新创建的实例对象。  
实例对象一旦创建，将自动引用**prototype对象**的属性和方法。也就是说，实例对象的属性和方法，分成两种，一种是本地的，另一种是引用的。  
对构造函数使用`new`运算符，就能生成实例，并且`this`变量会绑定在实例对象上。  
Javascript规定，每一个构造函数都有一`个prototype`属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。  
任何一个**prototype对象**都有一个`constructor`属性，指向它的构造函数  
任何对象都可以作为另一个对象的原型  
**proto** 属性决定了用于返回属性值的原型链。  
如果想在运行时修改一个对象的属性值并且希望该值被所有该对象的后代所继承，您就不能在该对象的构造器函数中定义该属性。而应该将该属性添加到该对象所关联的原型中。

### 对象比较： ###

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

# 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;` 元素上是没有效果的。

# 其他 #

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

终端命令

sudo lsof -i :9000

COMMAND   PID    USER   FD      TYPE             DEVICE                      SIZE/OFF      NODE       NAME
    Java              716      a           313u   IPv6               0x1111111111111     0t0                    TCP        *:cslistener (LISTEN)

然后根据PID杀进程：`sudo kill -9 716`

**没法在JSX中使用 if-else 语句，因为 JSX 只是函数调用和对象创建的语法糖**

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

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

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

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

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

> Express本质是一系列middleware的集合

关闭mongod：`mongo ip:port/admin --eval "db.shutdownServer()"`  
查看启动进程: `ps -ef|grep mongo`

Bower是一个前端技术的软件包管理器，可用于搜索、安装和卸载一些前端的网络资源，如Jquery、AngularJS、BootStrap等库文件，当然也可以安装一些自动化工具，例如Grunt等

在`let`和`const`之间，建议优先使用`const`，尤其是在全局环境下，不应该设置变量，只应设置常量，这样符合函数式编程思想，有利于将来的分布式计算

`const`优于`let`有几个原因。一个是`cons`t可以提醒阅读程序的人，这个变量不应该改变；另一个是`const`比较符合函数式编程思想，运算不改变值，只是新建值，而且这样也有利于将来的分布式运算；最后一个原因是 JavaScript 编译器会对`const`进行优化，所以多使用`const`，有利于提供程序的运行效率，也就是说`let`和`const`的本质区别，其实是编译器内部的处理不同。`const`声明常量还有两个好处，一是阅读代码的人立刻会意识到不应该修改这个值，二是防止了无意间修改变量值所导致的错误。

所有的函数都应该设置为常量。

长远来看，JavaScript可能会有多线程的实现（比如Intel的River Trail那一类的项目），这时`let`表示的变量，只应出现在单线程运行的代码中，不能是多线程共享的，这样有利于保证线程安全。

--------------------

当你调用 `setTimeout()` 时，实际上是在调用 `window.setTimeout()`

方法的执行必须要有个直接调用者, 方法执行时的直接调用者就是离这个被调用方法最近的那个对象, 函数中`this`就是这个方法被调用时的直接调用者

`call`的作用是改变了那个被执行的方法(也就是调用`call`的那个方法)的直接调用者！

# JS奇技淫巧 #

1.  生成随机字符串：

Math.random().toString(36).substr(2)

1.  彩色console日志：

console.log('%chello world', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;')

1.  数学

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

[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/JavaScript_technologies_overview