2015年4月3日

未分类

---

simpleSearchbox.js

1、组件不要和class绑定，和data-*绑定

 this.$el.on('input', '.nba-search-txt', function(e) {
 //...
 }

2、应该提供多种方式

scope.on('click', '.nba-sug', function(e) {
    var $el = $(e.currentTarget),        
    q = $el.data('sug');
    self.submit(q);
    self.hideSug();
})

generalSearchbox.js

3.过滤localstorage特殊字符

var xmlchar = {
    '&': '&',
    '<': '&lt;',
    '>': '&gt;',
    "'": '&#39;',
    '"': '&quot;',
    '{': '&#123;',
    '}': '&#125;',
    '@': '&#64;'
};

4、没必要改变作用域，改变this

function showSuggest() {
    var suggest = this.suggest;
    //...
}

5、Suggest和SearchBox耦合太紧,使用订阅/发布方式

self.suggest = new Suggest(self.urlSearch, self, params.suggFixed, params.onDeactivate);

complexSearchbox.js

6、提高代码体验

 // query add 点击事件名
eventName = browser.iPhone? 'touchend': 'click'

7、回退刷新不要放到组件里，放到全局环境

// 浏览器的后退按钮点击 不刷新，清空query处理
sm.onpopstate({
    backFn: function () {
        // 回退 填充 原先的query
        var $searchbox = $('[data-searchbox]'),
            query = location.href.match(/q=[^&]*/)
        ;
        // 移除多行显示样式
        $searchbox.find('.row-wrap').removeClass('more-line').removeClass('fill-query');
        // 填充 old query
        $searchbox.find('.se-input').val(query? decode(query[0].replace('q=', '')).replace('+',' '): '')
    }
});

8、可以用bind改变作用域

setTimeout(function () {self.$input.trigger('input')}, timer);

9、

timer = setTimeout(function () {
    //清除Timer
    clearTimeout(timer);
    timer = null;
    check.call(searchbox);
    //设置搜索词
    searchbox.setQuery(self.value);
    //显示联想词
    showSuggest.call(searchbox);
}, 500);//这个阀值在移动端可以适当提高，因为移动端的输入相对较慢

core.js

日期 2015年4月3日
- \X24

• 闭包

• (xx,xx,xx)

• 逗号表达式

• CSS防止位置

• 全放在body里只渲染一次、、

• JS放置在最后，速度快

• 执行JS取出来后创建script标签