Pages: 13/288 First page Previous page 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 Next page Final page [ View by Articles | List ]
Jan 20
在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,如下图。
Highslide JS


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

commonModule.controller( "broswerCtrl" ,["$scope" ,"$sce" , function ($scope,$sce){
可是我的整个应用就是这样定义,并没有给它注入错误的机会。[b]最后在无奈之下,就只能配置mangle: false,不混淆变量名,这样做后,合并压缩的文件就能正确使用了!!!配置文件如下


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

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

例如在mian.js里面这样加载模块,在合并时候会发现第二层的require并没有被合并到。

这时需要在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:所有的模块(般就是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,在压缩方面就有些问题了,目前没找到什么更好办法。
Jan 13

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

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

我要说话

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

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

【公共属性】 通过this.variableName来定义而且在对象外部是可以读写的。不能被私有函数所调用。
【公共方法】 通过ClassName.prototype.methodName=function(){...}来定义可以从对象外部来调用。
【原型属性】 通过ClassName.prototype.propertyName=someValue 来定义。
【静态属性】 通过ClassName.propertyName=someValue 来定义。
【静态方法】 通过ClassName.funName=function(){...} 来定义。
Dec 23
移动端的单位现在都是用rem,icon太多合成雪碧图减少网络请求

安装ruby,
安装sass或升级到最新


安装compass或升级到最新


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

2、到这个目录并初始化


发现work目录下生成了项目文件
Highslide JS
建立images/icons目录,并将i需要合并的con拷贝到该目录
在sass下建立icons.scc文件内容如下


3、执行compass compile
生成了合并图icons-saafd78ade7.png
以及css


comprass api

Download ( 342 downloads)

Dec 22

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

Dec 22
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"}
         }
       }
     ]
   }
Pages: 13/288 First page Previous page 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 Next page Final page [ View by Articles | List ]