梁婉玲krysliang的博客

Flutter 重写了一套包括底层渲染逻辑和上层开发语言的完整解决方案。这样不仅可以保持试图渲染在Android和ios上的高度一致，在代码执行效率和渲染性能上也可以媲美原生App的体验。那么，flutter是如何完成组件的渲染呢？在计算机系统中，CPU把计算好的内容交给GPU，有GPU完成渲染后放入帧缓冲区，随后视频控制器根据垂直同步信号VSync从帧缓冲区中读取帧数据交给显示器完成图像显示。（Skia是一个底层图像渲染的引擎，具体是怎么工作的，我也不了解，我只知道flutter将..

Electron是一个使用前端的技术来创建桌面应用的框架，打包后可以再MAC、windows和linux上直接运行。1、安装安装的时候按照它官网的文档进行了搭建，但是一直报错，这也是个坑啊。后来把代码改了一下，按照下面的安装方式就可以了创建一个文件夹，然后先clone一个demo下来git clone https://github.com/electron/electron-quick-start然后执行npm i --save-dev ele...

1、在webpack的官网可以看到，webpack是一个文件打包工具，它将复杂的的文件依赖打包成独立的资源文件。换句话说，在webpack里一切文件都是模块，通过loader加载文件，通过plugin注入钩子，最后输出由多个模块组合的文件。那么loader是什么呢？loader用来读取各类资源，比如css、js等。模块loader可以链式调用，链汇总的每个loader都将对资源进行转换，然后将结果传递给下一个loader。也就是说webpack使用loader来管理各类的资源。...

说设计模式之前首先要先了解一下有什么设计原则，也就是你新写一个模式，要遵循什么样的原则。一、设计原则1、单一职责原则：也就是一个对象或方法只做一件事情。尽可能的将对象划分成较小的粒度。2、最少知识原则：对象之间尽可能少进行通信，不要发生直接的交互，如果对象之间有需要进行通讯的，可以转交给第三方进行处理。3、开放-封闭原则：实体（类、模块、函数）等应该是可以拓展等，但是不可以修改，当需要改变一个程序等功能或者给这个程序增加新的功能等时候，可以使用增加代码的方式，尽量避免改变程序的源代码，...

使用vue-cli来构建一个vue项目什么是vue-cli？有了它我们还需要webpack吗？通过几天的学习都知道webpack的使用难度真的有点高，而且文档又很难阅读。而vue-cli是一个可用帮助我们直接进行开发vue的脚手架（帮助我们建立项目框架），使用了vue-cli之后，我们仍然需要像webpack那样去配置一些配置文件如webpack.config.js文件。像进行开发和dev...

在查找webpack的资料的时候，发现大部分的资料对webpack的定义都是这样webpack是当下最热门的前端资源模块化管理和打包工具（就是一个打包器），可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源，还可以将需要加载的模块进行代码分离，等到实际需要的时候再进行异步加载。通过loader的转换，任何资源都可以视作模块，如COMMONJS模块 ,AMD模块，JS CSS ,...

