2019年4月实习小结

很高兴在三月末终于找到了实习单位，至今实习也有一个月了，果然实践是提升技术最快最有效的方式。。。难得抽空更新博客，值此劳动节放假之际，总结一波4月实习以来了解到的一些框架，一些用法，还有 coding 时踩到的一些坑。

一、框架整理

1.dubbo

Dubbo是阿里巴巴开源的基于 Java 的高性能 RPC 分布式服务框架，现已成为 Apache 基金会孵化项目。使用 Dubbo 可以将核心业务抽取出来，作为独立的服务，逐渐形成稳定的服务中心，可用于提高业务复用灵活扩展，使前端应用能更快速的响应多变的市场需求。

官网：http://dubbo.apache.org/zh-cn/
文档：http://dubbo.apache.org/zh-cn/docs/user/preface/background.html

2.ThymeLeaf

虽然之前学习的时候已有对该模板引擎有所了解，但现在还是决定再写一次加深一下印象。

ThymeLeaf 是 Spring 官方推荐的模板渲染引擎，在模板里通过使用 标签+表达式 的方式实现数据渲染，使用它不必更改前端模板里的示例内容，使得前端和后端都能很好共同的维护模板。它可以完全代替 JSP

官网：https://www.thymeleaf.org/
文档：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

3.LayUI

公司项目的后台页面使用 LayUI 编写，经过一段时间的了解，我觉得它的确是一个很强大的前端框架，跟 BootStrap 各有千秋吧。(竟然还是国人出品)

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

官网：https://www.layui.com/
文档：https://www.layui.com/doc/

顺便提及一下它的独立模块 Layer 的手机版 Layer for mobile，样式也是非常不错的。

官网：http://layer.layui.com/mobile/
Github: https://github.com/sentsin/layer/tree/2.x/src/mobile

4. Webpack

最近公司的项目也在做一个前后端分离，将前端页面工程化(模块化)，并最终通过 Webpack 进行打包，方便后期的维护。

前后端分离的核心思想就是 前端通过Ajax来访问后端提供的Restful接口获取数据，并通过 JavaScript 代码将数据展示在页面上 ，前端单独部署在一个 Web 容器上并不与后端有任何的关联。

中文官网: https://www.webpackjs.com/
文档：https://www.webpackjs.com/concepts/
Github：https://github.com/webpack/webpack

我近期就主要在干的这样的活，然后还踩了不少坑，其实踩坑我还是蛮开心的，没有踩坑就没有提升。等等下面也会对一些坑进行一些总结。

5.Hogan

Hogan是一个前端模板渲染引擎，地位像是 JavaWeb 项目里的 ThymeLeaf (?) ，但有别于 ThymeLeaf，它有自己的渲染标记(语法)

Hogan的使用步骤(在Webpack项目中)：

// 引入hogan
var hogan = require('hogan.js');

// 渲染所需模板
var template = '<div>Hey! I am {{name}}!</div>';

// 渲染所需数据
var data = {
    name : 'Rosen'
};

// 模板的编译
var compiledTemplate = hogan.compile(template);

// 模板的渲染
var result = compiledTemplate.render(data);

// 输出结果 
console.log(result);

Hogan的语法：

