强哥blog-CSDN博客

原创 js规范

目录嵌入规则对齐缩进与换行命名声明类型对象数组字符串函数属性变量条件表达式和等号块注释空白逗号分号类型转换命名约定存取器构造器事件模块 -jQuery嵌入规则Javascript程序应该尽量放在.js的文件中，需要调用的时候在页面中以<script src="filename.js">的形式包含进来。Javascript代码若不是该页面专用的，则应尽

2018-04-09 17:07:37 1280

原创 vue 开发规范

Vue组件化开发单文件系统，样式局部作用域基本组成结构：<template/> <script/> <style scoped/>组件注册方式：1）公共组件全局注册 2）其余组件局部注册组件命名规范Vue官方文档给予以下说明：当注册组件 (或者 prop) 时，可以使用 kebab-case (短横线分隔命名)、camelCase (驼峰式命名) 或 PascalCase (单词首字母

2018-04-08 17:10:36 2831

原创 vuex 基本使用总结

使用在 Vue 的单页面应用中使用，需要使用Vue.use(Vuex)调用插件。使用非常简单，只需要将其注入到Vue根实例中。mport Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { count: 0 },getter: { doneTodos: (state, gette

2018-04-08 16:58:31 970

原创 Swagger编写API文档的YAML

#必要字段！Swagger规范版本，必须填2.0，否则该YAML将不能用于Swagger其他组件swagger: '2.0'#必要字段！描述API接口信息的元数据info: #接口标题 title: swagger说明文档　 #接口文档的描述 description: 学习Swagger #版本号 version: 1.0.0#Swagger会提供测试用例，host指定测试时的主机名，...

2018-03-28 15:07:41 7307

原创 GIT版本控制工具使用

版本控制Git 目录目录 2第1章 Shell和vi 41.1 什么是shell 41.2 shell分类 41.3 认识bash这个shell 51.4 vi编辑器 61.5 SSH 8第2章版本控制 102.1 关于版本控制 102.2 本地版本控制系统 102.3 集中式版本控制系统 112

2018-01-20 12:07:48 1686

原创 http协议详解

<!-- 输入域名（url） -》 DNS映射为IP -》TCP三次握手 -》HTTP响应 -》（浏览器跟踪重定向地址） -》服务器处理请求 -》服务器返回一个html响应 -》（视情况决定释放TCP连接） -》客户端解析HTML -》获取嵌入

2018-01-17 16:19:33 487

转载 JavaScript深入之继承的多种方式和优缺点

本文来自;https://juejin.im/post/591523588d6d8100585ba595JavaScript深入系列第十五篇，讲解JavaScript各种继承方式和优缺点。写在前面本文讲解JavaScript各种继承方式和优缺点。但是注意：这篇文章更像是笔记，哎，再让我感叹一句：《JavaScript高级程序设计》写得真是太好了！1.原型链继承f

2017-11-17 18:17:33 259

转载 JavaScript专题之类型判断(上)

本文来自;https://github.com/mqyqingfeng/Blog/issues/28前言类型判断在 web 开发中有非常广泛的应用，简单的有判断数字还是字符串，进阶一点的有判断数组还是对象，再进阶一点的有判断日期、正则、错误类型，再再进阶一点还有比如判断 plainObject、空对象、Window 对象等等。以上都会讲，今天是上半场。typeof

2017-11-17 16:53:22 347

转载打造自己的JavaScript武器库

原文地址：https://juejin.im/post/5a091afe6fb9a044ff30f402API文档Array arrayEqual 判断两个数组是否相等Class addClass 为元素添加class hasClass 判断元素是否有某个class removeClass 为元素移除classCook

2017-11-16 16:34:34 535

原创前端状态管理请三思

最近我开始思考React应用的状态管理。我已经取得一些有趣的结论，并且在这篇文章里我会向你展示我们所谓的状态管理并不是真的在管理状态。原文链接：managing-state-in-javascript-with-state-machines-stent我们避而不谈的是什么（The elephant in the room）我们来看一个简单的例子。想象这是一个展示用户

2017-11-07 17:54:22 2011 1

原创 css样式初始化(base.css)

@charset "UTF-8";/*css 初始化 */html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin: 0; padding: 0;}fieldset, img, input, button { /*fie

2017-11-04 16:46:03 1095

原创前端面试题（经典）

1、position的值， relative和absolute分别是相对于谁进行定位的？absolute :生成绝对定位的元素，相对于最近一级的定位不是 static 的父元素来进行定位。fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。

2017-10-28 16:25:23 6110 2

原创 api日常总结：前端常用js函数和CSS常用技巧

我的移动端media html{font-size:10px}@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}@media

2017-10-27 15:44:25 853

JS设置cookie:假设在A页面中要保存变量username的值(“jack”)到cookie中,key值为name，则相应的JS代码为： document.cookie="name="+username; JS读取cookie:假设cookie中存储的内容为：name=jack;password=123则在B页面中获取变量username的值的JS代码如下：var username=docum

2017-10-27 15:37:45 262

原创 js判断滚动条是否到底部

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <t

2017-10-27 15:32:47 472

原创对localStorage的封装，使用更简单

//在get时，如果是JSON格式，那么将其转换为JSON，而不是字符串。以下是基础代码：var Store = { get: function(key) { var value = localStorage.getItem(key); if (value) { try { var value_json

2017-10-27 15:30:22 1427

原创杂七杂八

JavaScript 骚操作手机端页面自适应解决方案—rem布局进阶版（附源码示例） BFC和 websocket后jQuery时代是时候和 jQuery 说拜拜了么？10分钟学会ES7+ES8 ，精读AsyncAwait25个最基本的JavaScript面试问题及答案javascript 之模块化篇javascript常用函

2017-10-27 14:36:01 397

原创 GIT常用命令备忘

GIT常用命令备忘：http://stormzhang.com/git/2014/01/27/git-common-command/Git远程操作详解：https://microzz.com/2017/05/06/git/一篇文章，教你学会Git ： https://juejin.im/post/599e14875188251240632702如何在 Git 中使用撤消

2017-10-27 14:25:43 209

原创 vue-cli中的webpack配置

https://segmentfault.com/a/1190000008779053版本号vue-cli 2.8.1 (终端通过vue -V 可查看)vue 2.2.2webpack 2.2.1目录结构├── README.md├── build│ ├── build.js│ ├── check-versions.js│ ├──

2017-10-24 16:32:36 745

原创说说element组件库broadcast与dispatch

周所周知，Vue在2.0版本中去除了broadcast方法以及broadcast方法以及dispatch方法，最近在学习饿了么的Element时重新实现了这两种方法，并以minix的方式引入。看一下源代码function broadcast(componentName, eventName, params) { /*遍历当前节点下的所有子组件*/ this.$children.forEach

2017-10-19 16:16:47 2224

原创 Vue组件间通信

什么是Vue组件？组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。 Vue组件间通信父组件向子组件通信方法一：props使用props，父组件可以使用props向子组件传递数据。父组件vu

2017-10-19 16:15:56 265

原创 Vue学习之源码分析--从template到DOM（Vue.js源码角度看内部运行机制）（九）

从new一个Vue对象开始let vm = new Vue({ el: '#app', /*some options*/});很多同学好奇，在new一个Vue对象的时候，内部究竟发生了什么？究竟Vue.js是如何将data中的数据渲染到真实的宿主环境环境中的？又是如何通过“响应式”修改数据的？template是如何被编译成真实环境中可用的HTML的？Vue指令又是执行的？带着这些疑

2017-10-19 16:14:42 942

原创 Vue学习之源码分析--Vue.js异步更新DOM策略及nextTick（八）

操作DOM在使用vue.js的时候，有时候因为一些特定的业务场景，不得不去操作DOM，比如这样：<template> <div> <div ref="test">{{test}}</div> <button @click="handleClick">tet</button> </div></template>export default { data () {

2017-10-19 16:13:52 469

原创 Vue学习之源码分析--聊聊Vue.js的template编译（七）

$mount首先看一下mount的代码/*把原本不带编译的$mount方法保存下来，在最后会调用。*/const mount = Vue.prototype.$mount/*挂载组件，带模板编译*/Vue.prototype.$mount = function ( el?: string | Element, hydrating?: boolean): Component { e

2017-10-19 16:13:01 2552 1

原创 Vue学习之源码分析--Virtual DOM与diff(Vue.js实现)(六）

VNode在刀耕火种的年代，我们需要在各个事件方法中直接操作DOM来达到修改视图的目的。但是当应用一大就会变得难以维护。那我们是不是可以把真实DOM树抽象成一棵以JavaScript对象构成的抽象树，在修改抽象树数据后将抽象树转化成真实DOM重绘到页面上呢？于是虚拟DOM出现了，它是真实DOM的一层抽象，用属性描述真实DOM的各个特性。当它发生变化的时候，就会去修改视图。但是这样的JavaScrip

2017-10-19 16:10:13 514

原创 Vue学习之源码分析--VNode节点(Vue.js实现（五）

抽象DOM树在刀耕火种的年代，我们需要在各个事件方法中直接操作DOM来达到修改视图的目的。但是当应用一大就会变得难以维护。那我们是不是可以把真实DOM树抽象成一棵以JavaScript对象构成的抽象树，在修改抽象树数据后将抽象树转化成真实DOM重绘到页面上呢？于是虚拟DOM出现了，它是真实DOM的一层抽象，用属性描述真实DOM的各个特性。当它发生变化的时候，就会去修改视图。但是这样的JavaScri

2017-10-19 16:09:01 1611

原创 Vue学习之源码分析--Vue.js事件机制（四）

Vue事件API众所周知，Vue.js为我们提供了四个事件API，分别是 $on， $once， $off， $emit。初始化事件初始化事件在vm上创建一个_events对象，用来存放事件。_events的内容如下：{ eventName: [func1, func2, func3]}存放事件名以及对应执行方法。/*初始化事件*/export function initEven

2017-10-19 16:08:06 520

原创 Vue学习之源码分析--从Vue.js源码角度再看数据绑定（三）

数据绑定原理前面已经讲过Vue数据绑定的原理了，现在从源码来看一下数据绑定在Vue中是如何实现的。首先看一下Vue.js官网介绍响应式原理的这张图。这张图比较清晰地展示了整个流程，首先通过一次渲染操作触发Data的getter（这里保证只有视图中需要被用到的data才会触发getter）进行依赖收集，这时候其实Watcher与data可以看成一种被绑定的状态（实际上是data的闭包中有一个Deps订

2017-10-19 16:05:35 369

原创 Vue学习之源码分析--Vue.js依赖收集（二）

为什么要依赖收集来自 https://github.com/answershuto/learnVue先看下面这段代码new Vue({ template: `<div> <span>text1:</span> {{text1}} <span>text2:</span> {{text2}} <div>`

2017-10-19 16:03:21 414

原创 Vue学习之源码分析--Vue.js响应式原理（一）

关于Vue.jsVue.js是一款MVVM框架，上手快速简单易用，通过响应式在修改数据的时候更新视图。Vue.js的响应式原理依赖于Object.defineProperty，尤大大在Vue.js文档中就已经提到过，这也是Vue.js不支持IE8 以及更低版本浏览器的原因。Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法

2017-10-19 15:59:38 587

原创 webapp开发相关jquery手势事件之jGestures

手机开发中，除了我们平时用的jquery基本事件之外，还有很多手势，今天介绍一款jquery手势插件jGestures，地址是：http://jgestures.codeplex.com/这个插件的强大之处在于它可以监听以下事件’pinch’(缩放手势), ‘rotate’(旋转手势), ‘swipe’(滑动手势), ‘tap’(轻触) 以及 ‘orientationchange’(改变设备方向)。

2017-10-17 11:17:48 493

原创 z.less

// =============================================// @des: zless// @author: Busy// @url: www.aibusy.com || www.moyu-edu.com// @time: 2013-12-08// @lastTime

2017-10-12 17:56:55 1613 1

原创 js数组API--温故知新

js数组API--温故知新一、concatconcat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。arrayObject.concat(arrayX,arrayX,......,arrayX)返回值返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 conc

2017-09-30 17:20:53 357

原创简单地css重置样式

body,dl,dd,h1,h2,h3,h4,h5,h6,p,form,ol,ul { margin: 0; padding: 0;}h1, h2, h3, h4, h5, h6 { font-weight: normal;}ol, ul { list-style: none;}h1{ font-size: 24px;}h2{ font-size: 20px;}

2017-09-29 10:11:18 229

原创 webpack：从入门到真实项目配置（二）

如何在项目中使用 webpack项目中已经配置了很简单的 babel 和 webpack，直接运行 npm run start 即可这时候你会发现这个 bundle.js 居然有这么大，这肯定是不能接受的，所以接下来章节的主要目的就是将单个文件拆分为多个文件，优化项目。分离代码先让我们考虑下缓存机制。对于代码中依赖的库很少会去主动升级版本，但是我们自己的代码却每

2017-09-19 14:08:22 1786

原创 webpack：从入门到真实项目配置

简单使用安装在命令行中依次输入mkdir webpack-democd webpack-demo// 创建 package.json，这里会问一些问题，直接回车跳过就行npm init // 推荐这个安装方式，当然你也安装在全局环境下// 这种安装方式会将 webpack 放入 devDependencies 依赖中npm install --save-dev webp

2017-09-19 14:04:51 868 1

原创 Angualr中自定义指令模板

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"></head><body ng-app="demoApp

2017-08-09 12:16:23 270

原创 Angular自定义指令

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>指令的基础使用</title> <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css"></head><body ng-app="MyApp

2017-08-08 18:31:34 330

原创 Git与Angular入门

复习Node Node.js — 类似一个操作系统一个JS的运行环境主要用于开发Web应用程序（回想登陆的例子）很多的前端开发工具都是基于node这个平台所用的工具就相当于一些软件NVM （可选的）Node Version Manager(Node的版本管理工具)因为node的版本比较多，很多时候我们可能依赖多个版本，并要求自由切换使用nvm use [对应的版本号] [平台架构（如

2017-07-31 14:31:11 847

原创 gulp文件

//gulpfile.js'use strict';/** * 1. LESS编译压缩合并 * 2. JS合并压缩混淆 * 3. img复制 * 4. html压缩 */// 在gulpfile中先载入gulp包，因为这个包提供了一些APIvar gulp = require('gulp');var less = require('gulp-less');var cssna

2017-07-31 14:20:27 239

数据库可视化包

HTML标签结构

空空如也