zhuanglog

zhuanglog 查看完整档案

无锡编辑江南大学  |  电气工程 编辑  |  填写所在公司/组织 github.com/zhuanglog 编辑
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

zhuanglog 赞了文章 · 2019-07-15

一名【合格】前端工程师的自检清单

开篇

前端开发是一个非常特殊的行业,它的历史实际上不是很长,但是知识之繁杂,技术迭代速度之快是其他技术所不能比拟的。

winter在他的《重学前端》课程中提到:

到现在为止,前端工程师已经成为研发体系中的重要岗位之一。可是,与此相对的是,我发现极少或者几乎没有大学的计算机专业愿意开设前端课程,更没有系统性的教学方案出现。大部分前端工程师的知识,其实都是来自于实践和工作中零散的学习。

这样是一个非常真实的现状,实际上很多前端开发者都是自学甚至转行过来的,前端入门简单,学习了几个API以后上手做项目也很简单,但是这往往成为了限制自身发展的瓶颈。

只是停留在会用阶段是远远不够的,我们还需要不断探索和深入。现在市面上并不缺少学习教程,技术文章,如果盲目的学习你会发现看过以后的知识留存率会很低,而且发现没有了解到的知识越来越多,这会让人产生焦虑。

实际上,除了坚持学习的强大的自驱力,你还需要一个很简单的学习方法。那就是:建立自己的知识体系。它能帮助你更系统性的学习,同时你也时刻能知道自己哪些地方是不足的。

我会把我工作和学习中接触到的知识全部归纳到我的知识体系中,其中不仅仅包括我已经学过的,还有很多我没有来得及学习的。

这不仅仅是我的知识体系,更是我时刻提醒自己的自检清单。

下面我会把我的自检清单分享给大家,你可以按照清单上的知识检测自己还有哪些不足和提升,我也建议大家建自己的知识体系,这样工作或者学习甚至面试时,你能快速定位到知识清单中的点,如果你有哪些我没归纳到的点,欢迎在评论区告诉我。

一、JavaScript基础

前端工程师吃饭的家伙,深度、广度一样都不能差。

变量和类型

  • 1.JavaScript规定了几种语言类型
  • 2.JavaScript对象的底层数据结构是什么
  • 3.Symbol类型在实际开发中的应用、可手动实现一个简单的Symbol
  • 4.JavaScript中的变量在内存中的具体存储形式
  • 5.基本类型对应的内置对象,以及他们之间的装箱拆箱操作
  • 6.理解值类型和引用类型
  • 7.nullundefined的区别
  • 8.至少可以说出三种判断JavaScript数据类型的方式,以及他们的优缺点,如何准确的判断数组类型
  • 9.可能发生隐式类型转换的场景以及转换原则,应如何避免或巧妙应用
  • 10.出现小数精度丢失的原因,JavaScript可以存储的最大数字、最大安全数字,JavaScript处理大数字的方法、避免精度丢失的方法

原型和原型链

  • 1.理解原型设计模式以及JavaScript中的原型规则
  • 2.instanceof的底层实现原理,手动实现一个instanceof
  • 4.实现继承的几种方式以及他们的优缺点
  • 5.至少说出一种开源项目(如Node)中应用原型继承的案例
  • 6.可以描述new一个对象的详细过程,手动实现一个new操作符
  • 7.理解es6 class构造以及继承的底层实现原理

作用域和闭包

  • 1.理解词法作用域和动态作用域
  • 2.理解JavaScript的作用域和作用域链
  • 3.理解JavaScript的执行上下文栈,可以应用堆栈信息快速定位问题
  • 4.this的原理以及几种不同使用场景的取值
  • 5.闭包的实现原理和作用,可以列举几个开发中闭包的实际应用
  • 6.理解堆栈溢出和内存泄漏的原理,如何防止
  • 7.如何处理循环的异步操作
  • 8.理解模块化解决的实际问题,可列举几个模块化方案并理解其中原理

执行机制

  • 1.为何try里面放returnfinally还会执行,理解其内部机制
  • 2.JavaScript如何实现异步编程,可以详细描述EventLoop机制
  • 3.宏任务和微任务分别有哪些
  • 4.可以快速分析一个复杂的异步嵌套逻辑,并掌握分析方法
  • 5.使用Promise实现串行
  • 6.Node与浏览器EventLoop的差异
  • 7.如何在保证页面运行流畅的情况下处理海量数据

