潘绳杰的技术博客

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

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版本的查询参数配置说明

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-19发表前端开发2 分钟读完 (大约300个字)

AngularJS生产环境下的一些配置

记录AngularJS在生产环境下的一些配置，针对性能上的优化有帮助。

关闭调试数据

AngularJS默认会添加一些关于绑定、作用域到DOM节点，以及添加CSS类到数据绑定的元素。这些
信息主要是用于一些类似Protractor和
Batarang的工具使用。

生产环境下可关闭这些调试数据，以优化项目的性能，配置方法如下：

1
2
3

myApp.config(['$compileProvider', function ($compileProvider) {
  $compileProvider.debugInfoEnabled(false);
}]);

如果有需要调试，可以再浏览器的控制台中运行以下语句来打开：

1	angular.reloadWithDebugInfo();

关闭控制台的debug信息

一般我们会在代码中使用$log.debug()来添加控制台的调试信息，方便调试。一旦项目在生产环境下，这些
信息就不需要留给最终用户，因此可以选择关闭。

1
2
3

myApp.config(['$logProvider', function ($logProvider) {
  $$logProvider.debugEnabled(false);
}]);

说明：

该配置只是关闭debug级别的信息，debug以上的级别还是会在控制台输出，包括info,warn,error这些。

【全文完】

2016-12-18发表前端开发4 分钟读完 (大约604个字)

前端数据可视化库的选型

Web前端中有时会需要将数据通过图表的形式展示，而选择一个JavaScript的可视化库是比较重要的。
选择需要多个因素进行权衡，项目的需求、开发周期、人员的技术、文档、问题的解决、功能，下面是针对
github上星数较多的数据可视化库针对各角度做一下对比，方便后续的选型有所帮助。

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

去掉AngularJS的URL中的#

默认的AngularJS项目开发中的URL访问路径中会有”#”作为前缀出现，可以通过配置将”#”去掉。

这里主要记录针对静态站点的设置，使用Nginx作为Web服务器的情况。

修改代码

修改html页面，增加base标签

<html>
<head>
  <base href="/">
</head>

...

</html

修改js文件中的html5Mode

angular
    .module('app.routes')
    .config(['$locationProvider', function($locationProvider) {
      $locationProvider.html5Mode(true);
    }]);

修改nginx配置

修改nginx的配置文件，增加try_files配置

server {
        listen 80;
        server_name example.com;
        location / {
            root $htdocs;
            try_files $uri $uri/ /index.html =404;
        }
}

参考

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

loader.css的使用入门

Loaders.css是纯css的loading动画库。
Delightful and performance-focused pure css loading animations.

demo如下：

demo

安装

bower方式

1	bower install loaders.css

npm方式

1	npm i --save-dev loaders.css

使用

标准使用:

引入loaders.min.css
创建一个元素并添加动画的css类
插入适量的
到上一步创建的元素中

demo如下：

<!DOCTYPE html>
<html>
<head>
  <title>loaders css</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/ConnorAtherton/loaders.css/master/loaders.min.css">

  <style type="text/css">
    .loader-demo {
      background-color: gray;
      color: blue;
      border-color: blue;
      height: 150px;
      padding-top: 50px;
      text-align: center;
      > div {
        display: inline-block;
      }
    }

    .ball-pulse > div {
      background-color: orange;
    }

  </style>
</head>
<body>
  <h3>loaders css</h3>

  <div class="loader-demo">
    <div class="ball-pulse">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</body>
</html>

另外，这个库也支持jQuery的使用，具体参考这里

定制

可改变动画图标的背景颜色

1
2
3

.ball-grid-pulse > div {
  background: orange;
}

浏览器兼容性

IE11
Firefox 36
Chrome 41
Safari 8

【全文完】

拷贝官方的实例

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

增加json文件

切换语言

缓存的问题

关闭调试数据

关闭控制台的debug信息

修改代码

修改nginx配置

参考

安装

使用

定制

浏览器兼容性

链接

分类

最新文章

标签

归档