最近跳槽了, 6 月 1 号入职. 到今天也快大半个月了, 接手的第一个项目是一个 bbc 的就是风格介于 b2b 和 B2C 之间的, 和天猫类似, 但又不是很想, 好了, 废话不多说, 下面对这个电商项目进行一个中期总结, 现在才做了 7 个页面, 从首页到二级页到商品详情页, 然后是加入购物车页, 我的购物车页, 我的订单页, 地址变更页.
一开始拿到的只有首页 psd.. 小公司就是这样, 都是出一张图做一张, 我的工作就是写静态页面以及显示一些效果以及功能 (这不是废话, 那个前端不是干这事), 一开始觉得自己在前一家可是写了 10 个月这样的东西, 这点小事一定不在话下, 于是按照之前的样子开始工作了, 很快第一个首页就出来了, 因为是新公司的第一次任务, 当然要用心对待, 还检查了 1 小事才和主管说我提交了, 有空检查一下. 本以为页面写的不错, 没想到, 问题很多, 而且是之前一直没有想到的问题:
1. 标签语义化
H1: 这一点之前一直挂着口头, 一直做得不好, 比如说下面这种
淘宝网这个图标, 一开始我只是把他当做一个 img 来处理, 后来才知道原来这个就是整个页面的 H1, 这里说一下 H1 一个页面只有一个, 而且是顶级的, H2 这种可以有多个, 很多时候你不知道什么时候应该用 H1,H2,H3 这种, 其实很简单, H1,H2,H3 这种顾名思义就是各级标题, 所谓标题就是他下面会有对这个标题进行解释的内容的, 否则就不要用 H1,H2,H3 这种标签了, 比如这里的一行,
都是二级页面的入口, 下面没有对这些东西进行解释的内容, 所以他们就不是标题了, 只是单纯的链接, 所以用 a 就好了.
dl,dt,dd:
下面这种布局在商品详情页里面很常见, 就是前面一段文字中间一个: 后面一段文字, 之前我一直用的是 p 里面套 span, 后面经过主管指导才知道这里最适合用的是 dl,dt,dd.dl 顾名思义就是定义列表, 着这里不是最适当不过了吗, 这一点要每个人细细品味才有感觉哈, 不过京东这里做的有点搞笑
用 dl,dd 作为 class, 这一点我不赞同, 而且他应该也知道这里是一个自定义列表了...
2. 页面模块化
做过项目的都知道, 一个项目里面的页面有一些是一样的, 最常见的一样的就是头部, 以及尾部, 那么就会有一个 common.CSS, 这样写的好处就是减少代码量, 让页面更容易被管理, 可以又会出现一个问题那就是如果当你做了几十个页面的时候, 他们的头部尾部是一样的, 你都用了相同的 html 结构以及一个 common.css, 这时候产品过来说, 我们把头部改一下吧... 改一下吧!!! 这时候你的感觉是不是还好我用了一个 common.css, 只用该一个 css, 可是 html 呢, 不还是要一个个去改. 这里我这次采用了张鑫旭大神的办法用 node.js 监听公共 html 是否改变, 下面上代码 (大神写的, 我只是用一下哈):
- // 引入 fs 文件处理模块
- var fs = require("fs");
- // 测试用的 HTML 页文件夹地址和文件名称
- var src = 'import', filename = 'import-example.html';
- var fnImportExample = function(src, filename) {
- // 读取 HTML 页面数据
- // 使用 API 文档中的 fs.readFile(filename, [options], callback)
- fs.readFile(src + '/' + filename, {
- // 需要指定编码方式, 否则返回原生 buffer
- encoding: 'utf8'
- }, function(err, data) {
- // 下面要做的事情就是把
- // <link rel="import" href="header.html">
- // 这段 HTML 替换成 href 文件中的内容
- // 可以求助万能的正则
- var dataReplace = data.replace(/<link\srel="import"\shref="(.*)">/gi, function(matchs, m1) {
- // m1 就是匹配的路径地址了
- // 然后就可以读文件了
- return fs.readFileSync(src + '/' + m1, {
- encoding: 'utf8'
- });
- });
- // 由于我们要把文件放在更上一级目录, 因此, 一些相对地址要处理下
- // 在本例子中, 就比较简单, 对../ 进行替换
- dataReplace = dataReplace.replace(/"\.\.\//g,'"');
- // 于是生成新的 HTML 文件
- // 文档找一找, 发现了 fs.writeFile(filename, data, [options], callback)
- fs.writeFile(filename, dataReplace, {
- encoding: 'utf8'
- }, function(err) {
- if (err) throw err;
- console.log(filename + '生成成功!');
- });
- });
- };
- // 默认先执行一次
- fnImportExample(src, filename);
- // 监控文件, 变更后重新生成
- fs.watch(src + '/' + filename, function(event, filename) {
- if (event == 'change') {
- console.log(src + '/' + filename + '发生了改变, 重新生成...');
- fnImportExample(src, filename);
- }
- });
这段代码大家都能看懂, 不过我在看到这段代码之前 不知道 node 还有这样的作用... 这就是差距, 想不到大牛为什么能怎么想, 将看起来很神奇的 node 拿来为自己工作所用, 这也行就是为什么他是大牛的原因哈.
还有一个批量改变文件名的这个应该也是很有用的
- var fs = require('fs');
- var src = 'E:/picture';
- fs.readdir(src ,function(err, files) {
- for(var i = 0;i<files.length; i++) {
- var oldPath = src +'/' + files[i];
- var newPath = src + '/' + files[i].replace(/_/g,'-');
- fs.rename(oldPath,newPath,function(err) {
- if(!err) {
- console.log( files[i] + '下划线替换成功!');
- }
- });
- }
- });
感觉就是 做电商页面要多看看淘宝, 天猫, 京东这种业界标准, 虽然不是 100% 都是对的哈.
来源: http://www.qdfuns.com/article/15098/deca5849c27fe38c1a4b6205c9a4b901.html