语法和API

  • 1.理解ECMAScriptJavaScript的关系
  • 2.熟练运用es5es6提供的语法规范,
  • 3.熟练掌握JavaScript提供的全局对象(例如DateMath)、全局函数(例如decodeURIisNaN)、全局属性(例如Infinityundefined
  • 4.熟练应用mapreducefilter 等高阶函数解决问题
  • 5.setInterval需要注意的点,使用settimeout实现setInterval
  • 6.JavaScript提供的正则表达式API、可以使用正则表达式(邮箱校验、URL解析、去重等)解决常见问题
  • 7.JavaScript异常处理的方式,统一的异常处理方案

二、HTML和CSS

HTML

  • 1.从规范的角度理解HTML,从分类和语义的角度使用标签
  • 2.常用页面标签的默认样式、自带属性、不同浏览器的差异、处理浏览器兼容问题的方式
  • 3.元信息类标签(headtitlemeta)的使用目的和配置方法
  • 4.HTML5离线缓存原理
  • 5.可以使用Canvas APISVG等绘制高性能的动画

CSS

  • 1.CSS盒模型,在不同浏览器的差异
  • 2.CSS所有选择器及其优先级、使用场景,哪些可以继承,如何运用at规则
  • 3.CSS伪类和伪元素有哪些,它们的区别和实际应用
  • 4.HTML文档流的排版规则,CSS几种定位的规则、定位参照物、对文档流的影响,如何选择最好的定位方式,雪碧图实现原理
  • 5.水平垂直居中的方案、可以实现6种以上并对比它们的优缺点
  • 6.BFC实现原理,可以解决的问题,如何创建BFC
  • 7.可使用CSS函数复用代码,实现特殊效果
  • 8.PostCSSSassLess的异同,以及使用配置,至少掌握一种
  • 9.CSS模块化方案、如何配置按需加载、如何防止CSS阻塞渲染
  • 10.熟练使用CSS实现常见动画,如渐变、移动、旋转、缩放等等
  • 11.CSS浏览器兼容性写法,了解不同API在不同浏览器下的兼容性情况
  • 12.掌握一套完整的响应式布局方案

手写

  • 1.手写图片瀑布流效果
  • 2.使用CSS绘制几何图形(圆形、三角形、扇形、菱形等)
  • 3.使用纯CSS实现曲线运动(贝塞尔曲线)
  • 4.实现常用布局(三栏、圣杯、双飞翼、吸顶),可是说出多种方式并理解其优缺点

三、计算机基础

关于编译原理,不需要理解非常深入,但是最基本的原理和概念一定要懂,这对于学习一门编程语言非常重要

编译原理

  • 1.理解代码到底是什么,计算机如何将代码转换为可以运行的目标程序
  • 2.正则表达式的匹配原理和性能优化
  • 3.如何将JavaScript代码解析成抽象语法树(AST)
  • 4.base64的编码原理
  • 5.几种进制的相互转换计算方法,在JavaScript中如何表示和转换

网络协议

  • 1.理解什么是协议,了解TCP/IP网络协议族的构成,每层协议在应用程序中发挥的作用
  • 2.三次握手和四次挥手详细原理,为什么要使用这种机制
  • 3.有哪些协议是可靠,TCP有哪些手段保证可靠交付
  • 4.DNS的作用、DNS解析的详细过程,DNS优化原理
  • 5.CDN的作用和原理
  • 6.HTTP请求报文和响应报文的具体组成,能理解常见请求头的含义,有几种请求方式,区别是什么
  • 7.HTTP所有状态码的具体含义,看到异常状态码能快速定位问题
  • 8.HTTP1.1HTTP2.0带来的改变
  • 9.HTTPS的加密原理,如何开启HTTPS,如何劫持HTTPS请求
  • 10.理解WebSocket协议的底层原理、与HTTP的区别

设计模式

  • 1.熟练使用前端常用的设计模式编写代码,如单例模式、装饰器模式、代理模式等
  • 2.发布订阅模式和观察者模式的异同以及实际应用
  • 3.可以说出几种设计模式在开发中的实际应用,理解框架源码中对设计模式的应用

四、数据结构和算法

据我了解的大部分前端对这部分知识有些欠缺,甚至抵触,但是,如果突破更高的天花板,这部分知识是必不可少的,而且我亲身经历——非常有用!

JavaScript编码能力

  • 1.多种方式实现数组去重、扁平化、对比优缺点
  • 2.多种方式实现深拷贝、对比优缺点
  • 3.手写函数柯里化工具函数、并理解其应用场景和优势
  • 4.手写防抖和节流工具函数、并理解其内部原理和应用场景
  • 5.实现一个sleep函数

手动实现前端轮子

  • 1.手动实现call、apply、bind
  • 2.手动实现符合Promise/A+规范的Promise、手动实现async await
  • 3.手写一个EventEmitter实现事件发布、订阅
  • 4.可以说出两种实现双向绑定的方案、可以手动实现
  • 5.手写JSON.stringifyJSON.parse
  • 6.手写一个模版引擎,并能解释其中原理
  • 7.手写懒加载下拉刷新上拉加载预加载等效果

数据结构

  • 1.理解常见数据结构的特点,以及他们在不同场景下使用的优缺点
  • 2.理解数组字符串的存储原理,并熟练应用他们解决问题
  • 3.理解二叉树队列哈希表的基本结构和特点,并可以应用它解决问题
  • 4.了解的基本结构和使用场景

算法

  • 1.可计算一个算法的时间复杂度和空间复杂度,可估计业务逻辑代码的耗时和内存消耗
  • 2.至少理解五种排序算法的实现原理、应用场景、优缺点,可快速说出时间、空间复杂度
  • 3.了解递归和循环的优缺点、应用场景、并可在开发中熟练应用
  • 4.可应用回溯算法贪心算法分治算法动态规划等解决复杂问题
  • 5.前端处理海量数据的算法方案

五、运行环境

我们需要理清语言和环境的关系:

ECMAScript描述了JavaScript语言的语法和基本对象规范

浏览器作为JavaScript的一种运行环境,为它提供了:文档对象模型(DOM),描述处理网页内容的方法和接口、浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口

Node也是JavaScript的一种运行环境,为它提供了操作I/O、网络等API

浏览器API

  • 1.浏览器提供的符合W3C标准的DOM操作API、浏览器差异、兼容性
  • 2.浏览器提供的浏览器对象模型 (BOM)提供的所有全局API、浏览器差异、兼容性
  • 3.大量DOM操作、海量数据的性能优化(合并操作、DiffrequestAnimationFrame等)
  • 4.浏览器海量数据存储、操作性能优化
  • 5.DOM事件流的具体实现机制、不同浏览器的差异、事件代理
  • 6.前端发起网络请求的几种方式及其底层实现、可以手写原生ajaxfetch、可以熟练使用第三方库
  • 7.浏览器的同源策略,如何避免同源策略,几种方式的异同点以及如何选型
  • 8.浏览器提供的几种存储机制、优缺点、开发中正确的选择
  • 9.浏览器跨标签通信

浏览器原理

  • 1.各浏览器使用的JavaScript引擎以及它们的异同点、如何在代码中进行区分
  • 2.请求数据到请求结束与服务器进行了几次交互
  • 3.可详细描述浏览器从输入URL到页面展现的详细过程
  • 4.浏览器解析HTML代码的原理,以及构建DOM树的流程
  • 5.浏览器如何解析CSS规则,并将其应用到DOM树上
  • 6.浏览器如何将解析好的带有样式的DOM树进行绘制
  • 7.浏览器的运行机制,如何配置资源异步同步加载
  • 8.浏览器回流与重绘的底层原理,引发原因,如何有效避免
  • 9.浏览器的垃圾回收机制,如何避免内存泄漏
  • 10.浏览器采用的缓存方案,如何选择和控制合适的缓存方案

Node

  • 1.理解Node在应用程序中的作用,可以使用Node搭建前端运行环境、使用Node操作文件、操作数据库等等
  • 2.掌握一种Node开发框架,如ExpressExpressKoa的区别
  • 3.熟练使用Node提供的APIPathHttpChild Process等并理解其实现原理
  • 4.Node的底层运行原理、和浏览器的异同
  • 5.Node事件驱动、非阻塞机制的实现原理

六、框架和类库

轮子层出不穷,从原理上理解才是正道

TypeScript

  • 1.理解泛型接口等面向对象的相关概念,TypeScript对面向对象理念的实现
  • 2.理解使用TypeScript的好处,掌握TypeScript基础语法
  • 3.TypeScript的规则检测原理
  • 4.可以在ReactVue等框架中使用TypeScript进行开发

React

  • 1.Reactvue 选型和优缺点、核心架构的区别
  • 2.ReactsetState的执行机制,如何有效的管理状态
  • 3.React的事件底层实现机制
  • 4.React的虚拟DOMDiff算法的内部实现
  • 5.ReactFiber工作原理,解决了什么问题
  • 6.React RouterVue Router的底层实现原理、动态加载实现原理
  • 7.可熟练应用React API、生命周期等,可应用HOCrender propsHooks等高阶用法解决问题
  • 8.基于React的特性和原理,可以手动实现一个简单的React

Vue

  • 1.熟练使用VueAPI、生命周期、钩子函数
  • 2.MVVM框架设计理念
  • 3.Vue双向绑定实现原理、Diff算法的内部实现
  • 4.Vue的事件机制
  • 5.从template转换成真实DOM的实现机制

多端开发

  • 1.单页面应用(SPA)的原理和优缺点,掌握一种快速开发SPA的方案
  • 2.理解Viewportemrem的原理和用法,分辨率、pxppidpidp的区别和实际应用
  • 3.移动端页面适配解决方案、不同机型适配方案
  • 4.掌握一种JavaScript移动客户端开发技术,如React Native:可以搭建React Native开发环境,熟练进行开发,可理解React Native的运作原理,不同端适配
  • 5.掌握一种JavaScriptPC客户端开发技术,如Electron:可搭建Electron开发环境,熟练进行开发,可理解Electron的运作原理
  • 6.掌握一种小程序开发框架或原生小程序开发
  • 7.理解多端框架的内部实现原理,至少了解一个多端框架的使用

数据流管理

  • 1.掌握ReactVue传统的跨组件通信方案,对比采用数据流管理框架的异同
  • 2.熟练使用Redux管理数据流,并理解其实现原理,中间件实现原理
  • 3.熟练使用Mobx管理数据流,并理解其实现原理,相比Redux有什么优势
  • 4.熟练使用Vuex管理数据流,并理解其实现原理
  • 5.以上数据流方案的异同和优缺点,不情况下的技术选型

实用库

  • 1.至少掌握一种UI组件框架,如antd design,理解其设计理念、底层实现
  • 2.掌握一种图表绘制框架,如Echart,理解其设计理念、底层实现,可以自己实现图表
  • 3.掌握一种GIS开发框架,如百度地图API
  • 4.掌握一种可视化开发框架,如Three.jsD3
  • 5.工具函数库,如lodashunderscoremoment等,理解使用的工具类或工具函数的具体实现原理

开发和调试

  • 1.熟练使用各浏览器提供的调试工具
  • 2.熟练使用一种代理工具实现请求代理、抓包,如charls
  • 3.可以使用AndroidIOS模拟器进行调试,并掌握一种真机调试方案
  • 4.了解VueReact等框架调试工具的使用

七、前端工程

前端工程化:以工程化方法和工具提高开发生产效率、降低维护难度

项目构建

  • 1.理解npmyarn依赖包管理的原理,两者的区别
  • 2.可以使用npm运行自定义脚本
  • 3.理解BabelESLintwebpack等工具在项目中承担的作用
  • 4.ESLint规则检测原理,常用的ESLint配置
  • 5.Babel的核心原理,可以自己编写一个Babel插件
  • 6.可以配置一种前端代码兼容方案,如Polyfill
  • 7.Webpack的编译原理、构建流程、热更新原理,chunkbundlemodule的区别和应用
  • 8.可熟练配置已有的loadersplugins解决问题,可以自己编写loadersplugins

nginx

  • 1.正向代理与反向代理的特点和实例
  • 2.可手动搭建一个简单的nginx服务器、
  • 3.熟练应用常用的nginx内置变量,掌握常用的匹配规则写法
  • 4.可以用nginx实现请求过滤、配置gzip、负载均衡等,并能解释其内部原理

开发提速

  • 1.熟练掌握一种接口管理、接口mock工具的使用,如yapi
  • 2.掌握一种高效的日志埋点方案,可快速使用日志查询工具定位线上问题
  • 3.理解TDDBDD模式,至少会使用一种前端单元测试框架

版本控制

  • 1.理解Git的核心原理、工作流程、和SVN的区别
  • 2.熟练使用常规的Git命令、git rebasegit stash等进阶命令
  • 3.可以快速解决线上分支回滚线上分支错误合并等复杂问题

持续集成

  • 1.理解CI/CD技术的意义,至少熟练掌握一种CI/CD工具的使用,如Jenkins
  • 2.可以独自完成架构设计、技术选型、环境搭建、全流程开发、部署上线等一套完整的开发流程(包括Web应用、移动客户端应用、PC客户端应用、小程序、H5等等)

八、项目和业务

后端技能

  • 1.了解后端的开发方式,在应用程序中的作用,至少会使用一种后端语言
  • 2.掌握数据最终在数据库中是如何落地存储的,能看懂表结构设计、表之间的关联,至少会使用一种数据库

性能优化

  • 1.了解前端性能衡量指标、性能监控要点,掌握一种前端性能监控方案
  • 2.了解常见的WebApp性能优化方案
  • 3.SEO排名规则、SEO优化方案、前后端分离的SEO
  • 4.SSR实现方案、优缺点、及其性能优化
  • 5.Webpack的性能优化方案
  • 6.Canvas性能优化方案
  • 7.ReactVue等框架使用性能优化方案

前端安全

  • 1.XSS攻击的原理、分类、具体案例,前端如何防御
  • 2.CSRF攻击的原理、具体案例,前端如何防御
  • 3.HTTP劫持、页面劫持的原理、防御措施

业务相关

  • 1.能理解所开发项目的整体业务形态、业务目标、业务架构,可以快速定位线上业务问题
  • 2.能理解所开发项目整体的技术架构、能快读的根据新需求进行开发规划、能快速根据业务报警、线上日志等定位并解决线上技术问题
  • 3.可以将自己的想法或新技术在业务中落地实践,尽量在团队中拥有一定的不可替代性

九、学习提升

vczh大神在知乎问题【如何能以后达到温赵轮三位大神的水平?】下的回答:

这十几年我一共做了三件事:

  • 1、不以赚钱为目的选择学习的内容;
  • 2、以自己是否能造出轮子来衡量学习的效果;
  • 3、坚持每天写自己的代码,前10年每天至少6个小时,不包含学习和工作的时间。
上面几点可能有点难,第一点我就做不到,但是做到下面绩点还是比较容易的。

关于写博客说明下,能给别人讲明白的知识会比自己学习掌握的要深刻许多

  • 1.拥有自己的技术博客,或者在一些博客平台上拥有自己的专栏
  • 2.定期的将知识进行总结,不断完善自己的知识体系
  • 3.尽量将自己的知识转换成真实的产出,不要仅仅停留在书面理解层面,更重要的是实际应用
  • 4.坚持输出自己的代码,不要盲目的扎进公司业

十、技术之外

这部分可能比上面九条加起来重要!
  • 1.了解互联网人员术语:CEOCTOCOOCFOPMQAUIFEDEVDBAOPS
  • 2.了解互联网行业术语:B2BB2CC2CO2O
  • 3.掌握互联网行业沟通、问答、学习的
  • 4.有一定的"PPT"能力
  • 5.有一定的理财意识,至少了解储蓄、货币基金、保险、指数基金、股票等基本的理财知识
  • 6.掌握在繁重的工作和长期的电脑辐射的情况下保持健康的方法,建立正确的养生知识体系

十一、资源推荐

有了知识体系,在阅读一篇技术文章的时候就很容易把它归类,我一直以来就是这样做的。

事实证明,在阅读文章或书籍时,有目的和归类的阅读比"随便看看"后的只是留存率要高很多。

每阅读到一篇好的文章或者书籍,我都会收藏并归类到我的知识体系中。

下面是一些我觉得还不错的文章、博客或者书籍教程等等,分享给大家,资源不多,但都是精品。

学习一门知识,最好先阅读官方文档,把所有的API大概浏览一遍,再继续看大佬们总结的进阶知识,什么东西是搬运过来的,什么是干货,一目了然。

语言基础

计算机基础

数据结构和算法

运行环境

框架和类库

前端工程

项目和业务

学习提升

另外推荐我一直在关注的几位大佬的个人博客:

技术之外

其实在这个信息发达的时代最不缺的就是资源,如何从众多的资源中获取到真正精华的部分,是非常重要的,资源在于精不在于多,强烈建议在保证深度的情况下再保证广度。

小结

希望你阅读本篇文章后可以达到以下几点:

  • 从知识清单中找到自己的知识盲点与欠缺
  • 具有知识体系化的思想,开始建立自己的知识体系
  • 阅读文章时将知识归类到知识体系中,并不断完善自己的知识体系
  • 从文章中获取到了有用的资源

文中如有错误,欢迎在评论区指正,如果这篇文章帮助到了你,欢迎点赞和关注。

如果你有什么好的知识、资源推荐,欢迎在评论区留言。

想阅读更多优质文章、下载文章中思维导图源文件、可关注我的github博客,后续的文章我也会按照知识清单来写,你的star✨、点赞和关注是我持续创作的动力!

推荐关注我的微信公众号【code秘密花园】,每天推送高质量文章,我们一起交流成长。

查看原文

赞 693 收藏 551 评论 36

zhuanglog 发布了文章 · 2019-05-12

用Python实现插入排序和选择排序


这篇是我关于用Python实现50个经典算法代码的第一篇文章,主要目的是在自己手写一遍算法之后,在文章中对算法的细节进行总结来加以巩固。

话不多说,让我们从最基本的排序算法开始吧

插入排序

如下图所示,插入排序的实现思路顾名思义,就是不断地在一个已经是有序的数组中,寻找合适位置并插入新元素

clipboard.png

具体实现步骤为:

首先我们把整个数组拆分为有序区间和未排序区间,有序区间在插入排序一开始只有一个元素,就是数组的第一个元素。

接在有序区间之后的一个元素就是准备插入的元素,在图中就是标为绿色的元素,在有序区间内寻找位置并插入。

其寻找逻辑为:从后往前依次进行比较,如果待插入元素大于当前元素,则将待插入元素插入到当前元素的后一位,如果待插入元素小于当前元素,则将当前元素后移一位。不断重复该过程直至到数组的最后一位

其实现的具体代码为:

def insertion_sort(a):
    length = len(a)
    if length <=1:
        return 
    for i in range(1,length):
        j = i-1
        value = a[i]
        while j >=0:
            if a[j]<value:
                a[j+1] = value
                break
            else:
                a[j+1] = a[j]
                if j == 0:
                    a[j] = value 
            j -=1
        print(a)
    return a

时间复杂计算为:我们需要将整个数组遍历一遍,所以这一部分为O(n),在每一次遍历中都要执行一次插入操作,其时间复杂度为O(n),所以总时间复杂度为O(n2)

选择排序

选择排序跟插入排序算法类似,都是将数组分为有序区间和未排序区间,区别在于插入排序是将一个新元素插入到有序区间内,而选择排序则是在未排序区间中找到最小元素,并交换到有序区间之后。

clipboard.png

实现代码为:

def selection_sort(a):
    length = len(a)
    if length <=1:
        return
    for i in range(0,length-1):
        min_value = a[i]
        min_index = i
        j = i+1
        while j<length:
            if a[j] < min_value:
                min_value = a[j]
                min_index = j
            j += 1
        a[i],a[min_index] = a[min_index],a[i]
    return a

时间复杂度计算:数组长度为n,一共需要寻找n次最小值,每次寻找最小值都要遍历未排序区间一次,其时间复杂度为O(n),乘以n次为O(n2)

查看原文

赞 7 收藏 6 评论 0

zhuanglog 赞了文章 · 2018-08-18

入门 Webpack,看这篇就够了

2018年8月25日更新,目前 webpack 已经更新值 4.17.1 ,本文所用到的各种库或多或少有些过时,跟着代码操作下来可能会遇到各种问题,不过 webpack 的主体思想没变,所以还是希望本文对新学 webpack 的你,有所帮助。此外用基于 webpack 4.17.1 写了一个简单的demo,如果遇到啥问题,可以参考,之后应该会逐步来完善这个demo,如果有啥通用的想实现的功能,也可以在里面提 issue。

2017年12月7日更新,添加了clean-webpack-plugin,babel-env-preset,添加本文涉及到的所有代码的示例,如果你在学习过程中出错了,可点击此处参考(有些过时了,不要再 fork 了)

写在前面的话

阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过;如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本文,你的疑惑一定一个一个都会消失;如果你以前没怎么接触过Webpack,而你又你对webpack感兴趣,那么动手跟着本文中那个贯穿始终的例子写一次,写完以后你会发现你已明明白白的走进了Webpack的大门。
// 一个常见的`webpack`配置文件
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
        entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
        output: {
            path: __dirname + "/build",
            filename: "bundle-[hash].js"
        },
        devtool: 'none',
        devServer: {
            contentBase: "./public", //本地服务器所加载的页面所在的目录
            historyApiFallback: true, //不跳转
            inline: true,
            hot: true
        },
        module: {
            rules: [{
                    test: /(\.jsx|\.js)$/,
                    use: {
                        loader: "babel-loader"
                    },
                    exclude: /node_modules/
                }, {
                    test: /\.css$/,
                    use: ExtractTextPlugin.extract({
                        fallback: "style-loader",
                        use: [{
                            loader: "css-loader",
                            options: {
                                modules: true,
                                localIdentName: '[name]__[local]--[hash:base64:5]'
                            }
                        }, {
                            loader: "postcss-loader"
                        }],
                    })
                }
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权所有,翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html" //new 一个这个插件的实例,并传入相关的参数
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin(),
        new ExtractTextPlugin("style.css")
    ]
};

什么是WebPack,为什么要使用它?

为什要使用WebPack

现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度,前端社区涌现出了很多好的实践方法

  • 模块化,让我们可以把复杂的程序细化为小的文件;
  • 类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能转换为JavaScript文件使浏览器可以识别;
  • Scss,less等CSS预处理器
  • ...

这些改进确实大大的提高了我们的开发效率,但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的,这就为WebPack类的工具的出现提供了需求。

什么是Webpack

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。

WebPack和Grunt以及Gulp相比有什么特性

其实Webpack和另外两个并没有太多的可比性,Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。

Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,工具之后可以自动替你完成这些任务。
Grunt和Gulp的工作流程

Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件。
Webpack工作方式

如果实在要把二者进行比较,Webpack的处理速度更快更直接,能打包更多不同类型的文件。

开始使用Webpack

初步了解了Webpack工作方式后,我们一步步的开始学习使用Webpack。

安装

Webpack可以使用npm安装,新建一个空的练习文件夹(此处命名为webpack sample project),在终端中转到该文件夹后执行下述指令就可以完成安装。

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack

正式使用Webpack前的准备

  1. 在上述练习文件夹中创建一个package.json文件,这是一个标准的npm说明文件,里面蕴含了丰富的信息,包括当前项目的依赖模块,自定义的脚本任务等等。在终端中使用npm init命令可以自动创建这个package.json文件
npm init

输入这个命令后,终端会问你一系列诸如项目名称,项目描述,作者等信息,不过不用担心,如果你不准备在npm中发布你的模块,这些问题的答案都不重要,回车默认即可。

  1. package.json文件已经就绪,我们在本项目中安装Webpack作为依赖包
// 安装Webpack
npm install --save-dev webpack
  1. 回到之前的空文件夹,并在里面创建两个文件夹,app文件夹和public文件夹,app文件夹用来存放原始数据和我们将写的JavaScript模块,public文件夹用来存放之后供浏览器读取的文件(包括使用webpack打包生成的js文件以及一个index.html文件)。接下来我们再创建三个文件:
  • index.html --放在public文件夹中;
  • Greeter.js-- 放在app文件夹中;
  • main.js-- 放在app文件夹中;

此时项目结构如下图所示
项目结构

我们在index.html文件中写入最基础的html代码,它在这里目的在于引入打包后的js文件(这里我们先把之后打包后的js文件命名为bundle.js,之后我们还会详细讲述)。

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <body>
    <div id='root'>
    </div>
    <script data-original="bundle.js"></script>
  </body>
</html>

我们在Greeter.js中定义一个返回包含问候信息的html元素的函数,并依据CommonJS规范导出这个函数为一个模块:

// Greeter.js
module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};

main.js文件中我们写入下述代码,用以把Greeter模块返回的节点插入页面。

//main.js 
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());

正式使用Webpack

