分类 Web Front End 下的文章

默认情况下,$resource 服务会对它进行的 http 请求的 response 默认进行一些处理,它会尝试 map 返回值。
如果你的服务器端返回的值符合标准 json 格式,那么不会遇到问题,但是如果你的服务器返回了类似 12 或者 abc 这样子的数据时,你就会发现当你在回调中试图获取 response 时,发生了一些意想不到的事情。
你实际获得的结果可能是这样子的:

{
 "0": "1",
 "1": "2",
 $promise: obj,
 ...
}
{
 "0": "a",
 "1": "b",
 "2": "c",
 $promise: obj,
 ...
}

你得到的值已经是被错误的 map 过了。这当然不是我们想要的,因此,我们需要手动来处理一下。

所以,我们在 $resource 的对应 action 中指定一下 transformResponse 参数。

顾名思义,transformResponse 就是用来指定对 response 的处理方法的,它接受一个方法或者一个由多个方法组成的数组作为值。

function(data, headersGetter)|Array.<function(data, headersGetter)>

因此我们给 $resource 的某个 action 下添加如下一个参数。

transformResponse: function (response) {
 return {data: response};
}

最终的结构是这样子的:

$resource('/api/test', {}, {
  save: {
    method: 'POST',
    transformResponse: function(response) {
      return {
        data: response
      };
    }
  }
});

这样我们就可以在对应的 action (这里是 save 方法) 的回调中取得我们想要的 response 了。
假设你在回调函数中使用 response 作为回调变量名,你可以通过 response.data来获取真实的 response,它不会再被 angular 自动处理了。

一般来说,当我们在页面内部一个可滚动元素上使用滚动时,如果滚动距离超过它的顶部或者底部,就会触发页面滚动,但是在一些情况下,我们不希望引起页面滚动,因为这会影响用户操作。

下面是一种阻止页面滚动的方法。

var scroll = document.getElementsByClassName('scroll')[0];
function handleScroll (e) {
  if (scroll.scrollHeight > scroll.offsetHeight) { // 仅在元素处于可滚动状态下才进行阻止
    if (e.deltaY < 0 && scroll.scrollTop === 0) {
      e.preventDefault();
    }
    if (e.deltaY > 0 && (scroll.scrollTop + scroll.offsetHeight) >= scroll.scrollHeight) {
      e.preventDefault();
    }
  }
}
scroll.addEventListener('mousewheel', handleScroll);

DEMO: JSBIN

  • 360 极速浏览器
"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.120 Safari/537.36 QIHU 360EE"
  • 猎豹安全浏览器
"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.137 Safari/537.36 LBBROWSER"
  • 搜狗浏览器
"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36 SE 2.X MetaSr 1.0"
  • QQ 浏览器
"Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; QQBrowser/8.0.1374.400)"
  • 百度浏览器
"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.146 BIDUBrowser/6.x Safari/537.36"
  • 360 安全浏览器
"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36"
  • 傲游浏览器
"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Maxthon/4.4.2.2000 Chrome/30.0.1599.101 Safari/537.36"
  • UC 浏览器PC版
"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 UBrowser/3.1.1644.29 Safari/537.36"

要在 Chrome Extension 中使用 Closure library, 需要将 Closure library 按照需求打包。 假设扩展的开发目录如下:

-root
|-css
|-js
|-closure-library
|-menifest.json
|-..
  1. 首先请到 Closure 官方 下载打包工具 compiler.jar
  2. 将 compiler.jar 放到 root 目录下。
  3. 在本目录下任意位置新建 source.js (命名随意),将所有对 Closure library 的依赖请求写入里面。
    goog.require('goog.dom');
    goog.require('goog.events');
    goog.require('goog.asserts');
  4. 运行如下命令
    closure-library/closure/bin/build/closurebuilder.py // 定位到 Closure library 中的 buider.py 脚本
    --root=closure-library/ // 这一项指定 Closure library 的目录位置
    --root=myproject/ // 指定开发项目的位置
    --namespace="myproject.start" // 指定使用的主命名空间
    --output_mode=compiled // output_mode 输出模式使用 cimpiled
    --compiler_jar=compiler.jar // 指定 compiler.jar 的位置
    --compiler_flags="--compilation_level=ADVANCED_OPTIMIZATIONS" // 指定 compiler.jar 的参数,双引号内直接使用 compiler.jar 的参数
    > compiled.lib.js // 指定输出的文件
  5. 直接在 Chrome extension 中引入输出的 compiled.lib.js 就可以正常使用 Closure library 了。builder.py 脚本会自动检测你所依赖的 Closure library 类,并将其打包。你还可以将命令直接写成 Makefile 脚本,下次直接运行脚本即可。
    development:
      closure-library/closure/bin/build/closurebuilder.py --root=closure-library/ --root=js/ --namespace="YourRootNameSpace" --output_mode=compiled --compiler_jar=compiler.jar > compiled.js
    production:
      closure-library/closure/bin/build/closurebuilder.py --root=closure-library/ --root=js/ --namespace="YourRootNameSpace" --output_mode=compiled --compiler_jar=compiler.jar --compiler_flags="--compilation_level=ADVANCED_OPTIMIZATIONS" > compiled.js
    all:
      development

Never forget to look up the online HTML CheatSheet when you forget how to write an image, a table or an iframe or any other tag in HTML!