简单其实不简单

contains()函数使用一例

今天看到的，让我了解了下compareDocumentPosition()、contains()函数，以后判断是否在元素上面就有新方法了。其它的也没什么好说，看下Demo吧！

window.onload = function () {
    document.getElementById('dropdown').onmouseover = openMenu;
}

function openMenu(e) {
    var evt = e || window.event;
    var tgt = evt.target || evt.srcElement;
    while (tgt.nodeName !== 'LI') {
        if (tgt.nodeName === 'HTML') {
            return;
        }
        tgt = tgt.parentNode;
    }
    var nested = tgt.getElementsByTagName('ul')[0];
    if (nested) {
        nested.className = 'open';
        tgt.onmouseout = function (e) {
            var evt = e || window.event;
            var related = evt.relatedTarget || evt.toElement;
            if (!nested.contains(related)) {
                nested.className = '';
                tgt.onmouseout = null;
            }
        }
    }
}

/* Bloody Firefox STILL doesn't support contains */

if (window.Node && Node.prototype && !Node.prototype.contains) {
    Node.prototype.contains = function (arg) {
        return !!(this.compareDocumentPosition(arg) & 16)
    }
}

轻量的JS模板

这JS模板实在是太轻量了，只是个简单替换，只因为我太不喜欢不同语言的东东相互拼接。

昨天偶然看一"blog"上个有轻量的JS模板，作者的目的也是为了实现HTML代码与JS代码的分离,使得在用JS输出HTML时更方便,代码更清晰。有兴趣的可去看看 《Tempo.js : 轻量的JS模板工具类》。

刚好我现做的项目有大量的HTML与JS的拼接，但作者的实现有对不适合我的代码风格，我做了些修改就运用到我的项目里，也把我修改后的代码放出来吧！写成这种形式是为了更方便的嵌入到我的项目中来，而且我也没用到更复杂的功能，最最简单的替换就够了，就像Tempo.js的作者想法：为了实现HTML代码与JS代码的分离,使得在用JS输出HTML时更方便,代码更清晰。