webpack可以在终端中使用,在基本的使用方法如下:

# {extry file}出填写入口文件的路径,本文中就是上述main.js的路径,
# {destination for bundled file}处填写打包文件的存放路径
# 填写路径的时候不用添加{}
webpack {entry file} {destination for bundled file}

指定入口文件后,webpack将自动识别项目所依赖的其它文件,不过需要注意的是如果你的webpack不是全局安装的,那么当你在终端中使用此命令时,需要额外指定其在node_modules中的地址,继续上面的例子,在终端中输入如下命令

# webpack非全局安装的情况
node_modules/.bin/webpack app/main.js public/bundle.js

结果如下

使用命令行打包

可以看出webpack同时编译了main.jsGreeter,js,现在打开index.html,可以看到如下结果
htmlResult1

有没有很激动,已经成功的使用Webpack打包了一个文件了。不过在终端中进行复杂的操作,其实是不太方便且容易出错的,接下来看看Webpack的另一种更常见的使用方法。

通过配置文件来使用Webpack

Webpack拥有很多其它的比较高级的功能(比如说本文后面会介绍的loadersplugins),这些功能其实都可以通过命令行模式实现,但是正如前面提到的,这样不太方便且容易出错的,更好的办法是定义一个配置文件,这个配置文件其实也是一个简单的JavaScript模块,我们可以把所有的与打包相关的信息放在里面。

继续上面的例子来说明如何写这个配置文件,在当前练习文件夹的根目录下新建一个名为webpack.config.js的文件,我们在其中写入如下所示的简单配置代码,目前的配置主要涉及到的内容是入口文件路径和打包后文件的存放路径。

module.exports = {
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}
:“__dirname”是node.js中的一个全局变量,它指向当前执行脚本所在的目录。

有了这个配置之后,再打包文件,只需在终端里运行webpack(非全局安装需使用node_modules/.bin/webpack)命令就可以了,这条命令会自动引用webpack.config.js文件中的配置选项,示例如下:

配合配置文件进行打包

又学会了一种使用Webpack的方法,这种方法不用管那烦人的命令行参数,有没有感觉很爽。如果我们可以连webpack(非全局安装需使用node_modules/.bin/webpack)这条命令都可以不用,那种感觉会不会更爽~,继续看下文。

更快捷的执行打包任务

在命令行中输入命令需要代码类似于node_modules/.bin/webpack这样的路径其实是比较烦人的,不过值得庆幸的是npm可以引导任务执行,对npm进行配置后可以在命令行中使用简单的npm start命令来替代上面略微繁琐的命令。在package.json中对scripts对象进行相关设置即可,设置方法如下。

{
  "name": "webpack-sample-project",
  "version": "1.0.0",
  "description": "Sample webpack project",
  "scripts": {
    "start": "webpack" // 修改的是这里,JSON文件不支持注释,引用时请清除
  },
  "author": "zhang",
  "license": "ISC",
  "devDependencies": {
    "webpack": "3.10.0"
  }
}
注:package.json中的script会安装一定顺序寻找命令对应位置,本地的node_modules/.bin路径就在这个寻找清单中,所以无论是全局还是局部安装的Webpack,你都不需要写前面那指明详细的路径了。

npm的start命令是一个特殊的脚本名称,其特殊性表现在,在命令行中使用npm start就可以执行其对于的命令,如果对应的此脚本名称不是start,想要在命令行中运行时,需要这样用npm run {script name}npm run build,我们在命令行中输入npm start试试,输出结果如下:

使用npm start 打包代码

现在只需要使用npm start就可以打包文件了,有没有觉得webpack也不过如此嘛,不过不要太小瞧webpack,要充分发挥其强大的功能我们需要修改配置文件的其它选项,一项项来看。

Webpack的强大功能

生成Source Maps(使调试更容易)

开发总是离不开调试,方便的调试能极大的提高开发效率,不过有时候通过打包后的文件,你是不容易找到出错了的地方,对应的你写的代码的位置的,Source Maps就是来帮我们解决这个问题的。

通过简单的配置,webpack就可以在打包时为我们生成的source maps,这为我们提供了一种对应编译文件和源文件的方法,使得编译后的代码可读性更高,也更容易调试。

webpack的配置文件中配置source maps,需要配置devtool,它有以下四种不同的配置选项,各具优缺点,描述如下:

devtool选项配置结果
source-map在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包速度;
cheap-module-source-map在一个单独的文件中生成一个不带列映射的map,不带列映射提高了打包速度,但是也使得浏览器开发者工具只能对应到具体的行,不能对应到具体的列(符号),会对调试造成不便;
eval-source-map使用eval打包源文件模块,在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap,但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项,在生产阶段则一定不要启用这个选项;
cheap-module-eval-source-map这是在打包文件时最快的生成source map的方法,生成的Source Map 会和打包后的JavaScript文件同行显示,没有列映射,和eval-source-map选项具有相似的缺点;

正如上表所述,上述选项由上到下打包速度越来越快,不过同时也具有越来越多的负面作用,较快的打包速度的后果就是对打包后的文件的的执行有一定影响。

对小到中型的项目中,eval-source-map是一个很好的选项,再次强调你只应该开发阶段使用它,我们继续对上文新建的webpack.config.js,进行如下配置:

module.exports = {
  devtool: 'eval-source-map',
  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  }
}
cheap-module-eval-source-map方法构建速度更快,但是不利于调试,推荐在大型项目考虑时间成本时使用。

使用webpack构建本地服务器

想不想让你的浏览器监听你的代码的修改,并自动刷新显示修改后的结果,其实Webpack提供一个可选的本地开发服务器,这个本地服务器基于node.js构建,可以实现你想要的这些功能,不过它是一个单独的组件,在webpack中进行配置之前需要单独安装它作为项目依赖

npm install --save-dev webpack-dev-server

devserver作为webpack配置选项中的一项,以下是它的一些配置选项,更多配置可参考这里

devserver的配置选项功能描述
contentBase默认webpack-dev-server会为根文件夹提供本地服务器,如果想为另外一个目录下的文件提供本地服务器,应该在这里设置其所在目录(本例设置到“public"目录)
port设置默认监听端口,如果省略,默认为”8080“
inline设置为true,当源文件改变时会自动刷新页面
historyApiFallback在开发单页应用时非常有用,它依赖于HTML5 history API,如果设置为true,所有的跳转将指向index.html

把这些命令加到webpack的配置文件中,现在的配置文件webpack.config.js如下所示

module.exports = {
  devtool: 'eval-source-map',

  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  },

  devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  } 
}

package.json中的scripts对象中添加如下命令,用以开启本地服务器:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open"
  },

在终端中输入npm run server即可在本地的8080端口查看结果

开启本地服务器

Loaders

鼎鼎大名的Loaders登场了!

Loaderswebpack提供的最激动人心的功能之一了。通过使用不同的loaderwebpack有能力调用外部的脚本或工具,实现对不同格式的文件的处理,比如说分析转换scss为css,或者把下一代的JS文件(ES6,ES7)转换为现代浏览器兼容的JS文件,对React的开发而言,合适的Loaders可以把React的中用到的JSX文件转换为JS文件。

Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置,Loaders的配置包括以下几方面:

  • test:一个用以匹配loaders所处理文件的拓展名的正则表达式(必须)
  • loader:loader的名称(必须)
  • include/exclude:手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)(可选);
  • query:为loaders提供额外的设置选项(可选)

不过在配置loader之前,我们把Greeter.js里的问候消息放在一个单独的JSON文件里,并通过合适的配置使Greeter.js可以读取该JSON文件的值,各文件修改后的代码如下:

在app文件夹中创建带有问候信息的JSON文件(命名为config.json)

{
  "greetText": "Hi there and greetings from JSON!"
}

更新后的Greeter.js

var config = require('./config.json');

module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = config.greetText;
  return greet;
};
由于webpack3.*/webpack2.*已经内置可处理JSON文件,这里我们无需再添加webpack1.*需要的json-loader。在看如何具体使用loader之前我们先看看Babel是什么?

Babel

Babel其实是一个编译JavaScript的平台,它可以编译代码帮你达到以下目的:

  • 让你能使用最新的JavaScript代码(ES6,ES7...),而不用管新标准是否被当前使用的浏览器完全支持;
  • 让你能使用基于JavaScript进行了拓展的语言,比如React的JSX;

Babel的安装与配置

Babel其实是几个模块化的包,其核心功能位于称为babel-core的npm包中,webpack可以把其不同的包整合在一起使用,对于每一个你需要的功能或拓展,你都需要安装单独的包(用得最多的是解析Es6的babel-env-preset包和解析JSX的babel-preset-react包)。

我们先来一次性安装这些依赖包

// npm一次性安装多个依赖模块,模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

webpack中配置Babel的方法如下:

module.exports = {
    entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
    output: {
        path: __dirname + "/public",//打包后的文件存放的地方
        filename: "bundle.js"//打包后输出文件的文件名
    },
    devtool: 'eval-source-map',
    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "env", "react"
                        ]
                    }
                },
                exclude: /node_modules/
            }
        ]
    }
};

现在你的webpack的配置已经允许你使用ES6以及JSX的语法了。继续用上面的例子进行测试,不过这次我们会使用React,记得先安装 React 和 React-DOM

npm install --save react react-dom

接下来我们使用ES6的语法,更新Greeter.js并返回一个React组件

//Greeter,js
import React, {Component} from 'react'
import config from './config.json';

class Greeter extends Component{
  render() {
    return (
      <div>
        {config.greetText}
      </div>
    );
  }
}

export default Greeter

修改main.js如下,使用ES6的模块定义和渲染Greeter模块

// main.js
import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';

render(<Greeter />, document.getElementById('root'));

重新使用npm start打包,如果之前打开的本地服务器没有关闭,你应该可以在localhost:8080下看到与之前一样的内容,这说明reactes6被正常打包了。

localhost:8080

Babel的配置

Babel其实可以完全在 webpack.config.js 中进行配置,但是考虑到babel具有非常多的配置选项,在单一的webpack.config.js文件中进行配置往往使得这个文件显得太复杂,因此一些开发者支持把babel的配置选项放在一个单独的名为 ".babelrc" 的配置文件中。我们现在的babel的配置并不算复杂,不过之后我们会再加一些东西,因此现在我们就提取出相关部分,分两个配置文件进行配置(webpack会自动调用.babelrc里的babel配置选项),如下:

module.exports = {
    entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
    output: {
        path: __dirname + "/public",//打包后的文件存放的地方
        filename: "bundle.js"//打包后输出文件的文件名
    },
    devtool: 'eval-source-map',
    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            }
        ]
    }
};
//.babelrc
{
  "presets": ["react", "env"]
}

到目前为止,我们已经知道了,对于模块,Webpack能提供非常强大的处理功能,那那些是模块呢。

一切皆模块

Webpack有一个不可不说的优点,它把所有的文件都都当做模块处理,JavaScript代码,CSS和fonts以及图片等等通过合适的loader都可以被处理。

CSS

webpack提供两个工具处理样式表,css-loaderstyle-loader,二者处理的任务不同,css-loader使你能够使用类似@importurl(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中,二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。

继续上面的例子

//安装
npm install --save-dev style-loader css-loader
//使用
module.exports = {

   ...
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }
                ]
            }
        ]
    }
};
请注意这里对同一个文件引入多个loader的方法。

接下来,在app文件夹里创建一个名字为"main.css"的文件,对一些元素设置样式

/* main.css */
html {
  box-sizing: border-box;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6, p, ul {
  margin: 0;
  padding: 0;
}

我们这里例子中用到的webpack只有单一的入口,其它的模块需要通过 import, require, url等与入口文件建立其关联,为了让webpack能找到”main.css“文件,我们把它导入”main.js “中,如下

//main.js
import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';

import './main.css';//使用require导入css文件

render(<Greeter />, document.getElementById('root'));
通常情况下,css会和js打包到同一个文件中,并不会打包为一个单独的css文件,不过通过合适的配置webpack也可以把css打包为单独的文件的。

上面的代码说明webpack是怎么把css当做模块看待的,咱们继续看一个更加真实的css模块实践。

CSS module

在过去的一些年里,JavaScript通过一些新的语言特性,更好的工具以及更好的实践方法(比如说模块化)发展得非常迅速。模块使得开发者把复杂的代码转化为小的,干净的,依赖声明明确的单元,配合优化工具,依赖管理和加载管理可以自动完成。

不过前端的另外一部分,CSS发展就相对慢一些,大多的样式表却依旧巨大且充满了全局类名,维护和修改都非常困难。

被称为CSS modules的技术意在把JS的模块化思想带入CSS中来,通过CSS模块,所有的类名,动画名默认都只作用于当前模块。Webpack对CSS模块化提供了非常好的支持,只需要在CSS loader中进行简单配置即可,然后就可以直接把CSS的类名传递到组件的代码中,这样做有效避免了全局污染。具体的代码如下

module.exports = {

    ...

    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true, // 指定启用css modules
                            localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
                        }
                    }
                ]
            }
        ]
    }
};

我们在app文件夹下创建一个Greeter.css文件来进行一下测试

/* Greeter.css */
.root {
  background-color: #eee;
  padding: 10px;
  border: 3px solid #ccc;
}

导入.root到Greeter.js中

import React, {Component} from 'react';
import config from './config.json';
import styles from './Greeter.css';//导入

class Greeter extends Component{
  render() {
    return (
      <div className={styles.root}> //使用cssModule添加类名的方法
        {config.greetText}
      </div>
    );
  }
}

export default Greeter

放心使用把,相同的类名也不会造成不同组件之间的污染。

应用了css module后的样式

CSS modules 也是一个很大的主题,有兴趣的话可以去其官方文档了解更多。

CSS预处理器

SassLess 之类的预处理器是对原生CSS的拓展,它们允许你使用类似于variables, nesting, mixins, inheritance等不存在于CSS中的特性来写CSS,CSS预处理器可以这些特殊类型的语句转化为浏览器可识别的CSS语句,

你现在可能都已经熟悉了,在webpack里使用相关loaders进行配置就可以使用了,以下是常用的CSS 处理loaders:

  • Less Loader
  • Sass Loader
  • Stylus Loader

不过其实也存在一个CSS的处理平台-PostCSS,它可以帮助你的CSS实现更多的功能,在其官方文档可了解更多相关知识。

举例来说如何使用PostCSS,我们使用PostCSS来为CSS代码自动添加适应不同浏览器的CSS前缀。

首先安装postcss-loaderautoprefixer(自动添加前缀的插件)

npm install --save-dev postcss-loader autoprefixer

接下来,在webpack配置文件中添加postcss-loader,在根目录新建postcss.config.js,并添加如下代码之后,重新使用npm start打包时,你写的css会自动根据Can i use里的数据添加不同前缀了。

