海南综合网站,网站建设验收内容,wordpress怎么解压,陕西建设部网站官网1. 背景及现状
随着前端开发复杂度的日益增加#xff0c;各种优秀的组件框架也遍地开花。同时#xff0c;我们面临业务规模的快速发展和工程师团队的不断扩张#xff0c;如何解决资源整合、模块开发、项目部署、性能优化等问题势在必行。
2. 目标
根据背景和现状的分析各种优秀的组件框架也遍地开花。同时我们面临业务规模的快速发展和工程师团队的不断扩张如何解决资源整合、模块开发、项目部署、性能优化等问题势在必行。
2. 目标
根据背景和现状的分析我们现制订一个规范化的前端工作流很好地规范统一项目的模块化开发和前端资源让代码的维护和互相协作更加容易更加方便令前端开发自动化成为一种习惯。同时让大家能够释放生产力提高开发效率更好更快地完成团队开发。
3. 技术路线
SVN是一个开放源代码的版本控制系统相较于RCS、CVS它采用了分支管理系统它的设计目标就是取代CVS。互联网上很多版本控制服务已从CVS迁移到Subversion。说得简单一点SVN就是用于多个人共同开发同一个项目共用资源的目的。
GIT是一款免费、开源的分布式版本控制系统用于敏捷高效地处理任何或小或大的项目。它采用了分布式版本库的方式不必服务器端软件支持使源代码的发布和交流极其方便。
GULP是前端开发过程中对代码进行构建的工具是自动化项目的构建利器。它不仅能对网站资源进行优化而且在开发过程中很多重复的任务能够使用各种工具自动完成大大提高我们的工作效率。
WEBPACK是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔等到实际需要的时候再异步加载。通过 loader 的转换任何形式的资源都可以视作模块。
SASS是一种CSS预处理器。它是对CSS的语法的一种扩充它可以使用巢状、混入、选择子继承等功能可以更有效有弹性的写出Stylesheet。Sass最后还是会编译出合法的CSS让浏览可以使用也就是说它本身的语法并不太容易让浏览器识别虽然它和CSS的语法非常的像几乎一样因为它不是标准的CSS格式在它的语法内部可以使用动态变量等所以它更像一种极简单的动态语言。
RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用但它也可以用在其他脚本环境, 就像 Rhino and Node. 使用RequireJS加载模块化脚本将提高代码的加载速度和质量。
artTemplate是新一代javascript模板引擎它采用预编译方式让性能有了质的飞跃并且充分利用javascript引擎特性使得其性能无论在前端还是后端都有极其出色的表现。在chrome下渲染效率测试中分别是知名引擎Mustache与micro tmpl的25、32倍。
ReactJS是Facebook推出的一个用来构建用户界面的JavaScript库。设计思想极其独特属于革命性创新性能出众代码逻辑却非常简单。从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。
VueJS是开源的一个前端开发库,通过简洁API提供高效的数据绑定和灵活的组件系统。
4. 业内标准
W3C标准
5. 总体设计
5.1. 工作流总体架构 5.2. 详细设计图
5.2.1. 代码管理层
SVN属于集中化的版本控制系统使用起来有点像是档案仓库的感觉支持并行读写文件支持代码的版本化管理功能包括取出、导入、更新、分支、改名、还原、合并等等。使用比较简单这里不再赘述。
GIT是分布式的版本控制系统。它采用了分布式版本库的方式不必服务器端软件支持。操作命令包括clonepullpush,branch ,merge ,push,rebase等等具体使用我也不赘述。
SVN和GIT的使用SVN适用于项目管理。因为它简单易用。当代码涉及多组成员或者代码有一定的秘密性用svn管理都是省事放心。
Git适用于代码管理。对于组内的一些公用组件或者sdk之类的代码用git更好管理更新更快。
5.2.2. Images层 (1).图片可以按页面和公共模块来分着存放。 (2).一个页面独有的图片用一个文件夹存放方便压缩和合成雪碧图。 (3).公用的图片元素或者出现多次的图片元素存放到public文件夹。 (4).pic文件夹用于存放静态页面时的demo图片上正式环境的时候这个文件里的东西可以清除。
格式使用 GIF GIF是一种正在逐渐被抛弃的图片格式。PNG格式的出现就是为了替代它。PNG 8除了不支持动画外PNG8有GIF所有的特点但是比GIF更加具有优势的是它支持alpha透明和更优的压缩GIF仅支持索引透明。 但是当图片颜色简单到一定程度大小小到一定程度的时候gif格式图片大小要小于png8。
JPG 支持摄影图像或写实图像的高级压缩并且可利用压缩比例控制图像文件大小。 有损压缩会使图像数据质量下降并且在编辑和重新保存JPG格式图像时这种下降损失会累积。 JPG和PNG8都适合颜色较少的图片因为JPG在栅格化时精确记录少数点其它点用差值补齐。但是当图像颜色数少于一定值比如256的时候PNG8可能更合适。 JPG不适合具有大块颜色相近的区域或亮度(锐度)差异十分明显的较简单的图片。 JPG在存储摄影或写实图像一般能达到最佳的压缩效果比如网站的背景图轮播图用户头像等等。
PNG PNG可以细分为三种格式:PNG8PNG24PNG32。 后面的数字代表这种PNG格式最多可以索引和存储的颜色值。”8″代表2的8次方也就是256色而24则代表2的24次方大概有1600多万色。 能在保证最不失真的情况下尽可能压缩图像文件的大小。 PNG用来存储灰度图像时灰度图像的深度可多到16位存储彩色图像时彩色图像的深度可多到48位并且还可存储多到16位的α通道数据。 对于需要高保真的较复杂的图像PNG虽然能无损压缩但图片文件较大不适合应用在Web页面上。
使用规则 1、少用图片元素尽量用css3代替。 2、尽量少用png24格式要半透明的除外。 3、JPG适合摄影图像或写实图像同时也适合颜色较少图像。 4、PNG8 适合所含颜色很少(少于256)、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。 5、PNG24适合图片较为复杂且有透明效果且透明效果无法用css来实现的情况。 6、如果页面中有较多的小icon首先考虑使用webfont,如果webfont不能满足需求必须使用css sprite将图片合并来压缩总体图片的大小同时减少页面请求提高访问速度。参考见webfont字库 7、小于8k的图片请转化为base64。
5.2.3. CSS层 css层通过sass来管理这样能更加灵活方便和容易维护。具体规范参考css规范。 使用规则 1、Include文件夹用来存放公共模块reset或者重用性很高的mixin等等全局公用的样式。 2、Components文件夹用来存放组件级别的公用样式例如公用的按钮样式icon样式弹窗的样式等等。 3、css命名最好就语义化。
5.2.4. HTML层
HTML层主要就是版本号的控制这个放在下面GULP的使用时介绍。html的规范参考HTML规范。
5.2.5. JS层
js规范点击这里
5.2.5.1. JS模块化标准--RequireJS
通过使用大家熟悉的AMD规范能统一大家的js标准。模块化的开发更方便代码的共享和按需加载提高开发的效率。借助RequireJS可以实现js文件的异步加载管理模块之间的依赖性便于代码的编写和维护。 RequireJS使用原则 新项目可以采取这个模板为基础去扩展代码。都在同一个区域定义变量都在同一个区域定义事件都在同一个地方绑定事件最后初始化和暴露方法。套用代码标准模板可以做到大家的代码风格类似以后接手的同学一看就知道代码在哪里快速上手。
5.2.5.2. JS模板引擎--artTemplate
artTemplate这个模板引擎相对成熟性能比较好。支持运行时调试可精确定位异常模板所在语句模板语句简洁浏览器支持完整。 artTemplate的使用规则 按照它的api来使用即可。 5.2.5.3. MVVM和类MVC框架
5.2.5.3.1. ReactJS
ReactJS是一个用来构建用户界面的 JavaScript 库虚拟DOM的使用让它的性能优越。同时它实现了单向响应的数据流从而减少了重复代码这也是它为什么比传统数据绑定更简单的原因。 鉴于ReactJS对IE的支持不足所以比较适合使用到移动端的项目中去。 接下来介绍ReactJS的基本使用。
5.2.5.3.1.1. HTML模板 5.2.5.3.1.2. ReactDOM.render()
ReactDOM.render 是 React 的最基本方法用于将模板转为 HTML 语言并插入指定的 DOM 节点。 5.2.5.3.1.3. JSX 语法
JSX的语法就是直接写在 JavaScript 语言之中不加任何引号。它允许 HTML 与 JavaScript 的混写简单方便。 5.2.5.3.1.4. 封装组件
React 允许将代码封装成组件然后像插入普通 HTML 标签一样在网页中插入这个组件。React.createClass 方法就用于生成一个组件类的。 5.2.5.3.1.5. PropTypes 属性
PropTypes属性是用来验证组件实例的属性是否符合要求的一个利器。 Mytitle组件有一个title属性。PropTypes 告诉 React这个 title 属性是必须的而且它的值必须是字符串。如果实例化过程中title不是字符串就会验证不通过出现后台报错的信息。5.2.5.3.1.6. this.state
React 的一大创新就是将组件看成是一个状态机一开始有一个初始状态然后用户互动导致状态变化从而触发重新渲染UI 。state就是状态的存取对象。 截图的例子中getInitialState 方法用于定义初始状态这个对象可以通过 this.state 属性读取。当用户点击组件导致状态变化this.setState 方法就修改状态值每次修改以后自动调用 this.render 方法再次渲染组件。5.2.5.3.2. VueJS
VueJs是一个短小精悍容易上手的MVVM框架。Api清晰使用容易。支持ie8以上等其他主流的浏览器。适合在移动端和浏览器要求偏弱的项目。 VueJs的基本使用
5.2.5.3.2.1. 数据绑定 5.2.5.3.2.2. 双向绑定 5.2.5.3.2.3. 渲染列表 5.2.6. 自动化构建工具
5.2.6.1. GULP
GULP简单易用是前端自动化项目的构建利器。能把很多繁琐重复的工作简单化命令化。作为前端工作流的利器是一个不错的选择。加上丰富的组件让它能干更多自动化的事情。
5.2.6.1.1. GULP的使用
1、全局安装 2、在项目根目录下创建一个名为 gulpfile.js 的文件3、运行 gulp具体的语法请参考官网。5.2.6.1.2. GULP的插件使用
5.2.6.1.2.1. 合并css-- gulp-concat-css 5.2.6.1.2.2. 合并js-- gulp-concat 5.2.6.1.2.3. 压缩混淆js--gulp-uglify 5.2.6.1.2.4. 压缩css-- gulp-minify-css/gulp-clean-css 5.2.6.1.2.5. 监听文件的更新-- gulp-livereload 这个例子是监听样式的更新。5.2.6.1.2.6. 图片压缩-- gulp-imagemin 5.2.6.1.2.7. 生成雪碧图-- gulp.spritesmith Sprite.css是雪碧图生成的css。5.2.6.1.2.8. 版本号的控制-- gulp-rev-append
gulp-rev-append 插件会通过正则(?:href|src)”(.)[?]rev(.)[“]查找并给指定链接填加版本号默认根据文件MD5生成因此文件未发生改变这个版本号将不会改变。 运行后的结果 5.2.6.1.2.9. 编译sass-- gulp-sass 还有其他很多插件不再一一介绍。
5.2.6.2. Webpack webpack是目前用得最多的一款模块加载器兼打包工具。
webpack是以 commonJS 的形式来书写脚本滴但对 AMD/CMD 的支持也很全面方便旧项目进行代码迁移。 开发便捷能替代部分 grunt/gulp 的工作比如打包、压缩混淆、图片转base64等。 扩展性强插件机制完善特别是支持 React 热插拔的功能让人眼前一亮。 下面简单介绍Webpack的基本使用。
5.2.6.2.1. 全局安装 5.2.6.2.2. 简单使用 运行 这样就会编译entry.js并打包到bundle.js。5.2.6.2.3. Loader
Webpack 本身只能处理 JavaScript 模块如果要处理其他类型的文件就需要使用 loader 进行转换。 Loader可以理解为是模块和资源的转换器它本身是一个函数接受源文件作为参数返回转换的结果。这样我们就可以通过 require 来加载任何类型的模块或文件比如 CoffeeScript、 JSX、 SASS 或图片。 module.loaders 告知 webpack 每一种文件都需要使用什么加载器来处理。
5.2.6.2.4. GULP和Webpack的混合使用 在gulp里面只需把配置写到webpack({ ... }) 中去即可不用再写 webpack.config.js 。
5.2.6.2.5. 在ReactJS里面使用Webpack
在ReactJS里面安装react-hot-loader再结合Webpack就可以实现修改即更新同步的效果。
6. 技术亮点
6.1. 统一标准提高工作效率有利团队合作
借鉴业内出名的诸如RequireJS、SASS等框架统一前端代码的规范有利于以后的团队合作使用GULP、Webpack等高效的构建工具能提高工作的效率减少工作量。更有利于代码的维护和可扩展性。
6.2. 跨平台支持灵活多变的场景
模块化的设计和可扩展的代码模式加上灵活的自动化构建工具适合各种场景的开发。也便于新成员的接入。
总结这个其实是我2年前写出来的设计方案现在看起来并不先进甚至有点落后。扔出来只是给大家提供一个思路技术选型和打包发布还得看你们的具体业务。方案说得有点笼统还望谅解。
