我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线:400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

javascript痛点的简单介绍

JavaScript 入门哪本书最好

入门可以看《javascript高级程序设计》与《javascript dom 编程艺术》尤其是后者,真是好书。我以前看了许多视频,翻那本很厚的指南与高程,最后还是靠《javascript dom 编程艺术》激发我学习兴趣入门。

成都创新互联是一家专业提供黎平企业网站建设,专注与做网站、网站制作H5页面制作、小程序制作等业务。10年已为黎平众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。

看了三四次《javascript高级程序设计》就可以看蝴蝶书《javascript语言精辟》,这是讲JS的语法设计,那些语法应该用,那些不应该用(如==、 with、 eval、 argument.caller),这提高你的代码质量必不可少。

如果你想写一个插件或一个库,就要涉及大量DOM,BOM知识了。毕竟javascript是胶水语言,而CSS与HTML在JS里都会映射为DOM,此外还有一些涉及浏览器的东西,叫BOM。

掌握各大浏览器提供的底层DOM、BOM API,及了解它们之间的差异,如何检测它们是否支持,如果屏蔽它们之间的差异性,如何选用最佳的API是我们成为高手的关键。

《PPK 谈 Javascript》,主要是说DOM的兼容性与可用性问题。

《JavaScript DOM高级程序设计》,这本非常优秀,不知为何被理没了(也可能是出版社的缘故,很早就买断货就不知道补课),我在这里了解许多操作CSS的API。

《JavaScript框架设计》这完全是本面向中高级的书,涉及一般书没有讲解过的模块加载器,事件管理系统,选择器引擎,异步列队,动画引擎,及时下日益流行的MVVM架构。

《数据结构与算法JavaScript描述》,越复杂的系统,最后都在架构与算法与数据结构上下功夫,虽然用得不多,但作为一个高手,算法不精真是一个痛点。比较实现一个选择器引擎,人家都会问你比jQuery的快吗?加之JS在这方面也有它的特殊点,因此还得学习。

时下也有许多angular与backbone的书,我本人认为他们基本上照搬官网的API文档,很少能讲到底层的实现,能获得的知识点太少了,它们只能用于入门(你英语不好的话),因此不建议入。

如何让scss变量能够当做js变量来使用

当前我们使用scss变量有两个痛点:

需要手动导入

无法与js建立联系或者很难,后续不能在此基础上做一些骚操作 为了解决这两个问题,我们以创建js文件以json格式定义scss变量,然后通过配置webpack的解析规则来达到即能像普通scss一样使用,又能作为js变量使用的目的。

scss变量使用规范

变量创建

所有scss变量在style/variables.scss.js编写,格式要求为:

只允许使用小写字母

单词间以下划线"_"连接

命名应简洁易懂,以一个大的模块或高级别的单词开头_后面跟功能描述单词结尾

const variables = {

'header_height': '60px',

'header_background': `#ededed`

}

module.exports = variables;

注意:命名以下划线连接是为了在js文件中能够单个import, 使用中已经在webpack进行转换,必须按照此格式!

在scss变量中使用是正常的scss变量:$header-height

在js中使用是定义时的变量格式:import { header_height } from "@/style/variables.scss.js";

变量使用

配置webpack中sass解析方式,一般来说项目构建者已经处理完毕,项目成员无需关心。

使用时无需引入,直接在样式文件中正常使用即可。

scss中使用示例

.the-nav{

height: $header-height;

}

js中使用示例

import { header_height } from "@/style/variables.scss.js";

...

data(){

return {

header_height: header_height

}

}

...

配置讲解

vue.config.js 中 cuecli3+

let scssVariables = require('./src/style/variables.scss.js');

module.exports = {

css: {

loaderOptions: {

  sass: {

    prependData: Object.keys(scssVariables)

      .map(k = `\$${k.replace('_', '-')}: ${scssVariables[k]};`)

      .join('\n')

  }

}

}

};