//webpack.config.js
module.exports = {
    ...
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    }
}
// postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

至此,本文已经谈论了处理JS的Babel和处理CSS的PostCSS的基本用法,它们其实也是两个单独的平台,配合webpack可以很好的发挥它们的作用。接下来介绍Webpack中另一个非常重要的功能-Plugins

插件(Plugins)

插件(Plugins)是用来拓展Webpack功能的,它们会在整个构建过程中生效,执行相关的任务。
Loaders和Plugins常常被弄混,但是他们其实是完全不同的东西,可以这么来说,loaders是在打包构建过程中用来处理源文件的(JSX,Scss,Less..),一次处理一个,插件并不直接操作单个文件,它直接对整个构建过程其作用。

Webpack有很多内置插件,同时也有很多第三方插件,可以让我们完成更加丰富的功能。

使用插件的方法

要使用某个插件,我们需要通过npm安装它,然后要做的就是在webpack配置中的plugins关键字部分添加该插件的一个实例(plugins是一个数组)继续上面的例子,我们添加了一个给打包后代码添加版权声明的插件

const webpack = require('webpack');

module.exports = {
...
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权所有,翻版必究')
    ],
};

通过这个插件,打包后的JS文件显示如下

版权所有,翻版必究

这就是webpack插件的基础用法了,下面给大家推荐几个常用的插件

HtmlWebpackPlugin

这个插件的作用是依据一个简单的index.html模板,生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用(比如添加了hash值)。

安装

npm install --save-dev html-webpack-plugin

这个插件自动完成了我们之前手动做的一些事情,在正式使用之前需要对一直以来的项目结构做一些更改:

  1. 移除public文件夹,利用此插件,index.html文件会自动生成,此外CSS已经通过前面的操作打包到JS中了。
  2. 在app目录下,创建一个index.tmpl.html文件模板,这个模板包含title等必须元素,在编译过程中,插件会依据此模板生成最终的html页面,会自动添加所依赖的 css, js,favicon等文件,index.tmpl.html中的模板源代码如下:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <body>
    <div id='root'>
    </div>
  </body>
</html>

3.更新webpack的配置文件,方法同上,新建一个build文件夹用来存放最终的输出文件

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
    output: {
        path: __dirname + "/build",
        filename: "bundle.js"
    },
    devtool: 'eval-source-map',
    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权所有,翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例,并传入相关的参数
        })
    ],
};

再次执行npm start你会发现,build文件夹下面生成了bundle.jsindex.html

build文件夹

Hot Module Replacement

Hot Module Replacement(HMR)也是webpack里很有用的一个插件,它允许你在修改组件代码后,自动刷新实时预览修改后的效果。

在webpack中实现HMR也很简单,只需要做两项配置

  1. 在webpack配置文件中添加HMR插件;
  2. 在Webpack Dev Server中添加“hot”参数;

不过配置完这些后,JS模块其实还是不能自动热加载的,还需要在你的JS模块中执行一个Webpack提供的API才能实现热加载,虽然这个API不难使用,但是如果是React模块,使用我们已经熟悉的Babel可以更方便的实现功能热加载。

整理下我们的思路,具体实现方法如下

  • Babelwebpack是独立的工具
  • 二者可以一起工作
  • 二者都可以通过插件拓展功能
  • HMR是一个webpack插件,它让你能浏览器中实时观察模块修改后的效果,但是如果你想让它工作,需要对模块进行额外的配额;
  • Babel有一个叫做react-transform-hrm的插件,可以在不对React模块进行额外的配置的前提下让HMR正常工作;

还是继续上例来实际看看如何配置

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
    output: {
        path: __dirname + "/build",
        filename: "bundle.js"
    },
    devtool: 'eval-source-map',
    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true,
        hot: true
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权所有,翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例,并传入相关的参数
        }),
        new webpack.HotModuleReplacementPlugin()//热加载插件
    ],
};
   

安装react-transform-hmr

npm install --save-dev babel-plugin-react-transform react-transform-hmr

配置Babel

// .babelrc
{
  "presets": ["react", "env"],
  "env": {
    "development": {
    "plugins": [["react-transform", {
       "transforms": [{
         "transform": "react-transform-hmr",
         
         "imports": ["react"],
         
         "locals": ["module"]
       }]
     }]]
    }
  }
}

现在当你使用React时,可以热加载模块了,每次保存就能在浏览器上看到更新内容。

产品阶段的构建

目前为止,我们已经使用webpack构建了一个完整的开发环境。但是在产品阶段,可能还需要对打包的文件进行额外的处理,比如说优化,压缩,缓存以及分离CSS和JS。

对于复杂的项目来说,需要复杂的配置,这时候分解配置文件为多个小的文件可以使得事情井井有条,以上面的例子来说,我们创建一个webpack.production.config.js的文件,在里面加上基本的配置,它和原始的webpack.config.js很像,如下

// webpack.production.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
    output: {
        path: __dirname + "/build",
        filename: "bundle.js"
    },
    devtool: 'null', //注意修改了这里,这能大大压缩我们的打包代码
    devServer: {
        contentBase: "./public", //本地服务器所加载的页面所在的目录
        historyApiFallback: true, //不跳转
        inline: true,
        hot: true
    },
    module: {
        rules: [{
            test: /(\.jsx|\.js)$/,
            use: {
                loader: "babel-loader"
            },
            exclude: /node_modules/
        }, {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: [{
                    loader: "css-loader",
                    options: {
                        modules: true
                    }
                }, {
                    loader: "postcss-loader"
                }],
            })
        }]
    },
    plugins: [
        new webpack.BannerPlugin('版权所有,翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html" //new 一个这个插件的实例,并传入相关的参数
        }),
        new webpack.HotModuleReplacementPlugin() //热加载插件
    ],
};
//package.json
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open",
    "build": "NODE_ENV=production webpack --config ./webpack.production.config.js --progress"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
...
  },
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  }
}
注意:如果是window电脑,build需要配置为"build": "set NODE_ENV=production && webpack --config ./webpack.production.config.js --progress".谢谢评论区简友提醒。

优化插件

webpack提供了一些在发布阶段非常有用的优化插件,它们大多来自于webpack社区,可以通过npm安装,通过以下插件可以完成产品发布阶段所需的功能

  • OccurenceOrderPlugin :为组件分配ID,通过这个插件webpack可以分析和优先考虑使用最多的模块,并为它们分配最小的ID
  • UglifyJsPlugin:压缩JS代码;
  • ExtractTextPlugin:分离CSS和JS文件

我们继续用例子来看看如何添加它们,OccurenceOrder 和 UglifyJS plugins 都是内置插件,你需要做的只是安装其它非内置插件

npm install --save-dev extract-text-webpack-plugin

在配置文件的plugins后引用它们

// webpack.production.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
    output: {
        path: __dirname + "/build",
        filename: "bundle.js"
    },
    devtool: 'none',
    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true,
        hot: true
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权所有,翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html"
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin(),
        new ExtractTextPlugin("style.css")
    ],
};

此时执行npm run build可以看见代码是被压缩后的

压缩后的代码

缓存

缓存无处不在,使用缓存的最好方法是保证你的文件名和文件内容是匹配的(内容改变,名称相应改变)

webpack可以把一个哈希值添加到打包的文件名中,使用方法如下,添加特殊的字符串混合体([name], [id] and [hash])到输出文件名前

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
..
    output: {
        path: __dirname + "/build",
        filename: "bundle-[hash].js"
    },
   ...
};

现在用户会有合理的缓存了。

带hash值的js名

去除build文件中的残余文件

添加了hash之后,会导致改变文件内容后重新打包时,文件名不同而内容越来越多,因此这里介绍另外一个很好用的插件clean-webpack-plugin

安装
cnpm install clean-webpack-plugin --save-dev

使用

引入clean-webpack-plugin插件后在配置文件的plugins中做相应配置即可:

const CleanWebpackPlugin = require("clean-webpack-plugin");
  plugins: [
    ...// 这里是之前配置的其它各种插件
    new CleanWebpackPlugin('build/*.*', {
      root: __dirname,
      verbose: true,
      dry: false
  })
  ]

关于clean-webpack-plugin的详细使用可参考这里

总结

其实这是一年前的文章了,趁周末重新运行和修改了一下,现在所有的代码都可以正常运行,所用webpack基于最新的webpack3.5.3。希望依旧能对你有帮助。

这是一篇好长的文章,谢谢你的耐心,能仔细看到了这里,大概半个月前我第一次自己一步步配置项目所需的Webpack后就一直想写一篇笔记做总结,几次动笔都不能让自己满意,总觉得写不清楚。其实关于Webpack本文讲述得仍不完全,不过相信你看完后已经进入Webpack的大门,能够更好的探索其它的关于Webpack的知识了。

欢迎大家在文后发表自己的观点讨论。

更新说明

2017-12-11更新,修改css module部分代码及示例图片,css module真的非常好用,希望大家都能用上。

2017年9月18日更新,添加了一个使用webpack配置多页应用的demo,可以点击此处查看

2017年8月13日更新,本文依据webpack3.5.3将文章涉及代码完全重写,所有代码都在Mac上正常运行过。希望依旧对你学习webpack有帮助。

2017年8月16号更新:
最近在Gitchat上将发起了一场关于webpack的分享,目的在于一起花最短的时间理解和学会webpack,感兴趣的童鞋可以微信扫描注册哈。
webpack从入门到工程实践

查看原文

赞 1661 收藏 2479 评论 295

zhuanglog 发布了文章 · 2018-08-16

Ajax全面解析(来自JavaScript高级程序设计)

Ajax的全称就是Asynchronous JavaScript + XML,它的本意是为了可以在不刷新页面的情况下异步更新数据。

而实现这一功能的核心就是XMLHttpRequest(XHR),它能够获取新数据,并通过DOM操作将新数据插入到页面当中。

虽然它的名称中包含有XML,但其实Ajax通信与数据格式没有关系,Ajax可以返回HTML、XML、json、jsonp、text、script等数据类型。

Ajax的一个基本流程

在IE7版本之后,以及Firefox、Opera、Chrome、Safari浏览器中,我们可以直接使用XMLHttpRequest构造函数来创建最新的XML对象。

var xhr = new XMLHttpRequest();

在使用XML对象的第一步是使用open方法,open接受3个参数:

要发送请求的类型("get"、"post"等)、请求的地址以及是否异步发送请求的布尔值。

xhr.open("get","example.php",false)

其中的第二个参数必须是在同一个域中使用相同端口和协议的地址,否则会引发安全错误。

在这之后调用xhr.send()方法,如果是POST请求的话,send里就需要放入要传的信息

在收到服务器的响应之后,JavaScript会自动填充XHR对象的属性,常用到的属性有以下几个:

  • responseText:响应的文本
  • status:响应的HTTP状态
  • statusText:HTTP状态的说明

首先应该做的是检查status属性,如果是200的话,那么就说明本次响应已经成功了,或者是304的话,说明本地浏览器有缓存,可以直接调用。

同时我们一般是使用异步发送请求,所以我们还得检测XHR对象的readyState属性,该属性表示请求/响应过程的当前阶段。

  • 0:尚未调用open()方法
  • 1:启动open()方法,但还没启动send()
  • 2:调用send(),但还未收到响应
  • 3:已经接收到部分信息
  • 4:已经收到全部信息

每一个阶段的改变都会触发一次onreadystatechange事件。

所以一个基本的Ajax流程的例子如下所示:

var xhr = new XMLHttpRequest();
xhr.open("get","example.php",false);
xhr.send();
xhr.onreadystatechange = function (){
   if (xhr.readyState == 4){
     if ((xhr.status >= 200 && xhr.status < 300)) || xhr.status == 304){
         alert(xhr.responseText)
     }else {
         alert(xhr.status)
     }
   }
}
 

XMLHttpRequest2级

XHR1级已经把Ajax的实现细节都给描述出来了,在此基础上,XHR2级对整个XHR进行了升级进化。

主要有以下几个方面:

  • FormData:

用于序列化表单以及创建与表单格式相同的数据,使用new创建并且直接通过send函数发送。

创建时可以直接传入键值对

var data = new FormData();
data.append("name", "Tuncan")

或者预先传入表单元素

var data = new FromData(document.forms[0])
  • 超时设定

XHR对象新增了一个timeout属性,表示请求在多少时间之后便会终止,在给定时间到达之后,还没有接到响应便会触发timeout事件并调用omtimeout事件处理程序。

xhr.timeout = 1000;
xhr.ontimeout = function (){
    alert("Request did not return in a second")
}
  • overrideMimeType

用于重写XHR的MIME类型,该类型决定XHR对象如何处理返回的响应,例如如果服务器返回的MIME类型是text/plain,但里面的文档类型是XML,根据MIME类型XHR的responseXML是null,所以需要overrideMimeType在send调用前重写MIME类型为XML才能处理。

var xhr = new XMLHttpRequest();
xhr.open("get","text.php",true);
xhr.overrideMimeType("text/xml");
xhr.send(null);

XMLHttpRequest的进度事件

在刚刚使用XHR实现Ajax的流程当中,可以发现整个响应会分为不同的阶段,在W3C里为其定义为了6个进度事件:

loadstart:接收到响应数据的第一个字节时触发
progress:接受响应期间不断地触发
error:请求错误时触发
abort:调用abort()方法终止连接时触发
load:接收到完整响应时触发
loadend:通信完成或者触发error、abort或load事件时触发

每一个请求都是以loadstart开始,经历一个或多个progress,然后接到error、abort或是load中的一个,最后以loadened结束。

其中的load事件和progress事件有一些细节需要注意:

  • load事件

Firefox曾致力于简化异步交互模型,所以引入load事件来代替readystatechange事件,响应接受完毕之后才会触发load事件,因此也没有必要去检查readyState属性了。

xhr.onload = function(){
    if ((xhr.status >= 200 && xhr.status < 300)) || xhr.status == 304){
       alert(xhr.responseText)
    }else {
       alert(xhr.status)
    }
}
  • progress事件

progress事件用以表示当前接收数据的进度,它会被周期性地触发,每次触发都会返回一个event对象,event对象的target属性是XHR对象

同时它还含有三个属性:

lengthComputable:进度信息是否可用
position:表示已接收的字节数
totalSize:表示响应头部的预期字节数

xhr.onprogress = function (event){
    var status = document.getElementById("status")
    if (event.lengthComputable){
        status.innerHTML = "Received" + event.positon + "of" + event.totalSize
    }
}

需要注意的是要在xhr.open()之前定义好该事件

跨域资源共享——突破XHR的限制

