2017-03-23发表前端开发1 分钟读完 (大约118个字)

css布局经历了使用table和float布局的过程，W3C推出了flexbox的布局方式。

Flexbox基础

flex container

使用div或者其他标签作为容器，用于放置其他子元素。

flex items

嵌套在容器中的直接元素自动转为flex item，子元素的子元素便不是flex item。

实例

<!-- html part -->
<div class="container">
  <div>A flex item</div>
  <div>Another flex item</div>
  <div>A third flex item</div>
</div>

/* css part */
.container {
  display: -webkit-flex;
  display: flex;
}

.container div {
  -webkit-flex: 1;
  flex: 1;
}

2017-03-22发表前端开发3 分钟读完 (大约453个字)

i18next的jquery插件jquery-i18next的使用方法

前提条件

使用jquery-i18next插件前，需要jquery和i18next的支持。

安装

jquery-i18next支持npm和bower安装

# npm package
$ npm install jquery-i18next

# bower
$ bower install jquery-i18next

使用入门

在html代码中插入data-i18n的属性

<ul class="nav">
  <li><a href="#" data-i18n="nav.home"></a></li>
  <li><a href="#" data-i18n="nav.page1"></a></li>
  <li><a href="#" data-i18n="nav.page2"></a></li>
</ul>

定义翻译文件

可在源码路径下创建locales/en/translation.json文件

{
  "nav": {
    "home": "Home",
    "page1": "Page One",
    "page2": "Page Two"
  }
}

通过Javascript代码进行初始化和翻译

// 其中i18nextInstance是i18next的实例，最后一个参数是配置项

jqueryI18next.init(i18nextInstance, $, {
  tName: 't', // --> appends $.t = i18next.t
  i18nName: 'i18n', // --> appends $.i18n = i18next
  handleName: 'localize', // --> appends $(selector).localize(opts);
  selectorAttr: 'data-i18n', // selector for translating elements
  targetAttr: 'i18n-target', // data-() attribute to grab target element to translate (if diffrent then itself)
  optionsAttr: 'i18n-options', // data-() attribute that contains options, will load/set if useOptionsAttr = true
  useOptionsAttr: false, // see optionsAttr
  parseDefaultValueFromContent: true // parses default values from content ele.val or ele.text
});

$(".nav").localize();

最终展现在网页中的结果

// <ul class="nav">
//  <li><a href="#" data-i18n="nav.home">Home</a></li>
//  <li><a href="#" data-i18n="nav.page1">Page One</a></li>
//  <li><a href="#" data-i18n="nav.page2">Page Two</a></li>
// </ul>

使用进阶

通过jQuery的选择器来实现不同的翻译

翻译一个元素

1 2	<a id="btn1" href="#" data-i18n="myKey"></a> $("#btn1").localize(options);

翻译一个元素的子元素

<ul class="nav">
  <li><a href="#" data-i18n="nav.home"></a></li>
  <li><a href="#" data-i18n="nav.page1"></a></li>
  <li><a href="#" data-i18n="nav.page2"></a></li>
</ul>
$(".nav").localize();

翻译一些内部元素

<div class="outer" data-i18n="ns:key" data-i18n-target=".inner">
  <input class="inner" type="text"></input>
</div>
$(".outer").localize();

设置不同属性的翻译

比如，想要设置某个元素的title属性的多语言，可使用这种方式；或者其他提示信息等。

1 2	<a id="btn1" href="#" data-i18n="[title]key.for.title"></a> $("#btn1").localize();

设置多个属性

和设置单个属性类似，不过通过分号进行分隔，添加多个属性。

1 2	<a id="btn1" href="#" data-i18n="[title]key.for.title;myNamespace:key.for.text"></a> $("#btn1").localize();

设置内部html的属性

1 2	<a id="btn1" href="#" data-i18n="[html]key.for.title"></a> $("#btn1").localize();

添加前置内容

给一个元素原有内容前插入一些翻译文字

1 2	<a id="btn1" href="#" data-i18n="[prepend]key.for.title">insert before me, please!</a> $("#btn1").localize();

添加后置内容

给一个元素原有内容后追加一些翻译文字

1 2	<a id="btn1" href="#" data-i18n="[append]key.for.title">append after me, please!</a> $("#btn1").localize();

设置数据

1 2	<a id="btn1" href="#" data-i18n="[data-someDataAttribute]key.for.content"></a> $("#btn1").localize();

参考

jquery-i18next

2017-03-11发表前端开发2 分钟读完 (大约301个字)

百度地图获取可视区域及回调事件的用法简介

记录使用百度地图获取可视区域、回调事件的用法。

可视区域

使用百度地图获取可视区域的坐标点的方法：

