测试下下睛睛睛上工工 Nodejs 版

测试下下睛睛睛上工工 Nodejs 版

一、Css全局规范

1.在样式表开头添加一个注释块，用以描述这个样式表的 编码格式 最后的修改时间 标记等备注信息

/* *charset：UTF-8 *Time:2012-05-05 *Copyright © 2012 www.uzai.com All rights reserved */

2.文件名规范

  • base.css 为css样式重置和一些公用的css

  • layout.css 为网站上所有公用的js组件、公用模块都写在这个css样式表中

  • index.css 为首页的样式表

  • page.css 为一些产品页 线路页的css样式表

说明：初期建立的时候按照这个来建立，等后期网站基本上完成可以考虑对base.css layout.css等进行合并为一个css global.css文件。在开发当中也可以为一些特殊的页面单独建立css文件。

Global.css文件说明： 在样式表的头部，对公用css属性默认值清零操作：

/----start resrt----/ 代码… /----end reset----/

在样式表的头部对body的背景 、文本、字体、行高、全局链接等进行设置

/----start base----/ 代码… /----end base----/

在样式表中间书写网站公用模块样式

/----start layout----/ 代码… /----end layout----/

在样式表底部书写网站公用JS组件样式

/----start js----/ 代码… /----end js----/

说明：css代码模块化对后期的维护和添加新的css都非常有帮助。在新增加css的时候一定要找到当前模块进行添加，拒绝代码乱添加给之后的维护带来很大的困扰。

3.Css注释

大模块我们可以采用这种注释方法：

/----start main----/

/----end main----/

大模块里面的模块可以采用这种注释：

/–start left–/

/–start left–/

最小级的模块注释：

/start submenu/

/end submenu/

针对后期的维护修改等可以采用这种注释：

/name 2012-05-05/

说明：注释最好采用英文，尽量避免中文注释，采用这种递减的方式写注释使得我们的css一目了然，结构清晰，看到css注释基本上能想起html的结构。最多使用3级注释，注释以模块为一单位书写。最后一种注释为修改者名字和修改日期，可能考虑到程序员添加的css和后期维护新加的css

4.Css引用

css都采用外链引用方式：<link href=”” type=”text/css” rel=”stylesheet” />

或者写在头部<style type=”text/css”>代码。。。。。</css>（针对一些会刊 专辑）

特别注意：坚决避免使用内嵌式方式写css :<div style=”height:20px”>可维护性差。

二、Css命名规范

1.考虑到团队合作，因此CSS命名必须规范，避免开发中造成命名冲突等。
2.Css命名语义化，如：

常用名称：

头： header　　尾： footer 　Logo： logo 　版权： copyright　　内容块： content(A)　栏目块：column 　结构左： left　结构中： center

结构右：right　矩阵导航：matrixNav　首页导航：indexNav　频道二级：channelNav　导航文字：navText　内容导航：nav　下拉：drop

内容主导航：mainNav　子内容导航：subNav　边导航：sidebar　左导航：leftsidebar　右导航：rightsidebar　广告：ad　按钮：btn

搜索：search　关键字：keyWord　标签：tag　菜单：menu　滚动：scroll　列表：list　打印：print 地图：map　博客：blog 视频：video

登陆：login 登录条：loginbar 注册：reg 提示信息：msg　功能区：shop Flash：flash　标题：title　更多：more　热点：hot　评论：review

媒体：media 新闻：news　合作：cooperate　联系：contact　加入我们：joinUs　合作伙伴：partner　友情链接：link 论坛社区：club

投票：vote 摘要：summary　服务：service 指南：guild 描述：description 信息：info　下载：download 价格：price　状态：status 注释：note

地址：address 产品：products 跳转：jump 条：bar　线：line 小技巧：Tips 外套：wrap

这基本上是每个网站常用的模块化命名。