注意:此处有个坑,新版本的sass-loader更换了api参数prependData但是似乎没有文档说明

老版本的sass-loader vue.config.js 中 cuecli3+

let scssVariables = require('./src/style/variables.scss.js');

module.exports = {

css: {

loaderOptions: {

  sass: {

    data: Object.keys(scssVariables)

      .map(k = `\$${k.replace('_', '-')}: ${scssVariables[k]};`)

      .join('\n')

  }

}

}

};

老版本data = 新版本 prependData

webpack.config.js中 vuecli2

let scssVariables = require('./src/style/variables.scss.js');

...

{

test: /\.scss$/,

use: [

'css-loader',

'postcss-loader',

{

  loader: 'sass-loader',

  options: {

    data: Object.keys(scssVariables)

      .map(k = `\$${k.replace('_', '-')}: ${scssVariables[k]};`)

      .join('\n')

  }

}

]

}

链接: 

TypeScript 解决了什么痛点?

原文:

1. TS是什么 ?

TypeScript = Type + Script(标准JS)。

2. 为什么要用TS ?

目标:生命周期较长(常常持续几年)的复杂SPA应用,保障开发效率的同时提升代码的可维护性和线上运行时质量。

3. 使用 TS 的成本

学习成本

理论上学习并应用一门新语言是需要很高成本的,但好在 TS 本身是 JS 的超集,这也意味着他本身是可以支持现有 JS 代码的,至少理论上是这样。学习一下类型系统的相关知识和面向对象的基础知识,应该可以 hold 住 TS,成本不会很高。官方文档是最好的学习材料。

4. 社区发展

从 Stackoverflow 的2017年开发者调查报告、Google趋势、npm下载量趋势上可以到看,TypeScript社区发展很快,特别是最近几年。特别是伴随着 VS Code 的诞生( TS 写的,对 TS 支持非常友好),VS Code + TypeScript 的组合让前端圈产生了一股清流,生产力和规范性得到了快速提升。从 Google 对 TS 的支持(Angular 高于 2 的版本是 TS 写的)看到,国际大厂也是支持的。

从蚂蚁集团内部看,Ant Design、Basement 等产品也是基于 TS 写的(至少是在大量使用),虽然有一些反对的声音,但总体还是看好的,有合适的土壤就会快速发展,如 Ant Design。

5. 接受TS

TS 刚出来时我是有点抵触的,或者对她的感觉就跟和CoffeeScript、Dart等编译到JS语言差不多,感觉就是其他语言往JS渗透的产物,近一两年,社区中TS的声音越来越强,而我也开始做大型 JavaScript 应用,随之逐渐重新认识 TS,逐渐认识到 TS 的类型系统、TSC 的静态检查、VS Code 等 IDE 的强力支持对于开发出可维护性好、稳定性高的大型 JavaScript 应用的重要性。

6. 权衡

如何更好的利用 JS 的动态性和 TS 的静态特质,我们需要结合项目的实际情况来进行综合判断。一些建议:

至于到底用不用 TS,还是要看实际项目规模、项目生命周期、团队规模、团队成员情况等实际情况综合考虑。

所以 TypeScript 能不能成为了你的 “刚需” 就看你自己的情况了。

7. 项目实战

Vue3.0 将使用 TS 重写,重写后的 Vue3.0 将更好的支持 TS。2019 年 TypeScript 将会更加普及,能够熟练掌握 TS,并使用 TS 开发过项目,将更加成为前端开发者的优势。

笔者最近也用 vue + TypeScript + Element 进行了一次实战,感觉还是不错的。

虚影:Vue + TypeScript + Element 项目实战及踩坑记

zhuanlan.zhihu.com

TypeScript 的出现, 终于让 JavaScript 不会因为没有静态类型检查,而被后端工程师看低了。


网页标题:javascript痛点的简单介绍
地址分享:http://shouzuofang.com/article/dsipcje.html

其他资讯