总览

小问题总结

￥的 unicode 是怎么找到的

直接unicode-table

input 输入时，金额前加上实时￥

就是提前画好并隐藏。输入了数字时，拿到 input 的font-size和 value，新建一份添加进页面，算好宽度后删掉。

这个时候得到了文本内容的宽度，就可以给￥元素添加上 right 属性来定位。

$("span")
  .css({
    right: dim.inputTextSize(this).width
  })
  .show();

dim 的代码：

var $ = require("zepto");
var div = $("<div>");
div.css({
  width: 0,
  height: 0,
  overflow: "hidden",
  position: "absolute",
  right: 0,
  bottom: 0
});
var span = $("<span>");
span.css({
  visibility: "hidden"
});
div.append(span);
module.exports = {
  textSize: function(text, fontSize) {
    if (fontSize) {
      span.css({
        fontSize: fontSize
      });
    }
    span.text(text);
    div.appendTo("body");
    var result = {
      width: span.width(),
      height: span.height()
    };
    div.remove();
    return result;
  },
  inputTextSize: function(inputElement) {
    var input = $(inputElement);
    return this.textSize(input.val(), input.css("font-size"));
  }
};

为什么 DOMcontnetLoaded 只能用 addEventListener 来绑定？

有些事件，比如说 click 可以用onclick来绑定，但是DOMcontnetLoaded只能使用addEventListener来绑定

因为DOMcontnetLoaded是 DOM2 级才加入的事件

手机号掩码的小问题

if (mobileNo.length > 10) {
  mobileNo = mobileNo.replace(mobileNo.substr(3, 4), "****");
}

这里 12323231111 就会出错，因为 replace 可能会从前面开始匹配

解决方法：

var arr = mobileNo.split("");
arr.splice(3, 4, "****");
arr.join("");

想在 textarea 里面友好的显示 json

想再 textarea 里面比较友好的显示 json 的，以为需要使用插件，结果 JSON.stringify 第三个参数已经可以搞定了，好吧~

function prettyPrint() {
  var ugly = document.getElementById("myTextArea").value;
  var obj = JSON.parse(ugly);
  var pretty = JSON.stringify(obj, undefined, 4);
  document.getElementById("myTextArea").value = pretty;
}

LTS 版本是什么意思？

LTS 版本的意思就是 long time support。意思是长期支持的版本，就可以理解为比较稳定的版本。

开发的页面不想让用户可以选择

user-select: none;
-webkit-user-select: none;

这两个属性可以控制

display:inline 的元素不对齐

display:inline 的元素会因为手机浏览器的问题对齐不好，

这个问题的解决是设置为 display:inline-block 的，

然后 vertical-align:top 然后来将强制定位，这样子比较靠谱一点，基本都能够适配

install 的时候想看到发出的 http 请求的状态

npm config set loglevel=http

这一句命令就可以搞定

想要在命令行中打开 webstorm 或者 sublime

webstorm 非常智能，直接到 tools 里面，create-command-line-lancher 就行了。

sublime 需要输入一条命令sudo ln -s /Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl /usr/bin/subl来提个权并且加个软链接

underscore 的 throttle 和 debounce

都是用来控制那种密集触发方法的。是两种不同的处理策略。

• throttle 是控制多长时间之内只能执行一次，比如 scroll 不停地在触发，极其消耗性能，给了 250ms 的延迟，会不断的执行。有最小时间间隔。
• debounce 是某个状态多少毫秒才会进行执行，比如用户输入了，停顿了多久了才会发送一次 ajax 请求。

iframe 相互操作必须遵守同源

ifram 父元素和子元素之间想要相互调用的话，必须遵守同源策略！！

在 beta 环境的子页面中调本地的父页面的的一个全局的方法的时候访问 window.parent 页面崩溃了，因为没有遵守同源

iframe 让子页面的高度自适应的做法

现在父页面中申明一个改变的方法

window.changeFrameHeight = function(ext) {
  //改变iframe的高度
  var height = 0;
  for (var i in ext) {
    height += ext[i];
  }
  $("#payFrame").attr("height", height); //设置iframe的高度
};

