search.xml

<?xml version="1.0" encoding="utf-8"?>
<search>
  <entry>
    <title><![CDATA[webpack 配置 Typescript + React]]></title>
    <url>%2F2019%2F06%2F23%2Fwebpack-ts%2F</url>
    <content type="text"><![CDATA[webpack Typescript + React在已有的 react 项目中 安装 React 依赖 1yarn add --dev @types/react @types/react-dom 安装 ts 依赖 1yarn add -dev ts-loader typescript 建立 ts 配置文件tsconfig.json 1234567891011&#123; "compilerOptions": &#123; "outDir": "./dist/", "sourceMap": true, "noImplicitAny": true, "module": "commonjs", "target": "es5", "jsx": "react" &#125;, "include": ["./src/**/*"]&#125; 修改 webpack 配置 12345678910111213141516&#123; module: &#123; rules: &#123; &#123; test: /\.(ts|tsx)?$/, use: &#123; loader: 'ts-loader' &#125;, exclude: /node_modules/ &#125;, &#125; &#125;, resolve: &#123; extensions: ['.tsx', '.ts', '.js'] &#125;,&#125;]]></content>
      <tags>
        <tag>Webpack</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[Webpack decorator 装饰器]]></title>
    <url>%2F2019%2F06%2F23%2Fwebpack-%E8%A3%85%E9%A5%B0%E5%99%A8%2F</url>
    <content type="text"><![CDATA[Webpack decorator 装饰器安装依赖 1yarn add --dev @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/plugin-syntax-decorators 配置.babelrc 1234567891011121314"plugins": [ [ "@babel/plugin-proposal-decorators", &#123; "legacy": true &#125; ], [ "@babel/plugin-proposal-class-properties", &#123; "loose": true &#125; ] ]]]></content>
      <tags>
        <tag>Webpack</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[Webpack 配置import 省略文件拓展名称]]></title>
    <url>%2F2019%2F06%2F23%2Fwebpack-%E6%8B%93%E5%B1%95%E5%90%8D%2F</url>
    <content type="text"><![CDATA[Webpack 配置 import 省略文件拓展名称resolve.extensions[string]: [&#39;.wasm&#39;, &#39;.mjs&#39;, &#39;.js&#39;, &#39;.json&#39;] 自动解析确定的扩展。默认值为： webpack.config.js 123456module.exports = &#123; //... resolve: &#123; extensions: [&apos;.wasm&apos;, &apos;.mjs&apos;, &apos;.js&apos;, &apos;.json&apos;] &#125;&#125;; 能够使用户在引入模块时不带扩展： 1import File from &apos;../path/to/file&apos;; 使用此选项，会覆盖默认数组，这就意味着 webpack 将不再尝试使用默认扩展来解析模块。对于使用其扩展导入的模块，例如，import SomeFile from &quot;./somefile.ext&quot;，要想正确的解析，一个包含“*”的字符串必须包含在数组中。]]></content>
      <tags>
        <tag>Webpack</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[webpack 配置一个React环境]]></title>
    <url>%2F2019%2F06%2F23%2Fwebapck-%E9%85%8D%E7%BD%AE%E4%B8%80%E4%B8%AAReact%E7%8E%AF%E5%A2%83%2F</url>
    <content type="text"><![CDATA[Webpack 配置一个 React 环境配置一个 React 环境初始化 node 项目 1yarn init -y 安装 webpack 相关依赖 1yarn add webpack webpack-cli --dev 在package.json配置 webpack 生产环境打包脚本 123&quot;scripts&quot;: &#123; &quot;build&quot;: &quot;webpack --mode production&quot;&#125; 为了使浏览器支持诸如Class类 ES6 语法需要配置Babel，将 ES6 转成 ES5 babel preset env 编译 ES6 到 ES5 babel preset react 编译 JSX 语法糖 1yarn add @babel/core babel-loader @babel/preset-env @babel/preset-react --dev 在根目录创建.babelrc配置 123&#123; "presets": ["@babel/preset-env", "@babel/preset-react"]&#125; 在根目录创建webpack.config.js配置 12345678910111213module.exports = &#123; module: &#123; rules: [ &#123; test: /\.(js|jsx)$/, exclude: /node_modules/, use: &#123; loader: 'babel-loader' &#125; &#125; ] &#125;&#125;; 对于 js 和 jsx 拓展名文件，通过 babel-loader，将 ES6 转换为 ES5 安装 React 相关依赖 1yarn add react react-dom 安装配置 Webpack HTML 插件 1yarn add html-webpack-plugin html-loader --dev webpack.config.js配置 12345678910111213141516171819202122232425262728const HtmlWebPackPlugin = require('html-webpack-plugin');module.exports = &#123; module: &#123; rules: [ &#123; test: /\.(js|jsx)$/, exclude: /node_modules/, use: &#123; loader: 'babel-loader' &#125; &#125;, &#123; test: /\.html$/, use: [ &#123; loader: 'html-loader' &#125; ] &#125; ] &#125;, plugins: [ new HtmlWebPackPlugin(&#123; template: './src/index.html', filename: './index.html' &#125;) ]&#125;; 在src/index.html路径，建立 html 文件 123456789101112&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="ie=edge" /&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="app"&gt;&lt;/div&gt; &lt;/body&gt;&lt;/html&gt; 在src/index.js路径，建立 webpack 入口 123456import React from 'react';import ReactDOM from 'react-dom';const App = () =&gt; &lt;div&gt;hello world&lt;/div&gt;;const Container = document.getElementById('app');ReactDOM.render(&lt;App /&gt;, Container); 执行打包 1yarn run build 文件已在dist文件夹生成，预览打包文件 1npx run http-server dist/ 配置开发环境热更新安装依赖 1yarn add webpack-dev-server --dev 配置package.json 1234&quot;scripts&quot;: &#123; &quot;start&quot;: &quot;webpack-dev-server --open --mode development&quot;, &quot;build&quot;: &quot;webpack --mode production&quot;&#125; 启动 1yarn start done]]></content>
      <tags>
        <tag>webpack</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[npm日常操作]]></title>
    <url>%2F2019%2F06%2F01%2Fnpm%E6%97%A5%E5%B8%B8%E6%93%8D%E4%BD%9C%2F</url>
    <content type="text"><![CDATA[npmnpm包维护升级npm-check检查更新 12npm install -g npm-checknpm-check npm-upgrade更新 12npm install -g npm-upgradenpm-upgrade 基本操作npm init 初始化一个项目 12npm init react-app ./my-react-appnpm init egg --type=simple]]></content>
      <tags>
        <tag>npm</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[zsh插件推荐]]></title>
    <url>%2F2019%2F06%2F01%2Fzsh%E6%8F%92%E4%BB%B6%E6%8E%A8%E8%8D%90%2F</url>
    <content type="text"><![CDATA[oh my zshpluginz快速跳转文件夹 12z filename # 跳转文件夹z # 文件夹目录 gitgit一些简化的aliaes 1234gadd # git addgcmsg # git commit -mgcb # git checkout -bgb # git branch yarnyarn一些简化的aliaes 123456789y # yarnya # yarn addyad # yarn add --devyst # yarn startyt # yarn testyi # yarn inityga # yarn global add ygrm # yarn global removeygu # yarn global upgrade npmnpm 一些简化aliaes]]></content>
      <tags>
        <tag>zsh</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[2019年5月-随笔]]></title>
    <url>%2F2019%2F05%2F22%2F2019%E5%B9%B45%E6%9C%88-%E9%9A%8F%E7%AC%94%2F</url>
    <content type="text"><![CDATA[2019年5月&lt;input type=&quot;tel&quot;&gt;☎️电话号码输入框 可使用maxlength 限制长度、拉起数字键盘（拉不起数字键盘拉type=&#39;text&#39; ） Array​.prototype​.slice()slice() 方法返回一个新的数组对象，这一对象是一个由 begin和 end（不包括end）决定的原数组的浅拷贝。原始数组不会被改变。 展开运算符展开运算符也能实现对对象的拷贝 JSON.parse(JSON.stringify(obj))深拷贝undefined、function、symbol 会在转换过程中被忽略。。。 对象中含有一个函数时（很常见），就不能用这个方法进行深拷贝。 深拷贝通用 遍历法snippetslab://snippet/02557A05-241D-4372-9D26-69AEEB25CF91/ 数组concat 只是对数组的第一层进行深拷贝。 slice 只是对数组的第一层进行深拷贝。 ... 实现的是对象第一层的深拷贝。后面的只是拷贝的引用值。 对象Object.assign() 拷贝的是属性值。假如源对象的属性值是一个指向对象的引用，它也只拷贝那个引用值。 ... 实现的是对象第一层的深拷贝。后面的只是拷贝的引用值。 总结赋值运算符 = 实现的是浅拷贝，只拷贝对象的引用值； JavaScript 中数组和对象自带的拷贝方法都是“首层浅拷贝”； JSON.stringify 实现的是深拷贝，但是对目标对象有要求； 若想真正意义上的深拷贝，请递归。 RegExp.prototype​.exec()exec() 方法在一个指定字符串中执行一个搜索匹配。返回一个结果数组或 null 可多次使用，捕获全部匹配的值 for in 对象 for of 数组 css module作用域显式的局部作用域语法:local(.className)，等同于.className 123:local(.title) &#123; color: red;&#125; Element​.get​Bounding​Client​Rect()Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。 可以获取到以下信息 12345678910&#123; bottom: 198 height: 105 left: 0 right: 1425 top: 93 width: 1425 x: 0 y: 93&#125; flex-basisflex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 来改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的宽或者高（取决于主轴的方向）的尺寸大小。 :root:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 元素，除了优先级更高之外，与 html 选择器相同。 css变量定义 -- 使用 var(名称, 默认值) 1234567:root &#123; --bg: gray;&#125;body &#123; background-color: var(--bg, yellow)&#125; 兼容性不容乐观https://caniuse.com/#search=css%20var IOS Safari + Mac OS Safari配合调试在iOS设备上，打开Safari的Web检查器，选择设置 -&gt; Safari -&gt; 高级 -&gt; Web检查器命令。（用到JavaScript的话，顺便在Web检查器同级上开启吧） 在计算机上的Safari启用开发菜单，选择偏好设置 -&gt; 高级 -&gt; 在菜单栏中显示’开发’菜单命令。 当需要调试手机页面的时候，将设备与计算机通过数据线连接后，在Safari菜单开发栏下选择当前手机运行的页面即可。 Object.is()Object.is() 方法判断两个值是否是相同的值。 与== 运算符不同，Object.is不会做类型转换。 1Object.is(value1, value2); flex 兼容性大多数部分支持是指支持较旧版本的规范或较旧的语法。仅支持旧的flexbox规范，不支持包装。仅支持2012语法不支持flex-wrap，flex-flow或align-content属性 a标签状态a:link 未访问链接a:visited 已访问链接a:hover 鼠标悬浮链接a:active 鼠标按下，被选择的链接 爱恨原则 排序LOVE H**A**TE]]></content>
  </entry>
  <entry>
    <title><![CDATA[brew]]></title>
    <url>%2F2019%2F05%2F18%2Fbrew%2F</url>
    <content type="text"><![CDATA[brew 是 macOS 一款包管理。通过替换国内源，可以节约下载时长。 brew 更换国内源替换brew.git: 12cd "$(brew --repo)"git remote set-url origin https://mirrors.ustc.edu.cn/brew.git 替换homebrew-core.git: 12cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core"git remote set-url origin https://mirrors.ustc.edu.cn/homebrew-core.git 重置brew.git: 12cd "$(brew --repo)"git remote set-url origin https://github.com/Homebrew/brew.git 重置homebrew-core.git: 12cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core"git remote set-url origin https://github.com/Homebrew/homebrew-core.git]]></content>
      <tags>
        <tag>brew</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[css module]]></title>
    <url>%2F2019%2F05%2F18%2Fcss%E6%A8%A1%E5%9D%97%E5%8C%96%2F</url>
    <content type="text"><![CDATA[css module作用域显式的局部作用域语法:local(.className)，等同于.className 全局作用域:global(.className) 1234567:local(.title) &#123; color: red;&#125;:global(.page) &#123; background: #999;&#125; 组合Class 的组合 12345678.className &#123; background-color: blue;&#125;.title &#123; composes: className; color: red;&#125; 继承继承其他文件里的规则 1234.title &#123; composes: className from './another.css'; color: red;&#125; 变量123456@value red: #333;:global(.h150) &#123; height: 150px; background-color: red;&#125; 多文件继承123@value blue: #0c77f8;@value red: #ff0000;@value green: #aaf200; 1234567@value colors: "./colors.css";@value blue, red, green from colors;.title &#123; color: red; background-color: blue;&#125; 外部如何覆盖局部样式可以给组件关键节点加上 data-role 属性，然后通过属性选择器来覆盖样式。 1&lt;div className=&#123;styles.root&#125; data-role='dialog-root'&gt; 123[data-role="dialog-root"] &#123; // override style&#125;]]></content>
      <tags>
        <tag>css</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[搭建桌面应用]]></title>
    <url>%2F2019%2F02%2F09%2F%E6%90%AD%E5%BB%BA%E6%A1%8C%E9%9D%A2%E5%BA%94%E7%94%A8%2F</url>
    <content type="text"><![CDATA[React + Electron + TypeScript 搭建应用环境搭建create-react-app 创建 react + typescript环境1npx create-react-app NAME --typescript 集成Electron到React项目添加 Electron 包1npm install -D electron 相关配置* 在项目根目录配置 main.js * 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051// 引入electron并创建一个Browserwindowconst &#123;app, BrowserWindow&#125; = require('electron')const path = require('path')const url = require('url')// 保持window对象的全局引用,避免JavaScript对象被垃圾回收时,窗口被自动关闭.let mainWindowfunction createWindow () &#123;//创建浏览器窗口,宽高自定义具体大小你开心就好mainWindow = new BrowserWindow(&#123;width: 800, height: 600&#125;) /* * 加载应用----- electron-quick-start中默认的加载入口 mainWindow.loadURL(url.format(&#123; pathname: path.join(__dirname, 'index.html'), protocol: 'file:', slashes: true &#125;)) */ // 加载应用----适用于 react 项目 mainWindow.loadURL('http://localhost:3000/'); // 打开开发者工具，默认不打开 // mainWindow.webContents.openDevTools() // 关闭window时触发下列事件. mainWindow.on('closed', function () &#123; mainWindow = null &#125;)&#125;// 当 Electron 完成初始化并准备创建浏览器窗口时调用此方法app.on('ready', createWindow)// 所有窗口关闭时退出应用.app.on('window-all-closed', function () &#123; // macOS中除非用户按下 `Cmd + Q` 显式退出,否则应用与菜单栏始终处于活动状态. if (process.platform !== 'darwin') &#123; app.quit() &#125;&#125;)app.on('activate', function () &#123; // macOS中点击Dock图标时没有已打开的其余应用窗口时,则通常在应用中重建一个窗口 if (mainWindow === null) &#123; createWindow() &#125;&#125;)// 你可以在这个脚本中续写或者使用require引入独立的js文件. * 配置package.json * 1234567"scripts": &#123; "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject", "electron-start": "electron ." // 增加配置electron的start，区别于web端的start &#125; 启动项目1234# 启动react项目npm start# 启动electronnpm run electron-start]]></content>
      <tags>
        <tag>React</tag>
        <tag>Electron</tag>
        <tag>TypeScript</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[css基础知识总结]]></title>
    <url>%2F2018%2F06%2F29%2Fcss%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E6%80%BB%E7%BB%93%2F</url>
    <content type="text"><![CDATA[记录一些自己容易忘的css知识汇总。 css基础知识总结选择器nth-type nth-childnth-child(n)选择器匹配属于其父元素的第N个子元素，不论元素类型。 nth-type(n) 选择器匹配属于父元素的特定类型的第N个子元素的每个元素。 CSS 子元素选择器&gt;介绍如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器。 例子例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写： 1h1 &gt; strong &#123;color:red;&#125; 这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响： 12&lt;h1&gt;This is &lt;strong&gt;very&lt;/strong&gt; &lt;strong&gt;very&lt;/strong&gt; important.&lt;/h1&gt;&lt;h1&gt;This is &lt;em&gt;really &lt;strong&gt;very&lt;/strong&gt;&lt;/em&gt; important.&lt;/h1&gt; 动画animation-direction12345div&#123;animation-direction:alternate;-webkit-animation-direction:alternate; /* Safari 和 Chrome */&#125; animation-direction 属性定义是否应该轮流反向播放动画。 如果 animation-direction 值是 “alternate”，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。 控制选择禁用选择使内容不可选择。 123.unselectable &#123; user-select:none;&#125; 取值 key value none 文本不能被选择 text 可以选择文本 all 当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。 element 可以选择文本，但选择范围受元素边界的约束 ## css变量var CSS 变量是由CSS作者定义的实体，其中包含要在整个文档中重复使用的特定值。使用自定义属性来设置变量名，并使用特定的 var() 来访问。（比如 color: var(--main-color);）。 ### 基本用法 声明一个局部变量 123element &#123; --main-bg-color:brown;&#125; 使用一个局部变量 123element &#123; background-color:var(--main-bg-color)&#125; 声明一个全局css变量 1234:root &#123; --global-color:#666; --pane-padding:5px 42px;&#125; 使用一个全局css变量 123.demo &#123; color:var(--global-color);&#125; 例子123456789101112:root &#123; --main-bg-color: brown;&#125;.one &#123; color: white; background-color: var(--main-bg-color); margin: 10px; width: 50px; height: 50px; display: inline-block;&#125; transform-origintransform-origin CSS属性让你更改==一个元素变形的原点==。 :not():not(selector) { CSS样式 } 123&lt;p&gt;我是一个段落。&lt;/p&gt;&lt;p class="fancy"&gt;我好看极了！&lt;/p&gt;&lt;p&gt;我不是一个段落。&lt;/p&gt; 1234p:not(.fancy) &#123; color:red;&#125;/* 类名不是fancy的p标签颜色为红色 */ 例子：同级变淡淡出悬停项目的同级。 12345678&lt;div class="sibling-fade"&gt; &lt;span&gt;Item 1&lt;/span&gt; &lt;span&gt;Item 2&lt;/span&gt; &lt;span&gt;Item 3&lt;/span&gt; &lt;span&gt;Item 4&lt;/span&gt; &lt;span&gt;Item 5&lt;/span&gt; &lt;span&gt;Item 6&lt;/span&gt;&lt;/div&gt; 1234567span &#123; padding: 0 1rem; transition: opacity 0.2s;&#125;.sibling-fade:hover span:not(:hover) &#123; opacity: 0.5;&#125; 说明 .sibling-fade:hover span:not(:hover) 指定当父项被徘徊时，选择当前没有被徘徊的任何span子项并将其不透明度更改为0.5 。]]></content>
      <tags>
        <tag>css</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[React笔记]]></title>
    <url>%2F2018%2F06%2F29%2FReact%E7%AC%94%E8%AE%B0%2F</url>
    <content type="text"><![CDATA[记录一些React语法知识。 2018年5、6月React笔记纯函数组件使用PropTypes1234567891011121314import React from 'react';import PropTypes from 'prop-types';function Title(props) &#123;return &lt;h1&gt;&#123; props.text &#125;&lt;/h1&gt;;&#125;Title.propTypes = &#123;text: PropTypes.string&#125;;Title.defaultProps = &#123;text: 'Hello world'&#125;;export default Title; props.childrenprops.children 属性，它可以让我们访问父组件标签内的子元素。 123ReactDOM.render(&lt;div&gt;&lt;Title text="ni hao"&gt;Wooooooooooooo&lt;/Title&gt;&lt;/div&gt;, document.getElementById('root')); 123456function Title(&#123;text,children&#125;) &#123;return &lt;div&gt;&lt;h1&gt;&#123;text&#125;&lt;/h1&gt;&#123;children&#125;&lt;/div&gt;;&#125; Refs通过ref获取不受控组件的值 1234567891011121314151617181920class Input extends React.Component &#123;constructor(props) &#123;super(props);this.state = &#123; value: 'hello' &#125;;this._change = this._handleInputChange.bind(this);&#125;_handleInputChange() &#123;this.setState(&#123; value: this.input.value &#125;);&#125;render() &#123;return (&lt;div&gt;&lt;input type='text'defaultValue=&#123;this.state.value&#125;onChange=&#123;this._change&#125;ref=&#123;input=&gt;this.input = input&#125;/&gt;&lt;/div&gt;);&#125;&#125; ref 属性接收字符串或回调函数。上面的代码使用回调函数来将 DOM 元素保存在局部变量 input中。之后当onChange 事件触发时，我们将input 中的最新值保存到 App 组件的状态里。 Ref123456789101112131415161718class Tags extends Component &#123;shouldComponentUpdate()&#123;return false;&#125;componentDidMount()&#123;console.log(this.refs.list)&#125;render() &#123;return (&lt;ul ref='list'&gt;&#123;this.props.tags.map((tag,i)=&gt;&lt;li key=&#123;i&#125;&gt;&#123;tag&#125;&lt;/li&gt;)&#125;&lt;/ul&gt;);&#125;&#125; 定义元素ref=&#39;list&#39;，在componentDidMount生命周期通过this.refs.list获取ul真实dom，通过shouldComponentUpdate为false把dom更新从react接管到手动更新。 dangerouslySetInnerHTMLdangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM. 1234567function createMarkup() &#123;return &#123;__html: 'First &amp;middot; Second'&#125;;&#125;function MyComponent() &#123;return &lt;div dangerouslySetInnerHTML=&#123;createMarkup()&#125; /&gt;;&#125; constructor(props)官方解释 Class components should always call the base constructor with props. 1234constructor(props) &#123;super(props);this.state = &#123;date: new Date()&#125;;&#125; 如果你用到了constructor就必须写super(),是用来初始化this的，可以绑定事件到this上;如果你在constructor中要使用this.props,就必须给super加参数：super(props)； （无论有没有constructor，在render中this.props都是可以使用的，这是React自动附带的；） 创建refs123456789class MyComponent extends React.Component &#123;constructor(props) &#123;super(props);this.myRef = React.createRef();&#125;render() &#123;return &lt;div ref=&#123;this.myRef&#125; /&gt;;&#125;&#125;]]></content>
      <tags>
        <tag>react</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[唯品会实习 H5页面作品]]></title>
    <url>%2F2018%2F04%2F09%2Fvip-internship-h5%2F</url>
    <content type="text"><![CDATA[在唯品会实习这段时间做的H5活动页面汇总。 唯品会实习H5页面作品2017年11月 —- 2018年4月 唯品会-互联网金融事业部-Web前端开发实习生 页面均采用zpeto、cordova、less，freemarker制作。 唯品金融-福利-话题活动页面入口：唯品金融-福利-话题活动 页面介绍：拉日活，引导用户参与，引导新用户下载唯品金融。 核心功能： 判断在非唯品金融页面打开，跳转到应用宝下载链接； 主界面实现，每一个用户每天只可投一票； 列表详情页面，实现瀑布流懒加载； 调用唯品金融H5协议，实现分享到朋友圈，微博功能； 记录用户操作埋点，发送给大数据； 唯品金融-福利中心页面入口：唯品金融首页登陆后第二个图标 页面介绍：唯品金融一级入口，汇总各种唯品金融活动。 核心功能： 实现移动端轮播图 导航栏根据鼠标数量，实现栅格布局 记录用户操作埋点，发送给大数据； 唯品会-签到引导页页面入口：唯品会-主菜单-唯品金融-右下角小图片 页面介绍：在唯品会主站金融频道，引导新用户下载唯品金融，老用户参与签到。 核心功能： 判断是否安装唯品金融，已安装，则唤醒唯品金融签到页面； 未安装唯品金融，则跳转到应用宝下载地址； 使用了&lt;map&gt;``&lt;area&gt;图片热区,判断点击位置； 记录用户操作埋点，发送给大数据；]]></content>
      <tags>
        <tag>唯品会</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[一日 2018-04-04]]></title>
    <url>%2F2018%2F04%2F04%2F2018-04-04%2F</url>
    <content type="text"><![CDATA[​​​​​React shouldComponentUpdate React Context​​​​​ 2018年4月4日React shouldComponentUpdate应用shouldComponentUpdate(nextProps, nextState),返回false ，组件不更新。通过比对props state控制是否更新。组件只在props.color或者state.count的值变化时重新渲染 1234567891011121314151617181920212223242526class CounterButton extends React.Component &#123; constructor(props) &#123; super(props); this.state = &#123;count: 1&#125;; &#125; shouldComponentUpdate(nextProps, nextState) &#123; if (this.props.color !== nextProps.color) &#123; return true; &#125; if (this.state.count !== nextState.count) &#123; return true; &#125; return false; &#125; render() &#123; return ( &lt;button color=&#123;this.props.color&#125; onClick=&#123;() =&gt; this.setState(state =&gt; (&#123;count: state.count + 1&#125;))&#125;&gt; Count: &#123;this.state.count&#125; &lt;/button&gt; ); &#125;&#125; React Context概念Context provides a way to pass data through the component tree without having to pass props down manually at every level. Context 提供一个方式不通用组件层层传递数据。 可解决的问题不用Redux如何集中管理状态 俩个隔着比较远的组件，不要层层向上传如何通讯 创建context1const ThemeContext = React.createContext('light'); 使用context调用context的Consumer方法，该包装函数返回一个组件，通过回调入参传递context的值。 123456789&lt;ThemeContext.Consumer&gt; &#123;theme =&gt; ( &lt;UserContext.Consumer&gt; &#123;user =&gt; ( &lt;ProfilePage user=&#123;user&#125; theme=&#123;theme&#125; /&gt; )&#125; &lt;/UserContext.Consumer&gt; )&#125; &lt;/ThemeContext.Consumer&gt; 修改context使用context Provider方法 关联props或state到其value上。 其子组件中的Consumer将会响应数据变化。 123&lt;ThemeContext.Provider value=&#123;props.theme&#125;&gt; &lt;Toolbar /&gt; &lt;/ThemeContext.Provider&gt;]]></content>
      <tags>
        <tag>​​​​​[React shouldComponentUpdate,React Context]​​​​​</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[一日 2018-04-03]]></title>
    <url>%2F2018%2F04%2F03%2F2018-04-03%2F</url>
    <content type="text"><![CDATA[​​​​​箭头函数 this *.map 文件 bash find windows查看端口占用命令​​​​​ 2018 年 4 月 3 日箭头函数改变this箭头函数在babel里转换的过程before 12345var a = 2;function fn()&#123; var a = 1; setTimeout(()=&gt;&#123;console.log(this.a),100&#125;)&#125; 捕获正确的上下文并传入箭头函数中 由于箭头函数不绑定this， 它会捕获其所在（即定义的位置）上下文的this值， 作为自己的this值 如果有对象嵌套的情况，则this绑定到最近的一层对象上,箭头函数不绑定this，所以无法改变this after 1234567891011"use strict";var a = 2;function fn() &#123; var _this = this; var a = 1; setTimeout(function () &#123; console.log(_this.a), 100; &#125;);&#125; *.map存储压缩编译后js文件的一个信息文件，通过它可以找到压缩编译前的代码位置。调试时用 Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。 如何启用Source map 正如前文所提到的，只要在转换后的代码尾部，加上一行就可以了。 1//@ sourceMappingURL=/path/to/file.js.map bash findBash命令行 根据关键字查找指定文件 1find -name "*.js" windows查看端口占用命令在windows命令行窗口下执行： 12C:\&gt;netstat -aon|findstr "80" TCP 127.0.0.1:80 0.0.0.0:0 LISTENING 2448 看到了吗，端口被进程号为2448的进程占用，继续执行下面命令： 12C:\&gt;tasklist|findstr "2448" thread.exe 2016 Console 0 16,064 K 很清楚吧，thread占用了你的端口,Kill it 如果第二步查不到，那就开任务管理器，看哪个进程是2448，然后杀之即可。 如果需要查看其他端口。把 80 改掉即可]]></content>
      <tags>
        <tag>​​​​​[箭头函数 this,*.map 文件,bash find,windows查看端口占用命令]​​​​​</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[一日 2018-3-27]]></title>
    <url>%2F2018%2F03%2F27%2F2018-03-27%2F</url>
    <content type="text"><![CDATA[React Fragments Date.now() npx ES6属性简洁表示法 2018年3月27日React FragmentsReact 中一个常见模式是为一个组件返回多个元素。Fragments 可以让你聚合一个子元素列表，并且不在DOM中增加额外节点。 &lt;&gt;&lt;/&gt; 是 &lt;React.Fragment/&gt; 的语法糖 1234567891011121314151617181920render() &#123; return ( &lt;&gt; &lt;ChildA /&gt; &lt;ChildB /&gt; &lt;ChildC /&gt; &lt;/&gt; );&#125;class Columns extends React.Component &#123; render() &#123; return ( &lt;React.Fragment&gt; &lt;td&gt;Hello&lt;/td&gt; &lt;td&gt;World&lt;/td&gt; &lt;/React.Fragment&gt; ); &#125;&#125; Date.now()获取时间戳(ES5) Date.now()等于new Date().getTime() for... of for... in forEach()for... of 遍历可迭代的对象 for... in 遍历对象 forEach() 只针对遍历数组 npxnpx 是什么npx 会帮你执行依赖包里的二进制文件。可以运行没有安装的npm服务。 npx 会自动查找当前依赖包中的可执行文件，如果找不到，就会去 PATH 里找。如果依然找不到，就会帮你安装！ 例如：npx http-server 可以一句话帮你开启一个静态服务器 1234567$ npx http-servernpx: 23 安装成功，用时 48.633 秒Starting up http-server, serving ./Available on: http://127.0.0.1:8080 http://192.168.5.14:8080Hit CTRL-C to stop the server ES6属性简洁表示法1234567891011121314151617const foo = 'bar';const baz = &#123; foo &#125;;//等同于const baz = &#123;foo: foo&#125;;/* 例子二 */function f(x, y) &#123; return &#123;x, y&#125;;&#125;// 等同于function f(x, y) &#123; return &#123;x: x, y: y&#125;;&#125;f(1, 2) // Object &#123;x: 1, y: 2&#125; 除了属性简写，方法也可以简写。 1234567891011const o = &#123; method()&#123; return "hello"; &#125;&#125;// 等同于const o = &#123; method:function()&#123; return "hello"; &#125;&#125; CommonJS 模块输出一组变量，就非常合适使用简洁写法。 1234567module.exports = &#123; getItem, setItem, clear &#125;;// 等同于module.exports = &#123; getItem: getItem, setItem: setItem, clear: clear&#125;; Object.is()它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。 12345const name ="123";const obj = &#123;name&#125;;const obj2 = JSON.parse(JSON.stringify(obj));console.log(obj===obj2)//falseconsole.log(Object.is(obj,obj2));//false white-spacewhite-space属性设置如何处理元素内的空白。 规定段落中的文本不进行换行 1white-space: nowrap letter-spacingletter-spacing 属性增加或减少字符间的空白（字符间距）。]]></content>
      <tags>
        <tag>React Fragments</tag>
        <tag>Date.now</tag>
        <tag>npx</tag>
        <tag>ES6属性简洁表示法</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[一日 2018-3-24]]></title>
    <url>%2F2018%2F03%2F24%2F2018-03-24%2F</url>
    <content type="text"><![CDATA[​​​​​css样式优先级 DNS 端口 排列组合遍历所有不同的结果​​​​​ 2018年3月24日css样式优先级 为目标元素直接添加样式，永远比继承样式的优先级高，无视优先级的遗传规则。 匹配了相同的元素，但是 ID 选择器拥有更高的优先级。 每一个直接作用于元素的CSS规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。 给元素添加的内联样式 (例如, style=&quot;font-weight:bold&quot;) 总会覆盖外部样式表的任何样式 ，因此可看作是具有最高的优先级。 DNS DNS协议允许在UDP协议之上 DNS协议端口号为53 题 排列组合 三重遍历所有可能，通过Set结构数组的长度是否为3个独一无二的数，然后进行排序 123456789101112131415161718192021 var arr = [1,5,9];var newArr= [];var result = [];for(let i=0;i&lt;arr.length;i++)&#123; for(let j=0;j&lt;arr.length;j++)&#123; for(let k=0;k&lt;arr.length;k++)&#123; newArr.push(`$&#123;arr[i]&#125;$&#123;arr[j]&#125;$&#123;arr[k]&#125;`) &#125; &#125;&#125;for(let i=0;i&lt;newArr.length;i++)&#123; if([...new Set(newArr[i])].length === arr.length)&#123; result.push(newArr[i]) &#125;&#125;result = result.sort((a,b)=&gt;a-b&gt;0)console.log(result)//​​​​​[ '159', '195', '519', '591', '915', '951' ]​​​​​]]></content>
      <tags>
        <tag>​​​​​[css样式优先级,DNS 端口,排列组合遍历所有不同的结果]​​​​​</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[一日 2018-3-21]]></title>
    <url>%2F2018%2F03%2F21%2F2018-03-21%2F</url>
    <content type="text"><![CDATA[左移运算符 二叉树 classList for...in for...of cookie 参数 css calc() React ref​​​​​ 2018年3月21日左移运算符8 &lt;&lt; 2的值为8*(2^2)=32； 8 &lt;&lt; n的值为8*（2^n）。 二叉树前序遍历 根左右中序遍历 左根右后续遍历 左右根 classListadd( String [, String] ) 添加指定的类值。如果这些类已经存在于元素的属性中，那么它们将被忽略。 remove( String [,String] ) 删除指定的类值。 item ( Number ) 按集合中的索引返回类值。 toggle ( String [, force] ) 当只有一个参数时：切换 class value; 即如果类存在，则删除它并返回false，如果不存在，则添加它并返回true。 当存在第二个参数时：如果第二个参数的计算结果为true，则添加指定的类值，如果计算结果为false，则删除它 contains( String ) 检查元素的类属性中是否存在指定的类值。 MDN 面试遇到的坑归并排序 时间复杂度n log n for...in 语句用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。 for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等） 网络延迟 指从报文开始进入网络到它开始离开网络之间的时间 栈是先进后出，队列是先进先出 cookie 参数 path 如果没有定义，默认为当前文档位置的路径。 domain 如果没有定义，默认为当前文档位置的路径的域名部分。 end 如果没有定义，cookie会在对话结束时过期 max-age 与expires作用相同,用来告诉浏览器此cookie多久过期(单位是秒),而不是一个固定的时间点。 优先级高于exprie secure cookie只通过https协议传输 1document.cookie = "someCookieName=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/;secure"; CSS calc() 函数 calc() 函数用于动态计算长度值。 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值都可以使用calc()函数进行计算； calc()函数支持 “+”, “-“, “*”, “/“ 运算； calc()函数使用标准的数学运算优先级规则； ref 1&lt;input ref=&#123; function(component)&#123; React.findDOMNode(component).focus();&#125; &#125; /&gt; 树的构造用了链表，深度搜索用了栈，广度搜索用了队列]]></content>
      <tags>
        <tag>​​​​​[左移运算符,二叉树,classList,for...in for...of,cookie 参数,css calc(),React ref]​​​​​</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[一日 2018-03-16]]></title>
    <url>%2F2018%2F03%2F16%2F2018-03-16%2F</url>
    <content type="text"><![CDATA[图片懒加载 base64 jquery ajax 2018年3月16日base64图片为什么要使用Base64编码？可以节省一个http请求。 使用 base64 的一个前提，那就是被 base64 编码的图片足够尺寸小。 如果图片足够小且因为用处的特殊性无法被制作成雪碧图（CssSprites），在整个网站的复用性很高且基本不会被更新。 将图片转化为Base64编码在 chrome 下新建一个窗口，然后把要转化的图片直接拖入浏览器，打开控制台，点 Source，如下图所示，点击图片，右侧就会显示该图片的 base64 编码，是不是很方便。 将图片转换base64格式 缺点 使用 Base64 不代表性能优化，付出的代价则是 CSS 文件体积的增大。 页面解析 CSS 生成的 CSSOM 时间增加。格式12&lt;img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOus bgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4=="&gt; src或 url() 中有一大串编码。它把一些 8-bit 数据翻译成标准 ASCII 字符 123456789101112data:,文本数据data:text/plain,文本数据data:text/html,HTML代码data:text/html;base64,base64编码的HTML代码data:text/css,CSS代码data:text/css;base64,base64编码的CSS代码data:text/JavaScript,Javascript代码data:text/javascript;base64,base64编码的Javascript代码data:image/gif;base64,base64编码的gif图片数据data:image/png;base64,base64编码的png图片数据data:image/jpeg;base64,base64编码的jpeg图片数据data:image/x-icon;base64,base64编码的icon图片数据 插件url-loader 可以自动根据文件大小决定要不要做成内联 base64 css filterCSS滤镜（filter）属提供的图形特效，像模糊，锐化或元素变色。过滤器通常被用于调整图片，背景和边界的渲染。文档 高斯模糊 filter: blur(5px) 图像转换为灰度图像 filter:grayscale(100%) Element.clientHeight可视区域大小 Element.scrollTop顶部到它的最顶部可见内容（的顶部）的距离 实现懒加载思路： 遍历存储所有的图片，设置一个记录出现在屏幕上图片的次数 每次从没有出现的图片序列开始遍历，如果图片自身的offsetTop（距顶距离）小于document.documentElement.scrollTop(滚动条距顶距离)+document.documentElement.clientHeight(可视区域高度)，就加载图片真实的地址。 12345678910111213141516171819var imgs = document.getElementsByTagName("img");var lens = imgs.length;var now = 0;function lazyload() &#123; var seeHeight = document.documentElement.clientHeight; //可视区域大小 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//顶部到它的最顶部可见内容（的顶部）的距离 for (var i = now; i &lt; lens; i++) &#123; if (imgs[i].offsetTop &lt; seeHeight + scrollTop) &#123; if (imgs[i].getAttribute("src") === "/img/default.png") &#123; console.log("出现吧，图片" + i); imgs[i].src = imgs[i].dataset.src; &#125; now = i + 1; &#125; &#125;&#125;window.onscroll = lazyload; HTML &lt;figure&gt; 标签用作文档中插图的图像： 1234&lt;figure&gt; &lt;p&gt;黄浦江上的的卢浦大桥&lt;/p&gt; &lt;img src="shanghai_lupu_bridge.jpg" width="350" height="234" /&gt;&lt;/figure&gt; HTML input 标签的 accept 属性在文件上传中使用 accept 属性，本例中的输入字段可以接受 GIF 和 JPEG 两种图像： 123&lt;form&gt; &lt;input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" /&gt;&lt;/form&gt; input onchange事件FileReaderFileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。MDN 实现图片上传预览12345678910111213141516171819&lt;form action="" method="post" accept-charset="multipart/form-data" name="uploadImg"&gt; &lt;input name="baseImg" type="file" accept="*" onchange="readImg(this)"&gt;&lt;/form&gt;&lt;img id="previewImg" class="preview" src="" alt=""&gt;&lt;script&gt; function readImg(item) &#123; var file = item.files[0]; if(FileReader)&#123; var fileReader = new FileReader(); fileReader.readAsDataURL(file); fileReader.onload = function(event)&#123; var base64Code = event.target.result; document.getElementById("previewImg").src = base64Code; &#125; &#125;else &#123; alert("不支持此功能！") &#125; &#125;&lt;/script&gt; jquery Ajax方法$.load(url,data,fn) $.get(url,fn) $.post(url,data,fn) $.ajax() 1234567891011121314$(function () &#123; $.ajax(&#123; url: "https://jsonplaceholder.typicode.com/posts/1", method: "GET", data: &#123; ts: new Date().getTime() &#125;, dataType: "json", success: function (resp) &#123; console.log(resp) &#125;, error:function(error)&#123; console.error(error) &#125; &#125;) &#125;)]]></content>
      <tags>
        <tag>图片懒加载</tag>
        <tag>base64</tag>
        <tag>jquery ajax</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[一日 2018-03-13]]></title>
    <url>%2F2018%2F03%2F13%2F2018-03-13%2F</url>
    <content type="text"><![CDATA[Git放弃更改 触发BFC条件 2018年3月13日Git放弃更改删除未追踪的文件删除文件文件预演git clean -n 删除指定文件git clean -f &lt;file&gt; 删除 untracked filesgit clean -f 连 untracked 的目录也一起删掉git clean -fd 从暂存区里删除文件git reset HEAD &lt;file&gt; 查看全部分支git branch 参考 触发BFC条件 body根元素 浮动 除none 绝对定位 display inline-block table-cell flex overflow 除visibile]]></content>
      <tags>
        <tag>Git放弃更改</tag>
        <tag>触发BFC条件</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[一日 2018-03-05]]></title>
    <url>%2F2018%2F03%2F05%2F2018-03-05%2F</url>
    <content type="text"><![CDATA[vue原理 attributes JS继承的实现方式 寻找字符串中出现次数最少的 2018年3月5日vue原理vue.js采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter。 获取dom元素上所有属性document.querySelector(&quot;#shareToWeiboModal&quot;).attributes JS继承的实现方式1、 原型链继承 将父类的实例作为子类的原型。 123function Cat()&#123; Cat.prototype = new Animal()&#125; 特点 非常纯粹的继承关系，实例是子类的实例，也是父类的实例。 父类新增原型方法/原型属性，子类都能访问到。 简单，易于实现 缺点 无法实现多继承 来自原型对象的引用属性是所有实例共享的 创建子类实例时，无法向父类构造函数传参 2、 构造继承 使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类 1234function Car(name) &#123; Animal.call(this); this.name = name || 'Tom'&#125; 特点 子类实例不共享父类引用属性 创建子类实例可以向父类传递参数 可以实现多继承（call 多个父元素） 缺点 实例不是父类实例，只是子类的实例 只能继承父类的实例属性和方法，不能继承原型属性/方法 每个子类都有父类实例函数的副本，影响性能 3、 实现继承 为父类实例添加新特性，作为子类实例返回 12345function Cat(name) &#123; var instance = new Animal(); instance.name = name || 'tom' return instance;&#125; 4、 组合继承 通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用 123456function Cat(name) &#123; Animal.call(this) this.name = name || 'Tom';&#125;Cat.prototype = new Animal();Cat.prototype.constructor = Cat; 题实现一个算法，寻找字符串中出现次数最少的、并且首次出现位置最前的字符如”cbaacfdeaebb”，符合要求的是”f”，因为他只出现了一次（次数最少）。并且比其他只出现一次的字符（如”d”）首次出现的位置最靠前。 12345678910111213141516171819202122232425function less(str) &#123; const obj = &#123;&#125;; let min str.split('').forEach((k)=&gt;&#123; if(obj[k])&#123; obj[k]++; &#125; else &#123; obj[k] = 1; &#125; &#125;) min = Object.keys(obj)[0]; console.log(min); Object.keys(obj).forEach((key)=&gt;&#123; if(obj[min]&gt;obj[key])&#123; min = key; &#125; &#125;) return min//f &#125;console.log(less("cbaacfdeaebb")); 不使用loop循环，创建一个长度为100的数组，并且每个元素的值等于它的下标。12345var a = Array(100).join(",").split(",").map(function(item,index)&#123; return index&#125;)console.log(a); 这个解法充满了曲折啊！先是创建一个数组，然后，通过join方法把它转成字符串，然后，再通过split方法把字符串转成数组，这时候，它就拥有100个值为空的元素了，然后，再通过map函数，改变这些元素的值即可。]]></content>
      <tags>
        <tag>vue原理</tag>
        <tag>attributes</tag>
        <tag>JS继承的实现方式</tag>
        <tag>寻找字符串中出现次数最少的</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[一日 2018-03-04]]></title>
    <url>%2F2018%2F03%2F04%2F2018-03-04%2F</url>
    <content type="text"><![CDATA[函数的执行上下文有关 不稳定的排序算法 置换元素 模板字符串 arguments转换数组 2018年3月4日函数的执行上下文有关解析器在向执行环境中加载数据时，对函数声明和函数表达式并不是一视同仁，解析器会率先读取函数声明，并在其执行任何代码之前可用。所以解析器会依次读入两个函数，且后面的函数会覆盖前面的函数，因此实际上两个语句都调用的是第二个函数。 排序算法不稳定的有希尔排序 堆排序 快速排序 选择排序 稳定的有 插入排序 冒泡排序 归并排序 置换元素浏览器根据元素的标签和属性，来决定元素的具体显示内容。 例：浏览器根据&lt;img&gt;标签的src属性显示图片。根据标签的type属性决定显示输入框还是按钮。html中的&lt;img&gt;&lt;input&gt;&lt;textarea&gt;&lt;select&gt;&lt;object&gt;都是置换元素，这些置换元素往往没有实际内容，即是一个空元素。 非置换元素浏览器中的大多数元素都是不可置换元素，即其内容直接展示给浏览器。 例如&lt;label&gt;标签，&lt;p&gt;标签里的内容会被浏览器直接显示给用户。 刷题把参数转换为数组，然后再截取你想要的位数。 123456function c()&#123; var a_args = Array.prototype.slice(arguments,0,2); var b_args = Array.prototype.slice(arguments,2); A.apply(this,a_args); B.apply(this,b_args);&#125; 模板字符串 12345678910function template(str)&#123; var temp = str; return function(obj)&#123; for(var key in obj)&#123; var tpl = "&lt;%= " + key + " =%&gt;"; temp = temp.replace(tpl,obj[key]) &#125; return temp; &#125;&#125;]]></content>
      <tags>
        <tag>函数的执行上下文有关</tag>
        <tag>不稳定的排序算法</tag>
        <tag>置换元素</tag>
        <tag>模板字符串</tag>
        <tag>arguments转换数组</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[一日 2018-03-01]]></title>
    <url>%2F2018%2F03%2F01%2F2018-03-01%2F</url>
    <content type="text"><![CDATA[arguments Array.concat() css3 伪类选择器 &lt;input required&gt; 前端实现模糊搜索 JS取整 赛客网 v8 2018年3月1日argumentsarguments 是一个对应于传递给函数的参数的类数组对象。 arguments对象是所有（非箭头）函数中都可用的局部变量。 arguments转换成数组12var args = Array.prototype.slice.call(arguments)var args = Array.from(arguments)//ES6 Array.prototype.concat()concat()方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。 css3 新增伪类选择器 名称 作用 p:last-child 选择其父元素的最后子元素(一定是p才行) p:first-of-type 选择其父元素的首个p元素 p:first-child 选择其父元素的首个子元素(一定是p才行) p:only-child 选择其父元素的只有一个元素(而且这个元素只能是p元素，不能有其他元素) p:only-of-type 选择其父元素的只有一个p元素(不能有第二个P元素，其他元素可以有); p:nth-child(n) 选择其父元素的第N个 刚好是p的元素; p:nth-last-child(n) 从最后一个子元素开始计数; p:nth-of-type(n) 选择其父元素的n个元素; p:nth-last-of-type(n) 从最后一个子元素开始计数 使用css type方法比较好，语义上比较容易理解。 HTML 5&lt;input&gt; required 属性required 属性规定必需在提交之前填写输入字段。 如果使用该属性，则字段是必填（或必选）的。 1&lt;input required="required"&gt; 前端实现模糊搜索123456789101112131415161718192021222324const data = ["1111","2222","3333","1234","12","4444"];//String.indexOf()const find1 = (search,data)=&gt;&#123; let result = []; data.forEach((element)=&gt;&#123; if(element.indexOf(search)&gt;=0)&#123; result.push(element) &#125; &#125;) return result;&#125;//String.match()const find2 = (search,data)=&gt;&#123; let result = []; data.forEach((element)=&gt;&#123; var searchRegExp = new RegExp(search) if(element.match(searchRegExp))&#123; result.push(element) &#125; &#125;) return result;&#125;console.log(find2("",data)); JS 取整方法Math.ceil(x) 向上取整 Math.floor(x) 向下取整 赛码网答题 google v81234var line;while(line = read_line())&#123; print(line)&#125;]]></content>
      <tags>
        <tag>arguments</tag>
        <tag>Array.concat()</tag>
        <tag>css3 伪类选择器</tag>
        <tag>&lt;input required&gt;</tag>
        <tag>前端实现模糊搜索</tag>
        <tag>JS取整</tag>
        <tag>赛客网 v8</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[一日 2018-02-26]]></title>
    <url>%2F2018%2F02%2F26%2F2018-02-26%2F</url>
    <content type="text"><![CDATA[window.onload DOMContentLoaded Date赋值 清除浮动 2018年2月26日window.onload()与DOMContentLoaded区别window.onload()等到页面内包括图片的所有元素加载完毕后才能执行。 1234567891011window.onload = function()&#123; var xhr = new XMLHttpRequest(); xhr.open("GET","/data",true); xhr.onerror = function()&#123; console.error("发生错误了")&#125; xhr.onreadystatechange = function()&#123; if(xhr.readyState === 4 &amp;&amp; xhr.status === 200)&#123; console.log(xhr.responseText) &#125; &#125; xhr.send(null);&#125; DOMContentLoaded 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。 123document.addEventListener("DOMContentLoaded",function (event) &#123; console.log("DOM fully loaded and parsed"); &#125;) Date日期对象 赋值12var today = new Date(1453094034000); // by timestamp(accurate to the millimeter)var birthday = new Date(1995, 11, 17, 3, 24, 0);//通过给定具体值 month 必选项。表示的月份，是从 0 到 11 之间的整数（ 1 月至 12 月）。 ## 清除浮动 为什么要清除浮动？1、 影响其他元素定位 父盒子高度为0，子盒子全部浮动，定位，子盒子不会撑开父盒子，下面的元素会到子盒子下面。 2、 背景图片或者颜色不能正常显示 由于浮动产生，如果对父级设置了css背景颜色或者css图片，而父级不能被撑开，所以导致css背景图片不能显示。 3、 外边距内边距设置影响 由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。 清除浮动方法总结1、对父级元素设置高度 对父级设置适合高度样式清除浮动，一般设置高度需要能确定内容高度才能设置（高度设置为：内容高度+padding+border）。 2、clear:both清除浮动 我们在父级“”结束前加div引入“class=”clear””样式,这样就可以清除浮动了。 3、overflow:hidden清除浮动 对父级CSS选择器加overflow:hidden样式，可以清除使用的float产生浮动。【BFC有三大特性:(1)BFC会阻止垂直外边距（margin-top、margin-bottom）折叠.(2)BFC不会重叠浮动元素.(3)BFC可以包含浮动.我们可以利用BFC的第三条特性来“清浮动”，这里其实说清浮动已经不再合适了，应该说用BFC来包含浮动。（还想深入了解BFC的可以参看“https://www.w3.org/TR/CSS21/v...”的详细描述）】 4、单伪元素//双伪元素清除浮动单伪元素清除浮动原理： 通过:after 伪类在浮动块后面加上一个 display:none 的不可见块状内容来，并给它设置 clear:both 来清理浮动。 12345678910.clearfix:after&#123; display:block; clear:both; visibility:hidden; height:0; font-size:0;&#125;.clearfix &#123; zoom:1;/* 兼容IE */&#125; 双伪元素清除浮动原理：通过:after 伪类在浮动块后面加上一个 display:table的不可见块状内容来，并给它设置 clear:both 来清理浮动。（注意：这里隐藏这个空白使用的是 display: table，而不是设置 visibility:hidden;height:0;font-size:0;与单伪元素清除浮动有所区别） 12345678910.cearfix:before, .cearfix:after &#123; content:" "; /*必须为空*/ display:table;&#125;.cearfix:after &#123; clear:both;&#125;.cearfix &#123; zoom:1; /*兼容IE浏览器*/&#125; 总结第一种方法：简单，容易掌握，但只适合高度固定的布局，不推荐使用可以了解。 第二种方法：简单，浏览器支持好，但如果页面浮动布局多，就要增加很多空div，让人感觉很麻烦，不推荐使用，可以了解。 第三种方法：代码少，浏览器支持，不能和position配合使用，因为超出的尺寸的会被隐藏，只推荐没有使用position的布局使用。 第四种方法：浏览器支持好,建议使用。 window.screenwindow.screen 对象包含有关用户屏幕的信息。 Column A Column B screen.width 屏幕宽度 screen.height 屏幕高度 screen.availWidth 可用的屏幕宽度 screen.availHeight 可用的屏幕高度]]></content>
      <tags>
        <tag>window.onload DOMContentLoaded</tag>
        <tag>Date赋值</tag>
        <tag>清除浮动</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[一日 2018-02-22]]></title>
    <url>%2F2018%2F02%2F22%2F2018-02-22%2F</url>
    <content type="text"><![CDATA[i++ ++i 归并排序 2018年2月22日++i 与 i++ i++返回原来的值，++i返回加1后的值。 i++不能作为左值，而++i可以作为左值。归并排序归并排序是建立在归并操作上的一种有效的排序算法。该栓发采用分治法的一个非常典型的应用。 首先考虑如何将两个有序数列合并。只要比较二哥数列的第一个数，谁笑就先取谁，取了后就在对应数列中删除这个数。然后再进行比较，如果有数列为空，那直接将另一个数列的数据依次取出即可。 1234567891011121314const merge = (arr) =&gt; &#123; const middle = Math.floor(arr.length/2); const leftArr = arr.slice(0,middle); const rightArr = arr.slice(middle+1,arr.length); let result = []; while( leftArr.length || rightArr.length)&#123; if(leftArr[0] &lt; rightArr[0])&#123; result.push(leftArr.shift()) &#125; else &#123; result.push(rightArr.shift()) &#125; &#125; return result&#125;]]></content>
      <tags>
        <tag>i++ ++i</tag>
        <tag>归并排序</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[一日 2018-02-20]]></title>
    <url>%2F2018%2F02%2F20%2F2018-02-20%2F</url>
    <content type="text"><![CDATA[data-xxx 属性 &lt;html manifest&gt; 页面缓存 检测js数据类型 BOM DOM 2018年2月20日data-xxx 属性添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。 可以通过元素的dataset属性来访问自定义属性的值。dataset属性的值是DOMStringMap的一个实例，也就是一个名值对儿的映射。 &lt;div id=&quot;box&quot; data-id=&quot;001&quot; data-name=&quot;zjc&quot;&gt;&lt;/div&gt; &lt;script&gt; window.onload = function(){ const $box = document.querySelector(&quot;#box&quot;); console.log($box.dataset.id);//取值 001 $box.dataset.name = &quot;xdc&quot;;//赋值 console.log($box.dataset);//{id: &quot;001&quot;, name: &quot;xdc&quot;} 类型为DOMString } &lt;/script&gt;&lt;html manifest&gt;单词 manifest vt. 证明 n.载货单 HTML5 引入了应用程序缓存，这意味着 Web 应用程序可以被缓存，然后在无互联网连接的时候进行访问。 应用程序缓存使得应用程序有三个优点： 离线浏览 - 用户可以在离线时使用应用程序 快速 - 缓存的资源可以更快地加载 减少服务器加载 - 浏览器只从服务器上下载已更新/已更改的资源 ... CACHE MANIFEST第一行，CACHE MANIFEST，是必需的： CACHE MANIFEST /theme.css /logo.gif /main.js上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。 检测数据类型Object.prototype.toString.call(),toString()方法返回一个表示该对象的字符串。 因为toString为Object的原型方法，而Array ，function等类型作为Object的实例，都重写了toString方法。 console.log(Object.prototype.toString.call(true));//[object Boolean] console.log(Object.prototype.toString.call(undefined));//[object Undefined] console.log(Object.prototype.toString.call(null));//[object Null] console.log(Object.prototype.toString.call({name: &quot;jerry&quot;}));//[object Object] console.log(Object.prototype.toString.call(function(){}));//[object Function] console.log(Object.prototype.toString.call([]));//[object Array]实现 js 数据类型的判断const type = (obj) =&gt; (({}).toString.call(obj).match(/\[object\ (\w+)\]/)[1]).toLowerCase()document.documentElementDocument.documentElement 是一个会返回文档对象（document）的根元素的只读属性（如HTML文档的 &lt;html&gt; 元素，返回整个文档）。 Element.clientWidthElement.clientWidth 属性表示元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。 BOM DOM bom 只是很久以前对没有进入dom标准的某些 api 的称呼。也不是根据是在 window / document 对象上区分的。]]></content>
      <tags>
        <tag>data-xxx 属性</tag>
        <tag>&lt;html manifest&gt; 页面缓存</tag>
        <tag>检测js数据类型</tag>
        <tag>BOM DOM</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[一日 2018-02-19]]></title>
    <url>%2F2018%2F02%2F19%2F2018-02-19%2F</url>
    <content type="text"><![CDATA[RegExp 2018年2月19日RegExp范围[0-9a-zA-Z\_] 匹配数量 Name Value * 表示任意个字符（包括0个） + 至少一个字符 ? 表示0个或1个 {n} 表示n个字符 {n,m} 表示n-m个字符 ### 创建正则 12var re1 = /ABC\-001/;var re2 = new RegExp("ABC\\-001"); 分组exec()12const re2 = /^(\d&#123;3&#125;)-(\d&#123;3,8&#125;)$/console.log(re2.exec('010-12345')); 返回一个Array,第一个元素是匹配到整个字符串，后面的字符串表示匹配成功的子串。 默认贪婪模式，尽可能多的进行匹配。 全局搜索123456789101112131415var s = 'JavaScript, VBScript, JScript and ECMAScript';var re=/[a-zA-Z]+Script/g;// 使用全局匹配:re.exec(s); // ['JavaScript']re.lastIndex; // 10re.exec(s); // ['VBScript']re.lastIndex; // 20re.exec(s); // ['JScript']re.lastIndex; // 29re.exec(s); // ['ECMAScript']re.lastIndex; // 44 用途 切分字符串1'a b c'.split(/\s+/)]]></content>
      <tags>
        <tag>RegExp</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[一日 2018-02-13]]></title>
    <url>%2F2018%2F02%2F13%2F2018-02-13%2F</url>
    <content type="text"><![CDATA[&lt;map&gt; &lt;area&gt;图片热区 2018年2月13日&lt;map&gt;123456&lt;img class="container" src="http://via.placeholder.com/350x500" alt="" usemap="myMap"&gt;&lt;map name="myMap" id="myMap"&gt; &lt;area shape="circle" coords="0,0,50" href="another.htm" /&gt; &lt;area shape="rect" coords="50,50,100,100" href="#" alt=""&gt; &lt;area shape="poly" coords="0,0,1,1,2,2" href="" alt=""&gt;&lt;/map&gt; &lt;area&gt;shape 属性用于定义图像映射中对鼠标敏感的区域的形状： 圆形（circ 或 circle） 多边形（poly 或 polygon） 矩形（rect 或 rectangle） 全部区域（default） shape 属性的值会影响浏览器对 coords 属性的解释。如果未使用 shape 属性，那么会假设使用值 default。依照标准，default 意味着该区域覆盖整个图像。 coords 给热点区域设定具体的坐标值。这个值的数值和意义取决于这个值所描述的形状属性.。对于矩形或长方形, 这个coords *值为两个X,Y对：左上、右下。 对于圆形***, 这个值是 x,y,r ，这里的 x,y 是一对确定圆的中心的坐标而 r 则表示的是半径值.。对于多边和多边形，这个值是用x,y对表示的多边形的每一个点：x1,y1,x2,y2,x3,y3,等等。HTML4里, 值可能是像素数量或者百分比, 区别是不是有%出现; HTML5里, 只可能是像素的数量.（坐标轴左上角为0，0） &lt;a&gt;外链处理方式新窗口打开页面target:&quot;_blank&quot; 1&lt;a href="https://www.baidu.com" target="_blank"&gt;百度&lt;/a&gt; Vue样式作用域scoped 12345&lt;style scoped&gt;h1 &#123; color : blue&#125;&lt;/style&gt;]]></content>
      <tags>
        <tag>&lt;map&gt; &lt;area&gt;图片热区</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[一日 2018-02-08]]></title>
    <url>%2F2018%2F02%2F08%2F2018-02-08%2F</url>
    <content type="text"><![CDATA[Array.isArray() 数组拍平 水平垂直居中 Function类 执行任意表达式 2018年2月8日Array.isArray()Array.isArray() 用于确定传递的值是否是一个Array。 数组拍平题目：编写一个 JavaScript 函数，接受一个仅包含数字的 多维数组 ，返回拍平以后的结果。例如传入：[1, [[2], 3, 4], 5]，返回 [1, 2, 3, 4, 5]。 思路：遍历传进来的每一项，判断是否是数组，如果是数组就用concat连接数组到结果中递归判断，如果不是数组直接加到结果中。 1234567891011const flatten = (arr) =&gt; &#123; let result = []; arr.forEach((ele)=&gt;&#123; if(Array.isArray(ele))&#123; result = result.concat(flatten(ele)) &#125; else &#123; result.push(ele) &#125; &#125;) return result&#125; Array.prototype.concat()concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。(浅拷贝) 水平垂直居中题目：有一个 div#wrapper 元素，高、宽度都未知。它其中有一个宽高都为 100px 的div#box元素，请你完成 CSS，使得div#box在div#wrapper 内水平、垂直方向居中。 123&lt;div id='wrapper'&gt; &lt;div id='box'&gt;&lt;/div&gt;&lt;/div&gt; 1234567891011121314#wrapper &#123; position: relative;&#125;#box &#123; width: 100px; height: 100px; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0;&#125; Function 对象（类）每个arg都是一个参数，最后一个参数是函数主体（要执行的代码）。 1var function_name = new function(arg1, arg2, ..., argN, function_body) 12var add = new Function("a","b","return a+b")add(1,2) 执行任意表达式题目 1234execute(`'My name is ' + name`, &#123; name: 'Jerry' &#125;) // =&gt; My name is Jerryexecute('monkeys.length + 1', &#123; monkeys: [1, 2, 3] &#125;) // =&gt; 4execute('user.name + user.age', &#123; user: &#123; name: 'Jerry', age: 12 &#125; &#125;) // =&gt; Jerry12execute('run()', &#123; run: () =&gt; 'Good Night' &#125;) // =&gt; Good Night 答案形参是对象的key,执行的参数是对象的value，执行方法是字符串里边的内容。 1234567const execute = (exp, ctx) =&gt; &#123; return new Function(...Object.keys(ctx), `return $&#123;exp&#125;`)(...Object.values(ctx))&#125;/* 生成的函数，相当于 */!function(name)&#123; return 'My name is ' + name&#125;('Jerry')]]></content>
      <tags>
        <tag>Array.isArray()</tag>
        <tag>数组拍平</tag>
        <tag>水平垂直居中</tag>
        <tag>Function类</tag>
        <tag>执行任意表达式</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[一日 2018-02-06]]></title>
    <url>%2F2018%2F02%2F06%2F2018-02-06%2F</url>
    <content type="text"><![CDATA[实现VirtualDom Object.entries() JS原生操作dom substr和substring区别 2018年2月6日单词queue n. 队列 graph n. 图 VirtualDom1234567891011121314151617181920212223242526class VNode &#123; constructor (tagName, props, children) &#123; this.tagName = tagName this.props = props this.children = children &#125; render () &#123; // 根据 tagName 构建 DOM 节点 const el = document.createElement(this.tagName) // 设置 DOM 节点属性 Object.entries(this.props).forEach(([key, value]) =&gt; el.setAttribute(key, value)) var children = this.children || [] /* 渲染子节点 */ children.forEach((child) =&gt; &#123; var childNode = (child instanceof VNode) ? child.render() // 如果子节点也是虚拟DOM，递归构建DOM节点 : document.createTextNode(child) // 如果字符串，只构建文本节点 el.appendChild(childNode) &#125;) return el &#125;&#125;const h = (tagName, props, children) =&gt; &#123; return new VNode(tagName, props, children)&#125; Object.entries()Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for...in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环也枚举原型链中的属性）。 12const obj = &#123; foo: 'bar', baz: 42 &#125;;console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ] JS原生操作domdocument.createTextNode创建一个新的文本节点 document.createElement创建html元素 Element.setAttribute()为指定的 Element 添加属性节点. 123456789&lt;script&gt; document.body.onload = function (params) &#123; var newDiv = document.createElement("div") var newContent = document.createTextNode("Hello world") newDiv.setAttribute("class","red"); newDiv.appendChild(newContent); document.body.appendChild(newDiv) &#125;&lt;/script&gt; 1&lt;div class="red"&gt;Hello world&lt;/div&gt; 广度优先算法广度优先算法（Breadth-First Search），同广度优先搜索，又称作宽度优先搜索，或横向优先搜索，简称BFS，是一种图形搜索演算法。简单的说，BFS是从根节点开始，沿着树的宽度遍历树的节点，如果发现目标，则演算终止。广度优先搜索的实现一般采用open-closed表。若所有边的长度相等，广度优先搜索算法是最佳解]]></content>
      <tags>
        <tag>实现VirtualDom</tag>
        <tag>Object.entries()</tag>
        <tag>JS原生操作dom</tag>
        <tag>substr和substring区别</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[一日 2018-02-05]]></title>
    <url>%2F2018%2F02%2F05%2F2018-02-05%2F</url>
    <content type="text"><![CDATA[safeGet 闭包斐波那契 2018年2月5日safeGet有时候我们需要访问一个对象较深的层次，但是如果这个对象某个属性不存在的话就会报错。 12var data = &#123; a: &#123; b: &#123; c: 'ScriptOJ' &#125; &#125; &#125;safeGet(data, 'a.b.c') // =&gt; scriptoj 12345678910const safeGet = (data, path) =&gt; &#123; if(!path) return void 0; let paths = path.split('.'); let result = data; while(paths.length)&#123; result = result[paths.shift()]; if(!result) return void 0; &#125; return result;&#125; 斐波那契 闭包1234567891011const fibonacci = ((memo=[0,1])=&gt;&#123; const fib = (n)=&gt;&#123; let result = memo[n]; if(typeof result !== "number")&#123; result = fib(n-1)+fib(n-2); memo[n] = result; &#125; return result &#125;; return fib;&#125;)()]]></content>
      <tags>
        <tag>safeGet</tag>
        <tag>闭包斐波那契</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[一日 2018-02-02]]></title>
    <url>%2F2018%2F02%2F02%2F2018-02-02%2F</url>
    <content type="text"><![CDATA[Typescript reduce()形参 2018年2月2日Typescript元组 Tuple元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。 1234// Declare a tuple typelet x: [string, number];// Initialize itx = ['hello', 10]; // OK 枚举使用枚举类型可以为一组数值赋予友好的名字。 Array.prototype.reduce()12345&#123; const total = [0,1,2,3,4].reduce(function(sum,value,index,array)&#123; return sum+value &#125;,initialValue)&#125; accumulator 累加器累加回调的返回值; currentValue 数组中正在处理的元素。 currentIndex 数组中正在处理的当前元素的索引。 array 调用reduce的数组 initialValue 用作第一个调用 callback的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。]]></content>
      <tags>
        <tag>Typescript</tag>
        <tag>reduce()形参</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[一日 2018-02-01]]></title>
    <url>%2F2018%2F02%2F01%2F2018-02-01%2F</url>
    <content type="text"><![CDATA[Typescript 实现模板字符串 2018年2月1日Typescriptenum 枚举使用枚举类型可以为一组数值赋予友好的名字。 12345enum Color &#123;Red =1,Green,Blue&#125;;//[1,2,3]let c:Color = Color.Green;//2//我们知道数值为2，但是不确定它映射到Color里的哪个名字，我们可以查找相应的名字： let colorName:string = Color[2]//Greenconsole.log(colorName) 类型any 任何类型void 没有任何类型 类型断言 类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。 它没有运行时的影响，只是在编译阶段起作用。 12345&#123; let someValue:any = "this is a string" let strLength:number = (someValue as string).length; console.log(strLength)&#125; 实现模板字符串1234567891011121314151617181920function stringReplace()&#123; var fakeData = [ &#123;name:"zjc",age:18&#125;, &#123;name:"xdc",age:18&#125; ] var result = [] var template = [ "&lt;div&gt;", " &lt;p&gt;$&#123;name&#125;&lt;/p&gt;", " &lt;p&gt;$&#123;age&#125;&lt;/p&gt;", "&lt;/div&gt;" ].join('') fakeData.forEach(function(item)&#123; var tpl = template; tpl = tpl.replace("$&#123;name&#125;",item.name); tpl = tpl.replace("$&#123;age&#125;",""+item.age); result.push(tpl); &#125;) return result&#125;]]></content>
      <tags>
        <tag>Typescript</tag>
        <tag>实现模板字符串</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[一日 2018-1-31]]></title>
    <url>%2F2018%2F01%2F31%2F2018-1-31%2F</url>
    <content type="text"><![CDATA[2018年1月31日void 0 正则分组 渐进增强与优雅降价 cookie 三种存储比较 void 0void会执行后面的表达式并返回undefined,void 0 === undefined 为什么要用void 0替换undefined？ undefined不是保留词，只是全局对象的一个属性，在低版本IE可以重写。（undefined在ES5中已经是全局对象的一个只读属性，不能被重写，但是在局部作用域还是可以重写）。 123456&#123; !function()&#123; var undefined = 10; console.log(10===undefined)//true &#125;()&#125; The void operator evaluates the given expression and then returns undefined.void 运算符能对给定的表达式进行求值，然后返回 undefined。（void 后面你随便跟上一个表达式，返回的都是 undefined，都能完美代替undefined）其中最短的是什么呢？毫无疑问就是void 0。 void 是不能被重写的。 正则表达式1str.replace(regexp|substr, newSubStr|function) 123456var reg = /(\d&#123;3&#125;)\-(\d&#123;4&#125;)/;"010-1234".replace(reg,function(a,b,c)&#123; console.log(a)//010-1234 console.log(b)//010 console.log(c)//1234&#125;) 分组 1reg.exec("010-1234")//[ '010-1234', '010', '1234', index: 0, input: '010-1234' ] 渐进增强与优雅降级优雅降级Web站点在所有新式浏览器都能正常工作，如果用户使用老式浏览器，代码会检查确认他们是否正常工作。为无法支持所有功能的浏览器增加候选方案。 渐进增强从所有浏览器支持的基本功能开始，逐步添加那些只有新式浏览器才支持的功能。 cookie localStorage sessionStorage 特效 Cookie LocalStorage sessionStorage 生命周期 可设置失效时间，默认是关闭浏览器失效 除非被清除，否则一直保存 仅在当前会话下有效，关闭页面或浏览器后被清除 存放数据大小 4k左右 一般5mb 一般5mb 与服务器通讯 每次都会携带在http头部，如果使用cookie保存过多数据会带来性能问题 仅在客户端（浏览器）中保存，不参与服务器通讯 仅在客户端（浏览器）中保存，不参与服务器通讯 易容性 需要程序员自己封装，原生cookie接口不友好 原生接口较友好，可再次封装对Object，Array有更好支持 原生接口较友好，可再次封装对Object，Array有更好支持 cookie读取cookie 12var strCookie = document.cookie;//获取cookie字符串var arrCookie = strCookie.split(";")//获取cookie数组 设置cookie格式 key=value 1document.cookie = "userId=123" 设置cookie终止日期toGMTString() 方法可根据格林威治时间 (GMT) 把 Date 对象转换为字符串，并返回结果。 Wed, 31 Jan 2018 08:16:39 GMT expire 期满 123456var date=new Date(); var expireDays=10; //将date设置为10天以后的时间 date.setTime(date.getTime()+expireDays*24*3600*1000); //将userId和userName两个cookie设置为10天后过期 document.cookie="userId=828; userName=hulk; expire="+date.toGMTString(); 删除cookie可以将其过期时间设定为一个过去的时间 12345var date=new Date(); //将date设置为过去的时间 date.setTime(date.getTime()-10000); //将userId这个cookie删除 document.cookie="userId=828; expire="+date.toGMTString();]]></content>
      <tags>
        <tag>cookie</tag>
        <tag>void 0</tag>
        <tag>正则分组</tag>
        <tag>渐进增强与优雅降价</tag>
        <tag>三种存储比较</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[一日 2018-1-30]]></title>
    <url>%2F2018%2F01%2F30%2F2018-1-30%2F</url>
    <content type="text"><![CDATA[postcss Math.min,Math.max String.padStart $().each 2018年1月30日POSTCSS是一个平台，提供了一个解析器，它能够将 CSS 解析成抽象语法树（AST）。 插件：如Autoprefixer Math.min()Math.min() 返回零个或更多个数值的最小值。Math.max() 函数返回一组数中的最大值。 String.prototype.padStart()str.padStart(targetLength [, padString])方法用另一个字符串填充当前字符串(重复，如果需要的话)，以便产生的字符串达到给定的长度。填充从当前字符串的开始(左侧)应用的。 1'abc'.padStart(8, "0");// "00000abc" String.prototype.padEnd()填充字符串尾 jQuery 遍历 - each() 方法1$(selector).each(function(index,element)) index - 选择器的 index 位置 element - 当前的元素（也可使用 “this” 选择器） jQuery 遍历 - siblings() 方法siblings() 获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。 currentTarget 事件属性currentTarget事件属性返回其监听器触发事件的节点，即当前处理该事件的元素、文档或窗口。]]></content>
      <tags>
        <tag>postcss</tag>
        <tag>Math.min Math.max</tag>
        <tag>String.padStart</tag>
        <tag>$().each</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[一日 2018-1-29]]></title>
    <url>%2F2018%2F01%2F29%2F2018-1-29%2F</url>
    <content type="text"><![CDATA[window.onload DOMContentLoaded Date赋值 清除浮动 2018年1月29日Genertor 迭代器基本语法1234567891011121314151617&#123; let tell = function*() &#123; yield "a"; yield "b"; return "c"; &#125;; let k = tell(); console.log(k.next()); console.log(k.next()); console.log(k.next()); /* &#123; value: 'a', done: false &#125; &#123; value: 'b', done: false &#125; &#123; value: 'c', done: true &#125; */&#125; 优雅实现Iterator1234567891011121314151617&#123; let obj = &#123;&#125;; obj[Symbol.iterator] = function*() &#123; yield 1; yield 2; yield 3; &#125;; for (let value of obj) &#123; console.log(value); &#125;&#125;/*123*/ 实现状态机123456789101112131415161718192021222324252627&#123; // 状态机 let state = function*() &#123; while (1) &#123; yield "A"; yield "B"; yield "C"; &#125; &#125;; let status = state(); console.log(status.next()); console.log(status.next()); console.log(status.next()); console.log(status.next()); console.log(status.next()); console.log(status.next()); console.log(status.next());&#125;/**&#123; value: 'A', done: false &#125;&#123; value: 'B', done: false &#125;&#123; value: 'C', done: false &#125;&#123; value: 'A', done: false &#125;&#123; value: 'B', done: false &#125;&#123; value: 'C', done: false &#125;&#123; value: 'A', done: false &#125;*/ 语法糖 async await123456789&#123; //generator 语法糖 let state = async function() &#123; while (1) &#123; await "1"; await "2"; &#125; &#125;;&#125; ### 实现抽奖 12345678910111213141516171819202122&#123; //抽奖 let draw = function(count) &#123; //具体的抽奖逻辑 console.log(`剩余$&#123;count&#125;`); &#125;; let residue = function*(count) &#123; while (count &gt; 0) &#123; count--; yield draw(count); &#125; &#125;; let star = residue(5); console.log(star.next()); console.log(star.next()); console.log(star.next()); console.log(star.next()); console.log(star.next()); console.log(star.next());&#125; 实现长轮询1234567891011121314151617181920212223242526&#123; // 长轮询 let ajax = function*() &#123; yield new Promise(function(resolve, reject) &#123; setTimeout(function() &#123; resolve(&#123; code: 0 &#125;); &#125;,200); &#125;); &#125;; let pull = function()&#123; let genertaor = ajax(); let step = genertaor.next(); step.value.then(function(d)&#123; if(d.code!=0)&#123; setTimeout(function()&#123; console.log('wait') pull() &#125;,1000); &#125; else &#123; console.log(d); &#125; &#125;)//step.value就是Promise的实例 &#125; pull()//执行长轮询&#125; EventTarget.addEventListener()IE8以前的浏览器只支持事件冒泡，不支持事件捕获，它也不支持addEventListener函数，不会用第三个参数来表示是冒泡还是捕获，它提供了另一个函数attachEvent。IE9就支持addEventListener。 addEventListener()的第三个参数useCapture，这个参数决定要使用的事件处理程序的调用类型，只有在特定狀況下才会对事件产生影响，通常建议用false； 如果参数是true，事件处理程序以捕捉模式触发；从顶层的父节点开始触发事件，从外到内传播。 如果参数是false，事件处理程序以冒泡模式触发；从最内层的节点开始触发事件，逐级冒泡直到顶层节点，从内向外传播 jquery $(document).ready() 与window.onload的区别 Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法还是有区别的。 执行时间window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 编写个数不同window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个$(document).ready()可以同时编写多个，并且都可以得到执行 简化写法window.onload没有简化写法$(document).ready(function(){})可以简写成$(function(){}); document.querySelector()原生选择器 stopPropagation阻止捕获和冒泡阶段中当前事件的进一步传播。 判断NaNES6 1Number.isNaN() Polyfill 123Number.isNaN = Number.isNaN || function(value) &#123; return typeof value === "number" &amp;&amp; isNaN(value);&#125; ES6 Arraynew Array指定数组长度Array.prototype.fill(value, start, end)用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。 12new Array(3).fill(0)// [0, 0, 0] CSS3 nth-of-type() 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.n 可以是数字、关键词或公式。 nth-child()匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。]]></content>
      <tags>
        <tag>Genertor</tag>
        <tag>js事件传播</tag>
        <tag>window.onload</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[二日 2018.1.24~1.25]]></title>
    <url>%2F2018%2F01%2F25%2F2018-1-25%2F</url>
    <content type="text"><![CDATA[table 改变作用域链 BFC inline-block 间隙 $ajax curl 2018 年 1 月 24 日HTML 表格1234567891011&lt;table border=1&gt; &lt;th&gt;title&lt;/th&gt; &lt;tr&gt; &lt;td&gt;name&lt;/td&gt; &lt;td&gt;age&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;zjc&lt;/td&gt; &lt;td&gt;18&lt;/td&gt; &lt;/tr&gt;&lt;/table&gt; 名称 作用 &lt;tr&gt; 行 &lt;td&gt; 列 &lt;th&gt; 表头 不能改变作用域链 while的话只是在函数局部环境或者全局环境运行，并不会改变作用域链。 try catch 中 catch 可以延长作用域链。 eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。BFC（Block Formatting Context）http://www.cnblogs.com/asheng2016/p/7281784.html概念BFC 是一个具有特殊 CSS 样式的 HTML 盒子，比如 div标签就经常用来当盒子用。 float: left | right position: fixed | absolute display: inline-block | table-cell | table-caption | flex | inline-flex overflow: hidden | scroll | auto外边距折叠上下两个盒子，上面的设置了margin-bottom，下面的设置了margin-top，这时候总的外边距并不是两者相加，而是取最大的外边距作为总的外边距。浮动元素，父元素高度坍塌总结BFC 就是页面上的一个隔离的独立容器，容器里面的子元素是不会影响到外面的元素。BFC 的区域不会与 float 的元素区域重叠。计算BFC 的高度时，浮动子元素也参与计算。2018 年 1 月 25 日inline-block table-cell 12&lt;p&gt;123&lt;/p&gt;&lt;p&gt;321&lt;/p&gt; 1234p &#123; background: red; display: inline-block;&#125; 当元素 inline-block 后，相邻元素之间会有空隙产生原因 英文单词之间有空格，中文没有，当元素设成inline-block,具有inline属性，所有的空格、换行或者回车都会被视为一个空格占位符，于是就产生间隙。 1234p &#123; background: red; display: table-cell;&#125; table-cell 此元素会作为一个表格单元格显示（类似 和 ），相邻元素没有空隙（IE8+）]]></content>
      <tags>
        <tag>table</tag>
        <tag>改变作用域链</tag>
        <tag>BFC</tag>
        <tag>inline-block 间隙</tag>
        <tag>$ajax</tag>
        <tag>curl</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[三日 2018.1.11~1.18]]></title>
    <url>%2F2018%2F01%2F12%2F2018-1-10%2F</url>
    <content type="text"><![CDATA[function.length toString,parseInt Math.pow float计算精度apply,bind,call 闭包 2018 年 1 月 11 日单词 英文 中文 closure n. 结束; Function.prototype.apply()apply() 方法调用一个函数, 其具有一个指定的this值，以及作为一个数组（或类似数组的对象）提供的参数。 Function.prototype.call()call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。 注意：该方法的作用和 apply() 方法类似，只有一个区别，就是call()方法接受的是若干个参数的列表，而apply()方法接受的是一个包含多个参数的数组。 Function.prototype.bind()bind()方法创建一个新的函数, 当被调用时，将其 this 关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列。 闭包概念 「函数」和「函数内部能访问到的变量」（也叫环境）的总和，就是一个闭包。 (三行代码中，有一个局部变量 local，有一个函数 foo，foo 里面可以访问到 local 变量。) 作用闭包常常用来「间接访问一个变量」。换句话说，「隐藏一个变量」。 argumentsarguments对象不是一个 Array 。它类似于Array，但除了长度之外没有任何Array属性。 arguments 转换成真正的数组12345var args = Array.prototype.slice.call(arguments);var args = [].slice.call(arguments);// ES2015const args = Array.from(arguments); Array.from()Array.from(arrayLike, mapFn, thisArg)方法从一个类似数组(arguments)或可迭代对象(Set,String,Map)中创建一个新的数组实例。 Array.from() 可以通过以下方式来创建数组对象： 12345var unqiue = new Set();unqiue.add(1);unqiue.add(1);unqiue.add(2);console.log(Array.from(unqiue,(item)=&gt;item+1));//[2,3] 伪数组对象（拥有一个 length 属性和若干索引属性的任意对象） 可迭代对象（可以获取对象中的元素,如 Map 和 Set 等） 参数 arrayLike 想要转换成数组的伪数组对象或可迭代对象。 mapFn (可选参数) 如果指定了该参数，新数组中的每个元素会执行该回调函数。 thisArg (可选参数) 可选参数，执行回调函数 mapFn 时 this 对象。 返回值一个新的数组实例 SetSet 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。 MDN Set 2018 年 1 月 12 日单词digit n.数字pow n.砰（爆炸） Function.lengthlength 属性指明函数的形参个数。 toString() Number 转换成二进制1num.toString(2) Number.prototype.toString([radix])方法返回指定 Number 对象的字符串表示形式。参数 radix指定要用于数字到字符串的转换的基数(从 2 到 36)。如果未指定 radix 参数，则默认值为 10。parseInt() String 转换二进制parseInt(string, radix) 函数解析一个字符串参数，并返回一个指定基数的整数 (数学系统的基础)。 toString(radix) parseInt(str,radix) 相互对应 Math.pow()Math.pow() 函数返回基数（base）的指数（exponent）次幂，即 baseexponent。 1Math.pow(2,3);//8 2的3次幂 js 浮点型精度问题1234567Math.formatFloat = function(f, digit) &#123; var m = Math.pow(10, digit); //乘10的几次幂 return parseInt(f * m, 10) / m; //转换10进制，除以10&#125;var numA = 0.1;var numB = 0.2;alert(Math.formatFloat(numA + numB, 1) === 0.3); js 取小数点后值的长度123var n = 3.143423423;console.log(n.toString().split(".")[1].length);//把number类型转换成字符串 String.prototype.split()方法使用指定的分隔符字符串将一个String对象分割成字符串数组，以将字符串分隔为子字符串，以确定每个拆分的位置。 2018 年 1 月 18 日Clipboard 剪贴板document.execCommand当一个 HTML 文档切换到设计模式 designMode 时，文档对象暴露 execCommand 方法，该方法允许运行命令来操纵可编辑区域的内容。可以实现（复制，剪切）。 123456789101112131415&lt;p&gt;点击复制后在右边textarea CTRL+V看一下&lt;/p&gt;&lt;input type="text" id="inputText" value="测试文本"/&gt;&lt;input type="button" id="btn" value="复制"/&gt;&lt;textarea rows="4"&gt;&lt;/textarea&gt;&lt;script type="text/javascript"&gt; var btn = document.getElementById('btn'); btn.addEventListener('click', function()&#123; var inputText = document.getElementById('inputText'); var currentFocus = document.activeElement; inputText.focus(); inputText.setSelectionRange(0, inputText.value.length); document.execCommand('copy', true); currentFocus.focus(); &#125;);&lt;/script&gt;]]></content>
      <tags>
        <tag>作用域</tag>
        <tag>function.length</tag>
        <tag>toString</tag>
        <tag>parseInt</tag>
        <tag>Math.pow</tag>
        <tag>float计算精度</tag>
        <tag>闭包</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[三日 2018.1.3~1.9]]></title>
    <url>%2F2018%2F01%2F09%2F2018-1-3%2F</url>
    <content type="text"><![CDATA[随机算法 Class React polyfill ajax 固定高度滚动 typeof lastIndexOf parseInt 2018 年 1 月 3 日取整算法随机数抽奖算法 1值 = Math.floor(Math.random() * 可能值的总数 + 第一个可能的值); 公式中用到了 Math.floor()方法，这是因为 Math.random()总返回一个小数值。。而用这个小数值乘以一个整数，然后再加上一个整数，最终结果仍然还是一个小数。举例来说，如果你想选择一个 1 到 10 之间的数值，可以像下面这样编写代码： 12345var num = Math.floor(Math.random() * 10 + 1);function selectFrom(lowerValue, upperValue) &#123; var choices = upperValue - lowerValue + 1; //一共有几个选项 return Math.floor(Math.random() * choices + lowerValue);&#125; cookie 大小cookie 最大4096B(4k) 一般 4095B Javascript 在 HTML 执行顺序在HTML body部分中的JavaScripts会在页面加载的时候被执行。 在HTML head部分中的JavaScripts会在被调用的时候才执行。 head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在 HTML 的 head 部分中。当你把脚本放在 head 部分中时，可以保证脚本在任何调用之前被加载。 body 部分中的脚本: 当页面被加载时执行的脚本放在 HTML 的 body 部分。放在 body 部分的脚本通常被用来生成页面的内容。 ## Prmoise then 回调参数 Prmoise then()回调参数then 有两个参数 都是回调函数 第一个回调函数，在 Promise 状态为 resolve 执行，第二个在状态为 reject 执行。catch 方法，相当于 then(null,reject)的一个变体。 循环i 第一次为 0 123for (i = 0; i &lt; 5; i++) &#123; console.log(i); //0,1,2,3,4&#125; //i第一次为0 string.match()1str.match(/\d+/g); Class类声明函数声明和类声明之间的一个重要区别是函数声明会声明提升，类声明不会。你首先需要声明你的类，然后访问它 匿名类 命令类匿名类 123456let Rectangle = class &#123; constructor(height, width) &#123; this.height = height; this.width = width; &#125;&#125;; 命名类 123456let Rectangle = class Rectangle &#123; constructor(height, weight) &#123; this.height = height; this.width = width; &#125;&#125;; 构造函数 constructor用于创建和初始化使用一个类创建的一个对象。 一个类只能拥有一个名为 “constructor”的特殊方法。 一个构造函数可以使用 super 关键字来调用一个父类的构造函数。 原型方法12345678910111213141516class Rectangle &#123; constructor(height, width) &#123; this.height = height; this.width = width; &#125; //Getter get area() &#123; return this.calcArea(); &#125; //Method calcArea() &#123; return this.height * this.width; &#125;&#125;const square = new Rectangle(1, 3);console.log(square.area); //3 Math.hypot() 函数返回它的所有参数的平方和的平方根（可以计算两点间距离（ES6）） 静态方法static关键字用来定义一个类的一个静态方法。调用静态方法不需要实例化该类，但不能通过一个类实例调用静态方法。静态方法通常用于为一个应用程序创建工具函数。 1234567891011121314151617class Point &#123; constructor(x, y) &#123; this.x = x; this.y = y; &#125; static distance(a, b) &#123; const dx = a.x - b.x; const dy = a.y - b.y; return Math.hypot(dx, dy); &#125;&#125;const p1 = new Point(5, 5);const p2 = new Point(10, 10);console.log(Point.distance(p1, p2)); 使用 extends 创建子类12345678910111213141516171819class Animal &#123; constructor(name) &#123; this.name = name; &#125; speak() &#123; console.log(this.name + " makes a noise."); &#125;&#125;class Dog extends Animal &#123; speak() &#123; console.log(this.name + " barks."); &#125;&#125;var d = new Dog("Mitzie");// 'Mitzie barks.'d.speak(); 如果子类中存在构造函数(constructor)，则需要在使用this之前首先调用super（）。 使用 super 调用超类12345678910111213141516class Cat &#123; constructor(name) &#123; this.name = name; &#125; speak() &#123; console.log(this.name + " makes a noise."); &#125;&#125;class Lion extends Cat &#123; speak() &#123; super.speak(); console.log(this.name + " roars."); &#125;&#125; 2018 年 1 月 5 日ReactReact 生命周期componentDidMount,组件已经安装完毕。componentWillUnMount,组将将要卸载。 state更新可能是异步的使用回调函数更改state 123this.setState((prevState, props)=&gt;&#123; counter:prevState.counter + props.increment&#125;) 定时器 setInterval()setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval()方法会不停地调用函数，直到clearInterval() 被调用或窗口被关闭。 1234let show = ()=&gt;&#123;console.log("hello")&#125;var timer = setInterval("show()",1000)//使用定时器调用函数（定义即开始运行定时器）var timer2 = setInterval(()=&gt;&#123;console.log("666"),1000&#125;)clearInterval(timer)//清除定时器 2018年1月8日node答 编程题 输入输出名称解释 概念 解释 stdin 标准输入 （standard input） stdout 标准输出（standard output） segment vi. 分割 （segmentfalut 分割问题） scheme 方案 padding 填充、补充 PolyfillPolyfill或者Polyfiller，是英国Web开发者 Remy Sharp 在咖啡店蹲坑的时候拍脑袋造出来的。当时他想用一个词来形容”用JavaScript（或者Flash之类的什么鬼）来实现一些浏览器不支持的原生API”。 Polyfill的准确意思为：用于实现浏览器并不支持的原生API的代码。 例如，querySelectorAll是很多现代浏览器都支持的原生Web API，但是有些古老的浏览器并不支持，那么假设有人写了库，只要用了这个库， 你就可以在古老的浏览器里面使用document.querySelectorAll，使用方法跟现代浏览器原生API无异。那么这个库就可以称为Polyfill或者Polyfiller。 AJAXAJAX只是一个前端技术，不是新语言。它是利用浏览器提供操作http的接口（XMLHttpRequest或者ActiveXObject）来操作HTTP以达到异步的效果。 HTTP事务一个http事务由一条(从客户端发往服务器的)请求命令和一个(从服务器发回客户端的)响应结果组成。这种通信时通过名为HTTP message的格式化数据块进行的。只有当请求和响应都成功时此http事务才算成功，也就是这条http才算成功。只有当其中任意一个命令(请求或者响应)失败，那么这个http就算失败。一个http就是一个http事务，且http事务完成之后此http不可在复用。 http报文请求或者响应的内容就叫做报文。http报文是由一行一行的简单字符串组成的。http报文都是纯文本，不是二进制代码，所以人们可以很方便地对其进行读写。http报文分为三部分： 起始行 报文的第一行就是起始行，在请求报文中用来说明做些什么，在响应报文中说明出现了什么情况。 首部字段 起始行后面有零个或多个首部字段。每个首部字段都包含了一个名字和一个值，首部分为5种类型:通用首部、请求首部、响应首部、实体首部、扩展首部 主体 报文主体包含了所有类型的数据。请求主体中报错了要发送给web服务器的数据；响应主体中装载了要返回给客户端的数据。起始行和首部字段都是结构化的文本形式的，而主体可以包含任意的二进制数据。当然，主体中也可以包含文本。 HTTP 方法GET 从服务器向客户端发送命名资源，主要是传给服务器一些参数来获取服务器上指定的资源 没有请求主体 发送参数只能将参数格式化为querystring的格式拼接在RequestURI后 可以被浏览器缓存 对发送的数据有大小限制 POST 将客户端数据发送到一个服务器网关程序 不会被浏览器缓存 没有发送数据的大小限制 DELETE 从服务器上删除命名资源 服务器处理成功返回的状态码为202 HEAD 仅发送命名资源中的http首部 服务器只返回响应起始行和首部，不会返回响应主体 该方法既没有请求主体也没有响应主体 PUT 将来自客户端的数据存储到一个服务器资源中去 和POST方法特点类似 此方法有幂等性，而POST没有 OPTIONS 决定可以从服务器上执行哪些方法 GET与POST的区别： URL长度限制 浏览器对URL有大小限制，chrome 8k firefox 7k ie 2k 资源大小限制：get方法限制大小，get是将数据直接拼接在URL后端query部分，而浏览器是对URL有长度限制的，所以get有大小限制。post不限制大小。因为post是将数据放到请求的主体里，而主体是不限制大小的，所以post没有大小限制。 功能 get主要是用来从服务器拉取数据，而post主要是用来将数据发送到服务器。 安全 get可以看到发送给服务器的数据，而post不会被看到，因为post把数据放到主体里了。 HTTP 状态码 200 OK 文档正确返回 301 Redirect 永久重定向。一直从其他地方去获取资源 302 Redirect 临时重定向。临时到其他地方去获取资源 303 see other、307 Temporary Redirect 将客服端重定向到一个负载不大的服务器上，用于负载均衡和服务器失联 404 Not Found 无法找到这个资源 500 Internal Server Error 服务器错误 div高度固定，实现超出高度实现滚动条123456#box &#123; background:red; width:200px; height:100px; overflow-x:hidden;&#125; 限制高度，上下滚动 overflow-x:hidden;左右滚动 其他encodeURIComponent()encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。 12encodeURIComponent("name=pizza&amp;age=18&amp;address=%E5%8C%97%E4%BA%AC")"name%3Dpizza%26age%3D18%26address%3D%25E5%258C%2597%25E4%25BA%25AC" 2018年1月9日单词 英文 中文 accumulator 累加器 ## typoef 可以判断String,Undefined,Boolean,Function,Object（null是空object,Array是object） ## html元素优先级 帧元素 &gt; 表单元素 &gt; 非表单元素 ## iframe 适用场景 iframe可用在以下几个场景中： 1. 典型系统结构，左侧是功能树，右侧就是一些常见的table或者表单之类的。为了每一个功能，单独分离出来，采用iframe。 2. ajax上传文件。 3. 加载别的网站内容，例如google广告，网站流量分析。 4. 在上传图片时，不用flash实现无刷新。 5. 跨域访问的时候可以用到iframe，使用iframe请求不同域名下的资源。 ## Array slice(start,end) 方法可从已有的数组中返回选定的元素。 实现深拷贝 123var arr = [1,2,3,4];var arr2 = arr.slice(0);//参数 start endvar arr3 = arr.concat(); splice(index,howmanyDel,item1,.....,itemX)方法向/从数组中添加/删除项目，然后返回被删除的项目。 lastIndexOf() indexOf()Array.prototype.indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。Array.prototype.lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。String.prototype.lastIndexOf(searchvalue,fromindex) （检索字符串，开始索引位置，省略则从最后一个字符串开始检索）方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。 1234567891011//* 数组中重复的元素function duplicates(arr) &#123; var result = []; arr.forEach(function(elem)&#123; if(arr.indexOf(elem) !=arr.lastIndexOf(elem) &amp;&amp; result.indexOf(elem) == -1)&#123; //首次出现位置 不等于 最后出现位置 ，并且结果里不重复 result.push(elem); &#125; &#125;); return result;&#125; parseInt()parseInt() 函数可解析一个字符串，并返回一个整数。 1parseInt(string, radix) 参数 描述 string 必需。要被解析的字符串。 radix 可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。 12parseInt('0x12')//18parseInt('0x12',10);//0]]></content>
      <tags>
        <tag>parseInt</tag>
        <tag>随机算法</tag>
        <tag>Class</tag>
        <tag>React</tag>
        <tag>polyfillajax</tag>
        <tag>固定高度滚动，typeof</tag>
        <tag>lastIndexOf</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[五日 2017.12.20~12.25]]></title>
    <url>%2F2017%2F12%2F25%2F2017-12-20%2F</url>
    <content type="text"><![CDATA[高阶函数 git &lt;a&gt;锚点 深浅拷贝 js原生选择器 2017 年 12 月 20 日高阶函数概念在数学和计算机科学中，高阶函数是至少满足下列一个条件的函数: 接受一个或多个函数作为输入 输出一个函数 1234567var Moqi = function(p1) &#123; this.add = function(p2) &#123; return p1 + " " + p2; &#125;; return add;&#125;;console.log(Moqi("Hello")("World")); 盒子模型怪异模式 box-sizing:border-box怪异模式相当于将盒子的大小固定好，再将内容装入盒子，盒子大小并不会被 padding 所撑开标准模式 box-sizing:content-box标准模式会被设置的 padding 撑开 photoshop 切图格式处理不需要透明图片 png8半透明 png24png8 压缩率比 png24 高，png8 图片比较小 Object.assign()Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。包括对象和数组 123var obj = &#123; a: 1 &#125;;var copy = Object.assign(&#123;&#125;, obj);console.log(copy); // &#123; a: 1 &#125; 网页页面刷新location.reload() __proto__（隐式原型）与prototype（显式原型）每一个函数在创建之后都会拥有一个名为prototype的属性，这个属性指向函数的原型对象。Javascript 中任意对象都有一个内置属性，大多数浏览器支持通过__proto__来访问（ES5 新增访问这个内置属性的标准 Getf 方法Object.getPrototypeOf()） NoteObject.prototype对象例外，它的__proto__值为 null隐式原型指向创建这个对象的函数(constructor)的prototype作用 显示原型用来实现基于原型的继承与属性的共享。 隐式原型的作用：构成原型链，同样用于实现基于原型的继承。举个例子，当我们访问 obj 这个对象中的 x 属性时，如果在 obj 中找不到，那么就会沿着__proto__依次查找。git stash 储藏 stash n. 隐（贮）藏物; （旧） 藏身处;git status 储存代码git status list 储存列表git stash apply name 恢复存储 ## 正则表达式 B在正则表达式中有 3 种类型的括号：方括号[和花括号{。方括号[内是需要匹配的字符，花括号{内是指定匹配字符的数量。圆括号( 则是用来分组的。 C插入符号 ^ 表示正则式的开始。 D美元符号$表示正则式的结束。 正则表达式 在线测试 omit vt 省略; 遗漏; 删掉; 未（做）; 2017 年 12 月 21 日 22 日原型链引用类型（数组，对象，函数）都有隐式原型（__proto__）指向显示原型（prototype）当获取一个对象的属性时，会找到它的隐式原型（即prototype） line-heightline-height 的值为数字时，表示的相对于 font-size 的倍数 cssmax-width 替代 width 可以使浏览器更好地处理小窗口的情况。视口低于元素宽度没有滚动条box-sizing: border-box;padding margin 不会拓展 div 大小 IE8+positionstatic 默认值fixed 固定布局 HTML 标签的 name 属性 锚点123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657&lt;html&gt;&lt;body&gt;&lt;h1&gt;HTML 教程目录&lt;/h1&gt;&lt;ul&gt;&lt;li&gt;&lt;a href="#C1"&gt;第一章&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#C2"&gt;第二章&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#C3"&gt;第三章&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#C4"&gt;第四章&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#C5"&gt;第五章&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#C6"&gt;第六章&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#C7"&gt;第七章&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#C8"&gt;第八章&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h2&gt;&lt;a name="C1"&gt;第一章&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;本章讲解的内容是 ... ...&lt;/p&gt;&lt;h2&gt;&lt;a name="C2"&gt;第二章&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;本章讲解的内容是 ... ...&lt;/p&gt;&lt;h2&gt;&lt;a name="C3"&gt;第三章&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;本章讲解的内容是 ... ...&lt;/p&gt;&lt;h2&gt;&lt;a name="C4"&gt;第四章&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;本章讲解的内容是 ... ...&lt;/p&gt;&lt;h2&gt;&lt;a name="C5"&gt;第五章&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;本章讲解的内容是 ... ...&lt;/p&gt;&lt;h2&gt;&lt;a name="C6"&gt;第六章&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;本章讲解的内容是 ... ...&lt;/p&gt;&lt;h2&gt;&lt;a name="C7"&gt;第七章&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;本章讲解的内容是 ... ...&lt;/p&gt;&lt;h2&gt;&lt;a name="C8"&gt;第八章&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;本章讲解的内容是 ... ...&lt;/p&gt;&lt;p&gt;... ... ... ... ... ...&lt;/p&gt;&lt;p&gt;... ... ... ... ... ...&lt;/p&gt;&lt;p&gt;... ... ... ... ... ...&lt;/p&gt;&lt;p&gt;... ... ... ... ... ...&lt;/p&gt;&lt;p&gt;... ... ... ... ... ...&lt;/p&gt;&lt;p&gt;... ... ... ... ... ...&lt;/p&gt;&lt;p&gt;... ... ... ... ... ...&lt;/p&gt;&lt;p&gt;... ... ... ... ... ...&lt;/p&gt;&lt;p&gt;... ... ... ... ... ...&lt;/p&gt;&lt;p&gt;... ... ... ... ... ...&lt;/p&gt;&lt;p&gt;... ... ... ... ... ...&lt;/p&gt;&lt;p&gt;... ... ... ... ... ...&lt;/p&gt;&lt;p&gt;... ... ... ... ... ...&lt;/p&gt;&lt;p&gt;... ... ... ... ... ...&lt;/p&gt;&lt;/body&gt;&lt;/html&gt; HTML 5 标签 标签定义带有记号的文本。请在需要突出显示文本时使用 标签。 HTML 5 标签 标签定义运行中的进度（进程）。 123&lt;progress&gt;&lt;span id="objprogress"&gt;85&lt;/span&gt;%&lt;/progress&gt; HTML 5 标签 标签定义日期或时间，或者两者。 1234567&lt;p&gt;我们在每天早上 &lt;time&gt;9:00&lt;/time&gt; 开始营业。&lt;/p&gt;&lt;p&gt;我在 &lt;time datetime="2008-02-14"&gt;情人节&lt;/time&gt; 有个约会。&lt;/p&gt; 2017 年 12 月 25 日 2017 年 12 月 26 日JavaScript slice(start,end) 方法slice() 方法可从已有的数组中返回选定的元素。 Array 浅拷贝 深拷贝在 js 中，数组和对象的复制如果使用=号来进行复制，那只是浅拷贝。 for 循环实现数组的深拷贝 slice 方法实现数组的深拷贝将原数组中抽离部分出来形成一个新数组。我们只要设置为抽离全部，即可完成数组的深拷贝。 concat 方法实现数组的深拷贝只要连接它自己，即可完成数组的深拷贝Object 深拷贝 万能的 for 循环实现对象的深拷贝 转换成 json 再转换成对象实现对象的深拷贝 123456var obj = &#123; name: 'FungLeo', sex: 'man', old: '18'&#125;var obj2 = JSON.parse(JSON.stringify(obj)) doucment.querySelectorh5 实现类似 jquery 选择器的方法，返回一个元素。document.querySelectorAll返回所有符合要求的元素。 12&lt;p&gt;hello world&lt;/p&gt;&lt;p&gt;hello world!&lt;/p&gt; 12var p = document.querySelector("p");p.setAttribute("style","color:red") 1234var p = document.querySelectorAll("p");for(let i=0;i&lt;p.length;i++)&#123; p[i].setAttribute("style","color:red")&#125; JS 原生快速清除修改 dom 样式1234ele.style.color = 'blue';ele.setAttribute('style','color:blue');ele.cssText = 'color:red';ele.cssText = '';]]></content>
      <tags>
        <tag>git</tag>
        <tag>高阶函数</tag>
        <tag>&lt;a&gt;锚点</tag>
        <tag>深浅拷贝</tag>
        <tag>js原生选择器</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[四日 2017.12.11~12.15]]></title>
    <url>%2F2017%2F12%2F11%2F2017-12-11%2F</url>
    <content type="text"><![CDATA[RegExp angular js异步加载 2017 年 12 月 11 日function 与感叹号123(function a() &#123; alert("hello");&#125;)(); 123!(function a() &#123; alert("hello");&#125;)(); 一个函数声明语句变成了一个表达式 定义全局方法12345678!(function a(global) &#123; console.log(global); //window === this global.sayHello = function() &#123; console.log("hello"); &#125;;&#125;)(this);sayHello(); // hello 在全局下，this 永远指向的都是 window ## CSS3 resize 属性规定可以由用户调整 div 元素的大小： 12345div&#123;resize:both;overflow:auto;&#125; 值 描述 | |none | 用户无法调整元素的尺寸。||both | 用户可调整元素的高度和宽度。||horizontal |用户可调整元素的宽度。||vertical |用户可调整元素的高度。| CSS white-space 属性规定段落中的文本不进行换行 window.requestAnimationFramewindow.requestAnimationFrame() 方法告诉浏览器您希望执行动画并请求浏览器调用指定的函数在下一次重绘之前更新动画。 JS 事件捕获阶段 -&gt; 目标阶段 -&gt; 冒泡阶段 addEventListener第三个参数 useCapture 为false 只监听冒泡阶段 这是因为 IE 浏览器不支持在捕获阶段监听事件，为了统一而设置的，毕竟 IE 浏览器的份额是不可忽略的。 2017 年 12 月 12 日Number()1234Number(null);//0Number(undefined);//NaN 单例模式单例模式是一种常用的软件设计模式。在它的核心结构中只包含一个被称为单例的特殊类。通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问，从而方便对实例个数的控制并节约系统资源。如果希望在系统中某个类的对象只能存在一个，单例模式是最好的解决方案。 单例模式的要点有三个；一是某个类只能有一个实例；二是它必须自行创建这个实例；三是它必须自行向整个系统提供这个实例。 RegExp \d 匹配一个数字 \w 匹配一个字母或者数字 . 匹配任意字符 * 任意个字符（包括 0 个） + 表示至少一个字符 ? 表示 0 个或 1 个字符 {n} {n,m} n 个字符；表示 n-m 个字符 \d{3} 匹配 3 个数字 \s+ 匹配至少一个空格 A|B A 或者 B 进阶| | || ————– | ——————— || [0-9a-zA-Z_] | 匹配一个数字、字母或者下划线 || [0-9a-zA-Z_]+ | 至少由一个数字、字母或者下划线组成的字符串 | 写法 12var re1 = /ABC\-001/;var re2 = new RegExp("ABC\\-001"); //转义 123var re = /^\d&#123;3&#125;\-\d&#123;3,8&#125;$/;console.log(re.test("010-12345")); //trueconsole.log("a b c".split(/\s+/)); //识别连续的空格[ 'a', 'b', 'c' ] exec() 方法用于检索字符串中的正则表达式的匹配。 在 HTML body 部分中的 JavaScripts 会在页面加载的时候被执行。 在 HTML head 部分中的 JavaScripts 会在被调用的时候才执行 2017 年 12 月 14 日ng-keyupng-keyup 指令用于告诉 AngularJS 在指定 HTML 元素上按键松开时需要的操作。ng-keyup 指令不会覆盖元素的原生 onkeyup 事件, 事件触发时，ng-keyup 表达式与原生的 onkeyup 事件将都会执行。 ng-blurng-blur 指令用于告诉 AngularJS HTML 元素在失去焦点时需要执行的表达式。例：输入框失去焦点 angular.extendangular.extends()方法的第一个参数是要被扩展的对象，后面可以传入一个或多个对象。可以把一个或多个对象中的方法和属性扩展到一个目的对象中，使得这个对象拥有其他对象相同的方法和属性，如下图所示。 angular.equals比较两个对象或两个值是否相等。支持值类型，正则表达式，数组和对象。 格式化 jsonJSON.parse(JSON.stringify($scope.editMemberRight)) $compile将 HTML 字符串或 DOM 编译成模板并生成模板函数，然后可以使用该函数将范围和模板链接在一起。title: 2017 年 12 月 15 日tags: 每日总结notebook: 唯品会 2017 年 12 月 15 日js 异步加载123456var s = document.createElement("script");s.type = "text/javascript";s.async = true;s.src = "http://yourdomain.com/script.js";var x = document.getElementByTagName("script")[0];x.parentNode.insertBefore(s, x); 包裹 js 代码将 js 代码包裹在匿名函数中并立即执行的方式是为了保护变量名泄露到外部可见，这是很常见的方式，尤其是在 js 库中被普遍使用。 12345678910(function() &#123; var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true; ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s);&#125;)(); async deferdefer1&lt;script src="file.js" defer&gt;&lt;/script&gt; defer 属性声明这个脚本中将不会有 document.write 或 dom 修改。 浏览器将会并行下载 file.js 和其它有 defer 属性的 script，而不会阻塞页面后续处理。 defer 属性在 IE 4.0 中就实现了，超过 13 年了！Firefox 从 3.5 开始支持 defer 属性 。注：所有的 defer 脚本保证是按顺序依次执行的。 async1&lt;script src="file.js" async&gt;&lt;/script&gt; async 属性是HTML5 新增的。作用和 defer 类似，但是它将在下载后尽快执行，不能保证脚本会按顺序执行。它们将在 onload 事件之前完成。Firefox 3.6、Opera 10.5、IE 9 和 最新的 Chrome 和 Safari 都支持 async 属性。可以同时使用 async 和 defer，这样 IE 4 之后的所有 IE 都支持异步加载。 defer 不包含 dom 操作，并行下载，按顺序执行async h5 新增，下载后尽快执行，不一定按顺序执行 vw相对于视口的宽度。视口被均分为 100 单位的 vw 123h1 &#123; font-size: 8vw;&#125; 如果视口的宽度是 200mm，那么上述代码中 h1 元素的字号将为 16mm，即(8x200)/100]]></content>
      <tags>
        <tag>RegExp</tag>
        <tag>angular</tag>
        <tag>js异步加载</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[四日 2017.11.20~11.24]]></title>
    <url>%2F2017%2F11%2F24%2F2017-11-24%2F</url>
    <content type="text"><![CDATA[cookie git 2017年11月20日 2017年11月22日cookieCookie 是一个请求首部，其中含有先前由服务器通过 Set-Cookie 首部投放并存储到客户端的 HTTP cookies。 语法123Cookie: &lt;cookie-list&gt;Cookie: name=valueCookie: name=value; name2=value2; name3=value3 例子1Cookie: PHPSESSID=298zf09hf012fh2; csrftoken=u32t4o3tb3gg43; _gat=1; Set-Cookie响应首部 Set-Cookie 被用来由服务器端向客户端发送 cookie。 12345678910111213Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt; Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Expires=&lt;date&gt;Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Max-Age=&lt;non-zero-digit&gt;Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Domain=&lt;domain-value&gt;Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Path=&lt;path-value&gt;Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; SecureSet-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; HttpOnlySet-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; SameSite=StrictSet-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; SameSite=Lax// Multiple directives are also possible, for example:Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Domain=&lt;domain-value&gt;; Secure; HttpOnly 1234&lt;img src="http://via.placeholder.com/350x150" usemap="myMap" alt=""&gt;&lt;map name="myMap"&gt; &lt;area shape="rect" coords="0,0,150,150" href="javascript:;" alt=""&gt;&lt;/map&gt; rect coords 左上(x,y) 右下(x,y) usemap 属性与 map 元素的 name 或 id 属性相关联，以建立 &lt;img&gt; 与 &lt;map&gt; 之间的关系。 git fetch默认情况下，git fetch取回所有分支的更新。如果只想取回特定分支的更新，可以指定分支名,如下所示git fetch origin master git merge合并分支fixes和enhancements在当前分支的顶部，使它们合并： 1$ git merge fixes enhancements &lt;small&gt; 标签将旁注 (side comments) 呈现为小型文本。 免责声明、注意事项、法律限制或版权声明的特征通常都是小型文本。小型文本有时也用于新闻来源、许可要求 2017年11月24日jQuery 事件 - mouseenter() 方法当鼠标指针穿过元素时，会发生 mouseenter 事件。 注释：与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。请看下面例子的演示。 HTML 标签的 action 属性必需的 action 属性规定当提交表单时，向何处发送表单数据。 HTML 5 name 属性name 属性规定表单的名称。 HTML 标签的 name 属性name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。 data-* 自定义数据属性 1&lt;div id="user" data-id="1234567890" data-name="feiwen" data-date-of-birth&gt;码头&lt;/div&gt; 12345var el = document.querySelector('#user');console.log(el.id); // 'user'console.log(el.dataset);//一个DOMStringMapconsole.log(el.dataset.id); // '1234567890'console.log(el.dataset.name); // '愚人码头' Arguments 对象arguments 是一个对应于传递给函数的参数的类数组对象。 arguments对象是所有（非箭头）函数中都可用的局部变量。]]></content>
      <tags>
        <tag>git</tag>
        <tag>cookie</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[三日 2017.11.15~2017.11.17]]></title>
    <url>%2F2017%2F11%2F17%2F2017-11-16%2F</url>
    <content type="text"><![CDATA[css长文本处理 angualr.js 2017 年 11 月 15 日csswhite-space: nowrap 不换行 text-overflow:ellipsis (clip裁剪)显示省略符号来代表被修剪的文本。 word-break: normal|break-all|keep-all; 值 描述 normal 使用浏览器默认的换行规则。 break-all 允许在单词内换行。 keep-all 只能在半角空格或连字符处换行。 visibility:hidden 元素是不可见的。 即使不可见的元素也会占据页面上的空间。请使用 “display” 属性来创建不占据页面空间的不可见元素。 定时器 123$interval(function() &#123; $scope.serverTime += 1000;&#125;, 1000); 延迟接口 | Deferred API $q.defer()可以构建一个新的 deffered 实例。 2017 年 11 月 16 日angulartable-layout automatic 默认。列宽度由单元格内容设定。 fixed 列宽由表格宽度和列宽度设定。 inherit 规定应该从父元素继承 table-layout 属性的值。 1&lt;form name="form" /&gt; form 会生成一个$scope.form里边的元素 $error有报错会生成对象内容因报错而异 $dirty 用户是否在表单输入过 dirty输入过 $pristine没输入过 定义子 scope 1var subScope scope.$new(true) true表示这个子 scope 是个独立作用域，不从夫作用域继承 ink 指令初始化时自动执行 1link: function(scope,element,attrs,'其他依赖')&#123;&#125; $compile 编译 html 字符串或 dom 对象 12var hint = $compile('&lt;ul ng-if="$error"&gt;&#123;&#123;errors()&#125;&#125;&lt;/ul&gt;')(scope);element.after(hint); require值是另一个指令的名称，实际上引用的是指令控制器的实例 angualr 初始化的时候会先找到依赖的控制器添加进来 ng-repeat=&quot;(name, wrong) in errors()&quot; 1$scope.arr = [&#123; name: "zjc", age: 99 &#125;, &#123; name: "xdc", age: 88 &#125;]; 1234567&lt;ul&gt; &lt;li ng-repeat="(index,content) in arr"&gt; &lt;span&gt;&#123;&#123;index&#125;&#125;&lt;/span&gt; &lt;span&gt;&#123;&#123;content.name&#125;&#125;&lt;/span&gt; &lt;span&gt;&#123;&#123;content.age&#125;&#125;&lt;/span&gt; &lt;/li&gt; &lt;/ul&gt; 定义常量 1234angular.moudle('app').constant("Errors",&#123; email:'不合法'， reuqired:'非空'&#125;) 和过滤联用 12345angular.module("app").filter("error", function(Errors) &#123; return function(name) &#123; return Errors[name]; &#125;;&#125;); $eval是一个作用域 scope 中的方法，它将会在当前作用域中执行一个表达式并返回结果 123scope.a = 1;scope.b = 2;scope.$eval("a+b"); // 3 2017 年 11 月 17 日angular.forEach ng-if=&quot;false&quot; 控制显示隐藏 angular.forEach() 说明 12345678910var values = &#123; name: "misko", gender: "male" &#125;;var log = [];angular.forEach( values, function(value, key) &#123; this.push(key + " " + value); &#125;, log);console.log(log); //["name misko", "gender male"] 页面数据 1234&lt;div id="d"&gt; &lt;p&gt;Content&lt;/p&gt; &lt;p&gt;Further Elaborated&lt;/p&gt;&lt;/div&gt; outerHTML 设置或获取对象及其内容的 HTML 形式 1234&lt;div id="d"&gt; &lt;p&gt;Content&lt;/p&gt; &lt;p&gt;Further Elaborated&lt;/p&gt;&lt;/div&gt; innerHTML 设置或获取位于对象起始和结束标签内的 HTML 12&lt;p&gt;Content&lt;/p&gt;&lt;p&gt;Further Elaborated&lt;/p&gt; 指定优先级 directive priority MVW Model (scope) View Whatever &lt;form&gt; 标签用于为用户输入创建 HTML 表单。 angular 服务类型常量 constant 变量 value 服务 service 声明一个类，等待 angular 把它 new 出来，然后保存这个实例，供它注入，（类似构造函数） 12345678910//定义app.service('greeting2',function()&#123; this.sayHello = function(name)&#123; return 'Hello' + name; &#125;&#125;)//使用app.controller("myForm",["$scope","greeting2",function($scope, greeting2)&#123; $scope.friend = greeting2.sayHello('xiaoming');&#125; 工厂 factory 与服务不同，它不会被 new 出来，angular 会调用这个函数，获得返回值，保存返回值，供它注入。（只产出产品，我们只是到处使用这个产品） 12345678//定义app.factory("greeting3",function()&#123; return "hello world"&#125;)//使用app.controller("myForm",["$scope","greeting3",function($scope, greeting3)&#123; $scope.friend = greeting3;&#125; 供应商 provider 工厂只负责生产产品，规格不受控制，而供应商更加灵活可以对规格进行配置，以便获得定制化的产品。 1234567891011121314151617181920//定义app.provider('greeting', function()&#123; var _name = 'world'; this.setName = function(name)&#123; _name = name; &#125; this.$get = function()&#123; return 'Hello'+ _name; &#125;&#125;);//使用app.controller("myCtrl", [ "$scope",'greeting', function($scope,greeting) &#123; $scope.hello = greeting; &#125;; //进行参数配置 app.config(function(greetingProvider)&#123; greetingProvider.setName('wolf');&#125;) 如果有多个ng-app 需要采用手动angualr.bootstrap启动]]></content>
      <tags>
        <tag>css</tag>
        <tag>angualr.js</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[一日 2017.10.16]]></title>
    <url>%2F2017%2F10%2F16%2F2017-10-16%2F</url>
    <content type="text"><![CDATA[刷题 Object 2017.10.16刷题 下列哪个不属于id与class之间的区别一个元素只能有一个id属性值，却可以拥有多个class属性值 CSS 样式，下面哪一个能够用于边距的单位？pt(point，磅)：是一个物理长度单位，指的是72分之一英寸。px(pixel，像素)：是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，Apple系统默认是72dpi。em(相对长度单位，相对于当前对象内文本的字体尺寸)：是一个相对长度单位，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.8em, 1.2em,2em等。通常1em=16px。 W3C标准定义的阻止事件向父容器传递：e.stopPropagation DOM中的事件对象：（符合W3C标准） preventDefault() 取消事件默认行为 stopImmediatePropagation() 取消事件冒泡同时阻止当前节点上的事件处理程序被调用。 stopPropagation() 取消事件冒泡对当前节点无影响。 IE中的事件对象： cancelBubble() 取消事件冒泡 returnValue() 取消事件默认行为 下面有关CSS中link和@import的区别，描述错误的是？ @import url（）机制是不同于link的，link是在加载页面前把css加载完毕，而@import url（）则是读取完文件后在加载，所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)。 @import 是css2里面的，所以古老的ie5不支持。 当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。 link除了能加载css外还能定义RSS，定义rel连接属性，@import只能加载css 以下关于History对象的属性或方法描述正确的是（ ）length 返回浏览器历史列表中的URL数量back() 加载 history 列表中的前一个URLforward() 加载 history 列表中的下一个URLgo() 加载history列表中的某个具体页面。 在jquery中想要找到所有元素的同辈元素，下面哪一个是可以实现的？siblings([expr]) 12345678var obj = &#123; a: 1, b: function() &#123; alert(this.a) &#125;&#125;;var fun = obj.b;fun(); 弹出undefined虽然fun是obj.b的一个引用，但是实际上，它引用的是b函数本身，因此此时的fun()其实 是一个不带任何修饰的函数调用，所以this指向window。 Object 判断对象中是否拥有一个值1234567const a = &#123; name: 'zjc', age: 18,&#125;console.log('name' in a); //trueconsole.log(a.hasOwnProperty('age'));//true 所有JavaScript对象都有hasOwnProperty，返回一个声明对象是否具有特定属性的布尔值。 删除你对象中的属性 1delete a['age'] 返回一个包含给指定对象所有属性的数组（求一个对象的长度） 1console.log(Object.keys(a));//[ 'name', 'age' ] hasOwnProperty() 方法会返回一个布尔值，指示对象是否具有指定的属性作为自身（不继承）属性。 12345678function size(obj) &#123; let sum = 0 for (let key in obj) &#123; if (obj.hasOwnProperty(key)) sum++; &#125; console.log(sum)&#125; 如果不用hasOwnProperty()过滤，会把非如prototype之类定义的也算进去。 1234567891011121314151617const a = &#123; name: 'zjc', age: 18,&#125;a.__proto__.hello = 66;function size(obj) &#123; let sum = 0 for (let key in obj) &#123; if (obj.hasOwnProperty(key)) sum++; &#125; console.log(sum) //2&#125;size(a) JavaScript toFixed() 方法toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。 块级元素：div hr h1-h6 ul ol li form p pre blokequote menu table fieldset address]]></content>
  </entry>
  <entry>
    <title><![CDATA[一日 2017-10-15]]></title>
    <url>%2F2017%2F10%2F15%2F2017-10-15%2F</url>
    <content type="text"><![CDATA[递归 进制转换 Linux 删除命令 刷题 2017.10.15递归程序调用自身的编程技巧称为递归（ recursion）。递归做为一种算法在程序设计语言中广泛应用。 一个过程或函数在其定义或说明中有直接或间接调用自身的一种方法，它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解，递归策略只需少量的程序就可描述出解题过程所需要的多次重复计算，大大地减少了程序的代码量。递归的能力在于用有限的语句来定义对象的无限集合。一般来说，递归需要有边界条件、递归前进段和递归返回段。当边界条件不满足时，递归前进；当边界条件满足时，递归返回。 for of 循环遍历12345const numbers = [1,2,3,4,5,6,7]lfor (let n of numbers) &#123; console.log((n % 2 ==0) ? 'even' : 'odd');&#125; 迭代器 1234const numbers = [1, 2, 3, 4, 5, 6, 7]let iterator = numbers[Symbol.iterator]();console.log(iterator.next().value) //1 find方法返回第一个满足条件的值 123const a = [1, 2, 3, 'world', 5];console.log(a.find((item) =&gt; typeof item === 'number')) //1 数组里是否存在某个元素 123const a = [1, 2, 3, 'world', 5];console.log(a.includes('world')) //true 数组转换成字符串 1234const a = [1, 2, 3, 'world', 5];console.log(a.toString()) //​​​​​默认 1,2,3,world,5​​​​​ at ​​​a.toString()​​​ console.log(a.join('')) //​​​​​自定义 123world5 今日头条 刷题 页面有一个按钮button id为 button1，通过原生的js 设置背景色为红色？document.getElementById(&quot;button1&quot;).style.backgroundColor=&quot;red&quot; 页面有一个按钮button id为 button1，通过原生的js如何禁用？document.getElementById(&quot;button1&quot;).disabled = true;document.getElementById(&quot;button1&quot;).setAttribute(“disabled”,”true”); 下列排序算法不稳定的有?希尔排序 堆排序 快速排序 选择排序 下列关于操作系统进程与线程的区别正确的是：进程是资源分配的基本单位线程是资源调度的基本单位 网络传输http使用tcp作为运输层协议。Https的端口号是443TCP注重数据安全性，UDP注重数据传输快传输层提供端到端的可靠报文传递和错误恢复 现在有两堆石子,小今与小条玩游戏,2个人都足够聪明,两个人规定:每次每人只能从其中一堆中取走1个或2个或3个石子,最后将石子全部取完的人胜利.现在两堆石子的个数为8和9,请问如何安排才能让小今必胜?智力题想让小今赢，必须把小条逼到在只剩4个石子时选择取走1个或2个或3个石子，这样无论小条取走多少，小今都能胜利。所以小今一定要把石子堆的数量控制在4的倍数，当前是8+9个，小今先从9个中取1个，剩下两个8个的石子堆，无论小条取1/2/3个，小今总能把总量控制在4的倍数，所以让小今先取必胜！ 置换元素（replaced element）主要是指 img, input, textarea, select, object 等这类默认就有 CSS 格式化外表范围的元素。进而可知，非置换元素（non-replaced element）就是除了 img, input, textarea, select, object 等置换元素以外的元素。 在HTML中，（ ）可以在网页上通过链接直接打开邮件客户端发送邮件。&lt; a href=”mailto:ming.zhou@nowcoder.com” &gt;发送邮件&lt; /a &gt; h5 新标签 HTML 标签 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。123456&lt;input id="myCar" list="cars" /&gt;&lt;datalist id="cars"&gt; &lt;option value="BMW"&gt; &lt;option value="Ford"&gt; &lt;option value="Volvo"&gt;&lt;/datalist&gt; 执行计算然后在 元素中显示结果： 通过 标签把相关的选项组合在一起： HTML 标签1234567&lt;form&gt; &lt;fieldset&gt; &lt;legend&gt;health information&lt;/legend&gt; height: &lt;input type="text" /&gt; weight: &lt;input type="text" /&gt; &lt;/fieldset&gt;&lt;/form&gt; Linux 删除文件rm -rf 删除文件夹rm -f 删除文件 十进制转化成任意进制Math.floor() 方法执行的是向下取整计算，它返回的是小于或等于函数参数，并且与之最接近的整数。 123456789101112131415161718function myDivide(num, base) &#123; let arr = [], temp, result = '', digits = '0123456789ABCDEF'; while (num &gt; 0) &#123; temp = Math.floor(num % base); arr.push(temp); num = Math.floor(num / base); &#125; while (arr.length &gt; 0) &#123; result += digits[arr.pop()]; &#125; return result;&#125;]]></content>
      <tags>
        <tag>递归</tag>
        <tag>进制转换</tag>
        <tag>Linux</tag>
        <tag>刷题</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[一日 2017-10-13]]></title>
    <url>%2F2017%2F10%2F13%2F2017-10-13%2F</url>
    <content type="text"><![CDATA[刷题遇到的一些知识点 2017.10.13严格模式 use strict 禁止使用with 禁止删除变量 arguments不再追踪参数变化，也就是说改变追钟的值，argument不会变 类型转换JS在做==运算是会将操作数转换为NUmber类型之后再操作&#39;&#39; false 0 [] 都能转换为数字类型0{} 转换不了 转换后为NaN，NaN做任何运算返回都是false setTimeout thissetTimeout中所执行函数中的this，永远指向window！！注意是要延迟执行的函数中的this哦！！ 数据类型&quot;a&quot; - 1 NaN1/0 Infinity 123typeof NaN //numbertypeof Infinity//numbertypeof new Number(1) //object SVG CanvasSVG与Canvas的区别 SVG 不依赖分辨率 支持事件绑定 大型渲染区域的程序(例如百度地图) 不能用来实现网页游戏 Canvas 依赖分辨率 不支持事件绑定 最合适网页游戏 保存为”.jpg”格式的图片 注意有双引号 12typeof function()&#123;&#125;//"function" 请写出HTML5新增的布局标签header、hgroup、nav、aside、section、article、footer、figure、menu 线性渐变 background: linear-gradient(to bottom left, #fff, #000) undefined == nullnull 表示一个无对象 转换为数值0undefined 是一个数据类型，转换为数值时为NaN; 0 NaN均为 false float|–|–|| left | 元素向左浮动。 || right | 元素向右浮动。 || none | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 || inherit | 规定应该从父元素继承 float 属性的值。 | Sass 好处CSS预处理器，好处：变量、mixin、函数、规则嵌套、颜色处理等，坏处：css的文件体积和复杂度不可控、调试难度增加、成本等 闭包所有声明的匿名函数都是一个新的函数 return中的闭包会存储父作用域的变量值（这也是基本上闭包实际中的作用）。 ECMAjavaScript包含核心（ECMAScript）、文档对象模型（DOM）、游览器对象模型（BOM） 会造成内存泄漏的操作1、闭包引起的内存泄漏； 2、意外的全局变量引起的内存泄漏； 3、没有清理的DOM元素引起的内存泄漏； 4、被遗忘的定时器或者回调函数； 5、子元素存在引用引起的内存泄漏； MVCModel 模型 表示应用车光绪核心 （数据库记录列表）View 视图 显示数据 （数据库记录）Controller 控制器 处理输入 (写入数据库) 实现双重边框12border:5px solid black;outline:5px solid red; 斐波那契数 斐波那契数列指的是这样一个数列：1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, … 这个数列从第三项开始，每一项都等于前两项之和。 递归 123456function fibonacci(n) &#123; if(n === 1 || n ===2)&#123; return 1 &#125; return fibonacci(n-1)+fibonacci(n-2)&#125; 循环 1234567891011function fibonacci(n) &#123; var arr = [1, 1]; if (n !== 1 || n !== 2) &#123; for (let i = 2; i &lt; n; i++) &#123; arr[i] = arr[i - 2] + arr[i - 1]; &#125; return arr[n] &#125; else &#123; return 1 &#125;&#125; Array 增删123456789arr.unshift(-1,0);//向首增加arr.push(7,8);//向尾删除arr.shift()//删除首位arr.pop();//删除末尾arr.splice()//删除 索引、数量、新增元素 真假值转换|—|—|| undefined| false|| null | false || Bool | true false || Number | +0 -0 NaN 为false 其他为true || String | 空字符（长度为0）为false 其他为true || Object | true |]]></content>
      <tags>
        <tag>刷题</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[一日 2017-10-12]]></title>
    <url>%2F2017%2F10%2F12%2F2017-10-12%2F</url>
    <content type="text"><![CDATA[Ajax 跨域 本地存储 git 性能优化 2017.10.12Ajax1234567891011var xhr = new XMLHttpRequest();xhr.open('GET','https://api.github.com',false)xhr.onreadstatechange = function () &#123; if (xhr.readyState == 4) &#123; if (xhr.status == 200) &#123; console.log(xhr.responseText); &#125; &#125;&#125;xhr.send(null) 跨域跨域条件：协议 域名 端口 允许跨域&lt;img src=xxx&gt; 用于打点统计，统计网站可能是其他域&lt;ink href=xxx&gt; 可以使用CDN&lt;scirpt src=xxx&gt; 可以使用CDN 可以用于JSONP JSONP实现原理 加载一个地址的时候 不一定服务器端真正有一个xxx文件 服务器可以根据请求，动态生成一个文件，返回 存储cookiesessionStorage会话存储localStorage 12localStorage.setItem("username","John");console.log(localStorage.getItem("username")); 区别 容量 是否会携带到ajax中 API易用性 Gitgit checkout 文件名 还原修改的文件git add . 把全部修改增加到暂存区git commit -m &quot;&quot; 提交git checkout -b 新建分支git checkout xxx 切换分支git merge xxx 把xxx分支合并进来 模块加载AMD异步 模块 定义CommonJS同步模块加载 node.js 使用 页面加载windows.onload 页面加载完毕之后的渲染 包括图片视频。 一般推荐使用这种方法DOMContentLoaded DOM渲染完即可执行，此时图片，视频没有加载完成。 vi 操作i 插入模式esc :wq 编辑完成之后退出保存 搜索文件里的内容 例子 grep&#39;hello&#39; 1.js 性能优化图片懒加载123456789&lt;body&gt; &lt;img id='img' src="./img/placeholder.jpg" data-realsrc="./img/real.jpg"&gt; &lt;script&gt; window.onload = () =&gt; &#123; var img = document.getElementById('img'); img.src = img.getAttribute('data-realsrc'); &#125;; &lt;/script&gt;&lt;/body&gt; 缓存查询12345var pList = document.getELementsByTagName('p')var ifor (i = 0;i &lt; pList.length; i++) &#123; //todo&#125; 合并DOM插入把需要多次添加到页面的dom合并成一次进行添加 事件节流通过判读减少多次重复请求 尽早操作window.addEventListener(&#39;load&#39;),function(){}window.addEventListener(&#39;DOMContentLoaded&#39;),function(){}]]></content>
      <tags>
        <tag>Ajax</tag>
        <tag>跨域</tag>
        <tag>本地存储</tag>
        <tag>git</tag>
        <tag>性能优化</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[一日 2017-10-11]]></title>
    <url>%2F2017%2F10%2F11%2F2017-10-11%2F</url>
    <content type="text"><![CDATA[DOM BOM 事件 2017.10.11查询DOMdocument.getElementById()document.getElementsByClassName()document.getElementsByTagName()document.querySelectorAll() Attribute propertyAttribute html代码里文档的标签getAttributesetAttributeproperty js对象中标准的属性 DOM结构操作新增节点createElementappendChild获取父元素parentElement获取子元素childNodes 是数组删除节点removeChild DOM Q&amp;ADOM是哪种基本的数据结构树 Attribue property Attribute 是对html标签属性的修改property只是一个js对象的属性的修改 BOM（浏览器对象模型）navigator 浏览器信息location 地址栏信息 indexOf()indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。 事件通用事件绑定 事件冒泡事件向上冒泡点激活弹出激，点取消弹出取消e.stopPropagation()阻止冒泡 123456789101112131415161718192021222324252627282930313233343536&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;hello dom&lt;/title&gt;&lt;/head&gt;&lt;body&gt; &lt;div id='div1'&gt; &lt;p id="p1"&gt;激活&lt;/p&gt; &lt;p id="p2"&gt;取消&lt;/p&gt; &lt;p id="p3"&gt;取消&lt;/p&gt; &lt;p id="p4"&gt;取消&lt;/p&gt; &lt;/div&gt; &lt;div id='div2'&gt; &lt;p id="p5"&gt;取消&lt;/p&gt; &lt;p id="p6"&gt;取消&lt;/p&gt; &lt;/div&gt; &lt;script&gt; function bindEvent(elem, type, fn) &#123; elem.addEventListener(type, fn); &#125; const p1 = document.getElementById('p1'); const body = document.body; bindEvent(p1, 'click', (e) =&gt; &#123; e.stopPropagation() alert('激活') &#125;) bindEvent(body, 'click', (e) =&gt; &#123; alert('取消') &#125;) &lt;/script&gt;&lt;/body&gt;&lt;/html&gt; 代理通过事件绑定上层元素，通过target判断目标节点 代理的好处 代码简洁 减少浏览器内存占用123456789101112131415161718192021222324252627&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;hello dom&lt;/title&gt;&lt;/head&gt;&lt;body&gt; &lt;div id='div1'&gt; &lt;a href="#"&gt;a1&lt;/a&gt; &lt;a href="#"&gt;a2&lt;/a&gt; &lt;a href="#"&gt;a3&lt;/a&gt; &lt;a href="#"&gt;a4&lt;/a&gt; &lt;/div&gt; &lt;script&gt; var div1 = document.getElementById('div1'); div1.addEventListener('click', function (e) &#123; console.log(e); var target = e.target; if(target.nodeName === 'A')&#123; alert(target.innerHTML) &#125; &#125;) &lt;/script&gt;&lt;/body&gt;&lt;/html&gt; target 事件属性target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。 match() 方法match()方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。 通用函数绑定方法写的很精妙 可以多看看 123456789101112131415161718function bindEvent(elem, type, selector, fn) &#123; if(fn == null)&#123; fn = selector selector = null &#125; /*如果不传选择器*/ elem.addEventListener(type,function(e)&#123; var target; if(selector)&#123; target = e.target; if(target.matches(selector))&#123; fn.call(target,e) &#125;else&#123; fn(e) &#125; &#125; &#125;)&#125;]]></content>
      <tags>
        <tag>DOM</tag>
        <tag>BOM</tag>
        <tag>事件</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[两日 2017-10-09~2017-10-10]]></title>
    <url>%2F2017%2F10%2F10%2F2017-10-09%2F</url>
    <content type="text"><![CDATA[异步 单线程 日期 Math Array Object 2017.10.9 ~ 10.10 异步 同步、异步的区别阻塞代码执行 （alert同步 setTimeout 异步） setTimeout 执行顺序的问题 单线程不能同步干两件事所有程序都执行完，会看有没有暂存的函数需要执行。 日期Date.now()获取 当前 毫秒数const dt = new Date()dt.getTime() 获取毫秒数dt.getFullYear() 年dt.getMouth()月（0-11）dt.getDate()日（0-11）dt.getHours()小时（0-23）dt.getMinutes()分钟(0-59)dt.getSeconds()秒(0-59) MathMath.random()获取随机数（用途 通过变换地址，清除缓存） ArrayforEach 遍历所有的元素 map 对元素重新封装，生成新数组filter过滤符合条件的元素有 返回值return every 判断所有的元素是否都符合条件 12const arr = [1,2,3,4,5,undefined,6,7,8,9];console.log(arr.every((item)=&gt;typeof item === 'number'))//false some 判断是否有至少一个元素符合条件 12const arr = [1,2,3,4,5,'string',6,7,8,9];console.log(arr.some((item)=&gt;typeof item === 'string'))//true sort 排序 123const arr = [1,4,5,2,6];console.log(arr.sort((a,b)=&gt;a-b))//从小到大console.log(arr.sort((a,b)=&gt;b-a))//从大道小 Objectkey value12345678const obj = &#123; a:100, b:200,&#125;for(key in obj)&#123; console.log(key,obj[key])//a 100 b 200&#125; JS-WEB-API Code获取2017-06-10格式的日期123456789101112131415161718function formatDate(dt)&#123; if(!dt)&#123; dt = new Date();//如果dt为空，则给dt赋值 &#125;const year = dt.getFullYear();const mouth = dt.getMonth() + 1;const date = dt.getDate() +1; if(mouth &lt; 10) mouth = '0' + mouth if(date &lt;10) date = '0' + date return year + '-' + mouth + '-' + date&#125;const dt = new Date();const date = formatDate(dt)console.log(date); 一个可以遍历数组对象的方法123456789101112131415161718const array = ['a','b','c'];const obj = &#123; x:1, y:2,&#125;function forEach(obj,fn)&#123; if(obj instanceof Array)&#123; obj.forEach((item,index)=&gt;fn(index,item)) &#125;else&#123; for(key in obj)&#123; fn(key,obj[key]) &#125; &#125;&#125;forEach(array,(index,item)=&gt;console.log(index,item))forEach(obj,(index,item)=&gt;console.log(index,item)) **instanceof** 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。 DOMDocument Object Model]]></content>
      <tags>
        <tag>异步</tag>
        <tag>单线程</tag>
        <tag>日期</tag>
        <tag>Math</tag>
        <tag>Array</tag>
        <tag>Object</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[一日 2017-10-08]]></title>
    <url>%2F2017%2F10%2F08%2F2017-10-08%2F</url>
    <content type="text"><![CDATA[this 作用域 2017.10.8thisthis 要在执行时才能确认值，定义时无法确认。 作为构造函数执行 1234function Foo(name)&#123; this.name = name&#125;var f = new Foo('zhangsan') 作为对象属性执行（this是这个对象） 1234567var obj = &#123; name:'A', printName: function ()&#123; console.log(this.name) &#125;&#125;obj.printName() 作为普通的函数执行 1234function fn()&#123; console.log(this)//this === window&#125;fn() call apply bind 1234567891011const name = 'xiaoming';const a = function (name)&#123; console.log(this.name); console.log(this);&#125;a.call(&#123;name:'xiaohong'&#125;);//xiaohong 作用域自由变量，父作用域在 定义 的时候确定。 闭包的作用 函数作为返回值 函数作为参数传递 123456789101112131415161718function F1()&#123; var a = 100 return function ()&#123; console.log(a)//自由变量，父作用域寻找 &#125;&#125;var f1 = F1()var a = 200f1()//100function F2(fn)&#123; var a = 300; fn();&#125;F2(f1);//100]]></content>
      <tags>
        <tag>this</tag>
        <tag>作用域</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[一日 2017-10-07]]></title>
    <url>%2F2017%2F10%2F07%2F2017-10-07%2F</url>
    <content type="text"><![CDATA[Js原型链 2017.10.7原型规则所有引用类型（数组、对象、函数）吗，都有__proto__（隐式原型）属性，属性值是一个普通对象 所有函数，都有prototype显式原型 所有引用类型的隐式原型指向显示原型 当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性那么会去它的__proto__（即它的构造函数prototype）里寻找 1234const a = &#123;&#125;;//&#123;&#125; [] function 三个引用类型 （不包括null）console.log(a.__proto__)//&#123;&#125;console.log(Object.prototype)//&#123;&#125;console.log(a.__proto__=== Object.prototype)//true 1234567891011121314151617&#123;function Foo(name,age)&#123;this.name = name;&#125;Foo.prototype.alertName = function ()&#123;console.log(this.name);&#125;var f = new Foo('zhangjia')f.hello = function ()&#123;console.log(this.name)&#125;f.alertName()//它的隐式原型指向显示原型f.hello()&#125; Object.prototype.hasOwnProperty()**hasOwnProperty()** 方法会返回一个布尔值，指示对象是否具有指定的属性作为自身（不继承）属性。 判断一个变量是否是数组 12const a = [];console.log(a instanceof Array);//true 写一个原型链继承的例子 12345678910111213function Animal()&#123; this.eat = function ()&#123; console.log('eat'); &#125;&#125;function Cat()&#123; this.size = 'small';&#125;Cat.prototype = new Animal();const kitty = new Cat();kitty.eat();//eat 1234567891011121314151617181920212223function Element(id)&#123;this.elm = document.getElementById(id);&#125;Element.prototype.html = function (val)&#123; var elm = this.elm; if(val)&#123; elm.innerHTML = val; return this &#125;else&#123; return elm.innerHTML; &#125;&#125;Element.prototype.on = function (type,fn)&#123; var elm = this.elm; elm.addEventListener(type,fn); return this&#125;var div1 = new Element('lg');div1.html('&lt;p&gt;hello wolrd&lt;/p&gt;').on('click',function()&#123;alert('hello')&#125;) 描述new 一个对象创建一个新对象this指向这个新对象执行代码，对this赋值返回this]]></content>
      <tags>
        <tag>原型链</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[一日 2017.10.06]]></title>
    <url>%2F2017%2F10%2F06%2F2017-10-06%2F</url>
    <content type="text"><![CDATA[工厂函数 JSONPlaceholder axios 构造函数 工厂函数所谓工厂函数，就是指这些内建函数都是类对象，当你调用他们时，实际上是创建了一个类实例. 由于Javascript本身不是严格的面向对象的语言（不包含类），实际上来说，Javascript并没有严格的“工厂函数”，但是在Javascript中，我们能利用函数模拟类。 它是一个函数。 它用来创建对象。 它像工厂一样，“生产”出来的函数都是“标准件”（拥有同样的属性） JSONPlaceholderFake Online REST API for Testing and Prototyping提供fake rest api 测试使用http://jsonplaceholder.typicode.com/ | GET | /posts || GET | /posts/1 || GET | /posts/1/comments || GET | /comments?postId=1 || GET | /posts?userId=1 || POST | /posts || PUT | /posts/1 || PATCH | /posts/1 || DELETE | /posts/1 | axiosPromise based HTTP client for the browser and node.js get 12345axios.get('/user', &#123; params: &#123; ID: 12345 &#125; &#125;) 可以接受error，then 返回数据。post 1234axios.post('/user', &#123; firstName: 'Fred', lastName: 'Flintstone' &#125;) 构造函数构造函数首字母大写构造函数里边的this，在new得时候变成空对象，然后把this里的值加进去。 123456function Person(name,age)&#123;this.name = name;this.age = age;&#125;const xiaoming = new Person('xiaoming', 18);console.log(xiaoming.age); 构造函数 拓展 var a = {},var b = [],是var a = new Object(),var b = new Array()的语法糖。 function Foo(){}其实是var Foo = new Function()。 使用instanceof判断一个函数是否是一个变量的构造函数。]]></content>
      <tags>
        <tag>函数</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[二日 2017.10.1~10.2]]></title>
    <url>%2F2017%2F10%2F02%2F2017-10-01%2F</url>
    <content type="text"><![CDATA[JavaScript 数据类型 两日总结 2017.10.1~10.2 Array.prototype.slice()slice()方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。原始数组不会修改 123const a = [1,2,3,4,5];const slice = a.slice(0,2);//[1,2]const reversal = a.slice(-2,-1); //[4] argumentsarguments对象是所有函数中可用的局部变量。 123arguments[0]arguments[1]arguments[2] arguments对象不是一个Array，它类似数组，除了长度没有任何其他数组属性。 值类型 引用类型123456789101112131415161718192021222324252627282930313233343536373839//值类型&#123;let a = 21;const b = a;a = 22;console.log(b);&#125;//引用类型&#123;let a =[1,2,3,4,5];let d = &#123;name:'hello'&#125;let b = a;let e = d;a = a.push(6);e.name = 'Hello again'console.log(b)//​​​​​[ 1, 2, 3, 4, 5, 6 ]​​​​​console.log(e);//​​​​​&#123; name: 'Hello again' &#125;​​​​​&#125; typoef 运算符1234567typeof undefined //undefinedtypeof 'abc' //stringtypeof true //booleantypeof &#123;&#125; //objecttypeof [] //objecttypeof null //objecttypeof console.log //function typoef 分辨不出 对象、数组、null。typoef 只能区分值类型的类型（undefined、string、boolean、number） null 是一个空的引用对象。function 是一个特殊的引用类型。 == 运算符123100 == '100' //true0 = '' //truenull == undefined //true if 语句123456var b = 100if(b)&#123;&#125;var c = ''if(c)&#123;&#125; if里的参数会强制转化 逻辑远算符12console.log(10 &amp;&amp; 0);//0console.log(''||'abc')//abc 判断一个变量会被当作true 还是 false 123var a = 100;console.log(!!100);//tureconsole.log(!!console.log);//true 何时使用 === 和 ==判断是否是undefined或者是null相当于obja === null || obj.a === undefined 简写形式jquery 源码推荐写法 12if(obj.a == null)&#123;&#125; 因为null == undefined 12console.log(!!null)//falseconsole.log(!!undefined)//flase JS中内置函数数据封装类对象Object Array Number Boolean StringRegExp Error Function Date Q&amp;Ajsan安装存储方式区分变量类型引用类型 值类型特点：值类型分块存储，引用共有存储，互相干预 如何理解JSONJSON只是一个js的对象 12console.log(JSON.stringify(&#123;a:10&#125;))console.log(JSON.parse('&#123;"a":"10"&#125;')) **JSON.stringify()** 方法将一个 JavaScript 值转换为一个 JSON 字符串**JSON.parse()** 方法解析一个JSON字符串，构造由字符串描述的JavaScript值或对象。]]></content>
      <tags>
        <tag>数据类型</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[一日 2017.09.24]]></title>
    <url>%2F2017%2F09%2F24%2F2017-09-24%2F</url>
    <content type="text"><![CDATA[foreach restful 网络请求 一日总结 2017.9.24foreach 和 map 区别foreach是用来遍历数组的，没有返回值，对原来数组也没有影响；map回调函数支持return 回调函数将一个函数作为参数传递给另一个函数，作为参数的这个函数就是回调函数。 递归递归算法是把问题转化为规模缩小了的同类问题的子问题。然后递归调用函数（或过程）来表示问题的解。 RESTFULHTTP动词 A0 B0 GET（SELECT） 从服务器取出资源 （一项或者多项） POST （CREATE） 在服务器新建资源 PUT（UPDATE） 在服务器更新资源 （客户端提供改变后的完整资源） PATCH （UPDATE） 在服务器更新资源（客户端提供改变属性） DELETE（DELETE） 从服务器删除资源 GET /zoos：列出所有动物园 POST /zoos：新建一个动物园 GET /zoos/ID：获取某个指定动物园的信息 PUT /zoos/ID：更新某个指定动物园的信息（提供该动物园的全部信息） PATCH /zoos/ID：更新某个指定动物园的信息（提供该动物园的部分信息） DELETE /zoos/ID：删除某个动物园 GET /zoos/ID/animals：列出某个指定动物园的所有动物 DELETE /zoos/ID/animals/ID：删除某个指定动物园的指定动物 过滤信息如果记录数量很多，服务器不可能将全部数据都返回用户，API应该提供参数，过滤返回结果。 ?limit=10：指定返回记录的数量 ?offset=10：指定返回记录的开始位置。 ?page=2&amp;per_page=100：指定第几页，以及每页的记录数。 ?sortby=name&amp;order=asc：指定返回结果按照哪个属性排序，以及排序顺序。 ?animal_type_id=1：指定筛选条件 状态码 在编程中.一个幂等操作的特点是其任意多次执行所产生的影响均与一次执行的影响相同。 200 OK 服务器成功返回用户请求的数据 201 CREATEED 【POST/PUT/PATCH】用户新建或修改数据成功 202 Accped 表示一个请求已经进入后台排队（异步任务） 204 NO CONTENT 【DELETE】用户删除数据成功 400 【POST/PUT/PATCH】用户发出的请求有错误，服务器没有进行新建或者修改操作 401 Unauthorized 【*】表示用户已没有权限户没有权限（令牌、用户名、密码错误）。 403 Forbidden 【*】 表示用户得到授权，但是访问是被禁止的 404 NOT FOUND 【*】用户发出请求针对的是不存在的记录，服务器没有进行操作，改操作是幂等的 406 Not Acceptable 【GET】 用户请求的格式不可得（比如用户请求JSON格式，但是只有XML格式）。 410 Gone 【GET】 用户请求资源被永久删除，且不会得到 422 Unprocesable entity - 【POST/PUT/PATCH】 当创建一个对象时，发生一个验证错误 500 INTERNAL SERVER ERROR 【*】 服务器发送错误 ### 错误处理 如果状态是4XX，就应该向用户返回出错信息。一般来说，返回信息中将错误error作为键名，出错信息作为键值即可。 123&#123;error: "Invalid API key"&#125; 返回结果 GET /collection：返回资源对象的列表（数组） GET /collection/resource：返回单个资源对象 POST /collection：返回新生成的资源对象 PUT /collection/resource：返回完整的资源对象 PATCH /collection/resource：返回完整的资源对象 DELETE /collection/resource：返回一个空文档]]></content>
      <tags>
        <tag>foreach</tag>
        <tag>restful</tag>
        <tag>网络请求</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[2017年6月css和less学习总结]]></title>
    <url>%2F2017%2F06%2F28%2F2017-6-css-less%2F</url>
    <content type="text"><![CDATA[近期实习关于样式调优的小记 box-shaodwx,y,高斯 transition-duration过度时间 如.2s background-origin 属性background-origin 属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。 less字符串插值可用于同一目录调用不同文件@base-url: &quot;http://assets.fnord.com&quot;; background-image: url(&quot;@{base-url}/images/bg.png&quot;); Import引用less文件@import &quot;lib.less&quot;;@import &quot;lib&quot;; @定义变量@color:red css设置图片12345678.mainImg(@imgName) &#123; width: 45px; height: 45px; background-size: cover; background-image:~"url(./assets/@&#123;imgName&#125;.png)"; background-repeat: no-repeat;&#125; 定义传参的样式123456.box(@width, @height, @color) &#123; width: @width; height: @height; background-color: @color;&#125; 命名空间12345678910#bundle &#123; .button () &#123; display: block; border: 1px solid black; background-color: grey; &amp;:hover &#123; background-color: white &#125; &#125; .tab &#123; ... &#125; .citation &#123; ... &#125;&#125; 1234#header a &#123; color: orange; #bundle &gt; .button;&#125; css moduleCSS Modules 默认是局部作用域的，想要声明一个全局规则，可用 :global 语法。 123456.title &#123; color: red;&#125;:global(.title) &#123; color: green;&#125; 12&lt;App className=&#123;styles.title&#125; /&gt; // red&lt;App className="title" /&gt; // green]]></content>
      <tags>
        <tag>css</tag>
        <tag>前端</tag>
        <tag>less</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[es6学习笔记]]></title>
    <url>%2F2017%2F05%2F20%2Fes6%2F</url>
    <content type="text"><![CDATA[最近一些学习es6的心得 babel cli把ES6代码转为可以使用的npm install --global babel-cli基本用法 1234567891011121314151617# 转码结果输出到标准输出$ babel example.js# 转码结果写入一个文件# --out-file 或 -o 参数指定输出文件$ babel example.js --out-file compiled.js# 或者$ babel example.js -o compiled.js# 整个目录转码# --out-dir 或 -d 参数指定输出目录$ babel src --out-dir lib# 或者$ babel src -d lib# -s 参数生成source map文件$ babel src -d lib -s 闭包 函数内部可以直接读取全局变量 12345 var n=999; function f1()&#123; alert(n); &#125; f1(); // 999 函数外部无法读取函数内部的局部变量 1234 function f1()&#123; var n=999; &#125; alert(n); // error 如果函数内部声明的时候没有使用var，实际上声明了一个全局变量 12345 function f1()&#123; n=999; &#125; f1(); alert(n); // 999 如何从外部读取函数的局部变量？ 函数内部再定义一个函数 123456 function f1()&#123; var n=999; function f2()&#123; alert(n); // 999 &#125; &#125; f1内部所有局部变量f2都是可见的 Javascript语言特有的”链式作用域”结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。 把函数作为返回值，即可在外部调用 123456789var result = function()&#123; var n=999; function f2() &#123; console.log(n); &#125; return f2()&#125;result();//999 闭包就是能够读取其他函数内部变量的函数。或定义在一个函数内部的函数 闭包会使函数中得变量被保存到内存中 思考题1234567891011 var name = "The Window"; var object = &#123; name : "My Object", getNameFunc : function()&#123; return function()&#123; return this.name; &#125;; &#125; &#125;; alert(object.getNameFunc()());//the windows return function()上一级没有name，所以指向全局寻找 改良指向my object 1234567891011name = "The Window"; var object = &#123; name : "My Object", getNameFunc : function()&#123; var that = this; return function()&#123; return that.name; &#125;; &#125; &#125;; alert(object.getNameFunc()()); for循环for循环外部是一个作用域，里是一个作用域 1234for (let i = 0; i &lt; 3; i++) &#123; let i = 'abc'; console.log(i);//abc abc abc&#125; let块级作用域12345678function f1()&#123; let n=5; if(true)&#123; let n=10; &#125; console.log(n);&#125;f1();//5 外层代码块不受内层代码块影响内层作用域可以定义外层作用域的同名变量。 解构赋值 数组1234567//变量交换&#123; let a=1; let b=2; [a,b]=[b,a]; console.log(a,b);//2,1&#125; 123456789//取多个返回值&#123; function f() &#123; return['商品名','价格'] &#125; let a,b; [a,b]=f(); console.log(a,b);//商品名 价格&#125; 123456789//选择性接收数据&#123; function f() &#123; return[1,2,3,4,5,6] &#125; let a,b; [a,,,b]=f(); console.log(a,b);//1 4&#125; 12345678&#123; function f() &#123; return[1,2,3,4,5,6] &#125; let a,b; [a,,,...b]=f(); console.log(a,b);//1 [ 4, 5, 6 ]&#125; 对象123456&#123;let &#123;foo,bar&#125;= &#123;foo:'aa',bar:'66'&#125;;//对象=对象 key value 匹配console.log(foo);//aaconsole.log(bar);//66&#125; 与对象结构赋值不同的是，变量必须与属性同名，才能取到正确的值。 json数据获取技巧 12345678910111213141516&#123; let data = &#123; "resultcode": "200", "result": &#123; "province": "辽宁", "city": "大连", "areacode": "0411", "zip": "116000", "company": "移动", "card": "" &#125;, "error_code": 0 &#125; let &#123;result:&#123;province:Rprovince,city:Rcity&#125;&#125;=data; console.log(Rprovince,Rcity);&#125; 函数1234567&#123;let array = [1,2];function add([x,y])&#123; return x+y;&#125;console.log(add(array));//3&#125; 参数表面是一个数组，被传入那一刻解构成了x和y 提取json1234567891011&#123; let jsonData = &#123; id: 42, status: "OK", data: [867, 5309] &#125;; let &#123; id, status, data: number &#125; = jsonData; console.log(id, status, number);&#125; 字符串拓展 检测字符串 includes()：返回布尔值，表示是否找到了参数字符串。 tartsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。 endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。 模板字符串12345$('#result').append(` There are &lt;b&gt;$&#123;basket.count&#125;&lt;/b&gt; items in your basket, &lt;em&gt;$&#123;basket.onSale&#125;&lt;/em&gt; are on sale!`); 变量使用${}表示，可以传函数 函数 ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。123function log(x, y = 'World') &#123; console.log(x, y);&#125; 设置参数会在执行生成一个单独的作用域 rest 获取多余的参数 12345678function push(array, ...items) &#123; items.forEach(function(item) &#123; array.push(item); console.log(item); &#125;);&#125;var a = [];push(a, 1, 2, 3) 箭头函数如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。 1234567var f = () =&gt; 5;// 等同于var f = function () &#123; return 5 &#125;;var sum = function(num1, num2) &#123; return num1 + num2;&#125;; 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象12345678function foo() &#123; setTimeout(() =&gt; &#123; console.log('id:', this.id); &#125;, 100);&#125;var id = 21;foo.call(&#123; id: 42 &#125;);// id: 42 .bind()绑定函数bind() 最简单的用法是创建一个函数，使这个函数不论怎么调用都有同样的 this 值。 123456789101112131415this.x = 9; var module = &#123; x: 81, getX: function() &#123; return this.x; &#125;&#125;;module.getX(); // 返回 81var retrieveX = module.getX;retrieveX(); // 返回 9, 在这种情况下，"this"指向全局作用域// 创建一个新函数，将"this"绑定到module对象// 新手可能会被全局的x变量和module里的属性x所迷惑var boundGetX = retrieveX.bind(module);boundGetX(); // 返回 81]]></content>
      <tags>
        <tag>es6</tag>
        <tag>js</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[vrtk插件使用总结]]></title>
    <url>%2F2017%2F04%2F20%2Fvrtk-vr%2F</url>
    <content type="text"><![CDATA[在哈航科技项目中使用VRTK的心得和难点 初始化对象:CameraRig 创建空的对象，命名`VRTK`，给对象添加`VRTK_SDK_Manager` VRTK下创建子类空物体，命名左右手,然后将空左右手连接到`Vrtk`中 给左右手添加`VRTK_Contrallor_Event`(监听控制器的交互) VRTK中创建空物体命名`PlayArea`并为其添加`basic Templot` 人物移动所有的交互都是通过VRTK_Contrallor_Event进行反馈 需要给控制器添加VRTK_Pointer 控制器模型下面创建一个空物体，拖入需要的射线渲染器脚本（如strightRender）； PlayArea里面添加传送器脚本如：basic TeleportTeleport有三种模式，除了Basic Teleport 不能进行高度传送，其他的都可以 交互系统 （如抓取，碰撞，触摸）抓取系统：控制器上需要挂载interact Touch 触摸interact Action 不必要Interact Grabs 抓取interact Use 不必要swap_contrallor_grab_action 这个脚本是用来控制手柄承载物体。物体可以在两个手柄中传递。对象上面挂载VRTK_Interactable Object 参数isgrab开启rigidity刚体组件 用户体验细节PlayArea添加vrtk__headset collision 给头部加一个碰撞体vrtk__headset fadevrtk__headset collision fade 当人物超出安全范围会有颜色的警示，并且有逐渐进入的过程 VRTK中有一个RadioMenu预制体，可以通过控制器的触摸板控制一些UI组件使用方法：直接将预制体拖入到控制器中当作孩子。可以调整大小和方向也可以将预制体挂载到对象上面，当控制器碰到对象后会显示出RadioMeun。（需要给对象和控制器添加一定的交互脚本）。给RadioMeun中的panel面板添加VRTK_Independent_Radio_Meun组件。和Radio Menu组件。 VRTK_OutLine Object Copy HightlightVRTK_Controller Apperance_Example这两个脚本控制控制器的样式，当控制器碰到对象，控制器的body和外边缘会产生颜色的变化 开启可玩区域碰撞体，使玩家始终在合理位置搭配贝尔曲线传送器使用VRTK_Bezier pointer renderer把play area cursor挂的物体附上去nav渲染下可以移动的地方demo16 模拟触发手柄震动demo 17 使用触控板模拟人物运动 可交互物体触碰执行给需要交互的物体添加脚本：VRTK interactable objectVRTK__Button控制器需要的脚本同上面的交互事件。所执行的方法：defalut事件是触摸就执行脚本on push事件是移动物体到指定距离执行脚本还可以使用unity event事件移动完成后执行脚本 同on pushed UICanvas交互创建一个Canvas，给其添加 VRTK_UICanvas给控制器添加VRTK_UIPointer 、VRTK_Pointer（给其指定渲染器）这样就可以通过控制器射线来交互UI元素 UI元素拖拽给UI元素添加脚本UI_Draggable Item 脚本操作方法：先用射线指定要拖拽的元素，然后按住Trigger键进行拖拽，拖拽过程中射线不能停止，到指定地点后再松开Triggerblink transition speed 眨眼过渡速度]]></content>
      <tags>
        <tag>unity</tag>
        <tag>vrtk</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[react和react-native总结]]></title>
    <url>%2F2017%2F03%2F26%2Freact-react-native%2F</url>
    <content type="text"><![CDATA[本文是关于react环境配置和react中遇到的问题的总结 1.reactnative环境配置参照reactnative汉化网站必须的软件node java androidstuidojava需要配置好环境变量 2.小米手机真机调试react native参见这篇博客文章地址]]></content>
      <tags>
        <tag>react</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[unity实战总结]]></title>
    <url>%2F2017%2F01%2F15%2Funity3d%2F</url>
    <content type="text"><![CDATA[主要是我在unity中遇到得一些问题总结。 1.unity中的碰撞检测 示例代码 1234567891011121314151617181920212223using UnityEngine;using System.Collections;public class 碰撞 : MonoBehaviour &#123; private Color colors; // Use this for initialization void Start () &#123;b &#125; // Update is called once per frame void Update () &#123; &#125; //满足刚体 和trriger void OnTriggerEnter()&#123; float r = Random.Range(0f, 1f); float g = Random.Range(0f, 1f); float b = Random.Range(0f, 1f); colors = new Color(r,g,b); gameObject.GetComponent&lt;Renderer&gt;().material.color =colors;//改变颜色 &#125;&#125; 作为碰撞的物体必须有刚体（rigidbody）作为碰撞检测的的物体必须有（collider）并且Is trigger属性为true 2.unity中的射线 1234567891011121314151617181920public LayerMask mask;//射线检测碰到的层public GameObject qiu;//点击生成的物体 void Update () &#123; RaycastHit hit1; //RaycastHit 光线投射碰撞 //RaycastHit相关的变量 http://www.ceeger.com/Script/RaycastHit/RaycastHit.html Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition); //ray 射线 .direction方向 origin射线原点 if (Physics.Raycast(ray,out hit1,500f,mask) &amp;&amp; Input.GetMouseButtonDown(0) ) //Physics.Raycast 射线投射 起始点 射线方向 射线长度 射线投射的层 &amp;&amp; 判断鼠标左键按下 //从屏幕点的开开始射出一条加hit1的射线长度为500f，和mask层进行交互 &#123; Instantiate(qiu, hit1.point, Quaternion.identity); // raycastHit .point 返回射线与层碰到的世界坐标 &#125; &#125; 3.获取游戏组件内的属性 1obj.GetComponent&lt;Renderer&gt; ().material.color = Color.red; 4.摄像机激活、关闭 1cams [a].active = false; 5.复制游戏中物体 1234567891011121314151617181920212223242526utusing UnityEngine;using System.Collections;public class ss : MonoBehaviour &#123; public GameObject man; private Vector3 p; // Use this for initialization void Start () &#123; for(int i=0;i&lt;9;i++)&#123; for(int j=0;j&lt;9;j++)&#123; p = new Vector3 (i,0,j); Instantiate (man,p,Quaternion.identity);//复制一个物体 物体，坐标，方向 //Quaternion 四元数 // &#125; &#125; &#125; // Update is called once per frame void Update () &#123; &#125;&#125; 12346.控制游戏内的物体显示、隐藏```cobject.gameObject.SetActive(true); 7.使用TextField 123456//必须引入using UnityEngine.UI;//才可以定义public InputField apassword;string passwordd = apassword.text;//里边的文本内容 8.在console里打印辅助信息 1print("hello world!"); 9.设置定时器 让tip(text)显示一秒隐藏 12345678910111213141516else &#123; tip.gameObject.SetActive (true); StartCoroutine (DisapperMessage ()); //开始协调程序 //一个协同程序在执行过程中,可以在任意位置使用yield语句。yield的返回值控制何时恢复协同程序向下执行。 //协同程序在对象自有帧执行过程中堪称优秀。协同程序在性能上没有更多的开销。 //StartCoroutine函数是立刻返回的,但是yield可以延迟结果。直到协同程序执行完毕。 &#125; &#125; IEnumerator DisapperMessage() &#123; //中断指令 yield return new WaitForSeconds(1); tip.gameObject.SetActive(false); &#125; 10.unity添加mov格式的视频 前置条件：需要安装quicktime支持，把脚本挂在一个需要显示的平面上 12345678public MovieTexture movTexture;void Update () &#123; GetComponent&lt;Renderer&gt;().material.mainTexture = movTexture; //定义视频贴图 movTexture.Play (); //播放视频 &#125; 11.unity场景跳转 123using UnityEngine.SceneManagement;SceneManager.LoadScene(SceneName); 12.法线贴图 使用软件Crazybump进行制作下图是使用方法 13.绕点旋转 123456789101112131415using UnityEngine;using System.Collections;public class rotate : MonoBehaviour &#123; private Vector3 center = new Vector3(-48.6f,-70.0f,-89.3f); // Use this for initialization void Start () &#123; &#125; // Update is called once per frame void Update () &#123; transform.RotateAround(center, Vector3.up, 20 * Time.deltaTime); &#125;&#125; 围绕世界坐标的point点的axis旋转该变换angle度。这个修改变换的位置和旋转角度。 14.简单位移 12345678if (Vector3.Distance(target.transform.position, transform.position) &gt; 0.1f)&#123;Vector3 v = (target.transform.position - transform.position).normalized;Quaternion rot = Quaternion.LookRotation(v); //插值transform.rotation = Quaternion.Slerp(transform.rotation, rot, Time.deltaTime * speed);transform.position += transform.forward * Time.deltaTime;&#125; 15.unity中定时器使用 1234567891011121314151617 void Update () &#123; timer(time[1]); &#125; void timer(int data) &#123; timer1 += Time.deltaTime; if (timer1 &gt;= 1) &#123; time[1]--; labelChangeInt(time[1], "time"); timer1 = 0; print(data); &#125;//每一秒钟，执行一次代码 &#125; 16.C# 非void 带返回值的使用方法 1234567Vector3 randomPos() &#123; float x = Random.Range(0, planeWidth); float z = Random.Range(0, planeHeight); Vector3 random = new Vector3(x, 0, z); return random; &#125; 17.切换天空盒 12public Material sky01;RenderSettings.skybox=sky01; 18.通过间隔符，提取字符串 12345string test2 = "100-200-300"; char[] separator = &#123; '-' &#125;; string[] tests = test2.Split(separator); //Split里必须是char类型 print(tests[1]); 20.提取字符串中的第i个字符开始的长度为j的字符串 1234567 string test1 = "100200300"; print(test1.Substring(3,3));//or string str = "GTAZB_JiangjBen_123"; int start=3,length=8; print(str.Substring(start-1, length)); 更多操作数据知识 21.模型动画切换 1234567891011121314151617181920public bool run = false; public Animation thisA; // Use this for initialization void Start () &#123; thisA = gameObject.GetComponent&lt;Animation&gt;(); //获取animation组件 &#125; // Update is called once per frame void Update () &#123; if (run == true) &#123; print("切换动画"); thisA.Play("run_"); &#125; else &#123; thisA.Play("idle1_"); &#125; &#125; 22.播放指定的声音片段 前置条件：添加Audio source组件并添加声音 123public AudioSource audio;audio = gameObject.GetComponent&lt;AudioSource&gt;();audio.PlayOneShot(audio.clip, 1.0f); 23.C#获取本机IP 1234567891011121314151617181920212223242526using System.Net.NetworkInformation;using System.Net.Sockets;//引入命名空间 string userIp = ""; NetworkInterface[] adapters = NetworkInterface.GetAllNetworkInterfaces(); ; foreach (NetworkInterface adapter in adapters) &#123; if (adapter.Supports(NetworkInterfaceComponent.IPv4)) &#123; UnicastIPAddressInformationCollection uniCast = adapter.GetIPProperties().UnicastAddresses; if (uniCast.Count &gt; 0) &#123; foreach (UnicastIPAddressInformation uni in uniCast) &#123; //得到IPv4的地址。 AddressFamily.InterNetwork指的是IPv4 if (uni.Address.AddressFamily == AddressFamily.InterNetwork) &#123; userIp = uni.Address.ToString(); &#125; &#125; &#125; &#125; &#125; print(userIp); 2017.1未完待续……]]></content>
      <tags>
        <tag>unity</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[搭建hexo博客踩过的坑]]></title>
    <url>%2F2016%2F12%2F15%2Fbuild-hexo%2F</url>
    <content type="text"><![CDATA[搭建hexo博客更换hexo主题解决百度无法抓取github数据 初始化hexo博客项目地址 hexo官网。 12345npm install hexo-cli -ghexo init blogcd blognpm installhexo server 如何将hexo从本地挂在github并添加cname解析1.在github新建一个仓库，命名为你要设定的名字.github.io申请一个密钥,并存入github账户中。 2.在hexo目录下安装git插件 1$ npm install hexo-deployer-git --save 修改配置。repo填写 github.com/userName/你要设定的名字.github.io 12345deploy: type: git repo: &lt;repository url&gt; branch: [branch] message: [message] 3.在publish文件夹里新建一个叫CNAME的文件，里边要解析的域名。4.使用hexo deploy完成上传 更换hexo主题以NextT 主题为例首先在NextT主题官网下载好压缩包，放入theme文件夹并改名为next，在_config.yml配置文件中把默认主题修改为next主题theme: next, 使用hexo s --debug测试主题是否成功启用。 解决百度无法抓取github数据使用国产git工具 coding，绑定github生成id_rsa.pub里的密钥文件到coding，建立公共仓库，开启pages服务，里边有选项一个公共仓库可以绑定五个域名。选择hexo的_config.yml,在deploy增加推送分支. 123456deploy: type: git repo: github: https://github.com/zjcwill/zjcwill.github.io coding: https://git.coding.net/zjcwill/zjcwill.git brach: master 绑定www和@解析对应不同cname的仓库，即可实现国内百度检索coding仓库下的hexo。 主动提交网站sitemap因为尝试了几次插件无法生成sitemap提交给百度站长平台和谷歌Search Console，采取第三方工具，生成后放入public中供搜索引擎使用。]]></content>
      <tags>
        <tag>hexo</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[微信公众号设计]]></title>
    <url>%2F2016%2F11%2F27%2Fwechat-desgin%2F</url>
    <content type="text"><![CDATA[大连野生动植物保护协会大连左臣便利店公众号设计 大连野生动植物保护协会 大连左臣便利店]]></content>
      <tags>
        <tag>微信</tag>
      </tags>
  </entry>
  <entry>
    <title><![CDATA[2016年设计作品]]></title>
    <url>%2F2016%2F11%2F26%2F2016-desgin%2F</url>
    <content type="text"><![CDATA[客户：前程科技 前程科技]]></content>
      <tags>
        <tag>平面设计</tag>
      </tags>
  </entry>
</search>