TOMMYHU

在angularjs的sap项目中使用了requirejs做模块管理，rjs参与压缩，在配置了很多次path之后压缩没有问题，发现压缩后的文件一直报错，最后取消了uglify的混淆解决问题，参考了以下文档，感谢作者分享

我在项目使用了AngularJS框架，用RequireJS做异步模块加载（AMD），在做文件合并压缩时，遇到了一些坑，有些只是解决了，但不明白原因。

那些坑
1. build.js里面的paths必须跟main.js里面的保持一致。

这个build.js就是r.js使用的配置文件，而main.js就是RequireJS的main文件。在合并压缩时候，build.js文件里面也需要写paths，而且还是跟main.js一样，我很奇怪为什么就不能识别main里面的require.config的paths，省得合并的时候还要将paths拷贝过来（我试过build.js里面没有paths，是不能合并的）。（-_-!!!）

2. 某些依赖库需要写整个相对路径才能做合并。

在项目里， 我使用一个叫layer的第三方库（库是以requireJS define写的），一开始只做开发时候，在paths配置了路径后，使用此库只需要用个简称（define依赖时候）。 但在做合并时候，竟然提示文件不存在（因为直接拿简称去拼文件地址了），无奈之下只能修改这个库的使用办法，全部使用到这个库的都写整个相对路径，这个时候开发和做合并才没有错。

3. 合并之后可以运行，加上压缩就不可以。

这个是最严重问题，最严重问题，最严重问题。在文件合并压缩后，使用文件时候，AngularJS运行就不正常了，总是报模块初始化失败，Failed to instantiate module common due to: Error: [$injector:unpr] Unknown provider: e，如下图。



很关键的一个点就是，不压缩可以用，一旦压缩了（用了默认的压缩），使用就会报错。所以思考必定某些东西被“压坏”了，网上某些文章都说是需要下面这样写AngularJS cntroller、directive等，使用的服务用字符串定义。

