- 博客(145)
- 收藏
- 关注
RSS订阅
原创 前端----实现图片上传与预览（兼容IE8）
最近在做人脸库添加修改等功能，其中有一个功能就是人脸图片的上传和预览，这边就遇到的问题做一下简单的记录。（自己也是在网上搜索别人的方法，再加上一些自己整理）先看一下效果：...
2018-07-09 15:21:17
8088
原创 flex实现三栏布局原理
<style> .flex-box{ display: flex; height:200px; width:100%; background:red; } .item:nth-child(2){ flex:1; background:red; } &l...
2018-05-16 10:43:50
12020
1
原创 js中的常用的继承方式总结
1.借用构造器函数进行继承 function Parent1(){ this.name="parent1"; } function Child1(){ Parent1.call(this); } var s1=new Child1() console.log
2018-05-11 14:36:38
328
原创 JS中的数据类型转换
由于JS属于弱类型语法，所有的基本数据类型声明都用var，所以当不同类型的数据进行运算的时候就需要进行数据类型转换； JS的基本数据类型分为 number,string,null,undefined,boolean,symbol(ES6新增) 不属于基本数据类型的东西都属于对象，例如我们的函数，数组数据类型转换又分为显示转换和隐式转换；显示转换主要用到的三个API为：...
2018-05-10 16:38:16
1538
原创 组件化小实践
学习了https://zhuanlan.zhihu.com/p/25398176 这篇文章后根据工作中业务的痛点来实践一下；三者之间是互斥的关系，开启其中一个其余两个需要变为禁止状态；参考代码：<!DOCTYPE html><head> &
2018-05-09 10:00:33
194
原创 CSS之三栏布局
方法一：浮动布局 代码： <div class="float-wrapper"> <style> .float-wrapper{ width:100%; } .float-wrapper .left{ float:left;
2018-05-07 19:18:20
585
原创 巧用 firstElementChild
firstElementChild：是用于返回DOM对象的第一个子元素。举个小例子了解一下： <div> <p>123</p> <p>456</p> </div> var oDiv=document.getElementsByTagName("div")[0]; cons
2018-04-24 14:18:22
2397
原创 node.js笔记之订阅发布设计模式
var Event = (function () { var clientList = {}; var listen, trigger, remove; listen = function (key, fn) { if (!clientList[key]) { clientList[key] = [];
2018-01-30 11:31:52
467
原创 node.js笔记之静态文件服务器(一)
创建一个提供文件查看的静态服务器效果图如下：主要思路：1.定位文件我们首先需要做的是获取用户输入的url地址，因为通过这个地址我们可以知道用户是想访问哪个文件。 这里将会引入一些新的模块：var parse = require("url").parse;//解析urlvar join = require("path").join;//拼接url例如我想访问a.js这个文件，我输入的url为：ht
2018-01-26 13:39:06
365
原创 node.js笔记之 'hello world'
当我们刚接触到node.js的时候第一个例子免不了hello world，这里我们可以通过两种方式去实现；方法一：打开命令行模式(cmd)，输入node，然后输入hello world很显然我们平时如果想运行js程序肯定是离不开浏览器环境，因为浏览器内核里面包括了js引擎，例如chrome的BLink内核的v8引擎，让页面就可以‘动’起来，不再是以前的静态展示页面（纯html+css
2018-01-25 10:17:50
404
原创 自制时间轴插件
项目背景：github地址 （如果觉得可以的话，求★~。由于项目需求，代码虽一直在更新，但是文章就一直停滞；其实之前也写过，不过时间隔太久了，就没有继续写下去了，偶然一次机会看到竟然有人给我★了，就又有动力了~~） 由于摄像机智能功能的越来越丰富（目前有24种不同用途的智能功能），而摄像机本身也可以在同时间段或者不同时间段进行多种智能功能的使用，例如12:30–13:00进行车辆检测; 15:
2018-01-09 19:51:00
9835
11
原创 自制slider(滑动条)插件
github地址:https://github.com/liuzaijiang/Slider-liuzj (求★)效果图：
2017-12-14 17:10:35
1379
2
原创 自制tooltip插件
github地址:https://github.com/liuzaijiang/tooltip-liuzj (求★)效果图： 使用方法：var array=[ { selector:"#p1", //需要绑定tooltip的元素，使用jq选择器来选择 direction:"top",//提示框出现的地
2017-12-14 16:49:44
253
原创 对_.template函数的理解
我对underscore.js中的_.template函数进行了学习总结： 这个函数算得上是一个轻量级的模板引擎（包括注释80多行）；模板引擎简单来说就是在动态渲染页面的时候，可以简化字符串的拼接操作。可以帮助我们有效地组织页面的结构和底层逻辑，也是实现界面和数据分离的重要一个步骤； 一.如何使用：该函数可以解析3种模板标签：<%= %> 标签中包含的通常...
2017-11-07 17:16:44
1368
转载 css选择器中:first-child与:first-of-type的区别
介绍得简单明了，怒转~ http://www.cnblogs.com/2050/p/3569509.html————————————————————————————————————————————————————————————————————————————:first-child选择器是css2中定义的选择器，从字面意思上来看也很好理解，就是第一个子元素。比如有段代码：
2017-09-18 14:23:36
508
原创 单例模式的实践
设计模式就是要实践，网上看了太多理论文章，我将其使用到了我自己写的时间轴插件中，主要是用来做弹出框和遮罩层；主要函数为这个公共函数：（有利于到数组去重的思想，毕竟是个公共方法，我们是支持每一种类型只创建一次）var getInstance = function () { var res = {}; return function (fn) {
2017-09-13 17:39:20
287
原创 你知道line-height怎么用么？
转载的一篇别人的文章自己看完后一个感受就是line-height设置数字（例如1.5）或normal与其他值（例如150% 1.5em 40px）的区别在于其子元素的line-height会不一样；在子元素不设置line-height的情况下： 前者的line-height是“动态”：只会继承父元素的line-height设置的数字，然后用这个数字乘以自己的font-size成为
2017-08-23 10:14:44
1988
2
原创 Sublime 中快速打开网页
我们需要利用package control的install package去下载插件若没有package control，则需要下载：最快速的方法 ctrl + ~ 快捷键，调出 console。将以下 Python 代码粘贴进去并 enter 执行，不出意外即完成安装。以下提供 ST3 和 ST2 的安装代码：Sublime Text 3：import u
2017-08-22 23:16:13
7384
1
原创 你不知道的box-shadow
用一个div 配合box-shadow加animation实现如下效果：#bs{ position:absolute; top:100px; background: #000; width: 30px; height: 30px; padding: 10px; border-radius: 50%; animati
2017-08-19 13:49:46
471
原创 继承之构造器借用法
写这篇还是因为在阅读别人用js实现flappy bird源码的时候，发现它用到了构造器借用法去实现继承，自己顺便也能学习一下这种继承方法，毕竟之前还没怎么看过继承-。-还是用书上的例子开始介绍吧： function Shape(id){ this.id=id; } Shape.prototype.name='Shape'; Shape.
2017-08-16 09:56:00
250
原创 canvas之drawImage
今天在掘金上看到了别人用js手动写的flappy bird H5游戏，觉得很有意思，自己也想好好玩一下，好好学习一下canvas和锻炼一下自己的思维； 先学习一下drawImage这个API； 先贴一下网上别人的介绍，个人觉得很实用，也很好入门；要在绘图上下文中绘制图片，可以使用 drawImage 方法。该方法有三种不同的参数: drawImage(image,
2017-08-11 11:44:34
2581
原创 css3:box-sizing
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。(W3C上是这么解释的，说实话看不懂)box-sizing属性可以为三个值之一：content-box（default），border-box，padding-boxcontent-box，border和padding不计算入width之内padding-box，padding计算入width内bo
2017-08-09 20:22:24
268
原创 ESLint 备忘录
今天知道了ESLint，简单做一下笔记，毕竟刚一开始都不知道如何去使用，哎·！ 环境是：(ESLint+Gulp)全局安装eslint这个就不用说了，这里我配合了gulp所以需要去下载一下gulp-eslint关键是怎么去用：*1gulpfile.js文件为：var gulp = require('gulp');var eslint = requir
2017-07-28 12:15:21
839
转载 浏览器内核及js引擎
找到一篇好文，mark一下； http://www.cnblogs.com/xiyangbaixue/archive/2014/10/22/4042548.html摘要： 面试一个大公司的时候问到了一个问题，让我谈谈主要的浏览器内核以及他们的特点，当时并没有详细的回答，回来之后自己在网上找了找资料，总结了下分享给大家。简介： 在维基百科上是这样介绍浏览
2017-07-25 19:36:34
377
原创 回文字符串检测
/*判断是否是回文字符串*///定义一个栈的类 function Stack(){ //存放数据的数组 this.dataStore=[]; //栈顶索引 this.top=0; //入栈的方法 this.push=push; //出栈的方法 this.pop=pop; //栈顶的数据 this.peak=peak; //清空整个栈 this.clear=cle
2017-07-12 17:42:30
439
原创 二维数组求平均数（每行/每列）
最近在学习《数据结构与算法javascript描述》，发现里面有个二维数组求平均数的那个地方好像有一点问题，可能是我看的是盗版PDF吧，在求每一行【平均数的时候没考虑到数组元素有为0的情况，在求每一列平均数的时候代码就是错误的，所以我自己尝试重新实现一次； 求二维数组每行平均数：每行求平均数我们只需要注意有0存在的情况即可；var grades = [...
2017-07-12 00:47:49
23031
5
转载 时间复杂度
在进行算法分析时，语句总的执行次数T(n)是关于问题规模n的函数，进而分析T(n)随n的变化情况并确定T(n)的数量级。算法的时间复杂度，也就是算法的时间量度，基座T（n）=O(f(n))。它表示随问题规模n的增大，算法执行时间的增长率和f(n)的增长率相同，称作算法的渐进算法时间复杂度，简称为时间复杂度。其中f(n)是问题规模n的某个函数。一般用大写O()来表示算法的时间复杂度写
2017-07-06 15:59:50
310
原创 “惨痛”的一次面试之旅
星期一晚上刚下高铁就发现深圳乌云密布，还没等我掐指一算，雨水哗啦啦地浇打在大地上； 雨一直下，气氛不太融洽.......手机查了一下下一个目标地的距离，发现还需要一个半小时的路程才能到达面试的地方，背上书包没多想，马不停蹄地开始转战于各个地铁口，换乘，换乘，再换乘。终于到达了目的地附件，肚子仿佛知道了这个“喜讯”，大叫一声，才发现坐了4个小时高铁的我还没吃饭；这个时候不知道哪根神经
2017-07-05 15:22:09
468
原创 牛客小题(js)
1.RegExp对象的方法：text ( ) : 用来检测一个字符串是否匹配某个整个表达式，如果匹配成功则返回true，否则falseexec( ) : 用来检索字符串中与正则表达式匹配的值。返回一个数组，其中存放匹配结果，如果没有匹配则返回null；compile( ) : 在脚本执行过程中编译正则表达式，也可以改变已有表达式；(已经从web标准中删除)注意：match（）
2017-06-14 16:31:57
285
原创 CSS实现三栏布局和垂直居中
网上找的方法，自己整理一下~（这些面试也会考）#三栏绝对布局我是左边 我是右边 我是中间 html,body{ margin: 0px; width: 100%; } #left,#right{ width: 200px; height: 200px; background-color: #ffe6b8; position: absolu
2017-06-01 10:37:45
1975
原创 面试小题
对象属性的遍历这里我们需要去除其原型上的属性var obj={ "a":1, "b":2 }for(var key in obj){ if(obj.hasOwnPrototype(key)) { console.log(key); console.log(obj(ke
2017-05-22 10:53:23
309
原创 Promise例子
前言：我看过沙漠下暴雨，看过大海亲吻鲨鱼，看过黄昏追逐黎明，没看过"你"；网上对于Promise的解释的文章很多，不过茫茫“文”海中，要找一个讲得好的，太难，而且还要找到一个自己这种水平能看懂的例子，更难，所以需要多方查证，然后自己总结一个适合自己能力水平看得懂的文章才行。（领悟出一个道理：打铁还需自身硬）（好文章还是很多，但是我这边是带着完成一个功能的目的去学习知识的）h
2017-05-18 13:48:01
1570
2
原创 学习React阶段性总结
自己学习React也有一段时间了，应该做一个阶段性总结了，看了一下慕课网上的一些课程的介绍（自己舍不得花钱学-。-），然后自己截取了里面知识点介绍，对比一下自己的学习内容，试着去解释一下下面的知识点。--------------------------------------------------------------------------------------------------...
2017-05-11 11:25:35
533
原创 初探React-router实现导航
好久都没有写博客了，一是因为最近工作也比较繁杂，二是在学习路由的时候卡了一下壳，三是工作找不到很是郁闷。经过一段时间的尝试，终于在学习的过程中迈出了一小步，实现了自己当初订的一个小需求。由于还在学习过程中，就只是先拿出一点实际的效果和中间遇到的一些困难。我眼中的路由:我接触到的路由一般都是用来做导航栏，选项卡之类的功能；我就类比一下用jq的方法去实现这样一个功能的：大体
2017-05-02 19:29:39
6914
原创 React之表格操作
对于官网上的那个表格demo又进行了改造，记录一下其中的困难和解决思路，当然还有功能没有完善，会继续利用空余时间来实现一下。在上一篇的基础上http://blog.csdn.net/liuzijiang1123/article/details/66974630 又做了一部分修改：1.利用webpack进行了打包压缩处理，并提取出了的第三方库文件；2.增加了按照价格排序的功能；新
2017-04-12 11:04:29
7642
原创 js动态生成xml数据格式
后来才发现我们只需这样把字符串按xml的形式传递给底层即可. var xml='<Setup>'+ '<ProtocolList>'+ '<Protocol>'+ '<Name> onvif </Name>'+ '<UserName> ad...
2017-04-07 10:26:06
11493
2
原创 React中的key
前言：( ⊙ o ⊙ )啊！最近简历投得很不顺利呀，感觉是项目经验不符合互联网公司的需求........╮(╯▽╰)╭没办法，在公司做得最多的就是业务逻辑的代码，虽然知道这一点，自己在加紧学习，但是结果还是不尽如人意，毕竟没做过真正的项目别人是很少会"冒险".......也罢，《盗钥匙的方法》中的”杀手“成了我目前的一个”精神“支柱！在参考官网的文档学习React中，有一个例子是商品的表格，提
2017-04-01 10:53:13
3444
转载 forEach 和 map
高级浏览器(包括ie9以上)支持map和forEach方法对数组循环遍历，用法基本相同，但有些区别必须知道，才能在项目中正确选择原理：高级浏览器支持forEach方法语法：forEach和map都支持2个参数：一个是回调函数（item,index,list）和上下文；forEach:用来遍历数组中的每一项；这个方法执行是没有返回值的，对原来数组也没有影响；数组中有几项，那么传递
2017-03-22 11:27:47
355
原创 React.js之组件通信(基础)
我平时工作中用的最多的应该算是各个元素之间通信，比如点击一个按钮，另一个按钮打开或者灰掉，全选，动态显示表格等等。在React里面就是组件之间的通信。主要是分为三类：1.子组件向父组件通信下面这个例子的效果是，在文本框中输入邮箱，会在一个div中同时显示出来；这个文本框就是子组件，div就是父组件；这里还记得props么？ --------组件里面定义的属性
2017-03-21 14:38:33
567
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人