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. 前端发送请求要确定好数据格式