1.let 声明块级作用域变量{}标记块级作用域 我们来思考一下为什么要用let，肯定就是因为var在某一种情况下会导致一些错误无法得到我们预期的结果，这个let就是为了解决这个问题而出生的。var的不足之处： 不足一：这是一个很经典的问题var arr = [ ];for(var i=0;i<10;i++){arr ...

最近在前端群上面看到有人提出了一个概念:BFC，没听懂是什么意思，于是找了一些资料来看看。Formatting Context：指页面中的一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。首先来讲解一些常用的概念：1.普通流普通流就是元素按照其出现的顺序至上而下进行布局，行内元素水平排列，至到本行已经排满了就再续在下一行进行排列...

js引擎主要做了三件事情1.语法分析：就是检查代码有什么语法错误，如果没有则执行二2.预编译：就是在内存中开辟一些空间，存放一些变量和函数3.解释执行：执行代码  预编译的过程主要如下1.创建AO对象2.寻找函数的形参和变量声明，将变量和形参名作为AO对象的属性名，值为undefined。3.将形参和实参相统一，也就是将实参的值赋值给形参4.寻找函数中的函数...

一，VUE的核心1.数据驱动（mvvm模型，只要改变model的数据，视图层就会自动更新）2.视图组件： 把整一个网页的拆分成一个个区块，每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成。二，使用vue1.引入vue之后就可以进行下面的步骤2.创建语法（创建 ，设置数据，挂载，渲染）var vm = new Vue（{}）//参数是一个对象三、定义...

1.安装node2、安装webpack 以及webpack-clinpm install -g webpack webpack-cli3、安装create-react-appnpm install -g create-react-app4、创建一个项目create-react-app 项目名node_modules用于存放项目的依赖包，也就是构建这...

一、分析需求 需要监听安卓的返回键，点击安卓返回键的时候可以正常返回 但是当在tabs的几个页面中按返回键做如下的几个处理 如果在首页tab，那么在连续点击两次返回键后退出应用 在其他tab，按返回键不做处理 二、实现1、思路如果只是监听的话，那么所有页面都将会触发到同一个函数，所以要在处理函数中进行判断，如果是在首页中点击返回键，那么就再进行判...

解决Unable to load script from assets ‘index.androis.build.Make sure your bundle is packaged correclty or your are running apackager server. 然后填入自己的ip地址以及端口号就可以了， 3、添加mobx之后，出现can no...

一、网络协议基础osi中模型有七层，分别是物理层，数据链路层，网络层，传输层，会话层，表示层，应用层五层的网络协议中有，物理层，数据链路层，网络层，运输层，应用层2、其中各层的作用如下（1）物理层，就是定义物理设备的标准，比如网线的接口类型没传输介质的传输速率等，主要是传输比特流，就是（将1，0转换为电流强弱来进行传输，到达目的地后就转化为1，0，...

一、安装1、去官网下载下来点击安装即可node -v出现相关信息，即证明安装成功2、在node中执行文件新建一个web-server.js文件var http = require('http');var serv = http.createServer(function (req,res) {res.writeHead(200,{'Content-Ty...

一、特性1、less中的注释可以使用/**/也可使用//2、变量使用@来定义一个变量，比如@test_width:300px3、混合可以将一个元素中多个的的样式写在一起，比如我定义了一个边框的样式为border.border{ border:solid 5px yellow}我可以在不同的私房去使用这个边框的样式比如.box{ wi...

1、服务端JavaScript在node出现之前，相对于JavaScript，浏览器就是提供了一个上下文，它定义JavaScript可以做些什么。而现在，node.js是另一种上下文，它允许在后端（脱离浏览器的环境）运行，JavaScript。那么既然要在后台运行JavaScript，代码首先需要被解释然后正确的执行，node使用了Google的V8虚拟机来解释和执行JavaScript。...

一、什么是vuexvuex就是用来专门为vue管理状态的。也就是说，我们需要跟其他页面或者组件共享的data，可以使用vuex进行统一的集中式管理。二、vuex的组成在vuex中，有默认的五种基本的对象 state存储状态（变量） getters：对数据获取之前的再次编译，可以理解为state的计算属性，我们在组件中使用$store.getters.fun()...

一、JavaScript有几种类型的值，它们之间的差别是什么1.JavaScript主要有两大类型的值：基本类型，引用类型。其中，1）基本类型包括undefined、null、boolean、number、string、symbol2）引用类型包括对象、数组和函数 2、基本数据类型的特点是1）值是不可改变的，也就是当你定义了这个数据的值之后，除非重新赋值，否则调用这个数...

一、什么是预解释当js引擎读到js文档的时候，在js代码执行之前，就先把所有带var和function的进行提前的生命或者定义（变量提升的原因。）。1、理解声明和定义声明就是要告诉浏览器中，这个变量是存在的，但是不代表这个变量是有对应的值。因此此时它有一个默认的值undefined。var krysliang;定义就是就是确切的给这个变量一个值，不管这个值是什么类型...

学习一些框架的时候总是会有介绍说可以链接CDN，一直不明白这个CDN的用处是什么？用它来链接插件和直接引入本地插件文件有什么区别和优势？今天就来总结一下。 首先，什么是CDN，全名为content delivery network,内容分发网络。就是设置多个这样的节点服务器，它们分布在不同的地方，为了同一件事情工作，这样，有一个节点服务器出现错误也不会影响到其它节点完成数据传输工作，可...

四。使用jQuery的shutter插件进行幻灯片首先引入shutter的css文件和js文件，其中shutter.js依赖jQuery和velocity.js文件，所以要在要在shutter.js文件前面引进这两个文件。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="UT...

使用css来实现幻灯片的效果（1）自动轮播，鼠标移入停止播放，鼠标移出继续播放，但是不能设置按钮自动播放，不能点击一个点跳转到对应的图片思路：切换图片就是像上面js那样的想法，有一个大的容器装着所有的图片，每次想要切换一张图片的时候就用translate来执行左移，但是每次左移之后，我们又不希望立马左移下面一张图片，所以保留一段时间给这张照片停留在那里，所以这个时候下一帧的动画的trans...

1.对象冒充构造函数使用this关键字给所有属性和方法赋值（即采用类声明的构造函数方式）。因为构造函数只是一个函数，所以可以使parent这个函数成为children的方法，然后调用它。children就会收到parent的构造函数中定义的属性和方法var Parent = function (name) {this.name = name;this.say...

transition（过渡）transform（变换）animation（动画）从三个属性就可以知道，tansition是一个过渡属性，就是一个属性从一个值过渡到另一个值，tansform变换，就是一个整体的位置（或整体大小）发生变换，animation动画，就是在一段时间内各种属性进行变化从而达到一个动画的效果。 一、transition（过渡）W3C中对transiti...

一.原生js实现幻灯片效果（直接跳转法）1.分析需求：幻灯片的效果就是在一个可视区域里面，若干个图片进行交替出现，像在下面的图中，可视区域中的图是轮流出现的。 那么如何来实现这个效果呢，我百度了一下大部分都是什么调节left的大小，我没看懂，于是自己来动手来思考怎么做。首先，刚开始的时候，这个区域就只放一张图，等到需要切换的时候就把这个img的src属性修改为需要展示图片所...

position有四个属性值：1.relative2.absolute3.fixed4.static 不设置Position的值，top，left，right，bottom，不起作用，但是设置了position:static也不会起作用。先来说一下最简单的两个值1.static这是position的默认值，也就是不设定position或者设定position:s...

一.什么是伪元素；css的伪元素，之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。 二.after与before这两个伪元素；这个两个伪元素在真正页面元素内部之前和之后添加新内容（当...

这篇的总结是我在看了jQuery的中文文档后写出来的，如果需要查看更详细的细节，请查看https://www.jquery123.com/ 一、常用事件1.点击事件click.click( handler(eventObject) )2.双击事件dbclick3.鼠标在元素上的时候mouseenter4.鼠标移开mouseleave5.hover()，第一个参数是鼠...

一，rem单位如何转换为像素值1.当使用rem单位的时候，页面转换为像素大小取决于叶根元素的字体大小，即HTML元素的字体大小。根元素字体大小乘rem的值。例如，根元素的字体大小为16px，那么10rem就等同于10*16=160px。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta ch...

一、视口（viewport）移动前端的viewport就是浏览器中用于呈现网页的区域。视口通常并不等于屏幕大小。手机端和PC端视口存在差异，电脑端视口等于其分辨率，手机端的视口与分辨率无关，等于设备厂家所指定的宽度。移动端基本视口分辨率设置为980px。  约束视口&lt;meta name="viewport" content="width=device-width,in...

一、原生ajax的实现1.什么是ajax？ajax是异步的javas和xml（ Asynchronous JavaScript And XML）。通过在后台与服务器进行小量的数据交换，ajax可以使网页实现异步更新。就是说可以在不刷新页面的情况下，对页面的某个部分进行刷新。 2.ajax与服务器交换数据的过程是怎么样的 交互的过程  readyS...

一、什么是box-shadow？怎么使用1.text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radius color}                {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半...

一、介绍1.浏览器的内核包括两个部分，一个是渲染引擎，另一个是js引擎。渲染引擎在每个浏览器中不一定相同，例如firefox中叫做Gecko，chrome和safari的是webkit，ie的是trident等。国内浏览器的内核一般都是ie的内核trident。 2.浏览器的工作大体流程如下 所以我们可以看到浏览器会解析三个东西 html/svg/xhtml，渲染引擎...

一、什么是flex任何元素都可定义为flex布局，但一旦它定义了布局为flex，它就变成了一个容器，那么它所有的子元素也自动回成为这个容器的成员。 例如&lt;div class="flex"&gt;&lt;/div&gt;&lt;span&gt;&lt;/span&gt;.flex{    display: flex;}span{    display: ...

1.如果图片加a标签在IE9中会有边框。解决办法：img{    border:none;}  2.rgba不支持IE8--&gt;使用opacityopacity:0.7;/* ff chrome safari opera*/filter"alpha(opacity:70)/*兼容ie*/ 3.ie6,ie7不支持display:inline-bl...

普通函数：根据调用我的人（谁调用我，我的this就指向谁）箭头函数：根据所在的环境（我在哪个环境中，this就指向谁）看下面的例子document.onclick = function () {alert(this); //HTMLDocument}document.onclick = () =&gt; {alert(this); //Window 再看下下面的...

一、什么是瀑布流瀑布流是一种布局方式，就是一行中的块级元素同宽不同高，下一行的第一个元素插入到上一行中高度最小的元素下面。并且在鼠标滚动的时候继续加载图片。像下面的图中，1234这四个区域都是同一个宽度的元素，并且占据了一行的宽度。那么第五块元素想要插进页面的时候，就选择此时高度最小的第四列。依次类推。 所以，我们可以发现，这里的问题主要有以下几个 首行如何布局 ...

1.JavaScript是一个使网页具有交互能力的程序设计语言。 2.设定浏览器属性的属性的方法叫做BOM. 3.驼峰式命名（myMood）是函数名、方法名和对象属性名的命名首选格式。 4.命名变量的时候可以用下划线来分隔每个单词，命名函数的时候使用驼峰式命名。 5.函数在行为方面应该像一个自给自足的脚本，在定义一个函数时，我们一定要把他内部的变量全都明确地声明为局...