Tsite2007的博客

翻译 BAT大公司里怎样开发和部署web前端代码

BAT大公司里怎样开发和部署web前端代码这是一个非常有趣的 非主流前端领域，这个领域要探索的是如何用工程手段解决前端开发和部署优化的综合问题，入行到现在一直在学习和实践中。在我的印象中，facebook是这个领域的鼻祖，有兴趣、有梯子的同学可以去看看facebook的页面源代码，体会一下什么叫工程化。接下来，我想从原理展开讲述，多图，较长，希望能有耐心看完。

原创 23种设计模式（彩图）

原创 webpack15分钟搞定

Webpack的作用请自行百度，本文主要讲解Webpack的基础使用方法。一、安装安装Node.js（自行百度）。然后执行以下命令，将Webpack安装到全局环境，如果已经安装过的会重新覆盖不会有影响。$ npm install webpack -g 一般情况下我们都会把它安装到依赖中，以便使用本地的Webpack。进入项目文件夹中，创建package.json$ npm init安装 webpa

转载 前端开发工具小结

题图版权申明：此文章无需授权即可转载，转载时请务必注明作者即便像我这样非常有经验的开发者，对于一些前端开发工具，也会产生疑惑。解决办法是在概念层面上理解它们是如何工作的，以及如何共同工作的。这篇文章是我个人对于前端开发工具的理解，抛开代码层面，我们从理念层面来谈它们是如何完成它们的工作的。不要对新技术产生恐惧目前已经有太多的前端开发工具：Node, NPM,

转载 常用 Git 命令清单

下面是我整理的常用 Git 命令清单。几个专用名词的译名如下。Workspace：工作区Index / Stage：暂存区Repository：仓库区（或本地仓库）Remote：远程仓库一、新建代码库# 在当前目录新建一个Git代码库$ git init# 新建一个目录，将其初始化为Git代码库$ git init [project-nam

转载 git 本地分支与远程分支关联的一种方法

github上已经有master分支 和dev分支在本地git checkout -b dev 新建并切换到本地dev分支git pull origin dev 本地分支与远程分支相关联在本地新建分支并推送到远程git checkout -b testgit push origin test   这样远程仓库中也就创建了一个test分支 ==

转载 ES6新增（2）

