前端其他知识
zuiziyoudexiao
真正的自由不是随心所欲,而是自我主宰,若求随心所欲,则必随波逐流。
展开
-
基于javascript实现的网址收藏夹项目
我们在使用浏览器上网时,经常有很多网址需要记录,而浏览器自带了网址收藏夹功能单一使用起来很不方便。于是自己突发奇想基于原生javascript自己实现了一个网址收藏夹来方便自己使用,也经过了长时间的功能迭代。虽然自己最后没有从事前端开发的岗位,但是这个项目还是很大程度上培养了自己编程的兴趣,因此在这里分享以下以前做的这个项目。这个项目可以分门别类记录自己经常使用的网址,比如学习 娱乐 购物等等。而且支持自定义分类标签。可以手动编辑每一个网址信息可以很方便通过各个搜索引擎搜索内容基于.原创 2021-08-03 16:34:00 · 340 阅读 · 0 评论 -
js中的字符串方法总结
charAt方法返回指定索引位置处的字符。如果超出有效范围的索引值返回空字符串。strObj.charAt(index) //例如: var str = "ABC"; str.charAt(1); //结果:B slice方法返回字符串的片段。strObj.slice(start[,end]) //例如: 012345 var str = "ABCDEF"; str.slice(转载 2017-08-09 22:19:15 · 247 阅读 · 0 评论 -
jQuery实现Ajax的封装
load方法load(url,[data],[callback])。data为提交的数据,callback为回调函数,回调函数可以传三个参数,response stutas xhr,第一个参数为从服务器端返回的内容,第二个参数为响应状态success或error,第三个参数为底层js中XMLHttpRequest对象$(‘#box’).load(url)。可直接将从目标地址获取的内容加载填充到当原创 2017-07-27 21:20:43 · 4545 阅读 · 0 评论 -
js解析JSON数据
JSON有两种表示结构,对象和数组。 对象结构以”{”大括号开始,以”}”大括号结束。中间部分由0或多个以”,”分隔的”键值”对构成,键和值之间以”:”分隔,语法结构如代码。{ key1:value1, key2:value2, ...}其中键必须是字符串,而值可以是字符串,数值,true,false,null,对象或数组数组结构以”[”开始,”]”结束。中间由0或多个原创 2017-07-24 15:19:27 · 331 阅读 · 0 评论 -
js事件类型总结
UI事件load 当页面完全加载后触发unload 当页面完全卸载后触发abort 停止下载时,载入的内容没有加载完触发error 发生错误时触发select 当用户选择文本框中的一个或多个字符时触发resize 当窗口大小发生变化时触发scroll 当用户滚动带滚动条元素中的内容时,在该元素上面触发 ps:鼠标滚轮可以触发键盘上下键也可以触发焦点事件blur 在元素失去焦点时触原创 2017-07-23 21:34:14 · 531 阅读 · 0 评论 -
js事件流与事件处理程序
事件冒泡 -事件开始由最具体的元素接受,然后事件沿着dom树向上传播到最上层元素事件捕获 -最顶层元素首先接受到事件,然后事件沿着dom树向下传播,直到传播到事件的实际目标dom事件流 -dom2级事件规定事件流包括三个阶段:事件捕获阶段,处于目标阶段,事件冒泡阶段。首先发生事件捕获,然后是实际的目标接受到事件,最后一个阶段是冒泡阶段,可以在这个阶段对事件做出响应。 -从实际目标往上每个原创 2017-07-23 17:36:00 · 283 阅读 · 0 评论 -
JavaScript DOM基本操作
JavaScript DOM基本操作原创 2017-06-25 16:36:25 · 350 阅读 · 0 评论 -
javascript中函数表达式,闭包
javascript中函数表达式,闭包转载 2017-06-25 16:28:17 · 275 阅读 · 0 评论 -
JavaScript计时
超时调用:(一段时间后再执行代码) var a = setTimeout(“js语句”,毫秒值);取消超时调用: clearTimeout(a);用超时调用实现间歇调用的效果(利用递归实现无限循环调用,可添加结束条件代码或绑定一个终止按钮结束调用)var count=0;var t ;function box(){ count++; t= setTimeout("原创 2017-06-24 19:52:38 · 293 阅读 · 0 评论 -
css3形变与动画
css3形变效果#box{ transform:matrix(); //矩阵变换 transform:translate(x,y)//平移变换 transform:scale(x,y) //水平竖直方向伸缩变换 transform:rotate(); //2d旋转 transform:skew();//倾斜变换 transform: rot原创 2017-06-24 18:10:33 · 935 阅读 · 0 评论 -
浏览器窗口尺寸,滚动条,事件
网页大小(不包括滚动条):document.body.clientWidth document.body.clientHeigh 网页大小另一种获取方式: document.body.scrollWidth document.body.scrollHeight 窗口大小: ...转载 2017-06-24 13:53:47 · 519 阅读 · 0 评论 -
node入门
第一个hello程序var http = require('http'); //创建http对象http.createServer(function(request,response){ //用http对象创建一个web服务,传两个参数一个请求对象一个响应对象 response.writeHead(200,{'ContentType':'text/html;charset=utf-8原创 2017-07-29 20:57:50 · 274 阅读 · 0 评论 -
node接收get与post请求
get方式接收参数前台的一个form表单<form action="./login" method="get"> <table align="center"> <tr> <td>emall:</td> <td><input type="text"原创 2017-07-31 11:42:37 · 585 阅读 · 0 评论 -
异步流程控制async
node中所有的操作都是异步的,有时一个函数需要上一个函数的返回值做参数,这样下来一不小心就会陷入回调地狱的陷阱中,所以学会使用异步流程控制非常重要。 - 串行无关联 多个函数或方法要依次执行,但是他们之间并没有什么联系,只有先后的顺序,比如我要写一个文件,写完之后像用户发送邮件,这两者之间没有必然的联系,但是发邮件必须在写文件完成之后。 var async = require('async翻译 2017-07-31 22:04:16 · 1413 阅读 · 0 评论 -
node连接数据库
直连mysql直连mysql用的比较少,这里直接放个例子:var mysql = require('mysql');//连接数据库var connection = mysql.createConnection({ host:'localhost', user:'root', //用户名 password:'', //密码 database:'study'原创 2017-08-01 00:58:37 · 2279 阅读 · 0 评论 -
node单线程异步,基于事件驱动的理解
在node中绝大多数的操作默认就是以异步的方式进行的。比如:发送一个Ajax请求,在写一个输出语句。$.post('url',{title:'node.js'},function(data){ console.log('收到响应');});console.log('发送请求结束');由于第一步发送Ajax请求需要等待,所以执行到第一步会默认另外开辟空间去执行这个请求,然后立即执行第二步原创 2017-08-01 15:23:57 · 486 阅读 · 0 评论 -
vue.js计算属性
computed方法 -声明了一个计算属性 reversedMessage 。提供的函数将用作属性 vm.reversedMessage 的 getter 。vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。&lt;div id="app"&gt; &lt;p&gt;原始字符串...转载 2018-04-13 14:44:46 · 142 阅读 · 0 评论 -
sass文件的编译
我们都知道css的引入是通过link标签的方法引入的。而sass文件是不能直接引入的,而是把.scss文件编译成css文件再将css文件引入到项目中。Sass 只不过是做为一个预处理工具,提前帮你做事情,只有你需要时候,他才有攻效。在Sass的编译的过程中,是不是支持“GBK”编码的。所以在创建 Sass 文件时,就需要将文件编码设置为“utf-8”。Sass 的编译有多种方法:...原创 2018-04-13 14:43:32 · 1475 阅读 · 0 评论 -
react中使用ajax
一般将数据请求Ajax方法写在组件的hook函数componentDidMount 中,这样一旦页面加载完毕就开始执行Ajax函数。从服务端获取数据库可以将数据存储在 state 中,再用 this.setState 方法重新渲染 UI。当使用异步加载数据时,在组件卸载前使用 componentWillUnmount 来取消未完成的请求。如下例子:获取用户最新信息和共享地址。//...原创 2018-04-13 14:42:13 · 6035 阅读 · 0 评论 -
react组件的生命周期
组件的生命周期可分成三个状态: Mounting: 已插入真实DOM 指react组件被render解析生成对应的dom节点并插入到浏览器整个过程。 Updating: 正在被重新渲染 指一个已经mounted的react组件被render重新渲染的过程。(每当组件的state值发生变化,都会自动执行Updating这个过程,重新渲染页面) Unmounting:已...原创 2018-04-13 14:40:45 · 181 阅读 · 0 评论 -
react的事件处理
React 里面绑定事件的方式和在 HTML中绑定事件类似,使用驼峰式命名指定要绑定的事件属性(如: onClick )为组件定义的一个方法。例如: 在子组件上使用表单。 onChange 方法将触发 父组件state 的更新并将更新的值通过prop属性传递到子组件的输入框的 value 上来重新渲染界面。//创建子组件Content var Content = React.cre...原创 2018-04-13 14:39:29 · 248 阅读 · 0 评论 -
进程和线程
每一个正在运行的程序都称之为进程,进程间相互独立一个进程可以有多个线程,线程之间资源共享举个例子 开个QQ,开了一个进程;开了迅雷,开了一个进程。 在QQ的这个进程里,传输文字开一个线程、传输语音开了一个线程、弹出对话框又开了一个线程。 所以运行某个软件,相当于开了一个进程。在这个软件运行的过程里(在这个进程里),多个工作支撑的完成QQ的运行,那么这“多个工作”分别有一个线程。原创 2017-09-25 00:49:38 · 209 阅读 · 0 评论 -
express框架基本后台处理
入门基本操作var express = require('express'); //引入express模块var bodyParser = require('body-parser');//用于解析请求体var app = express();console.log(app);//use可以接收所有类型的请求 用于将请求体转换为json格式app.use(bodyParser.json(原创 2017-09-22 13:36:30 · 1577 阅读 · 0 评论 -
node常用命令
npm -v //查看npm版本 node -v //查看node版本 node *.js //执行js文件 node //进入命令交互模式原创 2017-09-20 16:41:30 · 1588 阅读 · 0 评论 -
sass的安装
首先到ruby官网http://rubyinstaller.org/downloads安装ruby。安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。运行CMD输入以下命令:ruby -v,检测是否安装成功,若安装成功会打印相关版本信息。如:ruby 2.3.3p222 (2016-11-21 revision 56859) [x64-mi翻译 2017-08-21 17:13:43 · 510 阅读 · 0 评论 -
sass混合器,选择器的继承
sass混合器混合器使用@mixin标识符定义。这个标识符给一大段样式赋予一个名字,这样你就可以轻易地通过引用这个名字重用这段样式。功能类似于编程语言的函数。 - 通过@include来使用这个混合器,放在你希望的任何地方。@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。//定义混合器@mixin rounded-corners { -moz-border翻译 2017-08-20 22:47:55 · 1267 阅读 · 0 评论 -
sass文件的导入
css有一个特别不常用的特性,即@import规则,它允许在一个css文件中导入其他css文件。然而,后果是只有执行到@import时,浏览器才会去下载其他css文件,这导致页面加载起来特别慢。sass也有一个@import规则,但不同的是,sass的@import规则在生成css文件时就把相关文件导入进来。另外,所有在被导入文件中定义的变量和混合器均可在导入文件中使用。使用SASS部分文件;翻译 2017-08-20 17:34:14 · 9096 阅读 · 0 评论 -
sass嵌套CSS 规则;
css中重复写选择器是非常恼人的。但在Sass中,你可以在规则块中嵌套规则块。如:#content { article { h1 { color: #333 } p { margin-bottom: 1.4em } } aside { background-color: #EEE }} /* 编译后 */#content article h1 { color: #原创 2017-08-20 16:54:38 · 5297 阅读 · 1 评论 -
sass中变量的使用
什么是 CSS 预处理器?CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。什么是sassSass 是一门高于 CSS 的元语言,它能用来清晰地、结构化地描述文件样式,有着比普通 CSS 更加强大的功能。变量的使用sass为css引入了变量。你可以把反复使用的cs原创 2017-08-20 15:39:01 · 1504 阅读 · 0 评论 -
js错题集
下面这个JS程序的输出是什么:function Foo() { var i = 0; return function() { console.log(i++); }}var f1 = Foo(), f2 = Foo();f1();f1();f2();答案:010/*(1)Function是引用类型:保存在堆中,变量f1,f2是保存在栈中;原创 2017-08-12 01:36:30 · 918 阅读 · 0 评论