webapp+pc - Githubissues

numberfan commented 7 years ago

position:fixed与z-index问题问题描述： DOM结构：

<div class="square">Float</div>
<div class="container">
        <div class="box01">我是内容块</div>
</div>

CSS样式：

 .square {
    position: fixed;
    top: 50%;
    margin-top: -50px;
    right: 100px;
    width: 100px;
    height: 100px;
    background: #f00;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    z-index: 8;
}
.container {
    width: 100%;
    height: 200%;
    position: relative;
}
.box01 {
    width: 100%;
    height: 100%;
    border: 1px solid #f00;
    background: #eee;
    z-index: 10;
}

期望是.box01块能将.square块覆盖住。事实是.square块始终在.box01上方 z-index具有继承性

numberfan commented 7 years ago

项目重构

需求

可拓展性、可维护性
模块化、性能优化、用户体验提升
性能优化
提升响应速度
- 压缩&合并（图片、css、js）
- 缓存（服务端加快请求响应速度，客户端减少http请求）
减少内存和网络开销
1. 提升响应速度使用构建工具进行压缩、合并（webpack/fis3/gulp）
2. ajax缓存缓存不必要或者相同的请求，把请求返回的数据用变量保存在本地，给事件触发点设置缓存标志，只要是相同的ajax请求就从本地取缓存，或者直接return 增加ajax加载时的缓冲动画，动画用gif图
3. storage存储
相同域名、端口下的所有页面都能访问localStorage下的数据
localStorage和sessionStorage都只能保存基本类型的数据（字符串和数字类型），其他类型的数据可以通过tiString()方法转化后保存。而对象可以使用JSON.stringfy()转化
1. IndexedDB
2. AppCache
3. 图片懒加载 jquery_lazyload
```
<div class="new-img-box">   
<img data-original="{{item.picture}}" class="lazyload" src="http://baaistatic.b0.upaiyun.com/Static/HK/load.gif_400" alt="" />
</div>
```

/执行图片加载缓冲/ $('.lazyload').lazyload({effect : "fadeIn"});



### 其他
1. 图片未加载前，使用图片占位图

numberfan commented 7 years ago

***重构

M端和PC端（单独开发）

一些思考

M端和PC端行为统一，但PC端要兼容IE8
用户多为重庆市民以及政府工作人员，低版本的浏览器的可能性比较大
开发前

技术栈
- fis3(方便控制，针对时间紧张的工期比较合适)
- art-template(字符串拼接使用模块，但原来项目使用的jsrender，jsrender依赖于jquery,使用zepto替换不行，具体使用的模板有待商榷)使用jsrender,能在未有jquery时使用
```
var jsrender = window.jsrender
var tmpl = jsrender.templates($('#myTmpl').html());
var html = tmpl.render(user);
console.log(html)
```
- jquery+zepto(原项目使用jquery版本比较多，后期计划PC使用jquery1.9, M端使用zepto)
  架构
  1. 目录

样式(less)(不严格按照BEM进行命名)
- 样式分类
- 公用less
- 组件less
- mixin
- 命名
```
.news .item {}
.news .tit {}
.news-item .item-tit {}
```
- px Or rem 本次适配采用“固定宽度，viewport缩放” 设计图、页面宽度、viewport width使用一个宽度，浏览器帮我们完成缩放。单位使用px即可
```
<meta name="viewport" content="width=750;target-densitydpi=device-dpi; minimum-scale=0.5; maximum-scale=1,user-scalable=no">
```

工程化

开发规范：包括开发、部署的目录规范，编码规范等
模块化开发：针对js、css，以功能或业务为单元组织代码
组件化开发：在模块化基础上，以页面小部件为单位将页面小部件的js、css、html代码片段放在一起进行开发、维护，组件单元是资源独立的，组件在系统内可复用
组件仓库
性能优化
项目部署：部署按照现行业界的分工标准，虽然不是前端的工作范畴，但它对性能优化有直接的影响，包括静态资源缓存、cdn、非覆盖式发布等问题
开发流程：完整的开发流程包括本地开发调试、视觉效果走查确认、前后端联调、提测、上线等环节
开发工具：包括构建与优化工具、开发-调试-部署等流程工具，以及组件库获取、提交等相关工具，甚至运营、文档、配置发布等平台工具

