精华内容
下载资源
问答
  • 前端代码自动生成

    万次阅读 多人点赞 2021-09-18 10:10:15
    CodeFun是一款UI 设计稿智能生成源代码的工具,支持微信小程序端、移动端H5和混合APP,上传 Sketch、PSD等形式的设计稿,通过智能化技术一键生成可维护的前端代码. 2.学习成本高吗? 对于前端工程师来说,几乎没有学习...

    场景

    1.CodeFun是什么
    CodeFun是一款UI 设计稿智能生成源代码的工具,支持微信小程序端、移动端H5和混合APP,上传 Sketch、PSD等形式的设计稿,通过智能化技术一键生成可维护的前端代码.
    2.学习成本高吗?
    对于前端工程师来说,几乎没有学习成本。
    对于用惯了蓝湖/摹客的前端工程师来说,CodeFun使用流程与前者几乎一致:设计师上传完稿件后,工程师打开界面,选择任意需要的 UI 区域拷贝走想要的代码即可,只是从原来看标注变成了直接拷贝代码。
    对于设计师来说,完全不需要遵循某些设计规范。
    CodeFun 算法的识别过程并不依赖于设计稿中任何的手工标注、特殊编组或特定规范,所以设计师按照原有的流程和设计风格正常输出即可,零新增工作量、零学习成本。
    在这里插入图片描述

    如何使用

    这部分内容将上传 Sketch 设计稿的流程作为范本介绍,PSD设计稿还处于内测阶段。
    CodeFun 的使用流程只有 3 个步骤:
    在 Sketch 插件中上传设计稿
    在 CodeFun 工具中查看代码
    将生成的代码拷贝到自己已有的工程中即可
    1、安装 Sketch 插件
    在CodeFun官网注册好账号后,登陆CodeFun后在用户菜单中下载插件。
    在这里插入图片描述

    在安装插件之前,请确保系统中已经装好 Sketch 。由于 Sketch 只支持 MacOs,所以插件端需要在 MacOs 中操作。使用的 Sketch 的版本建议在 60.0 以上,否则插件可能无法正常工作。

    接着,打开 Sketch,插件菜单中出现 CodeFun 选项,安装完成。

    上传设计稿

    加载一份 Sketch 设计稿(下载示例设计稿),然后插件菜单中打开 CodeFun 插件界面

    Sketch 菜单 > 插件 > CodeFun > 上传设计稿

    在这里插入图片描述
    在插件上登陆账号,通过插件创建一个项目,然后选择项目和上传页面。

    • 选择项目,表示当前上传的页面将放置到指定的项目中,这里选择刚刚创建的 “前端智能化codefun” 项目
    • 选择上传的页面,可以选择单张或上传全部页面
      在这里插入图片描述

    例子中有 3 个页面,想选择中间页面作为示例,这里选择【已选中画板】。上传完成后,点击【查看项目】按钮。可以先进行代码的预览,和图片资源的查看
    在这里插入图片描述
    以上是单个没有问题的话,可以进行简单的跳转交互,数据绑定的操作,可以下载代码

    获取代码

    用户在上传完设计稿后,有两种获取代码的方式:

    区域提取代码
    整站打包下载
    整站打包下载的方式相对来说比较简单,这里主要介绍区域提取代码,这种方式也是我们比较推崇的,用户可以根据自己的需求,拷贝任意区域的代码到自己已有的工程项目中。

    我们选择 CodeFun 设计稿,进入详情页,如图所示:
    在这里插入图片描述
    详情页总体分为左中右三部分

    • 左边栏显示文档树,后文称 Dom Tree,该树结构跟 HTML 的树结构保持一致
    • 中间是画布区域,可以用于选择元素对象
    • 右边栏是被选节点的属性面板,用于展示样式属性、交互配置和组件配置
      点击顶部工具栏右上角的查看代码按钮,打开代码面板
      在这里插入图片描述
      代码面板中默认展示 4 列,分别展示 HTML、CSS、JS 和全局样式的代码。
      在这里插入图片描述
      第一次打开时,会默认展示设置面板,如果不做任何修改,那么查看到的是小程序平台的原生代码。
      依次点击复制按钮,很方便地将代码拷贝到系统的粘贴板中。
      在这里插入图片描述
      打开小程序开发工具,分别将这四部分代码粘贴到小程序相应的文件中,这样就可以整页提取代码,但有时候页面中会遇到类似“Tab 标签页”、“Swipe 轮播”等交互式组件时,自动生成的整页代码并不能支持交互,此时我们就需要区域提取代码功能,拷贝我们想要区域的代码到已有的工程项目中
      在这里插入图片描述
      点击 Dom 树或者画布上的任意节点,可以观察到代码窗口的代码会发生变化,这正是 CodeFun 最重要的区域提供功能

    注意:当点击画布的空白区域时,Dom 树和画板都不再选中任何节点,此时代码窗口将显示整页代码。

    官网链接直达
    展开全文
  • 免费代码生成,直接生成后台和前端代码 现在不管是哪个公司进行互联网程序的开发,都有自己的一套代码生成。大部分公司都是直接从网上找源码,进行适当的修改变成自己的代码生成。 如果公司业务主要是后台管理...

    免费代码生成器,直接生成后台和前端代码

    现在不管是哪个公司进行互联网程序的开发,都有自己的一套代码生成器。大部分公司都是直接从网上找源码,进行适当的修改变成自己的代码生成器。
    如果公司业务主要是后台管理系统,对样式的要求很低,那么代码生成器可以直接生成前端的js,html。但是还有许多公司,需要先有ui设计师进行,再进行开发。这样的情况下,往往就只能生成后台的代码了。
    说下我们公司正在使用的代码生成器的网站,w w w .flyproduce.com.
    1.可以直接免费使用,省去了程序安装修改等操作。
    2.网站内有全面的视频教程和图文教程。
    3.如果你还需要自己生成一些特定的代码,或者文件。网站将所有项目生成时用到的参数也都给出,你定义个模板,以后也都生成了。
    4.网站不但生成后端代码,也生成了前端代码(不包括html)。只需要在js中写很简短的代码,就可以实现接口请求,实现表单页面的回显或者table页面回显。这样程序开发的速度将会非常快,程序的难度也会大大降低。相应的也极大的降低了开发成本。
    5.因为生成的代码只有后端代码,及前端js。所以html可以是任意的。对于项目频繁更换html,使用这样的程序结构是再好不过的。前端工程师写个html,只需要极少的双向数据的绑定,原来开发的js的逻辑及代码还是能够完整的复用的。
    6.还有一个巨大的潜力是,因为网站生成了除html以外的代码。这也就是说,你可以自己去选择html的生成方式,比如有些拖拽生成html的网站。如果你的html也能快速开发完成,配合这个网站,你的程序开发周期应该会非常非常短。而且,最近深度学习也可以生成html页面了,如果你训练了html页面生成的模型,或者有人提供了免费的html生成模型。那么配合这个网站,那么几乎所有增删改查的业务都只需要简单的进行下双向数据绑定即可。那么对于增删改查业务,不管工作量多大,开发周期可能都只需要几天就可以完成了。
    7.前端技术你可以使用vue或者react,使用vue有vue-flyproduce插件。使用react有react-flyproduce。
    8.vue本身具备双向数据绑定,在开发中可以有简化代码的效果。但是react是单向数据的输出,react-flyproduce实现了双向数据的绑定(实现方式不是使用监听的机制,所以不会影响react的性能)。
    9.生成项目后台使用到的技术,spring boot,mybatis,mybatis-plus,swagger2.前端技术vue,vue-flyproduce.或者react,react-flyproduce。以后可能还会扩展流行前端技术的支持
    网站:
    在这里插入图片描述
    vue表单示例:
    在这里插入图片描述
    vue表单示例,html代码:

    vue表单示例,js代码:
    在这里插入图片描述

    vue表格示例:
    在这里插入图片描述

    vue表格示例,html代码:
    在这里插入图片描述

    vue表格示例,js代码:
    在这里插入图片描述
    react 表单示例
    在这里插入图片描述
    react表单代码
    在这里插入图片描述
    在这里插入图片描述
    react表格示例 table组件使用react-bootstrap-table
    在这里插入图片描述
    react 表格代码
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 前端架构设计这块也已经工作了一段时间,也翻遍了很多书籍,但是就目前来说笔者还是没有看过真正把前端架构讲好的书,加上现在前端技术的发展诞生了许多新的框架,如:vue、react、angular,这也越来越淡化了前端...

        在前端架构设计这块也已经工作了一段时间,也翻遍了很多书籍,但是就目前来说笔者还是没有看过真正把前端架构讲好的书,加上现在前端技术的发展诞生了许多新的框架,如:vue、react、angular,这也越来越淡化了前端工程师们对架构设计的积极性,本着按这些技术本身的框架写就好,不用管其他,怎么方便怎么来的思维,最后带来的后果就是代码只有自己看的懂,一处修改处处bug,不利于多人协作,代码逻辑不清等各种常见问题,鉴于这些原因笔者还是想着大胆的提出一些自己的想法,当然也仅限于笔者自己的一些拙见,欢迎大家一起加入前端架构设计的探讨,打造更加美好的前端生态。

    vue.js是目前最流行的一套用于构建用户界面的渐进式框架。官网的介绍如下:

    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。

    这里明确说了一个问题,vue的核心库只关注视图层,那么我们在写一个前端系统的时候是否只有视图层,我想不是的,接触过三层架构的人可能知道,它应该还有业务逻辑层和数据访问层,也就是说vue并没有为广大前端工程师去考虑如何设计业务逻辑层和数据访问层,这些就是我们在设计前端架构的时候需要考虑的事情了。

    为了在页面上显示一个“hello world”,我们可以直接写的html的元素里面,如:

    <div>hello world</div>

    还可以在html页面中用JavaScript代码来实现,如:

    <div id="msg"></div>
    <script>document.getElementById('msg').innerHTML="hello world"</script>

    还有一个办法是什么呢,我们可以创建一个hello.js,然后在html页面中引入这个hello.js,如:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    	</head>
    	<body>
    		<div id="msg"></div>
    		<script type="text/javascript" src="hello.js" ></script>
    	</body>
    </html>

    //hello.js
    document.getElementById('msg').innerHTML='hello world';

        这应该就是目前比较常见的几种实现方式了,这三种方式基本可以代表系统不同阶段的设计问题了,如果我们的系统还非常非常简单,我们可能会选择第一种,虽然它的灵活性是最低的,但是在系统还只是一个demo的时候,它也是最快的,这一点我相信大家应该是认可的,可是现实开发中,我们的系统肯定不会简单到这种地步,我们需要保证一定的灵活性,所以第三种应该是最常见的方式,至少它做到了将页面与js代码分离,这在开发过程中会更方便我们实现某些需求,这就是一种架构变化的体现。

    随着我们系统一直变大,然后人们发现这种方式也不是最好的,虽然解决了一部分问题,但是代码还是会混乱,还是不好维护,然后我们就企图一直优化一直优化,然后话题回到我们要讲的vue,如果用vue来实现上面说的功能,它可以这么来实现:

    <div id="app">
      {{ message }}
    </div>
    new Vue({
      el: '#app',
      data: {
        message: 'hello world'
      }
    })

    是一种类似模板的方式实现的,但是不同的是vue可以实现双向数据绑定,页面与数据之间的维护由vue来实现,我们不再需要使用getElementById来获取元素,再修改元素,这就大大减轻了我们在html元素和数据之间的维护成本,再加上vue提供的一系列其他操作,我们在开发前端的过程中就像多了一把神器一样。

    但是上面的方式并没有解决一个问题,就是当我们的系统比较大的情况下,html元素可能会一层嵌套一层,而且量也非常大,当我们看到那么多的html代码的时候,那将是一件非常头疼的事,而且页面上肯定会有很多冗余的html代码,我们可能更希望的是修改了一处相同,其他相同的地方也能跟着变化,而不是打开系统的每个页面去查找相同的地方,然后修改,这种涉及到的变动太大了,维护成本那是相当的高,所以vue提供了这样一个功能:组件,再来一段官方解释:

    组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。

    这样就比较方便了,我们可以将很多页面重复的地方进行统一划分到一个组件中,也可以将一个页面中的元素划分到几个组件中,只要你觉得有这个必要。

    好了,vue能给我们解决的视图层的问题好像基本也就差不多了,貌似我们已经可以凭借着vue带给我们的便利驰聘前端沙场了。那么问题来了,我们在开发一个项目的时候,是否每一个数据都像hello world这么简单,我想没有人会告诉我真的就这么简单吧,应该说前端的数据绝大部分都是发送请求到后台,然后由后台返回。这中间会涉及到一些问题,前端需要发送请求到后台,后台返回的数据却不一定是前端想要的格式,尤其是现在主推前后端分离模式,这种情况肯定就更常见了,而且有些系统肯定还会遇到这样的情况,数据不是从一个后台接口系统过来的,可能会用上其他的三方系统提供的接口,比如:百度提供的某些API,这个时候更是无法限定后台数据返回格式。当然了,你也可以跟技术负责人说:我就要后台给我返回我要的格式,需要请求三方系统的接口的时候,让后台先请求一遍,转换成我想要的格式再返回给我,这不失为一个办法,但是呢,我想说的是,如果我是你们公司的技术负责人,不好意思,这个要求我没办法满足你,我们来算一笔账:

    假设公司现有后台系统能处理的QPS为500(请求数/秒),即平均每个请求耗时为:
    1000/500=2ms,
    现在需要将一个前端可以处理的任务放到后台系统进行处理,假设处理这个任务不管前端还是后台都是耗时2ms,
    那么理想状态下后台系统的QPS将会变成:
    1000/4=250(请求数/秒)
    这个结果直接导致后台系统处理数据的能力下降一半,如果后台系统必须要满足QPS为500,
    那么后台系统就需要在现有基础上至少增加一倍的配置来应对该变化,后台系统的维护成本也将相应的变高,
    而如果把这个任务放在前端处理,前端请求耗时将会是在原有耗时基础上增加2ms左右,不会出现叠加效果,对整个系统的影响可以忽略不计。

    看了这个数据之后,相信我们应该可以统一一个观点,那就是前端肯定不会简单到只写页面,肯定会涉及到前端有自己需要处理的业务数据。

        笔者曾经在做项目的过程中接触过一个前辈们写的js代码,里面多数都是涉及到需要前端处理的业务数据之类的操作,其中就有一个js文件中的代码行数达到了数万行,而且这样的文件还不止一个,然后带来的问题就是,因为文件代码量过大,有些不规范的写法无法查找出来,导致文件无法被压缩,而且代码复杂度相当高,修改代码的时候很容易就出现一处修改处处bug的情况,导致项目严重延期。前期写的时候大家都可以随心所欲的写,写的很快,后面就变成了系统各种问题频发,严重拖延系统开发进度,无法应对需求变更。

        谈到这里,我们的重点应该可以出现了,就是该如何去设计这个架构,让前端代码能看起来更加清晰易维护,便于多人协作开发,降低系统复杂度。前面我们说了,vue能帮我们实现的更多偏向于视图层,如果我们将业务代码与视图层代码全部写到一个vue文件中,那么这个文件将可能变得非常庞大,同样导致系统的复杂度变高,变得难以维护,业务代码之间的复用性也会变低,导致冗余代码过多。

        有人可能就会问了,废话了一大堆,能不能来点实在的,你说说怎么解决吧。在这里,笔者就上面的一些问题,在这里提出一套自己设想的架构方案,希望能解决目前大部分项目中遇到的这些问题。

        首先还是利用分层的思想,实现代码的逻辑分层,然后结合vue和ES6的优势,将代码模块化,使得整个代码结构清晰明了,易维护。首先笔者将各个分层结构展示给大家:


    该结构整体是由vue-cli进行创建,vue-cli生成的代码在这里就不做过多的解释,我们重点放在src文件夹中。

    assets:

        静态资源存放目录。主要就是存放系统需要用到的一些静态资源文件,如果有需要的情况下可以在里面建立子文件夹,便于区分静态资源属于哪个页面或者哪个模块。

    components:

        组件存放目录。主要存放各个模块需要用到的vue组件,组件的划分应该有:公共组件、模块组件,命名规则可以如下:

        +components
            -common

            -module(模块名称,如:login)

        组件的命名规则应该让人能很容易判断出来该文件的类型属于组件,如:HelloWorldComponent.vue。

    consts:

        静态变量存放目录。主要存放系统需要利用到的各种静态变量,如:后台请求的路径。在其他语言开发中,有一点是非常忌讳的,那就是魔法值,魔法值会使代码的可读性降低,增加维护成本;而且一旦变量不只在一个地方用到,在多处或者多个文件,一旦涉及到该变量的变更就会导致多处修改,又增加了维护成本,容易导致新的Bug出现。

    下面给出一个命名规则示例代码:

    /**
     * 以类的方式进行封装,类名的命名规则为变量作用类型+Constant,容易一眼看出来该类的用处和作用范围
     */
    class RequestConstant {
    	/**
    	 * 根据process.env.NODE_ENV的值确定网关地址,可以保证两种环境下的切换,避免了因为人为忘记修改该值,导致部署生产环境时出错
    	 */
    	static DOMAIN_URL = process.env.NODE_ENV == 'development' ?
    		'我是开发环境下的配置' : '我是生产环境下的配置';
    	/**
    	 * 请求的路径
    	 */
    	static SAY_HELLO_PATH = '/mock/sayHello';
    }
    
    export default RequestConstant;
    libs:

        库文件存放目录。在开发过程中总会遇到需要引入一些其他外部的库,而这些库在npm仓库中却又不存在,这个目录的用处就主要用来放置这些库文件。

    mock:

        mock模拟数据接口目录。用于提供模拟数据,方便测试。

    plugins:

        vue插件存放目录。主要存放一些比较通用的插件,命名规则可以如下:

        插件用途+Plugin,如:ErrorMsgPlugin.js

    router:

        vue路由文件存放目录。一般一个就够,当然,如果系统够大,那么拆分也是有必要的,如果拆分路由文件的话,建议采用模块名+Router的方式。

    services:

        业务逻辑层。这层的主要目的就是为了将视图层与业务逻辑层解耦而划分出来,因为vue所代表的视图层已经承担了不少视图层的工作,不应该还让视图层承担业务逻辑层的工作,如:

        视图层需要加载后台请求的数据,请求之后还需要做判断是否成功,返回的结果是否满足视图层的需要,如果不满足是否需要再做转换,这一系列的业务操作如果放在视图层,那么视图层就会变得非常庞大。业务层的文件划分应该更偏向于模块,而视图层文件则是根据项目需求的页面来定,一个模块可以只有一个页面也可以同时拥有几个页面。业务层应该具备这种复用性,方便模块之间调用,如果将业务层代码直接写入视图层,那么业务层的复用性直接就被降低,还会让视图层显得非常臃肿,代码维护难度也随之上升。假设A、B两个页面需要同时调用一段相同的方法,而这个代码不会涉及到任何视图相关的内容,如果在A、B页面里面都写上这段代码,那么一旦涉及代码修改,带来的变动就不再是单纯的一个页面,而是A、B两个,倘若这段代码使用率极高,那么带来的问题将会是巨大的。

        在设计的过程中,我们还应该考虑两个原则:单一职责原则、最少知识原则。如果视图层与业务层耦合,那么视图层和业务层的职责不在单一,同时也违背了对象之间最少了解的原则。

    下面给出一个业务层设计参考代码:

    import RequestUtil from '../utils/RequestUtil'
    
    import RequestConstant from '../consts/RequestConstant'
    /**
     * 模块名+Service的命名规则
     */
    class HelloWorldService {
    
    	/**
    	 * 初始化实例变量
    	 */
    	constructor(_this) {
    		this.requestUtil = new RequestUtil();
    		this._this = _this;
    	}
    	/**
    	 * 业务逻辑层的方法
    	 * 视图层只需要知道调用该方法就行,至于该方法里面的代码是如何成功实现返回是不需要视图层关心的
    	 */
    	sayHello() {
    		console.log(this._this);
    		return 'hello';
    	}
    
    	/**
    	 * 该方法涉及到了异步回调,回调函数只需要关心回调的结果是视图层想要的
    	 * RequestConstant.SAY_HELLO_PATH接口路径变量其实是业务层需要知道的,视图层则是不需要关心数据是从哪个接口过来的
    	 */
    	sayAsyncHello(callBack) {
    		this.requestUtil.getRequest(RequestConstant.SAY_HELLO_PATH, {}, function(data) {
    			let newObjArr = new Array();
    			newObjArr.push(data); //转换数据格式,满足视图层需要
    			callBack(newObjArr);
    		});
    	}
    
    }
    
    export default HelloWorldService;

    store:

    vuex状态管理器。如果模块较多可以按模块划分子文件夹,子文件较多的情况下命名规则建议:模块名+Store

    utils:

    工具类存放目录。主要放一些系统需要用到的通用小工具。如:http请求工具类、日期格式化工具类等。

    views:

    视图文件存放目录。如果视图较多可以划分模块子文件夹。


    以上内容都是笔者自己在进行项目开发过程中总结的一些经验,当然了,有可能会存在一些不太合适的地方,欢迎大家一起对前端架构进行探讨,创造更加完美的前端架构设计方案。

    示例源码下载地址:http://download.csdn.net/download/u010520626/10265009







    展开全文
  • 前端代码规范手册

    千次阅读 2018-08-15 15:43:15
    前端代码规范手册       Web Coding Guidelines     前言 本手册的愿景是码出高效,码出质量。现代软件架构都需要协同开发完成,高效 协作即降低协同成本,提升沟通效率,所谓无规矩不成方圆,无规范不...

     

     

     

     

    前端代码规范手册

     

     

     

    Web Coding Guidelines

     

     

    前言

    本手册的愿景是码出高效,码出质量。现代软件架构都需要协同开发完成,高效 协作即降低协同成本,提升沟通效率,所谓无规矩不成方圆,无规范不能协作。众所 周知,制订交通法规表面上是要限制行车权,实际上是保障公众的人身安全。试想如 果没有限速,没有红绿灯,谁还敢上路行驶。对软件来说,适当的规范和标准绝不是 消灭代码内容的创造性、优雅性,而是限制过度个性化,以一种普遍认可的统一方式 一起做事,提升协作效率。代码的字里行间流淌的是软件生命中的血液,质量的提升 是尽可能少踩坑,杜绝踩重复的坑,切实提升质量意识。

     

     

    前端开发手册

    版本号

    指定团队

    更新日期

    备注

    0.0.1

    格致文化前端团队

    2018.7.26

     

     


    一、规范目的 
    1.1 概述 

    为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后可以更改此文档. 

    二、文件规范 

    2.1文件命名规则  
        文件名称统一用小写的英文字母、数字和下划线的组合,其中不得包含汉字、空格和特殊字符;命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义,二是当我们在文件夹中使用“按名称排例”的命令时,同一种大类的文件能够排列在一起,以便我们查找、修改、替换、计算负载量等等操作。 

    a.  HTML的命名原则引文件统一使用index.htm  index.html  index.asp文件名(小写)各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称。

    例如: 关于我们 / aboutus 信息反馈 / feedback 产 品 / product 
    如果栏目名称多而复杂并不好以英文单词命名,则统一使用该栏目名称拼音或拼音的首字母表示;每一个目录中应该包含一个缺省的html 文件,文件名统一用index.htm  index.html  index.asp;

    b.  图片的命名原则 
    图片的名称分为头尾两部分,用下划线隔开,头部分表示此图片的大类性质例如:广告、标志、菜单、按钮等等。放置在页面顶部的广告、装饰图案等长方形的图片取名: banner标志性的图片取名为: logo在页面上位置不固定并且带有链接的小图片我们取名为 button 在页面上某一个位置连续出现,性质相同的链接栏目的图片我们取名: menu 装饰用的照片我们取名: pic不带链接表示标题的图片我们取名: title 范例:banner_sohu.gif  banner_sina.gif  menu_aboutus.gif  menu_job.gif  title_news.gif  logo_police.gif   logo_national.gif   pic_people.jpg鼠标感应效果图片命名规范为"图片名+_+on/off"。例如:menu1_on.gif  menu1_off.gif

    c.  javascript的命名原则例如:广告条的javascript文件名为 ad.js  弹出窗口的javascript文件名为 pop.js

    d.  动态语言文件命名原则以性质_描述,描述可以有多个单词,用“_”隔开,性质一般是该页面得概要。范例:register_form.asp   register_post.asp   topic_lock.asp 
    2.2文件存放位置规范

    _Root                 
            cn        存放中文HTML文件 
            en        存放英文HTML文件 
            flash        存放Flash文件 
            images        存放图片文件 
            imagestudio        存放PSD源文件 
            flashstudio        存放flash源文件 
            inc        存放include文件 
            library        存放DW库文件 
            media        存放多媒体文件 
            project        存放工程项目资料 
            temp        存放客户原始资料 
            js        存放JavaScript脚本 
            css        存放CSS文件 


    2.3 CSS 书写规范 
    基本原则: 

    CSS样式可细分为3类:自定义样式、重新定义HTML样式、链接状态样式。 
    1. 样式为设计师自定义的新 CSS 样式,影响被使用本样式的区域,用于完成网页中局部的样式设定。样式名 “.”+“相应样式效果描述的单词或缩写”例:“ .shadow ”文字样式样式名“.no”+“字号”+“行距”+“颜色缩写”例:“ .no12 ” 、“ .no12-24 ” 
    2. 义HTML样式为设计师重新定义已有的HTML标签样式,影响全部的被设定标签样式,用于统一网页中某一标签的样式定义。样式名“HTML标签”例:hr { border: 1px dotted #333333 } 
    3. 态样式为设计师对链接不同状态设定特殊样式,影响被使用本样式区域中的链接。该样式写法有2种: a.nav:link    nav.a:link  第一种只能修饰<a>标签中;第二种可以修饰所有包含有<a>标签的其他标签。 
    页面内的样式加载必须用链接方式<link rel="stylesheet" type="text/css" href="style/style.css"> 

    注意细则: 

    1. 协作开发及分工: i会根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构&;表现&;行为; 共用css文件base.css由i书写, 协作开发过程中, 每个页面请务必都要引入, 此文件包含reset及头部底部样式, 此文件不可随意修改; 
    2. class与id的使用: id是唯一的并是父级的, class是可以重复的并是子级的, 所以id仅使用在大的模块上, class可用在重复使用率高及子级中; id原则上都是由我分发框架文件时命名的, 为JavaScript预留钩子的除外; 
    3. 为JavaScript预留钩子的命名, 请以 js_ 起始, 比如: js_hide, js_show; 
    4. class与id命名: 大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样式名称由 小写英文 &; 数字 &; _ 来组合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 尽量使用简易的单词组合; 总之, 命名要语义化, 简明化. 
    5. 规避class与id命名(此条重要, 若有不明白请及时与i沟通):   
    a, 通过从属写法规避, 示例见d;  
    b, 取父级元素id/class命名部分命名, 示例见d;  
    c, 重复使用率高的命名, 请以自己代号加下划线起始, 比如i_clear;  
    d, a,b两条, 适用于在2中已建好框架的页面, 如, 要在2中已建好框架的页面代码<div id="mainnav"></div>中加入新的div元素, 
    按a命名法则: <div id="mainnav"><div class="firstnav">...</div></div>,  
    样式写法:  #mainnav  .firstnav{.......} 
    按b命名法则: <div id="mainnav"><div class="main_firstnav">...</div></div>, 样式写法:  .main_firstnav{.......} 
    6. css属性书写顺序, 建议遵循 布局定位属性-->自身属性-->文本属性-->其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起. 属性列举: 布局定位属性主要包括: margin、padding、float(包括clear)、position(相应的 top,right,bottom,left)、display、visibility、overflow等;自身属性主要包括: width &; height &; background &; border; 文本属性主要包括:font、color、text-align、text-decoration、text-indent等;其他属性包括: list-style(列表样式)、vertical-vlign、cursor、z-index(层叠顺序) 、zoom等.我所列出的这些属性只是最常用到的, 并不代表全部; 
    7. 书写代码前, 考虑并提高样式重复使用率; 
    8. 充分利用html自身属性及样式继承原理减少代码量, 比如: 
    <ul class="list"><li>这儿是标题列表<span>2010-09-15</ul> 
    定义ul.list li{position:relative}  ul.list li span{position:absolute; right:0} 
    即可实现日期居右显示 
    9. 样式表中中文字体名, 请务必转码成unicode码, 以避免编码错误时乱码; 
    10. 景图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite按模块制作; 
    11. 使用table标签时(尽量避免使用table标签), 请不要用width/ height/cellspacing/cellpadding等table属性直接定义表现, 应尽可能的利用table自身私有属性分离结构与表现, 如thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing及cellpadding的css控制方法: table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;} , base.css文件中我会初始化表格样式) 
    12. 杜绝使用<meta http-equiv="X-UA-Compatible" content="IE=7" /> 兼容ie8; 
    13. 用png图片做图片时, 要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果, 请为ie6单独定义背景: 
    background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’); 
    14. 避免兼容性属性的使用, 比如text-shadow || css3的相关属性; 
    15. 减少使用影响性能的属性, 比如position:absolute || float ; 
    16. 必须为大区块样式添加注释, 小区块适量注释; 
    17. 代码缩进与格式: 建议单行书写, 可根据自身习惯, 后期优化i会统一处理; 


    命名规则: 
    头:header 
      内容:content/container 
      尾:footer 
      导航:nav 
      侧栏:sidebar 
      栏目:column 
      页面外围控制整体布局宽度:wrapper 
      左右中:left right center 
      登录条:loginbar 
      标志:logo 
      广告:banner 
      页面主体:main 
      热点:hot 
      新闻:news 
      下载:download 
      子导航:subnav 
      菜单:menu 
      子菜单:submenu 
      搜索:search 
      友情链接:friendlink 
      页脚:footer 
      版权:copyright 
      滚动:scroll 
      内容:content 
      标签页:tab 
      文章列表:list 
      提示信息:msg 
      小技巧:tips 
      栏目标题:title 
      加入:joinus 
      指南:guild 
      服务:service 
      注册:regsiter 
      状态:status 
      投票:vote 
      合作伙伴:partner 
    (二)注释的写法: 
      /* Footer */ 
      内容区 
      /* End Footer */ 
    (三)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 
      版权:copyright/ 

    基本样式:  

    /* CSS Document */ 
    body {margin:0; padding:0; font:12px "/5B8B/4F53",san-serif;background:#fff;} 
    div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}    
    table,td,tr,th{font-size:12px;} 
    li{list-style-type:none;} 
    img{vertical-align:top;border:0;} 
    ol,ul {list-style:none;} 
    h1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;} 
    address,cite,code,em,th {font-weight:normal; font-style:normal;} 
    .fB{font-weight:bold;} 
    .f12px{font-size:12px;} 
    .f14px{font-size:14px;} 
    .left{float:left;} 
    .right{float:right;} 

    a {color:#2b2b2b; text-decoration:none;} 
    a:visited {text-decoration:none;} 
    a:hover {color:#ba2636;text-decoration:underline;} 
    a:active {color:#ba2636;} 

    重定义的最先,伪类其次,自定义最后,便于自己和他人阅读! 

        不同浏览器上字号保持一致,字号建议用点数pt和像素px来定义,pt一般使用中文宋体的9pt 和11pt,px一般使用中文宋体12px 和14.7px 这是经过优化的字号,黑体字或者宋体字加粗时,一般选用11pt 和14.7px 的字号比较合适。中英文混排时,我们尽可能的将英文和数字定义为verdana 和arial 两种字体。 


    2.4 html 书写规范 
    网页制作细节 ---- head区代码规范  
    head区是指HTML代码的<head>和</head>之间的内容。  
    必须加入的标签  
    公司版权注释  <!--- The site is designed by EHM,Inc 07/2005 ---> 
    网页显示字符集  
    简体中文:<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312"> 
    繁体中文:<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> 
    英 语:<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> 
    网页制作者信息  <META name="author" content=" aliyunzixun@xxx.com">  
    网站简介  <META NAME="DESCRIPTION" CONTENT="xxxxxxxxxxxxxxxxxxxxxxxxxx"> 
    搜索关键字  <META NAME="keywords" CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,"> 
    网页的css规范  <LINK href="../css/style.css" rel="stylesheet" type="text/css"> 
    网页标题  <title>xxxxxxxxxxxxxxxxxx</title> 
    可以选择加入的标签  
    设定网页的到期时间。一旦网页过期,必须到服务器上重新调阅。  
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">  
    禁止浏览器从本地机的缓存中调阅页面内容。  
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
    用来防止别人在框架里调用你的页面。 
    <META HTTP-EQUIV="Window-target" CONTENT="_top"> 
    自动跳转。 
    <META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.yahoo.com">  5指时间停留5秒 
    网页搜索机器人向导。用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。 
    <META NAME="robots" CONTENT="none"> 
    CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。  
    收藏夹图标  <link rel = "Shortcut Icon" href="favicon.ico"> 
    所有的javascript的调用尽量采取外部调用.  
    <SCRIPT LANGUAGE="JavaScript" SRC="script/xxxxx.js"></SCRIPT>  
    附<body>标签:  
    <body>标签不属于head区,这里强调一下,为了保证浏览器的兼容性,必须设置页面背景<body bgcolor="#FFFFFF"> 

    网页制作细节 ---- 字体1. 在设定字体样式时对于文字字号样式和行间距应必须使用CSS样式表。禁止在页面中出现 <font size=?> 标记。2.在网页中中文应首选使用宋体。英文和数字首选使用verdana 和arial 两种字体。一般使用中文宋体的9pt 和11pt 或12px 和14.7px 这是经过优化的字号,黑体字或者宋体字加粗时,一般选用11pt 和14.7px 的字号比较合适。3. 为了最大程度的发挥浏览器自动排版的功能,在一段完整的文字中请尽量不要使用 
    来人工干预分段。4.不同语种的文字之间应该有一个半角空格,但避头的符号之前和避尾的符号之后除外,汉字之间的标点要用全角标点,英文字母和数字周围的括号应该使用半角括号。 5. 请不要在网页中连续出现多于一个的   也尽量少使用全角空格(英文字符集下,全角空格会变成乱码),空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。 6. 行距建议用百分比来定义,常用的两个行距的值是line-height:120%/150%. 7. 排版中我们经常会遇到需要进行首行缩进的处理,不要使用   或者全角空格来达到效果,规范的做法是在样式表中定义 p { text-indent: 2em; } 然后给每一段加上 标记,注意,一般情况下,请不要省略 结束标记 。 

    网页制作细节 ---- 链接1. 网站中的链接路径全部采用相对路径,一般链接到某一目录下的缺省文件的链接路径不必写全名,如我们不必这样:<a href=”aboutus/index.htm”> 而应该这样:<a href=”aboutus/”>,所有内页指向首页的链接写成<a href=”/”>2. 在浏览器里,当我们点击空链接时,它会自动将当前页面重置到首端,从而影响用户正常的阅读内容,我们用代码“javascript:void(null)”代替原来的“#”标记 

    网页制作细节 ---- 表格1px表格 style="border-collapse: collapse"实例如下:<table border="1" cellspacing="0" width="32" height="32" style="border-collapse: collapse"bordercolor="#000000" cellpadding="0"> <tr> <td></td></tr></table>设置亮、暗边框颜色表格有亮边框(bordercolorlight)和暗边框(bordercolordark)两个属性可以对表格样式设置。<table border="1" width="500" bordercolorlight="#000000" bordercolordark="#FFFFFF">在写 <table> 互相嵌套时,严格按照的规范,对于单独的一个<table>来说,<table><tr>对齐,<td> 缩进两个半角空格,<td> 中如果还有嵌套的表格,<table>也缩进两个半角空格,如果<td>中没有任何嵌套的表格,</td> 结束标记应该与 <td> 处于同一行,不要换行,如我们注意在源代码中不应有这样的代码:<td><img src=”../images/sample.gif”> </td>而应该是这样的:<td><img src=”../images/sample.gif”></td>这是因为浏览器认为换行相当于一个半角空格,以上不规范的写法相当于无意中增加一个半角空格,如果确实有必要增加一个半角空格,也应该这样写: <td><img src=”../images/sample.gif”> </td>一个网页要尽量避免用整个一张大表格,所有的内容都嵌套在这个大表格之内,因为浏览器在解释页面的元素时,是以表格为单位逐一显示,如果一张网页是嵌套在一个大表格之内,那么很可能造成的后果就是,当浏览者敲入网址,他要先面对一片空白很长时间,然后所有的网页内容同时出现。如果必须这样做,请使用 <tbody>标记,以便能够使这个大表格分块显示 

    网页制作细节 ---- 下载速度首页Flash 网页大小应限定在 200K 以下,尽可能的使用矢量图形和Action来减小动画大小。非首页静态页面含图片大小应限定在 70K 左右,尽可能的使用背景颜色替换大块同色图片。 

    网页制作细节 ---- includeasp标准写法 <!--#include file="inc/index_top.asp" -->jsp 标准写法 <%@ include file="../inc/index_top..jsp" %> 

    网页制作细节 ---- Alt和Title 都是提示性语言标签,请注意它们之间的区别。  
    在我们浏览网页时,当鼠标停留在图片对象或文字链接上时,在鼠标的右下角有时会出现一个提示信息框。对目标进行一定的注释说明。在一些场合,它的作用是很重要的。  
    alt 用来给图片来提示的。Title用来给链接文字或普通文字提示的。  
    用法如下:  
    <p Title="给链接文字提示">文字  
    <a href="#" Title="给链接文字提示">文字</a>  
    <img src="图片.gif" alt="给图片提示">  
    网页制作细节 ---- 缓存  
    网页不会被缓存  
    HTM网页  
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">  
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">  
    <META HTTP-EQUIV="expires" CONTENT="0">  
    ASP网页  
    Response.Expires = -1  
    Response.ExpiresAbsolute = Now() - 1  
    Response.cachecontrol = "no-cache" 
    网页制作细节 ---- 浏览器兼容性创建站点时,应该明白访问者可能使用各种 Web 浏览器。在已知的其他设计限制下,尽可能将站点设计为具有最大的浏览器兼容性。目前使用的 Web 浏览器有二十多种,大多数已发行了多个版本。即使您只针对使用 Netscape Navigator 和 Microsoft Internet Explorer 的大多数 Web 用户,但您应明确并不是每个人都在使用这两种浏览器的最新版本。您的站点越复杂(在布局、动画、多媒体内容和交互方面),跨浏览器兼容的可能性就越小。例如,并非所有的浏览器都可以运行JavaScript。不使用特殊字符的纯文本页面或许能够在任何浏览器中正确显示,但比起有效地使用图形、布局和交互的页面,这样的页面在美感上可能要差得多。所以,应尽量在最佳效果设计和最大浏览器兼容性设计之间取得平衡。所有的HTML 标签的属性都要用单引号或者双引号括起,即我们应该写 <a href=”url”> 而不 是 <a href=url>. 

    图片处理细节 ---- banner全尺寸banner为468X60px,半尺寸banner为234X60px,小banner为88X31px。另外120X90,120X60也是小图标的标准尺寸。全尺寸banner不超过14K。普遍的banner尺寸760X100,750X120,468X60,468X95,728X90,585X140次级页的pip尺寸360X300,336X280游标:100X100或120X120 

    图片处理细节 ---- LOGO的国际标准规范为了便于INTERNET上信息的传播,一个统一的国际标准是需要的。实际上已经有了这样的一整套标准。其中关于网站的LOGO,目前有三种规格:88*31 这是互联网上最普遍的LOGO规格。120*60 这种规格用于一般大小的LOGO。120*90 这种规格用于大型LOGO。 

    图片处理细节 ---- 页面修饰图片处理图片经过优化以加快下载的速度,有较佳的视觉空间效果,用图要与页面风格、页面内容相符;制作精美,细节处理得当。 


    2.5 JavaScript书写规范 
    1. 书写过程中, 每行代码结束必须有分号; 原则上所有功能均根据XXX项目需求原生开发, 以避免网上down下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 || ...); 
    2. 库引入: 原则上仅引入jQuery库, 若需引入第三方库, 须与团队其他人员讨论决定; 
    3. 变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun; jQuery变量要求首字符为'_', 其他与原生JavaScript 规则相同, 如: _iTaoLun; 另, 要求变量集中声明, 避免全局变量. 
    4. 类命名: 首字母大写, 驼峰式命名. 如 ITaoLun; 
    5. 函数命名: 首字母小写驼峰式命名. 如iTaoLun(); 
    6. 命名语义化, 尽可能利用英文单词或其缩写; 
    7. 尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval() &; innerText; 
    8. 后期优化中, JavaScript非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示; 
    9. 代码结构明了, 加适量注释. 提高函数重用率; 
    10. 注重与html分离, 减小reflow, 注重性能. 

    2.6 图片规范 
    1. 所有页面元素类图片均放入img文件夹, 测试用图片放于img/demoimg文件夹; 
    2. 图片格式仅限于gif || png || jpg; 
    3. 命名全部用小写英文字母 || 数字 || _ 的组合,其中不得包含汉字 || 空格 || 特殊字符;尽量用易懂的词汇, 便于团队其他成员理解; 另, 命名分头尾两部分, 用下划线隔开, 比如ad_left01.gif || btn_submit.gif; 
    4. 在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间; 
    5. 尽量避免使用半透明的png图片(若使用, 请参考css规范相关说明); 
    6. 运用css sprite技术集中小的背景图或图标, 减小页面http请求, 但注意, 请务必在对应的sprite psd源图中划参考线, 并保存至img目录下. 


    2.7 注释规范 
    1. html注释: 注释格式 <!--这儿是注释-->, '--'只能在注释的始末位置,不可置入注释文字区域; 
    2. css注释: 注释格式 /*这儿是注释*/; 
    3. JavaScript注释, 单行注释使用'//这儿是单行注释' ,多行注释使用 /* 这儿有多行注释 */; 


    2.8 浏览器兼容性 CSS hack 

    一、标识区别:区别IE6,IE7,IE8,FF。1. IE都能识别* ; 标准浏览器(如FF)不能识别*; 
    2. IE6能识别*,但不能识别 !important; IE6在样式前面加_ 
    3. IE7能识别*,也能识别!important; 
    4. IE8能识别/ 9 例如:background:red /9; 
    5. firefox不能识别*,但能识别!important; 

    1.IE6和firefox的区别:background:orange;*background:blue;意思就是火狐浏览器的背景颜色是橙色,而IE浏览器的背景色是蓝色. 
    2. IE6和IE7的区别:background:green !important;background:blue;意思指的是:IE7的背景颜色是绿色,IE6的背景颜色是蓝色 
    3. IE7和FF的区别:background:orange; *background:green;意思指的是:火狐浏览器的背景颜色是橙色,而IE7的背景颜色是绿色 
    4. FF,IE7,IE6的区别:background:orange; *background:green !important; *background:blue;意思是火狐浏览器的的背景橙色,IE7浏览器的背景颜色是绿色,而IE6浏览器的颜色是蓝色. 
    二、实践建议 
    (1).  开发平台的选择 
    在 Firefox 上编写CSS, 同时兼容其他浏览器的. 这样做肯定会比在 IE 做好再到别的浏览器兼容来得容易, 因为 IE 对老标准支持还是很不错的, 而 IE 的一些特有功能人家却不支持. 所以推荐以 Firefox 结合 Firebug 扩展作为平台。 
    (2).  CSS Hack 的顺序 
    使用 Firefox 作为平台, 只要代码写得够标准, 其实要 Hack 的地方不会很多的, IE 以外的浏览器几乎都不会有问题, 所以可以暂时忽略, 
    顺序如下:Firefox -> IE6 -> IE7 -> 其他 
    (3).   Hack 的方法 
    说到方法有两种, 一种是在不同文件中处理, 另一种则是在同一个文件中处理. 其实作用是相同的, 只是出发点不一样而已. 
    1. 同一文件中处理.如: id="bgcolor"的控件要在 IE6中显示蓝色, IE7中显示绿色, Firefox等其他浏览器中显示红色。 

    IE6不认 !important,也不认 *+html.所以 IE6只能是 blue.IE7认 !important,也认 *+html,优先度: (*+html + !important) > !important > +html. IE7可以是 red, blue和 green,但 green的优先度最高.Firefox和其他浏览器都认 !important. !important优先, Firefox可以是 red和 blue,但 red优先度高.上述的优先符号均是 CSS3标准允许的,其他浏览器也还有其他的 Hack方法,但我迄今还没遇到过 Firefox正常, IE以外的其他浏览器不正常的情况,所以无可分享.只要代码规范,相信这种情况的发生应该是很罕见 (JavaScript除外). 
    2. 不同文件中处理.为什么同一文件中可以处理还要写在多个文件里面针对不同的浏览器?这是为了欺骗 W3C的验证工具,其实只需要两个文件,一个是针对所有浏览器的,一个只为 IE服务.将所有符合 W3C的代码写到一个里面去,而一些 IE中必须的,又不能通过 W3C验证的代码 (如: cursor:hand;)放到另一个文件中,再用下面的方法导入.

     

    展开全文
  • 前端开发应知网站(强烈推荐!)

    万次阅读 多人点赞 2019-08-31 14:37:49
    作为一名前端开发者(所有程序员)最起码遇到bug就算不会解决也应该会搜解决问题的答案。 一般笔者会先在百度搜(关键词一定要输入正确) 如果没搜到会再去bing里面看看 还没有的话就去github的Issues里面再看看 ...
  • 前端代码风格规范

    千次阅读 2018-07-25 09:54:45
    规范目的:为了提高工作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,在网站建设中,使结构更加清晰,代码简明有序,有一个更好的前端架构。 规范基本准则:符合web标准,使用具有语义的标签...
  • Vue ElementUI 表单设计器 代码生成器

    千次阅读 2020-12-28 21:39:23
    界面效果 体验地址 github gitee(国内) ...5、支持生成json逆向渲染表单,json格式完全遵循vue render标准,支持透传属性、事件、插槽等给内部控件,灵活度丝毫不亚于直接生成vue代码。 6、支持
  • 前端工具】实用的代码生成

    千次阅读 2021-01-27 17:05:31
    前言:收录非常实用的前端代码生成,让开发更高效。如果您有更好的工具,欢迎留言分享~ 1、CSS3 Box Shadow阴影在线代码生成 该工具主要用于在线自动生成CSS3阴影代码,轻轻松松兼容各大浏览器 2、CSS文字样式...
  • 前端代码也有一年了,一直在三亚米饭网络公司,小有收货。今天给大家分享一下我觉得前端开发比较好的工具,可以大大提升开发效率,而且都是可以在windows 和Mac OSX下完美使用。 更新一个 0.alloydesigner ...
  • 前端代码标准最佳实践:CSS

    千次阅读 2012-08-08 09:54:57
    上一篇《前端代码标准最佳实践:javascript》发表后,大家讨论还是很热烈,从侧面体现了前端工程师对写标准的前端代码的重视程度很高。这些最佳标准实践并不是那个权威组织发布的,而是由大量的前端工程师们在实践...
  • 程序员必备网页前端设计网站

    千次阅读 2019-12-06 09:35:20
    程序员必备的相关资源网站一、网页设计篇1、DOOOOR2、创客贴3、图帮主4、懒设计5、ColorHunt6、ArtStation7、SiteInspire8、CollectUI9、logopond二、图片篇(1)1、Librestock2、StockSnap3、iphone6papers4、500...
  • WEB前端代码编写技巧

    千次阅读 2016-10-10 19:42:28
    、学会查看优秀网站的源代码,并且下载保存下来.善于学习 没有什么比模仿你的偶像能让你更快的学习 HTML 。起初,我们都要甘做复印机,然后慢慢得发展自己的风格。研究你喜欢的网站页面代码,看看他们是怎么实现的...
  • 前端架构设计

    万次阅读 2017-05-03 11:56:53
    前端架构师们认为有多个关键的决策需要在项目启动之初就制定下来,如果等到开发阶段的后期再考虑,不是已经用不上,而是一开始错误的决定已经造成了无法挽回的损失。一旦做出这些决策,我们的任务就是去辅助视觉设计...
  • 开始启程, 你的第一行前端代码

    千次阅读 2017-03-10 09:38:07
    学习前端开发亦是同理,我们开始学习之前我们必须要弄清楚 前端开发的职业前景怎么样? Vue.js是什么?为什么选择它? 学完Vue.js我们能够干什么? 如果自身对以上三个问题的答案都不感兴趣,那么劝诫大家不要再自己...
  • 如何优化前端代码

    千次阅读 2018-10-06 18:00:14
    HTTP协议是前端性能乃至安全中一个非常重要的话题,最近在看《web性能权威指南(High Performance Browser Networking)》,把其中关于HTTP部分的内容拿出来分享一下,加了一点自己的想法,当然没有《HTTP权威指南》讲...
  • 前端代码规范(静态检查)工具

    万次阅读 2016-06-07 18:57:20
    CSSLint官网:http://csslint.netCSSLint是一个用来帮你找出CSS代码中问题的工具,它可做基本的语法检查以及使用一套预设的规则来检查代码中的问题,规则是...使用方法:进入官网首页,粘贴你的代码,你的错误和不正
  • 大公司里怎样开发和部署前端代码? 主要有以下问题: 开发时的和部署时类库的引用和存放是一致还是不同? 模块放在项目中还是放在 CDN 之类服务器? 渲染网页用 Nginx 还是其他动态语言的 Web 服务器? 制作...
  • 前端可视化软件guiplan教程,无论是懂前端还是不懂前端,都可以学会基本... 支持手写代码与自动生成代码混合编写开发,比如添加过滤filters,监听watch等。 灵活便捷对程序员有好,是一款真正适合程序员开发的软件。
  • 前百度工程师,曾负责百度前端集成解决方案的核心设计与开发工作。我现在称这个领域为【前端工程】。没错,这是我最爱唠叨的问题域。这是一个非常有趣的非主流前端领域,这个领域要探索的是如何用工程手段解决前端...
  • 怎样开发和部署前端代码

    千次阅读 2016-10-31 11:48:09
    这是一个非常有趣的 非主流前端领域,这个领域要探索的是如何用工程手段解决前端开发和部署优化的综合问题,入行到现在一直在学习和实践中。 在我的印象中,facebook是这个领域的鼻祖,有兴趣、有梯
  • 如何保障前端项目的代码质量

    千次阅读 2018-09-10 11:05:49
    对于中大型前端项目,项目规范与代码质量尤为重要。当功能需求变更或需要重构时,随心所欲的(糟糕的)代码可能带来比重新开发还麻烦的问题。 1 前端项目代码中的常见问题 1.1 凌乱的书写风格,阅读体验差 这个问题...
  • 前端常用网页代码

    千次阅读 多人点赞 2018-03-05 11:47:18
    29、IE浏览支持一个 Body 属性 bgproperties,它可以让背景不滚动: ——————————————– < Body Background = ”图片文件” bgproperties = ”fixed” > 30、随机变换背景图象...
  • 前端开发写代码哪个软件更好用?

    千次阅读 多人点赞 2019-11-13 10:59:52
    群里的朋友,经常问到web前端开发写代码用那个软件好?今天在这里统一回答下,主流的web前端开发写代码的软件有这些Webstorm、Vscode、Sublime Text、HBuilder、Dreamweaver、notepad++、editplus等,做前端这么多年...
  • 网站前端技术之通俗理解

    千次阅读 多人点赞 2020-11-27 15:20:14
    网站技术中,前端就是用户界面,主要通过页面向用户展示内容或数据,同时用户可以自主选择需要的内容并向网站填写数据后给出反馈。 前端是相对后端而言的。前+后这种分工模式,在生活中或人类的组织分工中非常常见...
  • 群里的朋友,经常问到web前端开发写代码用那个软件好?今天在这里统一回答下,主流的web前端开发写代码的软件有这些Webstorm、Vscode、Sublime Text、HBuilder、Dreamweaver、notepad++、editplus等,做前端这么多年...
  • 大公司里怎样开发和部署前端代码? 主要有以下问题: 开发时的和部署时类库的引用和存放是一致还是不同? 模块放在项目中还是放在 CDN 之类服务器? 渲染网页用 Nginx 还是其他动态语言的 Web 服务器? ...
  • 前端代码标准最佳实践:CSS篇

    千次阅读 多人点赞 2013-08-20 22:53:57
    接着上一篇,我们再来谈谈CSS代码的一些标准实践。 1,命名 和其他语言规范一样,css的命名也讲究命名要有意义,命名要尽可能短但是要足够表达含义;命名的词用连字符连接。 不规范的命名: ? 1 2 3 4 5 6 ...
  • 全文共2158字,预计学习时长4分钟by阿芬亚·迪哈勒特 有创意的蓝先生开发机器人前端开发是编程中特殊的一小部分。一名真正高效的前端工程师需要具备兼顾创造力和分析能力。...
  • 程序员,都去写一写前端代码

    千次阅读 2017-04-21 10:44:29
    你可以认为我是一个极端的人,就像有许多人专注于自己的领域而不屑于其它“肤浅”的工作范畴一样。...并不只有底层开发或者机器学习充满睿智的挑战,我做了几年网站,很难说这就是我最初的兴趣,虽然也在接触和

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 68,021
精华内容 27,208
关键字:

网站前端代码设计器