Coder Social home page Coder Social logo

moxiaohe.github.io's People

Contributors

moxiaohe avatar

Stargazers

avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar

Forkers

cantianshu eliid

moxiaohe.github.io's Issues

记录10.25杭州D2前端技术论坛

行程

也先记个流水账吧。

这次活动我以为是阿里的嘉年华，没想到居然是D2，顿时兴奋得都要跟主题一样了。

D2的确是前端的盛会，再加上这次的主题是《绽放》，微博微信上提前几天就可以看到基友小伙伴各种邀约。

我也和我的同事们：rubyless、EdieHappy还有33、凯子，就这样25号一大早就出发了，为此还特地拍照一张，赋诗两句，哈哈。早上7点40的高铁，9点半到杭州的，本来预留1小时可以到从杭州东到阿里园区，没想到阿里的西溪园区居然离城区这么远，愣是花了一个半小时才到。大家想了想，还是民工xufei和吴双机智，提前一天就出发了。

上午在主会场听的是百度张可竞《指尖上的数据》，那时还不知道分会场在哪，没赶上分会场苏千的《前后端分离》，据说分会场早只有地上可以坐了，只能等放视频PPT我来围观一下了。

下午的话题围绕node、蘑菇街的多端技术架构还有前端工程化自动化。听到最后，感触很多，下面再一一补充。

晚上差不多5点50结束分享，离回去还有一段时间，就跟飞哥去参加酒会，席间又见到了携程的CSS女神点头猪、淘宝的元彦还有SegmentFault欢乐的五花肉，一起愉快的调侃了民工xufei几句，等见到豆瓣张克军的时候，大家都沉默了，我是深深的被他的艺术魅力折服，不知道另外几位是怎么了。

虽然没有听到酒会上精彩的分享，也只在酒会喝了一瓶可乐回来了，但拿到了跟点头猪女神的合影，我可以满意的闪了。本来跟她不熟的，但第一次听她分享就被她幽默诙谐的演讲还有慢慢幽幽的演讲说话风格吸引了，也为她惊叹的技术所折服，为此给我们部门的妹子们找到奋斗的目标。

唯一的遗憾就是没有找到小胡子哥为我们部门单身的温柔贤惠漂亮的EdieHappy拍组照片上墙，看来我又多了一个目标，以后多给她打广告，哈哈，这算第一个吧。

还有一丝不以为意的遗憾就是没有在美丽的杭州多玩一会，不过我想以后应该还有机会，下次带着我家那位因为没带她而吃了一天泡面的猫爪再来。

内容

可以说，在去之前，对我们团队的技术发展的展望只能到一个季度或者说半年。比如，我们在来之前所沟通的，2015年之前要立足于团队的基础设施建设，这包括团队成员协同编码开发的自动化平台和我们所创造或者借助的工具的优化，以及我们对性能优化工作常态化，等等。但在听的过程中，感觉到了大家都在追求的方向或者说是为提高前端生产力所做出努力，比如：多终端融合、前后端分离、前端工程化等等，于是，根据我们的现状，我们在今后业务模式基本确定的情况下，都可以明确两三年内的技术路线和所要达成的目标。

内容之多终端

提起前端，近两年大家谈论最多的就是H5和CSS3了，上次在携程，阿当兄对前端从web到PDA端的转型的分析，我觉得是对H5技术的发展和未来最好的论述了，多终端以为着多种展现形式，但最归要有一个本体来支撑这些多种方式的界面展示，可以看得出大家心中的呐喊，那就是对数据和接口服务化以及对前端人员也相应提出的开发方式的研究和转变。

由于我目前还没有转型去做非PC端的开发，这个话题暂不多记录讨论了吧。

内容之nodejs

