潘绳杰的技术博客

/* 工厂模式 */
function createPerson(name, age, job) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function() {
        alert(this.name);
    };
    return o;
}

var person1 = createPerson("Nicholas", 29, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");

console.log(person1);
console.log(person2);

优点:
解决创建多个相似对象。

缺点：
没有解决对象识别的问题。

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

通过css实现锚点跳转后的位置调整

设计导航菜单的过程中，有时候会涉及到二级子菜单，外部的或者是内部页面页面的跳转，这个时候，锚点可能会派上场。

其中使用锚点进行页面的各部分内容跳转，有时候页面的导航栏是使用固定定位(fixed)的布局，可能会导致标题遮挡部分跳转后的内容，因此，需要对锚点调整后的位置进行偏移。

方法

通过使用css实现锚点跳转后的位置调整：

定义一个class:

.named-target {
  padding-top: 50px;
  margin-top: -50px;
}

将这个class赋给锚点或者锚点后的元素即可。

原理

字面上的原理可以理解为元素外边距向上移动了50像素，使用上内边距给抵消了。
内在的原理，我还没理解，待理解了再更新。

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

css弹性盒简介之一

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-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>

ag-grid介绍

工厂模式

方法

原理