首页

Mobile Router.js的初衷

发表于2015年09月05日 分类: js 标签: js web端开发 web端单页面 web端单页面框架 mobile-router.js

前言

这是一篇迟来的文章,最合适的应该是在这个项目最开始的时候来写的,但是迟迟没有来写,懒惰的自己O(∩_∩)。mobile-router.js这个项目最早应该追忆到2014年底,当时由于工作需要,需要对公司项目上的触屏版做一次重构,运用新的ui、交互。由于12年的时候做过一个移动端的项目,所以还算是有点经验,所以就重新梳理思考了自己以前遇到的问题以及当时自己对应的笔记;但是移动端变化还是很快的,虽然只是相隔了不到两年,但是这两年却又很大的变化,以前需要兼容的、一些bug可能现在都以及不需要考虑了。但是最基本的还是没有变,那就是mobile web app的限制,内存限制也好、特性限制也好,亦或者是各种厂商各种系统版本(当时指的是Android)亦或是各种浏览器(你懂得);针对IOS的还好,毕竟性能好、不需要适配各种机器各种乱七八糟的版本,所以从源头上来说就以及注定了IOS要比Android好做一点。

梳理完之后,思考归思考,项目还是要进行的,所以就要继续往下前行了。。。

初衷

所以根据基本需求,当时拟定了一些基本要完成的任务以及对应的一些解决方案:

  1. 基础库,知名的zepto.js

  2. 模块化,依赖加载;选择了知名的RequireJS

  3. 解决移动端点击以及相关bug的库,知名的fastclick

  4. 待解决SEO问题,意味着支持服务端渲染

  5. 待解决路由问题,毕竟是要做SPA嘛🐴

  6. 切换动画问题,为了效果好啊,木办法o(╯□╰)o

为什么会是这样的结果呢,为什么不能使用非常火热的MV*框架(去TodoMVC发现各种框架吧)呢,他们这么火肯定是有原因的啊,为啥不用,下边就来简单分析下。

更多

Angular.js的一些学习资源

发表于2015年07月16日 分类: js 标签: angular angular.js 学习资源 js

GitHub 地址 https://github.com/dolymood/AngularLearning

