Sixin的小站

刘思鑫的个人博客

2017-10-11
- 前端
JS的变量、作用域和内存问题

基本类型和引用类型在 ECMAScript 中，变量分为基本类型和引用类型两种。基本类型就是存储简单的数据段。而引用类型指的是那些可能由多个值构成的对象。在 ECMAScript 中，基本类型包括：Undefined、Null、Boolean、Number 和 String。这些基本类型的对象都是按值访问的。所以 js 中我们可以直接操作他们。但是引用类型如 Object 等，是按照引用来... 阅读全文…
- javascript
- 编程笔记
2017-10-07
- 前端
如何编写高质量javascript代码

在我们日常编码中，编写可维护代码是非常重要的，编写可维护代码，意味着：可读性一致性可预测性团队代码风格一致最小全局变量JavaScript 是通过函数来管理作用域的。在函数内部申明的变量只能在函数内部使用，在函数外部不能使用。每一个 JavaScript 都有一个全局对象，当你在任意的函数外部访问 this 的时候可以访问到，你创建的每一个全局变量都成为这个全局对象的属性。浏览... 阅读全文…
- javascript
- 编程笔记
2017-10-04
- 前端
VUE 学习笔记——vuex

1 vuex$ npm i vuex -S // store.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { count: 0 }, mutations: { updateCount(state... 阅读全文…
- Vue
- 编程笔记
2017-09-30
- 前端
  - 造轮子系列
造轮子系列：JS封装无缝滚动

封装无缝滚动无缝滚动指的是几个元素循环滚动，视觉效果就像是有无穷无尽的元素一样。实现的原理也很简单，首先对容器元素进行滚动操作。子元素在容器元素中依次排列，并且将子元素复制一份，放在同一个容器元素中，这样就实现了首尾相接。当最后一个子元素滚动过临界点的时候，将容器元素的位置拉回初始位置，然后重复滚动操作即可。首先写好 HTML <!DOCTYPE html> <html la... 阅读全文…
- javascript
2017-09-28
- 前端
VUE 学习笔记——vue-router

1 vue-router 之集成import Router from 'vue-router'; import routes from './routes'; // const router = new Router({ // routes // }) export default () => { return new Router({ routes, mode... 阅读全文…
- Vue
- 编程笔记
2017-09-27
- 前端
记一次工作中的 js 控制 cookie 的实践

概述主要实现的功能是有个活动的结果弹窗在进入页面会自动弹出来一次，当天只弹出一次，直到活动结束为止。实现逻辑使用 addCookie SetCookie getCookie 三个公用的方法来实现操作。首次载入页面时先判断当前时间是否在活动时间内，之后使用 getCookie 判断 cookie 是否存在，如果不存在使用 addCokie 添加 cookie（这里的 cookie 的值设... 阅读全文…
2017-09-26
- 前端
  - 造轮子系列
造轮子系列：JS封装选项卡组件

封装一个选项卡通常情况下，选项卡由两部分组成。一部分是头部，它包含一堆按钮，每一个按钮对应不同的页面，按钮包括选中与无法选中两种状态。另一部分则由一些具体的页面组成，当我们单击按钮时，就切换到对应的页面。如果每个页面中包含的是根据动态加载的数据渲染出来的界函，那么通常只会有一个页面，单击按钮时重新加载数据并重新渲染页面。先初始化html <!DOCTYPE html> <... 阅读全文…
- javascript
2017-09-24
- 前端
VUE 学习笔记——核心概念

1. VUE 核心技术 node_modules 下 vue 有多个版本，因为 vue 提供不同环境的支持 import vue 默认使用 vue.runtime.esm.js vue.runtime.esm.js; // 开发环境默认 vue.runtime.min.js; // 正式环境 runtime 和没有 runtime 的区别在于是否可以在 vue 对象里写 te... 阅读全文…
- Vue
- 编程笔记
2017-09-21
- 前端
web开发bug&小技巧整理

html 页面写 IE hack 详细说明资料的请参看网址：关于 IE 的一些 hack - ！win ！ - 博客园 ie 的条件语句常用的有几下几种（所有条件注释语句在非 IE 浏览器下都是普通的注释，不要用非 ie 去给非 IE 的浏览执行操作）： lt ：就是 Less than 的简写，也就是小于的意思。 lte ：就是 Less than or equal to 的简写，也就... 阅读全文…
2017-09-17
- 前端
webpack实践--多页面应用

