这次总结一下用Angular的一些小技巧~ 好的实践 自动启动：ng-app，自动引导启动第一个ng-app;手工启动：angular.bootstrap() 使用ng-bind代替双括号语法。避免Angular用数据替换时出现双括号；实在要用时，使用ng-cloak,并且能避免内容闪烁 需要使用background-image时，可以自己定义指令： 123456789app.directive('backImg', function(){ return function(scope, element, attrs){ attrs.$observe('backImg', function(value) { element.css({ 'background-image': 'url(' + value +')' }); }); };}); 也可以使用ng-style来实现。
一晃眼已经2016年了，隔了几个月没有总结写文章好想抽死自己。而且要准备校招了得放点东西到这里呀。寒假又来See实习了。大三上学期也断断续续帮See写一些页面：http://biouscowork.sinaapp.com/，每次活动都各种熬夜，后面才慢慢改善。接下来写一些这些页面的总结和坑。这次是接口渲染。 Ajax & Cgi CGI：通用网关接口（Common Gateway Interface）是一个Web服务器主机提供信息服务的标准接口。通过CGI接口，Web服务器就能够获取客户端提交的信息，转交给服务器端的CGI程序进行处理，最后返回结果给客户端。 这就是经常说的接口啦。cgi这个词是看过某大大写的页面后才发现原来应该这么叫。一般请求接口返回的就是需要渲染的数据了，比如这个：getActivity 。一般后台给的都是json，如果是字符串的话就前端解析一下就好了。一般一个活动页面是这样的流程：前端重构好，拿到接口后就直接渲染。运营提供数据给后台开发，后台改接口返回的数据。不是之前的php框架那样服务器渲染好后吐出html，用接口的html一般没有太多数据，所以要是接口请求失败了或者请求时间比较长页面会有很长的空白，体验没那么好。自己总结一下优缺点吧：优点： 简单的前后端分离，后端只提供数据，前端专注渲染 容易控制一些异步的数据展现 可以通过接口的代理简单实现本地开发，不需要太依赖后端环境 缺点： 请求上多了接口，渲染工作放在了客户端，性能不太好 和后台联调需要一些时间，沟通成本增加 不利于SEO，不过这种做的一般是活动页面，SEO并不是很重要 js代码需要一定的组织
这次只讲一个东西：移动端图片压缩&上传。 DOM12<input id="uploadPic_input" type="file" accept="image/*" style="display:block;opacity:0;" name="image"><a id="uploadPic_btn" href="javascript:void(0);" class="a02"> 在移动端，input大部分还是支持的，当类型为file时，苹果会弹出拍照/录像和照片图库；手上没安卓= =，记得也是类似的选项。但是需求是只要图片，所以用了accpet这个属性，就能自动地把录像这个选项去掉了。accept还支持选定的格式，语法：1<input accept="audio/*|video/*|image/*|MIME_type"> 目前还是候选推荐标准（W3C Candidate Recommendation），但是支持的浏览器还是挺多的，测试中都能正常使用。相关链接：accept这里设置为透明是业务需要，默认不展示这个按钮。
上一次记录了Fiddler和js结构组织，这次写一下在js里具体一个模块是怎么写的。 通用函数encodeURIComponent()和decodeURIComponent()encodeURIComponent： 把字符串作为URI 组件进行编码 不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII标点符号进行编码 其他字符（比如：;/?:@&=+$,# 这些用于分隔URI组件的标点符号），都是由一个或多个十六进制的转义序列替换的。 encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号。栗子：encodeURIComponent("你好，世界！")输出为%E4%BD%A0%E5%A5%BD%EF%BC%8C%E4%B8%96%E7%95%8C%EF%BC%81
暑假在See实习：See 一张图片找到全球同款。进去之后接手的第一个项目是继续完成移动端版的App。需求有：登录，发表心愿，同求等等，主要是把整个流程都完成。年少无知的我以为只是重构点移动端页面，竟然说2天半可以完成（其实如果只是重构是真的够了）；然后Sheen一脸惊讶，拍拍肩膀：”你确定？”。最后给了我5天左右的时间。好，不废话了。其实主要做的东西就是ajax和后台交互，移动端文件上传。
看了一篇文章的一些前端问题，发现好多都不会=。=而且明天有个电话面试，临时抱抱佛脚哈哈哈 关键字：怪异模式 CSS hack SEO 闭包 JS对象实现 浏览器的标准模式与怪异模式的设置与区分方法 由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility Mode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars mode)，这就是二者最简单的区别。 IE（6,7,8）的标准模式和怪异模式差别较大：盒子模型的解释（宽度计算）DTD:文档类型定义（Document Type Definition)浏览器会通过头部声明即DTD来采用相应的渲染模式： 没有doctype声明的或使用HTML4以下的使用怪异模式 有doctype声明的使用标准模式判断使用的模式：window.top.document.compatMode，BackCompat表示怪异模式，CSS1Compat表示标准模式。对于IE8+，使用下面代码强制浏览器使用最新内核的标准模式：<meta http-equiv=" X-UA-Compatible" content="IE=edge"/>
在做益米的下载页的时候发现微信浏览器有些地方需要注意。 链接跳转跳转苹果App Store：第一次是设置链接为https://appsto.re/cn/z3aa6.i发现在微信里这个链接不能跳转，查了资料后发现有一种方法：微信中打开app store连接。意思就是微信会内部把链接重定向，判断是App Store就阻止掉。所以在页面里面改写链接，改成在他们域名下，再使用JS进行跳转。具体方法是前面加上http://mp.weixin.qq.com/mp/再重定向：redirect?url=后面再把原来的链接里的冒号改成%3A，斜杠改为%2F。所以链接变成了：http://mp.weixin.qq.com/mp/redirect?url=http%3A%2F%2Fappsto.re%2Fcn%2Fz3aa6.i 尝试之后发现这个方法已经失效了。 无奈之下使用引导用户使用safari打开： 引导跳转制作遮罩层：12345<div id="popweixin"> <div class="tip"> <img src="images/weixinpopup.png" alt=""> </div></div> 123456789101112131415161718192021222324#popweixin{ width: 100%; height: 100%; overflow: hidden; position: fixed; z-index: 1000; background: rgba(0,0,0,0.5); top: 0; left: 0; display: none;}#popweixin .tip { width: 100%; background: #FFF; z-index: 1001;}#popweixin img { width: 100%;}
跨浏览器的事件处理程序1234567891011121314151617181920var EventUtil = { addHandler: function (element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.attachEvent("on" + type, handler); } else { element["on" + type] = handler; } }, removeHandler: function (element, type, handler) { if (element.removeEventListener) { element.removeEventListener(type, handler, false); } else if (element.detachEvent) { element.detachEvent("on" + type, handler); } else { element["on" + type] = null; } },} 顺序 DOM2级方法：false表示在冒泡阶段调用 IE8下的方法执行顺序 DOM0级最不提倡的方法（现代浏览器不执行）
本来以为页面做的差不多了。后来发现移动端和PC端一样有好多坑要填=。=干了几天感觉恶补了JS什么的。这次主要总结一下JS中的事件。 事件流事件流描述的是从页面中接受事件的顺序。 事件冒泡IE的事件流，事件开始时由最具体的元素接收，逐级向上传播到较为不具体的结点。还是很好理解的。。比如：1234567<!DCTYPE html><html><head></head><body> <div>ddd</div></body></html> 单击<div>元素，Click事件就会从<div>到<body>到<html>到document。就像冒泡一样。所有浏览器都支持，IE5.5之前会跳过<html>。现代浏览器冒泡到window对象。 事件捕获顺序和冒泡相反，由Netscape Communicator团队提出，现代浏览器也支持这种事件流模型。”DOM2级事件”规范要求事件从document对象开始传播，但是现代浏览器从window对象开始。 DOM事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。事件捕获阶段为截获事件提供了机会；然后是实际的目标接收到事件；最后的冒泡阶段可以在这个阶段对事件做出相应。就像先事件捕获（不包括目标div）然后在处于目标阶段，事件在div上发生，然后开始冒泡。规范要求捕获阶段不会涉及事件目标，但是现代浏览器会在捕获阶段触发事件对象上的事件。因此有两个机会在目标对象上操作事件。兼容性：IE8及之前不支持。
前面太自大了。。怎么能叫前端呢。还只是重构一只呀。 Rating星星的CSS基本实现html:1234567<div class="rating right"> <i class="fa fa-star hover"></i> <i class="fa fa-star hover"></i> <i class="fa fa-star hover"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i></div> less:123456789101112131415161718192021.rating{ unicode-bidi: bidi-override; direction: rtl; text-align: center; i{ color: #E4E4E4; cursor: pointer; position: relative; }}.rating > i:hover,.rating > i:hover ~ i{ color: transparent;}.rating > i:hover:before,.rating > i:hover ~ i:before{ content: '\f005'; color: #FFDF56;}