发表于 | 分类于 |

基础篇

1
2
3
4
5
git add             // 加入仓库
git commit          // 提交修改
git branch  name    // 新建name分支
git checkout name   // 切换到name分支上
git merge master    // 将分支name合并到master上

Git rebase

第二种合并分支的方法是 git rebase。Rebase 实际上就是取出一系列的提交记录，“复制”它们，然后在另外一个地方逐个的放下去。

1
2
3
4
5
6
7
git branch bugFix
git checkout bugFix
git commit 
git checkout master
git commit 
git checkout bugFix
git rebase master
阅读全文 »

发表于 | 分类于 |

封装动画 keyframes

解决浏览器兼容写法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.keyframes (@prefix,@name,@content) when (@prefix=def) {
  @keyframes @name {
    @content();
  }
}
.keyframes (@prefix,@name,@content) when (@prefix=moz) {
  @-moz-keyframes @name {
    @content();
  }
}
.keyframes (@prefix,@name,@content) when (@prefix=o) {
  @-o-keyframes @name {
    @content();
  }
}
.keyframes (@prefix,@name,@content) when (@prefix=webkit) {
  @-webkit-keyframes  @name{
    @content();
  }
}
.keyframes (@prefix,@name,@content) when (@prefix=all) {
  .keyframes(moz,@name,@content);
  .keyframes(o,@name,@content);
  .keyframes(webkit,@name,@content);
  .keyframes(def,@name,@content);
}

阅读全文 »

发表于 | 分类于 |

封装Page

封装思路：实现所有页面所有事件统一处理。如果单独页面直接定义页面事件，公共方法被重写。

第一步：注入APP方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 小程序全局对象
const WeChat = {};

// 微信注入的App方法
WeChat.App = App;
// 微信注入的getApp方法
WeChat.getApp = getApp;
// 微信注入的Page方法
WeChat.Page = Page;
// 微信注入的Component方法
WeChat.Component = Component;
// 微信注入的API
WeChat.wx = {};
Object.assign(WeChat.wx, wx);

/**
 * 注册页面
 */
WeChat.register = function (PageClass) {
    let page = Utils.newInstance(PageClass);
    // 此处可以统一处理公共方法
    WeChat.Page(page);
};

/**
 * 初始化组件
 */
WeChat.initComponent = function (ComponentClass) {
    let component = Utils.newInstance(ComponentClass);
    WeChat.Component(component);
};

export default WeChat;
阅读全文 »

发表于 | 分类于 |

应用场景

重复触发就是防止用户重复点击提交数据了，我们一般都是点击之后没反应会再次点击了，这个不但要从用户体验上来做好，还在要js或php程序脚本上做好，让用户知道点击是己提交服务器正在处理，下面我就整理从脚本上来处理此重复触发的问题。
很多时候事件会被快速重复触发，比如 click，这样就会执行两次代码，造成很多后果。现在有比较多的解决方法，但几乎都有局限性，比如一个 Ajax 表单，如果防止用户一次点好多下可以在第一次点击的时候冻结提交按钮，直到允许再次点击的时候再放开。很多人都这样干，但在其他的情况就不是很有效了。

方法

1
2
3
4
5
6
7
8
9
10
11
12
var _timer = {};
function delay_till_last(id, fn, wait) {
    if (_timer[id]) {
        window.clearTimeout(_timer[id]);
        delete _timer[id];
    }
 
    return _timer[id] = window.setTimeout(function() {
        fn();
        delete _timer[id];
    }, wait);
}
阅读全文 »

发表于 | 分类于 |

生命周期

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • destroyed
1
2
graph LR
beforeCreate-->created

在这个生命周期之间，进行初始化事件，进行数据的观测，可以看到在created的时候数据已经和data属性进行绑定（放在data中的属性当值发生改变的同时，视图也会改变）。

阅读全文 »

发表于 | 分类于 |

React生命周期

在组件的整个生命周期中，随着该组件的props或者state发生改变，其DOM表现也会有相应的变化。一个组件就是一个状态机，对于特定地输入，它总返回一致的输出。

组件的生命周期如下

  • 实例化
  • 存在期
  • 销毁期

image

阅读全文 »

发表于 | 分类于 |

项目一：智造360平台

网站简介

智造360是国内最大的工业自动化设备零配件B2B交易平台,汇集国内外众多自动化设备用标准件品牌与机械加工工厂,为采购商提供公平、透明的一站式采购服务,为供应商提供机械零件外协加工订单信息! 链接智造360

前端框架

HTML+CSS+JQuery+easyUI

业务流程

流程：有注册登录（QQ号或手机号），资料完善（供应商或采购商），供应商发布订单，采购商下单，确认订单，支付，线下（发货->物流->收货），确认订单，付款，对账。典型P2P商城流程

阅读全文 »

发表于 | 分类于 |

初入前端（篇一）

16年年初正式接触前端，当时学习HTML+CSS的时候还根本不知道前端是什么，仅仅知道根据图片用HTML+CSS画出来。当时我学的很快，仿过百度首页，百度新闻，蘑菇街首页，京东首页首屏等等，感觉没有仿不出来的网页！知道接触JavaScript，才知道编程的难度

浏览器篇

我觉得学习JS最先要了解的就是浏览器的发展。就像正在想了解一个人，必须了解他的前世今生，这样才能更深层次的认识他。

起源

1994年开始，网景通信公司推出了代号为“网景导航者”的网景浏览器1.0；随后微软开发了Internet Explorer，并与其微软操作系统捆绑销售；因此IE立马占领了浏览器市场，为挽回市场份额，网景开源了网景浏览器源代码，成立了非正式组织Mozilla，至此Mozilla浏览器开始登上舞台；
这段期间IE市场份额第一，并没有过多的去更新IE，因此IE6-IE8并没有更新什么东西，
2008年chrome横空出世。界面简洁、加载快速、数据安全等这些特点让chrome的市场份额逐步攀升。当微软意识到chrome开始逐步侵蚀自己的市场时，开始频繁更新IE,2011年IE9发布，2012年IE10发布，2013年IE11发布，最后IE的代码实在适应不了新的要求的web技术，就重新开发了一个名为”edge”的浏览器用来取代IE

阅读全文 »

发表于 | 分类于 |

定义和用法

clip 属性剪裁绝对定位元素。属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据overflow的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。

可能的值

值 描叙
shape 设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)
auto 默认值。不应用任何剪裁。
inherit 规定应该从父元素继承 clip 属性的值。
阅读全文 »

发表于 | 分类于 |

Ajax实现代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();

//监听statechange事件
xhr.onreadystatechange = function() {
  /**
	 * XMLHttpRequest的readystate有五个状态
	 * 0 还没有调用open方法
	 * 1 已调用open方法，尚未调用send方法
	 * 2 已调用send，但尚未接收到响应
	 * 3 已接收到部分响应数据
	 * 4 已经接收到到全部数据，而且可以在客户端使用
	 */
  if (xhr.readystate == 4) {
    //状态码在200 到 300表示请求成功，状态码304表示资源没有被修改，可以直接使用缓存中的版本
    if ((xhr.status >=200 && xhr.status < 300) || xhr.status == 304)) {
      alert(xhr.responseText);
    } else {
      //发生错误打印状态码，
      alert("Request was unsuccessful: " + xhr.status);
    }
  }
}
//打开请求以备发送
xhr.open('post', 'http://example.com', false);
//设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//序列化表单
var form = document.getElementById('test-form');
//发送请求
xhr.send(serialize(form));
阅读全文 »
0%