工具/原料NodeJsWindows系统方法/步骤要使用Grunt,第一件事是安装Node.js。(即使你没用过Node.js也不用担心——你只需安装它让Grunt能运行。)安装了Node.js之后,用命令行工具执行以下命令:$npminstall-ggrunt-cli要确认Grunt是否正确安装,可以使用以下命令:$grunt--version下一步是在你的项目的根目录下创建package.json和gruntfile.js两个文件。创建package.json文件这个JSON文件让我们指定我们的开发环境所依赖的必须模块。有了它,项目的所有开发者都能保证安装上一致的必须模块,从而保证所有人拥有一样的开发环境。在项目根目录下的pacakge.json文件中写上:{"name":"SampleGrunt","version":"0.1.0","author":"BrandonRandom","private":true,"devDependencies":{"grunt":"~0.4.0"}}然后在命令行工具运行:$npminstall该命令告诉npm需要安装的必须模块,npm会安装它们,自动保存在项目根目录下一个叫做node_modules的文件夹里。创建gruntfile.js文件gruntfile.js文件本质上就是一个wrapper函数,接受grunt作为参数:module.exports=function(grunt){grunt.initConfig({pkg:grunt.file.readJSON('package.json')})grunt.registerTask('default',[])}现在你已经可以在项目根目录下运行grunt命令行工具了。$grunt>Task"default"notfound.Use--forcetocontinue.这里我们只指定了Grunt作为必须模块,还没定义任何任务。接下来我们就要指定任务和必须模块。首先来看如何拓展package.json文件。拓展package.json文件使用Node.js最好的一点,就是它可以根据package.json文件的内容,一次性查找和安装多个package。要安装我们项目的所有必须任务,只须在package.json文件中加上以下内容:{"name":"SampleGrunt","version":"0.1.0","author":"MikeCunsolo","private":true,"devDependencies":{"grunt":"~0.4.0","grunt-contrib-cssmin":"*","grunt-contrib-sass":"*","grunt-contrib-uglify":"*","grunt-contrib-watch":"*","grunt-cssc":"*","grunt-htmlhint":"*","matchdep":"*"}}那么如何实现安装?你肯定已经猜到了:$npminstall使用Grunt载入任务package安装好后,还必须被Grunt载入才能为我们所用。使用matchdep,我们用一行代码就可以自动载入所有任务。这是开发流程的一大优化,因为现在我们只须把必须任务列表写在package.json一个文件里,便于管理。在gruntfile.js里,grunt.initConfig之上,写上以下代码:require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks)要是没有matchdep,我们就必须为每一个必须任务写一次grunt.loadNpmTasks(“grunt-task-name”),随着我们使用的任务的增加,这些载入任务的代码很快就会变得相当繁冗。在Grunt载入这些任务前,我们还可以指定设置选项。现在我们需要创建我们的HTML文件(index.html):EnteryourfirstnameEnteryourfirstname用HTMLHint验证HTML在grunt.initConfig里加入下列设置代码:htmlhint:{build:{options:{'tag-pair':true,'tagname-lowercase':true,'attr-lowercase':true,'attr-value-double-quotes':true,'doctype-first':true,'spec-char-escape':true,'id-unique':true,'head-script-disabled':true,'style-disabled':true},src:['index.html']}}一般来说,一个plugin的设置方法如下:plugin的名称(去掉grunt-contrib-或grunt-前缀),选择使用此plugin的一个或多个对象(在这里可以给不同文件设置此plugin的不同选项),一个选项object,以及plugin要作用的对象。现在,如果我们用命令行工具运行grunthtmlhint,该plugin就会检查我们在src里指定的HTML文件,验证其中有没有错误!但是每个小时都要手动运行几次这个任务,很快就让人觉得很繁琐了。自动化任务运行watch是一个特殊的任务,它可以在目标文件保存时自动触发一系列任务的运行。在grunt.initConfig里加入以下设置:watch:{html:{files:['index.html'],tasks:['htmlhint']}}然后,在命令行工具中运行gruntwatch命令。现在,你可以试试在index.html里加一行注释,保存文件。你会注意到,保存文件时会自动触发HTML的验证!这是对开发流程的一大优化:在你写代码时,watch任务就会默默同时为你验证代码,如果验证失败任务就会报告失败(它还会告诉你问题在哪)。注意gruntwatch任务会一直运行,直到命令行工具关闭,或手动停止(control+c在Mac中)。保持JavaScript极简让我们来写一个验证用户输入的名字的JavaScript文件。简便起见,我们这里只检查其中是否含有非字母的字符。我们的JavaScript会使用strict模式,这可以防止我们写可用但低质量的JavaScript。创建assets/js/base.js文件并在其中写上:functionValidator(){"usestrict"}Validator.prototype.checkName=function(name){"usestrict"return(/[^a-z]/i.test(name)===false)}window.addEventListener('load',function(){"usestrict"document.getElementById('firstname').addEventListener('blur',function(){var_this=thisvarvalidator=newValidator()varvalidation=document.getElementById('namevalidation')if(validator.checkName(_this.value)===true){validation.innerHTML='Looksgood!:)'validation.className="validationyep"_this.className="yep"}else{validation.innerHTML='Looksbad!:('validation.className="validationnope"_this.className="nope"}})})让我们用UglifyJS来极简化这个源代码,在grunt.initConfig中加上以下设置:uglify:{build:{files:{'build/js/base.min.js':['assets/js/base.js']}}}UglifyJS会替换所有的变量和函数名,剔除所有空白和注释,从而生成占据最小空间的JavaScript文件,对发布非常有用。同样地,我们需要设置一个watch任务来使用它,在watch的设置里加入以下代码:watch:{js:{files:['assets/js/base.js'],tasks:['uglify']}}9现在我们有了一个静态HTML页面,一个存放Sass和JavaScript源文件的assets文件夹,一个存放优化后的CSS和JavaScript的build文件夹,以及package.json文件和gruntfile.js文件。至此你已经有了一个不错的基础来进一步探索Grunt。像之前提到的,一个非常活跃的开发者社区在为Grunt开发前端plugin。我建议你现在就到pluginlibrary去看看那300个以上的plugin。
React 和 Vue 有许多相似之处,它们都有:
1.使用 Virtual DOM
2.提供了响应式(Reactive)和组件化(Composable)的视图组件。
3.将注意力集中保持在核心库,伴随于此,有配套的路由和负责处理全局状态管理的库。
React 和 Vue 的区别:
1.复杂性
在 API 与设计两方面上 Vue.js 都比 Angular 1 简单得多,因此你可以快速地掌握它的全部特性并投入开发。
2.灵活性和模块化
Vue.js 是一个更加灵活开放的解决方案。它允许你以希望的方式组织应用程序,而不是在任何时候都必须遵循 Angular 1 制定的规则,这让 Vue 能适用于各种项目。我们知道把决定权交给你是非常必要的。
这也就是为什么我们提供 Webpack template,让你可以用几分钟,去选择是否启用高级特性,比如热模块加载、linting、CSS 提取等等。
3.数据绑定
Angular 1 使用双向绑定,Vue 在不同组件间强制使用单向数据流。这使应用中的数据流更加清晰易懂。
4.指令与组件
在 Vue 中指令和组件分得更清晰。指令只封装 DOM 操作,而组件代表一个自给自足的独立单元 —— 有自己的视图和数据逻辑。在 Angular 中两者有不少相混的地方。
5.性能
Vue 有更好的性能,并且非常非常容易优化,因为它不使用脏检查。
Vue.js 是一个用来开发Web 界面的前端库。《Vue.js权威指南》致力于普及国内Vue.js 技术体系,让更多喜欢前端的人员了解和学习Vue.js。如果你对Vue.js 基础知识感兴趣,如果你对源码解析感兴趣,如果你对Vue.js 2.0感兴趣,如果你对主流打包工具感兴趣,如果你对如何实践感兴趣,《Vue.js权威指南》都是一本不容错过的以示例代码为引导、知识涵盖全面的最佳选择。
《Vue.js权威指南》一共30 章,由浅入深地讲解了Vue.js 基本语法及源码解析。主要内容包括数据绑定、指令、表单控件绑定、过滤器、组件、表单验证、服务通信、路由和视图、vue-cli、测试开发和调试、源码解析及主流打包构建工具等。该书内容全面,讲解细致,示例丰富,适用于各层次的开发者。
flexible.js手淘框架,是一个用来适配移动端的js框架。
手淘框架的核心原理就是根据不同的width给网页中html跟节点设置不同的font-size,然后所有的距离大小都用rem来代替,这样就实现了不同大小的屏幕都适应相同的样式了。