[关闭]
@hacke2 2015-04-03T12:37:12.000000Z 字数 1382 阅读 849

2015年4月3日

未分类


simpleSearchbox.js

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

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

2、应该提供多种方式

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

generalSearchbox.js

3.过滤localstorage特殊字符

  1. var xmlchar = {
  2. '&': '&',
  3. '<': '&lt;',
  4. '>': '&gt;',
  5. "'": '&#39;',
  6. '"': '&quot;',
  7. '{': '&#123;',
  8. '}': '&#125;',
  9. '@': '&#64;'
  10. };

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

  1. function showSuggest() {
  2. var suggest = this.suggest;
  3. //...
  4. }

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

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

complexSearchbox.js

6、提高代码体验

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

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

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

8、可以用bind改变作用域

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

9、

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

core.js

日期 2015年4月3日
- \X24

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注