然后再每个改变的地方调用父页面的这个方法，注意父子页面必须是同源的！！！

try {
  window.parent.changeFrameHeight(a);
} catch (d) {}

padding 的妙用

padding 的百分比都是继承 width 的，不会去找高度的百分比！！

这个还是有点实用的定位技巧

图片压缩

tinypng这个网站提供很出色的图片压缩~~

遇到一个页面撑不开的 bug

页面太小，没有撑开页面，而且又不是 fixed 的，而是 absolute 的布局，想要让他自动的撑开，又要跟在文档流的底部，光靠 css 是不行的。因为要么在文档流里，要么不在，只能有一个选择。

在 js 中给页面上的 form 设置 method 和 target 好像是无效的，而 iframe 在 js 上动态设置却是可以的

Function.prototype.call.bind

Function.prototype.call.bind(Array.prototype.forEach)(document.querySelectorAll(".klasses"), function(el) {
  console.log(el);
});
Function.prototype.call.call(Array.prototype.forEach, document.querySelectorAll(".klasses"), function(el) {
  console.log(el);
});
Array.prototype.forEach.call(document.querySelectorAll(".klasses"), function(el) {
  console.log(el);
});
//上面的3个是慢慢转化的
//结果就像是下面的
var forEach = Function.prototype.call.bind(Array.prototype.forEach);
var forEach = Array.prototype.forEach.call;
//但是这里看样子是对的，但是其实执行的话是不对的，因为直接执行的时候，call里面的this是windows
//所以说上面那么绕其实就是想将call方法bind到foreach上面，这里之所以想这样是因为想要让这个arrayLike的数组也使用这个东西
//最好的方法是直接[].slice.call(document.querySelectorAll('.klasses'))，然后再调用foreach

针对发送的 post 请求的编码问题

这个问题如果传的是中文的话，后端拿到的可能是乱码，可以通过前端在 contentType 里面设置一下application/x-www-form-urlencoded; charset=UTF-8

但是因为 ajax 这种基础库肯定是要包装一下的，从组件的角度看不适合把 contentType 写死，也许可以给个编辑的入口，但是这样还不如让后端的拦截器来做这个功能，这样前端就不用管了，而且后端肯定来处理这个更适合些的。

离开页面是进行弹窗判断

window.onbeforeunload = function() {
  return "您还有东西未保存，确定要离开页面吗？";
};

为什么 CSS 没有选择上一个同级元素的选择器

因为页面的渲染一般是拿到多少，渲染多少，所以后面的元素一般是根据前面的元素的属性进行渲染，如果后面的元素的渲染影响到了前面的元素的话，那么就会造成回溯，就可能会导致整个页面的重绘，非常影响性能。可以参见知乎的一篇文章。

如果强行想选择前一个元素，要么前后位置对调，使用 float:right，然后用相邻选择器来模拟，或者使用 flex 的 flex-direction:column-reverse 来从下往上布局，不过这样的话，html 的元素就是反过来的了。或者就得用 js 来做了。

页面重构的一些使用心得

• css 的性能很重要，尽力减少层级关系

• 所有的基本写法一定要写在最下面，遵循由旧到新、由不标准到标准的顺序。

• 渐变颜色比较多的图片最好使用 jpeg 来存储，那种颜色单一的只需要存 png

• font 基本上设置在全局的，尽量设置在 body 上

长度超长，又不想有滚动条

设置父级元素 overflow:hidden

图片的浏览器兼容性问题

background-size 在 IE 下的支持性不好，可以用 img 替代，或者用 PS 先压缩到需要的长宽。

一般定位我们除了 px，还可以用 background-position 来做，就设置 right center，就可以右对齐，垂直居中了。

做设计

尽量单线影响，不要既让服务器渲染又让客户端渲染，尽量单项的流程，不要同时去影响两个地方。

data-URIs

就是允许将小文件进行编码后嵌入到另一个文件。这样 css 里面里面可以直接写入这个小图片的所有信息，就不需要再发送一个 http 请求了。