var Obj = {
    yyTemp: function(id, data, def){
        var dom = document.getElementById(id);
        var parseObj = dom[id] || (dom[id] = (function(html){
            html = html.replace(/([\'|\\])/gm,"\\$1")   //转义掉 \ 和 '
                        .replace(new RegExp('{([^{}]*)}','gim'), "'+(typeof data[\"$1\"] != 'undefined'?data[\"$1\"]:'')+'")  //转化为包括变量的字符串
                        .replace(/[\n\r]/gm,'');    //去除回车换行
            html = ["return '", html ,"';"].join('');
            console.log( html );
            return new Function('data',html);
        })(dom.innerHTML));
        if(data.length){
            for(var i=0,ar; ar=data[i]; i++){
                data[i] = parseObj(ar);
            }
        }else data[0] = def || '';
        dom.innerHTML = data.join('');
    }
};

使用方法更简单，模板这样写就可以了：

<ul id="asins">
    <li class="{class}">{title}</li>
</ul>

简单的使用：

var arr = [
    {title:'再简单不过的JS模板系统','class':'c'},
    {title:'也就一点点功能','class':'cl'},     
    {title:'够用就好，呵呵','class':'cls'},
];
Obj.setTemp('asins', arr, '<li>Null</li>'); 

我这里加了个默认值，虽然以这种方式写默认值不太喜欢，但也没想到更简单合理的方式。

更重要的一点改进是HTML中不用另外写个模板标签，要生成的代码就是模板所在的位置，更不用另外每次指定了。

如果不希望在HTML加载时看到模板代码，可以进行些改进：

模板改成这样：

<ul id="asins">
    <li style="display:none;" class="{class}">{title}</li>
</ul>

JS代码也改一点点就可以了，注意粗体部分：

这JS模板实在是太轻量了，只是个简单替换，只因为我太不喜欢不同语言的东东相互拼接。

昨天偶然看一"blog"上个有轻量的JS模板，作者的目的也是为了实现HTML代码与JS代码的分离,使得在用JS输出HTML时更方便,代码更清晰。有兴趣的可去看看 《Tempo.js : 轻量的JS模板工具类》。

刚好我现做的项目有大量的HTML与JS的拼接，但作者的实现有对不适合我的代码风格，我做了些修改就运用到我的项目里，也把我修改后的代码放出来吧！写成这种形式是为了更方便的嵌入到我的项目中来，而且我也没用到更复杂的功能，最最简单的替换就够了，就像Tempo.js的作者想法：为了实现HTML代码与JS代码的分离,使得在用JS输出HTML时更方便,代码更清晰。

var Obj = {
    yyTemp: function(id, data, def){
        var dom = document.getElementById(id);
        var parseObj = dom[id] || (dom[id] = (function(html){
            html = html.replace(/([\'|\\])/gm,"\\$1")   //转义掉 \ 和 '
                        .replace(/ style="display: ?none;?"/i,'')    //去除隐藏
                        .replace(new RegExp('{([^{}]*)}','gim'), "'+(typeof data[\"$1\"] != 'undefined'?data[\"$1\"]:'')+'")  //转化为包括变量的字符串
                        .replace(/[\n\r]/gm,'');    //去除回车换行
            html = ["return '", html ,"';"].join('');
            console.log( html );
            return new Function('data',html);
        })(dom.innerHTML));
        if(data.length){
            for(var i=0,ar; ar=data[i]; i++){
                data[i] = parseObj(ar);
            }
        }else data[0] = def || '';
        dom.innerHTML = data.join('');
    }
};

之所以写成这样是因为各浏览器对HTML代码渲染后的结果不一样！FF chrome Opera IE8 IE6下都没有问题。

在性能上比你的这种方式平均慢上10ms左右吧！还能接受，这种方式最主要是不用写多条语句实现目的，另外我对给出的数据加了个简单的判断，如果没有给出会留空而不像你的这种会在HTML中出现undefined字符。猛点这里查看Demo

MOSe这词就是有病

今天我一朋友问我MOSe是什么？ 答不上来，难道我又落伍了？

后发现它的意思是MOSe(Mozilla，Opera, Safari enhancement)。

我晕倒，不就是非IE浏览器嘛，又整个新名词出来干什么！

2003年，加拿大设计师、CSS Zen Garden创始人Dave Shea写了一篇备受关注的文章，阐述了如何跨越那些相互竞争的拥有不同特性的浏览器进行的设计创作的新途径，他把这个途径叫做MOSe(Mozilla，Opera, Safari enhancement)。

看这意思是说通过各浏览器自身的私有方法来实现统一的样式，就我郁闷，这些东西CSS3中都定义好了，为何整出个自己的么有属性，是觉得CSS设计人员还不够累吗？

MOSe又是个旧瓶装新“酒”，多少年来CSS设计人员都是这么写的，现整出个名词干什么？给设计人员平反吗？

现实JS模板，可设置默认值

在写封装一些URL请求时想到用模板的方式会很灵活，所以在网上看了下，把replace的第二个参数写成函数时还真有意思，省了写循环的事，呵呵！也实现了我认为必需得有的特性：设置默认值。

[javascript]
var urlList = {
    type: {
        a:'http://nootn.com/blog/?id={key}&name={name:asins}&notn={notn:js}',
        //这里还有很多这样的URL
    },
    url: function(T, O){
        var reg = new RegExp('\{([^}]+?)\}', 'g');
        var url = this.type[T].replace(reg, function(v,key){
            var arr = key.split(':');
            return encodeURIComponent( (O[arr[0]] != undefined ? O[arr[0]] : arr[1])||'' );
        });
        return url;
    }
    //这里还有其它函数
}

使用时就很方便了，

urlList.url('a', {key:'keyName', name:'nootn'});
//这样生成的URL就是http://nootn.com/blog/?id=keyName&name=nootn&notn=js

JS写的一个切换效果

帮人写的，呵呵！

里面有Ticker、以及lightbox效果，看Demo吧！

用jQuery写的，看着吧！在于如何实现，了解了这个用其它的也都一样了！HTML结构以及CSS可不是我写的，可能用于显现一个Demo有点不适合，看JS就是了，我也尽量让JS与HTML的结构分离了。