基础

  1. 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/
  2. 官方zip下载包 https://github.com/dolymood/angular-packages已增加docs服务,输入地址即可,例如:http://blog.aijc.net/angular-packages/angular-1.3.15/docs/
  3. jquery?ag? : http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background
  4. ag note:https://github.com/joeylin/angular-note
  5. angularjs book:https://github.com/shyamseshadri/angularjs-book
  6. learning-angular:https://github.com/zafarali/learning-angular 以及我的翻译版本(ing)https://github.com/dolymood/learning-angular
  7. angular和require结合方式:https://github.com/tnajdek/angular-requirejs-seed
  8. 利用angular开发下一代Web应用(angular js) 【书】
  9. Lcllao的ag笔记:http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html
  10. angular-service-or-factory ? 傻傻分不清楚?http://iffycan.blogspot.com.ar/2013/05/angular-service-or-factory.html 以及 https://github.com/tylermcginnis/AngularServices
  11. angular-injection http://iffycan.blogspot.com.ar/2013/07/angular-injection.html
  12. 利用angular开发下一代Web应用(angular js) 书https://github.com/aztack/AngularJS-translation
  13. 破狼的angular文章集合 http://www.cnblogs.com/whitewolf/category/404298.html
  14. 邹业盛 angular的学习笔记 http://zouyesheng.com/angular.html
  15. 吕大豹的angular文章合集 http://www.cnblogs.com/lvdabao/tag/AngularJs/
  16. 尘封の烟雨的angular文章合集 http://wangjiatao.diandian.com/?tag=angularjs
  17. 黑暗執行緒 的angular文章(繁体) http://blog.darkthread.net/blogs/darkthreadtw/archive/tags/AngularJS/default.aspx
  18. AngularJS 数据建模 http://blog.jobbole.com/54817/
  19. AngularJS 中的一些坑 http://blog.jobbole.com/52857/
  20. 中文版guide http://angular.duapp.com/guide
  21. angular tips http://angular-tips.com/
  22. ng-newsletter http://www.ng-newsletter.com/
  23. AngularJS 开发者最常犯的 10 个错误 http://www.oschina.net/translate/top-10-mistakes-angularjs-developers-make
  24. AngularJS 指令实践指南(二) http://blog.jobbole.com/62999/
  25. fse.guru http://www.fse.guru/angular-core-components-roles 以及作者其他相关的ng文章
  26. 深入理解AngularJS 的 Scope http://www.lovelucy.info/understanding-scopes-in-angularjs.html
  27. angularjs中文社区关于angular.js文章、教程 http://angularjs.cn/tag/AngularJS
  28. xufei的博客 https://github.com/xufei/blog/issues 一直在更新,荐,讲得很好!
  29. angularjs-internals-in-depth http://www.smashingmagazine.com/2015/01/22/angularjs-internals-in-depth/
  30. introduction-to-unit-testing-in-angularjs http://www.smashingmagazine.com/2014/10/07/introduction-to-unit-testing-in-angularjs/
  31. AngularJS Unit Testing – For Real, Though https://quickleft.com/blog/angularjs-unit-testing-for-real-though/
  32. Quick Starter Repository for Angular Material https://github.com/angular/material-start
  33. angular cheat sheet https://dncmagazine.blob.core.windows.net/downloads/AngularCheatSheet-DNCMagazine.pdf
  34. angular-translate https://github.com/angular-translate/angular-translate
  35. 推荐 15 个 Angular.js 应用扩展指令 http://www.oschina.net/translate/15-directives-to-extend-your-angular-js-apps
  36. A Guide To Transclusion in AngularJS http://teropa.info/blog/2015/06/09/transclusion.html

更多

从tab来看jquery到angular的改变

发表于2015年03月12日 分类: js 标签: js angular jquery

之前看到的一个关于angular的问题,如题,做的是tab选项,中间大概问道:

如果我用jquery的话,做起来的大概步骤就是:绑定事件,移除所有选项的class,给点击项加上class。然后如果用angular怎么做?

看起来很简单的一个问题,但是涉及的确实一个“改变”。这里就那做一个tab来看这个改变。

这里做了简化,只保留tab导航部分,内容部分就忽略了;不过不影响。

大概效果(源码)请看:jquery版, angular版1, angular版2

更多

受动画animation影响的overflow

发表于2015年03月02日 分类: css 标签: css css3 CSS animation

最近一直在搞移动端的spa,中间遇到了一个很诡异的问题,第一次页面load,局部滚动是有效果的,但是如果经过动画切换回来之后,发现局部滚动无效了,最起码在ios8.1.3上的safari和chrome中都是如此,这肯定藏了些什么猫腻。

基本页面结构是很简单的,就是在body中包含了几个page-view,可以把他看做一个个的画面,用来切换。关于移动端重构的一些知识点,可以参见w3cplus mobile上有关的介绍,很详细的系列。

更多

Mobile Router.js, a lightweight single page bone for mobile web app

发表于2015年01月22日 分类: js 标签: js web端开发 web端单页面 web端单页面框架 mobile-router.js

mobile-router.js — A lightweight single page bone for mobile web App.轻量级web端单页面骨架

Online docs

DEMO

require.js DEMO

mobile-router.js-demo是一个关于mobile-router.js如何使用的DEMO,暂时包含:前后端模板共享,后端输出首屏,与其他库自由搭配,动画转场。

mobile-router.js-sample - A mobile-router.js demo like ui-router sample

