如何把传统写法改成框架形式 es6

每天思考的问题：
1.什么是组件
2.什么是插件
3.如何把传统写法改成框架形式
4.前端为什么要使用框架，使用框架的好处是什么？

5640239-9c220c8e4e775c48.png
Image.png

http://www.zhihu.com/question/20888075

http://cn.vuejs.org/guide/components.html#u4EC0_u4E48_u662F_u7EC4_u4EF6_uFF1F

https://coding.net/

阿里的服务器：
https://ecs-buy.aliyun.com/#/prepay

https://ecs-buy.aliyun.com/#/prepay

https://www.aliyun.com/price/product/?spm=5176.ecsPrepay.instance.1.tq3O0R#/ecs/calculator

5640239-d4c61ef59615dbb4.png
Image.png

怎么样判断上次已经有了就不需要绑定了，只需要数据就行

5640239-a0988b9bb319e3dd.png
Image.png

事先准备一个对象，为空判断是否存在；存在，修改数据，不存在，在创建一个。app第一次声明后，第二次就不需要声明，在外面声明的，是全局变量。

5640239-6cfa77418c10c4c7.png
Image.png

删除页面结构：
维护项目的时候会非常困难；哪些地方有关联；
================================
组件component
定义一个元素的名字，用js去解析它；

5640239-ee37c258855acef0.png
Image.png
5640239-71996fb1d8a734dc.png
Image.png

把组件拿到凡客的项目里面
哪个标签上的HTML代码不会解析它：
定义好了并不想放到全局里面，只想给自己的实例使用；
==========================================
==========================================

require(["vue"],function(Vue){

                  // 定义
                  // 扩展组件
                  var MyComponent = Vue.extend({
                       data : function(){
                            return {
                                "list" : ["a","b","c"]
                            }
                       },
                       // 定义组件展示的内容
                       template: '<div v-on:click="test_click">'+
                            '<p v-for="item in list">{{item}}</p>'+
                       '</div>',
                       methods : {
                            "test_click" : function(){
                                 alert(11111);
                            }
                       }
                  })
                  
                  // 创建根实例
                  new Vue({
                       el: '#example',
                       //定义为局部组件
                       components : {
                            'first_com' : MyComponent
                       }
                  });
                  
                  new Vue({
                       el : "#demo",
                       //定义为局部组件
                       components : {
                            'first_com' : MyComponent
                       }
                  });
             });
5640239-f767c0848b973e91.png
Image.png

解构赋值：
用三个变量来接收三个元素：
根据数组元素的下标对应赋值：

5640239-0c3b639cad1693dd.png
Image.png

三个点是省略的意思，元素，数组

5640239-5d792b66455f8ba8.png
Image.png

对象的解构赋值：
es6的新语法：

5640239-bce15b71d1b503cf.png
Image.png

调 用的模块只用其中的一个 方法：
用解构赋值只取其中的一个呗：

===================
循环：
of.js
使用数组的时候不要使用for in？

5640239-43f508c44de66966.png
Image.png

打印了原型链上的奇怪的东西

5640239-ee9bd1a8060d703e.png
Image.png

of循环子元素，而不是下标

5640239-731f8ef0b5a0f52a.png
Image.png

set.js数组：
保存数组的完整性，就不会添加重复的值；
只返回元素，不返回下标

5640239-6e18d478b959c388.png
Image.png

三个点，直接变成数组

5640239-9c5dea7b85798ead.png
Image.png

多添加几个数

5640239-65b4a4f5eaf120b6.png
Image.png

使用解构赋值，将set对象转换为array；

set是数组，map是对象：

5640239-14e9f4782cd1267c.png
Image.png

=======

5640239-29ebfdde07c04d70.png
Image.png
5640239-6178c8c86dbe5a34.png
Image.png
5640239-4893c702239d1869.png
Image.png
{
  "name": "node_web",
  "version": "1.0.0",
  "description": "node wechat",
  "main": "server/app.js",
  "scripts": {
    "test": "node server/app.js"
  },
  "author": "svon@svon.org",
  "license": "ISC"
}
5640239-0546593b668f50a9.png
Image.png

1.搭建网站的模块：

npm install express --save
5640239-2c43eacfb6700808.png
Image.png

2.处理node.js里post请求的数据：

npm install body-parser --save
5640239-0adabb82f77f4160.png
Image.png

3.HTML的高级语法：

npm install swig --save
5640239-1bf136608415349f.png
Image.png

http://www.expressjs.com.cn/

5640239-32e1d3c1c3054b95.png
Image.png

//导入express模块：

const express=require("express");

//实例化express：

const app=express();

请求路由地址，如果是post，就会触发：

5640239-8f934e3c87faa115.png
Image.png

监听什么端口，这里就写什么端口；

5640239-53651e207ef0206c.png
Image.png

三个语法：在浏览器中，在node.js中运行：

amd cmd commonjs
5640239-db74446d212b3777.png
Image.png

把一个目录当做一个静态文件的根目录：
访问的路由是配置的路由地址开头的都能访问；

app.use("/view",express.static("./views"));

//监听本机端口号，运行服务

const server

如何测试：

5640239-a8ecfea6b3ce0121.png
Image.png
5640239-1667b4468c26889d.png
Image.png

//导入express模块

const express = require('express');

//实例化express

const app     = express();

//系统模块

const path    = require("path");
const Swig    = require('swig');
const swig    = new Swig.Swig();

//声明get 请求，路由是/

app.get('/',function(req,res){
       res.send('hello world');
})

//声明post 请求是路由是/abc/

app.post("/abc/",function(req,res){
       res.send("hello post");
});
//app.engine('html', swig.renderFile);
//app.set('views',"./views");
//app.set('view engine', 'swig');

//把一个目录当做一个静态文件服务的根目录
//访问的路由是配置的路由地址开头的都能访问

app.use("/views",express.static(path.join(__dirname,"../views")));

//__dirname 系统变量，当前文件路径

//console.log(path.join(__dirname));

//监听本机端口号，运行服务

const server = app.listen(9000,function(){
       var host = server.address().address;
       var port = server.address().port;
       console.log('http://%s:%s',host,port);
});
5640239-49cbf67c970d7dca.png
Image.png
5640239-007cfe99c6d23db0.png
Image.png

不用重启服务，都可以更新了

Swig.setDefaults({
    cache : false //不缓存文件
});
5640239-bbd1bc5480f31eba.png
Image.png

ajax有异步，会延迟的：字符块{%header%}

5640239-b8adbe987b1c86f1.png
Image.png
5640239-4985f933a09d2c89.png
Image.png
5640239-80e65b8f4fb53c5d.png
Image.png

项目重构完成

posted @ 2017-10-01 10:50  前端视听  阅读(121)  评论(0)  编辑  收藏  举报