换行问题自古以来就是一个难题，写了几个例子，先来看看，没有耐心的可以直接点这里

定义

word-wrap

word-wrap 属性允许长单词或 URL 地址换行到下一行。

语法

1

word-wrap: normal | break-word;

阅读全文

转义字符串的由来

HTML中<，>，&等有特殊含义（<，>，用于链接签，&用于转义），不能直接使用。这些符号是不显示在我们最终看到的网页里的，倘若我们需要在页面中显示这些字符，就需要用到转义字符串了。

转义字符串的组成

一个完整的转义字符串，分为三个部分：

1. 一个&符号，英文为ampersand；
2. 是实体名字或为#+实体编号；
3. 一个;号；

例如，常用的大于号>，使用转义字符串后的写法为>或>

我们注意到，上面的大于号使用了2种方式的转义，第一种称为实体名称，第二种为实体编号，区别在于实体名称的优点为便于记忆，但兼容性不完美，实体编号则反之。

阅读全文

在这篇文章中将整理一些平时用到的js小技巧。这些小技巧可能在你的实际工作中或许能帮助你解决一些问题。

使用!!操作符转换布尔值

有时候我们需要对一个变量检查其是否存在或者检查值是否有一个有效值，如果存在就返回true值。为了做这样的验证，我们可以使用!!操作符来实现是非常的方便与简单。对于变量可以使用!!variable做检测，只要变量的值为:0、null、" "、undefined或者NaN都将返回的是false，反之返回的是true。比如下面的示例：

1
2
3
4
5
6
7
8
9
10
11

function Account(cash) {
    this.cash = cash;
    this.hasMoney = !!cash;
}
var account = new Account(100.50);
console.log(account.cash); // 100.50
console.log(account.hasMoney); // true

var emptyAccount = new Account(0);
console.log(emptyAccount.cash); // 0
console.log(emptyAccount.hasMoney); // false

在这个示例中，只要account.cash的值大于0，那么account.hasMoney返回的值就是true。

阅读全文

作者：If you’ve never written code to animate inside the browser, you can stop reading :)

requestAnimationFrame是什么？

在浏览器中，我们通常使用一个定时器（setInterval & setTimeout）来循环每隔几毫秒移动目标物体一次，来让它动起来。

如今有一个好消息，浏览器开发商们决定：“嗨，为什么我们不在浏览器里提供这样一个API呢，这样一来我们可以为用户优化他们的动画。”所以，这个requestAnimationFrame()函数就是针对动画效果的API，你可以把它用在DOM上的风格变化或canvas或webGL中。

为什么我们要用它？

• 浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果。比如，通过requestAnimationFrame()，JS动画能够和CSS动画/变换或SVG SMIL动画同步发生。
• 另外，如果在一个浏览器标签页里运行一个动画，当这个标签页不可见时，浏览器会暂停它，这会减少CPU，内存的压力，节省电池电量。

阅读全文

Meta标签

1
2
3
4
5
6
7
8
9
10
11

<!--让页面强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览。-->
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

<!--是否添加至主屏幕的页面允许全屏模式浏览；-->
<meta content="yes" name="apple-mobile-web-app-capable" />

<!--指定的iphone中safari顶端的状态条的样式；-->
<meta content="black" name="apple-mobile-web-app-status-bar-style" />

<!--关闭数字自动识别为电话号码-->
<meta content="telephone=no" name="format-detection" />

触摸并按住触摸目标时候，禁止或显示系统默认菜单

在iOS上，当你触摸并按住触摸的目标，比如一个链接，Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。
参考自：http://www.css88.com/book/css/webkit/behavior/touch-callout.htm

1
2
3

div {
    -webkit-touch-callout: none
}

阅读全文

背景

sass文件编译时候使用ruby环境，在使用koala或者命令行时，会因为中文注释产生如下错误：

1
2
3
4

Syntax error: Invalid GBK character "\xE5"
     on line 8 of E:\work\sass\sass\_big_box.scss 
     from line 16 of E:\work\sass\sass\main.scss 
Use --trace for backtrace.

or：

1
2
3

Syntax error: Invalid GBK character "\xE5" 
     on line 2 of E:\work\sass\sass\main.scss 
Use --trace for backtrace.

解决方法

koala可视化编译工具

找到安装目录里面sass-3.3.7模块下面的engine.rb文件，例如下面路径：

C:\Program Files (x86)\Koala\rubygems\gems\sass-3.3.7\lib\sass

在这个文件里面engine.rb，添加一行代码

1

Encoding.default_external = Encoding.find('utf-8')

放在所有的require XXXX 之后即可。

阅读全文

在过去的几年中，CSS已经成为一大部分开发者和设计者的最爱，因为它提供了一系列功能和特性。每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发。像CSS 库，框架，应用这样的工具能够为开发者做很多事，而且可以使开发者创造出创新立异的WEB应用。

在这篇文件章中我们找到了一系列对开发者有用的CSS库，它们能帮助开发者在一定的期限内取得有创造性和创新性的成果。我们希望这个列表能有助于您的开发并为您提供方便。尽情享受吧！

Kite

Kite是一个灵活的布局助手CSS库。Kite使用inline-block而不是最新的CSS语法。它注重实际，易于理解且容易使用。Kite用法与flexbox相似：justify-content,等等。你可以很轻松地创建复杂的模块。Kite是基于OOCSS 与 MindBEMding，它可以帮助您快速构建自己的组件。Kite支持几乎所有浏览器，它属于MIT许可。

阅读全文

冒泡排序

核心思想：每次比较相邻的两个值，若后面的值比前面的值小，则交换位置，重复此操作，直到数据从小到大排列看起来像水泡一样冒上去了！

如何交换数据位置？

使用临时变量

1
2
3
4
5
6
7
8
9

var a=15;
var b=7;

var tmp;
tmp=a;
a=b;
b=tmp;

console.log('a是:'+a+', b是:'+b);

阅读全文

Javascript是一门非常灵活的语言，我们可以随心所欲的书写各种风格的代码，不同风格的代码也必然也会导致执行效率的差异，开发过程中零零散散地接触到许多提高代码性能的方法，整理一下平时比较常见并且容易规避的问题

JS自身执行效率

Javascript中的作用域链、闭包、原型继承、eval等特性，在提供各种神奇功能的同时也带来了各种效率问题，用之不慎就会导致执行效率低下。

阅读全文

最近在项目中用到对一段url进行编码，因此整理如下：

javascript中对文字的编码有3组函数：

• escape / unescape
• encodeURI / decodeURI
• encodeURIComponent / decodeURIComponent

阅读全文