3.针对我们网站的命名：

  1. 网站通用模块组件使用：使用fn-开头来命名,例如：翻页模块命名：class=”fn-page”菜单模块命名：class=”fn-menu”

  2. 针对网站头部，尾部，内容部分这样框架化的层可以采用ID命名方式 例如：id=”header” id=”footer” id=”content”

  3. 针对为JS预留的接口，JS组件使用如下方式：Id=“Js_show” class=“Js_hide”等方式

  4. (共同)针对模块 我们采用如下方式：模块+功能的命名方式 如：Class=”page” class=”page-tips” class=”page-list-news”或者class=”pageTips”驼峰式命名

  5. 对我们常用的一些css采用如下命名：p-clear p-clearfix p-font12的方式命名

  6. 避免 css hack ， 考虑使用特定浏览器前缀表示：.ks-ie6 p {margin: 1em 0;}以上是大体结构上的命名方式，在一些命名的细节中我们还应该注意一些问题：

  7. id和class使用，ID为唯一的，因此我们在大的结构上才采用ID，一般就是使用class来命名，也易于通用。

  8. 我们为class命名的时候还应该注意语义化，简明化。尽量使用一些英文单词的组合(类别+功能；属性+值等) 如：font24 width990 header footer js-show .ff60cc等命名，一看就很明了，知道是什么意思。避免使用英文拼音命名。

总结：这样的css命名规范，为我们了解网站和后期维护 新同事的加入学习提供了很大的便利。如通用模块命名 fn-XXX 看到这个就知道这个是整个网站通用的css 放在global里面的 js-XX一看到这个就知道这是为JS预留的。这样就对整个网站有个很清晰的了解，通过css命名等细节问题，使开发者更有利的了解网站，维护等。较现在比较混乱无序的命名来说，在各方面都提高了不少。

三、Css代码书写规范