这个是在大会上讲的最多的词汇，而且也是近两年非常热门的话题，究其原因，就是前端工程师不满足于只局限在切图和效果，不满足于自己辛辛苦苦做出的页面被后端肆意践踏蹂躏，终于，nodejs出现让前端工程师几乎可以踢开后端，让自己最熟悉的语言也跑在服务器上，可以存取数据、渲染模板、监控行为等等。林楠在《nodejs一小步 前端开发一大步》的话题中，通过多个角度比较了nodejs和PHP，得出我们使用Nodejs的多般好处，还讲了他们使用nodejs的一些发布和运维中的实践。

内容之工程化

工程化的话题，应该说是从去年的下半年开始被提起的，第一个提出的不知道还能否考证，但这个**却是前端在发展这么多年后应该要身体力行的，否则万法不归仍旧百花齐放，难以形成一个系统化的学科工种。也许这个理论来自软件工程化，借鉴了软件工程化所要求的系统化、规范化、数量化的要求，再加上自动化、结构化，就形成了前端工程化的理论。

下午场分别是京东刘威分享的《京东前端工业化实践之路》和阿里的《淘宝前端工程与自动化体系》两个话题，我最后选择了听跟我们业务模式较接近的京东的工业化实践。京东在工程化上的实施已经有一年之久了，可以看出他们已经走得很远了，尽管过程还不成熟，结果也不是最好的。京东可借鉴的两个内容一个是模块云的方式，另一个是文档采用生成的方式。模块云是把一些公共的模块封装好后上传到服务器上，当然，这些模块不仅包含了特定的目录结构，也包含了所需的数据模块和解析。模块在任何开发者需要时被下载，这就减少了重复开发的工作量，这种方式跟我之前设想的，像管理npm包一样管理公共组件模块的**有点类似，但这需要有专人维护这些模块，而且提供相应的手册文档，存在这些模块的前提是业务需要有这种考虑，存在这些业务场景。文档生产的方式，也许解决了模块所需的文档的问题。京东的这些规定项目开发的方式再加上其自动化发布和调试，构成了他们的工程化，可以说有了一定的工程化的基础，将很多的重复的工作让机器去完成，比如：压缩、合并、检查、打包发布，等等。

其它

还记得的就这么多了，先做个记录，更多感兴趣的内容还需要按照PPT以及自己平常在推动项目中的实践中来学习。

题外话

  • 这次大家参加者大部分都是前端，从今年我带团队以来，深刻领悟到一点，那就是前端工程师，是最有情怀的工程师，以至于网上流传一个段子，情怀值三千。前端工程师的特性决定了大家很容易惺惺相惜，形成自己的一个基友圈，这种前端届的盛会，参与的另一个最重大的意义就是见老基友，认识新基友了。
  • 参与大会的期间，虽然很赶，没有游玩杭州，但阿里的环境也还是吸引了我，跟同去的伙伴们也是各种比较，我个人认为，阿里的互联网文化还是很浓重很开放的，整个园区就像一个很大的高校校园一样。
  • 这次大会的内容分为主分会场，主会场由bat及其他公司的嘉宾带来的分享，分会场是阿里的专场，这样大家可以选择自己喜欢的课题内容来听，但遇到两个都想听的那就只能靠分身之术了，就像我下午场工程化就想两场都想听一样。
  • 以前自己在公司和团队内部也进行过很多次分享，拿着苏宁大学认证的讲师，也培训过入司的两届毕业生，但这种大型的专业分享会，感觉还是会怯场。听了这么多，也总结出能够讲好的一些办法，自信和充分准备自不必说，我想说的是，还需要有一些演讲的技巧，比如幽默的、配合一些肢体语言的，还要能够时不时的黑一黑基友的，哈哈。
  • 最后的酒会，我也就待了半个小时，但认识了几个微博上偶尔聊几句或者只默默关注的朋友，点头猪、五花肉和小雪，尤其元彦，是分会场主持人，确实是参加过多场各种交流会的大神，主持论坛也是轻车熟路，交流话题也能分析得很到位。跟他聊了一会nodejs的推广上他们的经验，感觉确实需要天时地利人和，时机不成熟，还是先继续改造我们的土壤吧。

以上over，就是2014年10月25日D2前端技术论坛的一些人一些事一些话题。