原理：通过地图状态方法的接口getBounds()可获取到Bounds对象，包含东北和西南角的坐标点。

// 获取地图可视化区域的坐标点
function getViewAreaPoint(map) {
  var bounds = map.getBounds();
  console.log(bounds);
  var swPoint = bounds.getSouthWest();
  var nePoint = bounds.getNorthEast();
  var nwPoint = new BMap.Point(swPoint.lng, nePoint.lat);
  var sePoint = new BMap.Point(nePoint.lng, swPoint.lat);
  console.log(swPoint);
  console.log(nePoint);
  console.log(nwPoint);
  console.log(sePoint);
}

事件监听

原理：定义事件回调函数，添加事件的监听。

以click事件为例：

map.addEventListener("click", showInfo);

function showInfo(e) {
  console.debug(e);
  console.debug(e.type);
  console.debug(e.target);
  console.debug(e.point);
  console.debug(e.pixel);
  console.debug(e.overlay);
  // console.debug(e.point.lng + ", " + e.point.lat);
}

百度地图的JavaScript类参考中列举click事件的说明：
事件: click
参数：(type, target, point, pixel, overlay)
描述：左键单击地图时触发此事件。

参数的说明：
type: 事件类型(“onclick”)
target: 地图实例
point: 经纬度坐标点Point对象
pixel: 像素坐标
overlay: 覆盖物对象

【以上】

2017-03-08发表前端开发几秒读完 (大约70个字)

disable超链接的css样式

想要设置disabled的超链接，让用户不可点击，可添加一个class来设置。

.disabled-link {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}

<a href="#" class="disabled-link">link</a>

注意：
pointer-events这个属性对浏览器兼容性有一定的要求。

IE11
Edge 14
Firefox 51
Chrome 49
Safari 10
Opera 43

【以上】

2017-02-20发表前端开发1 分钟读完 (大约193个字)

自定义li的css样式

li的默认样式有几种，我们想要自定义li的样式，例如定义颜色或者显示的图标，以下是操作的两种方法。

方法一：

修改的原理，取消list默认的style，并通过伪元素before来设置新的样式。

ul {list-style: none}

li::before {
  content: "•"; color: red;
  display: inline-block; width: 1em;
  margin-left: -1em
}

特殊符号的一些输入可使用Unicode编码：• = “\2022”, ◦ = \25E6” and ▪ = “\25AA”

方法二：

修改的原理，通过自定义的class来区分标点和文字的颜色。

.listStyle {
  color: red;
}

.listStyle p {
  color: black;
}

<ul class="listStyle">
  <li>
    <p><strong>View :</strong> blah blah.</p>
  </li>
  <li>
    <p><strong>View :</strong> blah blah.</p>
  </li>
</ul>

参考：

2017-01-20发表前端开发3 分钟读完 (大约507个字)

JavaScript国际化方案i18next的入门使用

JavaScript中实现国际化的方案有不少，从github上star数较多的选择角度，选择了i18Next库，生态比较全。

i18next的官方教程文档不够明了，记录一下入门使用，主要是加载自定义的多语言json文件。

拷贝官方的实例

1	https://github.com/i18next/jquery-i18next/blob/master/example/sample.html

将官方的实例放入Web服务器上，通过浏览器可直接访问。

此时的文字内容是通过js代码直接定义的，若是要添加其他的语言，直接在resources中添加即可。

增加对多语言json文件的支持

引入插件xhr backend

增加xhr配置项：

{
  // path where resources get loaded from, or a function
  // returning a path:
  // function(lngs, namespaces) { return customPath; }
  // the returned path will interpolate lng, ns if provided like giving a static path
  loadPath: '/locales/{{lng}}/{{ns}}.json',

  // path to post missing resources
  addPath: 'locales/add/{{lng}}/{{ns}}',

  // your backend server supports multiloading
  // /locales/resources.json?lng=de+en&ns=ns1+ns2
  allowMultiLoading: false,

  // parse data after it has been fetched
  // in example use https://www.npmjs.com/package/json5
  // here it removes the letter a from the json (bad idea)
  parse: function(data) { return data.replace(/a/g, ''); },

  // allow cross domain requests
  crossDomain: false,

  // allow credentials on cross domain requests
  withCredentials: false,

  // define a custom xhr function
  // can be used to support XDomainRequest in IE 8 and 9
  ajax: function (url, options, callback, data) {}

  // adds parameters to resource URL. 'example.com' -> 'example.com?v=1.3.5'
  queryStringParams: { v: '1.3.5' }
}

使用xhr:

import i18next from 'i18next';
import XHR from 'i18next-xhr-backend';