因为在默认情况下,页面通过XHR只能访问跟它处在同一个域中的资源,这是来源于跨域安全策略。

但是在实际额开发过车个当中,我们一定会遇上需要进行跨域请求的地方,那么这时候就需要用上CORS了

CORS(Cross-Orign Resource Sharing,跨域资源共享),其基本思想就是使用自定义的Http头部实现浏览器与服务器之间的沟通,从而确定请求是否成功。

例如,对于一个请求,在头部里加入Origin

Origin: http://www.nczonline.net

如果服务器认为该请求可以接受,就在Access-Control-Allow-Origin头部中回发相同的源信息

Access-Control-Allow-Origin: http://www.nczonline.net

这样就完成了一次CORS。

跨域资源共享在非IE浏览器中,如Firefox3.5+,Safari 4+,Chrome,iOS版Safari和Android的WebKit中,都通过XMLHttpRequest实现了对CORS的原生支持。处于安全考虑,加上了如下的限制:

  • 不能使用自定义头部
  • 不能发送和接受Cookie
  • getAllResponseHeaders()总会返回空字符串

在IE浏览器当中,主要是通过引入XDR对象,创建时通过new XDomainRequest穿件即可

该对象与XHR最重要的不同之处就在于不能使用Cookie,只支持GET和POST请求,以及只支持异步请求

如果开发一定要使用Cookie的话,可以将withCredentials属性设置为true,如果服务器接受该请求,就会使用Access-Control-Allow-Credentials: true来响应

最后如果想要实现跨浏览器的CORS时,通过检查XHR中是否带有withCredentials属性,再结合检查XDomainRequest是否存在,就可以兼顾所有浏览器了。

function createCORSRequest (method,url){
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr){
       xhr.open(method,url,true);
    }else if ( typeof XDomainRequest != "undefined"){
       xhr = new XDomainRequest();
       xhr.open(method,url) 
    }else {
       xhr = null
    }
    
    return xhr    
}

其它的跨域方式

虽然说现在CORS已经无处不在,但在其发明出来之前,要想实现跨域请求还可以通过DOM中一些自带的功能,毕竟这样可以省去修改服务器代码的时间。

  • 图像Ping

通过<img>标签可以直接加载其它网站上的图片,而不用担心跨不跨域的问题,它自己带有onload和onerror事件,可以用于处理响应成功和失败事件。

var img = new Image()
img.src = "https://pic4.zhimg.com/v2-de96b4afbe2140ace8c268bb60112283_b.jpg"

但是这种方法有两个缺点,一是只能使用GET请求,二是无法访问服务器的文本

  • JSONP

JSONP是JSON with padding的简写,它是通过动态调用<script>标签来使用的。

script.src = url

一个JSONP分为两个部分,一是回调函数,一般回调函数的名字是要写在请求地址中的,二是从服务器传回来的JSON数据。

callback({ "name" : "Nicholas" })

而一个JSONP请求长这样:

http://freegeoip.net/json/?callback=handleReponse

一个正常的JSONP请求长这样:

function handleResponse(response){
    alert(response.city)
}

var script = document.createElement("script")
script.src = "http://freegeoip.net/json/?callback=handleReponse"
  • Comet

Comet与Ajax是彼此相反的,Comet是从服务器向页面推送数据的技术。

有两种方式可以实现,长轮询和HTTP流

长轮询的意思页面发送一个请求,与服务器建立好链接并保持打开的状态,当服务器有数据可发送时才发送

HTTP流的意思是只发送一次请求,建立好连接之后服务器会周期性地发送消息。在页面的实现上可以通过检测readyState,因为周期性发送会使readyState周期性地变为3,每次变为3的时候将新数据接到已接收的数据上。

  • SSE

管理Comet的时候很容易出错,同时为了简化这一技术,Comet就被赋予了两个接口,SSE和Web Socket。

SSE指的是服务器发送事件,用于建立与服务器的单向连接,使用时需要先创建一个EventScore对象,它拥有3个事件。

open:建立连接时触发
message:从服务器接收到新事件时触发
error:无法建立连接时触发

在message事件中通过event.data可以获取到响应数据

source.onmessage = function (event){
    return event.data;
}

对于Comet的事件流,SSE通过将Http的响应MIME类型设置为text/event-stream,处理如下:

data: bar
data: foo

该响应事件收到的消息值为barnfoo。另外可以通过为事件设置id来进行标记

data:bar
id:1

在连接中断的时候,EventSource对象会把Last-Event-ID放入到Http的头部里,并发往服务器,这样服务器就知道是从哪个事件中断的了。

  • Web Sockets

Web Sockets的目标在于为一个单独的持久连接上提供全双工、双向的通信服务。创建Web Sockets之后,会先发送一个Http请求已建立连接,然后再将Http连接升级成Web Socket协议。

也就是说Web Sockets使用了自定义的协议,由http://变成了ws://,https://变成了wss://

这个协议的好处就在于可以支持客户端与服务器之间比较少量的通信,而不用承担Http协议那种字节级别的开销。

使用Web Socket的时候,首先先建立一个WebSocket对象并传入要连接的URL

var socket = new WebSocket(url)

建立对象之后,浏览器马上就会尝试创建新的连接,WebSocket拥有与XHR类似的readyState属性,不过不太一样,而且它没有readystateChange事件,但是其是用其它事件来对应不同状态。

分别是:
open:在成功连接时触发
error:在连接发生错误时触发
close:在连接关闭时触发

而其中只有close事件是有额外的信息,即:wasClean、code和reason,其中wasClean是一个布尔值,表示连接是否成功关闭;code表示服务器返回的状态码;reason表示服务器发回的信息。