南京信息工程大学校园宣讲/分享会

12月7号，冬日阳光明媚的一天，确实很难得。一行人受邀跟着民工精髓V去浦口的南京信息工程大学做公司前端对外的第一次校园宣讲会。

历经两个多小时的车程，终于到了这个只闻其名，未知其声的南信大，学校的碉堡的专业好像是气象相关的，好多教学楼上都有个圆形的大球，跟天文观测的差不多。

信息工程，这个名字也带领着一大批的爱好IT行业、编程工作的同学投身软件开发的大军。学校专门有个团队叫多火IT社团，我以前就听说过，这次来第一次接触了这个社团，人气的确火爆。

12点多大家总算到齐了，这次我们苏宁主要去了十个前端开发的人员，网购是我和rubyless、老于、翟经理 四人去的，还有移动的象跑跑，金融的光黄进，我们决定先观察一下，一方面我们学习一些在学校宣讲的方法经验，一方面也接触一些爱好前端的同学，为后面的人才储备做好准备。

一起吃过午饭后，大概是2点，开始时间是2点半，到预定的教室后时间差不多。之前我们在公司豆芽群和微信群大概设想了一下演讲的内容、方向和顺序，他们都做了一些准备，我设想的会是一种face to face的交流，而且应该没多少人，应该是回答一些问题，就没做太多的准备，在路上我们还戏称，会不会我们去的人都比参与宣讲的人多。但到了以后，还是着实下了一跳，一个大教室，前面一半基本坐满了，应该有100人左右吧，怕怯场，我就在飞哥讲的时候，默默的在那写提纲做demo。

单独说一下，主持人小姑娘还是挺漂亮的，不像D2，找了个大叔当主持人。

第一个上台主讲就是徐飞了，这次的活动也是南信多火社团联系邀请他的，他撮合了我们几大事业部中心能够一起去参加。他讲的主要是前端的发展史和前端在发展历程中的一些大事件和知识，比如W3C标准规范组织、浏览器之争等等，后来讲到了最近比较热门的一些东西，比如组件化、模块化、工程化，等等，这些高大上的概念，深深的吸引了这些懵懂的前端爱好者，应该很快会有一大批前端要诞生了。

后面我上台的，还好飞哥讲的时间比较长，大概一个半小时吧，我也做好了准备，我主要从三大语言、表现、结构和行为的结合和分离、浏览器的渲染和解析几方面讲的，主要是帮助一些有兴趣但还观望的同学们能够有个基本的认识，能够系统化的了解前端的原理和知识结构，让他们能够少走弯路，尽快入门。列的提纲大概跟我原先想的差不多，本来只讲知识的，想了想，还是把浏览器原理也讲一下吧，就把解析、渲染和浏览器宿主环境特征也简单介绍了一下，算是半脱稿，想用很大的声音来获得气场，所以没带话筒，灯光很黑暗，我想我脸红他们也看不到，于是乎就大胆的在那滔滔不绝、眉飞色舞了。

感谢土豪徐飞为此次活动赞助的提问和抽奖书籍。

最后是朱小贱上台，他很机智的想到了我们会讲一些知识、技能等等的枯燥乏味的东西，用照片图片的方式，介绍了我们的工作环境、我们的公司和团队等，最后用微信摇一摇抽奖，也比我们提问的方式抽奖新颖，显得整个过程不那么单调枯燥。

整个的演讲和提问环节也都很顺利，不过据说我回答的一个问题回答的不好，后来才知道是我没理解提问者真正的问题所在，那位同学看到可以单独找我一下。

最后在走的时候，主持人MM、社团几个成员和我们合了影，我旁边的主持人MM笑得好开心啊。

早在年初的时候我就有过这种想法，那时跟公司负责校招的马琦碰过我的想法，他也非常支持，而且在南航已经开了培训课程，可是就在准备要各大高校轮回宣讲的时候，他居然跑路去别的公司了。通过这次活动，也接触了校招的许淑鑫美女，她会带领我们完成后续的规划和梦想，这个梦想就是改善南京的前端生态环境。这次，迈出了非常成功的第一步。

