PageSourceSearch

https://hx2heng.github.io/

html hx2heng.github.io collected 2026-10-03 09:19:06 UTC 86,007 bytes, 1,647 lines download raw bytes

1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  
6  <title>Hx2的博客</title>
7  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
8  <meta name="description" content="maybe..or">
9<meta property="og:type" content="website">
10<meta property="og:title" content="Hx2的博客">
11<meta property="og:url" content="https://github.com/Hx2heng/index.html">
12<meta property="og:site_name" content="Hx2的博客">
13<meta property="og:description" content="maybe..or">
14<meta name="twitter:card" content="summary">
15<meta name="twitter:title" content="Hx2的博客">
16<meta name="twitter:description" content="maybe..or">
17  
18    <link rel="alternative" href="/atom.xml" title="Hx2的博客" type="application/atom+xml">
19  
20  
21    <link rel="icon" href="/favicon.png">
22  
23  <link rel="stylesheet" href="/css/style.css" type="text/css">
24</head>
25<body>
26  <div id="container">
27    <div class="left-col">
28    <div class="overlay"></div>
29<div class="intrude-less">
30	<header id="header" class="inner">
31		<a href="/" class="profilepic">
32			
33			<img lazy-src="/img/head-pic.jpg" class="js-avatar">
34			
35		</a>
36
37		<hgroup>
38		  <h1 class="header-author"><a href="/">黄信政</a></h1>
39		</hgroup>
40
41		
42
43		
44			<div class="switch-btn">
45				<div class="icon">
46					<div class="icon-ctn">
47						<div class="icon-wrap icon-house" data-idx="0">
48							<div class="birdhouse"></div>
49							<div class="birdhouse_holes"></div>
50						</div>
51						<div class="icon-wrap icon-ribbon hide" data-idx="1">
52							<div class="ribbon"></div>
53						</div>
54						
55						
56						<div class="icon-wrap icon-me hide" data-idx="3">
57							<div class="user"></div>
58							<div class="shoulder"></div>
59						</div>
60						
61					</div>
62					
63				</div>
64				<div class="tips-box hide">
65					<div class="tips-arrow"></div>
66					<ul class="tips-inner">
67						<li>菜单</li>
68						<li>标签</li>
69						
70						
71						<li>关于我</li>
72						
73					</ul>
74				</div>
75			</div>
76		
77
78		<div class="switch-area">
79			<div class="switch-wrap">
80				<section class="switch-part switch-part1">
81					<nav class="header-menu">
82						<ul>
83						
84							<li><a href="/">主页</a></li>
85				        
86							<li><a href="/archives">所有文章</a></li>
87				        
88							<li><a href="/tags/前端">前端技术</a></li>
89				        
90							<li><a href="/tags/叽里呱啦">叽里呱啦</a></li>
91				        
92						</ul>
93					</nav>
94					<nav class="header-nav">
95						<div class="social">
96							
97								<a class="github" target="_blank" href="https://github.com/Hx2heng/" title="github">github</a>
98					        
99								<a class="weibo" target="_blank" href="http://weibo.com/justaboy/" title="weibo">weibo</a>
100					        
101						</div>
102					</nav>
103				</section>
104				
105				
106				<section class="switch-part switch-part2">
107					<div class="widget tagcloud" id="js-tagcloud">
108						<a href="/tags/CSS/" style="font-size: 10px;">CSS</a> <a href="/tags/JS/" style="font-size: 15px;">JS</a> <a href="/tags/js/" style="font-size: 10px;">js</a> <a href="/tags/前端/" style="font-size: 20px;">前端</a> <a href="/tags/叽里呱啦/" style="font-size: 10px;">叽里呱啦</a> <a href="/tags/技术/" style="font-size: 20px;">技术</a> <a href="/tags/生活/" style="font-size: 10px;">生活</a>
109					</div>
110				</section>
111				
112				
113				
114
115				
116				
117				<section class="switch-part switch-part3">
118				
119					<div id="js-aboutme">黄信政,前端程序员,希望与大家共同进步。</div>
120				</section>
121				
122			</div>
123		</div>
124	</header>				
125</div>
126    </div>
127    <div class="mid-col">
128      <nav id="mobile-nav">
129  	<div class="overlay">
130  		<div class="slider-trigger"></div>
131  		<h1 class="header-author js-mobile-header hide">黄信政</h1>
132  	</div>
133	<div class="intrude-less">
134		<header id="header" class="inner">
135			<div class="profilepic">
136				<img lazy-src="/img/head-pic.jpg" class="js-avatar">
137			</div>
138			<hgroup>
139			  <h1 class="header-author">黄信政</h1>
140			</hgroup>
141			
142			<nav class="header-menu">
143				<ul>
144				
145					<li><a href="/">主页</a></li>
146		        
147					<li><a href="/archives">所有文章</a></li>
148		        
149					<li><a href="/tags/前端">前端技术</a></li>
150		        
151					<li><a href="/tags/叽里呱啦">叽里呱啦</a></li>
152		        
153		        <div class="clearfix"></div>
154				</ul>
155			</nav>
156			<nav class="header-nav">
157				<div class="social">
158					
159						<a class="github" target="_blank" href="https://github.com/Hx2heng/" title="github">github</a>
160			        
161						<a class="weibo" target="_blank" href="http://weibo.com/justaboy/" title="weibo">weibo</a>
162			        
163				</div>
164			</nav>
165		</header>				
166	</div>
167</nav>
168      <div class="body-wrap">
169  
170    <article id="post-webpack与bootstrap的配合方案" class="article article-type-post" itemscope itemprop="blogPost">
171  
172    <div class="article-meta">
173      <a href="/2017/02/24/webpack与bootstrap的配合方案/" class="article-date">
174  	<time datetime="2017-02-23T17:18:34.000Z" itemprop="datePublished">2017-02-24</time>
175</a>
176    </div>
177  
178  <div class="article-inner">
179    
180      <input type="hidden" class="isFancy" />
181    
182    
183      <header class="article-header">
184        
185  
186    <h1 itemprop="name">
187      <a class="article-title" href="/2017/02/24/webpack与bootstrap的配合方案/">通过webpack使用自定义bootstrap解决方案</a>
188    </h1>
189  
190
191      </header>
192      
193    
194    <div class="article-entry" itemprop="articleBody">
195      
196        <h3 id="如何更好地使用自定义的Bootstrap?">如何更好地使用自定义的Bootstrap?</h3><p>bootstrap官网提供自定义版本的下载,用户只要选择需要的组件就能下载对应的版本。但是,这种做法实在是太繁琐了。而且如果我们想要方便选择所需组件,又想通过sass/less修改bootstrap,要通过什么方式?答案就是’bootstrap-loader’(这个是对应修改sass的,本文只讲sass,还有个对应less的,叫’bootstrap-webpack’)。</p>
197<h3 id="bootstrap-loader的使用">bootstrap-loader的使用</h3><p>bootstrap-loader ,从名字上看得出他是一个加载器,配合webpack使用的。它能使页面引用到自定义版本的bootstrap。</p>
198<p>###1.安装</p>
199<p>安装’bootstrap-loader’</p>
200<pre><code>npm <span class="keyword">install</span> bootstrap-loader
201</code></pre><p>安装所需依赖:</p>
202<pre><code>npm install --save-dev bootstrap-sass
203npm install --save-dev css-loader <span class="keyword">node</span><span class="identifier"></span><span class="title">-sass</span> resolve-url-loader sass-loader style-loader url-loader
204</code></pre><p>你有可能还需要安装:</p>
205<pre><code>npm install --<span class="built_in">save</span>-<span class="built_in">dev</span> imports-loader exports-loader
206npm install --<span class="built_in">save</span>-<span class="built_in">dev</span> postcss-loader        
207</code></pre><p>###2.使用<br>1.简单使用方法:</p>
208<pre><code><span class="keyword">
208import</span> <span class="string">'bootstrap-loader'</span>
209</code></pre><p>此时会引用到完整的bootstrap。</p>
210<p>注:bootstrap引用了诸如svg、ttf等文件,所以也需要在webpack.config.js配置好对应的加载器:</p>
211<pre><code><span class="rules">{ <span class="rule"><span class="attribute">test</span>:<span class="value"> /\.scss$/, use: [<span class="string">'style-loader'</span>, <span class="string">'css-loader'</span>, <span class="string">'postcss-loader'</span>, <span class="string">'sass-loader'</span>] </span></span></span>},
212<span class="rules">{ <span class="rule"><span class="attribute">test</span>:<span class="value"> /\.css$/, use: [<span class="string">'style-loader'</span>, <span class="string">'css-loader'</span>, <span class="string">'postcss-loader'</span>] </span></span></span>},
213<span class="rules">{
214<span class="rule"><span class="attribute">test</span>:<span class="value"> /\.woff2?(\?v=[<span class="number">0</span>-<span class="number">9</span>]\.[<span class="number">0</span>-<span class="number">9</span>]\.[<span class="number">0</span>-<span class="number">9</span>])?$/,
215use: <span class="string">'url-loader?limit=10000'</span>,
216</span></span></span>},
217<span class="rules">{
218<span class="rule"><span class="attribute">test</span>:<span class="value"> /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
219use: <span class="string">'file-loader'</span>,
220</span></span></span>}
221</code></pre><p>
2212.可自定义版:</p>
222<p>首先在入口文件前面加载’bootstrap-loader’(此时不用在index.js里写<code>import &#39;bootstrap-loader&#39;</code>):</p>
223<pre><code><span class="tag">entry</span>: {
224    <span class="attribute">index</span>: [<span class="string">'bootstrap-loader'</span>, <span class="string">'./index.js'</span>],<span class="comment">//webpack数组形式入口文件以数组最后一个作为出口文件</span>
225    <span class="attribute">test</span>: <span class="string">'./test.js'</span>,
226},
227</code></pre><p>然后在根目录添加.bootstraprc文件,即是bootstrap自定义配置文件,文件可以用yml或者json格式编写自定义属性,完整案例(yml格式):</p>
228<pre><code><span class="attribute">bootstrapVersion</span>: <span class="string">3</span>
229
230<span class="http"><span class="attribute">useCustomIconFontPath</span>: <span class="string">false</span>
231
232<span class="sqf">styleLoaders:
233  - style
234  - css
235  - sass
236
237extractStyles: <span class="literal">false</span>
238
239styles:
240
241  <span class="preprocessor"># Mixins</span>
242  mixins: <span class="literal">true</span>
243
244  <span class="preprocessor"># Reset and dependencies</span>
245  normalize: <span class="literal">true</span>
246  print: <span class="literal">true</span>
247  glyphicons: <span class="literal">true</span>
248
249  <span class="preprocessor"># Core CSS</span>
250  scaffolding: <span class="literal">true</span>
251  <span class="built_in">type</span>: <span class="literal">true</span>
252  code: <span class="literal">true</span>
253  grid: <span class="literal">true</span>
254  tables: <span class="literal">true</span>
255  forms: <span class="literal">true</span>
256  buttons: <span class="literal">true</span>
257
258  <span class="preprocessor"># Components</span>
259  component-animations: <span class="literal">true</span>
260  dropdowns: <span class="literal">true</span>
261  button-groups: <span class="literal">true</span>
262  input-groups: <span class="literal">true</span>
263  navs: <span class="literal">true</span>
264  navbar: <span class="literal">true</span>
265  breadcrumbs: <span class="literal">true</span>
266  pagination: <span class="literal">true</span>
267  pager: <span class="literal">true</span>
268  labels: <span class="literal">true</span>
269  badges: <span class="literal">true</span>
270  jumbotron: <span class="literal">true</span>
271  thumbnails: <span class="literal">true</span>
272  alerts: <span class="literal">true</span>
273  progress-bars: <span class="literal">true</span>
274  media: <span class="literal">true</span>
275  <span class="built_in">list</span>-<span class="built_in">group</span>: <span class="literal">true</span>
276  panels: <span class="literal">true</span>
277  wells: <span class="literal">true</span>
278  responsive-embed: <span class="literal">true</span>
279  close: <span class="literal">true</span>
280
281  <span class="preprocessor"># Components w/ JavaScript</span>
282  modals: <span class="literal">true</span>
283  tooltip: <span class="literal">true</span>
284  popovers: <span class="literal">true</span>
285  carousel: <span class="literal">true</span>
286
287  <span class="preprocessor"># Utility classes</span>
288  utilities: <span class="literal">true</span>
289  responsive-utilities: <span class="literal">true</span>
290
291<span class="preprocessor">### Bootstrap scripts</span>
292scripts:
293  transition: <span class="literal">true</span>
294  alert: <span class="literal">true</span>
295  button: <span class="literal">true</span>
296  carousel: <span class="literal">true</span>
297  collapse: <span class="literal">true</span>
298  dropdown: <span class="literal">true</span>
299  modal: <span class="literal">true</span>
300  tooltip: <span class="literal">true</span>
301  popover: <span class="literal">true</span>
302  scrollspy: <span class="literal">true</span>
303  tab: <span class="literal">true</span>
304  affix: <span class="literal">true</span></span></span>
305</code></pre><p>如果想给不同页面配置不用的.bootstraprc文件或者不想把.bootstraprc文件放在根目录,可以修改入口文件的bootstrap-loader的后缀,</p>
306<p>格式:<strong><code>bootstrap-loader/lib/bootstrap.loader?configFilePath=[文件位置]/[文件名字].[文件类型]!bootstrap-loader/no-op.js</code></strong></p>
307<p>eg:</p>
308<pre><code>entry: {
309    index: [`<span class="keyword">bootstrap</span>-loader/lib/<span class="keyword">bootstrap</span>.loader?configFilePath=<span class="label">${__dirname}</span>/.bootstraprc!<span class="keyword">bootstrap</span>-loader/<span class="keyword">no</span>-op.js`, './index.js'],
310    <span class="keyword">test</span>: './<span class="keyword">test</span>.js',
311}
312</code></pre><p>而自定义样式需要在.bootstraprc添加配置(按需要设置,不设置注释就可以):</p>
313<pre><code><span class="comment">
313//在Bootstrap variables之前加载</span>
314<span class="string">preBootstrapCustomizations:</span> .<span class="regexp">/app/</span>styles<span class="regexp">/bootstrap/</span>pre-customizations.scss
315
316<span class="comment">//在Bootstrap variables之后bootstrap之前加载</span>
317<span class="string">bootstrapCustomizations:</span> .<span class="regexp">/app/</span>styles<span class="regexp">/bootstrap/</span>customizations.scss
318
319<span class="comment">//在bootstrap之后加载</span>
320<span class="string">appStyles:</span> .<span class="regexp">/app/</span>styles/app.scss
321</code></pre><p>【附<a href="http://v3.bootcss.com/customize/#less-variables" target="_blank" rel="external">bootstrap 样式变量表</a>】</p>
322<p>bootstrap-loader的官方源码:<a href="https://github.com/shakacode/bootstrap-loader">https://github.com/shakacode/bootstrap-loader</a>,上面会有更多解决方案。</p>
323
324      
325    </div>
326    
327    <div class="article-info article-info-index">
328      
329      
330	<div class="article-tag tagcloud">
331		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JS/">JS</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/前端/">前端</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/技术/">技术</a></li></ul>
332	</div>
333
334      
335
336      
337      <div class="clearfix"></div>
338    </div>
339    
340  </div>
341  
342</article>
343
344
345
346
347
348
349
350  
351    <article id="post-es6+express+ejs+webpack+sass+mongoDB" class="article article-type-post" itemscope itemprop="blogPost">
352  
353    <div class="article-meta">
354      <a href="/2017/02/23/es6+express+ejs+webpack+sass+mongoDB/" class="article-date">
355  	<time datetime="2017-02-23T02:28:29.000Z" itemprop="datePublished">2017-02-23</time>
356</a>
357    </div>
358  
359  <div class="article-inner">
360    
361      <input type="hidden" class="isFancy" />
362    
363    
364      <header class="article-header">
365        
366  
367    <h1 itemprop="name">
368      <a class="article-title" href="/2017/02/23/es6+express+ejs+webpack+sass+mongoDB/">es6+express+ejs+webpack+sass+mongoDB 部署</a>
369    </h1>
370  
371
372      </header>
373      
374    
375    <div class="article-entry" itemprop="articleBody">
376      
377        <p>项目地址:<a href="https://github.com/Hx2heng/blogDemo">es6+express+ejs+webpack+sass+mongoDB</a></p>
378<h2 id="使用">使用</h2><pre><code>npm i <span class="comment">//安装</span>
379npm start <span class="comment">//开启服务</span>
380npm <span class="keyword">run</span> dev  <span class="comment">//开发模式</span>
381npm <span class="keyword">run</span> bulid <span class="comment">//发布</span>
382</code></pre><h2 id="项目目录">项目目录</h2><pre><code><span class="comment">--root</span>
383    |<span class="comment">--config                //配置文件</span>
384    |<span class="comment">--middlewares            //中间件</span>
385    |<span class="comment">--pubulic                //静态资源</span>
386     |<span class="comment">--js</span>
387     |<span class="comment">--css/sass</span>
388     |<span class="comment">--images</span>
389    |<span class="comment">--router                //路由控制器</span>
390    |<span class="comment">--tools                //工具</span>
391     |<span class="comment">--lib</span>
392     |<span class="comment">--webpack.config.js</span>
393    |<span class="comment">--views                //视图文件</span>
394     |<span class="comment">--components</span>
395    |<span class="comment">--package.json</span>
396    |<span class="comment">--...</span>
397</code></pre><h2 id="es6预设置">es6预设置</h2><p>使用babel对es6进行转换:</p>
398<p>下载</p>
399<pre><code> <span class="string">"devDependencies"</span>: {
400<span class="string">"babel"</span>: <span class="string">"6.23.0"</span>,
401<span class="string">"babel-cli"</span>: <span class="string">"6.23.0"</span>,
402<span class="string">"babel-core"</span>: <span class="string">"6.23.1"</span>,
403<span class="string">"babel-loader"</span>: <span class="string">"6.4.0"</span>,<span class="comment">//webpack的babel-loader</span>
404<span class="string">"babel-plugin-transform-es2015-modules-commonjs"</span>: <span class="string">"6.23.0"</span>,<span class="comment">
404//允许使用es6的modules</span>
405<span class="string">"babel-preset-env"</span>: <span class="string">"1.2.1"</span>,
406<span class="string">"babel-preset-react"</span>: <span class="string">"6.23.0"</span>,<span class="comment">//支持jsx转换</span>
407<span class="string">"babel-preset-stage-0"</span>: <span class="string">"6.22.0"</span>
408}
409</code></pre><p>配置可以不写在.babelrc里,直接写在package.json</p>
410<pre><code> <span class="string">"babel"</span>: {
411<span class="string">"presets"</span>: [
412  <span class="string">"react"</span>,
413  <span class="string">"stage-0"</span>
414],
415<span class="string">"plugins"</span>: [
416  <span class="string">"transform-es2015-modules-commonjs"</span>
417]
418}
419</code></pre><p>npm script直接运行babel-node</p>
420<pre><code><span class="string">"scripts"</span>: {
421<span class="string">"test"</span>: <span class="string">"echo \"</span><span class="keyword">Error</span>: <span class="keyword">no</span> <span class="keyword">test</span> specified\<span class="string">" &amp;&amp; exit 1"</span>,
422<span class="string">"start"</span>: <span class="string">"babel-node tools/start"</span>,<span class="comment">//表示执行tools文件夹的start文件,执行之前进行es6转码</span>
423<span class="string">"dev"</span>: <span class="string">"supervisor -w tools,router,middlewares,config,views -- -r babel-register tools/dev"</span>
424}
425</code></pre><h2 id="es6_-_异步操作_async/await_语法">es6 - 异步操作 async/await 语法</h2><p>async函数允许你像同步写法那样去写异步操作,async函数里面关键字await后面接一个Promise,此时函数执行会在await后的Promise执行完成后才会往下执行。</p>
426<p>举个例子,创建服务器是异步操作,我们需要在服务器创建完成后才布置路由。首先创建服务器,并把它包在Promise里面:</p>
427<pre><code>let runServer = <span class="function"><span class="params">(app)</span>=&gt;</span>{
428    <span class="keyword">return</span> <span class="keyword">new</span> Promise(resolve=&gt;{
429        var server = app.listen(<span class="string">'3000'</span>,<span class="function"><span class="params">()</span>=&gt;</span>{
430            var host = server.address().address;
431              var port = server.address().port;
432            <span class="built_in">console</span>.log(<span class="string">'server running at http://%s:%s'</span>, host, port);
433            resolve();
434        })
435    }) 
436} 
437</code></pre><p>然后在主体事件中,写异步操作:</p>
438<pre><code> <span class="keyword">let</span> appPro = <span class="keyword">async</span> ()=&gt;{
439    <span class="keyword">let</span> app = express();
440    <span class="comment">//等待启动服务 </span>
441    <span class="keyword">await</span> runServer(app);
442    <span class="comment">//启动路由</span>
443    router(app);
444}
445</code></pre><p>此时,路由 router() 会在服务器创建完成后执行。</p>
446<h2 id="express_将session_存入Redis">express 将session 存入Redis</h2><pre><code><span class="keyword">import</span> session <span class="keyword">from</span> <span class="string">'express-session'</span>;
447<span class="keyword">import</span> connectRedis <span class="keyword">from</span> <span class="string">'connect-redis'</span>;
448
449<span class="keyword">let</span> sessionCfg = {
450    secret:<span class="string">'huangxinzheng'</span>,
451    resave:<span class="literal">true</span>,<span class="comment">//即使 session 没有被修改,也保存 session 值,默认为 true(!不添加报错,下同)</span>
452    saveUninitialized: <span class="literal">false</span>,<span class="comment">// 设置为 false,强制创建一个 session,即使用户未登录</span>
453    cookie: {
454        maxAge: <span class="number">1000</span>*<span class="number">60</span>*<span class="number">60</span>*<span class="number">24</span><span class="comment">// 过期时间,过期后 cookie 中的 session id 自动删除</span>
455    }
456}
457
458 <span class="comment">//设置session,将session存在 Redis 中</span>
459<span class="keyword">var</span> RedisStore = connectRedis(session);
460<span class="keyword">let</span> rs = <span class="keyword">new</span> RedisStore();
461app.use(session(extend(<span class="literal">true</span>,{},serverCfg,rs)));
462</code></pre><h2 id="express_中间件的使用">express 中间件的使用</h2><p>express的中间件很重要,甚至可以说express就是通过中间来实现应用的。express有很多开源中间件可以给我们下载使用(比如express-session)。把中间件放进app.use()里就代表每次服务器请求都会经过这个中间件(假设中间件没有停止下一个的情况下)。我们也可以自己写中间件,其实中间件就是一个函数,这个函数有<code>req</code>,<code>res</code>,<code>next</code> 三个参数,分别代表请求对象,响应对象,和next方法。执行next方法可过渡当前中间件。</p>
463<p>写一个记录访问次数的中间件,配合session记录一天内用户的访问次数:</p>
464<pre><code>
464let showReqTimes = (req,res,<span class="keyword">next</span>) =&gt;{
465<span class="keyword">if</span>(!req.session.reqTimes){
466    req.session.reqTimes =<span class="number">1</span><span class="comment">;</span>
467    res.<span class="built_in">send</span>(<span class="string">'你第1次访问了本网站'</span>)<span class="comment">;</span>
468}<span class="keyword">else</span>{
469    req.session.reqTimes++<span class="comment">;</span>
470    res.<span class="built_in">send</span>(<span class="string">'&lt;p&gt;你第'</span>+req.session.reqTimes+<span class="string">'次访问了本网站&lt;/p&gt;'</span>)<span class="comment">;</span>
471}
472
473<span class="keyword">next</span>()<span class="comment">;//执行下一个中间件</span>
474}
475
476export <span class="keyword">default</span> showReqTimes
477</code></pre><p>假设是记录在访问’/‘的时候:</p>
478<pre><code><span class="literal">import</span> showReqTimes  from <span class="string">'./showReqTimes.js'</span>
479app.<span class="literal">get</span>(<span class="string">'/'</span>, showReqTimes, (req, res) =&gt; {<span class="comment">//此时每次访问根目录之后都会进入showReqTimes这个中间件</span>
480    <span class="comment">//do something..</span>
481})
482</code></pre><h2 id="webpack新版本的写法变化-Loader">webpack新版本的写法变化-Loader</h2><p>webpack2.2较上一代在语法方面有了变化,特别是loader:</p>
483<pre><code>原先写法:
484<span class="tag">module</span>: <span class="rules">{
485    <span class="rule"><span class="attribute">loaders</span>:<span class="value"> [{
486        test: /\.css$/,
487        loader: <span class="string">'style!css'</span>
488    </span></span></span>}]
489}
490现在写法:
491 <span class="tag">module</span>: <span class="rules">{
492    <span class="rule"><span class="attribute">rules</span>:<span class="value"> [{
493        test: /\.css$/,
494        use: [ <span class="string">'style-loader'</span>, <span class="string">'css-loader'</span>]
495    </span></span></span>}]
496}
497</code></pre><p>loaders改为了rules,loader改为了use。语义上更加容易理解了,“对不同的文件类型使用不同的规则”。webpack 虽好,但是配置的时候很麻烦,更新了新版本之后,写法不习惯,报错也是莫名其妙。开发的要一边看官方文档,花了很多时间,看来要多花点时间去适应。</p>
498<h2 id="问题&amp;解决">问题&amp;解决</h2><h4 id="1-_supervisor_监听_es6_文件">1. supervisor 监听 es6 文件</h4><p>supervisor 默认监听不经过处理的js文件,所如果是直接监听es6语法的js文件,那么会出现语法错。</p>
499<p>所以,采用<code>babel-register</code>对es6文件进行预转换,并且设置<code>supervisor</code>:</p>
500<pre><code>supervisor -w tools,router <span class="comment">-- -r babel-register tools/start</span>
501</code></pre><p><code>supervisor</code>的官方文档可参见 :<a href="https://www.npmjs.com/package/supervisor" target="_blank" rel="external"> https://www.npmjs.com/package/supervisor</a></p>
502<h4 id="2-_ejs模板引擎不同页面引用不同样式文件">2. ejs模板引擎不同页面引用不同样式文件</h4><p>ejs是款简单好用的模板引擎,但是网上很多人说ejs在不同的页面引用不同的文件非常不方便,有人给出在res.locals给模板传参的方法,把页面的引用样式文件从后台传给模板引擎进行解析。个人感觉但是这种方法不妥,管理起来不方便,样式文件就应该写在视图页面,不应该在路由里面写。</p>
503<p>其实可以通过ejs的include解决这个问题。</p>
504<p>ejs2.0+的include函数已经支持传参功能。利用这个特性我们可以简单实现ejs模板引擎不同页面引用不同样式文件了。具体实现:</p>
505<p>在首页的视图中往header里面穿参数:</p>
506<pre><code><span class="xml"></span>&lt;%-<span class="ruby"> <span class="keyword">include</span>(<span class="string">'layouts/header'</span>,{<span class="symbol">styles:</span>[<span class="string">'index'</span>,<span class="string">'jquery'</span>]}) </span>%&gt;<span class="xml"></span>
507</code></pre><p>然后在header的视图中修改引用样式:</p>
508<pre><code><span class="xml"> </span>&lt;%<span class="perl"> <span class="keyword">
508for</span>(var i=<span class="number">0</span>; i&lt;styles.<span class="keyword">length</span>; i++) {</span>%&gt;<span class="xml">
509   <span class="tag">&lt;<span class="title">link</span> <span class="attribute">rel</span>=<span class="value">"stylesheet"</span> <span class="attribute">href</span>=<span class="value">"/css/</span></span></span>&lt;%=<span class="perl"> styles[i] </span>%&gt;<span class="xml"><span class="tag"><span class="value">.css"</span>&gt;</span>
510</span>&lt;%<span class="perl"> } </span>%&gt;<span class="xml"></span>
511</code></pre><h4 id="3-_server-address()-address_获取到IPv6格式的主机地址”::”?">3. server.address().address 获取到IPv6格式的主机地址”::”?</h4><p>以为如果计算机默认启用了IPv6,那么 server.address().address 获取到的就是IPv6的地址。如下:</p>
512<pre><code><span class="keyword">var</span> express      = <span class="built_in">require</span>(<span class="string">'express'</span>);
513<span class="keyword">var</span> app          = express();
514<span class="keyword">var</span> server = app.listen(<span class="number">3000</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>
514) </span>{
515    <span class="keyword">var</span> host = server.address().address;
516    <span class="keyword">var</span> port = server.address().port;
517    <span class="built_in">console</span>.log(<span class="string">'running at http://'</span> + host + <span class="string">':'</span> + port)
518});
519
520res:<span class="string">'server running at http://:::3000'</span>    
521</code></pre><p>如果想得到IPv4的主机地址,请显式得给listen传递主机名:</p>
522<pre><code><span class="keyword">var</span> express      = <span class="built_in">require</span>(<span class="string">'express'</span>);
523<span class="keyword">var</span> app          = express();
524<span class="keyword">var</span> server = app.listen(<span class="number">3000</span>,<span class="string">'localhost'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{
525    <span class="keyword">var</span> host = server.address().address;
526    <span class="keyword">var</span> port = server.address().port;
527    <span class="built_in">console</span>.log(<span class="string">'running at http://'</span> + host + <span class="string">':'</span> + port)
528});
529
530res:<span class="string">'server running at http://127.0.0.1:3000'</span>
531</code></pre><h4 id="4-_browser-sync_与_webpack-dev-middleware_的配合?">4. browser-sync 与 webpack-dev-middleware 的配合?</h4><pre><code><span class="keyword">const</span> bundler = webpack(webpackCfg);
532<span class="keyword">const</span> wpdm = webpackDevMiddleware(bundler,{
533    publicPath: webpackCfg.output.publicPath
534});
535
536<span class="keyword">let</span> handleBundleComplete = async () =&gt; {
537    <span class="keyword">if</span>(!app){
538        await appPro().then(exApp=&gt;{app = exApp});
539        <span class="comment">//app.use(wpdm)</span>
540        <span class="comment">//启动 browser-sync</span>
541        bs = browserSync.create();
542        bs.init({
543          files: path.resolve(__dirname, <span class="string">'../public/*/**'</span>),<span class="comment">//监听目录</span>
544          proxy: {
545            target: serverCfg.host+<span class="string">':'</span>+serverCfg.port,
546            middleware:[wpdm]
547          },
548          open: <span class="keyword">false</span>,
549          reloadOnRestart: <span class="keyword">true</span>
550        },resolve);
551    }<span class="keyword">else</span>{
552        bs.reload();
553    }
554
555};
556bundler.plugin(<span class="string">'done'</span>, () =&gt; handleBundleComplete());
557</code></pre><p>具体流程:</p>
558<ul>
559<li>1.先webpack生成bundler(此阶段并不执行生成)</li>
560<li>2.用webpack-dev-middleware把bundler包成中间件wpdm</li>
561<li>3.第一步生成bundler成功后启动服务器</li>
562<li>4.启动服务器成功后创建并初始化browser-sync</li>
563<li>5.第二步生成的中间件wpdm给到browser-sync中间件设置</li>
564<li>6.每次触发browser-sync的时候都执行中间件wpdm</li>
565<li>7.第一次之后的中间件wpdm执行都不用再启动服务器和创建browser-sync,只是执行browser-sync的reload事件</li>
566</ul>
567
568      
569    </div>
570    
571    <div class="article-info article-info-index">
572      
573      
574	<div class="article-tag tagcloud">
575		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JS/">JS</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/前端/">前端</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/技术/">技术</a></li></ul>
576	</div>
577
578      
579
580      
581      <div class="clearfix"></div>
582    </div>
583    
584  </div>
585  
586</article>
587
588
589
590
591
592
593
594  
595    <article id="post-webpack实现HMR热加载" class="article article-type-post" itemscope itemprop="blogPost">
596  
597    <div class="article-meta">
598      <a href="/2017/01/11/webpack实现HMR热加载/" class="article-date">
599  	<time datetime="2017-01-11T06:38:54.000Z" itemprop="datePublished">2017-01-11</time>
600</a>
601    </div>
602  
603  <div class="article-inner">
604    
605      <input type="hidden" class="isFancy" />
606    
607    
608      <header class="article-header">
609        
610  
611    <h1 itemprop="name">
612      <a class="article-title" href="/2017/01/11/webpack实现HMR热加载/">webpack实现HMR热加载</a>
613    </h1>
614  
615
616      </header>
617      
618    
619    <div class="article-entry" itemprop="articleBody">
620      
621        <p>“热模块替换”(HMR)是在某个功能活动运行时注入更新的模块。</p>
622<pre><code>就像对每一个模块进行LiveReload
623</code></pre><p>也就是说,在开发过程中,我们不用刷新页面,就能实现局部的更新,无论是css代码,还是js代码。</p>
624<h2 id="webpack实现HMR热加载">webpack实现HMR热加载</h2><p>实现webpack HMR需要通过webpack的两个中间件,即<code>webpack-dev-middleware</code>和<code>webpack-hot-middleware</code>。</p>
625<p><strong><a href="https://github.com/webpack/webpack-dev-middleware">webpack-dev-middleware</a></strong>是什么:</p>
626<blockquote>
627<p>The webpack-dev-middleware is a small middleware for a connect-based middleware stack. It uses webpack to compile assets in-memory and serve them. When a compilation is running every request to the served webpack assets is blocked until we have a stable bundle.</p>
628</blockquote>
629<p>可以看出<code>webpack-dev-middleware</code>是一个中间件,负责把webpack打包的bundle<strong>
629生成在内存中,而不在磁盘里</strong>,而且在其生成稳定的包之前,<strong>编译将被阻塞</strong>(使网页更新有貌似网络延迟的效果),如此一来我们就不需要去关心编译是否完成了。</p>
630<p><strong><a href="https://github.com/glenjamin/webpack-hot-middleware">webpack-hot-middleware</a></strong>是什么:</p>
631<blockquote>
632<p>This module is only concerned with the mechanisms to connect a browser client to a webpack server &amp; receive updates. It will subscribe to changes from the server and execute those changes using webpack’s HMR API. Actually making your application capable of using hot reloading to make seamless changes is out of scope, and usually handled by another library.</p>
633</blockquote>
634<p><code>webpack-dev-middleware</code>用来在浏览器客户端和webpack服务端进行连接,监听服务端改变的文件,然后<br>实现浏览器客户端的热加载。</p>
635<hr>
636<p>我写了个 <a href="https://github.com/Hx2heng/Webpack-HMR-demo">例子</a> 简单实现了HMR。</p>
637<p>首先,先安装npm模块(这里我们用express作为服务器):</p>
638<pre><code>npm i express webpack webpack-<span class="built_in">dev</span>-middleware webpack-hot-middleware --<span class="built_in">save</span>-<span class="built_in">dev</span>
639</code></pre><p>然后,编写webpack.config.js:</p>
640<pre><code><span class="comment">//增加三个插件,并在入口文件后增加一段代码</span>
641<span class="keyword">var</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>),
642    webpack =<span class="built_in">require</span>(<span class="string">'webpack'</span>);
643<span class="keyword">var</span> config = {
644    entry: 
645    [<span class="string">"./src/a.js"</span>,
646    <span class="string">'webpack-hot-middleware/client?path=/__webpack_hmr&amp;timeout=20000'</span>,
647    ],
648    output: {
649        path: path.resolve(__dirname, <span class="string">'./output/'</span>),
650        filename:<span class="string">'bundle.js'</span>,
651    },
652    plugins: [
653        <span class="keyword">new</span> webpack.optimize.OccurrenceOrderPlugin(),
654        <span class="keyword">new</span> webpack.HotModuleReplacementPlugin(),
655        <span class="keyword">new</span> webpack.NoEmitOnErrorsPlugin()
656    ]
657}
658
659<span class="built_in">module</span>.exports = config;
660</code></pre><p>然后给express配置中间件:</p>
661<pre><code><span class="keyword">var</span> express = <span class="keyword">require</span>(<span class="string">'express'</span>),
662    app = express(),
663    webpack = <span class="keyword">require</span>(<span class="string">'webpack'</span>),
664    config = <span class="keyword">require</span>(<span class="string">'./webpack.config.js'</span>),
665    webpackDevMiddleware = <span class="keyword">require</span>(<span class="string">'webpack-dev-middleware'</span>),
666    webpackHotMiddleware = <span class="keyword">require</span>(<span class="string">'webpack-hot-middleware'</span>);
667
668
669<span class="comment">//如果有回调函数并且没有中间件插件则直接运行webpack。如果没有回调函数或没有中间件插件则不直接执行webpack。</span>
670<span class="keyword">var</span> compiler = webpack(config, <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
671    console.log(<span class="string">'done'</span>)
672}); 
673
674<span class="comment">/*这里设置bundle生成位置,注意是生成在内存中,由于我们设置了静态目录'output',
675所以这里实际上的网络位置是localhost:8080/,文件位置是 根目录/output */</span>
676<span class="keyword">var</span> options = {
677    publicPath: <span class="string">"/"</span>,
678}
679
680app.<span class="keyword">
680use</span>(webpackDevMiddleware(compiler, options));
681app.<span class="keyword">use</span>(webpackHotMiddleware(compiler));
682app.<span class="keyword">use</span>(express.<span class="keyword">static</span>(<span class="string">'output'</span>))
683app.listen(<span class="number">8080</span>, <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
684    console.log(<span class="string">'Example app listening on!'</span>)
685})
686</code></pre><p>最后在需要热加载的文件下加入(案例中是a.js):</p>
687<pre><code><span class="keyword">if</span> (<span class="class"><span class="keyword">module</span>.<span class="title">hot</span>) {</span>
688    <span class="class"><span class="keyword">module</span>.<span class="title">hot</span>.<span class="title">accept</span>();</span>
689}
690</code></pre><p>准备就绪,运行:</p>
691<pre><code><span class="built_in">npm</span> start
692</code></pre><p>浏览器打开<code>localhost:8080</code> ,会看到控制台输出</p>
693<blockquote>
694<p>[HMR] connected</p>
695</blockquote>
696<p>代表热加载连接成了! </p>
697<p>我们点击按钮,弹出1。此时我们尝试修改b.js,把<code>alert(1)</code>改为<code>alert(2)</code>,回到浏览器,发现浏览器并没有刷新,再次点击按钮,弹出了2!浏览器在不刷新的情况下,更新了js文件!</p>
698
699      
700    </div>
701    
702    <div class="article-info article-info-index">
703      
704      
705	<div class="article-tag tagcloud">
706		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/js/">js</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/前端/">前端</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/技术/">技术</a></li></ul>
707	</div>
708
709      
710
711      
712      <div class="clearfix"></div>
713    </div>
714    
715  </div>
716  
717</article>
718
719
720
721
722
723
724
725  
726    <article id="post-经验分享-网页动效之Canvas篇" class="article article-type-post" itemscope itemprop="blogPost">
727  
728    <div class="article-meta">
729      <a href="/2016/08/23/经验分享-网页动效之Canvas篇/" class="article-date">
730  	<time datetime="2016-08-23T02:28:29.000Z" itemprop="datePublished">2016-08-23</time>
731</a>
732    </div>
733  
734  <div class="article-inner">
735    
736      <input type="hidden" class="isFancy" />
737    
738    
739      <header class="article-header">
740        
741  
742    <h1 itemprop="name">
743      <a class="article-title" href="/2016/08/23/经验分享-网页动效之Canvas篇/">经验分享-网页动效之Canvas篇</a>
744    </h1>
745  
746
747      </header>
748      
749    
750    <div class="article-entry" itemprop="articleBody">
751      
752        <p>在处理多元素动效的时候用操作DOM的方法会严重占用内存,拖慢运行速度,所以应该用Canvas画布制作多元素的动效或者游戏。</p>
753<p>Canvas是HTML5的新标签。用于绘制图像(通过脚本,通常是 JavaScript),不过,canvas元素本身并没有绘制能力(它仅仅是图形的容器)。</p>
754<p>Canvas提供的功能更原始,适合像素处理,动态渲染和大数据量绘制。</p>
755<p>我写了一个弹弓射鸟的游戏,用的是JavaScript+Canvas,里面包含大部分Canvas的用法,以及面向对象的JavaScript写法:</p>
756<p><img src="https://raw.githubusercontent.com/Hx2heng/SlingShot/master/images/code.png" alt=""></p>
757<p>(手机扫一扫查看demo,我只写了touch事件,所以只能在手机上玩,或者电脑开发者模式模拟手机。)</p>
758<p>项目 <a href="https://github.com/Hx2heng/SlingShot">源码地址</a></p>
759<hr>
760<p>该游戏优化过,即使出现超大量的元素也不会卡:</p>
761<p><img src="https://raw.githubusercontent.com/Hx2heng/SlingShot/master/images/show.jpg" alt=""></p>
762<p>优化通过删除冗余对象、去除setInterval改为requestAnimationFrame作为定时器、还有就是规范的游戏的开发模式。</p>
763<hr>
764<p>requestAnimationFrame作为定时器:</p>
765<pre><code>interval: <span class="keyword">function</span>() {
766     var <span class="variable">$this</span> = this;
767     this.timer = requestAnimationFrame(function() {
768         <span class="variable">$this</span>.render();
769         //游戏时间用完结束
770         if (<span class="variable">$this</span>.usedTime &lt; <span class="variable">$this</span>.time) {
771              <span class="variable">$this</span>.timer = requestAnimationFrame(arguments.callee);
772         } else {
773              <span class="variable">$this</span>.over();
774         }
775     });
776}
777</code></pre><hr>
778<p>只要学会了这个,并能自己亲手写出一个这样的游戏,那么你的canvas就可以了。</p>
779
780      
781    </div>
782    
783    <div class="article-info article-info-index">
784      
785      
786	<div class="article-tag tagcloud">
787		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JS/">JS</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/前端/">前端</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/技术/">技术</a></li></ul>
788	</div>
789
790      
791
792      
793      <div class="clearfix"></div>
794    </div>
795    
796  </div>
797  
798</article>
799
800
801
802
803
804
805
806  
807    <article id="post-gulp" class="article article-type-post" itemscope itemprop="blogPost">
808  
809    <div class="article-meta">
810      <a href="/2016/05/11/gulp/" class="article-date">
811  	<time datetime="2016-05-11T06:38:54.000Z" itemprop="datePublished">2016-05-11</time>
812</a>
813    </div>
814  
815  <div class="article-inner">
816    
817      <input type="hidden" class="isFancy" />
818    
819    
820      <header class="article-header">
821        
822  
823    <h1 itemprop="name">
824      <a class="article-title" href="/2016/05/11/gulp/">gulp command not found - error after installing gulp</a>
825    </h1>
826  
827
828      </header>
829      
830    
831    <div class="article-entry" itemprop="articleBody">
832      
833        <p>First,</p>
834<p>Be sure that you have gulp and gulp.cmd (use windows search )</p>
835<p>Then,</p>
836<p>Copy the path of gulp.cmd ( C:\Users\XXXX\AppData\Roaming\npm)</p>
837<p>Add this path to the Path envirement variable.</p>
838<p><strong><em>*OR</em></strong></p>
839<p>Edit “PATH” environment variable and add %APPDATA%\npm<br>(Add %APPDATA%\npm to front of Path, not end of the Path.)</p>
840<p>finally,</p>
841<p>reopen cmd.</p>
842
843      
844    </div>
845    
846    <div class="article-info article-info-index">
847      
848      
849	<div class="article-tag tagcloud">
850		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/前端/">前端</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/技术/">技术</a></li></ul>
851	</div>
852
853      
854
855      
856      <div class="clearfix"></div>
857    </div>
858    
859  </div>
860  
861</article>
862
863
864
865
866
867
868
869  
870    <article id="post-js设计模式-模拟私有变量" class="article article-type-post" itemscope itemprop="blogPost">
871  
872    <div class="article-meta">
873      <a href="/2016/01/14/js设计模式-模拟私有变量/" class="article-date">
874  	<time datetime="2016-01-14T08:08:59.000Z" itemprop="datePublished">2016-01-14</time>
875</a>
876    </div>
877  
878  <div class="article-inner">
879    
880      <input type="hidden" class="isFancy" />
881    
882    
883      <header class="article-header">
884        
885  
886    <h1 itemprop="name">
887      <a class="article-title" href="/2016/01/14/js设计模式-模拟私有变量/">js设计模式-模拟私有变量</a>
888    </h1>
889  
890
891      </header>
892      
893    
894    <div class="article-entry" itemprop="articleBody">
895      
896        <pre><code><span class="comment">//假设有一个人的类,一般的写法:                       </span>
897<span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name,age</span>)</span>{
898    <span class="keyword">this</span>.name = name;
899    <span class="keyword">this</span>.age = age;
900};
901Person.prototype={
902    born:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{
903        <span class="keyword">return</span> <span class="keyword">this</span>;
904    },
905    say:<span class="function"><span class="keyword">function</span>(<span class="params">word</span>)</span>{
906        <span class="keyword">var</span> $<span class="keyword">this</span> = <span class="keyword">this</span>;
907        <span class="built_in">console</span>.log($<span class="keyword">this</span>.name);
908    }
909}
910
911<span class="comment">//我们规定这个类创建的对象,其name属性必须小于4个字符</span>
912<span class="comment">//那么可以这样:</span>
913<span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name,age</span>)</span>{
914    <span class="keyword">if</span>(name.length&gt;<span class="number">4</span>) <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">'name too long'</span>);
915    <span class="keyword">this</span>.name = name;
916    <span class="keyword">this</span>.age = age;
917};
918Person.prototype={
919    born:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{
920        <span class="keyword">return</span> <span class="keyword">this</span>;
921    },
922    say:<span class="function"><span class="keyword">function</span>(<span class="params">word</span>)</span>{
923        <span class="keyword">var</span> $<span class="keyword">this</span> = <span class="keyword">this</span>;
924        <span class="built_in">console</span>.log($<span class="keyword">this</span>.name);
925    }
926}
927<span class="comment">//这样的话我们可以在创建对象之初限制对象的属性</span>
928<span class="keyword">var</span> person1 = <span class="keyword">new</span> Person(<span class="string">'Zacarh'</span>,<span class="number">23</span>);<span class="comment">//这样会报错</span>
929<span class="comment">//但是有个弊端,程序员创建了符合规定的对象,但是他仍可以修改对象的属性成为不符合规则的值</span>
930<span class="keyword">var</span> person2 = <span class="keyword">new</span> Person(<span class="string">'Tom'</span>,<span class="number">22</span>);<span class="comment">//成功创建</span>
931person2.name = <span class="string">'Zacarh'</span>;<span class="comment">//成功修改为不符合规则的值</span>
932<span class="built_in">console</span>.log(person2.name);<span class="comment">//Zacarh</span>
933
934<span class="comment">//于是就有了私有变量的由来,我们采用闭包模拟私有变量</span>
935<span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params"></span>)</span>{
936    <span class="keyword">var</span> name,age;<span class="comment">//这里的变量外部访问不到,可以看成私有变量</span>
937    <span class="keyword">this</span>.setName=<span class="function"><span class="keyword">function</span>(<span class="params">nameArgument</span>)</span>{<span class="comment">//这个是特权方法,可以访问私有变量</span>
938        <span class="keyword">if</span>(nameArgument.length&gt;<span class="number">4</span>) <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">'name too long'</span>);
939        name = nameArgument;<span class="comment">//特权方法内却可以访问到外部变量。js函数作用域是在定义的时候确定的,不是在执行的时候确定的</span>
940    };
941    <span class="keyword">this</span>.say = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{
942        <span class="built_in">console</span>.log(name);<span class="comment">//这里就不用this.name了</span>
943    }
944}
945<span class="keyword">var</span> person1 = <span class="keyword">new</span> Person();
946<span class="comment">// person1.setName('Zacarh');//报错,字符长度大于4</span>
947person1.setName(<span class="string">'Tom'</span>);<span class="comment">//可以</span>
948person1.say();<span class="comment">//输出Tom,而且此时你无法直接更改name的值了,必须要通过setName函数才可以。</span>
949
950<span class="comment">//上面那种做法的弊端就是,每创建一个对象,特权函数也会创建一次,这样会耗费更多的内存,不像用prototype那样所有对象共用prototype上面的方法。</span>
951</code></pre>
952      
953    </div>
954    
955    <div class="article-info article-info-index">
956      
957      
958	<div class="article-tag tagcloud">
959		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JS/">JS</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/前端/">前端</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/技术/">技术</a></li></ul>
960	</div>
961
962      
963
964      
965      <div class="clearfix"></div>
966    </div>
967    
968  </div>
969  
970</article>
971
972
973
974
975
976
977
978  
979    <article id="post-经验分享-网页动效之CSS篇" class="article article-type-post" itemscope itemprop="blogPost">
980  
981    <div class="article-meta">
982      <a href="/2015/11/23/经验分享-网页动效之CSS篇/" class="article-date">
983  	<time datetime="2015-11-23T02:28:29.000Z" itemprop="datePublished">2015-11-23</time>
984</a>
985    </div>
986  
987  <div class="article-inner">
988    
989      <input type="hidden" class="isFancy" />
990    
991    
992      <header class="article-header">
993        
994  
995    <h1 itemprop="name">
996      <a class="article-title" href="/2015/11/23/经验分享-网页动效之CSS篇/">经验分享-网页动效之CSS篇</a>
997    </h1>
998  
999
1000      </header>
1001      
1002    
1003    <div class="article-entry" itemprop="articleBody">
1004      
1005        <h2 id="网页动效之CSS篇">网页动效之CSS篇</h2><p>在网页中实现动画效果有很多种方式,例如由js控制的canvas、svg、elements动画,还有由css3控制的svg和elements动画等(还有flash?)。css实现elements动画主要通过transition(过渡效果)和animation(
1005动画)来控制。其中animation通过其强大的函数自定义化和丰富的控制接口以及css3与生俱来的流畅高速渲染效果,成为了动画大军的一只劲旅。</p>
1006<p>在制作一些简单的、动画元素少的、交互小的动画。css3的animation是最好的选择。<br>这篇文章的主题就是,用好animation的技巧。基础知识网上一大把就不说了。</p>
1007<h2 id="Tips1:控制动画开始执行时刻">Tips1:控制动画开始执行时刻</h2><p>我们从例子出发,假如我们想要一个小球,在某个时刻(例如点击了一个按钮)向左动一下。这时我们就可以借助 animation-play-state 这个属性。</p>
1008<blockquote>
1009<p>animation-play-state 属性规定动画正在运行还是暂停。</p>
1010</blockquote>
1011<p>假设我们需要动画的元素为.ele,.ele的上级为.ele-wrap,那么我们可以这样写css:</p>
1012<blockquote>
1013<p>.ele-wrap .ele{animation-play-state:paused;}</p>
1014<p>.playing .ele{animation-play-state:running;}</p>
1015<p>.ele{animation:moveToLeft 1s;}</p>
1016</blockquote>
1017<p>当我们给ele-wrap 加上playing(例如通过点击事件添加)的时候,这个时候ele就会动起来。</p>
1018<p>通过这种方法,我们能更加方便清晰地控制某些区域下元素的动画开始执行时刻。</p>
1019<h2 id="Tips2:叠加动画">Tips2:叠加动画</h2><p>animation 是支持叠加动画的写法的,看代码</p>
1020<blockquote>
1021<p> .ele{animation:fadeIn 1s,sildeLeft 1s}</p>
1022</blockquote>
1023<p>这个写法的意思是让元素渐显同时向左移动。</p>
1024<p>这里有一点要注意的是,如果后面的动画改变的元素属性和前面的动画一样的话,那么前面动画的属性改变就失效了。</p>
1025<blockquote>
1026<p> .ele{animation:fadeIn 1s,sildeLeft 1s,sildeUp 1s}</p>
1027</blockquote>
1028<p>如果是上面这种写法,那么sildeLeft将被忽略。</p>
1029<p>另外一种实现方法是采用元素嵌套。</p>
1030<p>通过给动画元素外包一个父级元素,然后给父级和子级分别加上动画。</p>
1031<blockquote>
1032<p>  .ele-wrap{animation:fadeIn 1s}</p>
1033<p>  .ele-warp .ele{animation:slideLeft 1s}</p>
1034</blockquote>
1035<h2 id="Tips3:连接动画">Tips3:连接动画</h2><p>通过animaiton的animation-delay可以实现动画连接。比如上个例子我们不要两个动画同时进行,我们想元素渐显后再向左移动,那么我们可以这样写:</p>
1036<blockquote>
1037<p>  .ele{animation:fadeIn 1s,sildeLeft 1s 1s}</p>
1038</blockquote>
1039<p>sildeLeft后面的第一个1s是指动画执行时间,第二个1s是指动画延迟多久才执行。这样写元素就会延迟1s才向左边移动。</p>
1040<p>与Tips2一样,用元素嵌套方式可以连接数目更多的动画。</p>
1041<h2 id="Tips4:规定动画执行位置">Tips4:规定动画执行位置</h2><p>animation-delay允许负值,负值动画将马上开始,然后跳过动画的前N秒。比如我们希望ele直接就向左移动就可以这样写:</p>
1042<blockquote>
1043<p>.ele{animation:fadeIn 1s -1s,sildeLeft 1s}</p>
1044</blockquote>
1045<p>这样写fadeIn马上执行,而且是从原本执行1s后的状态开始执行。</p>
1046<h2 id="Tips5:来回播放动画">Tips5:来回播放动画</h2><p>animation-direction属性在某些情况很好用。比如你想让元素按照轨迹来回移动。按照常规方法你要这样写:</p>
1047<pre><code> <span class="at_rule">@<span class="keyword">keyframes</span> move</span>{
1048     0%,100%<span class="rules">{<span class="rule"><span class="attribute">transform</span>:<span class="value"><span class="function">translate</span>(<span class="number">0</span>,<span class="number">0</span>)</span></span>;}</span>
1049    25%<span class="rules">{<span class="rule"><span class="attribute">transform</span>:<span class="value"><span class="function">translate</span>(<span class="number">0</span>,<span class="number">120px</span>)</span></span>;}</span>
1050     50%<span class="rules">{<span class="rule"><span class="attribute">transform</span>:<span class="value"><span class="function">translate</span>(<span class="number">120px</span>,<span class="number">120px</span>)</span></span>;}</span>
1051    75%<span class="rules">{<span class="rule"><span class="attribute">transform</span>:<span class="value"><span class="function">translate</span>(<span class="number">0</span>,<span class="number">120px</span>)</span></span>;}</span>
1052  }
1053
1054<span class="class">.ele</span><span class="rules">{<span class="rule"><span class="attribute">animation</span>:<span class="value">move <span class="number">4s</span> infinite</span></span></span>}
1055</code></pre><p>如果用animation-direction ,只要这样</p>
1056<pre><code><span class="at_rule">@<span class="keyword">keyframes</span> move</span>{
1057     0%<span class="rules">{<span class="rule"><span class="attribute">transform</span>:<span class="value"><span class="function">translate</span>(<span class="number">0</span>,<span class="number">0</span>)</span></span>;}</span>
1058     50%<span class="rules">{<span class="rule"><span class="attribute">transform</span>:<span class="value"><span class="function">translate</span>(<span class="number">0</span>,<span class="number">120px</span>)</span></span>;}</span>
1059    100%<span class="rules">{<span class="rule"><span class="attribute">transform</span>:<span class="value"><span class="function">translate</span>(<span class="number">120px</span>,<span class="number">120px</span>)</span></span>;}</span>
1060 }
1061
1062<span class="class">.ele</span><span class="rules">{<span class="rule"><span class="attribute">animation</span>:<span class="value">move <span class="number">4s</span> infinite alternate</span></span></span>}
1063</code></pre><p>当然了这只是简单的一个例子。</p>
1064<p>未完待续。。</p>
1065
1066      
1067    </div>
1068    
1069    <div class="article-info article-info-index">
1070      
1071      
1072	<div class="article-tag tagcloud">
1073		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/CSS/">CSS</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JS/">JS</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/前端/">前端</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/技术/">技术</a></li></ul>
1074	</div>
1075
1076      
1077
1078      
1079      <div class="clearfix"></div>
1080    </div>
1081    
1082  </div>
1083  
1084</article>
1085
1086
1087
1088
1089
1090
1091
1092  
1093    <article id="post-arguments中的callee与caller" class="article article-type-post" itemscope itemprop="blogPost">
1094  
1095    <div class="article-meta">
1096      <a href="/2015/11/16/arguments中的callee与caller/" class="article-date">
1097  	<time datetime="2015-11-16T07:21:47.000Z" itemprop="datePublished">2015-11-16</time>
1098</a>
1099    </div>
1100  
1101  <div class="article-inner">
1102    
1103      <input type="hidden" class="isFancy" />
1104    
1105    
1106      <header class="article-header">
1107        
1108  
1109    <h1 itemprop="name">
1110      <a class="article-title" href="/2015/11/16/arguments中的callee与caller/">arguments中的caller与callee</a>
1111    </h1>
1112  
1113
1114      </header>
1115      
1116    
1117    <div class="article-entry" itemprop="articleBody">
1118      
1119        <p>arguments中有两个好用的属性,caller与callee,中文意思为呼叫者和被呼叫者。那么,这两个属性,究竟是啥?</p>
1120<h2 id="呼叫者caller">呼叫者caller</h2><blockquote>
1121<p>含义:返回当前调用该属性的方法的方法</p>
1122</blockquote>
1123<p>有点绕口,详细点就是:如果一个方法里面,调用了caller,那么caller就返回调用这个方法的方法,如果这个方法是由顶级(浏览器端为window)调用的,则返回undefined。</p>
1124<p>我们来举个例子</p>
1125<pre><code><span class="function"><span class="keyword">function</span> <span class="title">f1</span>(<span class="params"></span>)</span>{
1126    <span class="built_in">console</span>.log(<span class="built_in">arguments</span>.caller);
1127}
1128
1129<span class="function"><span class="keyword">function</span> <span class="title">
1129f2</span>(<span class="params"></span>)</span>{
1130    f1();
1131}
1132
1133f1();<span class="comment">//undefined</span>
1134f2();<span class="comment">//function f2(){ f1();}</span>
1135</code></pre><p>caller在每次函数执行的时候都会重新执行。</p>
1136<p>这个特性意味着caller可以用来显示函数的反编译文本。</p>
1137<h2 id="被呼叫者callee">被呼叫者callee</h2><blockquote>
1138<p>含义:返回当前调用该属性的方法</p>
1139</blockquote>
1140<p>这个好理解,就是返回调用函数本身。</p>
1141<p>还是来看看例子</p>
1142<pre><code><span class="function"><span class="keyword">function</span> <span class="title">f1</span>(<span class="params"></span>)</span>{
1143    <span class="built_in">console</span>.log(<span class="built_in">arguments</span>.callee);
1144}
1145f1(); <span class="comment">//function f1(){ ...}</span>
1146</code></pre><p>利用callee我们可以轻松实现很多功能,例如递归:</p>
1147<pre><code>function <span class="keyword">fact</span>(<span class="keyword">n</span>){
1148    <span class="keyword">if</span>(<span class="keyword">n</span>&lt;=0){
1149        <span class="keyword">return</span> 1;
1150    }<span class="keyword">else</span>{
1151        <span class="keyword">return</span> <span class="keyword">n</span>*arguments.callee(<span class="keyword">n</span>-1);  
1152    }
1153}
1154</code></pre><p>或者检验实参与形参个数是否相同:</p>
1155<pre><code><span class="function"><span class="keyword">function</span> <span class="title">f4</span>(<span class="params">x,y,z</span>)</span>{
1156    <span class="keyword">if</span>(<span class="built_in">arguments</span>.length === <span class="built_in">arguments</span>.callee.length){
1157        <span class="built_in">console</span>.log(<span class="string">'实参形参个数相同'</span>);
1158    }<span class="keyword">else</span>{
1159        <span class="built_in">console</span>.log(<span class="string">'实参形参个数不同'</span>);
1160    }
1161}
1162f4(<span class="number">1</span>,<span class="number">2</span>);<span class="comment">//实参形参个数不同</span>
1163f4(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>);<span class="comment">//实参形参个数相同</span>
1164</code></pre><p>还有其他功能,有待挖掘。</p>
1165
1166      
1167    </div>
1168    
1169    <div class="article-info article-info-index">
1170      
1171      
1172	<div class="article-tag tagcloud">
1173		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JS/">JS</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/前端/">前端</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/技术/">技术</a></li></ul>
1174	</div>
1175
1176      
1177
1178      
1179      <div class="clearfix"></div>
1180    </div>
1181    
1182  </div>
1183  
1184</article>
1185
1186
1187
1188
1189
1190
1191
1192  
1193    <article id="post-git常用命令" class="article article-type-post" itemscope itemprop="blogPost">
1194  
1195    <div class="article-meta">
1196      <a href="/2015/11/10/git常用命令/" class="article-date">
1197  	<time datetime="2015-11-10T00:50:44.000Z" itemprop="datePublished">2015-11-10</time>
1198</a>
1199    </div>
1200  
1201  <div class="article-inner">
1202    
1203      <input type="hidden" class="isFancy" />
1204    
1205    
1206      <header class="article-header">
1207        
1208  
1209    <h1 itemprop="name">
1210      <a class="article-title" href="/2015/11/10/git常用命令/">git常用命令</a>
1211    </h1>
1212  
1213
1214      </header>
1215      
1216    
1217    <div class="article-entry" itemprop="articleBody">
1218      
1219        <hr>
1220<h1 id="常用命令:">常用命令:</h1><p>创建版本库:</p>
1221<blockquote>
1222<pre><code><span class="title">git</span> init
1223</code></pre></blockquote>
1224<p>添加文件:</p>
1225<blockquote>
1226<pre><code>git <span class="built_in">add</span> &lt;<span class="built_in">files</span>&gt;
1227git <span class="built_in">add</span> .   <span class="comment">#添加所有文件</span>
1228</code></pre></blockquote>
1229<p>删除文件:</p>
1230<blockquote>
1231<pre><code>git rm <span class="tag">&lt;<span class="title">files</span>&gt;</span>
1232</code></pre></blockquote>
1233<p>提交:</p>
1234<blockquote>
1235<pre><code>git <span class="operator"><span class="keyword">commit</span> -<span class="keyword">m</span> <span class="string">
1235"描述"</span></span>
1236</code></pre></blockquote>
1237<p>显示仓库状态:</p>
1238<blockquote>
1239<pre><code>git <span class="keyword">status</span>
1240</code></pre></blockquote>
1241<p>显示diff:</p>
1242<blockquote>
1243<pre><code><span class="title">git</span> diff
1244</code></pre></blockquote>
1245<p>丢弃工作区的修改:</p>
1246<blockquote>
1247<pre><code>git checkout <span class="comment">-- file</span>
1248</code></pre></blockquote>
1249<p>创建分支:</p>
1250<blockquote>
1251<pre><code><span class="title">git</span> branch dev <span class="comment">#dev是分支名字,这里只是一个例子,下同</span>
1252</code></pre></blockquote>
1253<p>创建并切换到dev分支:</p>
1254<blockquote>
1255<pre><code>git checkout -<span class="tag">b</span> dev 
1256</code></pre></blockquote>
1257<p>查看分支:</p>
1258<blockquote>
1259<pre><code>git branch  #显示的分支中<span class="escape">``</span>*<span class="escape">``</span>号位置代表当前分支
1260</code></pre></blockquote>
1261<p>切换到dev分支:</p>
1262<blockquote>
1263<pre><code><span class="title">git</span> checkout dev
1264</code></pre></blockquote>
1265<p>合并dev分支到当前分支:</p>
1266<blockquote>
1267<pre><code>git <span class="built_in">merge</span> dev
1268</code></pre></blockquote>
1269<p>删除dev分支:</p>
1270<blockquote>
1271<pre><code><span class="label">git</span> <span class="keyword">branch </span>-d dev
1272</code></pre></blockquote>
1273<p>显示历史版本:</p>
1274<blockquote>
1275<pre><code>git <span class="command">log</span>
1276</code></pre></blockquote>
1277<p>显示历史信息:</p>
1278<blockquote>
1279<pre><code><span class="title">git</span> show
1280</code></pre></blockquote>
1281<p>显示历史操作:</p>
1282<blockquote>
1283<pre><code><span class="title">git</span> reflog
1284</code></pre></blockquote>
1285<p>退回:</p>
1286<blockquote>
1287<pre><code>git <span class="operator"><span class="keyword">reset</span> <span class="comment">--hard &lt;HEAD&gt;</span></span>
1288</code></pre></blockquote>
1289<p>添加远程仓库:</p>
1290<blockquote>
1291<pre><code><span class="label">git</span> remote <span class="keyword">add </span>origin &lt;<span class="keyword">address&gt;</span>
1292</code></pre></blockquote>
1293<p>推送并关联master:</p>
1294<blockquote>
1295<pre><code><span class="label">git</span> <span class="keyword">push </span>-u origin master
1296</code></pre></blockquote>
1297<p>关联后简化为:</p>
1298<blockquote>
1299<pre><code><span class="label">git</span> <span class="keyword">push </span>origin master
1300</code></pre></blockquote>
1301<p>克隆:</p>
1302<blockquote>
1303<pre><code>git <span class="keyword">clone</span> <span class="title">&lt;address</span>&gt;
1304</code></pre></blockquote>
1305<hr>
1306<h1 id="更加详细的命令大全">更加详细的命令大全</h1><h2 id="配置">配置 </h2><blockquote>
1307<pre><code>配置使用git仓库人员的姓名和email
1308$ git config --<span class="keyword">global</span> user.name <span class="string">"Your Name"</span>  
1309$ git config --<span class="keyword">global</span> user.email [email protected] 
1310
1311git config --<span class="keyword">global</span> credential.helper cache <span class="preprocessor">#配置到缓存 默认15分钟   </span>
1312git config --<span class="keyword">global</span> credential.helper <span class="comment">'cache --timeout=3600'  #修改缓存时间   </span>
1313
1314git config --<span class="keyword">global</span> color.ui <span class="literal">true</span>  
1315git config --<span class="keyword">global</span> <span class="keyword">alias</span>.co checkout  
1316git config --<span class="keyword">global</span> <span class="keyword">alias</span>.ci commit  
1317git config --<span class="keyword">global</span> <span class="keyword">alias</span>.st status  
1318git config --<span class="keyword">global</span> <span class="keyword">alias</span>.br branch  
1319git config --<span class="keyword">global</span> core.editor <span class="string">"mate -w"</span>    <span class="preprocessor"># 设置Editor使用textmate  </span>
1320git config -<span class="number">1</span> <span class="preprocessor">#列举所有配置用户的git配置文件~/.gitconfig  </span>
1321</code></pre></blockquote>
1322<h2 id="查看、添加、提交、删除、找回,重置修改文件">查看、添加、提交、删除、找回,重置修改文件</h2><blockquote>
1323<pre><code>git help &lt;<span class="command"><span class="keyword">command</span>&gt;  # 显示<span class="title">command</span>的<span class="title">help</span>  </span>
1324git show            <span class="comment"># 显示某次提交的内容  </span>
1325git show $id  
1326
1327git co  <span class="comment">-- &lt;file&gt;   # 抛弃工作区修改  </span>
1328git co  .           <span class="comment"># 抛弃工作区修改  </span>
1329
1330git <span class="built_in">add</span> &lt;<span class="built_in">file</span>&gt;      <span class="comment"># 将工作文件修改提交到本地暂存区  </span>
1331git <span class="built_in">add</span> .           <span class="comment"># 将所有修改过的工作文件提交暂存区  </span>
1332
1333git rm &lt;<span class="built_in">file</span>&gt;       <span class="comment"># 从版本库中删除文件  </span>
1334git rm &lt;<span class="built_in">file</span>&gt; <span class="comment">--cached  # 从版本库中删除文件,但不删除文件  </span>
1335
1336git reset &lt;<span class="built_in">file</span>&gt;    <span class="comment"># 从暂存区恢复到工作文件  </span>
1337git reset <span class="comment">-- .      # 从暂存区恢复到工作文件  </span>
1338git reset <span class="comment">--hard    # 恢复最近一次提交过的状态,即放弃上次提交后的所有本次修改  </span>
1339
1340git ci &lt;<span class="built_in">file</span>&gt;  
1341git ci .  
1342git ci -<span class="operator">a</span>           <span class="comment"># 将git add, git rm和git ci等操作都合并在一起做  </span>
1343git ci -am <span class="string">"some comments"</span>  
1344git ci <span class="comment">--amend      # 修改最后一次提交记录  </span>
1345
1346git revert &lt;$id&gt;    <span class="comment"># 恢复某次提交的状态,恢复动作本身也创建了一次提交对象  </span>
1347git revert HEAD     <span class="comment"># 恢复最后一次提交的状态  </span>
1348</code></pre></blockquote>
1349<h2 id="查看文件diff">查看文件diff</h2><blockquote>
1350<pre><code>git diff <span class="variable">&lt;file&gt;</span>     <span class="comment"># 比较当前文件和暂存区文件差异  </span>
1351git diff  
1352git diff <span class="variable">&lt;$id1&gt;</span> <span class="variable">&lt;$id2&gt;</span>   <span class="comment"># 比较两次提交之间的差异  </span>
1353git diff <span class="variable">&lt;branch1&gt;</span>..<span class="variable">&lt;branch2&gt;</span> <span class="comment"># 在两个分支之间比较  </span>
1354git diff --staged   <span class="comment"># 比较暂存区和版本库差异  </span>
1355git diff --cached   <span class="comment"># 比较暂存区和版本库差异  </span>
1356git diff --stat     <span class="comment"># 仅仅比较统计信息  </span>
1357</code></pre></blockquote>
1358<h2 id="查看提交记录">查看提交记录</h2><blockquote>
1359<pre><code>git <span class="command">log</span>  
1360git <span class="command">log</span> &lt;<span class="type">file</span>&gt;      <span class="comment"># 查看该文件每次提交记录  </span>
1361git <span class="command">log</span> -p &lt;<span class="type">file</span>&gt;   <span class="comment"># 查看每次详细修改内容的diff  </span>
1362git <span class="command">log</span> -p -<span class="number">2</span>       <span class="comment"># 查看最近两次详细修改内容的diff  </span>
1363git <span class="command">log</span> <span class="comment">--stat      #查看提交统计信息  </span>
1364</code></pre></blockquote>
1365<p>tig:Mac上可以使用tig代替diff和log,brew install tig</p>
1366<h2 id="取得Git仓库">取得Git仓库</h2><blockquote>
1367<pre><code>git init  <span class="comment">#初始化一个版本仓库   </span>
1368
1369git <span class="keyword">clone</span> <span class="title">&lt;address</span>&gt;  <span class="comment">#Clone远程版本库  </span>
1370
1371git remote add origin <span class="tag">&lt;address&gt;</span>  <span class="comment">#添加远程版本库origin</span>
1372
1373git remote -v  <span class="comment">#查看远程仓库</span>
1374</code></pre></blockquote>
1375<h2 id="提交你的修改">提交你的修改</h2><blockquote>
1376<pre><code>git commit –m <span class="string">"你的注释"</span>  <span class="comment">#提交你的修改  </span>
1377
1378git push origin master  <span class="comment">#推送你的更新到远程服务器,语法为 git push [远程名] [本地分支]:[远程分支]  </span>
1379
1380git status  <span class="comment">#查看文件状态 </span>
1381
1382git <span class="built_in">add</span> readme.txt  <span class="comment">#跟踪新文件</span>
1383
1384git rm readme.txt  <span class="comment">#从当前跟踪列表移除文件,并完全删除</span>
1385
1386git rm –cached readme.txt  <span class="comment">#仅在暂存区删除,保留文件在当前目录,不再跟踪 </span>
1387
1388git mv reademe.txt readme  <span class="comment">#重命名文件 </span>
1389
1390git <span class="built_in">log</span>  <span class="comment">#查看提交的历史记录 </span>
1391
1392git commit <span class="comment">--amend  #修改最后一次提交注释的,利用–amend参数 </span>
1393
1394-忘记提交某些修改,下面的三条命令只会得到一个提交。 
1395git commit –m &amp;quot;<span class="built_in">add</span> readme.txt&amp;quot;  
1396git <span class="built_in">add</span> readme_forgotten  
1397git commit –amend  
1398
1399
1400git reset HEAD b  <span class="comment">#假设你已经使用git add .,将修改过的文件a、b加到暂存区。现在你只想提交a文件,不想提交b文件,应该这样</span>
1401
1402git checkout –- readme.txt  <span class="comment">#取消对文件的修改</span>
1403</code></pre></blockquote>
1404<h2 id="查看、切换、创建和删除分支">查看、切换、创建和删除分支</h2><blockquote>
1405<pre><code>git br -r           <span class="comment"># 查看远程分支  </span>
1406git br <span class="variable">&lt;new_branch&gt;</span> <span class="comment"># 创建新的分支  </span>
1407git br -v           <span class="comment"># 查看各个分支最后提交信息  </span>
1408git br --merged     <span class="comment"># 查看已经被合并到当前分支的分支  </span>
1409git br --no-merged  <span class="comment"># 查看尚未被合并到当前分支的分支  </span>
1410
1411git co <span class="variable">&lt;branch&gt;</span>     <span class="comment"># 切换到某个分支  </span>
1412git co -b <span class="variable">&lt;new_branch&gt;</span> <span class="comment"># 创建新的分支,并且切换过去  </span>
1413git co -b <span class="variable">&lt;new_branch&gt;</span> <span class="variable">&lt;branch&gt;</span>  <span class="comment"># 基于branch创建新的new_branch  </span>
1414
1415git co <span class="variable">$id</span>          <span class="comment"># 把某次历史提交记录checkout出来,但无分支信息,切换到其他分支会自动删除  </span>
1416git co <span class="variable">$id</span> -b <span class="variable">&lt;new_branch&gt;</span>  <span class="comment"># 把某次历史提交记录checkout出来,创建成一个分支  </span>
1417
1418git br -d <span class="variable">&lt;branch&gt;</span>  <span class="comment"># 删除某个分支  </span>
1419git br -D <span class="variable">&lt;branch&gt;</span>  <span class="comment"># 强制删除某个分支 (未被合并的分支被删除的时候需要强制)  </span>
1420</code></pre></blockquote>
1421<h2 id="分支合并和rebase">分支合并和rebase</h2><blockquote>
1422<pre><code>git merge <span class="tag">&lt;branch&gt;</span>               <span class="comment"># 将branch分支合并到当前分支  </span>
1423git merge origin/<span class="keyword">master</span> <span class="title">--no-ff</span>  <span class="comment"># 不要Fast-Foward合并,这样可以生成merge提交  </span>
1424git rebase <span class="keyword">master</span> <span class="title">&lt;branch</span>&gt;       <span class="comment"># 将master rebase到branch,相当于:  </span>
1425git co <span class="tag">&lt;branch&gt;</span> &amp;&amp; git rebase <span class="keyword">master</span> <span class="title">&amp;&amp; git</span> co <span class="keyword">master</span> <span class="title">&amp;&amp; git</span> merge <span class="tag">&lt;branch&gt;</span>  
1426</code></pre></blockquote>
1427<h2 id="Git补丁管理(方便在多台机器上开发同步时用)">Git补丁管理(方便在多台机器上开发同步时用)</h2><blockquote>
1428<pre><code>git diff &gt; ../sync.<span class="keyword">patch</span>         <span class="preprocessor"># 生成补丁  </span>
1429git apply ../sync.<span class="keyword">patch</span>          <span class="preprocessor"># 打补丁  </span>
1430git apply --check ../sync.<span class="keyword">patch</span>  <span class="preprocessor">#测试补丁能否成功  </span>
1431</code></pre></blockquote>
1432<h2 id="Git暂存管理">Git暂存管理</h2><blockquote>
1433<pre><code>git stash                        <span class="preprocessor"># 暂存  </span>
1434git stash <span class="built_in">list</span>                   <span class="preprocessor"># 列所有stash  </span>
1435git stash apply                  <span class="preprocessor"># 恢复暂存的内容  </span>
1436git stash <span class="built_in">drop</span>                   <span class="preprocessor"># 删除暂存区  </span>
1437</code></pre></blockquote>
1438<h2 id="Git远程分支管理">Git远程分支管理</h2><blockquote>
1439<pre><code>
1439git pull                         <span class="comment"># 抓取远程仓库所有分支更新并合并到本地  </span>
1440git pull --<span class="keyword">no</span>-ff                 <span class="comment"># 抓取远程仓库所有分支更新并合并到本地,不要快进合并  </span>
1441git fetch origin                 <span class="comment"># 抓取远程仓库更新  </span>
1442git merge origin/master          <span class="comment"># 将远程主分支合并到本地当前分支  </span>
1443git co --track origin/branch     <span class="comment"># 跟踪某个远程分支创建相应的本地分支  </span>
1444git co -b &lt;local_branch&gt; origin/&lt;remote_branch&gt;  <span class="comment"># 基于远程分支创建本地分支,功能同上  </span>
1445
1446git <span class="keyword">push</span>                         <span class="comment"># push所有分支  </span>
1447git <span class="keyword">push</span> origin master           <span class="comment"># 将本地主分支推到远程主分支  </span>
1448git <span class="keyword">push</span> -u origin master        <span class="comment"># 将本地主分支推到远程(如无远程主分支则创建,用于初始化远程仓库)  </span>
1449git <span class="keyword">push</span> origin &lt;local_branch&gt;   <span class="comment"># 创建远程分支, origin是远程仓库名  </span>
1450git <span class="keyword">push</span> origin &lt;local_branch&gt;:&lt;remote_branch&gt;  <span class="comment"># 创建远程分支  </span>
1451git <span class="keyword">push</span> origin :&lt;remote_branch&gt;  <span class="comment">#先删除本地分支(git br -d &lt;branch&gt;),然后再push删除远程分支  </span>
1452</code></pre></blockquote>
1453<h2 id="基本的分支管理">基本的分支管理</h2><blockquote>
1454<pre><code>git branch <span class="built_in">dev</span>  #创建一个分支 
1455
1456git chekcout <span class="built_in">dev</span>  #切换工作目录到<span class="built_in">dev</span> 
1457
1458git chekcout –b <span class="built_in">dev</span>  #将上面的命令合在一起,创建<span class="built_in">dev</span>分支并切换到<span class="built_in">dev</span> 
1459
1460git merge <span class="built_in">dev</span>  #合并<span class="built_in">dev</span>分支,当前工作目录为master
1461
1462git branch –d <span class="built_in">dev</span>  #合并完成后,没有出现冲突,删除<span class="built_in">dev</span>分支 
1463
1464git fetch  #拉去远程仓库的数据,语法为git fetch [remote-name]
1465
1466git pull  #fetch 会拉去最新的远程仓库数据,但不会自动到当前目录下,要自动合并
1467
1468git remote <span class="built_in">show</span> origin  #查看远程仓库的信息  
1469
1470git checkout –b <span class="built_in">dev</span> origin/develop  #建立本地的<span class="built_in">dev</span>分支追踪远程仓库的develop分支 
1471</code></pre></blockquote>
1472<h2 id="Git远程仓库管理">Git远程仓库管理</h2><blockquote>
1473<pre><code>git remote -v                    <span class="preprocessor"># 查看远程服务器地址和仓库名称  </span>
1474git remote show origin           <span class="preprocessor"># 查看远程服务器仓库状态  </span>
1475git remote <span class="keyword">add</span> origin git@ github:robbin/robbin_site.git         <span class="preprocessor"># 添加远程仓库地址  </span>
1476git remote <span class="keyword">set</span>-url origin git@ github.com:robbin/robbin_site.git <span class="preprocessor"># 设置远程仓库地址(用于修改远程仓库地址)  </span>
1477git remote rm &lt;repository&gt;       <span class="preprocessor"># 删除远程仓库  </span>
1478</code></pre></blockquote>
1479<h2 id="创建远程仓库">创建远程仓库</h2><blockquote>
1480<pre><code>git <span class="keyword">clone</span> <span class="title">--bare</span> robbin_site robbin_site.git  <span class="comment"># 用带版本的项目创建纯版本仓库  </span>
1481scp -r my_project.git git@ git.csdn.net:~      <span class="comment"># 将纯仓库上传到服务器上  </span>
1482
1483mkdir robbin_site.git &amp;&amp; cd robbin_site.git &amp;&amp; git --bare init <span class="comment"># 在服务器创建纯仓库  </span>
1484git remote add origin git@ github.com:robbin/robbin_site.git    <sp
1484an class="comment"># 设置远程仓库地址  </span>
1485git push -u origin <span class="keyword">master</span>                                      <span class="title"># 客户端首次提交  
1486git</span> push -u origin develop  <span class="comment"># 首次将本地develop分支提交到远程develop分支,并且track  </span>
1487
1488git remote set-head origin <span class="keyword">master</span>   <span class="title"># 设置远程仓库的HEAD</span>指向<span class="literal">master</span>分支  
1489
1490也可以命令设置跟踪远程库和本地库
1491git branch --set-upstream <span class="keyword">master</span> <span class="title">origin</span>/<span class="keyword">master</span>  
1492<span class="title">git</span> branch --set-upstream develop origin/develop  
1493</code></pre></blockquote>
1494
1495      
1496    </div>
1497    
1498    <div class="article-info article-info-index">
1499      
1500      
1501	<div class="article-tag tagcloud">
1502		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/前端/">前端</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/技术/">技术</a></li></ul>
1503	</div>
1504
1505      
1506
1507      
1508      <div class="clearfix"></div>
1509    </div>
1510    
1511  </div>
1512  
1513</article>
1514
1515
1516
1517
1518
1519
1520
1521  
1522    <article id="post-剥皮鱼全接触" class="article article-type-post" itemscope itemprop="blogPost">
1523  
1524    <div class="article-meta">
1525      <a href="/2015/11/06/剥皮鱼全接触/" class="article-date">
1526  	<time datetime="2015-11-06T06:16:13.000Z" itemprop="datePublished">2015-11-06</time>
1527</a>
1528    </div>
1529  
1530  <div class="article-inner">
1531    
1532      <input type="hidden" class="isFancy" />
1533    
1534    
1535      <header class="article-header">
1536        
1537  
1538    <h1 itemprop="name">
1539      <a class="article-title" href="/2015/11/06/剥皮鱼全接触/">剥皮鱼全接触</a>
1540    </h1>
1541  
1542
1543      </header>
1544      
1545    
1546    <div class="article-entry" itemprop="articleBody">
1547      
1548        <h2 id="剥皮鱼">剥皮鱼 </h2><p>剥皮鱼学名叫绿鳍马面鲀,又叫马面鱼,潮汕俗名:迪仔。我觉得叫迪克牛仔or德州牛仔帅得多。</p>
1549<p><img src="/images/1.jpg" alt=""></p>
1550<p>剥皮鱼 加辣椒 和 豆酱 真 是  他  妈  的     好   吃  !!</p>
1551<p>豆酱焖剥皮鱼的做法:<br>食材<br>主料<br>剥皮鱼5条<br>辅料<br>豆酱1汤匙、适量辣椒、适量蒜头、适量姜、适量小葱、适量油、适量清水<br>步骤<br>1.热锅加油炒蒜头<br>2.放剥皮鱼煎<br>3.煎至两面微黄放姜丝、葱段、辣椒下去炒香<br>4.加入1汤匙的豆酱<br>5.再加少量清水焖至汁少就可以岀锅了<br>6.成品<br>小贴士<br>豆酱有咸味不用加盐了,鱼很鲜不用加过多的调料。</p>
1552
1553      
1554    </div>
1555    
1556    <div class="article-info article-info-index">
1557      
1558      
1559	<div class="article-tag tagcloud">
1560		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/叽里呱啦/">叽里呱啦</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/生活/">生活</a></li></ul>
1561	</div>
1562
1563      
1564
1565      
1566      <div class="clearfix"></div>
1567    </div>
1568    
1569  </div>
1570  
1571</article>
1572
1573
1574
1575
1576
1577
1578
1579  
1580  
1581    <nav id="page-nav">
1582      <span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="extend next" rel="next" href="/page/2/">Next &raquo;</a>
1583    </nav>
1584  
1585</div>
1586      <footer id="footer">
1587  <div class="outer">
1588    <div id="footer-info">
1589    	<div class="footer-left">
1590    		&copy; 2017 黄信政
1591    	</div>
1592      	<div class="footer-right">
1593      		<a href="http://hexo.io/" target="_blank">Hexo</a>  Theme <a href="https://github.com/litten/hexo-theme-yilia" target="_blank">Yilia</a> by Litten changed by Hx2
1594      	</div>
1595    </div>
1596  </div>
1597</footer>
1598    </div>
1599    
1600  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css">
1601
1602
1603<script>
1604	var yiliaConfig = {
1605		fancybox: true,
1606		mathjax: true,
1607		animate: true,
1608		isHome: true,
1609		isPost: false,
1610		isArchive: false,
1611		isTag: false,
1612		isCategory: false,
1613		open_in_new: true
1614	}
1615</script>
vendor: 1 bytes, line 1615
1615
1616<script src="http://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js" type="text/javascript"></script>
vendor: 1 bytes, line 1616
1616
1617<script src="/js/main.js" type="text/javascript"></script>
1617
1618
1619
1620
1621
1622
1623
1624<script type="text/x-mathjax-config">
1625MathJax.Hub.Config({
1626    tex2jax: {
1627        inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
1628        processEscapes: true,
1629        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
1630    }
1631});
1632
1633MathJax.Hub.Queue(function() {
1634    var all = MathJax.Hub.getAllJax(), i;
1635    for(i=0; i < all.length; i += 1) {
1636        all[i].SourceElement().parentNode.className += ' has-jax';                 
1637    }       
1638});
1639</script>
1639
1640
1641<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
1642</script>
1642
1643
1644
1645  </div>
1646</body>
1647</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.