要实现多页面应用 web 我们需要注意几点，首先我们要明白多页应用：多入口 entry 多页面 html 每个页面不同的 chunk 每个页面不同的参数实现多页面有两种方式多配置(webpack3.1.0) parallel-webpack 单配置多配置优点可以使用 parallel-webpack 来提高打包速度配置更加独立，灵活缺点不能多页面之间共享代... 阅读全文…
- webpack
- 性能优化
2017-09-13
- 前端
web高性能动画及渲染原理

如何实现动画？ jQuery animation:setTimeout，top/left animatin，transition，transform javascript+canvas/webGL/SVG requestAnimationFrame GPU acceleration（硬件加速） webkit 的渲染流程 ... 阅读全文…
2017-09-12
- 前端
CSS 网页布局--圣杯布局、双飞翼布局

CSS 基础布局 ... 阅读全文…
- CSS
- 响应式
2017-09-11
- 前端
OO CSS -- 面向对象的CSS

面向对象的 CSS 官网：面向对象的 CSS OO CSS 的概念解读 OO CSS 的作用和注意事项 OO CSS 代码实战众多开发者忽视了 CSS 的表现（认为他太过简单，是一种机械的工作），而且更多关注在 JavaScript 的性能上或者其他方面。 OO CSS 将页面可重用元素抽象成一个类，用 Class 加以描述，而与其对应的 HTML 即可看成是此类的一个实例。 OO ... 阅读全文…
- CSS
2017-09-10
- 前端
CSS workflow

CSS 预处理器（处理浏览器） sass、less、stylus 预处理器常用规范变量混合（Mixin）Extend 嵌套规则运算函数 Namespaces & Accessors Scope 注释 CSS 后处理器（该删的删，该加的加，增加前缀，包括可以兼容 IE6） CSS 压缩 CLEAN-CSS 自动添加浏览器前缀 Autoprefixer CSS 更加美观排序... 阅读全文…
- CSS
2017-09-08
- 前端
  - 后端
JS中解决跨域问题

前端开发中，跨域是我们经常遇到的问题，同时面试中也会经常问到这类问题，这里就来总结下参考文档：阮一峰的跨域资源共享 CORS 详解 https://segmentfault.com/a/1190000011145364 什么是跨域跨域是浏览器为执行同源策略所造成的，是浏览器对 JavaScript 脚本实施的安全限制。同源策略限制了一下行为： Cookie、LocalSto... 阅读全文…
2017-09-05
- 前端
git 常用命令总结

一、新建代码库# 在当前目录新建一个Git代码库 $ git init # 新建一个目录，将其初始化为Git代码库 $ git init [project-name] # 下载一个项目和它的整个代码历史 $ git clone [url] 二、配置Git 的设置文件为.gitconfig，它可以在用户主目录下（全局配置），也可以在项目目录下（项目配置）。 # 显示当前的Git配置 $ ... 阅读全文…
- Git
- 编程笔记
2017-08-25
- 前端
webpack实践--长缓存优化

1.1 场景有时候，我们在开发项目时只会写有关 app 的代码，不会改 vender 第三方库源码，当我们改变 app 代码的时候，我们希望打包出来 bundle 不要被 app 所影响而去改变它的版本号。比如页面已经缓存了 vue，但我们并没有改变 vue 的代码，只改变自己的业务代码，用户完全没有下载新的打包出来的 vue 的代码。改变 app 代码，vender 变化 1.2 ... 阅读全文…
- webpack
- 性能优化
2017-08-24
- 前端
webpack实践--打包速度优化

webpack 在打包过程中可能会有各种因素导致打包速度很慢进而影响开发体验，接下来我们就逐个分析。可能因素文件多依赖多页面多解决方法一分开 vendor(第三方代码)和 app(业务代码) DllPlugin(如果业务代码引入第三方库，通过这两个插件可以解决重复打包) DllReferencePlugin 方法二 UglifyJsPlugin(耗时，并行处理) para... 阅读全文…
- webpack
- 性能优化
2017-08-20
- 前端
  - 造轮子系列
造轮子系列：JS封装拖拽组件

封装一个拖拽对象1. 如何让一个 DOM 元素动起来拖拽的本质就是让 DOM 元素能够跟着鼠标运动起来。在页面中创建一个 class 名为 drag 的 div 标签，它的基本样式如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport... 阅读全文…
- jQuery
- javascript
2017-08-18
- 前端
  - 后端
    运维
Nginx的服务器缓存策略

前言要了解缓存首先我们先了解下浏览器的执行机制是怎样的，先看一张图：浏览器对我们的静态资源，比如说 js css html 图片字体等都是有缓存策略的，如果说浏览器自身有缓... 阅读全文…
- Nginx
2017-08-17
- 前端
  - 后端
    运维