优势:

  • 使用简单、方便、轻量,基于 historywindow.onpopstate

  • 支持路由视图嵌套 (1.5.0+)。

  • 无依赖,可与其他框架(库)搭配自由使用,例如:jquery, zepto, iscroll等。

  • 任意选择字符串式模板引擎,当然最简单的就是自己拼接字符串了;同时支持异步(远程获取模板,或者去请求数据在前端构建模板);可配置是否缓存结果模板。

  • 考虑后端渲染首屏的情况,只需要按结构输出响应的片段即可,利于SEO,且可以实现前后端模板公用。

  • 自动缓存部分画面,可配置缓存数量,默认3个。

  • 每个路由都有对应的callbackonDestroy等配置方法,分别用于显示了对应画面后的回调以及当该画面销毁时回调。

  • 利用CSS animation控制动画转场(页面切换)效果,也可设置关闭动画效果。

  • “保留”浏览器原生hash功能,根据hash,可自由跳转到对应id元素位置。

  • 可配置enablePushState决定是否使用pushstate功能,默认启用;不启用的话,仅仅影响的是不产生历史,但是路由依旧好使的,也就是还是基于url的。

更多

Meta标签常用属性整理

发表于2015年01月06日 分类: html 标签: html html5 meta 转载

在segmentfault看到这篇文章,觉得整理的很详细,所以转载过来和大家分享一下。

原文地址:http://segmentfault.com/blog/ciaocc/1190000002407912

作者:ciaocc

版权贵ciaocc所有,转载请注明版权。

概要

标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。 —— W3School

更多

关于移动端单页面框架的思考

发表于2014年12月31日 分类: js 标签: js 移动端开发 移动端单页面 移动端单页面框架

可以说从12年开始,移动端单页面开发就已经被各个公司实践了,当时我的上家公司也进行了实践。和大多数的结果一样,理想很丰满,现实很骨感。主要是因为在手机端受限的东西太多:内存不够用、性能跑步起来、表现上卡以及五花八门各种各样手机上的浏览器表现差异实在是无话可说,各种bug层出不穷。时光匆匆,2年过去了,主要的两大手机系统iosandroid都已升级了多次,此时再来看,我们可以在移动端单页面方面做些什么呢?是不是相比较于以前好多了呢?

更多

Html5和html4的区别

发表于2014年12月10日 分类: html 标签: html html5

语法

HTML定义了“HTML语法”,他主要是兼容已在web上发布的HTML4和XHTML1文档,但是不兼容HTML4的那些深奥的SGML特性,例如处理说明 processing instructions简写标记 shorthand markup这些,大部分的用户代理都不支持他们。使用text/html媒介类型的文档使用HTML语法。

更多

纯css实现自适应高

发表于2014年10月24日 分类: css 标签: css css3 CSS自适应高

偶尔在网上看到的一个面试题,大概描述是:

有一个可以自适应的div,里边有两个div,一个div是高度固定的,怎么实现另一个div的高度自适应剩余高度?

当然方案会有好多,可以使用js,也可以用CSS3,也可以用CSS2.1来实现;达到结果有很多种,最大的区别应该就是兼容性了。

这里大概列出几种方法,当然几种方法兼容性还是不一的;这里算是仅供参考吧,毕竟在大部分高级浏览器里,例如:Chrome(最近),Firefox(最近),IE10+,IE8~9(利用CSS3的flex的不支持)。

更多

Ie9的奇葩bug iframe的load事件监听

发表于2014年10月22日 分类: js 标签: js 浏览器兼容性

微软为了向标准靠拢,同时为了向后兼容,在IE9中,如果监听元素的事件的话,两种方法addEventListenerattachEvent都是可以用的;理论上来说应该是没有什么区别的,但是在最近项目上的一个小功能上需要用到iframe个form表单配合上传文件,这时候就遇到了奇葩的IE9产生的一个bug:

IE9中iframe的load事件不会被触发,虽然从请求上来看,已经成功,也有响应

下面详细说下这个奇幻漂流之旅。

更多