socket.onclose = function (event){
    alert("Was Clean?"+ event.wasClean "Code = " + event.code + "Reason = " + event.reason
}

因为其是双向通信,所以发送与接收数据的方法如下:

//发送
socket.send("Hello World")

//接收
socket.onmessage = function (event){
  var data = event.data
}
查看原文

赞 1 收藏 1 评论 0

zhuanglog 赞了文章 · 2018-08-14

4 张动图解释为什么(什么时候)使用 Redux

dev-reading/fe 是一个阅读、导读、速读的 repo,不要依赖于 dev-reading/fe 学习知识。本 repo 只是一个快速了解文章内容的工具,并不提供全文解读和翻译。你可以通过本平台快速了解文章里面的内容,找到感兴趣的文章,然后去阅读全文。

本文讨论地址:https://github.com/dev-readin...

阅读时间大概 1 分钟


过早优化是万恶之源 —— Donald Knuth

本文描述了什么时候开始使用 Redux。作者描述了在构建一个真实 React APP 时,从没有使用 Redux 到使用 Redux 的过程以及收获。

首先,并不是所有的 React 应用程序都需要使用 Redux。事实上,大多数非常简单的 React 应用程序根本不能从 Redux 中受益。

第 1 天

使用 React 本地组件状态

React 使用单向数据流,这意味着父组件把自身的状态作为属性传递给子组件。

第 5 天

随着添加更多的功能,非父子组件之间需要共享一些状态。

我们通过提升状态来解决这个问题。

这意味着我们将状态(和改变这个状态的函数)提升到最接近的祖先(Container Component)。我们将这些函数绑定到容器组件,并将它们作为属性向下传递。这意味着子组件可以触发其父组件中的状态更改,这将更新树中的所有其他组件

第 20 天

随着添加了更多的功能和组件,我们的应用程序状态流程开始看起来像这样...

第 n 天

如果您开始遇到上述某些问题,则可能意味着您应该使用 Redux 了。

Redux

当我们使用 Redux 后,状态变成了这样:

如果您的应用符合以下某些条件,那么我认为应该立即使用 Redux。

  • UI 可以根据应用程序状态显着变化
  • 并不总是以一种线性的,单向的方式流动
  • 许多不相关的组件以相同的方式更新状态
  • 状态树并不简单
  • 状态以许多不同的方式更新
  • 您需要能够撤消以前的用户操作

阅读原文:When do I know I’m ready for Redux?

讨论地址:4 张动图解释为什么(什么时候)使用 Redux #11

如果你想参与讨论,请点击这里

查看原文

赞 35 收藏 69 评论 10

zhuanglog 赞了文章 · 2018-08-13

个人总结(css3新特性)

1.前言

css3这个相信大家不陌生了,是个非常有趣,神奇的东西!有了css3,js都可以少写很多!我之前也写过关于css3的文章,也封装过css3的一些小动画。个人觉得css3不难,但是很难用得好,用得顺手,最近我也在过一遍css3的一些新特性(不是全部,是我在工作上常用的,或者觉得有用的),以及一些实例,就写了这一篇总结!希望,这篇文章能帮到大家认识css3。写这篇文章主要是让大家能了解css3的一些新特性,以及基础的用法,感觉css3的魅力!如果想要用好css3,这个得靠大家继续努力学习,寻找一些讲得更深入的文章或者书籍了!如果大家有什么其他特性推荐的,欢迎补充!大家一起学习,进步!

看这篇文章,代码可以不用看得过于仔细!这里主要是想让大家了解css3的新特性!代码也是很基础的用法。我给出代码主要是让大家在浏览器运行一下,让大家参考和调试。不要只看代码,只看代码的话,不会知道哪个代码有什么作用的,建议边看效果边看代码。

2.过渡

过渡,是我在项目里面用得最多的一个特性了!也相信是很多人用得最多的一个例子!我平常使用就是想让一些交互效果(主要是hover动画),变得生动一些,不会显得那么生硬!好了,下面进入正文!

引用菜鸟教程的说法:CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点,必须规定两项内容:指定要添加效果的CSS属性指定效果的持续时间。

2-1语法

transition: CSS属性,花费时间,效果曲线(默认ease),延迟时间(默认0)

栗子1

/*宽度从原始值到制定值的一个过渡,运动曲线ease,运动时间0.5秒,0.2秒后执行过渡*/
transition:width,.5s,ease,.2s

栗子2

/*所有属性从原始值到制定值的一个过渡,运动曲线ease,运动时间0.5秒*/
transition:all,.5s

上面栗子是简写模式,也可以分开写各个属性(这个在下面就不再重复了)

transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

2-2实例-hover效果

clipboard.png

上面两个按钮,第一个使用了过渡,第二个没有使用过渡,大家可以看到当中的区别,用了过渡之后是不是没有那么生硬,有一个变化的过程,显得比较生动。
当然这只是一个最简单的过渡栗子,两个按钮的样式代码,唯一的区别就是,第一个按钮加了过渡代码transition: all .5s;

2-3实例-下拉菜单

clipboard.png

上面两个菜单,第一个没有使用过渡,第二个使用过渡,大家明显看到区别,使用了过渡看起来也是比较舒服!代码区别就是有过渡的ul的上级元素(祖先元素)有一个类名(ul-transition)。利用这个类名,设置ul的过渡.ul-transition ul{transform-origin: 0 0;transition: all .5s;}

可能大家不知道我在说什么!我贴下代码吧

html

<div class="demo-hover demo-ul t_c">
    <ul class="fllil">
        <li>
            <a href="javascript:;">html</a>
            <ul>
                <li><a href="#">div</a></li>
                <li><a href="#">h1</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:;">js</a>
            <ul>
                <li><a href="#">string</a></li>
                <li><a href="#">array</a></li>
                <li><a href="#">object</a></li>
                <li><a href="#">number</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:;">css3</a>
            <ul>
                <li><a href="#">transition</a></li>
                <li><a href="#">animation</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:;">框架</a>
            <ul>
                <li><a href="#">vue</a></li>
                <li><a href="#">react</a></li>
            </ul>
        </li>
    </ul>
    <div class="clear"></div>
</div>
<div class="demo-hover demo-ul ul-transition t_c">
    <ul class="fllil">
        <li>
            <a href="javascript:;">html</a>
            <ul>
                <li><a href="#">div</a></li>
                <li><a href="#">h1</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:;">js</a>
            <ul>
                <li><a href="#">string</a></li>
                <li><a href="#">array</a></li>
                <li><a href="#">object</a></li>
                <li><a href="#">number</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:;">css3</a>
            <ul>
                <li><a href="#">transition</a></li>
                <li><a href="#">animation</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:;">框架</a>
            <ul>
                <li><a href="#">vue</a></li>
                <li><a href="#">react</a></li>
            </ul>
        </li>
    </ul>
    <div class="clear"></div>
</div>

css

.demo-ul{margin-bottom: 300px;}
    .demo-ul li{
        padding: 0 10px;
        width: 100px;
        background: #f90;
        position: relative;
    }
    .demo-ul li a{
        display: block;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }
    .demo-ul li ul{
        position: absolute;
        width: 100%;
        top: 40px;
        left: 0;
        transform: scaleY(0);
        overflow: hidden;
    }
    .ul-transition ul{
        transform-origin: 0 0;
        transition: all .5s;
    }
    .demo-ul li:hover ul{
        transform: scaleY(1);
    }
    .demo-ul li ul li{
        float: none;
        background: #0099ff;

}

上面两个可以说是过渡很基础的用法,过渡用法灵活,功能也强大,结合js,可以很轻松实现各种效果(焦点图,手风琴)等,以及很多意想不到的效果。这个靠大家要去挖掘!

3.动画

动画这个平常用的也很多,主要是做一个预设的动画。和一些页面交互的动画效果,结果和过渡应该一样,让页面不会那么生硬!

3-1.语法

animation:动画名称,一个周期花费时间,运动曲线(默认ease),动画延迟(默认0),播放次数(默认1),是否反向播放动画(默认normal),是否暂停动画(默认running)

栗子1

/*执行一次logo2-line动画,运动时间2秒,运动曲线为 linear*/
animation: logo2-line 2s linear;

栗子2

/*2秒后开始执行一次logo2-line动画,运动时间2秒,运动曲线为 linear*/
animation: logo2-line 2s linear 2s;

栗子3

/*无限执行logo2-line动画,每次运动时间2秒,运动曲线为 linear,并且执行反向动画*/
animation: logo2-line 2s linear alternate infinite;

还有一个重要属性

animation-fill-mode : none | forwards | backwards | both;
/*none:不改变默认行为。    
forwards :当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。    
backwards:在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。 
both:向前和向后填充模式都被应用。  */      

3-2.logo展示动画

clipboard.png

这个是我用公司logo写的动画,没那么精细

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="reset.css">
</head>
<style>
.logo-box{
    width: 600px;
    margin: 100px auto;
    font-size: 0;
    position: relative;
}
.logo-box div{
    display: inline-block;
}
.logo-box .logo-text{
    margin-left: 10px;
}
.logo-box .logo1{
    animation: logo1 1s ease-in 2s;
    animation-fill-mode:backwards;
}
.logo-box .logo-text{
    animation: logoText 1s ease-in 3s;
    animation-fill-mode:backwards;
}
.logo-box .logo2{
    position: absolute;
    top: 20px;
    left: 20px;
    animation: logo2-middle 2s ease-in;
}
.logo-box .logo2 img{
    animation: logo2-line 2s linear;
}
@keyframes logo1 {
    0%{
        transform:rotate(180deg);
        opacity: 0;
    }
    100%{
        transform:rotate(0deg);
        opacity: 1;
    }
}
@keyframes logoText {
    0%{
        transform:translateX(30px);
        opacity: 0;
    }
    100%{
        transform:translateX(0);
        opacity: 1;
    }
}
@keyframes logo2-line {
    0% { transform: translateX(200px)}
    25% { transform: translateX(150px)}
    50% { transform: translateX(100px)}
    75% { transform: translateX(50px)}
    100% { transform: translateX(0); }
}

@keyframes logo2-middle {
    0% { transform: translateY(0);     }
    25% { transform: translateY(-100px);     }
    50% { transform: translateY(0);     }
    75% { transform: translateY(-50px);     }
    100% { transform: translateY(0); }
}
</style>
<body>
<div class="logo-box">
<div class="logo1"><img data-original="logo1.jpg"/></div>
<div class="logo2"><img data-original="logo2.jpg"/></div>
<div class="logo-text"><img data-original="logo3.jpg"/></div>
</div>

<div class="wraper"><div class="item"></div></div>

</body>
</html>

下面让大家看一个专业级别的

clipboard.png

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body {
        font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
        overflow: hidden;
        background: #fff;
    }

    .center {
        margin: 80px auto;
    }

    .so {
        display: block;
        width: 500px;
        height: 156px;
        background: #ffffff;
    }
    .so .inner {
        width: 500px;
        height: 156px;
        position: absolute;
    }
    .so .inner * {
        position: absolute;
        animation-iteration-count: infinite;
        animation-duration: 3.5s;
    }
    .so .inner .name {
        position: absolute;
        font-size: 54px;
        left: 130px;
        top: 95px;
    }
    .so .inner .name .b {
        font-weight: bold;
    }
    .so .inner .stack-box {
        top: 100px;
        width: 115px;
        height: 56px;
    }
    .so .inner .box {
        width: 115px;
        height: 56px;
        left: 0px;
    }
    .so .inner .box div {
        background: #BCBBBB;
    }
    .so .inner .box .bottom {
        bottom: 0px;
        left: 0px;
        width: 115px;
        height: 12px;
    }
    .so .inner .box .left {
        bottom: 11px;
        left: 0px;
        width: 12px;
        height: 34px;
    }
    .so .inner .box .right {
        bottom: 11px;
        left: 103px;
        width: 12px;
        height: 34px;
    }
    .so .inner .box .top {
        top: 0px;
        left: 0px;
        width: 0;
        height: 12px;
    }
    .so .inner .stack {
        left: 22px;
        top: 22px;
    }
    .so .inner .stack .inner-item {
        background: #F48024;
        width: 71px;
        height: 12px;
    }
    .so .inner .stack .item {
        transition: transform 0.3s;
        width: 291px;
    }
    .so .inner .stack div:nth-child(1) {
        transform: rotate(0deg);
    }
    .so .inner .stack div:nth-child(2) {
        transform: rotate(12deg);
    }
    .so .inner .stack div:nth-child(3) {
        transform: rotate(24deg);
    }
    .so .inner .stack div:nth-child(4) {
        transform: rotate(36deg);
    }
    .so .inner .stack div:nth-child(5) {
        transform: rotate(48deg);
    }
    .so .inner .box {
        animation-name: box;
    }
    .so .inner .box .top {
        animation-name: box-top;
    }
    .so .inner .box .left {
        animation-name: box-left;
    }
    .so .inner .box .right {
        animation-name: box-right;
    }
    .so .inner .box .bottom {
        animation-name: box-bottom;
    }
    .so .inner .stack-box {
        animation-name: stack-box;
    }
    .so .inner .stack {
        animation-name: stack;
    }
    .so .inner .stack .inner-item {
        animation-name: stack-items;
    }
    .so .inner .stack .item:nth-child(1) {
        animation-name: stack-item-1;
    }
    .so .inner .stack .item:nth-child(2) {
        animation-name: stack-item-2;
    }
    .so .inner .stack .item:nth-child(3) {
        animation-name: stack-item-3;
    }
    .so .inner .stack .item:nth-child(4) {
        animation-name: stack-item-4;
    }
    .so .inner .stack .item:nth-child(5) {
        animation-name: stack-item-5;
    }
    @keyframes stack {
        0% {
            left: 22px;
        }
        15% {
            left: 22px;
        }
        30% {
            left: 52px;
        }
        50% {
            left: 52px;
        }
        80% {
            left: 22px;
        }
    }
    @keyframes stack-item-1 {
        0% {
            transform: rotate(12deg * 0);
        }
        10% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(0deg);
        }
        54% {
            transform: rotate(0deg);
        }
        92% {
            transform: rotate(12deg * 0);
        }
    }
    @keyframes stack-item-2 {
        0% {
            transform: rotate(12deg * 1);
        }
        10% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(0deg);
        }
        54% {
            transform: rotate(0deg);
        }
        92% {
            transform: rotate(12deg * 1);
        }
    }
    @keyframes stack-item-3 {
        0% {
            transform: rotate(12deg * 2);
        }
        10% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(0deg);
        }
        54% {
            transform: rotate(0deg);
        }
        92% {
            transform: rotate(12deg * 2);
        }
    }
    @keyframes stack-item-4 {
        0% {
            transform: rotate(12deg * 3);
        }
        10% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(0deg);
        }
        54% {
            transform: rotate(0deg);
        }
        92% {
            transform: rotate(12deg * 3);
        }
    }
    @keyframes stack-item-5 {
        0% {
            transform: rotate(12deg * 4);
        }
        10% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(0deg);
        }
        54% {
            transform: rotate(0deg);
        }
        92% {
            transform: rotate(12deg * 4);
        }
    }
    @keyframes stack-items {
        0% {
            width: 71px;
        }
        15% {
            width: 71px;
        }
        30% {
            width: 12px;
        }
        50% {
            width: 12px;
        }
        80% {
            width: 71px;
        }
    }
    @keyframes box {
        0% {
            left: 0;
        }
        15% {
            left: 0;
        }
        30% {
            left: 30px;
        }
        50% {
            left: 30px;
        }
        80% {
            left: 0;
        }
    }
    @keyframes box-top {
        0% {
            width: 0;
        }
        6% {
            width: 0;
        }
        15% {
            width: 115px;
        }
        30% {
            width: 56px;
        }
        50% {
            width: 56px;
        }
        59% {
            width: 0;
        }
    }
    @keyframes box-bottom {
        0% {
            width: 115px;
        }
        15% {
            width: 115px;
        }
        30% {
            width: 56px;
        }
        50% {
            width: 56px;
        }
        80% {
            width: 115px;
        }
    }
    @keyframes box-right {
        15% {
            left: 103px;
        }
        30% {
            left: 44px;
        }
        50% {
            left: 44px;
        }
        80% {
            left: 103px;
        }
    }
    @keyframes stack-box {
        0% {
            transform: rotate(0deg);
        }
        30% {
            transform: rotate(0deg);
        }
        40% {
            transform: rotate(135deg);
        }
        50% {
            transform: rotate(135deg);
        }
        83% {
            transform: rotate(360deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
</style>
<body>
<div class="so center">
    <div class="inner">
        <div class="stack-box">
            <div class="stack">
                <div class="item">
                    <div class="inner-item"></div>
                </div>
                <div class="item">
                    <div class="inner-item"></div>
                </div>
                <div class="item">
                    <div class="inner-item"></div>
                </div>
                <div class="item">
                    <div class="inner-item"></div>
                </div>
                <div class="item">
                    <div class="inner-item"></div>
                </div>
            </div>
            <div class="box">
                <div class="bottom"></div>
                <div class="left"></div>
                <div class="right"></div>
                <div class="top"></div>
            </div>
        </div>
        <div class="name">
            stack<span class="b">overflow</span>
        </div>
    </div>
</div>
</body>
</html>

3-3.loading效果

clipboard.png

这个代码实在太多了,大家直接上网址看吧。css3-loading

3-4.音乐震动条

clipboard.png

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>纯CSS3模拟跳动的音符效果</title>
  <style>
    *{margin:0;padding:0;list-style: none;}
    body{background-color: #efefef;}
    .demo-music {
      position: absolute;
      width: 100%;
      height: 200px;
      top: 120px;
      zoom: 1.5;
    }

    .demo-music .music {
      width: 80px;
      height: 50px;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-40px, -25px);
      transform: translate(-40px, -25px);
      position: absolute;
    }

    .demo-music #waves {
      width: 80px;
      height: 50px;
      position: absolute;
      top: 12px;
      left: 12px;
    }

    .demo-music #waves li {
      position: relative;
      float: left;
      height: 100%;
      width: 12%;
      overflow: hidden;
      margin-right: 1px;
    }

    .demo-music #waves li span {
      position: absolute;
      bottom: 0;
      display: block;
      height: 100%;
      width: 100px;
      background: #09f;
    }

    .demo-music #waves .li1 span {
      animation: waves 0.8s linear 0s infinite alternate;
      -webkit-animation: waves 0.8s linear 0s infinite alternate;
    }

    .demo-music #waves .li2 span {
      animation: waves 0.9s linear 0s infinite alternate;
      -webkit-animation: waves 0.9s linear 0s infinite alternate;
    }

    .demo-music #waves .li3 span {
      animation: waves 1s linear 0s infinite alternate;
      -webkit-animation: waves 1s linear 0s infinite alternate;
    }

    .demo-music #waves .li4 span {
      animation: waves 0.8s linear 0s infinite alternate;
      -webkit-animation: waves 0.8s linear 0s infinite alternate;
    }

    .demo-music #waves .li5 span {
      animation: waves 0.7s linear 0s infinite alternate;
      -webkit-animation: waves 0.7s linear 0s infinite alternate;
    }

    .demo-music #waves .li6 span {
      animation: waves 0.8s linear 0s infinite alternate;
      -webkit-animation: waves 0.8s linear 0s infinite alternate;
    }
    @-webkit-keyframes waves {
      10% {
        height: 20%;
      }
      20% {
        height: 60%;
      }
      40% {
        height: 40%;
      }
      50% {
        height: 100%;
      }
      100% {
        height: 50%;
      }
    }

    @keyframes waves {
      10% {
        height: 20%;
      }
      20% {
        height: 60%;
      }
      40% {
        height: 40%;
      }
      50% {
        height: 100%;
      }
      100% {
        height: 50%;
      }
    }
  </style>
</head>
<body>
  <div class="demo-music">
    <div class="music">
      <ul id="waves" class="movement">
        <li class="li1"><span class="ani-li"></span></li>
        <li class="li2"><span class="ani-li"></span></li>
        <li class="li3"><span class="ani-li"></span></li>
        <li class="li4"><span class="ani-li"></span></li>
        <li class="li5"><span class="ani-li"></span></li>
        <li class="li6"><span class="ani-li"></span></li>
      </ul>
      <div class="music-state"></div>
    </div>
    </div>
</body>
</html>

4.形状转换

这一部分,分2d转换和3d转换。有什么好玩的,下面列举几个!

4-1.语法

transform:适用于2D或3D转换的元素
transform-origin:转换元素的位置(围绕那个点进行转换)。默认(x,y,z):(50%,50%,0)

4-2.实例

transform:rotate(30deg);

clipboard.png

transform:translate(30px,30px);

clipboard.png

transform:scale(.8);

clipboard.png

transform: skew(10deg,10deg);

clipboard.png

transform:rotateX(180deg);

clipboard.png

transform:rotateY(180deg);

clipboard.png

transform:rotate3d(10,10,10,90deg);

clipboard.png

5.选择器

css3提供的选择器可以让我们的开发,更加方便!这个大家都要了解。下面是css3提供的选择器。

clipboard.png

图片来自w3c。这一块建议大家去w3c看(CSS 选择器参考手册),那里的例子通俗易懂。我不重复讲了。
提供的选择器里面,基本都挺好用的。但是我觉得有些不会很常用,比如,:root,:empty,:target,:enabled,:checked。而且几个不推荐使用,网上的说法是性能较差[attribute*=value],[attribute$=value],[attribute^=value],这个我没用过,不太清楚。

6.阴影

以前没有css3的时候,或者需要兼容低版本浏览器的时候,阴影只能用图片实现,但是现在不需要,css3就提供了!

6-1.语法

box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向(默认是从里往外,设置inset就是从外往里);

