基础巩固
文章平均质量分 69
Smileyqp沛沛
越努力 越幸运 && 致力成为auto driving行业优秀的前端喵~
展开
-
前端html和css基础知识
大前端时代的技术栈html5语义化标签音视频处理(代替flash)canvas/webGLhistory API (browser路由)requestAnimationFrame原创 2021-04-27 20:45:50 · 228 阅读 · 1 评论 -
JS设计模式
写代码应该如何思考?模块+模块之间的沟通功能的主题对象创建型设计模式单例模式(对于全局使用)工厂模式(频繁创建)建造者模式(复杂需要精细化的对象)工厂模式:JQuery的$,需要大量创建类单例模式:保证全局只有一个实例化对象(例如:vue的root和vuex;react的root和redux,全局只有一个)建造者模式:暴露出一个类,使用的时候可以new这个类,这个类是由很多子类组成,通过别的模块融合起来(精细的输出一个类)案例创建一个动态表单,应该怎样去规定的类或者接口(建造者原创 2020-07-24 15:47:40 · 175 阅读 · 0 评论 -
JS执行顺序
setTimeout(()=>{ console.log('set1')})var p = new Promise((resolve,reject)=>{ console.log('pr1'); //同步执行,Promise的回调是同步执行 resolve()})p.then(()=>{ console.log('then1')})console.log(4)pr14then1set1解析JS:JS顺序执行,异步执行放进异步队列,;Even原创 2020-07-24 10:28:58 · 136 阅读 · 0 评论 -
前端基础知识(Day 1)
如何解决跨域问题jsonp<script>var script = document.createElement('script')script.type = 'text/javascript'script.src = 'http://www.smileyqp.com/login?username=smileyqp&callback=jsonCallback'document.head.appenChild(script)function jsonCallback(原创 2020-06-09 10:31:41 · 146 阅读 · 0 评论 -
nginx部署网站服务
//ssh远程登陆服务器;username是用户名;ip是服务器公网ipssh username@ip //更新软件库sudo apt-get update//安装nginxsudo apt-get install -y nginx//浏览器输入服务器公网ip;或者服务器的公网IP出现welcome to nginx说明成功安装//修改配置文件nginx.conf;//比如我的是/etc/nginx/sites-enabled下面的default指定了80端口只想/var/www/原创 2020-05-14 13:14:41 · 177 阅读 · 0 评论 -
React中ref、组件组合、类型验证
ref方式(抛弃ref为string用React.createRef())React组件组合(子组件使用this.props.children)父组件子组件类型验证propTypes类型验证(PropTypes)必然性验证(isRequired)默认值...原创 2020-05-08 15:41:59 · 327 阅读 · 0 评论 -
前端基础知识
原创 2020-05-06 18:53:22 · 91 阅读 · 0 评论 -
underscore
原创 2019-12-23 15:34:28 · 145 阅读 · 0 评论 -
函数式编程、纯函数
原创 2019-12-23 15:16:33 · 197 阅读 · 0 评论 -
socket.io发送消息
原创 2019-12-03 13:58:43 · 336 阅读 · 0 评论 -
简单js实现div拖拽
css部分#div1{ width: 300px; height: 100%; background-color: #ccc; position: absolute;}hml部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...原创 2019-11-25 15:13:00 · 155 阅读 · 0 评论 -
js使用protobuf
下載鏈接/home/smileyqp/Downloads/protoc-3.11.0-rc-1-linux-x86_64/bin/protoc --js_out=import_style=commonjs,binary:. ./RemoteDriving.protonpm install -g require(对库文件的引用库)npm install -g browserify(这个是...原创 2019-11-25 14:47:04 · 380 阅读 · 0 评论 -
http历史
原创 2019-11-22 16:20:13 · 187 阅读 · 0 评论 -
http基础
原创 2019-11-22 16:09:48 · 53 阅读 · 0 评论 -
(三十四)Jquery源码分析&Jquery中extend方法简单实现
无new化实例对象jquery的简单实现jquery中extend方法的简单实现(function(window,undefined){ function jquery(selector){ return new jquery.fn.init();//返回jquery的函数init构造函数的实例对象 } jquery.fn = jquery.pro...原创 2019-10-29 17:15:47 · 404 阅读 · 0 评论 -
(三十三)用node做为中间层优化应用
中间层架构,优化前端为什么在前段和后台请求中多加一个中间层会优化呢?不是还会多增加一个请求过程吗?服务器之间的请求很快有些前段请求是直接从redis中取,不用从后端数据库中查询请求数据怎样redis和后端的数据保持同步呢?(两种方案)app启动的时候;发一串哈希资源标识符,包含每个页面的现在的资源标识符,后端判断是否最新的,如果不是那么调用方法去更新一下redis建立tcp连接与...原创 2019-10-19 12:37:41 · 352 阅读 · 0 评论 -
(三十二)模板引擎的简单实现
//template.js(function(root){ function extend(){ var target = arguments[0] || {}; var len = arguments.length; var key,options,i = 1; //变量初始的值i从1开始;因为第一个传入的是t...原创 2019-10-18 16:44:22 · 146 阅读 · 0 评论 -
(三十一)extend方法的简单实现
extend语法$.extend( target [, object1 ] [, objectN ] );jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象;也就是将后面两个对象合并,如果有两个相同的key,那么第三个参数的值会覆盖第二个参数的值 function extend(){ var target = arguments[0] || {}...原创 2019-10-18 15:59:28 · 206 阅读 · 0 评论 -
(三十)AO和GO剖析
V8浏览器引擎。V8解析js的工具。栈:存储变量的定义堆:(包含函数定义区;函数缓存区)池:放常量所有变量中存储的都是内存地址。操作变量即是操作内存空间。GO:全局作用域,预加载全局变量;windowAO:局部作用域案例1:案例2:...原创 2019-10-18 14:13:55 · 1161 阅读 · 1 评论 -
(二十九)nginx负载均衡
Lvs只是分发不解析;nginx可以解析和封装http。lvs分发给nginx,nginx再解析分发给web服务器。原创 2019-10-17 11:02:29 · 59 阅读 · 0 评论 -
(二十八)关于前端优化
前端还有哪些值得优化的点代码层面的优化内存管理:避免复杂计算(js语言缺点:不是cpu密集型,不擅长计算;了解V8内存管理机制以及垃圾回收机制eg:闭包对内存的危害)http层面的优化缩小请求体积减少请求次数服务器层面的优化CDN加速(原理:分配离我们最近的服务器)架构层面的优化(MVVM、MVC )利用node做优化本该像后端请求的数据,转向利用no...原创 2019-10-16 13:16:58 · 130 阅读 · 0 评论 -
(二十七)懒加载和预加载最简单demo演示
不是异步加载的时候接收到的是一个对象;异步加载的时候接收的是一个函数;下面图一是非异步加载直接接收的是一个组件对象,直接import的话是打开就引入了;图二用require和import的异步加载;用异步加载的方式优化了打包;避免直接打包成一个大的文件;异步加载是打包成一个个小文件进行按需加载的,避免了首页加载时间过于长的问题。(图二相对于图一的优化是:用import做了一...原创 2019-10-16 13:16:09 · 359 阅读 · 0 评论 -
(十八)作用域、作用域链、查找变量案例分析
作用域由创建时候决定的并不是执行时候var x = 10;function fn(){ console.log(x);}function show(f){ var x = 20; f();}show(fn); //10原创 2019-09-21 13:35:17 · 268 阅读 · 0 评论 -
(七)执行上下文和词法作用域&动态作用域案例分析
概念简析:作用域是指程序源代码中定义变量的区域执行上下文JavaScript 引擎创建了执行上下文栈来管进行上下文的执行管理;其工作原理是:当执行一个函数的时候,就会创建一个执行上下文,并且压入执行上下文栈,当函数执行完毕的时候,就会将函数的执行上下文从栈中弹出//Ex1:var scope = "global scope";function checkscope(){ va...原创 2019-09-02 14:11:34 · 275 阅读 · 0 评论 -
(二十六)关于跨域
浏览器处于安全考虑的同源策略是:协议、域名或者端口三者有一个不同就是跨域JSONP解决跨域利用script标签没有跨域限制的漏洞,通过script指向一个需要访问的地址,并且提供一个回调函数接收返回数据,但是JSONP只限于GET请求<script src="http://domain/api?param1=a¶m2=b&callback=jsonp"&...原创 2019-09-26 15:09:25 · 129 阅读 · 0 评论 -
(二十五)事件循环
原创 2019-09-23 15:42:09 · 60 阅读 · 0 评论 -
(二十四)js内存回收方法
引用计数法标记清除法标记整理法复制整理法什么样的情况会造成内存泄漏?闭包大量全局变量setTimeoutdom元素的引用原创 2019-09-23 14:39:07 · 531 阅读 · 0 评论 -
(十一)关于闭包
闭包的定义:函数A返回了一个函数B,并且B中使用了函数A的变量;那么函数B成为闭包原创 2019-09-16 14:08:16 · 74 阅读 · 0 评论 -
(十)立即执行函数
立即执行函数写法//第一种,较为常用(function(){ })() //第二种,w3c的建议(function(){}() )原创 2019-09-12 11:41:12 · 146 阅读 · 0 评论 -
(九)执行上下文&变量提升案例分析
执行上下文的三个重要属性:变量对象VO (变量;函数声明;函数的形参)作用域链(JS采用词法作用域;其作用域在其定义时候就已经决定)this在生成上下文的时候会有两个阶段第一阶段(创建阶段):JS解释器会找出需要变量提升的变量以及函数,给他们开辟好内存空间函数会整个存进去变量只声明并且赋值为undefined变量提升过程中;相同函数会覆盖上一个函数并且函数优先于变量提升...原创 2019-09-12 10:20:34 · 181 阅读 · 0 评论 -
(八)JS内置类型基础
JS的七种内置类型JS分为七种内置类型;其中内置类型又分为两大类:基本类型和对象(Object);基本类型有六种:null undefined number string boolean Symbol其中js的number类型也是浮点类型的,没有整型;NaN也属于number类型,并且不等于自身对象Object是引用类型,其在使用的时候会遇到深拷贝和浅拷贝的问题变量类型type...原创 2019-09-03 14:16:22 · 142 阅读 · 0 评论 -
(六)js的arguments
arguments是保存传入函数的所有参数的一个类数组对象;arguments对象是所有(非箭头)函数中都可用的局部变量;其索引从0开始;arguments对象类似于Array,但除了length属性和索引元素之外没有任何Array属性,但是它可以转化成一个真正的Array...原创 2019-09-02 11:48:31 · 118 阅读 · 0 评论 -
(五)关于解构赋值
解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。简而言之的结构赋值使用相同的语法取值允许解构设置默认值var a, b;[a=5, b=7] = [1];//a=1];b=7结构赋值可以简化变量交换var a,b = 1,2;[a,b] = [b,a]//a=2;b=1可以忽略某些返回值va...原创 2019-09-02 11:25:20 · 220 阅读 · 0 评论 -
(四)JavaScript深入之词法作用域和动态作用域
看了一些博文总结:JavaScript 采用的是 词法(静态)作用域,函数的作用域在函数定义时决定(函数的作用域基于函数创建的位置)动态作用域,函数的作用域是在函数调用的时候才决定的作用域可以用this指向来分析。...原创 2019-08-31 17:46:28 · 136 阅读 · 0 评论 -
(三)实现一个 new
new 的过程新生成了一个对象链接到原型绑定 this返回新对象function create() { // 创建一个空的对象 let obj = new Object() // 获得构造函数 let Con = [].shift.call(arguments) // 链接到原型 obj.__proto__ = Con.prototype // 绑定 this,执行...原创 2019-08-28 11:51:47 · 179 阅读 · 0 评论 -
(二)JavaScript之原型到原型链
每个函数都有一个 prototype 属性;并且prototype是函数才会有的属性函数的 prototype 属性指向了一个对象,这个对象正是调用该构造函数而创建的实例的原型;每一个对象都会从原型"继承"属性function Cat() {}Cat.prototype.name = '布丁';var cat1 = new Cat();var cat2 = new Cat();...原创 2019-08-27 19:06:48 · 88 阅读 · 0 评论 -
(十二)关于深浅拷贝
聊及深浅拷贝通常出现在这种情况下;讲一个变量值赋值给另外一个变量之后,当改变其中一方另外一方也会随之改变;这是由于赋值时候是赋值的是引用地址,而并非重新拷贝到另外一个内存之中。浅拷贝(浅拷贝有两种解决方案)方案一:Object.assignObject.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象//Object.assign()的用法c...原创 2019-09-16 14:32:29 · 126 阅读 · 0 评论 -
(十三)关于模块化
ES6模块化CommonJS模块化AMD模块化CMD模块化模块化对比ES6 & CommonJS不同点:CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。CommonJS 模块是运行时加载,ES6 模块是编译时输出接口AMD&CMD不同点:AMD 推崇依赖前置、提前执行,CMD推崇依赖就近、延迟执行相同点:都是异...原创 2019-09-16 14:52:47 · 69 阅读 · 0 评论 -
(十四)防抖和节流
防抖适用于表单输入验证防止表单多次提交//延迟执行的防抖函数//当上一次没有完成时候再次触发就清除重新计时;但是这种是只有在最后才会触发funcfunction debounce(func,wait = 500){ let timer = null; return function(...args){ if timer clearTimeout(timer); timer...原创 2019-09-16 17:26:06 · 138 阅读 · 0 评论 -
(二十三)函数柯里化
函数柯里化:多参减少变成单参。函数反柯里化:单参减少变成多参。原创 2019-09-23 11:52:20 · 51 阅读 · 0 评论