content.json

[{"title":"三句话","date":"2017-12-07T15:33:52.000Z","path":"2017/12/07/一句话/","text":"1如果成长的代价是愈发沉默，我可不可以选择一睡不醒。至少那样还能回到有你的日子。 2越来越不喜欢说话，越来越不主动，越来越像自己曾经最讨厌的模样。 3连第三句话，也懒得说了。就这样吧，有什么是不能接受的呢。","tags":[{"name":"life","slug":"life","permalink":"http://yoursite.com/tags/life/"}]},{"title":"浅谈Ajax请求的contentType","date":"2017-10-27T14:34:40.000Z","path":"2017/10/27/浅谈Ajax请求的contentType/","text":"在今天开发的过程中，遇到一个问题，困扰了我半天。还什么问题能为难到英明伟岸阳光乐观积极开朗的Tc？哼，不怕告诉你，多的去了。。。ok，开场尬演之后，我们进入正题。没错，这次我们要讨论的，是ajax请求里的contentType。什么是contentType，它是用来干嘛的，怎么用，下面将一层一层脱下它的内啊呸，外衣！ 1. 什么是contentType在介绍contentType之前，要先说说ajax请求。（这里就不科普ajax正确读音了，和wifi一样，顺口就行） Ajax（异步JavaScript和XML）Asynchronous JavaScript + XML, 其本身不是一种新技术，而是一个在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法, 包括: HTML or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, 以及最重要的 XMLHttpRequest object.当使用结合了这些技术的AJAX模型以后， 网页程序能够逐步快速地将更新呈现在用户界面上，不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。——form MDN Web Docs 简单点说，就是使用 XMLHttpRequest 对象与服务器通信。 它可以使用JSON，XML，HTML和文本等多种格式发送和接收。AJAX最吸引人的就是它的“异步”特性，也就是说他可以在不重新刷新页面的情况下与服务器通信，交换数据，更新页面。 2. Ajax能干什么你可以使用AJAX最主要的两个特性做下列事： 1.在不重新加载页面的情况下发送请求给服务器。2.接受并使用从服务器发来的数据。 OK,这里不深入讨论ajax了，有兴趣的老铁可以去MDN 进行深入学习了解。 3. Ajax请求参数介绍接下来正式介绍ajax请求所需参数： url:要求为String类型的参数，（默认为当前页地址）发送请求的地址。 type:要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但有部分浏览器不支持。 data:要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看下面的processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。 timeout:要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。 async:要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。 cache:要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。 dataType:要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：xml：返回XML文档，可用JQuery处理。html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。json：返回JSON数据。jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。text：返回纯文本字符串。 beforeSend：要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数 function(XMLHttpRequest){ this; //调用本次ajax请求时传递的options参数 } complete：要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。 function(XMLHttpRequest, textStatus){ this; //调用本次ajax请求时传递的options参数 } success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。 (1)由服务器返回，并根据dataType参数进行处理后的数据。 (2)描述状态的字符串。 function(data, textStatus){ //data可能是xmlDoc、jsonObj、html、text等等 this; //调用本次ajax请求时传递的options参数 } error: 要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下： function(XMLHttpRequest, textStatus, errorThrown){ //通常情况下textStatus和errorThrown只有其中一个包含信息 this; //调用本次ajax请求时传递的options参数 } contentType： 要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。 dataFilter：要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。 function(data, type){ //返回处理后的数据 return data; } dataFilter：要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。 function(data, type){ //返回处理后的数据 return data; } global：要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。 ifModified：要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。 jsonp：要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的”callback”部分，例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。 username：要求为String类型的参数，用于响应HTTP访问认证请求的用户名。 password：要求为String类型的参数，用于响应HTTP访问认证请求的密码。 processData： 要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。 scriptCharset： 要求为String类型的参数，只有当请求时dataType为”jsonp”或者”script”，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。 OK,赋值粘贴也是挺累的。看完上面这些东西，相信你也已经睡着了。那么现在我们来个实际例子提提神。我今天遇到的情况，是这样的。我要提交一个请求，需要传的参数是这样的： var perParams = { "appId": app_id, "pes": thisArr }; 其中thisArr是一个数组对象，格式如下： [ { "faceId": "RECHARGE.GET_PHONE_NO_PROVINCE", "funCode": "*" }, { "faceId": "RECHARGE.GET_PHONE_NO_PROVINCE", "funCode": "PAYEASY222" } ] 也就是说，总的参数，应该是下面这个样子的： { "appId": "F0AE8FFE78CE41C7B1A19E7CEF442A15", "pes": [ { "faceId": "RECHARGE.GET_PHONE_NO_PROVINCE", "funCode": "*" }, { "faceId": "RECHARGE.GET_PHONE_NO_PROVINCE", "funCode": "PAYEASY222" } ] } 共有两个参数，整个参数是一个复杂对象，对象嵌数组。那么问题来了，在http 请求中，get 和 post 是最常用的。在 jquery 的 ajax 中， contentType都是默认的值：application/x-www-form-urlencoded，这种格式的特点就是，name/value 成为一组，每组之间用 & 联接，而 name与value 则是使用 = 连接。如： www.qq.com/q?key=abc&value=123这是get , 而 post 请求则是使用请求体，参数不在 url 中，在请求体中的参数表现形式也是key=abc&value=123的形式。一般情况下这样是没什么问题的，因为参数结构简单，没有嵌套： { a:1, b:2, c:3 } 而我们上面要传的不是简单的JSON结构而是下面这种复杂的结构： { param1: value1, param2: [ {x: 1,y:2}, {x: 3,y:4} ] } 这个复杂对象， application/x-www-form-urlencoded 这种形式是没有办法将复杂的 JSON 组织成键值对形式(当然也有方案这点可以参考 ) ,你传进去可以发送请求，但是服务端收到数据为空， 因为 ajax 没有办法知道怎样处理这个数据。如果图片挂了，看这里： { param1:value1, param2[0][x]:1, param2[0][y]:2, param2[1][x]:3, param2[1][y]:4, } 发现没有，本来的一个JSON对象两个参数，变成了不伦不类的多个参数，那该怎么办？ 这个时候，我们发现http还可以自定义数据类型。上面也介绍了，ajax的contentType是设置的http的请求头，这个头的目的是告诉服务器端，我的请求参数是什么格式的数据，你要按照对应的格式去处理。而默认的请求头是 "application/x-www-form-urlencoded;charset=UTF-8"，也就是普通的表单提交的格式。它是不支持复杂json字符串的。如果需要后台成功接受并解析我们的参数，我们可以采用可以解析json格式的请求头，即"application/json",这样服务端可以直接拿到一个json请求参数，而不是一个一个的key value。那么事情也就简单了，只需要在ajax请求里把contentType设置成：'application/json'，然后把参数用JSON.stringify()格式化，就可以正常传到后台并接受啦。 问题又来了，为什么要把参数用JSON.stringify()格式化呢。先说说JSON.stringify()的作用：把一个对象解析为json字符串。通过对参数用typeof()比较我们知道，它是一个参数对象，直接传过去，后台会将它解析成键值对的形式，比如这样：params1=value1&params2%5B0%5D%5Bx%5D=1&pparams2%5B0%5D%5By%5D=2&params2%5B1%5D%5Bx%5D=3&params2%5B1%5D%5By%5D=4,而这样后台接受不了。因此必须用JSON.stringify()解析成 { param1: value1, param2: [ {x: 1,y:2}, {x: 3,y:4} ] } 这样，我们就可以传复杂的对象参数给后台，后台接到然后用 JSON.parse还原就行啦。 进行还原就行能顺利接受~","tags":[{"name":"Ajax","slug":"Ajax","permalink":"http://yoursite.com/tags/Ajax/"}]},{"title":"fku","date":"2017-10-26T15:39:08.000Z","path":"2017/10/26/fku/","text":"zzzz","tags":[]},{"title":"发布、更新、撤销一个npm包","date":"2017-10-26T15:09:31.000Z","path":"2017/10/26/发布、更新、撤销一个npm包/","text":"前言上次说写一个发布npm包的文章，结果又偷懒拖了不知道多少天……这次趁着有那份心，一次性把这些天遇到的问题踩的坑给填了。 1. 发布一个npm包有一说一，在学会发布之前，觉得发布npm包是一件很难很高大上的事情，觉得如果学会了会很了不起。等到自己亲自踩完这个坑之后，才发现并没有什么了不起的，没让我长高没让我变帅，更没让我脱单，这让我很是惆怅。言归正传，下面先来介绍下什么npm。 什么是npm来自官网的说明： npm is the package manager for JavaScript and the world’s largest software registry. Discover packages of reusable code — and assemble them in powerful new ways. 大白话解释： NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种： 允许用户从NPM服务器下载别人编写的第三方包到本地使用。 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。 在这里额外介绍下cnpm。由于天朝国情，国内访问国外的网站可能经常失败，而cnpm，顾名思义，china npm,通俗理解，就是’中国版’npm。因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，所以淘宝团队干了件大好事。来自官网：“这是一个完整npmjs.org镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”官方网址：https://npm.taobao.org。安装方式：命令行执行npm install cnpm -g --registry=https://registry.npm.taobao.org安装完后最好查看其版本号(执行cnpm -v)或关闭命令提示符重新打开，安装完直接使用有可能会出现错误注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm。 怎么发布npm包说完什么是npm，接下来就来讲讲怎么发布一个npm应用。我这里已经默认有了npm应用。 首先，注册一个npm账号因为你的包是要放在npm上的，所以，没有npm的账号，什么事都干不了。在npm上注册一个账号是很简单的，去官网填一下用户名密码邮箱，然后人家就会发个邮件给你，没什么比如海底电缆突然爆炸之类的意外的话，很快就注册成功了。这个是我注册后的样子：有了账号以后，我们就可以进行发布更新等操作啦。 正式发布上面偷偷摸摸水了这么多字，是不是结果感觉什么都没讲一样。哈哈不急，现在开始。 npm init 首先打开cmder(上篇文章提到过的，一个很好用的命令行工具)，通过cd 命令进入一个文件夹。我这里直接进入桌面上的一个第三方穿梭框插件文件夹了。如图： 然后执行npm init，初始化。 接下来它会问你一些问题，这些问题都是要发布的npm包信息。 name : 填写你要发布的包名字，默认是所在文件夹的名字。不过这里要着重说一下，最好先去npm上找一下有没有同名的包。最好的测试方式就是，在命令行里面输入npm install 你要发布的包名，如果报错，那么很好，npm上没有跟你同名的包，你可以放心大胆地把包发布出去。如果成功下载下来了，emMmmmm，换个包名吧老铁。 version : 你要发布的包的版本，默认是1.0.0 description : 你要发布的包的描述，用简短的语言告诉大家你的包是干嘛的。 entry point : 入口文件，一般默认是index.js，可以自定义。 test command : 测试命令，这里直接回车就好，暂时不需要。 git repository : 你的git仓库项目地址，如果你的包是先放到github上或者其他git仓库里，这时候你的文件夹里面会存在一个隐藏的.git目录，npm会读到这个目录作为这一项的默认值。如果没有的话，直接回车继续。 keyword：关键词，这个也很重要，因为它关系到有多少人会搜到你的npm包。尽量使用贴切的关键字作为这个包的索引。 author ： 不用多说，包的作者。 license ： 开源协议，直接回车或者写某个协议。然后它就会问你Are you ok?，如图： 回车或者输入y，就ok~这时候我们回到文件目录里面，发现多出来一个package.json文件，里面就是我们刚刚输入的信息。 PS：最好，写好README.md，一个给大家描述你的包的markdown文件，如果大家都不知道你的代码是做什么的，会有人去下载你的代码吗？并且最好写英文。 到这里，初始化就完成了，接下来， 登录npm账号。 如果你发现password是空的话，别怕，命令行输入密码是不会显示的 这里要说明下，第一次登录是执行npm adduser命令，然后同样是输入账号密码邮箱。 接下来，正式发布，npm publish 如果像上图那样显示,恭喜你，发布成功！ 接下来我们看看刚刚发布的包我们去可以去官网搜索（该带梯子的请自带梯子），或者打开一个新的文件夹，执行npm install 包名,能下载下来就说明发布成功了~ 2. 撤销一个包首先说明下，取消发布包可能并不像你想象得那么容易，这种操作是受到诸多限制的，撤销发布的包被认为是一种不好的行为。（试想一下假设你发布的包已经在社区内有了一定程度的影响，这时候你撤销了，这对那些已经深度使用并依赖你发布的包的团队是件多么崩溃的事情！）撤销步骤： 输入 npm unpublisj 包名来撤销发布 根据规范，只有在发包的24小时内才允许撤销发布的包（ unpublish is only allowed with versions published in the last 24 hours） 即使你撤销了发布的包，发包的时候也不能再和被撤销的包的名称和版本重复了（即不能名称相同，版本相同，因为这两者构成的唯一标识已经被“占用”了） 推荐用：npm deprecate <pkg>[@<version>] <message>代替npm unpublish。使用这个命令，不会撤销你已有的包，但会在他人尝试安装这个包的时候得到警告例如：npm deprecate penghuwanapp '别下这个包，它的老板带着小姨子跑了~' 3. 更新你的包(版本控制)当我们修改了包，该怎么更新进行版本控制呢？npm有一套自己的版本控制标准——Semantic versioning（语义化版本），如下：对于"version":"x.y.z" 修复bug,小改动，增加z 增加了新特性，但仍能向后兼容，增加y 有很大的改动，无法向后兼容,增加x 通过npm version <update_type>可以自动改变版本update_type为patch, minor, or major其中之一，分别表示补丁，小改，大改。或者直接修改package.json里面的版本号，然后npm publish也可以。 后记 其实等自己真正把整个流程走一次，会发现这是件很容易的事情。世上无难事，只要肯放弃啊呸，只要不放弃。 然后我们发布的包，一般放在类git工具上托管，便于开发。有机会再写一篇通过github进行开发的文章。","tags":[{"name":"npm","slug":"npm","permalink":"http://yoursite.com/tags/npm/"}]},{"title":"ES6模板字符串的应用","date":"2017-10-26T15:01:46.000Z","path":"2017/10/26/ES6模板字符串的应用/","text":"前言 es6出来那么久，有去看过，也有用一些语法。这次我要说的，是模板字符串的使用 今天在开发过程遇到一个问题。当我想在页面动态插入“一串”dom元素的时候，发现如果运用传统的js、jq方法，进行插入和字符串拼接，会特别特别麻烦。怎么办呢，项目又没有使用MVVM框架，不能双向绑定。后来有朋友告诉我，es6的反引号模板字符串，可以很方便的解决我的问题。接下来就见识下模板字符串的使用 1. 我要解决的问题如上图所示，我想动态添加这么一段dom到ul里面，又不想像以前那样一个一个添加，那样太麻烦。这时候想起以前看过的es6模板字符串知识，hiahia，可以派上用场啦！ 2. 什么是模板字符串话不多少，上图通过上图我们很容易就能知道模板字符串的优势。既然已经知道了它的方便，那我们来亲自试试。 我们先来看看原始的方法能做到什么程度：通过上面两张图，我们不难发现，纯粹的jquery方法是无法获得我们想要的结果，我要直接展示出1，2，3，但实际上却输出的是字符串而不是值，因为js不支持那样的写法。接下来我们看看es6的写法通过上面两张图我们不难发现，通过反引号的模板字符串，我们可以动态获取我们想要的数据，并且展示将那一段dom元素动态添加到页面里，比起传统的一个个创建元素又一个个拼接，简直不要再方便。 从遇到问题到解决问题，没花多久时间，有个很深的感想是要主动拥抱新知识，当然es6也不新了。新技术带来的便利真的让人很满足，尤其是在不用考虑兼容性的情况下，请大胆去接触并且使用新的技术吧！ 学习资源来自[阮一峰的博客](http://es6.ruanyifeng.com/?search=this&x=0&y=0#docs/string#%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2)","tags":[{"name":"es6","slug":"es6","permalink":"http://yoursite.com/tags/es6/"}]},{"title":"自己开发一款合适的脚手架工具","date":"2017-10-19T11:37:17.000Z","path":"2017/10/19/自己开发一款合适的脚手架工具/","text":"在前端刀耕火种的年代，日常的开发之中，经常会遇到这样的问题：开发新项目的时候，每次都要从旧项目复制粘贴，或者通过一个一个文件单独建立这样的手工方式去新建项目目录结构。如果是没有追求的人就算了，作为新时代有梦想有追求的我们，坚决不能忍受这种效率底下的工作方式，因此，通过工具来提升这种开发效率，势在必行。我们所做的一切，都是为了提升工作效率，重复的繁琐的无意义的事，能少做就少做。 对于新建项目来说，使用脚手架工具来协助我们开发，是一种可以接受的方案。通过短短一行命令，几个单词字母，就可以代替上面那些繁琐而无聊的工作，岂不是美滋滋。 废话有点多哈。那接下来呢，就介绍下怎么开发一款适合自己的项目目录构建脚手架工具。不难，但有意义。 为了不需要每次开发的时候都从头开始新建文件，弄个工具，使用命令能够快速的生成这样一套跑的通的项目模版，正好，有个工具叫yeoman。 1. 开发前的准备1.环境准备 开发环境没什么好说的，要安装或者更新下你的node和npm。 npm install -g n //首先安装n模块 n stable //升级node.js到最新稳定版 n 6.0.0 //或者指定版本升级 node -v //检查更新是否成功 然后安装yeoman，yeoman是开发脚手架的工具。 npm install -g yo 2.创建目录新建一个名为generator-xxx(yeoman脚手架命名规范)的文件夹。我这里就取名叫generator-hxycli。创建成功后在这个目录下用命令行工具执行npm init创建package.json文件。（命令行工具可以用系统自带的，也可以用第三方，推荐一个很好用的命令行工具cmder）。修改刚刚创建的package.json文件为： { "name": "generator-hxycli", "version": "1.0.0", "description": "自定义的前端脚手架工具、模板", "main": "index.js", "scripts": { "test": "echo \\"Error: no test specified\\" && exit 1", "dev": "node build/dev-server.js", "build": "node build/build.js" }, "repository": { "type": "git", "url": "git+ssh://git@github.com/Fun005/hxy-cli.git" }, "keywords": [ "diy", "cli" ], "author": "tangc1", "license": "MIT", "bugs": { "url": "https://github.com/Fun005/hxy-cli/issues" }, "homepage": "https://github.com/Fun005/hxy-cli#readme", "dependencies": { "chai": "^3.3.0", "chalk": "^2.2.0", "fs-extra": "^0.24.0", "mocha": "^2.3.3", "yeoman-generator": "^0.24.1", "yosay": "^1.0.5" } } 注意：package.json的信息一定要尽可能完整，不然可能上传不到generator-lists 然后在generator-hxycli目录下新建一个app文件夹，app下再新建一个templates文件夹和一个index.js文件。 generator-hxycli是整个npm包的项目文件夹。 templates 是我们要用的项目目录模板，可以自定义，是一个完整的前端项目。 index.js 是开发脚手架的主要逻辑文件。 2. 开发过程1.编辑index.js文件：var path = require('path'); var chalk = require('chalk'); var util = require('util'); var yeoman = require('yeoman-generator'); var yosay = require('yosay'); var path = require('path'); var hxycli = yeoman.Base.extend({ info: function() { this.log(chalk.green( '现在准备开始构建项目目录!' )); }, generateBasic: function() { this.directory('src', 'src'); this.directory('data', 'data'); this.copy('package.json', 'package.json'); this.copy('index.html', 'index.html'); this.copy('readme.md', 'readme.md'); this.copy('webpack.config.js', 'webpack.config.js'); }, generateClient: function() { this.sourceRoot(path.join(__dirname, 'templates')); this.destinationPath('./'); }, install: function() { this.installDependencies({ skipInstall: this.options['skip-install'] }); }, end: function() { this.log(yosay( '构建成功！' )); } }); module.exports = hxycli;//输出包名 上面就是主要的逻辑部份，具体的方法可以看yeoman官网，或者等我有时间再另外写一篇介绍。 2.上传npm包开发完成之后，我们就可以将generator-hxycli这个包上传到npm官方仓库。在这之前可以去npm官网搜索下你的包名，比如我的就是hxycli,如果搜不到，说明还没有人发布过这个名字的包。如果存在，那你得改个名字才能发布。上传步骤如下，根据提示一步一步走： npm adduser //如果没有账号，用此命令注册 npm login //如果有账号，用此命令登陆 npm publish //上传到npm官网 上传成功后命令行会提示： + generator-hxycli@1.0.0 如果你的包没有发布过，应该就没什么问题。如果报错，有可能是包重名，修改个独一无二的名字再发布即可。 3.使用脚手架开发上传完成，怎么才能使用自己刚刚开发的脚手架呢，接下来就是使用教程了。 首先全局安装yeoman（这里默认已经安装了node） npm install -g yo 然后直接安装脚手架 npm install -g generator-hxycli 在合适的地方新建一个文件夹，在此文件夹下运行： yo hxycli 这时候就会在此目录下生成以的目录结构： 细心的盆友就会发现，这个目录结构就是我们脚手架中定义的templates目录下的内容这时候整个过程就基本完成了，以后创建新项目就可以直接运行yo hxycli。不用去辛辛苦苦复制粘贴吧啦吧啦，是不是很方便！不知道大家看了有没有学会哈。 当然我还留了一些坑让自己去踩，比如运行和打包没有实现，没有结合vue+webpack实现项目构建等等，都是下一步要完成的。 tips: 上面说的运行，都是指在命令行里运行相关命令，你可以用cmd,cmder,或者在IDE的terminal里，都一样。 上面的教程还涉及到了git的使用，不会的同学可以看这里git教程 我的这个项目也和github同步了，完整项目地址访问fun005 推荐一款npm快速换源工具。因为npm官方仓库因为在国外，下载依赖可能会很慢，可以通过它来切换成淘宝的镜像。以及我想把包上传到公司仓库时，也可以通过它来快速切换。 建议采用 cnpm install，执行$ npm install -g cnpm --registry=https://registry.npm.taobao.org以后就可以用cnpm 代替npm 了。 在将另一款脚手架上传到公司的gitlab仓库时竟然出现项目过大push失败的问题，可以说是很惊奇了，这就告诉我还要考虑要压缩和精简问题。 下一篇预告：教你怎样上传一个npm包。 一开始我也什么都不知道一脸懵逼，但是有相关的任务要完成，就必须逼着自己去了解和学习新的未知知识。花一两天时间整出这玩意，还是很开心满足的，一个是学到了新的知识，第二是在学习新知识的过程中又加深了github的使用心得和了解。三是…..是什么突然想不起来了，反正有就是/手动斜眼。不过对于我这种懒人来说，压力驱动型的学习模式还是要改改，内在的学习动力才是正确的学习姿势。","tags":[{"name":"work","slug":"work","permalink":"http://yoursite.com/tags/work/"}]},{"title":"2017.9.22","date":"2017-09-22T15:31:27.000Z","path":"2017/09/22/2017-9-22/","text":"【这里应该是个标题但不知道说什么】 后台管理的，感觉有点挑战，实际上真正的挑战不多。前人种树，我去乘凉。 基础还是需要基础打扎实，这决定上限。 对新知识的学习不能止步。 好好珍惜和经营自己的职业生涯，因为它可能下一秒就结束了。 下周把后台管理v1.0完成，国庆回来直接测试上线，国庆后的第一个周末，不能加班。 时隔多天，若我能见到，算了。 周一再写吧，笔记在公司电脑。 【这里应该是一段结束语但不想说】","tags":[{"name":"work","slug":"work","permalink":"http://yoursite.com/tags/work/"}]},{"title":"2017.8.29","date":"2017-08-29T14:18:29.000Z","path":"2017/08/29/2017-8-29/","text":"##1html/css/js ##2vue.js ##3webpack/gulp ##4node.js ##5es6/ts ##6设计模式 ##7git ##8canvas ##9浏览器兼容/性能优化 ##10ps","tags":[{"name":"targets","slug":"targets","permalink":"http://yoursite.com/tags/targets/"}]},{"title":"2017.8.8","date":"2017-08-08T13:31:54.000Z","path":"2017/08/08/2017-8-8/","text":"##1.自react出现后，混合式写法开始流行，也就是css in js ，以前是追求“关注点分离”，行为样式结构三者分离的。简单说，就是一句话，不要写”行内样式”（inline style）和”行内脚本”（inline script）。React 是组件结构，强制要求把 HTML、CSS、JavaScript 写在一起。 ##2.mui移动框架，有可以参考的组件。 ##3.若button按钮没有type属性，浏览器默认按照type=submit逻辑处理，这样若将没有type的button放在form表单中，点击按钮就会执行form表单提交，页面就会刷新，用户体验极差。 ##4.快速响应是mobileApp实现的重中之重，研究表明，当延迟超过100毫秒，用户就能感受到界面的卡顿，然而手机浏览器的click点击存在300毫秒延迟（至于为何会延迟，及300毫秒的来龙去脉，请自行谷百）300ms延迟的产生缘由：移动端浏览器的默认显示宽度是980px(不同机型各异，但相差不大)，而不是屏幕的宽度(320px或其他)。为了对早期普通网页更好的体验，iphone设计了双击放大显示的功能–这就是300ms延迟的来源：如果用户一次点击后300ms内没有其他操作，则认为是个单击行为；否则为双击放大行为。（了解更多：http://www.bubuko.com/infodetail-827044.html） ##5.手机号校验：手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\\d{8}$","tags":[{"name":"work","slug":"work","permalink":"http://yoursite.com/tags/work/"}]},{"title":"2017.7.24","date":"2017-07-24T12:31:04.000Z","path":"2017/07/24/2017-7-24/","text":"px：绝对单位，页面按精确像素展示em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。 另外需注意chrome强制最小字体为12号，即使设置成10px，最终都会显示成12px，当把html的font-size设置成10px,子节点rem的计算还是以12px为基准，所以网上很多文章提到的将html的font-size设为10方便计算不是那么可取。 通过对界面字体大小em、rem、px的对比发现，第一个，预处理器的重要性，当项目里面使用的字体单位要发生改变时，比如从px换成rem，如果人工手动去改，人都要累死。但是如果用预处理器比如sassless等等，就可以节省很大的时间成本，因为预处理器可以帮忙解决。第二个，平时开发的时候尽量不要写行内样式，因为预处理器解析不到，这样当单位发生转换时，还是需要一个一个去找，很麻烦。 偶尔回想起大学里的某个片段，然后就是说不清道不明的心绪。怀念，多想能重来啊。就像梦一场，梦醒了也该结束了。有点点难受哈哈哈。 加油，你是最胖的。","tags":[{"name":"work","slug":"work","permalink":"http://yoursite.com/tags/work/"}]},{"title":"写在2017.07.19","date":"2017-07-19T13:20:58.000Z","path":"2017/07/19/写在2017-07-19/","text":"1. 开始很久没写这个了，还是有必要捡起来。 2. 踩过的坑 img标签没有value属性，用val() 或者value 取值取不到，可以设置自定义属性，比如data-value，然后用attr赋值取值。 去除左右空格，JQ方法：$.trim(str)去除回车换行：str.replace(/[\\r\\n]/g,””) 永远要对用户输入的内容进行校验，比如对输入的url进行正则检验，去除首尾的空格和换行符。 img标签没有value属性，用val() 或者value 取值取不到， 可以设置自定义属性，比如data-value，然后用attr赋值取值。 CommonJS模块特点： 所有的代码都运行在模块作用域，不会污染全局作用域。模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。想要在模块中再次运行，必须清除缓存。模块的加载顺序，按照其在代码中出现的顺序","tags":[{"name":"work","slug":"work","permalink":"http://yoursite.com/tags/work/"}]},{"title":"写在3.24","date":"2017-03-24T07:17:30.000Z","path":"2017/03/24/写在3-24/","text":"晚上回岳阳 周一回学校 看看接下来两个月会发生什么吧，心情复杂。","tags":[{"name":"work,life","slug":"work-life","permalink":"http://yoursite.com/tags/work-life/"}]},{"title":"写在3.14","date":"2017-03-14T10:26:04.000Z","path":"2017/03/14/写在3-14/","text":"1. 今日工作总结 地址信息中地区select取值和设置功能完成，但是有一个bug，当编辑地址信息后，市和区的信息在地址列表是展示的“地级市”、“县级市”，原因是取值有问题，有待解决。 编辑地址、新增地址和地址管理Js依赖的分开 添加地址成功后自动跳转到地址管理页 删除地址 编辑地址中地址信息的获取 freemaker判断省市名称是否一样，一样的话只显示其中一个，待解决 手机号中间四位数以** 显示，待解决 2. 生活随想 今天周二，周五工作要基本完成 距离某智障生日还有364天 /手动斜眼 距离回校还有十来天 距离发工资还有一天 /手动捂脸 3.知识点本来以为jQuery("#select1").val();是取得选中的值，那么jQuery("#select1").text();就是取得的文本。这是不正确的，正确做法是：jQuery("#select1 option:selected").text();","tags":[{"name":"work","slug":"work","permalink":"http://yoursite.com/tags/work/"}]},{"title":"三月十三，你的生日","date":"2017-03-13T15:06:59.000Z","path":"2017/03/13/20170313/","text":"1. 工作发现自己不爱提问这毛病真的蛮蛋疼，自己瞎懵半天，没什么成果，其实挺简单的一个问题，好好问问就会豁然开朗了。这个毛病必须改，要不然不会有进步，没什么不好问的，大家都很热心，职业生涯一开始遇到这样的带路人，也是很幸运的一件事。然后有感觉到自主思考能力的进步。没去及时提问，一个小小的原因是想自己思考出来，结果一想就。。没了，奈何知识储备不够，搞得自己头昏脑胀。不过这也算积极的反馈吧，多想多思考总不是坏事。然后工作遇到问题虽然心情有点压抑，但是这样的压抑来再多都不怕甚至希望能经常压抑压抑。因为这代表着进步啊，哈哈。最后还是很懒，有时间不想着多学点东西，就知道玩手机== 2. 生活今天是一个特殊的日子，今天就感觉像过年啊朋友们。什么日子，你的生日。昨晚11点半开始坐床上用手机码字，有些想说的话，写了一堆有的没的，写到零点。然后赶紧去给你发消息祝生日快乐，结果你睡了。。。多的我也懒得想，在这方面，能不想事就不想。码了半个小时的字也没想给你看，嘿嘿，说不定就没了。认识六年半咯，6年啦，好长。才6年，远远不够。等下一个6年，十年，看看会发生什么吧。感情这回事，最不怕的，就是卑微。最不缺的，就是心甘情愿。我等着最后的结果，无论何时来临。","tags":[{"name":"life is what u can't get","slug":"life-is-what-u-can-t-get","permalink":"http://yoursite.com/tags/life-is-what-u-can-t-get/"}]},{"title":"2017.3.9每日总结","date":"2017-03-09T12:09:19.000Z","path":"2017/03/09/2017-3-9每日总结/","text":"1. 今日工作相关 今天完成了注册界面的数据通信，对整体流程更加熟悉。这是一个好现象。但是不足的地方依旧很多，慢慢来吧，胖子不是一日养成的，我要变胖~ 然后，对后台工作逻辑有了一定的熟悉，另一种思维吧。没事还是要多思考，想着想着就(￣︶￣)↗ 涨姿势了。 工作进度。有点慢，月底就要回学校了，时间很紧迫，要时刻提醒自己，提升专注度，加快进度，争取在回校之前完成自己的全部任务。 2. 其他 今天向文彬哥和淑君说了请假的事，其实请2个月我也有点不好意思，但是谁让我们这一届总是遇上第一次，第一次中期答辩，没办法。哇说起这个就想到毕业设计还没怎么动，下个月的这个时候就中期答辩了，好慌。。 给山大王买生日礼物被拒绝了，本来是想我买我的不管，但是想了想，怕她不开心。。算了。 然后，凭我语文满级的水平，还是看不懂那段话，有点伤啊，有点伤，欺负我缺乏艺术细胞是吧。 最后，由于不带电脑回宿舍，文章现在在公司发了，带本书回去看。本来想用手机刷慕课网，一想到那个网速。。 over，good night。","tags":[{"name":"work","slug":"work","permalink":"http://yoursite.com/tags/work/"}]},{"title":"今日总结","date":"2017-03-08T14:44:26.000Z","path":"2017/03/08/今日总结/","text":"随着工作的深入，越来越发现自己的不足，无论是从经验上还是从技术上。必须要抓紧时间提升自己水平。今天除了界面的部署，在和后台通信方面寸步难行。对于公司框架的不熟悉，对于请求数据的不熟悉，多种“新知识”同时灌过来，好容易被呛死。加上后台的接口也不对，整个人都是懵逼的。唯一的欣慰在于不只是感受到了自己的不足，更清楚感受到了进步的空间和过程，这点很开心。 这些天写的文章都是灌水瞎扯淡，因为没什么时间去写技术性的。这个周末吧，也不打算出去透透气了，睡个懒觉起来学点东西，写点文章。学习真的能让人感觉到快乐。不知道什么时候会有那份心去多看点书，非技术的。拖延癌晚期的我。加油吧。 希望明天顺利完成自己的工作，多问多想多做。还有，不要失眠睡不着。","tags":[{"name":"work","slug":"work","permalink":"http://yoursite.com/tags/work/"}]},{"title":"此时此刻","date":"2017-03-07T15:39:23.000Z","path":"2017/03/07/此时此刻/","text":"1. 换了个主题 2. 明天添加音乐和favicon 3. 还有三周回学校，心情复杂 4. 失眠第三天 5. 不经意间发现的总是最美最伤人 6. 晚安","tags":[{"name":"life is what u can't get","slug":"life-is-what-u-can-t-get","permalink":"http://yoursite.com/tags/life-is-what-u-can-t-get/"}]},{"title":"每日总结","date":"2017-03-07T11:24:06.000Z","path":"2017/03/07/每日总结/","text":"1 写在前面最近公司任务比较多，随之而来的“疑难杂症”也变多，有点点烦。 2 工作相关 今天做的是注册登录界面的部署，从本地部署到生产环境。怎么说，难度不大，但由于是大姑娘上花轿—头一回，所以还是有点新鲜。 上午还是顺风顺水，一路没什么问题。到了中午快下班的时候，意想不到的问题发生了。由于部署到生产环境要对文件结构进行改动，因此产生了跨模块访问资源的问题，在非公共资源模块的CSS里访问公共资源模块会报错。具体来说是图标字体设置，background:url(),url的路径怎么设置都不对，访问不到。搞了一下午都没解决，后来发现控制台报的是status code:500,组长看了后和我说是服务器的问题。其实一开始也注意到了这个，还去bing了几次，没找到什么有价值的答案，想着会不会是跨域请求的原因。这个问题还是没有解决，明天再看。 上面这个问题衍生出来一个知识点：background和background-iamge的关系，具体来说后者就是前者的细化，可以只用background再加具体属性。推荐这种方式，因为对浏览器比较友好。 3由于最近公司业务较多，博客的升级进度会没那么快，慢慢来吧。但是争取每天一篇文章。","tags":[{"name":"work","slug":"work","permalink":"http://yoursite.com/tags/work/"}]},{"title":"博客待解决问题","date":"2017-03-06T15:25:28.000Z","path":"2017/03/06/博客待解决问题/","text":"折腾了一晚上，还是有一些问题没有解决，记录下来 1左侧栏头像显示问题，在移动端会只显示出上半部分。头像大小也不是原始比例展示。网上的方法有点过时，等明天查查yilia主题官方文档再看。 2个性签名下面有一个小房子图标没有显示出来，留着解决。 3添加网易云音乐，待完成。 4右侧文章只展示概要，待解决。 5添加相册功能 6友情链接 7先就这么多了，有时间慢慢完成。 8favicon 9晚安。","tags":[{"name":"blog","slug":"blog","permalink":"http://yoursite.com/tags/blog/"}]},{"title":"关于这个博客","date":"2017-03-06T13:08:07.000Z","path":"2017/03/06/关于这个博客/","text":"1关于有个博客的想法，是很久很久以前的事情了，那时我还被小伙伴们称为岳阳胡歌。。 2就像我们知道的，开个博客有三种方式。 一是在新浪、简书、博客园等地方直接申请一个，简单又省事。不过这种方式开通的一没有挑战性，第二个收到的限制大，所有没有考虑。 第二是我现在这种，利用github和流行的博客模板做一个，虽然也很傻瓜式，但好歹自由度高点，也有成就感。 第三是自己写一个，自己配置服务器，这种自由度最高也最难。以前也有用node模仿过一个就很简陋的博客，但是由于没有在node上深入了解，后来弃置了。 关于用github做一个，还是室友立娃提供的想法，那是三年前。。然后去年买了一个域名，买完后就懒癌复发，把这事丢到了一边。直到前些天在知乎看到一个hexo+github建博客的教程，心想刚好可以折腾下，给生活添加点新鲜感，于是今天忙(闲)里偷闲，整出来一个。特别容易。不过好歹也是一个博客，希望自己能在这里经常种花种草，记录自己的成长经历，也是蛮有意义的。 3四月份回校尽量在以前的基础上，完成第三种方式的吧，毕竟域名都买了，不用挺可惜的。 4博客还处于起步阶段，我会慢慢把该有的功能都添加上来。","tags":[{"name":"start","slug":"start","permalink":"http://yoursite.com/tags/start/"}]},{"title":"Tc的测试文章","date":"2017-03-06T10:05:16.000Z","path":"2017/03/06/测试文章/","text":"这是一篇测试文章，欢迎关注作者的博客：https://Fun005.github.io**博客","tags":[{"name":"test","slug":"test","permalink":"http://yoursite.com/tags/test/"}]},{"title":"Hello World","date":"2017-03-06T09:49:41.102Z","path":"2017/03/06/hello-world/","text":"Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. Quick StartCreate a new post1$ hexo new \"My New Post\" More info: Writing Run server1$ hexo server More info: Server Generate static files1$ hexo generate More info: Generating Deploy to remote sites1$ hexo deploy More info: Deployment","tags":[]}]