基础加固
关注
分享
扫一扫
文章平均质量分 84
开心大表哥
高级前端开发进阶版
展开
-
eval跟new Function的区别是什么?是否有共同点?
eval()是一个危险的函数， 它使用与调用者相同的权限执行代码。如果你用eval()运行的字符串代码被恶意方（不怀好意的人）修改，您最终可能会在您的网页/扩展程序的权限下，在用户计算机上运行恶意代码。更重要的是，第三方代码可以看到某一个eval()被调用时的作用域，这也有可能导致一些不同方式的攻击。相似的Function就不容易被攻击。原创 2022-04-19 23:37:26 · 2480 阅读 · 6 评论 -
js将带有日期格式的数组对象按时间降序重新排列，最后打印数组对象的日期
需求：后台将一个带有日期格式（不是时间戳）的数组对象给到前端，前端打印这个数组对象的日期时需要按时间降序排列思路：1.先将对象中的日期字段变成时间戳，然后通过sort()来排序，接着将对象中的时间戳变成日期； 2.先给对象增加一个字段publishTimeNew，用来保存时间戳；然后通过sort()来排序publishTimeNew虽然第二种思路多增加了一个publishTimeNew字段占...原创 2018-10-30 18:01:10 · 10498 阅读 · 3 评论 -
gitlab-ci前端在阿里云实现nodejs可持续化集成部署
前言不甘心当一个切图仔，所以什么都要学一下；可持续化集成是一个项目工程架构的问题；但在这篇文章中我将它缩小到了前端的领域内。必要条件一台阿里云服务器-2核4G以上(我的心好痛800大洋)技术栈linux操作基础git/github/gitlabnodejs环境基础步骤...原创 2019-07-04 15:47:07 · 2763 阅读 · 3 评论 -
vue源码分析系列:用sourcemap调试源码
由于前几篇文章是用vue-cli直接分析的，今天我们学习直接调试vue源码。安装vue（mac机)1.在GitHub上克隆官方的vue-地址2.安装依赖npm install修改vue项目1.在package.json script dev 增加--sourcemap指令"dev": "rollup -w -c scripts/config.js --environment TARGE...原创 2019-06-12 11:49:36 · 10623 阅读 · 5 评论 -
vue源码分析系列一：new Vue的初始化过程
import Vue from ‘vue’（作者用的vue-cli一键生成）node环境下import Vue from 'vue'的作用是什么意思？在 NPM 包的 dist/ 目录你将会找到很多不同的 Vue.js 构建版本。这里列出了它们之间的差别：具体参考：官网完整版：同时包含编译器和运行时的版本。编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。运行时...原创 2019-06-04 10:50:25 · 4020 阅读 · 1 评论 -
vue源码分析系列三：render的执行过程和Virtual DOM的产生
render手写 render 函数，仔细观察下面这段代码，试想一下这里的 createElement 参数是什么 。new Vue({ el: '#application', render(createElement) { return createElement('div', { attrs: { id...原创 2019-06-06 13:50:19 · 676 阅读 · 0 评论 -
vue源码分析系列二：$mount()和new Watcher()的执行过程
续vue源码分析系列一：new Vue的初始化过程在initMixin()里面调用了$mount()if (vm.$options.el) { vm.$mount(vm.$options.el);// 挂载dom元素}$mount()方法定义vm的原型上本身就定义了一个$mount(如下所示)，然后通过重写$mount方法，最后返回的时候，调用这个缓存$mount方法。//...原创 2019-06-05 10:18:56 · 1445 阅读 · 0 评论 -
js获取富文本中的第一张图片url正则公式及去除字符串里面的html标签的正则公式
js获取富文本中的第一张图片url正则公式及去除字符串里面的html标签后台发来一个富文本字符串里面可能包含了0、1、2、3…图片标签（img）,我们的任务是获取这个字符串里面第一张图片的url，如果没有图片则放回空var imgUrlFun = function(str){ var data = ''; str.replace(/<img [^&...原创 2018-10-30 13:51:25 · 5573 阅读 · 2 评论 -
前端算法：给定一个整数数组和一个目标值，找出数组中和为目标值的两个数、判断一个整数是否是回文数
<!--给定一个整数数组和一个目标值，找出数组中和为目标值的两个数。你可以假设每个输入只对应一种答案，且同样的元素不能被重复利用。示例：给定 nums = [2, 7, 11, 15], target = 9因为 nums[0] + nums[1] = 2 + 7 = 9所以返回 [0, 1]@link https://leetcode-cn.com/problems/tw...原创 2018-10-24 11:12:55 · 1367 阅读 · 2 评论 -
JavaScript引擎运行原理解析
1. 什么是JavaScript解析引擎？简单地说，JavaScript解析引擎就是能够“读懂”JavaScript代码，并准确地给出代码运行结果的一段程序。比方说，当你写了 var a = 1 + 1; 这样一段代码，JavaScript引擎做的事情就是看懂（解析）你这段代码，并且将a的值变为2。“JavaScript 引擎”通常被称作一种虚拟机。JavaScript 虚拟机是一种进程虚拟...原创 2018-09-30 10:16:41 · 5606 阅读 · 1 评论 -
Vue的响应式原理（MVVM）深入解析
[Vue] - 1. 如何实现一个响应式对象最近在看 Vue 的源码，其中最核心基础的一块就是 Observer/Watcher/Dep, 简而言之就是，Vue 是如何拦截数据的读写， 如果实现对应的监听，并且特定的监听执行特定的回调或者渲染逻辑的。总的可以拆成三大块来说。这一块，主要说的是 Vue 是如何将一个 plain object 给处理成 reactive object 的，也就是，...原创 2018-07-10 09:42:09 · 15371 阅读 · 2 评论 -
移动端1px误差的原因以及解决方案
移动端1px问题在面试和工作中会经常遇到，系统地理解它是一个优秀前端的必修课！为什么移动端css里面写了1px, 实际看起来比1px粗. 其实原因很好理解:这2个’px’的含义是不一样的. 移动端html的header总会有一句<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum...原创 2018-05-06 19:32:38 · 5480 阅读 · 0 评论 -
浏览器同源政策之ajax请求不能发送
同源政策（same-origin policy）是浏览器安全的基石同源指的是三个相同 限制范围（1） Cookie、LocalStorage 和 IndexDB 无法读取。（2） DOM 无法获得。（3） AJAX 请求不能发送。下面重点讲解AJAX 请求不能发送： 同源政策规定，AJAX请求只能发给同源的网址，否则就报错。 有4种方法规避这个限制：1.JSO...原创 2018-05-06 10:01:22 · 2096 阅读 · 1 评论 -
es6 promise对象常用案例
ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。//创造一个Promise实例const promise = new Promise(function(resolve, reject) { // ... some code if (/* 异步操作成功 */){ resolve(value); } else { reject(error...原创 2018-05-05 23:41:06 · 613 阅读 · 0 评论 -
简要理解vue的mvvm模式中的双向数据绑定
mvvm（Model-View-ViewModel）模式： 由视图(View)、视图模型(ViewModel)、模型(Model)三部分组成，结构如下图。 通过这三部分实现UI逻辑、呈现逻辑和状态控制、数据与业务逻辑的分离。使用MVVM模式有几大好处： 1. 低耦合。View可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Mo...原创 2018-05-05 11:30:51 · 3408 阅读 · 1 评论 -
http的缓存机制面试版
最近面试了4间公司，有3间问了我http的缓存机制。面试过后我上网查了挺多资料的，找到了一个相对不错的！稍微画了一下重点。先简单介绍一下HTTP报文： HTTP报文就是浏览器和服务器间通信时发送及响应的数据块。 浏览器向服务器请求数据，发送请求(request)报文；服务器向浏览器返回数据，返回响应(response)报文。 报文信息主要分为两部分 1.包含属性的首部(header)—...原创 2018-05-05 02:06:27 · 2657 阅读 · 0 评论 -
简要掌握CommonJS的规范和使用方法
前言：CommonJs规范的出发点：后台JS没有模块系统、标准库较少、缺乏包管理工具；为了让JS可以在任何地方运行，以达到Java、C#、PHP这些后台语言具备开发大型应用的能力；事实上ES6已经出现了模块规范，如果使用ES6的模块规范是无需node.js环境的。因此，需要将commonJS规范和ES6的模块规范区分开来。 1.CommonJS模块规范主要分为三部分：模块定义、模块标识、模块引用...原创 2018-05-04 16:23:06 · 5276 阅读 · 1 评论 -
人人都是webpack使用者，小白从入门到精通秒变大神
什么是WebPack，为什么要使用它？ 因为别人都在用，我不会用怎么跟他们一起装逼？别人说的这些是什么，我根本不懂：类似gulp把自己定位为stream building tools一样，webpack把自己定位为module building system。 在webpack看来，所以的文件都是模块，只是处理的方式依赖不同的工具而已。webpack同时也把node的IO和modu...原创 2018-07-05 18:27:18 · 1509 阅读 · 5 评论 -
从0到1架构webpack+vue前端项目，你自己搭建过vue开发环境吗
前言:作为一个小白，我们经常会迷惘webpack+vue项目究竟要怎样的呢？本次的文章就是为了解答这个问题的，跟着本文的思路你可以很轻易和明白一个简单的webpack+vue项目是怎样构建和运行起来的。源码地址成果图： 图中左边是项目效果，右边是源码。 下载源码后 1.安装必要的组件：npm ii是install的简写啦，我一不小心又开始装B了。。。。2.运行项目...原创 2018-07-07 00:06:04 · 3865 阅读 · 10 评论 -
解析url中的#、&、？的作用和意义
twitter改版，一个显著变化，就是URL加入了&amp;amp;quot;#!&amp;amp;quot;符号。比如，改版前的用户主页网址为http://twitter.com/username改版后，就变成了http://twitter.com/#!/username这是主流网站第一次将&amp;amp;quot;#&amp;amp;quot;大规模用于重要URL中。这表明井号（Hash）的作用正在被重新认识。本文根据HttpWa原创 2018-10-11 15:36:15 · 3765 阅读 · 0 评论 -
js获取url地址中的每一个参数，方便操作url的hash及正则表达式的方式获取在url上参数
js获取url地址中的每一个参数，方便操作url的hash值得收藏&lt;html&gt; &lt;body&gt; &lt;script&gt; //location.search; //可获取浏览器当前访问的url中"?"符后的字串 function parseURL(url) {原创 2018-10-11 15:32:26 · 5971 阅读 · 0 评论 -
正则表达式的高阶使用技巧
零宽断言：零宽断言是正则表达式的一种方法，用于查找在某些内容（但并不包括这些内容）之前或者之后的东西，也就是说他们像\b（匹配一个单词边界，也就是单词和空格间的位置，正则表达式的匹配有两种概念，一种是匹配字符，一种是匹配位置，这里的\b就是匹配位置，例如，“er\b”可以匹配“never”中的“er”，但不能匹配“verb”中的“er”），^（匹配输入字行首），$（匹配输入字行尾）那样用于指定一...原创 2018-09-26 15:30:15 · 1475 阅读 · 0 评论 -
解读es6 class 中 constructor 方法 和 super 的作用
ES6 的 class 属于一种“语法糖”，所以只是写法更加优雅，更加像面对对象的编程，其思想和 ES5 是一致的。类和模块的内部，默认就是严格模式，所以不需要使用use strict指定运行模式。//定义类class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { r...原创 2018-09-19 15:06:34 · 19542 阅读 · 7 评论 -
js通过UA判断ios、android、微信、qq、qq浏览器
function isIPhone(){ //判断是否是ios var u = navigator.userAgent; var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 return isIOS; }var ua = navigator.userAgent.toLowerCase();...原创 2018-09-19 11:15:13 · 4788 阅读 · 0 评论 -
占位图和图片懒加载项目实战详解
占位图（兜底图）：真实图片太大还没有加载完之前先用一张占位图表示这个位置将来会有图片或者说明这个位置是有图片的但是不知道什么原因真正的图片没有加载出来用户只能看到这张占位图；什么是图片懒加载：懒加载也就是延迟加载，当访问一个页面的时候，先把img元素渲染出来，但是不给它真正的src地址，只有当用户需要看到真正图片的时候，才设置图片正真的路径，让图片显示出来。为什么要使用懒加...原创 2018-08-23 14:40:37 · 7691 阅读 · 5 评论 -
活用clone和trigger函数，点击按钮原有事件不触发，之后再触发原有事件
活用clone和trigger函数，点击按钮原有事件不触发，之后再触发原有事件 需求： 网站开发完毕了，然后产品说要在原来的’确认按钮’点击后加一个’弹窗’提醒用户一些注意事项，在用户点击弹窗里面的’同意按钮’后再执行原来’确认按钮’ 里面绑定的事件。需求看起来很简单，但是有一个要求不能在原来代码上改，只能引入一个js文件和一个css文件。 思路： 将’确认按钮’clone出来，然后将它...原创 2018-08-23 10:34:13 · 1339 阅读 · 2 评论 -
css清除浮动的最好的方式和原因
清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。 不清浮动： 清浮动： 原理： （1） display:block使生成的元素以块级元素显示,占满剩余空间 （2）height:0避免生成内容破坏原有布局的高度 （3）visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和...原创 2018-04-30 21:02:10 · 5904 阅读 · 2 评论