- 博客(159)
- 收藏
- 关注
RSS订阅
原创 【前端词典】 Vue 响应式原理其实很好懂
如何理解响应式可以这样理解：当一个状态改变之后，与这个状态相关的事务也立即随之改变，从前端来看就是数据状态改变后相关 DOM 也随之改变。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。抛个问题我们先看看我们在 Vue 中常见的写法：<div id="app" @click="changeNum"> {{ num }}<...
2019-06-11 11:07:08
227
原创 11 种在大多数教程中找不到的 JavaScript 技巧
在这篇文章中，我将分享11条我认为特别有用的技巧。这篇文章是为初学者准备的，但我希望即使是中级JavaScript开发人员也能在这个列表中找到一些新的东西。1..过滤唯一值Set对象类型是在ES6中引入的，配合展开操作...一起，我们可以使用它来创建一个新数组，该数组只有唯一的值。const array = [1, 1, 2, 3, 5, 5, 1]const uniqueArra...
2019-06-06 15:04:21
157
原创 前端之html5和css3
圆角，透明度，rgbaCSS3圆角设置某一个角的圆角，比如设置左上角的圆角：border-top-left-radius:30px 60px;同时分别设置四个角： border-radius:30px 60px 120px 150px;设置四个圆角相同：border-radius:50%;rgba（新的颜色值表示法）1、盒子透明度表示法：opacity:0.1;filter...
2019-06-06 14:47:39
157
原创 关于webpack4的14个知识点,童叟无欺
前言Webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。WebPack和Grunt以及Gulp相比有什么特性其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPac...
2019-06-05 15:37:55
190
原创 我从来不理解JavaScript闭包，直到有人这样向我解释它
正如标题所述，JavaScript闭包对我来说一直有点神秘,看过很多闭包的文章，在工作使用过闭包，有时甚至在项目中使用闭包，但我确实是这是在使用闭包的知识。最近看到的一些文章，终于，有人用于一种让我明白方式对闭包进行了解释，我将在本文中尝试使用这种方法来解释闭包。准备在理解闭包之前，有个重要的概念需要先了解一下，就是 js 执行上下文。这篇文章是执行上下文 很不错的入门教程，文章中...
2019-06-05 14:54:56
126
原创 重学前端（9）正则还真要多练
正则表达式简介什么是正则表达式正则表达式：用于匹配规律规则的表达式，正则表达式最初是科学家对人类神经系统的工作原理的早期研究，现在在编程语言中有广泛的应用。正则表通常被用来检索、替换那些符合某个模式(规则)的文本。 正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。正则...
2019-06-05 14:51:35
151
原创 给前端开发者的5点建议
最近接触了很多前端的小伙伴，和他们谈了很多职业发展的问题，大部分是做了一到三年的前端新手。在交流中发现了一个很有意思的现象，同样是入门不足三年，有部分人觉得前端很有前途，甚至有人年薪已经30W以上，但也有部分人觉得前端薪资不高，技术体系庞杂，迭代速度飞快，苦于学习各种不断更新的技术和框架，心神俱疲。同样是前端工程师，技术体系是相同的，工作年限也是相近的，为什么差别这么大？我在前端领域摸爬滚...
2019-06-05 14:30:54
331
原创 Gulp
一、Gulp: Gulp 是基于node.js的一个前端自动化构建工具，开发这可以使用它构建自动化工作流程（前端集成开发环境）。 使用gulp你可以简化工作量，让你把重点放在功能的开发上，从而提高你的开发效率和工作质量。(gulp是基于node.js开发的)二、Gulp的安装：1、先安装node.js;2、全局安装gulp 打开cmd 命令行窗口安装：命令： npm inst...
2019-05-31 16:16:15
136
原创 跨域解决方案之JSONP，通过借助调用百度搜索的API了解跨域案例
跨域解决方案之JSONP同源策略同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源...
2019-05-31 16:13:26
228
原创 JQuery操作样式以及JQuery事件机制
1.操作样式 1.1 css的操作 功能：设置或者修改样式，操作的是style属性 操作单个样式// name：需要设置的样式名称// value：对应的样式值// $obj.css(name, value);// 使用案例$('#one').css('background','gray');// 将背景色修改为灰色 设置多个样式...
2019-05-31 16:11:40
160
原创 for,for...in,for...of以及foreach循环的用法
1.for()循环// for循环的表达式之间用的是;号分隔的，千万不要写成,for (初始化表达式1; 判断表达式2; 自增表达式3) { // 循环体4}2.for...in索引遍历var obj1 = { name:'张三', age : 17, sex : '男',}for(var k in obj1){ console....
2019-05-31 16:10:23
222
原创 flex和layout移动端布局
1、九宫格 样式为：ul{display: flex;flex-wrap: wrap;//超出换行}li{width: 33%;height: 60px;display: flex;justify-content: center;//子元素水平居中 flex-end结尾 flex-start开头align-items: center;//子元素...
2019-05-31 16:08:36
379
原创 轮播图几种方法
1用纯css实现轮播<div id="container"> <div id="photo"> <img src="img/1.png" /> <img src="img/2.png" /> <img src="img/3.png" /></div></div>样式...
2019-05-31 16:07:14
374
原创 JQuery中的AJAX
$.ajax({ url:"http://www.microsoft.com", //请求的url地址 dataType:"json", //返回格式为json async:true,//请求是否异步，默认为异步，这也是ajax重要特性 data:{"id":"value"}, //参数值 type:"GET", //请求方式 ...
2019-05-31 16:05:01
121
原创 HTML中button标签点击实现页面跳转
方法1：使用onclick事件 1 2 <input type="button"value="按钮" onclick="javascrtpt:window.location.href='http://www.baidu.com/'"/> 或者直接使用button标签 1 <butt...
2019-05-31 16:03:15
1150
原创 js三大框架出现的意义
解决了原始html，css，js的UI与数据状态之间同步的难题，避免了大量的操作DOM代码。 使用了React，Angular和Vue，我们只需要定义一次 UI 界面，不再需要为每个操作编写特定的 UI 代码，同时，每个相同的状态均有相同的输出：当状态改变后，框架自动更新（对应的）视图。 框架工作： React： 重新渲染整个组件。当组件中的状态发生改变时...
2019-05-31 16:00:34
181
原创 【WEB基础】HTML & CSS 基础入门布局与定位
目录块级元素和行内元素 流动布局 浮动布局 定位布局块级元素和行内元素HTML里的元素可以分为块级元素和行内元素两大类：
2019-05-31 15:58:38
165
原创 HTML的基本结构和标签分类
HTML基本结构<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body></html&g...
2019-05-29 15:09:54
202
原创 01-vue指令
什么是Vue.js Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex） Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！ Vue.js 是一套构建用户界面的框架，只关注视图层，它...
2019-05-29 15:07:58
145
原创 前端基础之HTML
概要： 前端介绍 HTML文档结构（head内常用标签，body内标签） HTML基本标签 HTML特殊符号 HTML常用标签 HTML之form表单 一、什么是前端： 1、任何能够直接跟用户打交道的交互界面都可以称之为前端，有前必有后，后端就是我们以前学的服务端。 所谓Python全栈开发，就是前端与后端都写。 ...
2019-05-29 15:05:04
541
原创 前端之javascript1
js介绍和js引入页面JavaScript介绍JavaScript是运行在浏览器端的脚步语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。 JavaScript是浏览器解释执行的，前端脚本语言还有JScript（微软，IE独有），ActionScript( Adobe公司，需要插件)等。前端三大块1、HTML：页面结构2、CSS：页面表现：元素大...
2019-05-29 15:01:33
130
原创 深入V8引擎-Time核心方法之win篇
对于tick，V8写了相当长的一段discussion来讨论windows系统上计数的三种实现方法以及各自的优劣，注释在time.cc的572行，这里直接简单翻译一下，不贴出来了。CPU cycle counter.(Retrieved via RDTSC) CPU计数器拥有最高的分辨率，消耗也是最小的。然而，在一些老的CPU上会有问题；1、每个处理器独立唯一各自的tick，并且处理器之...
2019-05-29 14:57:33
226
原创 Bloodmage的放逐 ppk on javascript 笔记--BOM
浏览器对象模型（Browser Object Model）是语言核心和DOM之间的一个过渡层，这个过渡层特指Javascript的客户端实现，它的主要任务是管理浏览器窗口并使得它们可以彼此通信。window对象是BOM的核心。事实上，window对象还定义了诸如当前页的URL、浏览器的识别字符串等非文档结构的部分。WHAT-WG正在为BOM指定一个规范，BOM正遵循着Netscape 3的事实...
2019-05-29 14:47:29
124
原创 JavaScript判断变量类型
Javascript总共有六大数据类型：number、string、object、Boolean、null、undefined。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 varstr="string"; ...
2019-05-29 14:34:25
122
原创 网页栏目左侧固定，当滚动到底部时自动调整位置
预览地址：https://ovsexia.gitee.io/leftfixed/html: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xm...
2019-05-29 14:25:02
209
原创 随机生成验证码（JS）
效果展示实现原理 1. html：一般就是一个div：<divid="code"></div>，样式根据需求设计。 2.JS：1）将所有的验证码所用的字符放在一个字符串中 2）在这个字符串的字符个数以内，随机生成索引号 3）根据索引号查找对应字符，拼接成验证码的字符串代码实现HTML：&...
2019-05-29 14:16:50
546
原创 小程序mpvue怎么点击按钮获取button里面的值
在小程序里面是没有dom元素的,这个我们只要会小程序的应该都知道,但是在平时开发中我们偶尔会遇到需要点击某个元素获取它的值的情况,在这里给大家列举了两种情况解决方法方式一:数据绑定这种情况的话,对应的场景是只有一个按钮或元素调用这个方法的情况下的在你的.vue文件中的data数据里面添加变量 data() { return { msg:'苏喂...
2019-05-29 14:12:16
537
原创 微信小程序 swiper 组件坑
swiper 组件高度被限制为150px了，所以内容无法撑开。解决办法给这组件重新设置个高度，然后在把里面的图片设置为自动适应容器大小。图片模式设置为 宽度不变 自动适应高度<swiper class="test" .....> <swiper-item> <image mode='widthFix' ...... /...
2019-05-28 15:34:37
1023
1
原创 作用域和作用域链
Js作用域和作用域链作用域指的就是变量和函数（方法）能在哪些区域能调用和使用，全局变量和函数（方法）能在任何地方调用，当然前提是你在声明变量（注意这里指的变量）之后调用，如果在函数内或者函数外没有声明变量直接调用，js会抛出提示引用错误如下：（修改：上图 不是自执行函数是$(document).ready(function()）的简写 也就是等dom加载完加载）如果在函...
2019-05-28 15:34:04
144
原创 前端之移动页面布局
移动端页面布局移动端app分类1、Native App 原生app手机应用程序使用原生的语言开发的手机应用，Android系统用的是java，iOS系统用的是object-C2、Hybrid App 混合型app手机应用程序混合使用原生的程序和html5页面开发的手机应用3、Web App 基于Web的app手机应用程序完全使用html5页面加前端js框架开发的手机应用Vi...
2019-05-28 15:30:20
335
原创 深入V8引擎-Time核心方法之win篇(1)
windows与mac很不一样，实现了一个新的Clock类来管理时间，如下。// We implement time using the high-resolution timers so that we can get// timeouts which are smaller than 10-15ms. To avoid any drift, we// periodically r...
2019-05-28 15:26:24
137
原创 JS批量获取参数构建JSON参数对象
在做系统的时候，往往查询条件是被严格指定的，大量的查询条件，一两个页面还可以通过dom去一个一个获取，再构建参数对象，请求后台接口。这里给大家讲一个批量获取前端参数，构建参数对象。<form name="@ViewData["title"]_FormId" id="@ViewData["title"]_FormId"> <table class="custom_...
2019-05-28 15:22:45
161
原创 【WEB基础】HTML & CSS 基础入门表单
目录前面 表单元素 小结一下前面在网页上显示一段文字、一张图片、一个列表、一张表格等等。这些东西都是事先编辑好显示在页面上只提供给用户看的，实际上，我们可以把这样的页面称之为静态页面。有“静”就有”动”，自然也就有了动态页面，所谓动态页面就是在页面上能提供与用户产生交互的元素，比如：我们想注册成为某个网站的会员，就要填写注册信息提交给网站后台；我们在网上发表评论；我们在网...
2019-05-28 15:20:38
758
原创 Javascript的是三种字符串连接方式
第一种：用连接符“+”连接字符串 1 2 str="a"; str+="b"; 这种方法相对以下两种，最便捷快速。建议100字符以下的连接使用这种连接方式。第二种：以数组作为中介，使用jion函数进行连接 1 2 3 4 vararr=newArray(); arr....
2019-05-28 15:15:38
371
原创 Vue3.0结合bootstrap做多页面应用（1）创建项目
1.首先用 vue --version 命令查一下安装的vue-cli版本，要3.x版本，我原先装的是2.9.6版本的2.卸载vue-cli,执行命令：cnpm uninstall -g vue-clinpm uninstall -g vue-cli ,执行完就好了3.安装vue-cli3.x版本：cnpm install -g @vue/cli4.安装完毕后，查看一下版本：默...
2019-05-28 15:14:36
265
原创 js new关键字
要创建构造函数的实例，肯定要使用到new关键字，但是，到底需要哪些过程呢？我们以下面为例，首先穿件一个构造函数function dog(){ this.name='happy'}接下来我们分步骤来解析创建实例的过程：1.首先，需要创建一个空对象 var obj={}2.接下来我们需要把obj的__proto__属性指向构造函数的prototype, obj.__p...
2019-05-28 15:11:59
89
原创 富文本编辑器vue2-editor实现全屏功能
vue2-editor非常不错，可惜并未带全屏功能，自己实现了一个，供大家参考。实现思路：自定义模块。1. 定义全屏模块FullscreenFullscreen.js2. 通过编辑器的选项注册模块，我是放在了全局的Global.vue中，其他页面直接引用这个选项Global.vue3. 在页面中引用 <vue-editor useCustom...
2019-05-27 15:33:43
2273
2
原创 vue动态绑定class的最常用几种方式
第一种：（最简单的绑定）1.绑定单个classhtml部分： <div :class="{'active':isActive}"></div>js部分：判断是否绑定一个activedata() { return { isActive: true }; }结果渲染为：<div class="acti...
2019-05-27 15:32:09
2282
1
原创 【WEB基础】HTML & CSS 基础入门表格
目录表格的基本结构 表格的标准结构 表格的行、列合并 表格的CSS样式表格的基本结构表格是网页上最常见的元素，它除了可以用来展示数据，还常常被用来排版。虽然现在提倡使用DIV+CSS完成页面布局，但表格框架简单明了，对于繁杂的数据，一个简洁的表格能让其展现的极有条理。简单来说，表格是由行、列（单元格）组成。表格由 <table> 标签来定义。每个表格均有若干行...
2019-05-27 15:30:50
672
原创 mvvm实现一个简单的vue
vue，基于mvvm模式下的一个前端框架 mvvm模式下简单的实现数据代理，数据劫持 1.是用Object.defineProperty 实现数据代理 2.使用发布订阅者模式，配合Object.defineProperty，实现数据劫持 数据劫持包括依赖收集和依赖促发 （只考虑最简单的方式，并且没有包括具体的依赖收集，我模拟的依赖收集，依赖收集得是在模板解析的时...
2019-05-27 15:26:50
122
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人