commonModule.controller( "broswerCtrl" ,["$scope" ,"$sce" , function ($scope,$sce){
可是我的整个应用就是这样定义，并没有给它注入错误的机会。[b]最后在无奈之下，就只能配置mangle: false，不混淆变量名，这样做后，合并压缩的文件就能正确使用了！！！配置文件如下
({      baseUrl:"../",      paths: {          //...      },      shim: {          //...      },      optimize: "uglify",      uglify: {         mangle: false  //false 不混淆变量名      },      findNestedDependencies: true,      name: "js/main",      out: "../js/main-built.js" }) //npm install uglify-js -g安装插件

[/b]PS：简单说法就是，合并压缩可以，变量名不能混淆（总觉得怪怪的），感觉问题暂时无解。

4. 第二层的require，做合并的时候，是合并不出来。

例如在mian.js里面这样加载模块，在合并时候会发现第二层的require并没有被合并到。
require([ "COMMON"], function(){      require([ "angular", "LOGIN" ], function(angular){            //....      }); });
这时需要在build.js加findNestedDependencies: true, 这时才会合并第二层。

合并准备

安装nodejs

文件合并压缩基于nodejs，所以先安装nodejs，下载地址： http://blog.nodejs.org/2013/07/25/node-v0-10-15-stable/

下载r.js

r.js配合requirejs模块写法对文件进行合并，压缩，下载地址： https://github.com/jrburke/r.js

简单配置

配置文件最好写一个build.js，如下：
({      baseUrl:"../",      paths: {          //...      },      shim: {          //...      },      optimize: "uglify",      uglify: {         mangle: false  //false 不混淆变量名      },      findNestedDependencies: true,      name: "js/main",      out: "../js/main-built.js" }) //npm install uglify-js -g安装插件
这里就讲几个关键属性：

baseUrl：所有的模块（般就是js）都相对于这个路径存在。

optimize：优化脚本文件的方式，有下面5种取值方式。

uglify：（默认） 用UglifyJS压缩。
uglify2： 用UglifyJS2（ 2.1.2+）压缩。
closure： 使用Google's Closure Compiler 简单优化模式压缩文件, 仅在优化工具使用Java有效。
closure.keepLines：跟closure参数一样, 只不过保留换行符。
none： 不做压缩。
findNestedDependencies：寻找require()里面的require或define调用的依赖。

PS：配置属性还有很多，就不一细细说了，有篇文章写得很详尽，地址：http://segmentfault.com/a/1190000002403806#articleHeader37

当文件配置好后，就执行命令合并压缩

node r.js -o build.js
总结

RequireJS模块的合并压缩还是比较简单的，但是遇到AngularJS，在压缩方面就有些问题了，目前没找到什么更好办法。

写的很好的一篇文章,原文来自淘宝前端的“小胡子哥哥”，前端发展瞬息万变，伴随新硬件、新技术的出现，更多好的技术将会如雨后春笋般出现！

Web 发展了几十个春秋，风起云涌，千变万化。我很庆幸自己没有完整地经历过这些年头，而是站在前人的肩膀上行走。Web 技术发展的速度让人感觉那几乎不是继承式的迭代，而是一次又一次的变革，一次又一次的创造。这几年的前端，更为之甚！

我要说话

我从 12 年底开始接触前端，12 年之前的前端发展情况只能从上一辈的笔触中领会。本文会盘点从 09 年开始到 15 年间前端技术的革新，同时也会从多个角度，解读近几年前端技术发展的潜在因素，其中穿插了若干对前端演进的拙见，难免会有错误和疏漏，望读者可以补充和斧正。

写的非常好的一篇文字，所以转了，细细来看……

【私有变量】 在对象内部使用'var'关键字来声明，而且它只能被私有函数和特权方法访问。
【私有方法】 在对象的构造函数里声明（或者是通过varfunctionName=function(){...}来定义），
它能被特权方法调用（包括对象的构造方法）和私有方法调用,私有函数只能访问私有的方法和属性。
【特权方法】通过this.methodName=function(){...}来声明而且可能被对象外部的代码调用。
它可以使用：this.特权函数() 方式来调用特权函数，使用 ：私有函数()方式来调用私有函数。

【公共属性】 通过this.variableName来定义而且在对象外部是可以读写的。不能被私有函数所调用。
【公共方法】 通过ClassName.prototype.methodName=function(){...}来定义可以从对象外部来调用。
【原型属性】 通过ClassName.prototype.propertyName=someValue 来定义。
【静态属性】 通过ClassName.propertyName=someValue 来定义。
【静态方法】 通过ClassName.funName=function(){...} 来定义。
function myfun1() {     //这是私有属性     var private1 = "这是私有属性";     var privateMethod = function () {         alert(private1);     }     //这是实例属性     this.publicvar = "这是实例属性";     this.public1 = function () {         privateMethod();     } } var newfun1 = new myfun1(); newfun1.public1(); //这是私有属性 alert(newfun1.publicvar);//这是实例属性 alert(newfun1.private1); // undefined   newfun1.privateMethod(); //运行错误 function myfun2() { } myfun2.staticvar = "这是静态属性"; myfun2.staticmethod = function () {     alert(myfun2.staticvar); } var newfun2 = new myfun2(); //newfun2.staticmethod();//运行错误; alert(newfun2.staticvar);//undefined //静态私有成员 var myfun3 = (function () {     function privateProperty() {     }     privateProperty.staticvar = "这是静态私有成员";     privateProperty.staticmethod = function () {         alert(privateProperty.staticvar);     }     privateProperty.staticmethod();     return privateProperty })(); //静态类 var funcount = 0; var myfun4 = new function () {     funcount++;     this.printCount = function () {         alert(funcount);     } } myfun4.printCount(); //输出1; myfun4.printCount(); //输出1; myfun4.prototype.amethod = function () {     alert("原型对象"); }//运行错误 var newfun4 = new myfun4(); newfun4.amethod(); //运行错误,说明myfun3创建并实例化之后就不能再为它添加方法,属性 new myfun3.constructor().printCount();//如果你确实想实例化,这样也可以. //原型继承 var myfun5 = function () { } myfun5.prototype.myfun5_extend = function () {     alert("这是原型继承的"); } var myfun5_sub = function () { } myfun5_sub.prototype = new myfun5(); var newfun5 = new myfun5_sub(); newfun5.myfun5_extend(); //这是原型继承的 //调用继承 var myfun6 = function () {     this.method_p = function () {         alert("这是调用继承的");     } } var myfun6_sub = function () {     myfun6.call(this); } var newfun6 = new myfun6_sub(); newfun6.method_p();//这是调用继承的 //覆盖 var myfun7 = function () {     this.method = function () {         alert("这是父对象方法");     } } var myfun7_sub = function () {     this.method = function () {         alert("这是子对象方法");     } } myfun7_sub.prototype = new myfun7(); var newfun7 = new myfun7_sub(); newfun7.method(); //这是子对象方法,父对象方法被覆盖了. //多态 function myfun8(a, b) {     var a = a;     var b = b;     if (typeof a == "number" && typeof b == "number") {         alert(a * b);     } else if (typeof a == "string" && typeof b == "string") {         alert(a + b);     } else {         alert("输入错啦");     } } myfun8(3, 4); // 输出12; myfun8("hi,", "你好");//输出hi,你好; myfun8("hi", 5);//输入错啦.

移动端的单位现在都是用rem，icon太多合成雪碧图减少网络请求

安装ruby，
安装sass或升级到最新
gem install sass gem update sass

安装compass或升级到最新
gem install compass gem update compass

步骤
1、建立一个目录，当然具体的项目应该整合到项目里
mkdir work;

2、到这个目录并初始化
cd work; compass init;

发现work目录下生成了项目文件

建立images/icons目录，并将i需要合并的con拷贝到该目录
在sass下建立icons.scc文件内容如下
$icons: sprite-map("icons/*.png", $spacing: 8px, $layout: smart); $bigWidth: sprite-width($icons);//sprite img width $bigHeight: sprite-height($icons); //sprite img height @function px2rem ($px) {   @if (type-of($px) == "number") {     @return $px / 64px * 1rem;   }   @if (type-of($px) == "list") {       @if (nth($px, 1) == 0 and nth($px, 2) != 0) {         @return 0 nth($px, 2) / 64px * 1rem;       } @else if (nth($px, 1) == 0 and nth($px, 2) == 0)  {         @return 0 0;       } @else if (nth($px, 1) != 0 and nth($px, 2) == 0) {         @return nth($px, 1) / 64px * 1rem 0;       } @else {         @return nth($px, 1) / 64px *1rem nth($px, 2) / 64px * 1rem;       }   } } @mixin sprite-info ($icons, $name) {   width: px2rem(image-width(sprite-file($icons, $name)));   height: px2rem(image-height(sprite-file($icons, $name)));   background-image: sprite-url($icons);   background-position: px2rem(sprite-position($icons, $name));   background-size: px2rem(($bigWidth, $bigHeight));   background-repeat: no-repeat; } .ic_home_press {   @include sprite-info($icons, ic_home_press); } .ic_logout_press {   @include sprite-info($icons, ic_logout_press); }

3、执行compass compile
生成了合并图icons-saafd78ade7.png
以及css
.ic_home_press {   width: 1rem;   height: 1rem;   background-image: url('../images/icons-saafd78ade7.png');   background-position: 0 -0.875rem;   background-size: 3.78125rem 4.21875rem;   background-repeat: no-repeat; } .ic_logout_press {   width: 0.875rem;   height: 0.875rem;   background-image: url('../images/icons-saafd78ade7.png');   background-position: 0 0;   background-size: 3.78125rem 4.21875rem;   background-repeat: no-repeat; }

comprass api
$sprites:sprite-map("图片文件夹/*.png", $spacing:10px, $layout: vertical); sprite-width($sprites) ;// 图片精灵的宽 sprite-height($sprites); // 图片精灵的宽 sprite-url($sprites); //图片精灵的路径 sprite-position($sprites, $name); //某张图片在图片精灵中的位置。可以直接作为background-position的值。 nth(sprite-position($sprites, $name), 1) ;//某张图片在图片精灵中的x的位置 nth(sprite-position($sprites, $name), 2) ;//某张图片在图片精灵中的y的位置 image-width(sprite-file($sprites, $name));//某张图片的宽 image-height(sprite-file($sprites, $name));//某张图片的高

随着商业及其相关需求的发展，数据成为越来越重要的元素之一，为了更加直观和明显的展示商业潜在的趋势和内在的特性，我们需要使用图表和图形的方式来直观动态的展示数据内在秘密，在今天的这篇文章中我们推荐12款最棒的数据可视化的Javascript框架，希望能够帮助大家在项目中更好的实现数据可视化效果。

1.简介
GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

一个完整的GeoJSON数据结构总是一个（JSON术语里的）对象。在GeoJSON里，对象由名/值对--也称作成员的集合组成。对每个成员来说，名字总是字符串。成员的值要么是字符串、数字、对象、数组，要么是下面文本常量中的一个："true","false"和"null"。数组是由值是上面所说的元素组成。

1.1.举例
GeoJSON特征集合：

{ "type": "FeatureCollection",
  "features": [
    { "type": "Feature",
      "geometry": {"type": "Point", "coordinates": [102.0, 0.5]},
      "properties": {"prop0": "value0"}
      },
    { "type": "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]
          ]
        },
      "properties": {
        "prop0": "value0",
        "prop1": 0.0
        }
      },
    { "type": "Feature",
       "geometry": {
         "type": "Polygon",
         "coordinates": [
           [ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0],
             [100.0, 1.0], [100.0, 0.0] ]
           ]
       },
       "properties": {
         "prop0": "value0",
         "prop1": {"this": "that"}
         }
       }
     ]
   }

animate.css – 是一个齐全的CSS3动画库，查看效果：http://www.dowebok.com/demo/2014/98/
简介

animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。

虽然借助 animate.css 能够很方便、快速的制作 CSS3 动画效果，但还是建议看看 animate.css 的代码，也许你能从中学到一些东西。

兼容

浏览器兼容：当然是只兼容支持 CSS3 animate 属性的浏览器，他们分别是：IE10+、Firefox、Chrome、Opera、Safari。

使用方法

1、引入文件
<link rel="stylesheet" href="animate.min.css">

2、HTML 及使用
<div class="animated bounce" id="dowebok"></div>
给元素加上 class 后，刷新页面，就能看到动画效果了。animated 类似于全局变量，它定义了动画的持续时间；bounce 是动画具体的动画效果的名称，你可以选择任意的效果。

如果动画是无限播放的，可以添加 class infinite。

你也可以通过 JavaScript 或 jQuery 给元素添加这些 class，比如：
$(function(){     $('#dowebok').addClass('animated bounce'); });
有些动画效果最后会让元素不可见，比如淡出、向左滑动等等，可能你又需要将 class 删除，比如：
$(function(){     $('#dowebok').addClass('animated bounce');     setTimeout(function(){         $('#dowebok').removeClass('bounce');     }, 1000); });
animate.css 的默认设置也许有些时候并不是我们想要的，所以你可以重新设置，比如：
#dowebok {     animate-duration: 2s;    //动画持续时间     animate-delay: 1s;    //动画延迟时间     animate-iteration-count: 2;    //动画执行次数 }
注意添加浏览器前缀。