1）node下载失败
解决方案：
brew install node 重新安装
2）调整node版本中途失败，导致node命令不能执行，报Segmentation fault: 11
解决方案：
· 卸载node -> https://segmentfault.com/a/1190000007445643
· 重新安装
· 更改版本
1.学习剩下的部分Linux命令：
ping、hostname、ifconfig、host、nc、telnet、netstat、tcpdump、ssh、scp、ps、free、top等命令
2.学习shell基础编程等语法：
#!/bin/sh 指定脚本解析器
array=（0 1 2） 只有一维数组
${array[1]} 读数组元素
*/@ 所有元素
$# 参数个数
$0 执行的文件名
$n 第n个参数
$*/$@ 所有参数。@单独对待每个参数 *看成整体
-eq、-ne、-gt、-lt、-ge、-le =\ != \ > \ < \ >= \ <=
-a 且 /-o或
！！！！注意： 表达式前后一定要有空格
3.Fekit
fekit min 压缩合并
fekit sync 上传
4联调：
改hosts
fekit pack 合并jscss
创建.dev 上传
5测试/Bugfree
1）fekit pack ->打包js/css生成dev、ver、refs文件。其中dev中是打包好的css和js文件(上传开发机的内容)，ver里是styles和scripts文件 分别放置fekit min后prd文件夹里的文件名字@后代表版本号的md5码
2）组件里不用environment.yaml文件
3）配置时compiler 可选 component（组件）和 modular （项目）
4）login（暂不可用） publish unpublish名@版本号
5）fekit支持的模版：以hoganjs为例
[1] 先写好模版文件：list.mustache（<p>{{data}}</p> 这种标签语句）
[2]js中var html = 引入模版名.render(需传入的数据data)
[3]append等将html添加到页面
6）mock：
scripts中建mock文件 包括各种json数据和mock.conf配置文件，mock.conf中需有rules:[{ “pattern”: “请求链接”, “respondwith”:”要发出的假数据文件名”}]
fekit server -m ./2fekit/src/scripts/mock/mock.conf
3.html
标签嵌套原来有规则，以前都是靠感觉..老师开启了新大门，总之父亲类型要满足可以当父亲，孩子类型要满足可以当孩子
块元素不设置width100%相当于怪异模式，设置相当于标准模式
4.js 上下文：
vo/this/sc
超出传参个数2的argumenrs[3]是不共享值的（二者无关）
function>形参>变量（重名）
var 实例化添加的属性不可delete
作用域链 核心：函数上下文：【当前激活对象，function.[[scope]]】以前都是自己理解作用域链只可意会不可言传那种，现在可以套公式了，又开启了新大门…
with(x){//…} 把x的作用域链填到第一个
1）setState异步(所以之前写代码更新state页面会变，打印出来的不变)
解决：[1]this.setState(preState => {couter: prevState.couter+5})
[2]this.setState({…}, () => {this.setState(...)}); //像回调函数一样
2）getInitialState 可用constructor代替 getDefaultProps 用静态属性this.state代替
3）为了代码健壮性 检查props.function再用
Warning: Input is changing an uncontrolled input of type undefined to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components
用了elements组件 或者 设置了input 的 value = {this.state.value}
写成value = {this.state.value || ''}就行
sudo lsof -i tcp:port 查看占用端口进程
kill PID 杀死进程 （-2 -> contrl+c）/（-9 无条件终止无日志）
关闭mac自带apache的启动。
sudo launchctl unload -w /System/Library/LaunchDaemons/org.apache.httpd.plist
Scroll组件需设置高度，如果是用flex必须在上一层(父级)就设置
defaultChecked问题：defaultChecked={isDefault} isDefault设置成bool类型而不是string
【1】
{this.props.items.map(i =>
<Cell data={i} options={this.props.options || []} />
)}
若options为空，则会使用[]。[]每次会生成新的Array，因此导致Cell每次的props都不一样，导致需要重绘。解决方法[] 改成 default。
【2】内联函数：由于每次需要为内联函数创建一个新的实例，所以每次function都会指向不同的内存地址。
update(e) {
this.props.update(e.target.value);
}
render() {
return <MyInput onChange={this.update.bind(this)} />;
}
提前绑定this指针：
constructor(props) {
super(props);
this.update = this.update.bind(this);
}update(e) {
this.props.update(e.target.value);
}
render() {
return <MyInput onChange={this.update} />;
}
2.组件函数调用
之前直接改的代码没注意组件调用函数的时候用refs：this.refs.list.stopRefreshing(true)
只有处于函数调用栈栈顶的执行上下文中的变量对象，才会变成活动对象。
理解： 所有js代码运行都分为两个步骤：
1声明： 声明的时候同名的 函数>变量，函数声明是可以得到整个函数体(函数表达式不行)，变量的声明只能知道变量名和类型 例如
var a = 1;分为两个过程var a; a=1;声明的时候只运行第一句。这里的对象为变量对象
2执行： 执行包括函数的运行，变量赋值等等，是在声明之后。这里的对象为活动对象
1.this
作者虽然说“谁调用它，this就指向谁”这句话是错的，但没有具体说哪个例子推翻这个说法。我看了一下感觉只有以下两个例子沾边，但是都不是实锤
var a = 20;
var obj = {
a: 10,
c: this.a + 20,
fn: function () { return this.a; }
}
console.log(obj.c); //40 这里不符合“谁调用它，this就指向谁”是因为被调用的是个属性，作者也说了因为属性前后的{}对作用域没有影响，所以不能推翻上述结论。
console.log(obj.fn()); //10
————————————————————————————
function foo() {
console.log(this.a)
}
function active(fn) {
fn(); // 真实调用者，为独立调用
}
var a = 20;
var obj = {
a: 10,
getA: foo
}
active(obj.getA); //20 这里不符合“谁调用它，this就指向谁”是因为在这根本不是调用函数，只是传进去一个参数，因为是引用所以在active中真正调用时已经和obj完全没关系了，就相当于独立调用不过中间传递了一下，所以也不能推翻结论
———————————————————————
2.柯里化：研究了好久作者给的例子，其实就是递归，先写出最终的调用再一步步倒着写比较好写。
3. 面向对象
in的这种特性最常用的场景之一，就是判断当前页面是否在移动端打开。
isMobile = 'ontouchstart' in document;Person.prototype = {}实际上是重新创建了一个{}对象并赋值给Person.prototype，这里的{}并不是最初的那个原型对象。因此它里面并不包含constructor属性。为了保证正确性，我们必须在新创建的{}对象中显示的设置constructor的指向。即上面的constructor: Person。
5.事件循环机制：
分为宏微任务，分类如图，第一次运行先通通过一遍，不能执行的先在对应的队列里边存好，然后先执行微任务，nextTick先于promise，完了执行宏任务 先执行setTimeout再执行其产生的微任务，完了再执行setImmediate再执行其产生的微任务，一次只执行一轮，比如setTimeout产生的setTimeout在下一轮回执行。
4.async/await ：
es7中代替promise(语法逻辑比较符合正常人思维：其实就是加一个关键词await作为标识符给系统看，告诉系统我这句是异步的操作，你得等它完了再执行下边的操作，系统：yes，madam～。然后在async函数范围内，所有的异步操作都变成了同步，一步步执行)
async function foo() { //... }
// 或者 const foo = async () => { //... }
然后async函数里：用await标示一句异步操作，然后这句话就会被系统作为同步操作，以后的操作按部就班写就行。
const foo = async () => {
const t = await fn(); //fn函数一定要返回一个promise类型才阔以
console.log(t);
console.log('next code');
}try {
await fn1();
await fn2();
} catch (e) {
console.log(e); // some error fn1. 捕获异常只能捕获第一个异常。
}
1.es3中规定try/catch的catch分句会创建一个块作用域，其中声明的变量仅在catch内部有效。
2.为变量显式声明块作用域，并对变量进行本地绑定是非常有用的工具：在{}中写{}运行完就没用的代码，利于垃圾回收。
3.闭包条件：
1. 必须有外部的封闭函数，该函数必须至少被调用一次(每次调用都会创建一个新的模块 实例)。
2. 封闭函数必须返回至少一个内部函数，这样内部函数才能在私有作用域中形成闭包，并 且可以访问或者修改私有的状态。
4.js只有语法作用域（不关心调用的地方，只关心定义的位置），但this有动态作用域的赶脚（与调用的位置有关）。
6.经测试
function foo() {
var a = 2;
this.bar();
}
function bar() {
console.log( this.a );
}
foo(); // ReferenceError: a is not defined ->在非严格模式下只会报undefined，可以取到this.bar —
>上卷P80中应注明use strict或node环境。
6.
[1]判断this
• 函数是否在new中调用(new绑定)?如果是的话this绑定的是新创建的对象。
var bar = new foo()
• 函数是否通过call、apply(显式绑定)或者硬绑定调用?如果是的话，this绑定的是指定的对象。
var bar = foo.call(obj2)
• 函数是否在某个上下文对象中调用(隐式绑定)?如果是的话，this 绑定的是那个上下文对象。
var bar = obj1.foo()
• 如果都不是的话，使用默认绑定。如果在严格模式下，就绑定到undefined，否则绑定到全局对象。
var bar = foo()
[2]例外：apply()展开数组，bind()柯里化需要一个this占位，一般是null。操作不当会修改this(window). 可用var ø = Object.create( null );代替
[3](p.foo = o.foo)(); // 2
赋值表达式 p.foo = o.foo 的返回值是目标函数的引用，因此调用位置是 foo() 而不是 p/o.foo() 。根据我们之前说过的，这里会应用默认绑定。
[4]=> 根据外层(函数或者全局)作用域来决 定 this。
var bar = foo.call( obj1 );
bar.call( obj2 ); // 2, 不是 3 ! 修改失败
foo() 内部创建的箭头函数会捕获调用时 foo() 的 this。由于 foo() 的 this 绑定到 obj1， bar(引用箭头函数)的 this 也会绑定到 obj1，箭头函数的绑定无法被修改。(new 也不 行!)
[5]null是基本类型 null是基本类型 null是基本类型
[6] [vari + ‘bar’]: ‘hello’, ->[]包裹一个表达式作为属性名。
[7]. 如果你试图向数组添加一个属性，但是属性名“看起来”像一个数字，那它会变成 一个数值下标(因此会修改数组的内容而不是添加一个属性):
[8]Object.assign()是浅复制，复制到一级属性指向的地址
[9] es6: var v of myArray 直接遍历数组值。
1. [1]
-
如果在[[Prototype]]链上层存在名为foo的普通数据访问属性(参见第3章)并且没 有被标记为只读(writable:false)，那就会直接在 myObject 中添加一个名为 foo 的新 属性，它是屏蔽属性。
-
如果在[[Prototype]]链上层存在foo，但是它被标记为只读(writable:false)，那么 无法修改已有属性或者在 myObject 上创建屏蔽属性。如果运行在严格模式下，代码会 抛出一个错误。否则，这条赋值语句会被忽略。总之，不会发生屏蔽。
-
如果在[[Prototype]]链上层存在foo并且它是一个setter(参见第3章)，那就一定会 调用这个 setter。foo 不会被添加到(或者说屏蔽于)myObject，也不会重新定义 foo 这 个 setter。
用Object.defineProperty(..)在2/3情况下屏蔽
[2]注意隐式屏蔽：myObject.a++; 若a是原型链上的属性，则会发生屏蔽在myObject上创建一个a属性屏蔽原型链上的属性，应该 原型链.a++；
[3]新对象会在调用 new Foo()时被创建，最后会和“Foo. Prototype”指向的对象关联。
2.不同于传统类语言如java的继承，js继承只是在两个对象之间创建一个关联，这样一个对象就可以通过委托访问另一个对象的属性和函数.
3. 构造函数只带一个数字参数的时候，该参数会被作为数组的预设长度(length)，而非只充当数组中的一个元素。
昨天回家vpn连接不上，以前都没有这种情况，早上发现是charles的原因，退出charles程序并不会取消它之前的代理，必须取消再退出。
多行溢出显示为省略号一般有三种解决方案：
[1] 对于移动端大多数浏览器内核为webkit，因此可以采用其独有属性：-webkit-line-clamp（注意一定要加前缀）
overflow : hidden;
text-overflow: ellipsis; //单行溢出省略
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
⚠️ 目前全球仅有四个独立的浏览器内核：微软IE的Trident、网景最初研发后卖给Mozilla基金会并演化成火狐的Gecko、KDE的开源内核Webkit以及Opera(欧朋)的Presto。其中，Presto是历史最悠久的内核。
目前微软的Trident在移动终端上主要为WP7系统内置浏览器
Opera的Presto内核在所有联网设备上都使用，移动终端上主要为 Opera Mobile、OperaMini、欧朋浏览器以及欧朋HD Beta版
Webkit内核的适用范围则较为广泛，Android原生浏览器、苹果的Safari、谷歌的Chrome(Android4.0使用)都是基于Webkit开源内核开发的。
[2] 从 Opera 10.60 开始，text-overflow属性有了一个名为-o-ellipsis-lastline的值, 在文本的最后一行加上省略号，感觉没啥卵用
[3] pc端可采用::after+content: ‘…’的方法: 意思就是利用content给该标签的结尾加个内容。缺点：只适用于一定会溢出的场景，可另加js判断。鸡肋
p {
position:relative;
line-height:1.4em;
/* 3 times the line-height to show 3 lines */
height:4.2em;
overflow:hidden;
}
p::after {
content:"...";
font-weight:bold;
position:absolute; bottom:0;
right:0;
padding:0 20px 1px 45px;
} [4]jquery:$(".figcaption").each(function(i){
var divH = $(this).height();
var $p = $("p", $(this)).eq(0);
while ($p.outerHeight() > divH) {
$p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
};
});2.编写移动端调试的wiki
3.css写小圆点不用border-radius 首先是太小不能写，其次用•调整字号更方便。
1. text-align: justify 可以让一行文本撑满，避免参差不齐的情况。
2. text-align: justify 和 text-overflow: ellipsis; -webkit-line-clamp: 3;
一起使用在移动端会出现文字和省略号重叠的情况，
目前的解决方案是舍弃justify，改用left，
但这样会使的文本换行参差不齐，很不美观。
3. opacity不要滥用，会继承.
比如如果用它来做mask遮罩，遮罩里的文字也会继承透明度。变成字也是透明的。
mask用background-color: rgba(0, 0, 0, 0.6);
4. typeof 可以用来判断function，但是不可以用来判断[],{},null， 一定要记得判断null！ null！ null！ null！
5.animation属性 多个用逗号！逗号！逗号！逗号！分隔～
1. animation-fill-mode四个属性值图解
.box{
transform: translateY(0);
}
.box.on{
animation: move 1s;
}
@keyframes move{
from{transform: translateY(-50px)}
to {transform: translateY( 50px)}
}-
animation-fill-mode: none
-
animation-fill-mode: backwards
-
animation-fill-mode: forwards
- animation-fill-mode: both
⚠️⚠️⚠️ 虽然说选择不同的属性值 最终显示的页面不一样，但第二个动画开始时还是以初始样式为基准的，比如旋转中的origin属性，还是相对于最开始没有进行动画时元素的位置。
1. 矩阵变形，倾斜放大 -moz-transform: matrix( 1.43469990057081,-0.10044323411723,0,1.43469990057082,0,0);
-webkit-transform: matrix( 1.43469990057081,-0.10044323411723,0,1.43469990057082,0,0);
-ms-transform: matrix( 1.43469990057081,-0.10044323411723,0,1.43469990057082,0,0);
http://www.css88.com/tool/css3Preview/Transform-Matrix.html
2. Css3 写梯形，利用after，before伪类，在div左右分别加上两个扭曲的矩形重叠成梯形
.scroll_bar .t{
margin: 0 3px;
width: 125px;
height: 6px;
text-align:center;
background-color:#b0e75e;
position:relative;
}
.scroll_bar .t:before{
content:'';
display:block;
width:5px;
height:6px;
position:absolute;
transform:skewX(-30deg);
background:#b0e75e;
left:-4px;
}
.scroll_bar .t:after{
content:'';
display:block;
width:5px;
height:6px;
position:absolute;
transform:skewX(30deg);
background:#b0e75e;
right:-4px;
}
3.很少用switch case，今儿不想写好多if突然想用下，发现竟然不会用，总结一下就是 switch后的xxx 等于 case后的常量或表达式时执行“：”至结尾的所有代码除非break或不满足下个等式；
还要特别注意在js中。只要是var xx = 后面可用的，switch后面都可用。比如bool number string等等，甚至可以用function ？？？弱类型语言真的丧病啊
4.写style.dispaly时候怎么都没效果，debug一个小时发现手抖la写反了…以后找bug先看语法错误
1.⚠️⚠️⚠️
js的class不能用static定义静态属性！！js的class不能用static定义静态属性！！js的class不能用static定义静态属性！！说一百遍也记不住
要在类的定义外面 用 类名.xxx = 定义！！
2. 一个定位问题：
让一个divA的左右距离参照另一个divB来定位(为了缩小浏览器的时候固定div不会左右跑)，
但又需要上下距离参照浏览器定位也就是用fixed，
临下班想到可以利用document.body.clientWidth。
因为被参照的B一直是居中的，所以可以量出中线到A的距离+document.body.clientWidth/2
3.修改left/right或top/bottom后要记得把对应的另一半设置为auto
4.自己写的减速backTop，有点小卡，把速度曲线写的更曲折点，时间设置的更短点应该会好
var timer = setInterval(function (){
var t = document.documentElement.scrollTop || document.body.scrollTop;
if(t < 10) {
document.documentElement.scrollTop = document.body.scrollTop = 0;
clearInterval(timer);
} else {
document.documentElement.scrollTop = document.body.scrollTop = t/1.2;
}
}, 50);
5. offsetWidth 和 标准盒模型的width会差出俩border
6. 问题：
功能需求是一堆li。鼠标移入宽度增加，鼠标移出宽度减小，现在增加针对onmouseout 的委托事件后出现问题，div抖动，初步检查排除clearInterval的原因。
1.js的动画间隔最好设置为16，因为浏览器刷新是60hz，1000/60 = 16；
2.针对昨天的手风琴效果图片闪烁的问题：
原因还是因为clearInterval。闪烁并不是没有进行清除是因为之前写的clearInterval执行的位置太晚了，因为是共用的两个interval，所以如果在第二个事件中执行第一个的清除会找不到对应的li，导致根本没有清除掉上一个interval，所以两个你加我减就成了闪烁的样子。根本原因是因为有两个li，在第二个li的interval中清除第一个li的interval is impossible...
所以两种解决办法：第一种是每个li都绑定个只属于自己的interval，清除的时候带着标号清除掉，源自怀姐：
var oUl = document.getElementById('album');
var timer = [];
var originW = 150, changeW = 500;
oUl.onmouseover = function (evt) {
var node = evt.target;
var index = Number(node.getAttribute('data-index'));
if (node.nodeName.toLowerCase() === 'li') {
clearTimeout(timer[index]);
timer[index] = createAnimation(node, changeW, true, 5, function() {
clearTimeout(timer[index]);
timer[index] = null;
});
}
};
oUl.onmouseout = function (evt) {
var node = evt.target;
var index = Number(node.getAttribute('data-index'));
if(node.nodeName.toLowerCase() === 'li') {
clearTimeout(timer[index]);
timer[index] = createAnimation(node, originW, false, 5, function() {
clearTimeout(timer[index]);
timer[index] = null;
});
}
};
function createAnimation(node, wNum, isOdd, step, onFinish) {
var timer = setInterval(function () {
var w = node.offsetWidth;
if (isOdd) {
if (w < wNum) {
node.style.width = (w + step) + 'px'
} else {
onFinish(timer);
}
} else {
if (w > wNum) {
node.style.width = (w - step) + 'px';
} else {
onFinish(timer)
}
}
}, 16);
return timer;
}
第二种是在一个interval中就监听停止的动作然后清除，不在下一个interval中清除，这样性能应该会比较低
var oUl = document.getElementById('album');
var oli1;
var oli2;
var timeradd = null;
var timersub = null;
oUl.onmouseover = function(evt) {
oli1 = evt.target;
if(oli1.nodeName.toLowerCase() === 'img'){
oli1 = oli1.parentNode;
}
if(oli1.nodeName.toLowerCase() === 'li'){
lowSpead(timeradd, end_timeradd, oli1, 475, 5);
}
}
oUl.onmouseout = function(evt) {
oli2 = evt.target;
if(oli2.nodeName.toLowerCase() === 'img'){
oli2 = oli2.parentNode;
}
if(oli2.nodeName.toLowerCase() === 'li'){
lowSpead(timersub, end_timersub, oli2, 150, -5);
}
}
function end_timeradd(prop,timer){
prop.onmouseout = function(){
clearInterval(timer);
}
}
function end_timersub(prop,timer) {
prop.onmouseover = function(){
clearInterval(timer);
}
}
function lowSpead(timer, cb, prop, num, step) {
timer = setInterval(function() {
cb(prop,timer);
var w = prop.offsetWidth;
if(w !== num){
prop.style.width = w + step + 'px';
} else {
clearInterval(timer);
}
},10);
}
还有一个问题就是把事件委托给ul，如果在li中再加一个img的标签，target一般会挂到img上，但也会碰到li，这样再筛选出li，如果是li就会有问题导致事件不触发或者触发后立刻停止。
xcode模拟器：
弄一个app，进到该目录然后xcrun simctl install booted QunarTravel.app 安装好，
打开一个xcode项目，左上角可以选择设备 就会出来模拟器，
再利用apphelper（在手机端中的apphelper打开scheme）
safiri可在偏好中开启开发者模式，在开发-> simulator 中就可以找到能调试模拟器的网页。
模拟器快捷键：command+Shift+h = home
1.关于xcode模拟器调试的问题：
有的时候safari里边不会弹出simulate，这个时候需要整个把safari退出，在重新打开就ok
每打开一个模拟器，就要选中它，然后在用app的目录下运行 xcrun simctl install booted QunarGonglue.app ，就相当于每个手机都要安装下app…
safari 的IP也就是chrome里的remote address 是在网络，然后选中一个请求，在右边的资源列表中，没有的话可以点一下右上角的btn，但是ip一般不太好使，经常就给个空
要让请求资源的页面的域的协议和开的服务的协议一样。 都是https或者http。 可以在apphelper 填地址的时候就改成http
2.QApp 可以利用page的className来给不同的设备适配不同的样式，也就是利用父级类名命中。
1.ios11：滑动时fixed定位的元素会消失，滑动停止出现。解决方法：
【1】直接避免用浏览器的滚动事件，完全使用touch事件模拟滚动
【2】只要滚动的元素用的不是window的滚动条，且fixed的元素不在滚动元素内部，就能够比较方便的规避IOS11的这个缺陷：
overflow: auto; -webkit-overflow-scrolling: touch; height: 100vh;构造一个和body一样的容纳滚动条的容器，当然，由于这样设置之后，ios下的滚动体验比较差，还需要加上一个第二行的那句hack
⚠️不使用window的滚动条会导致在容器滚动的时候会转移焦点，然后再一次滚动外层的时候焦点又会再一次转移，导致再想继续滚动内部滚动条的话会产生一些额外操作，使用上最好避免有内外都要触发滚动事件的情况
2 sticky
粘性定位：在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。FireFox和Safari支持。
- 该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
- 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。
- 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量
⚠️如果父元素的overflow属性并不是默认的visible属性，那么sticky元素则相对于该父元素定位。
dalao说得好：事实上，很多看起来人畜无害的东西，其背后都有一个大坑。
1.passive event:提升页面滑动的流畅度
和pwa一起出，但反响很小。主要意思就是说 浏览器无法预先知道一个监听器会不会调用 preventDefault()，它需要等监听器执行完后，再去执行默认行为，而监听器执行是要耗时的，这样就会导致页面卡顿。
例如：当你触摸滑动页面时，页面应该跟随手指一起滚动。而此时你绑定了一个 touchstart 事件，你的事件大概执行 200 毫秒。这时浏览器就犯迷糊了：如果你在事件绑定函数中调用了 preventDefault，那么页面就不应该滚动，如果你没有调用 preventDefault，页面就需要滚动。但是你到底调用了还是没有调用，浏览器不知道。只能先执行你的函数，等 200 毫秒后，绑定事件执行完了，浏览器才知道，“哦，原来你没有阻止默认行为，好的，我马上滚”。此时，页面开始滚。
问题：查了好多文档只说addEventListener函数是添加第三个参数{passive: false} //默认true。但没有说delegate怎么用。推测加在第三个参数上data上，但data参数是可选的。如果加上第四个handler参数为$.proxy(fn,context)就会报错。原因未知
2.登陆开发机：ssh 地址
退出开发机： exit
3.scrollBox组件主要分三部分
【1】图片懒加载：在li中添加一个标签img，加载成功后把li的bgi设置成这个图片，然后把img标签display:none，中间还用到interval,监测clear，理解不完全。
【2】Swipe组件，是一个滑动组件，可以左右滑动，有自动滑动等选项
【3】popswipe，swipe的扩展，增加了 弹入弹出功能。
1.移动端方向判断： 比较document.documentElement的clientWidth 和 clientHeight大小。
2.需要适应手机旋转，每次旋转后需要获取页面宽高。有两种事件可以使用：一是orientationchange，一是resize。
var orientationchange = window['orientationchange'] ? 'orientationchange’ : 'resize';
$win.on(orientationchange, $.proxy(self.resize, self));
3.图片懒加载：把src存在自定义属性data-xxx中，js监测图片到屏幕窗口或者快要到的时候取出链接赋值给src属性，此时才会发送请求加载图片。
4.关于昨天的delegate的问题：
其实delegate是不可以传data参数的，但是delegate现在已经被转接到on函数。on是可以传data的，所以他报错报在了on函数上，昨天只看了四个参数中有data，没有看函数名..
其次还有一个坑，就是on和delegate的 event参数和select参数位置是反着的，这也是为什么会报错的原因，
所以现在报错问题解决了，就是用on函数替代delegate
但是悲剧的是！ 根本bug不能用传data解决啊啊啊啊啊啊！！！
真服了chrome，文档只说addEventListener，加事件只有这一个函数吗？？！！那些没有useCapture参数的函数怎么办？啊！怎么办！！
1.zepto的doubleTap，singleTap等事件是不能获得鼠标的坐标的，需要对源码进行改编一哈，就是利用touch事件（touch事件是有坐标的）获得坐标，然后加在这些事件中，就能获得坐标了
https://github.com/madrobby/zepto/pull/1150/commits/fcf2f035b38c6097eb93f5c24a6537c3db97452c#diff-3b5aeb16d85e265fdb40c6063ac62a96
2.lazyRender函数进行提升，提出imgRender函数，根据有无第二个img标签（有就是详情，没有就是轮播图）来设置不同的css。
3.对于双击缩小放大的事件，双击小图：隐藏小图，显示并放大大图。注意在放大的时候要确保宽高不变，margin不变，这样才能有放大局部的效果
'width': e.style.width,
'height': e.style.height,
'margin': (docElement.clientHeight-parseInt(e.style.height))/2 + 'px ' + (docElement.clientWidth-parseInt(e.style.width))/2 + ‘px'
双击大图： 隐藏并还原大图，显示小图
4.问题：
【1】在横屏的情况下 放大左边效果不好。感觉是text-align的问题
【2】昨天的passive event 还没有解决
1.昨天的查看大图问题：
位置不对不是因为text-align的问题，是因为放大后margin不能挡元素，然后他就开始自由发挥了
解决：本来计划用position：absolute逐一js计算位置进行定位，后来发现加了absolute，位置基本就能确定不会乱跑了但是有点偏，所以最后解决办法是加个特判，横屏的话给个left。
2. node最简易爬虫
superagent(http://visionmedia.github.io/superagent/ ) 是个 http 方面的库，可以发起 get 或 post 请求。
cheerio(https://github.com/cheeriojs/cheerio ) 大家可以理解成一个 Node.js 版的 jquery，用来从网页中以 css selector 取数据，使用方式跟 jquery 一样一样的。
1.解决图片放大偏移的问题：position：absolute绝对定位，给left一个margin-left的宽度就可以保证不偏移。
2.给remind链接和详情周边入口加统计
3.了解node.js，init 一个项目: js是单线程，所以使用多进程。一个主进程，n多小的。
npm install express --registry=https://registry.npm.taobao.org //使用淘宝景象
npm list //看文件夹，有express成功
touch app.js //新建app.js
「
var express = require('express’);
var app = express();
app.get(‘/‘, function(req, res) {
res.send(‘ hello world ‘);
});
app.listen(3000, function(){
console.log(‘app is listening at port 3000');
})
」
4.调试只能console或者用插件。
1qxf：
【1】进入项目跟目录， 执行qxf dev {-e <env local dev beta …> 自定义环境变量，默认development}{—debug 单进程}
【2】避免每次要重启，可在package.json中添加watch字段监听：
“watch”：{
“excludeFolder”: [“.idea”,”.git”]， //排除的目录
“excludeFileExt”：[“html”,”json”], //排除的后缀
“excludeFile”：[“xxx.file”] //排除的文件名
}
【3】服务器安装：
1.申请新的服务器时可预装qxf
2.
ssh 登录服务器
sudo yum install q-node
sudo npm install qxf -g —registry=http://registry.npm.corp.qunar.com/
【4】
q-multiprocess //多进程组件：一个主进程，多个子进程，主进程监听子进程 位于$project/bin/start
q-template //模版组件 基于handlebars，兼容musrache语法。支持继承和部件提高代码复用，支持特定变量替换，不再关心qzz version
例：把link的css提出来，其他html为layout模版，css处
……
…...
{{#block “style”}}
<link ……reset.css/> //共有
{{/block}}
…….
…….
子类继承layout
{{#extend “layout”}}
{{#content “style” mode=“append”}}
<link …..home@version.css>
{{/content}}
{{/extend}}
q-version //版本号管理组件
位于$project/app.js
qversion.parse(path.join(__dirname, ‘ref’)); //版本号存储目录
q-monitor 监控，监控sugeset数量
对接公司监控系统watcher，可监控时间和数量
接口：
qmonitor.addCount(‘指标名’)；
qmonitor,addTime(‘指标名’,'时间’)
在$project/config.js配置，不用动 默认就可以
q-logger
在$project/config.js配置，默认就行，除非要用不同路有记录不同日志
2.周边和详情添加入口
3.问题：
touch可以拖动但坐标没找好
addEventListener必须在都渲染好都添加。
1.拖动事件解决： 获取到鼠标移动前后距离body边的距离，得到鼠标的移动距离，在touchstart的时候保存下absolute定位的top和left，touchmove的时候left/top += 鼠标移动的距离
2.passive event解决：把on事件改为addEventListener绑定。不再bindEvent时绑定，在show后进行事件绑定。
3.上下左右滑动：pc端还好能精准的判断出滑动的方向，移动端可能手指头太粗，优化为：获得移动的x和y距离，判定绝对值大的 为相应方向。
4.node爬虫，利用superagent ， cheerio抓取到了页面的题目和文章内容， $(’.ss’).text()可直接获得至最末级的文本。/[\u4E00-\u9FA5]/g 判断中文字符。
1.修改mysql的root密码（mac）:
- 关闭mysql服务器
sudo /usr/local/mysql/support-files/mysql.server stop
也可以在系统偏好里有个MySQL里关闭。 - cd /usr/local/mysql/bin 进入目录
- sudo su 获取权限
- ./mysqld_safe --skip-grant-tables & 重启服务器
- 重开个终端，
配置短命令：
alias mysql=/usr/local/mysql/bin/mysql
- 输入mysql 进入mysql命令模式
- use mysql进入mysql数据库
- flush privileges;大概就是获取权限，要不他不让你改。
- set password for 'root'@'localhost'=password('新密码'); 完成修改
- 我靠终于改完了。
如果你知道密码：
mysqladmin -u root -p password 新密码。。。。。。。。。。。
作者：Viva Loki
链接：https://www.zhihu.com/question/41158204/answer/137410398
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
2.jdk最好不要用新版。。。
3. 前端发送请求要确定好数据格式
1931
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