期待后面南邮活动的到来，也期待更多的我厂前端大牛跟我们一起。@胖纳特 @陈总 @涛哥

使用多种姿势上传图片

tags: 图片上传, multipart, 截图上传, file对象, FormData, 拖拽上传图片, dataTransfer, readAsDataURL

一个如下所示的发布框，经常会出现在各种微博、社区、论坛站点上，这类发布形式虽然没有高级编辑器那样可以任意排版加工，但也满足了常见的表述观点意见的要求，它通常搭配一些表情、文件上传、分享网页视频等方式，来满足上述需求。最近我从事的一个项目中，就完成了如下图示的发布内容的需求，今天主要讲一下其中图片和附件的上传发布方式。

其实上传的方式有很多种，本文将列举需求中用到的几种上传方式。

image

1. 表单上传

也就是用传统的form表单来上传，使用form表单的input[type="file"]控件，可以打开系统的文件选择对话框，从而达到选择文件并上传的目的，它的好处是多浏览器兼容，但是在多图上传、分段上传上等高级特性上就显得力不从心。

表单的格式如下：

<form method="post" action="http://uploadUrl" enctype="multipart/form-data">
    <input name="file" type="file" accept="image/gif,image.jpg" />
    <input name="token" type="hidden" />
    <input type="submit" value="提交" /> 
</form>

我列出表单上传所需的关键几点：

  • method="post"： 采用post方式提交数据
  • enctype="multipart/form-data"：采用multipart格式上传文件，此时request头会显示 Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryzr34cwJ67R95KQC9
  • action：标明上传的服务端处理地址
  • type="file"：使用input的file控件上传
  • accept属性是HTML5的新属性，它规定了可通过文件上传提交的文件类型
  • 上传的触发事件可以是：input[type="file"]的onChange触发，也可以由一个独立的按钮的onClick使整个表单提交，此时还可以用input[type="hidden"]带一些其它的参数，比如Token来源验证等等。

2. Ajax无刷新上传

ajax无刷新上传的方式，本质上与表单上传无异，只是把表单里的内容提出来采用ajax提交，并且由前端决定请求结果回传后的展示结果，不用像直接表单上传那样刷新和跳转页面。在这里，我们采用jQuery来作为操作DOM和创建ajax提交的js基础库。

html代码片段如下：

<form>
    <input id="file" name="file" type="file" />
    <input id="token" name="token" type="hidden" />
</form>

javascript代码片段如下：

$("#file").on("change", function(){
  var formData = new FormData();
  formData.append("file", $("#file")[0].files);
  formData.append("token", $("#token").val());
  $.ajax({
      url: "http://uploadUrl",
      type: "POST",
      data: formData,
      processData: false,
      contentType: false,
      success: function(response){
              // 根据返回结果指定界面操作
      }
  });
});

我们使用了file控件的change来触发上传事件，当然你也可以使用某个按钮来触发表单提交。提交数据时，我用到了FormData对象来发送二进制文件，FormData构造函数提供的append()方法，除了直接添加二进制文件还可以附带一些其它的参数，作为XMLHttpRequest实例的参数提交给服务端。

如下是Firefox MDN对FormData的解释。

XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.
https://developer.mozilla.org/zh-CN/docs/Web/API/FormData

BTW: 使用jQuery提供的ajax方法来发送二进制文件，还需要附加两个参数：

  • processData: false // 不要对data参数进行序列化处理，默认为true
  • contentType: false // 不要设置Content-Type请求头，因为文件数据是以 multipart/form-data 来编码

3. flash上传

很多时候上传的需求都不是只局限于单图上传，而且需要显示上传进度、中断上传过程、大文件分段上传等等，这时传统的表单上传无法实现这些功能，于是产生了使用Flash上传的方式，它采用Flash作为一个中间代理层，代替客户端跟服务端通信，此外，它也对客户端的文件选择方面拥有更多的控制权，比input[type="file"]要大得多。