{{data}} //转义的变量
{{{data}}} //不转义的变量
{{#list}} {{/list}} //列表循环 / 真值判断
{{^list}} {{/list}} //空列表 / 非真值判断
{{.}} //枚举的当前元素
{{!}} //我是注释

（以上摘自 https://www.imooc.com/article/18493/）

我日常的用法就是将一个页面的零碎部分 (例如一些列表的东西)，将单个 item 抽出来，用 Ajax 请求到数据之后，遍历数组，渲染数据，append 到 dom 元素中。

以上就是一些框架总结，接下来是对一些琐碎的东西的一些整理。

WebPack整理

因为最近都在干前后端分离，WebPack 也从来没用过，也是即用即学，有必要对其中的一些东西进行整理。以下内容大多摘录自网上，会注明出处。

1、插件 html-webpack-plugin 的详解

看这里：https://blog.csdn.net/qq_29923881/article/details/83243897

内容较多，不单独摘录了，主要是学习它的配置文件。

2、Webpack模块的导出以及之间的依赖引用

在被引用的文件里，使用 module.exports 将 function 进行导出，require 以后就能直接使用该 function。看例子：

CrazyKid.js

var CrazyKid = {
    say : function (text) {
        console.log("CrazyKid said:" + text);
    }
};
module.exports = CrazyKid;

call.js

1 2	var CrazyKid = require("CrazyKid.js"); CrazyKid.say("Hello World");

也可以看下这篇文章：https://www.cnblogs.com/liuchuanfeng/p/6802549.html

3、webpack中如何使用iconfont字体图标

iconfont 是阿里巴巴提供的矢量图标库，用 css 样式引入图标文件，在页面中使用。

iconfont 官网：https://www.iconfont.cn/

打开 iconfont.css 就能看到图标文件的引用：

iconfont.css

@font-face {font-family: "iconfont";
  src: url(./fonts/iconfont.eot?t=1522138532925); /* IE9*/
  src: url(./fonts/iconfont.eot?t=1522138532925#iefix) format('embedded-opentype'), /* IE6-IE8 */

  url(./fonts/iconfont.ttf?t=1522138532925) format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url(./fonts/iconfont.svg?t=1522138532925#iconfont) format('svg'); /* iOS 4.1- */
}

在 webpack 中，即使你把 url 改成 require 形式，就算最后打包出来路径是对的，也还是不能正确显示图标。例如：

iconfont.css

1	src: url(require("./fonts/iconfont.eot?t=1522138532925")); /* 这样8行,没卵用QAQ */

解决方案是在 webpack 配置文件里配置 loaders，将字体文件转字符形式

webpack.config.js

module: {
    loaders: [
        //解决iconfont字体无法显示
        { 
            test: /\.(woff|svg|eot|ttf)\??.*$/,
            loader: 'url-loader?name=/resource/[name].[md5:hash:hex:7].[ext]'
        },
     ]
  }

最后编译出来字体文件会直接以字符形式存在于 css 中，图标正确显示。

解决方案参考自 https://blog.csdn.net/xiaoermingn/article/details/53543001

js 和 css 整理

1、在 JQuery 中 ajax 提交数组时参数后加[]的问题

在 Jquery 中用 $.ajax 提交多个参数名一样的数据的时候(数组)，参数名后面会自动加上[], 例如

$.ajax({
   type: "POST",
   url: ...,
   data:{ xxxx:[1, 2, 3] },
   dataType: "json"
});

在 Chrome 中按F12 查看提交的 FormData 是这样的:

xxxx[]: 1

xxxx[]: 2

xxxx[]: 3

解决方案：$.ajax 里加个属性 traditional:true ，即：

$.ajax({
   type: "POST",
   traditional: true, // <-- 新增， 深度序列化
   url: ...,
   data:{ xxxx:[1, 2, 3] },
   dataType: "json"
});

延伸阅读：jQuery ajax的traditional参数的作用

2、css 中样式名重复并冲突的问题

例如现有如下页面

<link href="a.css" rel="stylesheet" type="text/css" />
<link href="b.css" rel="stylesheet" type="text/css" />

<div id="Box"> 123456 </div>

a.css

1
2
3

#Box {
    color:red;
}

b.css

1
2
3

#Box {
    color:blue;
}

比如有一个基础页面样式(a.css)，又有一个单独为某页面定制的样式(b.css) 然后在页面里两个 css 文件都被引用了，为确保后面单独定义的样式能“覆盖”基础样式，样式后面需加 !important 例如

b.css

1
2
3

#Box {
    color:blue !important;
}

结语

写一次总结真不容易，大概也写了两三个小时，给自己定个小目标，3个月实习期里坚持每个月写总结，相信一定有进步哈。加油！