| layout | title | |
|---|---|---|
default |
|
就是提前画好并隐藏。输入了数字时，拿到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'));
}
};有些事件，比如说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的，以为需要使用插件，结果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版本的意思就是long time support。意思是长期支持的版本，就可以理解为比较稳定的版本。
user-select:none;
-webkit-user-select:none;这两个属性可以控制
display:inline的元素会因为手机浏览器的问题对齐不好，
这个问题的解决是设置为display:inline-block的，
然后vertical-align:top然后来将强制定位，这样子比较靠谱一点，基本都能够适配
npm config set loglevel=http
这一句命令就可以搞定
webstorm非常智能，直接到tools里面，create-command-line-lancher就行了。
sublime需要输入一条命令sudo ln -s /Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl /usr/bin/subl来提个权并且加个软链接
都是用来控制那种密集触发方法的。是两种不同的处理策略。
- throttle是控制多长时间之内只能执行一次，比如scroll不停地在触发，极其消耗性能，给了250ms的延迟，会不断的执行。有最小时间间隔。
- debounce是某个状态多少毫秒才会进行执行，比如用户输入了，停顿了多久了才会发送一次ajax请求。
ifram父元素和子元素之间想要相互调用的话，必须遵守同源策略！！
在beta环境的子页面中调本地的父页面的的一个全局的方法的时候访问window.parent页面崩溃了，因为没有遵守同源
现在父页面中申明一个改变的方法
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的百分比都是继承width的，不会去找高度的百分比！！
这个还是有点实用的定位技巧
tinypng这个网站提供很出色的图片压缩~~
页面太小，没有撑开页面，而且又不是fixed的，而是absolute的布局，想要让他自动的撑开，又要跟在文档流的底部，光靠css是不行的。因为要么在文档流里，要么不在，只能有一个选择。
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这个问题如果传的是中文的话，后端拿到的可能是乱码，可以通过前端在contentType里面设置一下application/x-www-form-urlencoded; charset=UTF-8
但是因为ajax这种基础库肯定是要包装一下的，从组件的角度看不适合把contentType写死，也许可以给个编辑的入口，但是这样还不如让后端的拦截器来做这个功能，这样前端就不用管了，而且后端肯定来处理这个更适合些的。
window.onbeforeunload = function () {
return "您还有东西未保存，确定要离开页面吗？";
};因为页面的渲染一般是拿到多少，渲染多少，所以后面的元素一般是根据前面的元素的属性进行渲染，如果后面的元素的渲染影响到了前面的元素的话，那么就会造成回溯，就可能会导致整个页面的重绘，非常影响性能。可以参见知乎的一篇文章。
如果强行想选择前一个元素，要么前后位置对调，使用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，就可以右对齐，垂直居中了。
尽量单线影响，不要既让服务器渲染又让客户端渲染，尽量单项的流程，不要同时去影响两个地方。
就是允许将小文件进行编码后嵌入到另一个文件。这样css里面里面可以直接写入这个小图片的所有信息，就不需要再发送一个http请求了。
- 格式:
data:[<mediatype>][;base64],<data>(mediatype就是数据的类型，比如"image/jpeg"，然后base64申明是这种编码的，然后data里面就是具体的数据了。) - 转化
其实可以随意找个网站转化或者直接linux下敲命令
uuencode -m infile remotename,命令得到的就是我们需要的数据了。 - 兼容性(IE8之后支持css里面使用data uri的形式)
因为构建工具的原因，本地的css不想推上去，但是css里面的img文件夹希望推上去。于是.gitignore里面可以这么写css/**/*.css，这样子所有的css文件就都会被忽略了，我们加了gitignore之后，git status还是会显示，是因为缓存的原因，我们可以git rm -r --cashd .这样清掉缓存就好了。
其实就是一条物理线路，用来把环境变成内网，这样调用的时候就不会走公网的环境，就不会有劫持啊之类的，而且也不用加密，整个的访问速度为30ms。
Cookie主要是为了弥补HTTP是个无状态请求的问题，这个主要是为了告诉服务器是谁在请求。服务器如果一般就是把cookie的内容存下来，维持一段会话，这就变成了session。也可以把认证的过程交给其他的服务来做，这就是生成了一段token。
客户端第一次请求的时候啥都没有，服务器生成一段cookie，然后通知客户端存一下cookie。接下来的请求带上cookie，服务器就会知道是谁在请求。
对于radio，select等等，fastclick有bug。得手动绑上needsclick类来让fastclick忽视掉他们。
看上去是js跳转的，从initiator上看到请求是从www.dianping.com跳转的
明明知道emitter是使用一个数组来保存注册的事件的，然而拆代码到一个新的文件的时候还是选择了新建一个emitter导致了emitter的失效，下次写代码还是不能想当然
本来自己写的时候是感觉每个组件都可以connect，这样每个组件都拥有全局的数据，很方便操作。比如点击一个组件内部的按钮，页面弹了一个弹层。我就给这个组件connect了store。但是这里其实弹层是页面的行为，不是发生在组件内的，我应该把这件事情交给页面来做，这样才能避免组件对页面其他数据的影响。即使自己不会去影响，也得让后面的人没法影响。
这里应该把弹窗这个事情交给外面的页面来做，下次写的时候要考虑下到底是谁的行为。
为一个新作的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 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。
.select{
border: 0px;
outline: 1px solid rgb(204,204,204);
}要求使用函数，把运算的过程都定义为函数。
5个特点：
- 函数是第一等公民
- 只用表达式(单纯的运算，都有返回值)
- 没有副作用
- 不修改状态
- 引用透明，就是不依赖外部变量或者状态，只依赖输入的参数，参数相同，返回值就是相同的
- 尾递归优化(每次递归都会重用stack)
函数式编程的好处：
- 代码简洁，因为全是函数
- 接近自然语言
- 方便代码管理(因为是独立单元，同样的输入同样结果，利于单元测试)
- 易于并发编程(不修改变量，所以工作可以分摊到多个线程)
几个技术：
- 柯里化
- 递归
- map/reduce
- 高阶函数(就是把函数当做参数，传来传去的)
以上其实都不算是函数式编程，看看schema，然后学个haskshell。然后差不多能理解了。
其实就是web层的汇编器，就是说有可能会出现一种新语言，或者说直接一种高级语言来支持编译到这个汇编器。
这个参数表示告诉git只拉最新的16次commit。用于git clone。
同构其实主要是前后端运行一套代码，后端提前进行页面的渲染。但是要在后端加一层node层。后端用node写的话，前端其实是没有这个能力的，因为整个的思维方式需要改变。如果让java层调用node的服务。因为目前公司都是java7。java7自带的js运行器性能太差。等到升级到java8之后再看这个问题。
首先，命令行输出的颜色是标记式语言，webpack的输出有颜色肯定是使用了那些标记。而热部署的时候没有颜色肯定是他把标记去掉了，至于为什么要去掉，可能是考虑到会输出到文件，然后去掉了标记。
就是父组件内部的state是一个超过两层的对象，然后子组件调用父类的方法改了这个state。然后父组件把state传给了子组件作为props。就会导致子组件的this.props和nextProps的结果是一样的。因为他们指向了同一个引用。这个引用的对象被父组件修改过了。
这个bug遇到了感觉疯了啊~~~
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的时候没有设置好domain。默认写在了全部的domain之下，这样切换子域的时候，cookie就不能互相共享了。重要的一些cookie还是设置在主域名下比较好。
URI是统一资源标识符，URL是统一资源定位符，两者都能唯一确定描述一个资源，但是URL还拥有这定位这个资源的能力，URL是URI的一个子集。就这么理解就够了。
CSS预处理器其实就是因为CSS没有相应的能力，比如不是HTML那种嵌套的结构，期望写起来是层次结构；希望分模块的，就有了import；期望能有变量，这样方便统一管理；期望能有可重用的代码块等等。
Mixin有点像C语言的宏，是可重用的代码块。好处是可以传入变量值，也可以设置缺省的值。
就是浮层设为fixed之后，禁掉了浮层的touchmove事件，挺酷的。
有的时候起服务器的时候发现端口被占了，又没地方取消
lsof -i tcp:8888
然后再kill掉就行了
kill -9 (某个id)
react-dnd为了拖拽的时候能够去掉显示的效果，官方文档上其实有例子，但是有些问题，除了抄那个之外，还得 在source配置的时候加上：
isDragging(props, monitor) {
return props.itemId === monitor.getItem().itemId;
},
然后在组件内部判断isDragging，设置opacity，这里的官方文档是有的。
之前传参数的时候一直是顺手就不停的加上参数了，发现参数列表比较多的时候还是使用对象比较好扩展。
这个东西是package.json里面的一个配置项，意思是使用这个模块的人需要去安装并依赖下申明的模块的。很神奇的东西，跟很多依赖react但是不自己引react的模块一样，是为了版本问题，所以选择让使用者自己去决定依赖什么版本的。
使用immutable库的时候，我们经常只对最外面一层使用了immutable，而忽视了内部的引用类型其实也会被污染，导致出现的问题往往埋的很深。使用的时候要注意，实在复杂的话可以用lodash的deepClone来做。
一般路径写法的话分绝对和相对，写相对路径是没问题的，但是会出现'../../../'这样不太好看的路径。写绝对路径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好。
一般跨域请求发起的时候，都会先发送一个options请求，如果允许跨域的话，就会接着发送get或者post请求。注意如果是cookie鉴权的话，get请求的时候要带个请求头withCredentials，如果是用Authorization的话，则是Access-Control-Allow-Headers: Authorization, Content-Type，这个学到了~~ (链接)[jashkenas/backbone#2542]
我们传到CDN上的css里面的图片地址得是相对路径的。因为页面引入css的时候我们会在后端配置好整体的路径，包括版本号等等。图片地址只有是相对的，才能使用上css的这些路径。也就是file-loader要手动设置下useRelativePath为true以及需要的publicPath
发现是接入的一个外部导航组件拥有补齐url参数的功能，每进一个页面，会补上参数再推进history中，然后点击回退按钮的时候，导航条又会补齐了推进history，看上去就像是劫持了回退事件一样...
异步想要window.open打开新页面是被浏览器禁止的，所以想要在ajax回调打开新页面的话，我们可以先同步打开var x = window.open();然后在异步回调中x.location=来设置新页面，
做一个深层次的遍历的修改，实现了之后发现其实完全没必要做..为什么老司机一眼就能看出来逻辑放的位置不对呢？
是继JSLint之后第二次让我感觉到正规军的感觉