在这里我使用了jQuery封装好的uploadify插件来进行演示，一般这类插件都自带了上传用的Flash文件，因为跟服务端回传的数据和展示跟客户端的交互，都是Flash文件的接口跟插件来对接的。

<div id="file_upload">

html部分很简单，预留一个hook后，插件会在这个节点内部创建Flash的object，并且还附带创建了上传进度、取消控件和多文件队列展示等界面。

$(function() {
  $("#file_upload").uploadify({
      auto: true,
      method: "Post",
      width: 120,
      height: 30,
      swf: './uploadify.swf',
      uploader: 'http://uploadUrl',
      formData: {
          token: $("#token").val()
      },
      fileObjName: "file",
      onUploadSuccess: function(file, data, response){
          // 根据返回结果指定界面操作
      }
  });
});

选择一个文件后，html代码如下所示：

<!--上传Flash-->
<div id="file_upload" class="uploadify" style="height: 30px; width: 120px;">
    <object id="SWFUpload_0" type="application/x-shockwave-flash" data="./uploadify.swf?preventswfcaching=1463109060389" width="120" height="30" class="swfupload" style="position: absolute; z-index: 1;">
        <param name="wmode" value="transparent">
        <param name="movie" value="./uploadify.swf?preventswfcaching=1463109060389">
        <param name="quality" value="high">
        <param name="menu" value="false">
        <param name="allowScriptAccess" value="always">
        <param name="flashvars" value="...">
    </object>
    <div id="file_upload-button" class="uploadify-button " style="height: 30px; line-height: 30px; width: 120px;">
        <span class="uploadify-button-text">SELECT FILES</span>
    </div>
</div>
<!--上传队列和文件操作、进度展示-->
<div id="file_upload-queue" class="uploadify-queue">
    <div id="SWFUpload_0_0" class="uploadify-queue-item">
        <div class="cancel">
            <a href="javascript:$('#file_upload').uploadify('cancel', 'SWFUpload_0_0')">X</a>
        </div>
        <span class="fileName">1111111.png (144KB)</span>
        <span class="data"></span>
        <div class="uploadify-progress">
            <div class="uploadify-progress-bar"><!--Progress Bar--></div>
        </div>
    </div>
</div>

更多的API和配置请参考jQuery.uploadify 官网APIs
美中不足的是，mac下会对Flash有各种各样的限制，甚至不支持，所以使用的时候也要慎重考虑。

4. 截图粘贴上传

目前只有较大的几家SNS和微博类型的站点发布框实现了这个功能，本着业界良心和用户至上的原则，我们也在内外站点开发的早期上线了此功能，此次只是对上传接口的改造，在这里简单的把上传过程和用到的内容介绍一下。

首先，截图粘贴上传的核心**是，监听粘贴事件，然后获取剪切板中的数据，如果是一张图片，则触发上传事件。
代码片段如下：

$("textarea").on("paste", function(e){
   e.stopPropagation();
   var self = this;
   var clipboardData = e.originalEvent.clipboardData;
   if (clipboardData.items.length <= 0) {
       return;
   }
   var file = clipboardData.items[0].getAsFile();
   if (!file) {
       return;
   }
   var formData = new FormData();
   formData.append("file", file);
   formData.append("token", $("#token").val());
   $.ajax({
       url: "http://uploadUrl",
       type: "POST",
       data: formData,
   }).done(function(response) {
       // 根据返回结果指定界面操作
   });
   e.preventDefault();
});

从上面代码可以看出，上传的过程都是一样的，主要是获取文件的方式。
当进行粘贴（右键paste/ctrl+v）操作时，触发剪贴板事件'paste'，从系统剪切板获取内容，而系统剪切板的数据在不同浏览器保存在不同的位置：

  • IE内核：windows.clipboardData
  • 其它：e.originalEvent.clipboardData

https://www.w3.org/TR/clipboard-apis/

5. 拖拽上传

