移动Web前端高效开发实战epub

图书网 2019年12月9日21:01:461 2.5K
摘要

适读人群 :移动Web开发初学者和前端爱好者,APP的Native客户端开发人员,网页和移动网页从业人员,从事后端开发对前端有兴趣的人员,大中专院校的学生,可作为各种培训学校的入门教程。
★本书梳理了移动前端和Native客户端技术体系
★涵盖了移动Web前端开发中的各个关键技术环节
★全面地还原了一线互联网公司的Web前端技术栈
★含大量基于Web前端的优秀开源技术类库和框架介绍

移动Web前端高效开发实战 作者:iKcamp

移动Web前端高效开发实战 出版社: 电子工业出版社

移动Web前端高效开发实战 内容简介

移动互联网的兴起和快速普及,给前端开发人员带来了新机遇。移动Web前端技术作为整个技术链条中重要的一环,却乱象丛生。本书是一本梳理移动前端和Native客户端技术体系的入门实战书。

本书涵盖了移动Web前端开发中的各个关键技术环节,共14章。分别从HTML 5、CSS 3、JavaScript的ECMAScript 5和ECMAScript 6版本、移动端常用布局方案、MV*类新时代框架、预编译技术、性能优化、开发调试、混合式应用、单元测试、工程化等方面全面地还原一线互联网公司Web前端技术栈。

创作本书的初衷是帮助移动Web前端开发领域的工程师们,勾画出一张实用并且具体的技术图,帮助读者正确且快速地掌握学习路径。本书篇幅有限,力求精简,只列举了各技术栈中核心关键部分,包括大量基于Web前端的优秀开源技术类库和框架介绍,是进入移动Web开发领域的实用指南。

移动Web前端高效开发实战 目录

前言

第1章 初识移动Web前端

1.1 移动Web前端史

1.2 移动Web前端现状与未来

1.3 常见问题

1.4 本章小结

第2章 移动Web开发环境搭建

2.1 Visual Studio Code免费跨平台编辑器

2.2 使用Node.js

2.3 本章小结

第3章 HTML 5必会实际常用特性

3.1 新的语义

3.2 访问你的设备

3.3 离线和存储

3.4 图像效果

3.5 不一样的通信

3.6 其他常用特性

3.7 本章小结

第4章 CSS 3必会实战技巧

4.1 认识CSS 3

4.2 选择器

4.3 响应式开发

4.4 动效

4.5 常用特性

4.6 预编译

4.7 本章小结

第5章 JavaScript关键语法及使用技巧

5.1 理解JavaScript

5.2 事件

5.3 作用域、闭包和this

5.4 面向对象

5.5 异步编程

5.6 模块化

5.7 ECMAScript 6其他常用功能

5.8 本章小结

第6章 HTML 5移动开发实战

6.1 在地图上显示行走轨迹

6.2 仿原生相册

6.3 使用Socket.IO制作小型聊天室

6.4 移动端拍照上传实践

6.5 利用Microdata进行SEO优化

6.6 制作一个带字幕的视频播放器

6.7 使用Pixi.js制作“抓住开学君”游戏(Canvas+WebGL)

6.8 用Canvas制作刮刮卡

6.9 实战演练:实现3D全景效果

6.10 本章小结

第7章 移动网页样式布局实战

7.1 静态布局的实际应用

7.2 水平居中与垂直居中实战

7.3 栅格系统实现响应式列表

7.4 Flex多栏布局实战

7.5 实战演练:沪江网校首页rem布局实践

7.6 实战演练:侧边栏的滑进滑出效果

7.7 实战演练:模拟原生的页面切换效果

7.8 提高Web动画的性能实战

7.9 实战演练:课程分类列表实战

7.10 本章小结

第8章 前端工程化实战

8.1 前端工程化

8.2 工程化入门Grunt

8.3 使用Gulp构建一个ECMAScript 6和Sass应用

8.4 实战演练:使用Webpack构建一个React应用

8.5 本章小结

第9章 移动Web常用开发方式实战

9.1 基于DOM的开发方式

9.2 基于React的开发方式

9.3 基于Vue.js的开发方式

9.4 打造单页应用SPA

9.5 本章小结

第10章 混合式开发实战

10.1 为什么需要混合式开发

10.2 Cordova开发入门

10.3 React Native实战