1.css的缩写规则

  • 不同类有相同属性及属性值的书写，如.a,.b,#c,.d{height:20px;width:20px;border:1px solid #ccc;}

  • 同一属性的缩写，如：.font{border:1px solid #ccc;margin:0 4px;background:#fff url(imae/i.jpg);}等等。

2.选择器的使用：

  • 避免使用ID来写全局样式 如 #main a{color:#666;} （不可取）因为ID的优先级高于class这样定全局样式，使得里面的样式没办法重置。

  • 最后一级才可以使用标签来作为选择器；如:.header p a{color:#fff;}(不可取) 应该.header .news a{color:#fff;}

  • 尽量使用标签作为选择器 减少id class(但是遵循第2条):如：.menu ul{}等

  • 书写代码前, 考虑并提高样式重复使用率

  • 杜绝使用<meta http-equiv=“X-UA-Compatible” content=“IE=7” /> 兼容 ie8;

  • 在css中避免使用滤镜_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png影响css执行速度

  • 避免使用css表达式：top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); 影响css执行速度

  • 使用css sprite来优化页面,减少http请求数，加快网站加载。

3.css hack的编写在平时的开发中，我们经常遇到一些浏览器直接的差异问题，可能针对这类问题需要针对某类浏览器写兼容样式。

  • ie6 7 8 firefox的兼容写法

  • Ie都能认识 \0

  • Ie 8不认识 \9

  • Ie 67认识*

  • Ie6认识_

  • Css hack尽量避免使用，不符合w3c标准的。

4.Css的优先级问题：！important（尽量少使用）>Id >class > 标签选择器，书写css的时候特别注意优先级问题，css按照此规则来重置。

4 回复

测试下下睛睛睛上工工 Nodejs 版

一、Node.js 模块化与规范

在 Node.js 中，模块化是构建大型应用程序的重要手段。通过将代码拆分成多个独立的模块，可以提高代码的可读性和可维护性。

1. 文件结构规范

在 Node.js 项目中，建议使用以下文件结构：

/project-root
|-- /node_modules
|-- /src
|   |-- /controllers
|   |-- /models
|   |-- /routes
|   |-- /utils
|-- /public
|   |-- /css
|   |-- /js
|-- /tests
|-- app.js
|-- package.json
|-- README.md
  • /node_modules：存放第三方依赖。
  • /src：存放业务逻辑代码。
  • /public：存放静态资源。
  • /tests：存放单元测试和集成测试。
  • app.js：入口文件。
  • package.json：项目配置文件。
  • README.md：项目文档。
2. 模块导入导出规范

在 Node.js 中，使用 require 和 module.exports 进行模块的导入和导出。

// src/utils/logger.js
const winston = require('winston');

const logger = winston.createLogger({
  transports: [
    new winston.transports.Console(),
  ],
});

module.exports = logger;

// src/controllers/userController.js
const logger = require('../utils/logger');

exports.getUser = (req, res) => {
  logger.info('Fetching user data');
  // 业务逻辑...
};
3. 代码注释规范

代码注释应该简洁明了，有助于其他开发者理解代码的功能。

/**
 * 获取用户数据
 * @param {Object} req 请求对象
 * @param {Object} res 响应对象
 */
exports.getUser = (req, res) => {
  // 业务逻辑...
};
4. 代码风格规范

建议使用 ESLint 等工具来确保代码风格一致。

{
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": "eslint:recommended",
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "rules": {
    "indent": ["error", 2],
    "quotes": ["error", "double"],
    "semi": ["error", "always"]
  }
}

二、路由与控制器规范

在 Node.js 中，使用 Express 框架来定义路由和控制器。

// src/routes/userRoutes.js
const express = require('express');
const router = express.Router();
const { getUser } = require('../controllers/userController');

router.get('/user', getUser);

module.exports = router;

// src/controllers/userController.js
const logger = require('../utils/logger');

exports.getUser = (req, res) => {
  logger.info('Fetching user data');
  res.send({ name: 'John Doe' });
};

三、错误处理规范

在 Node.js 中，建议统一处理错误，以便更好地管理异常情况。

// src/middleware/errorHandler.js
module.exports = (err, req, res, next) => {
  logger.error(err.message);
  res.status(500).send({ message: 'Internal Server Error' });
};

// 在 app.js 中使用错误处理器
const errorHandler = require('./middleware/errorHandler');
app.use(errorHandler);

四、测试规范

使用 Mocha 和 Chai 进行单元测试和集成测试。

// tests/userController.test.js
const chai = require('chai');
const chaiHttp = require('chai-http');
const server = require('../../src/app');

chai.use(chaiHttp);
const { expect } = chai;

describe('User Controller', () => {
  it('should fetch user data', (done) => {
    chai.request(server)
      .get('/user')
      .end((err, res) => {
        expect(res).to.have.status(200);
        expect(res.body).to.deep.equal({ name: 'John Doe' });
        done();
      });
  });
});

通过这些规范和最佳实践，可以有效地提高 Node.js 项目的可维护性和可扩展性。


为什么编辑不了？？？

enter image description here

点编辑为什么出来这个呢。

根据你提供的内容，看起来这是一个关于CSS规范的文档，而标题中的“测试下下睛睛睛上工工 Nodejs 版”似乎是一个误输入或者是需要转换成Node.js相关的主题。假设我们要将这些规范应用到一个Node.js项目中，尤其是前端样式管理方面，那么我们可以讨论如何在Node.js项目中引入和管理CSS文件。

以下是一个简单的示例，展示如何在一个Node.js项目中组织和引用CSS文件：

示例项目结构

project-root
│
├── public
│   ├── css
│   │   ├── base.css
│   │   ├── layout.css
│   │   ├── index.css
│   │   └── page.css
│   ├── js
│   └── index.html
│
├── package.json
└── server.js

server.js 文件

const express = require('express');
const path = require('path');

const app = express();
const PORT = process.env.PORT || 3000;

// 静态资源目录配置
app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example Page</title>
  <!-- 引入CSS文件 -->
  <link rel="stylesheet" href="/css/base.css">
  <link rel="stylesheet" href="/css/layout.css">
  <link rel="stylesheet" href="/css/index.css">
</head>
<body>
  <h1>Welcome to the Example Page</h1>
  <script src="/js/app.js"></script>
</body>
</html>

CSS文件示例 (public/css/base.css)

/* charset：UTF-8 */
/* Time:2023-10-01 */
/* Copyright © 2023 www.example.com All rights reserved */

/* ----start reset---- */
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

a {
  color: #0066cc;
  text-decoration: none;
}
/* ----end reset---- */

/* ----start base---- */
.container {
  width: 960px;
  margin: 0 auto;
}
/* ----end base---- */

这个示例展示了如何在Node.js项目中组织和引用CSS文件，并且在HTML文件中正确引入这些CSS文件。你可以根据上述规范扩展更多的CSS文件和规则，确保代码的可维护性和清晰度。

回到顶部