潘绳杰的技术博客

2016-12-19发表前端开发2 分钟读完 (大约300个字)

记录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-16发表前端开发几秒读完 (大约96个字)

使用browserSync作为开发环境使用HTML5模式的配置方法

使用browserSync自动热加载开发单页应用，启用AngularJS下的HTML5模式，相对路径的URL刷新会
提示无法获取请求。

安装connect-history-api-fallback包

1	npm install connect-history-api-fallback --save-dev

配置

在gulpfile.js文件中配置以下内容

var historyApiFallback = require('connect-history-api-fallback')
var bs = require('browser-sync').create();

bs.init({
   server: {
       baseDir: "./app",
       middleware: [ historyApiFallback() ]
    }
})

【全文完】

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

【全文完】

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

百度地图显示位置错误

近期使用百度地图开发一个应用，调用百度地图的JavaScript api接口，记录下遇到的错误。

常见问题

错误1：fc未定义

问题描述：

控制台一直报fc undefined?

解决方法：

map必须要dom加载完成后实例化。

错误2：地图显示位置错误

问题描述：

百度地图隐藏后，再次打开，地图一直显示错误？

解决方法：

问题在于地图在DOM加载完成之前加载了，导致无法正确显示。
通过启一个定时器，200毫秒延时进行加载即可。

【以上全部内容】

2016-12-04发表前端开发3 分钟读完 (大约417个字)

AngularJS的$timeout和$interval服务使用

记录AngularJS中两个关于定时器相关service的使用，其中$timeoute为触发一次，$interval为循环
触发，这两个服务分别对应JS中的setTimeout和setInterval函数（同属于window对象）。

关闭调试数据

关闭控制台的debug信息

安装connect-history-api-fallback包

配置

修改代码

修改nginx配置

参考

安装

使用

定制

浏览器兼容性

常见问题

错误1：fc未定义

错误2：地图显示位置错误

链接

分类

最新文章

标签

归档