10.4 实战演练:用React Native开发新闻阅读应用

10.5 本章小结

第11章 前端开发调试实战

11.1 浏览器调试

11.2 代理工具

11.3 多终端同步工具

11.4 模拟器调试

11.5 多平台调试

11.6 云真机调试

11.7 React调试

11.8 本章小结

第12章 前端单元测试实战

12.1 JavaScript单元测试框架Jasmine实战

12.2 使用Mocha和Chai在Node.js进行单元测试

12.3 使用Sinon辅助单元测试

12.4 使用Karma自动化单元测试

12.5 使用Istanbul计算代码覆盖率

12.6 使用Benchmark.js进行基准测试

12.7 实战演练:React版备忘录项目的完整单元测试

12.8 本章小结

第13章 前端性能优化实战

13.1 常用网站性能优化指标

13.2 依旧有效的Yahoo性能优化法则

13.3 性能优化工具使用实战

13.4 HTTP协议头缓存实战

13.5 资源按需加载实战

13.6 不同网络类型的优化实战

13.7 实战演练:Nginx配置Combo合并HTTP请求

13.8 本章小结

第14章 项目实战:搭建直播平台(Cordova+Koa+React)

14.1 项目的安装和启动

14.2 直播平台功能预览

14.3 页面的布局和结构

14.4 搭建WebRTC服务端——Koa

14.5 实现多人在线直播功能

14.6 实现弹幕客户端与服务端通信

14.7 本章小结

移动Web前端高效开发实战 精彩文摘

8.4 实战演练:使用Webpack构建一个React应用

Webpack是一个模块加载器兼打包工具,能把各种资源,例如脚本(JavaScript、TypeScript、JSX)、样式(CSS、Less、Sass)、图片(png、jpg、gif)等都作为模块来处理。目前,主流前端开发框架(如React、Vue.js)的官方实例项目均使用Webpack作为工程化工具。

8.4.1 安装和配置

本节会创建一个简单的React项目,并使用Webpack构建开发环境以及打包生产环境所需的静态资源。项目目录结构如图8.10所示。

app文件夹存储打包前的静态文件,里面的文件会被Webpack打包,打包后的文件会存储到public文件夹。

index.js文件是入口脚本文件,内容如下:

import React,{ Component } from 'react'; // 引入react包

import ReactDOM from 'react-dom'; // 引入react-dom包

import Hello from './hello'; // 引入依赖的Hello组件

class App extends Component { // 定义入口组件

render() { // 绘制组件

return (

// 使用Hello组件

)

}

}

ReactDOM.render( // 绘制组件到页面

,

document.getElementById('root')

);

hello.js文件定义了一个React组件,被index.js文件使用,代码如下:

import React,{ Component } from 'react'; // 引入react包

export default class Hello extends Component { // 定义Hello组件并导出

render() { // 绘制组件

return (

Hello World

)

}

}

注意:React的详细使用会在后续章节中介绍,此处只是简单使用。

public文件夹存储需要被浏览器访问到的文件,打包后生成的入口脚本文件也会存储在这个文件夹当中。

index.html是入口页面文件,内容如下:

package.json文件是标准的NPM说明文件,这个文件可以通过NPM命令生成。打开命令行窗口,输入如下命令:

npm init

图书网:移动Web前端高效开发实战epub

继续阅读

→→→→→→→→→→→→→→→→→→→→查找获取

软件工程/开发项目管理

软件设计重构pdf

以4个设计原则为中心,全面呈现25种在软件项目中导致技术债务的设计坏味 提供一种独特的坏味命名方法,帮助理解坏味的由来并指出潜在重构方法 包含丰富的例证,展现糟糕设计实践的潜在坏味...
软件工程/开发项目管理

DevOps 最佳实践pdf

DevOps 最佳实践 作者: Bart de Best(巴特・德・贝斯特) DevOps 最佳实践 出版社:电子工业出版社 DevOps 最佳实践 内容简介 近年来,许多组织都体会到了使用敏捷方法的...
软件工程/开发项目管理

Android组件化架构pdf

Android走过的十个年头,其技术演进也是有迹可循的,本书作者基于自己在大型App架构的技术演进中成长的经历,将遇到的相关问题进行深入剖析,包括Android 组件化架构、模块化...
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:1   其中:访客  1   博主  0
    • asdasd
      asdasd 9

      试一下