Older Entries »

Category Archive: 前端开发

用 javascript 检测一段文字的换行位置

群里同学问了这个有意思的问题，写了段简单的代码，基本思路是在一个高度为 auto 的容器中逐个插入字符，每次插入后检查容器高度，如果高度增加了，说明产生了换行。

(function ($) {
    var global = this;
    global.lineBreakDetection = function (text, width) {
        var firstInLine = [],
            height = 0,
            $div;
        $div = $('<div/>').css('width', width).appendTo(global.document.body);
        $.each(text, function (i, char) {
            $div.text($div.text() + char);
            if ($div.height() > height) {
                firstInLine.push(i);
                height = $div.height();
            }
        });
        $div.remove();
        return firstInLine;
    };
}.call(this, jQuery));

这段代码在实际使用中还有三个问题要解决：

  • 这个方法只能处理单个字符的语言，对于英文这样以单词为基本单位的还需要修改
  • 文字宽度会受样式的影响，所以应该将文字插入实际上要检测的容器中
  • 代码中逐个插入字符非常低效，应优化算法减少dom操作次数（比如先计算出每行平均字数，再做处理）

标签：

Posted on 2012-03-08

页面滚动动画插件：jQuery scrollTo

(function ($) {
    var $body = $('html, body');
    $.scrollTo = function (selector, offset) {
        var top = $.isNumeric(selector) ? selector : $(selector).offset().top + (offset || 0);
        $body.animate({'scrollTop':top});
    };
}(jQuery));

这是一个让页面快速滚动到指定元素位置或指定高度的插件，用法如下

jQuery(function($){
  var $content = $('#content');
  $.scrollTo($content);
  $('a.go-footer').on('click', function() {
    $.scrollTo('#footer', -20);
    return false;
  });
  $('a.back-to-top').on('click', function() {
    $.scrollTo(0);
    return false;
  });
});

标签：

Posted on 2012-03-01

SASS、COMPASS 安装指南

如果你还不知道 SASS 和 COMPASS 是什么，可以参看 http://sass-lang.com 和 http://compass-style.org，近期可能会更新一篇介绍性的入门教程，但是本文只是安装使用教程，不包含介绍信息。

(更多…)

标签：, ,

Posted on 2011-12-03

jQuery1.7 源码学习笔记 0

最近开始读jQuery源码，并打算将所思所学记录下来。阅读顺序是从易到难，先读简单的，把event和core这样的大块头留到最后。

顺带一提，源码下载地址为：https://github.com/jquery/jquery/downloads。

今天先分析最外层的匿名函数，最外层的匿名函数代码在 intro.js 和 outro.js 这两个文件内，一个头一个尾。代码如下：


(function( window, undefined ) {
//jQuery 代码....
})( window );

可以看到 window 对象被作为参数传入，这种方式可以减少解析变量 window 时查询作用域链的深度，有助于提升性能。很多 jQuery 插件也是以这种方式把 jQuery 对象传入闭包内部的。

还有一个声明后未被传值的参数 undefined。由于 undefined 被设计成一个全局变量而不是关键字，所以 undefined 是可以被赋值的，为避免使用被污染的全局变量 undefined 而导致 bug，所以在函数作用域里产生一个名为 undefined 的未被赋值的参数(未被赋值的变量其值为 undefined 的默认值)正好不过。

下一篇内容为 data 模块。

标签：

Posted on 2011-11-30

优雅的 IE 条件注释新用法

<link rel="stylesheet" href="css/style.css" />
<!--[if IE]><link rel="stylesheet" href="css/ie.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" href="css/ie6.css" /><![endif]-->

以上代码大家应该都了解，对蛋疼的 IE 使用额外的样式表解决蛋疼的 IE 兼容性问题。
这种方案有2个缺点：

  1. 对 IE 用户会增加请求数量，影响访问速度；
  2. 一个元素的样式存放在几个地方，不便于维护，容易出错。

所以大型网站都不会使用这个方案，要么一个通用样式表搞定，要么注释不会产生请求的内嵌样式表。

那么还有更好的方法么？ (更多…)

标签：,

Posted on 2011-05-15

Older Entries »