• 如何把传统写法改成框架形式 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

    项目重构完成

  • 相关阅读:
    Account group in ERP and its mapping relationship with CRM partner group
    错误消息Number not in interval XXX when downloading
    错误消息Form of address 0001 not designated for organization
    Algorithm类介绍(core)
    梯度下降与随机梯度下降
    反思
    绘图: matplotlib核心剖析
    ORB
    SIFT
    Harris角点
  • 原文地址:https://www.cnblogs.com/wangting888/p/9702135.html
Copyright © 2020-2023  润新知