盐城网站开发渠道合作,seo知识总结,深圳网站推广哪家好,青海免费网站建设2.2页面加载过程 1.资源加载过程#xff1a;URL-DNS查询-资源请求-浏览器解析 ①URL结构#xff1a;http://www.hhh.com:80/getdata?pid1#title[协议://域名#xff1a;端口/路径?参数#哈希] ②DNS查询#xff1a;浏览器--#xff08;ip#xff09;URL-DNS查询-资源请求-浏览器解析 ①URL结构http://www.hhh.com:80/getdata?pid1#title[协议://域名端口/路径?参数#哈希] ②DNS查询浏览器--ip域名--DNS缓存DNS服务器 dns-prefetch缓存 ③资源请求浏览器--statusresponse-headerbodyrequest-header参数url、body--后端服务器 ④浏览器解析DOM--JS执行--DOM--渲染树--布局--绘制 2.3ES6常用语法 1.let变量const常量不能重复定义块级作用域不变量提升 2.箭头函数参数 表达式/语句、继承外层作用域、不能用作构造函数、没有prototype属性 3.反引号标识、支持多行字符串、支持变量和表达式 4.PromisePromise对象、关键词resolve、reject、then 5.面向对象-类关键词class、语法糖function、构造函数constructor 面向对象-类的继承extends类的继承super调用父类构造函数 面向对象-对象对象里属性简写对象方法简写属性可以为表达式其它扩展 2.5本地存储 1.cookie①用户端保存请求信息的机制。②分号分隔的多个key-value字段。③存储在本地的加密文件里。④域名和路径限制。 字段name:cookie名称domain:cookie生效的域名path:cookie生效的路径expires:cookie过期时间HttpOnly用户端不可更改 2.session①服务端保存请求信息的机制。②sessionId通常存放在cookie里。③会话由浏览器控制会话结束session结束。 3.localStorage①H5新特性。②有域名限制不存在作用域概念。③只有key-value。④没有过期时间。⑤浏览器关闭后不消失。 4.sessionStorage①和localStorage相似。②浏览器关闭消失。 3-2前端框架要解决的问题 1.传统的原生开发方式的不足代码层面、效率问题、多页应用问题 2.框架开发的不足兼容性问题SEO不友好、有场景要求开发自由度降低、黑盒开发框架本身有出错风险、有学习成本。 3.三大框架对比angular09年发布Google主要版本1.x2.x4.x5.xbeta基于html的大而全的MVC框架 react13开源Facebook最新版本16.x基于js的视图层框架 vue14开源尤雨溪阿里weex团队主要版本0.1x1.x2.x基于html的视图层框架 框架对比angular react vue 组织方式MVC 模块化 模块化 数据绑定双向 单向 双向 模板能力强大 自由 简洁 自由度 较小 大 较大 路由 静态路由 动态路由 动态路由 app方案Ionic RN Weex 适用场景后端开发构建CURD 前端开发构建复杂web 前端开发快速构建web 4.2git项目建立及配置https://www.cnblogs.com/GuliGugaLiz/p/9484525.html 4.4webpack配置 1.需要处理的文件类型 html--html-webpack-plugin 脚本--babelbabel-preset-react 样式--css-loadersass-loader 图片/字体--url-loaderfile-loader 2.webpack常用模块 html-webpack-plugin,html单独打包成文件 extract-text-webpack-plugin,样式打包成单独文件 CommonsChunkPlugin,提出通用模块 3.webpack-dev-server 为webpack项目提供web服务使用不便2.9.7更改代码自动刷新路径转发yarn add webpack-dev-server2.9.7 --dev;解决多版本共存问题 5.2初识react 1.视图层框架只关注显示不关注数据层、组件化不是继承模式、JSX表达式在html中加入了逻辑处理、虚拟DOM减少低效操作提高性能 视图层框架①一个构建用户界面的框架②声明式的框架③数据驱动DOM再用事件反馈给数据 组件化开发①组件组合而不是继承②stateprops③生命周期 JSX①一直js扩展的表达式②带有逻辑的html 虚拟DOM:①对DOM进行模拟②比较操作前后的数据差异③如果数据差异统一操作dOM 2优点简洁、灵活、高效 3.缺点思维转换、依赖生态、变动频繁 5.5React的生命周期 1.加载过程constructor--componentWillMount--componentDidMount 2.更新过程shouldComponentUpdate--componentWillUpdate--componentDidUpdate;如果是props更新组件执行componentWillReceiveProps来接受父组件传过来的props 3.组件销毁componentWillUnmount 5.6Router原理及React-Router 1.Router原理历史--跳转--事件 2.常见Router页面Router(window.location.hrefhttp://www.baidu.com)--Hash Router(1.(window.location.href#test1;2.window.οnhashchangefunction(){console.log(current hash:),window.location.hash})--H5 Router(1.history.pushState(test,Title,/index/test);2.history.replaceState(test,Title,/index/test) 跳转到localhost8080/index/test) 3.React-Router:BrowserRouter/HashRouter路由方式Route,路由规则Swithch,路由选项Link/NavLink,跳转导航Redirect,自动跳转 5.7React数据管理 1.依靠状态提升来和兄弟元素进行数据交互通过发布订阅模式做数据交互Redux等数据管理工具 转载于:https://www.cnblogs.com/GuliGugaLiz/p/9436413.html
