web前端
文章平均质量分 63
WHU_JiangLong
这个作者很懒,什么都没留下…
展开
-
函数柯里化实现JS bind方法
一、函数柯里化及其典型应用函数柯里化(Currying)是JavaScript函数编写中一种高级技巧,柯里化实质上是把接收多个参数的函数转换成接收一个单一参数(也即原函数中第一个参数)的函数,该函数能够返回一个新函数,新函数能够接收原函数的剩余参数并返回对应结果。简而言之,柯里化对于函数的简化作用在于,通过对首个参数的调用封装,从而返回一个功能不变,但前提明确的函数简易版。如正则表达式的判断:// 正常正则验证字符串 reg.test(txt)// 函数封装后function check原创 2021-12-08 11:18:25 · 423 阅读 · 0 评论 -
JavaScript风格指南
一、对象1.对象创建时,属性键名不要使用保留字// badvar person = { default: { name: 'jl' }, private: true};// goodvar superman = { defaults: { name: 'jl' }, hidden: true};二、数组1.向数组增加元素时使用push,避免使用数组位直接赋值var someStack = [];// badsomeStack[someStack..原创 2021-12-08 10:58:20 · 359 阅读 · 0 评论 -
前端工程性能优化
依据雅虎14条性能优化原则,《高性能网站建设指南》及《高性能网站建设进阶指南》中提到的性能优化点,按照优化方向进行分类整合,得到以下优化原则分类表:优化方向 优化手段 请求数量 合并脚本和样式表,CSS Sprites,拆分初始化负载,划分主域 请求带宽 开启GZip,精简JavaScript,移除重复脚本,图像优化 缓存利用 使用CDN,使用外部JavaScript和CSS,添加Expires头, 减少DNS查找,配置ETag,使AjaX可缓存...原创 2021-11-11 15:20:05 · 627 阅读 · 0 评论 -
为什么Vue组件中的data必须是函数而非对象
1、对象还是函数?vue官方文档在声明式渲染这一节中给了我们这样的一个demo:<div id="app"> {{ message }}</div>var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})在这个demo中data是一个对象,通过 new Vue 创建的 Vue 实例中,能够直接把data上的message属性通过模板渲染到页面上。但在官方文档的原创 2021-08-07 16:34:47 · 263 阅读 · 0 评论 -
Web页面完整请求及渲染过程
前端技术人员离不开计算机网络通信知识的了解,基础的网络架构模型与TCP、HTTP等相关知识掌握之后,不免会考虑:我们在互联网使用过程中,输入一个网址后,获取网址对应的Web页面信息并成功渲染到浏览器窗口这一整套流程是如何实现的呢?本文就针对这一日常而又复杂的请求渲染流程进行一次较为全面的梳理介绍。一、Web页面请求过程1.DHCP配置主机信息在上网之前,我必须要让网络知道我是谁,只有网络知道我的身份,才会允许我们对它进行访问。因此,我们首先需要一个自己电脑对应的IP地址。假设我们最开始没有I原创 2021-04-27 10:17:20 · 774 阅读 · 1 评论 -
Web App开发经验总结
前端这个领域,上手很快,只需要短期学会html,css,js就可以开始写常规网页了。但另一方面,入门简单对应的是广泛、复杂、快速迭代的前端知识体系、框架、工具等一个又一个难题。以移动端开发为例,至今Web App开发仍然处于一个你方唱罢我登场的群雄割据时代,缺少一个绝对主流、统一的开发工具或规范。本文也仅仅基于个人有限的移动端开发经验及网上各路技术经验分享内容对Web App开发进行部分经验总结,供大家参考。一、不要刻意模仿移动端系统原生的默认样式和交互毕竟 WebApp 缺乏原生支持,肯定有模仿不原创 2021-03-09 14:15:23 · 644 阅读 · 0 评论 -
CSS在移动端适配中的部分问题总结
一、像素CSS即浏览器的渲染,而浏览器的渲染一定是基于像素而言的。对于像素,首先需要明确两个概念,即物理像素与逻辑像素。1.物理像素物理像素就是反映显示屏的硬件条件,反映的就是显示屏内部led灯的数量,可以简单理解,一组三色led代表一个物理像素,当然根据屏幕物理属性以及处理led的方法不一样。强调这是物理的,因为这是一个纯硬件指标。比如我把屏幕锯了一半,物理像素就只有一半。2.逻辑像素逻辑像素是为了调和距离不一样导致的差异,将所有设备根据距离,透视缩放到一个相等水平的观看距离之后得到的原创 2021-01-20 16:27:39 · 396 阅读 · 0 评论 -
前端单页面应用路由实现原理
一、前端单页面路由本质HTML5中对浏览器history对象方法进行了扩展,前端单页面应用的路由实现本质上都是基于history对象方法的封装实现用户url访问的存储记录与页面更新。二、history对象新增方法1.pushState(state,title,url)该方法会在历史记录中新增一条记录,改变浏览器的url,但是不刷新页面。pushState方法接受三个参数,state:一个与添加的记录相关联的状态对象,主要用于popstate事件。该事件触发时,该对象会传入回调函数。也转载 2020-10-21 11:13:41 · 1114 阅读 · 0 评论 -
前端基本网络协议知识整合
一、ICMP协议ICMP协议(Internet Control Message Protocol)的全称是“Internet控制消息协议”,它是IPv4协议族中的一个子协议,用于IP主机、路由器之间传递控制消息。控制消息是在网络通不通、主机是否可达、路由是否可用等网络本身的消息。这些控制消息虽然不传输用户数据,但是对于用户数据的传递起着重要的作用。ICMP协议与ARP协议不同,ICMP靠IP协议来完成任务,所以ICMP报文中要封装IP头部。它与传输层协议(如TCP和UDP)的目的不同,一般不用...原创 2020-10-19 15:58:07 · 1341 阅读 · 0 评论 -
JS中一道关于函数柯里化的面试题
问题:实现一个函数,使得其运算结果可以满足如下预期结果:add(1)(2) // 3add(1, 2, 3)(10) // 16add(1)(2)(3)(4)(5) // 15解答:该题目实际上是利用了JS中函数的一种高级用法--函数柯里化,即将参数多次传入,采用参数缓存的技巧进行函数的apply循环调用,最终计算出结果。代码如下:function add () { var args = Array.prototype.slice.call(arguments);//缓存原创 2020-09-21 15:35:05 · 395 阅读 · 0 评论 -
Vue源码中的对象相等比较
Vue源码中的对象比较函数写的极为经典漂亮,在此进行部分注释并添加一个函数类型比较判断,代码如下:function isObject(o) { return typeof o==='object' } function isFunction(o) { return typeof o==='function' } function looseEqual(a,b) { //如果a和b都是值类型,可以直接判断是否相等原创 2020-09-17 15:51:39 · 1700 阅读 · 0 评论 -
谈谈对Cookie Session Token的认识
一、序言对从事Web开发的或者有过Web开发经验的朋友来说,身份验证一定是一个避不开的话题。即使是再小的系统,也少不了登录这道程序。不管是前端还是后端,总要和会话打交道,那么,就从会话开始,聊聊常用的验证方式:Cookie、Session、Token。在计算机术语中,会话是指一个终端用户与交互系统进行通讯的过程,TCP的三次握手就创建了一个会话,TCP关闭连接就是关闭会话。理论上,一个用户的所有请求操作都应该属于同一个会话。但是,Web应用程序是使用HTTP协议传输数据的。HTTP协议是无状态的协议原创 2020-09-11 11:12:43 · 211 阅读 · 0 评论 -
Vue Router在项目工程中部分具体用法的总结
一、序言对于一般性的前后端分离部署下的Vue项目而言,Vue Router可以说是必不可少的工具。最基本的情况下,我们在工程中使用Vue Router实现前端路由的路由注册、管理、跳转等功能。但Vue Router提供的功能绝不仅限于此,合理巧妙地使用Vue Router能够在很多情况下方便开发及实现一些特殊效果。二、路由守卫2.1 全局路由守卫Vue Router的一个常用配置就是路由守卫,通过router.beforeEach可以在每一次路由跳转之前进行权限判断或其他针对路由跳转的逻辑处原创 2020-08-19 16:34:30 · 238 阅读 · 0 评论 -
关于Vue全局方法配置的总结
通过Vue-Cli搭建的Vue项目工程中,我们通常都会或多或少地使用Vue官方支持插件(如Router、Vuex、VueI18n等)、第三方插件、自定义工具函数等等,以方便我们的开发工作、优化代码结构、减少代码冗余。本文就目前我所接触到的业务需求,对Vue工程中的全局方法、属性配置方式进行总结。一、Vue.use()Vue官方文档中对Vue.use()定义如下:即插件需要支持install方法方能使用Vue.use()方式在Vue工程中进行全局配置,常用的如Vue-router,Vuex,E原创 2020-08-06 10:37:51 · 705 阅读 · 0 评论 -
Dart学习笔记
一、变量1.var类似于JS中的var,可以接收任何类型的变量,但区别在于,Dart中var变量一旦赋值,类型便确定,不能更改其类型。之所以有此差异是因为Dart本身是一个强类型语言,任何变量都是有确定类型的,在Dart中,当用var声明一个变量后,Dart在编译时会根据第一次赋值数据的类型来推断其类型,编译结束后其类型就已经被确定,而JavaScript是纯粹的弱类型脚本语言,var只是...原创 2020-03-27 10:03:17 · 236 阅读 · 0 评论 -
浏览器事件机制
事件机制无论是前端还是移动端,用户在浏览网页或者APP时,通常会在屏幕上产生很多交互操作,例如点击、选择、滚动屏幕、键盘输入等待,并且网页或APP也会根据不同的操作进行响应变化。这种基于事件的处理方式,本质上是一种消息传递机制,称之为事件机制。在事件机制中,有3样最重要的东西:事件生产者 事件对象 事件消费者事件生产者可以产生一系列的事件对象,然后事件对象携带着必要的信息,传递给...转载 2020-03-25 10:48:25 · 1607 阅读 · 0 评论 -
JavaScript数组的15个常用方法
1.some()此方法以参数传递的函数测试数组。如果有一个元素与测试元素匹配,则返回true,否则返回false。some() 不会对空数组进行检测;some() 不会改变原始数组。const myAwesomeArray = ["a", "b", "c", "d", "e"]myAwesomeArray.some(test => test === "d")//-----...原创 2020-03-24 15:47:32 · 186 阅读 · 0 评论 -
CSS中的选择符
(1)id选择器(#myid)(2)类选择器(.myclassname)(3)标签选择器(div,h1,p)(4)后代选择器(h1 p)(5)相邻后代选择器(子)选择器(ul>li)(6)兄弟选择器(li~a)(7)相邻兄弟选择器(li+a)(8)属性选择器(a[rel="external"])(9)伪类选择器(a:hover,li:nth-child)(...原创 2020-03-24 13:35:53 · 141 阅读 · 0 评论 -
CSS盒模型
HTML中,每个html标签都可以理解为一个方块,然后这个方块又包着几个小方块,如同盒子一层层的包裹着,这就是所谓的盒模型。盒模型分为IE盒模型和W3C标准盒模型。1.W3C标准盒模型属性width,height只包含内容content,不包含border和padding。2.IE盒模型属性width,height包含content,border和padding,指的是conten...原创 2020-03-24 10:25:41 · 97 阅读 · 0 评论 -
浏览器中的缓存机制
浏览器中的缓存即浏览器保存通过HTTP获取的所有资源,是浏览器将网络资源存储在本地的一种行为。一、缓存资源存储位置及优先级1.memory cacheMemoryCache顾名思义,就是将资源缓存到内存中,等待下次访问时不需要重新下载资源,而直接从内存中获取。Webkit早已支持memoryCache。目前Webkit资源分成两类,一类是主资源,比如HTML页面,或者下载项,一类是...原创 2020-03-21 10:22:33 · 149 阅读 · 0 评论 -
JavaScript执行机制
JavaScript是一门单线程语言,因此,JavaScript中的“多线程”均为单线程模拟而成。JavaScript中的时间循环: 既然js是单线程,那就像只有一个窗口的银行,客户需要排队一个一个办理业务,同理js任务也要一个一个顺序执行。如果一个任务耗时过长,那么后一个任务也必须等着。从而我们将js中的任务划分为同步任务和异步任务两类。 当我们打开网站时,...原创 2020-03-19 15:45:48 · 99 阅读 · 0 评论 -
前端框架选择:React与Vue的对比
1.如果习惯使用模板语言构建应用程序,Vue更为适合。 将标记放在HTML文件中是Vue应用程序的默认选项。与Angular类似,大括号用于数据绑定表达式,指令(特殊的HTML属性)用于向模板添加功能。一个典型的Vue模板例子如下:<div id="app"> <p>{{ message }}</p> <button v-o...原创 2020-03-19 14:49:42 · 383 阅读 · 0 评论 -
ES6异步解决方法:Promise与async
PromisePromise 对象是由关键字 new 及其构造函数来创建的。一共有三种状态,分别为pending(进行中)、fulfilled(已成功)和rejected(已失败)。创建示例如下:const promise = new Promise((resolve, reject) => { // do something here ... if (succes...原创 2020-03-19 11:02:44 · 160 阅读 · 0 评论 -
前端开发值得收藏的网站
工作空闲时间,作为前端开发人员,还是希望利用好这段宝贵的时间多学习一些前端资源,了解当前前端知识体系,从整体上对当前行业有一个由浅入深的了解和掌握。后续还会慢慢更新好用的前端相关网站,加油!1.CodePen(https://codepen.io)CodePen支持在线查看和修改页面展示代码,分为页面效果块、html代码块、css代码块与js代码块。CodePen->Exp...原创 2019-11-28 11:26:40 · 269 阅读 · 0 评论 -
ChromeDevTools值得记住的小知识
1.Element面板Elements 面板主要用于对页面 HTML 和 CSS 的检查以及可视化编辑。DOM树右击页面任意处,选择检查 / 审查元素,查看选中页面对应的 DOM 元素 点击,当图标显示为蓝色时,鼠标点击页面任意一处,可以查看选中页面对应的 DOM 元素 鼠标悬停 DOM 树上的任意一个节点,页面会用淡蓝色的蒙板在页面上标记 DOM 节点对应的页面 按键盘的向上...原创 2019-11-08 16:13:37 · 1023 阅读 · 0 评论 -
HTTP相关知识
1.HTTP简介HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传送协议。HTTP是一个基于TCP/IP通信协议来传递数据(HTML 文件, 图片文件, 查询结果等)。2.主要特点1、简单快速:客户向服务器请求服务时,只需传送请求方法和路径。请...转载 2019-11-07 11:18:04 · 126 阅读 · 0 评论 -
ES6数组常用操作
1.扩展运算符扩展运算符可以将数组内容展开,可以用于替代函数的apply方法。function f(x, y, z) { // ...}let args = [0, 1, 2];f(...args);//参数数组展开let arr1 = [0, 1, 2];let arr2 = [3, 4, 5];arr1.push(...arr2);//扩展运算符可以用于数...原创 2019-11-04 10:59:12 · 149 阅读 · 0 评论 -
ES6数组常用扩展方法
1.扩展运算符扩展运算符可以将数组内容展开,可以用于替代函数的apply方法。function f(x, y, z) { // ...}let args = [0, 1, 2];f(...args);//参数数组展开let arr1 = [0, 1, 2];let arr2 = [3, 4, 5];arr1.push(...arr2);//扩展运算符可以用于数...转载 2020-03-24 10:27:03 · 268 阅读 · 0 评论 -
web前端笔记:url,href,src的区别
**URL(Uniform Resource Locator)**统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。 结构基本URL包含模式(或称协议)、服务器名称(或IP地址)、路径和文件名,如“协议://授权/路径?查询”。完整的、带有授权部分的普通统转载 2017-10-13 14:51:18 · 1192 阅读 · 0 评论 -
web前端笔记:html5的<b>标签
在HTML4.01中: < b > < i > 是视觉要素(presentationl elements),分别表示无意义的加粗,无意义的斜体,表现样式为 { font-weight: bolder },仅仅表示「这里应该用粗体显示」或者「这里应该用斜体显示」,此两个标签在HTML4.01中并不被推荐使用; < em > 和 < strong > 是表达要素(phrase elements)转载 2017-10-10 16:27:01 · 2013 阅读 · 0 评论 -
web前端笔记:CSS top属性问题
首先需要搞清楚CSS的定位问题: CSS定位常用方式包括:1.absolute绝对定位,其绝对的意思为相对于最邻近的非static定位祖先进行定位。而非static定位的意思即在CSS属性中对position属性进行了定义(包括absolute,relative)。2.relative相对定位,即相对于其父元素进行定位。3.fixed固定定位,即相对于浏览器窗口进行固定定位,上下拖动进度条均不会影原创 2017-10-10 15:28:46 · 2495 阅读 · 0 评论 -
web前端开发笔记:JavaScript面向对象总结
1.类的定义以及基于类创建示例对象:function Dog(){var name=fido;}var dog=new Dog();2.定义公有属性和私有属性 定义私有属性: 1.函数中:var定义 2.函数外:对象.属性名定义function Dog(){var name=fido;}var dog=new Dog();dog.weight=80;alert(dog.weig原创 2017-10-19 10:59:41 · 449 阅读 · 0 评论 -
web前端开发笔记:name与id属性区别
可以说几乎每个做过Web开发的人都问过,到底元素的ID和Name有什么区别阿?为什么有了ID还要有Name呢?! 而同样我们也可以得到最classical的答案:ID就像是一个人的身份证号码,而Name就像是他的名字,ID显然是唯一的,而Name是可以重复的。上周我也遇到了ID和Name的问题,在页面里输入了一个input type=”hidden”,只写了一个ID=’SliceInfo’,赋值后s转载 2017-10-18 11:56:51 · 4174 阅读 · 0 评论 -
web前端开发笔记:CSS伪类总结
在CSS2.1中,伪类包括**链接伪类、动态伪类、静态伪类**。1.链接伪类:链接伪类适用于超链接标签,包括:link与:visited两个伪类。:visited可以对已经访问过的地址超链接进行样式定义。而:link标签则可以对包含无实际意义的所有未访问超链接进行样式定义,如`Just the way you are`(链接无href属性,即非链接)。2.动态伪类:动态伪类包括:focus,:h原创 2017-10-18 11:38:49 · 518 阅读 · 0 评论