2017 年 12 月

[bizhong]

Tab 边框简写

<nav class="tabs">
  <a class="tabs-tab active" href="#beijing">北京</a>
  <a class="tabs-tab" href="#shanghai">上海</a>
  <a class="tabs-tab" href="#guangzhou">广州</a>
  <a class="tabs-tab" href="#shenzhen">深圳</a>
</nav>

.tabs {
  font-size: 0;
}
.tabs-tab {
  display: inline-block;
  padding: 0 24px;
  border: 1px solid #e0e0e0;
  font-size: 14px;
  line-height: 32px;
  text-decoration: none;
  color: rgba(0, 0, 0, .54);
}
.tabs-tab.active,
.tabs-tab:hover {
  border-color: #333;
  color: rgba(0, 0, 0, .87);
  background-color: #f2f2f2;
}

问题：相邻 Tab border-width 为 2px。

虽然 border-left: 0; 或 border-right: 0; 可以解决上述问题，但是 hover 时又会出现新的问题（边框四个边没有全部着色 #333）。

解决方法：margin 负值、z-index。

.tabs {
  font-size: 0;
}
.tabs-tab {
  display: inline-block;
  /* + */
  position: relative;
  z-index: 0;
  margin-right: -1px;
  /* + */
  padding: 0 24px;
  border: 1px solid #e0e0e0;
  font-size: 14px;
  line-height: 32px;
  text-decoration: none;
  color: rgba(0, 0, 0, .54);
}
.tabs-tab.active,
.tabs-tab:hover {
  /* + */
  z-index: 1;
  /* + */
  border-color: #333;
  color: rgba(0, 0, 0, .87);
  background-color: #f2f2f2;
}

[bizhong]

Handlebars.js

Handlebars 是 JavaScript 一个语义模板库，通过对 view 和 data 的分离来快速构建 Web 模板。

它采用"Logic-less template"（无逻辑模版）的思路，在加载时被预编译，而不是到了客户端执行到代码时再去编译， 这样可以保证模板加载和运行的速度。

• 简单使用

<ul class="lanbizhong"></ul>

<!-- 引入脚本 -->
<script src="./assets/dep/handlebars.js"></script>

<!-- 定义模板 -->
<script id="lanbizhong-template" type="text/x-handlebars-template">
  {{#each this}}
    <li>{{@index}} - {{id}}：{{name}}</li>
  {{/each}}
</script>

// 结果数组
var data = [
  {
    'id': 1,
    'name': '北京'
  },
  {
    'id': 2,
    'name': '上海'
  },
  {
    'id': 3,
    'name': '广州'
  },
  {
    'id': 4,
    'name': '深圳'
  }
];

// 编译模板
var lanbizhongTemplate = Handlebars.compile($('#lanbizhong-template').html());

// 输入模板
$('.lanbizhong').append(lanbizhongTemplate(data));

• 通过 Helper 实现引入子模板功能

{{{include 'lanbizhong-child-template' this}}}

/**
 * [include 引入子模板]
 * @param  {[String]} id   [子模板名称]
 * @param  {[Array]}  data [数据]
 * @return {[type]}        [description]
 */
Handlebars.registerHelper('include', function(id, data) {
  var html = $('#' + id).html();
  return Handlebars.compile(html)(data);
});

• 通过 Helper 实现自定义 If

{{#ifIsShenzhen id}}
  <p>来了就是深圳人</p>
{{else}}
  <p>欢迎来深圳</p>
{{/ifIsShenzhen}}

/**
 * [ifIsShenzhen 是否是深圳]
 * @param  {[Number]} id      [id]
 * @param  {[type]}   options [description]
 * @return {[type]}           [description]
 */
Handlebars.registerHelper('ifIsShenzhen', function(id, options) {
  if (id == 4) {
    return options.fn(this);      // 满足添加继续执行
  } else {
    return options.inverse(this); // 不满足条件执行 {{else}} 部分
  }
});

• HTML 转义

{{{isShenzhen id}}}

/**
 * [isShenzhen 是否是深圳]
 * @param  {[Number]} id [id]
 * @return {[String]}    [HTML]
 */
Handlebars.registerHelper('isShenzhen', function(id) {
  if (id == 4) {
    return '<p>来了就是深圳人</p>';
  }
  return '<p>欢迎来深圳</p>';
});

• 数组显示

{{arr.[0].name}}

[bizhong]

解决 resize 多次执行

var resizeTimer = null; // 调整浏览器窗口大小定时器

function handleResize() {
  // ...
}

// 调整浏览器窗口大小
$(window).on('resize', function(e) {
  if (resizeTimer) { clearTimeout(resizeTimer); }
  resizeTimer = setTimeout(handleResize, 500);
});

[bizhong]

JavaScript 书写顺序

// --------------------------------------------------------------
// 变量申明
// --------------------------------------------------------------

var NAME = 'lanbizhong'; // 常量

var type = 0;            // 变量

// --------------------------------------------------------------
// 函数声明
// --------------------------------------------------------------

/**
 * [lanbizhong description]
 * @param  {[type]} type [description]
 * @return {[type]}      [description]
 */
function lanbizhong(type) {
  // ...
}

// --------------------------------------------------------------
// 页面交互
// --------------------------------------------------------------

lanbizhong(type);