- 博客(39)
- 收藏
- 关注
RSS订阅原创 使用 withCredentials 解决 get 请求跨域问题
withCredentialsAccess-Control-Allow-OriginAccess-Control-Allow-Credentials收到请求收到响应false-false是否false*false是是true*false是否true当前Originfalse是否true当前Origintrue是是
2020-11-09 17:02:52
721
原创 Electron + Puppeteer 初体验
如何快速开始使用 electron-webpack-quick-start作为项目的脚手架工具，完成项目的快速搭建如何设置 icon推荐使用electron-builder对项目进行构建，然后在package.json中添加build字段"build": { "productName": "Boom", "copyright": "Copyright © 2020 Lewis", "mac": { "icon": "icon.icns" }}推荐使用Image2Ico
2020-11-09 14:42:30
2376
4
原创 封装 react-router 实现在新标签页中打开外链
import React from 'react';import { Link as RouterLink } from 'react-router-dom';import URL from 'url-parse';export default function (props) { const { to, children, newTab, className } = props;...
2018-09-05 15:17:55
5996
原创 笛卡尔积的 JS 实现
function descartes(...args) { if (args.length < 2) { return args[0] || []; } return [].reduce.call(args, function (col, set) { let res = []; col.forEach(functio...
2018-06-26 20:14:07
1665
原创 NodeJS 实现视频转码
var fs = require('fs')var ffmpeg = require('fluent-ffmpeg')ffmpeg('xiaodu_1_6_8.mov') .format('mp4') .on('error', function(err) { console.log('An error occurred: ' + err.message); }) .o...
2018-06-25 15:27:26
3138
原创 Sticky Footer 的三种实现方式
<div class="content"> <div class="content-inside"> <h1>Sticky Footer with Negative Margin 2</
2018-06-15 13:57:40
243
原创 Sticky Header 的两种实现方式
<p style="margin-bottom:100px;">Scroll this page.</p><div class=&a
2018-06-15 11:11:33
4853
原创 React-阻止事件冒泡
React 合成事件系统中提供了一个 e.nativeEvent.stopImmediatePropagation()方法用来阻止冒泡，不过需要注意的是，阻止 React 事件冒泡的行为只能用于 React 合成事件系统中，且没办法阻止原生事件的冒泡。反之，在原生事件中的阻止冒泡行为，却可以阻止 React 合成事件的传播。...
2018-06-13 15:53:18
1143
原创 以 TodoList 为例，谈谈 React 和 Vue 的优劣
昨天在家用 React 做了一个简单的 TodoList，之前用 Vue 也实现过（传送门）。一模一样的界面和功能，相较之下，React 的代码量是 Vue 的两倍。在列表渲染、事件绑定、组件通信等方面，React 都不如 Vue 优雅：React 列表渲染需要使用数组的 map 方法，Vue 只需 v-for 就行React 绑定点击事件是这样的： onClick={this.ha...
2017-11-20 10:54:56
1156
1
原创 React 组件通信
父组件到子组件class App extends Component { constructor(props){ super(props) this.state = { msg: 'msg from parent' } } handleClick(){ this.setState({ msg: this.state.msg.split
2017-11-19 12:14:34
267
原创 基于redux的前端框架dva入门教程
核心概念之 Model，包含以下5个属性：1. namespace2. state3. subscriptionssubscription 是订阅，用于订阅一个数据源，然后根据需要 dispatch 相应的 action。在 app.start() 时被执行，数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等
2017-11-13 11:18:13
3370
转载 箭头函数与function的区别
原文地址：http://es6.ruanyifeng.com/#docs/function#箭头函数箭头函数有几个使用注意点。（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。（4）不可以使用y
2017-10-25 15:46:51
3352
原创 Handlebars实用教程
最近一直忙于写JS，大部分UI效果都是用插件实现的，不知道原来很多效果完全可以用CSS3写出来，比如checkbox、select（基本上可以替代select2了）demo-1 checkbox预览地址
2017-09-20 17:23:29
868
原创 Git日常工作流程及常用命令
1.去自己的工作分支$ git checkout work工作 ….2.提交工作分支的修改$ git commit -m3.回到主分支$ git checkout master4.获取远程最新的修改，此时不会产生冲突$ git pull5.回到工作分支$ git checkout work6.用rebase合并主干的修改，如果有冲突在此时解决$ git rebase master7.回到主分支$
2017-09-12 10:42:14
578
原创 使用ajaxSetup()为ajax请求瘦身
当页面有很多ajax请求，且这些请求的参数比如url、type、dataType都一样，你会在每个请求里把这些参数都写一遍还是另辟蹊径？其实ajax有一个ajaxSetup方法，它就是用来设置全局ajax默认选项的。有了它，再也不用在每个ajax请求中把相同的参数都写一遍了。coding time$.ajaxSetup({ url: '/api/', type: 'post',
2017-09-02 17:03:54
2160
原创 Ajax进度条
<div style="margin:100px 0;"></div><div id="p" class="easyui-progressbar" style="width: 400px;"></div> var timerId;$(function() { timerId = setInterval(getForm, 500);});function getForm() {
2017-08-30 14:25:00
556
原创 Vue组件通信
使用 v-on:eventName 监听事件 使用 $emit(eventName) 触发事件HTML代码<div id="app-7"> <p>{{total}}</p> <btn-counter v-on:increment="incrementTotal"></btn-counter> <btn-counter v-on:increment="increme
2017-06-21 14:38:21
288
原创 echarts下拉列表切换数据（二）
在（一）中，虽然已经实现了每次切换都重新渲染echarts，但有个问题，就是每次切换都会发起ajax请求，而且请求的都是同一个json文件，这显然是不合理的。对此，我们可以在页面一加载的时候就发起请求，并把返回值作为一个全局变量存起来。代码如下：var myChart = echarts.init(document.getElementById('home'), 'walden');var res
2017-06-18 09:29:41
9064
原创 echarts下拉列表切换数据（一）
HTML代码<select id="select"> <option value="7">第7天</option> <option value="6">第6天</option> <option value="5">第5天</option> <option value="4">第4天</option> <option value="3">第3天</option>
2017-06-14 23:13:21
15321
5
原创 tab切换重新渲染Echarts图表
这里为了方便，使用下拉列表代替tab切换HTML代码<select id="selectID"> <option value="day">按天</option> <option value="week">按周</option> <option value="month">按月</option></select><div id="main" style="width: 6
2017-06-03 18:20:10
18016
2
原创 深入理解 JavaScript 中 call()与 apply()方法
1. 作用 在特定的作用域调用函数，等于改变函数体内 this 的指向，以扩充函数赖以运行的作用域。window.color="red";var o={color:"blue"};function getColor(){ console.log(this.color);}getColor.call(this); //redgetColor.call(window...
2017-05-20 10:50:54
480
原创 vuejs-前后端交互
1. 使用$http.get()方法获取一个普通的文本数据new Vue({ el: 'box', data: {}, methods: { get: function(){ this.$http.get('a.txt').then(function(res){ alert(res.data);
2017-05-18 20:57:51
2420
转载 延迟加载(Lazyload)三种实现方式
延迟加载也称为惰性加载，即在长网页中延迟加载图像。用户滚动到它们之前，视口外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。
2017-05-18 08:39:31
1314
原创 CSS3常用动画效果
在做CSS3动画时, 除了原生动画以外, 经常要实现一些更复杂, 更符合物体运动规律的动画效果.像很多网站有回到顶部的功能，有的是点击按钮，瞬间就回到顶部了，有的则是匀速回到顶部，而最符合运动规律的，则是匀加速回到顶部。
2017-05-18 08:19:43
1661
原创 checkbox和radio回显
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>form回显</title> <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"></head><body> <labe
2016-04-19 17:44:11
2048
原创 有用的css代码段
1.清除浮动.clearfix:before, .clearfix:after{ display: table; content: " "; }.clearfix:after{ clear: both;}2.文本溢出以省略号结尾overflow: hidden;white-space: nowrap;text-overflow: ellipsis;3.不定宽高
2016-02-18 10:31:53
339
原创 使用JSONP解决跨域问题的实例
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>jsonp跨域</title></head><body> <button id="btn">get</button> <p id="text"></p> <script src="http://apps.bdimg.com/libs/jqu
2016-02-18 09:48:35
411
原创 前端学习资源（不定期更新）
React Webpack+React+ES6开发模式入门指南 React Trainning React.js中文视频教程 初探 React Router 4.0Node 七天学会NodeJS 8天学通MongoDB Nodejs + Express + MongoDB 基础篇 基于Koa2搭建Node.js实战项目教程Git安装与配置 打造一个自动化的前端项目 U...
2015-12-13 22:30:41
357
原创 浏览器前缀的Sass写法
item{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: w
2015-10-25 23:46:30
1816
原创 NodeJS+Gulp+Browser-sync
1.准备工作 $ npm install gulp -g $ npm install gulp browser-sync –save2.创建gulpfile.jsvar gulp = require('gulp');var browserSync = require('browser-sync').create();var reload = browser
2015-10-15 13:28:09
990
原创 MongoDB安装指南(windows环境下)
1.下载安装包，安装在D盘下，在D:\MongoDB下创建文件夹db2.打开命令行窗口，切换到D:\MongoDB\bin目录，执行mongod --dbpath=D:\\MongoDB\\db3.在浏览器中打开http://localhost:27017/，如访问成功即说明配置成功
2015-10-11 22:53:35
401
原创 Gulp入门
准备工作npm install gulp -gnpm install gulp –save -devnpm install gulp-livereload gulp-webserver –save -devtouch gulpfile.jsgulpfile.jsvar gulp = require('gulp'), livereload = require('gulp-livere
2015-10-10 18:11:39
561
原创 Require.js使用指南
require.js的引入<script src="js/require.js" data-main="js/main"></script>main.jsrequire.config({ paths: { jquery: 'js/jquery.min' }});requirejs(['jquery', 'validate'], function($, valida
2015-09-29 23:21:11
360
原创 browser-sync的使用
1.初始化项目：在命令行窗口执行npm init，一路回车即可2.安装包文件：执行npm install browser-sync --save命令3.配置启动项：改写package.json文件，将第7行修改为"dev": "browser-sync start --server --files *.*"4.创建测试页：执行touch index.html命令新建一个index.ht
2015-09-13 18:45:22
607
原创 140字评论特效
Document var maxstrlen = 140; function Q(s) { return document.getElementById(s); } function checkWord(c) { len = maxstrlen; var str = c.value; my
2015-08-07 15:02:52
549
原创 input清除默认样式及兼容问题的解决方法
Documentinput{ background:none; outline:none; border:0px;}.search_box{ width:210px;}.search_input{ height:30px; padding:0 5px; line-height:30px\9; width:136px; border:
2015-07-18 09:38:07
21740
2
转载 学习Javascript闭包（Closure）
--------------------------本文转自阮一峰的网络日志--------------------------闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。下面就是我的学习笔记，对于Javascript初学者应该是很有用的。一、变量的作用域要理解闭包，首先必须理解Javascript特殊的变
2015-07-07 08:46:45
428
原创 让bootstrap警告框点击关闭之后重现
为关闭按钮添加 data-dismiss="alert" 属性可以自动为警告框赋予关闭功能，点击关闭按钮，警告框便会从 DOM 中删除。如何才能让警告框再度出现呢？去掉data-dismiss属性，添加onclick="$('#my_alert').hide();"就行啦！
2015-06-27 12:10:34
985
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人