6-1.栗子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style> 
div
{
    width:300px;
    height:100px;
    background:#09f;
    box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

运行效果

clipboard.png

7.边框

7-1.边框图片

7-1-1.语法

border-image: 图片url 图像边界向内偏移 图像边界的宽度(默认为边框的宽度) 用于指定在边框外部绘制偏移的量(默认0) 铺满方式--重复(repeat)、拉伸(stretch)或铺满(round)(默认:拉伸(stretch));

7-1-2.栗子

边框图片(来自菜鸟教程)

clipboard.png

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.demo {
    border: 15px solid transparent;
    padding: 15px;   
    border-image: url(border.png);
    border-image-slice: 30;
    border-image-repeat: round;
    border-image-outset: 0;
}
</style>
</head>
<body>
    <div class="demo"></div>
</body>
</html>

效果

clipboard.png

有趣变化

clipboard.png

clipboard.png

那个更好看,大家看着办

7-2.边框圆角

7-2-1.语法

border-radius: n1,n2,n3,n4;
border-radius: n1,n2,n3,n4/n1,n2,n3,n4;
/*n1-n4四个值的顺序是:左上角,右上角,右下角,左下角。*/

7-2-2.栗子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style> 
div
{
    border:2px solid #a1a1a1;
    padding:10px 40px; 
    background:#dddddd;
    text-align:center;
    width:300px;
    border-radius:25px 0 25px 0;
}
</style>
</head>
<body>
<div>border-radius</div>
</body>
</html>

运行结果

clipboard.png

8.背景

这一块主要讲css3提供背景的三个属性

background-clip

制定背景绘制(显示)区域

默认情况(从边框开始绘制)

clipboard.png

从padding开始绘制(显示),不算border,,相当于把border那里的背景给裁剪掉!(background-clip: padding-box;)

clipboard.png

只在内容区绘制(显示),不算padding和border,相当于把padding和border那里的背景给裁剪掉!(background-clip: content-box;)

clipboard.png

background-origin

引用菜鸟教程的说法:background-Origin属性指定background-position属性应该是相对位置

下面的div初始的html和css代码都是一样的。如下
html

<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

css

div
{
    border:10px dashed black;
    padding:35px;
    background:url('logo.png') no-repeat,#ccc;
    background-position:0px 0px;
}

下面看下,background-origin不同的三种情况

图片描述

background-size

这个相信很好理解,就是制定背景的大小
下面的div初始的html和css代码都是一样的。如下
html

<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

css

div
{
    border:1px dashed black;
    padding:35px;
    background:url('test.jpg') no-repeat;
}

clipboard.png

多张背景图

这个没什么,就是在一张图片,使用多张背景图片,代码如下!
html

<p>两张图片的背景</p>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

css

div
{
    border:1px dashed black;
    padding:35px;
    background-size: contain;
    background:url('test.jpg') no-repeat left,url(logo.png) no-repeat right;
}

clipboard.png

9.反射

这个也可以说是倒影,用起来也挺有趣的。

9-1.语法

-webkit-box-reflect:方向[ above-上 | below-下 | right-右 | left-左 ],偏移量,遮罩图片

9-2.下倒影

html

<p>下倒影</p>
<p class="reflect-bottom-p"><img data-original="test.jpg" class="reflect-bottom"></p>

css

.reflect-bottom-p {
    padding-bottom: 300px;
}
        
.reflect-bottom {
    -webkit-box-reflect: below;
}   

clipboard.png

9-2.右倒影(有偏移)

clipboard.png

html

<p>右倒影同时有偏移</p>
<p><img data-original="test.jpg" class="reflect-right-translate"></p>

css

.reflect-right-translate {
    -webkit-box-reflect: right 10px;
}

9-3.下倒影(渐变)

clipboard.png

html

<p>下倒影(渐变)</p>
<p class="reflect-bottom-p"><img data-original="test.jpg" class="reflect-bottom-mask"></p>

css

reflect-bottom-mask {
    -webkit-box-reflect: below 0 linear-gradient(transparent, white);
}

9-3.下倒影(图片遮罩)

使用的图片

clipboard.png

clipboard.png

html

<p>下倒影(png图片)</p>
<p class="reflect-bottom-p"><img data-original="test.jpg" class="reflect-bottom-img"></p>

css

.reflect-bottom-img {
    -webkit-box-reflect: below 0 url(shou.png);
}

10.文字

换行

语法:word-break: normal|break-all|keep-all;
栗子和运行效果

clipboard.png

语法:word-wrap: normal|break-word;
栗子和运行效果

clipboard.png

超出省略号这个,主要讲text-overflow这个属性,我直接讲实例的原因是text-overflow的三个写法,clip|ellipsis|stringclip这个方式处理不美观,不优雅。string只在火狐兼容。

clipboard.png

超出省略号

这个其实有三行代码,禁止换行,超出隐藏,超出省略号
html

<div>This is some long text that will not fit in the box</div>

css

div
{
    width:200px; 
    border:1px solid #000000;
    overflow:hidden;
    white-space:nowrap; 
    text-overflow:ellipsis;
}

运行结果

clipboard.png

多行超出省略号

超出省略号。这个对于大家来说,不难!但是以前如果是多行超出省略号,就只能用js模拟!现在css3提供了多行省略号的方法!遗憾就是这个暂时只支持webkit浏览器!

代码如下

<!DOCTYPE html>
<html>    
<head>
<meta charset="utf-8"> 
<title></title> 
<style> 
div
{
    width:400px;
    margin:0 auto;
    overflow : hidden;
    border:1px solid #ccc;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
</style>
</head>
<body>

<div>这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏这里将会超出隐藏</div>


</body>
</html>

效果图

clipboard.png

这样发现边框贴着难看,要撑开一点,但是撑开上下边框不要使用padding!因为会出现下面这个效果。

clipboard.png

正确姿势是这样写

<style> 
div
{
    width:400px;
    margin:0 auto;
    overflow : hidden;
    border:1px solid #ccc;
    text-overflow: ellipsis;
    padding:0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height:30px;
    height:60px;
}
</style>

运行结果

clipboard.png

这样写,就算在不是webkit内核的浏览器,也可以优雅降级(高度=行高*行数(webkit-line-clamp))!

clipboard.png

文字阴影

语法:text-shadow:水平阴影,垂直阴影,模糊的距离,以及阴影的颜色。
栗子:text-shadow: 0 0 10px #f00;
效果

clipboard.png

11.颜色

这个其实就是css3提供了新的颜色表示方法。

rgba

一个是rgba(rgb为颜色值,a为透明度)

color: rgba(255,00,00,1);
background: rgba(00,00,00,.5);

clipboard.png

hsla

h:色相”,“s:饱和度”,“l:亮度”,“a:透明度”
这个我姿势了解过,没用过,这里简单给一个例子

color: hsla( 112, 72%, 33%, 0.68);
background-color: hsla( 49, 65%, 60%, 0.68);

clipboard.png

12.渐变

css3的渐变可以说是一大亮点,提供了线性渐变,径向渐变,圆锥渐变(w3c和菜鸟教程都没有提及,是我从一篇文章了解到,但是我自己在谷歌浏览器尝试,却是一个无效的写法!大家如果知道怎么用,请告知!感谢)
渐变这一部分,由于用法灵活,功能也强大,这个写起来很长,写一点又感觉没什么意思,我这里贴几个链接教程给大家,在文章我不多说了,毕竟我也是从那几个地方学的,他们写得也是比我好,比我详细!

CSS3 Gradient
再说CSS3渐变——线性渐变
再说CSS3渐变——径向渐变
神奇的 conic-gradient 圆锥渐变(这篇就是看我看到圆锥渐变的文章)

13.Filter(滤镜)

css3的滤镜也是一个亮点,功能强大,写法也灵活。

栗子代码如下

<p>原图</p>
<img data-original="test.jpg" />
<p>黑白色filter: grayscale(100%)</p>
<img data-original="test.jpg" style="filter: grayscale(100%);"/>
<p>褐色filter:sepia(1)</p>
<img data-original="test.jpg" style="filter:sepia(1);"/>
<p>饱和度saturate(2)</p>
<img data-original="test.jpg" style="filter:saturate(2);"/>
<p>色相旋转hue-rotate(90deg)</p>
<img data-original="test.jpg" style="filter:hue-rotate(90deg);"/>
<p>反色filter:invert(1)</p>
<img data-original="test.jpg" style="filter:invert(1);"/>
<p>透明度opacity(.5)</p>
<img data-original="test.jpg" style="filter:opacity(.5);"/>
<p>亮度brightness(.5)</p>
<img data-original="test.jpg" style="filter:brightness(.5);"/>
<p>对比度contrast(2)</p>
<img data-original="test.jpg" style="filter:contrast(2);"/>
<p>模糊blur(3px)</p>
<img data-original="test.jpg" style="filter:blur(3px);"/>
<p>阴影drop-shadow(5px 5px 5px #000)</p>
<img data-original="test.jpg" style="filter:drop-shadow(5px 5px 5px #000);"/>

clipboard.png

clipboard.png

clipboard.png

clipboard.png

clipboard.png

clipboard.png

14.弹性布局

这里说的弹性布局,就是flex;这一块要讲的话,必须要全部讲完,不讲完没什么意思,反而会把大家搞蒙!讲完也是很长,所以,这里我也只贴教程网址。博客讲的很好,很详细!

Flex 布局教程:语法篇
Flex 布局教程:实例篇

15.栅格布局

栅格化布局,就是grid;这一块和flex一样,要讲就必须讲完。这块的内容和flex差不多,也有点长,这里我也贴链接,这个链接讲得也很详细!

Grid布局指南

16.多列布局

这一块,我也是了解过,我觉得多列应该还是挺有用的。虽然我没在项目中用过,下面我简单说下!举个例子!这个属性,建议加私有前缀,兼容性有待提高!
html

<div class="newspaper">
当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。
</div>

css

.newspaper
{
    column-count: 3;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-rule:2px solid #000;
    -webkit-column-rule:2px solid #000;
    -mox-column-rule:2px solid #000;
}    

clipboard.png

17.盒模型定义

box-sizing这个属性,网上说法是:属性允许您以特定的方式定义匹配某个区域的特定元素。

这个大家看着可能不知道在说什么,简单粗暴的理解就是:box-sizing:border-box的时候,边框和padding包含在元素的宽高之内!如下图

图片描述

box-sizing:content-box的时候,边框和padding不包含在元素的宽高之内!如下图

图片描述

18.媒体查询

媒体查询,就在监听屏幕尺寸的变化,在不同尺寸的时候显示不同的样式!在做响应式的网站里面,是必不可少的一环!不过由于我最近的项目都是使用rem布局。所以媒体查询就没怎么用了!但是,媒体查询,还是很值得一看的!说不定哪一天就需要用上了!

栗子代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
body {
    background-color: pink;
}
@media screen and (max-width: 960px) {
    body {
        background-color: darkgoldenrod;
    }
}
@media screen and (max-width: 480px) {
    body {
        background-color: lightgreen;
    }
}
</style>
</head>
<body>

<h1>重置浏览器窗口查看效果!</h1>
<p>如果媒体类型屏幕的可视窗口宽度小于 960 px ,背景颜色将改变。</p>
<p>如果媒体类型屏幕的可视窗口宽度小于 480 px ,背景颜色将改变。</p>

</body>
</html>

运行效果

clipboard.png

19.混合模式

混合模式,就像photoshop里面的混合模式!这一块,我了解过,在项目上没用过,但是我觉得这个应该不会没有用武之地!
css3的混合模式,两个(background-blend-mode和mix-blend-mode)。这两个写法和显示效果都非常像!区别就在于background-blend-mode是用于同一个元素的背景图片和背景颜色的。mix-blend-mode用于一个元素的背景图片或者颜色和子元素的。看以下代码,区别就出来了!

这一块图片很多,大家看图片快速扫一眼,看下什么效果就好!

background-blend-mode

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        div{
            width: 480px;
            height: 300px;
            background:url('test.jpg')no-repeat,#09f;
        }
    </style>
    <body>
        <!---->
        
        <p>原图</p>
        <div></div>
        <p>multiply正片叠底</p>
        <div style="background-blend-mode: multiply;"></div>
        <p>screen滤色</p>
        <div style="background-blend-mode: screen;"></div>
        <p>overlay叠加</p>
        <div style="background-blend-mode: overlay;"></div>
        <p>darken变暗</p>
        <div style="background-blend-mode: darken;"></div>
        <p>lighten变亮</p>
        <div style="background-blend-mode: lighten;"></div>
        <p>color-dodge颜色减淡模式</p>
        <div style="background-blend-mode: color-dodge;"></div>
        <p>color-burn颜色加深</p>
        <div style="background-blend-mode: color-burn;"></div>
        <p>hard-light强光</p>
        <div style="background-blend-mode: hard-light;"></div>
        <p>soft-light柔光</p>
        <div style="background-blend-mode: soft-light;"></div>
        <p>difference差值</p>
        <div style="background-blend-mode: difference;"></div>
        <p>exclusion排除</p>
        <div style="background-blend-mode: exclusion;"></div>
        <p>hue色相</p>
        <div style="background-blend-mode: hue;"></div>
        <p>saturation饱和度</p>
        <div style="background-blend-mode: saturation;"></div>
        <p>color颜色</p>
        <div style="background-blend-mode: color;"></div>
        <p>luminosity亮度</p>
        <div style="background-blend-mode: luminosity;"></div>
    </body>
</html>

运行效果

clipboard.png

clipboard.png

clipboard.png

clipboard.png

clipboard.png

clipboard.png

clipboard.png

clipboard.png

clipboard.png

mix-blend-mode

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        div{
            padding: 20px;
            width: 480px;
            background: #09f;
        }
    </style>
    <body>
        <p>原图</p>
        <div><img data-original="test.jpg"/></div>
        <p>multiply正片叠底</p>
        <div><img data-original="test.jpg" style="mix-blend-mode: multiply;"/></div>
        <p>screen滤色</p>
        <div><img data-original="test.jpg" style="mix-blend-mode: screen;"/></div>
        <p>overlay叠加</p>
        <div><img data-original="test.jpg" style="mix-blend-mode: overlay;"/></div>
        <p>darken变暗</p>
        <div><img data-original="test.jpg" style="mix-blend-mode: darken;"/></div>
        <p>lighten变亮</p>
        <div><img data-original="test.jpg" style="mix-blend-mode: lighten;"/></div>
        <p>color-dodge颜色减淡模式</p>
        <div><img data-original="test.jpg" style="mix-blend-mode: color-dodge;"/></div>
        <p>color-burn颜色加深</p>
        <div><img data-original="test.jpg" style="mix-blend-mode: color-burn;"/></div>
        <p>hard-light强光</p>
        <div><img data-original="test.jpg" style="mix-blend-mode: hard-light;"/></div>
        <p>soft-light柔光</p>
        <div><img data-original="test.jpg" style="mix-blend-mode: soft-light;"/></div>
        <p>difference差值</p>
        <div><img data-original="test.jpg" style="mix-blend-mode: difference;"/></div>
        <p>exclusion排除</p>
        <div><img data-original="test.jpg" style="mix-blend-mode: exclusion;"/></div>
        <p>hue色相</p>
        <div><img data-original="test.jpg" style="mix-blend-mode: hue;"/></div>
        <p>saturation饱和度</p>
        <div><img data-original="test.jpg" style="mix-blend-mode: saturation;"/></div>
        <p>color颜色</p>
        <div><img data-original="test.jpg" style="mix-blend-mode: color;"/></div>
        <p>luminosity亮度</p>
        <div><img data-original="test.jpg" style="mix-blend-mode: luminosity;"/></div>
    </body>
</html>

运行效果

clipboard.png

clipboard.png

clipboard.png

clipboard.png

clipboard.png

clipboard.png

clipboard.png

clipboard.png

clipboard.png

clipboard.png

clipboard.png

clipboard.png

clipboard.png

clipboard.png

clipboard.png

clipboard.png

20.小结

好了,个人总结的css3的新特性,就到这里了!其中有一些新特性如果想使用的好,必须多去了解和练习。有些新特性,如果要单独详细的讲,比如动画,过渡,弹性盒子,渐变等。估计可以写几篇或者十几篇文章!特别是动画,估计写一本书都可以!上面对css3新特性的讲解和案例,都是基础的认识和用法,希望能起到一个拓展思维的作用。最重要的是,大家要多加练习,实操是最重要的一环,孰能生巧也是这样来的!css3不仅要会用,也要用好,用好css3,在项目的开发上,很有帮助的!当然如果我有发现什么好玩的,有用的,我会继续写文章。
最后,如果大家觉得我哪里写错了,写得不好,或者有什么推荐的!欢迎指点!

-------------------------华丽的分割线--------------------
想了解更多,关注关注我的微信公众号:守候书阁

clipboard.png

查看原文

赞 152 收藏 663 评论 27

zhuanglog 发布了文章 · 2018-08-06

MVVM框架理解及其原理实现

小白一枚,一直使用的是React,想要多了解一些其它的框架,正好最近Vue越来越火热,Github上的Star数已经超过了React。而其背后蕴含的MVVM框架思想也一直跟React的组件化开发思想并驾齐驱,在这里也是本着兼收并蓄的思想,多了解一种开发模式。因此通过一些学习资料,写一些自己对MVVM开发思想的理解。

废话不多说,咱们进入正题。

MVVM框架理解

说起这个MVVM模型,就不得不说MVC框架。

bg2015020105.png

将整个前端页面分成View,Controller,Modal,视图上发生变化,通过Controller(控件)将响应传入到Model(数据源),由数据源改变View上面的数据。

整个过程看起来是行云流水,业务逻辑放在Model当中,页面渲染逻辑放在View当中,但在实际运用上却存在一个问题:那就是MVC框架允许View和Model直接进行通信!!

换句话说,View和Model之间随着业务量的不断庞大,会出现蜘蛛网一样难以处理的依赖关系,完全背离了开发所应该遵循的“开放封闭原则”

面对这个问题,MVVM框架就出现了,它与MVC框架的主要区别有两点:
1、实现数据与视图的分离
2、通过数据来驱动视图,开发者只需要关心数据变化,DOM操作被封装了。

hEQAEJACAgBISAEhIAQEAJCQAgIASHgigT+Dy+Ux4EFPXIkAAAAAElFTkSuQmCC

可以看到MVVM分别指View,Model,View-Model,View通过View-Model的DOM Listeners将事件绑定到Model上,而Model则通过Data Bindings来管理View中的数据,View-Model从中起到一个连接桥的作用。

MVVM的实现原理:

MVVM的实现主要是三个核心点:

  1. 响应式:vue如何监听data的属性变化
  2. 模板解析:vue的模板是如何被解析的
  3. 渲染:vue模板是如何被渲染成HTML的

响应式:

对于MVVM来说,data一般是放在一个对象当中,就比如这样:

         var obj = {
             name: 'zhangsan',
             age: 25
         }

当我们访问或修改obj的属性的时候,比如:

         console.log(obj.name)  //访问
         obj.age = 22            //修改

但是这样的操作vue本身是没有办法感知到的,那么应该如何让vue知道我们进行了访问或是修改的操作呢?
那就要使用Object.defineProperty

        var vm = {}
        var data = {
            name: 'zhangsan',
            age: 20
        }

        var key, value
        for (key in data) {
            (function (key) {
                Object.defineProperty(vm, key, {
                    get: function () {
                        console.log('get', data[key]) // 监听
                        return data[key]
                    },
                    set: function (newVal) {
                        console.log('set', newVal) // 监听
                        data[key] = newVal
                    }
                })
            })(key)
        }

通过Object.defineProperty将data里的每一个属性的访问与修改都变成了一个函数,在函数get和set中我们即可监听到data的属性发生了改变。

模板解析:

首先模板是什么?

模板本质上是一串字符串,它看起来和html的格式很相像,实际上有很大的区别,因为模板本身还带有逻辑运算,比如v-if,v-for等等,但它最后还是要转换为html来显示。

    <div id="app">
        <div>
            <input v-model="title">
            <button v-on:click="add">submit</button>
        </div>
        <div>
            <ul>
                <li v-for="item in list">{{item}}</li>
            </ul>
        </div>
    </div>

模板在vue中必须转换为JS代码,原因在于:在前端环境下,只有JS才是一个图灵完备语言,才能实现逻辑运算,以及渲染为html页面。

这里就引出了vue中一个特别重要的函数——render

render函数中的核心就是with函数。

with函数将某个对象添加到作用域链的顶部,如果在 statement中有某个未使用命名空间的变量,跟作用域链中的某个属性同名,则这个变量将指向这个属性值。

举个例子:

       var obj = {
            name: 'zhangsan',
            age: 20,
            getAddress: function () {
                alert('beijing')
            }
        }
        function fn1() {
            with(obj) {
                alert(age)
                alert(name)
                getAddress()
            }
        }
        fn1()

with将obj这个对象放在了自己函数的作用域链的顶部,当执行下列函数时,就会自动到obj这个对象去寻找同名的属性。

而在render函数中,with的用法是这样:

    <div id="app">
        <div>
            <input v-model="title">
            <button v-on:click="add">submit</button>
        </div>
        <div>
            <ul>
                <li v-for="item in list">{{item}}</li>
            </ul>
        </div>
    </div>
        // 对应的js文件
        var data = {
            title: '',
            list: []
        }
        // 初始化 Vue 实例
        var vm = new Vue({
            el: '#app',
            data: data,
            methods: {
                add: function () {
                    this.list.push(this.title)
                    this.title = ''
                }
            }
        })

        
        with(this){  // this 就是 vm
            return _c(
                'div',
                {
                    attrs:{"id":"app"}
                },
                [
                    _c(
                        'div',
                        [
                            _c(
                                'input',
                                {
                                    directives:[
                                        {
                                            name:"model",
                                            rawName:"v-model",
                                            value:(title),
                                            expression:"title"
                                        }
                                    ],
                                    domProps:{
                                        "value":(title)
                                    },
                                    on:{
                                        "input":function($event){
                                            if($event.target.composing)return;
                                            title=$event.target.value
                                        }
                                    }
                                }
                            ),
                            _v(" "),
                            _c(
                                'button',
                                {
                                    on:{
                                        "click":add
                                    }
                                },
                                [_v("submit")]
                            )
                        ]
                    ),
                    _v(" "),
                    _c('div',
                        [
                            _c(
                                'ul',
                                _l((list),function(item){return _c('li',[_v(_s(item))])})
                            )
                        ]
                    )
                ]
            )
        }

在一开始,因为new操作符,所以this指向了vm,通过with我们将vm这个对象放在作用域链的顶部,因为在函数内部我们会多次调用vm内部的属性,所以使用with可以缩短变量长度,提供系统运行效率。

其中的_c函数表示的是创建一个新的html元素,其基本用法为:

                _c(element,{attrs},[children...])

其中的element表示所要创建的html元素类型,attrs表示所要创建的元素的属性,children表示该html元素的子元素。

_v函数表示创建一个文本节点,_l函数表示创建一个数组。

最终render函数返回的是一个虚拟DOM。

如何将模板渲染为html

模板渲染为html分为两种情况,第一种是初次渲染的时候,第二种是渲染之后数据发生改变的时候,它们都需要调用updateComponent,其形式如下:

vm._update(vnode){
  const prevVnode = vm._vnode
  vm._vnode = vnode
  if (!prevVnode){
    vm.$el = vm.__patch__(vm.$el,vnode)
  } else {
    vm.$el = vm.__patch__(prevVnode,vnode)
  }
}

function updateComponent(){
  vm._update(vm._render())
}

首先读取当前的虚拟DOM——vm._vnode,判断其是否为空,若为空,则为初次渲染,将虚拟DOM全部渲染到所对应的容器当中(vm.$el),若不为空,则是数据发生了修改,通过响应式我们可以监听到这一情况,使用diff算法完成新旧对比并修改。

查看原文

赞 37 收藏 26 评论 1

zhuanglog 发布了文章 · 2018-08-05

MVVM框架理解及其原理实现

小白一枚,一直使用的是React,想要多了解一些其它的框架,正好最近Vue越来越火热,Github上的Star数已经超过了React。而其背后蕴含的MVVM框架思想也一直跟React的组件化开发思想并驾齐驱,在这里也是本着兼收并蓄的思想,多了解一种开发模式。因此通过一些学习资料,写一些自己对MVVM开发思想的理解。

废话不多说,咱们进入正题。

MVVM框架理解

说起这个MVVM模型,就不得不说MVC框架。

bg2015020105.png

将整个前端页面分成View,Controller,Modal,视图上发生变化,通过Controller(控件)将响应传入到Model(数据源),由数据源改变View上面的数据。

整个过程看起来是行云流水,业务逻辑放在Model当中,页面渲染逻辑放在View当中,但在实际运用上却存在一个问题:那就是MVC框架允许View和Model直接进行通信!!

换句话说,View和Model之间随着业务量的不断庞大,会出现蜘蛛网一样难以处理的依赖关系,完全背离了开发所应该遵循的“开放封闭原则”

面对这个问题,MVVM框架就出现了,它与MVC框架的主要区别有两点:
1、实现数据与视图的分离
2、通过数据来驱动视图,开发者只需要关心数据变化,DOM操作被封装了。

hEQAEJACAgBISAEhIAQEAJCQAgIASHgigT+Dy+Ux4EFPXIkAAAAAElFTkSuQmCC

可以看到MVVM分别指View,Model,View-Model,View通过View-Model的DOM Listeners将事件绑定到Model上,而Model则通过Data Bindings来管理View中的数据,View-Model从中起到一个连接桥的作用。

MVVM的实现原理:

MVVM的实现主要是三个核心点:

  1. 响应式:vue如何监听data的属性变化
  2. 模板解析:vue的模板是如何被解析的
  3. 渲染:vue模板是如何被渲染成HTML的

响应式:

对于MVVM来说,data一般是放在一个对象当中,就比如这样:

         var obj = {
             name: 'zhangsan',
             age: 25
         }

当我们访问或修改obj的属性的时候,比如:

         console.log(obj.name)  //访问
         obj.age = 22            //修改

但是这样的操作vue本身是没有办法感知到的,那么应该如何让vue知道我们进行了访问或是修改的操作呢?
那就要使用Object.defineProperty

        var vm = {}
        var data = {
            name: 'zhangsan',
            age: 20
        }

        var key, value
        for (key in data) {
            (function (key) {
                Object.defineProperty(vm, key, {
                    get: function () {
                        console.log('get', data[key]) // 监听
                        return data[key]
                    },
                    set: function (newVal) {
                        console.log('set', newVal) // 监听
                        data[key] = newVal
                    }
                })
            })(key)
        }

通过Object.defineProperty将data里的每一个属性的访问与修改都变成了一个函数,在函数get和set中我们即可监听到data的属性发生了改变。

模板解析:

首先模板是什么?

模板本质上是一串字符串,它看起来和html的格式很相像,实际上有很大的区别,因为模板本身还带有逻辑运算,比如v-if,v-for等等,但它最后还是要转换为html来显示。

    <div id="app">
        <div>
            <input v-model="title">
            <button v-on:click="add">submit</button>
        </div>
        <div>
            <ul>
                <li v-for="item in list">{{item}}</li>
            </ul>
        </div>
    </div>

模板在vue中必须转换为JS代码,原因在于:在前端环境下,只有JS才是一个图灵完备语言,才能实现逻辑运算,以及渲染为html页面。

这里就引出了vue中一个特别重要的函数——render

render函数中的核心就是with函数。

with函数将某个对象添加到作用域链的顶部,如果在 statement中有某个未使用命名空间的变量,跟作用域链中的某个属性同名,则这个变量将指向这个属性值。

举个例子:

       var obj = {
            name: 'zhangsan',
            age: 20,
            getAddress: function () {
                alert('beijing')
            }
        }
        function fn1() {
            with(obj) {
                alert(age)
                alert(name)
                getAddress()
            }
        }
        fn1()

with将obj这个对象放在了自己函数的作用域链的顶部,当执行下列函数时,就会自动到obj这个对象去寻找同名的属性。

而在render函数中,with的用法是这样:

    <div id="app">
        <div>
            <input v-model="title">
            <button v-on:click="add">submit</button>
        </div>
        <div>
            <ul>
                <li v-for="item in list">{{item}}</li>
            </ul>
        </div>
    </div>
        // 对应的js文件
        var data = {
            title: '',
            list: []
        }
        // 初始化 Vue 实例
        var vm = new Vue({
            el: '#app',
            data: data,
            methods: {
                add: function () {
                    this.list.push(this.title)
                    this.title = ''
                }
            }
        })

        
        with(this){  // this 就是 vm
            return _c(
                'div',
                {
                    attrs:{"id":"app"}
                },
                [
                    _c(
                        'div',
                        [
                            _c(
                                'input',
                                {
                                    directives:[
                                        {
                                            name:"model",
                                            rawName:"v-model",
                                            value:(title),
                                            expression:"title"
                                        }
                                    ],
                                    domProps:{
                                        "value":(title)
                                    },
                                    on:{
                                        "input":function($event){
                                            if($event.target.composing)return;
                                            title=$event.target.value
                                        }
                                    }
                                }
                            ),
                            _v(" "),
                            _c(
                                'button',
                                {
                                    on:{
                                        "click":add
                                    }
                                },
                                [_v("submit")]
                            )
                        ]
                    ),
                    _v(" "),
                    _c('div',
                        [
                            _c(
                                'ul',
                                _l((list),function(item){return _c('li',[_v(_s(item))])})
                            )
                        ]
                    )
                ]
            )
        }

在一开始,因为new操作符,所以this指向了vm,通过with我们将vm这个对象放在作用域链的顶部,因为在函数内部我们会多次调用vm内部的属性,所以使用with可以缩短变量长度,提供系统运行效率。

其中的_c函数表示的是创建一个新的html元素,其基本用法为:

                _c(element,{attrs},[children...])

其中的element表示所要创建的html元素类型,attrs表示所要创建的元素的属性,children表示该html元素的子元素。

_v函数表示创建一个文本节点,_l函数表示创建一个数组。

最终render函数返回的是一个虚拟DOM。

如何将模板渲染为html

模板渲染为html分为两种情况,第一种是初次渲染的时候,第二种是渲染之后数据发生改变的时候,它们都需要调用updateComponent,其形式如下:

vm._update(vnode){
  const prevVnode = vm._vnode
  vm._vnode = vnode
  if (!prevVnode){
    vm.$el = vm.__patch__(vm.$el,vnode)
  } else {
    vm.$el = vm.__patch__(prevVnode,vnode)
  }
}

function updateComponent(){
  vm._update(vm._render())
}

首先读取当前的虚拟DOM——vm._vnode,判断其是否为空,若为空,则为初次渲染,将虚拟DOM全部渲染到所对应的容器当中(vm.$el),若不为空,则是数据发生了修改,通过响应式我们可以监听到这一情况,使用diff算法完成新旧对比并修改。

查看原文

赞 37 收藏 26 评论 1

认证与成就

  • 获得 45 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2018-07-26
个人主页被 319 人浏览