当前位置:首页 > 电子书 > 电子书下载 > 图形处理 >
学习响应式设计(Learning Responsive Web Design) 学习响应式设计(Learning Responsive Web Design)
码农之家

码农之家 提供上传

资源
18
粉丝
23
喜欢
107
评论
4

    学习响应式设计(Learning Responsive Web Design) PDF 高清版

    响应式电子书
    • 发布时间:2020-01-08 11:08:14

    给大家带来的一篇关于响应式相关的电子书资源,介绍了关于响应式设计方面的内容,本书是由人民邮电出版社出版,格式为PDF,资源大小93.1 MB,彼得森,文巍编写,目前豆瓣、亚马逊、当当、京东等电子书综合评分为:8.5。

  • 学习响应式设计(Learning Responsive Web Design) PDF 下载
  • 下载地址:https://pan.baidu.com/s/1E-kDVt4JIxXjkw3pz9tRl
  • 提取码:agt6
  • 想要为平板、手机、笔记本、大屏幕设备,甚至可穿戴设备提供最优的用户体验?那就学习响应式设计吧。这是一本内容特别全面、讲解非常透彻的入门书。特别地,通过这本书不仅能迅速掌握响应式Web设计的基本原理,还能够从头到尾了解响应式设计的工作流程:从项目启动开始,到项目最终上线为止。

    只要你的工作与创建、改造或者升级网站有关系,都应该看看这本书。换句话说,不仅是前端开发人员,设计师、产品经理、项目经理,甚至后端开发人员也可以通过本书掌握响应式设计的精髓所在。这本书基于响应式设计的前沿技术和社区经验写成,汇集了前人的智慧和最佳实践。希望读者能够“站在巨人的肩膀上”,把这本书的内容应用到未来的项目中,造福更多用户。

    1. 内容策略的制定应先于视觉设计
    2. 默认设计应针对最窄屏幕宽度进行
    3. 响应式Web设计的关键:HTML元素和CSS属性
    4. 基于设备视口宽度,通过媒体查询显示不同的CSS样式
    5. 处理图像、文字排版和导航
    6. 采用性能优化技术建立更轻量级、更快的网站

    目录

    • 前言   XV
    • 第一部分 响应式设计基础
    • 第1章 什么是响应式设计   3
    • 1.1 一点儿基础   3
    • 1.2 简史   6
    • 1.2.1 固定宽度设计   6
    • 1.2.2 移动Web 浏览   7
    • 1.2.3 移动网站   8
    • 1.2.4 更多的设备    9
    • 1.2.5 媒体查询   10
    • 1.2.6 灵活性   11
    • 1.2.7 响应式网页设计   12
    • 1.3 为什么是响应式设计   12
    • 1.3.1 每个设备都得到正确的设计   12
    • 1.3.2 更少的工作   14
    • 1.3.3 搜索优化   14
    • 1.4 总结   15
    • 第2章 响应式内容   16
    • 2.1 内容策略   16
    • 2.2 内容整理   18
    • 2.2.1 仅使用你需要的   18
    • 2.2.2 如何精简   19
    • 2.2.3 内容审计   20
    • 2.3 内容编写   20
    • 2.3.1 用户如何阅读   20
    • 2.3.2 简明的语言   22
    • 2.4 内容平等   23
    • 2.5 内容管理   24
    • 2.6 自适应内容   24
    • 2.7 总结   27
    • 第二部分 创建响应式网站
    • 第3章 响应式网站之HTML   31
    • 3.1 使用HTML  32
    • 3.1.1 HTML 版本   32
    • 3.1.2 Web 标准   33
    • 3.1.3 使用HTML5   33
    • 3.2 页面基本结构   34
    • 3.2.1 文档类型声明   34
    • 3.2.2 文档结构   34
    • 3.2.3 页面标题   35
    • 3.2.4 字符集   36
    • 3.3 视口   37
    • 3.3.1 宽度   40
    • 3.3.2 初始缩放比   40
    • 3.3.3 用户可缩放   40
    • 3.3.4 最大缩放比   41
    • 3.4 结构性元素   41
    • 3.4.1 屏幕阅读器   42
    • 3.4.2 <header>   43
    • 3.4.3 <nav>   43
    • 3.4.4 <footer>   43
    • 3.4.5 <article>   44
    • 3.4.6 <aside>   44
    • 3.4.7 IE 支持   44
    • 3.5 创建一个页面   45
    • 3.5.1 结构性元素   45
    • 3.5.2 加入内容   46
    • 3.5.3 无样式页面   47
    • 3.6 清晰和语义化的HTML  48
    • 3.6.1 分离内容与表现   48
    • 3.6.2 注释   49
    • 3.7 总结   50
    • 第4章 响应式网站之CSS   51
    • 4.1 CSS 的工作方式   52
    • 4.2 CSS 版本   53
    • 4.3 置CSS 于何处   57
    • 4.3.1 嵌入式样式   57
    • 4.3.2 样式表   58
    • 4.3.3 内联样式   59
    • 4.4 层叠   59
    • 4.4.1 层叠的作用方式   59
    • 4.4.2 重要的规则   60
    • 4.4.3 内联样式   60
    • 4.4.4 ID 选择器   60
    • 4.4.5 类、属性和伪类选择器   61
    • 4.4.6 元素与伪元素选择器   61
    • 4.4.7 继承规则   61
    • 4.4.8 默认值   62
    • 4.4.9 发生冲突怎么办   62
    • 4.5 使用层叠   62
    • 4.5.1 默认值和重置   63
    • 4.5.2 继承规则   64
    • 4.5.3 元素规则   64
    • 4.5.4 其他规则   65
    • 4.5.5 保持简单   65
    • 4.6 注释   66
    • 4.7 组织你的样式表   66
    • 4.8 盒模型   67
    • 4.8.1 度量单位   68
    • 4.8.2 em  68
    • 4.8.3 高度与宽度   69
    • 4.8.4 外边距与内边距   70
    • 4.8.5 边框   71
    • 4.8.6 盒子大小   72
    • 4.9 显示   74
    • 4.10 定位   75
    • 4.10.1 静态定位   75
    • 4.10.2 相对定位   75
    • 4.10.3 绝对定位   76
    • 4.10.4 固定定位   77
    • 4.10.5 定位元素的度量单位   78
    • 4.11 浮动和清除   79
    • 4.12 基本样式   81
    • 4.13 总结   83
    • 第5章 媒体查询   85
    • 5.1 何为媒体查询   85
    • 5.2 媒体查询结构   87
    • 5.3 在样式表链接中使用媒体查询   89
    • 5.4 使用媒体查询的其他方式   90
    • 5.5 我们可以查询什么   91
    • 5.5.1 视口宽度和高度   91
    • 5.5.2 屏幕宽度与高度   92
    • 5.5.3 方向   92
    • 5.5.4 宽高比   92
    • 5.5.5 分辨率   93
    • 5.5.6 其他媒体特性   93
    • 5.6 浏览器支持   94
    • 5.6.1 IE 条件注释   94
    • 5.6.2 测试媒体查询结果   96
    • 5.7 断点   96
    • 5.8 设计范围   97
    • 5.9 响应式设计   98
    • 5.9.1 渐进增强   98
    • 5.9.2 用网格进行设计   99
    • 5.9.3 使用网格列   100
    • 5.9.4 优先为小屏幕设计   101
    • 5.10 使用媒体查询   102
    • 5.11 两列布局   102
    • 5.11.1 使用浮动   103
    • 5.11.2 使用网格   105
    • 5.11.3 加入媒体查询   107
    • 5.12 设置最大宽度   108
    • 5.13 如何选择断点   109
    • 5.14 总结   110
    • 第6章 图像   111
    • 6.1 显示图像的方式   112
    • 6.1.1 CSS 替代方案   112
    • 6.1.2 内容图像   113
    • 6.1.3 背景图像   113
    • 6.1.4 图像拼合   113
    • 6.1.5 图标字体   114
    • 6.2 替代文本   115
    • 6.3 图像文件格式   118
    • 6.3.1 JPEG   119
    • 6.3.2 GIF   119
    • 6.3.3 PNG   120
    • 6.3.4 SVG   120
    • 6.4 优化图像   121
    • 6.4.1 像素与分辨率   121
    • 6.4.2 高密度屏幕   122
    • 6.4.3 压缩图像   123
    • 6.4.4 实际尺寸   124
    • 6.5 内容图像   126
    • 6.5.1 <img> 元素   126
    • 6.5.2 加入图像   127
    • 6.5.3 灵活的图像尺寸   129
    • 6.5.4 媒体查询   130
    • 6.5.5 最大宽度   132
    • 6.5.6 用图像叙事   134
    • 6.6 背景图像   134
    • 6.6.1 加入背景图像   135
    • 6.6.2 对齐   136
    • 6.7 响应式图像   137
    • 6.7.1 建议的客户端解决方案   138
    • 6.7.2 其他解决方案   139
    • 6.7.3 断点   143
    • 6.8 总结   145
    • 第三部分 玩转响应式设计
    • 第7章 响应式设计工作流程  149
    • 7.1 策略与规划   149
    • 7.1.1 用户研究   150
    • 7.1.2 内容   150
    • 7.2 内容先于布局   152
    • 7.2.1 内容组件   152
    • 7.2.2 以文本模式进行设计   153
    • 7.2.3 线性设计   155
    • 7.2.4 内容层次   155
    • 7.3 考虑布局   155
    • 7.3.1 草图绘制   155
    • 7.3.2 从小屏幕开始   156
    • 7.3.3 移动优先   157
    • 7.4 原型   158
    • 7.4.1 线框图与原型   158
    • 7.4.2 线框图   158
    • 7.4.3 响应式原型   159
    • 7.4.4 原型中有什么   160
    • 7.4.5 从基础开始   160
    • 7.4.6 创建页面布局   160
    • 7.4.7 框架   162
    • 7.4.8 原型创建工具   163
    • 7.5 视觉设计   164
    • 7.5.1 样式板   164
    • 7.5.2 测试与调整   165
    • 7.5.3 风格指南   166
    • 7.6 响应式设计工具   168
    • 7.6.1 Adobe Photoshop   168
    • 7.6.2 Adobe InDesign   168
    • 7.6.3 Adobe Edge Reflow   169
    • 7.6.4 Adobe Dreamweaver   170
    • 7.6.5 浏览器   171
    • 7.7 推销响应式设计   172
    • 7.7.1 为什么要用响应式设计   172
    • 7.7.2 教育你的客户   173
    • 7.7.3 强调响应性   173
    • 7.7.4 响应式设计并不总是最佳选择   174
    • 7.7.5 费用   174
    • 7.8 与客户合作   175
    • 7.8.1 交付物   175
    • 7.8.2 陈述报告   176
    • 7.9 总结   177
    • 第8章 岂止手机   178
    • 8.1 用户体验   178
    • 8.1.1 用户至上   179
    • 8.1.2 手机用户的谬见   180
    • 8.1.3 为应用环境设计   180
    • 8.1.4 只用手机的用户   181
    • 8.1.5 使用多个设备   182
    • 8.2 设备无关的设计   182
    • 8.3 专注于移动优先   183
    • 8.4 尽你所能   183
    • 8.5 设备类型   186
    • 8.5.1 手机   186
    • 8.5.2 平板电脑   187
    • 8.5.3 其他设备   187
    • 8.5.4 台式电脑与笔记本电脑   188
    • 8.6 触摸   188
    • 8.6.1 电容式触摸   189
    • 8.6.2 多点触摸   189
    • 8.6.3 手势   189
    • 8.6.4 JavaScript 事件   190
    • 8.6.5 触摸目标大小   191
    • 8.6.6 导航位置   193
    • 8.7 屏幕尺寸   194
    • 8.8 可访问性(通用化设计)   196
    • 8.8.1 视觉   197
    • 8.8.2 音频   199
    • 8.8.3 输入方法   200
    • 8.8.4 认知障碍   201
    • 8.9 决定支持哪些设备   201
    • 8.10 为何要用真实设备进行测试   202
    • 8.10.1 设备实验室   203
    • 8.10.2 购买设备   203
    • 8.11 测试   203
    • 8.11.1 验证器   204
    • 8.11.2 在浏览器窗口调整   204
    • 8.11.3 浏览器工具   204
    • 8.11.4 浏览器与操作系统   205
    • 8.11.5 仿真器与模拟器   206
    • 8.11.6 辅助技术   207
    • 8.12 总结   207
    • 第四部分 设计响应式网站
    • 第9章 文字排版   211
    • 9.1 始于HTML  212
    • 9.2 字型   212
    • 9.3 使用字体   214
    • 9.3.1 设计良好的字体   214
    • 9.3.2 自托管字体   214
    • 9.3.3 字体服务   215
    • 9.3.4 链接字体文件   216
    • 9.3.5 创建字体栈   217
    • 9.4 调整文字大小   218
    • 9.4.1 忘掉像素   218
    • 9.4.2 屏幕距离   218
    • 9.4.3 绝对与相对   219
    • 9.4.4 设置默认字体大小   220
    • 9.4.5 为什么是100%   220
    • 9.4.6 度量单位   221
    • 9.4.7 字体大小间的关系   225
    • 9.4.8 行高   225
    • 9.5 行长   227
    • 9.5.1 测试行长   228
    • 9.5.2 调整外边距及字体大小   229
    • 9.5.3 断字   231
    • 9.5.4 溢出换行   232
    • 9.6 留白   233
    • 9.7 内边距和外边距   234
    • 9.8 为屏幕尺寸改变字型   234
    • 9.9 总结   235
    • 第10章 导航及页眉布局   237
    • 10.1 响应式导航   237
    • 10.1.1 从小屏开始   238
    • 10.1.2 样式化列表   238
    • 10.1.3 水平导航   240
    • 10.2 网站品牌   243
    • 10.3 导航链接   245
    • 10.3.1 灵活性   245
    • 10.3.2 用户想要做什么   245
    • 10.3.3 基于目标的导航   247
    • 10.3.4 保持一致性   248
    • 10.3.5 保持简单   250
    • 10.4 导航模式   250
    • 10.4.1 顶部导航   252
    • 10.4.2 页脚导航   254
    • 10.4.3 切换式推出型导航   256
    • 10.4.4 切换式覆盖型导航   260
    • 10.4.5 部分优先型导航   260
    • 10.4.6 选择菜单型导航   261
    • 10.4.7 抽屉式导航   263
    • 10.4.8 底部导航   264
    • 10.4.9 跳过子导航   266
    • 10.4.10 被抛弃的导航   267
    • 10.4.11 用于宽屏幕的固定菜单   269
    • 10.5 页眉   270
    • 10.5.1 极简页眉   270
    • 10.5.2 复杂页眉   271
    • 10.5.3 导航图标   273
    • 10.5.4 其他图标   275
    • 10.6 总结   277
    • 第11章 性能   279
    • 11.1 性能的重要性   280
    • 11.2 性能作为设计元素   280
    • 11.2.1 网络连接   281
    • 11.2.2 平衡   281
    • 11.2.3 臃肿的网络   281
    • 11.3 网页加载与渲染方式   282
    • 11.3.1 延迟   283
    • 11.3.2 DNS 请求   283
    • 11.3.3 重定向   284
    • 11.3.4 HTTP 请求   284
    • 11.3.5 发送HTML 文件   284
    • 11.3.6 解压   285
    • 11.3.7 DOM   285
    • 11.3.8 渲染<head> 元素   286
    • 11.3.9 渲染<body> 元素   287
    • 11.3.10 onload 事件   287
    • 11.4 性能测量   287
    • 11.5 清理代码   289
    • 11.5.1 使用简单直接的代码   289
    • 11.5.2 缩小   290
    • 11.6 将HTTP 请求减至最少   291
    • 11.6.1 串联   291
    • 11.6.2 第三方代码   292
    • 11.6.3 图像拼合   293
    • 11.7 服务器设置   293
    • 11.7.1 避免重定向   293
    • 11.7.2 文件压缩   294
    • 11.7.3 浏览器缓存   295
    • 11.8 JavaScript   296
    • 11.8.1 JavaScript 做什么   296
    • 11.8.2 JavaScript 的工作方式   296
    • 11.8.3 阻塞式JavaScript   297
    • 11.8.4 JavaScript 库   300
    • 11.9 CSS   301
    • 11.10 托管   302
    • 11.10.1 内容分发网络   302
    • 11.10.2 内容管理系统   303
    • 11.11 有条件地加载内容   303
    • 11.12 重绘与回流   305
    • 11.13 RESS   305
    • 11.14 总结   307

    读书笔记

    vue.js响应式原理解析与实现

    从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染。之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面。今天,就我们就来一步步解析vue.js响应式的原理,并且来实现一个简单的demo。

    首先,先让我们来了解一些基础知识。

    基础知识

    Object.defineProperty

    es5新增了Object.defineProperty这个api,它可以允许我们为对象的属性来设定getter和setter,从而我们可以劫持用户对对象属性的取值和赋值。比如以下代码:

    const obj = {
    };
    
    let val = 'cjg';
    Object.defineProperty(obj, 'name', {
     get() {
     console.log('劫持了你的取值操作啦');
     return val;
     },
     set(newVal) {
     console.log('劫持了你的赋值操作啦');
     val = newVal;
     }
    });
    
    console.log(obj.name);
    obj.name = 'cwc';
    console.log(obj.name);
    
    

    我们通过Object.defineProperty劫持了obj[name]的取值和赋值操作,因此我们就可以在这里做一些手脚啦,比如说,我们可以在obj[name]被赋值的时候触发更新页面操作。

    发布订阅模式

    发布订阅模式是设计模式中比较常见的一种,其中有两个角色:发布者和订阅者。多个订阅者可以向同一发布者订阅一个事件,当事件发生的时候,发布者通知所有订阅该事件的订阅者。我们来看一个例子了解下。

    class Dep {
     constructor() {
     this.subs = [];
     }
     // 增加订阅者
     addSub(sub) {
     if (this.subs.indexOf(sub) < 0) {
      this.subs.push(sub);
     }
     }
     // 通知订阅者
     notify() {
     this.subs.forEach((sub) => {
      sub.update();
     })
     }
    }
    
    const dep = new Dep();
    
    const sub = {
     update() {
     console.log('sub1 update')
     }
    }
    
    const sub1 = {
     update() {
     console.log('sub2 update');
     }
    }
    
    dep.addSub(sub);
    dep.addSub(sub1);

    dep.notify(); // 通知订阅者事件发生,触发他们的更新函数

    动手实践

    我们了解了Object.defineProperty和发布订阅者模式后,我们不难可以想到,vue.js是基于以上两者来实现数据监听的。

    1、vue.js首先通过Object.defineProperty来对要监听的数据进行getter和setter劫持,当数据的属性被赋值/取值的时候,vue.js就可以察觉到并做相应的处理。
    2、通过订阅发布模式,我们可以为对象的每个属性都创建一个发布者,当有其他订阅者依赖于这个属性的时候,则将订阅者加入到发布者的队列中。利用Object.defineProperty的数据劫持,在属性的setter调用的时候,该属性的发布者通知所有订阅者更新内容。

    接下来,我们来动手实现(详情可以看注释):

    class Observer {
     constructor(data) {
     // 如果不是对象,则返回
     if (!data || typeof data !== 'object') {
      return;
     }
     this.data = data;
     this.walk();
     }
    
     // 对传入的数据进行数据劫持
     walk() {
     for (let key in this.data) {
      this.defineReactive(this.data, key, this.data[key]);
     }
     }
     // 创建当前属性的一个发布实例,使用Object.defineProperty来对当前属性进行数据劫持。
     defineReactive(obj, key, val) {
     // 创建当前属性的发布者
     const dep = new Dep();
     /*
     * 递归对子属性的值进行数据劫持,比如说对以下数据
     * let data = {
     * name: 'cjg',
     * obj: {
     *  name: 'zht',
     *  age: 22,
     *  obj: {
     *  name: 'cjg',
     *  age: 22,
     *  }
     * },
     * };
     * 我们先对data最外层的name和obj进行数据劫持,之后再对obj对象的子属性obj.name,obj.age, obj.obj进行数据劫持,层层递归下去,直到所有的数据都完成了数据劫持工作。
     */
     new Observer(val);
     Object.defineProperty(obj, key, {
      get() {
      // 若当前有对该属性的依赖项,则将其加入到发布者的订阅者队列里
      if (Dep.target) {
       dep.addSub(Dep.target);
      }
      return val;
      },
      set(newVal) {
      if (val === newVal) {
       return;
      }
      val = newVal;
      new Observer(newVal);
      dep.notify();
      }
     })
     }
    }
    
    // 发布者,将依赖该属性的watcher都加入subs数组,当该属性改变的时候,则调用所有依赖该属性的watcher的更新函数,触发更新。
    class Dep {
     constructor() {
     this.subs = [];
     }
    
     addSub(sub) {
     if (this.subs.indexOf(sub) < 0) {
      this.subs.push(sub);
     }
     }
    
     notify() {
     this.subs.forEach((sub) => {
      sub.update();
     })
     }
    }
    
    Dep.target = null;
    
    // 观察者
    class Watcher {
     /**
     *Creates an instance of Watcher.
     * @param {*} vm
     * @param {*} keys
     * @param {*} updateCb
     * @memberof Watcher
     */
     constructor(vm, keys, updateCb) {
     this.vm = vm;
     this.keys = keys;
     this.updateCb = updateCb;
     this.value = null;
     this.get();
     }
    
     // 根据vm和keys获取到最新的观察值
     get() {
     Dep.target = this;
     const keys = this.keys.split('.');
     let value = this.vm;
     keys.forEach(_key => {
      value = value[_key];
     });
     this.value = value;
     Dep.target = null;
     return this.value;
     }
    
     update() {
     const oldValue = this.value;
     const newValue = this.get();
     if (oldValue !== newValue) {
      this.updateCb(oldValue, newValue);
     }
     }
    }
    
    let data = {
     name: 'cjg',
     obj: {
     name: 'zht',
     },
    };
    
    new Observer(data);
    // 监听data对象的name属性,当data.name发现变化的时候,触发cb函数
    new Watcher(data, 'name', (oldValue, newValue) => {
     console.log(oldValue, newValue);
    })
    
    data.name = 'zht';
    
    // 监听data对象的obj.name属性,当data.obj.name发现变化的时候,触发cb函数
    new Watcher(data, 'obj.name', (oldValue, newValue) => {
     console.log(oldValue, newValue);
    })
    
    data.obj.name = 'cwc';
    data.obj.name = 'dmh';

    结语

    这样,一个简单的响应式数据监听就完成了。当然,这个也只是一个简单的demo,来说明vue.js响应式的原理,真实的vue.js源码会更加复杂,因为加了很多其他逻辑。

    接下来我可能会将其与html联系起来,实现v-model、computed和{{}}语法。代码地址 有兴趣的欢迎来一起研究探讨下。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

    上一篇:卡尔曼滤波原理及应用:MATLAB仿真

    下一篇:精通引动APP测试实战:技术、工具和案例

    展开 +

    收起 -

     
    响应式 相关内容
    高性能响应式Web开发实战
    高性能响应式Web开发实战 完整版 立即下载
    响应式架构(消息模式Actor实现与Scala、Akka应用集成)
    响应式架构(消息模式Actor实现与Scala、Akka应用集成) 高质量中文版

    本书首度剖析其架构理念与实践思路,使用响应式结构通过全方位简化编程工作的各个层面,消除编程复杂性的方式 Actor系统和Actor对象的特点,以及通过Akka框架使它们拥有更强大功能的方式,实现持久化Actor对象

    立即下载
    RxJava响应式编程
    RxJava响应式编程 清晰扫描版

    主要介绍如何使用RxJava进行响应式编程,从响应式编程与RxJava的概念,到RxJava的操作符和源码,以及各种Scheduler的特点和适用场景,均做了较细致的讲解,是架构师提升必备入门书籍

    立即下载
    响应式Web设计:HTML5和CSS3实战
    响应式Web设计:HTML5和CSS3实战 第2版

    本书将当前Web 设计中热门的响应式设计技术与HTML5 和CSS3 结合起来,为读者全面深入地讲解了针对各种屏幕大小设计和开发现代网站的各种技术。书中不仅讨论了媒体查询、弹性布局、响应式

    立即下载
    Bootstrap用户手册:设计响应式网站
    Bootstrap用户手册:设计响应式网站 完整超清版

    Bootstrap是Mark Otto和Jacob Thornton在Twitter公司共同开发的一个网站开发框架,2011年8月发布至今已经成为Github上最受关注的开源项目。从最初CSS驱动的项目到目前内置很多JavaScript插件和图标,并且涵盖表单和按钮元素、支持响应式Web设计

    立即下载
    构建跨平台APP:响应式UI设计入门
    构建跨平台APP:响应式UI设计入门 扫描高清版 立即下载
    响应式网页设计:Bootstrap开发速成
    响应式网页设计:Bootstrap开发速成 影印完整版

    本书从认识响应式网页设计与Bootstrap开始,详解网站的开发流程、响应式网页的设计思维、SEO设置以及网页设计趋势,导入视觉设计与网页制作两个不同领域的专业知识,并提供120多个Bootstr

    立即下载
    学习笔记
    网友NO.295603

    基于jQuery实现响应式圆形图片轮播特效

    本文实例讲述了基于jQuery实现响应式圆形图片轮播特效代码。分享给大家供大家参考。具体如下: 运行效果截图如下: mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件,mislider轮播图插件的特点有: 使用简单 在同一个屏幕中支持多个轮播图 轮播图的内容可以是单张图片或复杂的HTML内容 轻量级 响应式设计 非常容易定制 丰富的回调函数 跨浏览器,支持IE8+浏览器 引入核心文件 mislider插依赖于一些插件,在引入之前要先引入 jQuery、html5shiv.js、mislider.min.js 以及 mislider.min.css,mislider-custom.css文件 。 link href="css/mislider.css" rel="stylesheet"link href="css/mislider-custom.css" rel="stylesheet"script src="../lib/html5shiv/html5shiv.js"/scriptscript src="js/jquery.min.js"/scriptscript src="js/mislider.js"/script 构建html ol class="mis-slider" !-- slider 元素 - class是一个参数选项 -- li class="mis-slide" !-- 一个旋转元素 - class是一个参数选项 -- a href="#" class="mis-container" !-- A slide container - this element is optional, if absent the plugin adds it automatically -- figure !-- Slide content - whatever you want -- img src="images/garden01.jpg" alt="Pink Water Lillies" figcaptionPink Water Lillies/figcaption /figure /a /li li class="mis-slide" a href="#" class="mis-container" figure img src="images/garden02.jpg" alt="Pond with Lillies" figcaptionPond with Lillies/figcaption /f……

    网友NO.679404

    Vue如何实现响应式系统

    前言 最近深入学习了Vue实现响应式的部分源码,将我的些许收获和思考记录下来,希望能对看到这篇文章的人有所帮助。有什么问题欢迎指出,大家共同进步。 什么是响应式系统 一句话概括:数据变更驱动视图更新。这样我们就可以以“数据驱动”的思维来编写我们的代码,更多的关注业务,而不是dom操作。其实Vue响应式的实现是一个变化追踪和变化应用的过程。 vue响应式原理 以数据劫持方式,拦截数据变化;以依赖收集方式,触发视图更新。利用es5 Object.defineProperty拦截数据的setter、getter;getter收集依赖,setter触发依赖更新,而组件render也会变为一个watcher callback被加入相应数据的依赖中。 发布订阅 利用发布订阅设计模式实现,Observer作为发布者,Watcher作为订阅者,两者无直接交互,通过Dep进行统一调度。 Observer负责拦截get, set;get时触发dep添加依赖,set时调度dep发布;添加Watcher时会触发订阅数据的get,并加入到dep调度中心的订阅者队列中。 以下的UML类图是Vue实现响应式功能的类,以及他们之间的引用关系。 只包含部分属性方法 上图中的类已经标识的蛮清楚了,但是还是需要一个调用关系图,让调用过程更加清晰,如下图所示。 响应式data对象中,每一项key的劫持get/set函数都闭包了Dep调度实例,这张图显示了一个……

    网友NO.730575

    浅谈Vue响应式(数组变异方法)

    前言 很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法。 看来想让女神自己动,关键得用对方法。虽然在官方文档中已经给出了方法,但是在下实在好奇的紧,想要解锁更多姿势的话,那就必须先要深入女神的心,于是乎才有了去探索Vue响应式原理的想法。(如果你愿意一层一层地剥开我的心。你会发现,你会讶异…… 沉迷于鬼哭狼嚎 无法自拔QAQ)。 前排提示,Vue的响应式原理主要是使用了ES5的Object.defineProperty,毫不知情的同学可以查看相关资料。 为啥数组不响应? 仔细一想,Vue的响应是基于Object.definePropery的,这个方法主要是对对象属性的描述进行修改。数组其实也是对象,通过定义数组的属性应该也能产生响应的效果呀。先验证一下自己的想法,撸起袖子就开干。 const arr = [1,2,3];let val = arr[0];Object.defineProperty(arr,'0',{ enumerable: true, configurable: true, get(){ doSomething(); return val; }, set(a){ val = a; doSomething(); }});function doSomething() {} 然后在控制台中分别输入arr、arr[0] = 2、arr,可以看到如下图的结果。 咦,一切居然都如预想猜想的一样。 接下来,看到这段代码,有的同学可能会有所疑问,为啥在……

    网友NO.845390

    Vue响应式原理Observer、Dep、Watcher理解

    开篇 最近在学习Vue的源码,看了网上一些大神的博客,看起来感觉还是蛮吃力的。自己记录一下学习的理解,希望能够达到简单易懂,不看源码也能理解的效果 Object.defineProperty 相信很多同学或多或少都了解Vue的响应式原理是通过Object.defineProperty实现的。被Object.defineProperty绑定过的对象,会变成「响应式」化。也就是改变这个对象的时候会触发get和set事件。进而触发一些视图更新。举个栗子 function defineReactive (obj, key, val) { Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: () = { console.log('我被读了,我要不要做点什么好?'); return val; }, set: newVal = { if (val === newVal) { return; } val = newVal; console.log("数据被改变了,我要把新的值渲染到页面上去!"); } })}let data = { text: 'hello world',};// 对data上的text属性进行绑定defineReactive(data, 'text', data.text);console.log(data.text); // 控制台输出 我被读了,我要不要做点什么好?data.text = 'hello Vue'; // 控制台输出 hello Vue 数据被改变了,我要把新的值渲染到页面上去! Observer 「响应式」 Vue中用Observer类来管理上述响应式化Object.defineProperty的过程。我们可以用如下代码来描述,将this.data也就是我们在Vue代码中定义的data属性全部进行「响应式」绑定。 class Observer { constructor() { // 响应式绑定数据通过方法 observe……

    电子书 编程教程 PC软件下载 安卓软件下载

    Copyright 2018-2020 xz577.com 码农之家

    本站所有电子书资源不再提供下载地址,只分享来路

    免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

    版权投诉 / 书籍推广 / 赞助:QQ:520161757