拖拽上传的方式，支持的浏览器比较少，因为它用到了HTML5的两个新的属性（API）一个是Drag and Drop,一个是File API

上传域监听拖拽的三个事件：dragEnter、dragOver和drop，分别对应拖拽至、拖拽时和释放三个操作的处理机制，当然你也可以监听dragLeave事件。

HTML5的File API提供了一个FileList的接口，它可以通过拖拽事件的e.dataTransfer.files来传递的文件信息，获取本地文件列表信息。

File API在HTML5规范中只是草案，在 W3C 草案中，File 对象只包含文件名、文件类型和文件大小等只读属性。但部分浏览器�在草案之外提供了一个名为 FileReader 的对象，用以读取文件内容，并且可以监控读取状态，它提供的方法有： "readAsBinaryString" ，"readAsDataURL" ，"readAsText" ，"abort" 等。

参考MDN https://developer.mozilla.org/en-US/docs/Web/API/File

代码片段如下：

// dragenter
$("#textarea").on("dragenter", function(e){
    e.preventDefault();
});
// dragover
$("#textarea").on("dragover", function(e){
    e.preventDefault();
});
// drop
$("#textarea").on("drop", function(e){
    e.stopPropagation();
    e.preventDefault();
    var files = e.originalEvent.dataTransfer.files;
    _.each(files, function(file) {
        if (!/^image*/.test(file.type)) {
          return;
        }
        var fileReader = new FileReader();
        fileReader.onload = function() {
          //uploadFile(file);
        };
        fileReader.readAsDataURL(file);
    });
});

拖拽上传过程中的几个关键点：

  • 在drop事件触发后通过e.dataTransfer.files获取拖拽文件列表，在jQuery中是e.originalEvent.dataTransfer.files
  • 拖拽上传仅支持图片，文件对象中file.type标识了文件类型
  • 由于可能是多图拖拽，所以可以遍历图片上传，这里用了Underscore的each方法
  • 这里用readAsDataURL读取文件内容为二进制文件，你还可以将其转换为Base64方式上传，只是http协议里面存在对非二进制数据的上传大小限制为2M。
  • 上传的过程跟前面的方式相同，即：创建FormData对象并发起Ajax请求

总结

  1. 以上各种方式分别试用不同的场景，并无高下之分。
  2. 后面集中方式只有高级浏览器才支持，所以仅算是体验上的增强。
  3. 对于这些方式，阿里巴巴信息平台的uxcore框架已经封装了成型的组件且用在了我们日常的项目中，欢迎使用。传送门 uxcore-uploader

也谈前后端分离

也谈前后端分离
本来我只想坐在黑暗的角落里安静的写代码，但我最终没有这样做，很多事都已忘记，但我现在还记得，我和我的小伙伴是不是被叫去后端那边调我们写的原本完美的前端代码，在那里所做的都是被他们蹂躏过的不堪入目的前端代码，原本缩进对齐的代码，在那里，变成了千万只草泥马在奔腾，原本符合w3c规范的dom结构，在那里被扒皮掏心，原本我们组织好的目录结构，在那里放的连他们都不知道资源文件，你在哪里我该怎么引你，看着他们可怜的躯体和痛苦的表情，作为孩子的乳母代码的父亲，我岂能袖手旁观怎可就此了之，无奈，码农何苦为难码农，在心里骂了他们千百遍嘴上抱怨几句后，还是得改好，然后看着无辜的代码幽怨的离去。

那一天午后，我的老婆问我，今天怎么不开心，我想，我应该有一种魔法棒，能够减少前端人员的痛苦，拉低前端与后端人员的仇恨值。

未完待续

自己整理的可快速记忆的git命令

整理文档发现这个，觉得还是放在网上靠谱。

git config [--local|–-global|–-system]
-e 查看或编辑配置文件
--get user.name 查看某个配置项
--unset user.name 删除某个配置项
--list,-l 查看所有配置项
--add user.age 18 增加一个配置项

