前端开发杂记

最近的一些开发过程遇到的东西或者看到的觉得需要记下来的关于javascript的技巧/代码.
javascript解析json
html移动端
webpack+vue开发
【and so on】

用javascript解析有不定项子集的json数组?

1
2
3
4
5
6
7
8
9
10
11
12
function jsonToHtml(json){
var res;
for(var key in json){
if(typeof json[key] == "object"){
data = jsonToHtml(json[key]);
res += data;
}else{
res += json[key];
}
}
return res;
}

PC端的前端开发与后端开发有什么区别?

  1. 移动端页面的WEBAPP开发为了模仿顶部通栏和底部工具按钮,常用到 position: absolute; 来进行顶部和底部栏的定位,例如设置底部工具栏,则web结构如下:
1
2
3
<div class="topbar">我是顶部栏</div>
<div class="mainbody">我是主要内容content</div>
<div class="foobar">我是底部栏</div>

主要样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.topbar{
height: 30px;
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.mainbody{
margin-top: 30px;
margin-bottom: 45px;
position: relative;
}
.foobar{
height: 45px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}

  1. 为了兼容低版本浏览器下的H5渲染,常需要在head加入这样一段代码:
1
2
3
4
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

同时可能引入normalize.css进行全局样式的初始化。

  1. 移动端滚动采用iscroll 及原生js滚动

  2. html5的head信息中添加各种meta进行浏览兼容或修复

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 优先采用最新浏览器引擎进行布局渲染 -->
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<!-- 渲染画布缩放为1 -->
<link rel="icon" type="image/x-icon" href="../assets/img/favicon.ico">
<title>首页</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" href="../assets/css/global.css" media="all">
<!-- 移动端各种meta设置 -->
<meta name="format-detection" content="telephone=no">
<!-- 禁止识别电话号码 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 全屏显示 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- apple顶部通栏样式设置为黑色 -->
<link rel="apple-touch-icon" href="../assets/img/apple-touch-icon-57x57.png" sizes="57x57">
<!-- apple桌面图标 尺寸有多个:57,60,72,76,114,120,144,152,180-->
  1. 为了移动端设备自适应,考虑采用设置文档根 html 的 fontsize 为rem设置参考基准。需要进行一定比例缩放的元素,采用 rem 进行宽高、字体大小等设定。

项目管理SVN使用教程

  1. 初始化: import/create 类似git管理中 git clone/init
  2. 更新: checkout 类似git管理中 git status
  3. 提交: commit 类似git管理中 git commit -m ‘message’
  4. 添加: add 类似git管理中 git add .
  5. 推送: update 类似git管理中 git push origin master
  6. 合并: merge 类似git管理中 git merge
  7. 常规化操作: rename/delete/export/revert/switch
  8. 注意事项: 避免采用 bin/obj 等类似系统文件名称的形式对文件进行命名

webpack+vue开发

必备文件: webpack.config.js + package.json + src-文件夹
推荐: vue.js
写得好!朕重重有赏!