numberfan commented 7 years ago

M端适配

流式布局（响应式宽度自适应布局）
```
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
```
- 优点：响应式、简单、兼容好
- 缺点：非设计稿尺寸屏幕展现效果可能不是很理想
版式布局（页面等比缩放布局）方案：
1. 页面使用 REM 作为页面数值单位运算。
2. 通过 zoom/scale 整体缩放页面。
  - 优点：页面等比缩放，比例与设计稿一致。
  - 缺点：大屏手机等比放大后的体验可能不佳

其他：https://github.com/riskers/blog/issues/18

numberfan commented 7 years ago

scroll

当前元素添加@scroll=function(){}, 如果父元素有overflow:auto或者overflow:scroll,则当前元素监听不到onscroll事件

解决方案

将overflow:auto设置到当前元素，而父元素可设置为overflow:hidden

numberfan commented 7 years ago

package.json

--save-dev 和 --save区别
- --save-dev安装依赖的时候就会放在package.json的devDependencies对象下面(开发时候依赖的东西)
- --save安装依赖的时候就会出现在dependencies对象下面(发布之后还依赖的东西)

numberfan commented 7 years ago

meat标签

<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->
<html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
<head>
    <!-- 声明文档使用的字符编码 -->
    <meta charset='utf-8'>
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- 页面描述 -->
    <meta name="description" content="不超过150个字符"/>
    <!-- 页面关键词 -->
    <meta name="keywords" content=""/>
    <!-- 网页作者 -->
    <meta name="author" content="name, email@gmail.com"/>
    <!-- 搜索引擎抓取 -->
    <meta name="robots" content="index,follow"/>
    <!-- 为移动设备添加 viewport -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->

    <!-- iOS 设备 begin -->
    <meta name="apple-mobile-web-app-title" content="标题">
    <!-- 添加到主屏后的标题（iOS 6 新增） -->
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->

    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
    <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!-- 设置苹果工具栏颜色 -->
    <meta name="format-detection" content="telphone=no, email=no"/>
    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 不让百度转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <!-- iOS 图标 begin -->
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
    <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
    <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
    <!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
    <!-- iOS 图标 end -->

    <!-- iOS 启动画面 begin -->
    <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
    <!-- iPad 竖屏 768 x 1004（标准分辨率） -->
    <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
    <!-- iPad 竖屏 1536x2008（Retina） -->
    <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
    <!-- iPad 横屏 1024x748（标准分辨率） -->
    <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
    <!-- iPad 横屏 2048x1496（Retina） -->

    <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
    <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
    <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
    <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
    <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
    <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
    <!-- iOS 启动画面 end -->

    <!-- iOS 设备 end -->
    <meta name="msapplication-TileColor" content="#000"/>
    <!-- Windows 8 磁贴颜色 -->
    <meta name="msapplication-TileImage" content="icon.png"/>
    <!-- Windows 8 磁贴图标 -->

    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
    <!-- 添加 RSS 订阅 -->
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
    <!-- 添加 favicon icon -->

    <!-- sns 社交标签 begin -->
    <!-- 参考微博API -->
    <meta property="og:type" content="类型" />
    <meta property="og:url" content="URL地址" />
    <meta property="og:title" content="标题" />
    <meta property="og:image" content="图片" />
    <meta property="og:description" content="描述" />
    <!-- sns 社交标签 end -->

    <title>标题</title>
</head>

numberfan / readNotes

webapp+pc #3

项目重构

需求

性能优化

***重构

一些思考

开发前

技术栈

架构

工程化

M端适配

scroll

解决方案

package.json

meat标签