git branch 查看本地分支
git branch aa 创建本地分支aa
git checkout aa 切换到aa分支
git checkout -b ccc 创建一个分支ccc并切换过去
git branch -d aa 删除本地分支aa
git branch -D cc 丢弃一个没有被合并过的分支
git push origin aa 分支推送到远程服务器
git push --delete origin ccc 删除远程分支ccc
git remote add origin [email protected]:/opt/git/code.git 本地已有仓库与远程仓库关联

git add aa.txt, git add . 添加修改到暂存区
git add --a
git commit -a 提交所有
git ci -m "提交描述" 提交文件
git status 查看版本状态
git diff aa.txt 查看文件变更
git log 查看提交日志
git log --pretty=oneline 单行显示日志，去掉提交时间
git reflog 显示操作历史

git reset --hard HEAD^ 回退到上一个版本
git reset --hard HEAD^^ 回退到上上个版本
git reset --hard HEAD-100 回退到倒数100个版本
git reset --hard 3628164 回退到某个ID的版本

git checkout -- readme.txt 丢弃工作区的修改
git reset HEAD readme.txt 撤销暂存区的修改
git reset HEAD . 撤销暂存区的所有修改
git rm test.txt 删除版本库文件

git add *.py 大量文件一次性add进来
it reset HEAD 1.py 要排除掉其中一个文件

git merge ccc 合并某分支到当前分支（Fast forward模式）
git log --graph --pretty=oneline --abbrev-commit 图形化显示合并详情
git merge --no-ff -m "merge with no-ff" dev 用普通模式合并，合并后的历史有分支

git stash 临时储存工作区的修改
git stash list 查看储存的列表
git stash apply 恢复工作区
git stash apply stash@{0} 恢复指定的stash
git stash drop 删除stash储存的内容
git stash pop 恢复的同时把stash内容也删了

git remote 查看远程库的信息
git remote -v 显示有权限抓取和推送的origin的地址
git push origin dev 本地dev分支推送到远程
git checkout -b dev origin/dev 创建远程origin的dev分支到本地（创建本地dev分支）
git branch --set-upstream dev origin/dev 指定本地dev分支与远程origin/dev分支的链接（关联本地分支与远程分支）

git tag v1.0 打一个新标签
git tag 查看此repostory的所有标签
git tag v0.9 6224937 对某次提交打标签
git show v1.0 查看标签信息
git tag -a v0.1 -m "version 0.1 released" 3628164 创建带有说明的标签，用-a指定标签名，-m指定说明文字
git tag -s -m "blablabla..." 可以用PGP签名标签
git tag -d v0.1 删除标签
git push origin v1.0 推送某个标签到远程
git push origin --tags 推送全部未推送过的本地标签
git push origin :refs/tags/v0.9 删除远程标签

.gitignore 增加忽略文件
设置别名快捷键
git config --global alias.st status
git config --global alias.co checkout
git config --global alias.ci commit
git config --global alias.br branch
git config --global alias.last 'log -1' 配置一个git last，让其显示最后一次提交信息：
git config --global alias.lg "log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit" 显示分支提交合并信息

前端开发中的软件工程学

前端开发中的软件工程学

早上睡不着，半睡半醒之间，想到了一个概念：前端开发中的软件工程学。

首先，我为什么要研究这个概念

原因主要有三点：

第一，很多人都只认为前端约等于美工，所做的事无非是切图，高保真，demo，你看，大部分的大约80%的前端工程师，都是在做这个，但我知道并不是这样，前端是一个技术革新非常快的岗位或者说是领域，她介于设计和后端开发之间，包含了设计的一些内容，也包含了开发的一些内容，设计暂且不讲，它既然包含了开发，就应该适用于软件工程学的一些方法论，html、css方面涉及的比较少，单javascript却是一门标准的不能再标准的面向对象的语言，对于它的运用就该遵循这样的方法论。
图：（三个圈，分别是html、css、javascript，有重叠，也有独立，独立的地方就在于自身的魅力，比如jaavascript的魅力就在于，它不仅仅可以控制DOM和CSS的渲染，它还可以实现业务逻辑，甚至在服务端，还可以操作磁盘文件、读写内存、读写数据库）

