Fork me on GitHub

发表于 |

工欲善其事，必先利其器！
Sublime Text：一款具有代码高亮、语法提示、自
动完成且反应快速的编辑器软件，不仅具有华丽的界面，还支持插件扩展机制，用她来写代码，绝对是一种享受。

Sublime Text 3安装插件

Sublime Text的强大就是她拥有强大的课可扩展性。您可根据自己的需要安装不同的插件；这使得她变的无比强大的同时又不失轻便。

1
2
3
安装Sublime text 3插件很方便
打开Package Control：菜单->Perferences->Package Control 或者 ctrl+shift+p
选择install Package,然后选择要安装的插件即可


阅读全文 »

发表于 |

这篇文章总结了一些个人的jquery小知识

回到顶部的按钮

通过使用jQuery中的animate 与 scrollTop 方法可以创建一个非常简易的带有平滑滚动的回到顶部的按钮：

1
2
3
4
5
6
7
// Back to top
$('a.top').click(function (e) {
  e.preventDefault();
  $(document.body).animate({scrollTop: 0}, 800);
});
<!-- Create an anchor tag -->
<a class="top" href="#">Back to top</a>

通过修改 scrollTop的值可以设置滚动最终停止的位置，最终的效果就是在800毫秒的时间内文档会被滚动到指定的地方。

阅读全文 »

发表于 |

前言

因为超级营销无线装修用到了很多创建对象的方法，而不同的方法对于对象的设计，功能的实现会有很大的不同，所以最近在看代码的时候特意查了下创建对象的各种方法，在这里记录一下

1.对象字面量
2.工厂模式
3.构造函数模式
4.原型模式
5.结合构造函数和原型模式
6.原型动态模式

阅读全文 »

发表于 |

前言

心血来潮，自己花了一个小时实现了一个简易版的lazyload插件。

例子，
源代码

设计思路

插件初始化时对匹配的img元素进行遍历，如果在可是区域之内，那么就赋值src，然后监听scroll事件，直到匹配的img数组为空。

主要用到了getBoundingClientRect()函数，兼容ie，作用是获取元素距离视窗上下左右的距离

阅读全文 »

发表于 |

发现问题的由来

首先有个需求，就是获取浏览器参数，也就是 window.location.href问号后面的参数值，就google了一个在江湖中流传的号称最好用的方法：

1
2
3
4
5
6
7
8
9
function GetQueryString(name)
{
     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);
     if(r!=null)return  unescape(r[2]); return null;
}

// 调用方法
alert(GetQueryString("参数名1"));

设置了一个全局方法，成功了，立马各个项目用起来~

这次有个需求，在页面加载时去获取参数时发现怎么都获取不到，于是去看代码，发现用到了window.location.search，调试发现window.location.search是空字符串。

阅读全文 »

发表于 |

介绍

手机端页面开发有很多未知的问题，android和ios又有所不同，所以有个reset.css会避免掉很多的问题、bug

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
34
/* css reset author wangyang */
*{
	cursor: pointer; //为所有dom添加手势，解决IOS下不能点击的对象上绑定点击事件失效的问题
}
html {
  font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;//设置通用字体
  -webkit-text-size-adjust: 100%;//chrome字体禁止缩放
  font-size: 20px;//设置初始rem基准值
  overflow-y: scroll;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; }
body { background:#fff; color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; }
td,th,caption { font-size:14px; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}
a,input,textarea,select,button{
  outline: 0;//去除外框
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);//去除聚焦时的阴影
  -webkit-tap-highlight-color: transparent;
}
a {text-decoration:none;} //去除下划线
a:hover { text-decoration:underline; }
a:active{
	outline: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}
img, input, button { border:none; }//去除边框
ol,ul,li { list-style:none; } //去除默认圆点
input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif;border-radius: 0; }
table {
	border-collapse:collapse;  //把表格边框显示为一条单独的边框
	border-spacing: 0; //设置相邻单元格的边框间的距离为0
}
阅读全文 »

发表于 |

最近在看许多React的资料，发现了大部分的项目都是用webpack行模块化管理的工具。这次也是借着写了一个React-Todos的小应用，对webPack最基本实用的功能体验了一番，顺带做个小记录。

为什么用webpack

CommonJs与AMD

在一开始，我们先讲一下它和以往我们所用的模块管理工具有什么不一样。在最开始的阶段，Js并没有这些模块机制，各种Js到处飞，得不到有效妥善的管理。后来前端圈开始制定规范，最耳熟能详的是CommonJs和AMD。

CommonJs是应用在NodeJs，是一种同步的模块机制。它的写法大致如下：

1
2
3
4
5
var firstModule = require("firstModule");

//your code...

module.export = anotherModule

AMD的应用场景则是浏览器，异步加载的模块机制。require.js的写法大致如下：

1
2
3
4
5
define(['firstModule'], function(module){

  //your code...
  return anotherModule
})

阅读全文 »

发表于 |

2018-09-13 更新

原文地址：http://www.cnblogs.com/lyzg/p/4877277.html

目前很多流行的，html5要适应各种分辨率的移动设备，应该使用rem尺寸单位，各个分辨率范围在html上设置font-size.

这里介绍我们项目组在用的适配方案：
页面加载的时候通过js计算出html的font-size。

计算和设计稿有关

拿网易来说，它的设计稿应该是基于iphone4或者iphone5来的，所以它的设计稿竖直放时的横向分辨率为640px，为了计算方便，取一个100px的font-size为参照，那么body元素的宽度就可以设置为width: 6.4rem，于是html的font-size=deviceWidth / 6.4。这个deviceWidth就是viewport设置中的那个deviceWidth。

1
2
3
4
deviceWidth = 320，font-size = 320 / 6.4 = 50px
deviceWidth = 375，font-size = 375 / 6.4 = 58.59375px
deviceWidth = 414，font-size = 414 / 6.4 = 64.6875px
deviceWidth = 500，font-size = 500 / 6.4 = 78.125px

阅读全文 »

发表于 |

1.插入排序-直接插入排序
2.插入排序—希尔排序（Shell`s Sort）
3.选择排序—简单选择排序（Simple Selection
4.交换排序—冒泡排序（Bubble Sort）
5.交换排序—快速排序（Quick Sort）

平常在项目中可能都会用到排序，就我本人而言，可能大部分都是用的选择排序或者冒泡排序，简单粗暴，但是这往往都只是实现了功能，而没有去关注性能，所以还是有必要了解常用的排序方法(使用内存)。

插入排序-直接插入排序

基本思想:

将一个记录插入到已排序好的有序表中，从而得到一个新，记录数增1的有序表。即：先将序列的第1个记录看成是一个有序的子序列，然后从第2个记录逐个进行插入，直至整个序列有序为止。

阅读全文 »