前端
辰小小
微博:CRR_Claire
展开
-
【前端学习笔记】Less初认识
定义Less (Leaner Style Sheets 的缩写) 是一门向后兼容的 CSS 扩展语言。用法1,变量@width: 10px;@height: @width + 10px;#header { width: @width; height: @height;}2,混合.bordered { border-top: dotted 1px black; ...原创 2019-06-27 14:37:22 · 202 阅读 · 0 评论 -
【HTML5移动开发学习笔记】07-CH11-响应式Web的CSS特性
媒体查询,断点,流失布局@media:媒体查询断点breakpoint:就是你想改变浏览器的大小,并决定需要一种新布局,改变布局的宽度就成为断点。例如320,480,640,960多栏CSS columns属性:创建多个栏,像报纸文本一样布局。columns属性是column-count,columns-width的简写columns-rule类似于border,其属性有column...原创 2019-04-26 22:24:59 · 229 阅读 · 0 评论 -
【HTML5移动开发学习笔记】06-CH10-CSS3变换,渐变和动画
transformtransitiontranslate原创 2019-04-26 21:49:00 · 263 阅读 · 0 评论 -
【HTML5移动开发学习笔记】05-CH8-CSS与CSS3内容详解
CSS定义与语法,CSS选择器,CSS3选择器,CSS颜色值,度量单位,模块,模型与图形。盒模型,CSS渐变,阴影。原创 2019-04-26 21:13:37 · 252 阅读 · 0 评论 -
【前端学习笔记】Vue.js MVVM双向绑定原理
学习自:https://juejin.im/entry/5996654451882524382f43db目前,常用的MVVM框架有:Angular:Google出品,名气大,但是很难用;Backbone.js:入门非常困难,因为自身API太多;Ember:一个大而全的框架,想写个Hello world都很困难。所以,综合考察,最佳选择是尤雨溪大神开发的MVVM框架:Vue.js目前,...原创 2019-04-17 17:42:10 · 313 阅读 · 0 评论 -
【前端学习笔记】MVC,MVP,MVVM的区别和各自原理
http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html学习自阮一峰的博客。1,MVC-Model-View-Controller视图(View):用户界面。控制器(Controller):业务逻辑模型(Model):数据保存单向通信。1,View 传送指令到 Controller;2,Controller 完成业务逻辑后,要求...原创 2019-04-16 22:13:30 · 588 阅读 · 0 评论 -
【前端学习笔记】虚拟DOM
1,VUE中虚拟DOM原理用JS表示DOM结构。DOM很慢,而javascript很快,用javascript对象可以很容易地表示DOM节点。DOM节点包括标签、属性和子节点,通过VElement表示如下。根据虚拟DOM树构建出真实的DOM树。具体思路:根据虚拟DOM节点的属性和子节点递归地构建出真实的DOM树。用JS对象表示DOM结构,那么当数据状态发生变化而需要改变DOM结构时,我们先...原创 2019-04-16 22:00:51 · 1573 阅读 · 0 评论 -
【前端学习笔记】浏览器多进程,JS单进程,JS运行机制
参考是:https://juejin.im/post/5a6547d0f265da3e283a1df7这篇文章写的很好!清楚明白。跟着小陈一起梳理知识点。1,区分进程和线程进程比作工厂,线程比作工厂内的工人。工厂的资源 -> 系统分配的内存(独立的一块内存)工厂之间的相互独立 -> 进程之间相互独立多个工人协作完成任务 -> 多个线程在进程中协作完成任务...转载 2019-04-16 20:15:39 · 1591 阅读 · 0 评论 -
【HTML5移动开发学习笔记】02-CH4-HTML5 Web表单
引入HTML5表单提高了可用性,降低了对JavaScript验证的依赖性。input1,type属性-唯一必需输入属性默认type="text"使用html5,type属性有23种可能的值,如果不支持一个新输入,默认就是text2,required属性-标记一个表单字段是必须的支持required属性的浏览器也支持:required和:invalid伪类,可以通过视觉提醒。为了提高...原创 2019-04-23 20:29:12 · 4567 阅读 · 0 评论 -
【HTML5移动开发学习笔记】03-CH5-Canvas,Video,Audio
H5媒体API1.SVG-可伸缩矢量图形针对形状,直线,曲线,图像,文本定义了XML语法,包括透明度,角度,几何形状,滤镜效果,脚本和动画等特性。基于文本的图像格式,文件很小。基于XML,根元素为<svg>,使用XML绘制。例如以下的SVG:<!DOCTYPE svg PUBLIC ""> <!-- DTD文档声明 --><svg xmln...原创 2019-04-23 21:29:09 · 317 阅读 · 0 评论 -
【HTML5移动开发学习笔记】08-CH12-CH13-CH14-设计移动应用程序+移动性能
CH12开始前考虑的事项1,整体受众,以此设计用户界面的外观,感觉,功能和流程。2,无论设备是什么,Web应用程序或站点都应该简洁,可理解,相关(重要信息放在屏幕顶部)。3,五类移动应用程序:有趣或严肃的生产率应用程序,有趣或严肃的沉浸类应用程序,以及实用的应用程序生产率应用程序,常用来完成重要的任务,比如阅读,撰写和分类电子邮件。倾向于以分层的方式组织信息,使用多种视图,用户界面简介...原创 2019-04-28 15:34:01 · 279 阅读 · 0 评论 -
【前端学习笔记】React之组件和React.Component
函数式组件:function Welcome(props) { return <h1>Hello, {props.name}</h1>;}类组件:class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>...原创 2019-06-26 10:36:39 · 1166 阅读 · 0 评论 -
【前端学习笔记】React的state和生命周期
参考自:http://react.html.cn/docs/state-and-lifecycle.htmlReact的生命周期:挂载时 componentDidMount() 钩子在组件输出被渲染到 DOM 之后运行。 适合代码:适合 AJAX 请求卸载前 componentWillUnmount() 钩子在组件卸载之前立即调用。 适合代码:清理监听器获取对象信息更新组件 g...原创 2019-06-26 10:17:41 · 233 阅读 · 0 评论 -
【前端学习笔记】使用create-react-app构建React项目
参考自:https://www.html.cn/archives/9427创建项目首先为项目创建一个目录:CommandLine 代码:mkdir webpack-react-tutorial && cd webpack-react-tutorial创建一个用于保存代码的最小目录结构:CommandLine 代码:mkdir -p src通过运行来启用项目:...原创 2019-06-25 14:34:33 · 502 阅读 · 0 评论 -
【前端学习笔记】CSS属性position以及各个属性值详解,及清除浮动的方法
position属性值:static,absolute,relative,fixed,stickystaticabsoluterelativefixedsticky原创 2019-05-06 17:09:16 · 815 阅读 · 0 评论 -
【HTML5移动开发学习笔记】04-CH6-离线WebAPI+ARIA+地理API
离线Web应用localStorage,sessionStorageAPI,离线应用缓存API,连接事件,状态,indexDB。1,是否连接上网采用navigator对象的onLine属性。var isOnline = navigator.onLine;返回true或false,true代表用户是在企业内网的而不一定意味着用户必然能访问互联网。2,应用缓存AppCache-指定哪些...原创 2019-04-25 17:12:00 · 281 阅读 · 0 评论 -
【算法学习笔记】排序算法详解-稳定性,各排序算法排序方法
内容来自:https://zhuanlan.zhihu.com/p/36120420定义稳定性定义:排序前后两个相等的数相对位置不变,则算法稳定。好处从一个键上排序,然后再从另一个键上排序,第一个键排序的结果可以为第二个键排序所用。各排序算法的稳定性稳定的排序:基数排序、冒泡排序、直接插入排序、两分插入排序、归并排序不稳定的排序:堆排序、快速排序、希尔排序、直接选择排序排序算法...原创 2019-04-29 20:28:30 · 282 阅读 · 0 评论 -
【前端学习笔记】跨域,解决办法
跨域+如何解决https://segmentfault.com/a/1190000015597029浏览器的同源策略导致了跨域。“同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。”浏览器是从两个方面去做这个同源策略的,一是针对接口的请求,二是针对Dom的查询。没有同源策略限制的接口请求服务端验证通过后会在响应头加入S...原创 2019-04-19 18:01:00 · 296 阅读 · 0 评论 -
【前端学习笔记】做一个模态框窗口弹出,有动画哦
内容学习自:https://www.bbsmax.com/A/WpdKQLrJVQ/CSS3有了三种特殊效果的处理方式:过渡(transition),动画(animation),变化(transform)。CSS3标准化前,各主流浏览器靠前缀提供样式支持。-webkit-transition-delay: 300ms;//webkit-o-transition-delay: 300ms;/...原创 2019-04-19 17:08:16 · 1988 阅读 · 0 评论 -
【前端学习笔记】JavaScript的事件机制-事件绑定,事件监听,事件委托/代理
JavaScript的事件机制,例如,事件绑定、事件监听、事件委托(事件代理)等。来自——http://blog.xieliqun.com/2016/08/12/event-delegate/事件绑定要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称。在JavaScript中,有三种...原创 2019-04-28 16:39:10 · 234 阅读 · 0 评论 -
【前端学习笔记】移动端适配之我见
内容参考自:https://imweb.io/topic/5a523cc0a192c3b460fce3a5https://juejin.im/entry/5c580c02f265da2dc8493f8ahttps://www.cnblogs.com/shenxiaolin/p/5388464.html前言我们知道网页很宽,而移动设备例如手机很窄,如果不进行屏幕适配,很容易导致网页错乱。...原创 2019-04-09 16:43:48 · 261 阅读 · 0 评论 -
【前端学习笔记】BFC块级格式化上下文
参考自:作者:OBKoro1链接:https://juejin.im/post/5909db2fda2f60005d2093db来源:掘金著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。定义BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block...原创 2019-04-09 14:53:40 · 219 阅读 · 0 评论 -
【CRR学习笔记】GET与POST区别
原文来自:https://cyc2018.github.io/CS-Notes作用GET 用于获取资源,而 POST 用于传输实体主体。参数GET 和 POST 的请求都能使用额外的参数,但是 GET 的参数是以查询字符串出现在 URL 中,而 POST 的参数存储在实体主体中。不能因为 POST 参数存储在实体主体中就认为它的安全性更高,因为照样可以通过一些抓包工具(Fiddler)查...原创 2019-03-30 21:42:37 · 208 阅读 · 0 评论 -
【CRR学习笔记】HTTP2.0
HTTP/2.0HTTP/1.1 新特性默认是长连接支持流水线支持同时打开多个 TCP 连接支持虚拟主机新增状态码 100支持分块传输编码新增缓存处理指令 max-ageHTTP/1.x 缺陷HTTP/1.x 实现简单是以牺牲性能为代价的:客户端需要使用多个连接才能实现并发和缩短延迟; 不会压缩请求和响应首部,从而导致不必要的网络流量;不支持有效的资源优先级,致使底层...原创 2019-03-30 21:34:53 · 525 阅读 · 0 评论 -
【CRR学习笔记】HTTPS
HTTP 有以下安全性问题:使用明文进行通信,内容可能会被窃听;不验证通信方的身份,通信方的身份有可能遭遇伪装;无法证明报文的完整性,报文有可能遭篡改。HTTPS 并不是新协议,而是让 HTTP 先和 SSL(Secure Sockets Layer)通信,再由 SSL 和 TCP 通信,也就是说 HTTPS 使用了隧道进行通信。通过使用 SSL,HTTPS 具有了加密(防窃听)、认...原创 2019-03-30 21:29:27 · 217 阅读 · 0 评论 -
【CRR学习笔记】缓存
内容来自:https://cyc2018.github.io/CS-Notes/#/notes/HTTP优点缓解服务器压力;降低客户端获取资源的延迟:缓存通常位于内存中,读取缓存的速度更快。并且缓存在地理位置上也有可能比源服务器来得近,例如浏览器缓存。实现方法让代理服务器进行缓存;让客户端浏览器进行缓存。Cache-Control通过Cache-Contro首部字段来控制缓...原创 2019-03-30 21:15:10 · 307 阅读 · 0 评论 -
【CRR学习笔记】Cookie
内容来自:https://cyc2018.github.io/CS-Notes/#/notes/HTTPCookie-保存状态信息HTTP协议是无状态的,为了让它足够简单,能够处理大量事物,HTTP/1.1引入了Cookie来保存状态信息。定义:服务器发送到用户浏览器并保存在本地的一小块数据,它会在浏览器之后向同一服务器再次发起请求时被携带上,用于告知服务端两个请求是否来自同一浏览器。由于...原创 2019-03-30 21:07:05 · 295 阅读 · 0 评论 -
【CRR学习笔记】HTTP请求、响应、状态码、首部
一、基础知识1,URI,统一资源标识符(uniform resource identifier)URI包含URL(统一资源定位符uniform resource locator)和URN(统一资源名称uniform resource name);2,请求和响应报文请求报文:响应报文:二,HTTP请求方法客户端发送的 请求报文 第一行为请求行,包含了方法字段。...原创 2019-03-30 20:45:20 · 436 阅读 · 0 评论 -
【JS学习笔记】call和apply的区别,call 和 bind 的区别
参考自:https://github.com/lin-xin/blog/issues/7每个函数都有call和apply方法,作用相同。唯一区别,传入参数的方法不同apply()传入两个参数,一个是作为函数的上下文对象,另一个是作为函数参数所组成的数组。call()第一个传入的参数作为函数上下文的对象,后面传入一个参数列表,而不是一个数组。以下用JS的组合继承来演示下。f...原创 2019-03-29 17:38:47 · 153 阅读 · 0 评论 -
【JavaScript学习笔记】JS的继承
JS的常见继承:1,原型链继承(对象间的继承):function Person() { this.name = "CRR"; } function Chinese(){ this.age = 18; } Chinese.prototype = new Person(); var CRR = new Chinese()...原创 2019-03-29 17:05:53 · 129 阅读 · 0 评论 -
【CSS学习笔记】谈谈Flex弹性布局
来自:https://juejin.im/post/5ac2329b6fb9a028bf057caf采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。默认存在两个轴,主轴和交叉轴。主轴最左端:main start -> 最右端:main ...原创 2019-03-27 15:58:51 · 628 阅读 · 0 评论 -
【CSS学习笔记】CSS动画效果实战
animation属性:animation-name :需要绑定的keyframe名称animation-duration:动画持续时间animation-timing-function:动画的运动曲线,linear,ease,ease-in,ease-out,ease-in-out,cubic-bezier(),steps()animation-delay:动画开始之前的延时anim...原创 2019-04-01 11:33:03 · 290 阅读 · 0 评论 -
【前端学习笔记】网站存在很多图片时的优化
往常操作,首先放参考的技术博文链接。内容参考自:https://juejin.im/post/59a7725b6fb9a02497170459自动化优化的工具有:CDN,通过请求生成所需图片返回Grunt、Gulp:grunt-image组件功能强大,支持批量;Google PageSpeed以下是一些常见方法。1,降低图片的大小常见的图片格式有png,gif,jpg等,png...原创 2019-04-08 21:53:35 · 278 阅读 · 0 评论 -
【前端学习笔记】网站换肤功能
内容参考自:https://www.zhangxinxu.com/wordpress/2019/02/link-rel-alternate-website-skin/https://egoist.moe/2015/12/13/how-does-array-slice-call-arguments-work/小陈一谷歌,发现确实如参考文章中所说,大部分实现换肤功能有两种方法:全局class...原创 2019-04-08 17:58:29 · 957 阅读 · 0 评论 -
【前端学习笔记】JS深拷贝、浅拷贝
为什么要有深浅拷贝?赋值,深拷贝,浅拷贝,以及他们的区别。原创 2019-04-08 16:25:09 · 559 阅读 · 0 评论 -
【前端学习笔记】浏览器的渲染过程,阻塞渲染,
参考自:https://juejin.im/entry/59e1d31f51882578c3411c77浏览器请求,加载,渲染一个页面(url请求,到页面生成的过程):1,DNS查询2,TCP连接3,HTTP请求即响应4,服务器响应5,客户端-浏览器解析,渲染页面在第五部分,浏览器对内容的渲染,这一部分,渲染树构建,布局以及绘制。分为5个步骤:1,处理HTML标记并...原创 2019-03-28 22:15:03 · 608 阅读 · 0 评论 -
【JS学习笔记】JS面向对象,JS原型与原型链
参考自https://juejin.im/entry/58e75555b123db15eb8b605e参考自:https://juejin.im/post/5a94c0de5188257a8929d837以下是小陈的阅读理解结果:首先:JavaScript是脚本语言.JavaScript是一种轻量级的编程语言。JavaScript是可插入HTML 页面的编程代码。JS是如...原创 2019-03-28 18:01:47 · 319 阅读 · 0 评论 -
【前端学习笔记】Cookie,实现一个操作cookie的库
内容参考来自:https://segmentfault.com/a/1190000016717878,https://blog.csdn.net/skh2015java/article/details/53560044商业转载需本作者同意。Cookie:小饼干是什么呢,是个存储在本地的数据,可以用来存储状态信息。服务器通过设置:Set-Cookie:<cookie名>=<...原创 2019-04-07 17:42:01 · 435 阅读 · 0 评论 -
【前端学习笔记】JavaScript之setTimeout,setInterval
setInterval周期性地调用一个函数function或者执行一段代码。clearInterval:取消调用setInterval设置的重复执行动作var intervalID = window.setInterval(func,delay[,param1,param2,…]);var intervalID = window.setInterval(code,delay);//不推荐...原创 2019-04-07 16:32:39 · 342 阅读 · 0 评论 -
【JS学习笔记】JS对节点的操作(父节点,兄弟节点)
Document对象,所定义的对象与节点相关系的有:childNodes:返回子元素的合集firstChild:返回某元素的第一个子元素forms:返回文中所有的forms对象getElementsById:getElementsByClassName:getElementsByName:getElementsByTagName:hasChildNodes()head:返回代表...原创 2019-04-07 15:45:31 · 1061 阅读 · 0 评论