angular1.2到1.3有给新手的坑

由Goofy发布在JavaScript、前端开发在 angular1.2到1.3有给新手的坑上留下评论

今天跟小伙伴散布angular，我下了最新的项目seed给小伙伴们用，然后小伙伴们用原始的教程进入angularJs。

然后就悲剧了…

最新版本1.3.8不再支持函数的控制器匹配
function PhoneListCtrl($scope) {
$scope.phones = [
{"name": "Nexus S",
"snippet": "Fast just got faster with Nexus S."},
{"name": "Motorola XOOM™ with Wi-Fi",
"snippet": "The Next, Next Generation tablet."},
{"name": "MOTOROLA XOOM™",
"snippet": "The Next, Next Generation tablet."}
];
}

会报error:ng[area]…..这样的错误。

虽然这个方式实在各个读物和入门示例中广泛使用的方式，但因为该方式生成了全局的函数，这并不是推荐的，也不符合MVC思想，所以…

不过还是等我读了源码再说更深入，那么现在只能是以下面的方式引入控制器：


angular.module('myApp', []).controller('PhoneListCtrl',['$scope',
function($scope){
}]);

jQuery无冲突处理方案

由Goofy发布在JavaScript在 jQuery无冲突处理方案上留下评论

有一些特殊情况，jQuery可能会与其他的类库同时存在，比如zepto（通常是在某些人犯迷糊的时候）。

在这个时候“$”这个命名空间会出现冲突（或覆盖）。

简单的做法我们可以用“jQuery”或“Zepto”来替代“$”，并在代码中建立属于相关类库的作用域即可，作为命名空间来避免冲突。

那么有没有其他的办法呢。

 

jQuery 核心 – noConflict() 方法

在jquery里面有一个这样的方法可以改变jQuery的命名空间。

可以去看w3cSchool里面的解释

在《JavaScript框架设计》的第一章中就两次提到了这个方案。

我这里cv一下jquery的源代码供参考
//jquery1.2
var _jQuery = window.jQuery , _$ = window.$;
jQuery.extend({
noConflict: function(deep){
window.$ = _$;
if(deep)
window.jQuery = _jQuery
return jQuery;
}
})

要注意的是该方法只对单文件的类库框架有用。

如何对动态加载方式引入的文件解决冲突问题之后再做讨论，不在这里赘述。

Unable to execute dex: Java heap space报错

由Goofy发布在建站相关在 Unable to execute dex: Java heap space报错上留下评论

环境是在mac下面，据说是设定的虚拟内存不足，要修改eclipse.ini这个文件。
mac下面eclipse.ini的位置在哪里呢？

 

在eclipse图标上右键，点显示包内容
contents/macOS下面

 

将
-Xms40m
-Xmx384m
改为
-Xms512m
-Xmx1024m

 

该方法windows系统也通用，只是windows下面eclipse.ini在eclipse根目录。

移动端做动画的一些坑

由Goofy发布在CSS、UI相关、交互效率在 移动端做动画的一些坑上留下评论

首先让我们假设手机性能并不是很好。

1、做位移动画translate比trbl更流畅；

2、通过backface-visibility可以开启gpu性能；

3、动画期间transform的属性应该是保持一致的，不然部分手机（小米3）只会做最后定义的动作；

4、在ios6的情况下如果动画不用translate3D，内容多了切换会出现花屏（更准确说应该是translateZ）；
5、安卓部分机型不支持对:before元素的动画；

按比例显示盒模型

由Goofy发布在CSS、移动端开发在 按比例显示盒模型上留下评论

固定盒子长宽比
通过设置高度为0 ； padding-bottom:%可以根据宽度设定盒子的比例
如果不知道上面的理论是什么，可以通过去传送门看看这个属性的详细说明。
% 定义基于父元素宽度的百分比下内边距。此值不会如预期地那样工作于所有的浏览器中。
显然有兼容性问题~不过触摸端我还没有看到不好用的所以，移动端开发可以尽量用。

禁用触摸设备的全局滚动

由Goofy发布在JavaScript、移动端开发在 禁用触摸设备的全局滚动上留下评论

我们通过event.preventDefault;来取消事件的默认操作，如果禁用触摸设备的全局滚动我们可以用：

document.body.ontouchmove = function (event) {
event.preventDefault();
}
不过winphone的手机不支持这个方法，可以用下面的方法加在css中兼容：
-ms-touch-action: none;

如果想通过触发恢复全局滚动只要移除上面的事件就可以了，具体可以通过我之前的文章了《event.preventDefault和恢复元素默认事件》解下。

js中的数据类型

由Goofy发布在JavaScript在 js中的数据类型上留下评论

截取字符的时候，整型不可以使用indexOf会报错。
可以用取余取整去截取整型字符，或者转成字符串。
另外在比较上如果不用全等（===）就要注意判断的关系，可以看下以下的例子。
“0”==0 true；

0==false true；
“0”==false true；
false==”false” false；
然而即使”0″==0 为 true，
if(“0”) {alert(1)} 会执行 其他两个不会执行。

给一个判断js数据类型的方法供大家研究。

function getType(o)
{
var _t;
return ((_t = typeof(o)) == "object" ? o==null && "null" || Object.prototype.toString.call(o).slice(8,-1):_t).toLowerCase();
}

display和offset的关系

由Goofy发布在JavaScript、交互效率、前端开发在 display和offset的关系上留下评论

事情来自于lazyload的编写，这里以图片（）为例：
1.display:none的图片同样会请求；
2.另外设置了display:none元素element.offsetTop 取不到值 
而 
$(selector).offset().top取到的值等于scollerTop的值 。
因此我们在做通过滚动判断图片是否在屏幕中的时候，要考虑标签切换时图片的读取状态和加载规则。