i18next
  .use(XHR)
  .init(i18nextOptions);

增加json文件

增加json翻译文件：

1
2
3

locales/en/translation.json
locales/zh/translation.json
locales/dev/translation.json

切换语言

切换多语言，切换之后需要再调用localize函数。

var lan = i18next.language;
i18next.changeLanguage(lan == 'zh' ? "en" : "zh", (err, t) => {
    // resources have been loaded
    console.log("changeLanguage success: " + i18next.language);
    $('.translation').localize();
  });

缓存的问题

v1.4.1版本增加查询参数，可以控制浏览器的缓存。

使用方法：在配置项中增加以下的版本配置。

1	queryStringParams: { v: '1.3.5' }

【全文完】

–update 2017.5.14
增加v1.4.1版本的查询参数配置说明

2017-01-07发表前端开发2 分钟读完 (大约261个字)

Chrome浏览器下清除缓存的方法总结

开发过程中，修改js和css，希望浏览器能够加载最新的代码，需要清除缓存，记录几种Chrome下的方法。

Chrome下清除浏览器缓存刷新页面的方法

开发者工具中禁用缓存选项

打开Chrome的开发者工具，Network下有个Disable cache选项，勾上即可。

浏览器关闭缓存选项

注意点：该选项只有在开发者工具保持打开状态有效。

浏览器插件：Cache Killer

安装浏览器插件，可以打开或者关闭。

cache killer

右键点击刷新按钮

右键点击刷新按钮，可出现三个选项：

正常重新加载
硬性重新加载
清除缓存并重新加载

重新加载选项

可选择“清除缓存并重新加载”，来清除全部缓存。

【全文完】

2016-12-26发表前端开发1 分钟读完 (大约127个字)

angularjs中模态窗口$uibModal的数据回传问题

关于模态窗口的数据如何回传到主控制器中？

通过$uibModalInstance.close(data)来回传数据。
主控制器通过result回调接收即可。

代码实例如下：

app.controller("commonCtl", function ($scope, $uibModal) {
  $scope.openDialog = function () {
    var modalInstance = $uibModal.open({
      templateUrl: 'dialog.html',
      controller: 'formCtl',
      windowClass: 'window',
      size: 'lg',
      resolve: {
        data: function () {
          return $scope.data;
        }
      }
    });

    modalInstance.result.then(
      function (data) { // 关闭时回传过来的值（$uibModalInstance.close(data)）
        $scope.data = data;
      },
      function (reason) { // 取消时
        // 点击空白区域：backdrop click
        // 点击取消：cancel
      }
    );
  };
})

【全文完】

2016-12-24发表前端开发6 分钟读完 (大约918个字)

浏览器中的怪异模式和标准模式

在Web的早期，页面是有两个版本：一个是为Netscape Navigator而写，另一个是为微软IE。

当W3C制定Web标准时，浏览器并不能立即开始使用它们，因为这样做会破坏许多已经存在的网站。因此浏览器引入了两个模式来对待新标准兼容的站点和遗留下来旧的站点。

目前在浏览器上有三种用于布局引擎的模式：怪异模式(quirks mode)、近标准模式(almost stardards mode)和完全标准模式(full standards mode)。

在怪异模式下，布局模拟Navigator 4和IE5的非标准行为。

这对于支持在Web标准被广泛接受之前创建的站点是必须的。在完全标准模式中，行为是按照HTML和CSS规范中描述的。在近标准模式中，只有一小部分的怪异实现。

2016-12-23发表前端开发5 分钟读完 (大约722个字)

数据可视化中的几个基本概念

数据可视化中的几个基础概念解释。

维度

数据分析过程中经常使用的一个概念，分析数据的角度。主要是指数值、时间和文本。

图表类型

散点图

展示数据的分布

折线图

展示某一维度数据在时间上的规律或者趋势

柱形图

展示多个维度的比较和变化

饼图

展示一组数据的占比情况

Flexbox基础

flex container

flex items

实例

前提条件

安装

使用入门

在html代码中插入data-i18n的属性

定义翻译文件

通过Javascript代码进行初始化和翻译

使用进阶

翻译一个元素

翻译一个元素的子元素

翻译一些内部元素

设置不同属性的翻译

设置多个属性

设置内部html的属性

添加前置内容

添加后置内容

设置数据

参考

可视区域

事件监听

方法一：

方法二：

参考：

拷贝官方的实例

增加对多语言json文件的支持

增加json文件

切换语言

缓存的问题

Chrome下清除浏览器缓存刷新页面的方法

开发者工具中禁用缓存选项

浏览器插件：Cache Killer

右键点击刷新按钮

维度

图表类型

链接

分类

最新文章

标签

归档