• 格式:data:[<mediatype>][;base64],<data>(mediatype 就是数据的类型，比如”image/jpeg”，然后 base64 申明是这种编码的，然后 data 里面就是具体的数据了。)
• 转化
  其实可以随意找个网站转化或者直接 linux 下敲命令uuencode -m infile remotename,命令得到的就是我们需要的数据了。
• 兼容性(IE8 之后支持 css 里面使用 data uri 的形式)

.gitignore

因为构建工具的原因，本地的 css 不想推上去，但是 css 里面的 img 文件夹希望推上去。于是.gitignore 里面可以这么写 css/*/.css，这样子所有的 css 文件就都会被忽略了，我们加了 gitignore 之后，git status 还是会显示，是因为缓存的原因，我们可以git rm -r --cashd .这样清掉缓存就好了。

美团点评之间的专线

其实就是一条物理线路，用来把环境变成内网，这样调用的时候就不会走公网的环境，就不会有劫持啊之类的，而且也不用加密，整个的访问速度为 30ms。

Cookie

Cookie 主要是为了弥补 HTTP 是个无状态请求的问题，这个主要是为了告诉服务器是谁在请求。服务器如果一般就是把 cookie 的内容存下来，维持一段会话，这就变成了 session。也可以把认证的过程交给其他的服务来做，这就是生成了一段 token。

客户端第一次请求的时候啥都没有，服务器生成一段 cookie，然后通知客户端存一下 cookie。接下来的请求带上 cookie，服务器就会知道是谁在请求。

FastClick 绑定的 bug

对于 radio，select 等等，fastclick 有 bug。得手动绑上 needsclick 类来让 fastclick 忽视掉他们。

点评的 www.dianping.com 是怎么跳转到 m.dianping.com 的

看上去是 js 跳转的，从 initiator 上看到请求是从 www.dianping.com 跳转的

emitter

明明知道 emitter 是使用一个数组来保存注册的事件的，然而拆代码到一个新的文件的时候还是选择了新建一个 emitter 导致了 emitter 的失效，下次写代码还是不能想当然

react+redux 什么时候 connect？

本来自己写的时候是感觉每个组件都可以 connect，这样每个组件都拥有全局的数据，很方便操作。比如点击一个组件内部的按钮，页面弹了一个弹层。我就给这个组件 connect 了 store。但是这里其实弹层是页面的行为，不是发生在组件内的，我应该把这件事情交给页面来做，这样才能避免组件对页面其他数据的影响。即使自己不会去影响，也得让后面的人没法影响。

这里应该把弹窗这个事情交给外面的页面来做，下次写的时候要考虑下到底是谁的行为。

node 差量更新

为一个新作的 app 重新建立缓存机制，在静态资源包想要做一次二进制的比对，传差量包。

选择使用 bsdiff 算法。npm 上找到 node-bsdiff 模块，直接安装的话，根本不走编译，所以使用淘宝的 cnpm 安装。

结果 gcc 编译出了问题，说是 gcc10.5 未找到。于是参考https://github.com/nodejs/node/issues/2933，运行以下的命令解决了。

    cd /usr/local/lib
    sudo ln -s ../../lib/libSystem.B.dylib libgcc_s.10.5.dylib

使用这个模块可以得到两个模块的差值包。

npm 一直 publish 不了

可能是本地的配置与全局的配置冲突，运行npm config ls -l|grep config得到地址，然后去制定的地址删掉，然后就可以 npm addUser，npm publish 了。

学到了一个小的技巧

很多时候我们需要根据一个布尔值来 removeClass 和 addClass，可以用中括号的方法来写，由此而酷炫的。

$("body")[bool ? "removeClass" : "addClass"]("hide");

幽灵空白

就是块状元素内部如果有 inline 元素，里面还会有个幽灵元素。这个幽灵元素继承父层块状元素的 line-height 和 font-size，他的对齐是与其他 inline 元素的尾部的 baseline 对齐，所以就会导致高度会有撑出。这个时候的解决办法有设置 vertical-align 为 top 或者设置让父级块状元素的 line-height 和 font-size 为 0。

去除 chrome 的默认 border-radious

.select {
  border: 0px;
  outline: 1px solid rgb(204, 204, 204);
}

函数式编程

要求使用函数，把运算的过程都定义为函数。

5 个特点：

• 函数是第一等公民
• 只用表达式(单纯的运算，都有返回值)
• 没有副作用
• 不修改状态
• 引用透明，就是不依赖外部变量或者状态，只依赖输入的参数，参数相同，返回值就是相同的
• 尾递归优化(每次递归都会重用 stack)

函数式编程的好处：

• 代码简洁，因为全是函数
• 接近自然语言
• 方便代码管理(因为是独立单元，同样的输入同样结果，利于单元测试)
• 易于并发编程(不修改变量，所以工作可以分摊到多个线程)

几个技术：

• 柯里化
• 递归
• map/reduce
• 高阶函数(就是把函数当做参数，传来传去的)

以上其实都不算是函数式编程，看看 schema，然后学个 haskshell。然后差不多能理解了。

webassembly

其实就是 web 层的汇编器，就是说有可能会出现一种新语言，或者说直接一种高级语言来支持编译到这个汇编器。

--depth

这个参数表示告诉 git 只拉最新的 16 次 commit。用于 git clone。

同构

同构其实主要是前后端运行一套代码，后端提前进行页面的渲染。但是要在后端加一层 node 层。后端用 node 写的话，前端其实是没有这个能力的，因为整个的思维方式需要改变。如果让 java 层调用 node 的服务。因为目前公司都是 java7。java7 自带的 js 运行器性能太差。等到升级到 java8 之后再看这个问题。

命令行输出没有颜色

首先，命令行输出的颜色是标记式语言，webpack 的输出有颜色肯定是使用了那些标记。而热部署的时候没有颜色肯定是他把标记去掉了，至于为什么要去掉，可能是考虑到会输出到文件，然后去掉了标记。

react 的 this.props 和 nextProps 一直是一样的

就是父组件内部的 state 是一个超过两层的对象，然后子组件调用父类的方法改了这个 state。然后父组件把 state 传给了子组件作为 props。就会导致子组件的 this.props 和 nextProps 的结果是一样的。因为他们指向了同一个引用。这个引用的对象被父组件修改过了。

这个 bug 遇到了感觉疯了啊~

在编写 webpack 插件的时候如何 debug

var path = require("path");
require("child_process").exec("npm config get prefix", function(err, stdout, stderr) {
  var nixLib = process.platform.indexOf("win") === 0 ? "" : "lib"; // win/*nix support
  var webpackPath = path.resolve(
    path.join(stdout.replace("\n", ""), nixLib, "node_modules", "webpack", "bin", "webpack.js")
  );
  require(webpackPath);
});

其实并不用这么来，只要保证这个命令式 webstorm 运行的就行了。只需要配置 debug 的运行脚本为node_modules/.bin/webpack就行了。

子域名的 cookie 没法共享

后端设置 cookie 的时候没有设置好 domain。默认写在了全部的 domain 之下，这样切换子域的时候，cookie 就不能互相共享了。重要的一些 cookie 还是设置在主域名下比较好。

URI 和 URL

URI 是统一资源标识符，URL 是统一资源定位符，两者都能唯一确定描述一个资源，但是 URL 还拥有这定位这个资源的能力，URL 是 URI 的一个子集。就这么理解就够了。

CSS 预处理器与 CSS Mixin

CSS 预处理器其实就是因为 CSS 没有相应的能力，比如不是 HTML 那种嵌套的结构，期望写起来是层次结构；希望分模块的，就有了 import；期望能有变量，这样方便统一管理；期望能有可重用的代码块等等。

Mixin 有点像 C 语言的宏，是可重用的代码块。好处是可以传入变量值，也可以设置缺省的值。

浮层滚透事件怎么办

就是浮层设为 fixed 之后，禁掉了浮层的 touchmove 事件，挺酷的。

清理某个端口

有的时候起服务器的时候发现端口被占了，又没地方取消

lsof -i tcp:8888

然后再 kill 掉就行了

kill -9 (某个id)

react-dnd 拖拽的时候显示置空效果

react-dnd 为了拖拽的时候能够去掉显示的效果，官方文档上其实有例子，但是有些问题，除了抄那个之外，还得
在 source 配置的时候加上：

isDragging(props, monitor) {
  return props.itemId === monitor.getItem().itemId;
},

然后在组件内部判断 isDragging，设置 opacity，这里的官方文档是有的。

函数传参时如果超过 2 个的时候用对象传参

之前传参数的时候一直是顺手就不停的加上参数了，发现参数列表比较多的时候还是使用对象比较好扩展。

peerDependencies

这个东西是 package.json 里面的一个配置项，意思是使用这个模块的人需要去安装并依赖下申明的模块的。很神奇的东西，跟很多依赖 react 但是不自己引 react 的模块一样，是为了版本问题，所以选择让使用者自己去决定依赖什么版本的。

深层次结构的 immutable

使用 immutable 库的时候，我们经常只对最外面一层使用了 immutable，而忽视了内部的引用类型其实也会被污染，导致出现的问题往往埋的很深。使用的时候要注意，实在复杂的话可以用 lodash 的 deepClone 来做。

如何在 less 文件中比较舒服的写 url 的路径

一般路径写法的话分绝对和相对，写相对路径是没问题的，但是会出现’../../../‘这样不太好看的路径。写绝对路径 webpack 构建过程不会报错，因为构建时拥有访问权限。但是绝对路径不会被转化，也就是说吐到 css 上也会是绝对路径，这样页面访问的时候图片是找不到的，因为我们不会把 src 文件夹作为静态资源抛出去，所以’/src/img/main.jpg’这样的路径查询不到。

当然小图片的话可以接 url-loader，url-loader 可以把图片变成 base64 位的数据。

路径除了绝对和相对之外，还有模块路径，就是既不是以’/‘开头也不是以’./‘或者’../‘开头的路径。一般 js 模块的话在 webpack 中配置了 resolve.root 之后，模块解析的时候就会变成相对于我们定义好的 root 路径的相对路径了。然后我觉得 url 里面也应该有这种用法，查了下发现 css-loader 提供了定义 url 中 root 的地方。但是 less-loader 没有提供，它默认把路径加上了’./‘，也就是全变成相对于本目录的相对路径了。所以我们目前在 less 中还没法使用这种模块路径的 url。

目前大图片的话还是使用相对路径，小图片接 url-loader 变成 base64 好。

CORS 跨域请求

一般跨域请求发起的时候，都会先发送一个 options 请求，如果允许跨域的话，就会接着发送 get 或者 post 请求。注意如果是 cookie 鉴权的话，get 请求的时候要带个请求头 withCredentials，如果是用 Authorization 的话，则是 Access-Control-Allow-Headers: Authorization, Content-Type，这个学到了~~ (链接)[https://github.com/jashkenas/backbone/issues/2542]

上传图片到 cdn

我们传到 CDN 上的 css 里面的图片地址得是相对路径的。因为页面引入 css 的时候我们会在后端配置好整体的路径，包括版本号等等。图片地址只有是相对的，才能使用上 css 的这些路径。也就是 file-loader 要手动设置下 useRelativePath 为 true 以及需要的 publicPath

遇到了一个浏览器劫持回退事件

发现是接入的一个外部导航组件拥有补齐 url 参数的功能，每进一个页面，会补上参数再推进 history 中，然后点击回退按钮的时候，导航条又会补齐了推进 history，看上去就像是劫持了回退事件一样…

异步打开新页面

异步想要 window.open 打开新页面是被浏览器禁止的，所以想要在 ajax 回调打开新页面的话，我们可以先同步打开 var x = window.open();然后在异步回调中 x.location=来设置新页面，

考虑问题角度

做一个深层次的遍历的修改，实现了之后发现其实完全没必要做..为什么老司机一眼就能看出来逻辑放的位置不对呢？

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 981909093@qq.com