第二，这几年，作为几个前端开发的技术管理者，我见过越来越多的同学进入前端开发的行列，走上这条“不归路”，每天重复干着某几件事情，但是从投入产出比的角度，两三年甚至四五年，提升都非常之缓慢，当然，这只是我个人的观点，也不代表所有人。我始终在想一个问题，那就是如何提高前端的生产力，还有产出物的质量，我称之为，面向过程的开发过程优化。

第三：专业的装逼技术，通俗一点说，就是让前端更专业化、职业化。专业化就是做专业的事，职业化就是让互联网行业或者说是IT行业更认可这个职业、这个岗位，说不定还能让你迎娶白富美、当上总经理、出任CEO，走上人生巅峰。

其次：它不能做什么？

他不能让你绕过那该死的兼容性问题。它不能让你的代码一击千行。它不能让你摆脱加班的命运。它仍然仅仅是个方法论。

好了，步入正题，前端开发中的软件工程学，到底包含哪些？

代码测试

这包括单元测试、性能测试、覆盖率测试等等，可能这些都只是针对javascript的，但你总要写javascript的吧。

单元测试就是针对写的代码快的结果测试，预先考虑一些非预期的输入值，性能测试，就是避免一些低级的、执行缓慢的写法，比如变量预存、for循环查找DOM等等，覆盖率测试就是测试你的代码覆盖率的情况。

总之，他们就是要让你的js代码，在生产环境运行良好，效率更高，对于各类测试的方法和过程这里不做细说，各位可移步询问度娘或者谷歌。

代码预处理

前端开发是一个执行期的语言，没有编译过程。这就带来，前端的代码有一定的生产不稳定风险而且开发效率低下，但是有一些先驱已经魏我们找到了一些这方面的解决办法，那就是

  • 针对HTML的一些模板语言和模板引擎，比如Jade、art-template、handlebars等等
  • 针对css的sass和less
  • 针对javascript的coffee script等等

以上这些可能都需要一些环境才能使用，但对于先天需要学习型的前端工程师来说，这些都算得了什么，再加上它们的确可以为我们避免一些错误，提高我们的开发效率，你还等什么呢，为了提升你的逼格，也要踊跃的试一试啊。

文档生成

我们在开发中，或多或少都会写一些注释，那些不喜欢写注释或者没这个良好习惯的，请你赶紧逼自己一下吧，码农何苦为难码农，你不写，那就意味着，读你代码的人将会骂你千百遍啊。扯远了，拉回来，有时候，我们仅仅是写注释还不够，可能还要写一些文档，比如API手册供使用者阅读、接口文档供存档备份，等等的，不管是什么目的吧，这总是避免不了的。还用手写吗？难道用脚写吗？哈哈，不是这个意思，我的意思是，你可以用你的注释生产啊。是啊，我写注释，并不仅仅是用来给别人看的，我还可以用来生产文档。但是，话说回来，生成文档的工具，可是需要你标准书写规范的哦，不过，为了这个目的，让你的注释也具有更高的可读性，而且还优雅的装逼，何乐而不为。

持续集成（CI）

可能有人听过这个概念，也可能仅仅是表面的了解。我想说的是，持续集成，并不仅仅是有个分支可以不断的提交代码用以修复bug，也不仅仅是多人可以协同修改一个分支，它还包含了代码的测试，还有你每一次提交的质量和对整个分支的回归。

好吧，以上概念可能都比较浅陋，每一个展开讲，都可能会写一本书那么厚，我也仅仅学得皮毛，就不献丑了。只是抛砖引玉罢了，目的是想揭示在前端开发的过程中，大家也可以运用这些方法论来指导我们的开发过程，使得更加高效、稳定、标准。更多的内容，请读者自行查阅学习。
（以上内容只是个人观点，欢迎交流补充，手下留情请勿乱喷）

Website favorites

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.