- 博客(44)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 设计模式总结分享
函数分流单例模式策略模式代理模式迭代器模式发布订阅模式命令模式组合模式模板方法模式享元模式职责链模式中介者模式装饰者模式状态模式适配器模式函数分流window.onresizemousemove上传进度 示例：单倍群页面需要根据窗口变化重新计算节点位置throttle(fn, interval) { let timer, fi...
2018-09-16 22:30:31
368
原创 todoList react
TodoListUi层分析列表展示区域和输入区域和按钮区域列表输入区域包括一个全选的状态按钮列表展示区域包括选择完成，删除任务按钮区域筛选list todo状态按钮功能分析新增事件删除事件 功能可以实现，但是有个报错标记完成事件 功能实现，但是在遍历上我觉得可以优化筛选事件全选事件踩坑知识点向数组中新增list todo时，不要使用push，因为push返回的是数组的新长度。应该用concat给to
2017-11-04 22:47:11
479
原创 Express,mysql,ejs搭建简单电影网站
## 这是慕课网的课程啦 ## 代码地址npm init； npm install express moment mysql：我们使用nodejs的express框架,moment是一个日期处理类库，mysql数据库，ejs模板app.js 中实例化express，设置基本配置，如模板引擎，启动端口号：var express = require('express');var path =
2017-09-08 09:29:09
1317
原创 排序算法 JS实现
原文引用自这里，这里只是我自己的学习的补充以及笔记插入排序var arr = [5, 6, 3, 1, 8, 7, 2, 4]; // 插入排序: 在已经排好序的序列中从后向前扫描 function insertSort(arr) { // 思路：插入排序在比较的时候有两种情况，下一个数更大，下一数更小或相等 // 当下一个数更大的时候，就把下一个数在数组内的
2017-08-02 23:32:44
361
原创 H5 drag&drop 写一个拖动定位的demo
概述实现思路运用h5新的apidragdrop具体属性阅读这里具体实现踩坑兼容性新增拖动只改变文本的值新增依次移动效果总结概述完成的效果是，父元素内的单个元素item可以通过拖拽定位。在线地址 ps:目前效果是拖拽目标以及定位目标互换位置，后面一点会做拖拽目标添加到定位目标之前，定位目标之后的元素一次向下移动实现思路 实现思路是每一个li标签都是一个可以成为拖拽目标的元素，
2017-07-28 23:20:41
3908
2
原创 input与button输入框 间隙问题
发现问题解决问题水平缝隙垂直缝隙发现问题在开发中经常会遇到搜索框组，即一个input输入框和一个button点击搜索框，由于浏览器的解析原因，我想知道但是我没有找到答案，会出现即使是同样的高度，视觉上input组并没有在一条水平线上，以及会出现水平距离上的缝隙。 解决问题水平缝隙 水平缝隙问题其实是因为标签之间的换行，产生了空白符，这些空白符某种意义上也算是字符，所以理所当然的占据了一定
2017-07-03 23:07:22
9015
原创 wilddog & arcgisAPI & vue-cli插件，天坑之路（三）
背景交代虽然我现在只是npm install wilddog了一下下，但是我有预感，不会那么顺利的。我就是知道不会那么顺利，看我现在才来填坑。 wilddog的用法官网上说得很清楚并且还有视频我就不多说了，还没有深入使用，暂时先不说了。问题.vue文件一个组件就是自己单独的部分，当我在第一个.vue文件中创建了ref连接wilddog数据库对象以后，当我需要在其他.vue文件中使用的时候，怎么办？解
2017-04-23 22:14:57
3791
1
原创 vue-cli&webpack&arcgis API For JS的天坑之路（二）
背景交代果然，不是这么容易的，这么快天坑二就粗来了。现在我要完成一个功能，移动地图点击图上按钮，复位地图，涉及到的问题是，如何在地图加载后再添加这个按钮，否则地图还未加载，按钮已经出现，点击了要出大问题啊！同志，由于我对api不熟悉，所以我不知道api是否直接提供这样的按钮接口，所以我自己上。实现要解决这个问题，首先是翻阅api的文档，查找类似load事件的东西，这个是肯定有的， load事件
2017-04-21 11:50:22
4480
原创 vue-cli&webpack&arcgis API For JS的天坑之路（一）
写在前面的话（背景交代）最近参加esri比赛，但是又想趁机接触前端最新的一些框架和技术，所以，毅然决然的踏上了这个天坑之路。我现在只是成功的把地图渲染出来了，所以，我也不知道会不会有天坑二的出现。新建vue-cli工程如何用vue-cli + webpack构建一个工程，网上一大堆的代码，我就不赘述了。比如这个就是很好地入门文章，先要做的还是要把vue-cli和webpack的模块划分好，框架搭建好
2017-04-19 15:16:52
19490
16
原创 二叉树-Javascript实现
基本参考这篇博文github代码 其实这里写的也就是原代码，学数据结构很难，二叉树各种操作的核心，我目前领悟到的就是递归，递归，递归，学习要学习自己觉得很困难的知识，这样才会有进步。恩，这个鸡汤真馊！！/** * * @param val * @constructor */ function Node(val, left, right) {
2017-03-29 15:38:48
875
原创 如何写好JS，奇舞团学习笔记
实现点击产生这样效果，有很多种实现方式，一步一步的如何做到最佳实践。版本一<ul id="list"> <li>张三</li> <li>李四</li> <li>王五</li> <li>赵六</li></ul><script> // 版本一 var list = document.querySelector('#list'); var it
2017-03-28 17:05:49
853
原创 HTTP 以及 Ajax学习整理
参考文章CSDN关于HTTP ： 所有内容皆来自于这两篇文章，只是加上了个人的总结和理解 掘进关于AjaxHTTPHTTP请求的相应步骤：建立TCP连接Web浏览器向Web服务器发送请求，通过urlWeb浏览器发送请求头信息，通过POST/GET/HEAD…Web服务器应答头信息Web服务器向浏览器发送数据，以Content-Type应答头信息所描述的JSON/JSONP格式…发送用户请
2017-03-20 11:15:40
574
原创 IFE糯米学院-Vue动态数据绑定(一)
实现的样例let app1 = new Observer({ name: 'youngwind', age: 25});let app2 = new Observer({ university: 'bupt', major: 'computer'});// 要实现的结果如下：app1.data.name // 你访问了 nameapp.data.age = 100; //
2017-03-16 15:11:05
662
原创 IFE耀耀学院-表单总结
要求如图表单获得焦点时，下方显示表单填写规则表单失去焦点时校验表单内容校验结果正确时，表单边框显示绿色，并在下方显示验证通过的描述文字校验结果错误时，表单边框显示红色，并在下方显示验证错误的描述文字点击提交按钮时，对页面中所有输入进行校验，校验结果显示方式同上。若所有表单校验通过，弹窗显示“提交成功”，否则显示“提交失败”
2017-03-08 10:14:53
535
原创 IFE糯米学院-正则表达式入门
目的掌握JavaScript正则表达式编写规则了解JavaScript中的正则表达式的特殊字符了解JavaScript提供的正则表达式相关方法能用正则表达式做一些简单文本或者数字校验参考正则表达式30分钟入门教程:
2017-03-03 18:15:26
884
原创 IFE糯米学院-自定义鼠标右键
任务目的 了解js中的oncontextmenu事件 了解如何获取鼠标位置 了解如何实现页面屏蔽右键菜单 任务要求 实现鼠标右击时，出现自定义菜单。点击非自定义菜单区域时，隐藏自定义菜单。参考样例（点击查看），实现页面开发，要求实现效果基本一致。 点击自定义菜单条目时，弹出菜单条目名称。参考 oncontextmenu event事件思路 ps：代码真
2017-03-02 20:07:34
653
原创 IFE斌斌学院-JS总结（2）
我的github代码地址 任务一:模拟一个队列，队列的每个元素是一个数字，初始队列为空有一个input输入框，以及4个操作按钮,完成左侧入，左侧出，右侧入，右侧出，以及点击数字删除的功能
2017-03-01 14:41:43
1099
原创 IFE小薇学院-三栏布局，仿bootstrap栅格布局，flex布局
三栏式布局position：absolute布局圣杯布局双飞翼布局 仿bootstrap栅格布局思路设计观察bootstrap源码scss重构 calc tips： flex布局
2017-02-27 13:03:40
1210
原创 IFE糯米学院-checkbox和radio样式的美化实现
//html部分<body> <p>这是一组radio按钮</p> <section> <input type="radio" name="radio" id="radio1"> <label for="radio1"></label> <br/> <input type="radio" name="radio" id="radio2
2017-02-26 17:09:24
378
原创 连等运算赋值以及对象之间的赋值
var a = {n:1}; var b = a; a.x = a = {n:2}; alert(a.x);// --> undefined alert(b.x);// --> {n:2}说到这个结果，我真是不甚理解啊。非常 ！！各种大神解释 大家结合评论看还有这篇文章 大家结合评论看以及别人这样说道：赋值统统等于最右边，自左向右算，对象引用传递，变量a指向对象而已我的理解(不重要)结
2017-02-24 16:50:43
1300
原创 JavaScript中变量和函数的提升学习
在JavaScript中变量和函数的声明会提升到最顶部执行。 函数的提升高于变量的提升。 函数内部如果用var声明了相同名称的外部变量，函数将不再向上寻找。 匿名函数不会提升。 不同 <script> 块中的函数互不影响。 基于以上几点做一些自己的学习总结1.变量和函数的提升 var表达式和function声明都会被提升到当前作用域的顶部 代码地址bar();var b
2017-02-24 14:56:05
355
原创 random-quote requirejs+scss实战
题目来自FCC的https://www.freecodecamp.cn/challenges/build-a-random-quote-machine 技术结构：requirejs scss 响应式 jquery 代码地址：https://github.com/OMGAGIRL/random-quote 总结：其实实现功能很简单，除了分享功能需要厂商提供api，以及我觉得api并不好
2017-02-24 11:07:49
1299
原创 侧边工具条实现 scss+requirejs（4）注册jq插件
注册成为jquery插件BackTop.js // 在BackTop.js 中注册插件 $.fn.extend({ backtop: function(opts){ //使用each遍历是因为如果不是id选择器，则会选择多个对象，即要给每个对象都要闯将一个BackTop的实例 //this指的是选中的那个对象，比如在这里就是
2017-02-20 09:57:27
665
原创 侧边工具条实现 scss+requirejs（3）
为返回顶部按钮完善全部功能，深度定制在封装一个backtop.js模块，并且引用scrollTo模块，完成返回顶部按钮的隐藏消失以及返回功能// 未返回顶部按钮深度定制一个模块，包括显示隐藏和回到顶部功能define(['jquery','scrollTo'],function($,scrollTo){ // 需要传入执行的按钮对象，以及参数 function BackTop(
2017-02-20 09:42:19
714
原创 侧边工具条实现 scss+requirejs（1）
慕课上的一个案例，刚刚学完scss然后找到了这个课程复习一下。顺便老师教了一下requirejs的使用。这可是我的第一个组件啊，拖了好久好久哦。三种html的布局以及优缺点：第一种是用雪碧图，通过改变hover的定位来改变图片背景。缺点是如果要更改图标需要同时更改一整张图。第二种是通过使用图标字体的方式，优点是可以随时更改图片以及颜色。布局稍微复杂一点点。第三种是通过before和after的
2017-02-19 20:15:47
515
原创 字符串常量不可修改，数组可修改的原因
一般情况下，想要获得字符串str=”kuai lai xiu gai wo”中的某个字符可以通过类似数组方式获得，str[i]，但是却不可以通过str[i] = ‘xx’来修改。除非切割字符串或者转换为数组。var str = "beijing";str[0] = 'HAHAHA';console.log(str);console.log(str[0]);以上结果都未 b。目前研究了一下，得到
2017-02-14 15:02:55
4029
原创 freecodecamp 算法部分刷题笔记
字符串反转Array.joinArray.reverseArray.splitfunction reverseString(str) { str = str.split(' ').reverse(); for(var i = 0;i < str.length;i ++){ str[i] = str[i].split('').reverse().join(''); }
2017-02-03 12:01:40
1551
原创 SASS 制作七色卡
七色卡是慕课上的实战，慕课的代码加上我自己的理解做的。效果 HTML<body> //用js动态生成一个模板。 //因为需要7个ul以及每个ul包含20个li标签，当时考虑了是用js只生成li还是整个模板，因为考虑到感觉直接生成一个整体不用获取ul并且应该代码量也和生成整个dom差不多，就选择的后面一个。其他的理由，就没有理由了...</body><script> v
2017-01-24 21:25:06
1050
原创 CSS工程化
base页面normalize.css对于所有浏览器关于标签的一些定义 设置HTML标签的默认样式使其在各个浏览器表现基本一致让默认样式归零mixins.csslayout.cssvariables.cssmodules面向对象原则 ：提取基础样式，不要用父级限制组件的样式单一职责的原则开闭原则：对扩展开放，对修改关闭 button.csscheckbox.cssdialo
2017-01-22 14:36:07
780
原创 SASS&&SCSS起步
今天开始的安装sass倒是特别顺利，但是在开始写css的第一步的时候可能是我比较笨吧，没有能领悟到各种教程的暗示明示，最后终于在百度文库里面找到了很简单的，连我这种偏弱智儿童都能明白的良心教程。尴尬的冷笑(^__^) 记一下学习笔记！TOT安装好sass后，随便找一个盘（比如E盘），新建一个文件夹（再比如SASS）在文件家里面新建一个这个怎么描述呢（不可描述）的文档，后缀为.scss 然后运行
2017-01-21 17:16:32
501
原创 选择器
伪类:target 表示元素被hash匹配时的状态 比如url-href为#target 当某个html元素id=target时，点击的时候，元素target状态 方便实现一个tab简单切换:lang 匹配指定语言 lang属性获取指定语言:nth-child（n） 选中 父元素 的第n个子元素，n可以为an+b:nth-of-type:only-child:only-of-type
2017-01-19 17:29:33
249
原创 布局
floatpositioninline-blocktableflexgrid居中水平居中行级元素:text-align:center块级元素:margin:auto垂直居中单行文字：line-height 导航栏 button行级盒子：vertical-align：middle 适合与小图标和文字的对齐绝对定位：top：50%；left：50% 适合于块级绝对定位flo
2017-01-19 16:48:55
343
原创 CSS Grid Layout Module
什么是Grid定义：根据元素按列或行对齐排列，但是和table不同的是，格网里面的内容可以定位自己的位置flexbox是一维布局，他只能在一条直线上放置你的内容区块；而grid是一个二维布局。我没有仔细了解过flexbox，所以这个是参考网上的文章记录的。以后学习了，在写自己的想法吧。组成 网格线 Grid Lines网格轨道 Grid Track 在网格中分为grid column和gr
2017-01-19 00:40:13
549
原创 css细节属性
font metricsbaseline mean line line-height是两条baseline的间距inline-block 对齐的是inline-block内的最后一行字的baseline图片对齐的是图片底部通过vertical-align定义盒子的垂直对齐关系，属性值有baseline， top ，text-top ，middle ，text-bottom ，bottom
2017-01-18 22:40:30
467
原创 Vue 渲染 不同值对应不同操作
今天遇到一个问题就是，json传值传入-1，0，1三个值，用来渲染不同的三个状态，用v-show只能做到两个，又不愿意用三个div，感觉很笨，然后翻遍百度以后，终于找到答案啦。 大神就是大神，这么轻描淡写就搞定了我抓破脑袋想不出来的东西，kkk…附上地址[https://jsfiddle.net/rainwsy/hnnwdkaj/]大概意思就是用一个数组(比如state)来存储要展示的三种状态；
2017-01-18 19:22:58
5970
原创 css单位
层叠 继承 css单位选择器特异度内联id个数（伪）类个数标签个数 继承显式继承 {box-sizing:inherit} 每一个属性都有初始值，eg：属性：initial 重置为初始值长度单位pxem 相对于该元素rem 相对于html元素 响应式布局vh 浏览器窗口高度的1% 全屏布局vw 浏览器窗口宽度的1%vmin vh和vw中的较小者 横屏竖屏的样式vmax
2017-01-17 22:44:44
448
原创 css概念与简单的选择器
css引入外链 进行文件缓存嵌入(style)内联 选择器+属性选择器 input[disabled]{color:blue} input[type="password"]{color:red} [class~="classA"]{color:blue} class属性里面包含有classA [href^=#]以#开头，$=jpg以jpg结尾 [class*="A"]
2017-01-17 14:41:46
551
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人