suqing
- 浏览: 183215 次
- 性别:
- 来自: 杭州
-
最新评论
-
w547377507：
注册账号来赞你！
Bootstrap 源码解析 -
xyixiaochuan：
// IIFE - Immediately Invok ...
IIFE -
jozo：
[color=orange][/color]
Quickling技术 -
raoyutao：
...
Bootstrap 源码解析 -
springmvc-freemarker：
bootstrap demo实例教程源代码下载:http:// ...
Bootstrap 源码解析
文章列表
轻松理解JS中的 this
- 博客分类：
- 前端开发
this的8种使用场景
// 1. Basic this
function foo() {
return this;
}
foo();
// 2.
(function(){
return this;
})()
(function(){
'use strict';
return this;
})()
// 3. Object this
var a = {
name: 'suqing',
getContext: function(){
return this;
}
}
a.getContext() ...
Bootstrap 源码解析
- 博客分类：
- 前端开发
1、Bootstrap的作用域
2、Bootstrap的类定义
3、Bootstrap的插件定义
4、Bootstrap的事件代理
5、Bootstrap的对象数据缓存
6、Bootstrap的防冲突
7、作用域外如何使用Button类
8、Bootstrap的单元测试
Bootstrap的作用域
Bootstrap每个插件都定义在下面这段作用域代码中：
+function ($) {
...
}(window.jQuery)
请看《IIFE》和《严格模式》编译环境。
在插件的作用域之外，全局范围执行代码的第一行，检测了jQuery是 ...
怎样低成本的实现网页在移动端的适配
- 博客分类：
- 前端开发
问题：同一个网页，在web端显示良好，在移动端访问可读性非常差。
目的：One page for all devices。网页在不同的设备打开，在不同的分辨率下打开时可读可用。网页能够兼容多个终端——而不是为每个终端做一个特定的版本。
也就是我们常说的如何构建“响应式网页设计”(responsive web design)。
示例网站 250个响应式页面模板
解决方案涉及到的知识点：
viewport
media query
Javascript window.matchMedia
响应式图片
栅格布局
顶部导航
测试工具
iOS和Android ...
Android Design
设备和显示
触摸反馈
度量和网格
图像研究
1、Devices and Displays (设备和显示)
高中低3中分辨率。个人的经验是，设计图一般从高分辨开始做。
2、Touch Feedback (触摸反馈)
按钮的5个状态：normal pressed focused disabled disabled&focused
移动对象时，对象变暗。
滚动到最边界（列表的最上、最下；slider的最左最右），增加边界反馈支持。
3、Metrics and Grids (度量和网格)
界面大致基于48 ...
IOS 界面设计基本知识（HIG）
- 博客分类：
- 交互设计
控件
文本框
警告框&操作列表（action sheet）
定制图标和图片指南
控件
直接用IOS提供的控件，不需要自己画样式
控件名
图片
说明
交互
样式
使用场景
1、介绍严格模式
2、严格模式影响范围
变量： var、delete、变量关键字
对象： 只读属性、 对象字面量属性重复申明
函数：参数重名、arguments对象、申明
其他：this、eval、关键字...
严格模式
ECMAScript 5 引入严格模式('strict mode')概念。通过严格模式，在函数内部选择进行较为严格的全局或局部的错误条件检测，使用严格模式的好处是可以提早知道代码中的存在的错误，及时捕获一些可能导致编程错误的ECMAScript行为。在开发中使用严格模式能帮助我们早发现错误。
设立"严格模式"的目的， ...
工程师，请优化你的代码
- 博客分类：
- 前端开发
Ajax
jQuery ready事件
事件处理
DOM操作
Ajax
大部分项目这么写：
function getName(personid) {
var dynamicData = {};
dynamicData["id"] = personID;
$.ajax({
url: "getName.php",
type: "get",
data: dy ...
目的：自动化构建项目；完成压缩，编译，单元测试，代码检查以及打包发布的任务。
生成线上调试source map，代码行统计。
常用Grunt任务:
Cache ：cache-breaker、usemin + rev
CSS ：grunt-recess、less、cssmin、uncss、csslint(CSS检测)
JS ：uglify（压缩JS，Beautify JS，生成线上调试source map）、 jshint（JS代码检测及检测规则配置）、sloc（代码行统计）、ng-min（Angular代码压缩）、plato（代 ...
|案|例：微软面试题：为什么井盖是○圆的。
1、 井是圆的。
2、 搬运方便，易于滚动。
3、 安装方便，不用对角度。
4、 安全，不会掉下去。
5、 成本，材料利用率更大。
6、 方形角容易磨损。
总结：观点+举例，从多角度看问题。
可用性设计-表单框架
- 博客分类：
- 交互设计
设计原则最佳实践场景
表单效率优先减少表单填写时间测试用户完成一个表单需要多少时间？
避免用户在键盘和鼠标之间切换
tab可切换tabIndex顺序一致
表单名称符合期望
保证清晰的阅读顺序
1、标签使用简洁的自然语言，直 ...
可用性设计-菜单框架
- 博客分类：
- 交互设计
1、完成相同或相近功能的按钮用Frame框起来，常用按钮要支持快捷方式。
2、完成统一功能或任务的按钮放在集中位置，减少鼠标移动的距离。
3、按功能将菜单划分局域块，用分隔线隔开，并要有功能说明或标题。
4、界面要支持键盘自动浏览按钮功能，按tab键自动切换。
5、常用功能在菜单中应当靠前，位置也应放在窗口上较醒目的位置。
6、统一界面上的按钮数最好不要超过10个（这个数字按菜单长度而定）。
7、按钮太多时，将不太常用的功能收起，放置“更多”按钮的下拉菜单中。
8、默认按钮要支持Enter及选操作，即按Enter后自动执行默认按钮对应操作。
9、Tab键的顺序与控件顺序 ...
可用性设计-搜索框架
- 博客分类：
- 交互设计
不少项目都有所搜结果页面，虽然说每个项目都有自己的一套需求，细节也各不相同，但我认为有些有些元素应该是任何结果页的界面中都需要的。
以这些元素开始，然后根据情况稍加修改，就能得到一个很不错的页面。
1、在搜索结果中突出显示查询词。
2、在结果页面重述查询条件。
3、显示已找到的结果数量。
4、包含“前一个”和“后一个”按钮以及其余页面的链接，以便在结果中来回移动。
链接应当灵活，例如第一页不应有“前一个”链接。
2012前的设计书单
- 博客分类：
- 生活
-----------2013-----------------
《写给大家看的色彩数——设计配色基础》
-------2012-----------------------------------------
《Web界面设计》
【Keyword】设计模式、web设计
【Note】强推！如果工作和web界面设计和实现相关，建议都看 ...
《蝙蝠侠归来》中的群体规律
- 博客分类：
- 生活
《蝙蝠侠归来》中有一个场景：
一大群黑色蝙蝠一窝蜂地从水淹的隧道涌向纽约市中心。
电脑先制作一只蝙蝠，并赋予它一定的空间使之自动的扇动翅膀；
而后再复制成群。
之后，让每只蝙蝠独自在特定方向的场景屏幕上四处飞动，
但遵循几个规则：不要撞上其他的蝙蝠；跟上旁边的蝙蝠；不要离队太远。
—— 群体规律 (克雷格.雷诺兹)