- 博客(21)
- 收藏
- 关注
RSS订阅
原创 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
1027
原创 前端与后台的交互
前端与后台的交互在web应用开发过程中，总免不了前端与后台之间的交互，而二者之间的桥梁通常就是AJAX，那么AJAX到底是怎么工作的呢？在前后端分离的开发过程中，主要通过参数传递来进行数据的交换。首先，由前端对某个url发起请求，并附加一些参数；然后后台根据前端传递的参数进行数据查询，经过一定的数据处理后，以JSON或文本形式将数据传递到前端；最后，前端根据后台查询到的数据以一定的模板进行渲染。
2017-07-23 21:28:21
8537
7
原创 简单理解js数据结构
一、堆栈的概念在计算机领域中，堆栈是两种数据结构。堆：队列优先,先进先出；由操作系统自动分配释放 ，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈。栈：先进后出；动态分配的空间 一般由程序员分配释放， 若程序员不释放，程序结束时可能由OS回收，分配方式倒是类似于链表。二、js的数据类型js的数据类型主要分为两种：基本类型值和引用类型值。基本类型值 ...
2018-08-08 00:07:15
4888
2
原创 前后台分离之数据模拟
前后台分离之数据模拟在前后端分离的项目中，前后端约定好接口以后，就开始进入各自的开发阶段了，这时候我们前端不可避免的就需要进行数据模拟，那么怎么进行数据模拟呢？我觉得有两种：在 客户端 模拟数据，也就是在我们的前端项目中，使用js手写或者使用mockjs。使用这种方式的时候，不管怎么分离，代码中都会存在多余的东西，如独立开发时使用模拟数据，而前后台联调时就要注释掉之前的模拟数据，这样来回...
2018-07-26 22:59:35
676
翻译 Angular6笔记之封装http
Angular6笔记之封装http最近抽空学习了一下Angular6，之前主要使用的是vue，所以免不了的也想对Angular6提供的工具进行一些封装，今天主要就跟大家讲一下这个http模块。之前使用的ajax库是axios，可以设置baseurl，公共头部；集中捕捉错误等，由于Angular6的依赖注入机制，是不能通过直接修改http模块暴露的变量来封装的，但是通过官方文档我们知道可以通...
2018-07-26 21:10:03
3794
原创 使用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
451
原创 数组的reduce用法
数组的reduce方法加强练习今天在浏览问题的时候，看到一个人发的问题是： 已知key="aaa.bbb.ccc.ddd.eee",value=111.222;写一个函数f，输出一个对象，对象的内容如下：{ aaa:{ bbb:{ ccc:{ ddd:111.222 } } }----------------------...
2018-05-01 22:30:27
966
原创 轻松实现富文本编辑器
Demo: https://ma125120.github.io/ma-dom/test/exec.html（仅提供参考，实现了富文本编辑器的基础功能，如有完善需要，可自行拓展或者在下方评论，提出您珍贵的意见）。前几天项目中需要使用富文本编辑器，看了看github流行的富文本编辑器，体积都偏大，由于公司服务器的带宽有限，所以就只能自己实现一个简易的富文本编辑器了。该方法的重点就是 docu...
2018-04-29 16:48:13
1147
翻译 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
1745
原创 vue+axios配合php实现OSS直传
OSS直传遇到的问题前两天做项目的时候用到了oss浏览器直传，遇到了以下几个问题，在此做个记录：分析了阿里云的浏览器直传案例之后，我发现这种方式需要使用post对oss地址进行文件上传，请求体至少需要以下几个信息：key，policy，OSSAccessKeyId，success_action_status，signature，file等6个键值。向后台请求的ajax接口应返回的信息为：...
2018-04-28 17:37:47
1477
2
原创 利用css3实现各种动画
利用css3实现各种动画=======================Demo: https://ma125120.github.io/ma-animate/test/（因为Demo中的html仅为示范使用，所以使用了不少的es6语法，如果打开后页面一片空白，切换至主流浏览器即可）在Demo中分别设置各个动画的启动与停止，或通过层顶层按钮实现所有动画的启动与停止。通过输入框动...
2018-04-26 17:00:19
1953
1
原创 使用flex轻松实现各种布局
使用flex轻松实现各种布局今天主要介绍的是css3的display:flex，俗称弹性布局。 flex布局常用的属性有：flex: 1; //该属性用于设置或检索弹性盒模型对象的子元素如何分配空间。flex-wrap: wrap; //flex-wrap 属性规定flex容器是单行或者多行，默认为单行，需要多行元素横向排列时应设置为wrap，否则flex会在单行内压缩子元素...
2018-04-17 23:38:03
3084
原创 利用CSS3实现开关样式
开关组件开关组件有开和关两个状态，所以可以使用checkbox元素来实现。只需使用border-radius,checked选择器,CSS3的过渡动画即可制作一个美观的开关按钮。下图分别为关闭状态的样式和打开状态的样式： 首先，来分析一下这个组件的大概组成部分：分别为底层的圆角矩形框，圆形的指示球。圆角的矩形框的圆角样式就是border-radius的应用，当它的值等于它的高度时，左右的边框就会变
2017-10-28 16:04:34
652
原创 原生js实现自定义事件
原生js实现自定义事件 用JavaScript的话来说，观察者模式的实质就是你可以对程序中某个对象的状态进行观察，并且在其发生改变时能够得到通知。利用观察者模式可以很容易的实现自定义事件，具体代码如下：var Event=function() { this.subscibers={};//保存事件的回调函数 };Event.prototype={ constructor:Ev
2017-07-23 23:19:27
2194
原创 对json数据进行排序和搜索
对json数据进行排序和搜索在使用AJAX获取数据时后台返回的大部分都是json数据，在进行程序开发时有时会需要直接对这些json数据在js程序中再进行一定的操作，如排序、搜索等，而不是通过AJAX请求由数据库进行这些操作。今天我就教给大家如何使用数组的方法来实现这些操作:/*假设json就是后台传过来的json数据*/
2017-07-23 22:53:36
3877
翻译 CSS：inline-block的使用方法
CSS：inline-block的使用方法 inline-block类型是在CSS2.1中追加的一个盒类型。目前为止，它受到了Safari浏览器、Opera浏览器、Chrome浏览器、Firefox浏览器以及IE8以上版本浏览器的支持。inline-block属性的三种用法块级元素的并排显示：在进行网站开发的过程中，经常使用float或position使得元素在一行内进行并排显示，这两种属性
2017-07-23 13:34:52
1429
原创 原生js实现AJAX（三）
原生js实现AJAX（三）为了实现如jQuery的AJAX一样的对请求中的data进行处理一样的功能，需要对上一篇的博客中的ajax方法进行一定的改进，比如对data类型进行判断，再根据判断结果进行编码，所以就需要如下所示的代码：/*对AJAX的data数据进行编码*/u.encodeData=function(data) { if(!data) return ''; if(typeof
2017-07-22 01:09:37
311
原创 原生js实现AJAX（二）
原生js实现AJAX（二）简易的AJAX请求var u=window.u||{};u.createXHR=function() { var methods=[ function() {return new XMLHttpRequest();}, function() {return new ActiveXObject(Msxml2.XMLHTTP);},
2017-07-21 23:49:31
232
原创 原生js实现AJAX（一）
原生js实现AJAX（一）使用工厂模式生成XHR对象：var u=window.u||{};u.createXHR=function() { var methods=[ function() {return new XMLHttpRequest();}, function() {return new ActiveXObject(Msxml2.XMLHTTP);},
2017-07-21 22:50:49
193
原创 使用webpack进行打包
使用webpack进行打包Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。 Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。如果想在项目中使用sass，就需要安装相应的loader（node-sass,sass-loader）。
2017-07-21 22:25:08
517
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人