web前端
文章平均质量分 65
ma125120
好学上进,努力研究js和css3动画,欢迎进行交流。
展开
-
使用webpack进行打包
使用webpack进行打包Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。 Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。如果想在项目中使用sass,就需要安装相应的loader(node-sass,sass-loader)。原创 2017-07-21 22:25:08 · 525 阅读 · 0 评论 -
前后台分离之数据模拟
前后台分离之数据模拟在前后端分离的项目中,前后端约定好接口以后,就开始进入各自的开发阶段了,这时候我们前端不可避免的就需要进行数据模拟,那么怎么进行数据模拟呢?我觉得有两种:在 客户端 模拟数据,也就是在我们的前端项目中,使用js手写或者使用mockjs。使用这种方式的时候,不管怎么分离,代码中都会存在多余的东西,如独立开发时使用模拟数据,而前后台联调时就要注释掉之前的模拟数据,这样来回...原创 2018-07-26 22:59:35 · 681 阅读 · 0 评论 -
Angular6笔记之封装http
Angular6笔记之封装http最近抽空学习了一下Angular6,之前主要使用的是vue,所以免不了的也想对Angular6提供的工具进行一些封装,今天主要就跟大家讲一下这个http模块。之前使用的ajax库是axios,可以设置baseurl,公共头部;集中捕捉错误等,由于Angular6的依赖注入机制,是不能通过直接修改http模块暴露的变量来封装的,但是通过官方文档我们知道可以通...翻译 2018-07-26 21:10:03 · 3800 阅读 · 0 评论 -
使用node脚本快速搭建vue项目的基本结构
vue-pagetool使用node脚本快速搭建vue项目的基本结构安装$ npm install vue-pagetool使用新建一个page.js,内容为:var { createPages } = require("vue-pagetool");var page_model = { root_dir: './src', pages: [{ ...原创 2018-07-02 17:05:38 · 455 阅读 · 0 评论 -
轻松实现富文本编辑器
Demo: https://ma125120.github.io/ma-dom/test/exec.html(仅提供参考,实现了富文本编辑器的基础功能,如有完善需要,可自行拓展或者在下方评论,提出您珍贵的意见)。前几天项目中需要使用富文本编辑器,看了看github流行的富文本编辑器,体积都偏大,由于公司服务器的带宽有限,所以就只能自己实现一个简易的富文本编辑器了。该方法的重点就是 docu...原创 2018-04-29 16:48:13 · 1159 阅读 · 0 评论 -
permission denied (publickey).
这两天在公司和用其他人电脑的时候,上传git代码时,会出现如下的错误提示:The authenticity of host 'github.com (13.250.177.223)' can't be established.RSA key fingerprint is SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8.Are you s...翻译 2018-04-29 15:59:13 · 1751 阅读 · 0 评论 -
vue+axios配合php实现OSS直传
OSS直传遇到的问题前两天做项目的时候用到了oss浏览器直传,遇到了以下几个问题,在此做个记录:分析了阿里云的浏览器直传案例之后,我发现这种方式需要使用post对oss地址进行文件上传,请求体至少需要以下几个信息:key,policy,OSSAccessKeyId,success_action_status,signature,file等6个键值。向后台请求的ajax接口应返回的信息为:...原创 2018-04-28 17:37:47 · 1486 阅读 · 2 评论 -
9行代码实现复制内容至剪切板
9行代码实现复制内容至剪切板Demo: https://ma125120.github.io/ma-animate/test/copy.html本方法主要使用了 Range 对象和HTML5的Selection API,经过测试,本方法在主流浏览器如谷歌浏览器、火狐浏览器、360安全浏览器、搜狗高速浏览器中均运行良好。先附上大家最想看的代码:function copy(e...原创 2018-04-26 17:59:29 · 1040 阅读 · 0 评论 -
利用css3实现各种动画
利用css3实现各种动画=======================Demo: https://ma125120.github.io/ma-animate/test/(因为Demo中的html仅为示范使用,所以使用了不少的es6语法,如果打开后页面一片空白,切换至主流浏览器即可)在Demo中分别设置各个动画的启动与停止,或通过层顶层按钮实现所有动画的启动与停止。通过输入框动...原创 2018-04-26 17:00:19 · 1965 阅读 · 1 评论 -
数组的reduce用法
数组的reduce方法加强练习今天在浏览问题的时候,看到一个人发的问题是: 已知key="aaa.bbb.ccc.ddd.eee",value=111.222;写一个函数f,输出一个对象,对象的内容如下:{ aaa:{ bbb:{ ccc:{ ddd:111.222 } } }----------------------...原创 2018-05-01 22:30:27 · 975 阅读 · 0 评论 -
使用flex轻松实现各种布局
使用flex轻松实现各种布局今天主要介绍的是css3的display:flex,俗称弹性布局。 flex布局常用的属性有:flex: 1; //该属性用于设置或检索弹性盒模型对象的子元素如何分配空间。flex-wrap: wrap; //flex-wrap 属性规定flex容器是单行或者多行,默认为单行,需要多行元素横向排列时应设置为wrap,否则flex会在单行内压缩子元素...原创 2018-04-17 23:38:03 · 3118 阅读 · 0 评论 -
封装类似jQuery的选择器
封装类似jQuery的选择器在也可以很轻原创 2017-11-02 17:37:42 · 1675 阅读 · 0 评论 -
利用CSS3实现开关样式
开关组件开关组件有开和关两个状态,所以可以使用checkbox元素来实现。只需使用border-radius,checked选择器,CSS3的过渡动画即可制作一个美观的开关按钮。下图分别为关闭状态的样式和打开状态的样式: 首先,来分析一下这个组件的大概组成部分:分别为底层的圆角矩形框,圆形的指示球。圆角的矩形框的圆角样式就是border-radius的应用,当它的值等于它的高度时,左右的边框就会变原创 2017-10-28 16:04:34 · 670 阅读 · 0 评论 -
对json数据进行排序和搜索
对json数据进行排序和搜索在使用AJAX获取数据时后台返回的大部分都是json数据,在进行程序开发时有时会需要直接对这些json数据在js程序中再进行一定的操作,如排序、搜索等,而不是通过AJAX请求由数据库进行这些操作。今天我就教给大家如何使用数组的方法来实现这些操作:/*假设json就是后台传过来的json数据*/原创 2017-07-23 22:53:36 · 3893 阅读 · 0 评论 -
简单理解js数据结构
一、堆栈的概念在计算机领域中,堆栈是两种数据结构。堆:队列优先,先进先出;由操作系统自动分配释放 ,存放函数的参数值,局部变量的值等。其操作方式类似于数据结构中的栈。栈:先进后出;动态分配的空间 一般由程序员分配释放, 若程序员不释放,程序结束时可能由OS回收,分配方式倒是类似于链表。二、js的数据类型js的数据类型主要分为两种:基本类型值和引用类型值。基本类型值 ...原创 2018-08-08 00:07:15 · 4893 阅读 · 2 评论