以前做项目,对文字溢出只能进行单行溢出的控制:

1
2
3
white-space: nowrap;  
overflow: hidden;  
text-overflow: ellipsis;  

对于多行则无能为力,只能用渲染端来控制,这样有一个很大的问题:无法达到响应式

但是在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp,这个历史问题也就不攻自破了,对应代码:

Read more

今天写活动页,打算封装一个JS逐帧运动的组件,但在调试的时候发现使用以下代码会出现问题:

1
2
3
curAnim.css({
    'background-position' : '-' + i * 75 + 'px 0px'
})

Read more

看到一些有用的代码片段,我就喜欢收藏到我的jsbin里。今天和大家分享一下

1.canvas画出圆环进度条

代码注释很多,初级入门都能看懂,作为活动页很适用

http://jsbin.com/viribi/1/

2.无刷新分页

推荐用ajax方式,这个代码是讲所有的数据都加载出来的处理方式

http://jsbin.com/poxawo/1/

Read more

我们实验室有一门内部课程,专门讲前端开发,每年的主题都不一样,今年老师让我们建议几个,我罗列了一下几个主题供老师参考:

1. 前端工程化

前端工程化是将代码、资源(图片等)的压缩、合并、检错等一些列使用程序来自动完成。有了它可以大大提高开发效率。目前比较流行的国外有grunt,gulp等,国内有fis等,建议讲课时可以讲讲主流前端工程化工具的使用和思考如果将至融入实验室工作的开发流程。

2. 前后端分离的思考

以前前端后端开发分离不够,如修改jsp模板前端需要和后端协调,一些数据协议要沟通,一些代码逻辑不能复用(如前后端的数据校验)。支付宝提出使用Node.js在前端和后端中间再加一层,首屏交给Node.js来渲染,二次请求可以通过ajax动态调用。详情可以参照淘宝UED《前后端分离的思考与实践》 一个趋势,大家可以一起学习一下,可以进行头脑风暴。(但实验室这种开发模式是一个人前后端都做,所以没有沟通的成本,但很难在某一领域专一)

Read more

http://www.2ality.com/2015/02/es6-scoping.html 原文链接

在本文将有大量的例子介绍在ES6中作用域和变量的使用方法

1.块级作用域的let和const

1
let
1
const
创造块级作用域,他仅仅存在于包裹他们的最内层的块。下面代码演示了使用
1
let
修饰的
1
tmp变量
仅仅存在于最里层的
1
if
申明里。

1
2
3
4
5
6
function func() {
    if (true) {
        let tmp = 123;
    }
    console.log(tmp); // tmp未定义
}

相比之下,用var申明的变量在函数级作用域

Read more