Nginx的反向代理与负载均衡

前言Nginx 是一个非常轻量级的服务器，他虽轻但是他最大的优点就是可以承载大量的并发，所以说一般的话很少有用 Node 直接去做服务器让用户去访问的，因为 Node 本身就需要做非常非常多的事情，虽然说简单的可以使用 Node 直接开启，但是对于负载和并发 Node 是弱项，就是反向代理和并发是 Node 整个的弱项，所以我们需要在前面用 Nginx 挡一层，这样的话对于我们整个的系统的... 阅读全文…
- Nginx
2017-08-13
- 前端
如何开发一个响应式页面

本文主要介绍如何开发一个移动端响应式页面。步骤 1 - 添加 viewport meta 标签在页头 head 标签内添加 viewport meta 标签是实现响应式页面的第一步，以便优化在移动设备上的展示效果，其推荐的设置为： <meta name="viewport" content="width=device-width, initial-scale=1"> 步骤 2 ... 阅读全文…
2017-08-11
- 前端
  - 造轮子系列
造轮子系列：封装一个简化版的jQuery

jQuery 封装详解我们来实现一个简化版的 jQuery 库一个库就是一个单独的模块，因此应使用自执行函数的方式模拟一个模块。 (function() { // do something }); 既然能够在全局直接调用 jQuery，则说明 jQuery 被挂载在了全局对象上。块中对外提供接口时，可以采取 window.jQuery 的方式。 var jQuery = funct... 阅读全文…
- jQuery
- javascript
2017-08-06
- 前端
  - 后端
HTTP性能优化指南

概述浏览器渲染过程 DNS TCP 三次握手 HTTP 缓存机制 CDN 与集群还记得 HTTP 协议吗？浏览器先输入一个网址然后浏览器先会去互联网上找 DNS 服务器进行解析从 DNS 服务器拿到服务器 IP 以后，在回到浏览器中然后浏览器拿着 IP 去发送 HTTP 请求服务器处理请求服务器响应请求浏览器处理响应继续请求其它资源 ... 阅读全文…
- HTTP
- 性能优化
2017-08-02
- 前端
前端性能优化--雅虎军规

前言1. 雅虎军规显而易见的就是雅虎公司出的，雅虎公司一直都是相应的各种规范上的践行者，有一种系列的书都是雅虎出的，它们每一本书的封面都有一只动物，下图是其中一本的示例，如果说你是想要一直从事前端这个行业的话，建议你把这一系列的书都看一下，这些书有些之前的是雅虎出的，后来就是图灵出的了 2. 参考网址: 雅虎军规官网地址：英文版雅虎军规：中文翻译版 3. 什么是雅虎军规？ ... 阅读全文…
2017-07-28
- 前端
JavaScript数据结构与算法总结

前言数组栈队列链表集合字典散列表树 1. 数组创建和初始化数组由于数组太常见了，一些基本的使用就不说明了求斐波拉契数列前二十个数字 var fibonacci = []; //{1} fibonacci[1] = 1; //{2} fibonacci[2] = 1; //{3} for (var i = 3; i < 20; i++) { fibonacci[i... 阅读全文…
- javascript
- 数据结构与算法
2017-07-25
- 前端
JavaScript忍者秘籍--函数操作

总结《JavaScript 忍者秘籍》中函数相关的运用匿名函数匿名函数的介绍不用多说，通常，匿名函数的使用情况是：创建一个供以后使用的函数。简单的举个例子如下： window.onload = function() { alert('hello'); }; var templateObj = { shout: function() { alert('作为方法的匿名函数... 阅读全文…
- javascript
2017-07-20
- 前端
Generator函数 -> async 函数

参考链接：阮一峰的网络日志 function* gen(x) { var y = yield x + 2; return y; } var g = gen(1); g.next(); // { value: 3, done: false } g.next(); // { value: undefined, done: true} 上面代码中，调用 Generator 函数，会返... 阅读全文…
- es6
- javascript
2017-07-14
- 前端
web项目常见问题汇总及解决方案

meta 基础知识H5 页面窗口自动调整到设备宽度，并禁止用户缩放页面 //一、HTML页面结构 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />; // width 设置v... 阅读全文…
- CSS
- javascript
2017-06-20
- 前端
Express创建web服务器总结

Nodejs 搭建 web 站点的一些记录 1. exports 和 module.exportsrequire 用来加载代码，而 exports 和 module.exports 则用来导出代码。有时候我们可能会迷惑于 exports 和 module.exports 的区别，我们先来巩固下 js 的基础。示例： var a = { name: 1 }; var b = a; co... 阅读全文…