Top

2019年4月实习小结



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

一、框架整理

1.dubbo

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

2.ThymeLeaf

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

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

3.LayUI

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

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

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

4. Webpack

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

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

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

5.Hogan

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

  • Hogan的使用步骤(在Webpack项目中):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 引入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的语法:
    1
    2
    3
    4
    5
    6
    {{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
1
2
3
4
5
6
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
1
2
3
4
5
6
7
@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
1
2
3
4
5
6
7
8
9
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 提交多个参数名一样的数据的时候(数组),参数名后面会自动加上[], 例如

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

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

xxxx[]: 1

xxxx[]: 2

xxxx[]: 3

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

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

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

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

例如现有如下页面

1
2
3
4
<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个月实习期里坚持每个月写总结,相信一定有进步哈。加油!