A. 前端自己模拟写数据文件命名是 json 还是.html
可以自己写，操作，点击mockjs 随机产生json数据。
代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<div>
<h1 id="mockjs">mockjs</h1>
</div>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>
<script type="text/javascript">
//调用mock方法模拟数据
Mock.mock(
'http://mockjs', {
"userName": '@name', //模拟名称
"age|1-100": 100, //模拟年龄(1-100)
"color": "@color", //模拟色值
"date": "@date('yyyy-MM-dd')", //模拟时间
"url": "@url()", //模拟url
"content": "@cparagraph()" //模拟文本
}
);
//ajax请求
$("#mockjs").click(function() {
$.ajax({
url: "http://mockjs", //请求的url地址
dataType: "json", //返回格式为json
async: true, //请求是否异步，默认为异步，这也是ajax重要特性
data: {}, //参数值
type: "GET", //请求方式
beforeSend: function() {
//请求前的处理
console.log('start');
},
success: function(req) {
//请求成功时处理
console.log(req);
},
complete: function() {
//请求完成的处理
console.log('end');
},
error: function(err) {
//请求出错处理
console.log(err);
}
});
});
</script>
</body>
</html>
作者：幺加幺
链接：http://www.jianshu.com/p/8626d28f226f
来源：简书
着作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
B. 前端开发，如何写出优秀js代码
每位前端工程师都喜欢易理解、可扩展、易维护的代码，如何写出优秀的JavaScript代码，也是每位前端工程师的功课。如何才能写出优秀的JavaScript代码呢？
1.写代码前一定要搞清楚你要解决的问题是什么，你的方案是否能够解决问题。
2.拥有良好的命名规范，注意变量名区分大小写，允许包含字母、数字、美元符号（$）和下划线，但第一个字符不允许是数字，不允许包含空格和其他标点符号。
3.多写代码注释。编写代码时的注释应当尽量全面一些，这便于自己再次浏览代码时好理解。
4.能不使用with语句的时候尽量不要使用with语句，尽量少使用eval ,每次使用eval需要消耗大量时间。
拥有一手好代码的前端开发者，更具有大神风范，所以好代码不仅要精炼，更要易读。
C. Web前端工程师要知道的JavaScript变量命名规范
今天小编要跟大家分享的文章是关于Web前端工程师要知道的JavaScript变量命名规范，正在从事Web前端工作的小伙伴们来和小编一起看一看吧，希望本篇文章能够对大家有所帮助。
JavaScript变量命名规范：只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字。
下列都是非常正确的变量命名：
varhaha=250;
varxixi=300;
vara1=400;
vara2=400;
varabc_123=400;
var$abc=999;
var$o0_0o$=888;
var$=1000;
var_=2000;
var________=3000;
下列都是错误的命名：
vara-1=1000;//不能有怪异符号
vara@=2000;//不能有怪异符号
var2year=3000;//不能以数字开头
vara￥=4000;//不能有怪异符号
vara*#$#$@=5000;//不能有怪异符号
varab=300;//不能有空格
下列的单词，叫做保留字，就是说不允许当做变量名
abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto
implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile
需要注意大写字母是可以使用的，并且大小写敏感。也就是说A和a是两个变量。
1varA=250;
2vara=888;
以上就是小编今天为大家分享的关于Web前端工程师要知道的JavaScript变量命名规范的文章，希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助。想要了解更多Web前端知识记得关注北大青鸟Web培训官网。最后祝愿小伙伴们工作顺利!
D. Web前端开发规范之文件命名规范
今天小编要跟大家分享的文章是关于Web前端开发规范之文件命名规范。Web前端作为开发团队中不可或缺的一部分，需要按照相关规定进行合理编写(一部分不良习惯可能给自己和他人造成不必要的麻烦)。不同公司不同团队具有不同的规范和文档。下面是根据不同企业和团队的要求进行全面详细的整理结果。来和小编一起看一看文件命名规范的原则吧！
基本原则
符合Web标准(UTF-8，HTML5)，语义化html(HTML5新增要求，减少div和span等无特定语义的标签使用)，结构表现行为分离(HTML-CSS-JS代码分离，不同行为代码高内聚低耦合)，兼容性优良(早期版本浏览器兼容，移动端和PC端设备兼容).页面性能方面(减少请求次数，例如使用精灵图和sass语法)，代码要求简洁明了有序，尽可能的减小服务器负载，保证最快的解析速度(减小repaint和reflow).
文件命名规范
1、html，css，js，lib，images文件均存放至项目的目录中。如果使用相关前端框架，根据框架的文件格式进行合理布局。
2、所有文件夹及文件使用英文命名(避免使用中文路径)。
3、html文件：入口文件使用index.html。如果有对应的设计组设计原稿，需要将对应的设计稿和html文件命名一致并合理存放。
4、css文件命名：后缀.css。通用initial.css，初始化base.css，首页index.css，其他页面按照对应的html命名。
5、Js文件命名：英文命名，后缀.js.通用common.js，初始化base.js。其他页面按照对应的html命名。
以上就是小编今天为大家分享的关于Web前端开发规范之文件命名规范的文章，希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助，想要了解更多Web前端知识记得关注北大青鸟Web培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的Web前端工程师。
E. ui切图怎么命名给前端
1、所有命名全部为小写英文字母
原因是开发小哥哥的代码里面全是小写的英文字母，如何切图命名成中文的话，会导致开发小哥哥将命名全部更改，这样会耽误产品开发的进度。
2、所有命名不得出现大写以及中文和空格或其他符号，单词之间用_隔开
切图格式：Png格式
通用切片命名格式：组件_类别_功能_状态@2x.png
举例：
[email protected]（中文对应的是：标签栏_图标_主页_默认@2x.png）
1.工程师在实现我们效果图的过程中，需要计算好每一个元素的位置，然后再调用我们切好的图进行填充，那么在团队协作过程中首先应该保证切图输出能够满足工程师设计效果图的高保真还原的需求；
2.切图输出应该尽可能的降低工程师的开发工作量，避免因切图输出而导致的不必要的工作量，养成良好的命名习惯，比如可以利用版本命名，亦或时间命名都可以更清晰地标明。
3.一个团队之间应该统一标准，制定并遵循规范，这样不管是后期版本的跟新迭代或者是设计师之间的交接，都会方便快捷很多。
F. web前端页面开发一般怎么命名
首先web前端工程师必须会的三点 HTML,CSS，js 不管是asp.net还是php都需要前三者，数据没有好与不好之说，看公司需求，但是sql语句不同数据库大同小异，所以先把sql语句学好吧
G. 前端html页面id命名问题
常用id的命名
(1) 页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
(2) 导航
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
(3) 功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：right
H. 前端开发命名必备单词
一、导航类
导航：nav 主导航：mainbav 子导航：subnav 顶导航：topnav
边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu
子菜单：submenu 标题：title 摘要：summary
二、页面结构
容器：container 页头：header 内容：content/container 页面主体：main
页尾：footer 导航：nav 侧栏：sidebar 栏目：column
页面外围控制整体布局宽度：wrapper 左右中：left right center
三、功能
标志：logo 滚动：scroll 广告：banner 标签页：tab
登录：login 文章列表：list 登录条：loginbar 提示信息：msg
注册：regsiter 当前的：current 搜索：search 小技巧：tips
功能区：shop 图标：icon 标题：title 注释：note
加入：joinus 指南：guild 状态：status 服务：service
按钮：btn 热点：hot 合作伙伴：partner 新闻：news
友情链接：friendlink 下载：download 版权：right 投票：vote
四、p英文释译
标题 title 字体 font 身体 body 大小 size
列表 list 文本 text 样式 style 对齐 align
图像 image 修饰 decoration 资源 source 线 line
宽度 width 穿过 through 高度 height 缩进 indent
行 line 斜体 italic 链接 link 加粗 bold
斜体 italic 加重 weight 加粗 bold 宽 width
输入 input 高 height 下面的 under 背景 background
顶部 top 主体 main
五、css英文释译
重复 repeat 填充 padding 位置 position 正常 normal
显示类型 display 父级 parent 显示可见 visibility 子级 children
隐藏 hidden 顶部导航topnav显示 visible 溢出 overflow
列表 list 样式 style 边框 border 导航 nav
广告图片 banner 行高line-height边界 margin 页眉 header
六、样式文件命名
主要的master.css 模块mole.css 基本共用base.css 布局，版面layout.css
主题themes.css 专栏columns.css 文字font.css 表单forms.css
补丁mend.css 打印print.css
七、颜色释译
绿 green 红 red 蓝 blue 黑 black
灰 gray 黄 yellowa 紫 purple 白 white
棕 brown 卡其色 khaki
六、命名参考
登录条loginBar 标志：logo 侧边栏：sideBar 广告：banner
导航：nav 子导航：navBar 菜单：menu 子菜单：subMenu
搜索：search 滚动：scroll 页面主体：main 内容：content
标签页：tab 文章列表：list 提示信息：msg 小技巧：tips
栏目标题：title 加入：joins 指南：guild 服务：service
热点：hot 新闻：news 按钮：btn 投票：vote
状态：status 合作伙伴：partner 外套：wrap 商标：label
顶导航：topnav 左导航：leftSideBar 右导航：rightSideBar菜单内容：menuContent
菜单容器：menuContainer注释：note 边导航图标：sidebarIcon版权：right
友情链接：friendLink容器：container 页脚：footer 当前：current
激活：active 购物车：shop 登录：login 注册：regsiter
下载：download 面包屑：breadCrumb
I. 说一下css规范
一、Css书写顺序：
1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
二、Css语法：
命名一般为小写英文字母。
为了代码的易读性，在每个声明块的左花括号前添加一个空格。
每条声明语句的:后应该插入一个空格。
所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。
对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5代替0.5；-.5px代替-0.5px）。
十六进制值应该全部小写，例如，#fff。
尽量使用简写形式的十六进制值，例如，用#fff代替#ffffff。
避免为 0 值指定单位，例如，用margin: 0;代替margin: 0px;。
减少CSS代码。
具有清洁的HTML标记，有语义的类名，逻辑性强的层次关系。
语义标记，有助于SEO。
更好的页面优化，更快的加载时间（因为有很多组件重用）。
可扩展的标记和CSS样式，有更多的组件可以放到库中，而不影响其他的组件。
能轻松构造新的页面布局，或制作新的页面风格。
Css常用的一些命名：
可参考：CSS 常用命名 - 彼岸时光 - 博客园。
三、Css的引入：
Css的引入一般有两种，link和@import,一般建议使用link引入。这样可以避免考虑@import的语法规则和注意事项，避免产生资源文件下载顺序混乱和http请求过多的烦恼。
四、Css的命名规范(BEM,OOCSS)：
什么是BEM：BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。
命名约定如下：
.block{} // 块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。
.block__element{} // 元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。
.block--modifier{} // 修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后，会有不同的外观。
优点：
BEM 的优点在于所产生的 CSS 类名都只使用一个类别选择器，可以避免传统做法中由于多个类别选择器嵌套带来的复杂的属性级联问题。在 BEM 命名规则中，所有的 CSS 样式规则都只用一个类别选择器。因此所有样式规则的特异性（specificity）都是相同的，也就不存在复杂的优先级问题。这可以简化属性值的层叠规则。代码清单中的命名规则的好处在于每个 CSS 类名都很简单明了，而且类名的层次关系可以与 DOM 节点的树型结构相对应。
缺点：
这样类名过于长，且复杂。
什么是OOCSS（面向对象CSS）：
OOCSS 表示的是面向对象 CSS（Object Oriented CSS），是一种把面向对象方法学应用到 CSS 代码组织和管理中的实践。 OOCSS最关键的一点就是：提高他的灵活性和可重用性。这个也是OOCSS最重要的一点。OOCSS主张是通过在基础组件中添加更多的类，从而扩展基础组件的CSS规则，从而使CSS有更好的扩展性。
OOCSS的优点：
OOCSS的缺点：
OOCSS适合真正的大型网站开发，因为大型网站用到的可重用性组件特别的多，如果运用在小型项目中可能见不到什么成效。所以用不用OOCSS应该根据你的项目来决定。如果没用巧妙的使用，创建组件可能对于你来说是一堆没用的东西，成为一烂摊子，给你的维护带来意想不到的杯具，说不定还是个维护的噩梦。
欢迎到优就业来了解
J. 前端开发中的图片的常规命名有哪些
所有的命名最好都小写。
文件夹命名，尽量采取单个英语单词描述，如login,index。
html文件名称，当需要多个英语单词描述时用”_”(下划线)连接多个单词分隔，如：user_add.html,动词放在后面，便于相同业务模块文件放在一起。
css，image，js文件名称，当需要多个英语单词描述时用”-“(分隔
线)连接多个单词分隔，如：font-awesome.css,login-user.jpg,login-pwd.jpg。 当基于某种类型从属关系划分文件时，以.(点)作为单词分隔，如：jquery.min.js,common.left-sliding.js
线)连接多个单词分隔，如：font-awesome.css,login-user.jpg,login-pwd.jpg。 当基于某种类型从属关系划分文件时，以.(点)作为单词分隔，如：jquery.min.js,common.left-sliding.jsjs变量命名
建议采取系统匈牙利命名法,因为js语言是一弱类型语言，声明变量时，在名称上标识其数据类型，以提高代码的的可读性。
变量名＝数据类型+对象描述
s: 表示字符串Stringn:表示数字i: 表示整型Int(它是Number中的整数类型)fl: 表示浮点Float(它是Number中的小数类型)b: 表示布尔Booleana: 表示数组Arrayo: 表示对象Objectfn: 表示函数Function
例如var aPerson = []; // Array数组var oBtn = document.getElementById(‘btn’); //Object对象var fnName = function () {}; // function函数var sName = “w3cplus”; // string字符串