08 2016 档案

rem布局下使用背景图片和sprite图
摘要：现在移动端页面用rem布局已经是一大流派了，成熟的框架如淘宝的flexiable.js，以及更轻量级的hotcss。用rem作单位使得元素能够自适应后，还有一块需要关注的，那就是背景图片。本文就来聊聊这方面的东西。 rem布局 所谓rem布局就是指为文档的根节点<html>元素设置一个基准字体大小， 阅读全文
posted @ 2016-08-31 16:22 axl234 阅读(2051) 评论(0) 推荐(0)
webpack配合vue.js实现完整的单页面demo
摘要：本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用，因为需要用到node的npm，所以确保安装了node，建议官网安装最新的稳定版本。并且在项目中需要加载一些npm包，由于npm的服务器在国外，可能我们下载的过程会比较慢，所以建议用阿里的镜像cnpm安装，10分钟实时更新一次np 阅读全文
posted @ 2016-08-31 14:05 axl234 阅读(7655) 评论(2) 推荐(1)
淘宝弹性布局方案lib-flexible研究
摘要：1. lib-flexible不能与响应式布局兼容 先说说响应式布局的一些基本认识： 响应式布局的表现是：网页通过css媒介查询判断可视区域的宽度，在不同的范围应用不同的样式，以便在不同尺寸的设备上呈现最佳的界面效果。典型的例子是，有一个商品列表页，应用响应式布局后，可能在pc上是用4列展示，在平板 阅读全文
posted @ 2016-08-26 09:25 axl234 阅读(1174) 评论(2) 推荐(0)
前端工程化
摘要：在前端开发的初始阶段，开发者通常只用关 html, css, javascript。但是现代化的前端开发已经不仅仅是业务代码本身，真正的前端开发环境涉及很多方面的需求，如： 开发需求 共享需求 性能需求 部署需求 这些东西我们都统一的叫做前端工程化，为了简化前端工程化的配置，出现了很多优秀的工具比如 阅读全文
posted @ 2016-08-25 14:24 axl234 阅读(807) 评论(0) 推荐(0)
mock server相关解决方案
摘要：前后端分离之后 前后端分离后, 大家从此进入了所谓的并行开发时代. 一旦完成前后端的(边界)分工, 大家就可以各司其职了. 前端在与后端交互时, 要想有效地提高工作效率, 后端的接口文档就是重中之重了. 接口文档还不够 所谓的接口文档, 即一份数据的契约书. 前端的所有逻辑和展现全部依赖接口文档中规 阅读全文
posted @ 2016-08-24 14:25 axl234 阅读(538) 评论(0) 推荐(0)
看漫画，学 Redux
摘要：Flux 架构已然让人觉得有些迷惑，而比 Flux 更让人摸不着头脑的是 Flux 与 Redux 的区别。Redux 是一个基于 Flux 思想的新架构方式，本文将探讨它们的区别。 如果你还没有看过这篇关于 Flux 的文章（译者注：也可以参考这篇），你应该先阅读一下。 为什么要改变 Flux？ 阅读全文
posted @ 2016-08-23 15:31 axl234 阅读(395) 评论(0) 推荐(0)
ES6的模块化
摘要：在之前的 javascript 中一直是没有模块系统的，前辈们为了解决这些问题，提出了各种规范, 最主要的有CommonJS和AMD两种。前者用于服务器，后者用于浏览器。而 ES6 中提供了简单的模块系统，完全可以取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。 基本用 阅读全文
posted @ 2016-08-22 14:01 axl234 阅读(5803) 评论(0) 推荐(0)
Babel6.x 转换ES6
摘要：本文介绍Babel6.x的安装过程~ 首先呢，可以使用Babel在线转换 https://babeljs.io/repl/ 然后进入主题：安装Babel（命令行环境，针对Babel6.x版本） 1、首先安装babel-cli（用于在终端使用babel） 2、然后安装babel-preset-es20 阅读全文
posted @ 2016-08-22 11:11 axl234 阅读(1546) 评论(0) 推荐(1)
移动端样式小技巧
摘要：平时在移动端开发拼页面的过程中总会遇到一些问题，主要是各手机webview样式显示效果不一致造成的。以下总结了一些常见坑和一些小技巧，希望对看官有所帮助！ 本文只针对两大手机阵营 Android和IOS 中的魅蓝metal 和 iPhone6进行样式对比。 一、line-height line-he 阅读全文
posted @ 2016-08-18 13:58 axl234 阅读(469) 评论(0) 推荐(0)
使用 AngularJS 和 ReactJS 的经验
摘要：1. React 福音 当我们的团队开始寻找一个合适的前端框架的时候，我们考虑了许多选择，最后留下两个选项 —— Angular 和 React。 Angular 是目前为止最成熟的方案：它拥有一个庞大的社区，你可以为大部分应用场景找到合适的第三方模块。 React 也很有竞争力，它以 JavaSc 阅读全文
posted @ 2016-08-18 13:54 axl234 阅读(314) 评论(0) 推荐(0)
webapp开发
摘要：基础dom操作库 首先对于页面上的交互还是以dom操作为主，虽说现在javascript的dom api已经很好用了，但是对于用惯jquery的人来说还是很不方便，所以我选择 zepto，它的api和jquery完全一致，但是更为轻量。 路由处理 再手机端上页面切换会出现白屏，也无法做转场动画，为了 阅读全文
posted @ 2016-08-17 16:13 axl234 阅读(341) 评论(0) 推荐(0)
webapp 性能优化
摘要：webapp 不像传统页面，它生命周期更长，在手机端上，硬件环境并没有pc上那么好。所以性能的优化尤为重要。 webapp的性能优化主要分为两个方面 网络请求优化 和 页面渲染优化 ， 我们对于性能优化主要通过这连个方面来处理。 压缩资源文件 我们在使用某些框架的时候（例如：JQuery）, 会发现 阅读全文
posted @ 2016-08-17 16:11 axl234 阅读(505) 评论(0) 推荐(0)
Atom编辑器
摘要：Atom介绍 Github的员工Nathan Sobo在Atom的博客中提到：”Sublime和TextMate十分方便，但是扩展性不足；另一方面，Emacs和 Vim扩展性很强却需要学习日程工作中很少用到的脚本语言。”因此，他们希望找到一个平衡点，于是就有了Atom这个项目。 Atom 代码编辑器 阅读全文
posted @ 2016-08-17 15:12 axl234 阅读(567) 评论(0) 推荐(0)
60个有用CSS代码片段
摘要：1、垂直对齐 如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform，可以很优雅的解决这个困惑： (ps:【译】如何实现CSS居中？–CSS居中常用方法)使用这个技巧，从单行文本、段落到box，都会垂直对齐。目前浏览器对Transform的支持是需要关注的 阅读全文
posted @ 2016-08-17 13:33 axl234 阅读(374) 评论(0) 推荐(0)
Vue.js快速入门
摘要：Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。 如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时 阅读全文
posted @ 2016-08-16 14:31 axl234 阅读(263) 评论(0) 推荐(0)
webpack构建具备版本管理能力的项目
摘要：webpack是时下十分流行的编译和打包工具，它提供一种可扩展的loader的方式，简单的配置，便可以编译打包各类型的文件，包括js、css、image、font、html，以及各种预编译语言都不在话下。 一、回顾与思考 在上一节的【入门：十分钟自动化构建】中我们讲解了如何用gulp去搭建一个工作流 阅读全文
posted @ 2016-08-16 14:11 axl234 阅读(584) 评论(0) 推荐(0)
前端快速自动化构建
摘要：我们先来设定一个简单的需求： 一个本地开发环境，具备监控文件变化并实时更新的功能； 修改代码，保存之后浏览器自动刷新 实时编译各种预编译格式文件 压缩合并静态资源，打包输出 部署上传 一言不合就上图： 自动化构建（入门）.png 自动化构建（入门）.png 好，有了这个规划之后，我们开始着手来实现它 阅读全文
posted @ 2016-08-16 14:10 axl234 阅读(483) 评论(0) 推荐(0)
前端模块化实践
摘要：模块化是一种处理复杂系统分解成为更好的可管理模块的方式，它可以把系统代码划分为一系列职责单一，高度解耦且可替换的模块，系统中某一部分的变化将如何影响其它部分就会变得显而易见，系统的可维护性更加简单易得。 前端开发领域(JavaScript、CSS、Template)并没有为开发者们提供以一种简洁、有 阅读全文
posted @ 2016-08-16 14:04 axl234 阅读(1190) 评论(0) 推荐(0)
H5 视频直播相关技术
摘要：一、移动视频直播发展 大家首先来看下面这张图: 可以看到，直播从 PC 到一直发展到移动端，越来越多的直播类 App 上线，同时移动直播进入了前所未有的爆发阶段，但是对于大多数移动直播来说，还是要以 Native 客户端实现为主，但是 H5 在移动直播端也承载着不可替代的作用，例如 H5 有着传播快 阅读全文
posted @ 2016-08-15 17:02 axl234 阅读(1265) 评论(0) 推荐(0)
基于 koajs 的前后端分离实践
摘要：一、什么是前后端分离？ 前后端分离的概念和优势在这里不再赘述，有兴趣的同学可以看各个前辈们一系列总结和讨论： 系列文章：前后端分离的思考与实践(1-6) slider: 淘宝前后端分离实践 知乎提问： 如何评价淘宝 UED 的 Midway Framework 前后端分离？ Web 前后端分离的意义 阅读全文
posted @ 2016-08-15 16:57 axl234 阅读(1887) 评论(0) 推荐(0)
iOS 字体设置
摘要：使用无衬线字体 iOS 4.0+ 使用英文字体 Helvetica Neue，之前的iOS版本降级使用 Helvetica。中文字体设置为华文黑体STHeiTi。 需补充说明，华文黑体并不存在iOS的字体库中(http://support.apple.com/kb/HT5878)， 但系统会自动将华 阅读全文
posted @ 2016-08-15 13:29 axl234 阅读(590) 评论(0) 推荐(0)
前端存储
摘要：在web开发越来越复杂的今天，前端拥有的能力也越来越多。其中最重要的一项莫过于web存储。开发者们如果使用得当，这些存储可以帮助我们提升网页的性能与灵活度。本文不讲个中的细节，只讲各种前端存储的利弊，与各类存储的应用场景。毕竟这些技术的细节在网上随处可见，如果读者你决定使用的话，再去细查也不迟。我们 阅读全文
posted @ 2016-08-11 16:26 axl234 阅读(1106) 评论(0) 推荐(0)
移动调试方法总结
摘要：随着移动端的不断推进，移动调试也成为了前端同学们面临的一个新的课题，在PC时代，我们直接打开chrome的检查元素面板。就可以解决大部分事情了。但是到了移动端，明明在电脑上模拟好的元素，在手机上就会乱掉。今天我们就来一起聊一聊移动前端调试的那些事儿。一起扩展我们的移动端调试手段~ 1 模拟手机调试 阅读全文
posted @ 2016-08-11 09:21 axl234 阅读(663) 评论(4) 推荐(2)
react redux 相关技术
摘要：React全都是围绕着组件的， 所以React基础也就是：写组件的jsx、组件的生命周期以及组件的属性和状态。jsx，只要是用过html模板的分分钟就能写了； 所谓生命周期就是组件在创建、销毁、更新阶段的那几个回调函数，让你有机会再这几个关键点上对组件和环境做点手脚； 属性就像html标签里的属性一 阅读全文
posted @ 2016-08-10 17:09 axl234 阅读(209) 评论(0) 推荐(0)
前端模板与渲染方式
摘要：1 页面级的渲染 再刚有web的时候，前端与后端的交互，非常直白，浏览器端发出URL，后端返回一张拼好了的HTML串。浏览器对其进行渲染。html中可能会混有一些php(或者php中混有一些html)。在服务端将数据与模板进行拼装，生成要返回浏览器端的html串。 这与我们现在做一个普通网页没什么区 阅读全文
posted @ 2016-08-10 15:10 axl234 阅读(15646) 评论(2) 推荐(1)
关于iconfont
摘要：1. 从FONT-FACE说起 要想了解iconfont，得从一个新的css3规则说起。css3中，新增了一种样式规则，@font-face，这个规则可以用来引入自定义的字体，到客户端。以前，我们的字体只能听任客户端的。因为用户没有安装的话，我们强制要求显示也没有办法。 现在使用@font-face 阅读全文
posted @ 2016-08-10 15:08 axl234 阅读(481) 评论(0) 推荐(0)
Redux中的重要概念
摘要：Action/Reducer/Store 首先，先看看第一张图，图中展示了Redux的单向数据流，以及Action、Reducer和Store这三个核心概念。 下面就围绕上图，非别介绍Action、Reducer和Store这三个概念。 Action和Action Creator Action是一个 阅读全文
posted @ 2016-08-02 14:12 axl234 阅读(2010) 评论(0) 推荐(0)
Nodejs+express 4.x
摘要：Node和NPM的安装够便捷了，不细说...有几点基础顺手提一下： 安装命令中的 “-g” 表示全局(global) express的版本不是通常的 “-v” 来查看，而是 “-V” 安装express项目的命令如下express -e nodejs-product -e, --ejs add ej 阅读全文
posted @ 2016-08-01 15:26 axl234 阅读(194) 评论(0) 推荐(0)