关于ES6新增的东西（2）六、原生Promise就是一个对象，用来传递异步操作的数据(消息)pending（等待、处理中）—> Resolve(完成、fullFilled) —> Rejected(拒绝、失败)ES6：var p1=new Promise(function(resolve,reject){

转载 ES6新增（1）

关于ES6新增的东西查询浏览器对ES6的支持情况https://kangax.github.io/compat-table/es6/Chrome、MS Edge、Firefox、Safari、Node和其它很多环境都已经嵌入程序以支持 JavaScript ES6 的大部分功能。一、变量和变量的作用域ES5：定义变量用 var=5；使用var来定

转载 SVN和git的使用（附github的简单玩法）

SVN和git的使用（附github的简单玩法）今天简单的总结了下SVN和git的使用，也尝试了下github，应该好好提高下自己的英文水平了，梦想有一天不再使用任何翻译软件。【svn】：集中式的代码管理工具（版本控制工具--版本记录）1》合并代码：团队操作2》版本覆盖 冲突3》删除的历史版本再使用4》遇到问题时追查提交人，明确责任【

转载 js设计模式

本文主要讲述一下，什么是设计模式（Design pattern），作为敲键盘的我们要如何学习设计模式。设计模式真的是一把万能钥匙么？    各个代码的设计模式几乎每个人都知晓，就算不会那也一定在一些装逼的大牛（部分而已）口中听过。但可能很少有人知道设计模式的由来：设计模式该术语源自Erich Gamma等人在上世纪90年代从建筑设计领域引入到计算机科学的（很难想象到底有

转载 如何使用package.json文件

如何使用package.json文件最近在整理之前写的模块的时候，发现很多模块的package.json写的并不是那么规范，所以查阅了一些资料，了解了一下关于如何使用package.json，列出来供大家参考本文参考了这三篇文章https://docs.npmjs.com/files/...http://www.cnblogs.com/tzyy/p...

转载 Nodejs 制作命令行工具

wcj   github仓库源码下载这不仅是一篇教程，还是通过命令行输出我自己简历的一个工具O(∩_∩)O哈哈哈~，很有趣的样子哦。# 全局安装，安装报错是需要前面加上sudo$ sudo npm install -g wcj # 输出帮助$ wcj -h Usage: wcj 这里是我私人玩耍的命令哦！[options] Commands

转载 Node.js知识点详解（三）缓冲与流模块

缓冲（buffer）模块js起初就是为浏览器而设计的，所以能很好的处理unicode编码的字符串，但不能很好的处理二进制数据。这是Node.js的一个问题，因为Node.js旨在网络上发送和接收经常是以二进制格式传输的数据。比如： - 通过TCP连接发送和接收数据； - 从图像或者压缩文件读取二进制数据； - 从文件系统读写数据； - 处理来自网络的二进制数据流而Buf

转载 Node.js知识点详解（二）HTTP模块与事件模块

Node.js的http服务器通过使用HTTP模块的低级API，Node.js允许我们创建服务器和客户端。刚开始学node的时候，我们都会遇到如下代码：var http = require('http');http.createServer(function (req,res) { res.end('Hello World\n');}).listen(3000,"127.0

转载 Node.js知识点详解（一）基础部分

模块Node.js 提供了exports 和 require 两个对象，其中 exports 是模块公开的接口，require 用于从外部获取一个模块的接口，即所获取模块的 exports 对象。接下来我们就来创建hello.js文件，代码如下：exports.world = function() { console.log('Hello World');}在以上示

转载 详解css3系列：动画@keyframes和Animation

在css3中，我们可以通过@keyframes创建关键帧动画效果。我们需要将@keyframes绑定到选择器中，否则不会有效果出现。同时，我们还需定义动画时长和动画名称语法@keyframes animationname {keyframes-selector {css-styles;}}值描述animationname必需

转载 详解css3弹性盒模型（Flexbox）

今天刚学了css3的弹性盒模型，这是一个可以让你告别浮动、完美实现垂直水平居中的新特性。Flexbox是布局模块，而不是一个简单的属性，它包含父元素和子元素的属性。Flexbox布局的主体思想是似的元素可以改变大小以适应可用空间，当可用空间变大，Flex元素将伸展大小以填充可用空间，当Flex元素超出可用空间时将自动缩小。总之，Flex元素是可以让你的布局根据浏览器的大小变化进行自

转载 css学习归纳总结（三）

为文档添加样式的三种方法行内样式行内样式是写在HTML标签的style属性里的，比如： p style="font-size: 12px;font-weight: 200;color: #333333">Hello Everyone!p>行内样式会覆盖嵌入样式和链接样式。嵌入样式嵌入的css样式是放在HTML文档的head元素中的，这点想必大家都知道

转载 css学习归纳总结（二）

标签与元素标签和p元素有什么区别呢？大多数时候他们表示的是同一样东西，但仍有细微的区别。、等指的是HTML分隔符，而元素则是由一对开始结束标签构成的，用来包含某一些内容子选择器和后代选择器的区别：后代选择器的写法就是把外层的标记写在前面，内层的标记写在后面，之间用空格分隔。子选择器只对直接后代有影响的选择器，而对“孙子后代”以及多层后代不产生作用。注意：在IE6中，

转载 css学习归纳总结（一）

选择器的分组CSS选择器分为1.群组选择器 如：p, body, img, div{}2.兄弟选择器 如：p + p { color:#f00; }3.属性选择器 如： p[title] { color:#f00; }4.包含（后代）选择器 如：body ul li{}5.子元素选择器 如：div > p{}6.ID选择器 如：#myDiv{}7.类选

转载 浅尝HTML5之canvas

HTML5新标签HTML5新引入header，footer，article，section，aside和nav，audio,datalist,details,video,progress,embed等标签section 标签用于标识页面上的重要内容部分。该标签有点类似于将一本书分成几个章节。article 标签标识了 Web 页面中的主要内容。aside 标签表示a

转载 前端资源系列-教程&模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试资源汇总

内容精简资源这么多，多看看多学习再总结肯定是好的。多读读就算看重了不算浪费时间，毕竟一千个读者就有一千个林黛玉，还有温故而知新，说不定多读一些内容，就发现惊喜了呢。不过，在此也精简一些内容，就1~2项，只供参考。更多内容细看分类。（精简部分内容跳转链接错乱，这个编辑器没排好，请查阅细分类~）知乎：程序员应该如何注意身体健康？js：JavaScript 标准参考教程

转载 如何在本地环境配置github

将你的代码托管到githubgithub是程序猿的代码托管平台，也是基于git的开源分布式版本控制系统。然而，当你登陆github官网时，它并没有为你准备一个很好的代码上传的系统，这是因为它是基于git的分布式版本管理系。那么，如何更快更有效的将本地代码上传到github呢？首先，我们需要在本地安装git，这样才能在本地环境中使用git命令行，（例如：$ git add index.h

转载 Javascript MVC框架简介

https://speakerdeck.com/addyosmani/digesting-javascript-mvc这里看了一个关于js mvc框架的ppt，作者是一位google的工程师，感觉挺全面挺有意思，适合像我这种入门级人士，简单翻译一下，有很多术语是猜的，如有不对还请各位看官指正。当前有超过40个Javascript MVC框架，但是其中很多没有使用MVC。设计模式

转载 让网站提速的最佳前端实践

前端工程师常常被提起网站性能，如何让网站访问更快等问题，本文就做个总结。最少化HTTP请求用户在浏览网页时，超过80%的时间都是在请求下载网页资源，包括图片，样式，脚本，Flash等等，减少这些资源的下载请求数目，便成了让网页提速的关键。 当然，如果页面很简单，资源少，网页请求自然就少，如果网页内容很多，我们如何做到减少资源请求数呢？这里有几个方法：合并静态文件，将所有

转载 Vue2.0 探索之路——生命周期和钩子函数的一些理解

前言在使用vue一个多礼拜后，感觉现在还停留在初级阶段，虽然知道怎么和后端做数据交互，但是对于mounted这个挂载还不是很清楚的。放大之，对vue的生命周期不甚了解。只知道简单的使用，而不知道为什么，这对后面的踩坑是相当不利的。因为我们有时候会在几个钩子函数里做一些事情，什么时候做，在哪个函数里做，我们不清楚。于是我开始先去搜索，发现vue2.0的生命周期没啥文章。大多是

转载 webpack 单页面应用实战

这篇文章将介绍如何利用 webpack 进行单页面应用的开发，算是我在实际开发中的一些心得和体会,在这里给大家做一个分享。webpack 的介绍这里就不多说了，可以直接去官网查看。 关于这个单页面应用大家可以直接去github上查看https://github.com/huangshuwei/webpackForSPA，我将结合这个项目去介绍。如果大家觉得这篇文章有不妥的地方，还请指出。这

转载 浅析jQuery整体框架与实现（下）

前言分析源码的过程总是成就感与挫败感相伴的，尤其是jquery这样庞大且晦涩难懂的源码，本文承接上一篇：浅析jQuery整体框架与实现（上），继续做更细致些的分析，上篇文章距离现在已经大半年了，本来是只打算写一篇，做个样子的，但看到那么多点赞和收藏的，于是架不住大家的热情，就偷偷把标题改了下，预示着还有下文。上篇文章分析的是jquery-1.7.1，这次分析下最新版的jquery-2.1.

转载 浅析jQuery整体框架与实现（上）

前言jQuery整体框架甚是复杂，也不易读懂，这几日一直在研究这个笨重而强大的框架。jQuery的总体架构可以分为：入口模块、底层模块和功能模块。这里，我们以jquery-1.7.1为例进行分析。jquery的总体架构16 (function( window, undefined ) { // 构造 jQuery 对象 22 var jQuery

转载 关于一些前端js框架的源码研究

nderscore.js源码Underscore.js 没有对原生 JavaScript 对象进行扩展,而是通过调用 _() 方法进行封装，一旦封装完成，原生 JavaScript 对象便成为一个 Underscore 对象。判断给定变量是否是对象// Is a given variable an object? _.isObject = function(obj) {

转载 github上值得关注的前端项目

http://microjs.com/#该网站的资源都托管到了github，microjs.com是一个可以让你选择微型的js类库的网站，该网站里的js库都是压缩后不大于5KB的，非常实用https://plainjs.com/（10.22更新）The Vanilla JavaScript Repository，该仓库都是用原生js写的插件和组件，很实用。里

转载 一位前端大湿的前端总结

今天想着做一件事情，给自己的收藏夹分类。结果做着做着，发现这个任务的工作量超乎我的想象。有一些文章，可能很难界定说，它是哪一类的；而且自己还没有特别去梳理自己对前端知识结构的理解，使得在分类的时候层级也有些模糊。所以在这里梳理一下自己理解中的知识结构。这既是一篇总结，也是一篇指南，有些地方我自己亲身经历可能丰富一点，就说的多一些；有些地方自己没什么实践，就少说话，简单提一提，免得贻笑大方。

转载 互联网协议入门（二）

七、一个小结先对前面的内容，做一个小结。我们已经知道，网络通信就是交换数据包。电脑A向电脑B发送一个数据包，后者收到了，回复一个数据包，从而实现两台电脑之间的通信。数据包的结构，基本上是下面这样：发送这个包，需要知道两个地址：　　* 对方的MAC地址　　* 对方的IP地址有了这两个地址，数据包才能准确送到接收者手中。但是，前面说过，MAC地址有局限

转载 互联网协议入门（一）

前言我们每天使用互联网，你是否想过，它是如何实现的？全世界几十亿台电脑，连接在一起，两两通信。上海的某一块网卡送出信号，洛杉矶的另一块网卡居然就收到了，两者实际上根本不知道对方的物理位置，你不觉得这是很神奇的事情吗？互联网的核心是一系列协议，总称为”互联网协议”（Internet Protocol Suite）。它们对电脑如何连接和组网，做出了详尽的规定。理解了这些协议，就

转载 从输入 URL 到浏览器接收的过程中发生了什么事情？

从触屏到 CPU首先是「输入 URL」，大部分人的第一反应会是键盘，不过为了与时俱进，这里将介绍触摸屏设备的交互。触摸屏一种传感器，目前大多是基于电容(Capacitive)来实现的，以前都是直接覆盖在显示屏上的，不过最近出现了 3 种嵌入到显示屏中的技术，第一种是 iPhone 5 的 In-cell，它能减小了 0.5 毫米的厚度，第二种是三星使用的 On-cell 技术，第三

转载 JavaScript算法详解——快速排序

常见排序javaScript实现的常见排序算法有:冒泡排序,选择排序,插入排序,谢尔排序,快速排序(递归),快速排序(堆栈),归并排序,堆排序过程"快速排序"的思想很简单，整个排序过程只需要三步：　　（1）在数据集之中，找一个基准点　　（2）建立两个数组，分别存储左边和右边的数组　　（3）利用递归进行下次比较看一个demo：http://jsdo.it

转载 常用排序算法之JavaScript实现

1、插入排序1）算法简介插入排序（Insertion-Sort）的算法描述是一种简单直观的排序算法。它的工作原理是通过构建有序序列，对于未排序数据，在已排序序列中从后向前扫描，找到相应位置并插入。插入排序在实现上，通常采用in-place排序（即只需用到O(1)的额外空间的排序），因而在从后向前扫描过程中，需要反复把已排序元素逐步向后挪位，为最新元素提供插入空间。2）算法描

转载 js数据结构和算法（五）字典和散列（hash）

什么是字典结构？字典是以键值对形式存储数据的数据结构，就像电话号码薄里的名字和电话号码那样的一一对应的关系。javascript的Object类就是以这样的一种字典形式设计的。键值对在字典中以这样的方式标记：d = {key1 : value1, key2 : value2 }。字典中的键/值对是没有顺序的。如果你想要一个特定的顺序，那么你应该在使用前自己对它们排序。

转载 js数据结构和算法（四）图和图算法

图的定义图（Graph）是由顶点的有穷非空集合和顶点之间边的集合组成，通常表示为：G(V,E)，其中，G表示一个图，V是图G中顶点的集合，E是图G中边的集合。有向图有向边：若从顶点Vi到Vj的边有方向，则称这条边为有向边，也成为弧(Arc)，用有序偶来表示，Vi称为弧尾，Vj称为弧头。无序图 无向边：若顶点Vi到Vj之间的边没有方向，则称这条边为无向边(Ed

转载 js数据结构和算法（三）二叉树

二叉树的概念二叉树（Binary Tree）是n（n>=0）个结点的有限集合，该集合或者为空集（空二叉树），或者由一个根结点和两棵互不相交的、分别称为根结点的左子树和右子树的二叉树组成。二叉树的特点每个结点最多有两棵子树，所以二叉树中不存在度大于2的结点。二叉树中每一个节点都是一个对象，每一个数据节点都有三个指针，分别是指向父母、左孩子和右孩子的指针。每一个节点都是